/*
Table of Contents

Sections
    Style Reset
    Body
    Typography
    Color
    Header
    Main
        Images
        Columns
        Spacers
        Quicklinks bar
    Footer
    Media Query


This document is written in a mobile-first fashion. All initial styles will build the mobile version of the site. Media queries will adjust content for larger screens.

*/

/*
*
*
*
*
* 
* Style Reset */
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
/*
*
*
*
*
* 
* Body */
body{
    font-family: 'Raleway', Verdana, sans-serif;
    width: 100%;
    color: #0c0c0c;
}
/*
*
*
*
*
* 
* Typography */
h1{
    font-family: 'Domine', Georgia, serif;
    font-size: 2.25em;
    line-height: 1em;
    text-align: center;
}
h2{
    font-family: 'Domine', Georgia, serif;
    font-size: 1.875em;
    line-height: 1.125em;
    text-align: center;
}
h3{
    font-family: 'Raleway', Verdana, sans-serif;
    font-weight: 700;
    font-size: 1em;
    line-height: 1.3125em;
    text-align: left;
    margin-top: 0.625em;
}
p{
    font-size: 1em;
    line-height: 1.3125em;
    text-align: left;
    margin-top: 0.625em;
    letter-spacing: 0.02em;
}
a{
    font-size: 1em;
    line-height: 1.3125em;
    text-align: left;
    margin-top: 0.625em;
    text-decoration: none;
    color: #cc6a00;
}
li{
    list-style-type: none;
    line-height: 2em;
}
.centerText{
    text-align: center;
}
.rightAlignText{
    text-align: right;
}
.leftAlignText{
    text-align: left;
}
/*
*
*
*
*
* 
* Color */
.RTyellow{
    color: #cc6a00 !important;
}
.white{
    color: white;
}
.grey{
    color: #7f7f7f;
}
.red{
    color: red;
}
/*
*
*
*
*
* 
* Header */
#navBar{
    width: 100%;
    height: 50px;
    background: rgba(22, 22, 22, 0.85);
    position: fixed;
    top: 5px;
    padding-left: 20px;
    padding-right: 20px;
}
#siteIdentifier{
    height: 80px;
    position: fixed;
    top: 0px;
    margin-left: 0px;
    z-index: 1;
}
#navBar ul{
    background: rgba(6, 6, 6, 0.95);
    display: none;
    position: fixed;
    top: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    padding-left: 1.25em;
    padding-bottom: 0.66em;
    padding-top: 5em;
    z-index: 0;
}
#navBar a{
    color: white;
}
#navBar ul a:hover, #navBar ul p:hover{
    color: #cc6a00;
    cursor: pointer;
}
#navBar li{
    border-bottom: 1px solid #3c3c3c;
    padding-top: 0.45em;
    padding-bottom: 0.45em;
}
#navMenu{
    margin-top: 0.825em;
}
#callToActionBanner{
    margin-top: 32px;
    margin-left: -10px;
    z-index: -1;
}
#callToActionText{
    position: fixed;
    top: 54px;
    margin-left: 24px;
    font-size: 0.875em;
}
.headerIconFB{
    margin-right: -1em;
    padding-top: 0.2em;
}
.headerIconPhone{
    background-image: url(images/phone22.png);
    width: 22px;
    height: 22px;
    margin-right: 0.5em;
    margin-top: 0.2em;
    float: left;
}
/*
*
*
*
*
* 
* Main */

/* Images */
#home .hero{
    background-image: url("images/homeHero3.jpg");
    background-color: #dbdfe2;
    background-size: cover;
    background-position: 10% 0%;
    width: 100%;
    padding-top: 25vh;
    padding-bottom: 18vh;
}
#companyInfo .hero{
    background-image: url("images/texture.png");
    background-repeat: repeat;
    background-color: #fff;
    background-position: center;
    width: 100%;
    padding-top: 21vw;
    padding-bottom: 28vw;
}
#ourServices .hero{
    background-image: url("images/texture.png");
    background-repeat: repeat;
    background-color: #000;
    background-position: center;
    width: 100%;
    padding-top: 21vw;
    padding-bottom: 28vw;
}
#testimonials .hero{
    background-image: url("images/texture.png");
    background-color: #000;
    background-repeat: repeat;
    background-position: center;
    width: 100%;
    padding-top: 21vw;
    padding-bottom: 28vw;
}
#employment .hero{
    background-image: url("images/texture.png");
    background-color: #000;
    background-repeat: repeat;
    background-position: center;
    width: 100%;
    padding-top: 21vw;
    padding-bottom: 28vw;
}
#contactUs .hero{
    background-image: url("images/texture.png");
    background-color: #fff;
    background-repeat: repeat;
    background-position: center;
    width: 100%;
    padding-top: 21vw;
    padding-bottom: 10vw;
}
#legal .hero{
    background-image: url("images/RoadTek_GoogleMapImages.jpg");
    background-color: #dbdfe2;
    background-size: cover;
    background-position: center;
    width: 100%;
    padding-top: 25vh;
    padding-bottom: 18vh;
}
.testHero .hero{
    background-image: url("images/RoadTek_GoogleMapImages.jpg");
    background-color: #dbdfe2;
    background-size: cover;
    background-position: 50% 60%;
    width: 100%;
    padding-top: 20vh;
    padding-bottom: 12vh;
}
.heroTextShift{
    position: relative;
    top: -23vh;
    height: 0;
    z-index: -1;
}
#residential .hero{
    width: 100%;
    height: 50vh;
}
#residentialLeftImage{
    background-image: url("images/residential_left.jpg");
    background-size: cover;
    background-position: 50% 25%;
    width: 100%;
    height: 50vh;
    float: left;
    z-index: -1;
    position: relative;
}
#residentialRightImage{
    background-image: url("images/residential_right.jpg");
    background-size: cover;
    background-position: center;
    width: 0%;
    height: 50vh;
    float: left;
    z-index: -1;
    position: relative;
    display: none;
}
#commercial .hero{
    width: 100%;
    height: 50vh;
}
#commercialLeftImage{
    background-image: url("images/commercial_left.jpg");
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 50vh;
    float: left;
    z-index: -1;
    position: relative;
}
#commercialRightImage{
    background-image: url("images/commercial_right.jpg");
    background-size: cover;
    background-position: center;
    width: 00%;
    height: 50vh;
    float: left;
    z-index: -1;
    position: relative;
    display: none;
}
#automotive .hero{
    background-image: url("images/automotive.jpg");
    background-color: #dbdfe2;
    background-size: cover;
    background-position: 50% 0%;
    width: 100%;
    padding-top: 30vh;
    padding-bottom: 16vh;
}
#residential h1, #residential p, #commercial h1, #commercial p, #automotive h1, #automotive p{
    text-shadow: 0px 3px 12px #000;
}
#thankYou .hero{
    margin-top: 22vw;
    margin-bottom: 10vw;
}
.contentArea{
    background-image: url("images/texture.png");
    background-color: #fff;
    background-repeat: repeat;
    background-position: center;
    width: 100%;
    padding-top: 6em;
    padding-bottom: 9em;
}
.thinImage{
    background-image: url("images/RoadTek_GoogleMapImages4.jpg");
    background-color: #efefef;
    background-size: cover;
    background-position: 0% 88%;
    height: 90px;
    margin: 2em;
}
#serviceImgRes, #serviceImgCom, #serviceImgAuto{
    width: 100%;
    padding: 2.85vw;
    margin-top: 1em;
}
iframe{
    height: 200px;
}
#contactMap{
    width: 100%;
    border: 1px solid lightgrey;
}
input, select{
    padding: 0.75em;
    width: 100%;
    border: 1px solid #e6e6e6;
    color: #808080;
    font-family: gidole;
    font-size: 0.95em;
}
form{
    overflow: auto;
    padding-bottom: 1em;
}
.button{
    width: 190px;
    border: none;
    background-color: hsla(35,95%,50%,01);
    font-size: 1.0625em;
    color: #1a1a1a;
    margin-top: 1em;
}
#eugeneAndZack{
    background-image: url(images/ez.png);
    width: 248px;
    height: 200px;
    background-size: cover;
    margin-top: 0.5em;
}

/* Columns */
.col0-875{
    width: 87.5%;
    overflow: auto;
}
.col1-5{
    width: 90%;
    overflow: auto;
}
.col2{
    width: 90%;
    overflow: auto;
}
#employment .col2{
    padding-left: 12.5%;
    padding-right: 12.5%;
}
.col3{
    width: 90%;
    overflow: auto;
}
#ourServices .col3{
    margin-bottom: 3em;
}
#contactUs .col3{
    margin-bottom: 0.75em;
}
.col4{
    width: 90%;
}
.centerCol{
    margin-left: auto;
    margin-right: auto;
}
.leftCol{
    margin-left: 10%;
    margin-right: auto;
}
.floatLeft{
    margin-left: auto;
    margin-right: auto;
}
.floatRight{
    float: right;
}
.navAlignedContent{
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}

/* Spacers */
.spacerDouble{
    margin-top: 12vh;
    margin-bottom: 12vh;
    overflow: auto;
}
.spacerSingle{
    margin-top: 6vh;
    margin-bottom: 6vh;
    overflow: auto;
}
.spacerHalf{
    margin-top: 3vh;
    margin-bottom: 3vh;
    overflow: auto;
}
.spacerBottom{
    margin-bottom: 4vh;
    overflow: auto;
}

/* Quick Link Bar Styles */
#quickLinksBar{
    width: 100%;
    background-image: url("images/texture.png");
    background-color: #000;
    background-repeat: repeat;
    padding-bottom: 0.75em;
    padding-top: 0.15em;
}
#quickLinksBar section{
    max-width: 890px;
    margin-left: auto;
    margin-right: auto;
    overflow: auto;
}
#quickLinksBar li{
    line-height: 1em;
    padding-top: 0.7em;
    width: 100%;
}

/*
*
*
*
*
* 
* Footer */
footer{
    width: 100%;
    height: 30px;
    background: #161616;
    padding-top: 0.5px;
}
footer p{
    font-size: 0.75em;
}
/*
*
*
*
*
* 
* Media Query

For screen sizes larger than 540px

*/
@media screen and (min-width:540px){
    /*Adjust Typography */
    h1{
        font-size: 3.125em;
    }
    /* Adjust hero image heights */
    #home .hero{
        padding-top: 24vh;
        padding-bottom: 20vh;
        background-position: center;
    }
    #companyInfo .hero{
        padding-top: 9.375vw;
        padding-bottom: 12.5vw;
    }
    #ourServices .hero{
        padding-top: 9.375vw;
        padding-bottom: 12.5vw;
    }
    #testimonials .hero{
        padding-top: 9.375vw;
        padding-bottom: 12.5vw;
    }
    #employment .hero{
        padding-top: 9.375vw;
        padding-bottom: 12.5vw;
    }
    #contactUs .hero{
        padding-top: 9.375vw;
        padding-bottom: 3vw;
    }
    /* Adjust Columns */
    .col0-875{
        width: 87.5%;
        overflow: auto;
    }
    .col1-5{
        width: 66.66%;
        overflow: auto;
        max-width: 460px;
    }
    .col2{
        width: 50%;
        overflow: auto;
        max-width: 310px;
    }
    #employment .col2{
        padding-left: 0%;
        padding-right: 0%;
    }
    .col3{
        width: 33.33%;
        overflow: auto;
    }
    .col4{
        width: 25%;
        overflow: auto;
    }
    .floatLeft{
        float: left;
    }
    /* Adjust col3 margins when they unstack */
    #ourServices .col3{
        margin-bottom: 1em;
    }
    .navAlignedContent{
        width: 50%;
        margin-left: 6%;
    }
}

/*
*
*
*
*
* 
* Media Query

For screen sizes larger than 930px

*/
@media screen and (min-width:930px){
    /* Adjust Navigation Bar */
    #navContainer{
        width: 890px;
        margin-left: auto;
        margin-right: auto;
    }
    #navBar ul{
        display: block !important;
        float: right;
        position: static;
        width: 670px;
        padding-left: 0px;
        padding-bottom: 0px;
        padding-top: 0px;
        background: none;
        margin-top: -5px;
    }
    #navBar li{
        float: left;
        margin: 1em;
        color: white;
        border-bottom: none;
        padding-top: 0em;
        padding-bottom: 0em;
    }
    #navMenu{
        display: none;
    }
    .hideOnDesktop{
        display: none;
    }
    /* Adjust hero image heights */
    #home .hero{
        padding-top: 28vh;
        padding-bottom: 23vh;
    }
    #residentialLeftImage{
        width: 50%;
    }
    #residentialRightImage{
        width: 50%;
        display: block;
    }
    #commercialLeftImage{
        width: 50%;
    }
    #commercialRightImage{
        width: 50%;
        display: block;
    }
    iframe{
        height: 300px;
    }
    /* Adjust Columns */
    .col1-5{
        width: 50%;
        overflow: auto;
    }
    .col2{
        width: 33%;
        overflow: auto;
    }
    .navAlignedContent{
        width: 400px;
        margin-left: 13%;
        padding-left: 0px;
        padding-right: 0px;
    }
    /* Adjust Spacers */
    .spacerSingle{
        margin-top: 4.6875vw;
        margin-bottom: 4.6875vw;
    }
    /* Adjust Quicklinks Bar*/
    #quickLinksBar li{
        line-height: 1em;
        padding-left: 3em;
        padding-top: 0.7em;
        width: auto;
    }
}

/*
*
*
*
*
* 
* Media Query

For screen sizes larger than 1200px

*/
@media screen and (min-width:1200px){
    /* Adjust #home hero image height */
    #home .hero{
        padding-top: 28vh;
        padding-bottom: 23vh;
    }
    /* Adjust Columns */
    .col0-875{
        width: 66.66%;
        overflow: auto;
    }
    .col1-5{
        width: 33%;
        overflow: auto;
    }
    .navAlignedContent{
        width: 500px;
        margin-left: calc((100% - 890px)/2);
        padding-left: 0px;
        padding-right: 0px;
    }
}