*,*::before,*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;

}

img, picture, svg, video {
    display: block;
    width: 100%;
    /* height: 100%; */
    /* object-fit: contain; */
}

html {
    font-size: 16px;
}


body {
    width: 100vw;
    height: 100vh;
    margin: 0px;
    overflow: hidden;
    background-color: #fff;

    display: grid;
    place-items: center;
}

footer {
    color: black;
    position: absolute;
    bottom: 3px;
    margin: 0 auto;
    opacity: 0.3;
    font-size: 11px;
}

span {
    opacity: 0;
    font-weight:400;
    font-size: 2.5em;
    color: white;
    transition: opacity 0.5s ease-in-out;
}

.header-container {
    position: absolute;
    top: 0;
    /* background-color: brown; */
    width: 100%;
    height: 7%;
    
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.page-container {
    height: 100vh;
    width: 100vw;

    display: flex;
    justify-content: center;
    align-items: center;
}

#content-wrapper {
    aspect-ratio: 2/3;
    /* aspect-ratio: 1.91/1; */
    /* aspect-ratio: 1.618; */
    /* width: 60%; */
    height: 50%;
    width: 80vmin;
    max-width: 100vmax;
    position: relative;
}

  /* aspect-ratio: 16/9;
    width: 100vmin;
    visibility: hidden;
    border-radius: 50px;
    z-index: -1; */

.shape {
    z-index: 20000;
    cursor: pointer;
    overflow: hidden;
}

#content-wrapper > .shape {
    /* height: 30%;
    width: 30%; */
    /* background-color: rgba(255 255 255 / 25%); */
    position: absolute;
    /* transition: all 750ms ease-in-out; */
    transition: border-radius 0.5s ease-in-out;

    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 10px 30px 0 0;
}

#content-wrapper > .shape:nth-child(1){
    background-color: #F64C3C;
    /* background-color: #F47e3e; */
    /* background-color:#343a40; */
    left:0;
    top: 0;
    height: 60%;
    width: 100%;
    /* z-index: 1; */
    justify-content: space-between;
}


#content-wrapper > .shape:nth-child(2){
    background-color: #1982c4;
    /* background-color: #495057; */
    left:0;
    /* left:60%; */
    top: 60%;
    height: 40%;
    /* height: 56%; */
    width: 60%;
    /* width: 38%; */
}


#content-wrapper > .shape:nth-child(3){
    background-color: #8ac926;
    /* background-color: #6c757d; */
    left:60%;
    /* left:62%; */
    top: 60%;
    height: 40%;
    width: 40%;
    /* width: 38%; */
}

#content-wrapper > .shape:nth-child(4){
    background-color: #6a4c93;
    left:0%;
    top: 0%;
    height: 100%;
    width: 100%;
    visibility: hidden;
} 


.hover {
    border-radius: 50px;
}

.nohover {
    border-radius: 0px;
}

.visible {
    opacity: 1;
    /* transition: opacity 0.3s ease-in-out; */
}

.off {
    visibility: hidden;
}

.add-zindex{
    z-index: 20001;
}

.minus-zindex{
    z-index: 0;
    /* visibility: hidden; */
}

.close {
    width: 50px;
    height: 50px;
    position: fixed;
    z-index: 30000;
    cursor: pointer;
    color: white;
    font-size: 1.5rem;
    padding: 25px;
    background-color: rgba(0 0 0  / 15%);
    visibility: hidden;
    transition: border-radius 0.5s ease-in-out;
    border-radius: 10px;

    top: 20px;
    left: 30px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.close:hover {
    border-radius: 25px;
}

.design-shape-container {
    width: 100%;
    height: 50%;
    align-self: flex-end;
    /* background-color: red;  */
    
    /* margin: 0 0 30px 30px; */

    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
} 

.design-shape {
    width: 55%;
    transform: scale(1.3);
    position: absolute;
    /* visibility: hidden; */
     opacity: 0.2;
    /* top: 120px;
    left: 0px; */
    /* align-self: flex-end; */
    /* visibility: hidden; */
    transition: opacity 0.5s ease-in-out;
}

#photo-shape {
    transform:scale(1.25);
    left: 0px;
}

#contact-shape {
    left: 0px;
    width: 35%;
}

#about-shape {
    width: 50%;
    /* transform: scale(1.3); */
    position: absolute;
    /* visibility: hidden; */
    opacity: 0.2;
  
    bottom: -55px;
    left: 0px;
    width: 35%;
}


.is-active {
    opacity: 0.2;
    /* visibility: visible; */
    /* transition: opacity 0.4s ease-in-out; */
}

.shape-hover {
    opacity:0.5;
    transition: opacity 0.4s ease-in-out;
    transition-delay: 0.15s;
}

/* .shape-stay:focus {
    opacity:0.4;
} */

.content-page {
    /* background-color: transparent; */
    width: 100%;
    height: 100%;
    /* left: 20%; */
    position: absolute;
    color: white;
    font-size: 2rem;
    overflow: hidden;
    visibility: hidden;
    z-index: 20002;
}

#design-page {
    display: flex;
    /* flex-direction: row; */
    justify-content: center;
    align-items:flex-end;
    /* overflow: scroll; */
}

.box-container {
    width: 130vmin;
    max-width: 100vmax;
    height: 90%;
    /* background-color: royalblue; */
    /* opacity: 1; */
    /* margin-top: 20px; */
    padding-top: 20px;
    overflow:scroll; 


    /* 6 OR LESS ITEMS */

    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    column-gap: 25px;
    row-gap: 25px;


    /* MORE THAN 6 ITEMS */

    /* display: grid;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: auto auto;
    grid-gap: 20px; */

}

.box {
    background-color: #7a2c16;
    /* 6 OR LESS ITEMS */
    width: 320px;
    height: 250px;

    /* width:20%;
    height: 35%; */
    border-radius: 10px;
    visibility: hidden;
    cursor: pointer;
    transition: scale 0.3s ease-in-out;
    /* position: relative;
    top: 50px; */

    display: flex;
    justify-content: center;
    align-items: center;
    /* z-index: 50000; */

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


.box:active {
    background-color: tomato;
}

.box-one {
    background-image: url(../img/thumbnails/zoo_thumbnails.png);
}

.box-two{
    background-image: url(../img/thumbnails/octopus_thumbnail.png);
}

.box-three {
    background-image: url(../img/thumbnails/maxwell-thumbnails.png);
}

.box-four {
    background-image: url(../img/thumbnails/expanse_thumbnails.webp);
}

.box-five {
    background-image: url(../img/thumbnails/signage_thumbnail.png);
}

.box-six {
    background-image: url(../img/thumbnails/gnar_thumbnails.png);
}

.box-seven {
    background-image: url(../img/thumbnails/ps5_thumbnails.webp);
}

.box-eight {
    background-image: url(../img/thumbnails/foe_thumbnails.webp);
}

@media(min-width:768px) {
    #content-wrapper {
        aspect-ratio: 2/3;
        /* aspect-ratio: 1.91/1; */
        /* aspect-ratio: 1.618; */
        /* width: 60%; */
        height: 50%;
        width: 80vmin;
        max-width: 100vmax;
        position: relative;
    }
}

@media (min-width:1024px) {
    
    body {
        width: 100vw;
        height: 100vh;
        margin: 0px;
        overflow: hidden;
        /* background-color: #dee2e6; */
    
        display: grid;
        place-items: center;
    }
    
    footer {
        color: black;
        position: absolute;
        bottom: 3px;
        margin: 0 auto;
        opacity: 0.3;
        font-size: 11px;
    }
    
    span {
        opacity: 0;
        font-weight:400;
        font-size: 2.5em;
        color: white;
        transition: opacity 0.5s ease-in-out;
    }

    #title-four {
        opacity: 1;
        font-weight:400;
        font-size: 2.5em;
        color: white;
        /* margin-bottom: 50px; */
    }
    
    .page-container {
        height: 100vh;
        width: 100vw;
    
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    #content-wrapper {
        /* aspect-ratio: 16/9; */
        aspect-ratio: 1.91/1;
        /* aspect-ratio: 1.618; */
        /* width: 60%; */
        height: 50%;
        width: 100vmin;
        max-width: 100vmax;
        position: relative;
    }
    
      /* aspect-ratio: 16/9;
        width: 100vmin;
        visibility: hidden;
        border-radius: 50px;
        z-index: -1; */
    
    .shape {
        z-index: 20000;
        cursor: pointer;
        overflow: hidden;
    }
    
    #content-wrapper > .shape {
        /* height: 30%;
        width: 30%; */
        /* background-color: rgba(255 255 255 / 25%); */
        position: absolute;
        /* transition: all 750ms ease-in-out; */
        transition: border-radius 0.5s ease-in-out;
    
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        padding: 10px 30px 0 0;
    }
    
    #content-wrapper > .shape:nth-child(1){
        background-color: #F64C3C;
        /* background-color: #F47e3e; */
        /* background-color: #FF3B28; */
        /* background-color:#343a40; */
        left:0;
        top: 0;
        height: 100%;
        width: 60%;
        /* z-index: 1; */
        justify-content: space-between;
    }
    
    
    #content-wrapper > .shape:nth-child(2){
        background-color: #1982c4;
        /* background-color: #495057; */
        left:60%;
        /* left:60%; */
        top: 0;
        height: 60%;
        /* height: 56%; */
        width: 40%;
        /* width: 38%; */
    }
    
    
    #content-wrapper > .shape:nth-child(3){
        background-color: #8AC926;
        /* background-color: #ffca3a; */
        left:60%;
        /* left:62%; */
        top: 60%;
        height: 40%;
        width: 40%;
        /* width: 38%; */
    }
    
    #content-wrapper > .shape:nth-child(4){
        background-color: #6a4c93;
        left:0%;
        top: 0%;
        height: 100%;
        width: 100%;
    } 
    
    
    .hover {
        border-radius: 50px;
    }
    
    .nohover {
        border-radius: 0px;
    }
    
    .visible {
        opacity: 1;
        /* transition: opacity 0.3s ease-in-out; */
    }
    
    .off {
        visibility: hidden;
    }
    
    .add-zindex{
        z-index: 20001;
    }
    
    .minus-zindex{
        z-index: 0;
        /* visibility: hidden; */
    }
    
    .close {
        width: 50px;
        height: 50px;
        position: fixed;
        z-index: 30000;
        cursor: pointer;
        color: white;
        font-size: 1.5rem;
        padding: 25px;
        background-color: rgba(0 0 0  / 15%);
        visibility: hidden;
        transition: border-radius 0.5s ease-in-out;
        border-radius: 10px;
    
        top: 20px;
        left: 30px;
    
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .close:hover {
        border-radius: 25px;
    }
    
    .design-shape-container {
        width: 100%;
        height: 50%;
        align-self: flex-end;
        /* background-color: red;  */
        
        /* margin: 0 0 30px 30px; */
    
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-end;
    } 
    
    .design-shape {
        width: 55%;
        transform: scale(1.3);
        position: absolute;
        /* visibility: hidden; */
         opacity: 0;
        /* top: 120px;
        left: 0px; */
        /* align-self: flex-end; */
        /* visibility: hidden; */
        transition: opacity 0.5s ease-in-out;
    }
    
    #photo-shape {
        transform:scale(1.25);
    }
    
    #contact-shape {
        width: 35%;
    }
    
    
    .is-active {
        opacity: 0.2;
        /* visibility: visible; */
        /* transition: opacity 0.4s ease-in-out; */
    }
    
    .shape-hover {
        opacity:0.5;
        transition: opacity 0.4s ease-in-out;
        transition-delay: 0.15s;
    }
    
    /* .shape-stay:focus {
        opacity:0.4;
    } */
    
    .content-page {
        /* background-color: transparent; */
        width: 100%;
        height: 100%;
        /* left: 20%; */
        position: absolute;
        color: white;
        font-size: 2rem;
        overflow: hidden;
        visibility: hidden;
        z-index: 20002;
    }
    
    #design-page {
        display: flex;
        /* flex-direction: row; */
        justify-content: center;
        align-items:flex-end;
        /* overflow: scroll; */
    }
    
    .box-container {
        width: 100vmin;
        max-width: 100vmax;
        height: 85%;
        /* background-color: royalblue; */
        /* opacity: 1; */
        /* margin-top: 20px; */
        padding-top: 20px;
        padding-bottom: 20px;
        overflow:scroll; 
    
    
        /* 6 OR LESS ITEMS */
/*     
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        align-items: center;
        column-gap: 25px;
        row-gap: 25px; */
    
    
        /* MORE THAN 6 ITEMS */
    
        display: grid;
        grid-template-columns: auto auto auto;
        grid-template-rows: auto auto;
        grid-gap: 20px;
    
    }
    
    .box {
        background-color: #7a2c16;
        /* 6 OR LESS ITEMS */
        width: 210px;
        height: 180px;
    
        /* width:20%;
        height: 35%; */
        border-radius: 10px;
        visibility: hidden;
        cursor: pointer;
        transition: scale 0.3s ease-in-out;
        /* position: relative;
        top: 50px; */
    
        display: flex;
        justify-content: center;
        align-items: center;
        /* z-index: 50000; */
    
        background-size: cover;
        background-position: center;
    }
    
    .box:hover {
        scale: 1.05;
        transition: scale 0.3s ease-in-out;
    }
    
    .box:active {
        background-color: tomato;
    }
}

@media (min-width:1200px) {
    .box-container {
        width: 90%;
        max-width: 100vmax;
        height: 85%;
        /* background-color: royalblue; */

        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-template-rows: auto auto;
        grid-gap: 20px;
    }

    .box {
        background-color: #7a2c16;
        /* 6 OR LESS ITEMS */
        width: 250px;
        height: 230px;
    }
}

@media (min-width:1440px) {
    
    
    .hover {
        border-radius: 50px;
    }
    
    .nohover {
        border-radius: 0px;
    }
    
    .visible {
        opacity: 1;
        /* transition: opacity 0.3s ease-in-out; */
    }
    
    .off {
        visibility: hidden;
    }
    
    .add-zindex{
        z-index: 20001;
    }
    
    .minus-zindex{
        z-index: 0;
        /* visibility: hidden; */
    }
    
    .close {
        width: 50px;
        height: 50px;
        position: fixed;
        z-index: 30000;
        cursor: pointer;
        color: white;
        font-size: 1.5rem;
        padding: 25px;
        background-color: rgba(0 0 0  / 15%);
        visibility: hidden;
        transition: border-radius 0.5s ease-in-out;
        border-radius: 10px;
    
        top: 20px;
        left: 30px;
    
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .close:hover {
        border-radius: 25px;
    }
    
    .design-shape-container {
        width: 100%;
        height: 50%;
        align-self: flex-end;
        /* background-color: red;  */
        
        /* margin: 0 0 30px 30px; */
    
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-end;
    } 
    
    .design-shape {
        width: 55%;
        transform: scale(1.3);
        position: absolute;
        /* visibility: hidden; */
        opacity: 0;
        /* top: 120px;
        left: 0px; */
        /* align-self: flex-end; */
        /* visibility: hidden; */
        transition: opacity 0.5s ease-in-out;
    }
    
    #photo-shape {
        transform:scale(1.05);
        left: -20px;
        bottom: -15px;
    }
    
    #contact-shape {
        width: 35%;
        bottom: -10px;
        left: -20px;
    }
    
    
    .is-active {
        opacity: 0.2;
        /* visibility: visible; */
        /* transition: opacity 0.4s ease-in-out; */
    }
    
    .shape-hover {
        opacity:0.5;
        transition: opacity 0.4s ease-in-out;
        transition-delay: 0.15s;
    }
    
    /* .shape-stay:focus {
        opacity:0.4;
    } */
    
    .content-page {
        /* background-color: transparent; */
        width: 100%;
        height: 100%;
        /* left: 20%; */
        position: absolute;
        color: white;
        font-size: 2rem;
        overflow: hidden;
        visibility: hidden;
        z-index: 20002;
    }
    
    #design-page {
        display: flex;
        /* flex-direction: row; */
        justify-content: center;
        align-items:flex-end;
        /* margin-bottom: 5%; */
        /* overflow: scroll; */
    }
    
    .box-container {
        width: 80%;
        max-width: 100vmax;
        height: 83%;
        /* background-color: rgba(200 50 200  / 45%); */
        border-radius: 20px;
        /* opacity: 1; */
        /* margin-top: 20px; */
        margin-bottom: 0.5%;
        /* overflow: scroll;
        /* padding-top: 50px; */
        overflow:scroll; 
    
    
        /* 6 OR LESS ITEMS */
    
        /* display: flex;
        flex-flow: row wrap;
        justify-content: center;
        align-items: center;
        column-gap: 25px;
        row-gap: 20px; */
    
    
        /* MORE THAN 6 ITEMS */
    
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-template-rows: auto auto;
        /* grid-gap: 20px; */
    
    }
    
    .box {
        background-color: #7a2c16;
        /* 6 OR LESS ITEMS */
        width: 250px;
        height: 200px;
    
        /* width: 15%;
        height: 50%; */
        border-radius: 10px;
        visibility: hidden;
        cursor: pointer;
        transition: scale 0.3s ease-in-out;
        /* position: relative;
        top: 50px; */
    
        display: flex;
        justify-content: center;
        align-items: center;
        /* z-index: 50000; */
    
        background-size: cover;
        background-position: center;
    }
    
    .box:hover {
        scale: 1.05;
        transition: scale 0.3s ease-in-out;
    }
}

@media (min-width:1500px){
    #content-wrapper > .shape {
        padding: 10px 40px 0 0;
    }

    span {
        font-size: 3em;
    }

    #photo-shape {
        transform:scale(1.05);
        left: -20px;
        bottom: -25px;
    }

    .box-container {
        width: 90%;
    }

    

    .box {
        background-color: #7a2c16;
        /* 6 OR LESS ITEMS */
        width: 300px;
        height: 230px;
    }

    
}

@media (min-width:1600px){
    .box-container {
        width: 100%;

           /* background-color: royalblue; */
        padding-top: 20px;
        padding-bottom: 20px;
        margin-bottom: 30px;
    }

    

    .box {
        background-color: #7a2c16;
        /* 6 OR LESS ITEMS */
        width: 350px;
        height: 280px;
    }
}