/*======== PHONES ============ */
@media screen and (max-device-width: 813px) and (orientation : portrait)  {

    body{
        width: 100vw;
        height: 100vh;
        font-size: 190%;
    }

    h5 {
        font-size: .9em;
    }

    h1 {
        font-size: 3em;
    }

    .side-line {
        display: none;
    }

    p {
        line-height: 120%;
        font-size: 1em;
    }

    ol {
        font-size: 1em;
    }

    .mobile-hide {
        display: block;
    }

    nav {
        position: absolute;
        margin: 34vh auto auto 60px;
        border-left: solid 5px #90847C;
        cursor: pointer !important;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .navCircle {
        margin-left: -2.5vw;
        margin-top: 2vh;
        width: 3vw;
        height: 3vw;
        border: solid 5px #90847C;
        border-radius: 3vw;
        cursor: pointer;
    }

    .footer-text {
        height: auto;
        width: 70%;
        margin: 10% 15% 0px 15%;
    }

    .footer-text p, .footerLinks {
        float: none;
        width: 100%;
        text-align: center;
    }

    .footer-text p {
        margin-right: 0%;
    }

    .footerLinks {
        margin-left: 0%;
        margin-top: 10%;
    }

    footer .social {
        display: grid;
        grid-template-columns: 30% 30%;
        grid-column-gap: 40%;
        width: 20%;
    }

    button {
        border: solid 6px #68B0FF;
        width: 35vw;
        height: 9vh;
    }

    #resume-button {
        margin-right: 1.5vw;
    }

    #contact-button {
        margin-left: 1.5vw;
    }

    #hub-card-container, #hub {
        flex-direction: column;
        row-gap: 24px;
        height: 100%;
    }

    .hub-card {
        flex: 1;
        height: 70vh;
        max-height: none;
        min-height: none;
        width: 100%;
    }

    .hub-card p {
        font-size: 2em;
    }

    #home-intro {
        height: 100vh;
        flex-direction: column;
        text-align: center;
    }

    #home-intro-col1 {
        margin-top: 0px;
    }

    #home-intro-col1 div {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;        
    }

    #home-intro h1, #hub h1 {
        writing-mode: horizontal-tb;
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    #home-intro h1 {
        margin-left: 0px;
        margin-bottom: 0px;
        text-shadow:
            -2px -2px 0 none,  
            2px -2px 0 none,
            -2px 2px 0 none,
            2px 2px 0 none;
    }

    #home-intro-col1, #home-intro-col2  {
        width: 70%;
        float: none;
    }

    #home-intro-col1 {
        margin-right: 0px;
    }

    #home-intro-col2 {
        position: relative;
    }

    #home-intro-col2 > div {
        margin-top: 5vh;
    }

    .title-highlight {
        margin-top: -40px;
    }

    .project-block h2:focus div{
        height: 40px;
    }

    .project-block {
        display: inline-block;
    }

    #project-section {
        /*margin-top: 50vh;*/
    }

    #bl-1{
        margin-left: 20vw;
        z-index: -1;
    }

    #bl-2{
        margin-left: 50vw;
        z-index: -1;
    }

    #bl-3{
        margin-left: 80vw;
        z-index: -1;
    }

    .project-block img{
        max-width: 90%;
        width: 90%;
        max-height: 60vh;
    }

    #blob-canvas {
        display: none;
        left: 21vw;
        width: 79vw;
        height: 50vh;
        margin-top: 0px;
        background: white; /*#F4F1EF*/
        pointer-events: all;
        touch-action: auto;
        border-bottom: solid 2px #F4F1EF;
    }

    .mob-blob-container {
        align-items: center;
        display: flex;
        justify-content: center;
    }

    .mob-blob {
        display: block;
        background-position: top;
        background-size: cover;
        animation: morph 4s ease-in-out infinite;
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
        height: 50vh;
        width: 65vw;
        z-index: 2;
    }
    
    .mob-blob-container h2 {
        position: absolute;
        color: white;
        text-align: center;
        width: 70vw;
        z-index: 2;
        margin-top: -20%; 
        mix-blend-mode: difference;
    }
    
    .mob-blob-container h2 a {
        position: absolute;
        color: white;
        text-align: center;
        top: 0px;
        margin-top: 0px;
        left: 0px;
        z-index: 2;
        mix-blend-mode: difference;
    }
    
    .proj-images-blob {
        display: none;
    }

    @keyframes morph {
        0% {
            border-radius:  60% 40% 30% 70% / 60% 30% 70% 40%;
        } 

        50% {
            border-radius:  30% 60% 70% 40% / 50% 60% 30% 60%;
        }

        100% {
            border-radius:  60% 40% 30% 70% / 60% 30% 70% 40%;
        } 
    }

    .project-info {
        margin-top: 5%;
        width: 95%;
        float: left;
        display: inline-block;
    }

    .menu-blob {
        display: block;
        width: 60px;
        position: relative;
        z-index: 3;
    }

    .mob-menu {
        display: none;
        background: rgba(244, 241, 239, .95);
        width: 100vw;
        height: 100vh;
        position: fixed;
        text-align: center;
        z-index: 4;
        top: 0px;
        left: 0px;
    }

    .menuSlideDown {
        display: block;
        animation: menuSlideDown .5s ease-in-out;
    }

    .menuSlideUp {
        display: block;
        animation: menuSlideUp .5s ease-in-out;
    }

    .mob-menu .close {
        width: 75px;
        height: 75px;
    }

    .mob-menu .closeLines {
        height: 5px;
    }

    .mob-menu .list{
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding: 5% 5% 10% 5%;
        font-size: 1.1em;
        overflow: scroll;
        width: 100%;
    }

    .mob-menu-s, .mob-menu-s a {
        color: #90847C;
    }



    @-webkit-keyframes menuSlideDown {
        from {-webkit-filter: opacity(0.1);
            -webkit-transform: translateY(-700px); 
        } 
        to {-webkit-filter: opacity(1);
            -webkit-transform: translateY(0px);
        }
    }

    @keyframes menuSlideDown {
        from {filter:opacity(.1);
            transform: translateY(-700px);
        } 
        to {filter:opacity(1);
            transform: translateY(0px);
        }
    }

    @-webkit-keyframes menuSlideUp {
        from {-webkit-filter: opacity(1);
            -webkit-transform: translateY(0px);
        } 
        to {-webkit-filter: opacity(0.1);
            -webkit-transform: translateY(-700px);
        }
    }

    @keyframes menuSlideUp {
        from {filter:opacity(1);
            transform: translateY(0px);
        } 
        to {filter:opacity(0);
            transform: translateY(-700px);
        }
    }

    .project-home {
        padding: 0% 32px 0px 32px;
        top: 2vh;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .project-home a {
        width: 60vw;
        justify-content: space-between;
    }

    .project-home a img {
        width: 60px;
    }    

    .project-prev, .project-next {
        display: none;
    }

    /*
    .project-next .arrows-v, .project-prev .arrows-v{
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

    .project-prev h3, .project-next h3 {
    display: none;
}

    .project-prev {
    height: auto;
    top: 2.5vh;
    left: 11vw;
}

    .project-next {
    height: auto;
    top: 2.5vh;
    right: 11vw;
}

    */

    .mobile-title-name {
        display: block;
        width: 100vw;
        text-align: center;
        position: fixed;
        margin-top: 0px;
        top: 2.5vh;
        z-index: 2;
        font-size: 1.3em;
    }

    .project-category {
        text-align: center;
    }

    .project-header {
        width: 100vw;
        position: relative;
        margin: 5vh 0px 5vh 0px;
        padding: 0px;
    }

    .project-header div {
        margin-top: 24px;
    }

    .project-header h1 {
        margin: 0px;
        padding: 0px;
        max-width: 80vw;
        display: inline-block;   
    }

    #wwt-h1, #misc-h1 {
        font-size: 2.5em;
    }

    .project-header img {
        position: relative;
        display: block;
        z-index: 0;
    }

    .blob {
        max-width: 95%;
    }

    .project-link {
        font-size: 1.6em;
    }

    .project-meat {
        padding-top: 96px;
    }

    .project-meat > p, .project-meat > ol, .project-meat > .proj-desc  {
        width: 70vw;
        margin: 2.5vh 15vw;
    }

    .project-meat > img, .project-meat > video {
        /*width: 70vw;*/
        margin: 2.5vh 15vw;
    }

    .proj-p-box {
        width: 70vw !important;
        margin: 2.5vh 10vw !important;
    }

    .proj-p-left {
        width: 70vw !important;
        margin: 2.5% 15% !important;
    }

    .proj-p-right {
        width: 70vw !important;
        margin: 2.5% 15% !important;
    }

    .proj-images-1 {

        background: #F4F1EF;
        display: block;
    }

    .proj-images-1 div {
        width: 70vw;
        margin: 0px 15vw;
        padding: 0px;
        display: grid;
        grid-template-columns: 70vw;
        grid-row-gap: 2vh;
    }

    .proj-images-1 div img {
        float: none;
        width: 100%;
    }

    .proj-images-2 {
        height: auto;
    }

    .proj-images-2 img {
        max-width: 95vw;
        height: auto;
    }

    .proj-images-2 div {
        width: 70vw;
        height: 95%;
        top: 0px;
        margin: 5% 15vw auto 15vw;
    }

    .proj-images-3 img, .proj-images-3 video {
        width: 70vw;
        margin: 0px 15vw;
    }

    .proj-images-4 {
        width: 70%;
        margin: 10% 15%;
        background: #F4F1EF;
    }

    .proj-images-4 img {
        width: 90%;
        padding: 0 5%;
        margin: 0%;
    }

    .proj-images-4 p {
        position: relative;
        height: auto;
        display: block;
        width: 90%;
        margin: auto;
        padding: 5%;
    }

    .proj-images-5 {
        width: 70%;
        margin: 10% 15%;
    }

    .proj-images-5 img {
        width: 90%;
        padding: 0 5%;
        margin-left: 0%;
    }

    .proj-images-5 > p, .proj-images-5 > div {
        position: relative;
        height: auto;
        display: block;
        width: 90%;
        margin: 0px;
        padding: 5%;
    }

    .proj-images-6 {
        width: 70%;
        margin: 15% 15%;
    }

    .proj-images-6 p {
        column-count: 1;
        width: 90%;
        margin: 0px 5%;
    }

    .proj-images-7 p {
        margin-top: -5%;
    }

    .proj-images-7 img {
        height: 40%;
    }

    .proj-images-8 {
        width: 70vw;
        margin: auto 15vw 5vh 15vw;
    }

    .proj-images-8 p{
        width: 80%;
        margin: 2% 10%;
    }

    .proj-images-8 img {
        width: 100vw;
        margin-left: -15vw;
    }

    .proj-images-9 {
        width: 70vw;
        margin: 2.5% 15vw 5% 15vw;
    }

    .proj-images-blob {
        padding: 0px;
        margin: auto 0px;
        width: 100vw;
    }

    .proj-images-blob img {
        width: 100vw;
        padding: 0px;
        margin: 0px;
    }

    .proj-images-blob h2 {
        width: 100vw;
        margin: auto 0px;
        padding: 0px;
        display: block;
        font-size: 1.3em;
        filter: opacity(1);
    }

    .proj-image-carousel {
        display: none;
    }

    .proj-image-carousel p {
        width: 70vw;
        margin: auto;
        font-size: 1em !important;
    }

    .center-slider img {
        height: auto;
        width: 70vw;
        max-width: 70vw;
    }

    .center-slider div {
        min-width: 50vw;
        width: 70vw;
    }

    .slick-slide {
        width: 70vw;
        max-width: 70vw;
    } 

    .back-to-galleries {
        font-size: 1.2em;
    }

    .gallery-page .project-header {
        margin-bottom: 2vh;
    }

    .proj-image-grid h1 {
        margin-top: -7vh;
        font-size: 170%;
    }

    .proj-image-grid {
        padding-top: 5vh;
        padding-bottom: 5vh;
    }

    .gallery-4 {
        grid-template-columns: 70vw;
        grid-auto-rows: 70vw;
        grid-row-gap: 2vh;
        margin: 0px 11.5vw auto 11.5vw;
    }

    .gallery-5 {
        width: 100vw;
        grid-template-columns: 33vw 33vw 33vw;
        grid-auto-rows: 33vw;
        grid-column-gap: .5vw;
        grid-row-gap: .5vw;
        margin: 0px;
    }

    .gallery-4 {
        width: 70vw;
        margin: 0px 15vw;
        padding: auto 0px;
    }

    .gallery-4 h2 {
        display: flex; 
    }

    .card-expanded {
        grid-column: span 4 !important;
        grid-row: span 4 !important;
    }

    .card:hover, .card:focus {
        filter: brightness(1) !important;
    }

    .modal-container {
        margin: 120px 0vw auto 0vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 70vh;
        width: 100vw;
    }

    .modal-content {
        height: auto;
        margin: 0px;
        max-width: 100%;
        max-height: 95%;
    }

    .modal-content img {
        max-height: 66.5vh;
        height: auto;
        width: auto;
        max-width: 100vw;
        object-fit: contain;
        pointer-events: none;
    }

    .caption {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 5%;
        margin: 0px;

    }

    .next{
        right: 3vw;
        top: 80vh;
        z-index: 5;
    }

    .previous{
        left: 3vw;
        top: 80vh;
        z-index: 5;
    }

    .caret {
        width: 100px;
        height: 100px;
    }

    .caret div {
        width: 50px;
        height: 5px;
    }


    .previous .lineAngled1, .next .lineAngled2{
        height: 6px;
        margin-top: 50px;
    }

    .previous .lineAngled2, .next .lineAngled1{
        margin-top: -60px;
        height: 6px;
    }

    .close {
        width: 75px;
        height: 75px;
    }

    .closeLines {
        height: 6px;
    }

    /*-------------- ARROWS ---------------*/
    .arrows-brown {
        display: block;
        height: 60px;
    }

    .arrows-brown .arrow {
        width: 60px;
        height: 60px;
        float: left;
        margin-right: -25px;
    }

    .arrows-brown .L1, .arrows-brown .L2{
        width: 60px;
        height: 7px;
        background: #E2D8CE;
        position: absolute;
    }

    .arrows-h .L2{
        margin-top: 35px;
    }

    .arrows-brown-2 {
        height: 60px;
    }

    .arrows-brown-2 .arrow {
        width: 60px;
        height: 60px;
        margin-top: -25px;
    }

    .arrows-brown-2 .L1, .arrows-brown-2 .L2{
        width: 60px;
        height: 6px;
    }

    .arrows-brown-2 .L2 {
        margin-left: 35px;
    }

    .arrows-v {
        height: 45px;
        width: auto;
    }

    .arrows-v .arrow {
        width: 45px;
        height: 45px;
    }

    .arrows-v .arrow {
        width: 45px;
        height: 45px;
        margin-top: -15px;
    }

    .arrows-v .L1, .arrows-v .L2{
        width: 45px;
        height: 6px;
        position: absolute;
    }

    .arrows-v .L2 {
        margin-left: 26px;
    }

}

/*---- Small Computer Screen ----*/

@media only screen and (max-width: 650px){
    body{
        width: 100%;
        height: 100%;
    }
}