@charset "UTF-8";

/*---------------------------------------------------------------------------
-----------------------------------------------------------------------------
MOBILE / SMALL
-----------------------------------------------------------------------------
---------------------------------------------------------------------------*/
@media only screen and (max-width: 40em) { 
    
    .logo img {max-width: 180px; }
    header { height: 68px; padding: 0;}
    section.page-content { padding-top: 68px;}
    .menu{ margin-top: 7px;}
    
    
    .home-quicklinks { margin-top: 50px;}
    .process-steps { bottom: -100px; }
    


    .footer-info { text-align: center; }
    footer .spacer { width: 0px; display: block;}

    
    #ContactModal { padding: 20px;}
    .contact-icon { margin-right: 15px; max-width: 80px;}

    .main-image-text {height: 785px;}
    
    
    .main-image-headline
        { top: 18%; text-align: center; }
    
    .main-image-headline h1
        { font-size: 1.8em; line-height: 1em; }
    
    span.header-bullet:before {
        content: "";
    }
    
    span.header-bullet {
        max-width: 0px;
        margin: 0;
        display: block;
    }
    
    .slider { height: 220px; }
    
    .process-area { margin-top: 240px; }
    
    .process-1, 
    .process-2, 
    .process-3 { 
        width: 94%;
        margin: 15px auto;
        padding: 10px 40px;
        left: 0;
        top: 0;
        display: block;
        position: relative;
    }
    
    .process-1 img, 
    .process-2 img,
    .process-3 img {
        max-width: 300px; 
        display: block;
        margin: 0 auto;
    }

    .process-reveal {
        display: inline;
        color: white;
    }  

    a.more-button2 {
        color: #003C65; /* CAG BLUE */
        padding: 2px;
        width: 85px;
        display: block;
    }
    
    .more-button2 {
        padding: 0px;
        margin: 5px auto 0;    
        border: 0;
    }
    
    .process-reveal p {
        margin-bottom: 0px;   
        display: inline;
    }
    
    .about-intro-left, .about-intro-right { padding: 0 5%; }
    
    .bio { text-align: center; }
    .bio p { text-align: left; }

    .crd { display: block; margin-left: 0;}
    .services-header img { padding: 0 10%;}
    p, li, ul { font-size: .95em; line-height: 1.6em;}

    .service-item h2, .service-item h3 {
        text-align: center;
    }
    .service-item-icon { 
        margin-bottom: 35px;
        padding: 15px;
    }
    

    .service-category img {
        float: none;
        margin: 0 auto;
        padding: 0 0 25px 0;
    }
    
    .profile .quick-name {
        padding: 6px 0;
        letter-spacing: 0px;
        font-size: 1em; 
    }
    
    .contact-right { padding: 25px; }
    .contact-left p { font-size: 1.15em; line-height: 1.6em;}

    
    
    
}



/*---------------------------------------------------------------------------
-----------------------------------------------------------------------------
MOBILE + TABLET / SMALL & MEDIUM
-----------------------------------------------------------------------------
---------------------------------------------------------------------------*/
@media only screen and (max-width: 64em) { 
    .logo img {margin-left: 10px;}

    footer { padding-right: 15px; padding-left: 15px; }
            
    section.about { width: 100%; padding: 0;}
    .bio { padding: 30px;}
    
    section { padding: 40px 0;}
    section > div { padding: 0 25px;}
    section .full-width-image { padding: 0;}
    
    .streetscape { margin-top: 45px; }
    .quicklink-links { text-align: center;}
    
}
    





/*---------------------------------------------------------------------------
-----------------------------------------------------------------------------
TABLET / MEDIUM 
-----------------------------------------------------------------------------
---------------------------------------------------------------------------*/
@media only screen and (min-width: 40.063em) and (max-width: 64em) { 

    .slider, 
    
    .main-image-text { max-height: 380px; }
    
    .process-1, .process-2, .process-3 {
        bottom: 0px;    
    }
    
    .main-image-headline { top: 230px;}
    .main-image-headline h1
        { font-size: 2.2em; line-height: 1em;}
    .process-steps { top: 52%;}   
    
    .profile .quick-name { display: block;}
    .contact-right { padding: 25px ;}
    

}




/*---------------------------------------------------------------------------
-----------------------------------------------------------------------------
TABLET / MEDIUM AND UP
-----------------------------------------------------------------------------
---------------------------------------------------------------------------*/
@media only screen and (min-width: 40.063em) { 

.process-1:hover,
.process-2:hover,
.process-3:hover{
    background:rgba(255,255,255, 1);
    padding-top: 15px;
    box-shadow: 2px 2px 10px #666;
}

.process-reveal {
    display: none;
    padding: 40px 0 25px;
    border-top: 2px solid #003C65 /* CAG BLUE */;
    margin: 20px 20px 0;
}

.process-reveal p {
    margin-bottom: 40px;   
}

.process-1:hover .process-reveal,
.process-2:hover .process-reveal,
.process-3:hover .process-reveal{
    display: inline-block;   
}
    

    

}






/*---------------------------------------------------------------------------
-----------------------------------------------------------------------------
DESKTOP / LARGE ONLY
-----------------------------------------------------------------------------
---------------------------------------------------------------------------*/
@media only screen and (min-width: 64.063em){ 


    .slider, 
    .main-image-text { max-height: 550px; }
    
    .main-image-headline {top: 350px;}
    
    span.header-bullet {  top: -8px;}
    
    .quicklink-links h3:before {
        content:"\00BB"; 
        margin-right: 10px;
        color: #003C65 /* CAG BLUE */;
        font-weight: 700;
    }


    

}




/*----------------------------------------------
WIDESCREEN
---------------------------------------*/
@media only screen and (min-width: 87.500em){ 
    
    .slider { 
        max-height: 730px; 
    }
    
    .main-image-text { 
        height: 730px; 
        max-height: 730px;
    }
    
    .main-image-headline {
        top: 520px;
}
    
}