* {padding: 0; margin: 0; box-sizing: border-box; }
html, html body {}
html {
    font-size: 1.85vh; 
    scroll-behavior: smooth; 
    line-height: 1.6; 
    font-family: 'Open Sans'; 
    color: #c8a064;
    background: white;
    /*scroll-snap-type: y mandatory;*/
}
.img {
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
#control-height {
    height: 100%;
    width: 10px;
    background: linear-gradient(to bottom, black 10px, red 10px, red 600px, green 600px, green 800px, blue 800px);
    position: absolute;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
}
.main { 
    border-left: 1.5rem solid white;
    border-right: 1.5rem solid white;
    position: relative;
    background: white;
}
.language_selector {
    position: absolute; 
    right: 0.7rem; 
    top: 0.8rem; 
    width: auto;
    font-family: 'Open Sans'; 
    color: #322d19;
    background: none;
    border: 0;
    line-height: 1.5;
    font-size: 0.9rem;
    display: flex;
}

.language_selector {position: absolute; top: 0.7rem; right: 0.75rem; display: flex; flex-direction: column; font-size: 0.7rem; line-height: 1.7; font-style: italic;}
.language_selector input {display: none;}
.language_selector label {display: block; padding: 0 0.9em 0.2em 0; border: 0; border-radius: 0; background: none; text-align: right; position: relative; cursor: pointer;} 
.language_selector a {color: #322d19; text-decoration: none; text-align: right; opacity: 0; pointer-events: none; padding-right: 0.9em;}
.language_selector input:checked + label + a, .language_selector input:checked + label + a + a {opacity: 0.5; pointer-events: all;}
.language_selector input:checked + label + a:hover,
.language_selector input:checked + label + a + a:hover {opacity: 1;}
.language_selector label::after {
    content: "";
    position: absolute;
    border-left: 0.25em solid transparent;
    border-right: 0.25em solid transparent;
    border-top: 0.25em solid #322d19;
    right: 0;
    top: 0.85em;
}
.language_selector input:checked + label::after {
    border-left: 0.25em solid transparent;
    border-right: 0.25em solid transparent;
    border-bottom: 0.25em solid #322d19;
    border-top: 0;
    top: 0.75em;
}
@media (max-width: 600px) {
    .language_selector {font-size: 1.15rem;}
}

header {
    background: url('/img/gebouw_large.jpg') center 5% / cover no-repeat, #e0dbd3 url('/img/gebouw_small.jpg') center 5% / cover no-repeat;
    text-align: center;
    height: 48rem;
    min-height: 80vh;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 1.5rem;
    position: relative;
}
header * {position: relative; text-align: center; width: 100%;}
header p {font-size: 1.5rem; font-style: italic; z-index: 2;}
header h1 {
    font-size: 5.15rem; 
    color: #322d19; 
    font-family: 'Playfair Display'; 
    font-style: italic; 
    font-weight: 400;
    z-index: 2;
    padding-top: 3.1rem;
}
header .raam {height: 29.5rem; margin: 2rem 0 4rem;}
header .raam::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    background: url(/img/raam.svg) center center / contain no-repeat;
}

header .raam > div {z-index: 1; position: relative;}
header .raam .koningshoeven {height: 13rem; margin-top: 1.2rem; background: url(/img/koningshoeven.svg) center center / contain no-repeat;}


header .frame0 > div {position: relative; top: 0.5rem;}
header .frame0 p {
    color: #322d19; 
    font-family: 'Playfair Display'; 
    font-weight: bold;
    font-size: 2rem;
    line-height: 1.1;
    position: relative;
    top: 1rem;
}
header .frame0 p img {width: 20rem;}
header .frame0 .raam img {height: 30rem; width: auto;}
header .frame0 .raam::after,
header .frame1 .raam::after {
    background: url(/img/raam_smaller.svg) center center / contain no-repeat;
    top: 10%;
    height: 80%;
}
header .frame0 .raam::after {background: url(/img/raam_smaller_blue.svg) center center / contain no-repeat;}
header .frame1 p {line-height: 1.1; letter-spacing: 0.08rem;}
header .frame1 h1 {transform: scale(0.85); transform-origin: center bottom; padding-top: 4.1rem;}
header .frame1 .raam {margin-top: 0rem;}
header .frame1 .raam .koningshoeven {transform: scale(0.85); transform-origin: center top; margin-top: 0;} 


.timeline {
    position: fixed;
    top: 0;
    left: calc(50% - 42rem);
    width: 23px; 
    height: 100%; 
    background: url(/img/line.png) center calc(50% - 1.15rem) / contain repeat-y;
    line-height: 1;
    z-index: 5;
}
.timeline .year {
    position: absolute; 
    font-family: 'Playfair Display'; 
    font-weight: bold; 
    font-size: 7.5rem; 
    top: calc(50% - 1.15rem); 
    padding-left: 50px;
    transform: translateY(-50%);
    transition: all 0.2s ease-in-out;
    opacity: 1;
}
html.fp-enabled body.fp-viewing-15 .timeline,
html.fp-enabled body.fp-viewing-0 .timeline {opacity: 0;}

html.fp-enabled body.fp-viewing-2 .timeline .year,
html.fp-enabled body.fp-viewing-4 .timeline .year,
html.fp-enabled body.fp-viewing-6 .timeline .year,
html.fp-enabled body.fp-viewing-8 .timeline .year,
html.fp-enabled body.fp-viewing-10 .timeline .year,
html.fp-enabled body.fp-viewing-12 .timeline .year,
html.fp-enabled body.fp-viewing-14 .timeline .year {color: white;}

.timeline .year span {display: inline-block; position: relative; bottom: 1rem;}
.timeline .year::before {
    content: "";
    display: block;
    position: absolute;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 45px solid #2350dc;
    top: 50%;
    margin-top: 0rem;
    margin-left: -60px;
    transform: translateY(-50%);
}
.startbutton {
    color: #2350dc; 
    background: white; 
    border-radius: 100%; 
    width: 8rem; 
    height: 8rem; 
    margin: -3rem 0 0 -4rem;
    display: block;
    left: 50%;
    position: relative;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.startbutton span {display: block; text-align: center; font-size: 1.4rem; line-height: 1.05; position: relative; bottom: 0.5rem;}
.startbutton span:nth-child(1) {font-weight: 300;}
.startbutton span:nth-child(2) {font-family: 'Playfair Display'; font-weight: bold; font-style: italic;}
.startbutton_arrow {height: 2rem; position: absolute; left: 50%; transform: translateX(-50%); margin-top: -2.25rem;}

section {
    position: relative; 
    display: flex; 
    align-items: center; 
    margin: 0 auto;
}
section > div::after {
    content: "";
    width: 60.75rem;
    height: 100%;
    background: #dcdcd2;
    position: absolute;
    z-index: -1;
    right: 0; 
    top: 0;
    display: block;
}
section > div {
    position: relative;
    right: 0;
    padding: 0;
    margin: 0;
    z-index: 1;
    width: 100%;
    bottom: 1rem;
}
section > div > span {display: block; margin: 1rem 0; height: 30rem;}
section > div h1,
section > div h2,
section > div p {width: 20rem; position: relative; left: calc(100% - 55rem);}
section > div p {padding-bottom: 1.5rem;}
section > div h1 {
    color: #322d19;
    font-family: 'Playfair Display'; 
    font-weight: bold; 
    line-height: 1;
    font-size: 3.9rem;
    margin: -3.25rem 0 3rem -11.5rem;
    text-align: center;
    width: calc(20rem + 12rem);
    position: relative;
}
section h1 span {display: block; white-space: nowrap;}
section h1 span:nth-child(1) {text-align: center;}
section h1 span:nth-child(2) {text-align: left;}
section h1 span:nth-child(3) {text-align: right;}
section h2 {
    color: #2350dc; 
    text-transform: uppercase; 
    line-height: 1.2;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0.7rem;
}
section p {
    color: #322d19; 
    font-weight: 600;
    font-style: italic; 
    line-height: 1.5;
    font-size: 1rem;
}
section .img {
    width: 21rem; 
    height: calc(100% + 8.5rem); 
    position: absolute;
    right: 10rem;
    top: 0;
    margin-top: -3.15rem;
    display: block;
    cursor: pointer;
}
section .img img {
    object-fit: cover; 
    width: 100%;
    height: 100%;
    opacity: 1;
}
section .img img + img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
section .img::after {
    content: "";
    width: 5rem;
    height: 5rem;
    background: url(/img/playbutton.svg) center center / contain no-repeat;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    transition: transform 0.2s ease-in-out;
}
section .img::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.2);
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}
section .img:hover::before {opacity: 1;}
section .img:hover::after {transform: translate(-50%,-50%) scale(1.25);}


.section:nth-child(1) > div {vertical-align: top;}

.section:nth-child(odd) section > div::after {background: #c8a064; right: auto; left: 4rem; width: calc(100% - 38rem);}
.section:nth-child(odd) section .img {right: 37rem;}
.section:nth-child(odd) section > div h1,
.section:nth-child(odd) section > div h2,
.section:nth-child(odd) section > div p {left: calc(100% - 28.4rem);}
.section:nth-child(odd) section > div h1 {
    margin: -3.25rem -2.5rem 3rem -3.5rem;
    width: calc(20rem + 4.5rem);
}
.section:nth-child(odd) section h1 span:nth-child(1) {text-align: right;}
.section:nth-child(odd) section h1 span:nth-child(2) {text-align: left;}
.section:nth-child(odd) section h1 span:nth-child(3) {text-align: center;}

.overlay {display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(43, 39, 27, 0.9); z-index: 99; pointer-events: none; opacity: 0; transition: opacity 0.3s ease-in-out; cursor: pointer;}
.overlay.visible {pointer-events: all; opacity: 1; display: block; }
.overlay > div {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.overlay > div > div {max-width: 180vh; margin: 0 auto; position: relative; height: 100%;}
.overlay > div > div .video {position: absolute; display: block; top: calc(50% + 0.15rem); right: 38.5rem; width: 21rem; height: 37.25rem; transform: translateY(-50%);}
.overlay > div > div .video .voiceover {
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background: rgba(27, 25, 19, 0.65);
    color: rgba(255,255,255,0.6); 
    overflow: auto; 
    font-size: 0.7rem; 
    line-height: 1.4;
    padding: 1.25rem;
    font-weight: 600;
    display: flex;
    z-index: 9999;
    transform: none;
    display: none;
}
.overlay > div > div .video .voiceover > div {margin: auto;}
.overlay > div > div .video .voiceover.active {display: flex;} 
.overlay > div > div .video .voiceover .close {position: absolute; top: 0; right: 0.8rem; height: 3rem; width: 1.5rem; opacity: 0.5; display: none;}
.overlay > div > div .video .voiceover .close::before,
.overlay > div > div .video .voiceover .close::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    top: 50%;
    left: 0;
    background: white;
    transform: rotate(45deg);
    pointer-events: none;
}
.overlay > div > div .video .voiceover .close::before {transform: rotate(-45deg);}
.overlay.right > div > div .video .voiceover {transform: translateX(-100%);}
.overlay.left > div > div .video .voiceover {transform: translateX(100%);}
.overlay > div > div .video .voiceover p {margin-bottom: 1.4em;}
.overlay > div > div .video.loading::after {content: "bezig de video te laden..."; display: block; position: absolute; color: white; top: 50%; transform: translateY(-50%); width: 100%; text-align: center; font-size: 0.85rem; opacity: 0.5;}
.overlay > div > div .video .player, .overlay > div > div .video .vimeoplayer, .overlay > div > div .video .vimeoplayer iframe, .overlay > div > div .video .mp4player, .overlay > div > div .video .mp4player video {background: rgb(27, 25, 19); width: 100%; height: 100%; position: relative;}
.overlay > div > div .video .controls {opacity: 0; position: absolute; display: block; width: 100%; display: flex; z-index: 99; padding: 0 0.8rem 0 1rem; background-image: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 4rem, rgba(0,0,0,0) calc(100% - 4rem), rgba(0,0,0,0.7) 100%); height: calc(100% + 2px); margin-top: -1px;}
.overlay > div > div .video .playbutton {display: none; z-index: 199; position: absolute; top: 50%; left: 50%; width: 5rem; height: 5rem; transform: translate(-50%,-50%); transition: transform 0.2s ease-in-out; cursor: pointer;}
.overlay > div > div .video:hover .playbutton {transform: translate(-50%,-50%) scale(1.25);}
.overlay > div > div .video.loaded .playbutton {display: block;}
.overlay > div > div .video.loading .playbutton,
.overlay > div > div .video.loaded.playing .playbutton {display: none;}
.overlay > div > div .video.loaded .vimeoplayer::after,
.overlay > div > div .video.loaded .mp4player::after,
.overlay > div > div .video.loaded .controls {opacity: 1;}
.overlay > div > div .video .vimeoplayer, .overlay > div > div .video .mp4player {overflow: hidden;}
.overlay > div > div .video.loading .vimeoplayer, .overlay > div > div .video.loading .mp4player {opacity: 0;}
.overlay > div > div .video .vimeoplayer iframe {position: absolute; width: 21rem; height: 63rem; left: 0; top: 50%; transform: translateY(-50%);}
.overlay > div > div .video .mp4player video {position: absolute; width: 100%; height: 100%; left: 0; top: 0; object-fit: cover;}
.overlay > div > div .video .controls > div {height: 3rem;}
.overlay > div > div .video div.ccbutton {position: absolute; z-index: 99; bottom: 0.5rem; right: 0.8rem; height: 1.5rem; width: 2rem; color: white; overflow: hidden;}
.overlay > div > div .video div.ccbutton::before {content: "lezen"; opacity: 0.5; text-align: center; font-weight: 600; display: block; font-size: 0.7rem; line-height: 1.5rem;}
body.language_fr .overlay > div > div .video div.ccbutton,
body.language_en .overlay > div > div .video div.ccbutton {display: none;}
.overlay > div > div .video div.ccbutton input {opacity: 0; position: absolute; left: 0; top: 0; width: 100%; height: 100%; cursor: pointer;}
.overlay > div > div .video .controls > div:first-child {flex-grow: 1;}
.overlay > div > div .video .controls > div:first-child .progresspassed {pointer-events: none; position: absolute; z-index: -1; top: 1.5rem; height: 1px; background: white; left: 0;}
.overlay > div > div .video .controls > div:first-child input {width: 100%; cursor: pointer;}
.overlay > div > div .video .controls > div:last-child {margin-left: 0.5rem; position: relative; opacity: 0.5;}
.overlay > div > div .video .controls > div:last-child::after,
.overlay > div > div .video .controls > div:last-child::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    top: 50%;
    left: 0;
    background: white;
    transform: rotate(45deg);
    pointer-events: none;
}
.overlay > div > div .video .controls > div:last-child::before {transform: rotate(-45deg);}
.overlay > div > div .video .controls > div:last-child input {
    width: 1.5rem;
    height: 3rem;
    overflow: hidden;
    opacity: 0;
    cursor: pointer;
}
.overlay.right > div > div .video {right: 11.5rem;}



.slidecontainer {
    width: 100%; /* Width of the outside container */
    position: relative;
}
.slidecontainer::after {
    content: "";
    position: absolute;
    left: 0;
    top: 1.5rem;
    background: rgba(255,255,255,0.5);
    height: 1px;
    width: 100%;
    z-index: -1;
    pointer-events: none;
}

/* The slider itself */
.slider {
-webkit-appearance: none;  /* Override default CSS styles */
appearance: none;
width: 100%; /* Full-width */
height: 3rem; /* Specified height */
background: transparent; /* Grey background */
outline: none; /* Remove outline */
opacity: 1; /* Set transparency (for mouse-over effects on hover) */
}

/* Mouse-over effects */
.slider:hover {
opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
-webkit-appearance: none; /* Override default look */
appearance: none;
width: 15px; /* Set a specific slider handle width */
height: 15px; /* Slider handle height */
background: #2350dc; /* Green background */
cursor: pointer; /* Cursor on hover */
outline: none;
border-radius: 100%;
border: 0;
}

.slider::-moz-range-thumb {
width: 15px; /* Set a specific slider handle width */
height: 15px; /* Slider handle height */
background: #2350dc; /* Green background */
cursor: pointer; /* Cursor on hover */
outline: none;
border-radius: 100%;
border: 0;
}

#fp-nav.fp-right {
    right: 0rem;
    user-drag: none; 
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
#fp-nav ul li, .fp-slidesNav ul li {margin: 0; height: 2rem; width: 1.5rem;}
#fp-nav ul li a, .fp-slidesNav ul li a {padding: 1rem 0.75rem;}
#fp-nav ul li a span, .fp-slidesNav ul li a span {background: #322d19;}
#fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li:hover a.active span {
    height: 2rem;
    width: 6px;
    border-radius: 0;
    margin: 0;
    top: 0;
    margin-left: -3px;
}
#fp-nav a {position: relative;}
#fp-nav a::before {
    content: "";
    height: 2rem;
    width: 2px;
    position: absolute;
    top: 0;
    left: calc(50% - 1px);
    background: rgba(50, 45, 25, 0.2);
}
#fp-nav ul li:hover a span, .fp-slidesNav ul li:hover a span,
#fp-nav ul li a span, .fp-slidesNav ul li a span {
    width: 0; height: 0;
}


footer {
    background: #322d19 url('/img/footer.jpg') center center / cover no-repeat;
    text-align: center;
    height: calc(100% - 3rem);
    scroll-snap-align: end;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    position: relative;
}
footer > div {
    height: 100%; 
    background-image: radial-gradient(rgba(0,0,0,0.75) 0%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
footer > div > div:first-child {
    height: 8rem; 
    width: 8rem; 
    border-radius: 100%; 
    background: white; 
    margin: -5rem auto 0;
}
footer > div > div:nth-child(2) {
    color: white;
    font-family: 'Playfair Display';
    font-weight: bold;
    line-height: 1;
    font-size: 3.9rem;
}
footer > div > div:nth-child(2) img {width: 37rem; max-width: 80vw; margin-top: -5rem;}
footer > div > div:last-child {height: 3rem; background: #322d19;}
.section[anchor="15"] > .fp-tableCell {vertical-align: bottom;}

@keyframes bottle {
    0%   {opacity: 1; clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0% 50%); transform: scale(0.98);}
    2%   {opacity: 1; clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%); transform: scale(0.98);}
    100% {opacity: 1; transform: scale(1.02);}
}
@keyframes flicker {
    0%   {opacity: 0;}
    55%  {opacity: 0;}
    56%  {opacity: 1;}
    70%  {opacity: 1;}
    71%  {opacity: 0;}
    95%  {opacity: 0;}
    96%  {opacity: 1;}
    100% {opacity: 1;}
}
@keyframes fastslowleft {
    0% {transform: translateX(28rem);}
    25% {transform: translateX(0rem);}
    87.5% {opacity: 1;transform: translateX(-1.25rem);}
    100% {opacity: 0;transform: translateX(-1.5rem);}
}
@keyframes fastslowright {
    0% {transform: translateX(-28rem);}
    25% {transform: translateX(0rem);}
    87.5% {opacity: 1;transform: translateX(1.25rem);}
    100% {opacity: 0;transform: translateX(1.5rem);}
}
@keyframes slidedown {
    0% {transform: translateY(-8rem);}
    100% {transform: translateY(0rem);}
}
@keyframes slideup {
    0% {opacity: 0; transform: translateY(1rem);}
    100% {opacity: 1; transform: translateY(0rem);}
}
@keyframes slideleft {
    0% {opacity: 1; transform: translateX(8rem);}
    100% {opacity: 1; transform: translateX(0rem);}
}
@keyframes slideright {
    0% {opacity: 1; transform: translateX(-8rem);}
    100% {opacity: 1; transform: translateX(0rem);}
}
@keyframes fadein {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes fadeout {
    0% {opacity: 1;}
    87.5% {opacity: 1;}
    100% {opacity: 0;}
}
.bottle {opacity: 0;}
.section.active .bottle { 
    animation-name: bottle;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}
.section.active .fadeout { 
    animation-name: fadeout;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}
.section.active .fastslowright { 
    animation-name: fastslowright;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}
.section.active .fastslowleft { 
    animation-name: fastslowleft;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}
.section.active .flicker, .section.active .flickerafter::after {
    animation-name: flicker;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.section.active .slidedown {
    animation-name: slidedown;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}
.slideup, .slideright, .slideleft {opacity: 0;}
.section.active .slideup {
    opacity: 1;
    animation-name: slideup;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier((0, 0, 0.22, 1));
}
.section.active .slideleft {
    animation-name: slideleft;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}
.section.active .slideright {
    animation-name: slideright;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}
.fadein {opacity: 0;}
.section.fp-completely:not(:first-child) .fadein {opacity: 1!important;}
.section.active .fadein {
    animation-name: fadein;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}
.delayed {animation-delay: 0.3s;}
.delayedx2 {animation-delay: 0.6s;}


@media screen and (min-width: 180vh) {
    .main {max-width: 180vh; margin: 0 auto;}
}
@media screen and (max-width: 180vh) {
    .timeline {left: 6.5rem;}
    .section:nth-child(odd) section > div::after {left: 0; width: calc(100% - 34rem);}
}
@media screen and (max-width: 165vh) {
    .main {border: 0;}
    header {margin-top: 0; border: 0;}
    footer {height: calc(100% - 1.5rem); margin: 0;}
    section .img {right: calc(10rem - 6rem);}
    section > div h1, section > div h2, section > div p {left: calc(100% - 55rem + 6rem);}
    section > div::after {width: calc(60.75rem - 6rem);}
    .section:nth-child(odd) section > div h1, 
    .section:nth-child(2n+1) section > div h2, 
    .section:nth-child(2n+1) section > div p {left: calc(100% - 28.4rem + 3rem);}
    .section:nth-child(odd) section > div::after {width: calc(100% - 32rem);}
    .section:nth-child(odd) section .img {right: calc(37rem - 3rem);}

    .overlay > div > div .video {right: calc(37rem - 3rem);}
    .overlay.right > div > div .video {right: calc(10rem - 6rem);}
}
@media screen and (max-width: 155vh) {
    .timeline {left: 1.75rem;}
}

/* MOBIELE WEERGAVE */
@media screen and (max-width: 143vh) {
    html {font-size: 1.87vh;}
    section > div {margin: 0; height: auto;}
    section .img {
        position: relative; 
        right: auto; 
        width: 16rem; 
        height: 16rem; 
        left: calc(50% - 5rem); 
        top: 0;
        transform: none;
        margin: 4rem 0 1.5rem;
    }
    
    section .img::before, section .img img {border-radius: 100%;}
    section .img::after {left: 0;}
    section .img img {opacity: 0;}
    section .img img + img {opacity: 1;}
    section > div::after {width: calc(100% - 2rem)!important; top: 8rem; height: calc(100% - 6rem)}
    section > div > span {margin: 0; height: 44rem;}
    section > div h1, section > div h2, section > div p {left: calc(50% - 10rem)!important;}
    section > div h1 {
        position: relative; 
        margin: 2.5rem 0 0!important; 
        font-size: 3.3rem; 
        width: 21.5rem!important;
    }
    section > div h2 {
        pointer-events: none;
    }
    .timeline .year {font-size: 5.5rem; pointer-events: none; margin-top: -6.7rem;}
    
    .inverted section > div h2 {color: white;}
    .inverted section > div h2, .inverted section > div p {
        text-align: right; 
        left: calc(50% - 10rem);
    }
    section > div p {padding-bottom: 4rem;}
    .section:nth-child(odd) section > div::after {right: auto; left: 0;}

    .overlay > div > div .video {right: auto!important; left: 50%; margin: 0; transform: translate(-50%, -50%);}
    .overlay > div > div .video div.ccbutton {width: 2rem;}
    .overlay > div > div .video.loading::after {font-size: 1rem;}
    footer {background-image: url(/img/footer_small.jpg);}
    .overlay > div > div .video .voiceover {background: rgba(27, 25, 19, 0.9);}
    .overlay.left > div > div .video .voiceover,
    .overlay.right > div > div .video .voiceover {transform: none;}
    .overlay > div > div .video .voiceover .close {display: block;}
}

/* SMALL TIMELINE */
@media (max-height: 700px), (max-width: 600px) {
    .timeline {width: 11.5px;}
    .timeline .year {padding-left: 25px;}
    .timeline .year::before {
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        border-left: 22.5px solid #2350dc;
        margin-left: -30px;
    }
    #fp-nav a::before {width: 1px;}
    #fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li:hover a.active span {
        width: 3px;
        margin-left: -2px;
    }
}

/* SQUARE */
@media screen and (max-width: 143vh) and (min-width: 85vh) {
    section .img {margin: 1.5rem 0 1.5rem;}
    section > div > span {margin: 0; height: 41.5rem;}
}

/* VERY VERTICAL */
@media screen and (max-width: 59vh) {
    html {font-size: 3.25vw;}
}

@media (max-width: 600px) {
    .overlay > div > div .video {top: 0; right: auto; left: 0; width: 100%; height: 100%; transform: none;}
    .overlay > div > div .video .vimeoplayer iframe {width: 100vw; height: 300vw;}
    .overlay > div > div .video .mp4player video {width: 100%; height: 100%;}
    .overlay > div > div .video .voiceover .close,
    .overlay > div > div .video .controls > div {margin-top: 0.5rem;}
    .overlay > div > div .video div.ccbutton {width: 3.5rem; height: 2.25rem;}
    .overlay > div > div .video div.ccbutton::before,
    .overlay > div > div .video .voiceover,
    .overlay > div > div .video.loading::after {font-size: 1.25rem;}
}