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

@font-face {
  font-family: 'Marselis Pro';
  src: url('fonts/MarselisPro.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Marselis Pro';
  src: url('fonts/MarselisPro-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Marselis Pro';
  src: url('fonts/MarselisPro-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Marselis Pro';
  src: url('fonts/MarselisPro-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: 'Marselis Pro';
  src: url('fonts/MarselisPro-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Marselis Pro';
  src: url('fonts/MarselisPro-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: 'Marselis Pro';
  src: url('fonts/MarselisPro-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'Marselis Pro';
  src: url('fonts/MarselisPro-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
}


:root {
  /*--purple: #9060EF; */

	--pink: #D50D60;
	--pink-25: #ED9EBF;
  --pink-50: #E56D9E;
  --pink-75: #DD3E7F;
  --light: #F2F2F2;
	--dark:#212529;
	--gray:#939393;
  --aqua: #3ABACB;
	--plyr-color-main: var(--pink);

}



.cl-white { color:white !important; }
.cl-pink { color:var(--pink); }
.cl-purple { color:var(--purple); }
.cl-black { color:black !important; }

.bg-white {
  background-color:white;
  color:var(--pink);
}
.bg-light {
  background-color:var(--light);
}
.bg-pink {
  background-color:var(--pink);
  color:white;
}
.bg-aqua {
  background-color:var(--aqua);
  color:white;
}


body, html {
	width:100%;
	font-family:marselis pro;
	overflow:auto;
	margin:0px auto;
	*background-color:var(--pink);
  overflow-x:hidden;
  min-height:100%;
  scroll-behavior: smooth;
  scroll-margin-top:80px;
}
body {
  height:100%;
}
h1, h2, h3, h4, h5, h6 {
	font-weight:bold;
  color:var(--dark);
}
h1 {
  font-size:50px;
}
@media (max-width:991px) {
  h1 { font-size:38px; }
  h2 { font-size:26px; }
}
p {
	color:var(--dark);
}
.v-align {
	position: relative;
  top: 50%;
  height: auto;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
.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; }

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

@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; }

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


.button {

	background-color:var(--pink);
	color:white !important;
	display:inline-block;
	border-radius:30px;
	cursor:pointer;
	position:relative;
	z-index:1;
	font-weight:bold;
	overflow:hidden;
	transition:.3s;
	text-decoration:none !important;
  text-align:center;
  outline:0;
	border:0px solid transparent;
	padding: 16px 32px;
}
.button.disabled {
  opacity:.5;
  pointer-events:none;
}
.button.small {
	border-radius:30px;
	font-size:14px;
  padding:5px 15px;
  white-space:nowrap;
}
.button.bg-white {
	background-color:white;
	color:var(--pink) !important;
	border:2px solid var(--pink);
	padding: 14px 30px;
}
.button.small.bg-white {
  padding:3px 13px;
}

.button .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.bg-white .bubble {
		background-color:rgba(0,0,0,0.1);
	}
	.button:hover .bubble {
		transition:transform .5s;
		transform:translate(-50%, -50%) scale(1);
	}
	.button:active {
		transform:scale(.9);
	}

@media (max-width:991px) {
  .button { padding: 10px 20px; }
  .button.bg-white { padding:8px 18px; }
}
@media (min-width:767px) {
	.button ~ .button {
		margin-left:10px;
	}
}

.button.small i {
  margin-right:6px;
  bottom:-1px;
  position:relative;
}

.top-bar {
	position:fixed;
	top:0;
	left:0;
	height:100px;
	background-color:transparent !important;
	color:var(--pink);
	width:100%;
	padding:20px 15px;

	transition:.3s;
	z-index:999;
}

	}
.top-bar.bg-pink {
	color:white;

}
.scrolling .top-bar {
  	background-color:white !important;
}
.scrolling .top-bar.bg-pink {
  	background-color:var(--pink) !important;
}
.scrolling .top-bar {
	height:80px;
}
@media screen and (max-width:767px) {
  .top-bar {
    height:80px;
  }
}


.top-bar .container {
	height:100%;
	position:relative;
}
	.top-bar .logo {
		width:200px;
		height:100%;
		background:var(--pink);
		-webkit-mask: url('img/logo.svg') no-repeat center left;
	  mask: url('img/logo.svg') no-repeat center left;
	  -webkit-mask-size: contain;
	  mask-size: contain;
		position:relative;
		display:block;
	}

	.top-bar.bg-pink .logo {
		background:white;
	}


	.top-bar .burger {
		position:absolute;
		right:25px;
		top:calc(50% - 25px);
		height:50px;
		width:50px;
		display:flex;
		align-items:center;
		justify-content: center;
		cursor:pointer;
    border-radius:50%;
		background-color:white;
	}
  .top-bar.bg-pink .burger {
    background-color:var(--pink);
  }
		.top-bar .burger .lines {
			width:45%;
			height:2px;
			border-radius:2px;
			background-color:var(--pink);
			box-shadow:0px -8px 0px var(--pink), 0px 8px 0px var(--pink);
			transition:.3s;
		}
		.top-bar .burger:hover .lines {
			box-shadow:5px -8px 0px var(--pink), -5px 8px 0px var(--pink);
		}
		.top-bar.bg-pink .burger .lines {
			background-color:white;
			box-shadow:0px -8px 0px white, 0px 8px 0px white;

		}
		.top-bar.bg-pink .burger:hover .lines {
			box-shadow:5px -8px 0px white, -5px 8px 0px white;
		}





		nav {
			width:100vw;
			height:100vh;
			position:fixed;
			top:0;
			right:0;
			max-width:400px;
			z-index:1000;
			background:var(--pink);
			transform:translateX(100%);
			opacity:0;
			transition:.5s;
			overflow:hidden;
		}
		nav.opened {
			transform:translateX(0%);
			opacity:1;
		}
		nav:after {
			content:" ";
			width:100%;
			height:100%;
			position:absolute;
			top:0;
			left:0%;
			z-index:-1;
			background-color:rgba(0,0,0,.1);
		}

			nav .close {
				position:absolute;
				right:25px;
				top:30px;
				height:40px;
				width:40px;
				display:flex;
				align-items:center;
				justify-content: center;
				cursor:pointer;
				z-index:2;
				opacity:1 !important;
				transition:.3s;
			}
			.scrolling nav .close {
				top:20px;
			}
					nav .close:before,
					nav .close:after {
						width:2px;
						height:26px;
						position:absolute;
						content:" ";
						pointer-events:none;
						background-color:white;
						transform:rotate(45deg);
						transition:.25s;
					}
						nav .close:after {
							transform:rotate(-45deg);
						}
						nav .close:hover:before {
							height:14px;
							margin-top:9px;
						}
						nav .close:hover:after {
							height:14px;
							margin-bottom:9px;
						}


			nav .menu-items {
				width:100%;
				margin-top:100px;

				transition:.3s
			}

			.scrolling nav .menu-items {
				margin:80px 0 0 0;
				padding:0;
			}
			nav .menu-items ul {
				padding:0;
				margin:0;
			}
				nav .menu-item {
					list-style-type:none;
					width:100%;
					color:white;
					text-overflow:ellipsis;
					white-space:nowrap;
					overflow:hidden;
				}

					nav .menu-item a {
						padding:20px 20px 20px 50px;
						text-overflow:ellipsis;
						white-space:nowrap;
						overflow:hidden;
						width:100%;
						color:white;
						display:block;
						text-decoration:none;
						transition:.3s;
						font-size:18px;
					}
					nav .menu-item a:hover {
						background-color:rgba(0,0,0,.1);
					}


header {
	background-image:url('https://www.miecdata.nl/web/image/5650-95b6216d/person-using-ai-tool-job%20%282%29.jpg');
	background-size:cover;
	background-position:center;
	position:relative;
	overflow:hidden;
	z-index:2;
}
	header:before {
		content:" ";
		width:100%;
		height:100%;
		position:absolute;
		top:0;
		left:0;
		background: #ffffff;
		background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.61) 45%, rgba(255, 255, 255, 0) 100%);

  	mix-blend-mode:lighten;
		z-index:-1;
	}
@media (max-width:991px) {
  header:before {
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.61) 100%);

  }
}
.rounded {
  border-radius:20px !important;
}
.curve-top,
.curve-bottom {
	position:relative;
	overflow:visible;
	z-index:2;
}
.curve-top:before {
	content:" ";
	width:100%;
	height:100px;
	position:absolute;
	bottom:calc(100% - 1px);
	background:inherit;
	z-index:-1;

	-webkit-mask: url('img/curve_overlay.svg') no-repeat center left;
	mask: url('img/curve_overlay.svg') no-repeat center left;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}
.curve-bottom:after {
	content:" ";
	width:100%;
	height:100px;
	position:absolute;
	top:calc(100% - 1px);
	background:inherit;
	z-index:-1;
	transform:scaleY(-1);
	-webkit-mask: url('img/curve_overlay.svg') no-repeat center left;
	mask: url('img/curve_overlay.svg') no-repeat center left;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

@media (max-width:991px) {
  .curve-top:before, .curve-bottom:after { height:50px; }

}
@media (max-width:767px) {
  .curve-top:before, .curve-bottom:after { height:20px; }
}


footer {

	color:white;
}
  footer .logo {
    width:200px;
		height:100px;
		background:white;
		-webkit-mask: url('img/logo.svg') no-repeat center left;
	  mask: url('img/logo.svg') no-repeat center left;
	  -webkit-mask-size: contain;
	  mask-size: contain;
		position:relative;
		display:block;
  }

  footer h4,
  footer a, footer a:hover {
    color:white;
  }

.plyr {
  border-radius:20px;
  overflow:hidden;
  position:relative;
}