@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: #1678b7; background-image: linear-gradient(#203e7c, #1678b7); background-attachment: fixed; font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#fff;}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.opperdiv{width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 2em;}

header {height: 12.6em; background-image: linear-gradient(#fda400, #ff3500); overflow: hidden;}
header .opperdiv{height: 12.6em; background: url(/images/main-banner.png) no-repeat right; overflow: hidden; display:table; width:100%;}
header .logo{ display: table-cell; height: 12.6em;}
header .logo img{height:12.6em;}
header .tabs{height:4.4em; display: table-cell; text-align: right;}
header .tabs a{display: inline-block; position: relative; top: -17px; font-size: 1.4em; font-weight: bold; color: #324693; text-align: center; line-height: 3.2em; text-decoration: none; background-image: linear-gradient(rgba(250,188,68,0.7), rgba(250,62,7,0.5)); border-top-left-radius: 0.3em; border-top-right-radius: 0.3em; margin-left: 0.5em; padding:0 2em; box-shadow: 0px 0px 2px 1px #fff;}

.subheader {
    background: #232d75;
    padding: 1.8em 0;
    margin-bottom: 1.5em;
    color: #fff;
    font-size: 1.2em;
    text-align: center;
}
.subheader .opperdiv{display: table;}
.subheader .opperdiv > div{display:table-cell; vertical-align: middle;}
.subheader .opperdiv > div:nth-of-type(1){text-align: left;}
.subheader .opperdiv > div:nth-of-type(2){text-align: right;}
.subheader input{height: 3em;line-height: 3em; border: 2px solid #c8c8c8; box-sizing: border-box; vertical-align: top; margin-right: 1em;}
.subheader input[type=submit]{line-height: 2em; background-image: linear-gradient(#80bf1b, #54ac13); border-radius:0.5em; color:#fff; padding: 0 3em;}
.seal{position: relative; float: right; text-align: center;}
.seal > span{display: inline-block; white-space: nowrap; height: 50px; vertical-align: top; width:100%; background: #61b215; background-image: linear-gradient(#57ad13, #7fbf1b); padding: 4px 0.6em 0;}
.seal .sealdot{ position: absolute; top:-1.7em; left: 50%; margin-left: -45px;}
.seal .sealdot img {width:100%; height: auto;}
.seal span a{color:#fff; font-size: 11px; text-align: center; text-decoration: none; display: inline-block; margin: 0 1.14em; white-space: nowrap;}
.seal span a img{display: block; margin: 0 auto 0.3em;height: 27px;}
.seal .righticon{float:right;}
.seal span a.righticon{width:55px;margin-left: 48px;}
.seal span a.lefticon{width:55px;margin-right: 48px;}

.opperdiv .boxes{margin-left: -0.75%;  margin-right: -0.75%;}
.box, .profile .boxwrapper{border-radius: 1em; width: 31.8333333%; margin-right: 0.75%; margin-left: 0.75%; margin-bottom: 1.5%; display: table; float: left; background-image: linear-gradient(#ff9000, #f86100); padding: 0.8em; background-size: cover; position:relative;box-shadow: 0 0px 3px 0 rgba(0, 0, 0, 0.5), 0 3px 10px 0 rgba(0, 0, 0, 0.5), inset 0 0 2px #fff;}
/*.box:nth-of-type(3n+3){margin-right: 0;}*/

.box .thumb{display: table-cell; width: 50%; vertical-align: top; position: relative; }
/*.box.online .thumb{height: 20em;}*/
.box .thumb img.thumbimg{object-fit: cover; width: 100%; height: 100%; position: absolute;}
.box .thumb .live{position: absolute; max-width: 100%; top: 0.3em; right: -0.3em; width: 4em;}
.box .thumb .live img { width: 100%;}
.box .bezet_overlay{position: absolute; max-width: 100%; bottom: 1.3em; left: -0.4em; width: 4em;}

.box .text{display: table-cell; width: 50%; vertical-align: top; padding-left: 1em; margin-bottom: 8px; color: #e8e2d9;}
.box .name{color: #374b9e; font-weight: bold; font-size: 1.4em; white-space: nowrap;}
.box .infobullet{border-radius: 1.5em; width: 1.5em; height: 1.5em; display: block; position: absolute; right: 0.3em; top: 0.3em; background: #232d75; color: #fff; text-align: center; font-size: 0.8em; line-height: 1.6em;}
#meerinfo_layover{display:none; position: fixed; background: #232d75; color: #fff; opacity: 0.95; font-size: 1.3em; padding: 3em; border-radius: 1em; width: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%);pointer-events: none;z-index: 1;}
.box .beluisterstem {}
.box .beluisterstem a{background: #e3dcd2; padding: 0.3em 0.7em; display: inline-block; border-radius: 0.3em; text-align: center; margin: 0.5em 0.3em 0.5em 0;}
.box .beluisterstem a img{ display: block;}
.box .luisterbutton .beluisterstop{display: none;}
.box .luisterbutton.stopbutton .beluisterstop{display: block;}
.box .luisterbutton.stopbutton .beluister{display: none;}
.box .text .description{font-size: 1.2em; height: 11em; overflow: auto;word-break: break-word;}
.box .nrs{color: #374b9e; background-color: #e3dcd2; font-size: 1.2em; margin: 0.6em 0 1px; border-radius: 0.3em; max-width: 100%;}
.box .nrs .rate{font-size: 0.7em;}
.box .nrs > div{padding: 0.5em 0.7em; position:relative}

.box.online .nrs > div.offline{display:none;}
.box.offline .nrs > div.offline{color: #b3b3b3 !important;}
.box.offline .nrs > div.premium{display:none;}
.box.offline .nrs > div.credits{display:none;}
.box.offline .nrs > div.offline.high{height:126px;}

.box .nrs > div > div{display:table; width:100%;}
.box .nrs > div > div span{width:50%; display:table-cell}
.box .nrs > div > div span:nth-of-type(2){font-weight:bold;}
.box .nrs > div:nth-of-type(5){background: #f5ede2; color: #828282;}
.box .nrs > div:nth-of-type(6){ color: #828282;}
.bcf{margin-top: 0.5em;}

.profile .boxwrapper{width: 100%; float:none; margin-right: 0; display: block;}
.profile .boxwrapper.top{margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; position: relative;}
.profile .boxwrapper.bottom{background: #f86100; border-top-left-radius: 0; border-top-right-radius: 0;}
.profile .boxwrapper .orangeline{background: #f86100; width: 100%; height: 7px; position: absolute; left: 0; bottom: -2px; z-index: 1;}
.profile .box{width: 100%; float:none; background: none; box-shadow: none; border-radius: 0; margin: 0; padding: 0;}
.profile .box .text{width:100%;padding-left: 0;}
.profile .box .text .description{height:auto;}
.profile .box .nrs > div > div{ width: 50%;}
.specs{ margin: 1em 0; width: 50%;}
.specs div:nth-of-type(1n){ color:#fff; width:25%; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4em;}
.specs div:nth-of-type(2n){ color: #e8e2d9; width:25%; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;line-height: 1.4em;}
/*.pics{margin-top:1em;}*/
.pic {position: relative; margin: 0.5% 0; width:49.5%; float: left; height: 0; padding-top: 30%;}
.pic:nth-of-type(2n+1){margin-right: 0.5%;}
.pic:nth-of-type(2n+2){margin-left: 0.5%;}
.pic img{top: 0; position: absolute; object-fit: contain; width: 100%; height: 100%; background: #232d75;}


@media only screen and (max-width : 1290px) {
	.box{width: 48.5%;}
	/*.box:nth-of-type(3n+3){margin-right: 1.5% !important;}
	.box:nth-of-type(2n+2){margin-right: 0 !important;}*/
}
@media only screen and (max-width : 1023px) {
	header{ height: auto;}
	header .opperdiv{height: auto;}
	header .logo{display: block;height: auto;}
	header .tabs{display: block;}
	header .tabs a{top: 0px;}
}

@media only screen and (max-width : 768px) {
	body{}
	.opperdiv{}
	header{ }
	header .opperdiv{background-position: center;background-size: cover; display: block; }
	header .logo{margin-bottom: 1em;}
	header .logo img{ width:100%; max-width: 558px; margin: 0 auto; display: block; height:auto;}
	header .tabs{text-align: center;}
	header .tabs a{float: none; display: inline-block;}
	
	
	.subheader .opperdiv > div:nth-of-type(1){ display: block; margin-top: 2em;text-align: center;}
	.subheader .opperdiv > div:nth-of-type(2){ display: table-header-group;}
	.subheader .opperdiv > div:nth-of-type(2) .seal{ float: none; margin: 0 auto; max-width: fit-content;}
	.subheader input {width:60%}
	.subheader input[type=submit] {width:30%; padding:0;}

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

	.box{width: 98%; margin-right: 0 !important; margin-bottom: 2em;}
	.box .thumb{height: auto;}
	.box .text .description{height:11em;}
	.box .nrs > div.premium{background-image: url(../images/phone.png); background-repeat: no-repeat; background-size: 1.4em auto; background-position: left 6px center; padding-left: 2.4em;}
	
	.box .infobullet{display: none;}
	
	.profile .box .nrs > div > div{ width: 100%;}

	.specs{ width: 100%;}
	
	.pic {margin: 1% 0; width:100%; float: none; height: auto; padding-top: 0;}
	.pic:nth-of-type(2n+1){margin-right: 0;}
	.pic:nth-of-type(2n+2){margin-left: 0;}
	.pic img{top: 0; position: relative; height: auto; background: none;;}
	
}
@media only screen and (max-width : 768px) and (orientation: landscape) {
	.opperdiv{margin: 0 auto; max-width: 500px;}
}
@media only screen and (max-width : 480px) {
	.box .nrs > div.premium{background-size: 2.1em auto; background-position: left 0.6em center; padding-left: 3.2em;}
	.box .nrs .rate{display: block;}
	.box .text .description{height:14em;}

	/*.seal .sealdot{width: 8em; top: -1.7em;}
	.seal span a{width:50px;}*/
}

.footer{font-size: 1.2em; color: #fff; text-align: center; padding: 2em; background-image: linear-gradient(#f6ba12, #f0990c);margin-top: 1em; }
.footer a{color:#fff; text-decoration: underline;}

.hidden {display:none !important;}
.offline .live, .offline .bezet {display:none;}

.noresult{font-size: 2em; text-align: center; padding: 1em 0 0.7em;}