body, html{
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6{
    color: #FBEFF2;
}
a{
    color: #FBEFF2;
    padding-right: 1rem;
    text-decoration: none;
    transition: color 1s;
}
a:hover {
    color:#848484;
}
/*  Mobile Navigation Bar */
nav{
    position: fixed;
    width: 100%;
    height: 15%;
    display: grid;
    grid-template-columns: [logo] 33% [mid] 33% [nav-icon] 34% [end];
    grid-template-rows: 100%;
    background-color: #1C1C1C;
}
.company-title{
    grid-column: logo / span mid;
    display: flex;
    justify-content: center;
    align-items: flex-end
}
.company-title > img{
    height: 90%;
    width: 85%;
    padding: 0 0 5px 20%;
}
.menu-icon{
    grid-column: nav-icon / span end;
    height: 65px;
    width: 65px;
    justify-self: flex-end;
    align-self: flex-end;
    padding: 1.2rem;
    
}
.nav-menu{
    display: none;
    background-color: #1C1C1C;
    flex-direction: column;
    position: absolute;
    top: 100%;
    right: -3%;
    justify-content: center;
    align-items: center;
}
.home{
    padding-top: 4%;
    display: flex;
    flex-direction: row;
    height: 100%;
}
.content{
    display: flex;
    flex-direction: row;
    width: 100%;
}
/* Mobile Home page content */
.content > img{
    position: absolute;
    height: 100%;
    width: 100%;
    max-height:100%;
    max-width: 100%;
    z-index: -1;
}
.unshadowed{
    display: none;
}
.shadowed{
    background-color: rgb(22, 21.6, 23.9, 0.5);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    color: #FBEFF2;
    justify-content: center;
    align-items: center
}
.shadowed > h1{
    padding-left: 5%;
    font-size: 3em;
}
.shadowed > h3{
    padding: 0 5% 0 5%;
    font-size: 0.9em;
}
/* Mobile Services headline div */
.featured-headline{
    width: 100%;
    height: 25%;
    background-color: black;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.featured{
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: [featcol1] 50% [featcol2] 50% [featcolend];
    grid-template-rows: [featrow1] 25% [featrow2] 25% [featrow3] 25% [featrow4] 25% [featrowend];

}
.image{
    background-color: white;
}
.image > img{
    height: 100%;
    width: 100%;
}
.text{
    background-color: #151515;
    display: flex;
    color: white;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.text > h1{
    padding-left: 10%;
    font-size: 24px;
}
.text > ul{
    display: none;
}
.image .one{
    grid-column: featcol1 / span 1;
    grid-row: featrow1 / span 1;
}
.text .one{
    grid-column: featcol2 / span 1;
    grid-row: featrow1 / span 1;
}
.image .two{
    grid-column: featcol2 / span 1;
    grid-row: featrow1 / span 1;
}
.text .two{
    grid-column: featcol1 / span 1;
    grid-row: featrow2 / span 1
}
.text .three{
    grid-column: featcol1 / span 1;
    grid-row: featrow3 / span 1;
}
.image .three{
    grid-column: featcol1 / span 1;
    grid-row: featrow3 / span 1;
}
.text .four{
    grid-column: featcol2 / span 1;
    grid-row: featrow3 / span 1;
}
/* Mobile Contact form */
.contact{
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: [pipe-start] 10% [col2]20%  [col3]20%  [col4]20%  [col5]20%  [pipe-end]10% [endcol];
    grid-template-rows: [head-room] 10%  [row2] 15%  [row3]15%  [row4]15%  [row5]30%  [foot-room]15% [endrow];
    background-color: #323232;
    margin: 0;
    padding: 0;
}
.contact-field{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: #323232;
    border-bottom: 1px #FAFAFA solid;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    margin: 5px;
    font-size: 14px;
    color:#FAFAFA;
}

.HeadingHash{
    grid-column: col2 / span pipe-end;
    grid-row: head-room / span 1;
}
.NameHash{
    grid-column: col2 / span pipe-end;
    grid-row: row2 / span 1;
}
.EmailHash{
    grid-column: col2 / span pipe-end;
    grid-row: row3 / span 1;
}
.PhoneHash{
    grid-column: col2 / span pipe-end;
    grid-row: row4 / span 1;
}
.MessageHash{
    grid-column: col2 / span pipe-end;
    grid-row: row5 / span 1;
}
.submit-button{
    grid-column: col5 / span pipe-end;
    grid-row: foot-room / span 1;
    border: 1px #FAFAFA solid;
    max-height: 75%;
    margin-top: 10px;
}
.ohitshoney{
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    z-index: -1;
}

::placeholder{
        color: #FAFAFA;
        font-size: 14px;    
        opacity: 1;
}
:-ms-input-placeholder{
        color: #FAFAFA;
        font-size: 14px;
}
::-ms-input-placeholder{
        color: #FAFAFA;
        font-size: 14px;
}

footer{
    height: auto;
    width: 100%;
    background-color: #1C1C1C;

}
footer > img{
    grid-area: logo;
    height: 200px;
    width: 200px;
    padding-left: 25%;
}
.contact-info{
    display: none;
}

/* Mobile Team page styling */
.team{
    padding-top: 30%;
    color: black;
    display: grid;
    grid-template-columns: 5% 30% 30% 30% 5%;
    grid-template-areas:
    ". . title . ."
    " . . . . ."
    ". photo main main ."
    ". members members members ."
}
.team > .title{
    grid-area: title;
    align-self: center;
    justify-self: center;
    color: black;
}
.team > picture{
    height: 100%;
    grid-area: photo;
    justify-self: center;
    padding: 15%;
}

picture > img{
    height: 100%
}

.summary{
    grid-area: main;
    color: black;
    padding: 0 0 0 10%;
}
.member-list{
    grid-area: members;
    padding-top: 10px;
}
.member > .heading{
    color: rgba(20, 20, 20);
}

/*  Mobile form submission and error page styling */
.thanks, .error{
    height: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}
.thanks > h1, .error > h1{
    color: black;
}



/* Desktop Styles */
@media all and (min-width: 768px){
    .menu-icon{
        display: none;
    }
    .company-title > img{
        height: auto;
        width: 45%;
    }
    nav{
        width: 100%;
        height: 15%;
        position: fixed;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }
    .nav-menu{
        width: 60%;
        position: initial;
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-around;
    }
    .nav-links > h4{
        margin-bottom: 5px;
    }
    .call-us{
        font-size: 24px;
        margin-right: 3rem;
        max-height: 50px;
        max-width: 50px;
        justify-self: center;
    }
    .content > img{
        max-height: 100%;
    }
    .unshadowed{
        display: block;
        width: 50%;
        height: 100%;
    }
    .shadowed{
        background-color: rgb(22, 21.6, 23.9, 0.5);
        width: 50%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        color: #FBEFF2
    }
    .shadowed > h1{
        padding: 0;
    }
    .shadowed > h3{
        padding: 0 5% 0 5%;
        font-size: 1.5em;
    }
    .featured-headline{
        width: 100%;
        height: 25%;
        background-color: black;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }
    /*  Desktop Services section styling */
    .featured{
        height: 100%;
        width: 100%;
        display: grid;
        border: 1px black solid;
        grid-template-columns: [featcol1] 25% [featcol2] 25%[featcol3] 25%[featcol4] 25% [featend];
        grid-template-rows: [featrow1] 50% [featrow2] 50% [featrowend];
    }
    .text > ul{
        display: initial;
    }
    .image .one {
        grid-column: featcol1 / span 1;
        grid-row: featrow1 / span 1;
    }
    .text.one{
        grid-column: featcol2 / span 1;
        grid-row: featrow1 / span 1;
    }
    .text.two{
        grid-column: featcol4 / span 1;
        grid-row: featrow1 /span 1;
    }
    .image.two{
        grid-column: featcol3 / span 1;
        grid-row: featrow1 / span 1;
    }
    .text.three{
        grid-column: featcol1 / span 1;
        grid-row: featrow2 /span 1;
    }
    .image.three{
        grid-column: featcol2 / span 1;
        grid-row: featrow2 / span 1;
    }
    .text.four{
        grid-column: featcol3 / span 1;
        grid-row: featrow2 / span 1;
    }
    .image.four{
        grid-column: featcol4 / span 1;
        grid-row: featrow2 / span 1;
    }
    /*  Desktop Footer Styles */
    footer{
        display: grid;
        grid-template-areas:
        "logo space contact";
        grid-template-columns: 25% 50% 25%;
        grid-template-rows: 100%;
    }
    footer > img{
        grid-area: logo;
        padding: 0 0 10px 10px;
        padding-left: 0;
    }
    .contact-info{
        grid-area: contact;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
    }

    /*** DESKTOP TEAM STYLES ***/

    .team {
        padding-top: 10%;
    }
    .team > .summary{
        font-size: 1.5em;
        padding: 0 35% 0 5%;
    }
    .team > picture{
        grid-area: photo;
        justify-self: center;
        height: 250px;
        padding: 20px;    
    }
    picture > img{
        height: 100%;
        align-self: center;
    }
}