/*@import url(reset.css);*/
@import url(font-awesome.min.css);
@font-face {
	font-family: 'Roboto';
	src: url(../fonts/Roboto.eot);
	src:
		 url(../fonts/Roboto.eot?#iefix) format('embedded-opentype'),
		 url(../fonts/Roboto.woff) format('woff'),
		 url(../fonts/Roboto.ttf) format('truetype'),
		 url(../fonts/Roboto.svg) format('svg');
	font-weight: normal;
	font-style: normal;
}

.height_002 input[type="text"] { width: 100%; height: 140px; }

/*Стиль кнопки, вызывающее модальное окно*/
.linkButton{ cursor: pointer; }
/*Стиль фона заполняющего всю область экрана при открытии модального окна*/
.remodal-overlay{ background: rgba(125, 125, 125, 0.6); }
/*Область формы*/
.formArea {
	min-width: 600px;
	max-width: 725px;
	margin: 0 auto;
	padding: 30px 20px 30px 20px;
	text-align: center;
	background: #fff;
	border-radius: 0px;
	box-shadow: 0 0 0px rgba(2, 19, 48, 0.7);
	font: 16px 'Roboto', sans-serif;
}

@media (max-width: 989px) { .formArea { min-width: 400px; } }
@media (max-width: 400px) { .formArea { min-width: 300px; } }

.formTitle, .msgs{
	font-size: 2.125rem;
	color: #252525;
	margin: 20px 0px 20px 0px;
}
.ui-input {
	position: relative;
	padding: 0;
	border: 0;
}
.ui-input input {
	border: 0;
	background: none;
	padding: 8px 0 8px 0;
	font-size: 2.125rem;
	outline: 0;
	width: 100%;
	tap-highlight-color: transparent;
	touch-callout: none;
}
.ui-input input + label {
	position: relative;
	display: block;
	padding: 4px 0 12px 0;
	text-transform: uppercase;
	font-size: 1.2rem;
	letter-spacing: .0875em;
	font-weight: 500;
	text-align: left;
}
.ui-input input + label::before, .ui-input input + label::after {
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	width: 100%;
	height: 1px;
}
.ui-input input + label::before { background-color: rgba(119, 119, 119, 1.0); }
.ui-input input + label::after {
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
	background-color: #a00000;
	height: 2px;
}
.ui-input input + label span {
	position: relative;
	color: rgba(3, 122, 142, 1.0);
	transition: color 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.ui-input input + label span::after {
	content: attr(data-text);
	position: absolute;
	overflow: hidden;
	left: 0;
	transform: scaleX(1);
	white-space: nowrap;
	color: #252525;
/*	background-image: linear-gradient(to right, #fff 100%, rgba(255, 255, 255, 0) 0%); */
	background-position: 100% 100%;
	background-size: 200%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	backface-visibility: hidden;
	perspective: 1000;
	transform: translateZ(0);
	transition: background-position 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

.ui-input input:focus + label::after,
.ui-input input.error + label::after,
.ui-input input:invalid + label::after,
.ui-input input.filled + label::after {
	transform: scaleX(1);
	transform-origin: left;
}
.ui-input input:focus + label span::after,
.ui-input input.error + label span::after,
.ui-input input:invalid + label span::after,
.ui-input input.filled + label span::after {
/*	background-image: linear-gradient(to right, white 100%, rgba(255, 255, 255, 0) 0%); */
	background-position: 0% 100%;
}

.ui-input input.filled { color: #c2c2c2; }
.ui-input input.filled + label::after { background-color: #c2c2c2; }
.ui-input input.filled + label span::after {
/*	background-image: linear-gradient(to right, #ffffff 100%, rgba(255, 255, 255, 0) 0%); */
	background-position: 0% 100%;
}

.ui-input input:focus { color: #252525; }
.ui-input input:focus + label::after { background-color: #252525; }
.ui-input input:focus + label span::after {
/*	background-image: linear-gradient(to right, #a00000 100%, rgba(255, 255, 255, 0) 0%); */
	background-position: 0% 100%;
}

.ui-input input.error,
.ui-input input:invalid { color: #a00000; }
.ui-input input.error + label::after,
.ui-input input:invalid + label::after { background-color: #a00000; }
.ui-input input.error + label span::after,
.ui-input input:invalid + label span::after {
	background-image: linear-gradient(to right, #a00000 100%, rgba(255, 255, 255, 0) 0%);
	background-position: 0% 100%;
}

.form-footer{ margin-top: 40px; }

.formBtn {
	border: 1px solid #555;
	cursor: pointer;
	background-color: #fff;
	color: #252525;
	font-family: 'Roboto', sans-serif;
	width: 100%;
	padding: 15px 0;
	font-size: 18px;
	text-transform: uppercase;
	letter-spacing: .0875em;
	font-weight: 500;
	border-radius: 0px;
	outline: 1;
	box-shadow: 0 0 0px rgba(5, 19, 41, 0.5);
	transition: background-color 300ms cubic-bezier(0.215, 0.61, 0.355, 1), color 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.formBtn:hover {
	background-color: #a00000;
	color: #fff;
	font-weight: 500;
	box-shadow: 0 0px 0px rgba(5, 19, 41, 0.94);
	transition: .2s;
	zoom:1.000;
}

.formCreator {
	text-align: center;
	margin-top: 10px;
}
.formCreator a {
	font-size: .8rem;
	color: #4e596a;
	text-decoration: none;
}

.btn:focus, .btn:active,
.btn:hover {
	background-color: #a00000;
	color: white;
}

.__first, .__second, .__third, .__fourth {
	animation-name: fadeIn;
	animation-duration: 180ms;
	animation-fill-mode: both;
	animation-iteration-count: 1;
}

.__first { animation-delay: 0; }
.__second { animation-delay: 80ms; }
.__third { animation-delay: 180ms; }
.__fourth { animation-delay: 360ms; }

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translate3d(0, -25%, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1199px) {}
/* Medium Devices, Desktops */
@media only screen and (max-width : 991px) {}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 486px) {}
