html {
	overflow:hidden;
}
html, body{
    height: 100%;
    margin: 0;
}

body{
    background-color:transparent;
}

#pageWrapper {
	height:100%;
}

#head {
	position:absolute;
	top:0;
	width:100%;
	height:100px;
	z-index:50000;
}
#container {
	width:100%;
	max-width:1110px;
	margin:0 auto;
}

#viewPortWrapper{
	display: block;
    /*height: 800px;
	min-height: 400px;*/
    margin: 0 auto;
    padding: 0;
    position: relative;
	width:100%;
    max-width: 1110px;
	top:50px;
}

h1, h2, h3, h4, h5, h6, p, span, ol, ul {
    font-family: myriad-pro, "Open Sans", Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-style: normal;
    color: rgb(70, 71, 73);
    text-rendering: optimizelegibility;
    margin-top: 0.2rem;
    margin-bottom: 0.5rem;
    line-height: 1.2;
    text-align: center;
}
p{
	padding-left: 2px;
	padding-right: 2px;
}
ul.beschermingsmiddelen {
	margin-top:10px;
}
ul.beschermingsmiddelen li{
	padding-right: 5px;
	margin-left:-3px;
}

.uitslag-txt {
	font-size:7px;
	width: 95%;
}
ul.uitslag-txt {
	margin:0 0 ;
	-webkit-padding-start: 5px !important;
	list-style:none;
}
.uitslag-txt-btn {
	font-size:8px;
	position:relative;
	margin-top:10px;
	text-align:left;
	color:#1e9ddf;
}


/*
.zoomViewport {
	margin:0;
    padding:0;
	border:1px solid #ccc;
	overflow:hidden;
	margin-left:auto;
	margin-right:auto;
	display:flex;
	height:100%;
	position:absolute;
	top:110px;
	bottom:10px;
 	display:block; 
} */
#footer{
	position:absolute;
	bottom:0;
	width:100%;
	height:10px;
	background-color:#fff;
}
	
/* CHECK https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ */

@media screen and (max-width: 800px)  {
	#viewPortWrapper{
		top:0px;
	height: 500px;
}	
}


@media screen and (max-width: 640px) {

#viewPortWrapper{
	top:0px;
	height: 600px;
}	


#navbar .nav-info p{
	font-size:9px !important;
	
}
#navbar .nav-info p {
	display:none !important;
}
#navbar .bb-prev{
	/*float:left;*/
	text-align:center;
	display:block;
	padding:0 0 0 0;
	/*margin:0 auto 0 auto;*/
	width:150px;
	height:34px;
	/*padding:5px 15px 5px 15px;
	background-color:#E5E5E5;*/
	width:16.66%;
	background-color:#E5E5E5;
	border-radius: 10px;
}
#navbar .bb-prev:hover{
	text-align:center;
	display:block;
	padding:0 0 0 0;
	/*margin:0 auto 0 auto;*/
	width:150px;
	height:48px;
	background-color:#D9E7ED;
	cursor:pointer;
}

#navbar .nav-info{
	width:auto;
	width:60%;
}
#navbar .nav-info p{
	padding:5px;
	margin: 0px 0 0 10px;
	word-wrap: break-word;
	font-size:9px;
}
#bb-exit{
	float:right;
	text-align:center;
	display:block;
	margin:0 auto 0 auto;
	width:150px;
	height:48px;
	/*padding:5px 15px 5px 15px;*/
	background-color:#E5E5E5;
		border-radius: 10px;
}
#bb-exit:hover{
	float:right;
	text-align:center;
	display:block;
	margin:0 auto 0 auto;
	width:150px;
	height:48px;
	/*padding:5px 15px 5px 15px;*/
	background-color:#D9E7ED;
}
#bb-exit h2.bb-navtext{
	width:150px;
}


}


@media screen and (min-width: 1110px) {

#navbar .nav-info p{
	font-size:14px !important;
}

#viewPortWrapper{
	display: block;
    height: 800px;
	min-height: 400px;
    margin: 0 auto;
    padding: 0;
    position: relative;
	width:100%;
    max-width: 1110px;
	top:50px;
}

}



@media screen and (max-width: 1109px)
 {



#navbar {
	/*height:50px;*/
	border:none;
	background-color:transparent;
	/*margin-left:auto;
	margin-right:auto;*/
	overflow:hidden;
	max-width:1110px;
	width:100%;
	height:auto;
	display: flex;
  justify-content: center;
}

#navbar .bb-prev{
	/*float:left;*/
	text-align:center;
	display:block;
	padding:0 0 0 0;
	margin:0 auto 0 auto;
	width:150px;
	height:48px;
	/*padding:5px 15px 5px 15px;*/
	background-color:#E5E5E5;
	width:16.66%;
	border-radius: 10px;
}
#navbar .bb-prev:hover{
	text-align:center;
	display:block;
	padding:0 0 0 0;
	margin:0 auto 0 auto;
	width:150px;
	height:48px;
	background-color:#D9E7ED;
	cursor:pointer;
}
	 .bb-navblok {
		 display:block;
		 width:150px;
	height:48px;
	 }

#navbar .nav-info{
	width:auto;
	width:60%;
}
#navbar .nav-info p{
	padding:5px;
	margin: 0px 0 0 10px;
	word-wrap: break-word;
	font-size:12px !important;
}
#bb-exit{
	/*float:right;*/
	text-align:center;
	display:block;
	margin:0 auto 0 auto;
	width:150px;
	height:48px;
	/*padding:5px 15px 5px 15px;*/
	background-color:#E5E5E5;
}
#bb-exit:hover{
	/*float:right;*/
	text-align:center;
	display:block;
	margin:0 auto 0 auto;
	width:150px;
	height:48px;
	/*padding:5px 15px 5px 15px;*/
	background-color:#D9E7ED;
}
#bb-exit h2.bb-navtext{
	width:150px;
	
}
}




/*.zoomContainer {
	margin:0;
    padding:0;
    width:1110px;
    height:800px;
    position:relative;
	margin:0 auto;
	width:100%;
 	height:100%;
	position:absolute;
	top:0px;

/*	display:block; 
}*/

.zoomViewport {
	position:absolute;
	top:0px;
	bottom:10px;
	margin:0;
    padding:0;
    /*width:1110px;
	height:800px;*/
	border:none;
	background-color:transparent;
	overflow:hidden;
	margin-left:auto;
	margin-right:auto;
	width:100%;
 /*	height:100%;
	display:block; */
}

#navbar {
	height:50px;
	border:none;
	background-color:transparent;
	/*margin-left:auto;
	margin-right:auto;*/
	max-width:1110px;
	width:100%;
	display: flex;
  justify-content: center;
}

#navbar .bb-prev{
	/*float:left;*/
	text-align:center;
	display:block;
	padding:0 0 0 0;
	margin:0 auto 0 auto;
	width:150px;
	height:48px;
	/*padding:5px 15px 5px 15px;*/
	background-color:#E5E5E5;
	border-radius: 10px;
}
#navbar .bb-prev:hover{
	text-align:center;
	display:block;
	padding:0 0 0 0;
	margin:0 auto 0 auto;
	width:150px;
	height:48px;
	background-color:#D9E7ED;
	cursor:pointer;
}

#navbar .bb-reset{
	float:right;
	text-align:center;
	display:block;
	padding:0 0 0 0;
	margin:0 auto 0 auto;
	width:164px;
	height:48px;
	/*padding:5px 15px 5px 15px;*/
	background-color:#E5E5E5;
	border-radius: 10px;
}
#navbar .bb-reset:hover{
	text-align:center;
	display:block;
	padding:0 0 0 0;
	margin:0 auto 0 auto;
	background-color:#D9E7ED;
	cursor:pointer;
}


#navbar .nav-info{
	/*float:left;*/
	width:auto;
	vertical-align:middle;
	/*max-width:800px;*/
}
#navbar .nav-info p{
	height:50px;
	vertical-align:middle;
	padding:5px;
	margin: 0px 0 0 10px;
	word-wrap: break-word;
}
#bb-exit{
	/*float:right;*/
	text-align:center;
	display:block;
	margin:0 auto 0 auto;
	width:150px;
	height:48px;
	/*padding:5px 15px 5px 15px;*/
	background-color:#E5E5E5;
		border-radius: 10px;
}
#bb-exit:hover{
	/*float:right;*/
	text-align:center;
	display:block;
	margin:0 auto 0 auto;
	width:150px;
	height:48px;
	/*padding:5px 15px 5px 15px;*/
	background-color:#D9E7ED;
}
#bb-exit h2.bb-navtext{
	width:150px;	
}
.bb-navtext-reset{
	width:164px !important;
	text-align: center !important;
}

.bb-hidden{
	visibility: hidden;
}

div.kaart-hidden{
	display:none;
}

.bb-inpath{
	-moz-box-shadow: 0px 0px 30px 0px rgba(84, 200, 232,1); /* blauwe glow */
	-webkit-box-shadow: 0px 0px 30px 0px rgba(84, 200, 232,1);
	box-shadow: 0px 0px 30px 0px rgba(84, 200, 232,1);
	border:#FFF 1px solid !important;
}

h2.bb-navtext{
	font-size:20px;
	width:150px;
	height:48px;
	padding:9px 0px;
	/*vertical-align:middle;*/
	margin:0;
	/*text-decoration:underline;*/
}
/* on screens smaller */
@media only screen 
	and (max-width: 800px){
		h2.bb-navtext{
			font-size:14px !important;
			height: 24px;
			text-align: center;
		}
		.bb-navblok {
		 display:block;
			height:40px !important;
			text-align: center!important
	 }
		
}

/*h2.bb-navtext:hover{
	font-size:20px;
	margin:0;
	text-decoration:none;
}*/

h1.bb-title{
	text-align:center;
	font-size: 30px;
    margin-top: 0;
    margin-bottom: 0px;
    color: #fff;
    text-align: center;
	width:100%;
	line-height:40px;
	background-color:#1e9ddf;
	font-weight: 400; 
	display:none;
}

h2 {
    font-size: 13px;
    text-align: center;
    color: rgb(22, 20, 95);
    font-weight: bold;
}

.coronagehad h2{
    font-size: 12px;
    text-align: center;
    color: rgb(22, 20, 95);
    font-weight: bold;
    padding-top: 5px !important;
}

h3 {
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    color: rgb(255, 255, 255);
}
.keuze.keuze-alt h3, .keuze.keuze-alt h4 {
    display: table-cell;
    vertical-align: middle;
}
h4 {
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    color: rgb(255, 255, 255);
	padding-left:2px;
	padding-right:2px;
}
h5 {
    font-size: 8px;
    font-weight: bold;
    text-align: center;
    color: rgb(255, 255, 255);
}

/* witte content */
#start h2, .kaart h2 {
	color:#fff;
}


div {
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}

.target-container{
	position:absolute;
	background-color:white;
	width:200px;
	height:140px;
	border:1px solid #999;
	border-radius: 15px;
	/*display: flex;*/
/*	flex-direction: column;*/
	/*align-items: center; 
	justify-content: center;*/
}

.target-container.tc-long{
	height:240px;
	width:240px;
}
.target-container.tc-very-long{
	height:280px;
	width:240px;
}

.target-container.tc-tall{
	height:240px;
}

.target-container.principes-container{
	border:1px solid #999;
	border:4px solid #E11E27 !important;
}
.target-container.coronagehad-container{
	height:220px;
	width:220px;
	/*border:1px solid #999;*/
	/*border:4px solid #16145F !important;*/
	background-color: rgb(84, 200, 232);
}
/* onzichtbare tussentarget voor pijltje */
.tussentarget {
	position:absolute;
	height:20px;
	width:20px;
	background-color:#999;
	display:block;
	visibility:hidden;
}


.target-container.kaart{
	position:absolute;
	width:135px;
	height:80px;
	border-radius: 0px;
	border:none;
	/*border:1px solid #999;*/
}

.target-container.uitslag{
	width:155px;
	height:120px;
	border-radius: 0px;
	border-bottom-right-radius:15px;
	border:#1e9ddf solid 0.5px;
	background-color: rgba(54, 25, 25, .9);
	background: rgba(255, 255, 255, .9);
	padding-left:5px;
	-moz-box-shadow: 0px 0px 30px 0px rgba(84, 200, 232,1); /* blauwe glow */
	-webkit-box-shadow: 0px 0px 30px 0px rgba(84, 200, 232,1);
	box-shadow: 0px 0px 30px 0px rgba(84, 200, 232,1);
}

.target-content-container{
	position:relative; /* hierdoor wordt vertical centering mogelijk */
	height: 80px;
	/*width:140px;
	height:60px;
	top:40px;
	left:30px;*/
	margin-left:auto;
	margin-right:auto;
	display: table-cell;
    /* vertical-align: middle; */
	/*display: flex;
	flex-direction: column;*/
	width: 200px;
	/*padding:20px 30px 30px 20px;*/
}

.target-content-container.vraag-alt{
	height: 140px;
	width:200px;
}
.target-content-container.principes{
	height: 150px;
}
.target-content-container.coronagehad{
	height: 220px;
	width:220px;
}


.target-content-container.vraag-alt-long{
	height: 220px;
	width:240px;
}

.target-content-container.vraag-alt-very-long{
	height: 260px;
}

.target-content-container.principes ol{
	text-align: left;
}
.principes h2{
	margin-top:-5px !important;
}

.target-content-container.vraag-alt-long ul{
	text-align: left;
}
.target-content-container h2 {
	/*width:140px;*/
	width:85%;
/*	padding-right:20px;*/
	margin:0 auto;
	padding-top: 8px;
}
.kaart .target-content-container{
	position:relative;
	width: 100%;
	height: 60px;
	top: 10px;
	left: 1px;
	vertical-align: middle;
	/*display: flex;
	flex-direction: column;*/
	align-items: center; 
}
.kaart .target-content-container h2{
	width:auto;
	padding:0px 5px;
	margin-top:-10px;
}
#start .target-content-container{
	top: 0px;
	display:table-cell;
	left: 1px;
	    vertical-align: middle;
	/*display: flex;
	flex-direction: column;*/
	align-items: center; 
}



.kaart .button{
	position:absolute;
	width:50%;
	height:20px;
	text-align:center;
}

.uitslag .target-content-container{
	position:relative;
	width: 100%;
	height: 100%;
	top: 1px;
	left: 1px;
	    vertical-align: middle;
	/*display: flex;
	flex-direction: column;*/
	align-items: center; 
}


/* DEZE LATER UIT? 
.kaart:hover {
	cursor:pointer;
}*/

.bb-bt1{
	bottom:0px;
	left:0px;
}
.bb-bt2{
	bottom:0px;
	right:0px;
}
.bb-btKlik {
	width: 100% !important;
	bottom: 3px;
	left: 1px;
	float: left;
	text-align: center;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: pointer;
}
.bb-btKlik h3 {
		color:#FFF;
}

#start {
    position: absolute;
    left: 115px;
    top: 63px;
    height: 80px;
    background-color: rgb(22, 20, 95);
    box-shadow: rgb(84, 200, 232) 0px 0px 8px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(255, 255, 255);
    border-image: initial;
}
#start:hover {
cursor:pointer;
}




#LW {
	position: absolute;
	top: 64px;
	left: 387px;
}

#OW {
	top: 81px;
	left: 701px;
}

#WG1{
	top: 151px;
	left: 701px;
}

#F2F2{
	top: 311px;
	left: 387px;
}

#F2F2N{
	top: 451px;
	left: 115px;
}

#CV3{
	top: 451px;
	left: 701px;
}

#CV3N{
	top: 651px;
	left: 451px;
}

#VP{
	top: 851px;
	left: 51px;
}

#CGH{
	top: 1151px;
	left: 51px;
}

#BN{
	top: 311px;
	left: 1001px;
}

#BNN{
	top: 551px;
	left: 1001px;
}

#BHC{
	top: 451px;
	left: 1301px;
}
#BHCN{
	top: 651px;
	left: 1301px;
}

#BHCN{
	top: 651px;
	left: 1301px;
}

#CVLT{
	top: 551px;
	left: 1601px;
}

#CVLTK{
	top: 751px;
	left: 1601px;
}

#CVLTJ{
	top: 601px;
	left: 2001px;
}

#CGHH{
	top: 701px;
	left: 751px;
}

#CGHHN{
	top: 951px;
	left: 701px;
}

#CGHHJ{
	top: 821px;
	left: 1051px;
}

#CGHHJV{
	top: 1121px;
	left: 1051px;
}

#CGHHJM{
	top: 1121px;
	left: 1451px;
}

#PBMN{
	top: 1521px;
	left: 1151px;
}

#PBMJ{
	top: 1521px;
	left: 1651px;
}
#PBMJN{
	top: 1821px;
	left: 1551px;
}
#PBMJJ{
	top: 1821px;
	left: 2051px;
}





.keuze{
	position:absolute;
	background-color:#fff;
	width:34px;
	height:26px;
	border-radius: 4px;
}

/* alternative for longer answers */
.keuze.keuze-alt {
    position: absolute;
    width: 88px;
    height: 52px;
    display: table;
    border-radius: 4px;
}

.keuze.keuze-alt.text p{
	font-size:10px;
	text-align: center;	
}
.keuze.keuze-alt.smalltext h4{
	font-size:11px;
	text-align: center;	
}
.keuze.keuze-wide {
    position: absolute;
    width: 100%;
    height: 20px;
    bottom: -8px;
    display: table;
    border-radius: 0px 0px 14px 14px;
}
.keuze.keuze-wide-principes {
    height: 12px;
    bottom: 10px;
	width:99.5%;
    display: table;
    border-radius: 0px 0px 11px 11px;
}
.keuze-txt-opnieuw{
	height: 12px;
	width: 197px;
	text-align: center;
	border: none;
	position: relative;
    display: table;
}

.keuze.wide {
	width:100%;
	font-weight:bold;
	text-align: center;	
}
.keuze.wide p{
	color: rgb(84, 200, 232);
    font-weight: bold;
    text-decoration: none;
}
.keuze.wide p:hover{
	color: rgb(22, 20, 95);
	font-weight: bold;
    text-decoration: none;
}


.antwoord{
	top: 60px;
	width: 100%;
}

.antwoord.long{
	font-size:11px;
	text-align: left;
}
.antwoord p{
	font-size:11px;
}

.principes, .coronagehad {
    /*top: 10px;*/
    font-size: 8px;
}
div.bb-hover{
	cursor: pointer; 
	cursor: hand; 
}

.bb-top{
	top:-10px;
	left:80px;
}

.bb-right{
	top:60px;
	right:-15px;
}

.bb-bottom{
	bottom:-10px;
	left:80px;
}

.bb-left{
	top:60px;
	left:10px;
}

/* Alternative styles for questions with long answers */
.bb-alt-left{
	top:78px;
	left:8px;
}

.bb-alt-right{
	top:78px;
	left:104px;
}

.tc-long .bb-alt-left{
	top:164px;
	left:22px;
}

.tc-long .bb-alt-right{
	top:164px;
	left:132px;
}


.bb-groen {
    background-color: rgb(84, 200, 232);
}.bb-groen:hover {
    background-color: rgb(0, 138, 176);
    transition: all 0.2s ease-in-out 0s;
}

.bb-rood{
	background-color:#E11E27;
	/*border:#fff 1px solid;*/
}.bb-rood:hover {
    background: #a0292d;
    transition: all 0.2s ease-in-out 0s;
}

.bb-lichtblauw {
    background-color: rgb(84, 200, 232);
    transition: all 0.2s ease-in-out 0s;
}.bb-lichtblauw:hover {
    background-color: rgb(0, 138, 176);
    transition: all 0.2s ease-in-out 0s;
}
.bb-wide {
    background-color: rgb(22, 20, 95);
    transition: all 0.2s ease-in-out 0s;
}.bb-wide:hover {
    background-color: rgb(84, 200, 232);
    transition: all 0.2s ease-in-out 0s;
}
.bb-opnieuw {
    background-color: rgb(22, 20, 95);
    transition: all 0.2s ease-in-out 0s;
	width: 208px !important;
}
.bb-opnieuw-coronagehad{
	width: 220px !important;bo
}

.bb-blauw{
	background-color:#16145F;
	border:#10325c 1px solid;
}
.bb-blauw h3,.bb-blauw p{
	color:#FFF;
}

/* Styling paths */
.window { z-index:20; }
.jsplumb-connector { z-index:4; }
.jsplumb-endpoint { z-index:5; /*visibility:hidden*/}
.jsplumb-overlay { z-index:6; }
.target-container {z-index:50; }
#navbar {z-index:200; }

svg.active path {
  stroke:#1e9ddf; /*is blauw*/
  stroke-width:3;
}
svg path {
  stroke:#CCC;
  stroke-width:2;
}
svg circle {
	  fill:#CCC;
}

span.red-text{
	color:red;
}

span.span-opnieuw{
	/*text-decoration:underline;*/
	color:#1e9ddf;
	cursor:pointer;
}

a {
	color:#1e9ddf;
	font-weight:bold;
}
/* LINKS */
a {
    color: rgb(84, 200, 232);
    font-weight: bold;
    text-decoration: none;
}
a:hover {
    color: rgb(22, 20, 95);
    text-decoration: none;
}








/* RESPONSIVE NIEUW 2020-07 */

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  /*/*and (-webkit-min-device-pixel-ratio: 2)*/{
	  #viewPortWrapper{
	height: 200px;
	height: 400px !important;
}	
#head {
	/*display:none !important;*/
}
}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  /*/*and (-webkit-min-device-pixel-ratio: 2)*/
  and (orientation: portrait) {
	  #viewPortWrapper{
	height: 200px;
	height: 400px !important;
}	
#head {
	/*display:none !important;*/
}
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  /*/*and (-webkit-min-device-pixel-ratio: 2)*/
  and (orientation: landscape) {
	   #viewPortWrapper{
	height: 200px;
	height: 400px !important;
}	

#head {
	/*display:none !important;*/
}
}

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  /*/*and (-webkit-min-device-pixel-ratio: 2)*/ {
	  #viewPortWrapper{
	top:0px;
	height: 200px;
	height: 400px !important;
}	
#head {
	/*display:none !important;*/
}

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  /*/*and (-webkit-min-device-pixel-ratio: 2)*/
  and (orientation: portrait) {
	  #viewPortWrapper{
		  top:0px;
	height: 220px;
	height: 400px !important;
}	
#head {
	/*display:none !important;*/
}
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  /*/*and (-webkit-min-device-pixel-ratio: 2)*/
  and (orientation: landscape) {
	  #viewPortWrapper{
	top:0px;
	height: 200px !important;
	height: 400px !important;
}	
#head {
	display:none !important;
}
}

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  /*/*and (-webkit-min-device-pixel-ratio: 2)*/ { 
 #viewPortWrapper{
	top:0px;
	height: 300px;
	height: 645px !important;
}	

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  /*/*and (-webkit-min-device-pixel-ratio: 2)*/
  and (orientation: portrait) { 
#viewPortWrapper{
	top:0px;
	height: 300px !important;
	height: 645px !important;
}	
}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  /*/*and (-webkit-min-device-pixel-ratio: 2)*/
  and (orientation: landscape) { 
#viewPortWrapper{
	top:0px;
	height: 250px !important;
	height: 645px !important;
}	
#head {
	display:none !important;
}
}

/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  /*/*and (-webkit-min-device-pixel-ratio: 3)*/ { 
#viewPortWrapper{
	top:0px;
	height: 260px !important;
	height: 645px !important;
}	
#head {
	/*display:none !important;*/
}
}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  /*/*and (-webkit-min-device-pixel-ratio: 3)*/
  and (orientation: portrait) { 
#viewPortWrapper{
	top:0px;
	height: 260px !important;
	height: 645px !important;
}	
#head {
	display:none !important;
}

}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  /*/*and (-webkit-min-device-pixel-ratio: 3)*/
  and (orientation: landscape) { 
#viewPortWrapper{
	top:0px;
	height: 260px !important;
	height: 645px !important;
}	
#head {
	display:none !important;
}
}

/* ----------- Galaxy S3 ----------- */

/* Portrait and Landscape */
@media screen 
  and (min-device-width: 320px) 
  and (max-device-height: 641px) 
  /*and (-webkit-device-pixel-ratio: 2)*/ {
#viewPortWrapper{
	height: 200px;
	height: 620px !important;
}	
#head {
	display:none !important;
}
}

/* Portrait */
@media screen 
  and (min-device-width: 320px) 
  and (max-device-height: 641px) 
  /*and (-webkit-device-pixel-ratio: 2)*/ 
  and (orientation: portrait) {
#viewPortWrapper{
	height: 200px;
	height: 620px !important;
}	
#head {
	display:none !important;
}
}

/* Landscape */
@media screen 
  and (min-device-width: 320px) 
  and (max-device-height: 641px) 
  /*and (-webkit-device-pixel-ratio: 2)*/ 
  and (orientation: landscape) {
#viewPortWrapper{
	height: 200px;
	height: 620px !important;
}	
#head {
	display:none !important;
}
}

/* ----------- Galaxy S4 ----------- */

/* Portrait and Landscape */
@media screen 
  and (min-device-width: 320px) 
  and (max-device-height: 641px) 
    /*and (-webkit-device-pixel-ratio: 3) */ {
#viewPortWrapper{
	height: 200px;
	height: 620px !important;
}	
#head {
	display:none !important;
}
}

/* Portrait */
@media screen 
  and (min-device-width: 320px) 
  and (max-device-height: 641px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {
#viewPortWrapper{
	height: 200px;
	height: 620px !important;
}	
#head {
	display:none !important;
}
}

/* Landscape */
@media screen 
  and (min-device-width: 320px) 
  and (max-device-height: 641px) 
    /*and (-webkit-device-pixel-ratio: 3) */
  and (orientation: landscape) {
#viewPortWrapper{
	height: 200px;
	height: 400px !important;
}	
#head {
	display:none !important;
}
}

/* ----------- Galaxy S5 ----------- */

/* Portrait and Landscape */
@media screen 
  and (min-device-width: 359px) 
  and (max-device-height: 641px) 
  /*and (-webkit-device-pixel-ratio: 3) */ {
#viewPortWrapper{
	height: 200px;
	height: 620px !important;
}	
#head {
	display:none !important;
}
}

/* Portrait */
@media screen 
  and (min-device-width: 359px) 
  and (max-device-height: 641px) 
/*and (-webkit-device-pixel-ratio: 3) */
	and (orientation: portrait) {
#viewPortWrapper{
	height: 200px;
	height: 600px !important;
}	
#head {
	display:none !important;
}
}

/* Landscape */
@media screen 
  and (min-device-width: 359px) 
  and (max-device-height: 641px) 
  /*and (-webkit-device-pixel-ratio: 3) */
  and (orientation: landscape) {
#viewPortWrapper{
	height: 200px;
	height: 600px !important;
}	
#head {
	display:none !important;
}
}


/* TABLETS */
@media only screen 
	and (min-device-width: 641px)
	and (max-device-width: 700px)
  /*and (-webkit-min-device-pixel-ratio: 2)*/ {
	  #viewPortWrapper{
	height: 300px;
	height: 650px !important;
}	
#head {
	display:none !important;
}
}


/* ---- monitor */
@media screen and (min-width: 641px) and (max-width: 800px) {

#viewPortWrapper{
	top:50px;
	height: 645px;
}	
}
@media screen and (min-width: 801px) and (max-width: 1109px) {

#viewPortWrapper{
	top:50px;
	height: 650px;
}	
}

/* NIEUW 0708 Header zichtbaar ook op mobiel */