/*

==============================================================

Pssst... 👀  
How nice of you to take a peek in here!  
Not everyone takes the time to look under the hood.  
So here’s a well-deserved digital high five 🖐  

Got a briefing, spotted a bug, or just want to say hi?  
Let’s connect!
Mail: mauro.vanderflaes@gmail.com
Instagram: @maurovanderflaes
Linkedin: Mauro Van der Flaes

==============================================================

*/


/* Apple watch */
@media screen and (max-width: 340px) and (max-height: 450px) {

    /*
================
Nav styles
================
*/

    nav {
        display: none;
    }

    /*
================
Home styles
================
*/

    .home {
        margin-top: -8%;
    }


    .video-portrait-wrapper {
        width: 90vw;
        /* 90% van de viewport breedte */
        height: 70vh;
        /* max breedte */
        border-radius: 40px 40px 0% 0%;
    }

    .logo {
        margin-top: -25%;
    }

    .home-text h2 {
        font-size: 11vw;
        margin-top: -5%;
        margin-bottom: 5%;
        padding: 0;
        line-height: 100%;
    }

    .checkout h2 {
        display: none;
    }

    /*
================
Work styles
================
*/

    .work h2 {
        font-size: 2em;
        color: var(--IvoryBeige);
    }

    .seework h3 {
        white-space: nowrap;
        font-size: 1.5em;
    }

    .video-portrait-wrapper-work {
        border-radius: 20% / 20% 0%;
        width: 80vw;
        height: 82vh;
        margin: 0px;
        margin-bottom: 10px;
    }

    /*
================
About styles
================
*/


    #ik {
        width: 90vw;
        height: 80vh;
        border-radius: 20% 20% 0% 0%;
        object-fit: cover;
        object-position: 50% 20%;
        margin-bottom: 2%;
    }

    .about-text h2 {
        font-size: 1em;
        margin-bottom: 2%;
    }

    .about-text p {
        display: none;
    }

    /*
================
Connect styles
================
*/

    .connect {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 20% 0% 0% 0%;
    }

    .connect h2 {
        color: var(--IvoryBeige);
        font-size: 1.6em;
    }

    .socials a {
        font-size: 2em;
        line-height: 100%;
    }

    /*
================
Project styles
================
*/

    .back {
        margin-top: 10%;
        margin-left: 10%;
        width: 60%;
    }

    .project-h2 {
        text-align: end;
        margin-right: 10%;
        white-space: wrap;
    }

    .project-p {
        margin-left: 5%;
        margin-right: 5%;
        margin-bottom: 10%;
    }

    /*
================
All work styles
================
*/

    .allwork {
        margin-top: 15%;
    }

    .work h2 {
        font-size: 2em;
        color: var(--IvoryBeige);
    }

    .seework h3 {
        white-space: nowrap;
        font-size: 1.5em;
    }

    .video-portrait-wrapper-work {
        border-radius: 20% / 20% 0%;
        width: 80vw;
        height: 82vh;
        margin: 0px;
        margin-bottom: 10px;
    }

    .workback {
        width: 18%;
        rotate: -180deg;
        margin-left: 10%;
    }

}

/* Phone */
@media (min-width: 370px) {

    /*
================
About styles
================
*/

    .about-text h2 {
        font-size: 1.1em;
    }

    /*
================
Project styles
================
*/

    .project {
        margin-top: 5%;
    }

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

    .project-p {
        font-size: 1.3em;
        margin-left: 5%;
        margin-right: 5%;
    }

}

/* Phone */
@media (min-width: 400px) {
    /*
================
About styles
================
*/

    .about-text h2 {
        font-size: 1.3em;
    }

    /*
================
Project styles
================
*/

    .project-h2 {
        font-size: 1.8em;
    }

    .project-p {
        font-size: 1.3em;
        margin-left: 5%;
        margin-right: 5%;
    }

}

/* Phone */
@media (min-width: 550px) {

    /*
================
Home styles
================
*/

    .home-text h2 {
        font-size: 3.6em;
        line-height: 100%;
    }

    .checkout {
        gap: 12%;
    }

    .checkout h2 {
        font-size: 3.4em;
    }

    .checkout img {
        width: 8%;
        height: auto;
        rotate: 90deg;
    }

    /*
================
Work styles
================
*/

    .work h2 {
        font-size: 7em;
    }

    /*
================
About styles
================
*/

    .about-text h2 {
        font-size: 1.6em;
    }

    .about-text p {
        font-size: 1.4em;
        margin-bottom: 0;
    }

    /*
================
Contact styles
================
*/

    .connect {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 30% 8% 0% 8%;
    }

    .connect h2 {
        font-size: 4.8em;
    }

    /*
================
Project styles
================
*/

    .project-p {
        font-size: 1.3em;
        margin-left: 5%;
        margin-right: 5%;
    }

    /*
================
All work styles
================
*/

    .allwork h2 {
        font-size: 7em;
    }

}

/* Phone / Small Tablet */
@media (min-width: 650px) {

    /*
================
Home styles
================
*/

    .home-text h2 {
        font-size: 3.6em;
        line-height: 100%;
    }

    .checkout {
        gap: 12%;
    }

    .checkout h2 {
        font-size: 3.4em;
        line-height: 100%;
    }

    .checkout img {
        width: 6%;
        height: auto;
        rotate: 90deg;
    }

    /*
================
About styles
================
*/

    .about-text h2 {
        font-size: 1.3em;
    }

    .about-text p {
        font-size: 1.4em;
        margin-bottom: 0;
    }

    #ik {
        width: 80vw;
        height: 80vh;
    }

    /*
================
Contact styles
================
*/

    .connect {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 30% 8% 0% 8%;
    }

    .connect h2 {
        font-size: 5.7em;
    }

}

/* Tablet */
@media (min-width: 768px) {

    /*
================
Nav styles
================
*/

    nav {
        overflow: hidden;
        background-color: var(--MerlotRed);
        position: fixed;
        /* Set the navbar to fixed position */
        top: 0;
        /* Position the navbar at the top of the page */
        width: 100%;
        /* Full width */
        display: flex;
        justify-content: space-evenly;
        padding: 4% 0%;
        z-index: 999;
        font-size: 1.4em;
    }

    /*
================
Home styles
================
*/

    .home {
        margin-top: 10%;
    }

    .video-portrait-wrapper {
        border-radius: 30% 30% 0% 0%;
        width: 85vw;
        /* 90% van de viewport breedte */
        height: 75vh;
        /* max breedte */
    }

    .logo {
        width: 90%;
        margin-left: 6%;
        margin-top: -10%;
    }

    .home-text {
        justify-content: flex-end;
        align-items: flex-end;
        flex-direction: row;
        margin: 2% 4% 0% 4%;
    }

    .home-text h2 {
        font-size: 2em;
        line-height: 100%;
    }

    .checkout {
        gap: 4%;
        width: 60%;
        justify-content: flex-end;
    }

    .checkout h2 {
        font-size: 2.1em;
        line-height: 100%;
    }

    .checkout img {
        width: 8%;
        height: auto;
        rotate: 90deg;
    }

    /*
================
Work styles
================
*/
    .workpieces {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* 2 kolommen */
        grid-template-rows: repeat(2, auto);
        /* 2 rijen */
        row-gap: 4vh;
        /* of bijvoorbeeld 10px */
        column-gap: 4vw;
        /* dit kan blijven zoals het was */
        width: 90vw;
        margin: 0 auto;
        justify-items: center;
    }

    .video-portrait-wrapper-work {
        width: 100%;
        height: 100%;
        aspect-ratio: 3 / 4;
    }

    .seework {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5%;
        margin-top: 4%;
    }

    /*
================
About styles
================
*/

    .about-text h2 {
        font-size: 1.4em;
    }

    .about-text p {
        font-size: 1.4em;
        margin-bottom: 0;
    }

    .about-images {
        display: flex;
        align-items: flex-end;
    }

    #ik {
        width: 75vw;
        height: 50vh;
    }

    /*
================
Connect styles
================
*/

    .connect-text {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-bottom: 10%;
    }

    .connect h2 {
        font-size: 6.8em;
        writing-mode: sideways-lr;
    }

    .socials {
        gap: 3vh;
        margin-bottom: 0;
    }

    .socials a {
        font-size: 7em;
        line-height: 85%;
    }

    .connect p {
        font-size: 1.4em;
    }

    /*
================
Project styles
================
*/

    .project-header {
        margin-top: 10%;
        margin-left: 0;
        margin-right: 0;
    }

    .project-h2 {
        font-size: 2.5em;
    }

    .project-p {
        font-size: 1.5em;
        margin-left: 5%;
        margin-right: 5%;
        margin-bottom: 10%;
    }


    /*
================
All work styles
================
*/

    .allwork {
        margin-top: 10%;
    }

    .workback {
        width: 8vw;
        rotate: -180deg;
        margin-left: -40vw;
        margin-top: 5vh;
        margin-bottom: 10%;
    }

    .allworkpieces {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* 2 kolommen */
        grid-template-rows: repeat(2, auto);
        /* 2 rijen */
        row-gap: 4vh;
        /* of bijvoorbeeld 10px */
        column-gap: 4vw;
        /* dit kan blijven zoals het was */
        width: 90vw;
        margin: 0 auto;
        justify-items: center;
        margin-bottom: 10%;
    }

    .video-portrait-wrapper-allwork {
        width: 100%;
        height: 100%;
        aspect-ratio: 3 / 4;
    }

    .seeallwork {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5%;
        margin-top: 4%;
    }

}

@media (min-width: 1024px) {

    /*
================
Nav styles
================
*/

    nav {
        padding: 1% 0%;
    }

    /*
================
Home styles
================
*/

    .home {
        margin-top: 4%;
        justify-content: center;
        align-items: center;

    }

    .video-portrait-wrapper {
        border-radius: 80px 80px 0% 0%;
        width: 85vw;
        /* 90% van de viewport breedte */
        height: 70vh;
        /* max breedte */
    }

    .logo {
        width: 70%;
        margin-left: 15%;
        margin-top: -12%;
    }

    .home-text {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 70vw;
    }

    .home-text h2 {
        font-size: 2.5vw;
        margin: 0;
        text-wrap: l;
    }

    .checkout img {
        width: 5%;
    }

    /*
================
Work styles
================
*/

    .work {
        margin-top: 10%;
    }

    .work h2 {
        font-size: 18em;
        line-height: 100%;
        margin-bottom: -6%;
    }

    .workpieces {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        /* 2 kolommen */
        grid-template-rows: repeat(2, auto);
        /* 2 rijen */
        row-gap: 21vh;
        /* of bijvoorbeeld 10px */
        column-gap: 2vw;
        /* dit kan blijven zoals het was */
        width: 70vw;
        margin: 0 auto;
        justify-items: center;
    }

    .video-portrait-wrapper-work {
        width: 100%;
        /* Zorg dat het element netjes in z'n gridcel past */
        height: 125%;
        aspect-ratio: 3 / 4;
        /* Houd portretverhouding aan */
    }

    .seework {
        margin-top: 6%;
    }

    /*
================
About styles
================
*/

    .about {
        margin-top: 10%;
        margin-right: 4%;
        margin-left: 4%;
    }

    .about-con {
        display: flex;
        flex-direction: row;
        gap: 4%;
    }

    .about-text h2 {
        font-size: 1.4em;
    }

    #ik {
        width: 35vw;
        height: 95vh;
        border-radius: 20% 20% 0% 0%;
        object-fit: cover;
        object-position: 50% 20%;
        margin-bottom: 2%;
    }

    #panda-con {
        display: flex;
        margin-bottom: 2%;
    }

    #panda {
        display: flex;
        width: 8vw;
        height: 16vh;
    }


    /*
================
Connect styles
================
*/

    .connect {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 10% 4% 0% 4%;
    }

    .connect h2 {
        font-size: 6.5em;
    }

    .connect-text {
        margin-bottom: 4%;
    }

    .socials {
        margin-bottom: 0%;
    }

    .socials a {
        font-size: 7em;
        line-height: 85%;
    }

    .connect p {
        margin-bottom: 4%;
        font-size: 1.5em;
    }

    /*
================
Project styles
================
*/

    .project-header {
        margin-top: 5%;
        margin-left: 0;
        margin-right: 0;
    }

    .back {
        width: 20%;
    }

    .project-p {
        font-size: 1.6em;
        margin-left: 5%;
        margin-right: 5%;
        margin-bottom: 5%;
    }

    /*
================
All work styles
================
*/

    .allwork {
        margin-top: 10%;
    }

    .workback {
        width: 4vw;
        rotate: -180deg;
        margin-left: -40vw;
        margin-top: 5vh;
        margin-bottom: 10%;
    }

    .allwork h2 {
        font-size: 18em;
        line-height: 100%;
        margin-bottom: -6%;
    }

    .allworkpieces {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        /* 2 kolommen */
        grid-template-rows: repeat(2, auto);
        /* 2 rijen */
        row-gap: 21vh;
        /* of bijvoorbeeld 10px */
        column-gap: 2vw;
        /* dit kan blijven zoals het was */
        width: 70vw;
        margin: 0 auto;
        justify-items: center;
        margin-bottom: 10%;
    }

    .video-portrait-wrapper-allwork {
        width: 100%;
        /* Zorg dat het element netjes in z'n gridcel past */
        height: 125%;
        aspect-ratio: 3 / 4;
        /* Houd portretverhouding aan */
    }

    .seeallwork {
        margin-top: 6%;
    }

}

@media (min-width: 1300px) {

    .work h2 {
        font-size: 20em;
        margin-bottom: -4%;
    }

}

@media (min-width: 1900px) {

    /*
================
Home styles
================
*/

    .home {
        margin-top: 4%;
        justify-content: center;
        align-items: center;
    }

    .video-portrait-wrapper {
        border-radius: 150px 150px 0% 0%;
        width: 85vw;
        /* 90% van de viewport breedte */
        height: 75vh;
        /* max breedte */
    }

    .logo {
        width: 55%;
        margin-left: 23%;
        margin-top: -9%;
    }

    .home-text {
        justify-content: flex-end;
        align-items: flex-end;
        flex-direction: row;
        margin: 1% 0% 0% 0%;
        width: 55vw;
    }

    .home-text h2 {
        font-size: 3em;
        line-height: 100%;
    }

    .checkout {
        gap: 2%;
        width: 60%;
        justify-content: flex-end;
    }

    .checkout h2 {
        font-size: 3em;
        line-height: 100%;
    }

    .checkout img {
        width: 5%;
        height: auto;
        rotate: 90deg;
    }

    /*
================
Work styles
================
*/


    .work h2 {
        margin-bottom: -3%;
    }

    /*
================
About styles
================
*/

    .about-text h2 {
        font-size: 1.9em;
    }

    #ik {
        width: 35vw;
        height: 88vh;
        border-radius: 20% 20% 0% 0%;
        object-fit: cover;
        object-position: 50% 20%;
        margin-bottom: 2%;
    }

    #panda {
        width: 6vw;
        height: 12vh;
    }

    /*
================
Connect styles
================
*/

    .connect h2 {
        font-size: 6.8em;
    }

    /*
================
Project styles
================
*/

    .project-p {
        font-size: 1.8em;
        margin-left: 5%;
        margin-right: 5%;
        margin-bottom: 5%;
    }


    /*
================
All work styles
================
*/


    .allwork h2 {
        margin-bottom: -3%;
    }

}