@charset "UTF-8";
@import url("https://use.typekit.net/hup3cck.css");
/* Palette
color: #e8bc5d;
color: #202128;
color: #4e929b;
color: #9c8046;
 */

html{
    scroll-behavior: smooth;
}

body{
    margin: 0;
    font-family: 'proxima-nova', sans-serif;
    font-size: 1.2em;
    color: #202128;
}

/* Scrollbar */
::-webkit-scrollbar{
    width: 0.8vw;
}
::-webkit-scrollbar-track{
    background: none;
}
::-webkit-scrollbar-thumb{
    background: #cbcbcb;
    border-radius: 10vh;
}
::-webkit-scrollbar-thumb:hover{
    background: #e8bc5d;
}

a{
    text-decoration-line: none;
}
project{
    grid-area: proj;
    position: relative;
}
brief{
    /* background: #C45C00; */
    grid-area: brief;
    position: relative;
    padding: 0 15vw 2vw 15vw;
    line-height: 1.4em;
}
h1{
    text-align: center;
}
.p1 h1, .p2 h1, .p3 h1, .p4 h1, .p5 h1, .p6 h1{
    text-align: left;
}
h3{
    margin: 0vh 0 0 0;
    align-self: center;
}
h5{
    margin-top: -2vh;
    text-align: center;
}
h6{
    margin-top: 0.5vh;
    font-size: 0.5em;
    text-align: center;
}
p{
    display: flex;
    flex-direction: row;
}
column{
    flex: 50%;
    padding: 0 2vw 0 2vw;
}
process{
    margin: 0 0 10vh 10vw;
    padding: 0 6vw 0 0;
}
.process{
    background-color: #ffffffcc;
    position: absolute;
    padding: 0 10vw 0 10vw;
    top: 0;
    left: 0;
}
.soon{
    font-weight: 500;
    color: #e8bc5d;
}
section{
    position: relative;
    padding: 0 10vw 4vh 10vw;
}
section h1{
    font-size: 2em;
}

logo{
    /* background: lightskyblue; */
    position: relative;
    grid-area: logo;
    margin: 2vh 0 2vh 2vw;
    /* height: 6vh; */
    display: grid;
    grid-template-columns: 0.22fr 1fr;
}
.img-l{
    /* background: lightblue; */
    object-fit: contain;
    width: 100%;
    height: 100%;
}
logo img.btm, #home:hover img.top{
    opacity: 0.6;
    transition: opacity 0.25s ease-out;
}
logo img.top, #home:hover img.btm{
    opacity: 1;
    transition: opacity 0.25s ease-out;
}

nav{
    /* background: lightsalmon; */
    position: relative;
    grid-area: nav;
    text-transform: capitalize;
    margin: 2vh 2vw 2vh 0vw;
    align-self: center;
    /* padding: 30px 0 0 2vw; */
}
nav ul{
    list-style-type: none;
    display: grid;
    grid-template-columns: 0.5fr 0.5fr 0.35fr 0.35fr;
}
nav li{
    position: relative;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 400;
    color: #202128;
}
nav li:hover{
    color: #e8bc5d;
    font-weight: 900;
}
nav li::before{
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 4px;
    bottom: 0;
    left: 0;
    background-color: #e8bc5d;
    transform-origin: middle left;
    transition: transform 0.25s ease-out;
}
nav li:hover::before{
    transform: scaleX(1);
    transform-origin: middle left;
    z-index: 1000;
}
.active{
    color: #202128;
    font-weight: 900;
}
nav li.active::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 4px;
    bottom: 0;
    left: 0;
    background-color: #202128;
    transform-origin: middle left;
}
#gotop{
    display: none;
    position: fixed;
    bottom: 10vh;
    right: 2vw;
    border: none;
    color: #202128;
    font-size: 2.5em;
    background: #ffffffcc;
    border-radius: 10px;
    z-index: 99;
    /* transform: rotate(-90deg); */
}
#gotop:hover{
    color: #e8bc5d;
    cursor: pointer;
}

footer{
    /* background: lightseagreen; */
    position: relative;
    grid-area: footer;
    margin: 2vh 0 0 0;
    /* padding: 1vh 2vw 0.5vh 2vw; */
    /* height: 5vh; */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: 
        "copyright      social_media"
        "banner         banner";
}
copyright{
    /* background: lightgoldenrodyellow; */
    position: relative;
    grid-area: copyright;
    margin: 0 0 0 2vw;
    align-self: center;
}
.social_media{
    /* background: lightpink; */
    position: relative;
    grid-area: social_media;
    margin: 0 2vw 0 0;
    right: 0;
    text-align: right;
    font-size: 0;
    overflow: hidden;
}
.img-i{
    /* background: whitesmoke; */
    object-fit: contain;
    /* width: 100%;
    height: 100%; */
    width: 30px;
}
banner{
    /* background: lightgoldenrodyellow; */
    position: relative;
    grid-area: banner;
    height: 5vh;
    overflow: hidden;
}
.img-f{
    /* background: whitesmoke; */
    object-fit: cover;
    width: 100%;
    margin-top: -9.5vh;
    /* object-position: 0% 40%; */
    /* transform: scale(2.2, 2.2); */
}
footer img.top{
    position: absolute;
}
footer img.btm, #instagram:hover img.top{
    opacity: 0;
    transition: opacity 0.25s ease-out;
}
footer img.top, #instagram:hover img.btm{
    opacity: 1;
    transition: opacity 0.25s ease-out;
}
footer img.btm, #linkedin:hover img.top{
    opacity: 0;
    transition: opacity 0.25s ease-out;
}
footer img.top, #linkedin:hover img.btm{
    opacity: 1;
    transition: opacity 0.25s ease-out;
}

.label{
    /* background: lightblue; */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 1.4em;
    font-weight: 700;
    color: #202128;
    width: 75%;
}
.label h5{
    margin-top: 1vh;
    font-size: 0.6em;
}
.overlay{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffffcc;
    /* opacity: 0.8; */
    overflow: hidden;
    width: 100%;
    height: 100%;
    transform: scale(0,0);
    transition: .25s ease;
}
.divider{
    padding: 2vh 0 0 0;
    border-bottom: 2px solid #202128;
    width: 100%;
}
#QR{
    position: absolute;
    height: 14vh;
    top: 0;
    right: 2vw;
}
mark{
    background: #e8bc5d;
    position: relative;
    white-space: nowrap;
    width: 100%;
    height: 100%;
}
.credit{
    position: absolute;
    bottom: 10vh;
    left: 0;
}

/* Home */
.home_pg{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "logo       .       nav     nav"
        "blc1       blc1    blc1    blc1"
        /*"slider     slider  slider  slider"*/
        "footer     footer  footer  footer";
}
.home_pg #blc1{
    grid-area: blc1;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    height: 80vh;
}
.home_pg #blc1 video{
    width: 100%;
}
.home_pg slider{
    grid-area: slider;
    position: relative;
}
.home_pg slider .slider{
    /* background: #F77300; */
    position: relative;
    height: 83vh;
    overflow: hidden;
}
.home_pg slider .slider .slide{
    position: absolute;
    left: 100%;
    width: 100%;
    height: 100%;
}
.home_pg slider .slider .slide.active{
    transform: translateX(-100%);
    transition: 1s;
}
.home_pg slider .slider .slide img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.home_pg .nav-visibility{
    position: absolute;
    width: 24%;
    top: 94.5%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
    display: flex;
    justify-content: center;
}
.home_pg .nav-visibility #icon{
    position: relative;
    background: none;
    border: 2px solid #e8bc5d;
    height: 16px;
    margin: 0 3% 0 3%;
    border-radius: 50%;
    cursor: pointer;
}
.home_pg .nav-visibility #icon.active{
    background: #e8bc5d;
    transition: .25s;
}
.home_pg .label{
    position: absolute;
    width: 300px;
    height: 150px;
    top: 96%;
    right: 0;
    margin-right: auto;
    padding-top: 1.2vh;
    background: #000000e0;
    color: #fff;
    border-radius: 30px 30px 0 0;
    /* border: 2px solid #e8bc5d; */
}

/* Error / 404 */
.error_pg{
    display: grid;
    height: 100vh;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: .2fr 3fr .1fr;
    grid-template-areas:
        "logo       .       nav     nav"
        "error      error   error   error"
        "footer     footer  footer  footer";
}
#error{
    /* background: #F77300; */
    grid-area: error;
    padding: 0 10vw 0 10vw;
    text-align: center;
}
#error h1{
    color:#e8bc5d;
    font-size: 4em;
    font-weight: 900;
    text-align: center;
}
#error p{
    display: inherit;
    flex-direction: row;
    text-align: center;
}
#error button{
    font-size: 1em;
    background: none;
    color: #e8bc5d;
    border: 2px solid #e8bc5d;
    border-radius: 1vw;
    padding: 0.5vh 0.5vw 0.5vh 0.5vw;
}
#error button:hover{
    background: #e8bc5d;
    color: #fff;
    border: 2px solid #e8bc5d;
    border-radius: 1vw;
    cursor: pointer;
}

/* About */
.about_page{
    display: grid;
    height: 100vh;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: .2fr 3fr .1fr;
    grid-template-areas:
        "logo       .       nav     nav"
        "photo      photo   bio     bio"
        "footer     footer  footer  footer";
}
.img-a{
    object-fit: contain;
    width: 100%;
    height: 100%;
}
.about_page #photo{
    /* background: red; */
    grid-area: photo;
    margin: 0 2vw 0 10vw;
    /* text-align: right; */
    overflow: hidden;
}
.about_page #photo img{
    margin-top: 15%;
    object-position: 55%;
    transform: scale(3, 3);
}
#bio{
    /* background: lightpink; */
    grid-area: bio;
    margin: 0 10vw 0 2vw;
    line-height: 2;
}

.resources{
    /* background: #e8bc5d; */
    position: relative;
    /* padding: 0.5vh 1.5vw 0.5vh 1.5vw; */
    /* padding: 0.5vw; */
    /* width: 26vw; */
    color: #4e929b;
    font-weight: 700;
    /* border: 2px solid #e8bc5d; */
    /* border-radius: 1vw; */
}
/* .resources:hover{
    color: #202128;
    border: 2px solid #e8bc5d;
    background: none;
} */
.resources::before{
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 4px;
    bottom: 0;
    left: 0;
    background-color: #4e929b;
    transform-origin: middle left;
    transition: transform 0.25s ease-out;
}
.resources:hover::before{
    transform: scaleX(1);
    transform-origin: middle left;
}
.vl{
    /* position: absolute; */
    border-bottom: 2px solid #202128;
    width: 30%;
    /* animation: linearwipe 5s steps(60, end); */
}
.email{
    position: relative;
    color: #4e929b;
    font-weight: 700;
}
/* .email:hover{
    color: #202128;
} */
.email::before{
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 4px;
    bottom: 0;
    left: 0;
    background-color: #4e929b;
    transform-origin: middle left;
    transition: transform 0.25s ease-out;
}
.email:hover::before{
    transform: scaleX(1);
    transform-origin: middle left;
}

/* Graphic Design */
.grde_pg{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "logo       .       nav     nav"
        "blc1       blc1    blc7    blc2"
        "blc1       blc1    blc3    blc6"
        "blc11      blc10   blc8    blc8"
        "blc5       blc4    blc8    blc8"
        "blc9       blc9    .       ."
        "blc9       blc9    .       ."
        "footer     footer  footer  footer";
}
.img-gd{
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.grde_pg .block{
    position: relative;
    height: 40vh;
    overflow: hidden;
}
.grde_pg .block:hover .overlay{
    /* height: 100%; */
    transform: scale(1,1);
}
/* Unforgotten */
.grde_pg #blc1{
    /* background: #F77300; */
    grid-area: blc1;
    height: 80vh;
}
/* Eco Delight */
.grde_pg #blc2{
    /* background: #F99C4B; */
    grid-area: blc2;
}
/* ESPN Cover: Naomi Osaka */
.grde_pg #blc3{
    grid-area: blc3;
}
.grde_pg #blc3 img{
    transform: scale(1.25,1.25);
    margin-top: 1.5%;
}
/* Broken-Hearted */
.grde_pg #blc4{
    /* background: #784B24; */
    grid-area: blc4;
}
/* CRC Redesign */
.grde_pg #blc5{
    /* background: #C45C00; */
    grid-area: blc5;
}
/* Nigerian KUDI */
.grde_pg #blc6{
    /* background: #C45C00; */
    grid-area: blc6;
}
.grde_pg #blc6 img{
    object-position: 0%;
}
/* Burning Up */
.grde_pg #blc7{
    /* background: #C45C00; */
    grid-area: blc7;
}
.grde_pg #blc7 img{
    transform: scale(1.1,1.1);
}
/* Faces of Fear */
.grde_pg #blc8{
    /* background: #C45C00; */
    grid-area: blc8;
    height: 80vh;
}
/* Senzu Ale House */
.grde_pg #blc9{
    /* background: #C45C00; */
    grid-area: blc9;
    height: 80vh;
}
.grde_pg #blc9 img{
    object-position: 90%;
}
/* Shall We? */
.grde_pg #blc10{
    /* background: #C45C00; */
    grid-area: blc10;
}
/* Breaux Healers */
.grde_pg #blc11{
    /* background: #C45C00; */
    grid-area: blc11;
}
.grde_pg #blc11 img{
    object-position: 90%;
}

/* Photography */
.photo_pg{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "logo       .       nav     nav"
        "blc4       blc4    blc2    blc3"
        "blc4       blc4    blc1    blc1"
        "blc5       blc6    blc1    blc1"
        "footer     footer  footer  footer";
}
.img-p{
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.photo_pg .block{
    position: relative;
    height: 40vh;
    overflow: hidden;
}
.photo_pg .block:hover .overlay{
    /* height: 100%; */
    transform: scale(1,1);
}
/* Time Capsule */
.photo_pg #blc1{
    /* background: #784B24; */
    grid-area: blc1;
    height: 80vh;
}
/* Joy Diaries & Pleasure Altars */
.photo_pg #blc2{
    /* background: #C45C00; */
    grid-area: blc2;
}
/* Night & Day */
.photo_pg #blc3{
    /* background: #C45C00; */
    grid-area: blc3;
}
/* AIP? / YSSTOG / HB */
.photo_pg #blc4{
    /* background: #C45C00; */
    grid-area: blc4;
    height: 80vh;
}
/* spotlight i */
.photo_pg #blc5{
    /* background: #C45C00; */
    grid-area: blc5;
}
/* spotlight ii */
.photo_pg #blc6{
    /* background: #C45C00; */
    grid-area: blc6;
}

/* Bonus */
.bonus_pg{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "logo       .       nav     nav"
        "blc1       blc1    blc4    blc2"
        "blc1       blc1    blc3    blc3"
        "blc11      blc8    blc3    blc3"
        "blc10      blc9    blc12   blc7"
        "blc5       blc6    .       ."
        "footer     footer  footer  footer";
}
.img-b{
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.bonus_pg .block{
    position: relative;
    height: 40vh;
    overflow: hidden;
}
.bonus_pg .block:hover .overlay{
    /* height: 100%; */
    transform: scale(1,1);
}
/* Perfectionist */
.bonus_pg #blc1{
    grid-area: blc1;
    height: 80vh;
}
/* Eli */
.bonus_pg #blc2{
    /* background: #F99C4B; */
    grid-area: blc2;
}
/* Mapping Your Roots */
.bonus_pg #blc3{
    /* background: #F77300; */
    grid-area: blc3;
    height: 80vh;
}
/* See Me */
.bonus_pg #blc4{
    /* background: #784B24; */
    grid-area: blc4;
    overflow: hidden;
}
.bonus_pg #blc4 img{
    height: 155%;
    margin-top: -22%;
    object-position: 8%;
}
/* Anansi */
.bonus_pg #blc5{
    /* background: #C45C00; */
    grid-area: blc5;
}
.bonus_pg #blc5 img{
    object-position: 65%;
}
/* OIMMFY */
.bonus_pg #blc6{
    /* background: #7A3800; */
    grid-area: blc6;
}
/* The REMIXES */
.bonus_pg #blc7{
    /* background: #7A3800; */
    grid-area: blc7;
}
.bonus_pg #blc7 img{
    transform: scale(0.4, 0.4);
    margin: -110% 0 0 -150%;
}
/* Louder than Words */
.bonus_pg #blc8{
    /* background: #C45C00; */
    grid-area: blc8;
}
.bonus_pg #blc8 img{
    object-position: 16%;
    transform: scale(1.25,1.25);
}
/* Senior Shirt */
.bonus_pg #blc9{
    /* background: #F99C4B; */
    grid-area: blc9;
}
/* IC Web Banners */
.bonus_pg #blc10{
    /* background: #C45C00; */
    grid-area: blc10;
}
/* Peppy Clips */
.bonus_pg #blc11{
    /* background: #C45C00; */
    grid-area: blc11;
}
/* Use Your Voice */
.bonus_pg #blc12{
    /* background: #C45C00; */
    grid-area: blc12;
}
.bonus_pg #blc12 img{
    height: 130%;
    object-position: 37%;
    margin-top: -9vh;
}

/* Unforgottrn: Stop the Erasure */
.uste_pg{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "logo       .       nav     nav"
        "proj       proj    proj    proj"
        "blc1       blc1    blc1    blc1"
        "brief      brief   brief   brief"
        "sec1       sec1    sec1    sec1"
        "blc2       blc2    blc3    blc3"
        "blc2       blc2    blc5    blc5"
        "blc6       blc6    blc4    blc4"
        "blc18      blc18   blc4    blc4"
        "blc7       blc7    blc7    blc7"
        "blc11      blc11   blc12   blc12"
        "blc13      blc13   blc13   blc13"
        "blc16      blc16   blc16   blc16"
        "blc17      blc17   blc19   blc19"
        "blc20      blc20   blc20   blc20"
        "sec2       sec2    sec2    sec2"
        "blc21      blc21   blc21   blc21"
        "blc22      blc22   blc22   blc22"
        "footer     footer  footer  footer";
}
.img-uste{
    object-fit: contain;
    width: 100%;
    height: 100%;
}
.uste_pg #blc1{
    grid-area: blc1;
    position: relative;
    padding: 0 10vw 4vh 10vw;
}
.uste_pg #blc1 video{
    width: 100%;
}
.uste_pg brief a{
    color: #e8bc5d;
    font-weight: 900;
}
.uste_pg brief a:hover{
    color: #202128;
}
.uste_pg #sec1{
    grid-area: sec1;
}
.uste_pg #blc2{
    grid-area: blc2;
    position: relative;
    padding: 0 1vw 2vh 10vw;
}
.uste_pg #blc3{
    grid-area: blc3;
    position: relative;
    padding: 0 10vw 2vh 1vw;
}
.uste_pg #blc3 img{
    object-fit: cover;
}
.uste_pg #blc4{
    grid-area: blc4;
    position: relative;
    padding: 0 10vw 2vh 1vw;
}
.uste_pg #blc4 img{
    object-fit: cover;
}
.uste_pg #blc5{
    grid-area: blc5;
    position: relative;
    padding: 0 10vw 2vh 1vw;
}
.uste_pg #blc5 img{
    object-fit: cover;
}
.uste_pg #blc6{
    grid-area: blc6;
    position: relative;
    padding: 0 1vw 2vh 10vw;
}
.uste_pg #blc7{
    grid-area: blc7;
    position: relative;
    padding: 0 10vw 2vh 10vw;
    display: grid;
    gap: 1vw;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "bb1     bb2     bb3     bb4";
}
.uste_pg #blc7 #bb1{
    grid-area: bb1;
    position: relative;
}
.uste_pg #blc7 #bb2{
    grid-area: bb2;
    position: relative;
}
.uste_pg #blc7 #bb3{
    grid-area: bb3;
    position: relative;
}
.uste_pg #blc7 #bb4{
    grid-area: bb4;
    position: relative;
}
.uste_pg #blc11{
    grid-area: blc11;
    position: relative;
    padding: 0 1vw 2vh 10vw;
}
.uste_pg #blc12{
    grid-area: blc12;
    position: relative;
    padding: 0 10vw 2vh 1vw;
}
.uste_pg #blc13{
    grid-area: blc13;
    position: relative;
    padding: 0 10vw 2vh 10vw;
    display: grid;
    gap: 1vw;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
        "bb1     bb2     bb3";
}
.uste_pg #blc13 #bb1{
    grid-area: bb1;
    position: relative;
}
.uste_pg #blc13 #bb2{
    grid-area: bb2;
    position: relative;
}
.uste_pg #blc13 #bb3{
    grid-area: bb3;
    position: relative;
}
.uste_pg #blc16{
    grid-area: blc16;
    position: relative;
    padding: 0 10vw 2vh 10vw;
    display: grid;
    gap: 1vw;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "bb1     bb2     bb3     bb4";
}
.uste_pg #blc16 #bb1{
    grid-area: bb1;
    position: relative;
}
.uste_pg #blc16 #bb2{
    grid-area: bb2;
    position: relative;
}
.uste_pg #blc16 #bb3{
    grid-area: bb3;
    position: relative;
}
.uste_pg #blc16 #bb4{
    grid-area: bb4;
    position: relative;
}
.uste_pg #blc17{
    grid-area: blc17;
    position: relative;
    padding: 0 1vw 2vh 10vw;
}
.uste_pg #blc18{
    grid-area: blc18;
    position: relative;
    padding: 0 1vw 2vh 10vw;
    height: 70vh;
}
.uste_pg #blc18 img{
    object-fit: cover;
    object-position: 50% 45%;
}
.uste_pg #blc19{
    grid-area: blc19;
    position: relative;
    padding: 0 10vw 2vh 1vw;
}
.uste_pg #blc20{
    grid-area: blc20;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    height: 80vh;
}
.uste_pg #sec2{
    grid-area: sec2;
}
.uste_pg #blc21{
    grid-area: blc21;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    display: grid;
    gap: 1vw;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
        "bb1     bb2"
        "bb3     bb4";
}
.uste_pg #blc21 #bb1{
    grid-area: bb1;
    position: relative;
}
.uste_pg #blc21 #bb2{
    grid-area: bb2;
    position: relative;
}
.uste_pg #blc21 #bb3{
    grid-area: bb3;
    position: relative;
}
.uste_pg #blc21 #bb4{
    grid-area: bb4;
    position: relative;
}
.uste_pg #blc22{
    grid-area: blc22;
    position: relative;
    padding: 0 10vw 6vh 10vw;
}
.uste_pg #blc22 h5{
    color: #202128;
    position: relative;
}
.uste_pg #blc22 h5:hover{
    color: #e8bc5d;
    font-weight: 900;
}
.uste_pg #blc22 h5::before{
    content: '';
    position: absolute;
    width: 18%;
    transform: scaleX(0);
    height: 4px;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    background-color: #e8bc5d;
    transform-origin: middle left;
    transition: transform 0.25s ease-out;
}
.uste_pg #blc22 h5:hover::before{
    transform: scaleX(1);
    transform-origin: middle left;
}

/* Eco Delight */
.eco_pg{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "logo       .       nav     nav"
        "proj       proj    proj    proj"
        "blc1       blc1    blc1    blc1"
        "brief      brief   brief   brief"
        "sec1       sec1    sec1    sec1"
        "blc2       blc2    blc2    blc2"
        "sec2       sec2    sec2    sec2"
        "blc3       blc3    blc3    blc3"
        "sec3       sec3    sec3    sec3"
        "blc4       blc4    blc5    blc5"
        "sec4       sec4    sec4    sec4"
        "blc6       blc6    blc7    blc7"
        "sec5       sec5    sec5    sec5"
        "blc8       blc8    blc9    blc9"
        "blc8       blc8    blc10   blc10"
        "footer     footer  footer  footer";
}
.img-eco{
    object-fit: contain;
    width: 100%;
    height: 100%;
}
.eco_pg #blc1{
    grid-area: blc1;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    height: 80vh;
}
.eco_pg #sec1{
    grid-area: sec1;
}
.eco_pg #blc2{
    grid-area: blc2;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "bb1     bb2     bb3     bb4"
        "bb5     bb6     bb7     bb8";
}
.eco_pg #blc2 #bb1{
    grid-area: bb1;
}
.eco_pg #blc2 #bb2{
    grid-area: bb2;
}
.eco_pg #blc2 #bb3{
    grid-area: bb3;
}
.eco_pg #blc2 #bb4{
    grid-area: bb4;
}
.eco_pg #blc2 #bb5{
    grid-area: bb5;
}
.eco_pg #blc2 #bb6{
    grid-area: bb6;
}
.eco_pg #blc2 #bb7{
    grid-area: bb7;
}
.eco_pg #blc2 #bb8{
    grid-area: bb8;
}
.eco_pg #sec2{
    grid-area: sec2;
}
.eco_pg #blc3{
    grid-area: blc3;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    display: grid;
    row-gap: 2vh;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
        "bb1     bb2     bb3"
        "bb4     bb5     bb6";
}
.eco_pg #blc3 #bb1{
    grid-area: bb1;
    position: relative;
    height: 60vh;
}
.eco_pg #blc3 #bb2{
    grid-area: bb2;
    position: relative;
    height: 60vh;
}
.eco_pg #blc3 #bb3{
    grid-area: bb3;
    position: relative;
    height: 60vh;
}
.eco_pg #blc3 #bb4{
    grid-area: bb4;
    position: relative;
    height: 60vh;
}
.eco_pg #blc3 #bb5{
    grid-area: bb5;
    position: relative;
    height: 60vh;
}
.eco_pg #blc3 #bb6{
    grid-area: bb6;
    position: relative;
    height: 60vh;
}
.eco_pg #sec3{
    grid-area: sec3;
}
.eco_pg #blc4{
    grid-area: blc4;
    position: relative;
    padding: 0 1vw 4vh 10vw;
    height: 70vh;
}
.eco_pg #blc5{
    grid-area: blc5;
    position: relative;
    padding: 0 10vw 4vh 1vw;
}
.eco_pg #sec4{
    grid-area: sec4;
}
.eco_pg #blc6{
    grid-area: blc6;
    position: relative;
    padding: 0 1vw 4vh 10vw;
}
.eco_pg #blc7{
    grid-area: blc7;
    position: relative;
    padding: 0 10vw 4vh 1vw;
    height: 80vh;
}
.eco_pg #sec5{
    grid-area: sec5;
}
.eco_pg #blc8{
    grid-area: blc8;
    position: relative;
    padding: 0 1vw 6vh 10vw;
}
.eco_pg #blc9{
    grid-area: blc9;
    position: relative;
    padding: 0 10vw 4vh 1vw;
    height: 50vh;
}
.eco_pg #blc10{
    grid-area: blc10;
    position: relative;
    padding: 0 10vw 6vh 1vw;
    height: 50vh;
}

/* Broken-Hearted */
.brhe_pg{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "logo       .       nav     nav"
        "proj       proj    proj    proj"
        "blc1       blc1    blc1    blc1"
        "brief      brief   brief   brief"
        "sec1       sec1    sec1    sec1"
        ".          blc2    blc2    ."
        "sec2       sec2    sec2    sec2"
        "blc4       blc4    blc4    blc4"
        "footer     footer  footer  footer";
}
.img-brhe{
    object-fit: contain;
    width: 100%;
    height: 100%;
}
.brhe_pg #blc1{
    grid-area: blc1;
    position: relative;
    padding: 0 30vw 4vh 30vw;
}
.brhe_pg #blc1 video{
    width: 100%;
}
.brhe_pg brief a{
    color: #e8bc5d;
}
.brhe_pg brief a:hover{
    color: #202128;
}
.brhe_pg #sec1{
    grid-area: sec1;
}
.brhe_pg #blc2{
    grid-area: blc2;
    position: relative;
    padding: 0 4vw 4vh 4vw;
}
.brhe_pg #blc3{
    grid-area: blc3;
    position: relative;
    padding: 0 10vw 4vh 1vw;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
        "bb1     bb2"
        "bb3     bb4";
}
.brhe_pg #blc3 #bb1{
    grid-area: bb1;
    position: relative;
}
.brhe_pg #blc3 #bb1 img{
    object-position: 50% 1700%;
}
.brhe_pg #blc3 #bb2{
    grid-area: bb2;
    position: relative;
}
.brhe_pg #blc3 #bb2 img{
    transform: scale(2,2);
}
.brhe_pg #blc3 #bb3{
    grid-area: bb3;
    position: relative;
}
.brhe_pg #blc3 #bb3 img{
    object-position: 50% -200%;
    transform: scale(2,2);
}
.brhe_pg #blc3 #bb4{
    grid-area: bb4;
    position: relative;
}
.brhe_pg #blc3 #bb4 img{
    transform: scale(2,2);
}
.brhe_pg #sec2{
    grid-area: sec2;
}
.brhe_pg #blc4{
    grid-area: blc4;
    position: relative;
    padding: 0 10vw 6vh 10vw;
    display: grid;
    gap: 1vw;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
        "bb1     bb2     bb3"
        "bb4     bb5     bb6";
}
.brhe_pg #blc3 #bb1{
    grid-area: bb1;
    position: relative;
}
.brhe_pg #blc3 #bb2{
    grid-area: bb2;
    position: relative;
}
.brhe_pg #blc3 #bb3{
    grid-area: bb3;
    position: relative;
}
.brhe_pg #blc3 #bb4{
    grid-area: bb4;
    position: relative;
}
.brhe_pg #blc3 #bb5{
    grid-area: bb5;
    position: relative;
}
.brhe_pg #blc3 #bb6{
    grid-area: bb6;
    position: relative;
}

/* Nigerian KUDI */
.kudi_pg{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "logo       .       nav     nav"
        "proj       proj    proj    proj"
        "blc1       blc1    blc1    blc1"
        "brief      brief   brief   brief"
        "sec1       sec1    sec1    sec1"
        "blc2       blc2    blc2    blc2"
        "sec2       sec2    sec2    sec2"
        "blc3       blc3    blc4    blc4"
        "sec3       sec3    sec3    sec3"
        "blc5       blc5    blc5    blc5"
        "blc6       blc6    blc6    blc6"
        "sec4       sec4    sec4    sec4"
        "blc7       blc7    blc8    blc8"
        "blc9       blc9    blc9    blc9"
        "footer     footer  footer  footer";
}
.img-kudi{
    object-fit: contain;
    width: 100%;
    height: 100%;
}
.kudi_pg #blc1{
    grid-area: blc1;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    height: 80vh;
}
.kudi_pg #sec1{
    grid-area: sec1;
}
.kudi_pg #blc2{
    grid-area: blc2;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    display: grid;
    column-gap: 2vw;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
        "bb1     bb2     bb3"
}
.kudi_pg #blc2 #bb1{
    grid-area: bb1;
    position: relative;
}
.kudi_pg #blc2 #bb2{
    grid-area: bb2;
    position: relative;
}
.kudi_pg #blc2 #bb3{
    grid-area: bb3;
    position: relative;
}
.kudi_pg #sec2{
    grid-area: sec2;
}
.kudi_pg #blc3{
    grid-area: blc3;
    position: relative;
    padding: 0 1vw 4vh 10vw;
    height: 70vh;
}
.kudi_pg #blc4{
    grid-area: blc4;
    position: relative;
    padding: 0 10vw 4vh 1vw;
    height: 70vh;
}
.kudi_pg #sec3{
    grid-area: sec3;
}
.kudi_pg #blc5{
    grid-area: blc5;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    height: 70vh;
}
.kudi_pg #blc6{
    grid-area: blc6;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    height: 70vh;
}
.kudi_pg #sec4{
    grid-area: sec4;
}
.kudi_pg #blc7{
    grid-area: blc7;
    position: relative;
    padding: 0 1vw 4vh 10vw;
}
.kudi_pg #blc8{
    grid-area: blc8;
    position: relative;
    padding: 0 10vw 4vh 1vw;
}
.kudi_pg #blc9{
    grid-area: blc9;
    position: relative;
    padding: 0 10vw 6vh 10vw;
    Height: 80vh;
}

/* Perfectionist */
.perf_pg{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "logo       .       nav     nav"
        "proj       proj    proj    proj"
        "blc1       blc1    blc1    blc1"
        "brief      brief   brief   brief"
        "sec1       sec1    sec1    sec1"
        "blc2       blc2    blc3    blc3"
        "sec2       sec2    sec2    sec2"
        "blc4       blc4    blc5    blc5"
        "blc6       blc6    blc7    blc7"
        "sec3       sec3    sec3    sec3"
        "blc8       blc8    blc8    blc8"
        "footer     footer  footer  footer";
}
.img-perf{
    object-fit: contain;
    width: 100%;
    height: 100%;
}
.perf_pg #blc1{
    grid-area: blc1;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    height: 80vh;
}
.perf_pg #sec1{
    grid-area: sec1;
}
.perf_pg #blc2{
    grid-area: blc2;
    position: relative;
    padding: 0 1vw 4vh 10vw;
    height: 100vh;
}
.perf_pg #blc3{
    grid-area: blc3;
    position: relative;
    padding: 0 10vw 4vh 1vw;
    height: 100vh;
}
.perf_pg #sec2{
    grid-area: sec2;
}
.perf_pg #blc4{
    grid-area: blc4;
    position: relative;
    padding: 0 1vw 4vh 10vw;
    height: 100vh;
}
.perf_pg #blc5{
    grid-area: blc5;
    position: relative;
    padding: 0 10vw 4vh 1vw;
    height: 100vh;
}
.perf_pg #blc6{
    grid-area: blc6;
    position: relative;
    padding: 0 1vw 4vh 10vw;
    height: 100vh;
}
.perf_pg #blc7{
    grid-area: blc7;
    position: relative;
    padding: 0 10vw 4vh 1vw;
    height: 100vh;
}
.perf_pg #sec3{
    grid-area: sec3;
}
.perf_pg #blc8{
    grid-area: blc8;
    position: relative;
    padding: 0 10vw 6vh 10vw;
    height: 90vh;
}

/* ESPN Cover: Naomi Osaka */
.espn_pg{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "logo       .       nav     nav"
        "proj       proj    proj    proj"
        "blc1       blc1    blc1    blc1"
        "brief      brief   brief   brief"
        "sec1       sec1    sec1    sec1"
        "blc2       blc2    blc2    blc2"
        "blc3       blc3    blc3    blc3"
        "blc4       blc4    blc4    blc4"
        "blc5       blc5    blc5    blc5"
        "blc7       blc7    blc8    blc8"
        "blc9       blc9    blc9    blc9"
        "blc10      blc10   blc11   blc11"
        "blc12      blc12   blc13   blc13"
        "blc14      blc14   blc15   blc15"
        "sec2       sec2    sec2    sec2"
        "blc16      blc16   blc17   blc17"
        "blc18      blc18   blc19   blc19"
        "sec3       sec3    sec3    sec3"
        "blc20      blc20   blc20   blc20"
        "blc21      blc21   blc21   blc21"
        "sec4       sec4    sec4    sec4"
        "blc22      blc22   blc23   blc23"
        "footer     footer  footer  footer";
}
.img-espn{
    object-fit: contain;
    width: 100%;
    height: 100%;
}
.espn_pg #blc1{
    grid-area: blc1;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    height: 80vh;
}
.espn_pg #sec1{
    grid-area: sec1;
}
.espn_pg #blc2{
    grid-area: blc2;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    height: 100vh;
}
.espn_pg #blc3{
    grid-area: blc3;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
        "bb1     bb2     bb3"
        "bb4     bb5     bb6";
}
.espn_pg #blc3 #bb1{
    grid-area: bb1;
    position: relative;
}
.espn_pg #blc3 #bb2{
    grid-area: bb2;
    position: relative;
}
.espn_pg #blc3 #bb3{
    grid-area: bb3;
    position: relative;
}
.espn_pg #blc3 #bb4{
    grid-area: bb4;
    position: relative;
}
.espn_pg #blc3 #bb5{
    grid-area: bb5;
    position: relative;
}
.espn_pg #blc3 #bb6{
    grid-area: bb6;
    position: relative;
}
.espn_pg #blc4{
    grid-area: blc4;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    height: 100vh;
}
.espn_pg #blc5{
    grid-area: blc5;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
        "bb1     bb2     bb3"
        "bb4     bb5     bb6";
}
.espn_pg #blc5 #bb1{
    grid-area: bb1;
    position: relative;
    height: 40vh;
}
.espn_pg #blc5 #bb2{
    grid-area: bb2;
    position: relative;
    height: 40vh;
}
.espn_pg #blc5 #bb3{
    grid-area: bb3;
    position: relative;
    height: 40vh;
}
.espn_pg #blc5 #bb4{
    grid-area: bb4;
    position: relative;
    height: 40vh;
}
.espn_pg #blc5 #bb5{
    grid-area: bb5;
    position: relative;
    height: 40vh;
}
.espn_pg #blc5 #bb6{
    grid-area: bb6;
    position: relative;
    height: 40vh;
}
.espn_pg #blc6{
    grid-area: blc6;
    position: relative;
    padding: 0 10vw 4vh 1vw;
}
.espn_pg #blc7{
    grid-area: blc7;
    position: relative;
    padding: 0 1vw 4vh 10vw;
}
.espn_pg #blc8{
    grid-area: blc8;
    position: relative;
    padding: 0 10vw 4vh 1vw;
}
.espn_pg #blc14{
    grid-area: blc14;
    position: relative;
    padding: 0 1vw 4vh 10vw;
}
.espn_pg #blc15{
    grid-area: blc15;
    position: relative;
    padding: 0 10vw 4vh 1vw;
}
.espn_pg #sec2{
    grid-area: sec2;
}
.espn_pg #blc16{
    grid-area: blc16;
    position: relative;
    padding: 0 1vw 4vh 10vw;
    height: 80vh;
}
.espn_pg #blc17{
    grid-area: blc17;
    position: relative;
    padding: 0 10vw 4vh 1vw;
    height: 80vh;
}
.espn_pg #blc18{
    grid-area: blc18;
    position: relative;
    padding: 0 1vw 4vh 10vw;
    height: 80vh;
}
.espn_pg #blc19{
    grid-area: blc19;
    position: relative;
    padding: 0 10vw 4vh 1vw;
    height: 80vh;
}
.espn_pg #sec3{
    grid-area: sec3;
}
.espn_pg #blc20{
    grid-area: blc20;
    position: relative;
    padding: 0 10vw 6vh 10vw;
    height: 70vh;
}
.espn_pg #blc21{
    grid-area: blc21;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    height: 70vh;
}
.espn_pg #sec4{
    grid-area: sec4;
}
.espn_pg #blc22{
    grid-area: blc22;
    position: relative;
    padding: 0 1vw 6vh 10vw;
}
.espn_pg #blc23{
    grid-area: blc23;
    position: relative;
    padding: 0 10vw 6vh 1vw;
}

/* Louder Than Words */
.ltw_page{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "logo       .       nav     nav"
        "proj       proj    proj    proj"
        "blc1       blc1    blc1    blc1"
        "brief      brief   brief   brief"
        "sec1       sec1    sec1    sec1"
        "blc2       blc2    blc3    blc3"
        "blc4       blc4    blc5    blc5"
        "sec2       sec2    sec2    sec2"
        "blc6       blc6    blc7    blc7"
        "blc8       blc8    blc8    blc8"
        "blc9       blc9    blc9    blc9"
        "footer     footer  footer  footer";
}
.img-ltw{
    object-fit: contain;
    width: 100%;
    height: 100%;
}
.ltw_page #blc1{
    grid-area: blc1;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    height: 80vh;
}
.ltw_page #sec1{
    grid-area: sec1;
}
.ltw_page #blc2{
    grid-area: blc2;
    position: relative;
    padding: 0 1vw 10vh 10vw;
}
.ltw_page #blc3{
    grid-area: blc3;
    position: relative;
    padding: 0 10vw 10vh 1vw;
}
.ltw_page #blc4{
    grid-area: blc4;
    position: relative;
    padding: 0 1vw 4vh 10vw;
}
.ltw_page #blc5{
    grid-area: blc5;
    position: relative;
    padding: 0 10vw 4vh 1vw;
}
.ltw_page #sec2{
    grid-area: sec2;
}
.ltw_page #blc6{
    grid-area: blc6;
    position: relative;
    padding: 0 1vw 6vh 10vw;
}
.ltw_page #blc6 img{
    object-fit: fill;
}
.ltw_page #blc7{
    grid-area: blc7;
    position: relative;
    padding: 0 10vw 6vh 1vw;
}
.ltw_page #blc8{
    grid-area: blc8;
    position: relative;
    padding: 0 10vw 6vh 10vw;
    height: 80vh;
}
.ltw_page #blc8 img{
    object-fit: cover;
}
.ltw_page #blc9{
    grid-area: blc9;
    position: relative;
    padding: 0 10vw 6vh 10vw;
}

/* Use Your Voice */
.uyv_pg{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "logo       .       nav     nav"
        "proj       proj    proj    proj"
        "blc1       blc1    blc1    blc1"
        "brief      brief   brief   brief"
        "sec1       sec1    sec1    sec1"
        "blc2       blc2    blc2    blc2"
        "sec2       sec2    sec2    sec2"
        "blc3       blc3    blc3    blc3"
        "sec3       sec3    sec3    sec3"
        "blc4       blc4    blc5    blc5"
        "blc6       blc6    blc5    blc5"
        "blc7       blc7    blc7    blc7"
        "footer     footer  footer  footer";
}
.img-uyv{
    object-fit: contain;
    width: 100%;
    height: 100%;
}
.uyv_pg #blc1{
    grid-area: blc1;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    height: 80vh;
}
.uyv_pg #sec1{
    grid-area: sec1;
}
.uyv_pg #blc2{
    grid-area: blc2;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    height: 70vh;
}
.uyv_pg #sec2{
    grid-area: sec2;
}
.uyv_pg #blc3{
    grid-area: blc3;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    height: 70vh;
}
.uyv_pg #sec3{
    grid-area: sec3;
}
.uyv_pg #blc4{
    grid-area: blc4;
    position: relative;
    padding: 0 1vw 4vh 10vw;
}
.uyv_pg #blc5{
    grid-area: blc5;
    position: relative;
    padding: 0 10vw 6vh 1vw;
}
.uyv_pg #blc6{
    grid-area: blc6;
    position: relative;
    padding: 0 1vw 6vh 10vw;
}

/* Class of '18 Senior Shirt */
.ce_pg{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "logo       .       nav     nav"
        "proj       proj    proj    proj"
        "blc1       blc1    blc1    blc1"
        "brief      brief   brief   brief"
        "sec1       sec1    sec1    sec1"
        "blc2       blc2    blc2    blc2"
        "sec2       sec2    sec2    sec2"
        "blc3       blc3    blc4    blc4"
        "sec3       sec3    sec3    sec3"
        "blc5       blc5    blc6    blc6"
        "sec4       sec4    sec4    sec4"
        "blc7       blc7    blc8    blc8"
        "blc9       blc9    blc10   blc10"
        "blc11      blc11   blc12   blc12"
        "footer     footer  footer  footer";
}
.img-ce{
    object-fit: contain;
    width: 100%;
    height: 100%;
}
.ce_pg #blc1{
    grid-area: blc1;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    height: 80vh;
}
.ce_pg #sec1{
    grid-area: sec1;
}
.ce_pg #blc2{
    grid-area: blc2;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    height: 70vh;
}
.ce_pg #sec2{
    grid-area: sec2;
}
.ce_pg #blc3{
    grid-area: blc3;
    position: relative;
    padding: 0 1vw 4vh 10vw;
}
.ce_pg #blc4{
    grid-area: blc4;
    position: relative;
    padding: 0 10vw 4vh 1vw;
}
.ce_pg #sec3{
    grid-area: sec3;
}
.ce_pg #blc5{
    grid-area: blc5;
    position: relative;
    padding: 0 1vw 4vh 10vw;
}
.ce_pg #blc6{
    grid-area: blc6;
    position: relative;
    padding: 0 10vw 4vh 1vw;
}
.ce_pg #sec4{
    grid-area: sec4;
}
.ce_pg #blc7{
    grid-area: blc7;
    position: relative;
    padding: 0 1vw 4vh 10vw;
}
.ce_pg #blc7 img{
    object-fit: cover;
}
.ce_pg #blc8{
    grid-area: blc8;
    position: relative;
    padding: 0 10vw 4vh 1vw;
}
.ce_pg #blc9{
    grid-area: blc9;
    position: relative;
    padding: 0 1vw 4vh 10vw;
}
.ce_pg #blc10{
    grid-area: blc10;
    position: relative;
    padding: 0 10vw 4vh 1vw;
}
.ce_pg #blc11{
    grid-area: blc11;
    position: relative;
    padding: 0 1vw 6vh 10vw;
}
.ce_pg #blc11 img{
    object-fit: cover;
}
.ce_pg #blc12{
    grid-area: blc12;
    position: relative;
    padding: 0 10vw 6vh 1vw;
}

/* Time Capsule */
.time_pg{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "logo       .       nav     nav"
        "proj       proj    proj    proj"
        "brief      brief   brief   brief"
        "blc1       blc1    blc1    blc1"
        "blc2       blc2    blc3    blc3"
        "blc4       blc4    blc4    blc4"
        "blc5       blc5    blc6    blc6"
        "blc7       blc7    blc7    blc7"
        "footer     footer  footer  footer";
}
.img-time{
    object-fit: contain;
    width: 100%;
    height: 100%;
}
.time_pg #blc1{
    grid-area: blc1;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    height: 80vh;
}
.time_pg #blc2{
    grid-area: blc2;
    position: relative;
    padding: 0 1vw 4vh 10vw;
}
.time_pg #blc3{
    grid-area: blc3;
    position: relative;
    padding: 0 10vw 4vh 1vw;
}
.time_pg #blc4{
    grid-area: blc4;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    height: 80vh;
}
.time_pg #blc4 img{
    object-fit: cover;
}
.time_pg #blc5{
    grid-area: blc5;
    position: relative;
    padding: 0 1vw 4vh 10vw;
}
.time_pg #blc6{
    grid-area: blc6;
    position: relative;
    padding: 0 10vw 4vh 1vw;
}
.time_pg #blc7{
    grid-area: blc7;
    position: relative;
    padding: 0 10vw 6vh 10vw;
    height: 80vh;
}
.time_pg #blc7 img{
    object-fit: contain;
}

/* Chicago Recycling Coaliation */
.crc_page{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "logo       .       nav     nav"
        "proj       proj    proj    proj"
        "blc1       blc1    blc1    blc1"
        "brief      brief   brief   brief"
        "sec1       sec1    sec1    sec1"
        "blc2       blc2    blc2    blc2"
        "sec2       sec2    sec2    sec2"
        "blc3       blc3    blc4    blc4"
        "sec3       sec3    sec3    sec3"
        "blc5       blc5    blc6    blc6"
        "sec4       sec4    sec4    sec4"
        "blc7       blc7    blc8    blc8"
        "sec5       sec5    sec5    sec5"
        "blc9       blc9    blc10   blc10"
        "sec6       sec6    sec6    sec6"
        "blc11      blc11   blc12   blc12"
        "footer     footer  footer  footer";
}
.img-crc{
    object-fit: contain;
    width: 100%;
    /* height: 100%; */
}
.crc_page #blc1{
    grid-area: blc1;
    position: relative;
    padding: 0 10vw 10vh 10vw;
    height: 80vh;
}
.crc_pg #sec1{
    grid-area: sec1;
}
.crc_page #blc2{
    grid-area: blc2;
    position: relative;
    padding: 0 10vw 10vh 1vw;
}
.crc_pg #sec2{
    grid-area: sec2;
}
.crc_page #blc3{
    grid-area: blc3;
    position: relative;
    padding: 0 10vw 10vh 1vw;
}
.crc_page #blc4{
    grid-area: blc4;
    position: relative;
    padding: 0 10vw 0 1vw;
}
.crc_pg #sec3{
    grid-area: sec3;
}
.crc_page #blc5{
    grid-area: blc5;
    position: relative;
    padding: 0 10vw 0 1vw;
}
.crc_page #blc6{
    grid-area: blc6;
    position: relative;
    padding: 0 10vw 10vh 1vw;
}
.crc_pg #sec4{
    grid-area: sec4;
}
.crc_page #blc7{
    grid-area: blc7;
    position: relative;
    padding: 0 1vw 10vh 10vw;
}
.crc_page #blc8{
    grid-area: blc8;
    position: relative;
    padding: 0 10vw 10vh 1vw;
}
.crc_pg #sec5{
    grid-area: sec5;
}
.crc_page #blc9{
    grid-area: blc9;
    position: relative;
    padding: 0 1vw 2vh 10vw;
}
.crc_page #blc10{
    grid-area: blc10;
    position: relative;
    padding: 0 10vw 2vh 1vw;
}
.crc_pg #sec6{
    grid-area: sec6;
}
.crc_page #blc11{
    grid-area: blc11;
    position: relative;
    padding: 0 1vw 10vh 10vw;
}
.crc_page #blc12{
    grid-area: blc12;
    position: relative;
    padding: 0 10vw 10vh 1vw;
}

/* Burning Up */
.buup_pg{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "logo       .       nav     nav"
        "proj       proj    proj    proj"
        "blc1       blc1    blc1    blc1"
        "brief      brief   brief   brief"
        "sec1       sec1    sec1    sec1"
        "blc2       blc2    blc2    blc2"
        "sec2       sec2    sec2    sec2"
        "blc6       blc6    blc7    blc7"
        "blc8       blc8    blc9    blc9"
        "blc10      blc10   blc10   blc10"
        "blc11      blc11   blc11   blc11"
        "sec3       sec3    sec3    sec3"
        "blc12      blc12   blc13   blc13"
        "blc14      blc14   blc15   blc15"
        "blc16      blc16   blc16   blc16"
        "sec4       sec4    sec4    sec4"
        "blc18      blc18   blc18   blc18"
        "blc19      blc19   blc20   blc20"
        "blc21      blc21   blc22   blc22"
        "footer     footer  footer  footer";
}
.img-buup{
    object-fit: contain;
    width: 100%;
    height: 100%;
}
.buup_pg #blc1{
    grid-area: blc1;
    position: relative;
    padding: 0 10vw 4vh 10vw;
}
.buup_pg #blc1 video{
    width: 100%;
}
.buup_pg #sec1{
    grid-area: sec1;
}
.buup_pg #blc2{
    grid-area: blc2;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    height: 80vh;
}
.buup_pg #blc3{
    grid-area: blc3;
    position: relative;
    padding: 0 1vw 4vh 10vw;
    height: 50vh;
}
.buup_pg #blc4{
    grid-area: blc4;
    position: relative;
    padding: 0 10vw 4vh 1vw;
    height: 90vh;
}
.buup_pg #blc5{
    grid-area: blc5;
    position: relative;
    padding: 0 1vw 4vh 10vw;
}
.buup_pg #sec2{
    grid-area: sec2;
}
.buup_pg #blc6{
    grid-area: blc6;
    position: relative;
    padding: 0 1vw 6vh 10vw;
}
.buup_pg #blc7{
    grid-area: blc7;
    position: relative;
    margin: 0 10vw 6vh 1vw;
}
.buup_pg #blc8{
    grid-area: blc8;
    position: relative;
    padding: 0 1vw 6vh 10vw;
}
.buup_pg #blc9{
    grid-area: blc9;
    position: relative;
    padding: 0 10vw 6vh 1vw;
}
.buup_pg #blc10{
    grid-area: blc10;
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4vw;
    margin: 0 10vw 4vh 10vw;
    padding: 0 10vw 0 10vw;
}
.buup_pg #blc11{
    grid-area: blc11;
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin: 0 10vw 4vh 10vw;
}
.buup_pg #sec3{
    grid-area: sec3;
}
.buup_pg #blc12{
    grid-area: blc12;
    position: relative;
    padding: 0 1vw 6vh 10vw;
}
.buup_pg #blc13{
    grid-area: blc13;
    position: relative;
    padding: 0 10vw 6vh 1vw;
}
.buup_pg #blc14{
    grid-area: blc14;
    position: relative;
    padding: 0 1vw 6vh 10vw;
}
.buup_pg #blc15{
    grid-area: blc15;
    position: relative;
    padding: 0 10vw 6vh 1vw;
}
.buup_pg #blc16{
    grid-area: blc16;
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2vw;
    margin: 0 10vw 4vh 10vw;
    padding: 0 20vw 0 20vw;
}
.buup_pg #sec4{
    grid-area: sec4;
}
.buup_pg #blc18{
    grid-area: blc18;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    height: 80vh;
}
.buup_pg #blc19{
    grid-area: blc19;
    position: relative;
    padding: 0 1vw 4vh 10vw;
}
.buup_pg #blc20{
    grid-area: blc20;
    position: relative;
    padding: 0 10vw 4vh 1vw;
}
.buup_pg #blc20 img{
    object-fit: cover;
}
.buup_pg #blc21{
    grid-area: blc21;
    position: relative;
    padding: 0 1vw 6vh 10vw;
}
.buup_pg #blc21 img{
    object-fit: cover;
}
.buup_pg #blc22{
    grid-area: blc22;
    position: relative;
    padding: 0 10vw 6vh 1vw;
}

/* Peppy Clips */
.peppy_pg{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "logo       .       nav     nav"
        "proj       proj    proj    proj"
        "blc1       blc1    blc1    blc1"
        "brief      brief   brief   brief"
        "sec1       sec1    sec1    sec1"
        "blc2       blc2    blc2    blc2"
        "blc3       blc3    blc3    blc3"
        "blc4       blc4    blc4    blc4"
        "blc5       blc5    blc5    blc5"
        "sec2       sec2    sec2    sec2"
        "blc6       blc6    blc7    blc7"
        "blc8       blc8    blc8    blc8"
        "blc9       blc9    blc10   blc10"
        "blc11      blc11   blc12   blc12"
        "footer     footer  footer  footer";
}
.img-pc{
    object-fit: contain;
    width: 100%;
    height: 100%;
}
.peppy_pg #blc1{
    grid-area: blc1;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    height: 80vh;
}
.peppy_pg #sec1{
    grid-area: sec1;
}
.peppy_pg #blc2{
    grid-area: blc2;
    position: relative;
    padding: 0 10vw 10vh 10vw;
}
.peppy_pg #blc3{
    grid-area: blc3;
    display: flex;
    position: relative;
    padding: 0 10vw 10vh 10vw;
    height: 40vh;
}
.peppy_pg #blc4{
    grid-area: blc4;
    position: relative;
    padding: 0 10vw 0 10vw;
}
.peppy_pg #blc5{
    grid-area: blc5;
    position: relative;
    padding: 0 10vw 4vh 10vw;
}
.peppy_pg #sec2{
    grid-area: sec2;
}
.peppy_pg #blc6{
    grid-area: blc6;
    position: relative;
    padding: 0 1vw 6vh 10vw;
    height: 80vh;
}
.peppy_pg #blc7{
    grid-area: blc7;
    position: relative;
    padding: 0 10vw 6vh 1vw;
    height: 80vh;
}
.peppy_pg #blc8{
    grid-area: blc8;
    position: relative;
    padding: 0 10vw 4vh 10vw;
}
.peppy_pg #blc9{
    grid-area: blc9;
    position: relative;
    padding: 0 1vw 4vh 10vw;
}
.peppy_pg #blc10{
    grid-area: blc10;
    position: relative;
    padding: 0 10vw 4vh 1vw;
}
.peppy_pg #blc11{
    grid-area: blc11;
    position: relative;
    padding: 0 1vw 6vh 10vw;
}
.peppy_pg #blc12{
    grid-area: blc12;
    position: relative;
    padding: 0 10vw 6vh 1vw;
}

/* Shall We? */
.shwe_pg{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "logo       .       nav     nav"
        "proj       proj    proj    proj"
        "blc1       blc1    blc1    blc1"
        "brief      brief   brief   brief"
        "sec1       sec1    sec1    sec1"
        "blc2       blc2    blc3    blc3"
        "blc4       blc4    blc5    blc5"
        "blc6       blc6    blc7    blc7"
        "blc8       blc8    blc8    blc8"
        "sec2       sec2    sec2    sec2"
        "blc9       blc9    blc9    blc9"
        "sec3       sec3    sec3    sec3"
        "blc10      blc10   blc10   blc10"
        "sec4       sec4    sec4    sec4"
        "blc11      blc11   blc12   blc12"
        "blc13      blc13   blc13   blc13"
        "blc14      blc14   blc14   blc14"
        "footer     footer  footer  footer";
}
.img-shwe{
    object-fit: contain;
    width: 100%;
    height: 100%;
}
.shwe_pg #blc1{
    grid-area: blc1;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    height: 80vh;
}
.shwe_pg #sec1{
    grid-area: sec1;
}
.shwe_pg #blc2{
    grid-area: blc2;
    position: relative;
    padding: 0 1vw 4vh 10vw;
}
.shwe_pg #blc3{
    grid-area: blc3;
    position: relative;
    padding: 0 10vw 4vh 1vw;
}
.shwe_pg #blc4{
    grid-area: blc4;
    position: relative;
    padding: 0 1vw 4vh 10vw;
}
.shwe_pg #blc5{
    grid-area: blc5;
    position: relative;
    padding: 0 10vw 4vh 1vw;
}
.shwe_pg #blc6{
    grid-area: blc6;
    position: relative;
    padding: 0 1vw 4vh 10vw;
    height: 80vh;
}
.shwe_pg #blc7{
    grid-area: blc7;
    position: relative;
    margin: 0 10vw 4vh 1vw;
    height: 80vh;
}
.shwe_pg #blc8{
    grid-area: blc8;
    display: grid;
    padding: 0 10vw 4vh 10vw;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
        "bb1     bb2     bb3"
}
.shwe_pg #blc8 #bb1{
    grid-area: bb1;
    position: relative;
}
.shwe_pg #blc8 #bb2{
    grid-area: bb2;
    position: relative;
}
.shwe_pg #blc8 #bb3{
    grid-area: bb3;
    position: relative;
}
.shwe_pg #blc8 #bb3 img{
    object-fit: cover;
}
.shwe_pg #sec2{
    grid-area: sec2;
}
.shwe_pg #blc9{
    grid-area: blc9;
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1vw;
    margin: 0 10vw 4vh 10vw;
    padding: 0 4vw 0 4vw;
    height: 80vh;
    overflow-y: scroll;
}
.shwe_pg #blc9::-webkit-scrollbar{
    width: 0.7vh;
}
.shwe_pg #sec3{
    grid-area: sec3;
}
.shwe_pg #blc10{
    grid-area: blc10;
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1vw;
    margin: 0 10vw 4vh 10vw;
    padding: 0 4vw 0 4vw;
    height: 80vh;
    overflow-y: scroll;
}
.shwe_pg #blc10::-webkit-scrollbar{
    width: 0.7vh;
}
.shwe_pg #sec4{
    grid-area: sec4;
}
.shwe_pg #blc11{
    grid-area: blc11;
    position: relative;
    padding: 0 1vw 6vh 10vw;
}
.shwe_pg #blc12{
    grid-area: blc12;
    position: relative;
    padding: 0 10vw 6vh 1vw;
}
.shwe_pg #blc13{
    grid-area: blc13;
    position: relative;
    padding: 0 10vw 6vh 10vw;
}
.shwe_pg #blc13{
    grid-area: blc13;
    position: relative;
    padding: 0 10vw 4vh 10vw;
}
.shwe_pg #blc14{
    grid-area: blc14;
    position: relative;
    padding: 0 10vw 6vh 10vw;
}

/* Breaux Healers */
.breaux_pg{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "logo       .       nav     nav"
        "proj       proj    proj    proj"
        "blc1       blc1    blc1    blc1"
        "brief      brief   brief   brief"
        "sec1       sec1    sec1    sec1"
        "blc2       blc2    blc2    blc2"
        "sec2       sec2    sec2    sec2"
        "blc4       blc4    blc4    blc4"
        "blc5       blc5    blc5    blc5"
        "sec3       sec3    sec3    sec3"
        "blc6       blc6    blc7    blc7"
        "blc8       blc8    blc9    blc9"
        "sec4       sec4    sec4    sec4"
        "blc3       blc3    blc3    blc3"
        "sec5       sec5    sec5    sec5"
        "blc10      blc10   blc11   blc11"
        "blc10      blc10   blc12   blc12"
        "blc10      blc10   blc13   blc13"
        "sec6       sec6    sec6    sec6"
        "blc14      blc14   blc15   blc15"
        "blc16      blc16   blc15   blc15"
        "blc17      blc17   blc17   blc17"
        "blc18      blc18   blc19   blc19"
        "blc20      blc20   blc21   blc21"
        "footer     footer  footer  footer";
}
.img-breaux{
    object-fit: contain;
    width: 100%;
    height: 100%;
}
.breaux_pg #blc1{
    grid-area: blc1;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    height: 80vh;
}
.breaux_pg #sec1{
    grid-area: sec1;
}
.breaux_pg #blc2{
    grid-area: blc2;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    height: 80vh;
}
.breaux_pg #sec2{
    grid-area: sec2;
}
.breaux_pg #blc4{
    grid-area: blc4;
    position: relative;
    padding: 0 10vw 6vh 10vw;
    height: 60vh;
}
.breaux_pg #blc4 img{
    object-fit: cover;
}
.breaux_pg #blc5{
    grid-area: blc5;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    height: 70vh;
}
.breaux_pg #blc5 img{
    object-fit: cover;
}
.breaux_pg #sec3{
    grid-area: sec3;
}
.breaux_pg #blc6{
    grid-area: blc6;
    position: relative;
    padding: 0 1vw 4vh 10vw;
}
.breaux_pg #blc7{
    grid-area: blc7;
    position: relative;
    padding: 0 10vw 4vh 1vw;
    height: 40vh;
}
.breaux_pg #blc7 img{
    transform: scale(0.75,0.75);
}
.breaux_pg #blc8{
    grid-area: blc8;
    position: relative;
    padding: 0 1vw 4vh 10vw;
}
.breaux_pg #blc9{
    grid-area: blc9;
    position: relative;
    padding: 0 10vw 4vh 1vw;
}
.breaux_pg #sec4{
    grid-area: sec4;
}
.breaux_pg #blc3{
    grid-area: blc3;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    height: 80vh;
}
.breaux_pg #sec5{
    grid-area: sec5;
}
.breaux_pg #blc10{
    grid-area: blc10;
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1vw;
    margin: 0 1vw 4vh 10vw;
    padding: 0 4vw 0 4vw;
}
.breaux_pg #blc11{
    grid-area: blc11;
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1vw;
    margin: 0 10vw 4vh 1vw;
    padding: 0 6vw 0 6vw;
}
.breaux_pg #blc12{
    grid-area: blc12;
    position: relative;
    padding: 0 10vw 4vh 1vw;
    height: 20vh;
}
.breaux_pg #blc13{
    grid-area: blc13;
    position: relative;
    padding: 0 10vw 4vh 1vw;
    height: 30vh;
}
.breaux_pg #sec6{
    grid-area: sec6;
}
.breaux_pg #blc14{
    grid-area: blc14;
    position: relative;
    margin: 0 1vw 2vh 10vw;
    height: 50vh;
    overflow: hidden;
}
.breaux_pg #blc14 img{
    object-fit: cover;
    transform: scale(1.2,1.2);
    object-position: 130%;
}
.breaux_pg #blc15{
    grid-area: blc15;
    position: relative;
    padding: 0 10vw 4vh 1vw;
}
.breaux_pg #blc15 img{
    object-fit: cover;
}
.breaux_pg #blc16{
    grid-area: blc16;
    position: relative;
    padding: 0 1vw 4vh 10vw;
    height: 40vh;
}
.breaux_pg #blc16 img{
    object-fit: cover;
}
.breaux_pg #blc17{
    grid-area: blc17;
    position: relative;
    margin: 0 10vw 4vh 10vw;
    overflow: hidden;
}
.breaux_pg #blc17 img{
    transform: scale(1.1,1.1);
    object-position: 50% -700%;
}
.breaux_pg #blc18{
    grid-area: blc18;
    position: relative;
    margin: 0 1vw 4vh 10vw;
}
.breaux_pg #blc19{
    grid-area: blc19;
    position: relative;
    padding: 0 10vw 4vh 1vw;
}
.breaux_pg #blc20{
    grid-area: blc20;
    position: relative;
    margin: 0 1vw 6vh 10vw;
}
.breaux_pg #blc21{
    grid-area: blc21;
    position: relative;
    padding: 0 10vw 6vh 1vw;
}

/* Futura Presents: The Faces of Fear */
.fafe_pg{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "logo       .       nav     nav"
        "proj       proj    proj    proj"
        "blc1       blc1    blc1    blc1"
        "brief      brief   brief   brief"
        "sec1       sec1    sec1    sec1"
        "blc2       blc2    blc2    blc2"
        "sec2       sec2    sec2    sec2"
        "blc3       blc3    blc3    blc3"
        "blc4       blc4    blc4    blc4"
        "sec3       sec3    sec3    sec3"
        "blc5       blc5    blc5    blc5"
        "blc6       blc6    blc6    blc6"
        "blc7       blc7    blc7    blc7"
        "sec4       sec4    sec4    sec4"
        "blc8       blc8    blc8    blc8"
        "blc9       blc9    blc9    blc9"
        "sec5       sec5    sec5    sec5"
        "blc10      blc10   blc10   blc10"
        "sec6       sec6    sec6    sec6"
        "blc11      blc11   blc11   blc11"
        "blc12      blc12   blc13   blc13"
        "blc14      blc14   blc15   blc15"
        "sec7       sec7    sec7    sec7"
        "blc16      blc16   blc17   blc17"
        "blc18      blc18   blc19   blc19"
        "blc20      blc20   blc20   blc20"
        "sec8       sec8    sec8    sec8"
        "blc21      blc21   blc21   blc21"
        "blc22      blc22   blc23   blc23"
        "blc24      blc24   blc24   blc24"
        "blc25      blc25   blc26   blc26"
        "blc27      blc27   blc27   blc27"
        "blc28      blc28   blc28   blc28"
        "blc29      blc29   blc30   blc30"
        "blc31      blc31   blc31   blc31"
        "blc32      blc32   blc33   blc33"
        "blc34      blc34   blc34   blc34"
        "footer     footer  footer  footer";
}
.img-fafe{
    object-fit: contain;
    width: 100%;
    height: 100%;
}
.fafe_pg #blc1{
    grid-area: blc1;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    height: 80vh;
}
.fafe_pg #sec1{
    grid-area: sec1;
}
.fafe_pg #blc2{
    grid-area: blc2;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    height: 80vh;
}
.fafe_pg #sec2{
    grid-area: sec2;
}
.fafe_pg #blc3{
    grid-area: blc3;
    position: relative;
    padding: 0 16vw 4vh 16vw;
    height: 46vh;
}
.fafe_pg #blc3 img{
    object-fit: cover;
    object-position: 50% 40%;
}
.fafe_pg #blc4{
    grid-area: blc4;
    position: relative;
    padding: 0 16vw 4vh 16vw;
    height: 60vh;
}
.fafe_pg #blc4 img{
    object-fit: cover;
    object-position: 50% 70%;
}
.fafe_pg #sec3{
    grid-area: sec3;
}
.fafe_pg #blc5{
    grid-area: blc5;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    height: 40vh;
}
.fafe_pg #blc5 img{
    object-fit: cover;
    object-position: 50% 40%;
}
.fafe_pg #blc6{
    grid-area: blc6;
    position: relative;
    padding: 0 10vw 8vh 10vw;
    height: 50vh;
}
.fafe_pg #blc6 img{
    object-fit: cover;
    object-position: 50% 40%;
}
.fafe_pg #blc7{
    grid-area: blc7;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    display: grid;
    column-gap: 2vw;
    grid-template-columns: repeat(4, 1fr);
}
.fafe_pg #sec4{
    grid-area: sec4;
}
.fafe_pg #blc8{
    grid-area: blc8;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    height: 70vh;
}
.fafe_pg #blc8 img{
    object-fit: cover;
    object-position: 50% 40%;
}
.fafe_pg #blc9{
    grid-area: blc9;
    position: relative;
    padding: 0 10vw 10vh 10vw;
    display: grid;
    column-gap: 5vw;
    grid-template-columns: repeat(3, 1fr);
}
.fafe_pg #sec5{
    grid-area: sec5;
}
.fafe_pg #blc10{
    grid-area: blc10;
    position: relative;
    padding: 0 15vw 4vh 15vw;
    display: grid;
    column-gap: 5vw;
    grid-template-columns: repeat(3, 1fr);
}
.fafe_pg #sec6{
    grid-area: sec6;
}
.fafe_pg #blc11{
    grid-area: blc11;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    height: 60vh;
}
.fafe_pg #blc11 img{
    object-fit: cover;
    object-position: 50% 55%;
}
.fafe_pg #blc12{
    grid-area: blc12;
    position: relative;
    margin: 0 1vw 4vh 10vw;
}
.fafe_pg #blc13{
    grid-area: blc13;
    position: relative;
    margin: 0 10vw 4vh 1vw;
}
.fafe_pg #blc14{
    grid-area: blc14;
    position: relative;
    margin: 0 1vw 4vh 10vw;
}
.fafe_pg #blc15{
    grid-area: blc15;
    position: relative;
    margin: 0 10vw 4vh 1vw;
}
.fafe_pg #sec7{
    grid-area: sec7;
}
.fafe_pg #blc16{
    grid-area: blc16;
    position: relative;
    display: grid;
    gap: 1vw;
    grid-template-columns: repeat(3, 1fr);
    padding: 0 1vw 10vh 10vw;
}
.fafe_pg #blc16 img:hover{
    transform: scale(1.7,1.7);
    transition: 0.10s ease-out;

}
.fafe_pg #blc17{
    grid-area: blc17;
    position: relative;
    display: grid;
    gap: 1vw;
    grid-template-columns: repeat(3, 1fr);
    padding: 0 10vw 10vh 1vw;
}
.fafe_pg #blc17 img:hover{
    transform: scale(1.7,1.7);
    transition: 0.10s ease-out;

}
.fafe_pg #blc18{
    grid-area: blc18;
    position: relative;
    display: grid;
    gap: 1vw;
    grid-template-columns: repeat(3, 1fr);
    padding: 0 1vw 10vh 10vw;
}
.fafe_pg #blc18 img:hover{
    transform: scale(1.7,1.7);
    transition: 0.10s ease-out;

}
.fafe_pg #blc19{
    grid-area: blc19;
    position: relative;
    display: grid;
    gap: 1vw;
    grid-template-columns: repeat(3, 1fr);
    padding: 0 10vw 10vh 1vw;
}
.fafe_pg #blc19 img:hover{
    transform: scale(1.7,1.7);
    transition: 0.10s ease-out;
}
.fafe_pg #blc20{
    grid-area: blc20;
    position: relative;
    display: grid;
    gap: 2vw;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
    "bb1     bb2     bb3     bb3";
    padding: 0 12vw 10vh 12vw;
}
.fafe_pg #blc20 #bb1{
    grid-area: bb1;
    position: relative;
}
.fafe_pg #blc20 #bb2{
    grid-area: bb2;
    position: relative;
}
.fafe_pg #blc20 #bb3{
    grid-area: bb3;
    position: relative;
}
.fafe_pg #sec8{
    grid-area: sec8;
}
.fafe_pg #blc21{
    grid-area: blc21;
    position: relative;
    margin: 0 10vw 4vh 10vw;
    height: 80vh;
}
.fafe_pg #blc21 img{
    object-fit: cover;
    object-position: 50% 60%;
}
.fafe_pg #blc22{
    grid-area: blc22;
    position: relative;
    margin: 0 1vw 4vh 10vw;
}
.fafe_pg #blc23{
    grid-area: blc23;
    position: relative;
    margin: 0 10vw 4vh 1vw;
}
.fafe_pg #blc24{
    grid-area: blc24;
    position: relative;
    margin: 0 10vw 4vh 10vw;
    height: 80vh;
}
.fafe_pg #blc24 img{
    object-fit: cover;
    object-position: 50% 60%;
}
.fafe_pg #blc25{
    grid-area: blc25;
    position: relative;
    padding: 0 1vw 4vh 10vw;
}
.fafe_pg #blc26{
    grid-area: blc26;
    position: relative;
    margin: 0 10vw 4vh 1vw;
}
.fafe_pg #blc27{
    grid-area: blc27;
    position: relative;
    margin: 0 10vw 4vh 10vw;
}
.fafe_pg #blc28{
    grid-area: blc28;
    position: relative;
    margin: 0 10vw 4vh 10vw;
    height: 80vh;
}
.fafe_pg #blc28 img{
    object-fit: cover;
    object-position: 50% 60%;
}
.fafe_pg #blc29{
    grid-area: blc29;
    position: relative;
    margin: 0 1vw 4vh 10vw;
}
.fafe_pg #blc30{
    grid-area: blc30;
    position: relative;
    margin: 0 10vw 4vh 1vw;
}
.fafe_pg #blc31{
    grid-area: blc31;
    position: relative;
    margin: 0 10vw 4vh 10vw;
    height: 80vh;
}
.fafe_pg #blc31 img{
    object-fit: cover;
    object-position: 50% 60%;
}
.fafe_pg #blc32{
    grid-area: blc32;
    position: relative;
    padding: 0 1vw 4vh 10vw;
}
.fafe_pg #blc33{
    grid-area: blc33;
    position: relative;
    margin: 0 10vw 4vh 1vw;
}
.fafe_pg #blc34{
    grid-area: blc34;
    position: relative;
    margin: 0 10vw 6vh 10vw;
}

/* Senzu Ale House */
.senzu_pg{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "logo       .       nav     nav"
        "proj       proj    proj    proj"
        "blc1       blc1    blc1    blc1"
        "brief      brief   brief   brief"
        "sec1       sec1    sec1    sec1"
        "blc2       blc2    blc2    blc2"
        "sec2       sec2    sec2    sec2"
        "blc3       blc3    blc3    blc3"
        "blc4       blc4    blc4    blc4"
        "blc5       blc5    blc5    blc5"
        "blc6       blc6    blc7    blc7"
        "blc8       blc8    blc8    blc8"
        "blc9       blc9    blc9    blc9"
        "sec3       sec3    sec3    sec3"
        "blc10      blc10   blc10   blc10"
        "blc11      blc11   blc11   blc11"
        "sec4       sec4    sec4    sec4"
        "blc12      blc12   blc12   blc12"
        "sec5       sec5    sec5    sec5"
        "blc13      blc13   blc13   blc13"
        "blc14      blc14   blc14   blc14"
        "sec6       sec6    sec6    sec6"
        "blc15      blc15   blc15   blc15"
        "blc16      blc16   blc16   blc16"
        "sec7       sec7    sec7    sec7"
        "blc17      blc17   blc17   blc17"
        "blc18      blc18   blc19   blc19"
        "blc20      blc20   blc20   blc20"
        "blc21      blc21   blc22   blc22"
        "blc23      blc23   blc23   blc23"
        "blc24      blc24   blc24   blc24"
        "blc25      blc25   blc26   blc26"
        "blc27      blc27   blc28   blc28"
        "blc29      blc29   blc29   blc29"
        "blc31      blc31   blc32   blc32"
        "blc33      blc33   blc33   blc33"
        "blc34      blc34   blc35   blc35"
        "blc36      blc36   blc37   blc37"
        "blc38      blc38   blc39   blc39"
        "blc30      blc30   blc30   blc30"
        "blc40      blc40   blc41   blc41"
        "blc42      blc42   blc42   blc42"
        "blc43      blc43   blc43   blc43"
        "footer     footer  footer  footer";
}
.img-senzu{
    object-fit: contain;
    width: 100%;
    height: 100%;
}
.senzu_pg #blc1{
    grid-area: blc1;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    height: 80vh;
}
.senzu_pg #sec1{
    grid-area: sec1;
}
.senzu_pg #blc2{
    grid-area: blc2;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    height: 70vh;
}
.senzu_pg #blc2 img{
    object-fit: cover;
}
.senzu_pg #sec2{
    grid-area: sec2;
}
.senzu_pg #blc3{
    grid-area: blc3;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    height: 70vh;
}
.senzu_pg #blc4{
    grid-area: blc4;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    height: 70vh;
}
.senzu_pg #blc5{
    grid-area: blc5;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    height: 70vh;
}
.senzu_pg #blc6{
    grid-area: blc6;
    position: relative;
    margin: 0 1vw 4vh 10vw;
    height: 40vh;
    overflow: hidden;
}
.senzu_pg #blc6 img{
    transform: scale(1.3,1.3);
}
.senzu_pg #blc7{
    grid-area: blc7;
    position: relative;
    margin: 0 10vw 4vh 1vw;
    height: 40vh;
    overflow: hidden;
}
.senzu_pg #blc7 img{
    transform: scale(1.2,1.2);
}
.senzu_pg #blc8{
    grid-area: blc8;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    height: 60vh;
}
.senzu_pg #blc8 img{
    object-fit: cover;
}
.senzu_pg #blc9{
    grid-area: blc9;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    height: 60vh;
}
.senzu_pg #blc9 img{
    object-fit: cover;
}
.senzu_pg #sec3{
    grid-area: sec3;
}
.senzu_pg #blc10{
    grid-area: blc10;
    position: relative;
    padding: 0 10vw 8vh 10vw;
    display: grid;
    gap: 1vw;
    grid-template-columns: repeat(3, 1fr);
}
.senzu_pg #blc11{
    grid-area: blc11;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    display: grid;
    gap: 1vw;
    grid-template-columns: repeat(2, 1fr);
}
.senzu_pg #sec4{
    grid-area: sec4;
}
.senzu_pg #blc12{
    grid-area: blc12;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    height: 80vh;
}
.senzu_pg #blc12 img{
    object-fit: cover;
}
.senzu_pg #sec5{
    grid-area: sec5;
}
.senzu_pg #blc13{
    grid-area: blc13;
    position: relative;
    margin: 0 10vw 8vh 10vw;
    display: grid;
    gap: 1vw;
    grid-template-columns: repeat(2, 1fr);
    padding: 0 2vw 0 2vw;
    height: 80vh;
    overflow-y: scroll;
}
.senzu_pg #blc13::-webkit-scrollbar{
    width: 0.7vh;
}
.senzu_pg #blc14{
    grid-area: blc14;
    position: relative;
    margin: 0 10vw 4vh 10vw;
    display: grid;
    gap: 1vw;
    grid-template-columns: repeat(2, 1fr);
    padding: 0 2vw 0 2vw;
    height: 80vh;
    overflow-y: scroll;
}
.senzu_pg #blc14::-webkit-scrollbar{
    width: 0.7vh;
}
.senzu_pg #sec6{
    grid-area: sec6;
}
.senzu_pg #blc15{
    grid-area: blc15;
    position: relative;
    padding: 0 10vw 8vh 10vw;
}
.senzu_pg #blc16{
    grid-area: blc16;
    position: relative;
    padding: 0 10vw 4vh 10vw;
}
.senzu_pg #sec7{
    grid-area: sec7;
}
.senzu_pg #blc17{
    grid-area: blc17;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    height: 80vh;
}
.senzu_pg #blc18{
    grid-area: blc18;
    position: relative;
    padding: 0 0 4vh 10vw;
}
.senzu_pg #blc19{
    grid-area: blc19;
    position: relative;
    padding: 0 10vw 4vh 0;
}
.senzu_pg #blc20{
    grid-area: blc20;
    position: relative;
    margin: 0 10vw 4vh 10vw;
    height: 90vh;
}
.senzu_pg #blc20 img{
    object-fit: cover;
    object-position: 50% 25%;
}
.senzu_pg #blc21{
    grid-area: blc21;
    position: relative;
    padding: 0 1vw 4vh 10vw;
}
.senzu_pg #blc22{
    grid-area: blc22;
    position: relative;
    padding: 0 10vw 4vh 1vw;
}
.senzu_pg #blc23{
    grid-area: blc23;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    height: 100vh;
}
.senzu_pg #blc24{
    grid-area: blc24;
    position: relative;
    margin: 0 10vw 4vh 10vw;
    display: grid;
    gap: 1vw;
    grid-template-columns: repeat(3, 1fr);
}
.senzu_pg #blc25{
    grid-area: blc25;
    position: relative;
    padding: 0 1vw 4vh 10vw;
}
.senzu_pg #blc26{
    grid-area: blc26;
    position: relative;
    padding: 0 10vw 4vh 1vw;
}
.senzu_pg #blc27{
    grid-area: blc27;
    position: relative;
    padding: 0 1vw 4vh 10vw;
}
.senzu_pg #blc28{
    grid-area: blc28;
    position: relative;
    padding: 0 10vw 4vh 1vw;
}
.senzu_pg #blc29{
    grid-area: blc29;
    position: relative;
    margin: 0 10vw 4vh 10vw;
    height: 90vh;
}
.senzu_pg #blc29 img{
    object-fit: cover;
    object-position: 50% 60%;
}
.senzu_pg #blc31{
    grid-area: blc31;
    position: relative;
    padding: 0 1vw 4vh 10vw;
}
.senzu_pg #blc32{
    grid-area: blc32;
    position: relative;
    padding: 0 10vw 4vh 1vw;
}
.senzu_pg #blc33{
    grid-area: blc33;
    position: relative;
    margin: 0 10vw 4vh 10vw;
    height: 80vh;
}
.senzu_pg #blc33 img{
    object-fit: cover;
}
.senzu_pg #blc34{
    grid-area: blc34;
    position: relative;
    padding: 0 1vw 4vh 10vw;
}
.senzu_pg #blc35{
    grid-area: blc35;
    position: relative;
    padding: 0 10vw 4vh 1vw;
}
.senzu_pg #blc36{
    grid-area: blc36;
    position: relative;
    padding: 0 1vw 4vh 10vw;
}
.senzu_pg #blc37{
    grid-area: blc37;
    position: relative;
    padding: 0 10vw 4vh 1vw;
}
.senzu_pg #blc38{
    grid-area: blc38;
    position: relative;
    padding: 0 1vw 4vh 10vw;
}
.senzu_pg #blc39{
    grid-area: blc39;
    position: relative;
    margin: 0 10vw 4vh 1vw;
    overflow: hidden;
}
.senzu_pg #blc39 img{
    object-fit: cover;
    transform: scale(1.7,1.7);
}
.senzu_pg #blc30{
    grid-area: blc30;
    position: relative;
    margin: 0 10vw 4vh 10vw;
    height: 80vh;
}
.senzu_pg #blc30 img{
    object-fit: cover;
    object-position: 50% 60%;
}
.senzu_pg #blc40{
    grid-area: blc40;
    position: relative;
    margin: 0 1vw 4vh 10vw;
    height: 70vh;
    overflow: hidden;
}
.senzu_pg #blc40 img{
    transform: scale(1.2,1.2);
    object-position: 50% -20%;
}
.senzu_pg #blc41{
    grid-area: blc41;
    position: relative;
    margin: 0 10vw 4vh 1vw;
    height: 70vh;
}
.senzu_pg #blc41 img{
    object-fit: cover;
}
.senzu_pg #blc42{
    grid-area: blc42;
    position: relative;
    margin: 0 10vw 4vh 10vw;
}
.senzu_pg #blc43{
    grid-area: blc43;
    position: relative;
    padding: 0 10vw 6vh 10vw;
    height: 100vh;
}
.senzu_pg #blc43 img{
    object-fit: cover;
    object-position: 50% 100%;
}

/* spotlight i. */
.si_pg{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "logo       .       nav     nav"
        "proj       proj    proj    proj"
        "brief      brief   brief   brief"
        "blc1       blc1    blc2    blc2"
        "blc3       blc3    blc4    blc4"
        "blc5       blc5    .       ."
        "footer     footer  footer  footer";
}
.img-si{
    object-fit: contain;
    width: 100%;
    height: 100%;
}
.si_pg #blc1{
    grid-area: blc1;
    position: relative;
    padding: 0 1vw 4vh 10vw;
}
.si_pg #blc2{
    grid-area: blc2;
    position: relative;
    padding: 0 10vw 4vh 1vw;
}
.si_pg #blc3{
    grid-area: blc3;
    position: relative;
    padding: 0 1vw 4vh 10vw;
}
.si_pg #blc4{
    grid-area: blc4;
    position: relative;
    padding: 0 10vw 4vh 1vw;
}
.si_pg #blc5{
    grid-area: blc5;
    position: relative;
    padding: 0 1vw 6vh 10vw;
}

/* spotlight ii. */
.sii_pg{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "logo       .       nav     nav"
        "proj       proj    proj    proj"
        "brief      brief   brief   brief"
        "blc1       blc1    blc2    blc2"
        "blc3       blc3    blc4    blc4"
        "blc5       blc5    blc6    blc6"
        "footer     footer  footer  footer";
}
.img-sii{
    object-fit: contain;
    width: 100%;
    height: 100%;
}
.sii_pg #blc1{
    grid-area: blc1;
    position: relative;
    padding: 0 1vw 4vh 10vw;
}
.sii_pg #blc2{
    grid-area: blc2;
    position: relative;
    padding: 0 10vw 4vh 1vw;
}
.sii_pg #blc3{
    grid-area: blc3;
    position: relative;
    padding: 0 1vw 4vh 10vw;
}
.sii_pg #blc4{
    grid-area: blc4;
    position: relative;
    padding: 0 10vw 4vh 1vw;
}
.sii_pg #blc5{
    grid-area: blc5;
    position: relative;
    padding: 0 1vw 6vh 10vw;
}
.sii_pg #blc6{
    grid-area: blc6;
    position: relative;
    padding: 0 10vw 6vh 1vw;
}

/* Night & Day */
.nightday_pg{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "logo       .       nav     nav"
        "proj       proj    proj    proj"
        "brief      brief   brief   brief"
        "blc1       blc1    blc2    blc2"
        "blc3       blc3    blc4    blc4"
        "blc5       blc5    blc6    blc6"
        "footer     footer  footer  footer";
}
.img-nightday{
    object-fit: contain;
    width: 100%;
    height: 100%;
}
.nightday_pg brief{
    text-align: center;
}
.nightday_pg #blc1{
    grid-area: blc1;
    position: relative;
    padding: 0 1vw 4vh 10vw;
}
.nightday_pg #blc2{
    grid-area: blc2;
    position: relative;
    padding: 0 10vw 4vh 1vw;
}
.nightday_pg #blc3{
    grid-area: blc3;
    position: relative;
    padding: 0 1vw 4vh 10vw;
}
.nightday_pg #blc4{
    grid-area: blc4;
    position: relative;
    padding: 0 10vw 4vh 1vw;
}
.nightday_pg #blc5{
    grid-area: blc5;
    position: relative;
    padding: 0 1vw 6vh 10vw;
}
.nightday_pg #blc6{
    grid-area: blc6;
    position: relative;
    padding: 0 10vw 6vh 1vw;
}

/* Am I Pretty / You Should've Seen the Other Guy / Heart-Broken */
.aipysstoghb_pg{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "logo       .       nav     nav"
        "proj       proj    proj    proj"
        "blc1       blc1    blc1    blc1"
        "brief      brief   brief   brief"
        "sec1       sec1    sec1    sec1"
        "blc2       blc2    blc3    blc3"
        "sec2       sec2    sec2    sec2"
        "blc4       blc4    blc5    blc5"
        "blc6       blc6    blc7    blc7"
        "sec3       sec3    sec3    sec3"
        "blc8       blc8    blc9    blc9"
        "blc10      blc10   blc11   blc11"
        "footer     footer  footer  footer";
}
.img-aipysstoghb{
    object-fit: contain;
    width: 100%;
    height: 100%;
}
.aipysstoghb_pg #blc1{
    grid-area: blc1;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    height: 80vh;
}
.aipysstoghb_pg brief a{
    color: #e8bc5d;
}
.aipysstoghb_pg brief a:hover{
    color: #202128;
}
.aipysstoghb_pg #sec1{
    grid-area: sec1;
}
.aipysstoghb_pg #blc2{
    grid-area: blc2;
    position: relative;
    padding: 0 1vw 4vh 10vw;
}
.aipysstoghb_pg #blc3{
    grid-area: blc3;
    position: relative;
    padding: 0 10vw 4vh 1vw;
}
.aipysstoghb_pg #sec2{
    grid-area: sec2;
}
.aipysstoghb_pg #blc4{
    grid-area: blc4;
    position: relative;
    padding: 0 1vw 4vh 10vw;
}
.aipysstoghb_pg #blc5{
    grid-area: blc5;
    position: relative;
    padding: 0 10vw 4vh 1vw;
}
.aipysstoghb_pg #blc6{
    grid-area: blc6;
    position: relative;
    padding: 0 1vw 4vh 10vw;
}
.aipysstoghb_pg #blc7{
    grid-area: blc7;
    position: relative;
    padding: 0 10vw 4vh 1vw;
}
.aipysstoghb_pg #sec3{
    grid-area: sec3;
}
.aipysstoghb_pg #blc8{
    grid-area: blc8;
    position: relative;
    padding: 0 1vw 4vh 10vw;
}
.aipysstoghb_pg #blc9{
    grid-area: blc9;
    position: relative;
    padding: 0 10vw 4vh 1vw;
}
.aipysstoghb_pg #blc10{
    grid-area: blc10;
    position: relative;
    padding: 0 1vw 4vh 10vw;
}
.aipysstoghb_pg #blc11{
    grid-area: blc11;
    position: relative;
    padding: 0 10vw 6vh 1vw;
}

/* Joy Diaries & Pleasure Altars */
.jdpa_pg{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "logo       .       nav     nav"
        "proj       proj    proj    proj"
        "blc1       blc1    blc1    blc1"
        "brief      brief   brief   brief"
        "sec1       sec1    sec1    sec1"
        "blc2       blc2    blc3    blc3"
        "blc4       blc4    blc5    blc5"
        "blc6       blc6    blc7    blc7"
        "blc8       blc8    .       ."
        "sec2       sec2    sec2    sec2"
        "blc9       blc9    blc10   blc10"
        "blc11      blc11   blc12   blc12"
        "footer     footer  footer  footer";
}
.img-jdpa{
    object-fit: contain;
    width: 100%;
    height: 100%;
}
.jdpa_pg #blc1{
    grid-area: blc1;
    position: relative;
    padding: 0 10vw 4vh 10vw;
    height: 80vh;
}
.jdpa_pg #sec1{
    grid-area: sec1;
}
.jdpa_pg #blc2{
    grid-area: blc2;
    position: relative;
    padding: 0 1vw 4vh 10vw;
}
.jdpa_pg #blc3{
    grid-area: blc3;
    position: relative;
    padding: 0 10vw 4vh 1vw;
}
.jdpa_pg #blc4{
    grid-area: blc4;
    position: relative;
    padding: 0 1vw 4vh 10vw;
}
.jdpa_pg #blc5{
    grid-area: blc5;
    position: relative;
    padding: 0 10vw 4vh 1vw;
}
.jdpa_pg #blc6{
    grid-area: blc6;
    position: relative;
    padding: 0 1vw 4vh 10vw;
}
.jdpa_pg #blc7{
    grid-area: blc7;
    position: relative;
    padding: 0 10vw 4vh 1vw;
}
.jdpa_pg #blc8{
    grid-area: blc8;
    position: relative;
    padding: 0 1vw 4vh 10vw;
}
.jdpa_pg #sec2{
    grid-area: sec2;
}
.jdpa_pg #blc9{
    grid-area: blc9;
    position: relative;
    padding: 0 1vw 4vh 10vw;
}
.jdpa_pg #blc10{
    grid-area: blc10;
    position: relative;
    padding: 0 10vw 4vh 1vw;
}
.jdpa_pg #blc11{
    grid-area: blc11;
    position: relative;
    padding: 0 1vw 6vh 10vw;
}
.jdpa_pg #blc12{
    grid-area: blc12;
    position: relative;
    padding: 0 10vw 6vh 1vw;
}

/* resizing for smaller screens */
@media only screen and (max-width: 960px){
    logo{
        background: #F77300;
        /* text-align: center; */
        margin: 1vh 10vw 0 10vw;
        padding-left: 30%;
    }

    nav{
        background: #7A3800;
        grid-area: nav;
        text-transform: capitalize;
        margin: 0 10vw 0 10vw;
        padding: 0 0 0 0;
    }

    p{
        display: flex;
        flex-direction: column;
    }

    .home_pg{
        grid-template-columns: 1fr;
        grid-template-rows: 0.6fr 0.4fr 5fr 0.8fr 0.8fr 0.8fr 0.8fr;
        grid-template-areas: 
            "logo"
            "nav"
            "carousel"
            "sidebar"
            "content1"
            "content2"
            "content3"
            "footer";
    }

    .grde_pg{
        grid-template-columns: 1fr;
        grid-template-rows: repeat(7, 1fr);
        grid-template-areas: 
            "logo"
            "nav"
            "blc1"
            "blc2"
            "blc3"
            "blc4"
            "blc5"
            "blc6"
            "blc7"
            "blc8"
            "blc9"
            "footer";
    }
    .about_page{
        display: grid;
        grid-template-columns: 1fr;
        /* grid-template-rows: 10fr 1fr .1fr 1fr 1fr .1fr; */
        grid-template-areas: 
            "logo"
            "nav"
            "..."
            "photo"
            "bio"
            "footer";
    }
    #photo{
        /* background: #F77300; */
        grid-area: photo;
        padding: 0 10vw 2vh 10vw;
        text-align: right;
    }
    #photo img{
        object-fit: cover;
        width: 100%;
        height: 40vh;
        object-position: 20%;
    }
    #bio{
        /* background: #7A3800; */
        grid-area: bio;
        height: 86vh;
        padding: 0 10vw 0 10vw;
        line-height: 2;
    }
    #bio p{
        width: 100%;
    }

    .uste_pg{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
            "logo"
            "nav"
            "brief"
            "blc1"
            "blc2"  
            "blc3"
            "blc5"
            "blc4"
            "blc6"
            "blc18"
            "blc7"   
            "blc11"
            "blc12"
            "blc13"
            "blc16"
            "blc17"
            "blc19"
            "blc20"
            "process"
            "carousel"
            "footer";
    }
    .uste_pg #blc7 .img-u2, .img-u2{
        object-fit: contain;
        padding: 0 0 2vh 0;
        width: 100%;
    }
    .uste_pg #blc1{
        /* background: #7A3800; */
        grid-area: blc1;
        position: relative;
        padding: 0 10vw 10vh 10vw;
        /* padding: 0 6vw 0 6vw; */
    }
    .uste_pg #blc2{
        grid-area: blc2;
        position: relative;
        padding: 0 10vw 2vh 10vw;
    }
    .uste_pg #blc3{
        grid-area: blc3;
        position: relative;
        padding: 0 10vw 2vh 10vw;
    }
    .uste_pg #blc4{
        grid-area: blc4;
        position: relative;
        padding: 0 10vw 2vh 10vw;
    }
    .uste_pg #blc5{
        grid-area: blc5;
        position: relative;
        padding: 0 10vw 2vh 10vw;
    }
    .uste_pg #blc6{
        grid-area: blc6;
        position: relative;
        padding: 0 10vw 2vh 10vw;
    }
    .uste_pg #blc7{
        grid-area: blc7;
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 0 10vw 2vh 10vw;
    }
    .uste_pg #blc11{
        grid-area: blc11;
        position: relative;
        padding: 0 10vw 2vh 10vw;
    }
    .uste_pg #blc12{
        grid-area: blc12;
        position: relative;
        padding: 0 10vw 2vh 10vw;
    }
    .uste_pg #blc13{
        grid-area: blc13;
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 0 10vw 2vh 10vw;
    }
    .uste_pg #blc16{
        grid-area: blc16;
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 0 10vw 2vh 10vw;
    }
    .uste_pg #blc17{
        grid-area: blc17;
        position: relative;
        padding: 0 10vw 2vh 10vw;
    }
    .uste_pg #blc18{
        grid-area: blc18;
        position: relative;
        padding: 0 10vw 2vh 10vw;
    }
    .uste_pg #blc19{
        grid-area: blc19;
        position: relative;
        padding: 0 10vw 2vh 10vw;
    }
    .uste_pg #blc20{
        grid-area: blc20;
        position: relative;
        padding: 0 10vw 10vh 10vw;
    }
    .uste_pg carousel{
        margin: 0 10vw 0 10vw;
    }

    .broken-hearted{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: 
            "logo"
            "nav"
            "brief"
            "blc1"
            "p1"    
            "blc2"
            "blc3"
            "p2"
            "carousel"
            "footer";
    }
    .broken-hearted #blc1{
        grid-area: blc1;
        position: relative;
        padding: 0 10vw 10vh 10vw;
    }
    .broken-hearted #blc2{
        padding: 0 10vw 0 10vw;
    }
    .broken-hearted #blc3{
        flex-direction: column;
    }
    .broken-hearted #blc3 img{
        object-fit: contain;
        width: 100%;
    }
    .broken-hearted carousel{
        margin: 0 10vw 0 10vw;
    }

    footer{
        /* background: #F99C4B; */
        grid-area: footer;
        margin: 0 2vw 0 2vw;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: 
            "copyright   social_media";
    }
    footer img{
        object-fit: cover;
        width: 26px;
        padding-left: 0.5vw;
    }
}