html, body {background:#000;color:#fff;font-family: 'Roboto', sans-serif;font-weight: 400;font-size:16px;margin:0;padding:0;}
.bg-img {position:fixed;top:0;left:0;width:100%;height:100%;background-image:url(../img/bg-img.webp);background-size:cover;background-position:center;z-index:0;opacity:0.3;}
.nav,.main{position: relative;z-index:1;}
.nav {display:flex;align-items:center;justify-content: center;width:100%;height:50px;background:#000;}
.nav li {display:inline-block;list-style:none;margin: 0 40px;font-weight:300;font-size:16px;text-transform:uppercase;}
.nav li a {color:#fff;text-decoration:none;}
.nav li a.active,.nav li a:hover  {color:#ff5000;}
.mobmenu,.closebtn {display:none;}
.scrollbtn {position:fixed;z-index:100;cursor:pointer;height:60px;width:60px;background:url('../img/scrollbtn.png') center no-repeat;background-size:40%;bottom:0;right:0;}
.scrollbtn.hidden {display:none;}

p {line-height:1.8em;font-weight:300;}

/* headlines */
h2 {font-weight:900;font-size:46px;text-transform:uppercase;letter-spacing:6px;text-align:center;}
hr.line {width: 200px;border:2px solid #fff;}

/* header logo */
.header {width:100%;padding:80px 0;display:flex;justify-content:center;align-items:center;}
.header-inner {max-width:800px;text-transform:uppercase;font-weight:900;line-height:70px;}
.header-1 {font-size:80px;}
.header-2 {font-size:40px;}
.highlight {color:#ff5000;}
.headerblock {position:relative;display:inline-block;width:100px;height:10px;background:#fff;margin-right:10px;top:-18px;}

/* voicedemo */
.voicedemo {padding:25px 20px 60px;background-color:rgba(0,0,0,0.7);text-align:center;}
.demonav {margin-bottom:10px;}
.demonav span {font-size:0.8em;text-transform:uppercase;letter-spacing:2px;padding:5px 10px;cursor:pointer;display:inline-block}
.demonav span:hover {text-decoration:underline;}
.demonav span.active {color:#ff5000;}
.demo {display:inline-grid;width:22%;margin:10px;text-align:left;}
.demo:not(.active) {display:none;}
.cat {font-weight: 900;font-size:14px;text-transform: uppercase;letter-spacing: 6px;position:relative;}
.title {font-weight: 300;font-size: 0.8em;}
audio {width:80%;height:40px;margin:10px auto 0;}
video {width:100%;height:175px;}
.switcher {font-weight:400;letter-spacing:0;position:absolute;right:0;cursor:pointer;top:0;}

a[class^="toggle"] {padding:0 3px}
a[class^="toggle"]:hover, a.active {color:#ff5000}
div[class^="troca"] {display:none;height:175px}
li {font-weight:300;line-height:1.5}

/* bio */
.subnav {font-weight:600;font-size:1.1em}
.subnav span {margin-right:20px;cursor:pointer}
.subnav span:hover {text-decoration:underline;}
.subnav span.active {color:#fff}
.bio {position:relative;display:block;color:#000;min-height:600px;}
.bio-left, .bio-right {display:inline-flex;width:50%;height:100%;position:absolute;top:0;justify-content:center;align-items:center;text-align:left;flex-direction: row}
.bio-left {left:0;background-image:url(../img/peter-van-akkeren-voiceover.webp); background-repeat: no-repeat; background-attachment: fixed;background-size:50% auto;background-position: 0 0;}
.bio-right {right:0;background:rgb(75, 209, 160)}
.bio-txt {margin:0 100px;}
.bio h2 .highlight {color:#fff;}
.subtext {min-height: 220px}

/* prices */
.prices {display: flex;flex-direction: column;padding:80px 10px;background-color:rgba(0,0,0,0.6);}
.prices h2 {margin: 10px 0;}
.prices p {max-width:600px;margin:10px auto;}

/* contact */
.contact {display: flex;flex-direction: column;padding:80px 30px;}
.contact h2 {margin: 10px 0;}
.contact p {max-width:600px;margin:10px auto;}
.container {
    max-width: 800px;
    margin: 10px -200px 20px;
    text-align: left;
    font-family: sans-serif;
	border-top: 1px solid rgb(75, 209, 160);
	border-bottom: 1px solid rgb(75, 209, 160);
	padding: 30px 0;
}
.container.cols-2 {
	display: grid;
 	grid-template-columns: minmax(60%, 1fr) minmax(40%, 1fr);
	grid-template-rows: repeat(1, 1fr);
  }
.cols-3-calc {
	display: grid;
 	grid-template-columns: 160px 10px 70px;
	grid-template-rows: repeat(1, 1fr);
  }
.calc {text-align:right}
.cols-2-7030 {
	display: grid;
 	grid-template-columns: minmax(75%, 1fr) minmax(25%, 1fr);
	grid-template-rows: repeat(1, 1fr);
}
.cols-3-30 {
	display: grid;
 	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(1, 1fr);
  	grid-column-gap: 30px;
  }
.col-item.left {}
.col-item.right {margin-left: 20px;}

.form-group.briefing {width: calc(100% - 25px)}
.calculation {padding: 30px 20px 40px;background:rgba(75, 209, 160, 0.85);color:#fff;line-height:1.5em;margin-top:29px}
.calculation h2 {text-align:left;font-size:1.6em;margin-bottom:20px}
.campagne {height:0px;overflow:hidden;font-size:12px;line-height:1.3em;margin:0 auto 15px !important;color:rgb(75, 209, 160);}

.headsup {padding:30px;font-size:1.2em; text-align:center}

form {
    text-align:left;
	width: 100%;
	max-width: 400px;
	margin: 0 auto;
}
form input, form textarea {width: calc(100% - 22px);min-height:25px;margin:10px 0;font-family: 'Roboto', sans-serif;font-weight: 300;font-size:14px;background:rgba(0,0,0,0.5);border:1px solid #fff;padding:10px;color:#fff}
form .upload input {background:transparent;padding:0;border:none;}
form .upload {margin-top:10px}
form textarea {min-height:90px}
form input[type="submit"] {min-height:40px;font-weight:600;letter-spacing:6px;text-transform:uppercase;background: transparent; border: 1px solid #fff;color:#fff;}
form input[type="submit"]:hover {border: 1px solid rgb(75, 209, 160);background:rgb(75, 209, 160);}

.formgroup.hidden {display:none}

.quote, .apply, input::file-selector-button, .button {
	font-weight: bold;
	background: transparent;
	text-transform: uppercase;letter-spacing: 1px;
	color: rgb(75, 209, 160);
	padding: 0.5em 1em;
	border: 2px solid rgb(75, 209, 160);
	border-radius: 30px;
	font-size:11px;
	margin-right: 10px;
	cursor: pointer;
	text-align:center;
}
.quote:hover, .apply:hover, input::file-selector-button:hover, .button:hover {
	background: rgb(75, 209, 160);
	color:#fff;
}
.quote {margin: 0 auto;display:inline-block}
.button {font-size: 14px;padding: 0.5em 2em;margin-top:10px;text-decoration: none}

.form-control:focus {
    border-color: #000;
    box-shadow: none;
}

label {
    font-weight: 600;
}
.radio input {width:18px;height:18px;accent-color: rgb(75, 209, 160);border-radius:0}
.radio input[value="info"],.radio input[value="spot"],.radio input[value="1 dag"] {margin-top:-10px}
.radio span {margin-left:5px;position:relative;top:-6px;font-size:14px}

input#campaign {width:18px;height:18px;accent-color: rgb(75, 209, 160);display:inline-block;margin-right:5px;position: relative;top:6px;}
input#number {
	position: relative;
    padding: 2px 8px;
    display: inline-block;
    width: 12px;
    text-align: center;
    border: 2px solid rgb(75, 209, 160);
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.error {
    color: red;
    font-weight: 400;
    display: block;
    padding: 6px 0;
    font-size: 14px;
}

.form-control.error {
    border-color: red;
    padding: .375rem .75rem;
} 

.tooltip {
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted #fff;
}

.tooltip .tooltiptext {
	visibility: hidden;
	width: 180px;
	font-size: 14px;
	line-height:1.3em;
	font-weight: 400;
	text-align:left;
	background-color: #000;
	color: rgb(75, 209, 160);
	border-radius: 6px;
	padding: 5px;

  /* Position the tooltip */
	position: absolute;
	z-index: 1;
	top: 22px;
	left:-5px
}
.tooltip:hover .tooltiptext {
	visibility: visible;
}
.g-recaptcha div {margin:0 auto;}

/* footer */
.footer {display: flex;flex-direction: column;padding:80px 10px;background-color:#000;}
.footer p {max-width:600px;margin:10px auto;text-align:center;font-size:12px;}


/* media queries */

@media only screen and (min-width: 700px) and (max-width: 768px){
	.header-inner {max-width:500px}
    .bg-img {background-size: auto 110%;background-position: 0% 180%;}
    .nav li {margin:0 20px}
	.demo {width:30%}
	video {height:185px;}
	div[class^="troca"] {height:185px}
	.bio {min-height:700px;}
    .bio-txt {margin:0 30px;}
	li {font-weight:400;}
}


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

	/* navigatie */
	.mobmenu {display:block;background: url(../img/menu.png) center no-repeat;background-size: 50%;    z-index: 100;position: absolute;top: 0;right: 0;width:80px;height:80px;}
    .closebtn {display:block;position:absolute;top:10px;right:10px;width:40px;height:40px;background:url(../img/closebtn.png) center no-repeat;background-size:60%;}
    .bg-img {background-size: auto 120%;background-position: 15% 170%;}

    .nav.hidden {display:none;}
    .nav{position: fixed;width: 80%;height: 450px;top:80px;left:50%;transform:translateX(-50%);z-index:1000;}
    .nav ul {padding:0;}
    .nav li {display:block;margin:40px 0;font-size:21px;}
	
	/* header */
    .header {padding: 120px 0 80px;}
    .header-inner {line-height:50px;max-width:300px;}
    .header-1 {font-size:50px;}
    .header-2 {font-size:24px;}
    .highlight {color:#ff5000;}
    .headerblock {width:60px;height:7px;top:-11px;}

	/* text */
    h2 {font-size:36px;letter-spacing:5px;}
	p {font-weight:400;}

	/* demo */
	.demonav {margin-bottom:-10px;margin-top:10px}
	.demonav span {padding:10px 10px}
	.demo {display:block;width:100%;margin:0;}
	video {height:260px;margin: 10px 0;}
	div[class^="troca"] {height:260px}

	/* bio */
	.bio-left, .bio-right {position:relative;width:100%;top:unset;left:unset;right:unset;}
    .bio-left {display:flex;background-size:cover;background-attachment: unset;background-position: 50% 20%;height:300px;}
    .bio-right {display:flex;min-height:640px;}
    .bio-txt {margin:0 30px;}
	.subtext {min-height: 310px}


	/* prices */
    .prices {padding:80px 30px}
	
	/* contactform */

	form {text-align:center;}
	form input, form textarea {width: 90%;}

	.container {
		max-width: unset;
		margin: 10px 0 20px;
		text-align: left;
		font-family: sans-serif;
		border-top: 1px solid rgb(75, 209, 160);
		border-bottom: 1px solid rgb(75, 209, 160);
		padding: 30px 0;
	}
	.container.cols-2,.cols-2-7030 {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		grid-template-rows: repeat(2, 1fr);
	  }
	.quote, .apply, input::file-selector-button, .button {font-size:14px}
	.form-group.words {width: calc(100% - 25px)}
	form .words input, form .briefing textarea {width: 100% !important;}
	.apply {display:inline-block;padding:0.5em 2em;}
	.cols-3-30 {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		grid-template-rows: repeat(2, 1fr);
		grid-column-gap: 0;
		margin:25px 0 25px;
 	 }	
	.col-item.right {margin-left: 0;}
	.container.cols-2,.cols-2-7030 {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		grid-template-rows: auto auto;
	  }


	/* footer */
	.footer {padding: 40px 30px;}

}


/* lazyload */
.js-reveal {opacity: 1; -webkit-transition: opacity .7s ease-in, margin-top .7s ease-out;-moz-transition: opacity .7s ease-in, margin-top .7s ease-out;-ms-transition: opacity .7s ease-in, margin-top .7s ease-out;-o-transition: opacity .7s ease-in, margin-top .7s ease-out;transition: opacity .7s ease-in, margin-top .7s ease-out;}
.js-reveal.js-reveal--hidden {opacity: 0; margin-top: 3em; -webkit-transition: opacity .7s ease-out, margin-top .7s ease-in;-moz-transition: opacity .7s ease-out, margin-top .7s ease-in;-ms-transition: opacity .7s ease-out, margin-top .7s ease-in;-o-transition: opacity .7s ease-out, margin-top .7s ease-in;transition: opacity .7s ease-out, margin-top .7s ease-in;}