/* CSS Document */
@charset "UTF-8";

/* fonts */
@font-face {
  font-family: 'EtelkaTextPro';
  src: url('fonts/EtelkaTextPro.eot?#iefix') format('embedded-opentype'),  url('fonts/EtelkaTextPro.otf')  format('opentype'),
	     url('fonts/EtelkaTextPro.woff') format('woff'), url('EtelkaTextPro.ttf')  format('truetype'), url('fonts/EtelkaTextPro.svg#EtelkaTextPro') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'EtelkaTextPro-Bold';
  src: url('fonts/EtelkaTextPro-Bold.eot?#iefix') format('embedded-opentype'),  url('fonts/EtelkaTextPro-Bold.otf')  format('opentype'),
	     url('fonts/EtelkaTextPro-Bold.woff') format('woff'), url('fonts/EtelkaTextPro-Bold.ttf')  format('truetype'), url('fonts/EtelkaTextPro-Bold.svg#EtelkaTextPro-Bold') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'EtelkaMediumPro';
  src: url('fonts/EtelkaMediumPro.eot?#iefix') format('embedded-opentype'),  url('fonts/EtelkaMediumPro.otf')  format('opentype'),
	     url('fonts/EtelkaMediumPro.woff') format('woff'), url('fonts/EtelkaMediumPro.ttf')  format('truetype'), url('fonts/EtelkaMediumPro.svg#EtelkaMediumPro') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'EtelkaMediumPro-Bold';
  src: url('fonts/EtelkaMediumPro-Bold.eot?#iefix') format('embedded-opentype'),  url('fonts/EtelkaMediumPro-Bold.otf')  format('opentype'),
	     url('fonts/EtelkaMediumPro-Bold.woff') format('woff'), url('fonts/EtelkaMediumPro-Bold.ttf')  format('truetype'), url('fonts/EtelkaMediumPro-Bold.svg#EtelkaMediumPro-Bold') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'EtelkaLightPro';
  src: url('fonts/EtelkaLightPro.eot?#iefix') format('embedded-opentype'),  url('fonts/EtelkaLightPro.otf')  format('opentype'),
	     url('fonts/EtelkaLightPro.woff') format('woff'), url('fonts/EtelkaLightPro.ttf')  format('truetype'), url('fonts/EtelkaLightPro.svg#EtelkaLightPro') format('svg');
  font-weight: normal;
  font-style: normal;
}

html, body {font-family: EtelkaTextPro, Verdana, Helvetica, Arial, sans-serif; height:100%; display:block; background-color:#FFFFFF; color:#3c3c3b;}
body {background-image:url(/energieles/images/background-content.png); background-position:center top; background-position-y:0; background-repeat:repeat-x;}
.menutitel{font-weight:bold;}
#title{width:100%; height:100%; overflow:auto;}
.title{float:left;}
.soundbuttons{display:none;}
.m{display:none;}
.full{display:block;}
.container {width:1024px; padding-right: 0px; padding-left: 0px; margin-right: auto; margin-left: auto;}
b, strong{font-weight:normal; font-family: EtelkaTextPro, Verdana, Helvetica, Arial, sans-serif; }
div#slideshowVragen strong {font-family: 'EtelkaMediumPro', Verdana, Helvetica, Arial, sans-serif;}
#logo-titel{display:block; height: 100px; width:100%; background-image:url(/energieles/images/logo-wve.png); background-position:left; margin-top:1em; background-repeat:no-repeat;}

.thema-titel{font-family: EtelkaMediumPro-Bold, Verdana, Helvetica, Arial, sans-serif; color:#000000; font-size:2em; line-height: 110%; margin-bottom: 0.5rem;}
.thema-titel a {color: #000000;}
.thema-subtitel{font-family: EtelkaMediumPro, Verdana, Helvetica, Arial, sans-serif; color: #000000; font-size:1rem;}
#thema-content-container{display:block; min-height:230px; }
#thema-menu{display:block; margin-top:1em;}
#thema-content{display:block; margin-top:1em; overflow:hidden;}
#thema-icoon{width:312px; height:240px; background-repeat:no-repeat; z-index:2; position:relative; cursor:pointer;}
h6{margin-top:-6px; margin-bottom: 2rem;}
.onderdeel-button {font-family: EtelkaMediumPro, Verdana, Helvetica, Arial, sans-serif; color:#000000;}

@media (min-width: 768px) {
  .container{width: 750px;}
  #footer{width: 750px;}
}
@media (min-width: 800px) {
  .container{width: 790px;}
  #footer{width: 790px;}
}
@media (min-width: 980px) {
  .container{width: 960px;}
  #footer{width: 960px;}
}

@media (min-width: 992px) {
  .container{width: 970px;}
  #footer{width: 970px;}
}
@media (min-width: 1200px) {
  .container {width: 1024px;}
  #footer{width: 1024px;}
}

@media (max-width: 768px) {.content {font-size: 0.9em;}}
@media (max-width: 1024px) {.container{max-width:100%;}}

#title-woordenlijst{font-weight:bold; font-size:1.2em; color:#CB091C; margin-bottom:1.6em;}

#hoofdnavigatie{min-height:2em; line-height:2em; display:block; background-color:#01232f;}
.hoofdnavigatie-item{height:2em; display:block; color:#FFFFFF; text-align:center;}

#kruimelpad{display:block; margin:1em 0.5em 0em 3em; font-size:0.8em; min-height:1.4em;}

a {text-decoration:none; color: #000000; border-bottom: 0 solid #000000; padding-bottom: 1px;}
a:hover{color:#999999;}
a img{text-decoration:none;  border-bottom: 0px solid;}
a:hover img{text-decoration:none;  border-bottom: 0px solid;}
p a{text-decoration:none;}
p{word-wrap:break-word; margin: 0 0 10px;}
li{line-height:1.4em;}
li a {text-decoration: underline;}
h1{font-size: 1.72em; margin-bottom: 1.2em; color: #000000; padding:0px 0px 0px 0px; margin:0px 0px 1.2em 0px; font-family: EtelkaMediumPro, Verdana, Helvetica, Arial, sans-serif;}
h1 a{display:block; text-decoration:none;  border-bottom: 0px solid;}
h2{font-size: 1.2em; margin-bottom: 0.5em; color: #000000; padding:0px 0px 0px 0px; font-family: EtelkaMediumPro, Verdana, Helvetica, Arial, sans-serif;}
h2 a{display:block; text-decoration:none;  border-bottom: 0px solid;}
h3{font-size:1em; font-family: EtelkaMediumPro, Verdana, Helvetica, Arial, sans-serif; color:#000000; margin-bottom:0.4em;}
h4{font-family: EtelkaMediumPro, Verdana, Helvetica, Arial, sans-serif;font-size:0.95em; margin-bottom:0.4em;}

#container{position:relative;}
#digicontainer{max-width:1024px; min-height:100%;  width:100%; position:absolute; display:block; margin-top:0em;}
#main-content{float:left; width:60%; background-color:#FFF; border:solid 0.1em #c40646; border-radius:12px; padding:1em; margin-right:-10%;}
#content-container{overflow:initial; height:100%; width:100%; max-width:344px; padding: 1.2em; padding-top:2rem; margin:0em 0em 0em 0em; float:left;}
#content-container-breed{overflow:auto; height:100%; padding:1.2em; margin:2em; background-color:rgba(255,255,255,0.88); float:left;}
#media-container{float:right; width:100%; max-width:680px; min-height:450px; margin-top:2rem; z-index:3; position:relative;}
#image-container{overflow:auto; margin:0em 0em -10px 0em; padding:0em 0em 0em 0em;}
.image-blok{display:none; padding:0.5em; background-color:#FFFFFF; max-width:600px; margin-left:36px; margin-bottom:0.5em; height:454px; -webkit-box-shadow: -2px 2px 2px 0px rgba(0,0,0,0.36);
-moz-box-shadow: -2px 2px 2px 0px rgba(0,0,0,0.36);
box-shadow: -2px 2px 2px 0px rgba(0,0,0,0.36);}
#image-container img{width: 100%; }
#embed-container{overflow:hidden; height:100%; max-width: 100%; margin:0.6em 2em 0em 1em; float:right; padding:0px 0px 0px 0px;}
#embed-container iframe{display:block; max-height:524px; text-align:center; overflow:hidden; margin-top:0em; max-width:100%;}
#embed-container .embed-blok{overflow:hidden;}
.embed-blok{padding:0.5em; background-color:#FFFFFF; margin-left:0.5em; margin-bottom:0.5em; -webkit-box-shadow: -2px 2px 2px 0px rgba(0,0,0,0.36);
-moz-box-shadow: -2px 2px 2px 0px rgba(0,0,0,0.36);
box-shadow: -2px 2px 2px 0px rgba(0,0,0,0.36);}

canvas{overflow:hidden; margin:0px 0px 0px 0px;}
body.embedded{margin:0px 0px 0px 0px; max-width:500px;}

#main-content p{padding-right:2em;}
#paginanummers{text-align:right; margin-right:42px; margin-top:0.5em; color:#939598; font-size:0.75em;}
#bladernav{margin-top: -2em; margin-bottom: 0em;} 
.paginanummers{margin-top:0em; float:right;	display:block; color: #656565; padding-right:1em; font-size:0.8em;}
.left{height:2.5em; cursor:pointer; margin-right:1em; float:left; margin-left:-40px;}
.right{height:2.5em; cursor:pointer; float:right; margin-right:-40px;}
.button-pdf{display: block; margin-top: 0.5rem; padding: 1rem; padding-top:0.6rem; padding-bottom: 0.6rem; float: none; width: fit-content; color: #ffffff; background-image: url(/energieles/images/knop-back.png); background-repeat: no-repeat; background-position: left; background-size: cover; font-size: 1em; text-align: center; cursor: pointer;}
a.button-pdf:hover {color: #000000;}
.col-lg-9{width:100%;}
.title{font-size:2em; margin-bottom:1em; margin-top:0;}
#audio{display:none;}
.geluid{margin-top:0.4em; margin-bottom:0.4em;}
.geluid img{margin-right:1em;}
#footer{position:fixed; display:block; width:100%; min-height: 136px; border:0px; background-color:#ffffff; text-align:center; box-shadow: none;}
#footer #footer-knoppen-container{width: unset; display: inline-block; max-width: unset; margin-left: auto; float: right; text-align: center; margin-right: auto; height: 136px; padding-right: 10px;}
#footer .footer-geluid{float:left; text-align:left; line-height:3em; width:12%; padding-left:1em;} 
.footer-item{font-size: 0.88em;}  
#footer-total-container {max-width: 1024px; margin-left: auto; margin-right: auto;}
.link{display:block; width:100%; margin-bottom:0.4em;}
.rechts{float:right;}

#footer .footer-item{color: #FFFFFF; font-weight:bold; float:left; text-align:center; line-height:3em; width:100%;}
#footer .footer-item a{text-decoration:none; color: #FFFFFF; display:block; border:0px;}
#footer .footer-item a:hover,
#footer .footer-item a:active{color: #FFFFFF; text-decoration:none; display:block; border-bottom: 0px solid;}
#footer-terug-knop{background-image: url("/energieles/energieles/images/terugknop.png"); width:212px; height:130px; float:right;}
#footer-logo{display:block; float:left; padding-left:10px;}
#footer-url{display: inline-block; text-align: left; font-size: 12px; color: #939598; line-height: 56px; width: fit-content; float: right; padding-left: 10px;}
#footer-url a{color:#939598;}
#footer-url a:hover{color:#c40646;}
#footer-url-extra {min-height: 16px; margin-top: 30px;}
a.active_furl{background-color:#ffffff; color:#01232f; }
#footer .footer-item a.active_furl{color:#01232f; }

#iframe-old{margin:0px 0px 0.4em 0px; border:0px; padding:0.4em 0.4em 0.4em 0.4em; background-color:#01232f; }  

#niveaumenu-button-container{width:100%; display:block; margin-top:2em;}
.niveaumenu-button{color: #000000; background-color:#FFDB00; width:40%; margin-right:5%; padding-left: 28px; display:block; float:left; height:2.5em; line-height:2.5em; margin-bottom:0.0625em; background-image: url("/energieles/energieles/images/button-triangle-black.png"); background-repeat: no-repeat; background-position:left; background-position-x:10px;}
#fullscreen-container{}
#leraar-button {background-image: url(/energieles/images/but-leraar.png); background-position: center; background-position-y: 0px; background-repeat: no-repeat; width: 100% !important; height: 14px !important; float: none; margin-right: auto; margin-left: auto; cursor: pointer; background-size: contain !important; margin-top: 16px;}
#quizniveau-button-container{width:100%; display:block; margin-top:2em;}
.quizniveau-button{color: #000000; background-color:#FFDB00; width:40%; margin-right:5%; padding-left: 28px; display:block; height:2.5em; line-height:2.5em; margin-bottom:0.0625em; background-image: url("/energieles/energieles/images/button-triangle-black.png"); background-repeat: no-repeat; background-position:left; background-position-x:10px;}

@media (max-width: 1200px) {.container{width: 1024px;}
#digicontainer{}
#media-container{max-width:640px;}
.image-blok{max-width: 560px; max-height: 426px;}
}
@media (max-width: 1024px) {.container{width: 980px;}
#digicontainer{}
#media-container{max-width:580px;}
.image-blok{height: 366px; max-width: 480px;}
}

@media (max-width: 980px) {.container{width: 100%;}
#digicontainer{padding:1em;}
#media-container{max-width:479px; margin-top:0em;}
.image-blok{height: 312px;  max-width: 411px;}
}
@media (max-width: 870px) {.container{width: 100%;}
#digicontainer{padding:1em; position: relative; display: inline-block;}
#media-container{max-width:400px;}
.image-blok{height: 230px;  max-width: 300px;}
}
@media (max-width: 800px) {
	.m{display:block;}
	.full{display:none;}
	#thema-content-container {min-height: 0px;}
	#content-container{max-width:800px;}
	#media-container{max-width:100%; min-height: 100%;}
	#image-container{overflow:hidden; overflow: initial;}
	.image-blok{max-width:100%; height: 100%; max-height: 100%; overflow: hidden; padding-bottom: 0em; margin-left:0px;}
	#thema-menu {margin-bottom: 1em;}
	#thema-icoon{display:none;}
	.image-blok img{}
	#image-container img{margin-bottom:0.5em;}
	#grey-bar{display:none;}
	#digicontainer{position: relative; display:inline-block;}
	#bladernav{margin-top:0em; width:60px;}
	#paginanummers{width: initial; display: block; margin-right: 1em; margin-top: -24px;}
	.right{margin-right:0px;}
	.left{margin-left:0px; margin-right:0em;}
}
@media (max-width: 640px) {	
	#footer-url{display: inline; position: relative; line-height:12em; width: 100%; text-align: center;}
	#footer-logo {float: none; padding-left:0px; position: relative; bottom: 0; width:100%;}
	#footer-terug-knop{background-repeat: no-repeat; width: 100%; background-position:center;}
	#leraar-button {background-position: center; background-repeat: no-repeat; width: 100% !important; margin-right: auto; margin-left: auto;}
	#footer #footer-knoppen-container {width: 100%;}	
}
@media (max-width: 400px) {
	#embed-container{max-width:90%; margin-left:5%;}	
	#kruimelpad{display:none;} 	
	.niveaumenu-button{width:95%; font-size:90%;}
	#embed-container iframe{max-height:200px;}
	#logo-titel{background-size: 100%;}
	#content-container{padding-left: 0.25em;}
}
@media (max-width: 360px) {
	#embed-container{margin-left:0px; margin-right:0px; max-width:100%;}
	#header-icons img {width:24px; height:24px;}
}

@media (max-height: 767px) {
	#thema-icoon{background-size:50%; height:120px;}
	.image-blok {height:312px; max-width:411px;}
	#media-container{min-height:312px;}
}