* {
    margin: 0px;
    padding: 0px;
    margin-block-start: 0px;
    margin-block-end: 0;
    box-sizing: border-box;
}

.body {
    position: relative;
    display: grid;
    overflow-x: hidden;
}

.studentWrapper,
.generalWrapper {
    position: relative;
    display: grid;
    /* top: 0; */
    z-index: 1;
    box-sizing: border-box;
}

.generalWrapper {
    gap: var(--xMobilePadding);
    grid-template-rows: auto;
    position: absolute;
    top: 0'

}

p.generalIntro,
p.generalMainP {
    padding-bottom: calc(var(--xMobilePadding)/2);
}

.generalSpacer {
    z-index: 0;
}

.fas.switchPageChevronLeft,
.fas.switchPageChevronRight {
    display: none;
}

.sDivFlatIllustrationLarge {
    position: relative;
    width: calc(100vmin);
    height: calc(50vh);
    background-repeat: no-repeat;
    background-size: 95vmin;
    background-size: cover;
    /* padding: var(--xMobilePadding); */
    overflow: hidden;
    box-sizing: border-box;
}

.generalImgMainArticle,
.generalImgParagraph {
    max-width: 100vw;
}

.mobileHide {
    display: none;
}

main.mainStudent {
    display: grid;
    gap: var(--xMobilePadding);
    justify-content: start;
    align-content: start;
    padding-top: var(--xMobilePadding);
    box-sizing: border-box;
}

.gVideoDiv,
.gGalleryItem {
    padding-bottom: var(--xMobilePadding);
}

.sIntro,
.sSectionBio,
.sPortfolioSection {
    grid-column: 1;
    width: calc(100vmin);
}

.sHeadShotImg {
    padding-left: calc(3*var(--xMobilePadding));
    box-sizing: border-box;
}

.sBioHeader {
    padding-left: var(--xMobilePadding);
    padding-bottom: var(--xMobilePadding);
    box-sizing: border-box;
}

.sIntro {
    width: calc(100vmin);
}


/* __________ Intro Text __________ */

.sBriefDiv {
    padding-left: var(--xMobilePadding);
    padding-right: var(--xMobilePadding);
    position: relative;
    box-sizing: border-box;
}

.sIntroText {
    z-index: 100;
    position: relative;
    width: calc(100vmin - 2(var(--xMobilePadding)));
    margin: 0 auto;
    justify-self: center;
    top: calc((100vw/100vh)*2vw);
    box-sizing: border-box;
}

.author {
    padding-top: calc((var(--xMobilePadding))/2);
    padding-bottom: calc((var(--xMobilePadding))/2);
}


/* social media list */

div.gSocialMedia {
    padding-top: calc((var(--xMobilePadding))/2);
    padding-bottom: calc((var(--xMobilePadding))/2);
}

.sMobileView {
    display: unset;
}

.desktopOnlyView {
    display: none;
}

.centerPage {
    text-align: center;
}


/* __________ Below the Fold __________ */

.sBriefDiv {
    max-width: calc(100vmin - 2(var(--xMobilePadding)));
    display: grid;
    justify-content: center;
}

.sBriefP {
    max-width: calc(100vmin - 2(var(--xMobilePadding)));
}

fieldset {
    border: 1px solid seagreen;
    border-color: var(--green);
    width: calc(100vmin - 2(var(--xMobilePadding)));
}

legend {
    color: var(--green);
    font-weight: bold;
}

textarea {
    width: calc(100vmin - 2(var(--xMobilePadding)));
    width: 100%;
    outline: none;
    resize: none;
    overflow: auto;
    margin: 0 auto;
}

input[type="submit"],
input[type="submit"],
button {
    background-color: white;
    padding: 5px;
    margin-top: 5px;
    color: var(--green);
    font-weight: bold;
}

input[type=text]:focus,
textarea:focus {
    outline: none;
    /* background: rgba(0, 192, 235, 0.10); */
    border: 2px solid #ccc;
    border-color: var(--green);
}

input[type=text] {
    width: 100%;
    line-height: 130%;
}

label {
    margin-bottom: 2px;
    line-height: 115%;
}

ul,
.sPortfolioSection,
.sPortfolioItemsSlider {
    grid-column: 1;
    display: grid;
    grid-template-columns: calc(100%);
    grid-auto-flow: column;
    gap: 5vmin;
    justify-items: center;
}

.sVideoDiv,
.sPortfolioLandscapeArticle,
.sPortfolioPortraitArticle {
    grid-column: 1 / 2;
}

.sVideo,
.gVideo {
    position: relative;
    padding-bottom: 56.25%;
    overflow: hidden;
    display: grid;
    justify-content: center;
    background-color: var(--green);
    height: 0;
    max-width: 100%;
}


/* .sVideo, */

.sVideo iframe,
.gVideo iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.sArticleImage {
    position: relative;
}

#sHeadShotImg {
    width: calc(100vmin - (4*(var(--xMobilePadding))));
}


/* figure {
    margin: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
}

.zoomFigure {
    display: flex;
    justify-items: flex-start;
    align-items: center;
    padding: 1em 0vmin;
    box-sizing: border-box;
}

.zoomImg {
    max-width: 30%;
    max-width: 130px;

}

.zoomFigCap {
    padding-left: 2vmin;
    padding-right: 2vmin;
    box-sizing: border-box;
} */

.fas.pFas {
    font-size: calc(1em + .5vmin);
    line-height: 130%;
    padding: unset;
}


/* social media list */

ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: calc((var(--xMobilePadding))/2);
    grid-auto-flow: row;
    justify-items: center;
    align-items: center;
}


/* social media icons a li, li a i ? */

li,
.sContactLogoDiv {
    border: .25px solid #a8acaf;
    display: grid;
    grid-auto-flow: row;
    text-align: center;
    align-content: center;
    text-decoration: none;
    color: var(--green);
    padding: 2.5vmin;
    /* max-width: 30vw; */
    box-sizing: border-box;
}

.far.fa-file-pdf {
    padding-left: 3.1vmin;
    padding-right: 3.1vmin;
    box-sizing: border-box;
}

.sContactLogoDiv {
    padding: var(--xMobilePadding);
    box-sizing: border-box;
}


/* li a i {
        max-width: 85vmin;
    } */

.fab,
.fas,
.far {
    padding: 2vmin;
    font-size: 7vmin;
    color: var(--green);
}


/* __________Bio Section CSS ___________ */

.sContactAside {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    /* align-content: center;
        justify-content: center; */
    gap: var(--xMobilePadding);
}

.sContactAside,
.sHeadShotImg,
.sBioHeader,
.sVideoDiv,
.gVideoDiv {
    width: calc(94vmin);
    grid-column: 1;
}

.sContactAside,
.sVideoDiv,
.gVideoDiv {
    width: calc(100vmin);
}

.sContactLogo {
    width: 86vmin;
}

.sContactLogoDiv {
    display: grid;
    justify-items: center;
}


/* ------------Portfolio Image Peeks ------------*/


/* #One Value
If you only provide one value (e.g. background-size: 400px) it counts for the width, and the height is set to auto. You can use any CSS size units you like, including pixels, percentages, ems, viewport units, etc.
#Cover
 The default keyword — cover — Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges. https://css-tricks.com/almanac/properties/b/background-size/ , https://www.w3schools.com/cssref/css3_pr_background-size.asp 
*/

.sPortfolioSection,
.sPortfolioItemImageLandscape,
.sPortfolioItemImagePortrait {
    position: relative;
    width: calc(100vmin);
    /* height: calc(100vmin); */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100vmin;
    background-size: cover;
    border: .25px solid #a8acaf;
    box-sizing: border-box;
    overflow: hidden;
}

.sPortfolioSection {
    border: none;
    background-size: unset;
    justify-content: start start;
}

.sPortfolioLandscapeArticle,
.sPortfolioPortraitArticle {
    position: relative;
}

.sArticleActionsBack {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 125;
    padding: 4vmin;
    padding-right: calc(13vmin);
    width: calc(12vmin);
    margin: 0 auto;
    max-width: calc((var(--yMobileThirds)/6));
    max-height: calc((var(--yMobileThirds)/2));
    background: rbg(52, 204, 140);
    background: rgba(52, 204, 140, 0.5);
    box-sizing: border-box;
}

.sArticleZoom {
    position: relative;
    bottom: .5vmin;
    z-index: 150;
    width: 10vmin;
}

.sPortfolioItemImageLandscape,
.sPortfolioItemImagePortrait {
    width: calc(100vmin);
    height: calc(100vmin);
}

.sPortfolioLandscapeArticle {
    padding-left: 3vmin;
    padding-right: 3vmin;
    padding-bottom: 5vmin;
    box-sizing: border-box;
}

h3.sPortfolioTitleH3 {
    margin-top: 1.25vmin;
    padding-left: 3vmin;
    padding-right: 3vmin;
}

.pItemDescription {
    padding-left: 3vmin;
    padding-right: 3vmin;
    box-sizing: border-box;
}

footer {
    grid-row: 10;
}


/* MODAL STYLING */

#sectionModal {
    position: absolute;
    top: 0;
    z-index: 375;
    background-color: var(--black);
    width: 100%;
    height: 100vh;
    display: grid;
    align-content: center;
    justify-content: center;
    display: none;
    /* overflow-y: hidden; */
}

.modalXClose {
    position: fixed;
    top: calc(var(--xMobilePadding)/2);
    left: calc(var(--xMobilePadding)/2);
    z-index: 300;
    width: 8vw;
    min-width: 20px;
}

.modalDivChevronLeft {
    position: fixed;
    top: 35vh;
    left: var(--xMobilePadding);
    z-index: 300;
    width: 8vw;
    min-width: 20px;
}

.modalDivChevronRight {
    position: fixed;
    top: 35vh;
    right: var(--xMobilePadding);
    z-index: 300;
    width: 8vw;
    min-width: 20px;
    text-align: right;
}

.modalItemsCounter {
    display: none;
}

.modalPortfolioItems {
    display: flex;
    /* --n: 1;
    width: calc(var(--n)*100%);
    transform: translate(calc(var(--i, 0)/var(--n)*-100%)); */
}

.modalPortfolioArticle {
    padding-top: calc(var(--xMobilePadding)/2);
    padding-bottom: calc(var(--xMobilePadding)/2);
    height: 100vh;
}

.modalImgPortfolioItem {
    height: 80vh;
    min-height: 80vh;
    max-height: 80vh;
    width: 100vw;
    /* min-width: 100%;
    width: 100%;
    width: calc(100%/var(--n)); */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: .25px solid #a8acaf;
    padding-top: calc(var(--xMobilePadding)/2);
    padding-bottom: calc(var(--xMobilePadding)/2);
}

a:link.modalPortfolioTitleH3,
a:visited.modalPortfolioTitleH3,
h3.modalPortfolioTitleH3,
a:link.modalHREF,
a:visited.modalHREF {
    color: var(--green);
    padding-left: var(--xMobilePadding);
    padding-right: var(--xMobilePadding);
    box-sizing: border-box;
}

p.modalItemDescription {
    color: white;
    padding-left: var(--xMobilePadding);
    padding-right: var(--xMobilePadding);
    max-width: 650px;
    box-sizing: border-box;
}


/* ______________MEDIA  Queries____________
    /* Start Mobile & Thablet landscape, Tablet and desktop */


/* https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries */


/* This media query coverse most landscape devices and desktop. It's followed by media queries that have a handful of adjustments more specific to particular devices.  */

@media only screen and (min-width: 299px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-width: 601px) and (orientation: landscape),
only screen and (min-width: 767px) and (max-width: 1440px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
only screen and (min-width: 1400px) {
    .studentWrapper {
        width: 100vw;
        grid-template-columns: 1fr 1fr 1fr;
        /* grid-auto-flow: column; */
        padding-top: 20vmin;
    }
    .sHeader {
        background-color: unset;
        grid-column: 1/4;
        grid-row: 1;
    }
    .generalWrapper {
        gap: var(--xMobilePadding);
        grid-template-columns: var(--yMobileThirds) var(--yMobileThirds) 1fr var(--yMobileThirds);
        grid-auto-flow: dense;
        padding-Left: var(--xMobilePadding);
        width: 100%;
        top: 0vh;
    }
    /* ----------- ABOVE THE FOLD ----------- */
    .generalIntroWrapper {
        grid-column: 1 / 3;
        width: calc(var(--zVideoMobile) - 2*(var(--xMobilePadding)));
        grid-row: 1;
    }
    .generalParagraphWrapper,
    .generalParagraphWithImage {
        width: calc(var(--zVideoMobile) - 2*(var(--xMobilePadding)));
    }
    .row2Wrapper {
        grid-row: 2;
    }
    .generalParagraphWrapper {
        padding-top: 3vmin;
    }
    .generalParagraphWithImage {
        display: grid;
        grid-template-columns: 20vw 1fr;
    }
    .generalSpacer {
        display: block;
        min-height: 20vmin;
        height: 10vmax;
        padding-top: var(--xMobilePadding);
    }
    .generalImgMainArticle {
        grid-column: 3 / 4;
        width: calc(var(--yMobileThirds) + var(--xMobilePadding));
        max-width: 100vw;
        justify-self: end;
    }
    .generalImgParagraph {
        width: 20vw;
        padding-bottom: calc(var(--xMobilePadding)/2);
    }
    .generalMainP2 {
        padding-left: 5%;
    }
    h1.generalH1,
    /* h2.tweet, */
    .generalIntro {
        width: calc(var(--zVideoMobile) - 2*(var(--xMobilePadding)));
    }
    p.generalIntro,
    p.generalMainP p.generalMainP2 {
        padding-top: calc(var(--xMobilePadding)/2)
    }
    .gVideoDiv {
        grid-column: 1 / 3;
    }
    .gVideoDiv,
    .gGalleryItem {
        padding-bottom: unset;
    }
    .generalVideoDiv {
        grid-row: 2;
    }
    .generalGalleryItems {
        grid-column: 1 / 3;
        grid-row: 2;
        width: var(--zVideoMobile);
        display: grid;
        grid-template-columns: var(--yMobileThirds) var(--yMobileThirds);
        gap: var(--xMobilePadding);
        justify-content: start;
        align-content: start;
    }
    aside.gBioAside,
    aside.gContactAside {
        grid-column: 3 / 4;
    }
    h2.generalH2MainCTA {
        display: table;
        vertical-align: middle;
    }
    .fas.switchPageChevronLeft,
    .fas.switchPageChevronRight {
        display: block;
        position: absolute;
        z-index: 325;
        top: 50vh;
    }
    .fas.switchPageChevronLeft {
        left: var(--xMobilePadding);
        text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.76);
    }
    .fas.switchPageChevronRight {
        right: var(--xMobilePadding);
        text-shadow: -2px 2px 1px rgba(0, 0, 0, 0.76);
    }
    .sAboveTheFold {
        order: 2;
        grid-row: 2;
        grid-column: 1 / 4;
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        width: 100vw;
        height: 60vw;
    }
    /* .sDivFlatIllustrationLarge {
        top: -20vh;
        margin-bottom: -15vh;
    } */
    /* text */
    .mobileHide {
        display: unset;
        grid-column: 1 / 4;
    }
    .zoomFigure {
        display: flex;
        justify-items: flex-start;
        align-items: center;
        box-sizing: border-box;
    }
    .zoomImg {
        max-width: 30%;
        max-width: 130px;
        /* padding: 2vmin; */
    }
    .zoomFigCap {
        padding-left: 2vmin;
        padding-right: 2vmin;
        font-size: calc(.7em + .3vmin);
        box-sizing: border-box;
    }
    .fas.pFas {
        font-size: calc(1em + .5vmin);
        padding: unset;
    }
    .desktopHide {
        display: none;
    }
    .sIntroText {
        order: 3;
        padding-left: var(--xMobilePadding);
        grid-column: 1 / 5;
    }
    .sDivFlatIllustrationLarge {
        position: relative;
        width: 50vw;
        height: 60vw;
        margin-bottom: var(--xMobilePadding);
        right: 0px;
        background-size: unset;
        background-size: 5vw;
        background-size: cover;
        background-position-x: unset;
        overflow: visible;
    }
    /* Flat Illustration */
    .sFlatIllustration {
        position: absolute;
        top: 0;
        /* left: calc(50vw); */
        /* left: unset; */
        grid-column: 5 / 9;
        order: 4;
        width: 50vw;
        justify-self: end;
    }
    /* BELOW THE FOLD */
    .sIntroText {
        position: relative;
        padding-right: var(--xMobilePadding);
    }
    main.mainStudent {
        grid-column: 1 / 4;
        order: 5;
        grid-row: 3;
        display: grid;
        grid-template-columns: repeat(3, calc(var(--yMobileThirds)));
        position: relative;
        top: calc(-4*var(--xMobilePadding));
        padding-left: var(--xMobilePadding);
        padding-right: var(--xMobilePadding);
        box-sizing: border-box;
    }
    .sSectionBio {
        grid-column: 1 / 2;
        width: var(--yMobileThirds);
        grid-template-columns: var(--yMobileThirds);
        grid-template-rows: repeat(autofill, min-content);
        gap: var(--xMobilePadding);
        padding-left: 0;
        /* padding-left: var(--xMobilePadding); */
    }
    .sBioHeader,
    .sHeadShotImg,
    .sContactAside {
        grid-column: 1 / 2;
        width: var(--yMobileThirds);
    }
    .sContactAside {
        max-width: var(--yMobileThirds);
    }
    .sHeadShotImg {
        padding-left: unset;
    }
    .sBioHeader {
        padding-left: unset;
    }
    .sHeadShotImg,
    #sHeadShotImg {
        width: var(--yMobileThirds);
        padding-top: calc(2*var(--xMobilePadding));
    }
    .sContactLogo {
        width: calc((var(--yMobileThirds)) - 2*(var(--xMobilePadding)));
        /* max-width: 30vw; */
        align-self: center;
        justify-self: center;
        padding-left: 0vmin;
        margin-left: 0;
    }
    ul {
        grid-template-columns: repeat(3, calc((var(--yMobileThirds))/5));
        place-items: start start;
        gap: 1fr;
        margin: 0 auto;
        width: calc(((var(--yMobileThirds)) - (4*(var(--xMobilePadding)))));
        padding-left: 0vmin;
    }
    li {
        padding: 1vmin;
    }
    .sContactAside {
        z-index: 150;
    }
    .fab,
    .fas,
    .far {
        padding: 1vmin;
        font-size: 4.5vmin;
        color: var(--green);
    }
    ul {
        grid-column: 1;
        margin: 0 auto;
        place-items: center center;
        grid-template-columns: 1fr 1fr 1fr;
        max-width: var(--yMobileThirds);
        gap: 4vmin;
        margin-inline-start: 0;
        margin-inline-end: 0;
        align-self: center;
    }
    .far.fa-file-pdf {
        padding-left: 1.5vmin;
        padding-right: 1.5vmin;
        box-sizing: border-box;
    }
    h1.h1ForMobile {
        display: none;
    }
    /* old stuff */
    .desktopView {
        display: block;
    }
    /* _____ Portfolio Items _____ */
    .sPortfolioSection {
        grid-column: 2 / 4;
        grid-row: 1;
        order: 2;
        display: grid;
        grid-template-columns: repeat(2, var(--yMobileThirds));
        width: unset;
        width: var(--zVideoMobile);
        gap: var(--xMobilePadding);
        grid-auto-flow: row;
        justify-content: start;
        align-content: start;
    }
    .sVideoDiv {
        grid-column: 1 / 3;
        grid-row: 1;
        order: 1;
    }
    .sVideoDiv,
    .gVideoDiv {
        width: var(--zVideoMobile);
    }
    .sPortfolioItemsSlider {
        grid-column: 1 / 3;
        grid-row: 2;
        width: var(--zVideoMobile);
        grid-template-columns: repeat(2, var(--yMobileThirds));
        grid-auto-rows: min-content;
        gap: var(--xMobilePadding);
        width: var(--zVideoMobile);
        grid-auto-flow: row;
    }
    .sPortfolioItems {
        grid-column: 1 / 3;
        grid-row: 1;
        width: var(--zVideoMobile);
        display: grid;
        grid-template-columns: repeat(2, var(--yMobileThirds));
        grid-auto-rows: min-content;
        gap: var(--xMobilePadding);
        width: var(--zVideoMobile);
        grid-auto-flow: row;
    }
    /* .sArticleInfo, */
    .sArticleZoom {
        width: 4vmin;
        min-width: 20px;
        max-width: 40px;
    }
    .sArticleActionsBack {
        padding: 4vmin;
        padding-right: calc(13vmin);
        width: calc(12vmin);
        margin: 0 auto;
    }
    /* ------------Portfolio Image Peeks ------------*/
    .sPortfolioItemImageLandscape,
    .sPortfolioItemImagePortrait {
        width: var(--yMobileThirds);
        height: var(--yMobileThirds);
        background-repeat: no-repeat;
        background-position: center;
        background-size: var(--yMobileThirds);
        background-size: cover;
        border: .25px solid #a8acaf;
        box-sizing: border-box;
    }
    .sPortfolioLandscapeArticle {
        padding-bottom: 0vmin;
        padding-left: 0vmin;
        padding-right: 0vmin;
    }
    h3.sPortfolioTitleH3 {
        padding-left: 0vmin;
        padding-right: 0vmin;
    }
    .pItemDescription {
        padding-left: 0vmin;
        padding-right: 0vmin;
    }
    aside.gUpdatesAside {
        grid-column: 3 / 4;
        grid-row: 2;
    }
    footer {
        grid-column: 1 / 5;
        grid-row: 10;
        order: 10;
    }
    div.generalFooterFix {
        grid-column: 1 / 4;
        grid-row: 4;
        order: unset;
    }
}


/* minor fixes for aspect ratio wider that tall */

@media only screen and (min-width: 640px) and (orientation: landscape),
only screen and (min-width: 767px) and (max-width: 1440px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
    .gVideoDiv,
    .gGalleryItem {
        padding-bottom: unset;
    }
    .sHeadShotImg,
    #sHeadShotImg {
        width: var(--yMobileThirds);
        padding-top: unset;
    }
    .sPortfolioLandscapeArticle {
        padding-bottom: 0vmin;
        padding-left: 0vmin;
        padding-right: 0vmin;
    }
    h3.sPortfolioTitleH3 {
        padding-left: 0vmin;
        padding-right: 0vmin;
    }
    .pItemDescription {
        padding-left: 0vmin;
        padding-right: 0vmin;
    }
}


/* additional fixes for landscape devices*/

@media only screen and (min-width: 299px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-width: 601px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
    .sIntroText {
        position: relative;
        padding-right: var(--xMobilePadding);
    }
    main.mainStudent {
        top: calc((-1*var(--xMobilePadding))/3);
    }
    .gVideoDiv,
    .gGalleryItem {
        padding-bottom: unset;
    }
    .sPortfolioLandscapeArticle {
        /* padding-bottom: 5vmin; */
        padding-left: 0vmin;
        padding-right: 0vmin;
    }
    h3.sPortfolioTitleH3 {
        padding-left: 0vmin;
        padding-right: 0vmin;
    }
    .pItemDescription {
        padding-left: 0vmin;
        padding-right: 0vmin;
    }
}


/* This media query is special purpose, if you add things to it, it will break others, THIS IS **NOT** THE GENERAL PURPOSE BREAKPOINT FOR iPad or larger than thablet */

@media only screen and (min-width: 767px) {
    h2.sBioTitle {
        display: none;
    }
}


/* This media query overlaps builds on the first and starts tablet and tablet portrait  */

@media only screen and (min-width: 830px),
only screen and (min-width: 767px) and (max-width: 1441px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    .sIntroText {
        position: relative;
        /* top: calc(-1.75*var(--xMobilePadding)); */
        padding-right: var(--xMobilePadding);
    }
    #sBriefDivIntro {
        position: relative;
        margin-top: 40vw;
    }
    main.mainStudent {
        top: calc(-4*var(--xMobilePadding));
        padding-left: var(--xMobilePadding)
    }
    .gVideoDiv,
    .gGalleryItem {
        padding-bottom: unset;
    }
    .sContactAside {
        grid-template-rows: repeat(2, min-content);
        justify-content: start;
        align-content: start;
        gap: var(--xMobilePadding);
    }
    .sHeadShotImg {
        grid-row: 1;
        position: static;
    }
    .sBioHeader {
        grid-row: 2;
    }
    .sContactAside {
        grid-row: 3;
    }
    .sContactLogoA {
        grid-row: 1;
    }
    .sBioTitle {
        display: none;
    }
    ul {
        grid-row: 2;
        place-items: center center;
        grid-template-columns: 1fr 1fr 1fr;
        max-width: var(--yMobileThirds);
        gap: calc((var(--xMobilePadding))/3);
    }
    li {
        padding: 1vw;
    }
    .fab,
    .far {
        padding: .5vmin;
        margin: 0;
        font-size: calc(5vw);
        color: var(--green);
    }
    .fas {
        padding: .5vmin;
        margin: 0;
        color: var(--green);
    }
    .fas.pFas {
        font-size: unset;
        font-size: calc(1em + .5vmin);
    }
    .far.fa-file-pdf {
        padding-left: .3vmin;
        padding-right: .3vmin;
    }
    /* .sArticleInfo {
            display: block;
        } */
    .sArticleActionsBack {
        padding-top: 4vmin;
        padding-right: 6vmin;
        padding-left: 2vmin;
        width: calc(12vmin);
    }
    .sPortfolioLandscapeArticle {
        padding-bottom: 0vmin;
        padding-left: 0vmin;
        padding-right: 0vmin;
    }
    h3.sPortfolioTitleH3 {
        padding-left: 0vmin;
        padding-right: 0vmin;
    }
    .pItemDescription {
        padding-left: 0vmin;
        padding-right: 0vmin;
    }
}


/* This media query is pretty much specific to iPad 10.9" */

@media only screen and (min-width: 767px) and (max-width: 1023px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    .sIntroText {
        padding-right: var(--xMobilePadding);
    }
    .gVideoDiv,
    .gGalleryItem {
        padding-bottom: unset;
    }
    .sPortfolioLandscapeArticle {
        padding-bottom: 0vmin;
        padding-left: 0vmin;
        padding-right: 0vmin;
    }
    h3.sPortfolioTitleH3 {
        padding-left: 0vmin;
        padding-right: 0vmin;
    }
    .pItemDescription {
        padding-left: 0vmin;
        padding-right: 0vmin;
    }
}


/* This media query is pretty much specific to lower pixel density larger screen tablets" */

@media only screen and (min-width: 767px) and (max-width: 1000px) and (-webkit-max-device-pixel-ratio: 1.2) and (orientation: portrait) {
    .sIntroText {
        position: relative;
        z-index: 250;
        grid-column: 1 / 6;
        padding-left: calc(-6*var(--xMobilePadding));
    }
    #sH1 {
        max-width: 40vw;
    }
    #sH2 {
        max-width: 55vw;
    }
    .gVideoDiv,
    .gGalleryItem {
        padding-bottom: unset;
    }
    .sBriefDivIntro {
        max-width: 60vw;
    }
    .sPortfolioLandscapeArticle {
        padding-bottom: 0vmin;
        padding-left: 0vmin;
        padding-right: 0vmin;
    }
    h3.sPortfolioTitleH3 {
        padding-left: 0vmin;
        padding-right: 0vmin;
    }
    .pItemDescription {
        padding-left: 0vmin;
        padding-right: 0vmin;
    }
}


/* iPad 1 */

@media only screen and (min-width: 767px) and (max-width: 768px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
    .studentWrapper {
        display: unset;
    }
    .sDivFlatIllustrationLarge {
        height: calc(50vh);
    }
    main.mainStudent {
        top: calc(-.75*var(--xMobilePadding));
    }
    .sPortfolioLandscapeArticle {
        padding-bottom: 0vmin;
        padding-left: 0vmin;
        padding-right: 0vmin;
    }
    h3.sPortfolioTitleH3 {
        padding-left: 0vmin;
        padding-right: 0vmin;
    }
    .pItemDescription {
        padding-left: 0vmin;
        padding-right: 0vmin;
    }
}


/* iphone 678 portrait */

@media only screen and (min-width: 375px) and (max-height: 668px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
    .sFlatIllustration {
        width: 100vw;
        overflow: visible;
    }
    .sDivFlatIllustrationLarge {
        width: 100vw;
        position: relative;
        background-size: cover;
        background-size: 85vw;
        background-position-x: 15vw;
        overflow: visible;
    }
    /* .pItemDescription {
            padding-left: 0vmin;
            padding-right: 0vmin;
        } */
}


/* This media query is mainly meant for tall and skinny desktop windows. It undoes and almost goes back to mobile portrait aspect ration - before there were all the media queries. Some of it does affect mobile devices.  */

@media only screen and (min-width: 1200px),
(min-aspect-ratio: 8/5)
/*, (min-width: 1.7vh) { note vh ratio does not work to not have this call on iPad PRO*/

{
    .sIntroText {
        top: 0vh;
        margin-bottom: 0vh;
    }
    .desktopOnlyView {
        display: unset;
        position: absolute;
        top: 68vh;
        left: 46vw;
        z-index: 350;
    }
    .sArticleActionsBack {
        padding: 1vmin;
        width: calc(9vmin);
        margin: 0 auto;
        max-width: calc((var(--yMobileThirds)/6));
        max-height: calc((var(--yMobileThirds)/4));
    }
    /* .sArticleZoom {
                                bottom: 0;
                                padding: .25vmin;
                                box-sizing: border-box;
                            } */
    .sPortfolioLandscapeArticle {
        padding-bottom: 0vmin;
        padding-left: 0vmin;
        padding-right: 0vmin;
    }
    h3.sPortfolioTitleH3 {
        padding-left: 0vmin;
        padding-right: 0vmin;
    }
    .pItemDescription {
        padding-left: 0vmin;
        padding-right: 0vmin;
    }
}

@media only screen and (min-width: 1291px) and (-webkit-min-device-pixel-ratio: 2) {
    .sIntroText {
        top: 11vh;
    }
}

@media only screen and (min-height: 80vw) and (max-width: 800px) and (min-width: 80vh) {
    .sAboveTheFold {
        height: 80vh;
    }
}

@media only screen and (min-height: 101vw) and (max-width: 899px) and (min-width: 70vh) {
    .desktopHide {
        display: block;
    }
    .sMobileView {
        display: none;
    }
    .studentWrapper {
        grid-template-columns: 1fr;
    }
    .fas.switchPageChevronLeft,
    .fas.switchPageChevronRight {
        display: none;
    }
    .sHeader {
        background-color: var(--green);
        /* order: 1; */
        grid-row: 1;
        grid-column: unset;
        grid-column: 1;
    }
    .generalWrapper {
        gap: var(--xMobilePadding);
        grid-template-columns: 100%;
        grid-auto-flow: unset;
        width: 100%;
        top: unset;
        padding-left: 0;
    }
    .generalSpacer {
        display: block;
        height: unset;
    }
    .generalIntroWrapper,
    .generalIntro,
    .generalParagraphWrapper {
        width: 100%;
    }
    .generalImgMainArticle {
        width: 100%;
        grid-column: 1 / 4;
        grid-row: 1;
    }
    .generalImgParagraph {
        width: 100%;
    }
    aside.gBioAside {
        grid-row: 3;
        grid-column: 1 /2;
        width: 100%;
    }
    .generalGalleryItems {
        width: 100%;
        grid-template-columns: 100%;
        grid-row: 4;
    }
    .gGalleryItem {
        width: 100%;
        grid-column: 1/2;
    }
    .gVideo {
        grid-column: 1/2;
        width: 100%;
    }
    .gVideoDiv {
        width: 100%
    }
    .sAboveTheFold {
        order: unset;
        grid-column: unset;
        display: unset;
        grid-template-columns: unset;
        width: 100%;
        height: unset;
    }
    /* Flat Illustration */
    .sFlatIllustration {
        position: relative;
        top: unset;
        grid-column: unset;
        order: unset;
        justify-self: unset;
        width: 100%;
    }
    .sDivFlatIllustrationLarge {
        position: relative;
        left: 5%;
        width: calc(95%);
        height: calc(90vw);
        background-repeat: no-repeat;
        background-size: 88%;
        background-size: cover;
        background-position: right top;
        /* padding: var(--xMobilePadding); */
        overflow: hidden;
        padding-left: 15%;
        box-sizing: border-box;
    }
    h1.h1ForMobile {
        display: block;
    }
    .mobileHide {
        display: none;
    }
    main.mainStudent {
        display: grid;
        gap: var(--xMobilePadding);
        justify-content: start;
        align-content: start;
        padding-top: var(--xMobilePadding);
        grid-column: unset;
        grid-template-columns: unset;
        top: unset;
        padding-left: 5vmin;
        padding-right: 5vmin;
        box-sizing: border-box;
    }
    .sIntro,
    .sSectionBio,
    .sPortfolioSection {
        grid-column: 1;
        width: calc(100%);
    }
    .gVideoDiv,
    .gGalleryItem {
        padding-bottom: var(--xMobilePadding);
    }
    .sSectionBio {
        grid-template-columns: unset;
        grid-template-rows: unset;
        gap: var(--xMobilePadding);
        /* padding-left: var(--xMobilePadding); */
    }
    .sBioHeader,
    .sHeadShotImg,
    .sContactAside {
        grid-column: 1 / 2;
        width: calc(100%);
    }
    h2.sBioTitle {
        display: none;
    }
    .sContactAside {
        max-width: unset;
    }
    .sHeadShotImg {
        padding-left: calc(3*var(--xMobilePadding));
        padding-top: unset;
        box-sizing: border-box;
    }
    .sBioHeader {
        padding-left: var(--xMobilePadding);
        padding-bottom: var(--xMobilePadding);
        box-sizing: border-box;
    }
    /* .sMobileView {
            display: unset;
        } */
    /* .desktopHide {
        display: unset;
    } */
    .sIntro {
        width: calc(100%);
    }
    /* __________ Intro Text __________ */
    .sBriefDiv {
        padding-left: var(--xMobilePadding);
        padding-right: var(--xMobilePadding);
        position: relative;
        box-sizing: border-box;
    }
    .sIntroText {
        z-index: 100;
        position: relative;
        width: calc(100% - 2(var(--xMobilePadding)));
        margin: 0 auto;
        justify-self: center;
        grid-column: unset;
        padding-left: unset;
        order: unset;
        top: unset;
        padding-right: unset;
    }
    /* __________ Below the Fold __________ */
    .sBriefDiv {
        max-width: calc(100%- 2(var(--xMobilePadding)));
        display: grid;
        justify-content: center;
    }
    .sBriefP {
        max-width: calc(100%- 2(var(--xMobilePadding)));
    }
    fieldset {
        border: 1px solid seagreen;
        border-color: var(--green);
        width: calc(100% - 2(var(--xMobilePadding)));
        display: inherit;
        box-sizing: border-box;
    }
    legend {
        color: var(--green);
        font-weight: bold;
    }
    textarea {
        width: calc(100% - 2(var(--xMobilePadding)));
        width: 100%;
        outline: none;
        resize: none;
        overflow: auto;
        margin: 0 auto;
    }
    input[type="submit"],
    input[type="submit"],
    button {
        background-color: white;
        padding: 5px;
        margin-top: 5px;
        color: var(--green);
        font-weight: bold;
    }
    input[type=text]:focus,
    textarea:focus {
        outline: none;
        /* background: rgba(0, 192, 235, 0.10); */
        border: 2px solid #ccc;
        border-color: var(--green);
    }
    input[type=text] {
        width: 100%;
        line-height: 130%;
    }
    label {
        margin-bottom: 2px;
        line-height: 115%;
    }
    ul,
    .sPortfolioSection,
    .sPortfolioItemsSlider {
        grid-column: 1;
        display: grid;
        grid-template-columns: calc(100%);
        grid-auto-flow: column;
        gap: 5vmin;
        justify-items: center;
    }
    .sVideoDiv,
    .gVideoDiv,
    .sPortfolioLandscapeArticle,
    .sPortfolioPortraitArticle {
        grid-column: 1 / 2;
        width: 100%;
    }
    .sVideo,
    .gVideo {
        position: relative;
        padding-bottom: 56.25%;
        overflow: hidden;
        display: grid;
        justify-content: center;
        background-color: var(--green);
        height: 0;
        width: unset;
        width: 100%;
        max-width: 100%;
        grid-column: unset;
        grid-row: unset;
        order: unset;
    }
    /* .sVideo, */
    .sVideo iframe,
    .gVideo iframe,
    .embed-container object,
    .embed-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .sArticleImage {
        position: relative;
    }
    #sHeadShotImg {
        width: calc(100% - (4*(var(--xMobilePadding))));
    }
    .fas.pFas {
        font-size: calc(1em + .5vmin);
        padding: unset;
    }
    ul {
        grid-column: unset;
        list-style: none;
        padding: 0px;
        margin: 0px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        gap: calc((var(--xMobilePadding))/2);
        grid-auto-flow: row;
        justify-items: center;
        align-items: center;
        margin-inline-start: 0;
        margin-inline-end: 0;
        box-sizing: border-box;
    }
    /* social media icons a li, li a i ? */
    li,
    .sContactLogoDiv {
        border: .25px solid #a8acaf;
        display: grid;
        grid-auto-flow: row;
        text-align: center;
        align-content: center;
        text-decoration: none;
        color: var(--green);
        padding: 2.5vmin;
        box-sizing: border-box;
    }
    .far.fa-file-pdf {
        padding-left: 3.1vmin;
        padding-right: 3.1vmin;
        box-sizing: border-box;
    }
    .sContactLogoDiv {
        padding: var(--xMobilePadding);
        box-sizing: border-box;
    }
    /* li a i {
        max-width: 85vmin;
    } */
    .fab,
    .fas,
    .far {
        padding: 2vmin;
        font-size: 7vmin;
        color: var(--green);
    }
    /* __________Bio Section CSS ___________ */
    .sContactAside {
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-flow: row;
        /* align-content: center;
        justify-content: center; */
        gap: var(--xMobilePadding);
    }
    .sContactAside,
    .sHeadShotImg,
    .sBioHeader,
    .sVideoDiv,
    .gVideoDiv {
        width: calc(94%);
        grid-column: 1;
    }
    .sContactAside,
    .sVideo,
    .sVideoDiv,
    .gVideoDiv {
        width: calc(100%);
    }
    .sContactLogo {
        width: 86%;
    }
    .sContactLogoDiv {
        display: grid;
        justify-items: center;
    }
    .sVideoDiv {
        padding-bottom: 5vmin;
    }
    .sPortfolioSection,
    .sPortfolioItemImageLandscape,
    .sPortfolioItemImagePortrait {
        position: relative;
        width: calc(100%);
        /* height: calc(100vmin); */
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
        background-size: cover;
        border: .25px solid #a8acaf;
        box-sizing: border-box;
        overflow: hidden;
    }
    .sPortfolioSection {
        border: none;
        background-size: unset;
        justify-content: start start;
        grid-column: unset;
        grid-row: unset;
        order: unset;
        display: unset;
        grid-template-columns: unset;
        width: unset;
        width: 100%;
        gap: unset;
        grid-auto-flow: unset;
        justify-content: start;
        align-content: unset;
    }
    .sPortfolioItemsSlider {
        grid-column: unset;
        grid-row: unset;
        width: 100%;
        grid-template-columns: unset;
        grid-auto-rows: unset;
        gap: unset;
        width: 100%;
        grid-auto-flow: unset;
    }
    .sPortfolioItems {
        grid-column: unset;
        grid-row: unset;
        width: 100%;
        display: unset;
        grid-template-columns: unset;
        grid-auto-rows: unset;
        gap: unset;
        grid-auto-flow: unset;
    }
    .sPortfolioLandscapeArticle,
    .sPortfolioPortraitArticle {
        position: relative;
    }
    .sArticleActionsBack {
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 125;
        padding: 4vmin;
        padding-right: calc(13vmin);
        width: calc(12vmin);
        margin: 0 auto;
        max-width: calc((var(--yMobileThirds)/6));
        max-height: calc((var(--yMobileThirds)/2));
        background: rbg(52, 204, 140);
        background: rgba(52, 204, 140, 0.5);
        box-sizing: border-box;
    }
    .sPortfolioItemImageLandscape,
    .sPortfolioItemImagePortrait {
        width: calc(100%);
        height: calc(97vmin);
    }
    .sPortfolioLandscapeArticle {
        padding-left: 0vmin;
        padding-right: 0vmin;
        padding-bottom: 5vmin;
        box-sizing: border-box;
    }
    h3.sPortfolioTitleH3 {
        margin-top: 1.25vmin;
        padding-left: 3vmin;
        padding-right: 3vmin;
        box-sizing: border-box;
    }
    .pItemDescription {
        padding-left: 3vmin;
        padding-right: 3vmin;
        box-sizing: border-box;
    }
    footer {
        grid-column: 1/2;
        order: 10;
    }
    div.generalFooterFix {
        grid-column: 1 / 2;
        grid-row: 5;
    }
}