/* Table of Contents
 * >General
 * >Header
 * >Footer
 * >Body
 * 
 * >Page-Specific
 *   >Home
 *   >About
 *   >Client
 *   >Jobs
 *   >Conact
 */

/* Notes:
 * - URL for images folder: '../img/'
 * - due to iOS viewport unit buggyfill behavior, all vw/vh-based styles will override rem/% ones
 */





/* >General */

body {min-width: 320px;}

/* >>wrapper margin, full-sized map break point */
@media screen and (max-width: 1084px) {
    /* dynamic padding;
     * the % deviation of 1084px from 1024px, divided by 2;
     * makes the MQ transition seamless
     */
    .content-wrapper {
        margin: 0 3%;
    }
}





/* >Header */

/* >>single-row header break point */
@media screen and (max-width: 999px) {
    header .content-wrapper {margin: 0;}
    /* Title stretched to full width */
    #title {float: none; padding: 2rem 0 1rem;}
    #logo {/*height: 3.8rem;*/}
    #business-name .first-line {display: inherit; font-size: inherit; font-weight: normal;}
    #business-name .second-line {display: inherit; vertical-align: bottom;}

    /* main nav-menu */
    #main-menu {float: none; position: relative; background: #11131a;}
/*    #main-menu .sub-menu {background: #11131a; color: #fafaff;}*/
    /* Note: 52rem -> total width of the ul; update manually as needed */
    #main-menu > ul {padding: 0; /*display: inline-block;*/ width: 66rem; margin: 0 auto;}
}



/* >>full title, full main menu break point */
@media screen and (max-width: 679px) {
    header .content-wrapper {margin: 0;}
    
    /* title */
/*    #title {padding-top: 6rem;}*/ /* make room for main menu */
    #logo {display: block; margin: auto;}
    #business-name {display: block;}
    #business-name > .first-line {padding: 0;}
    
    /* main menu styles; hide all but the selected page;
     * overlay "browse" tab on selected tab to simulate a dropdown menu
     */
/*
    #main-menu {
        position: fixed; top: 0;
        z-index: 9999; box-shadow: #353a45 0 -1rem 1rem 1rem;
    }
*/
    #main-menu,
    #main-menu > ul {width: 100%; padding: 0; margin: 0;}
/*    #main-menu > ul {width: 100%; display: block; position: relative;}*/
    #main-menu > ul > li {display: none; margin: 0;}
    #main-menu > ul > .selected,
    #main-menu #browse-sitemap,
    #main-menu > ul > .clear {display: block;}
    
    #main-menu > ul > .selected,
    #main-menu #browse-sitemap {width: 100%;}
    #main-menu > ul > .selected > a,
    #main-menu #browse-sitemap > a {font-size: 1.6rem; margin: 0; border-radius: 0;}
    
    #main-menu > ul > .selected {text-align: left;}
    
    #main-menu #browse-sitemap {position: absolute; text-align: right; color: #445;}
    #main-menu #browse-sitemap > a:hover,
    #main-menu #browse-sitemap > a:focus {background: rgba(255, 255, 255, 0.6);}
    #main-menu #browse-sitemap > a:before {content: '| ';}
}




/* >>multi-row title break point */
/* DEPENDENCY>>full title, full main menu break point */
/* Note: At height=700px, title is 100px tall;
 *       on contact page with map=50vh, title consumes 29% of the screen */
@media screen and (max-width: 679px) and (max-height: 699px) {
/*
    #logo {margin: 0;}
    #logo,
    #business-name {display: inline}
    #business-name > .first-line {padding-left: 0.8rem;}
*/
    
    /* 50px logo height / 700px height = 7.1429vh */
    /* 22px font-size / 700px height = 3.1429vh */
    #logo {height: 5rem;}
    #logo,
    #business-name {float: left;}
    #business-name {font-size: 2.2rem; padding-left: 1.6rem; text-align: left;}
}

/* >>title fixed font-size break point */
/* DEPENDENCY>>full title, full main menu break point */
/* DEPENDENCY>>multi-row title break point */
/* Note: @height=573px, font-size@3.1429vh=18px */
@media screen and (max-width: 459px) and (max-height: 699px) {
    /* 22px font-size / 460px width = 4.7826vw */
    /* 50px logo height / 460px width = 10.8695vw */
    #business-name {font-size: 4.7826vw;}
    #logo {height: 10.8695vw;}
}
@media screen and (max-width: 376px) and (max-height: 699px) {
    /* @width=376.36, font-size=18px, logo-height=40.91px */
    #business-name {font-size: 1.8rem;}
    #logo {height: 4rem;}
}





/* >Footer */

/* >>floated sitemap break point */
/* Note: major UI change; 2-column sitemap */
@media screen and (max-width: 759px) {
    #sitemap {display: block;}
    #sitemap .sub-menu > li,
    #sitemap > ul > li:nth-last-child(n+2) {padding:0;}
    #sitemap > ul > li:nth-last-child(n+2) {
        float: left;
        margin: 1rem 1%;
        border: none;
        height: auto;
        width: 48%;
    }
    #sitemap > ul > li:first-child {display: none;}
    #sitemap li a,
    #sitemap h2 {
        display: block;
        padding: 0.8rem 0;
        border-radius: 0.4rem;
        background: rgba(255, 255, 255, 0.15);
        
        font-weight: bold;
        text-align: center;
        text-decoration: none;
    }
    #sitemap a:hover,
    #sitemap a:focus,
    #sitemap .sub-menu a:hover,
    #sitemap .sub-menu a:focus {background: rgba(255, 255, 255, 0.6);}
    
    #sitemap .sub-menu {padding: 0;}
    #sitemap .sub-menu > li {display: inline-block; margin: 0 5% 0.5rem; width: 90%;}
    #sitemap .sub-menu a {
        border-radius: 0;
        background: rgba(0, 0, 0, 0.15);
        font-weight: normal;
    }
    
    #copyright {margin-top: 8rem;}
}



/* DEPENDENCY>>full title, full main menu break point */
@media screen and (max-width: 679px) {
    footer > .content-wrapper {/*height: 100%; */margin: 0; padding: 0 0 1.6rem;}
    #sitemap > ul > li:first-child {float: none; margin: 0; width: 100%;}
    #sitemap > ul > li:first-child,
    #sitemap h2 {
        display: block;
        padding: 0;
        margin: 0;
/*
        
        position: relative;
        z-index: 200;
        box-shadow: #353a45 0 0rem 1rem -0.5rem;
        
*/
        color: #445;
        text-align: left;
        text-shadow: 0 0.1rem 0 rgba(0, 0, 0, 0.15);
    }
    #sitemap h2,
    #sitemap h2 > a {border-radius: 0;}
    #sitemap h2 > a {background: #7aa4ee; padding: 1.2rem 1.8rem; text-align: right; font-weight: normal;}
}


/* >>2-column sitemap break point */
@media screen and (max-width: 439px) {
/*    footer {height: 150vh;}*/
    #sitemap {width: 100%;/* height: 100vh;*/}
    #sitemap a {border-radius: 0;}
    #sitemap > ul > li:nth-child(n+1) {float: none; margin: 0; width: 100%;}
/*    #sitemap > ul > li:nth-child(2) {margin: 0 10%; width: 10%;}*/
    #sitemap > ul > li:nth-child(2) > a {
        margin: 1rem 1rem;
        border-radius: 0;
        background: rgba(0, 0, 0, 0.15);
        font-weight: normal;
    }
    #sitemap > ul > li:nth-child(2) > a:hover,
    #sitemap > ul > li:nth-child(2) > a:focus {background: rgba(255, 255, 255, 0.6);}
    
    #sitemap .sub-menu > li {width: 100%; margin: 0;}
    #sitemap .sub-menu > li > a {margin: 0 1rem 1rem;}
    #sitemap .sub-menu > li:first-child > a {margin-top: 1rem;}
}





/* >Body */

/* >>banner padding, content-body margin break point */
@media screen and (max-width: 899px) {
    /* remove banner box-shadows & padding */
    #banner .content-wrapper {box-shadow: none;}
    #banner {padding: 0;}
    
    /* make the slogan scale with the width */
    #banner .slogan {font-size: 4vw;}
    
    /* remove margins from content columns; compensate with padding */
    #content-body {padding-top: 0; padding-bottom: 0;}
    #content-body .column {margin: 0; padding-left: 5%; padding-right: 5%;}
    #content-body .left,
    #content-body .right {padding-left: 2.5%; padding-right: 2.5%;}
}



/* >>2-column break point */
@media screen and (max-width: 799px) {
    #content-body .column {width: 90%; float: none;}
    #content-body .left,
    #content-body .right {margin: 0; padding-left: 5%; padding-right: 5%;}
}



/* >>banner text, content-body margin break point */
@media screen and (max-width: 799px) {
    /* hide banner */
/*    #banner {display: none;}*/
    #banner .content-wrapper {margin: 0;}
    #banner #banner-text {width: 100%;}
    #banner #banner-text.hover-bottom {bottom: 0;}
    #banner #banner-text.hover-top {top: 0;}
    #banner .slogan {font-size: 2.4rem; padding: 0.8rem 0;}
    
    /* stick content body to screen width edges */
    #content-body {margin: 0;}
}



/* >>overlayed banner-text break point */
@media screen and (max-width: 519px) {
    #banner #banner-text {position: relative;}
}





/* >Page-Specific */

/* >Home */

/* DEPENDENCY>>banner padding, content-body margin break point */
/* remove urgent news margins */
@media screen and (max-width: 899px) {
    #urgent-news {margin: 0;}
}



/* >About */

/**/



/* >Client */

/* >>client list paragraph-style break point */
@media screen and (max-width: 899px) {
    /* display list-item with customized bullets */
    #client-region .client-list > ul > li ul {padding-left: 3rem; text-align: left}
    #client-region .client-list > ul > li li {display: list-item; list-style-type: none;}
    #client-region .client-list > ul > li li:before {
        content: '';
        display: inline-block;
        width: 1rem; height: 1rem;
        margin-left: -1.8rem; /* ul padding / 2 */ margin-right: 0.6rem;/* left margin - width */
        vertical-align: baseline;
        background: rgba(67, 67, 84, 0.7);
        border-radius: 0.5rem;
    }
    /*#client-region .client-list > ul > li li:nth-child(2n) {font-weight: normal;}*/
}

/* DEPENDENCY>>2-column break point */
@media screen and (max-width: 799px) {
    /* maintain width, padding after template adds padding */
    #client-region.column, #client-list-menu.column {padding: 0; width: 100%;}
}

/* >>single-row controls break point */
@media screen and (max-width: 539px) {
    /* fully stretch client list menu, heading */
    #client-list-menu {padding: 0;}
    #client-list-menu > ul > li {display: block; width: 100%; padding: 0; margin: 0; box-shadow: 0 0;}
    #client-list-menu > ul > li > label {padding: 0.4rem 0;}
}



/* >Jobs */

/* DEPENDENCY>>banner padding, content-body margin break point */
@media screen and (max-width: 899px) {
    /* Compensate default column spacing */
    #job-list.column {padding: 0;}
}

/* DEPENDENCY>>banner text, content-body margin break point */
@media screen and (max-width: 799px) {
    #job-openings > header,
    #job-openings > p {margin: 1rem 2%;}
    #job-notes {margin: 2rem 0;}
    #job-list.column {/*margin: 0 2%; */width: 100%;}
    #job-list > li {margin: 0 2%;}
    
}

/* >>wide-screen job listing break point */
@media screen and (max-width: 479px) {
/*    #job-list > li:nth-child(n+2) {margin: 0;}*/
    
    /* rearrange job opening sections into a one-column layout */
    .job-opening {padding: 1rem 0.5rem;}
    .job-opening > header {float: none;}
    .job-title {width: 100%; min-width: 1px;}
    .secondary-info {clear: left; position: relative; top: 0; right: 0; text-align: left;}
    .secondary-info > h4 {display: inline;}
/*    .secondary-info > p {float: left; font-size: 1.6rem; line-height: 2.8rem;}*/
    .job-opening > footer > h4:nth-of-type(n+2) {clear: left; margin-left: 0;}
    .job-opening .back-to-top {float: left;}
    
    
    /* make category data inline */
    p.job-subtype:nth-of-type(n+2) {float: left;}
    p.job-subtype:before {content: " > "; display: inline-block; padding: 0 1rem;}
    p.job-subtype:nth-of-type(n+3):before {content: " | ";}
    p.job-subtype:nth-of-type(n+3):after {content: none;}
}

/* >>job requirements single paragraph, break point */
@media screen and (max-width: 379px) {
    .job-requirements > header > h4 {float: none;}
/*
    .job-opening > .job-requirements > p, {display: block;}
    .job-opening > .job-requirements > h4 {display: inline; float: left;}
    .job-opening > .job-requirements > h4:after {content: none;}
*/
}



/* Contact */

/**/