body {font-family: 'Work Sans', Verdana, sans-serif; background-color: #803030;}

.w3-theme-grey {color: #000; background-color: #D3D3D3 !important;}
.ui-corner-10 {border-radius: 10px;}
.ui-mobile-hide, .ui-large, .ui-medium, .ui-multicol {display: none;}
.ui-mobile-show, .ui-show {display: block !important;}
.ui-tab>div {display: none;}
.ui-clear {clear: both;}

  header {
    position: relative; display: block; width: 100%; height: 29%; padding-bottom: 29%; overflow: hidden;
    background: #601010 url('../images/Norway_5746-47.jpg') no-repeat center center;
    background-size: 150% 150%; z-index: 0;
  }
  #headerleft, #headerright {position: absolute; display: block; width: 5%; height: 348px; top: 0; z-index: 1; }
  #headerleft {left: 0;
    background: -webkit-linear-gradient(left,rgba(0,0,0,1),rgba(0,0,0,0));
    background: -o-linear-gradient(right,rgba(0,0,0,1),rgba(0,0,0,0));
    background: -moz-linear-gradient(right,rgba(0,0,0,1),rgba(0,0,0,0));
    background: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0));
  }
  #headerright {right: 0;
    background: -webkit-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,1));
    background: -o-linear-gradient(right,rgba(0,0,0,0),rgba(0,0,0,1));
    background: -moz-linear-gradient(right,rgba(0,0,0,0),rgba(0,0,0,1));
    background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1));
  }
  header h1, header h2 {position: absolute; z-index: 3; width: 100%; text-align: center;}
  header h1 {top: -0.6em; font-size: 1.5em; text-shadow: 1px 1px 1px #fff;}
  header h2 {top: 1.3em; font-size: 0.825em; color: #C60066; text-shadow: 0px 0px 4px #fff;}
	
  #logobox {
    width: 2em; height: 2em; position: absolute; z-index: 3; left: 5%; top: 3.0em;
    background: transparent url('../images/logo-space4chris-br100.jpg') no-repeat 0px 0px;
    background-size: 100% 100%; border: 2px solid #eee; box-shadow: 2px 2px 3px #444;
  }
  header i, nav button i, .w3-tab button i {margin: 0.1em auto -0.4em auto; z-index: 0;}
  .w3-topnav i {bottom: 0;}
  .btn-menu, .w3-tab .w3-btn {height: 2.5em; padding: 0 0em 0.8em 0em; border-radius: 3px;line-height: 0.5em; text-align: center;}
  .btn-menu {position: fixed; width: 3.2em; top: 2.8em; right: 0.2em; z-index: 20;}
  .btn-menu i {line-height: 1.2;}
  .btn-up {position: relative; float: right; margin: -1em 2em 0.2em 0; font-size: 0.75em; color: #2e8fe8; background-color: #0e2f88; clear: both; z-index: 10;}
  #ooievaar { 
    width: 2em; height: 2em; position: absolute; z-index: 10; left: -25%; top: 25%; transition: 25.0s;
    background: transparent url('../images/animaatjes-vogels-960591.gif') no-repeat center center;
    background-size: 100% 100%;
  }
  .birdmove {left: 125% !important;}
  /* NAVIGATIE */
.topnav {position: fixed; top: 5.6em; right: -500px; z-index: 5; padding: 4px 8px 4px 8px;
      color: #e0e0e0; background-color: #404040; border-bottom-left-radius: 5px;}
.btn-menu:hover {height: 3.2em;}
button.noclick:hover ~ nav, nav.noclick:hover, .ui-show {right: 0; transition: 0.25s;}
.topnav a {
  font: bold 0.825em Arial; text-align: left; text-decoration: none;
  display: block; width: 10em; height: 100%; line-height: 2.5em;
  padding: 0 8px 0 8px !important; margin: 0 auto 0.4em auto;
  border-radius: 1em; border-width: 0;
}
.topnav a:hover {border-width: 0; text-shadow: 1px 1px 1px #fff;} 
.topnav a.nav-active {border-width: 0; color: #f8f8f8; text-shadow: 1px 1px 1px #000;}

.topnav a:hover {
		background-color: #f0f0f0;color:#000;
		background-image: -webkit-linear-gradient(#f0f0f0, #b0c0d0);
		background-image: -o-linear-gradient(#f0f0f0, #b0c0d0);
		background-image: -moz-linear-gradient(#f0f0f0, #b0c0d0);
		background-image: linear-gradient(#f0f0f0, #b0c0d0);
		box-shadow: inset 0px 1px 5px 1px rgba(0,0,0,0.1), 0px 0px 5px 1px rgba(255,255,255,0.1);
	}
.topnav a.nav-active {
		background-color: #c0ddf8;color:#fff;
		background-image: -webkit-linear-gradient(#f4e4bf, #D9A629);
		background-image: -o-linear-gradient(#f4e4bf, #D9A629);
		background-image: -moz-linear-gradient(#f4e4bf, #D9A629);
		background-image: linear-gradient(#f4e4bf, #D9A629);
		box-shadow: inset 0px 1px 5px 1px rgba(0,0,0,0.05), 0px 0px 5px 1px rgba(255,255,255,0.05);
	}
.grad {
	background:	-moz-linear-gradient(top, #4bb748 0%, #aed24c 38%, #ffffff 100%); /* firefox */
	background:	-webkit-gradient(linear, left top, left bottom, color-stop(0%,#4bb748), color-stop(38%,#aed24c), color-stop(100%,#ffffff)); /* webkit */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4bb748', endColorstr='#ffffff',GradientType=0 ); /* ie */
	background:	-o-linear-gradient(top, #4bb748 0%,#aed24c 38%,#ffffff 100%); /* opera */	
}
.grad2 {
 /* fallback DIY*/
 /* Safari 4-5, Chrome 1-9 */
   	background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.05, #1a82f7), color-stop(0.5, #2F2727), color-stop(0.95, #1a82f7), to(#2F2727));
 /* Safari 5.1+, Chrome 10+ */  background: -webkit-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
 /* Firefox 3.6+ */ 			background:    -moz-linear-gradient(left, #5974a3, #ccc4c1 5%, #5974a3, #ccc4c1 95%, #5974a3);
 /* IE 10 */ 					background:     -ms-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
 /* Opera 11.10+ */			 	background:      -o-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
}

footer { clear: both !important; width:100%; height: 4em; background-color: #333; color:#ff0; text-align: center; margin-top: 15px; padding-top: 0.5em; font-size: 0.625em;}
footer a, footer span {text-decoration: none; color:#fa0; }
footer a:hover{color:#eef;}

/* CONTENT */
#content {background-color: transparent; overflow: hidden;}
section {padding: 16px;}
section h2.left {
  display: block;margin: 1em 0 0.5em 0px; width: 100%;
  font-family: 'Oval Single', Arial, sans-serif;
  text-align: left; letter-spacing: 1px; color: #4BB748;
}
#homesection {visibility: hidden;}
.applic {display: block; float: none; width: 104%; max-width: 880px; margin: 0 auto; padding: 1em 0; border: 0 none;}
.worksheet {position: relative; display: block; float: none; width: 100%; left: -2%; margin: 0; border: 0 none; text-align: center;}

#homebox { font-size: 1.0em;
  width:100%; max-width: 500px; height:auto; margin: 0 auto; padding: 10px 0 90% 0;
  background: LightBlue url('../images/Globe-Planet-Earth-Animals-780499.jpg') no-repeat center 60%;
  background-size: 90% 67.4%;
  color: Blue; text-align: center;
}
#homebox p {margin: 0;}
#homebox:hover {background-image:url('../images/Globe-Planet-Earth-Animals-780498.jpg'); }
.datumbox {width: 200px; height: 1.5em; float: right; margin-right: 5px; }
.eindtekst{margin-top: 100px;}
#bottomField1,#bottomField2 {position: relative; top: 80%; left: 20%; width:60%; height:200px; padding-left:10px; background-color: #9FC2EA; color:black; z-index: 0;}
#bottomField2 {top: 346px;height:223px;}

/* MEDIA QUERIES */
@media only screen and (min-width: 350px) {
  header {background-position: center 60%;} header h1 {top: -0.5em;} header h2 {top: 1.4em;} #logobox{top: 3.0em; width: 2.5em; height: 2.5em;} #ooievaar {width: 2.5em; height: 2.5em;}
  .applic {width: 100%;} .worksheet {left: 0;}
}
@media only screen and (min-width: 410px) {
  #logobox {top: 0.5em;} .btn-menu {top: 0.2em;} .topnav {top: 3em;}
}
@media only screen and (min-width: 500px) {
  header {background-position: center 85%;} #ooievaar {width: 3em; height: 3em;}
  #logobox {width: 3em; height: 3em;} 
  #homebox {background-size: 450px 337px; padding: 10px 10px 400px 10px;} footer {font-size: 0.825em;}
  .applic {padding: 1em 2%;}
}
@media only screen and (min-width: 601px) {
  header {background-size: 125% 125%; background-position: center 100%;} header h1 {top: -0.4em;} header h2 {top: 2em;}
  .ui-multicol, .ui-medium {display: block;}
}
@media only screen and (min-width: 630px) {
  header h1 {top: -0.4em; font-size: 1.8em;} header h2 {top: 2em; font-size: 1.0em;}
  #logobox, #ooievaar {width: 3.5em; height: 3.5em;}
  .ui-mobile-hide, .ui-medium {display: block;}
  .ui-mobile-show {display: none !important;}
  .topnav {position: relative; top: 0; left: 0; text-align: center; display: block !important;}
  .topnav a {display: inline-block; width: auto; text-align: center; margin: 0; font-size: 0.89em;}
}
@media only screen and (min-width: 993px) {
  header {background-size: 112% 112%;} header h1 {top: -0.4em; font-size: 2em;} header h2 {top: 2em; font-size: 1.0em;}
  #logobox, #ooievaar {width: 4em; height: 4em;}
  .ui-large {display: block;} .ui-medium {display: none;}
}
@media only screen and (min-width: 1200px) {
  header {height: 348px; padding-bottom: 348px; background-size: 1200px 348px; background-position: center top;}
  header h1 {top: -0.4em; font-size: 2.4em;} header h2 {top: 2em; font-size: 1.2em;} #logobox{left: 20%;}
}