logo, html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

.loader {
  width: 48px;
  height: 48px;
  border: 5px solid;
  border-color: #FF3D00 transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 

body {
	font-family: 'Lato', sans-serif;
	font-weight: 400;
	font-size: 19.2px;
	line-height: 1.4em;
	-webkit-text-size-adjust: none;
}

body ::selection {
	background: #F58025; /*orange*/
	!background: #259AF5; /*opposite*/
	!background: #3b92c9; /*k^l*/
	!background: #4169E1; /*royal*/
	background: #0AC270; /*green*/
	background: #350CF5; /*blue*/
	background: #FAB319; /*yellow*/	
	background: #DE8A16; /*brown*/
	background: #0C60F5; /*light blue*/
	background: #0078d7; /*blue*/
	background: #F58025; /*orange*/
	color: white;
}

a {
	text-decoration: none;
	color: #F58025; /*orange*/
	!color: #259AF5; /*opposite*/
	!color: #3b92c9; /*k^l*/
	!color: #4169E1; /*royal*/
	color: #0AC270; /*green*/
	color: #350CF5; /*blue*/
	color: #FAB319; /*yellow*/
	color: #DE8A16; /*brown*/
	color: #0C60F5; /*light blue*/
	color: #2B11A8; /*dark blue*/
	color: #0078d7; /*blue*/
	color: #F58025; /*orange*/
}

a:hover {
	text-decoration: underline;
}

h3, h4 {
	color: #F58025; /*orange*/
	!color: #259AF5; /*opposite*/
	!color: #3b92c9; /*k^l*/
	!color: #4169E1; /*royal*/
	color: #0AC270; /*green*/
	color: #350CF5; /*blue*/
	color: #FAB319; /*yellow*/
	color: #DE8A16; /*brown*/
	color: #0C60F5; /*light blue*/
	color: #2B11A8; /*dark blue*/
	color: #0078d7; /*blue*/
	color: #F58025; /*orange*/

	font-family: 'Lato', sans-serif;
	font-weight: 700;
}

h3::-moz-selection, h4::-moz-selection, a::-moz-selection {
	color: white;
}

h3::selection, h4::selection, a::selection {
	color: white;
}

h4 {
	display: inline;
}

h5 {
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	display: inline;
}

.shadow {
	-webkit-box-shadow: 0px 0px 6px 6px rgba(0,0,0,.4);
	-moz-box-shadow: 0px 0px 6px 6px rgba(0,0,0,.4);
	box-shadow: 0px 0px 6px 6px rgba(0,0,0,.4);
}

#viewport {
    width: 100vw;
    height: 100vh;
    position: absolute;
    overflow: hidden;
	background-color: #CCC;
}

#banner {
    width: 100vw;
    height: 62px;
    position: absolute;
    overflow: hidden;
	background-color: #9d8d85; /* business card grey */
	background-color: #fff; /* white */
	background-color: #eee; /* off-white */
	!background-color: #f8f8f8; /* off-white */
	z-index: 10;
	-webkit-box-shadow: 10px 10px 37px 0px rgba(0,0,0,.6);
	-moz-box-shadow: 10px 10px 37px 0px rgba(0,0,0,.6);
	box-shadow: 10px 10px 37px 0px rgba(0,0,0,.6);
	background-size: cover;
}

#banner-text {
	height: 43px;
	border-width: 0 0 1px 0;
	border-bottom-style: solid;

	font-family: 'Lato', sans-serif;
	font-weight: 700;
	color: #75797b; /* logo grey */
	text-align: center;
	margin-top: 20px;
}

#banner-text .separator {
	color: #75797b; /* logo grey */
	color: #F58025; /*orange*/
}

#banner-text p {
	display: inline;
}

#banner-text a {
	color: #75797b; /* logo grey */
}

#banner-text a:hover {
	text-decoration: none;
}

#logo {
	height: 50px;
	width: 56px;
	background-image: url("img/logo-banner.png");
	left: 25px;
	top: 5px;
	position:relative;
	float: left;
	visibility:hidden;
}

#hamburger {
	height: 50px;
	width: 50px;
	background-image: url("img/hamburger.png");
	left: -25px;
	top: 5px;
	position:relative;
	float: right;
	visibility:hidden;
	cursor: pointer;
}

.page {
    width: 100vw;
    height: 100vh;
    position: absolute;
	left: 0vw;
}

.page-content {
	position: absolute;
    height: 100vh;
}

.english {
	font-style: italic;
}

.page-content {
    !background-color: #F58025;
}

.background {
	top: 62px;
	/* No calc available */
	height: 100%;
	/* Firefox */
	height: -moz-calc(100% - 62px);
	/* WebKit */
	height: -webkit-calc(100% - 62px);
	/* Opera */
	height: -o-calc(100% - 62px);
	/* Standard */
	height: calc(100% - 62px);
	background-size: cover;
	position: relative;
}

/* head added to make home background image load first */
#page1 .background, #page1 .box {
	/*
	background-image: url("img/bg-home-1920.jpg");
	background-image: url("img/bg-home2-1920.jpg");
	background-position: 46.78% 40.22%;
	*/
	background-image: url("img/bg-home3-1920.jpg");
	background-position: 32.38% 35.89%;
	background-position-x: 6.38%;
	background-position-y: 35.89%;
}

#page2 .background, #page2 .box {
	/*
	background-image: url("img/bg-douwe-1920.jpg");
	background-position: 45.2% 35.2%;
	*/
	background-image: url("img/bg-douwe2-1920.jpg");
	background-position: 64.53% 35.2%;
}

#page3 .background, #page3 .box {
	background-image: url("img/bg-cassatie-1920.jpg");
	background-position: 50.46% 92.02%;
}

#page4 .background, #page4 .box {
	background-image: url("img/bg-overuit-1920.jpg");
	background-position: 43.59% 73.12%;
}

#page5 .background, #page5 .box {
	background-image: url("img/bg-overuit-1920.jpg");
	background-position: 43.59% 73.12%;
}

#page6 .background, #page6 .box {
	background-image: url("img/bg-overuit-1920.jpg");
	background-position: 43.59% 73.12%;
}

#page7 .background, #page7 .box {
	background-image: url("img/bg-voorwaarden-1920.jpg");
	background-position: 65.63% 100%;
}

#page8 .background, #page8 .box {
	background-image: url("img/bg-kosten-1920.jpg");
	background-position: 25% 43.85%;
}

#page9 .background, #page9 .box {
	background-image: url("img/bg-contact-1920.jpg");
	background-position: 37.34% 24.85%;
}

#page10 .background, #page10 .box {
	background-image: url("img/bg-contact-1920.jpg");
	background-position: 37.34% 24.85%;
}

.menu {
	position: absolute;
	top: 50px;
	padding: 20px;
}

#menu1 {
	position: absolute;
	left: 60px;
}

#menu2 {
	position: absolute;
	left: 460px;
}

#menu3 {
	position: absolute;
	left: 860px;
}

.box {
	height: 90vh;
	background-color: #DDD;
	position: absolute;
	top: 5vh;
	-webkit-box-shadow: 10px 10px 37px 0px rgba(0,0,0,.6);
	-moz-box-shadow: 10px 10px 37px 0px rgba(0,0,0,.6);
	box-shadow: 10px 10px 37px 0px rgba(0,0,0,.6);
	background-size: cover;
	left: 200vw;
	visibility: hidden;
}

.box-content {
	background-color: #eee;
	width: inherit;
	height: inherit;
	!opacity: 0.85;
    !filter: alpha(opacity=85); /* For IE8 and earlier */
	
	padding: 20px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	overflow: auto;
}

.box, .box-content {
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

@media screen and (max-width: 1280px) {
	#page1 .background, #page1 .box, head {
		background-image: url("img/bg-home3-1280.jpg");
	}
	
	#page2 .background, #page2 .box {
		background-image: url("img/bg-douwe2-1280.jpg");
	}
	
	#page3 .background, #page3 .box {
		background-image: url("img/bg-cassatie-1280.jpg");
	}
	
	#page4 .background, #page4 .box {
		background-image: url("img/bg-overuit-1280.jpg");
	}
	
	#page5 .background, #page5 .box {
		background-image: url("img/bg-overuit-1280.jpg");
	}
	
	#page6 .background, #page6 .box {
		background-image: url("img/bg-overuit-1280.jpg");
	}
	
	#page7 .background, #page7 .box {
		background-image: url("img/bg-voorwaarden-1280.jpg");
	}
	
	#page8 .background, #page8 .box {
		background-image: url("img/bg-kosten-1280.jpg");
	}
	
	#page9 .background, #page9 .box {
		background-image: url("img/bg-contact-1280.jpg");
	}

	#page10 .background, #page10 .box {
		background-image: url("img/bg-contact-1280.jpg");
	}
}

@media screen and (max-width: 800px) {
	#page1 .background, #page1 .box, head {
		background-image: url("img/bg-home3-800.jpg");
	}
	
	#page2 .background, #page2 .box {
		background-image: url("img/bg-douwe2-800.jpg");
	}
	
	#page3 .background, #page3 .box {
		background-image: url("img/bg-cassatie-800.jpg");
	}
	
	#page4 .background, #page4 .box {
		background-image: url("img/bg-overuit-800.jpg");
	}
	
	#page5 .background, #page5 .box {
		background-image: url("img/bg-overuit-800.jpg");
	}
	
	#page6 .background, #page6 .box {
		background-image: url("img/bg-overuit-800.jpg");
	}
	
	#page7 .background, #page7 .box {
		background-image: url("img/bg-voorwaarden-800.jpg");
	}
	
	#page8 .background, #page8 .box {
		background-image: url("img/bg-kosten-800.jpg");
	}
	
	#page9 .background, #page9 .box {
		background-image: url("img/bg-contact-800.jpg");
	}

	#page10 .background, #page10 .box {
		background-image: url("img/bg-contact-800.jpg");
	}
}

@media screen and (max-width: 820px) {
    .box.remove_first {
		display: none;
    }
	
	#menu2 {
		display: none;
	}
	
}

/*@media screen and (max-width: 479px) {*/
@media screen and (max-width: 550px) {
    .box.remove_second {
		display: none;
    }
	
	#menu3 {
		display: none;
	}
}

@media screen and (max-width: 920px) {
	#banner-text p.t3 {
		display: none;
	}
}

@media screen and (max-width: 700px) {
	#banner-text p.t2 {
		display: none;
	}
}

@media screen and (max-width: 450px) {
	#banner-text p.t1 {
		display: inline-block;
		width: 240px;
		position: relative;
		top: -18px;
	}
}

@media screen and (max-width: 350px) {
	#banner-text p.t1 {
		display: none;
	}
}