@charset "utf-8";
/* CSS Document */

body, html {width:100%; height:100%; }
img {border:0px;}
form,table,div,td, body, span, a {margin:0px; padding:0px; box-sizing: border-box;}
body { background-color: #000000; font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#fff; background-image:url(../images/background.jpg); background-size: cover; background-position:center bottom; background-attachment:fixed; background-repeat:no-repeat; padding:0 2em;}

.opperdiv{background-color: rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 20px -4px #fff; width: 100%; max-width: 1200px; margin: 2.6em auto; border-radius: 1.7em; padding:3.8em 3.2em; }

header {height: 13em;}
header .logo{width: calc(100% - 391px);  height: 134px; object-fit: contain;}
h1,h2{text-align: center; font-size: 1.8em; margin-bottom: 1.5em;}
h2{margin-bottom: 0.5em;}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.seal{position: relative; width: 32.34%; float: right; margin-top: 33px; min-width: 367px;}
.seal > span{display: inline-block; height: 49px; vertical-align: top; }
.seal > span:nth-of-type(1){width:15px; background-image: url(../images/seal_left.png); background-size: 101% 100%; background-repeat: no-repeat;}
.seal > span:nth-of-type(2){width:calc(100% - 30px); background-image: url(../images/seal_middle.png); background-size: 100% 100%; background-repeat: repeat-x; padding: 3px 0.6em 0;}
.seal > span:nth-of-type(3){width:15px; background-image: url(../images/seal_right.png); background-size: auto 100%; background-repeat: no-repeat;}
.seal .sealdot{ position: absolute; top:-6em; left: 50%; margin-left: -68px;}
.seal .sealdot img {width:100%; height: auto;}
.seal span a{color:#000000; font-size: 11px; text-align: center; text-decoration: none; display: block; float:left; margin: 0 0.5em; font-weight: bold; white-space: nowrap;}
.seal span a img{display: block; margin: 0 auto 0.3em;}
.seal .righticon{float:right;}

.boxes {display: flex; flex-wrap: wrap; justify-content: center;}
.box{border-radius: 1em; width: 32.333333%; margin-right: 1.5%; margin-bottom: 1.5%; float: left; background-image: url(../images/box.png); background-repeat: no-repeat; background-position: left top;  padding: 0 0.8em 0.8em;background-size: cover; border:1px solid #cc9631; position:relative;}
.box:nth-of-type(3n+3){margin-right: 0;}
.box .name{ text-transform: uppercase; font-size: 1.4em; text-align: center; line-height: 2em; white-space: nowrap;}
.box > .name{display:none;}
.box .name .livebullet{font-size: 2.2em; background-color: #00ff05; float: right; width: 0.3em; height: 0.3em; border-radius: 1em; margin-top: 0.25em; margin-right: 0.3em;}
.box .description{background: #000000; border-radius: 10px; font-size: 12px; margin-bottom: 0.8em; padding: 0.7em; }
.box .description .thumb{display: block; width: 30%; float:left; vertical-align: top; height: 150px; overflow: hidden; }
.box .description .thumb img.thumbimg{object-fit: cover; width: 100%; height: 100%;}
.box .description .thumb .name{/*display: none;*/}
.box .description .text{display: block; width: 70%; float:left; vertical-align: top; padding-left: 1em; height: 120px; margin-bottom: 8px; overflow: auto;}
.box .description .beluisterstem {display: block; width: 70%; float:left; vertical-align: top; padding-left: 1em;}
.box .description .beluisterstem img{ vertical-align:middle;}
.box .description .belstem {display: none;}
.box .description .luisterbutton .beluisterstop{display: none;}
.box .description .luisterbutton.stopbutton .beluisterstop{display: inline-block;}
.box .description .luisterbutton.stopbutton .beluister{display: none;}

.box .call{/*background: #000000;*/ border-radius: 10px; font-size: 14px; padding: 0.7em;}

.box .call > span:nth-of-type(1){ text-align: center;}
.box .call > span:nth-of-type(2){ padding: 0 10px; border-right:solid #fff 1px; vertical-align: middle;}
.box .call > span:nth-of-type(3){ padding: 0 10px; vertical-align: middle;}
.box .call > span:nth-of-type(4){ text-align: center;}

.box .call img{vertical-align:-0.6em; margin: 0 5px;}
.box .call img.flag{width:28px; vertical-align: -0.4em;margin: 0 0 0px 5px;}

.box .call > span > a{text-decoration: none; color: #fff; display: block; text-align: center; white-space: nowrap;}
.box .call > span:nth-of-type(1) > a:nth-of-type(1), .box .call > span:nth-of-type(4) > a:nth-of-type(1){ margin-bottom: 7px;}
.box .call > span > a:nth-of-type(2){}
/*.box .call > span > a span:nth-of-type(1){font-size: 17px;}*/
.box .call > span > a span{
	font-size: 21px;
    font-weight: bold;
}
.box .call > span > a:nth-of-type(2) span{
	font-size:13px;
}
.box .call > span > a span.rate{
	font-size: 11px;
	opacity:0.5;
	/*display: block;*/
}
.box .call > span > a span:nth-of-type(3){font-size: 11px; color: #8d8d8d; float:right; line-height: 16px; padding-right: 15px;}

.bezet_overlay { position: absolute; top: 0; right: 0; display: none; pointer-events: none; z-index: 2;}


	.box{background: none; border: none; border-radius: 0; padding: 0; margin-bottom: 2em;}
	/*.box .name{background: #7b0083; line-height: 25px;}*/
	.box > .name{display:none;}
	.box .description{border-radius: 0; padding: 0; display: block; margin: 0;}
	.box .description .thumb{width: 100%; height: 0; padding-top: 75%; position: relative;}
	.box .description .thumb img.thumbimg{position: absolute; top: 0; object-fit: cover; width: 100%; height: 100%;}
	.box .description .thumb .name{/*display: none;*/ position: absolute; right:1em; top:0.6em; color:#fff; font-size: 14px; text-transform: uppercase; font-weight: bold; text-shadow: 1px 1px 1px #000;}
	.box .description .thumb .name span {font-size: 2.2em; vertical-align: -0.18em;color: #00ff05;}
	.box .description .text{display: none;}
	.box .description .beluisterstem{display: none;}
	.box .description .belstem {
		width: 12.5em;
		height: 3em;
		display: inline-block;
		text-align: center;
		margin-top: 0.8em;
		margin-right: 0.5em;
		position: absolute;
		bottom: 1em;
		left: 50%;
		background: rgba(0, 0, 0, .5);
		color: #fff;
		font-size: 1.2em;
		line-height: 3em;
		margin-left: -6.25em;
	}
	.box .description .belstem img {vertical-align: middle;}
	.box .call{border-radius: 0; display: table; width:100%; position: absolute; bottom: 0;}
	.box .call > span {display: table-cell; vertical-align: top;}
	.box .call > span.loggedin > a > span:nth-of-type(2){}
	.box .call > span.loggedin > a > span:nth-of-type(2) > span{ padding: 0;}
	/*.box .call > span > a span:nth-of-type(2){display:none;}
	.box .call > span > a span:nth-of-type(3){display:none;}
	.box .call img.callimg{width:26px; margin: 0 3px 0 0;}
	.box .call img.flag{ width:38px; margin: 0; display: inline-block;}*/

@media only screen and (max-width : 1180px) {
	.box{width: 49.25%;}
	.box:nth-of-type(3n+3){margin-right: 1.5% !important;}
	.box:nth-of-type(2n+2){margin-right: 0 !important;}
	.box .call > span > a > span:nth-of-type(1) > span:nth-of-type(2){ width:30%;}
	.box .call > span > a > span:nth-of-type(2) > span:nth-of-type(2){ width:30%;}
	.box .call > span.loggedin > a > span:nth-of-type(2) > span{text-align: center;}
}
@media only screen and (max-width : 1023px) {
	body{background: #000; padding: 0em;}
	.opperdiv{background: transparent; box-shadow: none; margin: 0; padding: 0; border-radius: 0;}
	header{height:auto;padding: 2em;}
	header .logo{ width:100%; max-width: 100%; margin: 0 auto; display: block; height:auto;}
	.seal{width: 100%; float: none; margin-top: 3em; min-width: auto;}
	.seal span a{width: 50px; margin: 0;}
	.seal .sealdot{left: 2em; margin-left: 0; width: 10em; top: -2.7em;}
	/*.seal a{float: right;}*/
	.seal .righticon, .seal .lefticon{float:right;}

	h1, h2{display: none;}
	
	.boxes{margin-top: 5em;}
	.box{width: 100%; margin-right: 0 !important;}
	/*.box{width: 100%; margin-right: 0 !important; background: none; border: none; border-radius: 0; padding: 0; margin-bottom: 2em;}
	.box .name{display: none;}
	.box .description{border-radius: 0; padding: 0; display: block; margin: 0;}
	.box .description .thumb{width: 100%; height: 0; padding-top: 62%; position: relative;}
	.box .description .thumb img.thumbimg{position: absolute; top: 0; object-fit: cover; width: 100%; height: 100%;}
	.box .description .thumb .name{display: block; position: absolute; right:1em; top:0.6em; color:#fff; font-size: 14px; text-transform: uppercase; font-weight: bold; text-shadow: 1px 1px 1px #000;}
	.box .description .thumb .name span {font-size: 2.2em; vertical-align: -0.18em;color: #00ff05;}
	.box .description .text{display: none;}
	.box .description .beluisterstem{display: none;}
	.box .description .belstem {
		width: 12.5em;
		height: 3em;
		display: inline-block;
		text-align: center;
		margin-top: 0.8em;
		margin-right: 0.5em;
		position: absolute;
		bottom: 1em;
		left: 50%;
		background: rgba(0, 0, 0, .5);
		color: #fff;
		font-size: 1.2em;
		line-height: 3em;
		margin-left: -6.25em;
	}
	.box .description .belstem img {vertical-align: middle;}
	.box .call{border-radius: 0; padding: 0;}
	.box .call > span > a{ background: #cc9631; width:50%; float:left;text-align: center;line-height: 5.2em; font-size: 11px;}
	.box .call > span > a:first-of-type{border-bottom: none; border-right: 1px solid #fff;}
	.box .call > span > a span:nth-of-type(1){font-size: 19px;}
	.box .call > span > a span:nth-of-type(2){display:none;}
	.box .call > span > a span:nth-of-type(3){display:none;}
	.box .call img.callimg{width:26px; margin: 0 3px;}
	.box .call img.flag{vertical-align: -0.3em;width:26px; margin: 0 3px;}*/
	
	.box .call > span > a > span:nth-of-type(1) > span:nth-of-type(1){ text-align:center; padding: 0;}
	.box .call > span > a > span:nth-of-type(1) > span:nth-of-type(1) img.flag{ display:inline-block; margin-left: 3px;}
	/*.box .call > span > a > span:nth-of-type(1) > span:nth-of-type(2){display: none;}*/
	.box .call > span > a > span:nth-of-type(2) {/*display: none;*/ line-height: 1.2em; padding-bottom: 2em;}

	.box > .name{display:none;}
	.box .description .thumb .name{display: block; background: none; line-height: inherit;}
	.box .call > span > a{/*line-height: 5.2em; padding: 0px;*/}
	/*.box .call > span > a span:nth-of-type(2){display:none;}*/
	.box .call > span > a span:nth-of-type(3){display:none;}
	.box .call > span > a > span:nth-of-type(1) > span:nth-of-type(1) > span{text-transform: uppercase;}
	.bezet_overlay img{width: 17em;}
	
}
@media only screen and (max-width : 768px) and (orientation: landscape) {
	.opperdiv{margin: 0 auto; max-width: 500px;}
}
@media only screen and (max-width : 480px) { /* Henno */
	.seal .sealdot{width: 8em; top: -1.7em;}
}
@media only screen and (max-width : 354px) { /* Henno */
	header{padding: 2em 0;}
	.box .call > span:nth-of-type(3) > a{font-size: 15px;}
	.box .call > span > a span.nr{font-size: 17px;}
	.box .call > span:nth-of-type(2) > a{height: 3.7em;}
	.seal span a{width:50px;}
	.boxes { margin-top: 3em;}
	.box .call > span > a > span:nth-of-type(1) > span:nth-of-type(1) > span, .box .call > span > a > span:nth-of-type(2) > span:nth-of-type(1) > span{font-size: 17px;}
	.box .call img.callimg{ margin: 0; display: inline-block;}
	.box .call img.flag{margin-right: 0;}
}


.numbers {display: none; margin-top: 2em;}
.numbers a{display:block; color: #fff; text-decoration: none; font-size: 16px; text-align: center; ;line-height: 2em;}
.numbers a img{vertical-align: middle; margin-right: 0.4em;}
.tarief{font-size: 13px; color: #8d8d8d;text-align: center; display: block; padding-bottom: 0.5em;}

.links{text-align: center;}
.links h2{display: inline-block; margin-bottom: 0;}
.links a{font-size: 14px; color: #fff; text-decoration: none; margin: 0 7px;}

.disclaimer{font-size: 12px; color: #fff; text-align: center; padding: 40px 0 0; }
.disclaimer a{color:#cc9631; text-decoration: underline;}

@media only screen and (max-width : 768px) {
	.numbers {display: block;}
	/*.links {display: none;}*/
	.links h2{display: block; margin-bottom: 0;}
	.disclaimer{padding: 40px 0 40px; }
}

.hidden {display:none !important;}
@media only screen and (max-width : 365px) {
	.opperdiv.new.site_templates .p_block3_slide_total{font-size: 1.2em;}
}

.beluisterstem.off {visibility: hidden;}


/* disclaimer 18 plus */
.overlay.disclaimer18plus{
	width: 100%;
	height: 100%;
	z-index: 999999;
	position: fixed;
	left: 0;
	top: 0;
	background-color:rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(6px);
	color: #000;
}
.overlay.disclaimer18plus > div{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);			
	width:100%;
	max-width:650px;
	border:5px solid #cc9631;
	border-radius: 20px;
	font-size: 13px;
	line-height: 18px;
	padding: 50px 60px 50px;
	box-sizing: border-box;
	background: url(/images/disclaimer.png) no-repeat left bottom #fff;
	background-size: contain;
}
.overlay.disclaimer18plus > div .txt { width: 60%; float: right;}
.overlay.disclaimer18plus > div img {width: 100%;  }
.overlay.disclaimer18plus > div p{text-align: justify; margin: 30px 0 40px;}
.overlay.disclaimer18plus > div p a{color: #000;}
.overlay.disclaimer18plus > div a.btn{ height: 44px; text-align: center; line-height: 44px; font-weight: bold; color: #fff; display: inline-block; border-radius: 6px; font-size:16px; text-decoration:none;}
.overlay.disclaimer18plus > div a.btn.exit{ background: #343434; width: 38%;}
.overlay.disclaimer18plus > div a.btn.ok{ background: #008f03; width: 58%; float: right;}

@media only screen and (max-width : 768px) {
	.overlay.disclaimer18plus > div{ padding: 0; width: 90%; overflow: hidden; background: url(/images/disclaimer_mob.png) no-repeat left bottom #fff; background-size: cover;}
	.overlay.disclaimer18plus > div .txt{float: none; width:100%; background-color: rgba(240, 240, 240, 0.6); padding: 25px 20px 20px; box-sizing: border-box;}
	.overlay.disclaimer18plus > div p{margin: 90px 0 40px;}
}

@media only screen and (max-width : 768px) and (orientation: landscape){
	.overlay.disclaimer18plus > div {background-size: contain;}
	.overlay.disclaimer18plus > div .txt{padding: 20px 20px 20px;}
	.overlay.disclaimer18plus > div p{margin: 70px 0 40px;}
	.overlay.disclaimer18plus > div img{max-width: 100%; width: auto; margin: 10px 0 0 0;}
}