@charset "UTF-8";
.mfp-login .modal-login {
		opacity: 0;
		transition-property: transform, opacity;
		transition-duration: 0.2s;
		transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
		transform: translate3d(0, 0, 0);
}
.mfp-login.mfp-ready .modal-login {
		opacity: 1;
		transform: translate3d(0, 0, 0);
}
.mfp-login.mfp-removing .modal-login {
		opacity: 0;
		transform: translate3d(0, 0, 0);
}
.mfp-login.mfp-bg {
		opacity: 0;
		transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
		background: var(--white);
}
.mfp-login.mfp-ready.mfp-bg {
		opacity: 1;
}
.mfp-login.mfp-removing.mfp-bg {
		opacity: 0;
}
.mfp-login .mfp-container {
		padding: 0 !important;
		overflow: hidden !important;
		height: 100% !important;
}
.mfp-login .mfp-container:before {
		display: none;
}
.mfp-login .mfp-content {
		vertical-align: bottom;
		height: 100% !important;
		display: flex;
		flex-direction: column;
		overflow: hidden !important;
		touch-action: none;
		user-select: none;
}
.modal-login {
		flex: 0 0 auto;
		width: 100%;
		height: 100%;
		position: relative;
}
.modal-login .image {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-size: cover;
}
.modal-login.bg-reg .image {
		background-color: #90bbd7;
		background-image: url(../img/login/mob-reg.png);
}
.modal-login.bg-login .image {
		background-color: #d0d8d5;
		background-image: url(../img/login/mob-login.png);
}
.modal-login.bg-password .image {
		background-color: #cdcdc8;
		background-image: url(../img/login/mob-password.png);
}
.modal-login-close {
		cursor: pointer;
		border: 0;
		outline: none;
		width: 40px;
		height: 40px;
		position: absolute;
		top: 0;
		right: 0;
		user-select: none;
}
.modal-login-close svg {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate3d(-50%, -50%, 0);
		fill: #2D3748;
		transition: fill 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
@media (pointer:fine) {
		.modal-login-close:hover svg {
				fill: var(--orange);
		}
}
.modal-login-inner {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		overflow-y: auto;
		background: rgba(255, 255, 255, 0.1);
		-webkit-backdrop-filter: blur(32px);
		backdrop-filter: blur(32px);
		transform: translateZ(0);
		backface-visibility: hidden;
}
.modal-login .wrap {
		flex: 0 0 auto;
		width: 100%;
		padding: 40px 25px;
		margin: auto;
		max-width: 352px;
		position: relative;
}
.modal-login-title {
		text-align: center;
		margin: 0 0 38px 0;
		font: normal 14px/26px var(--fontg);
		letter-spacing: 0.005em;
		color: #2D3748;
}
.modal-login-title:before {
		content: '';
		display: block;
		margin: 0 auto 8px auto;
		background: url(../img/logo/sq.svg) no-repeat 50% 50%;
		background-size: contain;
		width: 29px;
		height: 29px;
}
.modal-login-title .big {
		font-weight: 900;
		font-size: 24px;
		line-height: 40px;
		letter-spacing: normal;
		margin: 0 0 24px 0;
		color: #31396D;
}
.modal-login-title a {
		color: var(--white);
		text-decoration: underline;
		font-weight: 500;
		font-size: 16px;
}
@media (pointer:fine) {
		.modal-login-title a:hover {
				text-decoration: none;
		}
}
@media only screen and (max-width: 767px) {
		.modal-login .main-input input {
				border-radius: 0;
				background: none;
				height: 60px;
				padding-left: 16px;
				border-width: 0 0 1px 0;
				border-color: rgba(255, 255, 255, 0.7);
				color: #2D3748;
				box-shadow: none !important;
		}
		.modal-login .main-input input:focus {
				border-color: var(--yellow);
		}
		.modal-login .main-input input::-webkit-input-placeholder {
				font-size: 12px;
				letter-spacing: -0.01em;
				color: rgba(21, 33, 54, 0.5);
		}
		.modal-login .main-input input::-moz-placeholder {
				font-size: 12px;
				letter-spacing: -0.01em;
				color: rgba(21, 33, 54, 0.5);
		}
		.modal-login .main-input input:-ms-input-placeholder {
				font-size: 12px;
				letter-spacing: -0.01em;
				color: rgba(21, 33, 54, 0.5);
		}
		.modal-login input[type="password"] {
				padding-right: 54px;
		}
		.modal-login .eye {
				width: 54px;
		}
		.modal-login .eye svg {
				fill: var(--white);
		}
		.modal-login .main-checks, .modal-login .main-checks a {
				color: var(--white);
		}
		.modal-login .main-checks a {
				text-decoration: underline;
		}
		@media (pointer:fine) {
				.modal-login .eye:hover svg {
						fill: var(--orange);
				}
				.modal-login .main-checks a:hover {
						text-decoration: none;
				}
				.modal-login .checkbox {
						border-width: 0;
						background: rgba(247, 250, 252, 0.8);
				}
		}
}
.modal-login-el {
		margin: 0 0 21px 0;
}
.modal-login .password-checker {
		margin: 28px 0 30px 0;
}
.modal-login-submit {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 20px;
		margin: 38px 0 0 0;
		font: 600 13px/24px var(--fontg);
		color: var(--white);
}
.modal-login-submit .btn {
		padding: 0 42px;
}
.modal-login-submit .btn .for-tablet {
		display: none;
}
.modal-login-submit a {
		text-decoration: none;
		color: var(--white);
}
@media (pointer:fine) {
		.modal-login-submit a:hover {
				text-decoration: underline;
		}
}
.modal-login-submit .btn.wide {
		width: 100%;
}
.modal-login-submit .captcha {
		display: none;
}
.modal-login .or {
		overflow: hidden;
		text-align: center;
		margin: 36px 0 12px 0;
		color: rgba(255, 255, 255, 0.7);
		font: 600 12px/18px var(--fontg);
		letter-spacing: 0.005em;
}
.modal-login .or:before, .modal-login .or:after {
		content: '';
		display: inline-block;
		vertical-align: middle;
		position: relative;
		width: 100vw;
		top: -1px;
		height: 1px;
		background: rgba(255, 255, 255, 0.5);
}
.modal-login .or:before {
		margin-left: -100vw;
		left: -10px;
}
.modal-login .or:after {
		margin-right: -100vw;
		left: 10px;
}
.modal-login-social {
		display: flex;
		align-items: center;
}
.modal-login-social > * {
		opacity: 0.6;
		font: 600 12px/30px var(--fontg);
		color: var(--white);
		letter-spacing: -0.01em;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		gap: 8px;
		text-decoration: none;
		padding: 15px 0;
		transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
@media (pointer:fine) {
		.modal-login-social > a:hover {
				opacity: 1;
		}
}
.modal-login-social > *:before {
		content: '';
		flex: 0 0 auto;
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-size: contain;
}
.modal-login-social > .bg-google:before {
		background-image: url(../img/login/social/white-google.svg);
		width: 19px;
		height: 20px;
}
.modal-login-social > .bg-vk:before {
		background-image: url(../img/login/social/white-vk.svg);
		width: 25px;
		height: 14px;
}
/*mobile end*/
/*tablet start*/
@media only screen and (min-width: 768px) {
		.modal-login.bg-reg .image {
				background-image: url(../img/login/tab-reg.png);
		}
		.modal-login.bg-login .image {
				background-image: url(../img/login/tab-login.png);
		}
		.modal-login.bg-password .image {
				background-image: url(../img/login/tab-password.png);
		}
		.modal-login-close {
				width: 40px;
				height: 40px;
				margin: 60px;
		}
		.modal-login-close svg {
				width: 40px;
				height: 40px;
		}
		.modal-login-inner {
				background: none;
				-webkit-backdrop-filter: none;
				backdrop-filter: none;
				border-radius: 0;
				box-shadow: none;
				border: 0;
		}
		.modal-login .wrap {
				background: rgba(255, 255, 255, 0.75);
				box-shadow: 0px 0px 2px rgba(7, 22, 51, 0.15), 0px 50px 80px rgba(7, 22, 51, 0.25);
				-webkit-backdrop-filter: blur(10px);
				backdrop-filter: blur(10px);
				border-radius: 24px;
				padding: 50px;
				max-width: 520px;
				position: relative;
		}
		.modal-login-title {
				margin-bottom: 25px;
				font-size: 15px;
				letter-spacing: 0.005em;
				color: #7487A8;
				text-align: left;
		}
		.modal-login-title:before {
				width: 60px;
				height: 60px;
				position: absolute;
				bottom: 100%;
				left: 50%;
				margin: 80px -30px;
		}
		.modal-login-title .big {
				margin-bottom: 15px;
				color: #657CA4;
				letter-spacing: -0.01em;
		}
		.modal-login-title a {
				color: var(--blue);
				font-size: 17px;
				font-weight: 600;
				text-decoration: none;
		}
		@media (pointer:fine) {
				.modal-login-title a:hover {
						text-decoration: underline;
				}
		}
		.modal-login-el {
				margin-bottom: 20px;
		}
		.modal-login .password-checker {
				margin-top: 20px;
				margin-bottom: 30px;
		}
		.modal-login-submit {
				margin-top: 25px;
				font-size: 15px;
				flex-wrap: nowrap;
		}
		.modal-login-submit .btn {
				padding: 0 39px;
				min-width: 180px;
				font-size: 16px;
		}
		.modal-login-submit .btn .for-mobile {
				display: none;
		}
		.modal-login-submit .btn .for-tablet {
				display: inline;
		}
		.modal-login-submit a {
				color: var(--blue);
		}
		.modal-login-submit .btn.wide {
				padding: 0;
				width: 180px;
		}
		.modal-login-submit .captcha {
				display: block;
				transform-origin: 0 50%;
				margin: -20px 0;
				transform: scale(0.73);
		}
		.modal-login .or {
				font-size: 14px;
				color: var(--darker);
				font-weight: 500;
				max-width: 342px;
				margin: 35px auto 24px auto;
		}
		.modal-login .or:before, .modal-login .or:after {
				background: rgba(148, 164, 196, 0.5);
		}
		.modal-login .or:before {
				left: -18px;
		}
		.modal-login .or:after {
				left: 18px;
		}
		.modal-login-social {
				gap: 20px;
		}
		.modal-login-social > * {
				opacity: 1;
				background: var(--white);
				border-radius: 25px;
				font-size: 14px;
				color: var(--sec-dark);
				gap: 16px;
				height: 50px;
				padding: 0;
				transition: none;
		}
		.modal-login-social > .bg-google:before {
				background-image: url(../img/login/social/color-google.svg);
		}
		.modal-login-social > .bg-vk:before {
				background-image: url(../img/login/social/color-vk.svg);
				width: 28px;
				height: 16px;
		}
}
/*tablet end*/
/*desktop start*/
@media only screen and (min-width: 1280px) {
		.mfp-login .modal-login {
				opacity: 0;
				transform: translate3d(0, 60px, 0);
		}
		.mfp-login.mfp-ready .modal-login {
				opacity: 1;
				transform: translate3d(0, 0, 0);
		}
		.mfp-login.mfp-removing .modal-login {
				opacity: 0;
				transform: translate3d(0, 60px, 0);
		}
		.mfp-login.mfp-bg {
				opacity: 0;
				background: #061523;
		}
		.mfp-login.mfp-ready.mfp-bg {
				opacity: 0.6;
		}
		.mfp-login.mfp-removing.mfp-bg {
				opacity: 0;
		}
		.modal-login {
				height: auto;
				max-width: 1200px;
				margin: auto;
				background: var(--white);
				box-shadow: 0px 0px 2px rgba(38, 73, 141, 0.14), 0px 30px 80px rgba(9, 66, 153, 0.12);
				border-radius: 7px;
				max-height: 100%;
		}
		.modal-login .image {
				left: 520px;
				border-radius: 0 7px 7px 0;
		}
		.modal-login.bg-reg .image {
				background-image: url(../img/login/desktop-reg.png);
		}
		.modal-login.bg-login .image {
				background-image: url(../img/login/desktop-login.png);
		}
		.modal-login.bg-password .image {
				background-image: url(../img/login/desktop-password.png);
		}
		.modal-login-close {
				width: 66px;
				height: 66px;
				margin: 0;
		}
		.modal-login-close svg {
				fill: #475C81;
				width: auto;
				height: auto;
		}
		.modal-login-inner {
				height: 100%;
		}
		.modal-login .wrap {
				-webkit-backdrop-filter: none;
				backdrop-filter: none;
				background: none;
				box-shadow: none;
				border-radius: 0;
				max-width: none;
				width: 520px;
				margin: 0;
		}
		.modal-login-title:before {
				display: none;
		}
		.modal-login-social > * {
				border: 1px solid rgba(191, 204, 227, 0.4);
		}
		.modal-login.min {
				max-width: 520px;
		}
		.modal-login.min .image {
				display: none;
		}
		.modal-login.min .modal-login-close svg {
				fill: var(--sec-dark);
		}
}