/*CSS RESET*/

* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}


a {
    text-decoration: none;
    color: inherit;
    display: block;
}

a.textLink {
    text-decoration: underline;
    display: inline;
}

img {
    display: block;
}


ul {
    list-style: none;
}

/*class used to stop animations during window resize*/
.resize-animation-stopper * {
  -webkit-animation: none !important;
          animation: none !important;
  -webkit-transition: none !important;
  transition: none !important;
}

/*******************************************************/



/*RESPONSIVE REM UNIT CONTROL*/

html {
    font-size: 14px;
}

.topNav > a {
    font-size: 1.5rem;
    line-height: 2rem;
    text-transform: uppercase;
    letter-spacing: .25rem;
    font-weight: bold;
}

.subNav {
    font-size: 1.2rem;
    line-height: 1.5rem;
}

@media screen and (min-width:1820px) {
    html {
        font-size: 16px;
    }
}


@media screen and (max-width: 1200px) {
    html {
        font-size: 12px;
    }
    
    #navBar.topNav {
        font-size: 1.8rem;
    }
    
    .subNav {
        font-size: 1.6rem;
        line-height: 2.4rem;
    }
}


@media screen and (max-width: 900px) {
    html {
        font-size: 9px;
    }
    
    .topNav {
        font-size: 2rem;
        line-height: 2.2rem;
        letter-spacing: .1rem;
    }
    
    .subNav {
        font-size: 1.6rem;
        line-height: 2.6rem;
    }
    
    #contacts a.btn {
        display: flex;
        justify-content: space-around;
        max-width: 12rem;
    }
    
    #cv {
        line-height: 10rem;
        height: 10rem;
    }
}


@media screen and (max-width: 560px) {
    html {
        font-size: 7.5px;
    }
    
    .topNav >a {
        font-size: 1.8rem;
        line-height: 2rem;
        letter-spacing: normal;
        font-weight: normal;
        text-transform: capitalize;
    }
    
    .subNav {
        font-size: 1.8rem;
        line-height: 3rem;
    }
    
}

/*******************************************************/

/*NAV BAR*/
header {
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: #000;
    z-index:80;
}

nav ul {
    display:flex;
    justify-content: space-around;
    color: #fff;
    font-family: "interstate";
}

.topNav, .subNav li a { 
    transition: color 0.3s; 
}
.topNav:hover {
    color: #ffff00;
}

.subNav {
    position: absolute;
    margin-left: -1rem;
    height: 0;
    overflow: hidden;
    display: block;
    background-color: rgba(0, 0, 0, 0.8);
    background-image: url(images/screen.gif);
}

.subNav li {
    display: block;
    padding: 1rem;
    font-weight: normal;
    letter-spacing: normal;
}

.subNav li:first-of-type {
    padding-top: 1.5rem;
}

.subNav li:last-of-type {
    padding-bottom: 2rem;
}

.topNav:hover .subNav {
    height: auto;
/*    overflow: visible;*/
}

.subNav li, .subNav li a {
    display: block;
    color: #fff;
}

.subNav li a:hover {
    color: #ffff00;
}

/*UNIVERSAL RULES*/

html, body {
/*    height: 100vh;*/
    overflow: hidden;
    height: 100%;
    width: 100%;
}

body {
    background-color: #000;
    font-family: interstate, sans-serif;
    display: relative;
    position: fixed;
    height: 100%;
}

main {
    overflow-y: scroll;
    height: 100%;
    scroll-snap-type: mandatory;
    scroll-snap-points-y: repeat(100%);
    -webkit-scroll-snap-type: y mandatory;
    -ms-scroll-snap-type: y mandatory;
    scroll-snap-type: y mandatory;
}


section {
    height: 100%;
    background-color: #000;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-line-pack: end;
    align-content: flex-end;
    overflow: hidden;
}


.preview {
    background-color: #000;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    height: 100%;
    position: relative;
    overflow: hidden;
    opacity: 1;
}


.preview.pinLL {
    background-position: bottom left;
}

.item.pinLM {
    background-position: bottom center;
}


.screen {
    background-image: url(images/screen.gif);
    width: 100%;
    height: 100%;
    position: absolute;
}


.caption {
    width: 40%;
    position: relative;
    color: #fff;
    height: inherit;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-content: flex-start;
    flex-direction: column-reverse;
    height: 100%;
    -webkit-transition: flex-grow 0.4s, -webkit-box-flex 0.4s;
    transition: flex-grow 0.4s, -webkit-box-flex 0.4s;
    transition: flex-grow 0.4s;
    transition: flex-grow 0.4s, -webkit-box-flex 0.4s, -ms-flex-positive 0.4s;
}

.caption .box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-line-pack: end;
        align-content: flex-end;
    border-top: .1rem solid #ffff00;
/*    padding-bottom: 2rem;*/
    cursor: pointer;
}


.caption h2 {
    color: #fff;
    text-align: left;
    font-size: 12rem;
    line-height: 9rem;
    letter-spacing: -1rem;
    text-transform: uppercase;
    word-break: break-word;
    padding-bottom: 1rem;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}


.caption h2.long {
    font-size: 9rem;
    letter-spacing: -0.7rem;
    line-height: 6.8rem
}


#station h2 {
/*    white-space: nowrap;*/
}


.caption .subtext {
    width: 80%;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}


.caption .subtext h3 {
    padding-top: 1.2rem;
    font-size: 1.8rem;
/*    font-style: oblique;*/
    margin-left: 0.8rem;
    line-height: 2.4rem;
/*    font-weight: 400;*/
/*    letter-spacing: 0.2rem;*/
}


.caption .subtext p {
    padding-top: .75rem;
    font-size: 1.5rem;
    padding-bottom: 1rem;
    margin-left: 0.8rem;
}


.caption .content {
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    overflow: hidden;
    opacity: 0;
    -webkit-transition: flex-grow 0.4s, opacity 0.4s, -webkit-box-flex 0.4s;
    transition: flex-grow 0.4s, opacity 0.4s, -webkit-box-flex 0.4s;
    transition: flex-grow 0.4s, opacity 0.4s;
    transition: flex-grow 0.4s, opacity 0.4s, -webkit-box-flex 0.4s, -ms-flex-positive 0.4s;
    -ms-flex-preferred-size: 0%;
        flex-basis: 0%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0 0 0 .5rem;
}


.caption .content .description {
    height: 0;
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -webkit-transition: flex-grow 0.4s height 0.4s margin-top 0.4s, -webkit-box-flex 0.4s height 0.4s margin-top 0.4s;
    transition: flex-grow 0.4s height 0.4s margin-top 0.4s, -webkit-box-flex 0.4s height 0.4s margin-top 0.4s;
    transition: flex-grow 0.4s height 0.4s margin-top 0.4s;
    transition: flex-grow 0.4s height 0.4s margin-top 0.4s, -webkit-box-flex 0.4s height 0.4s margin-top 0.4s, -ms-flex-positive 0.4s height 0.4s margin-top 0.4s;
    margin-top: 0rem;
    font-size: 1.4rem;
    line-height: 2rem;
}


.caption .content .gal {
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    height: 0;
    padding: 0;
    -webkit-transition: flex-grow 0.4s, height 0.4s, -webkit-box-flex 0.4s;
    transition: flex-grow 0.4s, height 0.4s, -webkit-box-flex 0.4s;
    transition: flex-grow 0.4s, height 0.4s;
    transition: flex-grow 0.4s, height 0.4s, -webkit-box-flex 0.4s, -ms-flex-positive 0.4s;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}


/*******************************************************/



/*UNIVERSAL STYLES FOR EXPANDED GALLERY/COLLAPSED PREVIEW*/

.preview.collapsed {
    width: 8%;
    height: 100%;
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    opacity: 0.7;
}


.preview.collapsed ~ .caption .content {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    opacity: 1;
}


.preview.collapsed ~ .caption .content .description {
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    margin-top: 3rem;
}


.preview.collapsed ~ .caption .content .gal {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
}

/*******************************************************/



/*SPLASH IMAGES FOR .PREVIEW ELEMENTS*/
#waver .preview {
    background-image: url(images/waver_splash.webp);
}

.no-webp #waver .preview {
    background-image: url(images/waver_splash.gif);
}

#tat .preview {
    background-image: url(images/tat_splash.webp);
}

.no-webp #tat .preview {
    background-image: url(images/tat_splash.gif);
}

#builders .preview {
    background-image: url(images/builders_splash.webp);
}

.no-webp #builders .preview {
    background-image: url(images/builders_splash.gif);
}


#sprites .preview {
    background-image: url(images/sprite_splash.webp);
}

.no-webp #sprites .preview {
    background-image: url(images/sprite_splash.gif);
}


#diamond .preview {
    background-image: url(images/diamond-worn.webp);
    -webkit-filter: saturate(0.9) brightness(1.4);
            filter: saturate(0.9) brightness(1.4);
}

.no-webp #diamond .preview {
    background-image: url(images/diamond-worn.gif);
    -webkit-filter: saturate(0.9) brightness(1.4);
            filter: saturate(0.9) brightness(1.4);
}

#tryme .preview {
    background-image: url(images/tryme_splash.webp);
}

.no-webp #tryme .preview {
    background-image: url(images/tryme_splash.gif);
}

#imask .preview {
    background-image: url(images/imask_splash.webp);
    
    -webkit-filter: saturate(1.1) brightness(1.02) contrast(1.03);
            filter: saturate(1.1) brightness(1.02) contrast(1.03);
}

.no-webp #imask .preview {
    background-image: url(images/imask_splash.gif);
}


#yah .preview {
    background-image: url(images/yah_splash.webp);
}

.no-webp #yah .preview {
    background-image: url(images/yah_splash.gif);
}


#ball .preview {
    background-image: url(images/ball_splash.webp);
    -webkit-filter: contrast(1.04) brightness(1.05);
            filter: contrast(1.04) brightness(1.05);
}

.no-webp #ball .preview {
    background-image: url(images/ball_splash.gif);
}


#station .preview {
    background-image: url(images/station_splash.webp);
    -webkit-filter: contrast(1.02) brightness(1.02);
            filter: contrast(1.02) brightness(1.02);
}

.no-webp #station .preview {
    background-image: url(images/station_splash.gif);
}


#mandala .preview {
    background-image: url(images/mandala_splash.webp);
    -webkit-filter: saturate(1.17) brightness(1.05);
            filter: saturate(1.17) brightness(1.05);
}

.no-webp #mandala .preview {
    background-image: url(images/mandala_splash.gif);
}


#mask1 .preview {
    background-image: url(images/m4lsc_splash.webp);
    -webkit-filter: brightness(1.04) contrast(1.04) saturate(1.02);
            filter: brightness(1.04) contrast(1.04) saturate(1.02);
}

.no-webp #mask1 .preview {
    background-image: url(images/m4lsc_splash.gif);
}


#voices .preview {
    background-image: url(images/voices_splash.webp);
    -webkit-filter: saturate(1.17) brightness(1.03);
            filter: saturate(1.17) brightness(1.03);
}

.no-webp #voices .preview {
    background-image: url(images/voices_splash.gif);
}


#ornaments .preview {
    background-image: url(images/ornament_splash.webp);
}

.no-webp #ornaments .preview {
    background-image: url(images/ornament_splash.gif);
}


#ironclad .preview {
    background-image: url(images/ironclad_splash.webp);
}

.no-webp #ironclad .preview {
    background-image: url(images/ironclad_splash.gif);
}


#perimeter .preview {
    background-image: url(images/perimeter_splash.webp);
}

.no-webp #perimeter .preview {
    background-image: url(images/perimeter_splash.gif);
}


#stockpile .preview {
    background-image: url(images/stockpile_splash.webp);
}

.no-webp #stockpile .preview {
    background-image: url(images/stockpile_splash.gif);
}


#kink .preview {
    background-image: url(images/kink_splash.webp);
}

.no-webp #kink .preview {
    background-image: url(images/kink_splash.gif);
}


#stairwell .preview {
    background-image: url(images/stairwell_splash.webp);
    filter: brightness(1.3);
}

.no-webp #stairwell .preview {
    background-image: url(images/stairwell_splash.gif);
}


#bio .preview {
    background-image: url(images/working-crop.webp);
            -webkit-filter: saturate(0) contrast(6.0);
            filter: saturate(0) contrast(6.0);
}

.no-webp #bio .preview {
    background-image: url(images/working-crop.gif);
}


/*******************************************************/



/*BIO/ABOUT PAGE*/

section#bio {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}


#bio .preview {
    background-position: center bottom;
/*    position: absolute;*/
    width: 100%;
}


#bio .content {
/*    position: absolute;*/
    width: 100%;
/*    margin-left: 15%;*/
    color: #fff;
    background-color: #000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    top: calc(50% - 6.5rem);
    padding: 1.5rem 0 3rem 0;
/*    height: 20%;*/
}


#bio .content h2 {
    font-size: 10rem;
    padding: 1rem 2rem;
    -webkit-writing-mode: vertical-lr;
        -ms-writing-mode: tb-lr;
            writing-mode: vertical-lr;
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
    text-align: center;
}


#info {
    border-left: .1rem solid #ffff00;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 1rem 5rem 1rem 3rem;
}

#bio .content .description {
    font-size: 1.4rem;
    line-height: 1.8rem;
    padding-right: 3rem;
}

#bio .content .description a {
/*    display: inline;*/
}


#contacts {
    width: 12rem;
    height: inherit;
}

#cv {
    text-align: center;
    font-size: 1.9rem;
    margin-top: 1.5rem;
    color:#ffff00;
    font-weight: bold;
    text-decoration: underline;
    height: 1.9rem;
    text-transform: uppercase;
}

#contacts a.btn {
    display: block;
    height: 10rem;
    margin-top: 1.5rem;
    width: inherit;
    cursor: pointer;
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
}


#contacts a:first-of-type {
/*    margin-top: 0;*/
}


#contacts a svg {
    stroke-width: .07rem;
    width: inherit;
}


#contacts a svg polyline {
    stroke: #ffff00;
    stroke-width: .07rem;
}

#contacts a:hover {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
}



/*CONTACT PAGE*/

#contact .content {
/*    width: 50rem;*/
    margin: 16rem auto auto;
    color: #fff;
    border-top: 1px #ffff00 solid;
    border-bottom: 1px #ffff00 solid;
    text-align: center;
    position: relative;
/*    background-image: url(images/contact_bg.gif);*/
/*    background-repeat: no-repeat;*/
/*    background-attachment: fixed;*/
/*    background-position: center center;*/
/*    background-size: cover;*/
}

#contact .content h2 {
    font-size: 8rem;
    text-transform: uppercase;
    letter-spacing: 0.25rem;
/*    color: #ffff00;*/
/*    background-color: black;*/
    padding: 2.5rem 0 1rem 0;
}

#contact .content a {
    display: inline-block;
    text-decoration: underline;
    color: #ffff00;
}

#contact ul {
    font-size: 1.6rem;
    letter-spacing: .1rem;
    margin: 1.5rem 0 0 0;
    padding: 0;
}

#contact ul li {
    padding-bottom: 2rem;
}

#contact ul li:last-of-type {
    padding-bottom: 5rem;
}

#contact .finePrint {
    color: #333;
    width: 100%;
    font-size: 1.2rem;
    position: relative;
    bottom: 1.5rem;
    left: 0;
}
/*******************************************************/



/*EXPAND/COLLAPSE BUTTON*/

.btn.expand {
/*    background-color: #000;*/
    display: block;
    cursor: pointer;
    width: 20%;
}


.btn.expand .arrow {
    width: 100%;
    height: 100%;
    background-color: #000;
}


.btn.expand .arrow line {
    stroke: rgb(255,255,0);
    stroke-width: 1;
}

/*******************************************************/



/*SCREEN ORIENTATION-SPECIFIC RULES*/

/*----------landscape----------*/

@media screen and (orientation:landscape){
    
    .preview {
        -webkit-transition: flex-grow 0.4s, width 0.4s, opacity 0.4s, -webkit-box-flex 0.4s;
        transition: flex-grow 0.4s, width 0.4s, opacity 0.4s, -webkit-box-flex 0.4s;
        transition: flex-grow 0.4s, width 0.4s, opacity 0.4s;
        transition: flex-grow 0.4s, width 0.4s, opacity 0.4s, -webkit-box-flex 0.4s, -ms-flex-positive 0.4s;
    }
    
    
    .preview.collapsed ~ .caption {
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
    }
    
    
    .preview.collapsed ~ .caption h2, .preview.collapsed ~ .caption h2.long {
        font-size: 6rem;
        line-height: 5rem;
        letter-spacing: -.42rem;
        padding-left: .5rem;
        padding-bottom: 0.25rem;
    }
    
    
    .caption h2 {
        -webkit-transition: font-size 0.4s, line-height 0.4s, letter-spacing 0.4s, padding 0.4s;
        transition: font-size 0.4s, line-height 0.4s, letter-spacing 0.4s, padding 0.4s;
    }   
    /* This transition rule is inside this @media query so that when the orientation of the page changes, this element doesn't animate its change to the alternate styles   */
    
    
    .caption .content {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
    }

    
    .caption .content .description {
        -ms-flex-preferred-size: 40%;
            flex-basis: 40%;
        text-align: left;
        margin-right: 1.5rem;
        margin-left: 1rem;
/*        flex-basis: 100%;*/
    }
    
    
    .preview.collapsed ~ .caption .content .description {
        height:auto;
    }
    
    
    .caption .content .gal {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
/*        flex-basis: 50%;*/
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        height: 100%;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -ms-flex-line-pack: start;
            align-content: flex-start;
        margin: 2rem 0 0 0;
    }
    
    
    .gal .item {
        margin: .5rem .5rem 0 0;
        -ms-flex-preferred-size: calc(50% - .75rem);
            flex-basis: calc(50% - .75rem);
        height: calc(33% - 1rem);
        background-color: aliceblue;
    }

    
    .gal .item:first-child:nth-last-child(1) {
        -ms-flex-preferred-size: calc(100% - 1rem);
            flex-basis: calc(100% - 1rem);
        height: auto;
    }
    
    
    .gal .item:first-child:nth-last-child(2), .gal .item:first-child:nth-last-child(2) ~ .item {
        -ms-flex-preferred-size: calc(100% - 1rem);
            flex-basis: calc(100% - 1rem);
        height: calc(50% - .75rem)
    }
    
    .gal .item:first-child:nth-last-child(4), .gal .item:first-child:nth-last-child(4) ~ .item, .gal .item:first-child:nth-last-child(3), .gal .item:first-child:nth-last-child(3) ~ .item {
        -ms-flex-preferred-size: calc(50% - .75rem);
            flex-basis: calc(50% - .75rem);
        height: calc(50% - .75rem);
    }
    
    
    .player {
        margin: 1em;
    }
    
    
    #bio .preview {
        height: 0;
    }
    
    
    /*swap out text in bio depending on screen orientation*/
    #ls {
        display: inline;
    }
    
    #pt {
        display: none;
    }
    
}

/*----------portrait----------*/

@media screen and (orientation:portrait){
    
    html { font-size: 9px; }
    
    section {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -ms-flex-line-pack: end;
            align-content: flex-end;
    }
    
    
    .preview {
        width: 100%;
/*        height: 70%;*/
        -webkit-transition: flex-grow 0.4s, height 0.4s, opacity 0.4s, -webkit-box-flex 0.4s;
        transition: flex-grow 0.4s, height 0.4s, opacity 0.4s, -webkit-box-flex 0.4s;
        transition: flex-grow 0.4s, height 0.4s, opacity 0.4s;
        transition: flex-grow 0.4s, height 0.4s, opacity 0.4s, -webkit-box-flex 0.4s, -ms-flex-positive 0.4s;
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
    }
    
    
    .caption {
        width: 100%;
        height: auto;
        -webkit-box-flex: 0;
            -ms-flex-positive: 0;
                flex-grow: 0;
    }
    
    
    .caption h2 {
        text-align: left;
        padding-bottom: 1.5rem;
        padding-top: 1.25rem;
        padding-left: .5rem;
        margin-right: 1rem;
        -webkit-transition: font-size 0.4s, line-height 0.4s, letter-spacing 0.4s, padding 0.4s;
        transition: font-size 0.4s, line-height 0.4s, letter-spacing 0.4s, padding 0.4s;
    }
    
    
    .caption .box {
        padding-top: .5rem;
        padding-bottom: 1rem;
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-line-pack: end;
            align-content: flex-end;
    }
        
    .caption .subtext {
        height: 10rem;
    }
    
    .caption .subtext h3 {
        font-size: 2.7rem;
        margin: 0 0 0 1.6rem;
    }
    
    
    .caption .subtext p {
        font-size: 2rem;
        margin: 0 0 0 1.6rem;
    }
    
    
    .caption .content {
        -ms-flex-flow: column;
            flex-flow: column;
    }
    
    
    .caption .content .description {
        margin: 0 1rem;
        font-size: 1.4rem;
        line-height: 1.8rem;
        -webkit-transition: height .4s;
        transition: height .4s;
        height: 0;
    }

    
    .caption .content .gal {
        margin: 0;
        -webkit-transition: margin-top 0.3s;
        transition: margin-top 0.3s;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -ms-flex-line-pack: start;
            align-content: flex-start;
    }
    
    
    .gal .item {
        -ms-flex-preferred-size: calc(33% - 1rem);
            flex-basis: calc(33% - 1rem);
        background-color: aliceblue;
        margin: 1rem 0.5rem 0 0.5rem;
        height: calc(50% - .5rem);
    }
    
    
    .gal .item:first-child:nth-last-child(1) {
        -ms-flex-preferred-size: calc(100% - 1.5rem);
            flex-basis: calc(100% - 1.5rem);
        height: auto;
    }
    
    
    .gal .item:first-child:nth-last-child(2), .gal .item:first-child:nth-last-child(2) ~ .item {
        -ms-flex-preferred-size: calc(50% - 1rem);
            flex-basis: calc(50% - 1rem);
        height: calc(100% - 1rem);
    }
    
    
    .gal .item:first-child:nth-last-child(4), .gal .item:first-child:nth-last-child(4) ~ .item, .gal .item:first-child:nth-last-child(3), .gal .item:first-child:nth-last-child(3) ~ .item {
        -ms-flex-preferred-size: calc(50% - 1rem);
            flex-basis: calc(50% - 1rem);
        height: calc(50% - 1rem);
    }
    
    
    .player {
        margin: 1rem;
        width: 100%;
    }
    
    
    .caption .subtext {
        width: 85%;
    }
    
    
    .btn.expand {
        height: 10rem;
        width: 15%;
        margin-top: 0.25rem;
    }
    
    
    
    #info {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        padding-right: 3rem;
    }
    
    #bio .content .description {
        font-size: 1.4rem;
        line-height: 1.8rem;
        padding-right: 0;
    }
    
    
    #bio .content h2 {
        padding-right: 1rem;
    }
    
    
    #contacts {
        margin-top: 3rem;
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-align: stretch;
            -ms-flex-align: stretch;
                align-items: stretch;
    }
    
    #contacts a {
        width: 14rem;
        margin-top: 0;
        margin-left: 2rem;
        height: 10rem;
    }
    
    
    #contacts a:first-of-type {
        margin-left: calc(50% - 19rem)
    }
    
    
    #contacts a svg {
        stroke-width: 0.1rem;
    }
    
    #contacts a svg polyline {
        stroke-width: 0.1rem;
    }
    
    
    /*swap out text in bio depending on screen orientation*/
    #ls {
        display: none;
    }
    
    #pt {
        display: inline;
    }
    
    
    /*collapsed preview/expanded gallery:*/
    
    .preview.collapsed {
        height: 4%;
        width: 100%;
        -webkit-box-flex: 0;
            -ms-flex-positive: 0;
                flex-grow: 0;
    }
    
    
    .preview.collapsed ~ .caption {
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
    }
    
    
    /*chunk below shrinks text on gallery expand - decided (8-13) that this isn't necessary*/
    .preview.collapsed ~ .caption h2, .preview.collapsed ~ .caption h2.long {
        font-size: 5rem;
        line-height: 3.9rem;
        letter-spacing: -.35rem;
        padding-left: 1.2rem;
        padding-bottom: 1rem;
    }
    
        
    .preview.collapsed ~ .caption .content .description {
        height: auto;
        margin-top: 1.25rem;
    }
    
    
    .preview.collapsed ~ .caption .content .gal {
        margin: 1rem 1rem 0 0.5rem;
    }
    
    
}

/*******************************************************/