/*********************************************************************************************************


Author:  Michael Poliakov
Project: Aerial Platform

Table of content

1. System
2. Header
3. Cars list
4. Generic
5. Footer


*********************************************************************************************************/


/*********************************************  1. System ***********************************************/

html, body, table, td, div, p, img, span, form, select, input, textarea, button, a, h1, h2, h3, h4, h5, h6 { padding: 0; margin: 0; outline: none; font-family: "Roboto Condensed", sans-serif; }
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
html, body { height: 100%; width: 100%; min-width: 1050px; font-size: 100%; line-height: 1; }
body { background: #f2f2f2 url("../img/bg-page-top.jpg") center top no-repeat; max-width: 1920px; margin: 0 auto; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, main, nav, section { display: block; }
button, input[type="submit"], input[type="button"] { background: transparent; cursor: pointer; }
input, button { border: none; }
ul, li, ol { padding: 0; margin: 0; list-style: none; outline: none; }
img { border: none; }
.std-wrapper { position: relative; width: 1050px; margin: 0 auto; }

/********************************************************************************************************/


/********************************************  2. Header ************************************************/

#top-menu { background: #fff; height: 100px; -webkit-box-shadow: 0 2px 7px rgba(0,0,0,.4); box-shadow: 0 2px 7px rgba(0,0,0,.4); position: fixed; left: 0; right: 0; top: 0; z-index: 999; font-family: "Roboto", sans-serif; }
#top-menu .logo, #top-menu .phone, #top-menu .workhours { position: absolute; display: inline-block; font-size: 0.875rem; }
#top-menu .logo { text-decoration: none; left: 25px; top: 20px; color: #000; text-transform: uppercase; }
#top-menu .logo b { font-size: 1.75rem; line-height: 1.5; color: #006db8; font-weight: bold; }
#top-menu .phone, #top-menu .workhours { top: 29px; min-height: 45px; color: #1f7fc1; text-align: right; background-repeat: no-repeat; background-position: 0 10px; }
#top-menu .phone b, #top-menu .phone a, #top-menu .workhours span { font-size: 1.5rem; line-height: 1.2; text-transform: uppercase; color: #343434; text-decoration: none; }
#top-menu .phone b, #top-menu .phone a { font-weight: bold; } 
#top-menu .phone { background: url("../img/ico-phone-blue.png") 0 13px no-repeat; right: 25px; padding-left: 50px; }
#top-menu .workhours { background: url("../img/ico-clock-blue.png") 0 13px no-repeat; right: 375px; padding-left: 44px; }
#header-block .std-wrapper { height: 985px; }
#header-block .title { position: absolute; text-transform: uppercase; color: #fff; }
#header-block .title { font-size: 1.875rem; line-height: 1.2; width: 350px; right: 0; top: 240px; }
#header-block .title b { font-size: 2.25rem; }
#header-block .title + .title { font-size: 1.25rem; line-height: 1.1; width: 270px; top: 505px; right: 42px; text-transform: none; font-family: "Roboto", sans-serif; }
#header-block .title + .title b { font-size: 1.875rem; text-transform: uppercase; }
#header-block .cost { position: absolute; left: 70px; top: 313px; width: 108px; height: 60px; padding-top: 8px; background-color: #e63a14; border-radius: 5px; text-align: center; font-size: 1rem; color: #fff; }
#header-block .cost b { font-size: 1.5rem; font-weight: normal; }
#header-block .cost:after { content: ''; position: absolute; left: 100%; top: 18px; width: 0; height: 0; border: 12px solid transparent; border-left: 12px solid #e63a14; }
#header-block .advantages { position: absolute; left: 25px; right: 25px; top: 685px; text-align: justify; font-size: 0; }
#header-block .advantages:after { content: ''; width: 100%; height: 0; display: inline-block; vertical-align: top; line-height: 0; font-size: 0; }
#header-block .advantages li { vertical-align: top; display: inline-block; width: 300px; padding-top: 125px; text-align: center; background-position: center 13px; background-repeat: no-repeat; color: #fff; }
#header-block .advantages li.ico-aerial { background-image: url("../img/ico-aerial-yellow.png"); }
#header-block .advantages li.ico-thumbup { background-image: url("../img/ico-thumbup-yellow.png"); }
#header-block .advantages li.ico-clock { background-image: url("../img/ico-clock-yellow.png"); }
#header-block .advantages li b { font-size: 1.5rem; display: inline-block; padding-bottom: 22px; text-transform: uppercase; }
#header-block .advantages li p { font-size: 1rem; line-height: 1.5; font-weight: 300; }

/********************************************************************************************************/


/******************************************  3. Cars list ***********************************************/

#cars-list { background: url("../img/bg-page-bottom.jpg") center bottom no-repeat; padding-bottom: 90px; }
#cars-list ul.cars { text-align: justify; position: relative; font-size: 0; padding: 0 25px; }
#cars-list ul.cars:after { content: ''; width: 100%; height: 0; line-height: 0; display: inline-block; vertical-align: top; }
#cars-list ul.cars > li { height: 640px; width: 485px; margin-bottom: 30px; background-color: #fff; display: inline-block; vertical-align: top; -webkit-box-shadow: 0 2px 7px rgba(48,80,117,.4); box-shadow: 0 2px 7px rgba(48,80,117,.4); position: relative; }
#cars-list ul.cars > li .image { height: 325px; position: relative; z-index: 50; background-position: center -320px; background-repeat: no-repeat; }
#cars-list ul.cars > li .image:after { content: ''; position: absolute; display: block; left: 0; top: 0; right: 0; bottom: 0; opacity: 1; -webkit-transition: opacity 300ms; -o-transition: opacity 300ms; transition: opacity 300ms; background-position: center top; background-repeat: no-repeat; }
#cars-list ul.cars > li:hover .image:after { opacity: 0; }
#cars-list ul.cars > li .image.img-kamaz { background-image: url("../images/item-kamaz.jpg"); }
#cars-list ul.cars > li .image.img-kamaz:after { background-image: url("../images/item-kamaz.jpg"); }
#cars-list ul.cars > li .image.img-zil-130 { background-image: url("../images/item-zil-130.jpg"); }
#cars-list ul.cars > li .image.img-zil-130:after { background-image: url("../images/item-zil-130.jpg"); }
#cars-list ul.cars > li .image.img-zil-131 { background-image: url("../images/item-zil-131.jpg"); }
#cars-list ul.cars > li .image.img-zil-131:after { background-image: url("../images/item-zil-131.jpg"); }
#cars-list ul.cars > li .image.img-zil-apt { background-image: url("../images/item-zil-apt.jpg"); }
#cars-list ul.cars > li .image.img-zil-apt:after { background-image: url("../images/item-zil-apt.jpg"); }
#cars-list ul.cars > li .image.img-japan-1 { background-image: url("../images/item-japan-1.jpg"); }
#cars-list ul.cars > li .image.img-japan-1:after { background-image: url("../images/item-japan-1.jpg"); }
#cars-list ul.cars > li .image.img-japan-2 { background-image: url("../images/item-japan-2.jpg"); }
#cars-list ul.cars > li .image.img-japan-2:after { background-image: url("../images/item-japan-2.jpg"); }
#cars-list ul.cars > li .cost { position: absolute; right: 28px; top: 39px; width: 108px; height: 60px; padding: 7px; text-align: center; font-size: 1rem; color: #fff; line-height: 1.1; z-index: 100; background-color: #1e76b2; border-radius: 5px; }
#cars-list ul.cars > li .cost:before { content: ''; position: absolute; right: 100%; top: 18px; height: 0; width: 0; font-size: 0; border: 12px solid transparent; border-right: 12px solid #1e76b2; }
#cars-list ul.cars > li .cost b { font-size: 1.5rem; font-weight: 400; }
#cars-list ul.cars > li .title { font-size: 1.875rem; color: #343434; font-weight: 700; padding: 0 20px 37px 20px; }
#cars-list ul.cars > li .datasheet { padding-bottom: 20px; }
#cars-list ul.cars > li .datasheet li:nth-child(odd) { background-color: #f4f5f8; }
#cars-list ul.cars > li .datasheet li { padding: 10px 20px; overflow: hidden; font-size: 1rem; color: #343434; font-weight: 400; }
#cars-list ul.cars > li .datasheet li b { display: block; width: 120px; float: right; }
#cars-list ul.cars > li .footnote { position: absolute; left: 23px; bottom: 18px; height: 30px; padding-left: 44px; font-size: 1rem; line-height: 30px; color: #343434; font-weight: 700; }
#cars-list ul.cars > li .footnote:before { content: '!'; position: absolute; left: 0; top: 0; width: 30px; height: 30px; line-height: 30px; border-radius: 15px; text-align: center; font-size: 1.5rem; font-weight: 700; color: #fff; background-color: #e63a14; }

/********************************************************************************************************/


/*******************************************  4. Generic ************************************************/

#how-we-work { background-color: #1e76b2; padding-bottom: 120px; }
#how-we-work .block-title { margin-bottom: 94px; font-size: 2.25rem; font-weight: 700; color: #fff; text-transform: uppercase; text-align: center; }
#how-we-work .steps { position: relative; text-align: justify; padding: 0 25px; font-size: 0; }
#how-we-work .steps:after { content: ''; display: inline-block; font-size: 0; height: 0; width: 100%; }
#how-we-work .steps li { display: inline-block; vertical-align: top; width: 300px; position: relative; padding-top: 180px; text-align: center; color: #fff; }
#how-we-work .steps li:before { content: ''; position: absolute; top: 0; left: 77px; width: 148px; height: 148px; border-radius: 75px; border: 2px solid #629fc9; background-repeat: no-repeat; background-position: center; }
#how-we-work .steps li.ico-phone:before { background-image: url("../img/ico-phone-white.png"); }
#how-we-work .steps li.ico-payment:before { background-image: url("../img/ico-payment-white.png"); background-position: 40px 35px; }
#how-we-work .steps li.ico-worker:before { background-image: url("../img/ico-worker-white.png"); }
#how-we-work .steps li:after { content: ''; position: absolute; width: 174px; height: 17px; left: 240px; top: 65px; background: url("../img/ico-arrow-right.png") center no-repeat; }
#how-we-work .steps li:last-child:after { display: none; }
#how-we-work .steps li b { font-size: 1.25rem; font-weight: 400; display: inline-block; font-family: "Roboto", sans-serif; }
#how-we-work .steps li p { padding-top: 22px; font-size: 1rem; line-height: 1.5; font-weight: 300; }

/********************************************************************************************************/


/*******************************************  5. Footer *************************************************/

#footer-contacts { background: url("../img/pattern-perforated.png") center repeat; padding: 90px 0; color: #fff; text-align: center; }
#footer-contacts p { font-size: 1.125rem; font-weight: 300; }
#footer-contacts b { display: inline-block; padding: 42px 60px; font-size: 3rem; font-weight: 300; font-family: "Roboto", sans-serif; position: relative; }
#footer-contacts b:first-of-type:after { content: '|'; position: absolute; right: -5px; padding: 0; display: inline-block; }
#footer-copyright { background: #000; height: 70px; }
#footer-copyright, #footer-copyright a { font-size: 0.875rem; color: #616365; font-family: "Roboto", sans-serif; }
#footer-copyright a:hover { text-decoration: none; }
#footer-copyright p { position: absolute; top: 28px; }
#footer-copyright p:first-child { left: 25px; }
#footer-copyright p:last-child { right: 25px; text-align: right; }



/********************************************************************************************************/