body{
    margin: 0px;
    padding: 0px;
    background-color: #F0FEFF;
}
@font-face {
    font-family: 'basier_squareregular';
    src: url('fonts/basiersquare-regular-webfont.eot');
    src: url('fonts/basiersquare-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/basiersquare-regular-webfont.woff2') format('woff2'),
         url('fonts/basiersquare-regular-webfont.woff') format('woff'),
         url('fonts/basiersquare-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'basier_squaresemibold';
    src: url('fonts/basiercircle-semibold-webfont.eot');
    src: url('fonts/basiersquare-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/basiersquare-semibold-webfont.woff2') format('woff2'),
         url('fonts/basiersquare-semibold-webfont.woff') format('woff'),
         url('fonts/basiersquare-semibold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'basier_squarebold';
    src: url('fonts/basiersquare-bold-webfont.eot');
    src: url('fonts/basiersquare-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/basiersquare-bold-webfont.woff2') format('woff2'),
         url('fonts/basiersquare-bold-webfont.woff') format('woff'),
         url('fonts/basiersquare-bold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
h1, h2, h3{
    font-family: 'basier_squareregular';
    font-size: clamp(34px, 3.25vw, 50px);
    line-height: clamp(38px, 3.75vw, 56px);
    text-align: left;
    margin: 0px;
    padding: 0px;
    color: #ffffff;
    z-index: 10;
    font-weight: normal;
    font-style: normal;
}
p{
    margin-top: clamp(10px, 4%, 20px);
}
p, a{
    font-family: 'basier_squareregular';
    font-size: clamp(16px, 1vw, 18px);
    line-height: clamp(24px, 1.4vw, 34px);
    text-align: left;
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}
.blueType{
    color: #282B2E;
}
.orangeType{
    color: #D0A441;
}
.whiteType{
    color: #FFFFFF;
}
#wrapper{
    width: 100%;
}
.button{
    display: inline-block;
    width: clamp(150px, 15vw, 320px);
    padding: 25px;
    background-color: #D0A441;
    font-family: 'basier_squareregular';
    font-size: clamp(16px, 1vw, 18px);
    color: #ffffff;
    text-align: center;
    border: none;
}
.button:hover{
    background-color: #BE7429;
    color: #ffffff;
    text-decoration: none;
}
.mobileLinebreak{
    display: none;
}






/* info pages */
.infoPageHeader{
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    max-width: 1920px;
    height: 220px;
}
.infoPageHeader #logo-main{
    width: auto;
    grid-row: 1/2;
    align-self: center;
    justify-self: start;
}
.infoNavButton{
    font-size: 18px;
    color: #282B2E;
    justify-self: end;
    align-self: center;
    display: block;
    text-align: right;
    width: 90%;
}
.infoNavButton.home{
    grid-column: 12/13;
}
.infoNavButton.contact{
    grid-column: 13/14;
}
.infoContent{
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    max-width: 1920px;
    min-height: 220px;
}
.infoContent h1,
.infoContent h4,
.infoContent h5,
.infoContent p,
.infoContent div{
    grid-column: 4/12;
    justify-self: stretch;
    align-self: start;
    color: #282B2E;
    float: left;
}
.infoContent h1{
    text-align: center;
    margin: 10px 0 70px;
    padding: 0;
}
.infoContent div.rule{
    height: 0px;
    border-top: #282B2E 1px solid;
    margin: 0 0 30px;
}
.infoContent h4{
    font-family: 'basier_squaresemibold';
    font-weight: 500;
    font-size: clamp(20px, 3.25vw, 30px);
    line-height: clamp(26px, 3.75vw, 36px);
    text-align: left;
    margin: 10px 0 0px;
}
.infoContent h5{
    font-family: 'basier_squaresemibold';
    font-weight: 500;
    font-size: clamp(18px, 3.25vw, 25px);
    line-height: clamp(24px, 3.75vw, 31px);
    text-align: left;
    margin: 10px 0 0px;
}
.infoContent p{

}
.infoContent p span{
    font-family: 'basier_squaresemibold';
    font-weight: 500;
}

/* contact us wrapper */
#contactWrapper{
    width: 100%;
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    grid-template-rows: 150px 1fr 150px;
    background-color: #282B2E;
    opacity: 0;
    position: fixed;
    top: -200vh;
    left: 0px;
    z-index: 20;
}
#closeContactFormButton,
#closePortfolioFormButton{
    width: 85px;
    height: 65px;
    background-image: url('images/closeButton.svg');
    background-position: center;
    z-index: 20;
    align-self: center;
    justify-self: center;
    grid-column: 14 / 15;
    grid-row: 1 / 2;
}
#closePortfolioFormButton{
    background-image: url('images/closeButtonAlt.svg');
}
#closeContactFormButton:hover{
    background-image: url('images/closeButton-hover.svg');
}
#closePortfolioFormButton:hover{
    background-image: url('images/closeButtonAlt-hover.svg');
}
#formWrapper{
    align-self: center;
    justify-self: stretch;
    grid-column: 6 / 10;
    grid-row: 2 / 3;
    display: grid;
    grid-template-rows: 1fr;
    text-align: left;
    position: relative;
}
#formWrapper h2{
    align-self: center;
}
form.contact{
    padding: 23px 0 0;
    width: 100%;
}
form.contact input{
    font-family: 'basier_squareregular';
    font-size: clamp(16px, 1vw, 18px);
    padding: 12px 0;
    width: 100%;
    text-indent: 15px;
    margin: 0 0 6px;
    border: none;
}
form.contact input:focus{
    outline: 6px solid #6970A7;
}
form.contact textarea{
    font-family: 'basier_squareregular';
    font-size: clamp(16px, 1vw, 18px);
    margin: 0 0 6px;
    padding: 12px 0;
    width: 100%;
    height: 120px;
    text-indent: 15px;
    resize: none;
    border: none;
}
form.contact textarea:focus{
    outline: 6px solid #6970A7;
}
form.contact .button{
    margin-top: 30px;
    width: 100%;
}

/* contact confirmation */
#contactConfirmationWrapper{
    width: 100%;
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    grid-template-rows: 150px 1fr 150px;
    background-color: #282B2E;
    opacity: 1;
}
#confirmationWrapper{
    align-self: center;
    justify-self: stretch;
    grid-column: 6 / 10;
    grid-row: 2 / 3;
    display: grid;
    grid-template-rows: 1fr;
    text-align: left;
    position: relative;
}
#confirmationWrapper h2{
    text-align: center;
}
#confirmationWrapper p{
    text-align: center;
    font-size: clamp(18px, 1.75vw, 25px);
}
#confirmationWrapper .button{
    margin-top: 30px;
    width: 100%;
    padding: 25px 0px;
}

/* content block one */
#contentBlock-One{
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    grid-template-rows: 9% 91%;
    max-width: 1920px;
    height: 100vh;
    max-height: 1095px;
    overflow: hidden;
}
#logo-main{
    grid-column: 2/3;
    grid-row: 2/3;
    align-self: start;
    justify-self: start;
    margin: 0px;
    z-index: 10;
}
#logo-main img{
    width: 100%;
    max-width: 128px;
}
#introHeadline{
    grid-column: 2/6;
    grid-row: 2;
    z-index: 10;
    align-self: center;
}
#introCopy{
    grid-column: 2/5;
    grid-row: 2;
    z-index: 10;
    align-self: center;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
    #introCopy h1{
        grid-column: 1 / 4;
    }
    #introCopy p{
        grid-column: 1 / 4;
        color: #FFFFFF;
    }
#introColorBlock{
    background-color: #69768C;
    grid-column: 1 / 6;
    grid-row: 1 / 3;
    height: 100%;
}
#introImageBlock{
    /* background-image: url('images/introImage.jpg'); */
    background-position: center;
    background-size: cover;
    grid-column: 3 / -1;
    grid-row: 1 / 3;
    z-index: -1;
}
#contentBlock-One .button{
    width: 100%;
    grid-column: 1 / 3;
    align-self: start;
    justify-self: end;
    padding: 25px 0px;
    margin-top: 24px;
}


/* content block two */
#contentBlock-Two{
    display: grid;
    grid-template-columns: repeat(14, 1fr);;
    grid-template-rows: 17% 71% 12%;
    max-width: 1920px;
    height: 82vh;
    max-height: 890px;
}
#contentBlockTwoSupportType{
    align-self: center;
    grid-column: 9 / 14;
    grid-row: 2;  
}
#introColorBlock-cont{
    background-color: #69768C;
    grid-column: 1 / 6;
    grid-row: 1 / 2;
    height: 50%;
}
#contentBlockTwoSupportImage{
    background-image: url('images/contentBlockTwoSupport.jpg');
    background-position: center;
    background-size: cover;
    grid-column: 2 / 8;
    grid-row: 2 / 3;   
}
#contentBlockTwo_accentBlock{
    background-color: #D0A441;
    grid-column: 1 / 4;
    grid-row: 2;
    height: 10%;
    margin: 18% 0 0;
}

/* content block three */
#contentBlock-Three{
    display: grid;
    grid-template-columns: repeat(14, 1fr);;
    grid-template-rows: 9% 82% 9%;
    max-width: 1920px;
    height: 77vh;
    max-height: 830px;
    background-color: #282B2E;
}
#contentBlockThreeSupportType{
    align-self: center;
    grid-column: 3 / 7;
    grid-row: 2;  
}
#contentBlockThreeSupportImage{
    background-image: url('images/contentBlockThreeSupport.jpg');
    background-position: center;
    background-size: cover;
    grid-column: 8 / 14;
    grid-row: 2 / 3;   
}

/* work block */
#workBlock{
    display: grid;
    grid-template-columns: repeat(14, 1fr);;
    grid-template-rows: 12% 8% 68% 12%;
    max-width: 1920px;
    height: 105vh;
    max-height: 1800px;
}
#portfolioLoadingMessage{
    grid-column: 1 / grid-column-end;
    grid-row: 1 / grid-row-end;
    display: grid;
    align-items: center;
}
#portfolioLoadingMessage p{
    text-align: center;
}
#portfolioLoadingMessage p img{
    padding-top: 10px;
}
#work-headline{
    align-self: start;
    grid-column: 2 / 7;
    grid-row: 2;  
}
#workGrid{
    display: grid;
    grid-column: 2 / 14;
    grid-row: 3 / 4; 
    grid-template-columns: 1fr 1fr 1fr;
    /* grid-template-rows: 1fr 1fr; */
    grid-gap: 15px;
    visibility: hidden;
}
#workGrid > .workItem{
    background-position: center;
    background-size: cover;
    border-radius: 10px;
    overflow: hidden;
}
    /* thumbnail alignments */
    #workGrid > .workItem#newSchools_thumb{
        background-position: left;
    }
    #workGrid > .workItem#lyres_thumb{
        background-position: right;
    }
    @media screen and (max-width: 1200px) and (min-width: 861px) {
        #workGrid > .workItem#bunnyBaes_thumb{
            background-position: 30%;
        }
    }
    @media screen and (max-width: 860px){
        #workGrid > .workItem#bunnyBaes_thumb{
            background-position: 35%;
        }
    }
#workGrid > .workItem div{
    background-color: #282B2E;
    border-radius: 10px;
    opacity: 0%;
    transition: .5s ease;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    align-self: center;
    justify-self: center;
    width: 100%;
    height: 100%;
}
#workGrid > .workItem div:hover{
    opacity: 90%;
}
#workGrid > .workItem div p{
    font-size: clamp(18px, 2vw, 30px);
    padding: 0;
    margin: 0;
    text-align: center;
    justify-content: center;
    align-self: center;
}
#workItem-one{
    background-image: url('images/workThumb-one.jpg');
}
#workItem-two{
    background-image: url('images/workThumb-two.jpg');
}
#workItem-three{
    background-image: url('images/workThumb-three.jpg');
}
#workItem-four{
    background-image: url('images/workThumb-four.jpg');
}
#workItem-five{
    background-image: url('images/workThumb-five.jpg');
}
#workItem-six{
    background-image: url('images/workThumb-six.jpg');
}

/* portfolio UI */

#portfolioWrapper{
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    grid-template-rows: 10% 1fr 10%;
    background-color: rgba(255, 255, 255, 0.99);
    opacity: 0;
    position: fixed;
    top: -110vh;
    left: 0px;
    z-index: 20;
}
#portfolioUI{
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 1fr 15%;
    grid-column: 2 / 14;
    grid-row: 2 / 3; 
    display: grid;
}
#backButton{
    grid-column: 1 / 2;
    grid-row: 1 / 3; 
    background-image: url('images/portfolioBackButton.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 60%;
    z-index: 30;
}
    #backButton:hover{
        background-image: url('images/portfolioBackButton-hover.svg');
    }
#forwardButton{
    grid-column: 12 / 13;
    grid-row: 1 / 3; 
    background-image: url('images/portfolioNextButton.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 60%;
    z-index: 30;
}
    #forwardButton:hover{
        background-image: url('images/portfolioNextButton-hover.svg');
    }
#portfolioSlideWrapper{
    grid-column: 2 / 12;
    grid-row: 1 / 2; 
    background-color: #dadada;
    overflow: hidden;
}
#portfolioSlides{
    /* width: 200%; */

    /* width set by jquery */
    height: 100%;
    position: relative;
}
.slide{
    /* width: 50%; */

    /* width set by jquery */
    height: 100%;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    float: left;
}
#sextant-FrontDesk{
    background-image: url('images/sextant-FrontDesk.jpg');
    left: 0%;
}
#loudbunny-main{
    background-image: url('images/loudbunny-main.jpg');
    left: 50%;
}
#portfolioDataWrapper{
    grid-column: 2 / 12;
    grid-row: 2 / 3; 
    background-color: #ffffff;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    color:#3F4361;
}
#portfolioDataWrapper .dataLabel{
    font-family: 'basier_squarebold';
}
#projectClientNameContainer{
    grid-column: 1 / 4;
    grid-row: 1 / 2; 
    background-color: #282B2E;
    display: grid;
}
    #projectClientNameContainer h3{
        font-family: 'basier_squarebold';
        margin: 0;
        padding: 0 5%;
        color: #ffffff;
        font-size: clamp(20px, 2.25vw, 30px);
        line-height: clamp(22px, 2.75vw, 36px);
        justify-self: center;
        align-self: center;
        text-align: center;
    }
#projectTitleContainer{
    grid-column: 4 / 6;
    grid-row: 1 / 2;
    display: grid;
}
    #projectTitleContainer p{
        margin: 0;
        padding: 0 5%;
        justify-self: center;
        align-self: center;
        text-align: left;
    }
#projectDetailsContainer{
    grid-column: 6 / 10;
    grid-row: 1 / 2;
    display: grid;
}
    #projectDetailsContainer p{
        margin: 0;
        padding: 0;
        align-self: center;
        text-align: left;
    }
#projectTitleContainer p,
#projectDetailsContainer p{
    font-size: clamp(16px, 1vw, 18px);
    line-height: clamp(22px, 1.4vw, 26px);
}

#portfolioCurrentSlideContainer{
    grid-column: 10 / 11;
    grid-row: 1 / 2; 
    display: grid;
}
    #portfolioCurrentSlideContainer p{
        margin: 0;
        padding: 0;
        font-size: 24px;
        align-self: center;
        text-align: center;
    }

/* footer */
#footerBlock{
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    max-width: 1920px;
    height: 62vh;
    max-height: 660px;
    background-color: #69768C;
}
#contactColorBlock{
    background-color: #282B2E;
    grid-column: 1 / 8;
    grid-row: 1; 
}
#contactFooterCopy{
    grid-column: 3 / 7;
    grid-row: 1;
    align-self: center;
    padding: 0 15% 0 0;
}
#contactFooterCopy .button{
    margin-top: clamp(30px, 10%, 55px);
}
#footerLinks{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-self: center;
    width: 100%;
    grid-column: 9 / 14;
}
#footerLinks a{
    display: block;
    text-align: left;
}
#footerLinks a:first-of-type{
    margin-bottom: 38px;
}
#copyright{
    grid-column: 4 / 6;
    justify-self: end;
    align-self: start;
    text-align: right;
    margin: 0px;
    width: 100%;
}

/* tablet overrides */
@media screen and (max-width: 1366px){
    /* content block one */
    #introColorBlock{
        grid-column: 1 / 7;
    }
    #introImageBlock{
        grid-column: 1 / -1;
    }
    #introColorBlock-cont{
        grid-column: 1 / 7;
    }
    #introCopy{
        grid-column: 2 / 6;
    }
    #contentBlock-One .button {
        grid-column: 1 / 4;
    }
    /* footer */
    #footerLinks {
        display: grid;
        grid-template-columns: 20% 20% 60%;
        align-self: center;
        width: 100%;
        grid-column: 9 / 14;
    }
    #footerLinksColumnTwo{
        grid-column: 2 / 3;
    }
    #copyright {
        grid-column: 3 / 4;
    }
}

/* phone overrides */
@media screen and (max-width: 860px){
    @media screen and (min-width: 450px){
        /* h1, h2, p{
            grid-column: 1/4 !important;
        } */
    }
    .mobileLinebreak{
        display: block;
    }

    /* contact us wrapper */
    #contactWrapper{
        grid-template-columns: 8% 1fr 1fr 1fr 1fr 8%;
        grid-template-rows: 3% 14% 76% 7%;
    }
    #closeContactFormButton,
    #closePortfolioFormButton{
        align-self: center;
        justify-self: start;
        grid-column: 5 / 6;
        grid-row: 2 / 3;
    }
    #closeContactFormButton:hover,
    #closePortfolioFormButton:hover{
        /* background-image: url('images/closeButton-hover.svg'); */
    }
    #formWrapper{
        width: 100%;
        grid-column: 2 / 6;
        grid-row: 3 / 4;
        align-self: start;
    }
    /* #formWrapper{
        align-self: center;
        justify-self: stretch;
        grid-column: 6 / 10;
        grid-row: 2 / 3;
        display: grid;
        grid-template-rows: 1fr;
        text-align: left;
        position: relative;
    } */
    #formWrapper h2{
        align-self: center;
    }
    form.contact{
        padding: 23px 0 0;
        width: 100%;
    }
    form.contact input{
        padding: 12px 0;
        width: 100%;
        text-indent: 15px;
        margin: 0 0 6px;
        border: none;
    }
    form.contact input:focus{
        outline: 6px solid #6970A7;
    }
    form.contact textarea{
        margin: 0 0 6px;
        padding: 12px 0;
        width: 100%;
        height: 120px;
        text-indent: 15px;
        resize: none;
        border: none;
    }
    form.contact textarea:focus{
        outline: 6px solid #6970A7;
    }
    form.contact .button{
        margin-top: 30px;
        width: 100%;
    }

    /* contact confirmation */
    #contactConfirmationWrapper{
        grid-template-columns: 8% 1fr 1fr 1fr 1fr 8%;
        grid-template-rows: 10px 65px 1fr 75px;
    }
    #confirmationWrapper{
        width: 100%;
        grid-column: 2 / 6;
        grid-row: 3 / 4;
    }

    /* content block one */
    #contentBlock-One{
        grid-template-columns: 8% 1fr 1fr 1fr 1fr 8%;
        grid-template-rows: 3% 14% 46% 34% 3%;
        max-height: 900px;
        margin-bottom: 65px;
    }
    #introCopy{
        grid-column: 2/6;
        grid-row: 3;
    }
    #introHeadline{
        grid-column: 2/6;
        grid-row: 3/4;
    }
    #introColorBlock{
        grid-column: 1 / 7;
        grid-row: 1 / 5;
    }
    #logo-main{
        width: 100%;
        height: auto;
        align-self: center;
    }
    #introImageBlock{
        grid-column: 2 / 6;
        grid-row: 4 / 6;
        z-index: 1;
        overflow: hidden;
    }
    video{
        height: 100%;
    }
    #contentBlock-One .button{
        display: none;
    }
    #hamburgerMenuButton{
        background-image: url('images/hamburgerMenuButton.svg');
        background-repeat: no-repeat;
        background-position: center;
        width: 85px;
        height: 65px;
        border-radius: 10px;
        grid-column: 5/6;
        grid-row: 2/3;
        justify-self: end;
        align-self: center;
    }
    #hamburgerMenuButton:hover{
        background-image: url('images/hamburgerMenuButton-hover.svg');
    }

    /* content block two */
    #contentBlock-Two{
        grid-template-columns: 8% 1fr 1fr 1fr 1fr 8%;
        grid-template-rows: 1fr 1fr;
        margin-bottom: 65px;
    }
    #contentBlockTwoSupportType{
        grid-column: 2/6;
        grid-row: 1;
    }
    #contentBlockTwoSupportType p{
        margin-bottom: 32px;
    }
    #introColorBlock-cont{
        display: none;
    }
    #contentBlockTwoSupportImage{
        grid-column: 2 / 6;
        grid-row: 2;
    }
    #contentBlockTwo_accentBlock{
        grid-column: 1 / 3;
        grid-row: 2;
        margin: 25% 0 0;
    }

    /* content block three */
    #contentBlock-Three{
        grid-template-columns: 8% 1fr 1fr 1fr 1fr 8%;
        grid-template-rows: 65px 1fr 32px 1fr 65px;
        height: 90vh;
        min-height: 600px;
    }
    #contentBlockThreeSupportType{
        align-self: center;
        justify-self: start;
        grid-column: 2 / 6;
        grid-row: 4 / 5;  
    }
    #contentBlockThreeSupportType h2{
        width: 100%;
    }
    #contentBlockThreeSupportType h2 br{
        display: none;
    }
    #contentBlockThreeSupportImage{
        grid-column: 2 / 6;
        grid-row: 2 / 3;  
        height: 100%; 
        align-self: end;
    }

    /* work block */
    #workBlock{
        grid-template-columns: 8% 1fr 1fr 1fr 1fr 8%;
        grid-template-rows: 65px 55px 1fr 95px;
        height: auto;
        max-height: auto;
    }
    #work-headline{
        align-self: start;
        grid-column: 2 / 5;
    }
    #workGrid {
        height: 1040px;
        grid-column: 2 / 6;
        grid-template-columns: 1fr 1fr;
        /* grid-template-rows: 1fr 1fr 1fr; */
    }

    /* portfolio UI */
    #portfolioWrapper{
        grid-template-rows: 12% 80%;
        grid-template-columns: 8% 1fr 1fr 1fr 1fr 8%; 
    }
    #portfolioUI{
        grid-template-columns: 8% 1fr 1fr 1fr 1fr 8%;
        grid-template-rows: 34% 14% 50%;
        grid-column: 1 / 7;
        grid-row: 2 / 3;
    }
    #closePortfolioFormButton{
        grid-column: 5 / 7;
        grid-row: 1 / 2;
    }
    #backButton{
        grid-column: 1 / 4;
        grid-row: 2 / 3; 
        background-image: url('images/portfolioBackButtonMobile.svg');
        background-color: #3F4361;
        margin: 10px 5px 10px 0;
    }
    #backButton:hover{
        background-image: url('images/portfolioBackButtonMobile.svg');
        background-color: #777EAD;
    }
    #forwardButton{
        grid-column: 4 / 7;
        grid-row: 2 / 3; 
        background-image: url('images/portfolioNextButtonMobile.svg');
        background-color: #3F4361;
        margin: 10px 0 10px 5px;
    }
    #forwardButton:hover{
        background-image: url('images/portfolioNextButtonMobile.svg');
        background-color: #777EAD;
    }
    #portfolioSlideWrapper{
        grid-column: 1 / 7;
        background-color: transparent;
    }
    #portfolioDataWrapper{
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 0.75fr 0.5fr 0.5fr 0.75fr;
        grid-column: 2 / 6;
        grid-row: 3 / 4; 
        background-color: transparent;
    }
    #projectClientNameContainer{
        grid-column: 1 / 4;
        grid-row: unset; 
        background-color: transparent;
        display: grid;
        /* align-self: flex-start;
        justify-content: left; */
    }
        #projectClientNameContainer h3{
            margin: 0;
            padding: 0;
            color:#3F4361;
            font-size: clamp(24px, 1vw, 22px);
            line-height: clamp(27px, 1.4vw, 29px);
            justify-self: left;
            place-self: center stretch;
            align-self: center;
            text-align: left;
        }
    #projectTitleContainer{
        grid-column: 1 / 5;
        grid-row: 2 / 3; 
        display: grid;
        align-self: center;
        justify-content: left;
    }
        #projectTitleContainer p{
            margin: 0;
            padding: 0;
            font-size: clamp(16px, 1vw, 18px);
            line-height: clamp(24px, 1.4vw, 34px)
            justify-self: center;
            align-self: center;
            text-align: left;
        }
    #projectDetailsContainer{
        grid-column: 1 / 57;
        grid-row: 3 / 4; 
        display: grid;
    }
        #projectDetailsContainer p{
            margin: 0;
            padding: 0;
            font-size: clamp(16px, 1vw, 18px);
            line-height: clamp(24px, 1.4vw, 34px)
            justify-self: start;
            place-self: center stretch;
            align-self: center;
            text-align: left;
        }
    #portfolioCurrentSlideContainer{
        grid-column: 4 / 5;
        grid-row: 1 / 2; 
        display: grid;
    }
        #portfolioCurrentSlideContainer p{
            margin: 0;
            padding: 0;
            font-size: clamp(20px, 1vw, 22px);
            line-height: clamp(24px, 1.4vw, 26px);
            align-self: center;
            text-align: right;
        }

    /* terms */
    .infoPageHeader {
        grid-template-columns: 8% 1fr 1fr 1fr 1fr 8%;
        max-height: 160px;
    }
    .infoPageHeader #logo-main img{
        width: 87px;
    }
    .infoNavButton {
        display: none;
    }
    .infoPageHeader  #hamburgerMenuButton{
        background-image: url('images/hamburgerMenuButtonDark.svg');
        grid-row: 1/2;
    }
    .infoPageHeader  #hamburgerMenuButton:hover{
        background-image: url('images/hamburgerMenuButtonDark-hover.svg');
    }
    .infoContent{
        grid-template-columns: 8% 1fr 1fr 1fr 1fr 8%;
    }
    .infoContent h1 {
        margin: 10px 0 30px;
    }
    .infoContent h1, .infoContent h4, .infoContent h5, .infoContent p, .infoContent div {
        grid-column: 2/6;
    }

    
    

    /* footer */
    #footerBlock{
        grid-template-columns: 8% 1fr 1fr 1fr 1fr 8%;
        grid-template-rows: 1fr 1fr;
        height: auto;
        max-height: 120vh;
        /* padding: 0 0 65px; */
    }
    #contactColorBlock{
        grid-column: 1 / 7;
        grid-row: 1; 
    }
    #contactFooterCopy{
        grid-column: 2 / 6;
        grid-row: 1; 
        align-self: center;
        width: 100%;
        padding: 65px 0;
    }
    #contactFooterCopy .button{
        padding: 25px 0;
        width: 100%;
    }
    #footerLinks{
        grid-template-columns: 1fr;
        grid-column: 2 / 6;
        align-self: center;
        width: 100%;
        /* padding: 65px 0 0; */
    }
    /* commented out until until cookies page built out and google profile made */
    /* #footerLinks div{
        margin-bottom: 20px;
    } */
    /* end commented out */

    /* temporary until cookies page built out and google profile made */
    #footerLinks div:first-of-type{
        margin-bottom: 15px;
    }
    #footerLinks div{
        margin-bottom: 40px;
    }
    /* end temp code */
    #footerLinksColumnTwo {
        grid-column: 1;
    }
    #footerLinks a{
        display: block;
        text-align: left;
        margin-bottom: 12px;
    }
    #footerLinks a:first-of-type {
        margin-bottom: 0px;
    }
    #copyright{
        justify-self: end;
        align-self: start;
        text-align: left;
        margin: 0px;
        width: 100%;
        grid-column: 1;
    }
}