﻿@font-face {
	font-family: 'Museo Sans Cyrl 900';
	src: url('../fonts/MuseoSansCyrl-900.eot');
	src: url('../fonts/MuseoSansCyrl-900.eot?#iefix') format('embedded-opentype'),
		url('../fonts/MuseoSansCyrl-900.woff') format('woff'),
		url('../fonts/MuseoSansCyrl-900.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Museo Sans Cyrl 500';
	src: url('../fonts/MuseoSansCyrl-500.eot');
	src: url('../fonts/MuseoSansCyrl-500.eot?#iefix') format('embedded-opentype'),
		url('../fonts/MuseoSansCyrl-500.woff') format('woff'),
		url('../fonts/MuseoSansCyrl-500.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Museo Sans Cyrl 300';
	src: url('../fonts/MuseoSansCyrl-300.eot');
	src: url('../fonts/MuseoSansCyrl-300.eot?#iefix') format('embedded-opentype'),
		url('../fonts/MuseoSansCyrl-300.woff') format('woff'),
		url('../fonts/MuseoSansCyrl-300.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
}



@font-face {
	font-family: 'Museo Sans Cyrl 700';
	src: url('../fonts/MuseoSansCyrl-700.eot');
	src: url('../fonts/MuseoSansCyrl-700.eot?#iefix') format('embedded-opentype'),
		url('../fonts/MuseoSansCyrl-700.woff') format('woff'),
		url('../fonts/MuseoSansCyrl-700.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
}



body {margin: 0;font-family: 'Museo Sans Cyrl 500';font-size: 16px;font-weight: normal;line-height: 1.2;color: #211b1a;}
*, :before, :after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

h1,h2,h3,h4,h5,h6, p {
	margin: 0;
	font-weight: normal;
}

a {
	text-decoration: none;
	color: #252525;
}



.container {width: 1206px;margin: 0 auto;}

.main {
    height: 818px;
    background: url(../images/main.jpg) no-repeat top;
    text-align: center;
    padding-top: 57px;
    color: #fff;
}
.logo:hover {
	color: #fff;
}
.logo {
    color: #fff;
    display: block;
    margin-bottom: 35px;
}
.main .logo img {
    display: block;
    margin: 0 auto;
    margin-bottom: 36px;
}
.logo .i1 {
    display: block;
    font-size: 39.94px;
    font-family: 'Museo Sans Cyrl 900';
    line-height: 1;
}
.logo .i2 {
    font-size: 23.98px;
}
.main-wrap {
    border: 4px solid #FFFF00;
    padding: 39px 10px 40px;
    max-width: 940px;
    margin: 0 auto;
    margin-bottom: 65px;
}
.main h2 {
    font-size: 45.93px;
    margin-top: 0;
    line-height: 1.3;
    margin-bottom: 26px;
}
.main h2 .under {
    border-bottom: 1px solid;
    display: inline-block;
    line-height: 1;
}
.main h2 .bg {
    color: #000;
    background: #FFFF00;
    display: inline-block;
    padding: 0 10px;
}
.main h1 {
    font-size: 62.83px;
    color: #ffff00;
    font-family: 'Museo Sans Cyrl 900';
}
.main h1 span {
    color: #fff;
}
.btns:hover {
	background: #eaea00;
}
.btns {
    display: block;
    width: 100%;
    text-align: center;
    height: 80px;
    line-height: 80px;
    background: #FFFF00;
    border-radius: 50px;
    font-size: 29.03px;
    font-family: 'Museo Sans Cyrl 700';
    text-transform: uppercase;
}
.main .btns {
    max-width: 410px;
    margin: 0 auto;
    color: #000;
}

.traffic {
    height: 662px;
    background: url(../images/traffic.jpg) no-repeat top;
    padding-top: 76px;
}
.traffic-wrap {}
.traffic .left {
    width: 562px;
    float: left;
}
.traffic h2:after {
	content: '';
	display: block;
	width: 60px;
	height: 41px;
	background: url(../images/arrow.png);
	position: absolute;
	right: -78px;
	top: 12px;
}
.traffic h2 {
    font-family: 'Museo Sans Cyrl 900';
    font-size: 66.37px;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    margin-bottom: 0px;
}
.traffic h2 span {
    background: #FFFF00;
    display: inline-block;
    margin-bottom: 5px;
    padding: 1px 5px;
}
.traffic h3 {
    font-size: 58.37px;
    color: #fff;
    font-family: 'Museo Sans Cyrl 700';
    line-height: 1.1;
}
.traffic h3 span {
    color: #ffff00;
}
.traffic .img {
    float: left;
    width: calc(100% - 562px);
    padding-left: 14px;
    padding-top: 25px;
}
.traffic .img img {}

.access {
    background: #353535;
    padding-top: 33px;
    padding-bottom: 30px;
    min-height: 568px;
}
.access-wrap {}
.access .left {
    float: left;
    width: 562px;
    padding: 0;
    margin-top: 51px;
}
.access .right {
    float: left;
    width: calc(100% - 562px);
    padding-left: 10px;
}
.access .large {
    margin-bottom: 39px;
}
.access .large img {
    display: block;
}
.access .thumb {}
.access .thumb-item {
    float: left;
    margin-right: 15px;
}
.access .thumb-item:last-of-type {
	margin-right: 0;
}
.access .thumb-item img {
    display: block;
}
.access-form:before {
	content: '';
	display: block;
	width: 49px;
	height: 40px;
	background: url(../images/before.png);
	position: absolute;
	left: -29px;
	top: 30px;
}
.access-form {
    background: #009CFF;
    padding: 34px 30px 45px;
    border: 6.5px solid #007BC9;
    position: relative;
    text-align: center;
    color: #fff;
}
.access-form h2 {
    font-size: 32.69px;
    font-family: 'Museo Sans Cyrl 900';
    text-transform: uppercase;
    margin-bottom: 45px;
}
.access-form h2 span {
    text-transform: lowercase;
}
.access-form .btns {
    font-family: 'Museo Sans Cyrl 900';
    font-size: 24.62px;
    height: 70px;
    line-height: 70px;
    max-width: 350px;
    margin: 0 auto 35px;
    margin-top: 45px;
    color: #000;
}
.access-form p {
    font-size: 17.55px;
    margin-top: 35px;
}

.step {
    height: 531px;
    background: url(../images/step.jpg) no-repeat top;
    padding-top: 58px;
}
.step-wrap {}
.step .left {
    width: 528px;
    text-align: center;
    padding-right: 68px;
}
.step h3 {
    font-family: 'Museo Sans Cyrl 700';
    font-size: 31.56px;
    margin-bottom: 35px;
    line-height: 1.2;
}
.step h2 {
    font-family: 'Museo Sans Cyrl 900';
    font-size: 45.7px;
    margin-bottom: 15px;
    text-transform: uppercase;
    line-height: 1.2;
}
.step a:hover {
	color: #fff !important;
}
.step a:hover {
	background: #de9234;
}
.step a {
    display: block;
    text-align: center;
    background: #FF8C00;
    color: #fff;
    font-family: 'Museo Sans Cyrl 900';
    font-size: 25.35px;
    text-transform: uppercase;
    border-radius: 50px;
    margin: 0 auto;
    max-width: 360px;
    height: 70px;
    line-height: 70px;
}

.tell {
    height: 567px;
    background: url(../images/tell.jpg) no-repeat top;
    padding-top: 59px;
}
.tell-wrap {
    width: 583px;
    height: 400px;
    background: url(../images/border.png) no-repeat top;
    text-align: center;
    padding: 50px 20px 35px;
    margin-bottom: 42px;
}
.tell .right {}
.tell h2 {
    font-family: 'Museo Sans Cyrl 900';
    font-size: 33px;
    margin-bottom: 15px;
    line-height: 1.2;
}
.tell h3 {
    font-size: 30px;
    line-height: 1.2;
}

.tell .right {
	width: 548px;
	float: right;
}

.social_item {
    vertical-align: top;
}
.social_items {
    text-align: center;
    padding-left: 35px;
}


footer {
    background: #000000;
    overflow: hidden;
    color: #fff;
    padding-top: 23px;
    padding-bottom: 20px;
}
footer .container {
	width: 1000px;
}
footer .logo {
	float: left;
	margin-top: 15px;
	margin-bottom: 0;
}
footer .top {
    overflow: hidden;
    padding-bottom: 17px;
    border-bottom: 1px solid #5C6263;
    margin-bottom: 15px;
}
footer .top .left {
    float: left;
    margin-left: 20px;
    font-size: 13px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    margin-top: 3px;
}
footer .top .right {
    float: right;
    text-align: right;
}
footer .top .right p {
    font-size: 16px;
    margin-bottom: 10px;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
}
footer .top .left p {
    margin: 0;
    line-height: 1.2;
}
footer .top .left a {
    color: #fff;
    text-decoration: underline;
}
footer .soc {}
footer .soc a {
    margin-right: 5px;
    display: inline-block;
    vertical-align: top;
}
footer .soc a:last-of-type {
	margin-right: 0;
}

footer .bottom {
    overflow: hidden;
}
footer .bottom .menus {
    float: left;
}
footer .bottom ul {
    float: left;
    border-right: 1px solid #858B8C;
}
footer .bottom ul:nth-of-type(1){
    padding-right: 77px;
}
footer .bottom ul:nth-of-type(2){
    padding-left: 41px;
    padding-right: 79px;
}
footer .bottom ul:nth-of-type(3){
	padding-left: 40px;
	border: 0;
}
footer .bottom ul li {}
footer .bottom ul li a {
	color: #858B8C;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	text-decoration: underline;
	letter-spacing: -1px;
}
footer .bottom ul li a:hover {
	text-decoration: none;
}
.footer-right {
    float: right;
    text-align: left;
    padding-right: 18px;
}
.footer-right p {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    margin-bottom: 10px;
}
.footer-right a {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    color: #00ace4;
}

.share {
	text-align: center;
}

.share .item {
	display: inline-block;
	vertical-align: top;
	margin-right: 40px;
}

.share .item:last-of-type {
	margin-right: 0;
}

a:hover {
	text-decoration: none !important;
}



	#order_form{
		width:405px;
		display: none;
		background:#fff;
		padding:1px 0 1px 0;
		border:1px solid #f1f2f3;
	}
		#order_form h2{
			font-size:21px;
			text-align:center;
			text-transform:uppercase;
			margin:30px 0 20px 0;
		}
			#order_form table{
				width:345px;
				font-size:15px;
				vertical-align:top;
				margin:12px auto 10px auto; 
			}
				#order_form table tr td{
					color:#cacdd0;
					
				}
					#order_form table tr td span{
						position:relative;
						left:-10px;
						top:-20px;
						font-size:6px;
					}
				.step2{
					text-align:center;
				}
				.step3{
					text-align:right;
				}
		#order_form p{
			font-size:15px;
			line-height:17px;
			width: 345px;
			margin:0 auto
		}
			#order_form input[type="text"],#order_form input[type="email"]{
				width:345px;
				height:50px;
				line-height:50px;
				background:#f1f2f3;
				display:block;
				margin:7px auto 7px auto;
				padding-left:15px;
				font-size:20px;
			}
			#order_form input[type="submit"]{
				width:345px;
				height:80px;
				line-height:80px;
				font-size:26px;
				color:#fff;
				background:#d14838;
				border-radius:10px;
				display:block;
				margin: 17px auto 25px auto;
				text-decoration:none;
				text-transform:uppercase;
				cursor:pointer;
				border:0px!important;
				outline:0px!important;
			}
			#order_form input[type="submit"]:hover{
				background:#c04434;
				text-decoration:none;
				color:#eee;
				border:0px!important;
				outline:0px!important;
			}
			#order_form input[type="submit"]:active{
				margin: 20px auto 22px auto;
				border:0px!important;
				outline:0px!important;
			}


@media screen and (max-width: 1210px){
	.social_items {
		padding: 0;
	}

	.container {
		width: 95% !important;
		padding: 0 !important;
	}
	
	.traffic h2:after {
		display: none;
	}
	
	img {
		max-width: 100%;
	}
	
	.step h3 {
		font-size: 27px;
	}
	
	.tell-wrap {
		background-size: contain;
		width: 500px;
		float: right;
	}
	
	.tell h2 {
		font-size: 26px;
	}
	
	.tell h3 {
		font-size: 26px;
	}
	
	footer .top .left {
		max-width: 340px;
	}
	
	footer .bottom .menus {
		float: none;
	    overflow: hidden;
		margin-bottom: 30px;
	}
	
	footer .bottom ul {
		padding: 0 !important;
		width: 33.3333%;
		border: 0;
	}
	
	.footer-right {
	    float: none;
		text-align: center;
	}
	

	
}

@media screen and (max-width: 1023px){
	.traffic .left {
		width: 300px;
	}
	
	.traffic .img {
		padding-left: 51px;
		padding-top: 25px;
		width: calc(100% - 300px);
	    max-width: 430px;
		float: right;
	}
	
	.traffic h2 {
		font-size: 48px;
	}
	
	.traffic h3 {
		font-size: 40px;
	}
	

	
	.step .left {
		padding: 0;
		width: 300px;
	}
	
	.step h2 {
		font-size: 38px;
	}
	
	.step h3 {
		font-size: 23px;
	}
	
	.step h3 br {
		display: none;
	}
	
	.tell .right {
		width: 395px;
	}
	
	.tell-wrap {
		width: 395px;
		height: 255px;
		padding: 15px 10px 15px;
	}
	
	.tell h2 {
		font-size: 19px;
	}
	
	.tell h3 {
		font-size: 19px;
	}
	
	.access-form:before {
		display: none;
	}
	
	.access .left {
		width: 376px;
	}
	
	.access .right {
		width: calc(100% - 376px);
	}
	
	.access .thumb-item {
		width: 32%;
		margin-right: 2%;
	}
	
	.access-form {
		padding-left: 10px;
		padding-right: 10px;
	}
	
	.access-form .btns {
		font-size: 21px;
	}
}


@media screen and (max-width: 767px){
	
	.access .left {
	    float: none;
		margin: 0 auto 35px;
		max-width: 475px;
		width: 100%;
	}
	
	.access .right {
		float: none;
		width: 100%;
	}
	
	
	footer .top .left {
	    max-width: none;
		margin-left: 0;
		margin-bottom: 20px;
	}
	
	footer .logo {
	    width: 65px;
		margin: 0 auto;
		float: none;
		display: block;
		margin-bottom: 30px;
	}
	
	footer .top .right {
	    float: None;
		text-align: center;
		clear: both;
	}	
	
	br {
		display: none;
	}
	
	.main h2 {
		font-size: 27px;
	}
	
	.main h1{
		font-size: 37px;
	}
	
	.traffic .left {
	    width: 100%;
		float: none;
		text-align: center;
		margin-bottom: 25px;
	    background: url(../images/traffic-mobile.jpg) no-repeat;
		padding: 40px 0;
		background-size: cover;
	}
	
	
	.traffic .img {
		float: none;
		padding: 0;
		width: 100%;
		max-width: 100%;
		text-align: center;
	}
	
	.traffic {
		background: #f6f6f6;
		padding: 40px 0;
		height: auto;
	}
	
	.access .thumb-item {

	}
	
	.access .thumb {
		text-align: center;
	}
	
	.access .large {
		margin-bottom: 10px;
	}
	
	.step {
		background: #f6f6f6;
		padding: 40px 0;
		height: auto;		
	}
	
	.step .left {
		width: 100%;
		margin-bottom: 25px;
	}
	
	.tell {
		padding: 40px 0;
		background: #fff;
		height: auto;
		text-align: center;
	}
	
	.tell .right {
		width: 100%;
		float: none;
	}
	
	.tell-wrap {
		width: auto;
		height: auto;
		padding: 25px 15px 30px;
		display: inline-block;
		float: none;
		background: none;
		border: 5px solid #12a3ff;
	}
	
	.traffic h3 {

	}
	
	#order_form {
		width: 100% !important;
		padding: 5px !important;
	}
	
	.fancybox-opened .fancybox-skin {
		padding: 0 !important;
	}
	
	#order_form * {
		max-width: 100% !important;
	}
	
	.main {
	    height: auto;
		padding: 40px 0;
	}

}

@media screen and (max-width: 480px) {
	.main h2 {
		font-size: 23px;
	}
	
	.main h1 {
		font-size: 25px;
	}
	
	.btns {
		font-size: 22px;
	}
	
	.access-form {
		padding: 25px 10px 20px;
	}
	
	.access-form .btns {
		font-size: 17px;
	}
	
	.progress {
		display: none;
	}
	
	#order_form table {
		display: none;
	}
}