@import url('https://fonts.googleapis.com/css2?family=Bona+Nova:ital,wght@0,400;0,700;1,400&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

:root{
    --tekst-kleur-wit: white;
    --bg-kleur-magenta: #c4a078;
}
html, body{
    margin: 0;
    font-size: 16px;
}
body, body *{
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
}

article {
    display: flex;
    flex-flow: row wrap;
}

header {
    flex: 0 1 100%;
    padding: 0;
    margin: 0;
    min-height: 100px;
    background-color: var(--tekst-kleur-wit);
    color: var(--bg-kleur-magenta);
    padding: 50px;
}

h1#titel {
    text-align: center;
    font-family: 'Bona Nova', serif;
    font-size: 11.7vw;
    line-height: 1.5;
    background-color: var(--bg-kleur-magenta);
    color: white;
    /*mix-blend-mode: color;*/
    position: sticky;
    top: -100px;
    z-index: 10;
    padding: 0;
    margin: 0;
    width: 100%;
    transition: all ease-in-out .5s;
}

h1#titel::before,
h1#titel::after{
    content:'';
    height: 100px;
    width: 100%;
    transition: all ease-in-out .5s;
    display: block;
    background-repeat: repeat-x;
}
h1#titel::before{
    background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' standalone='no'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='1' d='M0,288L6.2,266.7C12.3,245,25,203,37,165.3C49.2,128,62,96,74,74.7C86.2,53,98,43,111,48C123.1,53,135,75,148,90.7C160,107,172,117,185,149.3C196.9,181,209,235,222,224C233.8,213,246,139,258,122.7C270.8,107,283,149,295,138.7C307.7,128,320,64,332,53.3C344.6,43,357,85,369,112C381.5,139,394,149,406,165.3C418.5,181,431,203,443,192C455.4,181,468,139,480,117.3C492.3,96,505,96,517,112C529.2,128,542,160,554,154.7C566.2,149,578,107,591,90.7C603.1,75,615,85,628,112C640,139,652,181,665,181.3C676.9,181,689,139,702,154.7C713.8,171,726,245,738,250.7C750.8,256,763,192,775,186.7C787.7,181,800,235,812,256C824.6,277,837,267,849,224C861.5,181,874,107,886,101.3C898.5,96,911,160,923,176C935.4,192,948,160,960,138.7C972.3,117,985,107,997,90.7C1009.2,75,1022,53,1034,64C1046.2,75,1058,117,1071,133.3C1083.1,149,1095,139,1108,144C1120,149,1132,171,1145,197.3C1156.9,224,1169,256,1182,277.3C1193.8,299,1206,309,1218,298.7C1230.8,288,1243,256,1255,208C1267.7,160,1280,96,1292,74.7C1304.6,53,1317,75,1329,80C1341.5,85,1354,75,1366,69.3C1378.5,64,1391,64,1403,101.3C1415.4,139,1428,213,1434,250.7L1440,288L1440,0L1433.8,0C1427.7,0,1415,0,1403,0C1390.8,0,1378,0,1366,0C1353.8,0,1342,0,1329,0C1316.9,0,1305,0,1292,0C1280,0,1268,0,1255,0C1243.1,0,1231,0,1218,0C1206.2,0,1194,0,1182,0C1169.2,0,1157,0,1145,0C1132.3,0,1120,0,1108,0C1095.4,0,1083,0,1071,0C1058.5,0,1046,0,1034,0C1021.5,0,1009,0,997,0C984.6,0,972,0,960,0C947.7,0,935,0,923,0C910.8,0,898,0,886,0C873.8,0,862,0,849,0C836.9,0,825,0,812,0C800,0,788,0,775,0C763.1,0,751,0,738,0C726.2,0,714,0,702,0C689.2,0,677,0,665,0C652.3,0,640,0,628,0C615.4,0,603,0,591,0C578.5,0,566,0,554,0C541.5,0,529,0,517,0C504.6,0,492,0,480,0C467.7,0,455,0,443,0C430.8,0,418,0,406,0C393.8,0,382,0,369,0C356.9,0,345,0,332,0C320,0,308,0,295,0C283.1,0,271,0,258,0C246.2,0,234,0,222,0C209.2,0,197,0,185,0C172.3,0,160,0,148,0C135.4,0,123,0,111,0C98.5,0,86,0,74,0C61.5,0,49,0,37,0C24.6,0,12,0,6,0L0,0Z'%3E%3C/path%3E%3C/svg%3E");
    background-position: 100px -1px;
}
/*HIER KUN JE DE KLEUR VAN HET ONDERSTE WIGGLE AANPASSEN BIJ fill*/
h1#titel::after{
    background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' standalone='no'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23c4a078' fill-opacity='1' d='M0,288L6.2,266.7C12.3,245,25,203,37,165.3C49.2,128,62,96,74,74.7C86.2,53,98,43,111,48C123.1,53,135,75,148,90.7C160,107,172,117,185,149.3C196.9,181,209,235,222,224C233.8,213,246,139,258,122.7C270.8,107,283,149,295,138.7C307.7,128,320,64,332,53.3C344.6,43,357,85,369,112C381.5,139,394,149,406,165.3C418.5,181,431,203,443,192C455.4,181,468,139,480,117.3C492.3,96,505,96,517,112C529.2,128,542,160,554,154.7C566.2,149,578,107,591,90.7C603.1,75,615,85,628,112C640,139,652,181,665,181.3C676.9,181,689,139,702,154.7C713.8,171,726,245,738,250.7C750.8,256,763,192,775,186.7C787.7,181,800,235,812,256C824.6,277,837,267,849,224C861.5,181,874,107,886,101.3C898.5,96,911,160,923,176C935.4,192,948,160,960,138.7C972.3,117,985,107,997,90.7C1009.2,75,1022,53,1034,64C1046.2,75,1058,117,1071,133.3C1083.1,149,1095,139,1108,144C1120,149,1132,171,1145,197.3C1156.9,224,1169,256,1182,277.3C1193.8,299,1206,309,1218,298.7C1230.8,288,1243,256,1255,208C1267.7,160,1280,96,1292,74.7C1304.6,53,1317,75,1329,80C1341.5,85,1354,75,1366,69.3C1378.5,64,1391,64,1403,101.3C1415.4,139,1428,213,1434,250.7L1440,288L1440,0L1433.8,0C1427.7,0,1415,0,1403,0C1390.8,0,1378,0,1366,0C1353.8,0,1342,0,1329,0C1316.9,0,1305,0,1292,0C1280,0,1268,0,1255,0C1243.1,0,1231,0,1218,0C1206.2,0,1194,0,1182,0C1169.2,0,1157,0,1145,0C1132.3,0,1120,0,1108,0C1095.4,0,1083,0,1071,0C1058.5,0,1046,0,1034,0C1021.5,0,1009,0,997,0C984.6,0,972,0,960,0C947.7,0,935,0,923,0C910.8,0,898,0,886,0C873.8,0,862,0,849,0C836.9,0,825,0,812,0C800,0,788,0,775,0C763.1,0,751,0,738,0C726.2,0,714,0,702,0C689.2,0,677,0,665,0C652.3,0,640,0,628,0C615.4,0,603,0,591,0C578.5,0,566,0,554,0C541.5,0,529,0,517,0C504.6,0,492,0,480,0C467.7,0,455,0,443,0C430.8,0,418,0,406,0C393.8,0,382,0,369,0C356.9,0,345,0,332,0C320,0,308,0,295,0C283.1,0,271,0,258,0C246.2,0,234,0,222,0C209.2,0,197,0,185,0C172.3,0,160,0,148,0C135.4,0,123,0,111,0C98.5,0,86,0,74,0C61.5,0,49,0,37,0C24.6,0,12,0,6,0L0,0Z'%3E%3C/path%3E%3C/svg%3E");
    background-position: top center;
    position: absolute;
    margin-top: -1px;
}

h1#titel.is_sticky{
    font-size: 5vw;
}

header h2, header p{
    max-width: 700px;
    margin: .5em auto;
    color: var(--bg-kleur-magenta);
}

section#foodcourts {
    position: relative;
    z-index: 5;
    flex: 0 1 100%;
    display: flex;
    flex-flow: row wrap;
	justify-content: center;
    gap: 50px;
    padding: 120px 50px 100px 50px;
}

a.tegel{
    flex: 0 1 calc(33.333% - 50px); /* 1/3 breedte - gap (50px) */
    box-shadow: 0 0 10px 1px rgba(255, 0, 255, 0.1);
    padding: 4vw;
    background-color: white;

    transform: scale(.7) rotate(5deg);
    transition: transform .3s ease-out;
    text-decoration: none;
}
a.tegel .video {
    display: block;
    width: 100%;
    height: 25vh;
    
    animation-duration:  7s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-delay: 2s;
}    

a.tegel:nth-of-type(6n+1) .video {animation-delay: 2.1s;}
a.tegel:nth-of-type(6n+2) .video {animation-delay: 1.9s;}
a.tegel:nth-of-type(6n+3) .video {animation-delay: 2.4s;}
a.tegel:nth-of-type(6n+4) .video {animation-delay: 2.3s;}
a.tegel:nth-of-type(6n+5) .video {animation-delay: 2.0s;}
a.tegel:nth-of-type(6n+6) .video {animation-delay: 1.8s;}

a.tegel:nth-of-type(6n+1) {transform: scale(.7) rotate(2deg);}
a.tegel:nth-of-type(6n+2) {transform: scale(.7) rotate(3deg);}
a.tegel:nth-of-type(6n+3) {transform: scale(.7) rotate(-3deg);}
a.tegel:nth-of-type(6n+4) {transform: scale(.7) rotate(1deg);}
a.tegel:nth-of-type(6n+5) {transform: scale(.7) rotate(-1deg);}
a.tegel:nth-of-type(6n+6) {transform: scale(.7) rotate(2deg);}


a.tegel.in_beeld {
    transform: scale(1) rotate(0);
}


.flip{
    width: 100%;
    min-height: 25vh;
    perspective: 1000px;
}
.flip .flip-binnen{
    transform-style: preserve-3d;

    animation-duration:  7s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-delay: 2s;
    animation-name: flip-img;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
}
.img1,
.img2{
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center, -500px center;
    display: block;
    width: 100%;
    height: 100%;

    position: relative;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

}    
.img2{
    transform: rotateY(180deg);
    margin-top: -100%;
}

@keyframes flip-img {
    0%, 20%, 80%, 100%  {transform: rotateY(0);}
    25%, 75%            {transform: rotateY(180deg);}
}

a.tegel:nth-of-type(6n+1) .flip .flip-binnen {animation-delay: 2.1s;}
a.tegel:nth-of-type(6n+2) .flip .flip-binnen {animation-delay: 1.9s;}
a.tegel:nth-of-type(6n+3) .flip .flip-binnen {animation-delay: 2.4s;}
a.tegel:nth-of-type(6n+4) .flip .flip-binnen {animation-delay: 2.3s;}
a.tegel:nth-of-type(6n+5) .flip .flip-binnen {animation-delay: 2.0s;}
a.tegel:nth-of-type(6n+6) .flip .flip-binnen {animation-delay: 1.8s;}


a.tegel:hover,
a.tegel.in_beeld:hover{
    text-decoration: none;
    transform: scale(1.1) rotate(3deg);
    transition-delay: 0s!important;
}

a.tegel:nth-of-type(1n) {transition-delay: .4s;}
a.tegel:nth-of-type(2n) {transition-delay: .0s;}
a.tegel:nth-of-type(3n) {transition-delay: .2s;}

a.tegel:hover:nth-of-type(1n){transform: scale(1.1) rotate(3deg);}
a.tegel:hover:nth-of-type(2n){transform: scale(1.1) rotate(-2deg);}
a.tegel:hover:nth-of-type(3n){transform: scale(1.1) rotate(1deg);}

a.tegel h2 {
    font-size: 1.4rem;
    font-weight: 100;
    text-align: center;
    line-height: 1.3;
    margin: 0;
    padding: 0;
    color: var(--bg-kleur-magenta);
    font-weight: 600;
    margin: 0 0 .5em 0;
}
a.tegel h3 {
    font-size: 1rem;
    font-weight: 100;
    text-align: center;
    line-height: 1.2;
    margin: 0;
    padding: 0;
    color: var(--bg-kleur-magenta);
    font-weight: 300;
    margin: 1em 0 0 0;
}

footer{
    position: fixed;
    bottom: 0;
    background-color: var(--bg-kleur-magenta);
    color: var(--tekst-kleur-wit);
    width: 100%;
    z-index: 10;
}
footer ul, footer li{
    list-style-type: none;
    padding: 0;
    margin: 0;
}
footer ul{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap:1em;
	max-width: 100%;
}
footer li{
    font-size: .8rem;
    line-height: 2;

}

@media screen AND (max-width: 450px) AND (orientation: portrait) {
    a.tegel{
        flex: 0 1 100%;
        margin-bottom: 20px;
        padding: 50px;
    }
    h1#titel{
        top:-90px;
    }

    a.tegel:nth-of-type(1n),
    a.tegel:nth-of-type(2n),
    a.tegel:nth-of-type(3n) {transition-delay: 0s;}

    section#foodcourts {
        gap: 0;
        padding: 0;
    }
    
}