/*
Theme Name: watdevog
Author: Red Button
Author URI: http://redbutton.nl
Description: Custom theme voor 'Wat de VOG'
Version: 1.0.0
Text Domain: watdevog
*/

/* we do not include _s.css */



@import 'jquery.fullpage.min.css';
@import 'datepicker.min.css';
@import '/wp-content/themes/watdevog/fonts/bebas-neue/stylesheet.css';
@import '/wp-content/themes/watdevog/fonts/fontawesome/font-awesome.min.css';


* {padding: 0; margin: 0;}
*:focus {outline:0;}
a {cursor: pointer!important;}
body {background: black;}
html, body {font-size: 16px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: black;}
.hide {display: none;}
.clearfix {clear:both;}
.btn {height:40px;line-height: 40px;padding:0 15px;border:none;background-color: transparent;font-size: 20px;text-transform: uppercase}
h1, h2, h3 {font-weight: normal;}
p {margin:1rem 0;}

body.slideopen .fp-slidesNav.bottom {display: none;}
body.slideopen #logo_rijksoverheid {display:block;}
body.slideopen	#logo_rijksoverheid_full{display: none;}
.small {    font-size: 0.9rem;}
.btn-menu-toggle {position: absolute; right: 0; top: 0;cursor: pointer;width: 1.5rem;height: 1.5rem;background: white;z-index:999999;padding: 1.05rem;}
.slide.open .btn-menu-toggle  {right: 502px;}
.slide.open .readmore {display: block;}
.slide.result .readmore {display: block;}
.slide.open .readmore .btn-menu-toggle {right: 0px;}
.slide.open .readmore.more-more h1{opacity: 1;}
.slide.open .readmore.more-more .panel {padding-bottom: 0;}
.slide.open .contentholder {display: none;}

#slide_do_check.result .btn-menu-toggle {right:502px!important;}
#slide_do_check.result .contentholder {display:none;}

.btn-menu-toggle span, .btn-menu-toggle span:before, .btn-menu-toggle span:after {cursor: pointer; height: 0.13rem; width: 1.4rem; background: black; position: absolute; display: block; content: '';top: 1.25rem;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.btn-menu-toggle span:before {top: 0.45rem;}
.btn-menu-toggle span:after {top: 0.9rem;}

.btn-menu-toggle.close {background: black;}
.btn-menu-toggle.close span, .btn-menu-toggle.close span:before, .btn-menu-toggle.close span:after {background: white; }
.btn-menu-toggle.close span {background: transparent; right: 1.35rem; top: 1.3rem;}
.btn-menu-toggle.close span:before {top: -0.05rem;
    -ms-transform: rotate(-45deg); /* IE 9 */
    -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
    transform: rotate(-45deg);
    -ms-transform-origin: 100% 0%; /* IE 9 */
    -webkit-transform-origin: 100% 0%; /* Chrome, Safari, Opera */
    transform-origin: 100% 0%;
}
.btn-menu-toggle.close span:after {
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
    -ms-transform-origin: 100% 100%; /* IE 9 */
    -webkit-transform-origin: 100% 100%; /* Chrome, Safari, Opera */
    transform-origin: 100% 100%;
}
/* more-more */
.disclaimer .btn-menu-toggle.close span:before,
.more-more .btn-menu-toggle.close span:before {top: -0.05rem;
    -ms-transform: rotate(-45deg) translate(9%, 100%); /* IE 9 */
    -webkit-transform: rotate(-45deg) translate(9%, 100%); /* Chrome, Safari, Opera */
    transform: rotate(-45deg) translate(9%, 100%);
    -ms-transform-origin: 100% 0%; /* IE 9 */
    -webkit-transform-origin: 100% 0%; /* Chrome, Safari, Opera */
    transform-origin: 100% 0%;
    width: 1rem;
    top: -0.26rem;
}
.disclaimer .btn-menu-toggle.close span:after, 
.more-more .btn-menu-toggle.close span:after {
    -ms-transform: rotate(45deg) translate(30%, 50%); /* IE 9 */
    -webkit-transform: rotate(45deg) translate(30%, 50%); /* Chrome, Safari, Opera */
    transform: rotate(45deg) translate(30%, 50%);
    -ms-transform-origin: 100% 100%; /* IE 9 */
    -webkit-transform-origin: 100% 100%; /* Chrome, Safari, Opera */
    transform-origin: 100% 100%;
    width: 1rem;
    top: 0.8rem;
}
#menu.disclaimer .btn-menu-toggle {right: auto; left: 0;}
.slide.open .readmore.more-more .btn-menu-toggle {right: 442px;}
#disclaimer_overlay {top: 0; left: 0; display: none; position: fixed; height: 100vh; width: 100vw; background: #ffff79; z-index: 99999;}
#info_overlay {top: 0; left: 0; display: none; position: fixed; height: 100vh; width: 100vw; background: #ffff79; z-index: 99999;}
#menu {display: none; position: fixed; height: 100vh; width: 100vw; background: #ffff79; z-index: 99999;}
#menu .menu-holder {max-width: 24rem; margin: 0 auto; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
#menu ul li {list-style: none; display: block; padding-left: 1rem; padding-right: 1rem;}
#menu ul li.active { background-color: black; border: none;}
#menu ul li.active a {color:#ffff79;margin-top: -6px;margin-bottom: -6px}
#menu li:nth-child(1) a {border-top: 0.13rem solid black;}
#menu a {display: block; color: black; font-family: 'BebasNeueRegular'; font-size: 2rem; line-height: 1.5em; text-decoration: none; padding-top: 0.23rem; border-bottom: 0.13rem solid black; text-align: center;-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
#menu a:hover {line-height: 2em;}
#menu .menu-bottom {text-align: center;margin-top:40px;font-size:1.5rem;cursor:pointer;}
#menu .menu-bottom a {display:inline;border:none;padding:0;font-size: inherit;}
#menu .menu-bottom a:hover > span {display: inline-block}
#menu .menu-bottom span{margin:0 10px;text-transform: uppercase;display:none;}
#menu .btn-disclaimer {position: absolute;bottom:20px;text-transform: none;font-size: 0.8rem;left:50%;transform: translateX(-50%);    border-bottom: 0;}
#menu .disclaimer-holder a {font-size: 16px;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: black;display: inline-block;    border: none;text-decoration: underline;line-height: 0;}
#menu .btn-close-menu-overlay {cursor: pointer;}

.sub-section {position: relative;background-position:center center;background-repeat: no-repeat; background-size: cover;} 
.slide {position: relative;background-position:center center;background-repeat: no-repeat; background-size: cover;}
.contentholder {max-width: 24rem; width: 100%; position: absolute; bottom: 5rem; left: 50vw; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);}
.textblock {background: white; margin: 1rem 1rem 0; padding: 0.6rem 0.8rem; border: 0.13rem solid black;}
.textblock li {list-style: none;}
.buttonblock {color: black; text-decoration: none; display: block; background: #ffff79; border: 0.13rem solid black; margin: 1rem; text-align: center; font-family: 'BebasNeueRegular'; font-size: 2rem; line-height: 1.5em; padding-top: 0.23rem;}
.buttonblock i.fa-chevron-right {font-size: 1.5rem;line-height: 45px;vertical-align: top;}
.textblock + .buttonblock {border-top: 0; margin-top: 0;}
.titleblock {text-align: center; padding: 0 1rem; margin: 1rem 1rem 5rem; text-shadow: 0.13rem 0.13rem 0rem #000000; color: white; font-weight: normal;}
.titleblock.large {font-size: 3.3rem;}
.content-title { margin: 1rem -20vw 5rem!important;}

@media only screen and (max-width: 650px) {
	.content-title { margin: 1rem -10vw 5rem!important;}
}

@media only screen and (max-width: 450px) {
	.content-title {margin: 1rem 0rem 5rem !important; }
}


#logo_rijksoverheid {position: fixed; z-index: 2; top: 0; left: 50%; margin-left: -1.3rem; width: 2.6rem;display:none;}
#logo_rijksoverheid_full{position: fixed; z-index: 2; top: -50px; left: 50%;transform: translateX(-50%);width:360px}
#sitelogo {width: 15rem; display: block; margin: -8rem auto; pointer-events: none; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none;-o-user-select: none; user-select: none;margin-top:-100px}


h1,h2,h3 {font-family: 'BebasNeueRegular'; margin: 0; padding: 0; font-size: 2.3rem; line-height: 1.05em;}
h1.lead {display: block;text-align:center;color:white;text-shadow: 2px 2px black; font-size: 2.5rem;}
.fp-slidesNav.bottom {bottom: 11.4rem; }
#fp-nav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li a.active span, .fp-slidesNav ul li:hover a.active span {border-color: #ffff79; background: #ffff79;}
#fp-nav ul li a span, .fp-slidesNav ul li a span {width: 10px!important; height: 10px!important; background: transparent; margin: -6px 0 0 -6px!important; border: 3px solid white;}

.arrow-down {font-size:40px;text-align: center;display: block; color: white;}

/* HOME */
#section_wat-de-vog .contentholder {bottom:2rem;}

/* STORIES */
.readmore {display: none; position: relative;float:right;z-index:2; height:100vh; width:500px; max-width: 100%; background-color:white;border-left:2px solid black}
.readmore h1 {padding:20px;padding-top: 80px;line-height: 40px;font-size: 2.7rem;font-weight: normal}
.inner-story {padding: 0 20px 0; line-height: 20px;}
.inner-story p {margin: 20px 0;}
#section_vog-faqs .inner-story {margin: 0 -20px;}
.scrolldiv {margin-top: 70px; max-height: calc(100vh - 150px); overflow: hidden;}
.scrolldiv-nav a {    padding: 0 13px;
    margin: 0 9px;
    color: black;
    display: inline-block;
    border: 0.13rem solid black;
    font-family: 'BebasNeueRegular';
    line-height: 40px;
    font-size: 1.2rem;
    line-height: 1.5em;
    padding-top: 0.23rem;}
.scroll{float:right;}
.scrollback {opacity: 0; }
.scrolldiv-nav {position: absolute; bottom: 20px; width:100%}
.scrolldiv-nav > * {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */      
}
.wrapper-list li {list-style: none;}

/* VIDEOS */
.fullscreen-video {width:100vw;height:100vh;position: absolute; top:0; overflow: hidden;}
.fullscreen-video .vog-video{ min-width: 100%;min-height: 100%;width: auto;height: 100vh; background-size: cover;left: 50%;position: absolute;-ms-transform: translateX(-50%); /* IE 9 */ -webkit-transform: translateX(-50%); /* Safari */ transform: translateX(-50%);-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
.fullscreen-video .vog-video-p {display: none;}

.fullscreen-video .play-icon {display: none; position: absolute;left:50%;top:50%;transform: translate(-50%,-50%);z-index: 92;cursor: pointer;}
.fullscreen-video.pause .vog-video {opacity: 0.5}

.nav-dash {position: absolute;bottom: 20px;left: 50%;z-index: 2;transform:translateX(-50%);    text-align: center;width: 100%;}
.nav-dash ul {display: inline-block;}
.nav-dash ul li { list-style: none; margin: 0 5px; width: 70px; height: 22px; float: left; position: relative;}
.nav-dash .dash-link {color: #5887f5;top: 0; left: 0; width: 100%; height: 5px; position: absolute; padding: 10px 0; opacity: 1; -webkit-transition: opacity 500ms ease; transition: opacity 500ms ease;box-sizing: content-box;}
.nav-dash .dash { position: relative;z-index: 1;height: 5px; width: 100%;background-color: white;opacity: 0.5}
.nav-dash .dash.active {opacity: 1;}
.nav-dash .dash .dashnav-progress {opacity: 1;position: absolute;z-index: 980; left: 0;top: 0;width: 0px;-webkit-transform-origin: left;-ms-transform-origin: left;transform-origin: left; height: 100%; background: #8825fb; max-width: 100%;}
#section_wat-de-vog .fp-slidesNav.bottom {display: none;}
#section_wat-de-vog .btn-video-info {position: absolute;right:  3.5rem;top: 0;    font-size: 1.2rem;cursor: pointer;width: 1.5rem;height: 1.5rem;background: #ffff79;z-index: 999999;padding: 1.05rem}
#section_wat-de-vog .video.readmore {background-color: #a400ff;color:white;z-index: 99;position: relative;}
.video-container {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*
@media screen and (orientation:portrait) {
	.fullscreen-video .vog-video-p {display: block;}
	.fullscreen-video .vog-video-l {display: none;}
}
*/


/* VOG CHECK */
.vog-check-page .select-style #input_period {border: none;height: 50px;width: 98%;background: transparent;margin-left: 2%;font-size: 1rem;    float: left;line-height: 49px;}
.vog-check-page .select-style #input_number {border: none;height: 50px;width: 15%;background: white;font-size: 1rem;float: left;text-align: center; border-right: 2px solid black;-webkit-appearance: none;-moz-appearance: none;appearance: none; border-radius: 0;}
.vog-check-page .select-style select#input_length {width:84%;}
#result {position: relative;float:right;z-index:2;height:100vh;width: 500px;max-width:100%;background-color:#ffff79;border-left:2px solid black;}
#result h1 {padding:20px;margin-top:60px;}
#result .output-geen, #result .output-wel {padding:0 20px;}
#result ul li {list-style: none;display: block;}
#result .rating {float:right;}
#result .rating span.star {font-family: FontAwesome;font-weight: normal;font-style: normal;display: inline-block;font-size:23px;}
#result .rating span.star:before { content: "\f006"; padding-right: 5px; color: black;}
#result .rating span.star.active:before {content: "\f005";color: black;}
#result .disclaimer {margin-top:20px;padding:20px;} 
#result .close-result {right:57px;}
#result .star-expl {display: none;}
.vog-check-page {display: none;}
.vog-check-page .select-style {padding: 0;margin: 0;border: 2px solid black;width: auto;border-radius: none;overflow: hidden;background-color: #ffff79;background: #ffff79 url("/wp-content/themes/watdevog/img/arrow-down-select.png") no-repeat 97% 25%;margin:0 1rem;border-top:0;}
.vog-check-page .select-style.select-date {background: #ffff79 url("/wp-content/themes/watdevog/img/calender-select.png") no-repeat 92% 23%;}
.vog-check-page .btn-vog-back, .vog-check-page .btn-vog-next, .submit-vogcheck {float: left;width: calc(50% - 1px);text-align: center; font-size: 16px; border-right: 2px solid black; border-top:2px solid black;height: 27px;cursor: pointer;line-height: 27px;}
.vog-check-page .btn-vog-next, .submit-vogcheck {border-right:none;}
.vog-check-page .btn-vog-back i, .vog-check-page .btn-vog-next i, .submit-vogcheck i { line-height: 27px;}
.vog-check-page .select-style select {float:left;width:100%;padding: 0 8px;height:50px;line-height:38px;border: none; box-shadow: none;background-color: transparent;background-image: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;font-size: inherit}
.vog-check-page .select-style select:focus { outline: none;}
#section_de-vog-check .fp-slidesNav.bottom, #section_de-vog-check .fp-controlArrow {display: none;}
.col-sm-6 {width:50%;float:left;}
.btn-info-vog-check {cursor: pointer;}
.vog-info-text  {margin-top: 7px;font-size: 0.8rem;}
.datepicker-container {top:auto !important;left:50% !important;bottom:120px;    transform: translateX(-50%);}

/* FAQ / ACCORDION */
.faq-accordeon.readmore {background: #01ffff;}
.faq-accordeon h1 {padding:20px;margin-top:0px;}
a.accordion {white-space: nowrap; text-overflow: ellipsis; overflow: hidden; background-color: transparent;  color: black; display: block; cursor: pointer;border: none; border-top:2px solid black; font-size:inherit;padding:9px 20px;text-align: left; outline: none; font-weight: bold;}
a.accordion.active, a.accordion:hover { background-color: rgba(255,255,255,0);}
div.panel {padding: 0 20px 20px; display: none; line-height: 20px;}


/* AANVRAGEN */

#section_waar-haal-ik-hem .buttonblock a {display: block; float: left; margin-top: -0.23rem; padding-top: 0.23rem;}
#section_waar-haal-ik-hem .buttonblock a .fa-chevron-right {line-height:50px;}
#section_waar-haal-ik-hem .buttonblock a:first-child {border-right: 2px solid black;}
#section_waar-haal-ik-hem .buttonblock a.active {background: white; position: relative;}
#section_waar-haal-ik-hem .buttonblock a.active:after {content: ""; display: block; width: 100%; height: 2px; background: white; position: absolute;}
#section_waar-haal-ik-hem .textblock div {display: none; min-height: 100px;-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
#section_waar-haal-ik-hem .textblock div.active {display: block;}
/*#section_waar-haal-ik-hem  li:nth-child(2),#section_waar-haal-ik-hem  li:nth-child(3) {display: none;}*/
#section_waar-haal-ik-hem .bullets {display: block;margin: 20px 0 0;text-align: center;}
#section_waar-haal-ik-hem .bullets .bullet {border: 2px solid black;border-radius: 100%; width: 20px;height: 20px; display: inline-block;vertical-align: 20px; margin: 0 5px; font-weight: bold;cursor: pointer;}
#section_waar-haal-ik-hem .bullets .bullet.active {background-color: black;color:white;}
#section_waar-haal-ik-hem ul li {min-height:80px;}

/* NOTIFICATION */
.notification {background-color: #fda57d;padding: 0.6rem 0.8rem 1rem;border-top:0.13rem solid black;position: absolute;width: 100%; bottom: 0;}
.notification .btn-close-notification {position: absolute;right:30px;top:10px;cursor: pointer;-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
.notification .btn-close-notification:hover {transform: rotate(90deg)}

.disclaimer-holder{max-width: 600px;margin: 80px auto; padding: 10px;}   


/* OVERLAY */
.overlay {
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index: 100;
}

.overlay .overlay-bg {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background-color: rgba(0,0,0,0.7);
}

.overlay .overlay-content {
	position:absolute;
	left:50%;
	top:50%;
	width:100%;
	height:400px;
	max-width:740px;
	transform: translate(-50%, -50%);
}

.overlay .overlay-content .overlay-inner-content  {
	width:100%;
	height:100%;
	background-color: transparent;
}

.overlay .overlay-content .fa-remove {
	position: absolute;
    top: -20px;
    right: -20px;
    color: white;
    cursor: pointer;
}

.intrinsic-container {
  position: relative;
  height: 0;
  overflow: hidden;
}
 
/* 16x9 Aspect Ratio */
.intrinsic-container-16x9 {
  padding-bottom: 56.25%;
}
 
/* 4x3 Aspect Ratio */
.intrinsic-container-4x3 {
  padding-bottom: 75%;
}
 
.intrinsic-container iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
.bounce {
    -moz-animation: bounce 2s infinite;
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite;
}

@media (max-width: 960px) {
	#logo_rijksoverheid {display:block;}
	#logo_rijksoverheid_full{display: none;}
	
	.overlay .overlay-content .fa-remove {
	right:10px;
	}
}

@media (max-width: 460px) {
	#menu .menu-bottom {margin-top:20px}
	#menu .btn-disclaimer {bottom: 75px;}
}