/*!
Theme Name: LiftOff
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: liftoff
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

LiftOff is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@100..900&display=swap');

:root {
	--mainGrid: 1280px;
	--smallGrid: 1024px;
	--sectionPadding: 120px;
	--gridPadding: calc((100vw - var(--mainGrid)) / 2);
	--red: #771A2C;
	--blue: #212C52;
	--white: #ffffff;
	--black: #000000;
	--grey: #1E1E1E;
	--fallBackFont: sans-serif;
	--bodyFont: 'Inter', var(--fallBackFont);
	--headingFont: 'Onest', var(--fallBackFont);
	--monoFont: "Space Mono", var(--fallBackFont);
}

html, body {
	margin: 0;
	padding: 0;
	font-family: var(--bodyFont);
}

:after, :before {
	box-sizing: content-box;
}

section {
	padding-top: var(--sectionPadding);
}

section.hero {
	padding-top: 0;
}

h1 {
	font-size: 72px;
	font-weight: 900;
	font-family: var(--headingFont);
}

h2 {
	font-size: 32px;
	font-family: var(--headingFont);
}

h3 {
	font-family: var(--headingFont);
}

.text p, .hero p {
	line-height: 1.5;
}

.text p {
	color: var(--grey);
}

.animating {
	transition: unset!important;
}

.main-grid {
	width: 100%;
	max-width: var(--mainGrid);
	margin-left: auto;
	margin-right: auto;
}

.small-grid {
	width: 100%;
	max-width: var(--smallGrid);
	margin-left: auto;
	margin-right: auto;
}

.contact-informatie .informatie {
	display: inline-flex;
	gap: 16px;
	flex-flow: column;
}

.contact-informatie .informatie a {
	font-size: 24px;
	color: var(--black);
	text-decoration: none;
}

.contact-informatie .informatie a svg {
	transition: .2s ease-in-out;
}

.contact-informatie .informatie a:hover svg {
	transform: rotate(20deg);
}

.bttn, .bttn-menu a {
	background-color: var(--white);
	color: var(--blue);
	padding: 12px 40px;
	border-radius: 9999px;
	text-decoration: unset;
	text-transform: uppercase;
	font-family: var(--headingFont);
	transition: .2s ease-in-out;
}

.bttn:hover {
	background-color: #dddddd;
}

.contact-informatie .contact {
	grid-column: 7 / -1;
}

.contact-informatie .contact-info {
	grid-column: 1 / 5;
}

.mobile-menu_wrapper {
	height: 100%;
}

.contact form .form-bttn {
	width: auto;
	padding: 16px 40px;
	border-radius: 9999px;
	transition: .2s ease-in-out;
	cursor: pointer;
}

section.contact form textarea {
	margin-top: 32px;
	border-radius: 16px 16px 0 16px;
	max-height: 500px;
	min-height: 200px;
}

textarea {
	margin-top: 16px;
}

.contact form .form-grid p {
	margin-bottom: 0;
}

.single-vacature:not(body) h3 {
	font-size: 36px;
	font-weight: 200;
	margin-top: 0;
	margin-bottom: 8px;
	color: var(--black);
}

.contact form .form-grid {
	display: grid;
	gap: 32px;
	grid-template-columns: repeat(2, 1fr);
}

.contact form .form-bttn:hover {
	background-color: var(--blue);
	color: var(--white);
}

.scrolled .navbar-wrapper {
	background-color: var(--white);
	top: 0;
}

ul.list {
	display: flex;
	flex-flow: column;
	gap: 16px;
	padding: 0;
	margin: 16px 0;
}

ul.list li:before {
	content: url('/wp-content/uploads/2024/10/arrow-right-solid-1.svg');
}

ul.list li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.banner-footer img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

footer#colophon {
	background-color: var(--blue);
	padding-top: 80px;
	color: var(--white);
	font-weight: 300;
	margin-top: var(--sectionPadding);
}

.menu-mobile-menu-container {
	height: 100%;
	margin-top: 64px;
}

#mobile-menu {
	display: flex;
	flex-flow: column;
	gap: 16px;
	padding: 0;
}

#mobile-menu li {
	list-style: none;
}

body.open .hamburger_wrapper {
	background-color: var(--white);
	top: 59px;
	border: 1px solid;
	border-radius: 16px;
	right: var(--gridPadding);
	padding: 16px;
}

#mobile-menu li a {
	padding: 16px;
	display: block;
	width: 100%;
}

#mobile-menu li:hover {
	background-color: var(--blue);
}

#mobile-menu li, #mobile-menu li a {
	transition: .2s ease-in-out;
}

#mobile-menu li:hover a {
	color: var(--white);
}

.mobile-menu li a {
	color: var(--black);
	text-decoration: unset;
	font-size: 24px;
	font-weight: 300;
}

.bttn.blue:after, .bttn.red:after, .bttn.outline:after, .bttn-menu a:after {
	content: '';
	background-color: var(--red);
	position: absolute;
	width: 100%;
	height: 100%;
	inset: 0;
	transform: translateX(-120%) skewX(-45deg);
	pointer-events: none;
	transition: 0.3s ease-in-out;
}

.bttn.blue:before, .bttn.red:before, .bttn.outline:before, .bttn-menu a:before {
	content: '';
	background-color: var(--red);
	position: absolute;
	width: 100%;
	height: 100%;
	inset: 0;
	transform: translateX(120%) skewX(-45deg);
	pointer-events: none;
	transition: 0.3s ease-in-out;
}

.bttn.red:before, .bttn.red:after, .bttn.outline:before, .bttn.outline:after {
	background-color: var(--blue);
}

.bttn.blue:hover:after, .bttn.red:hover:after, .single-vacature:not(body):hover .bttn.outline:after, .bttn.outline:hover:after, .bttn-menu:hover a:after  {
	transform: translateX(-40%) skewX(-45deg);
}

.bttn.blue:hover:before, .bttn.red:hover:before, .single-vacature:not(body):hover .bttn.outline:before, .bttn.outline:hover:before, .bttn-menu:hover a:before {
	transform: translateX(40%) skewX(-45deg);
}

.single-vacature:not(body):hover .bttn.outline {
	color: var(--white);
}

.bttn.blue, .bttn.red, .bttn.outline , .bttn-menu a {
	display: inline-flex;
	position: relative;
	overflow: hidden;
}

.bttn p, .bttn-menu p {
	margin: 0;
	position: relative;
	z-index: 2;
}

.informatie a {
	display: flex;
	gap: 8px;
}

.informatie svg {
	height: 24px;
	width: auto;
}

.scrolled .hamburger_wrapper {
	top: 23px;
}

.vlootlijst_wrapper {
	grid-template-columns: repeat(12, 1fr);
	display: grid;
	gap: 32px;
}

.vlootlijst_wrapper form {
	grid-column: 1 / 4;
}

.vlootlijst_wrapper div#wpv-view-layout-105 {
	grid-column: 4 / -1;
}

.single-vloot:not(body) {
	height: 300px;
	position: relative;
	border-radius: 16px;
	overflow: hidden;
}

.single-vloot:not(body):after {
	content: '';
	background: linear-gradient(0deg, var(--blue) 25%, rgba(254, 254, 254, 0) 100%);
	height: 25%;
	width: 100%;
	position: absolute;
	bottom: 0;
	z-index: 0;
}

.vloot-name-plate {
	position: absolute;
	padding: 16px;
	bottom: 0;
	font-size: 24px;
	font-family: var(--headingFont);
	font-weight: 600;
	z-index: 1;
	color: var(--white);
}

.single-vloot:not(body) img {
	position: absolute;
	z-index: -2;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: .2s ease-in-out;
}

.vloot-overzicht {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
}

.hamburger_wrapper {
	position: fixed;
	z-index: 99;
	top: 59px;
	right: var(--gridPadding);
	transition: .2s ease-in-out;
}

.hamburger {
	height: 30px;
	position: relative;
	width: 40px;
}

.mobile-menu {
	position: fixed;
	inset: 0;
	width: 100%;
	z-index: 98;
	background-color: var(--white);
	height: 100%;
	transition: .2s ease-in-out;
	transform: translateX(-100%);
}

.hero-two {
	height: auto; 
	position: relative;
	color: var(--white);
	padding: 0;
}

.vacature-detail_content.text {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
}

.text .wysiwyg {
	grid-column: span 6; 
}

.hero-two h1 {
	font-weight: 900;
	margin-top: 0;
}

.hero-two .hero_content {
	position: relative;
	z-index: 2;
}

.hero-two img, .hero-two .overlay {
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-two .hero_content {
	padding: calc(var(--sectionPadding) + 80px) 0; 
}

.breadcrumbs svg {
	height: 12px;
	width: auto;
}

.breadcrumbs svg path {
	fill: var(--red);
}

.breadcrumbs a {
	color: var(--red);
	font-size: 12px;
	text-decoration: unset;
}


.breadcrumbs a.active {
	opacity: .5;
}

.breadcrumbs {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
}

.hero-two .overlay {
	background-color: var(--blue);
	opacity: 0.4;
	z-index: 0;
}

.open .hamburger .line {
	background-color: var(--blue);
}

.open .mobile-menu {
	transform: unset;
}

.hamburger .line {
	position: absolute;
	width: 100%;
	height: 2px;
	background-color: var(--white);
	transition: background .2s ease-in-out;
}

.hamburger .line:nth-child(1) {
	top: 0;
}

.hamburger .line:nth-child(2) {
	top: 50%;
	transform: translateY(-50%);
}

.hamburger .line:nth-child(3) {
	top: 100%;
}

.hamburger {
	display: none;
	cursor: pointer;
}

.open .hamburger .line:nth-child(1) {
	top: 50%;
	transform: translateY(-50%) rotate(-45deg);
}

body.open {
	overflow: hidden;
}

.mobile-menu {
	overflow-y: scroll;
}

.open .hamburger .line:nth-child(2) {
	opacity: 0;
}

.open .hamburger .line:nth-child(3) {
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
}

.open .hamburger .line:nth-child(3), .open .hamburger .line:nth-child(1) {
	transition: transform .2s .2s ease-in-out, top .2s ease-in-out, background .2s ease-in-out;
}

.hamburger .line:nth-child(3), .hamburger .line:nth-child(1) {
	transition: transform .2s ease-in-out, top .2s .2s ease-in-out, background .2s ease-in-out;
}

.hamburger .line:nth-child(2) {
	transition: opacity .2s .2s ease-in-out, background .2s ease-in-out;
}

.open .hamburger .line:nth-child(2) {
	transition: opacity .2s ease-in-out, background .2s ease-in-out;
}

.scrolled .hamburger .line {
	background-color: var(--blue);
}

.main-navigation li:not(.bttn-menu):after {
	content: '';
	height: 2px;
	width: 0%;
	position: absolute;
	right: 0;
	bottom: -4px;
	background-color: var(--red);
	transition: .2s ease-in-out;
}

.upper-text {
	position: relative;
	overflow: hidden;
}

.main-navigation li:not(.bttn-menu):hover:after {
	right: unset;
	left: 0;
	width: 100%;
}

.main-navigation li {
	position: relative;
}

.main-navigation .bttn-menu {
	display: flex;
}

.main-navigation p {
	margin: 0;
}

.bttn.blue p {
	margin: 0;
	position: relative;
	z-index: 2;
	color: var(--white);
	transition: .2s ease-in-out;
}

.bttn.red {
	background-color: var(--red);
	color: var(--white);
}

.three-grid .bttn.outline {
	margin-top: auto;
}

.bttn.outline {
	background-color: var(--white);
	border: 1px solid var(--blue);
	transition: .2s ease-in-out;
}

nav#site-navigation {
	display: flex;
	align-items: center;
}

.header-above-header a {
	display: flex;
	align-items: center;
	gap: 8px;
}

.site-info.main-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	padding-bottom: var(--sectionPadding);
}

.footer-disclaimer {
	padding: 20px 0;
	background-color: #141B35;
}

.site-logo {
	grid-column: 1 / 4;
}

.footer-menu {
	grid-column: 5 / 7;
}

.footer-socials {
	grid-column: 7 / 9;
}

.site-info ul {
	padding: 0;
	margin: 0;
	list-style: none;
	display: flex;
	flex-flow: column;
	gap: 16px;
}

section.hero-detail {
	padding-top: 0;
	position: relative;
	color: var(--white);
}

section.hero-detail .hero_content {
	padding: calc(var(--sectionPadding) * 1.5) 0 var(--sectionPadding) 0;
}

section.hero-detail  .hero_content p {
	width: 35%;
}

section.hero-detail .overlay {
	position: absolute;
	z-index: -1;
	background-color: var(--blue);
	opacity: 0.4;
	width: 100%;
	height: 100%;
}

.vacature-overzicht {
	padding-top: calc(var(--sectionPadding) * 0.5);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 48px;
}

.categorychecklist {
	position: absolute;
	background-color: white;
	max-height: 0;
	overflow: hidden;
	padding: 14px 20px;
	transition: max-height 0.2s ease-out;
	width: -webkit-fill-available;
	top: 100%;
	left: 0;
	border-radius: 16px;
	transform: translateY(8px);
	filter: drop-shadow(5px 5px 20px rgba(0, 0, 0, 0.25));
}

input.reset-filter {
	background-image: url(/wp-content/uploads/2024/10/trash-solid-1.svg);
	background-repeat: no-repeat;
	background-size: 16px;
	background-position: center;
	height: 100%;
	width: 56px;
	padding: 16px 0 16px 56px;
	border: 1px solid var(--white);
	background-color: transparent;
	color: var(--white);
	font-weight: 500;
	border-radius: 16px;
	font-size: 18px;
	cursor: pointer;
	font-family: var(--bodyFont);
	text-transform: uppercase;
}

.categorychecklist li {
	padding: 16px 24px;
	background-color: var(--white);
}

.categorychecklist {
	position: absolute;
	padding: 0;
	top: 100%;
	width: 100%;
	left: 0;
	background-color: var(--white);
	margin: 0;
	text-decoration: unset;
	list-style: none;
}

.category p {
	margin: 0;
}

.search-wrapper_under {
	display: flex;
	gap: 32px;
}

.masonry a img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.category_wrapper {
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 16px;
}

.category_wrapper svg {
	height: 12px;
	width: auto;
	transition: .2s ease-in-out;
}

.category_wrapper.active svg {
	transform: rotate(180deg);
}

.categorychecklist label {
	display: block;
	width: 100%;
	cursor: pointer;
	transition: .2s ease-in-out;
}

.contact form label {
	padding-left: 8px;
	font-weight: 400;
	color: var(--blue);
}

.contact h2 {
	text-align: center;
	font-size: 72px;
	margin: 0 0 16px 0;
	color: var(--red);
}

.categorychecklist label:hover {
	transform: translateY(-1px);
}

.category {
	transition: .1s ease-in-out;
	display: flex;
	flex-flow: column;
	position: relative;
}

input.text-search {
	background-image: url(/wp-content/uploads/2024/10/magnifying-glass-solid-1-1.svg);
	background-size: 32px 16px;
	background-repeat: no-repeat;
	background-position: 16px 50%;
	padding: 0 32px 0 56px;
	border-radius: 9999px;
	background-color: var(--white);
	font-size: 12px;
	color: rgb(117, 117, 117);
	display: flex;
	align-items: center;
	flex-flow: column;
	justify-content: center;
	position: relative;
}

.contact form input, .contact form textarea {
	width: 100%;
	padding: 16px 16px;
	display: block;
	border-radius: 16px;
	border: 1px solid;
	box-sizing: border-box;
	font-family: var(--headingFont);
}

.single-vloot:not(body):hover img {
	transform: scale(1.05);
}

.contact form input {
	margin-top: 8px;
}

.vloot-filter .form-group {
	background-color: unset;
	display: flex;
	flex-flow: column;
}

.vloot-filter .form-group input {
	border-radius: 9999px;
	padding: 16px;
	border: 1px solid var(--black);
}

.vloot-filter .form-group label {
	margin-bottom: 16px;
}

.vloot-filter h3 {
	margin-top: 0;
	font-size: 32px;
}

.vloot-filter {
	border-radius: 16px;
	top: var(--sectionPadding);
	background-color: var(--red);
	padding: 16px;
	color: var(--white);
}

.vloot-filter .bttn {
	cursor: pointer;
	border: 1px solid var(--black);
}

.contact form textarea  {
	max-width: 100%;
	min-width: 100%;
}

.form-group-wrapper {
	display: flex;
	gap: 32px;
}

.form-group {
	background-color: var(--blue);
	padding: 16px 0;
}

.form-group .search-wrapper {
	display: flex;
	justify-content: space-between;
}

.vacature-overzicht .items-found {
	color: var(--black);
}

section.vacature-wrapper {
	padding-top: 80px;
}

section.hero-detail .hero_content h1 {
	margin: 0;
}

section.hero-detail .hero_content p {
	line-height: 1.5;
}

section.hero-detail .hero_content .bttn {
	margin-top: 16px;
}

section.hero-detail img {
	position: absolute;
	top: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vacature-detail_content.text {
	padding: 0;
}

.hero-two:after {
	content: '';
	background-color: var(--white);
	display: block;
	width: 95vw;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	height: 80px;
	border-radius: 16px 16px 0 0;
}

.vacature-detail_content h2 {
	margin: 0;
}

.hero-two {
	position: relative;
}

.site-info .title-footer {
	font-size: 24px;
	font-family: var(--headingFont);
	font-weight: 600;
}

.site-info li a {
	color: var(--white);
	list-style: none;
	text-decoration: none;
	font-weight: 300;
}

.header-above-header a svg {
	height: 16px;
	width: auto;
}

.bttn.blue, #masthead #site-navigation li.bttn-menu a {
	background-color: var(--blue);
	color: var(--white);
}

.bttn-group {
	margin-top: 32px;
	display: flex;
	gap: 16px;
}

.header-above-header {
	padding: 16px 0;
	width: 100%;
	position: absolute;
	z-index: 2;
}

.header-above-header-inner {
	display: flex;
	justify-content: flex-end;
}

.header-above-header-wrapper {
	display: flex;
	gap: 16px;
}

.header-above-header-wrapper a {
	color: var(--white);
	text-decoration: none;
}

.header-above-header-wrapper .line {
	height: 100%;
	width: 2px;
	background-color: var(--white);
}

.text-two .text {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
}

.text-two .text-section {
	grid-column: 1 / 6;
	display: flex;
	flex-flow: column;
	align-items: flex-start;
}

.text-two .image-section img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.text-two .image-section {
	grid-column: 7 / -1;
	height: 90%;
	position: relative;
	margin-right: var(--gridPadding);
	filter: drop-shadow(5px 5px 20px rgba(0, 0, 0, 0.25));
}

.text .bttn {
	margin-top: 16px;
}

.text-masonry .arrow-left-blue:before {
	content: url('/wp-content/uploads/2024/10/arrow-right-solid-4-1.svg');
	transform: rotate(-45deg);
	margin-right: 8px;
}

p.arrow-left-blue {
	text-transform: uppercase;
}

.text-masonry p {
	display: flex;
	align-items: center;
}

.vector-text {
	position: absolute;
	width: 40%;
	right: 0;
	top: 0;
}

#masthead ul.menu {
	display: flex;
	align-items: center;
	list-style: none;
	gap: 32px;
	margin: 0;
}

#masthead ul.menu .bttn.blue a {
	color: var(--white);
}

#masthead ul.menu li a {
	color: var(--white);
	text-decoration: unset;
}

.navbar-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px var(--gridPadding);
	position: fixed;
	top: 36px;
	right: 0;
	left: 0;
	z-index: 5;
	transition: 0.2s ease-in-out;
}

.scrolled .custom-logo {
	display: none;
}

.blue-logo {
	display: none;
}

.scrolled .blue-logo {
	display: block;
}

.scrolled #masthead ul.menu li a {
	color: var(--blue);
}

.experience {
	position: absolute;
	left: 0;
	bottom: 0;
	background-color: var(--red);
	text-align: center;
	height: 180px;
	width: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-flow: column;
}

.experience p:first-child {
	font-size: 48px;
	font-weight: 600;
}

.text-section {
	padding-left: var(--gridPadding);
}

.experience p {
	font-family: var(--monoFont);
	margin: 0;
	text-transform: uppercase;
	color: var(--white);
}

.three-grid {
	display: flex;
	justify-content: space-evenly;
	position: relative;
	z-index: 2;
}

.three-grid_item {
	display: flex;
	flex-flow: column;
	place-items: flex-start;
	width: 250px;
	height: auto;
	padding: 20px;
	border-radius: 16px;
	background-color: var(--white);
	filter: drop-shadow(2px 2px 40px rgba(0, 0, 0, 0.25));
}

#masthead .menu ul a {
	text-decoration: unset;
	color: var(--blue);
	font-weight: 300;
}

.hero {
	position: relative;
}

.hero .stroke-decal {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
}

.text-two h2 {
	color: var(--red);
	font-size: 72px;
	margin-bottom: 8px;
	margin-top: 0;
}

.text-two .text.reverse {
	padding-top: var(--sectionPadding); 
}

.text.reverse .text-section {
	grid-column: 8 / -1; 
	grid-row: 1;
}

.text-two .text.reverse .image-section {
	grid-column: 1 / 7; 
	grid-row: 1;
}

.text-two .text {
	position: relative;
	z-index: 2;
}

.text-two {
	position: relative; 
}

.text-two .stroke-decal-3 {
	position: absolute;
	left: 0;
	top: 0;
	object-fit: cover;
	height: 100%;
	width: 100%;
}

.hero .stroke-decal-2 {
	position: absolute;
	bottom: var(--sectionPadding);
	right: 0;
	z-index: 2;
}

.hero-inner-content p {
	width: 35%; 
}

.upper-text {
	display: inline-flex; 
	background-color: var(--red);
	font-family: var(--monoFont);
	gap: 8px;
	font-weight: 200;
}

p.upper-text {
	width: auto;
	color: var(--white);
	padding: 8px 16px;
	text-transform: uppercase;
}

.three-grid h3 {
	font-size: 24px;
	color: var(--blue);
	font-weight: 300;
	display: flex;
	align-items: center;
	gap: 8px;
}

.three-grid_item p {
	font-weight: 300;
	margin-top: 0;
	margin-bottom: 32px;
}

.three-grid h3:before {
	content: '';
	display: block;
	height: 6px;
	width: 24px;
	background-color: var(--blue);
}

.hero .overlay {
	background-color: var(--blue); 
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	opacity: 0.4;
}

.hero h1 {
	margin: 0;
}

.hero-content {
	color: var(--white); 
	padding: calc(var(--sectionPadding)* 2) 0;
}

.category_wrapper-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 32px;
	border-radius: 60px;
	font-size: 12px;
	color: rgb(112, 112, 112);
	position: relative;
	background-color: var(--white);
	cursor: pointer;
	padding: 0 16px;
	height: 100%;
	width: 100%;
} 

.hero-content {
	position: relative;
	z-index: 1;
}

.hero .noise {
	opacity: 45%; 
}

.edit-link {
	display: none;
}

.hero .hero-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 40%;
	background-image: url(/wp-content/uploads/2024/10/hero-foto.png);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.uitgelichte-vacatures {
	margin-top: 48px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 72px;
}

.vacatures h2 {
	color: var(--red);
	font-size: 72px;
	margin-top: 0;
	margin-bottom: 16px;
	font-weight: 700;
}

.vacatures h3 {
	font-size: 36px;
	font-weight: 200;
	margin-top: 0;
	margin-bottom: 8px;
	color: var(--black);
}

.vacatures {
	position: relative; 
}

.filter-close {
	display: none;
	cursor: pointer;
} 

.filter-close p {
	color: var(--white);
}

.vacatures svg {
	position: absolute; 
	left: 0;
}

.single-vacature:not(body) img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.single-vacature:not(body) .single-vacature_foto {
	height: 200px;
	min-height: 200px;
	padding-top: 40px;
	position: relative;
}

.single-vacature:not(body):hover .single-vacature_foto:after {
	transform: rotate(0deg);
}

.single-vacature:not(body) .single-vacature_foto:after {
	content: '';
	height: 80px;
	width: 80px;
	transition: .2s ease-in-out;
	border-radius: 9999px;
	border: 1px solid var(--blue);
	box-sizing: border-box;
	transform: rotate(45deg);
	background-color: var(--white);
	background-image: url(/wp-content/uploads/2024/10/arrow-right-solid-1.svg);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	position: absolute;
	background-size: 56px;
	left: 16px;
	top: 0;
}

.vacature-detail_content h1 {
	margin: 0;
	color: var(--red);
}

.single-vacature:not(body) {
	background-color: var(--white);
	text-decoration: unset;
	color: var(--blue);
	display: flex;
	flex-flow: column;
	transition: 0.2s ease-in-out;
	place-self: flex-start;
	height: 100%;
	width: 100%;
}

.single-vacature .post-time {
	color: var(--red);
	margin: 16px 0;
}

.single-vacature:not(body) .bttn.outline {
	margin-top: auto;
	display: flex;
	align-self: flex-start;
}

.single-vacature_content p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden; 
	margin-bottom: 32px;
}

.single-vacature h3 {
	font-weight: 700;
	font-family: var(--headingFont);
}

.single-vacature:not(body):hover {
	transform: scale(1.05);
}

.single-vacature:not(body) .bttn {
	transition: .2s ease-in-out;
}

.single-vacature:not(body) .bttn p {
	margin: 0;
}

.outline.bttn:hover {
	color: var(--white);
}

.single-vacature_content {
	height: 100%;
	flex-grow: 1;
	flex-flow: column;
	display: flex;
}

.masonry-grid .text-masonry {
	display: flex;
	justify-content: flex-end;
	flex-flow: column;
	place-items: flex-end;
	color: var(--blue);
}

.masonry-grid h2 {
	margin: 16px 0;
	font-size: 72px; 
}

.masonry-grid {
	margin-top: var(--sectionPadding);
	background-color: #F2F7FB;
	padding-bottom: var(--sectionPadding);
	position: relative;
	z-index: 1;
	overflow: hidden;
}

.masonry a:hover {
	border-radius: 16px 16px 16px 0; 
}

.masonry a:hover img {
	transform: scale(1.1);
}

.masonry a img {
	transition: .3s ease-in-out;
}

.masonry-grid:before {
	content: '';
	position: absolute;
	left: var(--gridPadding);
	top: 0;
	height: 100%;
	width: 200px;
	transform: rotate(20deg) scaleY(1.5);
	background-color: var(--white);
	z-index: -1;
	pointer-events: none;
}

.masonry a:hover:after {
	transform: unset;
}

.masonry a:after {
	content: 'LEES MEER';
	font-weight: 200;
	font-size: 16px;
	position: absolute;
	padding: 20px 48px 20px 20px;
	background-color: var(--blue);
	background-image: url(/wp-content/uploads/2024/10/arrow-right-solid-5.svg);
	background-repeat: no-repeat;
	background-position: calc(100% - 8px) 50%;
	bottom: 0;
	color: var(--white);
	transform: translateY(100%);
	transition: .2s ease-in-out;
	left: 0;
}

.masonry {
	gap: 48px;
	margin-top: 48px;
	height: 700px;
}

.masonry a {
	border-radius: 16px;
	position: relative;
	overflow: hidden;
	transition: .3s ease-in-out;
}

.masonry a:first-child {
	grid-column: 1;
	grid-row: 1 / -1;
}

.masonry a:nth-child(2) {
	grid-column: 2;
	grid-row: 1 / 8;
}

.masonry a:nth-child(3) {
	grid-column: 2;
	grid-row: 8 / -1;
}

.masonry a:nth-child(4) {
	grid-column: 3;
	grid-row: 1 / 6;
}

.masonry a:nth-child(5) {
	grid-column: 3;
	grid-row: 6 / -1;
}

.tekst-image {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 48px;
}

.tekst-image .image {
	grid-column: 1 / 6;
	border-radius: 16px;
	overflow: hidden;
}

.tekst-image .tekst {
	grid-column: 6 / -1;
	padding-bottom: 32px;
}

.tekst-image .tekst h2 {
	font-size: 48px;
	font-weight: 800;
	margin: 16px 0 0 0;
	color: var(--red);
}

.tekst-image .bttn {
	margin-top: 32px;
}

.tekst-image .tekst p {
	width: 75%;
}

.wpv-submit-trigger.js-wpv-submit-trigger.btn {
	cursor: pointer;
}

.tekst-image .tekst .bttn p {
	width: 100%;
}

.tekst-image .tekst h3 {
	font-size: 24px;
	font-weight: 200;
	margin: 16px 0 32px 0;
	text-transform: uppercase;
	font-weight: 300;
	word-break: break-word;
}

.tekst-image .image img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.masonry {
	display: grid; 
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(12, 1fr);
}

@media only screen and (max-width: 1280px) {
	:root {
		--mainGrid: 90vw;
	}
}

@media only screen and (max-width: 1024px) {
	:root {
		--smallGrid: 90vw;
	}
	section.vacature-detail_content.text {
		display: block;
	}
	.vacature-overzicht {
		grid-template-columns: repeat(2, 1fr);
	}
	.tekst-image .image {
		height: 300px;
	}
	.tekst-image {
		display: flex;
		flex-flow: column;
		gap: 48px;
	}
	.text-two .text-section {
		padding-right: var(--gridPadding);
	}
	.bttn p, .bttn-menu p {
		width: auto!important;
		text-align: center;
	}
	.masonry a {
		height: 300px;
	}
	.masonry {
		display: flex;
		flex-flow: column;
		height: 100%;
	}
	.masonry a:after {
		transform: unset;
	}
	section.hero-detail .hero_content p, .hero-inner-content p:not(.upper-text) {
		width: 70%;
	}
	.text-two .text {
		display: flex;
		flex-flow: column;
		gap: 48px;
	}

	.text p:not(.upper-text) {
		width: 80%
	}

	.text .bttn p {
		width: auto;
	}

	.text-two .image-section {
		height: 300px;
		width: auto;
	}

	.image-section {
		margin: 0 var(--gridPadding);
	}

	.uitgelichte-vacatures {
		grid-template-columns: repeat(2, 1fr);
	}

	.masonry-grid .text-masonry {
		place-items: flex-start;
		justify-content: flex-start;
	}
	.footer-socials {
		grid-column: 1 / -1;
		grid-row: 2;
	}
	.site-info.main-grid {
		gap: 48px;
	}
	.vacatures h2 {
		font-size: 48px;
	}

	.form-group.vacature-filter {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 4;
	}
	.search-wrapper_under {
		flex-flow: column;
	}
	.form-group .search-wrapper {
		flex-flow: column;
	}
	.search-wrapper_under input, .search-wrapper_under .category_wrapper-inner {
		padding-top: 16px;
		padding-bottom: 16px;
		width: 100%;
	}
	.category_wrapper {
		justify-content: space-between;
	}
	.categorychecklist {
		position: unset;
	}
	.form-group-wrapper {
		margin-top: 24px;
	}

	.filter-close {
		color: var(--white);
		display: flex;
		align-items: center;
		gap: 16px;
	}
	.filter-close svg path {
		fill: var(--white);
	}
	.filter-close svg {
		height: 16px;
		width: auto;
	}

	.vacature-filter {
		transform: translateY(calc(100% - 80px));
		transition: .2s ease-in-out;
	}
	.vacature-filter.open {
		transform: unset;
	}
	.categorychecklist .popular-category label {
		display: flex;
		align-items: center;
		flex-direction: row-reverse;
		justify-content: flex-end;
		gap: 16px;
	}
	.categorychecklist .popular-category input {
		width: auto;
	}
}

@media only screen and (max-width: 768px) {
	h1, .text-two h2, .masonry-grid h2, div .nummer-teller-tekst h2, .contact h2 {
		font-size: 48px;
	}
	.vacature-overzicht {
		display: flex;
		flex-flow: column;
	}
	.hero-content {
		padding: calc(var(--sectionPadding)* 1.2) 0;
	}
	.header-above-header, .menu-main-menu-container #primary-menu.menu {
		display: none;
	}

	.hamburger {
		display: block;
	}
	.stats-wrapper {
		flex-wrap: wrap;
	}
	section.hero-detail .hero_content p, .hero-inner-content p:not(.upper-text) {
		width: 100%;
	}
	div .nummer-teller-tekst {
		grid-column: 1 / -1;
	}
	.nummer-teller-wrapper .line {
		display: none;
	}
	section.contact-informatie {
		display: flex;
		flex-flow: column;
		gap: 48px;
	}
	.contact-informatie .contact-info {
		width: 80%;
	}
	.site-info.main-grid {
		display: flex;
		flex-flow: column;
	}
}

@media only screen and (max-width: 600px) {
	.uitgelichte-vacatures {
		display: flex;
		flex-flow: column;
	}
	.tekst-image .tekst p, .text p:not(.upper-text) {
		width: 100%;
	}
	.bttn-group {
		display: inline-flex;
		flex-flow: column;
		gap: 32px;
	}
	.contact form .form-grid {
		display: block;
	}
}

@media only screen and (max-width: 420px) {
	.tekst-image .tekst h2 {
		font-size: 32px;
	}
}