:root{
    --primary: #d5bfae;
    --secondary: #f4C2C2;
    --light: #f7f7f7;
    --dark: #222222;
    --shadow: #cccccc 2px 2px 4px;
    --shadow-small:#cccccc 1px 1px 4px;
    --shadow-bruinSmall:#a08674 1px 1px 4px;
    --shadow-Ssmall:#cccccc 0px 1px 3px;
    --shadowContact:#a08674 2px 2px 4px;
    --lightHover: rgb(232, 232, 232);
    --background: url(../content/media/backgroundTexture.webp);
}


#carousel video, #carousel iframe{
    margin-bottom: 0.7em;
}

.lijn{
    margin: 0;
}

#werken{
    display: grid;
    grid-template-rows: auto auto auto auto auto auto auto;
    margin: 0;
    padding-bottom: 3em;
    position: relative;
    z-index: 2;
    overflow: hidden;
    background-image: var(--background);
    background-repeat: repeat;
    background-size: 8em 8em;
    z-index: 2;
    box-shadow: var(--shadow);
}

.werkTitel{ 
    position: relative;
    margin: auto auto 0 auto;
    background-color: var(--primary);
    width: 95%;
    padding: 2em 0;
    box-shadow: var(--shadow);
}

.werkTitel h2{
    position: relative;
    width: max-content;
    margin: 0 auto;
}

.werkTitel h3{
    font-family: 'textFont';
    font-weight: normal;
    font-size: 16px;
    text-align: center;
    margin: 0;  
}

.werkIcoon{
    position: absolute;
    top: -0.5em;
    left: -4.5em;
    width: 3.5em;
    height: 3.5em;

    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--light);
    box-shadow: var(--shadow-small);
    border-radius: 100%;

    transform: rotate(-5deg);
}

.werkIcoon img{
    width: 70%;
}

.werkBox{
    position: relative;
    margin: 0 auto 6em auto;
    width: 98vw;
    max-width: 99vw;
}

.werk{
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto;
    gap: 2.2em;
    margin: 0.5em 2.5em;

    height: 25em;
    align-items: center;
    overflow-x: scroll;
    overflow-y: hidden;

    scrollbar-color: var(--primary) rgba(255, 255, 255, 0.552) !important;
}

.werk span{
    padding: 0 0.2em 0 0.2em;
    margin-right: 0.1em;
    border-bottom: 3px solid var(--secondary);
}

.werk h3{
    color: var(--dark);
}

.intro{
    width: max-content;
}

.intro video, .intro iframe{
    height: 16em;
    box-shadow: var(--shadow);
    width: 28.44em;
}
.intro .iframe{
    width: 30em;
}

.subTekst{
    text-align: center;
    height: max-content;
}

.tekstVak{
    width: 28em;
    height: max-content;
}

.tekstVak ul{
    display: flex;
    flex-direction: column;
}
.tekstVak li{
    display: flex;
    flex-direction: row;
}
.tekstVak ul li img{
    width: 2em;
}
.tvmImg{
    display: grid;
    grid-template-columns: auto auto;
    gap: 2em;
}
.tekstVakGroot{
    width: 33em;
}

.ontwerpvraag{
    position: relative;
    width: 30em;
    padding: 2em;
    margin-left: 0.5em;
}
.ontwerpvraag p{
    margin-bottom: 1em;
}
.ontwerpvraag img{
    width: 2em;
}

.requirements{
    width: 25em;
}
.requirements ul{
    display: grid;
    grid-template-rows: auto auto auto auto auto auto;
    gap: 0.3em;
}
.requirements li{
    display: flex;
    align-items: center;
    gap: 0.7em;
}
.requirements img{
    height: 2em;
}

.imgEen{
    max-height: 25em;
}
.imgEen img, .imgEen video, .imgEen iframe{
    height: 15em;
    box-shadow: var(--shadow-small);
}
.imgEen iframe{
    width: 26.67em;
}

.imgOverlap{
    max-height: 23em;
    width: 15em;
    overflow-y: hidden;
}
.imgOverlap img, .imgOverlap video, .imgOverlap iframe{
    height: 12em;
    box-shadow: var(--shadow-small);
    transform: translate(2em, 3em);
}

.imgOverlap img:nth-child(2){
    transform: translate(7em, -4em);
}

.imgNaast{
    display: flex;
    flex-direction: row;
    gap: 0.8em;
    height: 15em;
}
.imgNaast img, .imgNaast video, .imgNaast iframe{
    box-shadow: var(--shadow-small);
}

.imgOverlap img:nth-child(1):hover{
    position: relative;
    z-index: 4;
}



/*----------- WERK SPECIFIEK -----------*/
#awards{
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1em;
    margin-top: 1em;
}
#awards div{
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 0.5em;
}
#awards img{
    width: 2em;
}
#nieuwsbegripOverlap1{
    width: 26.5em;
}
#nieuwsbegripOverlap1 img:nth-child(2){
    transform: translate(4.5em, -6em);
}
#nieuwsbegripOverlap2{
    width: 29em;
}
#ecoVrede .imgOverlap{
    width: 24em;
}
#openUp .imgOverlap{
    width: 25em;
}
#maumau .imgOverlap{
    width: 29em;
}

.titelImg{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5em;
}
.titelImg img{
    height: 2em;
}

.proces{
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.3em;
}

.procesIMGs img{
    width: 1em;
    margin: 0 0.1em;
    opacity: 0;
}

.procesIMGs img{
    animation: procesAnimatie1 5s infinite;
}
#procesIMG2{
    animation: procesAnimatie2 5s infinite;
}
#procesIMG3{
    animation: procesAnimatie3 5s infinite;
}


.onderzoekKopjeIMG{
    display: flex;
    flex-direction: row;
    gap: 0;
}

.onderzoekKopjeIMG img{
    height: 2.3em;
}


.quote1{
    margin-left: -1.5em;
    transform: rotate(0deg);
    animation: quotesAnimatie 3s infinite;
}
.quote2{
    margin-left: 90%;
    transform: rotate(200deg);
    animation: quotesAnimatie2 3s infinite;
}

/* SIDE PROJECTS */
#sideProjects{
    box-shadow: var(--shadow-bruinSmall);
    background-color: var(--light);
    position: relative;
    z-index: 1;
}

#sideTitel{
    display: flex;
    flex-direction: row;
    gap: 0.5em;
    width: 100%;
    max-width: 100%;
    justify-content: center;
    padding-top: 1em;
    z-index: 3;
}

#sideTitel img{
    width: 1.5em;
}
#sideTitel h2{
    text-align: center;
}

#projecten{
    display: none;
}

#projectenDiv{
    display: flex;
    width: 90%;
    margin: auto;
    padding: 2.5em 0 3.5em 0;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2em;
}
.sideProject{
    background-color: var(--primary);
    width: 24.6em;
    height: 22em;
    padding: 0;
    display: flex;
    align-items: flex-start;
    box-shadow: var(--shadow-Ssmall);
}
.sideProject:hover{
    background-color: #c7af9d;
}

.sideProject:nth-child(even){
    transform: rotate(1deg);
}
.sideProject:nth-child(even):hover{
        animation: sideProjHoverEven 2s infinite;
}
.sideProject:nth-child(odd){
    transform: rotate(-2deg);
}
.sideProject:nth-child(odd):hover{
        animation: sideProjHoverOdd 2s infinite;
}

.voorkant{
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 1.3em;
}
.sideProject iframe, .sideProject img{
    width: 22em;
    height: 12.38em;
}
.sideProject h3{
    margin: 2.5em 0 0 0;
    font-size: 16px;
}
.achterkant{
    text-align: left;
    margin: 1em 1em;
}

.achterkant{
    display: none;
}

#mPuzzel iframe{
    height: 19.6em;
    width: 9.3em;
}
#mPuzzel .voorkant{
    flex-direction: row;
}
#mPuzzel h3{
    margin: 0;
}
#mPuzzel #sideProjText{
    display: flex;
    flex-direction: column;
    justify-content: center;
}


@media (prefers-reduced-motion: no-preference){
    @keyframes procesAnimatie1{
        0% { 
            transform:translateY(-0.5em); 
        } 
        5%{
            opacity: 0; 
        }
        10% {
            opacity: 1; 
        } 
        20% {
            transform:translateY(0em); 
        }   
        70% {
            transform:translateY(0em); 
        }
        75% {
            transform:translateY(-0.5em); 
        }  
        90% { 
            transform:translateY(0em); 
        }  
        95%{
                opacity: 1; 
        }  
        100% { 
            opacity: 0; 
        }    
    }


    @keyframes procesAnimatie2{
        25% { 
            opacity: 0; 
            transform:translateY(-0.5em); 
        }
        30% {
            opacity: 1; 
        } 
        40% {
            transform:translateY(0em); 
        }
        75% {
            transform:translateY(0em); 
        }
        80% {
            transform:translateY(-0.5em); 
        }
        85% {
            opacity: 1; 
        }    
        90% { 
            opacity: 1; 
            transform:translateY(0em); 
        }  
        95%{
            opacity: 1; 
        } 
        100% { 
            opacity: 0; 
        }   
    }

    @keyframes procesAnimatie3{
        50% {
            opacity: 0; 
            transform:translateY(-0.5em); 
        }
        55% {
            opacity: 1; 
        }
        65% {
            transform:translateY(0em); 
        }
        75% {
            transform:translateY(0em); 
        }
        85% {
            transform:translateY(-0.5em); 
        }
        85% {
            opacity: 1; 
        }    
        90% { 
            opacity: 1; 
            transform:translateY(0em); 
        }  
        95%{
            opacity: 1; 
        }  
        100% { 
            opacity: 0; 
        }   
    }


    @keyframes quotesAnimatie{
        0% {transform: rotate(0deg);}
        30% {transform: rotate(15deg);}
        60% {transform: rotate(-10deg);}
        90% {transform: rotate(0deg);}
    }

    @keyframes quotesAnimatie2{
        0% {transform: rotate(200deg);}
        30% {transform: rotate(220deg);}
        60% {transform: rotate(185deg);}
        90% {transform: rotate(200deg);}
    }

    @keyframes projectKaartAnimatie {
        0% {
            transform: rotateY(0deg);
            perspective: 0px;
        }
        20%{
            transform: rotateY(30deg); 
            perspective: 40px;
        }
        60% {
            transform: rotateY(0deg);
            perspective: 0px;
        }
    }

    @keyframes sideProjHoverEven {
        0%{
            transform: rotate(1deg);
        }

        50%{
            transform: rotate(-2deg);
        }

        100%{
            transform: rotate(1deg);
        }
        
    }

    @keyframes sideProjHoverOdd {
        0%{
            transform: rotate(-2deg);
        }

        50%{
            transform: rotate(1deg);
        }

        100%{
            transform: rotate(-2deg);
        }
        
    }
}