/* =========================================================== GLOBAL */


::-webkit-scrollbar { 
    display: none; /* Chrome Safari */
    width: 0;
    height: 0;
}

.contentWrapper{
    padding-top: 5%;
    margin-left: 5vw;
    margin-right: 5vw;
    max-width: 2400px;
}


/* =========================================================== HEADER/FOOTER/NAVIGATION */

header, footer{
    margin: 0;
    width: 100%;
}

.bodyMe footer{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
}

.navLI{
    display: inline-block;
}


/* =========================================================== FULL SCREEN */

.fullScreen{
    min-height: 100vh;
}


/* =========================================================== ROW & FLEX */

.row{
    padding: 28px 120px;
    margin: -24px auto;
    width: 100%;
    max-width: 1500px;

    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
}
    
    .bodyZines .row{
        padding: 14px 120px;
    }

.rowText{
    padding: 120px !important;
}

    .bodyAbout .row{
        background-image: url('../images/shape-about.svg');
    }
    .bodyDesigns .row{
        background-image: url('../images/shape-designs.svg');
    }
    .bodyTeach .row{
        background-image: url('../images/shape-teach.svg');
    }
    .bodyZines .row{
        background-image: url('../images/shape-zines.svg');
    }

.container{
    display: flex;
    align-items: center;
    gap: 32px;
}

    .container .fontH1{
        flex: 1;
    }

    .container .fontBody{
        flex: 2;
    }


.bodyZines .row{
    display: flex;
    align-items: center;
}


/* =========================================================== PROJECT & ZINE CARDS */


.projectCard, .zineCard{
    margin: 40px 0;
}

.projectImage{
    min-height: 300px;
    height: 400px;
    max-height: 50vh;
    width: 100%;

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

#sas34 .projectImage{
    background-image: url('../images/designs/sas34.jpg');
}

#sabai .projectImage{
    background-image: url('../images/designs/sabai.jpg');
}

#cosmorama .projectImage{
    background-image: url('../images/designs/cosmorama.jpg');
    background-repeat: repeat;
    background-size: 500px;
    background-position: center -14vh;
}

#native .projectImage{
    background-image: url('../images/designs/native.jpg');
}

#sia .projectImage{
    background-image: url('../images/designs/sia.jpg');
}

#signal .projectImage{
    background-image: url('../images/designs/signal.gif');
    background-repeat: repeat;
    background-size: 400px auto;
    background-position: center -14vh;
}

#soma .projectImage{
    background-image: url('../images/designs/soma.jpg');
}

#gershon .projectImage{
    background-image: url('../images/designs/gershon.jpg');
}

#emo .projectImage{
    background-image: url('../images/designs/emo.gif');
    background-repeat: repeat;
    background-size: auto;
    background-position: center -14vh;
}

.zineCard{
    border-radius: 50vh;
    padding: 0 32px;
}



/* =========================================================== PROJECTS */


.projectTitleIMG75{
    width: 75%;
    margin: 0 auto;
}
.projectTitleIMG50{
    width: 50%;
    margin: 0 auto;
}

.projectBGwhite{
    background-color: #F2F4F7;
    padding: 2em 1em;
}


.projectBG{
    background-color: #F2F4F7;
    background-size: auto 90vh;
    background-repeat: repeat-x;
    background-position: top center;
}
.projectBG .contentWrapper{
    padding-top: 5%;
}

.projectImgTop{
    padding-top: 3%;
}


.BGsignaltonoise{
    background-image: url('../images/signaltonoise/landingBG.jpeg');
}


.BGemotional{
    background-image: url('../images/emotional/landingBG.jpeg');
}
.BGemotionalColor{
    background-color: #FFFFFF;
}
.BGemotionalColor .BGemotionalColor{
    padding: 2em 1em;
}
.BGemotionalBorder{
    border: 3px solid #000;
}
.emotionalLanding{
    position: absolute;
    width: 54.5%;
    top: 17.5%;
    left: 22%;
}


.BGdoremi{
    background-image: url('../images/doremi/landingBG.jpeg');
}
.BGdoremiColor{
    background-color: #fff6de;
    
}
.BGdoremiColor .BGdoremiColor{
    padding: 2em 1em;
}
.doremiNPC{
    background-image: url('../images/doremi/NPCsBG.jpeg');
}
.videoDOREMI{
    overflow: hidden;
    border-radius: 40px; 
}


.BGtaiso{
    background-image: url('../images/taiso/landingBG.png');
}
.BGtaisoColor{
    background-color: #fffaf2;
}


.BGrhea{
    background-image: url('../images/rhea/landingBG.png');
}


.BGnative{
    background-image: url('../images/native/landingBG.jpeg');
}


.BGboco{
    background-image: url('../images/boco/landingBG.jpeg');
}


.BG21svgColor{
    background-color: #ffbd14;
    background-image: url('../images/21svg/landingBG.png');
    background-size: contain;
}
.SVGburst{
    position: absolute;
    z-index: -1;
    animation: rotate 180s infinite linear;
}
@keyframes rotate {
  from { 
            transform: rotate(0deg); 
        } to { 
            transform: rotate(360deg); 
        }
}
.BG21svgColor a img{
    opacity: 100%;
    transition: opacity .25s;
    -o-transition: opacity .25s;
    -moz-transition: opacity .25s;
    -webkit-transition: opacity .25s;
}
.BG21svgColor a:hover img{
    opacity: 65%;
    transition: opacity .25s;
    -o-transition: opacity .25s;
    -moz-transition: opacity .25s;
    -webkit-transition: opacity .25s;
}


.BGsplit{
    background-image: url('../images/split/landingBG.jpg');
    background-size: contain;
    background-color: #fff;
}


.BGreflections{
    background-image: url('https://marisawatanabe.com/projects/reflections/images/background.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-color: #ebe4db;
}
.BGreflections a img{
    border: 2px solid #fff;
    filter: drop-shadow(5px 5px 5px rgba(0,0,0,.25));
    opacity: 50%;
    transition: opacity .25s;
    -o-transition: opacity .25s;
    -moz-transition: opacity .25s;
    -webkit-transition: opacity .25s;
}
.BGreflections a:hover img{
    opacity: 100%;
    transition: opacity .25s;
    -o-transition: opacity .25s;
    -moz-transition: opacity .25s;
    -webkit-transition: opacity .25s;
}


.BGsoma{
    background-image: url('../images/soma/pattern.jpg');
    background-size: contain;
    background-color: #fff;
}




/* =========================================================== WIDTHS */

.imgFullWidth{
    width: 100%;
    padding: 0;
}

.width10{
    width: 10%;
    margin: 0 auto;
}
.width25{
    width: 25%;
    margin: 0 auto;
}
.width35{
    width: 35%;
    margin: 0 auto;
}
.width50{
    width: 50%;
    margin: 0 auto;
}
.width60{
    width: 60%;
    margin: 0 auto;
}
.width75{
    width: 75%;
    margin: 0 auto;
}
.width80{
    width: 80%;
    margin: 0 auto;
}
.width85{
    width: 85%;
    margin: 0 auto;
}
.width100{
    width: 100%;
    margin: 0 auto;
}





/* ===================================================================== RESPONSIVE/MEDIA QUERY */

/* Desktops and laptops ----------- */
@media only screen and (max-width : 1200px) {
    .row{
        padding-left: 36px;
        padding-right: 36px;
    }

}

/* iPads (landscape) ----------- */
@media only screen and (max-width : 992px) {


    .projectImgTop{
        padding-top: 20%;
    }

}

/* iPads (portrait) ----------- */
@media only screen and (max-width : 768px) {
    .row{
        padding-left: 20px;
        padding-right: 20px;
    }



    .projectImgTop{
        padding-top: 25%;
    }

    .landing .arrows{
        margin-top: 7vh;
    }

    .projectIMG{
        max-width: 90vw;
    }

    .projectDescription{
        min-width: 75vw;
    }


}

/* Smartphones ----------- */
@media only screen and (max-width : 600px) {
    .row{
        padding-left: 0px;
        padding-right: 0px;
    }

    .landing .arrows{
        margin-top: 1vh;
    }

    .width10, .width50, .width60, .width75, .width80, .width85{
        width: 100%;
    }

    .projectDescription{
        min-width: 70vw;
    }
	
}