* {
    padding: 0;
    margin: 0;
    border: 0
}

html {
    font-size: 20px;
    scroll-behavior: smooth
}

body {
    font-size: .75rem;
    color: #383837;
    line-height: 1.4;
    font-family: Poppins;
    font-weight: 300;
    background: #b7bde1 no-repeat;
    background-size: cover;
    font-style: normal
}

a {
    text-decoration: none;
    color: #383837
}

ol,
ul {
    list-style-type: none
}

p {
    margin-bottom: 1.4em;
    font-style: italic
}

br {
    margin: 0;
    color: #e5e5f4;
    color: #b7bde1;
    color: #d6aebc;
    color: #94a7a7;
    color: #facc32;
    color: #263471;
    color: #cc3773;
    color: #383837
}

body.home {
    background-color: #e5e5f4
}

body.theater {
    background-color: #fff
}

body.theater::before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    width: 50%;
    height: 100%;
    background: #fafafa;
    z-index: -1
}

body.voor-docenten {
    background-image: url('/img/achtergrond\ pag.\ Voor\ Docenten.svg')
}

body.lesmateriaal {
    background-image: url('/img/achtergrond%20pag.%20Home.svg?_cchid=3ebae81de840ce5b5e6d0d49e92847ae')
}

body.thema-1 {
    background-image: url('/img/achtergrond\ pag.\ Thema\ 1.svg')
}

body.thema-2 {
    background-image: url('/img/achtergrond\ pag.\ Thema\ 2.svg')
}

body.thema-3 {
    background-image: url('/img/achtergrond\ pag.\ Thema\ 3.svg')
}

body.boek {
    background-image: url('/img/achtergrond\ pag.\ Boek.svg')
}

body.over-ons {
    background-image: url('/img/achtergrond\ pag.\ Over\ ons.svg')
}

h1,
h2,
h3,
h4 {
    font-weight: 600;
    margin-bottom: .25rem;
    color: #263471
}

h1 span {
    font-weight: 500
}

h2 span,
h3 span,
h4 span {
    font-weight: 700
}

h1 {
    font-size: 1.8rem
}

h2 {
    font-size: 1.5rem;
    font-weight: 500
}

h3 {
    font-size: 1.2rem;
    font-weight: 400;
    font-weight: 500
}

h4 {
    font-size: 1.2rem;
    font-weight: 400
}

@media only screen and (max-width:850px) {
    html {
        font-size: 16px
    }

    h1 {
        font-size: 1.5rem
    }

    h2 {
        font-size: 1.2rem
    }
}

main {
    display: flex;
    flex-direction: column
}

.klas article p {
    max-width: 25rem
}

figure {
    position: relative;
    font-weight: 700;
    font-size: .9rem;
    color: #263471
}

figure img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: contain
}

.content a {
    text-decoration: underline;
    font-weight: 400
}

.content a:hover {
    color: #facc32
}

.content li {
    font-style: italic
}

.klas section {
    background: #fafafa;
    max-width: calc(65rem + 9rem);
    width: calc(100% - 2rem);
    margin: 3rem auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

section.grey {
    background: #f4f4f4
}

section.grey60::before {
    content: "";
    width: 100%;
    height: 60%;
    position: absolute;
    bottom: 0;
    background: #f4f4f4
}

section.grey50::before {
    content: "";
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 0;
    background: #f4f4f4
}

section.grey40::before {
    content: "";
    width: 100%;
    height: 40%;
    position: absolute;
    bottom: 0;
    background: #f4f4f4;
    z-index: -1
}

.klas section>div.content {
    max-width: 60rem;
    margin: 5rem auto 5rem auto;
    position: relative;
    width: calc(100% - 2rem)
}

.klas section.astrid>div.content {
    margin: -4rem auto 4rem
}

:not(.voor-docenten) section:first-of-type {
    padding-top: 5rem;
    margin-top: 1rem
}

.voor-docenten section:first-of-type {
    padding-top: 0
}

section:first-of-type>div.content {
    margin-top: 0
}

.lesmateriaal section:first-of-type {
    padding-top: 10rem
}

section.nomargin {
    margin: 0 auto
}

.block {
    background: #fafafa;
    max-width: 30rem;
    padding: 1rem 1.5rem;
    margin-left: 0
}

div.content.mt {
    margin-top: -6rem
}

.down-info {
    font-size: .6rem;
    width: calc(100% - 2rem)
}

a.rood {
    color: #cc3773;
    font-weight: 700
}

a.rood.scroll {
    cursor: pointer;
    transform: rotate(-90deg);
    font-size: .5rem;
    width: 5.5rem;
    display: inline-block;
    position: sticky;
    top: 23rem;
    margin-bottom: 4rem;
    text-align: right
}

section div>a.rood.back {
    display: block;
    text-align: right;
    margin-top: 2rem;
    text-decoration: underline;
    font-weight: 500;
    font-size: .6rem;
    margin-left: auto;
    padding: .5rem
}

section>a.rood.back {
    display: block;
    text-align: right;
    margin-right: 2rem;
    margin-bottom: 2rem;
    text-decoration: underline;
    font-weight: 500;
    font-size: .6rem;
    margin-top: 0;
    margin-left: auto;
    padding: .5rem
}

@media only screen and (max-width:1410px) {
    a.rood.scroll {
        margin-left: -1.5rem
    }
}

@media only screen and (max-width:1340px) {
    a.rood.scroll {
        opacity: 0;
        visibility: hidden
    }
}

img.sw {
    width: 2rem;
    display: block;
    margin-left: -.3rem;
    margin-bottom: .8rem
}

ul.sw1 li {
    background: url('../img/swoosh1__cchid-0158e0c0973c7f5002ad24c9d78a0e99.svg') no-repeat;
    background-size: 1.5rem;
    background-position-y: center;
    padding-left: 1.8rem
}

ul.sw2 li {
    background: url('/img/swoosh2.svg?_cchid=bfe7653a891d3c7cf2e8295546255c2d') no-repeat;
    background-size: 1.9rem;
    background-position-y: center;
    padding-left: 1.9rem
}

ul.sw3 li {
    background: url('/img/swoosh3.svg?_cchid=3f76dedece23e0aac2483b5b22ad31be') no-repeat;
    background-size: 1.5rem;
    background-position-y: center;
    padding-left: 1.8rem
}

ul.sw7 li {
    background: url('/img/swoosh7.svg?_cchid=2a8e7361a05b3ca0f31311f1797031ca') no-repeat;
    background-size: 1.5rem;
    background-position-y: center;
    padding-left: 1.8rem
}

ul.sw8 li {
    background: url('/img/swoosh8.svg?_cchid=dd637f434673e83089bf962f4ae19fa0') no-repeat;
    background-size: 1.5rem;
    background-position-y: center;
    padding-left: 1.8rem
}

section.tr {
    -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 1.5rem, calc(100% - 1.5rem) 0);
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 1.5rem, calc(100% - 1.5rem) 0)
}

section.tl {
    -webkit-clip-path: polygon(0 1.5rem, 0 100%, 100% 100%, 100% 0, 1.5rem 0);
    clip-path: polygon(0 1.5rem, 0 100%, 100% 100%, 100% 0, 1.5rem 0)
}

section.br {
    -webkit-clip-path: polygon(0 0, 0 100%, calc(100% - 1.5rem) 100%, 100% calc(100% - 1.5rem), 100% 0);
    clip-path: polygon(0 0, 0 100%, calc(100% - 1.5rem) 100%, 100% calc(100% - 1.5rem), 100% 0)
}

section.bl {
    -webkit-clip-path: polygon(0 0, 0 calc(100% - 1.5rem), 1.5rem 100%, 100% 100%, 100% 0);
    clip-path: polygon(0 0, 0 calc(100% - 1.5rem), 1.5rem 100%, 100% 100%, 100% 0)
}

section.tr.br {
    -webkit-clip-path: polygon(0 0, 0 100%, calc(100% - 1.5rem) 100%, 100% calc(100% - 1.5rem), 100% 1.5rem, calc(100% - 1.5rem) 0%);
    clip-path: polygon(0 0, 0 100%, calc(100% - 1.5rem) 100%, 100% calc(100% - 1.5rem), 100% 1.5rem, calc(100% - 1.5rem) 0%)
}

section.tl::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 1.5rem solid #cdcccc;
    border-left: 1.5rem solid transparent
}

section.tr::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    right: 0;
    border-bottom: 1.5rem solid #cdcccc;
    border-right: 1.5rem solid transparent
}

section.br::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 0;
    right: 0;
    border-top: 1.5rem solid #cdcccc;
    border-right: 1.5rem solid transparent
}

section.bl::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1.5rem solid #cdcccc;
    border-left: 1.5rem solid transparent
}

section.tr.br::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    right: 0;
    border-bottom: 1.5rem solid #cdcccc;
    border-right: 1.5rem solid transparent;
    bottom: auto;
    border-top: none
}

section.tr.br .extracorner {
    width: 0;
    height: 0;
    position: absolute;
    right: 0;
    border-top: 1.5rem solid #cdcccc;
    border-right: 1.5rem solid transparent;
    bottom: 0
}

section.tr.bl {
    -webkit-clip-path: polygon(0 0, 0 calc(100% - 1.5rem), 1.5rem 100%, 100% 100%, 100% 1.5rem, calc(100% - 1.5rem) 0%);
    clip-path: polygon(0 0, 0 calc(100% - 1.5rem), 1.5rem 100%, 100% 100%, 100% 1.5rem, calc(100% - 1.5rem) 0%)
}

section.tr.bl::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    right: 0;
    border-bottom: 1.5rem solid #cdcccc;
    border-right: 1.5rem solid transparent;
    bottom: auto;
    border-top: none;
    left: auto;
    border-left: none
}

section.tr.bl .extracorner {
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    border-top: 1.5rem solid #cdcccc;
    border-left: 1.5rem solid transparent;
    bottom: 0
}

header {
    font-weight: 500;
    font-size: .7rem
}

nav#desktop {
    max-width: 65rem;
    width: calc(100% - 6rem);
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 2.5rem;
    z-index: 1
}

nav#desktop>ul {
    display: flex
}

nav#desktop>ul>li {
    margin-left: 3.6rem
}

nav#desktop>ul>li>a {
    padding: .2rem
}

nav#desktop>ul>li:nth-of-type(1) {
    margin-left: 0;
    position: relative;
    width: 12rem
}

nav#desktop>ul>li:nth-of-type(1) a {
    display: block;
    height: 5rem;
    display: flex;
    align-items: center
}

nav#desktop>ul>li:nth-of-type(1) a img {
    display: inline-block
}

nav#desktop>ul>li:nth-of-type(2) {
    margin-left: auto
}

nav#desktop>ul>li:last-of-type {
    margin-right: 1rem
}

nav#desktop>ul>li:hover ul.sub {
    height: 3.5rem
}

nav#desktop ul.sub {
    position: absolute;
    margin-top: .7rem;
    transition: .5s ease;
    height: 0;
    overflow: hidden;
    font-style: italic
}

nav#desktop ul.sub li {
    padding: 0 1.2rem;
    margin-bottom: .2rem;
    display: flex;
    align-items: center
}

nav#desktop ul.sub li::before {
    content: "";
    display: block;
    position: absolute;
    width: 1.2rem;
    height: .5rem;
    opacity: 0;
    background: url('/img/swoosh4.svg?_cchid=ad1e839b9de5244940d1ac672aea2f30') no-repeat;
    left: -.1rem;
    transition: .5s ease
}

.klas nav#desktop>ul>li::after {
    transition: 250ms ease;
    opacity: 0;
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background-repeat: no-repeat
}

.klas nav#desktop>ul>li:nth-of-type(2)::after {
    background-image: url('/img/swoosh6.svg?_cchid=60255b4ebae5d2e10c52dffe3612f949');
    background-position-y: -9px;
    transform-origin: top;
    transform: scaleY(.9)
}

.klas nav#desktop>ul>li:nth-of-type(3)::after {
    background-image: url('/img/swoosh5.svg?_cchid=0ea339baec858091c8b223c841f7716d');
    background-position-y: -9px
}

.klas nav#desktop>ul>li:nth-of-type(4)::after {
    background-image: url('../img/swoosh1__cchid-0158e0c0973c7f5002ad24c9d78a0e99.svg');
    background-position-y: -3px;
    transform-origin: center;
    transform: scaleX(1.2)
}

.klas nav#desktop>ul>li:nth-of-type(5)::after {
    background-image: url('/img/swoosh6.svg?_cchid=60255b4ebae5d2e10c52dffe3612f949');
    background-position-y: -10px;
    transform: scaleY(.6);
    transform-origin: top
}

.klas nav#desktop>ul>li:nth-of-type(6)::after {
    background-image: url('/img/swoosh5.svg?_cchid=0ea339baec858091c8b223c841f7716d');
    background-position-y: -4px
}

nav#desktop>ul>li.active::after,
nav#desktop>ul>li:hover::after {
    opacity: 1
}

nav#desktop ul.sub li.active::before,
nav#desktop ul.sub li:hover::before {
    opacity: 1
}

nav#mobile {
    width: 70%;
    height: calc(100% - .5rem);
    position: fixed;
    top: .5rem;
    left: 0;
    background: #fafafa;
    z-index: 95;
    transform: translateX(-100%);
    display: none;
    transition: .5s ease;
    -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 1.5rem, calc(100% - 1.5rem) 0);
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 1.5rem, calc(100% - 1.5rem) 0)
}

header .underlay {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 94;
    opacity: 0;
    display: none;
    transition: .5s ease;
    pointer-events: none
}

nav#mobile::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    right: 0;
    border-bottom: 1.5rem solid #cdcccc;
    border-right: 1.5rem solid transparent;
    display: none
}

nav#mobile>ul {
    margin-left: 1rem;
    font-size: .8rem
}

nav#mobile>ul>li:nth-of-type(1) {
    display: flex
}

nav#mobile>ul>li:nth-of-type(1) img {
    width: 10rem;
    margin-top: -2rem
}

nav#mobile>ul>li:nth-of-type(2) {
    margin-top: -3rem
}

nav#mobile>ul li {
    margin-bottom: .5rem
}

nav#mobile>ul li a {
    padding: .3rem
}

nav#mobile>ul ul {
    margin-left: 1rem;
    margin-top: .5rem
}

header .hamburger,
header input {
    display: none
}

@media only screen and (max-width:1190px) {
    nav#desktop>ul>li {
        margin-left: 1.6rem
    }
}

@media only screen and (max-width:1020px) {
    .klas section {
        width: calc(100% - 1rem)
    }

    nav#desktop>ul>li:nth-of-type(1) {
        width: 8rem;
        margin-left: -.8rem
    }

    nav#desktop {
        width: calc(100% - 4rem);
        top: 1rem
    }

    nav#desktop ul li:not(li:first-of-type) {
        display: none
    }

    nav#mobile {
        display: flex;
        position: fixed
    }

    header .underlay,
    nav#mobile::after {
        display: block
    }

    header .hamburger,
    header input {
        display: block;
        position: fixed;
        right: 1rem;
        top: 1rem;
        width: 1.2rem;
        height: 1rem;
        transform: translateY(2rem);
        transition: .5s ease
    }

    header .hamburger {
        z-index: 98
    }

    header input {
        z-index: 99;
        width: 1.5rem;
        height: 1.5rem;
        top: .75rem;
        right: .75rem;
        opacity: 0
    }

    header .hamburger span {
        width: 100%;
        height: 3px;
        background: #facc32;
        display: inline-block;
        position: absolute;
        right: 0;
        top: 0;
        border-radius: 2px;
        transition: .5s ease
    }

    header .hamburger span:nth-of-type(1) {
        top: 0
    }

    header .hamburger span:nth-of-type(2) {
        top: 50%;
        width: 85%;
        right: 0
    }

    header .hamburger span:nth-of-type(3) {
        top: 100%;
        width: 60%
    }

    .scrolled header .hamburger,
    .scrolled header input {
        transform: translateY(0)
    }

    header input:checked~.hamburger {
        margin-top: .2rem
    }

    header input:checked~.hamburger span:nth-of-type(1) {
        top: 0;
        transform: rotate(45deg)
    }

    header input:checked~.hamburger span:nth-of-type(2) {
        top: 50%;
        width: 100%;
        opacity: 0
    }

    header input:checked~.hamburger span:nth-of-type(3) {
        top: 0;
        width: 100%;
        transform: rotate(-45deg)
    }

    header input:checked {
        width: 30%;
        right: 0;
        top: 0;
        transform: none;
        height: 100%
    }

    header input:checked~nav#mobile {
        transform: translateX(0)
    }

    header input:checked~.underlay {
        opacity: 1
    }
}

.lesmateriaal section.introduction .content {
    margin-top: -5rem;
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    grid-gap: 4rem
}

section.introduction .content nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

section.introduction .content nav ul {
    margin: 2rem 4rem 0 auto
}

section.introduction .content nav ul li {
    margin: .2rem 0
}

section.introduction .content nav ul li a {
    font-style: normal;
    padding: .2rem
}

section.introduction .content nav ul li a span {
    font-weight: 700
}

.lesmateriaal section.introduction .content figure:nth-of-type(1) {
    max-width: 23rem;
    height: 0;
    padding-bottom: 100%;
    position: relative;
    margin-top: -8rem
}

.lesmateriaal section.introduction .content figure:nth-of-type(1) img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 8rem;
    object-fit: contain
}

.lesmateriaal section.introduction .content figure:nth-of-type(2) {
    max-width: 17rem;
    margin-right: 3rem
}

.lesmateriaal section.introduction .content article:nth-of-type(2) {
    margin-top: 5rem;
    background: #fafafa;
    height: 0;
    width: calc(100% + 4rem);
    padding: 2rem 0 calc(50% + 1.5rem) 2rem;
    margin-left: -6rem;
    margin-right: 1rem
}

.lesmateriaal section.introduction .content article:nth-of-type(2) ul li {
    margin-bottom: .2rem
}

.lesmateriaal section.introduction .content article:nth-of-type(2)>a {
    margin-top: 1rem;
    display: inline-block
}

section.text .content {
    display: flex;
    justify-content: space-between;
    gap: 2rem
}

section.text .content figure {
    width: 100%;
    height: 0;
    padding-bottom: 40%
}

section.text .content article {
    max-width: 25rem;
    display: flex;
    flex-direction: column
}

section.text .content article>a {
    margin-bottom: 2rem
}

.content article h2 {
    margin-bottom: 1rem
}

section.text.right .content {
    display: flex;
    flex-direction: row-reverse
}

section.text img.sw {
    margin-bottom: 1.5rem
}

figure.group {
    width: 100%;
    height: 0;
    padding-bottom: 40%
}

figure.group {
    margin-top: -4rem
}

figure.group>div {
    display: flex;
    position: absolute;
    bottom: -3rem;
    width: 100%;
    justify-content: space-around;
    left: 0;
    right: 0;
    margin: 0 auto;
    max-width: 20rem
}

figure.group>div figcaption:nth-of-type(2) {
    margin: 0 -2.5rem 0 -3rem
}

figure.group>div figcaption {
    display: block;
    width: 2rem;
    position: relative;
    height: 0;
    padding-bottom: 18%;
    margin: 0 auto
}

figure.group>div figcaption img {
    margin-top: -.3rem
}

figure.group>div figcaption:nth-of-type(3) img {
    width: 160%
}

.over-ons figure.group img {
    object-fit: cover
}

section.thema2>div.content {
    margin-bottom: 0
}

section.thema2>div.content>figure {
    padding-bottom: 50%
}

section.thema2>div.content>figure img {
    left: auto;
    top: -12%;
    width: 100%;
    height: 130%
}

section.thema3>div.content {
    margin-bottom: 0
}

section.thema3>div.content>figure {
    padding-bottom: 50%;
    max-width: 30rem
}

section.thema3>div.content>figure img {
    left: auto;
    top: auto;
    bottom: 0;
    width: 100%;
    height: 100%
}

section.goodtoknow div>div {
    display: flex;
    background: #fff;
    padding: 2rem;
    margin-left: -2rem;
    max-width: 30rem
}

section.goodtoknow div>img {
    max-width: 10rem
}

section.goodtoknow div {
    margin-bottom: 2rem
}

footer {
    background: #b7bde1;
    display: flex
}

footer .content {
    max-width: 60rem;
    margin: 2rem auto;
    width: calc(100% - 2rem);
    display: flex;
    flex-wrap: wrap;
    gap: 2rem 5rem
}

footer .content>* {
    max-width: 17rem
}

footer .content h2 {
    width: 100%;
    max-width: 100%
}

footer h3 {
    font-style: normal;
    font-weight: 700;
    font-size: .8rem;
    margin-bottom: 1rem
}

footer address:nth-of-type(2) p {
    margin-bottom: 0;
    font-weight: 700;
    font-style: normal
}

.voor-docenten section:first-of-type {
    margin-bottom: 0
}

.voor-docenten h1 {
    margin-bottom: 3rem
}

.voor-docenten .timeline .content {
    background: #fff
}

.voor-docenten section.nodig .content {
    margin-bottom: 1rem
}

.voor-docenten section.nodig .content>div {
    background: #fafafa;
    margin-top: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 40rem
}

.voor-docenten section.nodig .content>div ul {
    margin: .5rem 1rem 1rem 1.5rem;
    width: calc(80% - 1.5rem)
}

.voor-docenten section.nodig .content>div ul li {
    margin-bottom: .5rem
}

.voor-docenten section.nodig .content>div h3 {
    margin: 1rem 0 0;
    width: calc(100% - 2rem)
}

.voor-docenten section.nodig .content>div img {
    display: block;
    width: calc(20% - 1rem);
    transform: rotate(90deg);
    margin-top: -3rem
}

.voor-docenten .timeline .content>div {
    padding: 2rem;
    width: calc(100% - 6rem)
}

.voor-docenten .timeline .content div>ul {
    overflow: scroll;
    padding: 2rem 4rem 0 0;
    width: 100%
}

.voor-docenten .timeline .content div>ul>li {
    width: calc(100% - 1rem);
    border-bottom: 1px solid #cc3773;
    margin-left: 5rem;
    min-width: 46rem;
    margin-bottom: 3.5rem
}

.voor-docenten .timeline .content div>ul>li ul {
    display: flex;
    margin-left: -5.5rem
}

.voor-docenten .timeline .content div>ul>li li {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-style: normal;
    font-weight: 400;
    font-size: .6rem;
    transform: translateY(-.5rem);
    margin-right: 2rem;
    flex-shrink: 0;
    width: 11rem
}

.voor-docenten .timeline .content div>ul>li li::before {
    content: "";
    display: block;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: #cc3773;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 1.3rem
}

.voor-docenten .timeline .content div>ul>li li div {
    background: #b7bde1;
    border-radius: .3rem;
    padding: .1rem .5rem;
    flex-shrink: 0
}

.voor-docenten .timeline .content div>ul>li li span {
    font-weight: 600
}

.voor-docenten .timeline .content div>ul>li li:nth-of-type(2),
.voor-docenten .timeline .content div>ul>li li:nth-of-type(4) {
    transform: translateY(1.6rem)
}

.voor-docenten .timeline .content div>ul>li li:nth-of-type(2)::before,
.voor-docenten .timeline .content div>ul>li li:nth-of-type(4)::before {
    top: -.78rem
}

.noscroll::-webkit-scrollbar {
    display: none
}

.noscroll {
    -ms-overflow-style: none;
    scrollbar-width: none
}

section.introduction.thema article {
    max-width: 28rem
}

section.introduction.thema article h1 {
    margin-bottom: 2rem
}

section.introduction.thema .content {
    display: flex
}

figure.group {
    width: 40%;
    margin: 8rem 2rem 0 auto;
    padding-bottom: 50%
}

section a.rood {
    margin-top: 4rem
}

#module-1 div.content,
#module-2 div.content,
#module-3 div.content {
    margin-top: -6rem
}

a.icon,
p.icon {
    display: flex;
    align-items: center;
    margin-top: 5rem
}

a.icon img,
p.icon img {
    max-width: 5rem;
    margin-left: -1.6rem
}

.thema-1 #module-1 .content>ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 2rem
}

.thema-1 #module-1 .content>ul li {
    background: silver;
    padding-bottom: 60%
}

.thema-1 #module-2 .buttons {
    display: flex;
    justify-content: space-between;
    width: calc(100% + 3rem);
    margin-left: -1.5rem
}

.thema-1 #module-2 .buttons a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #cc3773;
    font-weight: 600;
    cursor: pointer;
    margin: 0 1rem;
    user-select: none
}

.thema-1 #module-2 .buttons a img {
    width: 4rem;
    margin-left: -.5rem
}

.thema-1 #module-2 .buttons a:hover img {
    animation: bounceR 2s ease infinite
}

.thema-1 #module-2 .buttons a.left:hover img {
    animation: bounceL 2s ease infinite
}

.thema-1 #module-2 .buttons a.left img {
    transform: scaleX(-1);
    margin-right: -.5rem
}

@keyframes bounceR {
    0% {
        transform: translateX(0)
    }

    50% {
        transform: translateX(.5rem)
    }

    100% {
        transform: translateX(0)
    }
}

@keyframes bounceL {
    0% {
        transform: translateX(0) scaleX(-1)
    }

    50% {
        transform: translateX(-.5rem) scaleX(-1)
    }

    100% {
        transform: translateX(0) scaleX(-1)
    }
}

.thema-1 #module-2 .timeline {
    overflow: scroll;
    width: 100%;
    margin-top: -3rem;
    scroll-behavior: smooth
}

.thema-1 #module-2 .timeline ul::before {
    content: "";
    display: block;
    border-top: 1px solid #cc3773;
    width: 100%;
    position: absolute;
    left: 0
}

.thema-1 #module-2 .timeline ul {
    padding: 4rem 0;
    display: flex;
    width: calc(100% + 90rem);
    align-items: flex-start
}

.thema-1 #module-2 .timeline li span {
    position: absolute;
    top: -5rem;
    font-style: normal;
    font-weight: 600;
    color: #cc3773;
    display: block;
    display: flex;
    justify-content: center;
    z-index: 2
}

.thema-1 #module-2 .timeline li img {
    position: absolute;
    height: 4rem;
    top: -3rem;
    z-index: 1;
    user-select: none
}

.thema-1 #module-2 .timeline li::after {
    content: "";
    display: block;
    background: #fff;
    border: 1px dashed #cdcccc;
    width: .3rem;
    height: .3rem;
    border-radius: 50%;
    position: absolute;
    bottom: 1.5rem;
    transition: .5s ease;
    transform: translate(.2rem, -8.5rem);
    opacity: 0
}

.thema-1 #module-2 .timeline li {
    margin-top: 3rem;
    width: 10rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 7px;
    flex-shrink: 0;
    margin-right: 8rem
}

.thema-1 #module-2 .timeline li p {
    font-size: .55rem;
    text-align: center;
    padding: 2rem .8rem 3.5rem .8rem;
    background: #b7bde1;
    border-radius: 3rem;
    transform-origin: top center;
    transform: scale(.2) translate(.6rem, 2.2rem);
    color: #b7bde1;
    user-select: none;
    transition: .5s ease
}

.thema-1 #module-2 .timeline li.active p {
    border-radius: 8px;
    transform: scale(1);
    user-select: initial;
    color: #383837
}

.thema-1 #module-2 .timeline li.active::after {
    transform: translate(0, 0);
    width: 1.7rem;
    height: 1.7rem;
    opacity: 1
}

.thema-1 #module-2 .timeline li p {
    font-size: .55rem;
    text-align: center;
    padding: 2rem .8rem 3.5rem .8rem;
    background: #b7bde1;
    border-radius: 3rem;
    transform-origin: top center;
    transform: scale(.2) translate(.6rem, 2.2rem);
    color: #b7bde1;
    user-select: none;
    transition: .5s ease
}

.thema-1 #module-2 .timeline li.subactive p {
    border-radius: 8px;
    transform: scale(.5);
    user-select: initial
}

.thema-1 #module-2 .timeline li.subactive::after {
    transform: translate(0, -5.5rem);
    width: .8rem;
    height: .8rem;
    opacity: 0
}

.thema-1 #module-2 .timeline li span::after,
.thema-1 #module-2 .timeline li span::before {
    position: absolute;
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: #cc3773;
    content: ""
}

.thema-1 #module-2 .timeline li span::after {
    top: 5.8rem;
    margin-left: .3rem
}

.thema-1 #module-2 .timeline li span::before {
    top: 1.8rem;
    margin-left: .3rem
}

li.empty {
    opacity: 0;
    pointer-events: none
}

.block.downloads {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    padding-right: 0;
    align-items: center
}

.block.downloads h3 {
    width: 100%;
    margin-bottom: .5rem
}

.block.downloads img {
    width: 100%;
    transform: rotate(90deg);
    height: 100%;
    object-fit: cover
}

.block.downloads figure {
    width: 2rem;
    height: 4rem;
    margin: -5% 5% 0 auto
}

.block.downloads ul {
    width: 80%
}

.block.downloads ul li {
    margin-bottom: .5rem
}

.block.downloads ul li a {
    font-style: normal
}

.thema-1 #module-3 .image {
    display: flex;
    justify-content: space-between;
    margin-top: 3rem;
    align-items: center
}

.thema-1 #module-3 .image figure {
    height: 0;
    padding-bottom: 20%;
    width: 35%;
    margin-left: 10%
}

.thema-1 #module-3 .image figure img {
    object-fit: cover
}

.thema-1 #module-3 .image article {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 5rem
}

.thema-1 #module-3 .image article h3 {
    color: #cc3773;
    font-size: .8rem;
    z-index: 1
}

.thema-1 #module-3 .image article p {
    font-size: .5rem;
    background: #e5e5f4;
    padding: .5rem 1.5rem .5rem 3rem;
    border-radius: .5rem;
    line-height: 1.7;
    position: relative;
    display: flex;
    align-items: center
}

.thema-1 #module-3 .image article span,
.thema-1 #module-3 .image figcaption {
    position: absolute;
    font-size: .8rem;
    left: .8rem;
    background: #fafafa;
    border: 1px dashed #cc3773;
    border-radius: 50%;
    height: 1.4rem;
    width: 1.4rem;
    text-align: center;
    line-height: 1.4rem
}

.thema-1 #module-3 .image figcaption {
    font-weight: 400;
    font-style: italic;
    left: auto;
    right: .9rem;
    top: 50%;
    transform: translateY(-50%)
}

.thema-1 #module-3 .image.i2 {
    margin-top: -5rem;
    z-index: -1;
    position: relative
}

.thema-1 #module-3 .image.i2 figure {
    padding-bottom: 23%;
    width: 42%;
    margin-left: 0;
    margin-top: 2rem
}

.thema-1 #module-3 .image.i2 article {
    margin-top: 1rem
}

.thema-2 section.introduction .content {
    margin-bottom: 0
}

.thema-2 section.introduction figure.group {
    margin: 4rem 2rem 0 auto
}

ul.filmpjes {
    display: flex;
    justify-content: space-between;
    gap: 4rem
}

ul.filmpjes .videobox {
    background: silver;
    padding-bottom: 55%;
    width: 100%
}

ul.filmpjes li {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%
}

.content .filmpjes p {
    justify-content: center;
    width: 100%;
    margin-top: 1rem
}

.thema-2 #module-2 .content {
    display: flex;
    justify-content: space-between
}

.thema-2 #module-2 figure {
    width: 50%;
    padding-bottom: 70%;
    margin-bottom: -40%;
    z-index: 1
}

.thema-2 section.nomargin a.rood.scroll {
    margin-top: 4rem
}

.thema-2 section#module-3 {
    margin-bottom: 3rem;
    margin-top: -.2rem
}

.thema-2 section#module-3 .content {
    margin-top: 5rem
}

.thema-2 #module-3 .downloads {
    margin-top: 4rem;
    margin-left: 20%
}

.thema-3 .introduction .content {
    margin-bottom: 0
}

.thema-3 .introduction figure {
    width: 50%;
    padding-bottom: 44%;
    margin-top: 0
}

.thema-3 #module-1 .content {
    display: flex
}

.thema-3 #module-1 figure {
    width: 50%;
    padding-bottom: 50%
}

.thema-3 #module-2 .content {
    margin-bottom: 0
}

.thema-3 #module-2 figure {
    width: 60%;
    padding-bottom: 70%;
    margin: -5rem 0 -14% auto
}

.thema-3 #module-3 .filmpjes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 2rem 3rem
}

.thema-3 #module-3 .filmpjes p.icon {
    flex-wrap: wrap
}

.thema-3 #module-3 .filmpjes p.icon>span {
    width: calc(100% - 5rem);
    display: block
}

.thema-3 #module-3 .filmpjes p.icon>span>span:first-of-type {
    font-style: normal;
    font-weight: 500
}

.thema-3 section.last {
    margin-top: -.2rem
}

.thema-3 section.last .content {
    margin: 2rem auto
}

.thema-3 .block.downloads {
    background: #f4f4f4;
    margin-left: 0
}

.boek section.introduction {
    margin-bottom: 0
}

.boek section.introduction figure {
    margin: 8rem 0 0 auto
}

.boek section.nomargin .content article h2 {
    margin-bottom: 2rem
}

.boek section.nomargin .content article p {
    max-width: 35rem;
    margin-bottom: .5rem
}

.boek section.nomargin .content article address {
    font-weight: 500;
    font-style: normal
}

.boek section.nomargin .content article address:first-of-type {
    margin-bottom: 3rem
}

section.astrid .content {
    display: flex
}

section.astrid figure {
    width: 40%;
    padding-bottom: 40%;
    margin-right: 1rem
}

section.astrid article {
    margin-top: 1rem
}

section.astrid article p {
    max-width: 30rem
}

section.astrid .content>h2 {
    display: none
}

.over-ons section.introduction figure {
    margin-top: 5rem;
    width: 35%;
    padding-bottom: 60%
}

.over-ons figure img {
    object-fit: cover
}

.over-ons .astrid figure {
    margin-right: 4rem;
    flex-shrink: 0;
    height: 0;
    align-self: center
}

.over-ons #makers-lesmateriaal {
    margin-bottom: 3rem
}

.over-ons #makers-lesmateriaal .content {
    flex-direction: column
}

.over-ons #makers-lesmateriaal .content>div {
    display: flex;
    flex-direction: row-reverse;
    margin-bottom: 4rem
}

.over-ons #makers-lesmateriaal .content>div:last-of-type {
    flex-direction: row
}

.over-ons #makers-lesmateriaal .content>div:last-of-type figure {
    margin: 0 auto 0 0
}

.over-ons #makers-lesmateriaal .content>div h2 {
    margin-right: auto
}

.over-ons #makers-lesmateriaal .content div:nth-of-type(2) article {
    margin-right: auto
}

.over-ons #makers-lesmateriaal figure {
    margin-right: 0;
    margin-left: 4rem;
    padding-bottom: 50%
}

.over-ons #makers-lesmateriaal article strong {
    font-style: normal;
    font-weight: 500
}

@media only screen and (max-width:1485px) {
    section.goodtoknow div>div {
        margin-left: 0
    }
}

@media only screen and (max-width:1020px) {
    .klas section:first-of-type>div.content {
        margin-top: -6rem
    }

    .klas.lesmateriaal section:first-of-type>div.content {
        margin-top: -12rem
    }
}

@media only screen and (max-width:1000px) {
    section.introduction.thema .content {
        flex-direction: column
    }

    .thema-1 figure.group {
        margin-top: 1rem;
        width: 100%;
        padding-bottom: 60%
    }

    .thema-2 section.introduction figure.group {
        margin-top: 1rem;
        width: 100%;
        padding-bottom: 60%
    }

    .boek section.introduction.thema .content {
        flex-direction: row;
        gap: 2rem
    }

    .over-ons section.introduction figure {
        margin: 2rem auto 0 auto
    }
}

@media only screen and (max-width:850px) {
    section:first-of-type {
        padding-top: 4rem
    }

    .lesmateriaal section.introduction .content {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 0.5fr 1fr 0.5fr;
        grid-gap: 0;
        max-width: 21rem
    }

    .lesmateriaal section.introduction .content figure:nth-of-type(1) {
        max-width: 23rem;
        width: 100%;
        height: 0;
        padding-bottom: 100%;
        position: relative;
        margin: 0 auto
    }

    .lesmateriaal section.introduction .content figure:nth-of-type(1) img {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        object-fit: contain
    }

    .lesmateriaal section.introduction .content figure:nth-of-type(2) {
        margin: 0 auto;
        width: 100%;
        height: 0;
        padding-bottom: 100%;
        order: 99
    }

    .lesmateriaal section.introduction .content nav ul {
        margin: 2rem 0 0 auto
    }

    .lesmateriaal section.introduction .content article:nth-of-type(2) {
        margin: 2rem 0;
        padding: 1rem;
        height: auto;
        width: auto;
        font-size: .65rem;
        max-width: 30rem
    }

    .lesmateriaal section.introduction .content article:nth-of-type(2) ul {
        margin-top: .5rem
    }

    .lesmateriaal section.introduction .content article:nth-of-type(2) ul li {
        margin-bottom: .2rem
    }

    .lesmateriaal section.introduction .content article:nth-of-type(2)>a {
        margin-top: 1rem;
        display: inline-block
    }

    section.text.right .content,
    section.text>.content {
        flex-direction: column;
        align-items: center
    }

    .lesmateriaal section.text .content>figure {
        padding-bottom: 50%
    }

    .lesmateriaal section.thema3>div.content>figure {
        max-width: 100%
    }

    .thema-1 #module-3 .image {
        align-items: flex-end;
        justify-content: center;
        flex-wrap: wrap;
        max-width: 30rem;
        margin: 3rem auto 1rem auto
    }

    .thema-1 #module-3 .image figure,
    .thema-1 #module-3 .image.i2 figure {
        width: 100%;
        margin-left: 0;
        padding-bottom: 55%;
        margin-top: 0
    }

    .thema-1 #module-3 .image.i2 {
        margin-top: 0;
        z-index: initial
    }

    .thema-1 #module-3 .image article {
        align-items: flex-start;
        margin-top: 1rem;
        width: 100%
    }

    .thema-1 main>section a.rood.back {
        margin-top: 0
    }

    .thema-2 #module-1 ul {
        gap: 2rem
    }

    .boek section.introduction.thema .content figure {
        margin-top: 4rem
    }
}

@media only screen and (max-width:700px) {
    .thema-2 #module-2 .content {
        flex-direction: column
    }

    .thema-2 #module-2 .content figure {
        margin: 0 auto -55% auto;
        padding-bottom: 100%;
        width: 100%
    }

    .thema-3 .introduction figure {
        width: 100%;
        padding-bottom: 55%;
        margin-top: 2rem
    }

    .thema-3 #module-1 .content {
        flex-direction: column
    }

    .thema-3 #module-1 .content figure {
        width: 100%;
        padding-bottom: 90%
    }

    .thema-3 #module-2 figure {
        width: 70%;
        padding-bottom: 90%;
        margin: -2rem 0 -20% auto
    }

    .thema-3 #module-3 .filmpjes {
        grid-template-columns: 1fr;
        width: 100%;
        margin: 0 auto;
        max-width: 30rem
    }

    .boek section.introduction.thema .content {
        flex-direction: column;
        gap: 0
    }

    .boek section.introduction.thema .content figure {
        width: 100%;
        padding-bottom: 0;
        height: 20rem
    }

    section.astrid .content {
        flex-direction: column;
        max-width: 30rem;
        margin-top: 2rem
    }

    section.astrid .content>h2 {
        display: block
    }

    section.astrid .content article>h2 {
        display: none
    }

    section.astrid figure {
        width: 100%;
        padding-bottom: 100%;
        margin-right: 0
    }

    section.astrid figure img {
        object-fit: cover
    }

    .over-ons section.introduction figure {
        width: 80%;
        padding-bottom: 100%
    }

    .over-ons section.astrid .content {
        margin-top: -6rem
    }

    .over-ons section.astrid figure {
        margin-right: 0
    }

    .over-ons #makers-lesmateriaal {
        margin-bottom: 3rem
    }

    .over-ons #makers-lesmateriaal figure {
        margin-right: 0;
        margin-left: 0;
        padding-bottom: 100%
    }

    .over-ons #makers-lesmateriaal .content {
        flex-direction: column
    }

    .over-ons section.astrid .content>h2 {
        margin-bottom: .5rem
    }
}

@media only screen and (max-width:500px) {
    .lesmateriaal section.text .content>figure {
        padding-bottom: 100%
    }

    section.goodtoknow div>div {
        flex-direction: column;
        align-items: center
    }

    section.nodig.grey40::before {
        height: 55%
    }

    .voor-docenten section.nodig .content>div {
        margin-top: 30%
    }

    .voor-docenten section.nodig .content>div ul {
        width: calc(100% - 2rem)
    }

    .voor-docenten section.nodig .content>div img {
        width: 100%;
        max-width: 8rem;
        transform: rotate(90deg);
        margin-top: 0
    }

    .voor-docenten .timeline .content div>ul>li ul {
        margin-left: -3.4rem
    }

    .voor-docenten .timeline .content div>ul>li li {
        width: 7rem
    }

    .voor-docenten .timeline .content div>ul>li {
        min-width: 36rem
    }

    .thema-1 figure.group>div {
        padding-right: 1rem
    }

    .thema-1 figure.group>div figcaption:nth-of-type(2) {
        margin: 0 -5.5rem 0 -5rem
    }

    .thema-1 figure.group {
        padding-bottom: 100%
    }

    .thema-1 #module-1 .content>ul {
        grid-template-columns: 1fr
    }

    .thema-2 section.introduction figure.group {
        margin: 0 auto;
        width: 100%;
        padding-bottom: 100%
    }

    .thema-2 #module-1 ul {
        flex-direction: column
    }

    .thema-2 #module-2 .content figure {
        margin-bottom: -80%
    }

    .thema-2 #module-3 .downloads {
        margin-left: 0
    }

    .thema-3 .introduction figure {
        padding-bottom: 80%
    }
}

.home nav#desktop ul li {
    display: none
}

.home nav#mobile ul {
    display: flex;
    flex-direction: column
}

.home nav#mobile ul li:nth-of-type(1) {
    margin-top: 2.5rem;
    max-width: 6rem
}

.home nav#mobile ul li:nth-of-type(1) img {
    max-height: 10rem
}

.home nav#mobile ul li:nth-of-type(2) {
    margin-top: -.5rem
}

.home>main>a {
    position: absolute;
    top: 0;
    right: 0;
    padding: 1rem 1rem .5rem 2rem;
    background: #b7bde1;
    font-weight: 500;
    -webkit-clip-path: polygon(0 0, 0 calc(100% - 1rem), 1rem 100%, 100% 100%, 100% 0);
    clip-path: polygon(0 0, 0 calc(100% - 1rem), 1rem 100%, 100% 100%, 100% 0);
    font-size: .6rem;
    transition: .5s ease;
    z-index: 5
}

.home>main>a::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1rem solid #cdcccc;
    border-left: 1rem solid transparent;
    transition: .5s ease
}

.home>main>a:hover {
    -webkit-clip-path: polygon(0 0, 0 calc(100% - 1.5rem), 1.5rem 100%, 100% 100%, 100% 0);
    clip-path: polygon(0 0, 0 calc(100% - 1.5rem), 1.5rem 100%, 100% 100%, 100% 0)
}

.home>main>a:hover::after {
    border-top: 1.5rem solid #cdcccc;
    border-left: 1.5rem solid transparent
}

.home>main>section {
    max-width: calc(65rem + 9rem);
    width: calc(100% - 4rem);
    margin: 3rem auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 0;
    margin-bottom: 5rem
}

.home>main>section>div {
    margin-top: 5rem;
    width: 80%;
    margin-left: auto;
    margin-right: 5%;
    padding-bottom: 38%;
    background: #fff;
    -webkit-clip-path: polygon(0 0, 0 calc(100% - 1.5rem), 1.5rem 100%, 100% 100%, 100% 0);
    clip-path: polygon(0 0, 0 calc(100% - 1.5rem), 1.5rem 100%, 100% 100%, 100% 0);
    position: absolute;
    z-index: -1;
    right: 0
}

.home>main>section>div::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1.5rem solid #cdcccc;
    border-left: 1.5rem solid transparent
}

.home>main nav {
    width: 100%
}

.home>main nav ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%
}

.home>main nav ul h2 {
    font-weight: 600
}

.home>main nav ul li {
    max-width: 20rem;
    width: 100%
}

.home>main nav ul li a:hover h2 {
    color: #facc32
}

.home>main nav ul li img {
    width: 100%
}

.home>main nav ul li:nth-of-type(2) img {
    transform: translateX(-18%) scale(1.2)
}

.home>main nav ul li:nth-of-type(3) img {
    transform: translate(-5%, -8%)
}

.home>main nav ul li:nth-of-type(4) img {
    transform: translate(-5%, 4%)
}

.home>main nav ul li:nth-of-type(1) {
    max-width: 16rem;
    margin-right: 2rem
}

.home>main nav ul li:nth-of-type(2) {
    margin-top: 8rem;
    margin-right: -8%
}

.home>main nav ul li:nth-of-type(4) {
    margin-top: 7rem
}

@media only screen and (max-width:900px) {
    .home>main nav ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 2rem
    }

    .home>main>section>div {
        padding-bottom: 100%
    }

    .home>main nav ul li:nth-of-type(1) {
        max-width: 10rem
    }

    .home>main nav ul>li {
        margin: 0 !important;
        width: 100%;
        height: 100%
    }

    .home>main nav ul>li>* {
        margin-left: 10%
    }
}

@media only screen and (max-width:500px) {
    .home>main nav ul {
        grid-template-columns: 1fr
    }

    .home>main>section>div {
        padding-bottom: 350%;
        margin-top: 3rem
    }
}

.theater section {
    max-width: calc(65rem + 9rem);
    width: calc(100% - 2rem);
    margin: 3rem auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.theater section>div.content {
    max-width: 60rem;
    margin: 0 auto 0 auto;
    position: relative;
    width: calc(100% - 2rem)
}

.theater .pagelead {
    position: fixed;
    z-index: 4
}

.theater .pagelead a {
    padding: .2rem 1rem;
    font-weight: 600
}

.theater .pagelead.next {
    right: -6.8rem;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    width: 15rem;
    text-align: center
}

.theater .pagelead.next a {
    background: #facc32
}

.theater .pagelead.prev {
    left: -6.8rem;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    width: 15rem;
    text-align: center
}

.theater .pagelead.prev a {
    background: #cdcccc
}

.theater h1,
.theater h2,
.theater h3,
.theater h4 {
    color: #1a1a1a;
    font-weight: 700
}

.theater .scroll {
    color: #c8b38d
}

.theater nav#desktop {
    width: calc(100% - 4rem);
    transition: .5s ease
}

.theater nav#desktop ul {
    justify-content: flex-end;
    z-index: 2;
    position: relative
}

.theater nav#desktop ul li {
    margin: 0 .5rem
}

.theater nav#desktop ul li:first-of-type {
    margin-right: auto;
    margin-left: 0;
    position: absolute;
    left: 0;
    transition: .5s ease
}

.theater nav#desktop ul li:first-of-type img {
    top: 0;
    position: absolute;
    transition: .5s ease;
    filter: grayscale(1);
    transform: translateY(0)
}

.theater nav#desktop ul li:last-of-type {
    margin-right: 0
}

.theater nav#desktop ul li:last-of-type a {
    background: #ad3e65;
    color: #fff;
    padding: .1rem .4rem
}

.theater nav#desktop ul li a {
    font-weight: 700;
    border-bottom: 3px solid transparent;
    transition: 250ms ease;
    padding: .1rem 0
}

.theater nav#desktop ul li a:hover {
    border-bottom: 3px solid #facc32
}

.theater nav#desktop ul li.active a {
    border-bottom: 3px solid #facc32
}

.theater nav#desktop {
    position: fixed
}

.theater nav#desktop::before {
    width: 100%;
    position: fixed;
    left: 0;
    content: "";
    background: #fff;
    display: block;
    height: 3.7rem;
    top: 0;
    transition: .3s ease;
    opacity: 0
}

.theater.scrolled nav#desktop {
    top: 1.5rem
}

.theater.scrolled nav#desktop ul>li:first-of-type {
    width: 3rem;
    margin-top: -1.4rem
}

.theater.scrolled nav#desktop ul li:first-of-type img {
    filter: grayscale(0)
}

.theater.scrolled nav#desktop::before {
    opacity: 1;
    transform: translateY(0)
}

.theater nav#desktop ul li:first-of-type a:hover,
.theater nav#desktop ul li:last-of-type a:hover {
    border-bottom: 3px solid transparent
}

.theater nav#mobile ul li:last-of-type a {
    background: #ad3e65;
    color: #fff;
    padding: .1rem .4rem
}

@media only screen and (max-width:1020px) {

    .theater header .hamburger,
    .theater header input {
        transform: translateY(.5rem)
    }

    .theater nav#desktop::before {
        width: 3.7rem;
        height: 3.7rem;
        left: .55rem;
        top: .2rem;
        border-radius: 50%
    }

    .theater nav#desktop ul li:nth-of-type(1) {
        margin-left: -1rem
    }

    .theater.scrolled nav#desktop ul>li:first-of-type {
        margin-top: -1.2rem
    }

    .theater nav#mobile>ul>li:nth-of-type(1) img {
        margin-top: 0;
        width: 8rem
    }

    .theater nav#mobile>ul>li:nth-of-type(2) {
        margin-top: 0
    }
}

@media only screen and (max-width:500px) {
    .theater nav#desktop ul li:first-of-type {
        width: 5rem
    }
}

section.t-introduction .content:first-of-type {
    margin-bottom: .2rem;
    text-align: right
}

section.t-introduction figure {
    width: calc(100% + 2rem);
    padding-bottom: 50%;
    margin-left: -1rem
}

section.t-introduction figure img {
    object-fit: cover
}

section.split {
    margin-top: 0
}

section.split .content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start
}

section.split .content>* {
    max-width: 35rem;
    width: calc(50% - 2rem)
}

section.split figure {
    text-align: right;
    margin-top: 4rem
}

section.split figure>* {
    max-width: 15rem;
    margin: 0 auto
}

section.split figure blockquote {
    color: #facc32;
    font-size: 2.5rem;
    font-weight: 400;
    width: 80%;
    font-family: Turbinado
}

section.split figure figcaption {
    color: #1a1a1a;
    font-weight: 500;
    width: 80%;
    margin-top: .5rem
}

.theater section .scroll {
    position: sticky;
    top: 20rem;
    transform: rotate(-90deg);
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    z-index: 0;
    cursor: pointer;
    width: 10rem;
    text-align: center;
    left: calc(50% - 5.1rem);
    font-weight: 500;
    font-size: .6rem;
    z-index: 0
}

section.split .content.corrected {
    margin-top: -5rem
}

section.split.image article {
    width: calc(50% - 4rem)
}

section.split.image article h3 {
    font-size: .8rem
}

section.split.image figure:nth-of-type(1) {
    height: 0;
    padding-bottom: 50%;
    margin-left: 1.4rem;
    margin-top: -2rem
}

section.split.image figure:nth-of-type(1) img {
    max-width: 100%
}

section.split.image figure:nth-of-type(1) img {
    max-width: 100%
}

section.split.image figure:nth-of-type(2)>* {
    margin: 0 0 0 auto
}

section.split.quotes .right {
    margin-top: 8rem
}

section.split.quotes .right>* {
    margin: 0 auto 0 10%;
    text-align: left
}

.theater .scroll.top {
    top: 25rem;
    margin-top: -.5rem;
    margin-bottom: 0;
    z-index: 2
}

section.split.quotes .content.corrected {
    margin-top: -2rem
}

.cast section.t-introduction .content {
    margin-top: -3rem
}

.cast section.t-introduction article {
    width: calc(50% - 2rem);
    margin: 2rem 0 8rem auto;
    text-align: left
}

.cast section.t-introduction article h2 {
    font-size: .7rem
}

.cast section.actors ul.cast {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    margin-bottom: 15rem
}

.cast section.actors ul.cast li {
    display: flex;
    width: calc(50% - 2rem);
    flex-direction: row-reverse
}

.cast section.actors ul.cast li {
    margin-top: -3rem
}

.cast section.actors ul.cast li.right {
    align-self: flex-end;
    flex-direction: row
}

.cast section.actors ul.cast li h3 {
    font-size: .8rem;
    font-style: normal
}

.cast section.actors ul.cast li figure {
    width: 40%;
    padding-bottom: 45%;
    margin-top: 0;
    flex-shrink: 0
}

.cast section.actors ul.cast li figure img {
    object-fit: cover
}

.cast section.actors ul.cast li article {
    width: 60%;
    margin: 0 1rem
}

.cast section.actors ul.cast li article p.foto {
    font-size: .6rem
}

.cast section.actors a.scroll.top {
    margin-top: 15.5rem
}

.cast section.actors .content.corrected {
    margin-top: -15.5rem
}

.cast section.split .content {
    display: block
}

.cast section.split .content ul.crew {
    width: calc(50% - 2rem);
    margin-right: auto
}

.cast section.split .content ul.crew li {
    flex-direction: row;
    margin-bottom: .5rem
}

.speellijst .inputs {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 3rem
}

.speellijst .inputs>* {
    width: calc(50% - 2rem);
    display: flex;
    flex-direction: column;
    max-width: 15rem;
    margin: 0 2rem
}

.speellijst .inputs>.location {
    text-align: left
}

.speellijst .inputs label {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: .5rem
}

.speellijst .inputs select {
    background: #263471;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    padding: .2rem .5rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
    position: relative;
    width: 100%
}

.speellijst .inputs .selectbox {
    width: 100%;
    max-width: 6rem;
    position: relative;
    margin-left: auto
}

.speellijst .inputs .selectbox::after {
    background: #cdcccc;
    position: absolute;
    right: 0;
    height: 100%;
    width: 1.7rem;
    content: "";
    display: block;
    top: 0;
    pointer-events: none;
    border-left: 3px solid #fafafa
}

.speellijst .inputs .location .selectbox {
    max-width: 100%
}

.speellijst .t-introduction {
    margin-bottom: 10rem
}

.speellijst .t-introduction ul {
    width: 100%;
    margin-top: 3rem;
    text-align: left;
    border-top: 1px solid #1a1a1a
}

.speellijst .t-introduction ul li {
    border-bottom: 1px solid #1a1a1a
}

.speellijst .t-introduction ul li a {
    text-decoration: none;
    display: flex;
    justify-content: space-between
}

.speellijst .t-introduction ul li a span {
    font-style: normal;
    display: inline-block;
    padding: .75rem 0;
    transition: 250ms ease
}

.speellijst .t-introduction ul li a span.thick {
    font-weight: 600;
    color: #263471;
    font-size: .8rem
}

.speellijst .t-introduction ul li a span:nth-of-type(1) {
    width: 11%
}

.speellijst .t-introduction ul li a span:nth-of-type(2) {
    width: 39%;
    font-style: italic
}

.speellijst .t-introduction ul li a span:nth-of-type(3) {
    width: calc(45% - 1rem);
    text-align: right;
    padding-right: 1rem
}

.speellijst .t-introduction ul li a span:nth-of-type(4) {
    width: 5%
}

.speellijst .t-introduction ul li.out a span:nth-of-type(3) {
    width: calc(50% - 10rem);
    text-align: right;
    padding-right: 1rem
}

.speellijst .t-introduction ul li.out a span:nth-of-type(4) {
    width: 9.5rem;
    text-align: right;
    padding-right: .5rem
}

@media only screen and (min-width:700px) {

    .speellijst .t-introduction ul li a:hover span:nth-of-type(1),
    .speellijst .t-introduction ul li a:hover span:nth-of-type(2) {
        color: #facc32
    }

    .speellijst .t-introduction ul li a:hover span:nth-of-type(3),
    .speellijst .t-introduction ul li a:hover span:nth-of-type(4) {
        background: #facc32
    }

    .speellijst .t-introduction ul li.out a:hover span:nth-of-type(3),
    .speellijst .t-introduction ul li.out a:hover span:nth-of-type(4) {
        background: #cdcccc;
        color: #888
    }
}

.speellijst .t-introduction ul li.out a:hover span:nth-of-type(1),
.speellijst .t-introduction ul li.out a:hover span:nth-of-type(2) {
    color: #cdcccc
}

.speellijst .t-introduction ul li[data-visible=true] {
    display: block
}

.speellijst .t-introduction ul li[data-visible=false] {
    display: none
}

.speellijst .t-introduction ul li.played {
    display: none
}

.media section.t-introduction .content.corrected {
    margin-top: -11rem
}

.media section.t-introduction .scroll {
    margin-top: 18rem;
    margin-bottom: -8rem;
    top: 43rem
}

section.t-introduction nav.spider ul {
    display: flex;
    justify-content: flex-end
}

section.t-introduction nav.spider ul li {
    margin: 0 .2rem;
    font-style: normal
}

section.t-introduction nav.spider ul li a {
    text-decoration: none;
    font-weight: 600;
    font-style: normal;
    border-bottom: 3px solid transparent;
    transition: 250ms ease
}

section.t-introduction nav.spider ul li a:hover {
    border-bottom: 3px solid #facc32;
    color: #1a1a1a
}

.media section figure.stick-right {
    margin-top: 2rem;
    margin-left: auto;
    padding-bottom: 42%;
    width: 80%;
    margin-right: -2rem
}

.media section figure.stick-right img {
    object-fit: cover
}

.media main>section article {
    width: calc(50% - 2rem);
    max-width: 25rem;
    margin-bottom: 2rem
}

.media section#scene-fotos figure {
    padding-bottom: 60%
}

.media section#scene-fotos figure img {
    object-fit: cover
}

.media section#scene-fotos ul {
    display: flex;
    margin-top: calc(2rem / 3);
    width: 100%;
    position: relative;
    overflow: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-behavior: smooth
}

.media section#scene-fotos ul li {
    flex-shrink: 0;
    width: calc(25% - .5rem);
    margin-right: calc(2rem / 3)
}

.media section#scene-fotos ul::-webkit-scrollbar {
    display: none
}

.media section#scene-fotos .buttonbox {
    display: flex;
    align-items: flex-end;
    width: calc(100% + 3rem);
    margin-left: -1.5rem
}

.media section#scene-fotos .buttonbox a {
    cursor: pointer;
    height: 0;
    width: 0;
    border: 1rem solid transparent;
    border-bottom: .5rem solid #cdcccc;
    border-top: .5rem solid #cdcccc;
    background: #facc32;
    display: block
}

.media section#scene-fotos .buttonbox a:nth-of-type(1) {
    border-left: 0 solid #cdcccc;
    margin-right: .5rem
}

.media section#scene-fotos .buttonbox a:nth-of-type(2) {
    border-right: 0rem solid #cdcccc;
    margin-left: .5rem
}

.media section#scene-fotos .buttonbox ul li img {
    cursor: pointer
}

.media section#videos .content {
    margin-bottom: 10rem
}

.media section#videos article {
    margin-left: auto
}

.media section#videos .scroll.top {
    top: 35rem;
    z-index: -1
}

.lightbox-youtube {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.lightbox-youtube::after {
    content: "";
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: #b7bde1;
    position: relative
}

.lightbox-youtube:hover::after {
    background: #ad3e65
}

.lightbox-youtube::before {
    content: "";
    width: 0;
    height: 0;
    border-top: .7rem solid transparent;
    border-bottom: .7rem solid transparent;
    border-left: 1.1rem solid #fff;
    position: absolute;
    z-index: 2;
    margin-left: .2rem
}

.over-ons-theater section.stories article a img {
    width: 1.5rem;
    margin-right: .2rem
}

.over-ons-theater div.split {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5rem
}

.over-ons-theater div.split.reverse {
    flex-direction: row-reverse
}

.over-ons-theater div.split>* {
    width: calc(50% - 2rem)
}

.over-ons-theater section.stories>div.content {
    margin-bottom: 5rem;
    margin-top: -79rem
}

.over-ons-theater a.scroll {
    margin-bottom: 75rem
}

.over-ons-theater a.scroll.top {
    display: block;
    text-decoration: none
}

.over-ons-theater figure.modile {
    display: none
}

.downloads section:first-of-type {
    padding-top: 0
}

.downloads section h2 {
    margin: 2rem 0 .5rem
}

@media only screen and (max-width:1250px) {
    .media section#scene-fotos .buttonbox {
        width: 100%;
        margin-left: 0
    }

    .media section#scene-fotos .content>figure {
        width: calc(100% - 3rem);
        margin: 0 auto
    }
}

@media only screen and (max-width:1100px) {
    .cast section.actors ul.cast {
        width: calc(100% - 2rem);
        margin: 0 auto
    }

    .cast section.actors ul.cast li {
        width: 100%;
        max-width: 30rem;
        margin-top: 4rem
    }

    .cast section.actors ul.cast li.right {
        margin-right: auto
    }

    .cast section.actors ul.cast li.left {
        margin-left: auto
    }

    .cast section.split .content ul.crew {
        margin-top: 4rem
    }

    .cast section.actors .scroll {
        opacity: 0;
        visibility: hidden;
        pointer-events: none
    }
}

@media only screen and (max-width:800px) {
    section.split.quotes {
        margin-top: -3rem
    }

    section.split.image .content {
        flex-direction: column
    }

    section.split.image .content>*,
    section.split.image article {
        width: 100%;
        margin: 0 auto
    }

    section.split.image figure:nth-of-type(1) {
        order: -1;
        margin-top: 0;
        margin-left: auto;
        max-width: 100%
    }

    section.split.image .content article {
        margin-top: 2rem
    }
}

@media only screen and (max-width:700px) {
    .theater .pagelead {
        display: none
    }

    section.split .content {
        flex-direction: column-reverse;
        justify-content: center
    }

    section.split .content>* {
        width: 100%;
        margin: 0 auto;
        max-width: 30rem
    }

    section.split .content figure {
        margin-top: 2rem
    }

    .theater section .scroll {
        opacity: 0;
        visibility: none;
        pointer-events: none
    }

    section.split.quotes .left,
    section.split.quotes .right {
        margin-top: 5rem
    }

    .cast section.t-introduction article {
        width: calc(100% - 2rem);
        max-width: 30rem;
        margin: 0 auto
    }

    .speellijst .t-introduction ul li a {
        flex-wrap: wrap
    }

    .speellijst .t-introduction ul li a span:nth-of-type(1) {
        order: 1;
        width: 50%;
        margin-bottom: -.8rem;
        margin-top: .4rem
    }

    .speellijst .t-introduction ul li a span:nth-of-type(2) {
        order: 3;
        width: 50%;
        margin-bottom: .4rem
    }

    .speellijst .t-introduction ul li a span:nth-of-type(3) {
        order: 4;
        width: 50%;
        padding-right: 0;
        margin-bottom: .4rem
    }

    .speellijst .t-introduction ul li a span:nth-of-type(4) {
        order: 2;
        width: auto;
        margin-bottom: -.8rem;
        margin-top: .4rem
    }

    .speellijst .t-introduction ul li.out a span:nth-of-type(4) {
        color: #cdcccc;
        width: auto;
        padding-right: 0
    }

    .media section#scene-fotos {
        margin-top: 0
    }

    .media section figure.stick-right {
        padding-bottom: 60%;
        width: 100%
    }

    .media main>section article {
        width: 100%;
        max-width: 25rem;
        margin-bottom: 2rem
    }

    .over-ons-theater div.split {
        flex-direction: column
    }

    .over-ons-theater div.split>* {
        width: 100%
    }

    .over-ons-theater div.split>figure {
        display: none
    }

    .over-ons-theater div.split figure.mobile {
        width: 100%;
        padding-bottom: 100%;
        display: block;
        margin-bottom: .5rem
    }

    .over-ons-theater div.split figure.mobile img {
        object-fit: cover
    }
}

@media only screen and (max-width:650px) {
    section.split.image figure:nth-of-type(1) {
        padding-bottom: 80%
    }
}

@media only screen and (max-width:600px) {
    .speellijst .inputs {
        flex-direction: column
    }

    .speellijst .inputs>* {
        margin: 0
    }

    .speellijst .inputs .date {
        text-align: left
    }

    .speellijst .inputs .date .selectbox {
        margin-left: 0
    }

    .speellijst .inputs .location .selectbox {
        min-width: 15rem
    }

    .media section#scene-fotos .buttonbox {
        width: calc(100% + 3.5rem);
        margin-left: -1.5rem
    }

    .media section#scene-fotos .buttonbox a {
        display: none
    }

    .media section#scene-fotos .buttonbox ul {
        margin-top: .5rem
    }

    .media section#scene-fotos .buttonbox ul li {
        width: 35%;
        margin-right: .5rem
    }

    .media section#scene-fotos .content>figure {
        width: calc(100% + 2rem);
        margin-left: -1rem
    }
}

@media only screen and (max-width:500px) {
    .cast .t-introduction h1 {
        text-align: left;
        width: calc(100% - 2rem);
        max-width: 30rem;
        margin: 0 auto .5rem
    }

    .cast section.actors ul.cast {
        align-items: center
    }

    .cast section.actors ul.cast li.left,
    .cast section.actors ul.cast li.right {
        flex-direction: column;
        width: 100%;
        position: relative;
        max-width: 20rem;
        margin: 0 auto
    }

    .cast section.actors ul.cast li figure {
        width: 100%;
        padding-bottom: 100%
    }

    .cast section.actors ul.cast li figure img {
        max-width: 100%
    }

    .cast section.actors ul.cast li article {
        width: 100%;
        margin: .5rem 0 3rem 0
    }

    .cast section.split .content ul.crew {
        width: calc(100% - 2rem);
        margin-top: 0
    }
}

@media only screen and (max-width:400px) {
    section.split.image figure:nth-of-type(1) {
        padding-bottom: 100%
    }

    .media section#scene-fotos figure {
        padding-bottom: 80%
    }
}