@font-face {
	font-family: 'Gotham Pro';
	src: url("../fonts/gothampro/subset-GothamPro-Black.eot");
	src: url("../fonts/gothampro/subset-GothamPro-Black.eot?#iefix") format("embedded-opentype"), url("../fonts/gothampro/subset-GothamPro-Black.woff") format("woff"), url("../fonts/gothampro/subset-GothamPro-Black.ttf") format("truetype");
	font-weight: 900;
	font-style: normal;
}

@font-face {
	font-family: 'Gotham Pro';
	src: url("../fonts/gothampro/subset-GothamPro.eot");
	src: url("../fonts/gothampro/subset-GothamPro.eot?#iefix") format("embedded-opentype"), url("../fonts/gothampro/subset-GothamPro.woff") format("woff"), url("../fonts/gothampro/subset-GothamPro.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Gotham Pro';
	src: url("../fonts/gothampro/subset-GothamPro-Bold.eot");
	src: url("../fonts/gothampro/subset-GothamPro-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/gothampro/subset-GothamPro-Bold.woff") format("woff"), url("../fonts/gothampro/subset-GothamPro-Bold.ttf") format("truetype");
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Gotham Pro';
	src: url("../fonts/gothampro/subset-GothamPro-Medium.eot");
	src: url("../fonts/gothampro/subset-GothamPro-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/gothampro/subset-GothamPro-Medium.woff") format("woff"), url("../fonts/gothampro/subset-GothamPro-Medium.ttf") format("truetype");
	font-weight: 500;
	font-style: normal;
}

audio,
canvas,
iframe,
img,
svg,
video {
	vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */
fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */
textarea {
	resize: vertical;
}

.clearfix:before,
.clearfix:after {
	content: " ";
	/* 1 */
	display: table;
	/* 2 */
}

.clearfix:after {
	clear: both;
}

.psbg {
	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAAAAAA6mKC9AAAAGElEQVR42mM4AwX/oYBhgARgDJjEAAkAAPQn5YH2vByJAAAAAElFTkSuQmCC") left top repeat;
}

* {
	box-sizing: border-box;
}

body {
	font-family: 'Gotham Pro', Verdana, Geneva, sans-serif;
	color: #000;
}

.container {
	width: 960px;
	margin: 0 auto;
	padding: 0 15px;
}

footer {
	background-color: #000000;
	color: #f9f9fb;
	font-size: 17px;
	line-height: 1.2;
	padding: 60px 0;
}

footer a {
	color: #f9f9fb;
	text-decoration: none;
}

footer .contacts {
	float: left;
}

footer .phone {
	font-size: 25px;
	line-height: 25px;
	padding-top: 10px;
}

footer .social {
	float: right;
}

footer .social ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

footer .social li {
	display: inline-block;
	margin-left: 20px;
}

footer .social li:first-child {
	margin-left: 0;
}

footer .social img {
	max-width: 27px;
	max-height: 27px;
}

.section--intro {
	background: #ceccce url(../img/beton4.jpg) center center repeat;
	height: 600px;
	text-align: center;
	font-weight: bold;
	padding-top: 310px;
	overflow: hidden;
	position: relative;
}

.section--intro .man {
	position: absolute;
	z-index: 2;
	top: 40px;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
}

.section--intro .man span {
	display: inline-block;
	width: 600px;
	height: 600px;
	background: url(../img/mansm.png) center center no-repeat;
	background-size: 600px 600px;
}

.section--intro h1 {
	margin: 0;
	background-color: #050505;
	font-size: 35px;
	line-height: 80px;
	height: 80px;
	color: #fff;
	position: relative;
	z-index: 3;
}

.section--intro .ulogo {
	display: inline-block;
	position: absolute;
	top: 70px;
	z-index: 4;
	left: 50%;
	margin-left: 290px;
	width: 178px;
	height: 178px;
	background: url(../img/4utoplogo.png) center center no-repeat;
}

.section--intro2 {
	background-color: #050505;
	color: #fff;
	font-weight: bold;
	height: 110px;
	text-align: center;
}

.section--intro2 h2 {
	margin: 0;
	font-size: 64px;
	line-height: 110px;
}

.section--how {
	background: #b9beec url(../img/polygon.jpg) center top no-repeat;
	background-size: cover;
	height: 400px;
	/*color: #000;*/
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	padding-top: 35px;
}

.section--how .title {
	font-size: 50px;
	font-weight: bold;
	margin-bottom: 10px;
}

.section--how .subtitle {
	font-size: 33px;
	font-weight: bold;
	margin-bottom: 45px;
}

.section--how .how-title {
	font-size: 29px;
	/*color: #063154;*/
	font-weight: bold;
	margin-bottom: 30px;
}

.section--how .how {
	font-size: 11px;
	font-weight: bold;
	/*color: #090909;*/
}

.section--how .col {
	float: left;
	width: 25%;
}

.section--how .digit {
	/*color: #1e6581;*/
	font-weight: bold;
	font-size: 33px;
	text-align: left;
	padding-left: 80px;
}

.section--how .image-block {
	float: left;
	width: 80px;
}

.section--how .text {
	margin-left: 80px;
	text-align: left;
	line-height: 17px;
	padding-top: 5px;
}

.section--demo {
	background: #f1f1f1 url(../img/brick.jpg) center center repeat;
	height: 615px;
	text-align: center;
	padding-top: 40px;
}

.section--demo .title {
	color: #090909;
	font-weight: bold;
	font-size: 28px;
	line-height: 1.2;
	text-transform: uppercase;
	margin-bottom: 25px;
}

.section--demo .title .red {
	color: #ed3636;
}

.section--demo .ipad {
	display: block;
	width: 600px;
	height: 411px;
	background: url(../img/ipad.png) center top no-repeat;
	margin: 0 auto 30px;
}

.section--demo .inner {
	height: 380px;
	padding: 30px 67px 0 68px;
}

a.btn {
	display: inline-block;
	background-color: rgba(255, 0, 0, 0.7);
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	height: 50px;
	line-height: 50px;
	font-size: 17px;
	padding: 0 27px;
}

a.btn:hover {
	background-color: #f00;
}

.section--who {
	position: relative;
	background: #c1bce9 url(../img/polygon.jpg) center top no-repeat;
	background-size: cover;
	height: 1075px;
	color: #000;
	text-align: center;
	padding-top: 50px;
}

.section--who .bg2 {
	position: absolute;
	background: url(../img/4u-big.png) center top no-repeat;
	width: 900px;
	height: 900px;
	top: 25px;
	left: 50%;
	margin-left: -450px;
	z-index: 2;
}

.section--who .title {
	font-size: 72px;
	line-height: 1.2;
	font-weight: bold;
	position: relative;
	z-index: 3;
}

.section--who .image {
	position: relative;
	z-index: 3;
	padding-top: 25px;
	padding-right: 80px;
}

.section--who .about {
	position: absolute;
	z-index: 5;
	bottom: 70px;
	background-color: rgba(255, 255, 255, 0.85);
	height: 440px;
	width: 260px;
	border-radius: 5px;
	font-size: 16px;
	line-height: 17px;
	font-weight: 500;
	padding: 0 15px;
}

.section--who .about h4 {
	font-size: 46px;
	line-height: 60px;
	margin: 20px auto 0;
	font-weight: bold;
}

.section--who .about span {
	font-size: 21px;
	line-height: 21px;
}

.section--who .about--left {
	right: 50%;
	margin-right: 210px;
}

.section--who .about--right {
	left: 50%;
	margin-left: 210px;
}

.section--who .btn {
	position: absolute;
	bottom: 70px;
	left: 50%;
	margin-left: -120px;
	width: 240px;
}

.section--order {
	background: #ceccce url(../img/beton4.jpg) center center repeat;
	height: 300px;
	text-align: center;
	position: relative;
	padding-top: 170px;
}

.section--order .ulogo {
	display: inline-block;
	position: absolute;
	top: 40px;
	width: 90px;
	height: 90px;
	z-index: 4;
	left: 50%;
	margin-left: -45px;
	background: url(../img/4ulogo2.png) center center no-repeat;
	background-size: 90px 90px;
}

.section--order .inner {
	background-color: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-weight: 900;
	font-size: 33px;
	line-height: 50px;
	text-transform: uppercase;
	padding-top: 20px;
	margin-bottom: 30px;
}

.section--order .price {
	color: #c50304;
	font-size: 83px;
	line-height: 83px;
}

.section--order .price span {
	font-size: 33px;
}



/* modal */
#modal__bg
{
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.6);

	display: none;
}
#modal__feedback
{
	display: none;

	position: fixed;
	z-index: 101;
	top: 50%;
	left: 50%;
	width: 280px;
	transform: translate(-50%,-50%);
	padding: 15px;
	border: 1px solid #7d7d7d;
	border-radius: 5px;
	text-align: center;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e8b5fe+0,a2e3fb+100 */
	background: #e8b5fe; /* Old browsers */
	background: -moz-linear-gradient(45deg,  #e8b5fe 0%, #a2e3fb 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg,  #e8b5fe 0%,#a2e3fb 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg,  #e8b5fe 0%,#a2e3fb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8b5fe', endColorstr='#a2e3fb',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

	font-family: Verdana, Geneva, sans-serif;
}
#modal__feedback input
{
	-webkit-appearance: none;
	width: 100%;
	margin-bottom: 15px;
	border: 1px solid #b5b5b5;
	border-radius: 2px;
	font-size: 15px;
	padding: 5px;
}
#modal__feedback button
{
	-webkit-appearance: none;
	text-transform: uppercase;
	background-color: #007ad0;
	color: #fff;
	text-align: center;
	width: 125px;
	height: 25px;
	line-height: 25px;
	border: 0;
	border-radius: 3px;
	font-size: 12px;
}
#modal__feedback button span
{
	display: none;
}
#modal__feedback button.ready span.ready
{
	display: inline-block;
}
#modal__feedback button.loading span.loading
{
	display: inline-block;
}
#modal__feedback button.sent span.sent
{
	display: inline-block;
}