/*
 Theme Name:   Glabbast
 Description:  brainstorm en concept basisthema
 Author:       brainstorm en concept
 Version:      1.0.0
*/

@import url('https://fonts.googleapis.com/css2?family=Oooh+Baby&display=swap');

/* Ultra Light */
@font-face {
  font-family: 'Helvetica Neue';
  src: url('fonts/helvetica-neue/HelveticaNeueUltraLight.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'Helvetica Neue';
  src: url('fonts/helvetica-neue/HelveticaNeueUltraLightItalic.otf') format('opentype');
  font-weight: 200;
  font-style: italic;
}

/* Thin */
@font-face {
  font-family: 'Helvetica Neue';
  src: url('fonts/helvetica-neue/HelveticaNeueThin.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Helvetica Neue';
  src: url('fonts/helvetica-neue/HelveticaNeueThinItalic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
}

/* Light */
@font-face {
  font-family: 'Helvetica Neue';
  src: url('fonts/helvetica-neue/HelveticaNeueLight.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Helvetica Neue';
  src: url('fonts/helvetica-neue/HelveticaNeueLightItalic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
}

/* Regular */
@font-face {
  font-family: 'Helvetica Neue';
  src: url('fonts/helvetica-neue/HelveticaNeueRoman.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}

/* Medium */
@font-face {
  font-family: 'Helvetica Neue';
  src: url('fonts/helvetica-neue/HelveticaNeueMedium.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Helvetica Neue';
  src: url('fonts/helvetica-neue/HelveticaNeueMediumItalic.otf') format('opentype');
  font-weight: 600;
  font-style: italic;
}

/* Bold */
@font-face {
  font-family: 'Helvetica Neue';
  src: url('fonts/helvetica-neue/HelveticaNeueBold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Helvetica Neue';
  src: url('fonts/helvetica-neue/HelveticaNeueBoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
}

/* Heavy */
@font-face {
  font-family: 'Helvetica Neue';
  src: url('fonts/helvetica-neue/HelveticaNeueHeavy.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'Helvetica Neue';
  src: url('fonts/helvetica-neue/HelveticaNeueHeavyItalic.otf') format('opentype');
  font-weight: 800;
  font-style: italic;
}

/* Black */
@font-face {
  font-family: 'Helvetica Neue';
  src: url('fonts/helvetica-neue/HelveticaNeueBlack.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'Helvetica Neue';
  src: url('fonts/helvetica-neue/HelveticaNeueBlackItalic.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
}


:root {
	--terra:#9F6D56;
	--beige:#DBD1C4;
  --sand: #EAE4DC;
	--gold:#BC9135;
	--brown:#664833;
	--plyr-color-main:var(--brown);
}


 html {
	width:100%;
	overflow:auto;
	height:100%;
	margin:0px auto;
		scroll-padding-top:120px;
			scroll-behavior: smooth;
}
body {
	height:auto;
	overflow:hidden;
	font-weight:500;
	font-family:'Helvetica Neue', sans-serif !important;
	color:var(--brown);
}

body.admin-bar nav {
	top:32px;
}
@media (max-width:782px) {
	body.admin-bar nav {
		top:46px;
	}
}
.cl-terra { color:var(--terra); }  .bg-terra { background-color:var(--terra); color:white; }
.cl-beige { color:var(--beige); }  .bg-beige { background-color:var(--beige); color:var(--brown); }
.cl-gold { color:var(--gold); }  .bg-gold { background-color:var(--gold); color:white; }
.cl-brown { color:var(--brown); }  .bg-brown { background-color:var(--brown) !important; color:white;  }
.bg-white { color:var(--brown); }

.font-quote {
	font-family:Oooh baby;
	font-weight:600;
}

.v-align {
	position: relative;
	top: 50%;
	height: auto;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}


@media (min-width:1199px) {
	.container {
		max-width:1400px;
	}
}

h1 {
	font-weight:500;
	font-size:45px;
		font-family:'Helvetica Neue', sans-serif !important;
}
h2 {
	font-size:45px;
	font-weight:500;
}


h3 {
	font-size:34px;
	font-weight:500;
}

h4 {
	font-weight:500;
	font-size:26px;
}
p, ul {
	font-size: 20px;
	padding:15px 0;
	font-weight:500;
}
p ~ ul, p ~ p, h3 ~ p, h4 ~ p {
	padding-top:0;
}
p a { color:var(--gold);}


section ul li {
	overflow:visible;
	position:relative;
  padding-bottom:15px;
}

section ul li::marker {
	opacity:0;
	color:transparent;
}
section ul li:before {
	content:"■";
	mask-image:url("img/bulletpoint.png");
	mask-size:50%;
	position:absolute;
	left:-23px;
	mask-position:50% 47%;
	transform:scale(2.7);
;
	mask-repeat:no-repeat;
}


img.circled {
	aspect-ratio:1;
	display:block;
	object-fit:cover;
	object-position:center;
	border-radius:50% !important;
	height:auto;
}

nav.desktop {
	width:100%;
	background-color:var(--brown);
	color:white;
	height:100px;
	position:fixed;
	overflow:visible;
	top:0;
	left:0;
	transition:.3s;
	font-size:20px;
	z-index:1000;
}
nav.desktop.scrolling {
	height:80px;
}
	nav.desktop .container {
		height:100%;
	}
	nav.desktop .contents {
		display:flex;
		height:calc(100% - 20px);
		margin:10px 0;
		gap:20px;
		justify-content: space-between;
	}
		nav.desktop .logo {
			height:100%;
			width:100%;
			max-width:300px;

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

			}

			nav.desktop  .hoofdnavigatie {
				list-style-type:none;
				padding-left:0;
				display:flex;
				height:100%;
				align-items:center;
				justify-content: flex-end;
				width:100%;
				gap:35px;
			}
				nav.desktop .hoofdnavigatie a {
					color:white;
					font-weight:500;
					text-decoration:none;
					position:relative;
					overflow:visible;
					display:block;
					transition:.3s;
				}
					nav.desktop .hoofdnavigatie a:hover,
					nav.desktop .hoofdnavigatie .current_page_ancestor > a,
					nav.desktop .hoofdnavigatie .current_page_item > a {
						color:var(--gold);
					}
				nav.desktop .hoofdnavigatie a i {
					font-size:24px;
				}

				nav.desktop li {
					padding:20px 0;
					position:relative;
					display:flex;
					justify-content: flex-start;
					z-index:1;
				}

				nav.desktop .sub-menu {
					position:absolute;
					top:calc(50% + 20px);
					background-color:var(--brown);
					padding:30px 0px 5px 0px;
					list-style-type:none;
					margin-left:-20px;
					border-radius:0px 0px 16px 16px;
					transition:.3s;
					transform:translateY(-20px);
					opacity:0;
					white-space:nowrap;
					pointer-events:none;
					z-index:-1;
				}
				nav.desktop li:hover .sub-menu {
					opacity:1;
					transform:translateY(0);
					pointer-events:auto;
				}
				nav.desktop.scrolling .sub-menu {
					padding-top:20px;
				}
					nav.desktop .sub-menu li {
						padding:10px 20px;
						font-size:16px;
					}




			nav.desktop .burger	{
				height:100%;
				aspect-ratio:1 / 1;
				display:flex;
				align-items:center;
				justify-content:center;
				font-size:20px;
				cursor:pointer;
				display:none;
			}


nav.mobile {
	position:fixed;
	width:100vw;
	height:100vh;
	overflow-y:auto;
	background:var(--brown);
	transform:translateX(50%);
	opacity:0;
	pointer-events:none;
	z-index:1001;
	transition:.5s;

}
	nav.mobile .container {
		overflow:visible;
		position:relative;
	}

	nav.mobile .close {
		width:40px;
		height:40px;
		position:absolute;
		top:35px;
		right:30px;
		color:white;
		line-height:40px;
		text-align:center;
		text-shadow:none;
		opacity:1;
	}
	nav.mobile ul:not(.sub-menu) {
		list-style-type:none;
		padding-left:0;
		padding-top:40px;
	}
		nav.mobile ul li:not(:last-of-type) {
			height:auto;
			line-height:40px;
			padding:0px 0px;

		}

		nav.mobile ul li a {
			color:white;
			font-size:20px;
			padding:10px 0;
		}

		nav.mobile .sub-menu {
				list-style-type:none;
				position:relative;
				font-size:16px !important;
				padding:0px 0px 10px 30px;
		}
			nav.mobile .sub-menu a {
				font-size:16px;
			}

@media screen and (max-width:1399px) {
	nav.desktop  .hoofdnavigatie {
		display:none;
	}
	nav.desktop .burger	{
		display:flex;
	}
	nav.mobile.opened {
		transform:translateX(0);
		opacity:1;
		pointer-events:auto;
	}
}

header {
	width:100%;
	height:auto;
	padding-top:150px;
	background-color:var(--beige);
	display:block;
	position:relative;
	padding-bottom:50px;
	color:var(--brown);
}


	header.has-img {
			margin-bottom:100px;
			padding-bottom:0;
	}
	header img.circled {
		margin-bottom:-100px;
 	}

@media (max-width:767px) {
	header {
		padding-top:130px;
	}
	header.has-img .printed {
		max-width:200px;
		margin-left:auto;
		margin-bottom:20px;
	}
}
main {
	padding:100px 0px;
}
@media (max-width:991px) {
	main {
		padding:50px 0;
	}
}

footer {
	background-color:var(--brown);
	color:white;
	padding:50px 0;
}
	footer .logo img {
		max-width:200px;
	}
	footer a { color:white; transition:.2s; }
	footer a:hover { text-decoration:none; color:var(--gold);}

	footer i { font-size:24px; }

	footer hr { border-color:white; margin:30px 0; opacity:.3;}

	footer .bottom a + a {
		margin-left:30px;
	}

.button, nav .hoofdnavigatie > li:last-of-type a {
	background-color:var(--gold);
	color:white !important;
	display:inline-block;
	border-radius:30px !important;
	cursor:pointer;
	position:relative;
	z-index:1;
	overflow:hidden;
	transition:.3s;
	text-decoration:none !important;
  text-align:center;
  outline:0;
	border:0px solid transparent;
	padding: 12px 32px 10px 32px;
	font-weight:500 !important;
	font-size:20px;
}
.button.disabled {
  opacity:.5;
  pointer-events:none;
}
.button.small {
	border-radius:30px;
	font-size:14px;
  padding:5px 15px;
  white-space:nowrap;
}

.button .bubble, nav .hoofdnavigatie > li:last-of-type a .bubble {
	width:210%;
	aspect-ratio: 1 / 1;
	position:absolute;
	top:0;
	left:0;
	border-radius:50%;
	z-index:-1;
	background-color:rgba(0,0,0,0.3);
	transform:translate(-50%, -50%) scale(0);
	transition:transform .4s;
}

	.button:hover .bubble,
	nav .hoofdnavigatie > li:last-of-type a:hover .bubble,
	nav .hoofdnavigatie li:last-of-type.current_page_item a .bubble {
		transition:transform .5s;
		transform:translate(-50%, -50%) scale(1);
	}
	.button:active, .hoofdnavigatie > li:last-of-type a:active  {
		transform:scale(.9);
	}

@media (max-width:991px) {
  .button { padding: 10px 20px; }
}

	.button ~ .button {
		margin-left:10px;
	}


.button.small i {
  margin-right:6px;
  bottom:-1px;
  position:relative;
}
@media (max-width:991px) {
	h1 		{ font-size:32px;	}
	h2 		{ font-size:30px; }
	h3 		{ font-size:26px; }
	p, ul, .button	{ font-size:16px; }
}

.printed {
	overflow:visible;
	position:relative;
	z-index:1;
}
	.printed .print {
		position:absolute;
		top:10%;
		left:-15%;
		width:50%;
		aspect-ratio:1;
		max-width:300px;
		background-image:url('img/print.png');
		background-size:contain;
		background-repeat:no-repeat;
		pointer-events:none;
		z-index:-1;
	}
	.order-md-2 .print {
		left:unset;
		right:-15%;
	}
	.printed.printed-white .print, .bg-beige .printed .print {
		background-image:url('img/print-white.png');
	}



	/* Fades */
	.fade-in {
		opacity:0;
		transition:opacity .8s, transform .8s;
		transform:translateY(30%);
	}
		.fade-in.from-top {
			transform:translateY(-30%);
		}
		.fade-in.from-right {
			transform:translateX(30%);
		}
		.fade-in.from-left {
			transform:translateX(-30%);
		}
		.fade-in.visible {
			opacity:1;
			transform:translateX(0%);
		}


.plyr {
	border-radius:23px;
}


/* Blogs */
.related-posts {
	padding:100px 0;
}
.blog-card {
  background-color:var(--beige);
  color:var(--brown);
  border-radius:23px;
	position:relative;
	margin-bottom:30px;
	display:block;
	min-height:calc(100% - 30px);
	overflow:hidden;
}
.related-posts .blog-card {
	background-color:white;
}
.blog-card img {
  width:100%;
  height:200px;
  object-fit:cover;
  object-position:center;
}

.blog-card__content {
  padding:10px 20px 20px 20px;
}
  .blog-card__content a {
    color:var(--brown);
  }
    .blog-card__content a:hover {
      text-decoration:none;
    }
  .blog-card__excerpt p {
    font-size:16px;
    padding:5px 0px;
    margin:0;
  }

.blog-pagination {
  color:var(--brown);
}
.blog-pagination a {
  color:var(--gold);
}


/* Ervaringen */
.ervaring {
	padding:50px;
	margin-bottom:30px;
	overflow:hidden;
	position:relative;
	background-image:url('img/print-white.png');
	background-size:240px auto;
	background-repeat:no-repeat;
	background-position:120% -80px;
	background-color:var(--beige);
	color:var(--brown);
  text-align:center;
  border-radius:30px;
}

	.column:nth-of-type(1) .ervaring:nth-of-type(even),
	.column:nth-of-type(2) .ervaring:nth-of-type(odd) {
		background-color:var(--sand);

	}

@media (max-width:991px) {
  .ervaring {
    padding:30px;
  }
}

/* Forms */

.form label {
	font-weight:500 !important;
}
.nf-element {
	border:1px solid var(--brown) !important;
	border-radius:20px;
	padding:5px 15px;
}
.nf-before-form-content {
	margin-bottom:20px;
}

.nf-element[type="submit"] {
	background-color:var(--gold);
	border-color:var(--gold) !important;
	color:white;
	padding:10px 22px;
	border-radius:30px;
}
.bc-ninja-form {
	max-width:400px;
}



/* GDPR */
#gdprc_bar {
		background-color:var(--brown);

	background-size:cover;
	background-position:center;
	color:white;
	border-top:0;
	padding-top:30px;
	max-height:60vh;
	overflow-y:auto;
}

@media (max-width:991px) {
	#gdprc_bar {
			background-color:var(--brown);
	}
}
	#gdprc_bar .container {
		max-width:1400px;
	}
	#gdprc_bar .container_gdprc_bar {

		padding-bottom:30px;
	}

}
.button.gdprc_action {
	min-height:0 !important;
	padding:0px 15px !important;
	margin:0px;
	border-radius:46px !important;
}
	.button.gdprc_action:before,
	.button.gdprc_action:after {
		display:none;
	}

.gdprc_link {
	color:var(--gold);
	font-weight:500 !important;
}
	.gdprc_link:hover {
		color:var(--gold);
	}

	#gdprc_bar h3, #gdprc_settings h3 {

		font-weight:500 !important;
	}
	#gdprc_bar p, #gdprc_settings p {
		font-size:16px;
	}
	#gdprc_settings {
		max-width:unset;
		border-radius:23px !important;
	}
	#gdprc_settings .gdprc_header,
	#gdprc_settings .gdprc_actions {
		background-color:var(--beige);
	}

	#gdprc_settings .gdprc_actions {
		text-align:left;
	}
		#gdprc_settings .button.gdprc_action {
			width:auto;
		}


		.gdprc_item__label {
			font-size:20px !important;
			font-weight:500 !important;
		}