@font-face {
    font-family: 'HelveticaLightNormal';
    src: url('font-face/Helvetica_Light-Normal.eot');
    src: url('font-face/Helvetica_Light-Normal.eot') format('embedded-opentype'),
    url('font-face/Helvetica_Light-Normal.woff') format('woff'),
    url('font-face/Helvetica_Light-Normal.ttf') format('truetype'),
    url('font-face/Helvetica_Light-Normal.svg#HelveticaLightNormal') format('svg');
}
html, body{
    margin:0;
    padding:0;
    height:100%;
    background-color:#fff;
}
/*Прижатый футер*/
.wrapper{
    display:table;
    height:100%;
    width:100%;
    table-layout:fixed;
    position:relative;
}
.wrapper > .content{
    display:table-row;
    height:100%;
}
.myContainer{
    width:940px;
    margin:0 auto;
}
/*  Header.
************************************/
.header{
    height:51px;
    background-color:#333333;
    margin-bottom:129px;
}
.headerNav{
    margin:0;
    padding:0;
    float:left;
    list-style-type:none;
}
.headerNav > li{
    float:left;
}
.headerNav > li > a{
    font:300 14px/15px "Roboto", sans-serif;
    color:#cccccc;
    display:block;
    padding:17px 15px 19px 15px;
}
.headerNav > li > a:hover{
    background-color:#212121;
    color:#3cb878;
    text-decoration: none;
}
.headerNav > li > a:focus{
    text-decoration: none;
}
.headerLogo{
    width:140px;
}
.oreximLogo{
    float:right;
    width:110px;
    margin-top:14px;
}
.truck{
    width:620px;
    margin:0 auto;
}
/*  All Content.
************************************/
.sectionTop{
    padding-top:45px;
    background:url('/pictures/bgTop.jpg') no-repeat center center;
    background-size: cover;
    padding-bottom: 88px;
}
.sectionPadding{
    padding:45px 0 55px;
}
.sectionTitle{
    font:40px/41px "Roboto", sans-serif;
    margin:0 0 21px;
    color:#fff;
}
.aboutTitle{
    color:#333333;
}
.aboutText p{
    font:300 16px/22px "Roboto", sans-serif;
    color:#333333;
    margin:0 0 18px;
}
.lastChild > :last-child{
    margin-bottom: 0;
}
.sectionServices{
    background:url('/pictures/bgServices.jpg') no-repeat center center;
    background-size:cover;
}
.servicesText p{
    font:500 16px/22px "Roboto", sans-serif;
    color:#fff;
    margin:0 0 18px;
}
.sectionGeography{
    background-color:#3cb878;
}
.ukraineMap{
    width:400px;
    display:inline-block;
    vertical-align: middle;
    margin-right: 73px;
}
.transportGeography{
    width:430px;
    display:inline-block;
    vertical-align:middle;
    margin:0;
}
.regions{
    font:20px/28px "Roboto", sans-serif;
    color:#fff;
}
.sectionMan{
    height:500px;
    background:url('/pictures/Man.jpg') no-repeat center center;
    background-size:cover;
}
#sectionMap{
    height:455px;
}
.sectionContacts{
    background-color:#333333;
}
.contactsBlock{
    display:inline-block;
    vertical-align: top;
}
.contactsLeft{
    width:400px;
    margin-right:75px;
}
.contactsRight{
    width:460px;
}
.contactsInfo{
    font:300 16px/28px "Roboto", sans-serif;
    color:#fefefe;
}
.contactsInfo span{
    color:#818181;
}
.contactsInfo a[href^='mailto']{
    color:#3cb878;
    text-decoration:none;
}
/*  Footer.
************************************/
.footer{
    padding:20px 0 18px;
    background-color:#3cb878;
    text-align:right;
}
.footerRight{
    font:12px/16px "HelveticaLightNormal", sans-serif;
    color:#fff;
    display:inline-block;
}
.footerRight a{
    color:inherit;
    text-decoration:none;
}
.footerRight a:hover{
    text-decoration:underline;
}

/*Вспомогательные классы*/
:focus{
    outline:none !important;
}
.img{
    height:auto;
    width:100%;
    display:block;
}
.clearAfter:after{
    content:" ";
    display:block;
    height:0;
    clear:both;
}

/*Кнопка моб. меню*/
.sandwichMenu{
    width: 44px;
    height: 34px;
    float: left;
    background: url('../img/sandwich.jpg') no-repeat left bottom;
    border-radius: 5px;
    margin-top: 8px;
    cursor: pointer;
    border-style: none;
    display:none;
    padding:0;
}
.sandwichMenu:hover{
    background-position:left top;
}

/*Медиа запросы*/
@media (min-width:768px) and (max-width:991px){
    .myContainer{
        width:720px;
    }
    .headerLogo{
        width:125px;
    }
    .header{
        margin-bottom:95px;
    }
    .truck{
        width:540px;
    }
    .sectionTop{
        padding-top:38px;
        padding-bottom: 65px;
    }
    .sectionPadding {
        padding: 38px 0 45px;
    }
    .sectionTitle{
        font-size: 35px;
        line-height: 37px;
        margin-bottom: 18px;
    }
    .aboutText p, .servicesText p{
        font-size: 15px;
        line-height: 21px;
    }
    .regions{
        font-size: 17px;
        line-height: 26px;
    }
    .transportGeography{
        width:400px;
    }
    .ukraineMap{
        width:276px;
        margin-right:38px;
    }
    .sectionMan{
        height:355px;
    }
    #sectionMap{
        height:400px;
    }
    .contactsInfo{
        font-size: 15px;
        line-height: 26px;
    }
    .contactsLeft {
        width: 320px;
        margin-right: 30px;
    }
    .contactsRight {
        width: 362px;
    }
}
@media (min-width:480px) and (max-width: 767px){
    .sandwichMenu{
        display:block;
    }
    .myContainer{
        margin:0;
        width:auto;
        padding:0 15px;
    }
    .truck{
        width:75%;
    }
    .header{
        position: relative;
        margin-bottom: 45px;
    }
    .oreximLogo{
        width:115px;
        margin-top:13px;
    }
    .headerNav{
        position:absolute;
        left:0;
        right:0;
        top:100%;
        background-color:#333333;
        padding:18px 0 22px;
        display:none;
    }
    .headerNav > li{
        width:100%;
        float:none;
        text-align: center;
        margin:0 0 10px;
    }
    .headerNav > li:last-child{
        margin-bottom: 0;
    }
    .headerNav > li > a{
        display:inline;
        padding:0;
    }
    .headerNav > li > a:hover{
        background-color:transparent;
    }
    .headerNavVisible{
        display:block;
    }
    .sectionTop{
        padding-top:30px;
        padding-bottom: 45px;
    }
    .sectionPadding {
        padding: 35px 0 42px;
    }
    .sectionTitle{
        font-size:32px;
        line-height:36px;
        margin-bottom:15px;
    }
    .aboutText p, .servicesText p{
        font-size: 15px;
    }
    .ukraineMap{
        width:75%;
        display:block;
        vertical-align: baseline;
        margin:0 auto 20px;
    }
    .transportGeography{
        display:block;
        vertical-align: baseline;
        width:auto;
    }
    .regions{
        font-size: 18px;
        line-height: 27px;
    }
    .sectionMan{
        height:auto;
        padding-bottom:45%;
    }
    #sectionMap{
        height:280px;
    }
    .contactsBlock{
        display:block;
        vertical-align: baseline;
    }
    .contactsLeft{
        width:auto;
        margin:0 0 20px;
    }
    .contactsRight{
        width:auto;
    }
}
@media (max-width:479px){
    .sandwichMenu{
        display:block;
    }
    .myContainer{
        margin:0;
        width:auto;
        padding:0 15px;
    }
    .truck{
        width:75%;
    }
    .header{
        position: relative;
        margin-bottom: 40px;
    }
    .oreximLogo{
        width:115px;
        margin-top:13px;
    }
    .headerNav{
        position:absolute;
        left:0;
        right:0;
        top:100%;
        background-color:#333333;
        padding:18px 0 22px;
        display:none;
    }
    .headerNav > li{
        width:100%;
        float:none;
        text-align: center;
        margin:0 0 10px;
    }
    .headerNav > li:last-child{
        margin-bottom: 0;
    }
    .headerNav > li > a{
        display:inline;
        padding:0;
    }
    .headerNav > li > a:hover{
        background-color:transparent;
    }
    .headerNavVisible{
        display:block;
    }
    .sectionTop{
        padding-top:30px;
        padding-bottom: 35px;
    }
    .sectionPadding {
        padding: 30px 0 35px;
    }
    .sectionTitle{
        font-size:26px;
        line-height:30px;
        margin-bottom:15px;
    }
    .aboutText p, .servicesText p{
        font-size: 15px;
    }
    .ukraineMap{
        width:90%;
        display:block;
        vertical-align: baseline;
        margin:0 auto 25px;
    }
    .transportGeography{
        display:block;
        vertical-align: baseline;
        width:auto;
    }
    .regions{
        font-size: 17px;
        line-height: 26px;
    }
    .sectionMan{
        height:auto;
        padding-bottom:47%;
    }
    #sectionMap{
        height:330px;
    }
    .contactsBlock{
        display:block;
        vertical-align: baseline;
    }
    .contactsLeft{
        width:auto;
        margin:0 0 20px;
    }
    .contactsRight{
        width:auto;
    }
    .contactsInfo{
        font-size: 15px;
        line-height: 26px;
    }
}