body {
    width: 100%;
    margin: 0;
    background-color: #051f3c;
}
main {
    width: 100%;
    font-family: "Graphie", sans-serif;
    }
nav ul{
    list-style-type: none;
}
nav ul a {
    color: #B3c1cd;
    display: block;
    text-decoration: none;
}
h1{
    font-size: 6em;
    color: #B3c1cd;
    margin-bottom: 0;
}
h2{
    font-size: 4em;
    color: #B3c1cd;
    font-style: italic;
    margin: 0;
}
h3{
    font-size: 2em;
    color: #B3c1cd;
}
p{
    font-size: 2em;
    color: #B3c1cd;
    margin-top: 0;
}
.navFlex{
    display: flex;
}
.navFlex ul{
    display: flex;
}
.navFlexImage{
    width: 100%;
    padding-right: 1em;
}
.mainFlex{
    display: flex;
    width: 100%;
    margin-left: auto;
    margin-left: auto;
}
.mainFlex section.folioChunk{
    display: flex;
    width: 100%;
}
.folioChunk{
    display: flex;
    margin-top: 4em;
    padding-bottom: 2em;
    flex-direction: column;
    align-items: center;
    background-color: black;
    overflow: hidden;
    width: 100%;
}
.folioChunk figure{
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
}

.folioChunk img{
    display: block;
    width: 99%;
    padding-top: 2em;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}
.folioChunk h2{
    padding-top: .75em;
    text-align: center;
}
.folioChunk h3{
    margin: 0;
    text-align: center;
}
.upBtn figure{
    display: flex;
    width: 100%;
    padding-top: 0;
    padding-bottom: 0;
}
.upBtn img {
    transform: rotate(300deg);
    width: 20%;
    height:20%;
    margin: 0;
}
.upBtn figcaption{
    color: #B3c1cd;
    font-style: italic;
}
.btmBtn{
    display: flex;
}
.btmBtn figure{
    padding: 2em;
}
.resDiv{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.resDiv figure{
    display: flex;
    width: 90%;
    justify-content: center;
    margin-bottom: 3em;
    margin-top: 1em;
}
.resDiv img{
    width: 100%;
    background-color: black;
    padding: 2em;
    max-width: fit-content;
}
.resDiv p{
    color: #B3c1cd;
    font-size: 1em;
}
.resDiv p a {
    color: #008494;
}
.sPortrait{
    display: block;
    width: 50%;
    
}
.sPortrait img{
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 80%;

}
.slicknav_menu{display: none;}
.slickLogo{
    float: left;
    padding: 1em;
}
.slickLogo img{
    max-width: 62.6px;
}
.toFront{
    z-index: -100;
}
.toBack{
    z-index: 200;
}
#mainNav{
    background-color: #051f3c ; /*#008595*/
    width: 100%;
    display: flex;
    max-height: 10em;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    font-weight: bold;
    align-items: stretch;
    justify-content: flex-start;
}
#nLS{
    width: 5em;
}

#nLS img{
    width: 5em;
    padding-left: 1em;
    padding-top: .5em;
}
#nMS ul{
    display: flex;
    color: #B3c1cd;
    margin: 0;
    align-items: center;
    width: 100%;
}
#nMS ul li{
    font-size: 4em;
    border-right: 5px solid #B3c1cd;
    border-left: 5px solid #B3c1cd;
    padding-right: .25em;
    padding-left: .25em;
}
#nMS ul li.lastLink{
    border-left: none;
}
#nMS ul li a:hover{
    font-style: italic;
    color: #008494;
}
#nSS ul{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
#nSS ul li{
    padding-right: 1em;
}
#nSS{
    width: 100%;
}
#nSS img{
    padding-right: .5em;
}
#nav_menu{display: none;}
#textSect{
    width: 50%;
    padding-left: 1em;
}
#textSect figure{
    display: flex;
    justify-content: center;
    padding-top: 6em;
}
#textSect h2{
    font-weight: normal;
    font-size: 3em;
    padding-bottom: .5em;
}
#sScreenDBtn{
    display: none;
}
#portFig{
    display: flex;
    width: 50%;
    background-color: #051f3c;
    justify-content: flex-end;
}
#portFig figure{
    width: 100%;
}
#portFig img{
    max-width: 100%;
    width:fit-content;
}
#portfolio{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
#imgFlex figure{
    display: flex;
    justify-content: center;
    background-color: black;
    margin: 2em;
    padding: 2em;
    width: 100%;
}
#imgFlex figure img{
    width: 100%;
    max-width: fit-content;
}


@media all and (max-width: 1109px){
    #nMS ul li a{
        font-size: .5em;
    }

    .navFlexImage{
        padding-right: .5em;
    }
    
}
@media all and (max-width: 769px){
    #mainNav{display: none;}
    #mobile_menu{display: block;}
    #mainDiv{
        flex-direction: column;
        align-items: center;
    }
    #textSect{
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: center;
        order: 1;
    }
    #textSect p{
        text-align: center;
        padding: 1em;

    }
    #textSect figure {
        display: none;
    }
    h1 {
        font-size: 4em;
        text-align: center;

    }
    h2 {
        text-align: center;
        

    }
    .sPortrait{
        display: flex;
    }

    .sPortrait img{
        display: block;
        width: 100%;
        margin-top: 0;
    }
    #introText{
        display: flex;
        flex-direction: column;
        width: 100%;

    }


    .slicknav_menu{display: block;}
    .slicknav_menu  {background-color: #051f3c  !important;}

}

/*@media all and (max-width: 1559px)  {
    #mainDiv{
        flex-direction: column;
    }
    #textSect figure{
        display: none;
    }
    #lScreenDBtn{
        display: none;
    }
    #sScreenDBtn{
        display: flex;
        order: 3;
    }
    .sPortrait{
        width: 100%;
        order: 2;
        justify-content: flex-end;
    }
    .sPortrait img{
        width: 70%;
    }

    #textSect{
        width: 100%;
        padding-left: 1em;
        order: 1;
    }

}*/