/*
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
*/


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

@font-face {
	font-family: 'Venzia Sans';
	src: url('assets/fonts/VenziaSans-Medium.woff2') format('woff2'),
	url('assets/fonts/VenziaSans-Medium.woff') format('woff'),
	url('assets/fonts/VenziaSans-Medium.ttf') format('truetype'),
	url('assets/fonts/VenziaSans-Medium.svg#VenziaSans-Medium') format('svg');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Venzia Sans';
	src: url('assets/fonts/VenziaSans-Seminormal.woff2') format('woff2'),
	url('assets/fonts/VenziaSans-Seminormal.woff') format('woff'),
	url('assets/fonts/VenziaSans-Seminormal.ttf') format('truetype'),
	url('assets/fonts/VenziaSans-Seminormal.svg#VenziaSans-Seminormal') format('svg');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Venzia Sans';
	src: url('assets/fonts/VenziaSans-normal.woff2') format('woff2'),
	url('assets/fonts/VenziaSans-normal.woff') format('woff'),
	url('assets/fonts/VenziaSans-normal.ttf') format('truetype'),
	url('assets/fonts/VenziaSans-normal.svg#VenziaSans-normal') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Venzia Sans';
	src: url('assets/fonts/VenziaSans-Regular.woff2') format('woff2'),
	url('assets/fonts/VenziaSans-Regular.woff') format('woff'),
	url('assets/fonts/VenziaSans-Regular.ttf') format('truetype'),
	url('assets/fonts/VenziaSans-Regular.svg#VenziaSans-Regular') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}


/* - - - - - V A R S - - - - - */

:root {
	--orange:#FD5F00;
	--darkorange:#C34A00;
	--blue: #0090D2;
	--lightblue: #D2E9F9;
	--lighterblue: #e7f8ff;
	--body: #0A0042;
	--green:#83B72F;
	--darkgreen:#6C7956;
	--lightgreen:#F0F6E5;
	--purple: #2F0C72;
	--lightpurple: #8B6FEA;
	--pink: #F8D9DE;
	--white: #ffffff;
	--lila: #CDCDDB;
	--lighterorange: #f8efec;
	--lightorange: #F8D9DE;
	--lightgrey: #cccccc;
	--toggleHeight: 35px;
	--toggleWidth: 70px;
	--toggleGap: 2px;

}






#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);
}
#header {transition:0.3s;}
.they-see-me-scrolling {background-color:var(--white); transition:0.3s;}

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

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

.toggle + label {
	position: relative;
	background: var(--lila);
	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(--lightpurple);
}
.toggle:checked + label:after {
	left: calc(100% - calc(var(--toggleHeight) - var(--toggleGap)));
}

a {color:var(--dark)}

html, body {
	font-family: "Venzia Sans", 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:18px;
	line-height:32px;
	position: relative;
	text-rendering: optimizeLegibility;
	text-rendering: geometricPrecision; /* For sharper fonts, if needed */
	background-color:var(--blue);
	background: #F0E5D9;
background: linear-gradient(90deg,rgba(240, 229, 217, 1) 0%, rgba(255, 252, 250, 1) 100%);
}


h1 {color:var(--purple);}


h3{ 
	font-size:26px; color:var(--body);
	margin-bottom:32px;
}

h4{font-size:18px;}

h5{
	font-size:22px; font-weight:400; color:var(--orange);


}

h6{
	font-size:16px; font-weight:normal; color:var(--purple); font-weight:500;
	margin-top:30px;

}

a {text-decoration:none;}

p {opacity:0.95;}

header {
	width:100%; height:90px;
	/* From https://css.glass */
	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-orange a {background-color:var(--orange);}
.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; }

.btn-purple a::before {background-image:url('assets/images/btn-before-purple.svg');}
.btn-orange a::before {background-image:url('assets/images/btn-before-orange.svg');}

.read-more-purple::before {background-image:url('assets/images/btn-before-purple.svg');}
.read-more-orange::before {background-image:url('assets/images/btn-before-orange.svg');}

.read-more-purple {
	color:var(--white) !important;
	transition:0.1s;
	padding-left:60px !important;
	position: relative;
	background-color:var(--purple);
	color:#fff;
	line-height:32px !important;
	font-size:16px !important;
	border-radius:9999px;
	box-shadow:none;
	text-decoration:none;
	padding:calc(.667em + 2px) calc(1.333em + 2px);
	font-size:1.125em;
	position: absolute; bottom:30px; left:30px; color:var(--dark);
}



.read-more-purple::before {
	display: block;
	width:35px;
	aspect-ratio: 1/1;
	background-repeat:no-repeat;
	content:'';
	background-size:contain;
	position: absolute;
	left:10px;
	top:10px;
	transition:0.3s;
}

.read-more-purple:hover::before {left:12px; rotate:40deg;}

.read-more-purple:hover {filter:brightness(120%);}
.read-more-purple:active {filter:brightness(90%);}


.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-orange {background-color:var(--orange);}
	.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(--orange);}

	.orange {color:var(--orange);}
	.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-purple.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 90px; 
		background-size:50px; 
		background-repeat:no-repeat;
		transition:0.1s;
		background-color:var(--white);
	}

	.box:hover {
		opacity:0.8;

	}


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

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

#circle-bottom-left {
	position: fixed;
	left:0px;
	bottom:0px;
	width:20vw;
	aspect-ratio: 1/1;
	height:auto;
	background-image:url('assets/images/circle-bottom-left.svg');
	background-repeat:no-repeat;
	background-position: bottom center;
	z-index:-1;
}

#circle-middle-right {
	position: fixed;
	right:0px;
	top:100px;
	width:20vw;
	aspect-ratio:1/1;
	height:auto;
	background-image:url('assets/images/circle-right-top.svg');
	background-repeat:no-repeat;
	background-position: bottom right;
	z-index:-1;
}

#featured-mobile {
	position: absolute;
	right:0px;
	bottom:-30vw;
	width:90vw;
	display:block;
	aspect-ratio: 5/4;
	height:auto;
	padding:0px;
	z-index:-1;
	overflow:visible;
}

#featured-mobile::before{
	content:'';
	width:100%;
	display:block;
	position:absolute;
	right:0px;
	bottom:0px;
	aspect-ratio: 5/4;
	background-image:url('assets/images/featured-line.svg');
	background-size:contain;
	z-index:2;
	background-repeat:no-repeat;
}


#featured {
	position: fixed;
	right:0px;
	bottom:0px;
	width:40vw;
	max-width:1200px;
	display:block;
	aspect-ratio: 5/4;
	height:auto;
	padding:0px;
	z-index:1;
	overflow:visible;
}

#featured::before{
	content:'';
	width:110%;
	display:block;
	position:absolute;
	right:0px;
	bottom:0px;
	aspect-ratio: 5/4;
	background-image:url('assets/images/featured-line.svg');
	background-size:contain;
	z-index:2;
	background-repeat:no-repeat;
}

#featured-mask {
	background-color:var(--orange);
	mask-image: url('assets/images/featured-mask.svg');
	-webkit-mask-image:url('assets/images/featured-mask.svg');
	position: relative;
	right:0px;
	bottom:0px;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	width:100%;
	aspect-ratio: 5/4;
	display:flex;
}

#featured-mask img {
	transform:scale(1);
	position: absolute;
	left:0px;
	top:0px;
	object-fit:cover;
	width:100; 
	height:100%;
}


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

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

.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 {
	position: fixed;
	background-position: right bottom;
	background-size:contain;
	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;
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
	height:100vh;
	background-color:var(--purple);
}

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

#logo-top {
	width:190px;
	height:50px;
	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;
}

#nav-right-top ul li{
	display:inline-flex; 
	margin: 0px 20px;
}
#nav-right-top ul li{
}

#nav-right-top ul li a{
	font-size:18px;
	font-weight:400;
	position: relative;
}

#mega-menu h6 {
	color:#F8D9DE;	
}

#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(--orange);}

.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;
	margin:20px 0px !important;
	letter-spacing:1px;
	line-height:26px;
	color:var(--purple);
	font-weight:500;
}


#content h1 { 
	font-size:32px !important;
	color:var(--purple);
}



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

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

.wp-block-button a {
	color:var(--white) !important;
	transition:0.1s;
	padding-left:60px;
	position: relative;
	line-height:32px;
	font-size:16px;
}

.wp-block-button a::before {
	display: block;
	width:35px;
	aspect-ratio: 1/1;
	background-repeat:no-repeat;
	content:'';
	background-size:contain;
	position: absolute;
	left:10px;
	top:10px;
	transition:0.3s;
}

.wp-block-button:hover a::before {left:12px; rotate:40deg;}

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

.wp-block-buttons {margin-top:10px;}

.last-page {color:var(--purple) !important; opacity:0.8; display:inline-block;text-decoration:none !important; font-size:12px; line-height:20px; position: relative; padding-left:26px; margin-bottom:15px;}
.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;}


	.blauw h2 {color:var(--white) !important;}
	.groen {background-color:var(--purple); border-radius:15px; padding:30px; margin: 20px 0px;}
	.lila {background-color:var(--lila); border-radius:15px; padding:30px; margin: 20px 0px;}
	.lila p, .lila h2, .lila h4, .lila h1, .lila li, .lila p a {color:var(--purple) !important;}

	.roze {background-color:var(--purple); border-radius:15px; padding:30px; margin: 20px 0px;}
	.blauw {background-color:var(--purple); border-radius:15px; padding:30px; margin: 20px 0px;}
	.grijs {background-color:var(--purple); border-radius:15px; padding:30px; margin: 20px 0px;}

	.wp-block-group {color:var(--white);}
	.wp-block-group h2 {position: relative; margin-bottom:30px; padding-bottom:10px;}

	.wp-block-group h2::before {
		position: absolute;
		left:0px;
		bottom:0px;
		width:85px;
		height:3px;
		content:'';
		background-color:var(--lightpurple);
		display:block;
	}

	.wp-block-group a {color:var(--lila) !important;}


	h2{ 
		font-size:30px; font-weight:500;
		color:var(--purple);
	}


/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	h2{ 
		font-size:40px; font-weight:normal;
		line-height:40px;
		
	}


	#logo-top {
		width:290px;
		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;
	}



}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	h2{ 
		font-size:60px; font-weight:normal;
		line-height:60px; 
		margin-top:30px;
		margin-bottom:30px;
	}


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

}

}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	h2{ 
		font-size:82px; line-height:82px; font-weight:normal; 
		margin-top:30px;
		margin-bottom:30px;
	}
}

/* Extra extra large devices (very large desktops, 1400px and up) */
@media (min-width: 1400px) {
	h2{ 
		line-height:82px;
		font-size:82px;
		margin-top:30px;
		margin-bottom:30px;
		
	}
	
}