/* GENERAL
----------------------------------------------------------------------------- */
@charset "UTF-8";

@font-face {
	font-family: 'Interstate';
	src:	url('Interstate-Regular.woff') format('woff'),
			url('Interstate-Regular.ttf')  format('truetype');
}
@font-face {
	font-family: 'InterstateCondBlack';
	src:	url('InterstateCondBlack.woff') format('woff'),
			url('InterstateCondBlack.ttf')  format('truetype');
	font-style: bold; /* fall-back if font not available */
}

/* MAIN
----------------------------------------------------------------------------- */
html {
	overflow: hidden;
	font-family: 'Interstate';
	font-weight: 400;
    font-style: normal;
	font-size: 16px;
    line-height: 20px;
	color:#1d1d1b;
}

body {
	opacity: 0;
}

#wrapper {
	position: absolute;
    overflow: hidden;
	box-shadow: 0 0 20px #444;
}

#wrapper_svg,
#quiz_wrapper {
	position: absolute;
	left:0;
	top:0;
}

#quiz_wrapper.bg_schijf_van_vijf {
	background-image: url('/assets/groep78/images/schijf_van_vijf_bord.png');
	background-repeat: no-repeat;
	background-size: contain;
}

#foto_inzet {
	position: absolute;
	height:100%;
	width:auto;
	left:0;
	top:0;
	z-index: 15;
}

#knop_groep,
#knop_logo {
	position: absolute;
	background-color: transparent;
	cursor: pointer;
}

#main,
#main_opdeboerderij {
	position: absolute;
	z-index: 20;
    overflow: hidden;
    background: transparent;
}

#klikplaat-in-de-stal {
	position: absolute;
	bottom:0;
}

#tombola_wrapper,
#tombola_cards,
#tombola_hint {
	position: absolute;
}

#tombola_hint {
    top: 10rem;
    width: 100%;
    text-align: center;
}

#koelkast_hint {
	position: absolute;
	width: 100%;
    top: 41rem;
    text-align: center;
}

#div_beeldbank {
	position:absolute;
	z-index: 28;
	background-color: #ffffff;
	border: solid 2px #49bdff;
	box-shadow: 0 0 20px #444;
	width: 60rem;
    height: 35rem;
    bottom: 2rem;
    left: 2rem;
	padding: 1rem;
	overflow-y: auto;
    overflow-x: hidden;
}

#div_beeldbank ul {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem; /* adjust as needed */
}

#div_beeldbank ul li iframe {
	width: 100%;
	aspect-ratio: 16 / 8.5;
}

#iframe_wat_vind_jij,
#iframe_klikplaat-op-de-boerderij {
	position:absolute;
	z-index: 28;
	background-color: #ffffff;
	border: solid 2px #49bdff;
	box-shadow: 0 0 20px #444;
	width: 60rem;
    height: 35rem;
    bottom: 2rem;
    left: 2rem;
}

#popup_close_iframe {
	position: absolute;
	cursor: pointer;
	background-image: url('/assets/groep78/images/popupClose_klikplaat.svg');
	background-repeat: no-repeat;
	background-size: contain;
    right: 0.5rem;
    top: 9.5rem;
    z-index: 9999999999999999999999999;
}


#wrapper_klikplaat-in-de-stal {
	position:absolute;
	box-sizing: content-box;
	background-color: #ffffff;
	border: solid 2px #49bdff;
	box-shadow: 0 0 20px #444;
	width: 60rem;
    height: 35rem;
    bottom: 2rem;
    left: 2rem;
}

/* SVG
----------------------------------------------------------------------------- */

#menu_top {
	position:absolute;
	top:0;
}

g.svg_hotspot,
rect.svg_hotspot,
circle.svg_hotspot,
rect.svg_slot,
use.svg_foto,
g.button_controleer,
g#button_controleer {
	cursor: pointer;
}

g.svg_hotspot[data-status=done],
rect.svg_hotspot[data-status=done],
circle.svg_hotspot[data-status=done],
rect.svg_slot[data-status=done],
use.svg_foto[data-status=done] {
	cursor: default;
}

svg#tombola g#schijf {
	transform-origin: center;
	cursor: pointer;
}
#klikker {
	cursor: pointer;
}

/* POPUP
----------------------------------------------------------------------------- */

#popup {
	position: absolute;
	z-index: 30;
    overflow: hidden;
	background-image: url('/assets/groep78/images/popup_lightbox.png');
	background-repeat: repeat;
	display:none;
}
#popup_panel {
	position: absolute;
	overflow: hidden;
	background-color: #ffffff;
	border: solid 2px #49bdff;
	box-shadow: 0 0 20px #444;
}
#popup_nav {
	width:100%;
	background-color: transparent;
}
#popup_close {
	float: right;
	cursor: pointer;
	background-image: url('/assets/groep78/images/popupClose.svg');
	background-repeat: no-repeat;
	background-size: contain;
}
#popup_close_klikplaat {
	position: absolute;
	cursor: pointer;
	background-image: url('/assets/groep78/images/popupClose_klikplaat.svg');
	background-repeat: no-repeat;
	background-size: contain;

    right: -1.5rem;
    top: -1.5rem;
    z-index: 9999999999999999999999999;
}

#popup_content {
	width:100%;
	height:fit-content;
	display: inline-flex;
    flex-direction: column;
	align-items: center;
	overflow-x: hidden;
	overflow-y: auto;
}
#popup_content.display_unset {
	display: unset;
}

.youtube_embed_large {
	width:100%;
	height: auto;
	aspect-ratio: 16 / 9;
}
.youtube_embed_medium {
	display: block;
	width:74%;
	height: auto;
	aspect-ratio: 16 / 9;
}

.logo_natuurlijkzuivel {
	aspect-ratio: 200 / 80;
}


/* HOME ICONS / POPUP ICONS
----------------------------------------------------------------------------- */

div.popup_home_keuzes {
	width:90%;
	position: absolute;
	text-align: center;
}

a.icon_home_keuze {
	color:#2361A5;
	width:100%;
	display: inline-block;
	vertical-align: top;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
}

.icon_opdeboerderij {
	background-image: url('/assets/groep78/images/home_knop_I.png');
}
.icon_indestal {
	background-image: url('/assets/groep78/images/home_knop_J.png');
}
.icon_ditisdekoe {
	background-image: url('/assets/groep78/images/home_knop_K.png');
}
.icon_hoedekoemelkmaakt {
	background-image: url('/assets/groep78/images/home_knop_L.png');
}


/* SLIDES
----------------------------------------------------------------------------- */

.app_slide {
	display: none;
	position: absolute;
	overflow: hidden;
	background-color: #ffffff;
	border: solid 2px #49bdff;
	box-shadow: 0 0 20px #444;
}

.app_slide.app_feedback,
.app_slide.app_eindscore {
    flex-direction: column;
    align-items: center;
}

#eindfeedback {
	text-align: center;
}

.app_slide.app_feedback > img.koe_goedfout {
	width: 55%; /* door lange feedbacktekst past het anders niet */
}

.slide_foto {
	width: 50%;
	float:right;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	aspect-ratio: 1 / 1;
	margin-left: 1rem;
}
.slide_progress,
.slide_titel,
.slide_vraag {
	display:block;
}
.slide_titel {
	text-transform: uppercase;
	color:#2361A5;
}

.slide_antwoorden {
	display: flex;
	flex-direction: column;
}
.slide_keuze {
	cursor: pointer;
	display: flex;
	align-items: center;
}
.slide_keuze_label,
.slide_keuze_tekst {
	align-items: center;
}
.slide_keuze_label {
	aspect-ratio: 1 / 1;
	background-color: #77be43;
	color:#ffffff;
	border-radius: 0.6rem;
	text-align: center;
	text-transform: uppercase;
}
.slide_keuze_tekst {
	font-weight: bold;
}

/* Schijf van Vijf */

#quiz_wrapper.bg_schijf_van_vijf .app_slide:not(.eindslide) {
	background-color: transparent;
	border: none;
	box-shadow: none;
}

#quiz_wrapper.bg_schijf_van_vijf .app_slide .slide_foto {
	width: 15rem;
    float: none;
    left: 9.6rem;
    top: 12rem;
    position: absolute;
}

#quiz_wrapper.bg_schijf_van_vijf .app_slide .slide_antwoorden {
	position: absolute;
    display: unset;
	left: 20.4rem;
}

#quiz_wrapper.bg_schijf_van_vijf .app_slide div.slide_titel {
    position: absolute;
    width: 15rem;
    left: 10.6rem;
    top: 27rem;
    text-align: center;
}

#quiz_wrapper.bg_schijf_van_vijf .app_slide div.slide_progress {
	font-size: 0.6rem;
	position: absolute;
    top: 1.6rem;
}


div.knop_janee {
	width: 6rem;
	height: auto;
	aspect-ratio: 96 / 35;
	display: inline-block;
	vertical-align: top;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	cursor:pointer;
}

div.knop_janee.ja {
	background-image: url('/assets/groep78/images/knop_ja.png');
	margin-right:1.4rem;
}
div.knop_janee.nee {
	background-image: url('/assets/groep78/images/knop_nee.png');
}

#quiz_wrapper.bg_schijf_van_vijf .app_slide .app_feedback {
	text-align: center;
}

#quiz_wrapper.bg_schijf_van_vijf .app_slide .app_feedback p.janee_feedback {
	text-align: center;
}

#quiz_wrapper.bg_schijf_van_vijf .app_slide .app_feedback div.button {
	position: absolute;
    left: 29rem;
}

#sv5_hint {
	position: absolute;
    width: 23rem;
    top: 37.6rem;
    left: 41rem;
    background: #ffffffb5;
    border-radius: 0.6rem;
    padding: 0.6rem;
}


/* GUI
----------------------------------------------------------------------------- */

.button {
	border-radius: 0.6rem;
	text-align: center;
	text-transform: uppercase;
	width:fit-content;
	cursor:pointer;
	text-decoration: none;
}

.button.groen {
	background-color: #77be43;
	color:#ffffff;
}

.koe_goedfout {
	display:inline-flex;
	width:70%;
	height:auto;
}


/* TYPOGRAFIE
----------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
	color: #2361A5;
}

a {
	color: #5FB9E8;
}

ul, li {
	list-style: none;
	padding-left:0;
}