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

:root {
	--red:#D43732;
	--purple:#201646;
	--orange:#E38037;
	--yellow:#FFC62F;
	--blue:#5FDAFF;
	--darkblue:#101426;
	--formblue: #1e374c;
}



body, html {
	width:100%;
	margin:0px auto;
	 font-family: "Montserrat", sans-serif;
	 background-image: url("img/Digiweerbaar_BG.jpg");
	 background-size:cover;
	 background-repeat:no-repeat;
	 background-color:#101426;
}



h1 {
	font-weight:400;
	font-size:110px;
	color:var(--blue);
}

h2 {
	font-weight:700;
	font-size:40px;
	color:var(--blue);
}

h3 {
	font-weight:400;
	font-size:24px;
	color:var(--blue);
	margin-top:30px;
}

a {
	color:var(--blue);
	text-decoration:underline;
}


p {
	color:white;
	font-size:20px;
	font-weight:500;
}



label, .nf-label-span {
	color:white;
	font-size:20px;
	font-weight:400;
}

p.smaller {
	font-size:16px;
}

ol{
  list-style: none; 
  counter-reset: item;
  padding-left: 0;
  font-size:20px;
	font-weight:500;
	color:#ffffff;
}

ol li {
  counter-increment: item;
  position: relative;
  margin: 1em 0;
  padding-left: 4em; 
  font-size:20px;
	font-weight:500;
	margin-bottom:40px;
}

ol li::before {
  content: counter(item);
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 2em;
  height: 2em;
  line-height: 2em;
  border-radius: 50%;
  background-color: var(--blue);
  color: white;
  font-weight: bold;
  text-align: center;
  font-size: 1.2em;
}

ul, ul li {
	color:#ffffff;
	font-size:20px;
}

.button {
	background-color:var(--blue);
	color:#ffffff;
	font-weight:700;
	padding:10px 30px;
	display: inline-block;
	margin-right:30px;
	transition: 0.3s;
	text-decoration:none;
}

.button:hover {
	background-color:var(--formblue);
	color:#ffffff;
	text-decoration:none;
}
	
	

div.desktop {
	width:100vw;

	height:100px;
	position:fixed;
	overflow:hidden;
	top:0;
	left:0;
	transition:.3s;
	z-index:50;
}

	div.desktop .container {
		height:100%;
	}
	div.desktop .contents {
		display:flex;
		margin:10px 0;
		gap:20px;
		justify-content: flex-end;
	}
		

.hamburger-container {
	background-color:var(--darkblue);
	height:100px;
	width:100vw;
	box-shadow:0 30px 26px #00000050;
	position:fixed;
	top:0;
	z-index:1000;
}


.hamburger {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 16px 14px 14px;
 background-color:var(--blue);
  border-radius: 100vw;
  z-index:90;
  position:fixed;
  top:20px;
  right:20px;
}

.hamburger input {
  display: none;
}

.hamburger svg {
  height: 2rem;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events:none;
}

.line {
  fill: none;
  stroke: var(--darkblue);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  transition: stroke-dasharray 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dashoffset 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.line-top-bottom {
  stroke-dasharray: 12 63;
}

.hamburger input:checked + svg {
  transform: rotate(-45deg);
}

.hamburger input:checked + svg .line-top-bottom {
  stroke-dasharray: 20 300;
  stroke-dashoffset: -32.42;
}



.menu-panel {
  position: fixed;
  top: 100px;
  right: -575px;
  width:100vw;
  height: 100%;
  background: var(--darkblue);
  color: white;
  padding: 60px 20px;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
  transition: right 0.3s ease;
  z-index:25;
}

.menu-panel.opened {
  right: 0;
}

.menu-panel ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-panel li {
}

.menu-panel a {
  color: white;
  text-decoration: none;
  font-size: 18px;
  padding:10px 0;
  display:block;
}

.menu-panel a:hover {
  color: var(--blue);
}

.menu-panel-background {
  position: fixed;
  top: 0;
  right: -100%;
  width:100vw;
  height: 100%;
  background: var(--darkblue);
  color: white;
  padding: 60px 20px;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
  transition: right 1s ease;
  z-index:20;
  opacity:0.3;
}

.menu-panel-background.opened {
	right: 0;
}

header {
	width:100%;
	max-width:100%;
	overflow:hidden;
	position:relative;
}


.tech-header {
	width: auto;
  max-width: 100%;
  height: auto;
  top: -260px;
	overflow:hidden;
	  position: relative;
}

.fixed-container {
	margin-top:400px;
}

.karakter-home-header {
		width:300px;
		top:110px;
		margin:0 auto;
	}

h1 {
	
	font-size:50px;
}



@media (min-width: 576px) {
		.fixed-container {
			width: 481px;
			height: 320px;
			padding-left: 80px;
			padding-top: 61px;
			margin-top: 70px;
		}
  
		h1 {
			font-size:50px;
		}
	
		.tech-header {
			width:150px;
			height:auto;
			top:50px;
			transform:rotate(0deg);
		}
		
		.karakter-home-header {
			width:160px;
			top:170px;
		}
		
		.menu-panel {
			width:300px;
		}
}

@media (min-width: 767px) {
	.fixed-container {
		width: 631px;
		height: 400px;
		padding-left: 100px;
		padding-top: 118px;
	}
  
	h1 {
		  font-size:60px;
	}
	
	.tech-header {
		width:240px;
		height:auto;
	}
	
	.karakter-home-header {
		width:200px;
		top:180px;
	}
}

@media (min-width: 991px) {
  .fixed-container {
		width: 754px;
		height: 510px;
		padding-left: 100px;
		padding-top: 149px;
  }
  
  h1 {
		  font-size:70px;
	}
	
	.tech-header {
		width:300px;
		height:auto;
	}
	
	.karakter-home-header {
		width:300px;
		top:220px;
	}
}

	
@media (min-width: 1200px) {
  .fixed-container {
		width: 1106px;
    height: 770px;
    padding-left: 100px;
    padding-top: 186px;
		
  }
  
  h1 {
		  font-size:110px;
	}
	
	.tech-header {
		width:384px;
	}
	
	.karakter-home-header {
		width:500px;
		top:280px;
	}
}


	
	header.sub {
		max-height:400px;
	}
	
	

main {
	padding:100px 0px;
	position:relative;
	scrollbar-width: none;   
}

footer {
	background-color:var(--darkblue);
	color:white;
	padding:26px 0 30px;
	position:relative;
	z-index:80;
	
	box-shadow:0 -30px 26px #00000050;
}

.nf-form-fields-required {
	display:none;
}

input[type="text"],
input[type="email"] {
	padding:10px;
}


input, textarea {
	border:0;
	border-radius:0;
	background-color:var(--formblue);
	color:white;
}

.nf-form-content  .ninja-forms-req-symbol {
	color:#873953;
}

 .particles-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: 3;
	pointer-events: none;
	overflow:hidden;
}

.particle {
	position: absolute;
	background: var(--blue);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
}

 .karakter-footer {
	position:absolute;
	bottom:-20px;
	right:-70px;
	width:300px;
}

@media (min-width: 767px) {
	 .karakter-footer {
		position:absolute;
		bottom:-20px;
		right:-70px;
		width:600px;
	}

}

@media (min-width: 991px) {
	 .karakter-footer {
		position:absolute;
		bottom:-20px;
		right:0;
		width:600px;
	}

}

@media (min-width: 1200px) {
  .karakter-footer {
		position:absolute;
		bottom:-20px;
		right:0;
		width:800px;
	}

}

@keyframes floatUpDown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}


.floating {
  animation: floatUpDown 3s ease-in-out infinite;
}

h2.vaardig {
	font-size:40px;
}

.video-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
}

.video-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.ons-aanbod-lespakketten h1 {
	font-size:40px;
	
}

.karakter-pakketten-header {
	width: 300px;
  top: 110px;
  margin: 0 auto;
}
	
.flex-middle {
  display: flex;
  align-items: center; 
  
  border-radius:50px;
  padding:50px;
}

.flex-middle b {
	font-size:24px;
}

.flex-middle.gastles {
	border:4px solid var(--blue);
	background: #8EE5FF;
background: linear-gradient(180deg, rgba(142, 229, 255, 0.35) 0%, rgba(33, 29, 199, 0) 100%);
}

.flex-middle.masterclass {
	border:4px solid #DE71FF;
	background: #DE71FF;
background: linear-gradient(180deg,rgba(222, 113, 255, 0.35) 0%, rgba(33, 29, 199, 0) 100%);
}

.flex-middle.lespakket {
	border:4px solid #9C2BBF;
	background: #9C2BBF;
background: linear-gradient(180deg, rgba(156, 43, 191, 0.35) 0%, rgba(33, 29, 199, 0) 100%);
}

.flex-middle > [class*='col-'] {
  float: none; 
}

.ons-aanbod-lespakketten .fixed-container {
	width: 100%;
	margin-top:450px;
}


@media (min-width: 576px) {
	
	.ons-aanbod-lespakketten .fixed-container {
		padding-left:40px;
		width: 530px;
		height: 230px;
		margin-top:0;
	}
	
	.karakter-pakketten-header {
		width: 160px;
		top: 130px;
		margin:0 auto;
	}
	.ons-aanbod-lespakketten h1 {
		font-size:40px;
		
	}
	
	.flex-middle {
		
	}
	
}

@media (min-width: 768px) {
	
	.ons-aanbod-lespakketten .fixed-container {
		width: 700px;
		height: 390px;
	}
	
	.karakter-pakketten-header {
		width: 270px;
    top: 193px;
	}
	.ons-aanbod-lespakketten h1 {
		font-size:50px;
		
	}
	
}

@media (min-width: 992px) {
	
	.ons-aanbod-lespakketten .fixed-container {
		width: 820px;
		height: 390px;
	}
	
	.karakter-pakketten-header {
		width: 270px;
    top: 193px;
	}
	.ons-aanbod-lespakketten h1 {
		font-size:60px;
		
	}
	
}

@media (min-width: 1200px) {
	
	.ons-aanbod-lespakketten .fixed-container {
		width: 1070px;
    height: 500px;
	}
	
	.karakter-pakketten-header {
		width: 380px;
    top: 200px;
	}
	.ons-aanbod-lespakketten h1 {
		font-size:80px;
		
	}
	
}

@media (min-width: 1200px) {
	.karakter-pakketten-header {
		width:410px;
		top:290px;
		margin:0 auto;
	}
	.ons-aanbod-lespakketten .fixed-container {
		width: 1106px;
		height: 770px;
		padding-left: 100px;
		padding-top: 186px;
	}
	
}