/* --- VARS */

:root {
    --font-size: clamp(15px, 1vh + 6px, 27px); /* standaard, maar schaalt via zie js.blade.php */
    --digibord-height: 100vh;
    --header-height: 6rem;
    --lesson-page-tile-width-value: 3vh;
    --tile-border-radius: calc(0.3 * var(--lesson-page-tile-width-value));
    --color-donker-groen: #003440;
	--color-blauw: #00B4FA;
	--color-groen: #96C832;
	--color-licht-rood: #FFE5DC;
	--color-licht-grijs: #E0EBFB;
    --page-overlay-color: rgb(0, 52, 64);
    /* vmbo */
    --color-vmbo-background: #94E0D5;
}

/* --- Basis */

html {
    background-color: var(--color-donker-groen);
    color: #ffffff;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: var(--font-size);
    font-style: normal;
    font-weight: 400;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

body {
    aspect-ratio: 16 / 9;
    height: 100vh;
    width: auto;
    margin: 0 auto;
    /* overflow: hidden; */ /* forceer 16/9 canvas */
}

/* --- Animation */

@keyframes fadeRiseIn {
    from {
        opacity: 0;
        transform: translateY(2rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* --- Containers */

div.bg_bluelayer {
    position:fixed;
    width: 100vw;
    height:100vh;
    left:0;
    top:0;
    pointer-events: none;
    background-color: var(--page-overlay-color);
    opacity: 0; /* via CMS */
}

header {
    position: relative;
    z-index: 9999999999;
    width: 100%;
    height: var(--header-height);
    display:flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
}

main {
    width: 100%;
    height: calc( var( --digibord-height) - 10rem );
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
}

body.lesson-page #container_main {
    width:100%;
    height:100%;
}

footer {
    width: 100%;
    height: 4rem;
    padding-left: 3rem;
    padding-right: 3rem;
    display: flex;
    justify-content: end;
    align-content: center;
    flex-wrap: wrap;
    gap: 1rem;
}

/* --- Generiek CSS */

h1, h2, h3, h4, h5, h6 {
    font-family: "Lufga Bold", Helvetica, Arial, sans-serif;
}

body.lesson h1 {
    font-size: 1.875rem;
    font-style: normal;
    font-weight: 700;
    line-height: 2.81875rem;
    margin-bottom: 3rem;
}

p {
    color: #ffffff;
    /* Bodytekst groot verpact */
    font-family: "Open Sans";
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.4;

    margin-top: 0;
    margin-bottom: 2rem;
}

p a {
    color: #ffffff;
    text-decoration: underline;
}

ul,
li {
    padding-left: 1rem;
    margin-left:0;
}


/* --- SCROLL BARS */

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 0.65rem;
}
::-webkit-scrollbar-track {
  background: #1D7D93;
}
::-webkit-scrollbar-thumb {
  background: #00B4FA;
  border-radius: 50%;
}
::-webkit-scrollbar-thumb:hover {
  background: #00B4FA;
}

/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: #00B4FA #1D7D93;
}

/* --- Menu's */

a#logo_home {
    text-decoration: none;
    margin-left: 3rem;
    margin-right: 3rem;
    margin-top: 1rem;
}
a#logo_home img {
    height: 4.4rem;
    width: auto;
}

.menu-helper__menu_item__link {
    text-decoration: none;
    color: #ffffff;
}

div.menu_lessons {
    font-family: "Open Sans";
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.75rem; /* 140% */
    color: #ffffff;

    display: flex;
    flex-direction: row;
    gap: 2rem;

    margin-left: 4rem;
}

body.home div.menu_lessons {
    display: none;
}

div.menu_lessons a,
div.menu_lessons a:visited {
    color: #ffffff;
    text-decoration: none;
}
div.menu_lessons a:hover {
    text-decoration: underline;
}

div.menu_lessons a.active_niveau,
div.menu_lessons a.active_les {
    background-color: #AEE0EC;
    border-radius: 1.08694rem;
    padding-left: 1rem;
    padding-right: 1rem;
    color: #003440;
}
div.menu_lessons a.active_niveau:hover,
div.menu_lessons a.active_les:hover {
    text-decoration: none;
}

a#button_home {
    margin-left: auto;
    margin-right: 1.4rem;
    width: 3rem;
    height: 3rem;
    border-radius: 1.5rem;
    background-image: url(/assets/images/menu_home.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: transparent;
    border: none;
}

button#button_menu {
    margin-right: 3rem;
    width: 3rem;
    height: 3rem;
    border-radius: 1.5rem;
    background-image: url(/assets/images/menu_open.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-color: transparent;
    border: none;
}

#navigation_panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 40rem;
    height: 100vh;
    padding: 5rem;
    flex-direction: column;
    flex-wrap: wrap;
    flex-shrink: 0;
    justify-content: center;
    background-color: #00B4FA;
    color: #002E19;
    transform: translateY(-100%);
    transition: transform 0.8s ease-in-out;
    display: flex;
    z-index: 1000;

    font-family: "Lufga Bold", Helvetica, Arial, sans-serif;
}

#navigation_panel.visible {
    /* slide into view */
    transform: translateY(0);
}

#navigation_panel > * {
    display:block;
}

button#navigation_panel_exit {
    position: fixed;
    top: 3rem;
    right:3rem;
    width: 3rem;
    height: 3rem;
    background-image: url(/assets/images/menu_exit.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-color: transparent;
    border: none;
}

#navigation_panel > span {
    font-family: 'Lufga Bold';
    color: #002E19;
    font-size: 1.625rem;
    line-height: 1.56875rem; /* 96.538% */
    margin-bottom:2rem;
}

#navigation_panel .menu-helper__menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
}

#navigation_panel a[role='menuitem'] {
    font-family: 'Lufga ExtraBold';
    color: #002E19;
    font-size: 2.625rem;
    line-height: 5.56875rem; /* 212.143% */
    text-decoration: none;
}
#navigation_panel a[role='menuitem']:hover {
    text-decoration: underline;
}

.menu-helper__menu_item__link {
    text-decoration: none;
    color: #ffffff;
}


/* --- Footer */

footer * {
    margin: 0;
}

footer .menu-helper {
    width: unset;
}

footer ul[role="menu"] {
    align-content: center;
    flex-wrap: wrap;
    gap: 2.5rem;
    margin-right: 2.5rem;
}

footer .socials {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

footer .socials a.social_icon {
    height: 1.4rem;
    width: 1.4rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

footer .socials a.social_icon.facebook {
    background-image: url('/assets/images/social_facebook.svg');
}
footer .socials a.social_icon.x {
    background-image: url('/assets/images/social_x.svg');
}
footer .socials a.social_icon.instagram {
    background-image: url('/assets/images/social_instagram.svg');
}
footer .socials a.social_icon.youtube {
    background-image: url('/assets/images/social_youtube.svg');
}

footer a:hover {
    text-decoration: underline;
}

/* --- Buttons / links */

a.button {
    color: #ffffff;
    text-decoration: none;
}

.button,
.answer {
    background-color: #96C832;
    border-radius: 0.5rem;
    padding: 0.25rem 1rem;
}

/* --- Basispagina "homepage" */

body.home main > h1,
body.home main > h2 {
    width:100%;
    text-align: center;
}

body.home main > h2 {
    color: var(--color-blauw);
    margin-top: -1rem;
    margin-bottom: 2rem;
}

/* --- Basispagina "single" */
/* --- Lessonpagina "basis" */

body.page.single main,
body.lesson-page.basispagina main {
    justify-content: left;
}

body.page.single main div#container_main,
body.lesson-page.basispagina main div#container_main {
    height: 80%;
    margin-left: 12rem;
    margin-right: 4rem;
    padding-right: 12rem;

    display: flex;
    flex-direction: column;
    gap: 1rem;

    align-content: flex-start;
    justify-content: left;

    overflow-y: auto;
}

body.page.single main div#container_main *,
body.lesson-page.basispagina main div#container_main * {
    text-align: left;
}

/* ---------------------- */
/* --- LES META ICONS --- */
/* ---------------------- */

body.lesson-page #container_main div.lesson_meta_breadcrumbs {
    background-color: #46BE82;
    color: #ffffff;
    border-radius: 0.25rem;
    font-size: 1rem;
    display: block;
    width: fit-content;
    padding: 0.625rem 1.25rem;
    font-family: "Lufga Bold", Helvetica, Arial, sans-serif;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
}

body.lesson-page #container_main div.lesson_meta_types {
    color: #ffffff;
    font-size: 1rem;
    display: block;
    width: fit-content;
    height: 2.25rem;
    font-family: "Lufga Regular", Helvetica, Arial, sans-serif;
    justify-content: left;
    align-items: center;
}

.info .duration,
.info .theme {
    display:inline-block;
    align-items: center;
    font-size: 1rem;
    line-height: 1;
}

.info .duration {
    margin-right: 1rem;
}

.info .duration::before {
    content: '';
    vertical-align: middle;
    display: inline-block;
    width: 1.1rem;
    height: 1.1rem;
    margin-right: 0.2rem;
    margin-top: -0.2rem;
    background: url('/assets/images/icon_duration.svg') center/contain no-repeat;
}

.info .theme::before {
    content: '';
    vertical-align: middle;
    display: inline-block;
    width: 1.1rem;
    height: 1.1rem;
    margin-right: 0.2rem;
    margin-top: -0.2rem;
    background: url('/assets/images/icon_theme.svg') center/contain no-repeat;
}

.lesson_meta_types .info .duration::before {
    background: url('/assets/images/icon_duration_white.svg') center/contain no-repeat;
}

.lesson_meta_types .info .theme::before {
    background: url('/assets/images/icon_theme_white.svg') center/contain no-repeat;
}

/* --- BUTTONS ALGEMEEN */

#container_main > a[role="button"] {
    font-family: "Lufga Bold", Helvetica, Arial, sans-serif;
    color: var(--color-donker-groen);
    height: 3rem;
    width: fit-content;
    border-radius: 12.5rem;
    font-size: 1.4rem;
    align-content: center;
    /* align-self: center; */
    padding-left: 2rem;
    padding-right: 2rem;
    background-repeat: no-repeat;
    background-position: 1.6rem center;
    background-size: 1.5rem;
    margin-bottom: 1rem;
    display: block; /* op eigen regel */
}

#container_main > a[role="button"].download {
    padding-left: 4rem;
    padding-right: 2rem;
    background-image: url('/assets/images/icon_download.svg');
}

#container_main > a[role="button"].afsluiten {
    background-color: var(--color-blauw);
    color: #ffffff;
}

/* --- BUTTONS VOOR NAVIGATIE, STARTACTIVITEIT EN EXIT-ENERGIZER */

div.screen_navigation {

    width: 100%;
    position: absolute;
    z-index: 9999999;
    left: 0;
    bottom: 3rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: right;
    padding-right: 3rem;
    gap: 2rem;
}

a#activiteit_start,
a#activiteit_next,
a#activiteit_finish,
button#timer_start,
button#slideshow_start,
button#storyboard_start,
a.step_previous {
    transition: background-color 1s ease, opacity 1s ease;
    display: flex;
    align-self: center;
    width:fit-content;
    background-color: #00B4FA;
    color: #ffffff;
    height: 3rem;
    padding: 0.625rem 2.4rem;
    justify-content: center;
    align-items: center;
    border-radius: 1.5rem;
    font-family: 'Lufga Bold';
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5rem; /* 150% */
    gap: 0.625rem;
    text-decoration: none;
    border:none;
}

a#activiteit_start::after,
a#activiteit_next::after,
button#timer_start::after,
button#slideshow_start::after,
button#storyboard_start::after {
    content: '';
    vertical-align: middle;
    display: flex;
    width: 1.1rem;
    height: 1.1rem;
    margin-right: 0.2rem;
    background: url('/assets/images/icon-arrow-right.svg') center no-repeat;
    background-size: 1.1rem;
}


a.step_previous {
    width: 3rem;
    height: 3rem;
    padding: 0;
    border-radius: 1.5rem;
}

a.step_previous::after {
    content: '';
    width: 1.1rem;
    height: 1.1rem;
    background: url('/assets/images/icon-arrow-left.svg') center no-repeat;
    background-size: 1.1rem;
    display: flex;
    vertical-align: middle;
}

/* Keyframes for subtle scale pulsation */
@keyframes timer-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.04); }  /* very subtle bump */
    100% { transform: scale(1); }
}

/* Apply pulsating animation ONLY when .timer-started is NOT present */
button#timer_start:not(.timer-started) {
    animation: timer-pulse 1.6s ease-in-out infinite;
}

button#timer_start.timer-started {
    transform: scale(1);
    background-color: #858585;
    opacity: 0.4;
    cursor: not-allowed;
}


/* -------------------------- */
/* --- PER BLOK HIERONDER --- */
/* -------------------------- */

/* --- Tegels naar pagina's (home en lessons) */

.page-tiles {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: var(--lesson-page-tile-width-value);

    opacity: 0; /* start hidden */
    animation: fadeRiseIn 1s ease-out forwards;
}

.page-tile {
    border-radius: var(--tile-border-radius);
    overflow: hidden;
    width: calc(18 * var(--lesson-page-tile-width-value));
    background-color: #ffffff;
    color: var(--color-donker-groen);
    text-align: center;
    text-decoration: none;
}

.page-tile figure {
    height: calc(11.125 * var(--lesson-page-tile-width-value));
    width: 100%;
    overflow: hidden;
}

.page-tile figure img {
    border-top-left-radius: var(--tile-border-radius);
    border-top-right-radius: var(--tile-border-radius);
}

.page-tile .heading h2,
.lesson-tile .heading h2 {
    font-family: 'Lufga ExtraBold';
    font-size: 2rem;
}

/* --- LESSONS */

.lesson-list {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    grid-template-rows: repeat(2, max-content);
    gap: var(--lesson-page-tile-width-value);
    justify-items: center;

    opacity: 0; /* start hidden */
    animation: fadeRiseIn 1s ease-out forwards;
}

/* VOOR 5 tegels
.lesson-list {
  display: grid;
  grid-template-columns: repeat(2, max-content) auto;
  grid-template-rows: repeat(2, max-content);
  gap: var(--lesson-page-tile-width-value);
  justify-items: center;
}

.lesson-list > :nth-child(5) {
  grid-column: 3;
  grid-row: 1 / span 2;
}
*/

.lesson-tile {
    border-radius: var(--tile-border-radius);
    overflow: hidden;
    width: calc(27.6 * var(--lesson-page-tile-width-value));
    height: calc(9.625 * var(--lesson-page-tile-width-value));
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    text-decoration: none;

    background-repeat: no-repeat;
    background-size: cover;
}

/* Tile 5 spans both rows in the 3rd column
.lesson-list > :nth-child(5) {
  width: calc(10 * var(--lesson-page-tile-width-value));
  height: 100%;
}
*/


.lesson-tile span.lessonnumber {
    width: fit-content;
    height: 2rem;
    border-radius: 1rem;

    font-family: "Open Sans";
    font-style: normal;
    font-weight: 800;

    font-size: 1rem;
    text-align: center;
    line-height: 2rem;

    background-color: #96C832;
    color: var(--color-donker-groen);

    padding-left: 2rem;
    padding-right: 2rem;
    top: 1rem;
    left: 1rem;
    position: absolute;
}

.lesson-tile span.lessonnumber img.protected {
    width: 1.5rem;
    height: 1.5rem;
    float: right;
    margin-top:0.25rem;
    margin-left:1rem;
}

.lesson-tile .info {
    position: absolute;
    background-color: #ffffff;
    color: var(--color-donker-groen);
    padding: 1rem;
    text-align: left;
}

.lesson-tile .info h2 {
    font-size: 1.6rem;
    line-height: 1;
}
.lesson-tile .info .text {
    font-size: 1.2rem;
    line-height: 1.4;
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
}

.lesson-tile.image-left_title_introduction {
    display: flex;
    flex-direction: row;
    background-size: 60%; /* .info == 40% */
    background-position: left center;
}

.lesson-tile.image-above_title .info,
.lesson-tile.image-above_title_introduction .info {
    bottom: 0;
    width: 100%;
    padding-top: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 1.8rem;
}

.lesson-tile.image-left_title_introduction .info {
    right: 0;
    width: 46%;
    height: 100%;
    padding: 1rem;
    padding-top: 1.8rem;
}

/* LESSON */

.lesson-pages {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    column-gap: var(--lesson-page-tile-width-value);

    opacity: 0; /* start hidden */
    animation: fadeRiseIn 1s ease-out forwards;
}

.lesson-page-tile,
.landscape-wrapper .lesson-page-tile {
    background-color: #FFFFFF;
    border-radius: var(--tile-border-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.lesson-page-tile img.protected {
    width:2rem;
    height:2rem;
    position: absolute;
    top:1rem;
    right:1rem;
}

.lesson-page-tile .info {
    position: absolute;
    background-color: #ffffff;
    color: var(--color-donker-groen);
    padding: 1rem;
    text-align: left;

    bottom: 0;
    width: 100%;
    padding: 1rem;

    font-size: 1.5rem;
    line-height: 1;
}

.lesson-page-tile .info h2 {
    font-size: 1.5rem;
    line-height: 1;
}


.lesson-page-tile.portrait_small {
    width: calc(8.5 * var(--lesson-page-tile-width-value));
    height: calc(18.3125 * var(--lesson-page-tile-width-value));
}

.lesson-page-tile.portrait_medium {
    width: calc(13.25 * var(--lesson-page-tile-width-value));
    height: calc(18.3125 * var(--lesson-page-tile-width-value));
}

.lesson-page-tile.portrait_big {
    width: calc(18 * var(--lesson-page-tile-width-value));
    height: calc(18.3125 * var(--lesson-page-tile-width-value));
}

.lesson-page-tile.landscape_small {
    width: calc(18 * var(--lesson-page-tile-width-value));
    height: calc(7.09375 * var(--lesson-page-tile-width-value));
}

.lesson-page-tile.landscape_medium {
    width: calc(18 * var(--lesson-page-tile-width-value));
    height: calc(8.656 * var(--lesson-page-tile-width-value));
}

.lesson-page-tile.landscape_big {
    width: calc(18 * var(--lesson-page-tile-width-value));
    height: calc(10.21875 * var(--lesson-page-tile-width-value));
}



.lesson-page-tile.landscape_2cols {
    width: calc(37 * var(--lesson-page-tile-width-value));
    height: calc(8.656 * var(--lesson-page-tile-width-value));
}


.landscape-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--lesson-page-tile-width-value);
}

.landscape-wrapper .landscape-wrapper {
    display: flex;
    flex-direction: row;
    gap: var(--lesson-page-tile-width-value);
}


.lesson-page-tile,
.lesson-page-tile a,
.lesson-page-tile a:visited,
.lesson-page-tile .text,
.lesson-page-tile .heading {
    text-decoration: none;
}

/* --- Lesson-page variatie: "startactiviteit" */

body.lesson-page.startactiviteit #container_main {
    width: 60rem;
    text-align: center;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
}

body.lesson-page.startactiviteit #container_main div.lesson_meta_breadcrumbs,
body.lesson-page.startactiviteit #container_main div.lesson_meta_types,
body.lesson-page.startactiviteit #container_main a.button {
    align-self: center;
}

body.lesson-page.startactiviteit #container_main h1 {
    font-size: 4.375rem;
    font-style: normal;
    font-weight: 900;
    line-height: 4.6875rem;
}

body.lesson-page.startactiviteit #container_main h2 {
    color: #00B4FA;
    font-size: 3.4375rem;
    font-style: normal;
    font-weight: 900;
    line-height: 3.81875rem; /* 111.091% */
}

/* --- Lesson-page variatie: "timer" */

body.lesson-page.timer #container_main {
    text-align: center;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
}

body.lesson-page.timer #container_main > * {
    width: 60rem;
    align-self: center;
}
body.lesson-page.timer #container_main > div.screen_navigation {
    width: 100%;
}

button#timer_start {
    width:fit-content !important;
}

body.lesson-page.timer #container_main div.screen_navigation {
    justify-content: flex-end;
}

body.lesson-page.timer #container_main div.lesson_meta_breadcrumbs,
body.lesson-page.timer #container_main div.lesson_meta_types {
    align-self: center;
}

body.lesson-page.timer #container_main h1 {
    font-size: 4.375rem;
    font-style: normal;
    font-weight: 900;
    line-height: 4.6875rem;
}

body.lesson-page.timer #container_main h2 {
    color: #00B4FA;
    font-size: 3.4375rem;
    font-style: normal;
    font-weight: 900;
    line-height: 3.81875rem; /* 111.091% */
}

body.lesson-page.timer #timer_end_sound {
    display: none;
}

body.lesson-page.timer #timer_display {
    color: #FFF;
    text-align: center;
    font-family: 'Lufga ExtraBold';
    font-size: 10.875rem;
    font-style: normal;
    font-weight: 700;
    line-height: 10.1875rem; /* 93.678% */
}

body.lesson-page.timer div.text.introduction p {
    color: #FFF;
    text-align: center;
    font-family: "Open Sans";
    font-size: 2.1875rem;
    font-style: normal;
    font-weight: 600;
    line-height: 3.31875rem; /* 151.714% */
}

/* --- Lesson-page variatie: "slideshow" */

body.lesson-page.slideshow main {
    display: block;
    width:100%;
    height: calc( 100vh - var(--header-height) );
}

body.lesson-page.slideshow #container_main {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
}

body.lesson-page.slideshow #container_startslide {
    width: 60rem;
    text-align: center;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
}

body.lesson-page.slideshow #container_main > a[role="button"].download {
    margin-top:1rem;
}

body.lesson-page.slideshow #container_main div.lesson_meta_breadcrumbs,
body.lesson-page.slideshow #container_main div.lesson_meta_types,
body.lesson-page.slideshow #container_main a.button {
    align-self: center;
}

body.lesson-page.slideshow #container_main h1 {
    font-size: 4.375rem;
    font-style: normal;
    font-weight: 900;
    line-height: 4.6875rem;
}

body.lesson-page.slideshow #container_main h2 {
    color: #00B4FA;
    font-size: 3.4375rem;
    font-style: normal;
    font-weight: 900;
    line-height: 3.81875rem; /* 111.091% */
}

/* --- Lesson-page variatie: "exitenergizer" */

body.lesson-page.exitenergizer #container_main {
    width: 60rem;
    text-align: center;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
}

body.lesson-page.exitenergizer #container_main div.screen_navigation {
    justify-content: center;
    padding-right: 0;
    position: unset;
}

body.lesson-page.exitenergizer #container_main div.lesson_meta_breadcrumbs,
body.lesson-page.exitenergizer #container_main div.lesson_meta_types {
    align-self: center;
}

body.lesson-page.exitenergizer #container_main h1 {
    font-size: 4.375rem;
    font-style: normal;
    font-weight: 900;
    line-height: 4.6875rem;
}

body.lesson-page.exitenergizer #container_main h2 {
    color: #00B4FA;
    font-size: 3.4375rem;
    font-style: normal;
    font-weight: 900;
    line-height: 3.81875rem; /* 111.091% */
}

/* --- Lesson-page variatie: foto & dilemma */

body.lesson-page.foto #container_main,
body.lesson-page.dilemma #container_main {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
}

body.lesson-page.foto #container_main div.screen_navigation,
body.lesson-page.dilemma #container_main div.screen_navigation  {
    justify-content: center;
}

body.lesson-page.foto #container_main div.image,
body.lesson-page.dilemma #container_main div.image {
    background-color: #00B4FA;
    width: auto;
    height: 70%;
    aspect-ratio: 1184 / 646;
    border-radius: 4.5rem;
    overflow: hidden;
}

body.lesson-page.foto #container_main div.image img,
body.lesson-page.dilemma #container_main div.image img {
    width: 100%;
    height: 100%;
    object-fit: cover;        /* Scales image to fill container without distortion */
    object-position: center;  /* Centers the image inside */
    display: block;           /* Removes unwanted inline-block whitespace */
}

body.lesson-page.dilemma #container_main div.text {
    width: 70%;
}
body.lesson-page.dilemma #container_main div.text p {
    color: #FFF;
    text-align: center;
    font-family: 'Lufga ExtraBold';
    font-size: 3.7rem;
    font-style: normal;
    line-height: 1.2;
}

/



/* --- Lesson-page variatie: "split5050" */
/* --- Lesson-page variatie: "doeopdracht" */

/* OVERRIDE width op basis van percentage */

body.lesson-page.split5050 .w100 {width:unset}
body.lesson-page.split5050 .w90 {width:unset}
body.lesson-page.split5050 .w80 {width:unset}
body.lesson-page.split5050 .w70 {width:unset}
body.lesson-page.split5050 .w75 {width:unset}
body.lesson-page.split5050 .w67 {width:unset}
body.lesson-page.split5050 .w60 {width:unset}
body.lesson-page.split5050 .w50 {width:unset}
body.lesson-page.split5050 .w40 {width:unset}
body.lesson-page.split5050 .w30 {width:unset}
body.lesson-page.split5050 .w33 {width:unset}
body.lesson-page.split5050 .w33:nth-child(2) {width:unset}
body.lesson-page.split5050 .w25 {width:unset}
body.lesson-page.split5050 .w20 {width:unset}
body.lesson-page.split5050 .w10 {width:unset}
body.lesson-page.split5050 .w0 {width:unset}

body.lesson-page.doeopdracht .w100 {width:unset}
body.lesson-page.doeopdracht .w90 {width:unset}
body.lesson-page.doeopdracht .w80 {width:unset}
body.lesson-page.doeopdracht .w70 {width:unset}
body.lesson-page.doeopdracht .w75 {width:unset}
body.lesson-page.doeopdracht .w67 {width:unset}
body.lesson-page.doeopdracht .w60 {width:unset}
body.lesson-page.doeopdracht .w50 {width:unset}
body.lesson-page.doeopdracht .w40 {width:unset}
body.lesson-page.doeopdracht .w30 {width:unset}
body.lesson-page.doeopdracht .w33 {width:unset}
body.lesson-page.doeopdracht .w33:nth-child(2) {width:unset}
body.lesson-page.doeopdracht .w25 {width:unset}
body.lesson-page.doeopdracht .w20 {width:unset}
body.lesson-page.doeopdracht .w10 {width:unset}
body.lesson-page.doeopdracht .w0 {width:unset}

body.lesson-page.split5050 #container_main {
    padding-top: 3rem;
}

body.lesson-page.doeopdracht main {
    justify-content: left;
}

body.lesson-page.doeopdracht #container_main {
    padding-top: 3rem;
    overflow-y: auto;
}

body.lesson-page.split5050 #container_main > :not(div.text-image),
body.lesson-page.doeopdracht #container_main > :not(div.text-image) {
    margin-left: 3rem;
    margin-right: 3rem;
    max-width: 44%;
}

body.lesson-page.split5050 #container_main h1 {
    font-size: 4.375rem;
    line-height: 1;
}

body.lesson-page.doeopdracht #container_main h1 {
    font-size: 2.8rem;
    line-height: 1;
}

body.lesson-page.doeopdracht #container_main ul {
    margin-bottom: 2rem;
}

body.lesson-page.doeopdracht #container_main ul li {
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.4;
}

body.lesson-page.doeopdracht #container_main ul li p {
    margin-bottom: 0; /* FIX */
}

body.lesson-page.doeopdracht #container_main h2 {
    color: var(--color-blauw);
}

body.lesson-page.split5050 #container_main > div.text-image {
    gap: 0;
}

body.lesson-page.doeopdracht #container_main > div.text-image {
    display:block;
}

body.lesson-page.split5050 #container_main > div.text-image div.text,
body.lesson-page.doeopdracht #container_main > div.text-image div.text {
    padding-left: 3rem;
    padding-right: 3rem;
}

body.lesson-page.split5050 #container_main > div.text-image div.text {
    width: 50%;
}

body.lesson-page.split5050 #container_main > div.text-image .text-image-block__image {
    position: fixed;
    z-index: -1;
    aspect-ratio: 7 / 9;
    height: 100vh;
    top: 0;
    right: 0;
    overflow: hidden;
}

body.lesson-page.doeopdracht #container_main > div.text-image {
    width: 66%;
}

@media (max-width: 1920px) {
    body.lesson-page.doeopdracht #container_main > div.text-image {
        width: 56%;
    }
}
@media (max-width: 1600px) {
    body.lesson-page.doeopdracht #container_main > div.text-image {
        width: 48%;
    }
}
@media (max-width: 1460px) {
    body.lesson-page.doeopdracht #container_main > div.text-image {
        width: 40%;
    }
}


body.lesson-page.doeopdracht #container_main > div.text-image .text-image-block__image {
    position: fixed;
    z-index: -1;
    aspect-ratio: 7 / 9;
    height: 100vh;
    top: 0;
    right: 0;
    overflow: hidden;
}

body.lesson-page.split5050 #container_main > div.text-image .text-image-block__image img,
body.lesson-page.doeopdracht #container_main > div.text-image .text-image-block__image img {
    height: 100vh;                 /* match parent height */
    width: calc(100vh * 8 / 9);    /* match parent width */
    object-fit: cover;
}

/* --- Lesson-page variatie: "storyboard" */

body.lesson-page.storyboard main {
    display: block;
    width:100%;
    height: calc( 100vh - var(--header-height) );
}

body.lesson-page.storyboard #container_main {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
}

body.lesson-page.storyboard #container_startslide {
    width: 60rem;
    text-align: center;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
}

body.lesson-page.storyboard #container_main div.lesson_meta_breadcrumbs,
body.lesson-page.storyboard #container_main div.lesson_meta_types,
body.lesson-page.storyboard #container_main a.button {
    align-self: center;
}

body.lesson-page.storyboard #container_main h1 {
    font-size: 4.375rem;
    font-style: normal;
    font-weight: 900;
    line-height: 4.6875rem;
}

body.lesson-page.storyboard #container_main h2 {
    color: #00B4FA;
    font-size: 3.4375rem;
    font-style: normal;
    font-weight: 900;
    line-height: 3.81875rem; /* 111.091% */
}


/* Tablets/iPad in LANDSCAPE only */

@media only screen
  and (pointer: coarse)
  and (min-width: 768px)
  and (max-width: 1366px)
  and (orientation: landscape) {


    :root {
        --digibord-height: 100vh;
        --lesson-page-tile-width-value: 2.25vh;
    }

    /* Prevent the page from scrolling while we scale the canvas */
    html,
    body {
        width: 1024px;
        height: 100%;
        overflow: hidden;
    }

    /* doe-opdrachten */
    /* werkblad */

    body.lesson-page.doeopdracht #container_main > div.text-image {
        width: 64%;
    }
    body.lesson-page.doeopdracht #container_main > div.text-image .text-image-block__image {
        right: -20rem;
    }

    body.lesson-page.split5050 #container_main > div.text-image .text-image-block__image {
        right: -20rem;
    }

}





/* --- VMBO OVERRIDES --- */

/*

html.vmbo {
    background-color: #ffffff;
}

html.vmbo .page-tile,
html.vmbo .lesson-tile .info,
html.vmbo .lesson-page-tile .info {
    background-color: var(--color-vmbo-background);
}

html.vmbo .menu_lessons {
    color: var(--color-donker-groen);
}

html.vmbo div.menu_lessons a,
html.vmbo div.menu_lessons a:visited,
html.vmbo .menu-helper__menu_item__link {
    color: var(--color-donker-groen);
}

html.vmbo footer .socials a.social_icon.facebook {
    background-image: url('/assets/images/social_facebook_dark.svg');
}
html.vmbo footer .socials a.social_icon.instagram {
    background-image: url('/assets/images/social_instagram_dark.svg');
}
html.vmbo footer .socials a.social_icon.youtube {
    background-image: url('/assets/images/social_youtube_dark.svg');
}

*/