/*/////////////////////////////////////////////////////////////////////////
//                      Стили страничк авторизации                       //
/////////////////////////////////////////////////////////////////////////*/

body { background-color: #F6F6F6;; }

.text { 
	transform: translateX(0px);
	animation: animText 3s;
	width: 250px;
	height: 100px;
	//margin-bottom: 18px;
}

.logo {
	transform: translateX(0px) rotate(0deg);
	animation: animLogo 2s;
	width: 100px;
	height: 100px;
	border-radius: 15px;
}

.container {
	margin: 100px auto;
	width: 200px;
	margin-top: 10%;
}

.block_lang_select {
	display: inline-block;
    position: absolute;
    top: 15px;
    right: 15px;
	animation: bounceButton 1.6s;
}

.lang_select {
	background-color: #F6F6F6;
	border-width: 0px;
	border-bottom: 1px solid #d9d9d9;
}


.flag_ua {
	background-image: url('/Template/images/ua.png');
	width: 48px;
	height: 48px;
	float: right;
	cursor: pointer;
	animation: flag 1.6s;
}

.flag_ru {
	background-image: url('/Template/images/ru.png');
	width: 48px;
	height: 48px;
	float: right;
	cursor: pointer;
	animation: flag 1.4s;
}

.flag_us {
	background-image: url('/Template/images/us.png');
	width: 48px;
	height: 48px;
	float: right;
	cursor: pointer;
	animation: flag 1.2s;
	-webkit-animation: flag 1.2s;
}

label {
	position: relative;
	display: block;
}

input[name=login], input[name=password] {
	position: relative;
	margin-bottom: 10px;
	padding: 5px 5px;
	outline: none;
	border: solid 1px #888;
	border-radius: 5px;
	width: 180px;
}

input[type=submit] {
	float: right;
	position: relative;
	top: 0;
	width: 80px;
	margin-right: 7px;
	opacity: 1;
	animation: bounceButton 1.6s;
	-webkit-animation: bounceButton 1.6s;
}

input[name=login], label[for=login] {
	top: 0;
	opacity: 1;
	animation: bounce1 1s; 
	-webkit-animation:  bounce1 1s; 
}

[name=password], label[for=password] {
	top: 0;
	opacity: 1;
	animation: bounce2 1.3s;
	-webkit-animation:  bounce2 1s;
//	 animation-duration: 4s;
//    animation-iteration-count: 3;

}

svg {
	display: inline-block;
	width: 1.3rem;
	overflow: visible;
}

.svg-icon {
	//cursor: pointer;
}
.svg-icon path {
	stroke: #999999;
	fill: none;
	stroke-width: 1;
}

.login__icon {
	display: block;
	margin-bottom: -1.4rem;
	position: relative;
	right: 25px;
}
.login__icon.name path {
	stroke-dasharray: 73.50196075439453;
	stroke-dashoffset: 73.50196075439453;
	-webkit-animation: animatePath 2s 0.5s forwards;
			animation: animatePath 2s 0.5s forwards;
}
.login__icon.pass path {
	stroke-dasharray: 92.10662841796875;
	stroke-dashoffset: 92.10662841796875;
	-webkit-animation: animatePath 2s 0.5s forwards;
		animation: animatePath 2s 0.5s forwards;
}


/*/////////////////////////////////////////////////////////////////////////
//                            Скрипты анимаций                           //
/////////////////////////////////////////////////////////////////////////*/

@keyframes flag {
	0% {
		opacity: 0;
		margin-top:  -100px;
	}
		40% {
		opacity: 0;
	}
}

@keyframes bounce1 {
	0% {
		top: -250px;
		opacity: 0;
	}
}

@keyframes bounce2 {
	0% { opacity: 0; }
	40% {
		top: -100px;
		opacity: 0;
	}
}

@keyframes bounceButton {
	0% { opacity: 0 }
	70% { top: -50px; opacity: 0 }
}

@keyframes animLogo {
	0%, 25% {
		opacity: 0;
		transform: translateX(200px) rotate(180deg);
	}
	75%, 100% {
		opacity: 1;
		transform: translateX(0px) rotate(0deg);
	}
}

@keyframes animText {
	0%, 25% {
		opacity: 0;
		transform: translateX(-300px);
	}
	75%, 100% {
		opacity: 10;
		transform: translateX(0px);
	}
}

@-webkit-keyframes animatePath {
	to {
		stroke-dashoffset: 0;
	}
}
@keyframes animatePath {
	to {
		stroke-dashoffset: 0;
	}
}