@import url('https://fonts.googleapis.com/css2?family=Bitter&family=Outfit:wght@200;300;500;900&display=swap');

*{
    box-sizing: border-box;
}
:root{
    --offwhite:#FAF9F6;
    --slate:#D6D6D6;
    --black:#000;

    --raisin: #212227;
    --moss: #71816D;
    --khaki: #C9B79C;
    --bone: #E0D2BD;
    --lilac: #b6a4d2;

    --midnight:#16001E;
    --flamingo:#FF57BB;
    --candy:#FF67C1;
    --electric:#6EFAFB;

    --bitter:Bitter, Georgia, 'Times New Roman', Times, serif;
    --outfit:Outfit, Geneva, Verdana, sans-serif;
}
html{
    scroll-behavior:smooth;
}
body{
    max-width:100vw;
    margin:0;
}
main{
    width:1002px;
    margin:0 auto;
    position:relative;
    top:150px;
}
p{
    letter-spacing:4%;
}
abbr{
    text-decoration:none;
}
.round-crop{
    border-radius:50%;
}

.related{
    width:100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -ms-overflow-style:none;
    scrollbar-width:none;
    padding:1rem 0.5rem;
    margin-bottom:2rem;
}
.related::-webkit-scrollbar{
    display:none;
}
.side-scroll{
    display:inline-block;
}
.side-scroll a{
    display:inline-block;
    margin:0 .5rem;
    text-decoration:none;
}



/*HEADER*/
header{
    width:100%;
    height:90px;
    z-index:995;
    position:fixed;
    top:0;
}
.header-div{
    display:grid;
    grid-template-columns:1fr 2fr 1fr;
    width:100%;
    height:90px;
}
h1{
    margin:0;
    text-align:center;
    position:relative;
    top:-10px;
}
.batty{
    margin:0 auto;
    z-index:996;
    position: relative;
    top:10px;
    left:-40px;
}
.batty a{
    width:50%;
}
.nav-div1{
    height:90px;
}
.nav-mob1{
    display:none;
}
#navMob2{
    display:none;
}
.nav-div2{
    width:100%;
    height:60px;
    z-index:994;
    position:fixed;
    top:90px;
    display:block;
    transition:display 250ms;
    transition-timing-function: ease-out;
}
nav ul{
    padding:0;
    margin:0;
}
nav ul li{
    display:inline;
    list-style-type:none;
}
nav ul li a{
    text-decoration:none;
}
#portfolioNav ul{
    width:1002px;
    margin:0 auto;
    display:grid;
    grid-template-columns: 1fr 1.3fr 1fr;
}
#aboutNav ul{
    width:798px;
    margin:0 auto;
    display:grid;
    grid-template-columns: 1fr 1.3fr 1fr;
}
.nav-div2 ul li{
    text-align:center;
}
/*FOOTER*/
.socials{
    position:fixed;
    z-index:999;
    bottom:22px;
    left:60px;
}
.socials a{
    margin:0 .5rem;
    text-decoration: none;
}
.socials a img{
    transition:width 250ms;
    transition-timing-function:ease-out;
}
.socials a img:hover{
    width:30px;
}
.footer-img{
    position:fixed;
    z-index:999;
    bottom:0;
    right:60px;
}
.footer-img a{
    text-decoration:none;
}
#zackToTop{
    opacity:0;
    transition: opacity 500ms;
    transition-timing-function: ease-out;
    font-family:var(--bitter);
    color:var(--khaki);
    margin:0;
    margin-bottom:0.2rem;
    position:fixed;
    bottom:106px;
    right:70px;
}
.footer-img img{
    width:80px;
    transition:width 250ms;
    transition-timing-function: ease-out;
}
.footer-img img:hover{
    width:90px;
}
footer{
    width:100%;
    height:40px;
    margin:0;
    position:fixed;
    bottom:0;
    z-index:998;
}
footer small{
    display:block;
    margin:0 auto;
    text-align:center;
}

/*========================================================*/

/*MAIN*/
    /*header*/
.header-main{
    background-image:url("images/lilac-header.jpg");
    background-size:cover;
}
.header-main .header-div{
    background-color:hsla(230, 8%, 14%, 30%);
}
.header-main .header-div .batty a img{
    filter: drop-shadow(0 8px 16px #000);
    transition:filter 500ms;
    transition-timing-function: ease-out;
}
.header-main .header-div .batty a img:hover{
    filter: drop-shadow(0 8px 16px var(--lilac));
}
.header-main .header-div>a{
    height:90px;
}
.header-main .zach-heading img{
    width:566px;
    transition:width 500ms;
    transition-timing-function: ease-out;
}
.header-main .zach-heading img:hover{
    width:630px;
}
.header-main .header-div .nav-div1{
    background-image:linear-gradient(to right, hsla(230, 8%, 14%, 0%), hsla(230, 8%, 14%, 80%) 10%);
    padding-left:50px;
    margin-left:-50px;
}
.header-main .nav-div1 nav ul{
    text-align:center;
    margin-top:2.7rem;
}
.header-main .nav-div1 ul li a{
    text-decoration: underline 2px rgba(114, 129, 110,0);
    text-underline-offset: 0;
    font-size:1.6rem;
    transition: text-decoration-color 500ms, text-underline-offset 500ms, font-size 500ms, padding 500ms;
    font-family:var(--bitter);
    color:var(--bone);
}
.header-main .nav-div1 ul li a:hover, .header-main .nav-div1 ul li a.active-link{
    text-decoration-color:var(--moss);
    text-underline-offset:0.3rem;
    font-size:1.8rem;
}
.header-main .nav-div1 nav ul li:first-of-type a{
    border-right:2px solid var(--moss);
    padding-right:1rem;
}
.header-main .nav-div1 nav ul li:last-of-type a{
    padding-left:1rem;
}

    /*body*/
.body-main{
    background-color:var(--raisin);
}
.home section h3{
    font-family:var(--outfit);
    font-size:3rem;
    font-weight:400;
    text-align:center;
    color:var(--moss);
}
    /*categories*/
.body-main .nav-div2{
    background-color:hsla(230, 8%, 14%, 90%);
    backdrop-filter: blur(4px);
    transition:background-color 100ms;
    transition-timing-function: ease-out;
}
.body-main .nav-div2 ul{
    padding-top:0.8rem;
}
.body-main .nav-div2 ul li:nth-of-type(2){
    border-left:2px solid var(--moss);
    border-right:2px solid var(--moss);
}
.body-main .nav-div2 ul li{
    font-size:1.8rem;
    text-decoration: underline 2px rgba(114, 129, 110,0);
    text-underline-offset: 0;
    transition: text-decoration-color 500ms, text-underline-offset 500ms, font-size 500ms;
    transition-timing-function: ease-out;
}
.body-main .nav-div2 ul li:hover{
    font-size:2rem;
    text-decoration-color:var(--moss);
    text-underline-offset:0.4rem;
    cursor:pointer;
}
.body-main .nav-div2 ul li.active-nav{
    /* font-size:1.8rem; */
    text-decoration: underline 2px var(--moss);
    text-underline-offset:0.4rem;
}
.body-main .nav-div2 ul li a{
    width:100%;
    font-family:var(--bitter);
    color:var(--bone);
}
.body-main #portfolioNav ul li:nth-of-type(3){
    text-align:left;
    padding-left:2rem;
}
.body-main #aboutNav ul li:first-of-type{
    text-align:right;
    padding-right:2.5rem;
}
.body-main #aboutNav ul li:last-of-type{
    text-align:left;
    padding-left:2.5rem;
}


    /*hi*/
.hi{
    width:100%;
    margin:4rem 0;
    display:grid;
    grid-template-columns:3fr 3.5fr 5.5fr;
}
#helloImg{
    /* opacity:0; */
    /* transition:opacity 1000ms; */
    position:relative;
    left:-1000px;
    transition:transform 1000ms, left 1000ms;
    transition-timing-function: ease-out;
}
#hello{
    font-family:var(--outfit);
    font-weight:900;
    font-size:0;
    text-align:center;
    color:var(--bone);
    margin:0;
    padding-top:2.5rem;
    position:relative;
    transition:font-size 100ms, left 50ms;
    transition-timing-function: ease-out;
}
#helloP{
    font-family:var(--outfit);
    font-weight:300;
    font-size:1.6rem; /*26px*/
    color:var(--bone);
    padding-top:3rem;
    opacity:0;
    transition:opacity 1000ms;
    transition-timing-function: ease-out;
}
    /*skills*/
#homeNav{
    opacity:1;
    width:1002px;
    margin:0 auto;
}
#homeNav ul{
    margin-top:8rem;
    width:100%;
    display:grid;
    grid-template-columns: 1fr 1.3fr 1fr;
}
#homeNav ul li{
    opacity:0;
    text-align:center;
    font-size:1.8rem;
    text-decoration: underline 2px rgba(114, 129, 110,0);
    text-underline-offset: 0;
    transition: text-decoration-color 500ms, text-underline-offset 500ms, font-size 500ms, border-right 250ms, opacity 250ms;
    transition-timing-function: ease-out;
}
#homeNav ul li:hover{
    font-size:2rem;
    text-decoration-color:var(--moss);
    text-underline-offset:0.4rem;
    cursor:pointer;
}
#homeNav ul li:nth-of-type(2){
    border-left:2px solid var(--moss);
    border-right:2px solid var(--raisin);
}
#homeNav ul li:nth-of-type(3){
    text-align:left;
    padding-left:2rem;
}
#homeNav ul li a{
    width:100%;
    font-family:var(--bitter);
    color:var(--bone);
}
#secondLink{
    opacity:0;
    transition:opacity 250ms;
    transition-timing-function: ease-out;
}
    /*clients*/
.clients{
    margin-top:12rem;
}
.client-grid{
    width:100%;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
}
.client-div{
    margin:0 auto;
}
#clientsH3, #fireDept, #spiritWinds, #hiveYYC, #featuredH3{
    opacity:0;
    transition: opacity 1000ms;
    transition-timing-function: ease-out;
}
.client-div h4{
    margin:0;
    font-family:var(--bitter);
    font-size:1.8rem;
    color:var(--bone);
    text-align:center;
}
.client-div h5{
    margin:0;
    font-family:var(--outfit);
    font-size:1.2rem;
    font-weight:300;
    color:var(--moss);
    text-align:center;
}
    /*featured*/
.featured{
    width:100%;
    margin:0 auto;
    margin-top:4rem;
    padding-top:2rem;
    padding-bottom:3rem;
}
/* .featured h3{
    margin-bottom:4rem;
} */
.thumbs{
    width:754px;
    margin:.25rem auto;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
.thumbs img{
    margin:0 auto;
}
.thumbs img:hover{
    cursor:pointer;
}
#thumb1, #thumb2, #thumb3, #thumb4, #thumb5, #thumb6{
    opacity:0;
    filter:grayscale(100%);
    transition: opacity 250ms, filter 250ms;
    transition-timing-function: ease-out;
}
#slideshow{
    opacity:0;
    transition: opacity 1500ms;
    transition-timing-function: ease-out;
    margin-bottom:.1rem;
}
.slideshow{
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    width:750px;
}
#hyperlink{
    background-color: var(--black);
    height:468.75px;
}
#displayedImage{
    margin:0;
    width:100%;
    height:auto;
    opacity:1;
    transition:opacity 500ms;
    transition-timing-function: ease-out;
}
.slideshow h4{
    font-family:Bitter;
    font-size: 2rem;
    color:var(--bone);
    background-color:hsla(230, 8%, 14%,0.9);
    position:absolute;
    bottom:1%;
    left:0;
    z-index:998;
    padding:0.5rem 2rem;
}

    /*about*/
.about{
    padding-bottom:11rem;
}
.bio-div{
    margin:2.5rem auto;
    display:grid;
    grid-template-columns:1fr 2fr;
}
#mobilePic{
    display:none;
}
.bio-copy{
    padding-left:0.5rem;
}
.intro{
    display:grid;
    grid-template-columns: 1fr 3fr;
    position:relative;
    top:-1.2rem;
}
.intro h2{
    font-family:var(--outfit);
    font-size:7.5rem;
    font-weight:900;
    color:var(--bone);
    margin:0;
}
.intro p{
    margin-bottom:0;
    position:absolute;
    left:167px;
    bottom:1.8rem;
}
.about p{
    font-family:var(--outfit);
    font-weight:300;
    font-size:1rem;
    color:var(--bone);
}
.bio-copy>p:first-of-type{
    margin-top:0;
}
.bio{
    position:relative;
    top:-3rem;
}
.contact-p{
    display:grid;
    grid-template-columns: 3fr 1fr;
}
.contact-p p{
    margin-top:0;
}
span.email{
    color:var(--moss);
}
.contact-p img{
    display:block;
    margin:0 auto;
    position:relative;
    top:-16px;
}
    /*experience*/
.experience, .contact{
    border-top:2px solid var(--moss);
    margin:4rem auto;
    /* padding-top:-4rem; */
    position:relative;
}
.experience-h2, .contact-h2{
    margin:0;
    padding-right:0.5rem;
    font-family:var(--bitter);
    font-size:1.8rem;
    color:var(--bone);
    background-color:var(--raisin);
    position:absolute;
    top:-1.8rem;
}
.experience>div{
    display:grid;
    grid-template-columns: 1fr 1fr;
}
.experience h3{
    color:var(--bone);
    font-family:var(--outfit);
    font-size:1.2rem;
    font-weight:400;
    margin-bottom:0;
}
.exp-1{
    padding-bottom:1.4rem;
    border-bottom:2px dotted var(--moss);
}
.experience div .exp-column:nth-of-type(2){
    padding-left:.5rem;
}
.experience p{
    margin:0;
}
.experience div .exp-column:nth-of-type(2) p{
    padding-top:1.4rem;
}
.about span.workplace{
    color:var(--moss);
}
.exp-column figure{
    margin:0;
    margin-top:1rem;
    font-family:var(--outfit);
    font-weight:300;
    color:var(--bone);
}
.exp-column figure ul{
    margin:0;
    padding-left:1.5rem;
    padding-right:.5rem;
    list-style-type:circle;
}
    /*contact*/
.contact{
    top:4rem;
}
.contact p.contact-copy{
    font-size:1.4rem;
}
.contact form{
    display:grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom:4rem;
}
.contact form fieldset{
    border:1px solid var(--khaki);
    margin:0.5rem;
}
.contact form fieldset legend{
    font-family:var(--bitter);
    font-size:1.4rem;
    color:var(--bone);
    padding-right:0.5rem;

}
.contact form div{
    display:grid;
    grid-template-columns: 1.5fr 3.5fr;
}
.contact form fieldset label{
    font-family:var(--outfit);
    font-weight:300;
    color:var(--bone);
}
.contact form fieldset div label{
    text-align:right;
    margin-right:1rem;
}
.contact form fieldset input, .contact form fieldset textarea{
    margin:0.25rem;
    padding:0.2rem;
    border-radius:4px;
    border:none;
    background-color:var(--offwhite);
    font-family:var(--outfit);
    font-weight:300;
    font-size:0.8rem;
    letter-spacing:2%;
    color:var(--raisin);
}
.contact form fieldset>p{
    color:var(--moss);
}
.contact form input[type=radio]{
    margin-left:1rem;
    border:none;
}
.contact form>input{
    font-family:var(--bitter);
    font-size:1.4rem;
    color:var(--bone);
    background-color: var(--moss);
    border:4px solid #616D5D;
    border-radius:4px;
    padding:.4rem .8rem;
    margin-top:1rem;
    width:230px;
    position:relative;
    right:-756px;
}
.contact form>input:hover{
    background-color:#616D5D;
    cursor:pointer;
}
.contact form fieldset div input, .contact form fieldset textarea{
    outline-color:var(--lilac);
}
    /*thankyou*/
.thanks{
    width:800px;
    margin:0 auto;
}
.thanks h2{
    padding-top:0;
    font-family:var(--outfit);
    font-size:3rem;
    font-weight:400;
    color:var(--moss);
}
.thanks p{
    font-family:var(--outfit);
    font-size:1.4rem;
    font-weight:300;
    color:var(--bone);
}
.thanks p:last-of-type{
    margin-top:4rem;
    margin-bottom:0;
    text-align:center;
}
.thanks .featured{
    padding-top:0;
}
    /*footer*/
.body-main footer{
    border-top:2px solid var(--moss);
    background-color:var(--raisin);
}
.body-main footer small{
    padding-top:0.6rem;
    font-family:var(--bitter);
    color:var(--bone);
}

/*============================================================*/
/*PORTFOLIO HUB*/
.video-gallery{
    padding-bottom:4rem;
}
/*CATEGORY PAGES*/
.gallery{
    margin-top:20px;
    padding-bottom:75px;
}
.gallery .thumbnails{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
}
.gallery .thumbnails.video-gal{
    padding-bottom:4rem;
}
.gallery .thumbnails a{
    text-decoration:none;
    margin:1rem auto;
}
.gallery .thumbnails a img, .side-scroll .thumb img{
    display:block;
    margin:0 auto;
    transition: filter 250ms;
    transition-timing-function: ease-out;
}
.gallery .thumbnails a img:hover, .side-scroll .thumb img:hover{
    filter:drop-shadow(0 -8px 16px var(--lilac));
}
.gallery .thumbnails a h4{
    margin:0;
    margin-top:0.5rem;
    font-family:var(--bitter);
    font-size:1.6rem;
    color:var(--bone);
    text-align:center;
}
.gallery .thumbnails a h4 span{
    font-size:1.2rem;
    color:var(--khaki);
}
.gallery .thumbnails a h5{
    margin:0;
    margin-top:0.25rem;
    font-family:var(--outfit);
    font-size:1rem;
    font-weight:300;
    color:var(--moss);
    text-align:center;
}
/*PROJECT PAGES*/
.body-main .project .case-study h2, .portfolio-main section .gallery-h2{
    font-family:var(--bitter);
    font-size:2.5rem; /* 40px */
    line-height: 3rem; /* 48px */
    color:var(--bone);
    margin-top:3rem;
    margin-bottom:.5rem; /* 8px */
}
.body-main .project .case-study h3{
    margin:0;
    margin-bottom:1rem;
    margin-left:2ch;
    font-family:var(--outfit);
    font-size:1.5rem;
    font-weight:300;
    line-height:2rem;
    color:var(--moss);
}
.body-main .project .case-study h3 a{
    text-decoration: underline 1.5px rgba(114, 129, 110,0);
    text-underline-offset: 0;
    font-family:var(--bitter);
    font-weight:400;
    color:var(--lilac);
    transition:text-decoration-color 500ms, text-underline-offset 500ms;
    transition-timing-function: ease-out;
} 
.body-main .project .case-study h3 a:hover{
    text-decoration-color:var(--lilac);
    text-underline-offset:0.25rem;
}
.body-main .project .case-study .showcase{
    margin-bottom:3rem;
}
.body-main .project .case-study .showcase h4{
    font-family:var(--outfit);
    font-size:1.5rem;
    line-height:1.5rem;
    font-weight:300;
    color:var(--moss);
    margin-top:0;
    margin-bottom:.5rem;
}
.body-main .project .case-study .showcase .dt-mockup, .body-main .project .case-study .showcase .video{
    margin:0;
    margin-right:1rem;
    float:left;
}
.body-main .project .case-study .showcase .dt-mockup small{
    display:block;
    margin:0;
    margin-bottom:1rem;
    background-color: hsla(0, 0%, 95%, 4%);
    padding:0.5rem 1rem;
    font-family:var(--bitter);
    color:var(--khaki);
}
.body-main .project .case-study .showcase .dt-mockup small a{
    color:var(--lilac);
}
.body-main .project .case-study .showcase p{
    font-family:var(--outfit);
    font-weight:300;
    color:var(--bone);
}
.body-main .project .case-study .showcase .list-div{
    display:grid;
    grid-template-columns: 2fr 1fr;
}
.body-main .project .case-study .showcase .list-div p{
    border-bottom:1px solid var(--khaki);
}
.body-main .project .case-study .showcase .list-div p, .body-main .project .case-study .showcase .list-div ul{
    margin-top:0;
}
.body-main .project .case-study .showcase ul li{
    color:hsla(263, 34%, 73%, 60%);
    line-height:1.5rem;
    list-style-type:circle;
}
.body-main .project .case-study .showcase ul.credentials li{
    list-style-type: none;
    font-family:var(--outfit);
    font-weight:300;
    color:var(--bone);
}
.body-main .project .case-study .showcase ul.credentials li span{
    font-family:var(--bitter);
    color:var(--khaki);
    padding-right:1ch;
}
.body-main .project .case-study .showcase ul li a, .body-main .project .case-study .showcase .showcase-copy p a{
    font-family:var(--bitter);
    color:var(--lilac);
    text-decoration: underline 1.5px rgba(114, 129, 110,0);
    text-underline-offset: 0;
    transition:text-decoration-color 500ms, text-underline-offset 500ms;
    transition-timing-function: ease-out;
}
.body-main .project .case-study .showcase ul li a:hover, .body-main .project .case-study .showcase .showcase-copy p a:hover{
    text-decoration-color:var(--lilac);
    text-underline-offset:0.2rem;
}
.body-main .project .related-work{
    padding-bottom:2rem;
}
.body-main .project .related-work h2{
    font-family:var(--bitter);
    font-size:2.5rem;
    line-height:3rem;
    color:var(--bone);
    margin-top:4rem;
    margin-bottom:1rem;
}
.body-main .project .related-work .related, .portfolio-main .related{
    background-color:hsla(0, 0%, 95%, 4%);
}
.body-main .project .related-work .related .side-scroll h5, .portfolio-main h5{
    font-family:var(--bitter);
    font-size:1.5rem;
    line-height:2rem;
    color:var(--bone);
    margin:0;
    text-align:center;
}
.body-main .project .related-work .related .side-scroll h6, .related .side-scroll a h6, .portfolio-main h6{
    font-family:var(--outfit);
    font-size:1rem;
    line-height:1.5rem;
    font-weight:300;
    color:var(--moss);
    margin:0;
    text-align:center;
}

/*===========================================================================*/

/*MEDIA QUERIES*/
/* 320px — 480px: Mobile devices
481px — 768px: iPads, Tablets
769px — 1024px: Small screens, laptops */

/*Small Screens*/
@media screen and (max-width:1002px){
    main{
        width:902px;
    }
    /*HEADER*/
    .batty{
        top:4px;
        left:-16px;
    }
    .batty a img{
        width:200px;
    }

    h1{
        top:0;
    }
    .header-main .zach-heading img{
        width:440px;
    }
    .header-main .zach-heading img:hover{
        width:500px;
    }

    /*categories*/
    .nav-div2{
        height:80px;
    }
    .body-main .nav-div2 ul, #portfolioNav ul{
        width:902px;
        padding-top:2rem;
        padding-bottom:0.8rem;
    }
    .body-main .nav-div2 ul li, #homeNav ul li{
        font-size:1.6rem;
    }
    .body-main .nav-div2 ul li:first-of-type{
        padding-right:1.5rem;
    }
    .body-main .nav-div2 ul li:nth-of-type(3){
        padding-left:1.5rem;
    }
    .body-main .nav-div2 ul li:hover{
        font-size:1.6rem;
    }

    /*home*/
    #homeNav{
        width:902px;
    }
}

/*MOBILE*/
@media screen and (max-width:480px){
   main, #portfolioNav ul, #aboutNav ul, #clients, #featured, .featured, .thumbs, .slideshow, .contact form{
        max-width:96vw;
    }

    
    /*header*/
    header{
        height:13vw;
    }
    .header-div{
        grid-template-columns:1fr 4fr 1fr;
    }
    .batty{
        top:8px;
        left:6px;
    }
    .header-main .header-div{
        height:13vw;
    }
    .header-main .header-div .batty a img{
        width:18vw;
        filter: drop-shadow(0 4px 8px var(--lilac));
    }
    .header-main .zach-heading{
        position:relative;
        z-index:997;
    }
    .header-main .zach-heading img{
        width:64vw;
    }
    .header-main .zach-heading img:hover{
        width:64vw;
    }
    .nav-div1, .nav-div2{
        display:none;
    }
    .nav-mob1{
        display:block;
        background-image:linear-gradient(to right, hsla(230, 8%, 14%, 0%), hsla(230, 8%, 14%, 80%) 10%);
        padding-left:50px;
        margin-left:-50px;
        text-align:center;
        height:13vw;
    }
    .nav-mob1 a{
        text-decoration:none;
        color:var(--lilac);
        font-size:9vw;
        position:relative;
        top:-0.5vw;
        right:2vw;
    }
    .nav-mob1 #close{
        font-size:12vw;
    }
    #navMob2{
        display:block;
        position:fixed;
        top:12.5vw;
        z-index:998;
    }
    #navMob2 nav{
        background-color:hsla(230, 8%, 14%, 98%);
        backdrop-filter: blur(4px);
        width:100vw;
        height:10.2vw;
        margin:0 auto;
        padding-bottom:1.5vw;
    }
    #navMob2 nav ul{
        font-family:var(--bitter);
        font-size:6vw;
    }
    #navMob2 nav ul:first-of-type{
        display:grid;
        grid-template-columns: 1fr 1fr;
        margin:0 auto;
        padding:1.5vw 0;
        width:92vw;
    }
    #navMob2 nav ul li a{
        color:var(--bone);
    }
    #navMob2 nav ul:first-of-type li:first-of-type{
        text-align:center;
        border-right:1px solid var(--moss);
        padding-right:8vw;
    }
    #navMob2 nav ul:first-of-type li:last-of-type{
        text-align:center;
        border-left:1px solid var(--moss);
        padding-left:8vw;
    }
    #navMob2 nav .prtMenu, #navMob2 nav .aboMenu{
        height:100vh;
        width:100vw;
        background-color:hsla(230, 8%, 14%, 98%);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        padding-top:16vw;
    }
    #navMob2 nav .prtMenu li, #navMob2 nav .aboMenu li{
        display:block;
        margin:0 auto;
        margin-top:8vw;
        text-align:center;
        width:84%;
    }
    #navMob2 nav .prtMenu li:nth-of-type(2), #navMob2 nav .aboMenu li:nth-of-type(2){
        border-top:2px solid var(--moss);
        border-bottom:2px solid var(--moss);
        padding:8vw;
    }
    .mob-socials{
        margin-top:28vw;
    }
    .mob-socials a{
        margin:6vw;
    }
    
    /*FOOTER*/
    footer{
        height:8vw;
    }
    footer small{
        font-size:2.4vw;
    }
    .socials{
        left:2vw;
        bottom:4.5vw;
    }
    .socials a{
        margin:0 1vw;
    }
    .footer-img{
        right:2vw;
        bottom:1.5vw;
    }
    .footer-img img{
        width:12vw;
    }

    /*home*/
    .hi{
        margin:0;
        position:relative;
        top:-6vw;
    }
    #helloImg{
        width:25vw;
    }
    #hello{
        padding-top:1.5vw;
    }
    #helloP{
        font-size:2.6vw;
        padding-top:2.2vw;
    }
    .home section h3{
        font-size:5vw;
        position:relative;
        top:-10vw;
    }
    #homeNav{
        max-width:64vw;
        position:relative;
        top:-10vw;
    }
    #homeNav ul{
        margin-top:0;
        grid-template-columns: 1fr;
        grid-template-rows: .9fr 1fr 1fr;
    }
    #homeNav ul li{
        font-size:5vw;
        padding:0.8rem;
    }
    #homeNav ul li:first-of-type{
        padding-bottom:0;
    }
    #homeNav ul li:nth-of-type(2){
        border:none;
        border-top:2px solid var(--moss);
        border-bottom:2px solid var(--raisin);
    }
    #homeNav ul li:nth-of-type(3){
        text-align:center;
        padding-left:0;
    }
    .clients{
        margin:0;
        margin-top:8vw;
    }
    .client-grid{
        position:relative;
        top:-10vw;
    }
    .client-div img{
        width:30vw;
    }
    .client-div h4{
        font-size:4vw;
    }
    .client-div h4:nth-of-type(odd){
        font-size:3.2vw;
    }
    .client-div h5{
        font-size:3vw;
    }
    .featured{
        margin:0;
        padding:0;
    }
    #thumbs img{
        max-width:16vw;
    }
    #displayedImage{
        width:90vw;
    }

    /*About*/
    .bio-div{
        margin:0 auto;
        display:block;
    }
    #mobilePic{
        display:block;
        margin:0 auto;
        position:relative;
        bottom:5vw;
    }
    #desktopPic{
        display:none;
    }
    .intro{
        display:block;
    }
    .experience>div{
        display:block;
    }
    .contact-p{
        display:block;
    }
    .contact-p img{
        display:none;
    }
    .contact p.contact-copy{
        font-size:1rem;
    }
    .contact form{
        display:block;
    }
    .contact form>input{
        right:-40vw;
    }

    /*category pages*/
    main.gallery, main.project{
        top:23vw;
    }
    .gallery{
        margin:0 auto;
    }
    .gallery .thumbnails{
        grid-template-columns: 1fr 1fr;
    }
    .gallery .thumbnails a.thumb{
        background-color:hsla(0, 0%, 95%, 4%);
        width:45vw;
        margin:1vw auto;
        padding:2.5vw 0;
    }
    .gallery .thumbnails a img{
        width:40vw;
    }
    .gallery .thumbnails a h4{
        font-size:1.2rem;
    }
    .gallery .thumbnails a h4 span{
        font-size:1rem;
    }
    .gallery .thumbnails a h5{
        font-size:0.8rem;
    }

    /*project pages*/
    .body-main .project .case-study h2{
        font-size:2rem;
        margin-top:0;
        text-align: center;
    }
    .body-main .project .case-study h3{
        margin-left:0;
        text-align: center;
    }
    .body-main .project .case-study .showcase h4{
        margin-top:2vw;
        text-align:center;
    }
    .body-main .project .case-study .showcase .video, .body-main .project .case-study .showcase .dt-mockup{
        float:none;
    }
    .project .showcase .dt-mockup a img, .project .showcase .video video{
        width:96vw;
        margin:0 auto;
    }
    .project .case-study .showcase .showcase-copy{
        margin-top:1vw;
    }
    
}


.hidden{
    display:none !important;
}