@font-face {
    font-family: MorrisRomanBlack;
    src: url(../fonts/MorrisRomanBlack.ttf);
}
@font-face {
    font-family: MetropolisRegular;
    src: url(../fonts/MetropolisRegular.otf);
}
/* Full Container */
.main {
    margin: auto 0;
    padding: 0;
    border: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: content-box;
}
/* Construction Image */
#construction {
    display: block;
    margin: 0 auto;
    width: 600px;
    height: 700px;
}
/* Main Site XL
        ts13-header   x:0 y:0   1600x203
        home-button   x:0 y:203   199x57
        home-button_transition   -same as above-
        about-us-button   x:199 y:203   297x57
        about-us_transition   -same as above-
        projects-button   x:496 y:203   311x57
        projects-button_transition   -same as above-
        contact-us-button   x:807 y:203   351x57
        contact-us_transition   -same as above-
        search-bar   x:1158 y:203   442x57
        menu-bar   x:0 y:260   1600x11
        home-page-body   x:0 y:271   1600x720
        ts13-footer   x:0 y:991   1600x89
*/
/* Header */
#header {
    width: 1600px;
    height: 203px;
    position: relative;
    margin: 0 auto;
    padding: 0;
    background-image: url('../images/main/ts13-header.png');
    background-repeat: no-repeat;
}
/* Menu*/
#nav-menu {
    width: 1600px;
    height: 57px;
    position: relative;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: row;
}
/* Home Button */
#home-button {
    width: 199px;
    height: 57px;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url('../images/main/home-button.png');
    background-repeat: no-repeat;
}
/* Home Button: Hover Transition*/
#home-button:hover {
    background-image: url('../images/main/home-button_transition.png');
}
/* About Us Button */
#about-us {
    width: 297px;
    height: 57px;
    position: absolute;
    top: 0;
    left: 199px;
    background-image: url('../images/main/about-us-button.png');
    background-repeat: no-repeat;
}
/* About Us Button: Hover Transition*/
#about-us:hover {
    background-image: url('../images/main/about-us-button_transition.png');
}
/* Projects Button */
#projects {
    width: 311px;
    height: 57px;
    position: absolute;
    top: 0;
    left: 496px;
    background-image: url('../images/main/projects-button.png');
    background-repeat: no-repeat;
}
/* Projects Button: Hover Transition*/
#projects:hover {
    background-image: url('../images/main/projects-button_transition.png');
}
/* Contact Us Button */
#contact-us {
    width: 351px;
    height: 57px;
    position: absolute;
    top: 0;
    left: 807px;
    background-image: url('../images/main/contact-us-button.png');
    background-repeat: no-repeat;
}
/* Contact Us Button: Hover Transition*/
#contact-us:hover {
    background-image: url('../images/main/contact-us-button_transition.png');
}
/* Search Bar */
#search-bar {
    width: 442px;
    height: 57px;
    position: absolute;
    top: 0;
    left: 1157px;
    background-image: url('../images/main/search-bar.png');
    background-repeat: no-repeat;
}
/* Search Bar: Hover Transition */
/* Menu Bar */
#menu-bar {
    width: 1600px;
    height: 11px;
    position: relative;
    margin: 0 auto;
    padding: 0;
    background-image: url('../images/main/menu-bar.png');
    background-repeat: no-repeat;
}
/* Main Body */
#page-body {
    width: 1600px;
    height: 720px;
    position: relative;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    font-family: MetropolisRegular, sans-serif;
    background-image: url('../images/main/home-page-body.png');
    background-repeat: no-repeat;
}
/* Main Content */
#main-content {
    grid-area: mc;
}
/* Image Holders */
#image-holder-vert-one {
    grid-area: ihv1;
    position: relative;
    margin: 0 auto;
    padding: 0;
    background-image: url('../images/rec-vert-screen.png');
    background-repeat: no-repeat;
}
#image-holder-vert-two {
    grid-area: ihv2;
    position: relative;
    margin: 0 auto;
    padding: 0;
    background-image: url('../images/rec-vert-screen.png');
    background-repeat: no-repeat;
}
#image-holder-horiz {
    grid-area: ihh;
    position: relative;
    margin: 0 auto;
    padding: 0;
    background-image: url('../images/rec-horiz-screen.png');
    background-repeat: no-repeat;
}
/* Footer */
#main-footer {
    width: 1600px;
    height: 89px;
    position: relative;
    margin: 0 auto;
    padding: 0;
    background-image: url('../images/main/ts13-footer.png');
    background-repeat: no-repeat;
}

@media screen and (max-width: 1600px) {
    /* Full Container Large */
    .main {
        width: 1600px;
        height: 1081px;
    }
    /* Main Site Large
        ts13-header   x:0 y:0   1600x203
        home-button   x:0 y:203   199x57
        home-button_transition   -same as above-
        about-us-button   x:199 y:203   297x57
        about-us_transition   -same as above-
        projects-button   x:496 y:203   311x57
        projects-button_transition   -same as above-
        contact-us-button   x:807 y:203   351x57
        contact-us_transition   -same as above-
        search-bar   x:1158 y:203   442x57
        menu-bar   x:0 y:260   1600x11
        home-page-body   x:0 y:271   1600x720
        ts13-footer   x:0 y:991   1600x89
    */
    /* Header */
    /* Same as XL */
    /* Menu */
    /* Same as XL */
    /* All Buttons and Transitions */
    /* Same as XL */
    /* Search Bar */
    /* Same as XL */
    /* Menu Bar */
    /* Same as XL */
    /* Main Body */
    /* Remove the below line once content is inserted */
    #page-body {
        width: 100%;
    }
    /* Footer */
    /* Same as XL */
}

@media screen and (max-width: 1007px) {
    /* Full Container Medium */
    .main {
        width: 1007px;
        height: 1081px;
    }
    /* Main Site Medium
        med-ts13-header   x:0 y:0    1007x128
        med-home-button   x:0 y:127   115x61
        med-home-button_transition   -same as above-
        med-about-us-button   x:115 y:127    210x61
        med-about-us_transition   -same as above-
        med-projects-button    x:325 y:127    185x61
        med-projects-button_transition   -same as above-
        med-contact-us-button   x:510 y:127   185x61
        med-contact-us-button_transition   -same as above-
        med-search-bar    x:695 y:127    312x61
        med-menu-bar   x:0 y:180   1007x11
        med-home-page-body   x:0 y:199   1007x791
        med-ts13-footer   x:0 y:990   1007x90
    */
    /* Header */
    #header {
        width: 1007px;
        height: 128px;
        background-image: url('../images/main/medium/med-ts13-header.png');
    }
    /* Menu*/
    #nav-menu {
        width: 1007px;
        height: 61px;
    }
    /* Home Button */
    #home-button {
        width: 115px;
        height: 61px;
        background-image: url('../images/main/medium/med-home-button.png');
    }
    /* Home Button: Hover Transition */
    #home-button:hover {
        background-image: url('../images/main/medium/med-home-button_transition.png');
    }
    /* About Us Button */
    #about-us {
        width: 210px;
        height: 61px;
        left: 115px;
        background-image: url('../images/main/medium/med-about-us-button.png');
    }
    /* About Us Button: Hover Transition */
    #about-us:hover {
        background-image: url('../images/main/medium/med-about-us-button_transition.png');
    }
    /* Projects Button */
    #projects {
        width: 185px;
        height: 61px;
        left: 325px;
        background-image: url('../images/main/medium/med-projects-button.png');
    }
    /* Projects Button: Hover Transition */
    #projects:hover {
        background-image: url('../images/main/medium/med-projects-button_transition.png');
    }
    /* Contact Us Button */
    #contact-us {
        width: 185px;
        height: 61px;
        left: 510px;
        background-image: url('../images/main/medium/med-contact-us-button.png');
    }
    /* Contact Us Button: Hover Transition */
    #contact-us:hover {
        background-image: url('../images/main/medium/med-contact-us-button_transition.png');
    }
    /* Search Bar */
    #search-bar {
        width: 312px;
        height: 61px;
        left: 695px;
        background-image: url('../images/main/medium/med-search-bar.png');
    }
    /* Search Bar: Hover Transition */
    /* Menu Bar */
    #menu-bar {
        width: 1007px;
        height: 11px;
        background-image: url('../images/main/medium/med-menu-bar.png');
    }
    /* Main Body */
    #page-body {
        width: 1007px;
        height: 791px;
        background-image: url('../images/main/medium/med-home-page-body.png');
    }
    /* Footer */
    #main-footer {
        width: 1007px;
        height: 90px;
        background-image: url('../images/main/medium/med-ts13-footer.png');
    }
}

@media screen and (max-width: 641px) {
    /* Full Container Small */
    .main {
        width: 641px;
        height: 1080px;
    }
    /* Main Site Small
        sm-ts13-header   x:0 y:0   641x80
        sm-home-button   x:0 y:80   82x40
        sm-home-button_transition   -same as above-
        sm-about-us-button   x:82 y:80   121x40
        sm-about-us_transition   -same as above-
        sm-projects-button    x:203 y:80   118x40
        sm-projects-button_transition   -same as above-
        sm-contact-us-button   x:321 y:80   118x40
        sm-contact-us_transition   -same as above-
        sm-search-bar   x:439 y:80   202x40
        sm-menu-bar   x:0 y:120   641x11
        sm-home-page-body   x:0 y:131   641x859
        sm-ts13-footer   x:0 y:990   641x90
    */
    /* Header */
    #header {
        width: 641px;
        height: 80px;
        background-image: url('../images/main/small/sm-ts13-header.png');
    }
    /* Menu*/
    #nav-menu {
        width: 641px;
        height: 40px;
    }
    /* Home Button */
    #home-button {
        width: 82px;
        height: 40px;
        background-image: url('../images/main/small/sm-home-button.png');
    }
    /* Home Button: Hover Transition */
    #home-button:hover {
        background-image: url('../images/main/small/sm-home-button_transition.png');
    }
    /* About Us Button */
    #about-us {
        width: 121px;
        height: 40px;
        left: 82px;
        background-image: url('../images/main/small/sm-about-us-button.png');
    }
    /* About Us Button: Hover Transition */
    #about-us:hover {
        background-image: url('../images/main/small/sm-about-us-button_transition.png');
    }
    /* Projects Button */
    #projects {
        width: 118px;
        height: 40px;
        left: 203px;
        background-image: url('../images/main/small/sm-projects-button.png');
    }
    /* Projects Button: Hover Transition */
    #projects:hover {
        background-image: url('../images/main/small/sm-projects-button_transition.png');
    }
    /* Contact Us Button */
    #contact-us {
        width: 118px;
        height: 40px;
        left: 321px;
        background-image: url('../images/main/small/sm-contact-us-button.png');
    }
    /* Contact Us Button: Hover Transition */
    #contact-us:hover {
        background-image: url('../images/main/small/sm-contact-us-button_transition.png');
    }
    /* Search Bar */
    #search-bar {
        width: 202px;
        height: 40px;
        left: 439px;
        background-image: url('../images/main/small/sm-search-bar.png');
    }
    /* Search Bar: Hover Transition */
    /* Menu Bar */
    #menu-bar {
        width: 641px;
        height: 11px;
        background-image: url('../images/main/small/sm-menu-bar.png');
}
    /* Main Body */
    #page-body {
        width: 641px;
        height: 859px;
        background-image: url('../images/main/small/sm-home-page-body.png');
    }
    /* Footer */
    #main-footer {
        width: 641px;
        height: 90px;
        background-image: url('../images/main/small/sm-ts13-footer.png');
    }
}