/*
Theme Name: Go Online
Theme URI: http://www.goonline.nl
Description: Go Online 
Author: Go Online
Author URI: http://www.goonline.nl
Version: 1.0
*/

:root {
	--bruin: #393939;
	--geel: #FFD900;
	--blauw: #2D78D0;
	--wit: #ffffff;
	--zwart: #000000;
	--grijs: #F0EEEF;
	--block-margin: 100px;
}

@font-face {
	font-display: swap;
  font-family: 'BalooBhai Bold';
  font-style: normal;
  font-weight: 800;
  src: url("css/fonts/BalooBhai2-Bold.ttf");
}

@font-face {
	font-display: swap;
  font-family: 'BalooBhai ExtraBold';
  font-style: normal;
  font-weight: 900;
  src: url("css/fonts/BalooBhai2-ExtraBold.ttf");
}

@font-face {
	font-display: swap;
  font-family: 'Roboto Light';
  font-style: normal;
  font-weight: 300;
  src: url("css/fonts/Roboto-Light.ttf");
}

@font-face {
	font-display: swap;
  font-family: 'Roboto Regular';
  font-style: normal;
  font-weight: 400;
  src: url("css/fonts/Roboto-Regular.ttf");
}

/* == KEYFRAMES == */

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translate3d(0, 100%, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes fadeInBottom {
    from {
      opacity: 0;
      transform: translate3d(0, -100%, 0);
    }
  
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
}

.fadeInUp.animated {
	animation-name: fadeInUp;
	animation-duration: 1.5s;
}


.fadeInBottom.animated {
	animation-name: fadeInBottom;
	animation-duration: 1.5s;
}

/** MAIN **/

#loadOverlay {
	display: none;
}

*{
	box-sizing: border-box;
}

html, body {
	padding: 0;
	margin: 0;
	overflow-x: clip;
	font-family: 'Roboto Light', sans-serif;
	font-weight:400;
	font-size:16px;
	color:#000;
}

.container-fluid{
	width: 90%;
	position: relative;
	z-index:1;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'BalooBhai ExtraBold', sans-serif;
	font-weight:900;
}

ul {
	list-style-type:none;
	padding-left:0;
	margin:0;
}

.valign {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.menu-responsive, .bottom-bar, .orientation-notice, .responsive-mobiel {
	display: none;
}

figure {
	margin:0;
}

.sectie-titel {
	font-size: 48px;
	color: #393939;
	line-height: 45px;
	position: relative;
	margin-bottom:30px;
}

.sectie-titel.uppercase {
	text-transform: uppercase;
}

.sectie-titel span {
	position: relative;
}

.sectie-titel span:before {
	content: '';
	background-color: #FFD900;
	width: 105%;
	height: 14px;
	display: inline-block;
	position: absolute;
	bottom: 16px;
	left: -6px;
	z-index: -1;
}

.content {
	line-height: 1.75;
	font-size: 16px;
}

.content a {
	color:#000;
	font-weight:800;
	font-family:'JosefinSans Bold', sans-serif;
}

p {
	margin:0;
}

.mobiel {
	display: none;
}

img.cover {
	object-fit:cover;
	object-position: center center;
	height:100%; width:100%;
}

img.contain {
	object-fit:contain;
	object-position: center center;
	height:100%; width:100%;
}

/* == BUTTONS == */

a.button-blauw {
	font-family: "BalooBhai Bold", Sans-serif;
	font-size: 18px;
	text-transform: uppercase;
	text-shadow: -100px -100px 0px rgba(0, 0, 0, 0);
	background-color: #2D78D0;
	color:#fff;
	padding:15px 22px !important;
}

a.button-blauw:hover {
	text-decoration: none;
	color:#fff;
}

a.ghost-button {
	background-color: transparent;
	border: #393939 solid 2px;
	color:#393939;
	border-radius: 0;
	font-family: 'BalooBhai Bold', sans-serif;
	font-size: 18px;
	padding: 15px 20px;
	text-transform: uppercase;
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

a.ghost-button:hover {
	color:#393939;
	text-decoration: none;
}

a.ghost-button-wit {
	background-color: transparent;
	border: #fff solid 2px;
	color:#fff;
	border-radius: 0;
	font-family: 'BalooBhai Bold', sans-serif;
	font-size: 18px;
	padding: 15px 20px 10px 20px;
	text-transform: uppercase;
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

a.ghost-button-wit:hover {
	color:#393939;
	background: #fff;
	text-decoration: none;
}

a.button-geel {
	position: relative;
	font-family: "BalooBhai Bold", Sans-serif;
	font-size: 18px;
	text-transform: uppercase;
	text-shadow: -100px -100px 0px rgba(0, 0, 0, 0);
	background-color: #FFD900;
	color:#393939;
	padding: 15px 20px 10px 20px!important;
	border: 2px solid #FFD900;
}

a.button-geel:before {
	content: '';
	position: absolute;
	left: -15px;
	height: 125%;
	bottom: -12%;
	width: 30px;
	background: rgba(0, 0, 0, 0.3);
}


a.button-wit {
	position: relative;
	font-family: "BalooBhai Bold", Sans-serif;
	font-size: 18px;
	text-transform: uppercase;
	text-shadow: -100px -100px 0px rgba(0, 0, 0, 0);
	background-color: #ffffff;
	color:#000000;
	padding: 15px 20px 10px 20px!important;
	border: 2px solid #ffffff;
}


a.button-bruin {
	position: relative;
	font-family: "BalooBhai Bold", Sans-serif;
	font-size: 18px;
	text-transform: uppercase;
	text-shadow: -100px -100px 0px rgba(0, 0, 0, 0);
	background-color: #393939;
	color:#ffffff;
	padding: 15px 20px 10px 20px!important;
}

/* TOPBALK */

.placeholder {
	display: none;
	/*height:120px;*/
	width:100vw;
}

.topbalk {
	padding: 10px 0;
	transition: all 150ms ease-in-out;
    -moz-transition: all 150ms ease-in-out;
    -webkit-transition: all 150ms ease-in-out;
}

.topbalk.scroll {
	width:100vw;
	background:#fff;
	position: fixed;
	top:0;
	left:0;
	z-index:9999;
}

.topbalk ul li{
	display: inline-block;
	margin-left: 20px;
}

.topbalk nav ul li a {
	font-family: 'BalooBhai Bold', sans-serif;
	color: #000;
}

.topbalk figure.logo {
	width:100%;
	height:100px;
}

.topbalk figure.logo img {
	width:100%;
	height:100%;
	object-fit: contain;
	object-position: left;
}

.topbalk .contactgegevens a {
	color: #393939;
	font-family: 'BalooBhai Bold', sans-serif;
	padding-left: 10px;
	margin-right:20px;
	font-size: 12px;
}

.topbalk .contactgegevens li:last-child a {
	margin-right:0;
}

.topbalk .contactgegevens img {
	height:20px;
	width:auto;
}

.topbalk .container-fluid {
	width:90%;
}

.topbalk li.active a span {
	position: relative;
}

.topbalk li.active a span:after {
	content: '';
	background-color: #FFD900;
	width: 105%;
	height: 10px;
	display: inline-block;
	position: absolute;
	top: 13px;
	left: 0;
	z-index: -1;
}

.topbalk .menubalk {
	margin-top:10px;
}

.menu-header-container {
	width:auto;
	display: inline-block;
}

.topbalk .menubalk ul {
	display: inline-block;
}

/* == HEADER (Nieuw) == */

.header-nieuw {
	position: relative;
	background:#393939;
	color:#fff;
}

.header-nieuw h1 {
	position: relative;
	font-size: 60px;
	text-transform: uppercase;
	margin-bottom: 0;
	z-index: 2;
}

.header-nieuw h1:before {
	content: '';
	background-color: #FFD900;
	width: 95%;
	height: 18px;
	display: inline-block;
	position: absolute;
	bottom: 16px;
	left: -6px;
	z-index: -1;
}

.header-nieuw h2 {
	text-transform: uppercase;
}

.header-nieuw .video {
	width:100%;
}

.header-nieuw .header-afbeelding {
	height:600px;
	padding:50px 0px;
	position: relative;
	width:100%;
	z-index:99;
}

.header-nieuw .content-container {
	width: 80%;
	margin: 0 auto;
}

.header-nieuw .content {
	margin-top: 20px;
}

.header-nieuw .button-container {
	margin-top: 50px;
}

.header-nieuw .continenten {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.header-nieuw .continenten img {
	object-fit: cover;
	object-position: center left;
	height: 100%;
	width: 100%;
	opacity: 0.15;
}

.header-nieuw .button-container .button {
	display: inline-block;
}

.header-nieuw .button-container .button {
	margin: 17px 0px;
}

.header-nieuw .button-container .button:first-child {
	margin-right: 20px;
}

.header-nieuw figure.video-thumbnail {
	position: relative;
	width: 75%;
	margin-left: 10%;
	height: 100%;
	margin-top: 100px;
	margin-bottom: 170px;
	z-index: 2;
	cursor: pointer;
}

.header-nieuw figure.video-thumbnail img {
	position: relative;
	z-index: 2;
	object-fit: cover;
	object-position: center center;
	height: 100%;
	width: 100%;
}

.header-nieuw figure.video-thumbnail .overlay {
	position: absolute;
	top: 15px;
	right: 15px;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.2);
	z-index: 1;
}

.header-nieuw figure.video-thumbnail .play-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); 
	z-index: 3;
	text-transform: uppercase;
	font-family:'BalooBhai Bold', sans-serif;
	font-size: 22px;
}

.header-nieuw figure.video-thumbnail .play-button i {
	font-size: 50px;
	margin-bottom: 15px;
}

.header-nieuw figure iframe {
	position: relative;
	object-fit: contain;
	object-position: center center;
	height: 500px;
	width: 100%;
	z-index: 2;
}

.header-nieuw .pattern-blok {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: 40%;
}

.pattern-blok img {
	object-fit: cover;
	object-position: center center;
	height: 100%;
	width: 100%;
}

.pattern-blok .overlay {
	background: rgba(255, 217, 0, 0.5);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.header-nieuw .muis-scroll {
	position: absolute;
	bottom: 30px;
	margin-left: 50%;
	margin-right: 50%;
}

/* == HEADER == */

header {
	background:#393939;
	color:#fff;
}

.header-content {
	width:80%;
	margin:0 auto;
	padding: 150px 0px;
}

.header-content h1 {
	text-transform: uppercase;
	font-size: 57px;
	color: #fff;
	line-height: 55px;
	position: relative;
	z-index: 2;
}

.header-content h1 span {
	position: relative;
}

.header-content h1 span:before {
	content: '';
	background-color: #D7B703;
	width: 106%;
	height: 30px;
	display: block;
	position: absolute;
	left: -8px;
	bottom: 20px;
	z-index: -1;
}

.header-content h1 strong {
	position: relative;
	display: inline-block;
}

.header-content h1 strong:before {
	content: '';
	background-color: #D7B703;
	width: 106%;
	height: 30px;
	display: block;
	position: absolute;
	left: -8px;
	bottom: 20px;
	z-index: -1;
}

header ul li {
	display: inline-block;
	margin:0px 10px;
}

header ul li:first-child {
	margin-left:0;
}

header ul li.usp-rondje {
	height:5px;
	width:5px;
	border-radius:100%;
	background:#D7B703;
}

header ul li.usp-tekst {
	font-size: 20px;
	line-height: 1.4;
}

header ul li:last-child {
	display: none;
}

.header-carousel, .header-carousel figure, .header-carousel .owl-item, .header-carousel .owl-stage, .header-carousel .owl-stage-outer {
	width:100%;
	height:100%!important;
}

/* == TEKSTVAK MET AFBEELDING == */

.tekstvak-met-afbeelding .content-container {
	width:80%;
	margin:0 auto;
	margin-top:100px;
	margin-bottom:100px;
}

.tekstvak-met-afbeelding figure {
	position: absolute;
	top:0; left:0;
	height:100%;
	width:100%;
}

.tekstvak-met-afbeelding .owl-carousel,
.tekstvak-met-afbeelding .owl-stage-outer,
.tekstvak-met-afbeelding .owl-item,
.tekstvak-met-afbeelding .owl-stage {
	height:100%;
}

.tekstvak-met-afbeelding .button-container {
	margin-top:50px;
}

/* == DIENSTEN OVERZICHT == */

.diensten-overzicht {
	background:#F0EEEF;
	padding-top:100px;
	padding-bottom:100px;
}

.diensten-overzicht .container-fluid {
	width:90%;
}

.diensten-overzicht h2 {
	margin-bottom:50px;
}

.diensten-overzicht .diensten-box {
	margin-top:50px;
	width:80%;
}

.diensten-box figure {
	margin-bottom:20px;
}

.diensten-box h3 {
	font-size: 32px;
	color: #393939;
	position: relative;
	display: inline-block;
}

.diensten-box .content {
	margin-bottom:30px;
}

.diensten-box .lees-meer a {
	font-size: 18px;
	text-transform: uppercase;
	font-family:'BalooBhai Bold', sans-serif;
	color:#000;
}

.diensten-box .lees-meer span {
	position: relative;
}

.diensten-box .lees-meer span:before {
	content: '';
	background-color: #FFD900;
	width: 105%;
	height: 14px;
	display: inline-block;
	position: absolute;
	bottom: 16px;
	left: -6px;
	z-index: -1;
}

/* == DIENSTEN CONTENT == */

.single-diensten figure {
	width:100%;
	height:100%;
}

.diensten-content.links {
	margin-right:10%;
	margin-top:150px;
	margin-bottom:150px;
}

.diensten-content.rechts {
	margin-left:10%;
	margin-top:150px;
	margin-bottom:150px;
}

.diensten-content h2 {
	text-transform: uppercase;
	font-size: 48px;
	color: #393939;
	line-height: 55px;
	position: relative;
	z-index: 2;
}

.diensten-content h2 span {
	position: relative;
}

.diensten-content h2 span:before {
	content: '';
	background-color: #D7B703;
	width: 106%;
	height: 30px;
	display: block;
	position: absolute;
	left: -8px;
	bottom: 20px;
	z-index: -1;
}

.diensten-content .button-container {
	margin-top:30px;
}

.diensten-content a {
	color:#000;
	font-weight:800;
	font-family: 'JosefinSans Bold', sans-serif;
}

.diensten-content a:hover {
	color:#000;
}

.diensten-content a span {
	position: relative;
}

.diensten-content a span:after {
	content: '';
	background-color: #E8E7E7;
	width: 105%;
	height: 10px;
	display: inline-block;
	position: absolute;
	top: 10px;
	left: -3px;
	z-index: -1;
}


/* == VERVOLG HEADER == */

.vervolg-header .content {
	/* width:50%; */
	margin-top:20px;
}

.vervolg-header h1 {
	position: relative;
	margin-bottom: 0;
	z-index: 2;
}

.vervolg-header h1:before {
	content: '';
	background-color: #FFD900;
	width: 95%;
	height: 18px;
	display: inline-block;
	position: absolute;
	bottom: 16px;
	left: -6px;
	z-index: -1;
}

.vervolg-header .button-container a {
	color:#fff;
	text-transform: uppercase;
	font-family:'BalooBhai Bold', sans-serif;
}

.vervolg-header .button-container {
	position: relative;
	display: inline-block;
	margin-top:30px;
}

.vervolg-header .button-container span {
	position: relative;
	z-index:1;
}

.vervolg-header .button-container a:hover {
	text-decoration: none;
	color:#fff;
}

.vervolg-header .button-container a:after {
	content: '';
	background-color: #656565;
	width: 101%;
	height: 10px;
	display: block;
	position: absolute;
	top: 15px;
	left: 0;
	opacity:0.5;
	z-index: -1;
}

.vervolg-header figure {
	position: relative;
	width:100%;
	height:100%;
}

.vervolg-header .chassis-nummer-label {
	position: absolute;
	top:15px;
	right:15px;
	height:70px;
	background: #393939;
	color: #fff;
	padding:10px 20px;
	display:flex;
	flex-direction: row;
	align-items: center;
	border-radius:10px;
}

.vervolg-header .chassis-nummer-label figure {
	height:100%!important;
	width:auto;
	margin-right:8px;
}

.vervolg-header .chassis-nummer-label figure img {
	object-fit: contain;
	object-position: center center;
	height:100%; width:100%;
}

.vervolg-header .chassis-nummer-label span {
	font-size:12px;
}

.vervolg-header .button-container {
	margin-top:50px;
}

/* == TEAM == */

.team {
	padding-top:100px;
	padding-bottom:100px;
}

.team h2 {
	margin-bottom:50px;
}

.medewerker-box {
	margin-bottom:30px;
	cursor: pointer;
}

.medewerker-box .hover {
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#000;
	opacity:0;
	transition: all 150ms ease-in-out;
    -moz-transition: all 150ms ease-in-out;
    -webkit-transition: all 150ms ease-in-out;
    z-index:2;
}

.medewerker-box:hover .hover {
	opacity:0.5;
}


.medewerker-box figure {
	position: relative;
	width:100%;
	height:300px;
}

.medewerker-box .medewerker-naam {
	color:#fff;
	font-family:'BalooBhai Bold', sans-serif;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	opacity:1;
	z-index:2;
	font-size:20px;
}

.medewerker-popup-overlay {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.7);
	z-index: 9999;
}

.medewerker-popup {
	display: none;
	width: 50%;
	padding: 50px;
	background: #fff;
	z-index: 99999;
	/*height: 300px;*/
	position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.medewerker-popup h2 {
	margin-bottom: 20px;
}

.medewerker-popup .popup-titel {
	display: inline-block!important;
}

.popup-sluiten {
	position: absolute;
	top: 30px;
	right: 30px;
	cursor: pointer;
	font-size: 30px;
}

/* == DIENSTEN (nieuw) == */

.filosofie {
	position: relative;
	background: #393939;
	color: #fff;
	padding-top: 100px;
	padding-bottom: 100px;
}

.filosofie h2 {
	color: #fff;
	margin-bottom: 50px;
}

.filosofie .half-bg {
	position: absolute;
	background: #f0eeef url('images/forest-bg.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	bottom: 0;
	left: 0;
	height: 50%;
	width: 100%;
}

.filosofie .filosofie-box {
	color: #393939;
	background: #fff;
	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

.filosofie .filosofie-box a {
	color: #393939;
	text-decoration: none;
}

.filosofie .filosofie-box .lees-meer a {
  font-size: 18px;
  text-transform: uppercase;
  font-family: 'BalooBhai Bold', sans-serif;
  color: #000;
}

.filosofie .filosofie-box .pattern-blok .overlay {
	background: rgba(255, 255, 255, 0.7);
}

.filosofie-box .pattern-blok .overlay:after {
  content: "";
  position: absolute;
  z-index: 1;
  right: 0;
  width: 0;
  bottom: 0;
  background: rgba(255, 217, 0, 0.8);
  height: 2px;
  transition-property: width;
  transition-duration: 0.4s;
  transition-timing-function: ease-out;
}
.filosofie-box:hover .pattern-blok .overlay:after {
  left: 0;
  right: auto;
  width: 100%;
  height: 100%;
}

.filosofie-box:hover .pattern-blok .overlay {
	background: transparent;
	transition-duration: 0.4s;
  transition-timing-function: ease-out;
}
.filosofie .filosofie-box .lees-meer {
	margin-top: 20px;
	font-weight: 800;
	font-family: 'BalooBhai Bold', sans-serif;
	cursor: pointer;
}

.filosofie-box h3 {
	cursor: pointer;
}

.filosofie .filosofie-box .lees-meer span {
	position: relative;
	z-index: 1;
}

.filosofie .filosofie-box .lees-meer span:before {
	content: '';
	background-color: #FFD900;
	width: 105%;
	height: 14px;
	display: inline-block;
	position: absolute;
	bottom: 10px;
	left: -6px;
	z-index: -1;
}

.filosofie .filosofie-box .pattern-blok {
	position: relative;
	height: 150px;
	width: 100%;
}

.filosofie .filosofie-box .content-container {
	position: relative;
	padding: 50px 35px 20px 35px;
	/* height:400px; */
}

.filosofie .owl-carousel {
	width: 95%;
}

.filosofie .owl-prev {
	display: none!important;
}

.filosofie .owl-controls i {
  font-size: 50px;
  color: #fff;
}

.filosofie .owl-controls .owl-next {
	width: 50px;
	height: 50px;
	background: transparent;
	text-shadow:1px 3px rgba(0,0,0,.1);

}

.filosofie .owl-carousel .owl-controls {
	margin: 0;
	position: absolute;
	top: 50%;
	right: -100px;
}

.filosofie .filosofie-box .icoon {
	position: absolute;
	top: -70px;
	left: 35px;
	z-index: 5;
	color: #393939;
	font-size: 80px;
}

.filosofie .filosofie-box .icoon i {
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

.filosofie .filosofie-box:hover .icoon i {
	color: #fff;
	text-shadow: 2px 2px 5px #000000;
}

.filosofie .owl-stage-outer {
	padding-bottom: 10px;
}

.filosofie .button-container {
	margin-top: 50px;
}

.filosofie-overzicht .filosofie-box {
	margin-bottom: 20px;
}

.filosofie-overzicht .half-bg {
	height: 45%;
}

/* == DIENSTEN POPUP == */

.diensten-popup-overlay {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.7);
	z-index: 9999;
}

.diensten-popup {
	display: none;
	width: 50%;
	background: #fff;
	z-index: 99999;
	/*height: 300px;*/
	position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height:90vh;
  overflow-y:scroll;
}

.diensten-popup .popup-content {
	padding: 50px;

}

.diensten-popup figure {
	position: relative;
	height: 200px;
	width: 100%;
}

.diensten-popup .foto .overlay {
	background: rgba(255, 217, 0, 0.5);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.diensten-popup figure img {
	object-fit: cover;
	object-position: center center;
	height: 100%; width: 100%;
}

.diensten-popup .popup-sluiten {
	position: absolute;
	top: 0;
	right: 0;
	cursor: pointer;
	font-size: 30px;
	padding: 10px 20px;
	background: #fff;
	color: #393939;
	z-index: 2;
}

.diensten-popup .button-container {
	margin-top: 40px;
}

/* == VIDEO POPUP == */

.video-popup-overlay {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.7);
	z-index: 9999;
}

.video-popup {
	display: none;
	/*width: 50%;*/
	padding: 80px 20px 20px 20px;
	background: #fff;
	z-index: 99999;
	/*height: 300px;*/
	position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.popup-sluiten {
	position: absolute;
	top: 30px;
	right: 30px;
	cursor: pointer;
	font-size: 30px;
}

/* == PROJECTEN == */

.projecten {
	background:#FFD900;
}

.projecten .content-container {
	width:95%;
	margin:0 auto;
	margin-top:50px;
	margin-bottom:75px;
}

.projecten figure {
	height:100%;
	width:100%;
}

.projecten figure {
	position: relative;
}

.projecten .overlay {
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color: #ffd900;
	opacity: 0.5;
	filter: brightness( 100% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );
}

.projecten h2 {
	text-transform: uppercase;
}

.projecten .sectie-titel span::before {
	background:#DAAF94;
}

.projecten .button-container {
	position: relative;
	margin-top:75px;
}

.projecten .button-container a:after {
	content: '';
	background-color: #D7B703;
	width: 35px;
	height: 84px;
	display: block;
	position: absolute;
	top: -25px;
	left: -18px;
	opacity:0.5;
	z-index: 0;
}

.projecten .projecten-carousel figure {
	position: relative;
	height:300px;
	width:auto;
}

.projecten .projecten-carousel figure .overlay {
	background: #efd700 none repeat scroll 0 0;
	height: 100%;
	left: 0;
	opacity: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 999;
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

.projecten .projecten-carousel figure:hover .overlay {
	opacity:0.4;
}

.projecten figure img {
	height:100%;
	width:100%;
	object-fit: cover;
}

/* == OWL CONTROLS == */

.owl-controls {
	text-align: center;
	margin-top:50px;
}

.owl-controls i {
    font-size:20px;
    line-height: 35px;
    color:#fff;
}

.owl-prev {
	display: inline-block;
	margin:10px;
    width: 35px;
    height: 35px;
    /*position: absolute;
    top: 30%;
    left:-100px;*/
    background:#000;
    border-radius: 100%;
    text-align: center;
}

.owl-next {
	display: inline-block;
	margin:10px;

    width: 35px;
    height: 35px;
    /*position: absolute;
    top: 30%;
    right:-100px;*/
    background:#000;
    border-radius: 100%;
    text-align: center;
}

/* == PROJECTEN RANDOM == */

.projecten-random {
	padding-top:100px;
	padding-bottom:100px;
}

.projecten-random .container-fluid {
	width:60%;
}

.projecten-random h2 {
	margin-bottom:50px;
}

.projecten-random figure img {
	width:100%;
	height:100%;
	object-fit: cover;
}

.projecten-random .sectie-titel span {
	position: relative;
}

.projecten-random .sectie-titel span::before {
	background:#D7B703;
}

.projecten-random a h3{
	font-size:25px;
	margin-top:10px;
	color:#393939;
}

.projecten-random a:hover {
	text-decoration: none;
}

/* == TIJDLIJN == */

.tijdlijn {
	margin: var(--block-margin) 0px;
	background: var(--wit);
}

.tijdlijn .content {
	padding-bottom:100px;
}

.tijdlijn .jaar {
	font-family: 'BalooBhai ExtraBold', sans-serif;
	font-size:3rem;
	font-weight:800;
	color: var(--bruin);
	line-height:45px;
	margin-bottom:20px;
}

.tijdlijn .tijdlijn-progress {
	display: flex;
	flex-direction: column;
	justify-content: top;
  	align-items: center;
	width:150px;
}

.tijdlijn .tijdlijn-progress .circle {
	height:20px;
	width:20px;
	border-radius:100%;
	background: var(--geel);
}

.tijdlijn .tijdlijn-progress .line {
	display: flex;
	width:1px;
	height: 100%;
	flex-grow:1;
	/* background: var(--zwart); */
	border-left:3px dashed rgba(0, 0, 0, 0.3);
}

.tijdlijn .tijdlijn-info {
	display:flex;
	flex-grow:1;
	flex-direction: column;
	width:100%;
}

.tijdlijn .tijdlijn-row:last-child .line {
	display: none;
}

.tijdlijn .tijdlijn-row:last-child .content {
	padding-bottom:0;
}

.tijdlijn .quote {
	/* font-family: 'BalooBhai ExtraBold', sans-serif; */
	font-size:1.5rem;
	/* font-weight:800; */
	color: var(--bruin);
}

.tijdlijn .sticky-parent {
	height:100%;
	left:0;
}

.tijdlijn .sticky-content.sticky {
	top:150px;
	position: sticky;
}

.tijdlijn figure {
	margin:0;
	margin-top:30px;
	width:100%;
}

.tijdlijn h3 {
	color: var(--bruin);
}

/* == REVIEWS == */

.reviews {
	padding-top:100px;
	padding-bottom:100px;
	background:#F0EEEF;
}

.reviews .container-fluid {
	width:60%;
}

.reviews h2 {
	margin-bottom:10px;
}

.reviews .sectie-tekst {
	line-height:1.75px;
	font-family:'JosefinSans Bold', sans-serif;
	font-weight:800;
}

.review-carousel {
	margin-top:50px;
}

.review-box {
	background:#fff;
	padding:15px 25px 50px 25px;
	box-shadow:0px 0px 20px rgb(0 0 0 / 15%);
	/* width:90%; */
	margin:0 auto;
	min-height:350px;
}

.review-box h3 {
	margin-bottom:5px;
	margin-top:5px;
}

.review-box .subtitel {
	font-weight:800;
	color: #AB911A;
}

.review-box .sterren i {
	color:#f0ad4e;
}

.review-box .content {
	margin-top:20px;
}

.review-box figure {
	height: 80px;
	width: 80px;
	border-radius:100%;
}

.review-box figure img {
	object-fit: cover;
	object-position: center center;
	height:100%; width:100%;
	border-radius:100%;
}

/* == SINGLE PROJECTEN == */

.single-projecten {
	padding-top:100px;
	padding-bottom:100px;
	background:#F0EEEF;
}

.single-projecten .projecten-content .content {
	width:50%;
}

.project-specificaties {
	padding:50px 0px;
}

.project-specificaties .spec-rij {
	padding:5px 10px;
}

.project-specificaties .spec-rij:nth-child(even) {
	background:#F0EEEF;
}

.project-formulier {
	margin: var(--block-margin) 0px;
}

/* == SINGLE AMBASSADEUR == */

.single-ambassadeur {
	padding-top:100px;
	padding-bottom:100px;
}

.single-ambassadeur a {
	color:#000;
	font-weight:800;
}

.single-ambassadeur a:hover {
	color:#000;
}

/* == CONTACT == */

.contact {
	padding-top:100px;
	padding-bottom:100px;
}

.sidebar-box {
	margin-bottom:30px;
}

.sidebar-box h3 {
	margin-bottom:10px;
}

.sidebar-box a {
	color:#000;
}

/* == FORM == */

form input[type="text"], 
form input[type="tel"], 
form input[type="email"], 
form textarea {
	border:none;
	border-bottom:1px solid #000;
	padding:15px!important;
	outline:0!important;
}

.gform_wrapper .gform_required_legend {
	display:none!important;
}

.grecaptcha-badge {
	display: none!important;
}

form input[type="submit"] {
	background-color: transparent;
	border: #393939 solid 2px;
	color:#393939;
	border-radius: 0;
	font-family: 'BalooBhai Bold', sans-serif;
	font-size: 18px;
	padding: 15px 20px;
	text-transform: uppercase;
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

/* == AMBASSADEUR OVERZICHT == */

.ambassadeur-overzicht {
	padding-top:100px;
	padding-bottom:100px;
}

.ambassadeur-overzicht .ambassadeur-box {
	margin-bottom:30px;
}

.ambassadeur-overzicht .ambassadeur-box a {
	color:#393939;
	text-decoration: none;
}

.ambassadeur-overzicht h3 {
	font-size:40px;
}

.ambassadeur-overzicht .ambassadeur-box figure {
	height:300px;
	width:100%;
}

.ambassadeur-overzicht .ambassadeur-box figure img{
	height:100%;
	width:100%;
	object-fit:cover;
}

.ambassadeur-overzicht .ambassadeur-box .ambassadeur-naam {
	margin-top:20px;
}

.ambassadeur-box .button-container {
	margin-top:30px;
}

.ambassadeur-box .lees-meer a {
	font-size: 18px;
	text-transform: uppercase;
	font-family:'BalooBhai Bold', sans-serif;
	color:#000;
}

.ambassadeur-box .lees-meer span {
	position: relative;
}

.ambassadeur-box .lees-meer span:before {
	content: '';
	background-color: #FFD900;
	width: 105%;
	height: 14px;
	display: inline-block;
	position: absolute;
	bottom: 16px;
	left: -6px;
	z-index: -1;
}

/* == PROJECT RANDOM == */

.projecten-random figure {
	height:250px;
}

/* == PROJECTEN OVERZICHT == */

.projecten-overzicht {
	padding-top:100px;
	padding-bottom:100px;
}

.projecten-overzicht h2 {
	margin-bottom:50px;
}

.projecten-overzicht .project-box {
	margin-bottom:30px;
}

.projecten-overzicht .project-box a {
	color:#000;
	text-decoration: none;
}

.projecten-overzicht .project-box figure {
	height:300px;
	width:100%;
}

.projecten-overzicht .project-box figure img{
	height:100%;
	width:100%;
	object-fit:cover;
}

.projecten-overzicht .project-box .project-titel {
	margin-top:20px;
}

.galerij {
	padding-top:50px;
	padding-bottom:50px;
	background:#F0EEEF;
}
.galerij figure {
	height:300px;
	width:100%;
	margin-top:30px;
}

.galerij figure img {
	width:100%;
	height:100%;
	object-fit:cover;
}

/* == CTA MET FORMULIER == */

.cta-met-formulier {
	background:#F8D94A;
	color:#393939;
	margin-top:150px;
}

.cta-met-formulier .container-fluid {
	width:60%;
}

.cta-met-formulier h2 {
	font-size:32px;
	line-height: auto;
}

.cta-met-formulier ul {
	list-style-type:none;
	padding-left:0;
}

.cta-met-formulier ul li {
	margin-bottom:10px;
}

.cta-met-formulier ul li i {
	margin-right:10px;
}

.cta-met-formulier .content-container {
	margin-top:50px;
	margin-bottom:50px;
}

.cta-met-formulier .formulier-box {
	position: relative;
	width:80%;
	margin:0 auto;
	height:100%;
}

.cta-met-formulier .formulier-box .form-wrapper {
	position: absolute;
	bottom:0;
	background:#393939;
	padding:30px 20px 10px 30px;
	color:#fff;
}

.cta-met-formulier form input, .cta-met-formulier form textarea {
	border:none;
	color:#fff;
	border-bottom:1px solid #fff;
	padding:15px 0px!important;
	outline:0!important;
	background:transparent;
}

.cta-met-formulier form input[type="submit"] {
	background-color: transparent;
	border: #fff solid 2px;
	color:#fff;
	border-radius: 0;
	font-family: 'BalooBhai Bold', sans-serif;
	font-size: 18px;
	padding: 15px 20px!important;
	text-transform: uppercase;
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

.cta-met-formulier .gform_fields .gfield input::-webkit-input-placeholder {
  color: #fff;
}

.cta-met-formulier .gform_fields .gfield input::-moz-placeholder { 
	/* Firefox 19+ */
  color: #fff;
  opacity:1;
}

.cta-met-formulier .gform_fields .gfield input:-ms-input-placeholder {
	/* IE 10+ */
  color: #fff;
}

.cta-met-formulier .gform_fields .gfield input:-moz-placeholder {
	/* Firefox 18- */
  color: #fff;
}

.cta-met-formulier .gform_fields .gfield textarea::-webkit-input-placeholder {
  color: #fff;
}

.cta-met-formulier .gform_fields .gfield textarea::-moz-placeholder { 
	/* Firefox 19+ */
  color: #fff;
  opacity:1;
}

.cta-met-formulier .gform_fields .gfield textarea:-ms-input-placeholder {
	/* IE 10+ */
  color: #fff;
}

.cta-met-formulier .gform_fields .gfield textarea:-moz-placeholder {
	color:white;
}

.cta-met-formulier .gform_body .gform_fields .gfield textarea::-webkit-input-placeholder {
	color: #ffffff;
	opacity:1;
}

/* == CTA == */

.cta {
	background:#393939;
	color:#fff;
}

.cta h2 {
	color:#fff;
	font-size: 42px;
	text-transform: none;
	line-height: 45px;
	width:80%;
}

.cta .content-container {
	margin-top:100px;
	margin-bottom:100px;
}

.cta .button-container {
	margin-top:40px;
}

/* == VRAGEN == */

.vragen {
	background:#FFD900;
}

.vragen .sectie-titel {
	margin-bottom:0;
}

.vragen figure {
	height:100%;
	width:100%;
}

.vragen .content-container {
	margin-top:100px;
	margin-bottom:100px;
}

.vragen .content-links {
	display: inline-block;
	margin-right:100px;
	margin-left:100px;
}

.vragen .content-rechts {
	display: inline-block;
	vertical-align: top;
	margin-top: 20px;
}


/* == FOOTER == */

footer {
	padding-top:100px;
	padding-bottom:100px;
}

footer h3 {
	font-size: 30px;
	margin-bottom: 35px;
	text-transform: uppercase;
}

footer ul li a, footer ul li {
	font-size:15px;
	color:#555;
}

footer ul li a:hover {
	color:#555;
}

footer form input, footer form textarea {
	border:none;
	border-bottom:1px solid #000;
	padding:15px!important;
	outline:0!important;
	width:100%!important;
}

footer form input[type="submit"] {
	width:auto!important;
	margin-top:50px;
	background-color: transparent;
	border: #393939 solid 2px;
	color:#393939;
	border-radius: 0;
	font-family: 'BalooBhai Bold', sans-serif;
	font-size: 18px;
	padding: 15px 20px;
	text-transform: uppercase;
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

footer iframe {
	height:250px;
	margin-top:20px;
}

footer ul li i {
	margin-right:8px;
}

.copyright {
	padding-top:5px;
	padding-bottom:5px;
}

.copyright a {
	color:#000;
	font-weight:800;
}

.socials {
	margin-top:30px;
}

.social-box {
	display: inline-block;
	margin-right:5px;
	font-size:25px;
}

.social-box a {
	color:#000;
}

/* == YOUTUBE VIDEO == */

.wrapper {
	width: 100%;
}

.youtube {
	background-color: var(--zwart);
	margin-bottom: 30px;
	position: relative;
	/*padding-top: 56.25%;*/
	overflow: hidden;
	cursor: pointer;
}
.youtube img {
	width: 100%;
	top: -16.82%;
	left: 0;
	opacity: 0.7;
}
.youtube .play-button {
	width: 90px;
	height: 60px;
	background-color: #333;
	box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
	z-index: 1;
	opacity: 0.8;
	border-radius: 6px;
}
.youtube .play-button:before {
	content: "";
	border-style: solid;
	border-width: 15px 0 15px 26.0px;
	border-color: transparent transparent transparent #fff;
}
.youtube img,
.youtube .play-button {
	cursor: pointer;
}
.youtube img,
.youtube iframe,
.youtube .play-button,
.youtube .play-button:before {
	position: absolute;
}
.youtube .play-button,
.youtube .play-button:before {
	top: 50%;
	left: 50%;
	transform: translate3d( -50%, -50%, 0 );
}
.youtube iframe {
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
}

/* == BLOG OVERZICHT == */

.blog {
	padding:50px 0px;
	background: var(--bruin);
}

.blog h1 {
	color: var(--wit);
}

.blog .intro .content {
	margin-top:20px;
	color: var(--wit);
}

.blog-box {
	position: relative;
	margin-bottom:50px;
	background: var(--wit);
  }
  
  .blog-box:hover {
	transform:scale(1.02);
	transition: all 150ms ease-in-out;
	  -moz-transition: all 150ms ease-in-out;
	  -webkit-transition: all 150ms ease-in-out;
  }
  
  .blog-box a {
	color: var(--zwart);
  }
  
  .blog-box h3 {
	font-weight:700;
	color:var(--zwart);
	margin-bottom:20px;
  }
  
  .blog-box a:hover {
	text-decoration: none;
  }
  
  .blog-box .content-container {
	background:var(--wit);
	padding:30px;
	border-radius:0px 0px 10px 10px;
  }

  .blog-box .content-container .content {
	margin:30px 0px 40px 0px;
  }
  
  .single-blog figure.thumbnail,
  .blog-box figure.thumbnail {
	position: relative;
	height:250px;
	margin-bottom:0;
	border-radius:10px 10px 0px 0px;
  }
  
  .blog-box .lees-meer {
	margin:30px 0px 20px 0px;
  }

  .blog-box .lees-meer a {
	font-weight:600;
	color: var(--wit);
	background: var(--blauw);
	padding:15px 20px;
  }
  
.blog .blog-info, 
.single-blog .blog-info {
	margin:10px 0px;
	display:flex;
	align-items:center;
	justify-content: flex-start;
  }

  /* .single-blog .auteur, */
  .blog .blog-info .auteur {
	display:flex;
	flex-direction: row;
	width:50%;
  }
  /* .single-blog .auteur-foto, */
  .blog .blog-info .auteur-foto {
	display:flex;
	width:50px;
	margin-right:10px;
	height:50px;
	border-radius:100%;
  }

  .single-blog .auteur-foto img,
  .blog .blog-info .auteur-foto img {
	border-radius:100%;
  }

  .single-blog .auteur-naam,
  .blog .blog-info .auteur-naam {
	display:flex;
	align-items:center;
	/* width:75%; */
  }

  .single-blog .blog-info i {
	margin-right:8px;
  }

  /* .single-blog .blog-info .blog-datum, */
  .blog .blog-info .blog-datum {
	display:flex;
	width:50%;
	justify-content: flex-end;
  }

  .blog-box .blog-tags {
	position: absolute;
	line-height:normal;
	bottom:15px;
	right:15px;
  }
  
  .blog-tag {
	display:inline-block;
	color: var(--zwart);
	background: var(--geel);
	border-radius:10px;
	padding:5px 10px;
	font-size:14px;
	font-weight:300;
	margin-right:5px;
  }

  /* == SINGLE BLOG == */

.single-blog {
	background:#f7f7f7;
	padding-top:100px;
	padding-bottom:100px;
  }
  
  .single-blog article {
	background:#fff;
	padding:30px 20px;
  }
  
  .single-blog aside {
	position: relative;
  }
  
  .single-blog .container-fluid {
	width:70%;
  }
  
  .single-blog h3 {
	font-size:1.1rem;
	font-family: 'Roboto Regular', sans-serif;
	font-weight:800;
	margin-top:20px;
  }
  
  .single-blog .terug-naar-overzicht {
	margin-bottom:20px;
	font-size:1rem;
  }
  
  .single-blog .terug-naar-overzicht a {
	color: var(--zwart);
  }

  .single-blog .terug-naar-overzicht a:hover {
	color:var(--zwart);
  }
  
  .single-blog h1 {
	margin: 20px 0px 20px 0px;
	font-weight:700;
	color: var(--bruin);
  }
  
  .single-blog h2 {
	font-size:1.5rem;
	font-family: 'BalooBhai ExtraBold', sans-serif;
  }

  .single-blog .blog-tags {
	margin-top:20px;
  }

  .single-blog .blog-info {
	padding:10px;
	background: #f7f7f7;
  }

  .single-blog .auteur-foto {
		margin-right:20px;
	}

  .single-blog .auteur-naam {
	font-weight:800;
  }

  .single-blog .auteur-naam span {
	font-weight:400;
	margin-right:4px;
  }

  .single-blog .content {
	margin:20px 0px;
	padding-bottom:20px;
  }

  .single-blog .content a {
	color: var(--zwart);
	border-bottom:2px solid var(--geel);
  }

  .single-blog .content a:hover {
	text-decoration: none;
  }

  .single-blog .leestijd strong, .single-blog .blog-datum strong {
	font-weight:600;
	margin-right:5px;
  }

  .single-blog .artikel-delen {
	display:flex;
	justify-content: flex-start;
	align-items:center;
	border-top: 1px solid rgba(156, 156, 156, 0.3);
	padding:10px 15px 10px 15px;
  }

  .single-blog .artikel-delen .social-share {
	width:60%;
  }

  .single-blog .artikel-delen .auteur {
	justify-content: flex-end;
	width:40%;
  }

  .single-blog aside .sidebar-section {
	background: var(--wit);
	/* margin-bottom:20px; */
	padding:20px;
  }

  .single-blog aside .sidebar-section a {
	color: var(--zwart);
  }

  .single-blog aside .sidebar-section a:hover {
	color: var(--zwart);
  }

  .single-blog .gerelateerde-artikelen {
	margin-top:50px;
  }

  .sticky-parent {
	position: relative;
  }

  .sticky-parent .sticky-content.sticky {
	position: sticky;
	top:140px;
  }

.social-icoon{
	width: 40px;
	height: 40px;
	float: left;
	margin-right: 10px;
	overflow: hidden;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
  }
  
  .social-icoon a{
	display: block;
	width: 100%;
	height: 100%;
	line-height: 42px;
	text-align: center;
	color: #ffffff;
	font-size: 18px;
  }

  
  .social-share .social-icoon:first-child {
	margin-left: 0;
  }
  
  .social-icoon.facebook a{
	background: #3b5998;
  }
  
  .social-icoon.linkedin a{
	background: #008cc9;
  }
  
  .social-icoon.email a{
	background: #f6f6f6;
	color: #444444;
  }
  
  .social-share span {
	float: left;
	margin-right: 20px;
	line-height: 40px;
  }
  
  /* == VIDEO == */

  .video-sectie {
	padding:70px 0px;
  }

  .video-sectie h2 {
	margin-bottom:30px;
  }

  .video-sectie figure {
	position: relative;
	width:500px;
	aspect-ratio: 1 /1;
	z-index: 2;
	cursor: pointer;
	margin:0 auto;
  }

  .video-sectie figure .wrapper {
	width:100%;
	height:100%;
  }

  .video-sectie figure .wrapper .youtube {
	height:100%;
  }

  .video-sectie figure .wrapper .youtube img {
	height:100%;
	width:100%;
	top:0; left:0;
  }

  /* == TOOLTIP == */

  .tippy-box[data-theme~='goonline'] {
	background: var(--blauw);
	color: var(--wit);
	padding: 15px 30px;
	font-size: 0.9rem;
	max-width:300px;
  }

  /* == WERELDKAART == */

  .wereldkaart {
	position: relative;
	padding:100px 0px;
	background: var(--wit);
  }

  .wereldkaart .scroll-x {
	position: relative;
	overflow-x:scroll;
	overflow-y:scroll;
	width:100%;
  }

  .wereldkaart .map-container {
	position: relative;
  }

  .wereldkaart .pin {
	cursor: pointer;
  }

  .wereldkaart .pin .cls-1 {
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	/* fill: var(--geel); */
	fill: #da9c09;
  }
  .wereldkaart .pin:hover .cls-1 {
	fill: var(--blauw);
  }

  .wereldkaart-popup {
	position: absolute;
	top:50px;
	left:50px;
	background: var(--wit);
	display:none;
	z-index:99;
	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
	width:500px;
  }

  .wereldkaart-popup .popup-sluiten {
	position: absolute;
	top:15px;
	right:15px;
	color: black;
	font-size:1.5rem;
	z-index:2;
	background: white;
	padding:5px;
	width:30px;
	height:30px;
	display: flex;
	align-items: center;
	width:30px;
	height:30px;
  }

  .map-container .swipe-icon {
	position: absolute;
	z-index:1;
	bottom:15px;
	left:30px;
	height:50px;
	width:50px;
  }

  .wereldkaart-popup .popup-inner{
	padding:30px 30px 50px 30px;
  }

  .wereldkaart-popup.active {
	display:block;
  }

  .wereldkaart-popup h3 {
	color: var(--bruin);
	margin:0;
  }

  .wereldkaart-popup figure.afbeelding {
	width:100%;
	height:300px;
  }

  .wereldkaart-popup .vlag {
	margin:10px 0px;
  }

  .wereldkaart-popup .vlag .bestemming {
	opacity: 0.5;
  }

  .wereldkaart-popup .vlag figure {
	width:30px;
	aspect-ratio: 1 / 0.5;
	margin-right:10px;
  }

  .wereldkaart-popup a.button-geel {
	padding:10px 22px!important;
  }

  .wereldkaart-popup .button-container {
	margin-top:50px;
  }

  .wereldkaart .bestemming {
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
  }

  .wereldkaart .bestemming:hover {
	fill: #707070;
  }

  .wereldkaart .pin.clicked .cls-1 {
	fill: var(--blauw);	
  }

  /* == HEADER V3 == */

  @keyframes shrink {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.10,1.10);
    }
    100% {
        transform: scale(1,1);
    }
}

  .header-v3 {
	position: relative;
	height: calc(100vh - 120px);
  }

  .header-v3 figure.pattern {
	position: absolute;
	top:0; left:0;
	z-index:2;
	height:100%;
	width:100%;
  }

  .header-v3 .content-container {
	position: relative;
	z-index:2;
	position: absolute;
	left:0; top:0;
	width: 40vw;
	height:100%;
  }

  .header-v3 h1 {
	font-size: 3.2rem;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  }

  .header-v3 h2 {
	font-size: 1.3rem;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  }

  .header-v3 .content-container .content {
	position: relative;
	z-index:3;
	display: flex;
	flex-direction: column;
	align-items: start;
	justify-content: center;
	height:100%;
	width:100%;
	padding-left:15%;
  }

  /* .header-v3 figure.pattern .overlay {
	background: rgba(255, 217, 0, 0.5);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
  } */

  .header-v3 figure.image {
	overflow: hidden;
	height:100%;
  }

  .header-v3 figure.image img {
	animation: shrink 30s infinite;
}

  .header-v3 figure.image {
	position: relative;
	z-index:1;
  }