@charset "UTF-8";

/* fonts */
@font-face {
  font-family: 'futura-pt-bold';
  src: url('fonts/FuturaPTBold.eot?#iefix') format('embedded-opentype'),
	     url('fonts/FuturaPTBold.woff') format('woff'), url('FuturaPTBold.ttf')  format('truetype'), url('fonts/FuturaPTBold.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'futura-pt';
  src: url('fonts/FuturaPTBook.eot?#iefix') format('embedded-opentype'),
	     url('fonts/FuturaPTBook.woff') format('woff'), url('FuturaPTBook.ttf')  format('truetype'), url('fonts/FuturaPTBook.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'colonel-sharp';
  src: url('fonts/Colonel-Sharp-205TF.eot?#iefix') format('embedded-opentype'),
	     url('fonts/Colonel-Sharp-205TF.woff') format('woff'), url('Colonel-Sharp-205TF.ttf')  format('truetype'), url('fonts/Colonel-Sharp-205TF.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

body {font-family: futura-pt-bold, Verdana, serif; font-size: 16px; line-height: 20px; color: #001f4b; background-color: #ffffff;}
#site_wrapper{margin-left:auto; margin-right:auto; width:960px;} 
#header{width:100%;height:150px;display:block;}
#intro-image{width:100%; display:inline-block; margin-bottom:1rem;}
#intro-image img {width: 100%; border: 0px;}
#routekeuze-image{width:50%; display:inline-block; margin-bottom:1rem; float:right;}
#routekeuze-image img {width: 100%; border: 0px;}
p.intro-tour-image {width: 40%; float: right;}
p.intro-tour-tekst {width: 40%;}
p.intro-tour-image img {width: 100%; border: 0px;}
#sector0{width:100%; max-width:100px; height:100%; max-height:100px; display:inline-block;background-image: url("/images/icon0.jpg"); background-repeat:no-repeat; background-size: 100%;}
#sector1{width:100%; max-width:100px; height:100%; max-height:100px; display:inline-block;background-image: url("/images/icon1.jpg"); background-repeat:no-repeat; background-size: 100%;}
#sector2{width:100%; max-width:30px; height:100%; max-height:30px; display:none;background-image: url("/images/icon2.jpg"); background-repeat:no-repeat; background-size: 100%; margin-left:24px;}
#sector3{width:100%; max-width:30px; height:100%; max-height:30px; display:none;background-image: url("/images/icon3.jpg"); background-repeat:no-repeat; background-size: 100%;}
#logo{position:relative;width:100%; max-width:136px; height:100%; max-height:100px; display:inline-block;background-image: url("/images/logo.jpg"); background-repeat:no-repeat; float:right;margin-top:20px;}
#title-container{margin-top:20px;display:block;position:absolute;max-width:460px;}
#sector-container{position:absolute;margin-left:0px;margin-top:20px;width:100%;height:100%;max-height:100px; max-width: 960px;}
h1{font-weight:bold;font-size:46px;color:#001f4b;margin:0;line-height: 1.125em;  font-family: colonel-sharp, futura-pt-bold, Verdana, serif;}
h2{font-weight:bold;font-size:22px; line-height:150%; margin-top: 0px; color: #001f4b;}
#content-wrapper{width:100%; max-width:960px; height: 100%; overflow: auto;}
#image-container{float:right; max-width:50%;}
#image-container img{width:100%;}
.button{background-color: #ffd800;
    color: #001f4b;
    transition: background-color 200ms;
    line-height: 1.25;
    font-size: 1.3rem;
    cursor: pointer;
    position: relative;
    display: inline-block;
    padding: 1.2rem;
    padding-right: 6rem;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;
    font-family: futura-pt-bold,sans-serif;
    border-radius: 3px;
    border: none;}
.button-pas-aan{color:#00b3e3; height:40px;}
a.button{text-decoration:none;}
#content-container{width:50%; margin-bottom:20px; height: 100%; overflow: auto;float:left; }
#content-container p{padding-right:5%; margin-top: 0px; min-width:40px;}
/*#tekst-container {min-height:150px;}*/
img{border:4px;border-style:solid;border-color:#00b3e3;float:right;}
.antwoordknop{background-repeat:no-repeat;padding-left:1rem; height:48px; display:inline-block; margin-bottom:8px; background-position-y: 0%; width:100%;}
a .antwoordknop{text-decoration:none;font-weight:bold; color:#ffffff;  background-color: #002e5d;}
#antwoord0{}
#antwoord1{background-image: none;}
#antwoord2{background-image: none;}
#antwoord3{background-image: none;}
#question-container{width:100%; height:100%; margin-top:20px;}
#question-container p {padding-right: 0%;}
#progressbar{border-top:solid 2px #222; width:92%; max-height:760px; margin-left:auto; margin-right:auto; height:65px; margin-top: 20px; padding-right: 4px; bottom: 0; position: absolute; max-width: 960px;}
.orange{background-color: #f39900; color:#ffffff; padding-left:2%; line-height:150%; margin-bottom:0px;}
.lightblue{background-color: rgb(0,156,214); color:#ffffff; padding-left:2%; padding-right:2%; line-height:150%; margin-bottom:0px; width:96%;}
#progressbar-border{border:solid 2px #222; width:100%; height:30px; margin-top:15px; background-color: rgb(196,191,185);}
#progressbar-center{width:100%; height:24px; text-align:center; background-color:#222; padding-top:8px; margin-top:-24px;} 
#progressbar-tekst{width:100%; text-align:center;padding-top: 4px; color:#ffffff;}
#score{height:36px; width:100%; float:right;}
#score-display{background-color:#68bc49;float:right;padding:8px;font-size:14px;}
#knop-verder{margin-top:20px; position:absolute;}
#knop-futureland{margin-top:1rem; margin-bottom:1rem; }
#knop-verder-user{margin-top: 20px; position: relative; margin-bottom: 20px;} 
#skip-container{width: 100%; text-align:right; bottom: 72px; max-width: 960px; position: absolute;}
#skip{background-image: url("/images/sla-over.png"); background-repeat:no-repeat; display:inline-block;float:right; padding-left: 30px; height: 30px;line-height: 30px; font-size:14px;}
#skip-container a {color: #000; text-decoration: none;}
#disclaimer-gegevens{font-size:12px;}
span#feedback{color:#ea0e35; font-weight:bold;}
#start_keuze{max-width:100%;}
#start_index{max-width:100%;}
select#school_index {margin-bottom: 20px;}
#error{margin-top:20px; color:#ea0e35; font-weight:bold;}
#geen_school_error{color:#ea0e35; font-weight:bold;}
#geen_klas_error{color:#ea0e35; font-weight:bold;}
.cijfer{width:36px; height:36px; float:left; display:inline-block; background-color:#00b3e3;margin-right: 6px; text-align: center;   line-height: 36px; margin-bottom: 6px;}
.cijfer a {color: #fff; text-decoration:none;}
.cijfer a:hover {color: #000;}
#cijfer-container{height:100%; overflow:auto; margin-bottom: 20px;}
#knop-resultaten{margin-top:0px; position: relative; min-height: 48px;}
#knop-resultaten .button{font-size:18px;}
#knop-resultaten a.button{font-size:18px;}
.end-image{max-width:50%;}

@media (max-width: 1024px) {	
#site_wrapper{width: 96%; margin-left:2%; margin-right:2%; max-width:960px;}
#sector-container{max-width: 800px;}
}
@media (max-width: 1000px){#skip-container{width: 50%; right:16px;}}
@media (max-width: 960px){#sector-container{max-width: 780px;}}
@media (max-width: 800px){#sector-container{max-width: 560px;}
	#image-container{width:48%;}
	img{width: 100%;}
}

@media (max-width: 768px) {
#ipadstaand{}
h1 {font-size: 24px;}
#title-container{max-width:300px;}
}
@media (max-width: 600px) {
#content-wrapper{width: 96%;padding-left: 8px;padding-right: 8px; margin-top: 10px;}
#content-container{width: 96%;}
#sector-container{margin-left:0px;margin-top:8px; width:98%;}
.end-image{max-width:100% !important;}
#title-container{margin-top:8px; max-width:50%;}
h1{font-size: 20px;}
#logo {max-width: 80px; background-size:100%;}
#score{margin-top:20px;top: 84px;position: absolute; width:92%;}
#score-display{font-size: 12px;width: 44%;text-align: center;}
#progressbar{width: 44%;top: 84px; border-top:solid 0px; font-size: 12px;}
#progressbar-border{margin-top:0px; height: 32px;}
#tekst-container {min-height: 0px;}
#knop-verder{margin-top:0px; position: relative; min-height: 48px;}
#image-container{float:none;margin-left:auto;margin-right:auto;width:102%;max-width:352px;}
img {float: right;}
#skip-container{text-align:left; right: auto; bottom: auto; right: initial; bottom: initial; width:90%; position: relative; margin-top: 10px;}
#skip{float:left; font-size: 12px;}
    #routekeuze-image{width:100%;}
    p.intro-tour-image {width: 100%; float: right;}
p.intro-tour-tekst {width: 92%;}
}

@media (max-width: 450px) {
	#title-container{margin-left: 0px;max-width:88%;}
	#progressbar{top: 92px;}
	#score{top: 92px;}
	#sector-container{margin-left:0px;margin-top:48px;}
	#sector1 {width: 60px; max-width:60px; max-height: 60px;}
    h1{font-size: 16px;}
}
@media (max-width: 400px) {
	img {width:102%; max-width:100%; margin-bottom:10px;}
	#sector-container{margin-left:0px;margin-top:40px;}
	#progressbar{font-size: 10px;}
	#score-display{font-size: 10px;}
	h1{word-wrap: break-word;font-size: 13px;}
}
@media (max-width: 320px) {
	#score-display{font-size:8px; padding:8px;}
}