/*************************************************************************


                            L   O   G   I   N


*************************************************************************/


/*************************************************************************

                               B A S I C S

*************************************************************************/


.login{
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(50,50,50,.5);
	opacity: 0;
	-webkit-transition: opacity 200ms ease;
	-moz-transition: opacity 200ms ease;
	-ms-transition: opacity 200ms ease;
	transition: opacity 200ms ease;
	z-index: 1;
	left: 0;
	top: 0;
}

.is-ios .login{
	position: absolute;
	height: 100vh;
	overflow: auto;
	min-height: 568px;
}


.login.active{
	display: block;
}

.login.shown{
	opacity: 1;
}

.login form>*{
	display: none;
	opacity: 0;
	-webkit-transition: opacity 300ms ease;
	-moz-transition: opacity 300ms ease;
	-ms-transition: opacity 300ms ease;
	transition: opacity 300ms ease;
	will-change: opacity;
}

.login form>*.active{
	display: block;
}

.login form>*.shown{
	opacity: 1;
}



/*************************************************************************

                                E N T E R

*************************************************************************/


.login .enter-form{
	position: absolute;
	top: 50%;
	left: 50%;
	max-width: 360px;
	width: 100%;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	background: #fff;
	border-radius: 4px;
	box-sizing: border-box;
	padding: 40px 15px 45px;
}

@media (max-width: 360px){

.login .enter-form{
	border-radius: 0;
}

}

.login .enter-form .close{
	position: absolute;
	width: 60px;
	height: 60px;
	right: 0;
	top: 0;
	cursor: pointer;
	opacity: 1;
	-webkit-transition: opacity 200ms ease;
	-moz-transition: opacity 200ms ease;
	-ms-transition: opacity 200ms ease;
	transition: opacity 200ms ease;
	will-change: opacity;
}

.login .enter-form .close:hover{
	opacity: .75;
}

	.login .enter-form .close:before,
	.login .enter-form .close:after{
		content: '';
		display: block;
		position: absolute;
		width: 20px;
		height: 2px;
		top: 29px;
		left: 20px;
		background: #9f9f9f; /*#d8d8d8*/
		-webkit-transform-origin: center center;
		-moz-transform-origin: center center;
		-ms-transform-origin: center center;
		transform-origin: center center;
	}

	.login .enter-form .close:before{
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	.login .enter-form .close:after{
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

.login .enter-form:before{
	content: 'Вход';
	display: block;
	text-align: center;
	font-family: GothamProNarrowMedium;
	font-size: 24px;
	line-height: 28px;
}

.login .enter-form .field{}

.login .enter-form .field+.field{
	margin-top: 10px;
}

.login .enter-form .field.email{
	margin-top: 30px;
}

	.login .enter-form .field.email .input>div:before{
		content: 'Электронная почта'
	}

	.login .enter-form .field.password .input>div:before{
		content: 'Пароль'
	}

.login .enter-form .recovery, .login .recovery-form .auth {
	color: #969696;
	margin: 10px 0 20px;
}

.login .enter-form .recovery,
.login .enter-form .recovery *{
	cursor: pointer;
}

	.login .enter-form .recovery>*{}

		.login .enter-form .recovery>*:before{
			content: 'Восстановить пароль';
		}

.login .enter-form .signin{
	display: block;
	width: auto;
	margin-top: 10px;
}

	.login .enter-form .signin:before{
		content: 'Войти';
	}

.login .enter-form .register{
	margin-top: 15px;
	font-size: 16px;
	line-height: 20px;
}

	.login .enter-form .register:before{
		content: 'Нет аккаунта? ';
		display: inline-block;
		white-space: pre;
	}

	.login .enter-form .register a{
		/*color: #3b7adb;*/
		color: #1b64b9;
	}

		.login .enter-form .register a:before{
			content: 'Зарегистрируйтесь';
		}



/*************************************************************************

                           R E C O V E R Y

*************************************************************************/


.login .recovery-form{
	position: absolute;
	top: 50%;
	left: 50%;
	max-width: 360px;
	width: 100%;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	background: #fff;
	border-radius: 4px;
	box-sizing: border-box;
	padding: 40px 15px 45px;
}

@media (max-width: 360px){

.login .recovery-form{
	border-radius: 0;
}

}

.login .recovery-form .close{
	position: absolute;
	width: 60px;
	height: 60px;
	right: 0;
	top: 0;
	cursor: pointer;
	-webkit-transition: opacity 200ms ease;
	-moz-transition: opacity 200ms ease;
	-ms-transition: opacity 200ms ease;
	transition: opacity 200ms ease;
	will-change: opacity;
}

.login .recovery-form .close:hover{
	opacity: .75;
}

	.login .recovery-form .close:before,
	.login .recovery-form .close:after{
		content: '';
		display: block;
		position: absolute;
		width: 20px;
		height: 2px;
		top: 29px;
		left: 20px;
		background: #9f9f9f;
		-webkit-transform-origin: center center;
		-moz-transform-origin: center center;
		-ms-transform-origin: center center;
		transform-origin: center center;
	}

	.login .recovery-form .close:before{
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	.login .recovery-form .close:after{
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

.login .recovery-form:before{
	content: 'Восстановить пароль';
	display: block;
	text-align: center;
	font-family: GothamProNarrowMedium;
	font-size: 24px;
	line-height: 28px;
}

.login .recovery-form .comment{
	font-size: 16px;
	margin-top: 15px;
}

.login .recovery-form .field{}

.login .recovery-form .field+.field{
	margin-top: 10px;
}

.login .recovery-form .field.email{
	margin-top: 10px;
}

	.login .recovery-form .field.email .input>div:before{
		content: 'Электронная почта'
	}

.login .recovery-form .recovery{
	display: block;
	width: auto;
	margin-top: 10px;
}

	.login .recovery-form .recovery:before{
		content: 'Восстановить';
	}