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

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
	--blue:#005081;
	--lightblue:#EDF7FA;
	--orange:#FF781C;

}

.cl-white { color:white; }
.cl-blue { color:var(--blue); }
.cl-lightblue {color:var(--lightblue); }
.cl-orange { color:var(--orange); }

.bg-blue { background-color:var(--blue); }
.bg-lightblue { background-color:var(--lightblue); }
.bg-orange { background-color:var(--orange); }

@font-face {
    font-family: 'doctor_glitchregular';
    src: url('fonts/doctor-glitch-webfont.woff2') format('woff2'),
         url('fonts/doctor-glitch-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


body, html {
	width:100%;
	overflow:auto;
	margin:0px auto;
	font-family:poppins;

}

h1 {
	font-weight:700;
	font-size:100px;
}
h2 {
	font-weight:600;
	font-size:50px;
	color:var(--blue);
}
h3 {
	font-weight:600;
	font-size:28px;
	color:var(--blue);
}

p {
	font-size:18px;
	font-weight:300;
}
p a, p a:hover {
	color:var(--blue);
}
p strong {
	font-weight:600;
}
@media screen and (max-width:991px) {
	h2 { font-size:30px; }
	h3 { font-size:22px; }
	p { font-size:16px; }
}
.v-align {
	position: relative;
  top: 50%;
  height: auto;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

.button {
	background-color:var(--blue);
	color:white;
	font-weight:500;
	padding:14px 20px;
	transition:.3s;
	overflow:hidden;
	z-index:1;
	position:relative;
	display:inline-block;
	border:0;
	border-radius:0 !important;
		border:2px solid var(--blue);
}
	.button:hover {
		color:var(--blue) !important;
		text-decoration:none;
		cursor:pointer;

	}

	.button:before,
	.button:after {
		content:" ";
		width:calc(50% + 30px);
		position:absolute;
		top:-100%;
		left:0;
		height:100%;
		background-color:white;
		z-index:-1;
		clip-path:polygon(0% 0%, 100% 0%, calc(100% - 20px) 100%, 0% 100%);
		transition:.3s;
	}
	.button:after {
		top:100%;
		right:0px;
		left:unset;
		clip-path:polygon(20px 0%, 100% 0%, 100% 100%, 0% 100%);
	}
		.button:hover:before,
		.button:hover:after {
			width:calc(50% + 10px);
			top:0%;
		}



.p-200 { padding-top:200px; padding-bottom:200px; }
.pt-200 { padding-top:200px; }
.pb-200 { padding-bottom:200px; }

.p-100 { padding-top:100px; padding-bottom:100px; }
.pt-100 { padding-top:100px; }
.pb-100 { padding-bottom:100px; }

.p-50 { padding-top:50px; padding-bottom:50px; }
.pt-50 { padding-top:50px; }
.pb-50 { padding-bottom:50px; }

@media screen and (max-width:991px) {
	.p-200 { padding-top:100px; padding-bottom:100px; }
	.pt-200 { padding-top:100px; }
	.pb-200 { padding-bottom:100px; }

	.p-100 { padding-top:50px; padding-bottom:50px; }
	.pt-100 { padding-top:50px; }
	.pb-100 { padding-bottom:50px; }

	.p-50 { padding-top:25px; padding-bottom:25px; }
	.pt-50 { padding-top:25px; }
	.pb-50 { padding-bottom:25px; }
}

nav.desktop {
	width:100%;
	height:auto;
	position:fixed;
	overflow:visible;
	top:0;
	left:0;
	transition:.3s;
	background:white;
	z-index:100;
}

	nav.desktop .container {
		height:100%;
	}
	nav.desktop .contents {
		display:flex;

		gap:20px;
		justify-content: space-between;
		align-items:center;
		height:128px;
		transition:.4s;
	}
	nav.desktop.scrolling .contents {
		height:80px;
	}
		nav.desktop .logo {

			width:auto;
			text-decoration:none;

		}
		nav.desktop .logo h1 {
			font-size:30px;
			line-height:30px;
			margin:0;
			color:var(--blue);
			font-family:doctor_glitchregular;
			white-space: nowrap;
		}


			nav.desktop  .hoofdnavigatie {
				list-style-type:none;
				padding-left:0;
				display:flex;
				height:100%;
				align-items:center;
				justify-content: flex-end;
				width:100%;
				gap:40px;
				margin-bottom:0;
			}
				nav.desktop .hoofdnavigatie a {
					color:var(--blue);
					text-decoration:none;
					position:relative;
					overflow:visible;
					display:block;
					transition:.3s;
				}
				nav.desktop .hoofdnavigatie a:hover {
					color:black;
				}

				nav .hoofdnavigatie li:last-of-type a {
					background-color:var(--blue);
					color:white;
					padding:3px 15px;
					border:2px solid var(--blue);
				}
				nav .hoofdnavigatie li:last-of-type a:hover {
					background-color:white;
					color:var(--blue);
				}




			nav.desktop .burger	{
				height:40px;
				aspect-ratio:1 / 1;

				display:flex;
				align-items:center;
				justify-content:center;
				font-size:20px;
				cursor:pointer;
				display:none;
				color:white;
				transition:.3s;
				background-color:var(--blue);
				border:2px solid var(--blue);
			}
				nav.desktop .burger:hover {
					background-color:white;
					color:var(--blue);
				}


nav.mobile {
	position:fixed;
	width:100vw;
	height:100vh;
	overflow-y:auto;
	background:white;
	left:100%;
	opacity:0;
	transition:.4s;
	pointer-events:none;
	z-index:1000;
}
	nav.mobile .container {
		position:relative;
		overflow:hidden;
	}
	nav.mobile .close {
		width:40px;
		height:40px;
		position:absolute;
		top:45px;
		right:25px;
		height:40px;
		color:white;
		background-color:var(--blue);
		border:2px solid var(--blue);
		line-height:40px;
		text-align:center;
		opacity:1;
		transition:.3s;
		font-size:20px;
	}
	nav.mobile .close:hover {
		background-color:white;
		color:var(--blue);
	}
	nav.mobile ul {
		list-style-type:none;
		padding-left:0;
		margin-top:60px;
	}
		nav.mobile ul li {
			height:40px;
			line-height:40px;
			padding:0px 20px;
		}
		nav.mobile ul li a {
			color:var(--blue);
			transition:.3s;
			text-decoration:none;
		}
			nav.mobile ul li a:hover {
				color:black;
			}


@media screen and (max-width:1399px) {
	nav.desktop  .hoofdnavigatie {
		display:none;
	}
	nav.desktop .burger	{
		display:flex;
	}
	nav.mobile.opened {
		left:0;
		opacity:1;
		pointer-events:auto;
	}
}
@media screen and (max-width:991px) {
	nav.desktop .logo h1 {
		white-space:normal;
	}
}


main {

	margin-top:170px;
}


.ticker {
  --duration: 18s;
  overflow: hidden;
  white-space: nowrap;
	background-color:var(--blue);
	color:white;
}

	.ticker .track {
	  display: flex;
	  width: max-content;
	  animation: ticker-scroll var(--duration) linear infinite;
	}

	.ticker .group {
	  display: flex;
	  align-items: center;
	  gap: 0;
	  padding: 3px 0px;
		font-weight:700;
		font-style:italic;
		text-transform:uppercase;
		font-size:26px;
	}

	.ticker .group > span {
	  flex: 0 0 auto;
	}
		.ticker .group > span:after {
			content:" // ";
			color:var(--orange);
			padding:0px 15px;
		}

	@keyframes ticker-scroll {
	  from { transform: translateX(0); }
	  to   { transform: translateX(-50%); }
	}

	.ticker:hover .track {
	  *animation-play-state: paused;
	}

	@media (prefers-reduced-motion: reduce) {
	  .ticker .track { animation: none; }
	}

@media screen and (max-width:991px) {
	.ticker .group {
		font-size:16px;
	}
	main {
		margin-top:150px;
	}
}

.cyberstand::-webkit-scrollbar {
  width: 6px;
	border-radius:6px;
}

	.cyberstand::-webkit-scrollbar-track {
	  background: transparent;
	}
	.cyberstand::-webkit-scrollbar-thumb {
	  background: var(--blue);
		border-radius:6px;
	}
	.cyberstand::-webkit-scrollbar-thumb:hover {
	  background: var(--orange);
	}

	.cyberstand {
		display:flex;
		flex-direction:column;
		gap:25px;
		margin-top:30px;
		max-height:400px;
		overflow-y:scroll;
		padding-right:5px;
		scrollbar-width: thin;
  	scrollbar-color: var(--blue) transparent;

		--top-fade: 0%;
  	--bottom-fade: 70%;
		-webkit-mask-image: linear-gradient(
			 to bottom,
			 transparent 0%,
			 black var(--top-fade),
			 black var(--bottom-fade),
			 transparent 100%
		 );
		 mask-image: linear-gradient(
			 to bottom,
			 transparent 0%,
			 black var(--top-fade),
			 black var(--bottom-fade),
			 transparent 100%
		 );

		 transition:
			 --top-fade 1.3s ease,
			 --bottom-fade 1.3s ease;
		}
	}
	.cyberstand[data-scroll-pos="top"] {
		--top-fade: 0%;
		--bottom-fade: 70%;
	}
	.cyberstand[data-scroll-pos="scrolling"] {
		--top-fade: 15%;
	  --bottom-fade: 85%;
	}

	.cyberstand[data-scroll-pos="bottom"] {
		--top-fade: 30%;
	  --bottom-fade: 100%;
	}
		.cyberstand .gem {
			background:white;
			color:var(--blue);
			display:flex;
			padding:10px 15px 10px 10px;
			align-items:center;
			gap:20px;
			border:2px solid white;
			box-shadow:0px 7px 20px -10px rgba(0,0,0,.3);
			font-size:16px;
		}
			.cyberstand .gem .nr {
				display:block;
				font-weight:bold;
				color:white;
				aspect-ratio:1;
				background-color:var(--blue);

				margin-right:40px;
				width:40px;
				text-align:center;
				display:flex;
				align-items:center;
				justify-content:center;
			}

			.cyberstand .gem .naam {
				flex:1;
				font-weight:bold;
			}

		.cyberstand .gem:nth-of-type(1) {
			color:white;
			border-color:var(--blue);
			background-color:var(--blue);
		}

		.cyberstand .gem:nth-of-type(2),
		.cyberstand .gem:nth-of-type(3) {
			border-color:var(--blue);
		}

			.cyberstand .gem:nth-of-type(1) .nr {
				color:white;
				background-color:white;
				transform:scale(2) translateX(4px);
				z-index:1;
				font-size:10px;
				*box-shadow:0px 5px 10px -3px rgba(0,0,0,.3);
			}
			.cyberstand .gem .nr i {
				color:var(--blue);
				position:absolute;
				top:6px;
				left:5px;
				font-size:30px;
				z-index:-1;
			}



	/* Plyr */

	.plyr {
		--plyr-color-main:var(--orange);

	}

			.plyr > button.plyr__control {
				border:3px solid white;
				box-shadow:0px 0px 0px 5px var(--orange);
			}
			.plyr > button.plyr__control:hover {
				transform:translate(-50%, -50%);
			}
			.plyr input[type=range] {
				background:transparent !important;
			}
			.plyr .plyr__poster {
				background-size:cover;
			}
			.plyr .plyr__menu__container .plyr__control>span {
				color:var(--text_color);
			}
			.plyr .plyr__controls__item.plyr__menu {
				display:none !important;
			}



/* Highlight */

.highlight img {
	width:100%;
	aspect-ratio: 1 / 1;
	object-fit:cover;
	box-shadow:0px 20px 30px -10px rgba(0,80,129,.4);
}

.highlight h3 {
	min-height:67px;
	margin:30px 0;
}
@media screen and (max-width:991px) {
	.highlight {
		margin-bottom:50px;
	}
	.highlight h3 {
		min-height:0;
		margin:20px 0 10px 0;
	}
}


/* FAQ */
.faq-cont {
	box-shadow:0px 10px 30px -10px rgba(0,80,129,.4);
	padding:50px;
	background:white;
	position:relative;
	z-index:1;
}
.faq-item {
	width:100%;
	padding:30px;
	box-shadow:0px 10px 30px -10px rgba(0,80,129,.4);
	margin-bottom:30px;
	position:relative;
	overflow:hidden;
	min-height:130px;
}
	.faq-item .toggle {
		position:absolute;
		top:30px;
		right:30px;
		background-color:var(--blue);
		width:30px;
		height:30px;
		opacity:1;
		cursor:pointer;
		transition:.3s;
		z-index:3;
		border:2px solid var(--blue);
	}
	.faq-item .toggle:hover {
		background-color:transparent;
	}
		.faq-item .toggle:before,
		.faq-item .toggle:after {
			width:50%;
			height:2px;
			background:white;
			position:absolute;
			top:calc(50% - 1px);
			left:25%;
			content:" ";
			transition:.2s;
		}
		.faq-item .toggle:hover:after,
		.faq-item .toggle:hover:before {
			background:var(--blue);
		}
			.faq-item .toggle:after {
				transform:rotate(90deg);
			}
			.faq-item.opened .toggle:after {
				width:0px;
				left:50%;
			}

	.faq-item h4 {
		color:var(--blue);
		font-weight:700;
		font-size:16px;
		line-height:22px;
		width:calc(100% - 50px);
		margin-top:5px;
	}

	.faq-item .answer {
		height:0;
		opacity:0;
		transform:translateY(-20px);
		transition:.3s;
		pointer-events:none;

	}
		.faq-item.opened .answer {
			opacity:1;
			height:auto;
			transform:translateY(0);
			pointer-events:auto;
		}

		.faq-item .answer p {
				font-size:16px;
		}

@media screen and (max-width:991px) {
	.faq-item {
		min-height:0;
	}
}
/* footer */
footer {
	background-color:var(--blue);
	color:white;
	padding:150px 0 50px 0;
	background: #075081;
	background: linear-gradient(0deg, rgba(7, 80, 129, 1) 0%, rgba(36, 130, 155, 1) 100%);
	clip-path:polygon(0% 0%, 100% 100px, 100% 100%, 0% 100%);

	position:relative;
}
	footer h3 {
		color:white;
		margin-bottom:30px;
	}
	footer a {
		color:white;
	}
		footer a:hover {
			color:white;
		}

	footer .filler {
		height:150px;

	}
	.home footer {
		margin-top:-250px;
	}
footer .footer-row {
	display:flex;
	align-items:flex-end;
	gap:20px;
	padding-top:30px;
	height:100%
}
	footer .footer-row img {
		height:44px;

	}

@media screen and (max-width:991px) {
	footer .footer-row {
		flex-direction:column;
		align-items:flex-start;
	}
}
	/* Forms */
form {
	margin-top:50px;
}
form label {
	width:100%;
	color:var(--blue);
}
	.form-control {
		width:100%;
		max-width:none;

		line-height:40px;
		background:white;
		border-radius:0;

		padding:0px 10px;
		border:2px solid transparent;
		box-shadow:0px 10px 20px -3px rgba(0,80,129,.4);
		color:var(--blue);
		margin:5px 0;
	}
	.form-control:focus {
		border:2px solid var(--blue);
		box-shadow:0px 10px 20px -3px rgba(0,80,129,.4);

	}
	input.form-control {
			height:50px;
			line-height:50px;
	}
		input[type="submit"]:hover {
			background-color:white;
		}


#gdprc_bar a, #gdprc_settings a {
	color:var(--blue);
}

#gdprc_bar h3 {
	font-size:20px;
}

#gdprc_bar, #gdprc_bar p, .gdprc_item__label {
	font-size:12px !important;
	line-height:16px;
}

.gdprc_item__icon, .container_gdprc_bar .gdprc_actions{
	display:none;
}

#gdprc_settings .gdprc_item__toggle__wrapper label {
	width: 49px;
  height: 23px;
}

#gdprc_settings .gdprc_item__toggle__wrapper label::after {
	width: 14px;
  height: 14px;
}
#gdprc_bar .gdprc_link {
	color:rgb(34, 34, 34);
	text-decoration:underline;
	font-size:12px;
}