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 {
    font-family: Arial,Helvetica,sans-serif;
	font-family: 'PT Sans', sans-serif;
    font-weight: normal;
    font-style: normal;
    color: #222222;
    text-rendering: optimizeLegibility;
    margin-top: 0.2rem;
    margin-bottom: 0.5rem;
    line-height: 1.2;
	text-align:center;
}

.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: 400px;
}	


#navbar .nav-info p{
	font-size:11px !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:0;
	margin: 0px 0 0 10px;
	word-wrap: break-word;
	font-size:14px;
}
#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:16px !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;
}

#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;
}

#navbar .nav-info{
	width:auto;
	width:60%;
}
#navbar .nav-info p{
	padding:0;
	margin: 0px 0 0 10px;
	word-wrap: break-word;
	font-size:14px !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%;
}

#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 .nav-info{
	/*float:left;*/
	width:auto;
	vertical-align:middle;
	/*max-width:800px;*/
}
#navbar .nav-info p{
	height:50px;
	vertical-align:middle;
	padding:0;
	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-hidden{
	visibility: hidden;
}

div.kaart-hidden{
	display:none;
}

.bb-inpath{
	-webkit-box-shadow: 0px 0px 30px 0px rgba(24, 155, 238, 1);
	-moz-box-shadow:    0px 0px 30px 0px rgba(24, 155, 238, 1);
	box-shadow:         0px 0px 30px 0px rgba(24, 155, 238, 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;*/
}
/*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:15px;
	text-align:center;
}

h3 {
	font-size:14px;
	font-weight:bold;
	text-align:center;
	color:#515151;
}

/* 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;
}

/* 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: 0 0 5px #bdd6e0; /* blauwe glow */
	-webkit-box-shadow: 0 0 5px #bdd6e0;
	box-shadow: 0px 0px 5px #bdd6e0;
}

.target-content-container{
	position:relative; /* hierdoor wordt vertical centering mogelijk */
	height: 60px;
	/*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;*/
	align-items: center; 
	width: 100%;
	/*padding:20px 30px 30px 20px;*/
}
.target-content-container h2 {
	/*width:140px;*/
	width:80%;
/*	padding-right:20px;*/
	margin:0 auto;
}
.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: 20px;
	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: #1e9ddf;
	border: #fff 1px solid;
	-moz-box-shadow: 0 0 8px #2BC3F9; /* blauwe glow */
	-webkit-box-shadow: 0 0 8px #2BC3F9;
	box-shadow: 0px 0px 8px #2BC3F9;
}
#start:hover {
cursor:pointer;
}




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

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

#OW2 {
	top: 20px;
	left: 40px;
}


#BiS {
	left: 152px;
	top: 270px;
}

#HW {
	left: 448px;
	top: 270px;
}

#HB {
	left: 739px;
	top: 270px;
}

#BuS {
	left: 152px;
	top: 457px;
}

#K1{
	left: 23px;
	top: 671px;
	background-color: #DA0812;
}
#U1 {
	left: 13px;
	top: 651px;
}

#K2{
	left: 210px;
	top: 671px;
	background-color: #51AE32;
}
#U2 {
	left: 200px;
	top: 651px;
}

#K3{
	left: 412px;
	top: 671px;
	background-color: #82358B;
}
#U3 {
	left: 402px;
	top: 651px;
}

#K4{
	left: 604px;
	top: 671px;
	background-color: #009EE1;
}
#U4 {
	left: 594px;
	top: 651px;
}

#K5{
	left: 789px;
	top: 672px;
	background-color: #FDC300;
}
#U5 {
	left: 779px;
	top: 651px;
}

#K6{
	left: 969px;
	top: 672px;
	background-color: #EA4E95;
}
#U6 {
	left: 959px;
	top: 651px;
}
.keuze{
	position:absolute;
	background-color:#fff;
	width:34px;
	height:26px;
}

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;
}

.bb-groen{
	background-color:#D7E6C6;
	border:#B6D69A 1px solid;
}

.bb-rood{
	background-color:#F6C2AD;
	border:#EE9678 1px solid;
}


/* 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.span-opnieuw{
	/*text-decoration:underline;*/
	color:#1e9ddf;
	cursor:pointer;
}

a {
	color:#1e9ddf;
	font-weight:bold;
}


/* ----------- 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;
}	
#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;
}	
#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;
}	

#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;
}	
#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;
}	
#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;
}	
#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;
}	

}

/* 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;
}	
}

/* 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;
}	
#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;
}	
#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;
}	
#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;
}	
#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;
}	
#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;
}	
#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;
}	
#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: 220px;
}	
#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: 220px;
}	
#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: 220px;
}	
#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: 220px;
}	
#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: 220px;
}	
#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: 220px;
}	
#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;
}	
#head {
	display:none !important;
}
}


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

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

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