body, h1, h2, h3, h4, h5, h6, a, ol, ul, li, p {margin: 0px; padding: 0px; font-weight: normal; color: #333333;}
img {border: 0;}
html, body {width: 100%; height: 100%; padding: 0; margin: 0; position: relative;}
body {font-family: "Open Sans", Arial, sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; background-color: #0b2e4e;}

@font-face {
    font-family: "Open Sans";
    src: url("../fonts/OpenSansRegular/OpenSansRegular.eot");
    src: url("../fonts/OpenSansRegular/OpenSansRegular.eot?#iefix")format("embedded-opentype"),
    url("../fonts/OpenSansRegular/OpenSansRegular.woff") format("woff"),
    url("../fonts/OpenSansRegular/OpenSansRegular.ttf") format("truetype");
    font-style: normal;
    font-weight: 500;
}
@font-face {
    font-family: "Open Sans";
    src: url("../fonts/OpenSansBold/OpenSansBold.eot");
    src: url("../fonts/OpenSansBold/OpenSansBold.eot?#iefix")format("embedded-opentype"),
    url("../fonts/OpenSansBold/OpenSansBold.woff") format("woff"),
    url("../fonts/OpenSansBold/OpenSansBold.ttf") format("truetype");
    font-style: normal;
    font-weight: 900;
}
@font-face {
    font-family: "Open Sans";
    src: url("../fonts/OpenSansBoldItalic/OpenSansBoldItalic.eot");
    src: url("../fonts/OpenSansBoldItalic/OpenSansBoldItalic.eot?#iefix")format("embedded-opentype"),
    url("../fonts/OpenSansBoldItalic/OpenSansBoldItalic.woff") format("woff"),
    url("../fonts/OpenSansBoldItalic/OpenSansBoldItalic.ttf") format("truetype");
    font-style: italic;
    font-weight: 900;
}
@font-face {
    font-family: "Open Sans";
    src: url("../fonts/OpenSansItalic/OpenSansItalic.eot");
    src: url("../fonts/OpenSansItalic/OpenSansItalic.eot?#iefix")format("embedded-opentype"),
    url("../fonts/OpenSansItalic/OpenSansItalic.woff") format("woff"),
    url("../fonts/OpenSansItalic/OpenSansItalic.ttf") format("truetype");
    font-style: italic;
    font-weight: 500;
}
@font-face {
    font-family: "Open Sans";
    src: url("../fonts/OpenSansLight/OpenSansLight.eot");
    src: url("../fonts/OpenSansLight/OpenSansLight.eot?#iefix")format("embedded-opentype"),
    url("../fonts/OpenSansLight/OpenSansLight.woff") format("woff"),
    url("../fonts/OpenSansLight/OpenSansLight.ttf") format("truetype");
    font-style: normal;
    font-weight: 300;
}
@font-face {
    font-family: "Open Sans";
    src: url("../fonts/OpenSansLightItalic/OpenSansLightItalic.eot");
    src: url("../fonts/OpenSansLightItalic/OpenSansLightItalic.eot?#iefix")format("embedded-opentype"),
    url("../fonts/OpenSansLightItalic/OpenSansLightItalic.woff") format("woff"),
    url("../fonts/OpenSansLightItalic/OpenSansLightItalic.ttf") format("truetype");
    font-style: italic;
    font-weight: 300;
}
@font-face {
    font-family: "Open Sans";
    src: url("../fonts/OpenSansSemiBold/OpenSansSemiBold.eot");
    src: url("../fonts/OpenSansSemiBold/OpenSansSemiBold.eot?#iefix")format("embedded-opentype"),
    url("../fonts/OpenSansSemiBold/OpenSansSemiBold.woff") format("woff"),
    url("../fonts/OpenSansSemiBold/OpenSansSemiBold.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
}
@font-face {
    font-family: "Open Sans";
    src: url("../fonts/OpenSansSemiBoldItalic/OpenSansSemiBoldItalic.eot");
    src: url("../fonts/OpenSansSemiBoldItalic/OpenSansSemiBoldItalic.eot?#iefix")format("embedded-opentype"),
    url("../fonts/OpenSansSemiBoldItalic/OpenSansSemiBoldItalic.woff") format("woff"),
    url("../fonts/OpenSansSemiBoldItalic/OpenSansSemiBoldItalic.ttf") format("truetype");
    font-style: italic;
    font-weight: 400;
}
.clear {position: relative;width: 100%;height: 1px;clear: both; margin-bottom: -1px;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.vertical-align {display: table-cell; vertical-align: middle;}
.block-inside {width: 940px; margin: 0 auto; position: relative;}
.full-width {width: 100% !important;}

.breadcrumbs {position: relative; line-height: 30px; font-size: 14px; margin: -10px 0 0px 0; height: 30px;}
.breadcrumbs a {display: inline-block; vertical-align: top; font-size: 12px; color: #666666; padding: 0 0px; text-decoration: none; margin: 0 5px 0 0;}
.breadcrumbs a {color: #666666 !important;}
.breadcrumbs a:after {content:"›"; margin: 0 0 0 5px; color: #666666 !important; text-decoration: none;}
.breadcrumbs a:hover {color: #ffa040 !important;}
.breadcrumbs span {display: inline-block; vertical-align: top; font-size: 12px; padding: 0 0px; color: #666666;}
.breadcrumbs li {float: left; list-style-type: none;}
.breadcrumbs li:first-child span:before {content: ""; width: 14px; height: 57px; display: block; background: url(../img/breadcrumbs-mainl.png) no-repeat center left; float: left; margin: 0 10px 0 0;}}

a {color: #009de0; text-decoration: underline;}
a:hover {color: #ff8304;}
a:visited {color: #764983;}
::selection {background: #8D8D8D; color: #fff;}
::-moz-selection {background: #8D8D8D; color: #fff;}
strong {font-family: "OpenSansSemibold";}

.header {height: 90px; margin: 0 0 60px 0;}
.header .logo {position: absolute; left: 0px; top: 17px;}
.header .contacts {position: absolute; right: 0px; top: 29px;}
.header .contacts .phone {font-size: 22px; color: #fff; padding: 0 0 0 30px; background: url(../img/ico-phone.png) no-repeat center left;}
.header .contacts .email {font-size: 18px; color: #fff; padding: 0 0 0 30px; background: url(../img/ico-email.png) no-repeat center left; float: right;}

.stripe {height: 544px; width: 100%; background: url(../img/bg.png) no-repeat center center; position: absolute; top: 175px;}

.car {margin: 0 0 500px 0;}
.car .text {text-align: center;}
.car .text .title h1 {font-size: 52px; color: #fff; text-transform: uppercase; font-weight: bold;}
.car .text .description {font-size: 24px; color: #fff; text-transform: uppercase; font-weight: 900;}
.car .btn-yellow {position: absolute; left: 60px; top: 150px;}

.btn-yellow {display: inline-block; line-height: 46px; background: #f99815; color: #0b2e4e; text-decoration: none; text-transform: uppercase; font-weight: bold; font-size: 15px; text-align: center; padding: 0 30px; border: 2px solid #f7dc4a; border-radius: 25px;}
.btn-yellow:hover {background: #477ee2; color: #fff !important; border: 2px solid #80c6fc; transition: 0.2s;}
.btn-item {display: inline-block; line-height: 31px; background: #477ee2; color: #fff; text-decoration: none; font-weight: bold; font-size: 15px; text-align: center; padding: 0 30px; border: 2px solid #80c6fc; border-radius: 25px;}
.btn-item:hover {background: #f99815; color: #0b2e4e !important; border: 2px solid #f7dc4a; transition: 0.2s;}

.products {}
.products .title {font-size: 30px; color: #fff; font-style: italic; text-align: center; line-height: 140px;}
.products .items {margin: 0 0 0 -20px;}
.products .items .item {width: 220px; float: left; margin: 0 0 20px 20px; background: #216498; height: 395px;}
.products .items .item .image {background: #fff; display: table; height: 210px; width: 220px; text-align: center;}
.products .items .item .name {padding: 10px 20px; color: #fff; font-size: 15px; font-weight: bold; height: 60px; font-weight: 400;}
.products .items .item .price {background: #f99815; width: 100%; height: 40px;}
.products .items .item .price .normal {font-size: 24px; color: #0b2e4e; float: left; line-height: 40px; margin: 0 0 0 15px; font-weight: bold;}
.products .items .item .price .normal span {font-size: 16px; font-weight: 400;}
.products .items .item .price .sale {font-size: 16px; color: #0b2e4e; float: right; line-height: 46px; margin: 0 15px 0 0; text-decoration: line-through;}
.products .items .item .price .sale span {font-size: 12px; font-weight: 400;}
.products .items .item a {margin: 15px auto 0 auto; display: table;}

.advantages {z-index: 300; position: relative;}
.advantages .title {font-size: 30px; color: #fff; font-style: italic; text-align: center; line-height: 140px;}
.advantages .blocks {text-align: center;}
.advantages .blocks .block {display: inline-block; width: 310px; margin: 0 0 40px 0;}
.advantages .blocks .block .image {width: 70px; float: left; height: 120px;}
.advantages .blocks .block .text {text-align: left; float: right; width: 230px;}
.advantages .blocks .block .text .name {font-size: 16px; color: #fff; font-weight: bold; margin: 0 0 15px 0; font-weight: 400;}
.advantages .blocks .block .text .description {font-size: 15px; color: #fff; font-weight: 300;}

.how-we-work {position: relative; height: 750px; margin: 0 0 50px 0;}
.how-we-work .background {background: url(../img/bg2.jpg) no-repeat center center; width: 100%; height: 1285px; position: absolute; top: -490px;}
.how-we-work  .title {font-size: 30px; color: #fff; font-style: italic; text-align: center; line-height: 140px;}
.how-we-work .blocks {position: relative; margin: -20px 0 0 0;}
.how-we-work .blocks .line {width: 696px; height: 256px; background: url(../img/line.png) no-repeat center center; position: absolute; left: 100px; top: 80px;}
.how-we-work .blocks .arrow {position: absolute; width: 255px; height: 126px; background: url(../img/arrow.png) no-repeat center center; top: 465px; left: 110px;}
.how-we-work .blocks .block {width: 250px; position: absolute; height: 340px;}
.how-we-work .blocks .block .name {color: #f99815; font-size: 24px; font-weight: bold; line-height: 70px; text-transform: uppercase;}
.how-we-work .blocks .block .description {font-size: 15px; color: #e6e6e6; font-weight: 300;}
.how-we-work .blocks .step-1 {position: absolute; top: 10px; right: -70px;}
.how-we-work .blocks .step-2 {position: absolute; top: 100px; right: 210px;}
.how-we-work .blocks .step-3 {position: absolute; top: 210px; left: 240px;}
.how-we-work .blocks .step-4 {position: absolute; top: 300px; left: 15px;}
.how-we-work .blocks .btn-yellow {position: relative; display: table !important; margin: 0 auto; top: 580px;}

.companies {background: url(../img/companies-bg.png) no-repeat center center; height: 500px; margin: 0 0 80px 0;}
.companies .title {font-size: 30px; color: #fff; font-style: italic; text-align: center; line-height: 140px;}
.companies .blocks {width: 570px; height: 190px; position: relative; top: 70px;}
.companies .blocks .logo-1 {position: absolute; left: 0px; top: 0px;}
.companies .blocks .logo-2 {position: absolute; left: 160px; top: 30px;}
.companies .blocks .logo-3 {position: absolute; left: 460px; top: 20px;}
.companies .blocks .logo-4 {position: absolute; left: 0px; top: 105px;}
.companies .blocks .logo-5 {position: absolute; left: 160px; top: 105px;}
.companies .cars {width: 470px; height: 225px; background: url(../img/cars.png) no-repeat; position: absolute;}

.companies .blocks{
	left: -200px;
	opacity: 0;
	-webkit-transition: all 700ms ease-in-out;
	-moz-transition: all 700ms ease-in-out;
	-ms-transition: all 700ms ease-in-out;
	-o-transition: all 700ms ease-in-out;
	transition: all 700ms ease-in-out; 
} 

.companies .cars { 
	right: -250px;
    top: 0px;
    opacity: 0;
    -webkit-transition: right 700ms ease-in-out,top 500ms linear,opacity 300ms linear;
	-moz-transition: right 700ms ease-in-out,top 500ms linear,opacity 300ms linear;
	-ms-transition: right 700ms ease-in-out,top 500ms linear,opacity 300ms linear;
	-o-transition: right 700ms ease-in-out,top 500ms linear,opacity 300ms linear; 
	transition: right 700ms ease-in-out,top 500ms linear,opacity 300ms linear; 
} 
 
.companies .cars.finish {
	opacity: 1; 
	right: -110px;
	top: 80px;
}

.companies .blocks.finish {
	opacity : 1;
	left: 0px; 
}

.form-block {margin: 0 0 100px 0;}
.form-block .form {height: 155px; background: #4c8cbf;}
.form-block .form form {text-align: center; margin: 0 0 15px 0;}
.form-block .form .title {font-size: 18px; color: #fff; text-align: center; font-style: italic; font-weight: 400; line-height: 60px;}
.form-block .form .text {font-style: italic; font-weight: light; text-align: center; font-size: 13px; color: #afd0eb; font-weight: 300;}
.form-block .form input[type="text"] {height: 34px; width: 195px; padding: 0 0 0 15px; line-height: 34px; font-size: 15px; color: #666666;}
.form-block .form input[type="submit"] {cursor: pointer;} 

.footer {height: 60px; margin: 0 0 20px 0; border-top: 1px solid #153c5a; padding: 10px 0 0 0;}
.footer .logo {float: left;}
.footer .address {float: left; margin: 0 0 0 60px; text-align: center; color: #fff; line-height: 60px; color: #4d8ec1; font-style: italic;}
.footer .dvlp {float: right; background: url(../img/dvlp.png) no-repeat center right; padding: 0 40px 0 0; color: #fff; line-height: 60px; color: #4d8ec1;}

.hidden {display: none;}
.overlay {position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0,0,0,0.75); z-index: 999;}
.overlay-form {position: fixed; text-align: center; left: 0; top: 0; right: 0; bottom: 0; z-index: 9999;}
.overlay-form .wrap {display: table; width: 100%; height: 100%;}
.overlay-form .wrap .middle {display: table-cell; vertical-align: middle;}
.overlay-form .form {width: 440px; padding-bottom: 30px; background: #477ee2; text-align: center; margin: 0 auto; position: relative;}
.overlay-form .form .title {font-size: 18px; color: #fff; text-align: center; font-style: italic; font-weight: normal; padding: 20px 0;}
.overlay-form .form .text {font-style: italic; font-weight: light; text-align: center; font-size: 13px; color: #afd0eb; margin: 0 0 20px 0;}
.overlay-form .form input[type="text"] {width: 305px; height: 34px; line-height: 34px; font-size: 15px; color: #666666; padding: 0 0 0 15px; margin: 0 auto 20px auto;}
.overlay-form .form input[type="submit"] {cursor: pointer;} 
.overlay-form .form .close {position: absolute; display: block; width: 12px; height: 11px; background: url(../img/close.png) no-repeat; top: 10px; right: 10px;}

.btn-yellow {outline: none;}

input[type="text"].warning, input[type="password"].warning, textarea.warning, select.warning {border: 1px solid #dd0159;box-shadow:none;} 
input[type="text"].warning::-webkit-input-placeholder, input[type="password"].warning::-webkit-input-placeholder, textarea.warning::-webkit-input-placeholder {color: #dd0159;}
input[type="text"].warning:-moz-placeholder, input[type="password"].warning:-moz-placeholder, textarea.warning:-moz-placeholder {color: #dd0159;}
input[type="text"].warning::-moz-placeholder, input[type="password"].warning::-moz-placeholder, textarea.warning::-moz-placeholder {color: #dd0159;}
input[type="text"].warning:-ms-input-placeholder, input[type="password"].warning:-ms-input-placeholder, textarea.warning:-ms-input-placeholder {color: #dd0159;}

/* анимация */

.btn-yellow { 
	box-shadow: 0 0 0 0 rgba(90, 153, 220, 0.7), inset 0 1px 0 #abcbe9;
	-webkit-animation: pulse 2s infinite cubic-bezier(0.5, 0, 0, 1);
	-moz-animation: pulse 2s infinite cubic-bezier(0.5, 0, 0, 1);
	-o-animation: pulse 2s infinite cubic-bezier(0.5, 0, 0, 1);
	-ms-animation: pulse 2s infinite cubic-bezier(0.5, 0, 0, 1);
}
.btn-yellow:hover {
	-webkit-animation: none;
	-moz-animation: none;
	-o-animation: none;
	-ms-animation: none; 
}

@-webkit-keyframes pulse {  
  to {box-shadow: 0 0 0 15px rgba(90, 153, 220, 0), inset 0 1px 0 #abcbe9;}
}

@-moz-keyframes pulse {  
  to {box-shadow: 0 0 0 15px rgba(90, 153, 220, 0), inset 0 1px 0 #abcbe9;}
}

@-o-keyframes pulse {  
  to {box-shadow: 0 0 0 15px rgba(90, 153, 220, 0), inset 0 1px 0 #abcbe9;}
}

@-ms-keyframes pulse {  
  to {box-shadow: 0 0 0 15px rgba(90, 153, 220, 0), inset 0 1px 0 #abcbe9;}
}

.how-we-work .block * {
	
	-webkit-transition: all 300ms ease-out; 
	-moz-transition: all 300ms ease-out;
	-ms-transition: all 300ms ease-out;
	-o-transition: all 300ms ease-out;
	transition: all 300ms ease-out;

}	
	
.how-we-work .blocks .line, 
.how-we-work .blocks .arrow	{
	opacity: 0; 
}	 
	
.how-we-work .block .image .vertical-align img {	
	
	-moz-transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0); 
    
} 

.how-we-work .block .name, 
.how-we-work .block .description {

	margin-left: 100px;
	opacity : 0;

} 

.how-we-work .block.finish .name,
.how-we-work .block.finish .description {

	margin-left: 0px;  
	opacity : 1; 

}

.how-we-work .block.finish .image .vertical-align img{ 
	-moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); 
}

.form-block {
	margin-top:-130px; 
	opacity:0; 
	-webkit-transition: all 600ms ease-out;  
	-moz-transition: all 600ms ease-out;
	-ms-transition: all 600ms ease-out;
	-o-transition: all 600ms ease-out;
	transition: all 600ms ease-out;
}  

.form-block.finish {
	margin-top: 0px;
	opacity: 1;
}
