/* 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 */
}

:root {
	--white: #fff;
	--off-white: #f0f0f0;
	--anthracite: #444;
	--blue: #2d77b7;
	--popupBlue: #7fbce8;
	--lightBlue: #539cd5;
	--green: #35a756;
	--red: #eb1d26;
	--orange: #ed7128;
}

/* BODY DEFAULTS
----------------------------------------------------------------------------- */
html{
	margin-bottom: 1px;
	min-height: 100%;
}
body {
	background-color: #fff;
	color: #444;
	font-family: 'Interstate', Arial, serif;
	font-size: 100%;
}
html > body {
	font-size: 16px;
}

p, blockquote, footer {
	line-height: 1.5;
}
@media screen and (max-width: 640px) {
	p, blockquote, footer {
		font-size: 1em;
	}
}
@media screen and (min-width: 641px) {
	p, blockquote, footer {
		font-size: 1.5em;
	}
}

/* LINK STYLES
----------------------------------------------------------------------------- */
a, a:visited{
	color: #539cd5;
	text-decoration: none;
}
a:hover {
    color: #539cd5;
}
a:active,a:focus{
	color: #539cd5;
}

/* HEADINGS
----------------------------------------------------------------------------- */
h1, h2, h3 {
	font-family: 'InterstateCondBlack', Arial, serif;
}
h1{
	font-size: 2em;
	color: #2d77b7;
	text-transform: uppercase;
	margin-bottom: 20px;
}
h2{
	font-size: 1.5em;
}
h3 {
	font-size: 1.25em;
}
h4, h5, h6, dt {
	font-family: 'Interstate', Arial, serif;
}

/* OTHER ELEMENTS
----------------------------------------------------------------------------- */
a img{
	border: none;
}
div {
	position: relative;
}
ul, ol {
	list-style-position: inside;
	list-style: none;
}

li ul, li ol, li dl, dd ol, dd ul, dd dl {
	margin-left: 1em;
}
strong, b, figcaption em, figcaption i, caption em, caption i {
	font-weight: bold;
}
em, i, cite {
	font-style: italic;
}
sup, sub {
	line-height: 0;
}

/* BASE
----------------------------------------------------------------------------- */
.clear::after {
	content: '';
	display: table;
	clear: both;
}
.pull-right {
	float: right;
}
.centerDiv {
	margin: 0 auto;
}
*[onclick] {
	cursor: pointer;
}
.red {
	color: var#eb1d26;
}
.green {
	color: #35a756;
}
.blue {
	color: #2d77b7;
}
.lightBlue {
	color: #539cd5;
}
.orange {
	color: #ed7128;
}
.lightGray {
	color: #bbb;
}

/* buttons */
.btn {
	box-sizing: border-box;
	height: 1.67em; /* 16px * 1.5em = 24 * 1.67 = 40px */
	font-family: 'InterstateCondBlack', Arial, serif;
	font-size: 1.5em;
	text-transform: uppercase;
	line-height: 1.67em;
	padding-left: 1.67em;
	color: #fff;
	background: url('/assets/res/buttonArrow.png') left center / 1.67em no-repeat;
	background-color: #2d77b7;
}
.btnMini {
	width: 2.925em; /* 16px * 1.5 (btn font-size) = 24 * 2.925 = 70px */
}
.btnMaxi {
	width: 7.5em; /* 16px * 1.5 (btn font-size) = 24 * 7.5 = 180px */
}
.btnRed {
	background-color: #eb1d26;
}
.btnGreen {
	background-color: #35a756;
}
.btnBlue {
	background-color: #2d77b7;
}
.btnOrange {
	background-color: #ed7128;
}

/* MAIN
----------------------------------------------------------------------------- */
html {
	overflow: hidden;
}

body {
	background: url('/assets/res/background_home_14_2166x768.svg');
	background-position: bottom center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* Medium screens */
@media (min-width: 1025px) {
  body {
    background-image: url('/assets/res/background_home_14_1366x768.svg');
  }
}

/* Large screens */
@media (min-width: 1367px) {
  body {
    background-image: url('/assets/res/background_home_14_2166x768.svg');
  }
}

#wrapper {
	position: absolute;
	background-size: 100%;
	background-repeat: no-repeat;
	overflow: hidden;
}

#headerMain {
	position: relative;
	height: 18%; /* height of logo: (140/768)*100 */
}

#headerMain_14 {
	position: fixed;
	width:100%;
	height: 20%;
	top:0;
	left:50%;
	transform: translateX(-50%);

	background: url('/assets/groep14/images/header-14.svg');
	background-position: top center;
	background-repeat: no-repeat;
	background-size: auto 100%;
}
#headerMain_14 #bar {
	background-position: top center;
	background-repeat: no-repeat;

	color: #fff;
	position: absolute;
	width: 100%;
	height: 100%;
	
	left:50%;
	transform: translateX(-50%);

	padding-right: 2rem;
}

#headerMain_14 #bar > nav {
	width: 100%;
    text-align: right;
	float: none;
	margin-top: 2rem;
}

#headerMain_14 #bar > nav ul {
	display: flex;
	flex-direction: row;
	justify-content: end;
	gap: 0.5rem;
}

#headerMain_14 #bar > nav ul li {
	display: inline-block;
}





@media screen and (min-width: 641px) {
	#headerMain #bar {
		background-size: 18%, contain;
	}
}
@media screen and (max-width: 640px) {
	#headerMain #bar {
		background-size: 58%, contain;
	}
}

#nav_sub_SMALL {
	padding: 0.8em;
}
#nav_sub_SMALL > div {
	margin-top: .3rem;
}
#nav_sub_SMALL > div:first-child {
	float: left;
}
.hmbrgr, .sttngs {
	width: 30px;
	height: 30px;
	display: inline-block;
}
.hmbrgr {
	background: url('/assets/res/hamburger.png') center / 100% no-repeat;
}
.sttngs {
	background: url('/assets/res/settings.png') center / 100% no-repeat;
}
#nav_sub_LARGE img {
	margin: 1% 0 0 13%;
	width: 4.61%;
	float: left;
}
.linkZuivelOnline {
	float: left;
	margin: 2.75% 0 0 1.5%;
	font-size: .75em;
	line-height: 1.5em;
}
.linkZuivelOnline > a {
	color: #fff;
}
#nav_sub_LARGE nav {
	margin: 2.75% 12.5% 0 0;
}
#nav_sub_LARGE nav ul li {
	float: left;
	font-size: 0.75em;
	line-height: 1.5em;
	margin-right: 0.75em;
}

.formList {
	width: 1.5em;
	height: 1.5em;
	background-position: center;
	background-size: 100%;
	background-repeat: no-repeat;
	margin-top: -0.15em;
}
.settings {
	background-image: url('/assets/res/settings.png');
}
.back {
	background-image: url('/assets/res/home.png');
}
.beeldbank {
	background-image: url("/assets/res/beeldbank.png")
}

label {
	cursor: pointer;
}

#navMain {
	position: absolute;
	top: 24%;
	width: 100%;
}
#navMain > ul {
	width: 100%;
	display: flex;
    flex-direction: row;
    justify-content: center;
}
@media screen and (max-width: 640px) {
	#navMain > ul {
		line-height: 2em;
	}
}
@media screen and (min-width: 641px) {
	#navMain > ul {
		line-height: 1.25em;
	}
}
/* width list item */
@media screen and (min-width: 641px) {
	#navMain > ul > li {
		width: 13.03%;
		float: left;
	}
	#navMain > ul > li.i5 {
		width: 26.06%;
	}
	#navMain > ul > li.i4 {
		width: 39.09%;
	}
	.lIcon {
		display: block;
	}
}
@media screen and (max-width: 640px) {
	#navMain > ul > li {
		width: 100%;
		cursor: pointer;
	}
	.lIcon {
		display: none;
	}
}
.lIcon {
	width: 100%;
}
.lText {
	color: #2d77b7;
	font-family: 'Interstate';
	text-align: center;
	width: 100%;
	margin-bottom: 1em; /* for mobile */
}
.lTextSub {
	font-family: 'InterstateCondBlack';
}
@media screen and (max-width: 640px) {
	.lText {
		font-size: 1.25em;
	}
}
@media screen and (min-width: 641px) {
	.lText {
		font-size: 1em;
	}
}
/* line width */
@media screen and (max-width: 800px) {
	.lOrange, .lBlue, .lDarkBlue, .lGreen {
		border-bottom-width: 4px;
	}
}
@media screen and (min-width: 801px) and (max-width: 1024px) {
	.lOrange, .lBlue, .lDarkBlue, .lGreen {
		border-bottom-width: 6px;
	}
}
@media screen and (min-width: 1024px) {
	.lOrange, .lBlue, .lDarkBlue, .lGreen {
		border-bottom-width: 8px;
	}
}
.lOrange, .lBlue, .lDarkBlue, .lGreen {
	margin-bottom: 10%;
	/* border-bottom-style: solid; */
}
.lOrange {
	border-bottom-color: #ed7128;
}
.lBlue {
	border-bottom-color: #539cd5;
}
.lDarkBlue {
	border-bottom-color: #2d77b7;
}
.lGreen {
	border-bottom-color: #35a756;
}

/* POPUPS
----------------------------------------------------------------------------- */
#popup {
	display: none;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);

	width: 80%;
	height: 95%;
	background-color: #fff;
	border: 2px solid #2d77b7;
	overflow: hidden;
	/*z-index: 20; /* DEV: necessary? */
}
#popup::before {
	content: '';
	display: block;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(255,255,255,0.6);
}
#popupContent {
	position: absolute;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 30px 35px;

	display:flex;
	flex-direction: column;

	overflow-y: auto;
}

#popupLogo {
	position: absolute;
    right: 0;
    bottom: 0;
    background: url(/assets/res/popupLogo.png) bottom / 100% no-repeat;
    width: 25%;
    height: auto;
    z-index: 9999999999999;
    aspect-ratio: 2 / 1;
}
.close {
	position: absolute;
	right: 15px;
	bottom: 15px;
	height: 40px;
	width: 40px;
	cursor: pointer;
}
#popupClose{
	background: url('/assets/res/close.png') center / 30px no-repeat;
	top: 15px;
}
#balloonClose {
	background: url('/assets/res/skip.png') center / 30px no-repeat;
	bottom: 15px;
}

#settings ul {
	font-size: 1.5em;
	list-style-type: none;
}
#settings_SMALL div {
	font-size: 1.25em;
	line-height: 1.5em;
}

.leerkracht {
	font-size: 0.75em;
}

/* tooltips & vlogs */

.tooltip,
.article {
	display:flex;
	flex-direction: column;
}

.h100 {
	height: 100%;
}
#mediaContainer {
	/*
	width: 75%;
	padding-top: 42.19%;
	position: absolute;
	bottom: 2%;
	*/
}
#mediaContainer img {
	width: 66%;
	height: auto;
	margin-top:2rem;
	margin-bottom:2rem;
}

#mediaContainer img[src="/assets/res/tt_koediagram.png"] {
  	width: 50%;
}

#mediaContainer iframe {
	width: 80%;
	height: 22rem; /* youtube */
	margin-top:2rem;
	margin-bottom:2rem;
}


.placeHolderImage {
	/* DEV: temporary, when video exchange image in html for video */
	background-color: #ddd;
}
/* INTRO
----------------------------------------------------------------------------- */
#balloonContent {
	/*display: none;*/
	box-sizing: border-box;
	position: absolute;
	left: 36%;
	top: 16%;
	width: 41%;
	height: 46%;
	/*background-color: #fff;
	border-radius: 10px;
	overflow: hidden;*/
	padding: 30px 35px;
}

/* QUIZ
----------------------------------------------------------------------------- */
.content {
	position: relative;
	height: 100%;
}
.contentSvg {
	position: absolute;
	
	pointer-events: none;

}

.table {
	display: table;
	border-spacing: 1em 1.5em;
	margin: 0 -1em; /* mind border-spacing */
}
.tr {
	display: table-row;
}
.td {
	display: table-cell;
	font-size: 1.5em;
}

#zuivelquiz ul {
	list-style: none;
	margin-top: 0.5em;
}
.listButton {
	display: inline-block;
	vertical-align: top;
	margin: 0 0.5em 0.5em 0;
}
.listAnswer {
	width: 89%;
	font-size: 1.5em;
	margin-top: 0.35em;
}
@media screen and (max-width: 640px) {
	.listAnswer {
		width: 155px;
		font-size: 1em;
		margin-top: 0.85em;
	}
}
#waarofnietwaar > #antwoorden > div {
	display: inline-block;
	margin: 1em 1em 0 0;
}

#correct {
	height: 50%;
	background-repeat: no-repeat;
	background-position: center;
}
#feedbackAnswer {
	text-align: center;
}
@media screen and (max-width: 640px) {
	#correct {
		background-size: 100%;
		margin-bottom: 1em;
	}
	#feedbackAnswer {
		font-size: 1em;
	}
}
@media screen and (min-width: 641px) {
	#correct {
		background-size: auto 100%;
		margin-bottom: 3em;
	}
	#feedbackAnswer {
		font-size: 1.5em;
	}
}
#nextContainer {
	position: absolute;
	bottom: 0;
	width: 100%;
}
#next {
	cursor: pointer;
}
#aantalGoed, #aantalFout {
	position: absolute;
	top: 35%;
	font-size: 4em;
	font-family: InterstateCondBlack;
}
#aantalGoed {
	left: 34%;
}
#aantalGoed > span {
	font-size: 0.25em;
	font-family: 'Interstate';
	color: #444;
}
#aantalFout {
	left: 66%;
}
#again {
	position: absolute;
	bottom: 0;
	cursor: pointer;
}
#kiesQuiz ul {
	font-size: 1.5em;
}
.mb1 {
	margin-bottom: 1em;
}
#zuivelonline {
	width: 31%;
	background-color: var(--lightBlue);
	color: var(--white);
	padding: 1rem;
	margin: 0 auto;
}

/* BEELDBANK
----------------------------------------------------------------------------- */
#beeldbank ul {
	list-style: none;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}
#beeldbank ul li {
	float: left;
	width: 12em;
}
#beeldbank ul li iframe {
	width: 100%;
	height: 7em;
}
#beeldbank ul li div {
	box-sizing: border-box;
	height: 3.5em;
	padding: 0.5em 0;
	text-align: center;
}

/* KLIKPLAAT
----------------------------------------------------------------------------- */
#pageMenu {
	width: 12em;
	margin: 2.75% 13.5% 0 0;
}
#pageNav {
	height: 2em; /* 32px */
	margin-bottom: 0.5em;
	background-color: var(--popupBlue);
}
#pageNav div {
	width: 1.5em; /* ~40px */
	height: 100%;
	background-position: center;
	background-size: 1.25em;
	background-repeat: no-repeat;
	margin-right: 0.25em;
}
#legend {
	display: block;
	font-size: 0.67em;
	margin-bottom: 0.5em;
	padding: 0.5em;
	color: #aaa;
	background-color: #fff;
	list-style-type: none;
}
#legend li {
	margin-bottom: 0.75em;
}
#legend li:last-child {
	margin: 0;
}

/* customize label */
.inpCont {
	display: block;
	position: relative;
	padding-left: 16px;
	cursor: pointer;/*
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;*/
}
/* hide default checkbox */
.inpCont input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}
/* custom checkbox */
.check {
	position: absolute;
	left:0;
	height: 12px;
	width: 12px;
}
.checkBlue {
	background: url('/assets/res/layerBlueOpen.png') 0 -1px no-repeat;
}
.checkGreen {
	background: url('/assets/res/layerGreenOpen.png') 0 -1px no-repeat;
}
.checkOrange {
	background: url('/assets/res/layerOrangeOpen.png') 0 -1px no-repeat;
}
/* when checked, add background */
.inpCont input:checked ~ .checkBlue {
	background: url('/assets/res/layerBlueClose.png') 0 -1px no-repeat;
}
.inpCont input:checked ~ .checkGreen {
	background: url('/assets/res/layerGreenClose.png') 0 -1px no-repeat;
}
.inpCont input:checked ~ .checkOrange {
	background: url('/assets/res/layerOrangeClose.png') 0 -1px no-repeat;
}
/* create chackmark/indicator (hidden when unchecked) */
.check:after {
	content: '';
	position: absolute;
	display: none;
}
/* show checkmark/indicator when checked */
.inpCont input:checked ~ .check:after {
	display: block;
}
#obj2 {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.buttonLong {
	box-sizing: border-box;
	width: 7.2em;
	height: 1.6em;
	/*background-image: url('/assets/res/buttonBlue.png'); PER COLOR */
	background-position: center;
	background-size: 100%;
	color: #fff;
	margin-top: 1em;
	padding-left: 2em;
	font-size: 1.5em;
	font-family: 'InterstateCondBlack', Arial, serif;
	line-height: 1.6em;
	cursor: pointer;
}

.zoomOut {
	background-image: url('/assets/res/zoomout.png');
	float:left;
	margin-left:.5rem;
}
.zoomIn {
	background-image: url('/assets/res/zoomin.png');
	float:left;
}

/* INFOGRAPHIC
----------------------------------------------------------------------------- */
#milkCarton {
	display: block;
	position: absolute;
	left: 43.68%;
	top: 8.59%;
	width: 14.57%;
}

/* SVG
----------------------------------------------------------------------------- */
#layers, #cartons {
	display: none;
}
#svgBody {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.hotspot {
	cursor: pointer;
}
/* svg colors */
.svgWhite {
	fill: #fff;
}
.svgWhiteTransp {
	fill: #fff;
	opacity: 0.6;
}
.svgBlue   {
	fill: #2d77b7;
}
.svgOrange {
	fill: #ed7128;
}
.svgGreen  {
	fill: #35a756;
}