/*
Theme Name: A&O Subsidiewijzer WERKGEVERS
Theme URI: https://subsidiewijzer.aenofonds.nl/
Author: De Hulk
Author URI: https://vrhl.nl/
Description: VOOR WERKGEVERS
Version: 1.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: VRHL Content & Creatie
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
/* - - - - - V A R S - - - - - */

:root {
	--red: #C9004A;
	--blue: #0090D2;
	--lightblue: #D2E9F9;
	--lighterblue: #e7f8ff;
	--body: #0A0042;
	--green:#83B72F;
	--darkgreen:#6C7956;
	--lightgreen:#F0F6E5;
	--purple: #4F4972;
	--lightpurple: #e0dfea;
	--pink: #F8D9DE;
	--white: #ffffff;
	--lighterred: #f8efec;
	--lightred: #F8D9DE;
	--lightgrey: #cccccc;
	--toggleHeight: 35px;
	--toggleWidth: 70px;
	--toggleGap: 2px;




/* - - - - - F O N T S - - - - - */

--primairyfont: "santelia-rough-two", sans-serif;
--secondairyfont: "Raleway", sans-serif;
}

#switch {
	position: absolute;
	bottom: 0px;
	padding:20px 0px 20px 0px;
	left: 0%;
	width:100%;
	text-align:center;
	z-index:99999999;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(8.5px);
	-webkit-backdrop-filter: blur(8.5px);
}

#switch span {color:var(--white);}

.toggle {
	width: 0;
	height: 0;
	opacity: 0;
}

.toggle + label {
	position: relative;
	background: var(--red);
	width: var(--toggleWidth);
	height: var(--toggleHeight);
	display: inline-flex;
	align-items: center;
	border-radius: 25px;
	cursor: pointer;
	transition: background 0.2s ease-in-out;
	text-indent: calc(var(--toggleWidth) + 10px);
	white-space: nowrap;
}
.toggle + label:after {
	content: "";
	background: #fff;
	width: calc(var(--toggleHeight) - (var(--toggleGap) * 2));
	height: calc(var(--toggleHeight) - (var(--toggleGap) * 2));
	position: absolute;
	top: var(--toggleGap);
	left: var(--toggleGap);
	border-radius: 50%;
	transition: left 0.3s ease-in-out, background 0.2s ease-in-out;
}

label:after {
	background-color:#fff;
	box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

.toggle:checked + label {
	background: var(--blue);
}
.toggle:checked + label:after {
	left: calc(100% - calc(var(--toggleHeight) - var(--toggleGap)));
}

a {color:var(--dark)}

html, body {
	font-family: "Montserrat", sans-serif;
	color:var(--body);
	height:100%;
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
	font-size:16px;
	line-height:28px;
	height: 100%;
	background-image:url('assets/images/bg.png');
	background-size:100%;
	position: relative;
	text-rendering: optimizeLegibility;
	text-rendering: geometricPrecision; /* For sharper fonts, if needed */
	background-color:var(--lighterred);
}

h1 { font-weight:bold;}

h2 strong:nth-of-type(1) {font-weight:bold; color:var(--red);}
h2 strong:nth-of-type(2){font-weight:bold; color:var(--blue);}

h3{ 
	font-size:27px; font-weight:bold; color:var(--body);
	margin-bottom:32px;
	letter-spacing:-1px;
}

h4{font-size:18px; font-weight:bold;}

h5{
	font-size:16px; font-weight:500; color:var(--purple);
	margin-bottom:20px; text-transform:uppercase;

}

h6{
	font-size:16px; font-weight:bold; color:var(--body);
	margin-top:30px;

}

a {text-decoration:none;}

p {opacity:0.8;}

header {
	width:100%; height:90px;
	/* From https://css.glass */
	background: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(8.5px);
	-webkit-backdrop-filter: blur(8.5px);
	z-index:99;
}

/* - - - - - C L A S S E S - - - - - */

.min-h-100 {min-height: 100vh !important;}
.min-h-90 {min-height: 90vh !important;}
.min-h-85 {min-height: 85vh !important;}
.min-h-80 {min-height: 80vh !important;}
.min-h-70 {min-height: 70vh !important;}
.min-h-60 {min-height: 60vh !important;}
.min-h-50 {min-height: 50vh !important;}
.min-h-40 {min-height: 40vh !important;}
.min-h-30 {min-height: 30vh !important;}
.min-h-20 {min-height: 20vh !important;}
.min-h-10 {min-height: 10vh !important;}

.btn-red a {background-color:var(--red);}
.btn-blue a {background-color:var(--blue);}
.btn-green a {background-color:var(--green);}
.btn-darkgreen a {background-color:var(--darkgreen);}
.btn-dark a {background-color:var(--body);}
.btn-purple a {background-color:var(--purple);}
.btn-100 {max-width:500px; width:100%;}
.btn-100 a {max-width:500px; width:100%; display:block; margin-top:10px; transition:0.05s; box-shadow: rgba(14, 63, 126, 0.06) 0px 0px 0px 1px, rgba(42, 51, 70, 0.03) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 2px 2px -1px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.03) 0px 5px 5px -2.5px, rgba(42, 51, 70, 0.03) 0px 10px 10px -5px, rgba(42, 51, 70, 0.03) 0px 24px 24px -8px;}
.btn-100 a:hover {opacity:0.8; }


.shadoww {box-shadow: rgba(14, 63, 126, 0.06) 0px 0px 0px 1px, rgba(42, 51, 70, 0.03) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 2px 2px -1px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.03) 0px 5px 5px -2.5px, rgba(42, 51, 70, 0.03) 0px 10px 10px -5px, rgba(42, 51, 70, 0.03) 0px 24px 24px -8px;}


.btn-close {right:30px; position: absolute; top:30px; width:50px; height:50px; background-image:url('assets/images/close.svg');
	background-size:contain;}

	.bg-red {background-color:var(--red);}
	.bg-blue {background-color:var(--blue);}
	.bg-green {background-color:var(--green);}
	.bg-darkgreen {background-color:var(--darkgreen);}
	.bg-dark {background-color:var(--body);}
	.bg-purple  {background-color:var(--purple);}
	.bg-pink  {background-color:var(--pink);}




	.bg-pink h3  {color:var(--red);}

	.red {color:var(--red);}
	.blue {color:var(--blue);}
	.green {color:var(--green);}
	.darkgreen {color:var(--darkgreen);}
	.dark {color:var(--body);}
	.purple  {color:var(--purple);}
	.pink  {color:var(--pink);}


	.container-1600 {max-width:1600px !important;}
	.container-990 {max-width:1200px !important;}

	.margin-top{padding-top:120px !important;}

	.search-form input {display:block; 
		width:100%; 
		padding:20px; 
		border-radius:100px; 
		margin-top:20vh;
		background-image:url('assets/images/icon-search-purple.svg');
		background-repeat:no-repeat;
		background-position: calc(100% - 20px) center;
	}

	.border-radius{border-radius:20px;}


	.search {padding-right:35px;}
	.search::after{
		content:'';
		display:inline-block;
		width:20px;
		height:20px;
		margin-right:10px;
		background-image:url('assets/images/icon-search.svg');
		background-position: center center;
		background-repeat:no-repeat;
		background-size:contain;
		position: absolute;
		right:0px;
		top:5px;
	}

	.overview {padding-right:35px;}
	.overview::after{
		content:'';
		display:inline-block;
		width:20px;
		height:20px;
		margin-right:10px;
		background-image:url('assets/images/icon-overview.svg');
		background-position: center center;
		background-repeat:no-repeat;
		background-size:contain;
		position: absolute;
		right:0px;
		top:5px;
	}


	.hamburger {padding-right:40px;}
	.hamburger::after{
		content:'';
		display:inline-block;
		width:20px;
		height:20px;
		margin-right:10px;
		background-image:url('assets/images/icon-open.svg');
		background-position: center center;
		background-repeat:no-repeat;
		background-size:contain;
		position: absolute;
		right:0px;
		top:5px;
	}



	.box {
		border-radius:10px; 
		padding:30px 30px 60px; 
		background-size:50px; 
		background-position: 95% 95%;
		background-image:url('assets/images/arrow-right.svg');
		background-repeat:no-repeat;
		transition:0.1s;
	}

	.box:hover {
		opacity:0.8;

	}

	.box div {padding-top:3vh; padding-bottom:3vh;}

	.read-more {text-transform:uppercase; position: absolute; bottom:30px; left:30px; color:var(--dark); font-weight:600;}

	.open {top:0px; transition-delay:0.3s !important;}
	.close {top:-400vh; transition-delay:0.3s !important;}

/* - - - - - I D S - - - - - */

.online {opacity:1; transition:1s; filter: blur(0px); scale:1; transition-delay:0.6s !important;}
.offline {opacity:0.5; transition:1s; filter: blur(5px); scale:0.95; }

#black-overlay {
	position: fixed;
	height:100vh;
	width:100%;
	background-color:var(--body);
	left:0px;
	top:0px;
	z-index:999;
	transition:0.3;
	z-index:9999;
}

.on {visibility:visible; 
	opacity:0.5;  
	animation-name: fadeee;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
}

.off {visibility:hidden; opacity:0;}

/* The animation code */
@keyframes fadeee {
	0%   {opacity:0;}
	100%   {opacity:0.4;}
}

/* The element to apply the animation to */
div {

} 

.aanbieder {max-width:200px;}

#nav {
	background-color:var(--purple);
	position: fixed;
	background-color:#4F4972;
	background-position: right bottom;
	background-size:contain;
	background-image:url('assets/images/bg.png');
	background-attachment: fixed;
	display:block;
	width:100%;
	transition-delay:0.3s !important;
	z-index:999999;
	left:0px;
	transition:1s;
	overflow-y:scroll !important;
	overflow-x:hidden;
	transition: all 700ms cubic-bezier(1.000, -0.005, 0.000, 1.000); /* custom */
	transition-timing-function: cubic-bezier(1.000, -0.005, 0.000, 1.000); /* custom */
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
	height:100vh;
}

#nav::-webkit-scrollbar {
	display: none;
}

#logo-top {
	width:60px;
	height:60px;
	position: fixed;
	top:15px;
	left:20px;
	z-index:9999999;
	background-image:url('assets/images/logo-aeno.svg');
	background-size:contain;
	background-position: center center;
	background-repeat:no-repeat;
	display:block;
}

#logo-top-text {
	width:270px;
	height:80px;
	position: fixed;
	top:5px;
	left:calc(50% - 135px);
	background-image:url('assets/images/logo-aeno-text.svg');
	background-size:contain;
	display:block;
	background-position: center center;
	background-repeat:no-repeat;
}

#nav-right-top {
	position: fixed;
	right:0px;
	top:30px;
	display:block;
	z-index:33;
	color:var(--red);
}

#nav-right-top ul li{
	display:inline-flex; 
	margin: 0px 20px;
	color:var(--red);
}
#nav-right-top ul li{
}

#nav-right-top ul li a{
	color:var(--red);
	font-size:18px;
	font-weight:500;
	position: relative;
}

#mega-menu h6 {
	color:#F8D9DE;
	text-transform:uppercase;
}

#mega-menu ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	padding: 20px 0px;
}
#mega-menu ul li {transition:0.1s;}
#mega-menu ul li:hover {opacity:0.5; padding-left:2px;}

#mega-menu ul li {

	padding: 5px 0px;
}

#mega-menu ul li a {
	color:var(--white);
}

.bbl-opleidingen {background-color:var(--pink);}
.bbl-opleidingen h3 {color:var(--red);}

.duurzame-inzetbaarheid-verbeteren {background-color:var(--lightgreen);}
.duurzame-inzetbaarheid-verbeteren h3 {color:var(--green);}

.externe-opleidingen-niet-mbo {background-color:var(--lightpurple);}
.externe-opleidingen-niet-mbo h3 {color:var(--body);}

.interne-opleidingen {background-color:var(--lightpurple);}
.interne-opleidingen h3 {color:var(--purple);}

.financieel-adviesgesprek {background-color:var(--lightblue);}
.financieel-adviesgesprek h3 {color:var(--blue);}

.uitzendkrachten {background-color:var(--lightgreen);}
.uitzendkrachten h3 {color:var(--darkgreen);}

.geen-lid {background-color:var(--lightgreen);}
.geen-lid h3 {color:var(--darkgreen);}

/* - - - - - G U T E N B E R G - S T Y L I N G - - - - - */

.sticky-top {top:140px;}

#content {min-height: 100vh;}
#content ul{list-style-type: none; padding-left:0px; }
#content ul li {padding-left:40px; position: relative; margin-bottom:15px; opacity:0.8}
#content ul li::before{
	position: absolute;
	left:0px;
	top:0px;
	content:'';
	width:30px;
	height:30px;
	display:inline-block;
	background-image:url('assets/images/arrow-right.svg');
	background-repeat:no-repeat;
	background-size:contain;
}

#content h2 { 
	font-size:18px !important;
	letter-spacing:0px;
	color:var(--red); 
}

.groen div h2 {color:var(--green) !important;}
.roze  div h2{color:var(--pink) !important;}
.blauw div h2 {color:var(--blue) !important; }
.grijs div h2 {background-color:var(--body) !important; }

.groen div h1 {color:var(--green) !important;}
.roze  div h1{color:var(--pink) !important;}
.blauw div h1 {color:var(--blue) !important; }
.grijs div h1 {background-color:var(--body) !important; }

.groen a {color:var(--green) !important;}
.roze  a {color:var(--pink) !important;}
.blauw a {color:var(--blue) !important; }
.grijs a {background-color:var(--body) !important; }

.groen a strong {color:var(--green) !important;}
.roze  a strong {color:var(--pink) !important;}
.blauw a strong {color:var(--blue) !important; }
.grijs a strong {background-color:var(--body) !important; }


#content h1 { 
	font-size:30px !important;
}

#content h1 strong {
	color:var(--green);
} 

#content a {text-decoration: underline; color:var(--red); }

.aanmelden a {text-decoration: none !important; font-weight:500!important; font-weight:bold; font-size:16px;}

.wp-block-button a {
	color:var(--white) !important;
	box-shadow: -6px 8px 10px rgba(81,41,10,0.1),0px 2px 2px rgba(81,41,10,0.2);
	transition:0.1s;
}

.wp-block-button a:hover {filter:brightness(120%);}
.wp-block-button a:active {filter:brightness(90%);}

.last-page {color:rgba(0,0,0,0.5) !important; display:inline-block;text-decoration:none !important; font-size:14px; border-radius:50px; position: relative; padding-left:26px; margin-bottom:10px;}
.last-page::before {content:''; position:absolute; left:0px; bottom:0px; display:inline-block; width:25px; height:25px; 
	background-image:url('assets/images/arrow-left.svg');
	background-repeat:no-repeat;
	background-size:contain;}

	.groen {background-color:var(--lightgreen); border-radius:15px; padding:30px; margin: 20px 0px;}
	.roze {background-color:var(--pink); border-radius:15px; padding:30px; margin: 20px 0px;}
	.blauw {background-color:var(--lightblue); border-radius:15px; padding:30px; margin: 20px 0px; }
	.grijs {background-color:var(--lightgrey); border-radius:15px; padding:30px; margin: 20px 0px;}



	h2{ 
		font-size:30px; font-weight:bold; color:var(--body);
		margin-bottom:20px;
		letter-spacing:-2px;
	}


/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	h2{ 
		font-size:60px; font-weight:bold; color:var(--body);
		margin-bottom:20px;
		letter-spacing:-2px;
	}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	h2{ 
		font-size:60px; font-weight:bold; color:var(--body);
		margin-bottom:20px;
		letter-spacing:-2px;
	}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	h2{ 
		font-size:60px; font-weight:bold; color:var(--body);
		margin-bottom:20px;
		letter-spacing:-2px;
	}
}

/* Extra extra large devices (very large desktops, 1400px and up) */
@media (min-width: 1400px) {
	h2{ 
		font-size:60px; font-weight:bold; color:var(--body);
		margin-bottom:20px;
		letter-spacing:-2px;
	}
}