:root {
	--color-black: #222222;
	--color-dark: #000;
	--color-gray-dark: #333;
	--color-gray-soft: #777777;
	--color-blue: #0e2240;
	--color-red: #98242a;
	
	--color-primary: var(--color-red); 
	--color-secondary: var(--color-blue); 

	--color-layout: #f4f4f4; 
	--swiper-theme-color: var(--color-green); 
	--swiper-pagination-color: var(--color-green); 

	--color-twitter: #1DA1F2;
	--color-instagram: #833AB4;
	--color-linkedin: #0077b5;
	--color-facebook: #4267B2;
	--color-whatsapp: #25D366; 
	
	--gradient-direction: to right;
	--gradient-dark: linear-gradient(25deg, var(--color-dark), var(--color-gray-dark));

	--font-family: 'Inter', sans-serif;
	--fontawesome: 'Font Awesome 6 Pro';
	--font-size: 16px;
	--line-height: 30px;
	--font-weight: 300;

	--section-spacing: 70px;
	--offset: 70px;
	--offset-small: 35px;
	--offset-tiny: 15px;
	--base: 1620px;
	
	--z-index-navigation: 2000; 
	--z-index-header: 1000; 
	
	--transition-speed: .25s;
	
	--column: calc((var(--base) - (var(--offset) * 11)) / 12);
	--grid-1: var(--column);
	--grid-2: calc((var(--column) * 2) + (var(--offset) * 1));
	--grid-3: calc((var(--column) * 3) + (var(--offset) * 2));
	--grid-4: calc((var(--column) * 4) + (var(--offset) * 3));
	--grid-5: calc((var(--column) * 5) + (var(--offset) * 4));
	--grid-6: calc((var(--column) * 6) + (var(--offset) * 5));
	--grid-7: calc((var(--column) * 7) + (var(--offset) * 6));
	--grid-8: calc((var(--column) * 8) + (var(--offset) * 7));
	--grid-9: calc((var(--column) * 9) + (var(--offset) * 8));
	--grid-10: calc((var(--column) * 10) + (var(--offset) * 9));
	--grid-11: calc((var(--column) * 11) + (var(--offset) * 10));
	--grid-12: calc((var(--column) * 12) + (var(--offset) * 11));
}

@media screen and (max-width: 1679px) {
	:root {
		--section-spacing: 80px;
		--offset: 40px;
		--offset-small: 20px;
		--offset-tiny: 10px;
		--base: 1280px;
	}
}

@media screen and (max-width: 1360px) {
	:root {
		--section-spacing: 50px;
		--offset: 40px;
		--offset-small: 20px;
		--base: 960px; 
		--font-size: 14px;
		--line-height: 24px;
	}
}

@media screen and (max-width: 1023px) {
	:root {
		--base: 100%; 
		--offset: 40px;
		--offset-small: 20px;
	}
}

 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video, p {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

figure {
	font-size: 0;
	line-height: 0; 
}

*, *:before, *:after {
	box-sizing: border-box;
}

@keyframes fade-in {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes fade-out {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@keyframes bounce-in {
	0%, 100% {
		transform: scale(1)
	}

	10% {
		transform: scale(1.4)
	}

	40% {

		transform: scale(.8)
	}

	60% {

		transform: scale(1.2)
	}

	80% {

		transform: scale(.9)
	}

}

@keyframes movein-from-right {
	0% {
		transform: translateX(var(--movein-start, 100px));
	}

	100% {
		transform: translateX(var(--movein-end, 0px));
	}
}

@keyframes rotate-y {
	0% {
		transform: rotate3d(0, 1, 0, 0deg);
	}

	50% {
		transform: rotate3d(0, 1, 0, 180deg);
	}

	100% {
		transform: rotate3d(0, 1, 0, 360deg);
	}
}

@keyframes spin-z {
	0% {
		backface-visibility: visible;
		transform: rotate3d(0, 0, 1, 0deg);
	}

	100% {
		backface-visibility: visible;
		transform: rotate3d(0, 1, 0, 720deg);
	}
}

@keyframes phone-ring {

	0%,
	100% {
		transform: rotate3d(0, 0, 1, 0deg);
	}

	10%,
	20%,
	30%,
	40% {
		transform: rotate3d(0, 0, 1, 15deg);
	}

	5%,
	15%,
	25%,
	35%,
	50% {
		transform: rotate3d(0, 0, 1, -15deg);
	}
}

@keyframes dropPins {
	0% {
		transform: translateY(-200px) scaleY(0.9) rotate3d(0, 1, 0, 0deg);
		opacity: 0;
	}

	5% {
		opacity: 0.7;
	}

	50% {
		transform: translateY(20px) scaleY(.5) rotate3d(0, 1, 0, 840deg);
		opacity: 1;
	}

	100% {
		transform: translateY(0px) scaleY(1) rotate3d(0, 1, 0, 720deg);
		opacity: 1;
	}
}
body {
	font-family: var(--font-family); 
	font-size: var(--font-size);
	font-weight: var(--font-weight); 
	line-height: var(--line-height);
}

h1,h2,h3,h4,h5,h6 {
	font-family: var(--font-family);
}

h1,h2
{
	font-size: 40px;
	line-height: 50px;
	font-weight: 300;
	position: relative;
}

h1 span,
h2 span {
	display: block;
	font-size: 20px;
	line-height:32px;
	font-weight: 600;
	position: relative;
	text-transform: uppercase;
}

h3 {
	font-size: 24px;
	line-height: 32px;
	font-weight: 700;
}

h5 {
	font-size: 18px;
	line-height:32px;
	font-weight: 400;
}

h6 {
	font-size: 18px;
	line-height: 26px;
	font-weight: 700;
	text-transform: uppercase;
}

em, i { font-style: italic; }

b, strong { font-weight: 700; }

a {  }

*[data-title-color="blue"] { color: var(--color-blue); }
*[data-title-color="red"] { color: var(--color-red); }
*[data-title-color="black"] { color: var(--color-black); }
*[data-title-color="white"] { color: white; }

@media screen and (max-width: 1679px) {

}

@media screen and (max-width: 1360px) {
	h1,h2
	{
		font-size: 30px;
		line-height: 40px;
	}

	h1 span,
	h2 span {
		font-size: 18px;
		line-height:28px;
	}
}

@media screen and (max-width: 1023px) {

}
/* ---------- vars ---------- */
body {
	--header-height: 101px;
	background: var(--color-blue);
	overflow-x: hidden;
}

main {
	background: white;
}

main > section {
	scroll-margin: var(--header-height);
}

main > section.no-margin-bottom {
	margin-bottom: 0;
	padding-bottom: 0;
}

main *[data-offset-top="large"] { padding-top: var(--section-spacing); }
main *[data-offset-top="normal"] { padding-top: var(--offset); }
main *[data-offset-top="small"] { padding-top: var(--offset-small); }
main *[data-offset-top="none"] { padding-top: 0; }
main *[data-offset-bottom="large"] { padding-bottom: var(--section-spacing); }
main *[data-offset-bottom="normal"] { padding-bottom: var(--offset); }
main *[data-offset-bottom="small"] { padding-bottom: var(--offset-small); }
main *[data-offset-bottom="none"] { padding-bottom: 0; }
main *[data-offset-both="none"] { padding-bottom: 0; padding-top: 0; }

.far:not(.no-margin), .fas:not(.no-margin), .fal:not(.no-margin) {
	margin-right: 5px;
}
@media screen and (max-width: 1023px) {
	body {
		--header-height: 67px;
	}
}
/* ---------- layout---------- */
header#header {
	position: fixed;
	z-index: var(--z-index-header);
	width: 100vw;
	top: 0;
	grid-template-columns: 1fr;
	justify-content: center;
	gap: 0;
}
header#header,
header#header .bottom .content,
header#header > *:not(script) {
	display: grid;
}

header#header .top {
	gap: var(--offset);
	grid-template-columns: [logo] var(--grid-2) [usp] var(--grid-10);
	grid-template-rows: [logo usp] 1fr;
	justify-content: center;
}

header#header .top .logo {  grid-area: logo; z-index: 2002; }
header#header .top .usp {  grid-area: usp; }

header#header .bottom {
	grid-template-columns: var(--grid-2) [content] var(--grid-10);
	grid-template-rows: [content] 1fr;
	justify-content: center;
	gap: var(--offset);
}

header#header .bottom .content {
	grid-area: content;
	gap: var(--offset);
	grid-template-columns: [links] 1fr [icons] auto;
	grid-template-rows: [links icons] 70px;
	justify-content: center;
	align-items: center;
}

header#header.scroll .bottom .content {
	grid-template-rows: [links icons] 60px;
}

header#header .bottom .links { grid-area: links; }
header#header .bottom .icons { grid-area: icons; }


[data-interactive="1"] header#header {
	position: relative;
	display: block;
}

/* ---------- lipstick ---------- */
header#header {
	color: white;
}

header#header .top {
	background: white;
	border-bottom: 2px solid var(--color-primary);
}

header#header.scroll {
	background: var(--color-blue);
	box-shadow: 0 0 30px rgba(17,17,17,.1);
}

header#header .bottom .content {
	transition: all var(--transition-speed);
}

[data-interactive="1"] header#header { position: relative; }

/* ---------- media query ---------- */

@media screen and (max-width: 1679px) {
	header#header .bottom .content {
		gap: 1em;
	}
}

@media screen and (max-width: 1360px) {

}

@media screen and (max-width: 1023px) {

	header#header {
		background: var(--color-blue);
		box-shadow: 3px 3px 15px rgba(17,17,17,.2);
	}

	header#header .top {
		gap: var(--offset-small);
		grid-template-columns: var(--offset-small) [logo] 200px var(--offset-small);
		grid-template-rows: [logo] 5px;
		justify-content: start;
	}

	header#header .bottom {
		justify-content: end;
	}
	header#header .bottom .content {
		grid-template-columns: var(--offset-small) [icons] 1fr var(--offset-small);
	}

}
/* ---------- vars ---------- */
header#header .logo {
	--logo-size: 204px;
}

/* ---------- layout ---------- */
header#header .logo {
	position: relative;
}

header#header .logo figure {
	top: -30px;
	position: absolute;
	z-index: 100;
	display: flex; 
	place-items: center;
	place-content: center;
	max-width: var(--logo-size);
	max-height: var(--logo-size); 
}

/* ---------- lipstick ---------- */

header#header .logo figure {
	opacity: 0;
	background: white;
	border-radius: 50%;
	padding: var(--offset-small);
	box-shadow: 10px 10px 30px rgba(17,17,17,.3);
	transition: all var(--transition-speed);
}

header#header .logo img {
	opacity: 0;
	max-width: 200px;
	transition: all var(--transition-speed);
}

header#header.scroll .logo img {
	max-width:100px;
}

/* ---------- visible ---------- */

header#header .logo[data-observe="visible"] figure {
	animation: logo-ball .5s forwards ease-in .5s;
}

header#header .logo[data-observe="visible"] figure img {
	animation: logo-ball .3s forwards ease-in-out .9s;
}

/* ---------- mediaquery ---------- */

@media screen and (max-width: 1679px) {

}

@media screen and (max-width: 1360px) {

}

@media screen and (max-width: 1023px) {
	header#header.scroll .logo,
	header#header .logo {
		--logo-size: 100px;
	}

	header#header.scroll .logo figure,
	header#header .logo figure {
		top: -10px;
	}

	header#header.scroll .logo img,
	header#header .logo img {
		max-width: 70px;
	}
}

@keyframes logo-ball {
	0% {
		transform: scale(.2);
		opacity: 0; 
	}

	30% {
		transform: scale(1.2);
		opacity: 1;
	}

	60% {
		transform: scale(.8);
	}

	80% {
		transform: scale(1.1); 
	}

	100% {
		transform: scale(1); 
		opacity: 1;
	}
}
/* ---------- vars ---------- */
header#header .usp div[data-observe] {
	--delay-time: .2s;
}
header#header .usp div[data-observe] i { --delay : .1s; }
header#header .usp div[data-observe] strong { --delay : .2s; }

header#header .usp div[data-observe]:nth-child(2) i { --delay: calc((var(--delay-time) * 2) + .1s) }
header#header .usp div[data-observe]:nth-child(2) strong { --delay: calc((var(--delay-time) * 2) + .2s) }
header#header .usp div[data-observe]:nth-child(3) i { --delay: calc((var(--delay-time) * 3) + .1s) }
header#header .usp div[data-observe]:nth-child(3) strong { --delay: calc((var(--delay-time) * 3) + .2s) }
header#header .usp div[data-observe]:nth-child(4) i { --delay: calc((var(--delay-time) * 4) + .1s) }
header#header .usp div[data-observe]:nth-child(4) strong { --delay: calc((var(--delay-time) * 4) + .2s) }

/* ---------- layout ---------- */
header#header .usp {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, calc((var(--grid-10) - calc(var(--offset) * 3)) / 4)));
	gap: var(--offset-small) var(--offset);
}

header#header .usp div {
	display: flex;
	justify-content: center;
	align-items: center;
	column-gap: 10px;
}

/* ---------- lipstick ---------- */
header#header .usp {
	padding: calc(var(--offset-tiny) / 2) 0;
	font-size: 14px;
	line-height: 24px;
	color: #777;
}

header#header .usp i {
	color: var(--color-primary); 
	font-size: 20px;
}

/* ---------- visible ---------- */

header#header .usp div > * {
	opacity: 0;
}

header#header .usp div[data-observe="visible"] > * {
	animation: fade-in .3s forwards var(--delay);
} 	


/* ---------- mediaquery ---------- */
@media screen and (max-width: 1679px) {

}

@media screen and (max-width: 1360px) {
	header#header .usp {
		display: grid;
		grid-template-columns: repeat(4,1fr);
		gap: var(--offset-small) var(--offset);
	}

	header#header .usp div { 
		align-items: flex-start;
	}

	header#header .usp {
		padding: calc(var(--offset-tiny) / 2) 0;
		font-size: 10px;
		line-height: 14px;
	}

	header#header .usp i {
		font-size:18px;
	}
}


@media screen and (max-width: 1023px) {
	header#header .usp {
		display: none;
	}

}
/* ---------- vars ---------- */
header#header .navigation-trigger {
	--size: 50px;
}


/* ---------- layout ---------- */
header#header .navigation-trigger {
	display: none;
	width: var(--size);
	height: var(--size);
	justify-content: center;
	align-items: center;
	flex-direction: column;
	row-gap: 5px;

}

header#header .navigation-trigger:before {
	position: absolute;
	display: block;
	width: var(--size);
	height: var(--size);
	content: "";
}

header#header .navigation-trigger span {
	height: 2px;
	width: 70%;
}

header#header .navigation-trigger span:nth-child(odd) { width: 50%; }

/* ---------- lipstick ---------- */

header#header .navigation-trigger,
header#header .navigation-trigger:before,
header#header .navigation-trigger span {
	transition: all var(--transition-speed);
}

header#header .navigation-trigger:before {
	background: rgba(255,255,255,.1);
	border-radius: 50%;
}

header#header .navigation-trigger:hover:before {
	background: rgba(255,255,255,.2);
}

header#header .navigation-trigger span {
	background: white;
}
header#header .navigation-trigger:hover span {
	animation: rotate-y .8s linear;
	/*background: var(--color-orange); */
}

header#header .navigation-trigger:hover span:first-child {
	animation-delay: .3s;
}

header#header .navigation-trigger:hover span:last-child {
	animation-delay: .6s;
}

/* ---------- mediaquery ---------- */

@media screen and (max-width: 1679px) {

}

@media screen and (max-width: 1360px) {

}

@media screen and (max-width: 1023px) {
	header#header .navigation-trigger {
		display: flex;
		--size: 40px;
	}
}
/* ---------- vars ---------- */
header#header .links a {
	--size: 50px;
	--padding: calc((var(--size) - var(--line-height)) / 2) calc(var(--size) / 3);
}

/* ---------- layout ---------- */
header#header .links {
	display: flex;
	justify-content: center;
	gap: var(--offset-small);
}

header#header .links a {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* ---------- lipstick ---------- */
header#header .links a {
	font-size: 18px;
	font-weight: 700;
	transition: all var(--transition-speed); 
	color: white;
	text-transform: uppercase;
	text-decoration: none;
}

header#header .links a:hover {
	animation: bounce-in .6s forwards ease-in;
}

/* ---------- mediaquery ---------- */

@media screen and (max-width: 1679px) {

}

@media screen and (max-width: 1360px) {


}

@media screen and (max-width: 1023px) {
	header#header .links {
		display: none;
	}
}
/* ---------- vars ---------- */


/* ---------- layout ---------- */
header#header .icons {
	display: flex;
	justify-content: flex-end;
	column-gap: var(--offset-tiny); 
}

/* ---------- lipstick ---------- */
header#header .icons a {
	color: white;
	transition: all var(--transition-speed); 
	font-size: 20px;
}

header#header .icons a:hover {
	color: var(--color-primary);
}

/* ---------- mediaquery ---------- */


@media screen and (max-width: 1023px) {
	header#header .icons {
		align-items: center;
		column-gap: var(--offset-small); 
	}

	header#header .icons a {
		font-size:18px;
	}
}
/* ---------- vars ---------- */

footer.rectangle:before {
	--color: var(--color-black);
	--width: 60px;
	--height: 30px;
}

/* ---------- layout ---------- */
footer {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}

footer.rectangle:before {
	transform-origin: center left;
	top: calc((var(--height) / 2) * -1);
	left: 0; 
}

footer > * {
	grid-row: 1;
	grid-column: 1;
}

footer .content {
	display: grid; 
	grid-template-columns: var(--grid-2) var(--grid-4) var(--grid-2) var(--grid-4);
	grid-template-rows: auto;
	gap: var(--offset); 
	z-index: 100;
	justify-content: center;
}

footer .content .contact {
	grid-column: 4;
}

footer .content .copyright,
footer .content .legal {
	grid-row: 2;
	grid-column: 1 / 3;
}

footer .content .legal {
	grid-column: 4;
	display: flex;
	justify-content: flex-end;
	gap: var(--offset-tiny); 

}

/* ---------- lipstick ---------- */

footer {
	font-size: 14px;
	line-height: 32px;
	color: white;
}

footer a { 
	transition: all var(--transition-speed); 
	color: white;
	text-decoration: none;
}

footer a:hover {
	color: rgba(255,255,255,.6);
}

footer h6 {
	margin-bottom: var(--offset-tiny);
}

footer .background {
	background-color: var(--color-secondary); 
}

footer .content {
	padding: var(--offset) 0;
}

footer .content .copyright,
footer .content .legal {
	font-size: 12px;
}

.cookie {
    text-align: center;
    position: fixed;
    display: none;
    opacity: 0;
    z-index: 2000;
    width: 100%;
    bottom: 0;
    background: rgba(14,34,64,.8);
    color: #fff;
    font-size: 14px;
    line-height: 20px;
}

.cookie div {
    padding: 20px;
}

.cookie.active {
    display: block;
    opacity: 1;
}



[data-interactive="1"] footer * { animation: none; }

/* ---------- mediaquery ---------- */

@media screen and (max-width: 1679px) {

}

@media screen and (max-width: 1360px) {

}

@media screen and (max-width: 1023px) {
	footer .content {
		padding: var(--section-spacing) var(--offset-small);
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		gap: var(--offset-small) var(--offset);
	}

	footer .content .contact,
	footer .content .copyright,
	footer .content .legal {
		grid-column: auto;
		grid-row: auto;
	}

	footer .content .legal {
		justify-content: start;
	}
}
/* ---------- vars ---------- */


/* ---------- layout ---------- */
footer .links {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	gap: var(--offset-small);
}

/* ---------- lipstick ---------- */
footer .links a {
	position: relative;
	text-decoration: none;
	color: white;
}

footer .links a:hover { color: rgba(255,255,255,.6); }

/* ---------- mediaquery ---------- */


@media screen and (max-width: 1023px) {


}
/* ---------- vars ---------- */


/* ---------- layout ---------- */
footer .contact {
	display: grid; 
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--offset);
}
footer .contact address > div {
	padding-left: 20px;
	position: relative;
}

footer .contact address > div i {
	position: absolute; 
	left: 0;
	top: 8px;
}

/* ---------- lipstick ---------- */
footer .contact > div i {
	color: var(--color-green);
}

footer .contact > div:nth-child(3) {
	font-weight: 700;
}

footer .contact a {
	text-decoration: none;
}

footer .contact a:hover {
	color: rgba(255,255,255,.6);
}

/* ---------- mediaquery ---------- */

@media screen and (max-width: 1679px) {

}

@media screen and (max-width: 1360px) {
	footer .contact {
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	}
}

@media screen and (max-width: 1023px) {

}
/* ---------- vars ---------- */


/* ---------- layout ---------- */
footer .background {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}

footer .background > * {
	grid-row: 1;
	grid-column: 1;
}

footer .background .color {
	z-index: 100;
}

/* ---------- lipstick ---------- */

footer .background {

}

footer .background .color {
	opacity: .8;

	background: var(--color-red); 
	mask: url(/e2/site/gsvandenijssel/content/site/image/footer_mask.svg);
	mask-repeat: no-repeat;
	mask-position: 50%;
	-webkit-mask: url(/e2/site/gsvandenijssel/content/site/image/footer_mask.svg);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: calc(0% - (946px / 2));
}

footer .background .image {
	opacity: .5;
	background-size: cover;
	background-position: 50%;
	opacity: 1;
	mix-blend-mode: multiply;
}

/* ---------- mediaquery ---------- */


@media screen and (max-width: 1023px) {


}
/* ---------- vars ---------- */


/* ---------- layout ---------- */
header#header nav {  display: none; }

/* ---------- lipstick ---------- */


/* ---------- mediaquery ---------- */


@media screen and (max-width: 1679px) {

}

@media screen and (max-width: 1580px) {
    /* header#header nav {
        display: block;
    } */

    header#header nav .container > ul {
        gap: 25px;
    }
    header#header nav .container > ul > li > a {
        font-size: 14px;
    }

    header#header nav .container > ul > li a[data-name="Home"]:before {
        font-size: 18px;
        line-height: 24px;
    }
}

@media screen and (max-width: 1360px) {

}

@media screen and (max-width: 1023px) {
    header#header nav {
        display: block;
        position: fixed;
        left: -100vw;
        bottom: 0;
        top: 76px;
        min-width: 100vw;
        background: var(--color-blue);
        box-shadow: 5px 5px 30px rgba(17, 17, 17, 0.2);
        z-index: var(--z-index-navigation);
        transition: var(--transition-speed);
    }

    header#header.scroll nav {
        top: 67px;
    }

    header.wrapper .right-nav {
        display: flex;
        flex-direction: column;
    }

    header#header nav .container > ul {
        gap: initial;
        margin-bottom: 5%;
    }

    header#header nav .container > ul a {
        margin-bottom: 15px;
        text-decoration: none;
    }

    header#header nav.active {
        left: 0;
    }

    header#header nav .container > ul {
        padding: var(--offset-small);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;
        margin-top: 10%;
        margin-bottom: 10vh;
    }

    header#header nav .contact {
        position: absolute;
        bottom: 0;
        padding: var(--offset-small);

        a {
            text-decoration: none;
            color: white;;
        }

        .address {
            margin-bottom: var(--offset-small);
        }
    }

    header#header nav .container > ul li:nth-child(even) {
        display: none;
    }

    header#header nav .container > ul > a {
        font-size: 1.5rem;
        color: var(--color-white);
    }
}
/* ---------- layout---------- */
.wrapper {
	width: var(--base); 
	margin-left: auto; 
	margin-right: auto; 
}

/* ---------- lipstick ---------- */


/* ---------- media query ---------- */

@media screen and (max-width: 1023px) {
	.wrapper {
		padding-left: var(--offset-small);
		padding-right: var(--offset-small)
	}
}
/* ---------- vars ---------- */
section.services {
	--service-row-count: 3; 
	--service: calc((100% - (var(--offset) * (var(--service-row-count) - 1))) / var(--service-row-count)); 
}

section.services .dots {
	--color: #dfdfdf;
	--active-color: var(--color-primary);
}
section.services.rectangle:before {
	--color: var(--color-blue); 
	--width: 60px;
	--height: 30px;
	--delay: 1s;
}

/* ---------- layout ---------- */
section.services {
	position: relative;
	display: grid; 
	grid-template-columns: 1fr var(--grid-1) var(--grid-4) var(--grid-4) var(--grid-2) var(--grid-1) 1fr;
	grid-template-rows: auto auto;
	gap: var(--offset);
	grid-template-areas: 
		". title title . contact contact ."
		". . container container container . .";
	justify-content: center;
	align-items: start;
}

section.services.rectangle:before {
	top: calc(100% - (var(--offset-small) / 2));
	right: 0;
	transform-origin: center right;
}

section.services > * {
	z-index: 100;
}

section.services .background {
	grid-column: 1 / -1;
	grid-row: 1 / -1;
	z-index: 10;
}

section.services .title { grid-area: title; }
section.services .contact { 
	grid-area: contact; 
	align-self: end;
	position: relative;
}

section.services > .container {
	grid-area: container; 
	display: grid;  
	grid-template-columns: repeat(auto-fit, minmax(260px, var(--service)));
	gap: var(--offset); 
}

section.services .contact:before {
	position: absolute;
	display: inline-block;
	left: -40px;
	top: -40px; 
}

section.services .dots {
	position: absolute;
	bottom: calc(var(--section-spacing) * -1);
}

/* ---------- lipstick ---------- */
section.services {
	padding: var(--section-spacing) 0;
	background: var(--color-layout);
}

section.services:before {
	background: var(--color-primary);
	content: " ";
}

section.services .contact p {
	font-size: 14px;
	line-height: 24px;
	font-weight: 700;
	color: var(--color-gray-soft); 
}

section.services .contact p a {
	transition: all var(--transition-speed); 
	color: var(--color-primary); 
}

section.services .contact p a:hover {
	color: var(--color-secondary); 
}

section.services .contact:before {
	content: "\f4ad";
	font-size: 48px;
	font-family: var(--fontawesome);
	font-weight: 700;
	color: var(--color-secondary); 
}

/* ---------- mediaquery ---------- */


@media screen and (max-width: 1679px) {

}

@media screen and (max-width: 1360px) {
	section.services {
		padding: var(--section-spacing) var(--offset-small);
		display: grid; 
		grid-template-columns: var(--grid-5) var(--grid-4) var(--grid-3);
		grid-template-rows: auto auto;
		gap: var(--offset);
		grid-template-areas: 
			"title . contact"
			"container container container";
	}
}


@media screen and (max-width: 1023px) {
	section.services {
		display: grid; 
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
		gap: var(--offset);
		grid-template-areas: 
			"title"
			"container"
			"contact";
	}

	section.services .container {
		justify-content: center;	
	}

	section.services .contact {
		padding-left: 60px;
	}

	section.services .contact:before {
		left: 0px;
		top: 0px; 
	}

	section.services .dots {
		position: absolute;
		bottom: -60px;
		left: -40px;
	}
}

/* ---------- vars ---------- */


/* ---------- layout ---------- */

section.services .container a {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	row-gap: 15px;
}

section.services .container a .action {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

/* ---------- lipstick ---------- */
section.services .container a {
	text-decoration: none;	
	color: var(--color-black); 
	opacity: 0;
}

section.services .container article {
	height: 100%;
}

section.services .container a .icon {
	color: var(--color-primary);
	font-size: 24px;
}

section.services .container a .action {
	font-size: .9em;
	font-weight: 700;
	color: var(--color-primary); 
}

section.services .container a .action:hover {
	color: var(--color-secondary); 
}

/* ---------- visible ---------- */
[data-interactive="1"] section.services .container a {
	opacity: 1;
}

section.services .container a[data-observe="visible"] {
	animation: fade-in .25s forwards ease-in var(--delay); 
} 

section.services .container a[data-observe="visible"]:nth-child(1),
section.services .container a[data-observe="visible"]:nth-child(4) {
	--delay: 0s;
}

section.services .container a[data-observe="visible"]:nth-child(2),
section.services .container a[data-observe="visible"]:nth-child(5) {
	--delay: .2s;
}

section.services .container a[data-observe="visible"]:nth-child(3),
section.services .container a[data-observe="visible"]:nth-child(6) {
	--delay: .4s;
}

/* ---------- mediaquery ---------- */

@media screen and (max-width: 1679px) {

}

@media screen and (max-width: 1360px) {}

@media screen and (max-width: 1023px) {
	

}
/* ---------- vars ---------- */
section.tankstation {

}

/* ---------- layout ---------- */
section.tankstation {
	display: grid;
	grid-template-columns: var(--grid-5) var(--grid-2) var(--grid-1) var(--grid-4);
	gap: var(--offset); 
	justify-content: center;
	align-items: start;
}

section.tankstation .content {
	grid-column: 1;
	grid-row: 1;
}

section.tankstation .features {
	grid-column: 2 / 4; 
	grid-row: 1;
	z-index: 100;
}

section.tankstation .carrousel {
	grid-column: 3 / 5; 
	grid-row: 1;
}

[data-interactive="1"] section.tankstation .swiper .swiper-wrapper {
	position: relative;
	display: block;
}

/* ---------- lipstick ---------- */
section.tankstation {
	padding: var(--offset) 0;
}

section.tankstation .features,
section.tankstation article {
	margin-top: var(--offset);
}
/* ---------- mediaquery ---------- */

@media screen and (max-width: 1679px) {

}

@media screen and (max-width: 1360px) {

}

@media screen and (max-width: 1023px) {
	section.tankstation {
		padding-left: var(--offset-small);
		padding-right: var(--offset-small);
		display: grid;
		grid-template-columns:1fr;
		grid-template-rows: auto auto auto;
		gap: var(--offset); 
		justify-content: center;
		align-items: start;
	}

	section.tankstation .content,
	section.tankstation .features,
	section.tankstation .carrousel {
		grid-column: 1;
		grid-row: 1;
	}
	
	section.tankstation .features {
		grid-row: 2;
		grid-column: 1;
	}
	
	section.tankstation .carrousel {
		grid-row: 3;
	}
}

/* ---------- vars ---------- */

section.tankstation .features:before {
	--color: var(--color-black); 
	--width: var(--offset); 
	--height: var(--offset-small); 
} 
/* ---------- layout ---------- */
section.tankstation .features .feature {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px;
}

section.tankstation .features .feature + * {
	margin-top: 20px;
}

section.tankstation .features:before {
	left: calc(var(--width) * -1);
	top: var(--offset); 
	transform-origin: center right;
}

/* ---------- lipstick ---------- */
section.tankstation .features {
	background: var(--color-primary);
	padding: var(--offset-small); 
	color: white;
	font-size: 18px;
	line-height: 30px;
}

section.tankstation .features span {
	display: block;
	font-size: 14px;
	line-height: 24px;
	color: #e2e2e2;
}
section.tankstation .features .feature {
	opacity: 0; 
	transform: translateY(-30px);
}
[data-interactive="1"] section.tankstation .features .feature {
	opacity: 1; 
	transform: translateY(0px);
}

section.tankstation .features .feature > div:first-child {
	font-size: 24px;
}

/* ---------- visible ---------- */

section.tankstation .features .feature[data-observe="visible"] {
	animation: feature-in .4s forwards ease-out; 
}

section.tankstation .features .feature[data-observe="visible"]:nth-child(2) { animation-delay: .1s; }
section.tankstation .features .feature[data-observe="visible"]:nth-child(3) { animation-delay: .2s; }
section.tankstation .features .feature[data-observe="visible"]:nth-child(4) { animation-delay: .3s; }
section.tankstation .features .feature[data-observe="visible"]:nth-child(5) { animation-delay: .4s; }
section.tankstation .features .feature[data-observe="visible"]:nth-child(6) { animation-delay: .5s; }

[data-interactive="1"] section.tankstation .features .feature { animation: none; }

@keyframes feature-in {
	0% {
		opacity: 0; 
		transform: translateY(-30px);
	}

	70% {
		opacity: 1; 
		transform: translateY(30px);
	}

	100% {
		opacity: 1; 
		transform: translateY(0px);
	}
}


/* ---------- mediaquery ---------- */


@media screen and (max-width: 1023px) {


}
/* ---------- vars ---------- */
section.tankstation {
	--swiper-navigation-size: 44px;
	--swiper-navigation-top-offset: 50%;
	--swiper-navigation-sides-offset: 10px;
	--swiper-navigation-color: var(--color-primary);
	--swiper-pagination-bullet-size: 10px;
}

/* ---------- layout ---------- */
section.tankstation .carrousel .navigation {
	display: grid;
	grid-template-columns: auto auto auto;
	gap: 10px;
	justify-content: center;
	align-items: center;
}

section.tankstation .carrousel .navigation .swiper-pagination-bullets.swiper-pagination-horizontal  {
	position: relative;
	display: flex;
	place-items: center;
	bottom: 0;
}

section.tankstation .carrousel .navigation span.swiper-pagination-bullet {
	width: var(--swiper-pagination-bullet-size);
	height: var(--swiper-pagination-bullet-size);
	display: block;
}


/* ---------- lipstick ---------- */
section.tankstation .carrousel figure img {
	max-width: 100%;
}

section.tankstation .carrousel .navigation {
	padding-top: var(--offset-tiny); 
}

section.tankstation .carrousel .navigation span.swiper-pagination-bullet {
	background: var(--color-gray-soft);
	border-radius: 50%;
	opacity: 1;
}
section.tankstation .carrousel .navigation span.swiper-pagination-bullet.swiper-pagination-bullet-active {
	background: var(--color-primary); 
}

section.tankstation .carrousel .navigation .previous,
section.tankstation .carrousel .navigation .next 
{
	color: var(--color-gray-soft);
	cursor: pointer;
}

section.tankstation .carrousel .navigation > .swiper-button-disabled {
	color: rgba(119, 119, 119,.3);
}

/* ---------- mediaquery ---------- */


@media screen and (max-width: 1023px) {

	section.tankstation .carrousel {
		max-width: calc(100vw - var(--offset));
		justify-self: center;
	}
}
/* ---------- vars ---------- */
section.story .rectangle:before {
	--color: var(--color-primary); 
}

/* ---------- layout ---------- */

section.story {
	display: grid; 
	grid-template-columns: 1fr;
	grid-template-rows: var(--offset-small) 1fr;
}

section.story > * {
	grid-column: 1;
	grid-row: 1 / 3;
	z-index: 100;
}

section.story .background {
	z-index: 1;
	grid-row: 2;
	display: grid;
	grid-template-columns: calc(50% - (var(--grid-1) + var(--offset-small) + var(--offset))) 1fr;
	grid-template-rows: auto var(--offset);
}

section.story .background .color { 
	grid-column: 2 / -1;
	grid-row: 1;
}

section.story .background .image {
	grid-column: 1;
	grid-row: 1 / -1;
} 

section.story .content {
	display: grid; 
	grid-template-columns: var(--grid-6) var(--grid-6);
	grid-template-rows: var(--offset-small) 1fr var(--offset) var(--offset);
	gap: 0 var(--offset);
	justify-content: center;
}

section.story .content > article {
	grid-row: 2 / -1; 
	grid-column: 2;
}

section.story .content aside {
	grid-row: 1 / 3; 
	grid-column: 1;
	display: grid; 
	grid-template-columns: minmax(260px, 330px);
	justify-content: end;
	align-items: end;
}

section.story .content aside .cta {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

section.story .rectangle:before {
	transform-origin: center left;
	right: calc(var(--offset) * -1);
	top: var(--offset);
}

/* ---------- lipstick ---------- */
section.story .background .color { background: var(--color-blue); }
section.story .background .image { 
	background-size: cover; 
	background-position: 50%;
}

section.story .content > article {
	padding: calc(var(--offset) + var(--offset-small)) 0 calc(var(--offset) * 2) 0;
	color: white;
}

section.story .content aside .cta {
	height: 100%;
	background: #f7f7f7;
	padding: var(--offset-small); 
	box-shadow: 5px 5px 30px rgba(17,17,17,.2);
}

section.story .content aside .cta > i  {
	color: var(--color-red); 
	font-size: 48px;
	margin-bottom: var(--offset-tiny);
}

section.story .content aside .cta h3 {
	font-weight: 300;
	font-size: 30px;
}

section.story .content aside .cta h3 span {
	color: var(--color-red); 
	font-weight: 700;
	display: block;
	font-size: 14px;
	text-transform: uppercase;
}

section.story .content aside .cta a {
	color: var(--color-black); 
	text-decoration: none;
}

/* ---------- mediaquery ---------- */

@media screen and (max-width: 1679px) {

}

@media screen and (max-width: 1360px) {

}

@media screen and (max-width: 1023px) {
	section.story {
		display: grid; 
		grid-template-columns: var(--offset-small) 1fr var(--offset-small);
		grid-template-rows: var(--offset) 1fr 1fr;
	}

	section.story .background {
		z-index: 1;
		grid-column: 1 / 3;
		grid-row: 1 / 3;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
	}

	section.story .background .color { 
		display: none;
	}
	
	section.story .background .image {
		grid-column: 1;
		grid-row: 1;
	} 

	section.story .content {
		grid-column: 1 / -1;
		grid-row: 2 / 4;
		z-index: 100;
		display: grid; 
		grid-template-columns: var(--offset-small) 1fr var(--offset-small);
		grid-template-rows: auto 1fr;
		gap: var(--offset) var(--offset-small);
		justify-content: center;
	}

	section.story .content aside {
		grid-column: 2;
		grid-row: 1;
		justify-content:flex-start;
	}
	
	section.story .content > article {
		grid-column: 2 / -1;
		grid-row: 2;
		background: var(--color-blue);
		padding: var(--offset-small); 
	}
}
/* ---------- vars ---------- */


/* ---------- layout ---------- */
section.safety {
	display: grid;
	grid-template-columns: calc(50% + (var(--grid-2) + var(--offset-small))) 1fr;
	grid-template-rows: var(--offset) 1fr var(--offset);
	gap: 0 var(--offset)
}

section.safety .content	{
	grid-column: 1;
	grid-row: 2;
	display: grid;
	grid-template-columns: [title columns] var(--grid-8);
	grid-template-rows: [title] auto [columns]auto;
	gap: var(--offset);
	justify-content: end;
}

section.safety .content .title { grid-area: title; }
section.safety .content .columns { 
	grid-area: columns; 
	display: grid; 
	grid-template-columns: repeat(auto-fit, minmax(260px, var(--grid-4)));
	gap: var(--offset)
}

section.safety .background {
	grid-column: 2;
	grid-row: 1 / -1;
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}

section.safety .background .image {
	grid-row: 1;
	grid-column: 1;
}

section.safety .background .certificate {
	position: absolute;
	left: -30px;
	top: var(--offset-small);
	z-index: 100;
	display: grid;
	grid-template-columns: 60px 120px minmax(auto, 260px);
	grid-template-rows: 30px auto 30px;
}

section.safety .background .certificate .color {
	grid-column: 2 / -1;
	grid-row: 1 / -1;
}

section.safety .background .certificate .logo {
	grid-row: 2;
	grid-column: 1 / 3;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 100;
}

section.safety .background .certificate .summary {
	grid-row: 2;
	grid-column: 3;
	z-index: 100;
}

/* ---------- lipstick ---------- */

section.safety {
	padding-top: var(--offset);
}

section.safety .background .image {
	background-size: cover;
	background-position: 50%;
}

section.safety .background .certificate .color {
	background: var(--color-black);
}

section.safety .background .certificate .summary {
	color: white;
	padding: var(--offset-small) var(--offset-tiny);
}

section.safety .background .certificate .summary i {
	font-size: 30px;
}

section.safety .background .certificate .summary h4 {
	font-size: 24px; 
	font-weight: 300;
	text-transform: uppercase;
}

section.safety .background .certificate .logo {
	/*background: var(--color-red);*/
	background: #8d2125;
}

section.safety .background .certificate .logo img {
	max-width: 100%;
}

section.safety .background .certificate.hide {
	display: none;
}

/* ---------- mediaquery ---------- */


@media screen and (max-width: 1679px) {

}

@media screen and (max-width: 1360px) {

}

@media screen and (max-width: 1023px) {
	section.safety {
		grid-template-columns: var(--offset-small) 1fr var(--offset-small);
		grid-template-rows: auto minmax(40vh, 350px);
		gap: var(--offset) 0;
	}

	section.safety .content	{
		grid-column: 2;
		grid-row: 1;
		display: grid;
		grid-template-columns: [title columns] 1fr;
		grid-template-rows: [title] auto [columns] auto;
		gap: var(--offset);
		justify-content: center;
	}
	
	section.safety .content .columns { 
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		gap: var(--offset-small); 
	}

	section.safety .background {
		grid-column: 2;
		grid-row: 2;
		padding-left: var(--offset-small);
	}

	section.safety .background .certificate {
		position: absolute;
		left: 0px;
		grid-template-columns: 30px 90px auto;
	}

	section.safety .background .certificate .summary i {
		font-size: 24px;
	}
	
	section.safety .background .certificate .summary h4 {
		font-size: 18px; 
	}

}
/* ---------- vars ---------- */
section.statics {
	--icon-size: 100px; 
}


/* ---------- layout ---------- */
section.statics {
	display: grid; 
	grid-template-columns: 1fr var(--base) 1fr;
	grid-template-rows: calc(var(--icon-size) / 2) auto var(--offset);
}

section.statics .container {
	grid-column: 2;
	grid-row: 1 / 3;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, var(--grid-3)));
	gap: var(--offset);
	justify-content: center;
	z-index: 100;
}

section.statics .background {
	grid-column: 1 / -1;
	grid-row: 2 / -1;
}

section.statics .stats {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

section.statics .stats  .icon {
	display: flex;
	justify-content: center;
	align-items: center;
	width: var(--icon-size);
	height: var(--icon-size); 
}

/* ---------- lipstick ---------- */

section.statics {
	padding-top: var(--offset-small); 
}

section.statics .background {
	background: var(--color-layout);
}

section.statics .stats  .icon {
	opacity: 0;
	background: white;
	border-radius: 50%;
	box-shadow: 10px 10px 30px rgba(17,17,17,.2);
}

section.statics .stats .icon img {
	max-width: 100%;
}

section.statics .stats article {
	opacity: 0; 
	text-align: center;
}

section.statics .stats h5 {
	font-size: 60px;
	line-height: 50px;
	font-weight: 700;
	color: var(--color-secondary); 
}

section.statics .stats h5 span {
	font-size: 30px;
	display: block;
}

/* ---------- visible ---------- */

[data-interactive="1"] section.statics .stats[data-observe="visible"] .icon,
[data-interactive="1"] section.statics .stats[data-observe="visible"] article { animation: none; opacity: 0; } 

section.statics .stats[data-observe="visible"] .icon,
section.statics .stats[data-observe="visible"] article {
	animation: stats-article-in .25s forwards ease-out; 
}

section.statics .stats[data-observe="visible"]:first-child .icon { animation-delay: .1s; }
section.statics .stats[data-observe="visible"]:first-child article { animation-delay: .5s; }
section.statics .stats[data-observe="visible"]:nth-child(2) .icon { animation-delay: .3s; }
section.statics .stats[data-observe="visible"]:nth-child(2) article { animation-delay: .6s; }
section.statics .stats[data-observe="visible"]:nth-child(3) .icon { animation-delay: .5s; }
section.statics .stats[data-observe="visible"]:nth-child(3) article { animation-delay: .8s; }
section.statics .stats[data-observe="visible"]:nth-child(4) .icon { animation-delay: .7s; }
section.statics .stats[data-observe="visible"]:nth-child(4) article { animation-delay: 1s; }



/* ---------- mediaquery ---------- */

@media screen and (max-width: 1023px) {


}

@keyframes stats-article-in {
	0% {
		opacity: 0;
		transform: translateY(-30px) scale(.5);
	}
	70% {
		opacity: 1;
		transform: translateY(60px) scale(1.2);  
	}

	100% {
		opacity: 1;
		transform: translateY(0) scale(1); 
	}
}
/* ---------- vars ---------- */

/* ---------- layout ---------- */
div.contact-data address,
div.contact-data .openingstimes,
div.contact-data .socialmedia {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--offset-small) var(--offset-tiny);
}

div.contact-data .openingstimes {
  grid-template-columns: 30px 1fr;
}

div.contact-data .openingstimes .time {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--offset-tiny);
}

div.contact-data > * + * {
  margin-top: var(--offset-small);
}

div.contact-data .socialmedia *:last-child {
  display: flex;
  column-gap: var(--offset-small);
}

div.socialmedia > div:nth-child(3) > a:nth-child(1) {
  margin-left: 30px;
}

/* ---------- lipstick ---------- */

div.contact-data a {
  transition: all var(--transition-speed);
}

div.contact-data i[class*="fa"] {
  color: var(--color-red);
  transition: all var(--transition-speed);
}

div.contact-data h5 {
  font-weight: 700;
  color: var(--color-black);
}

div.contact-data h6 {
  font-weight: 300;
  text-transform: none;
  font-size: 16px;
  color: var(--color-black);
}

div.contact-data address a {
  color: var(--color-black);
}
div.contact-data address a:hover {
  color: var(--color-blue);
}

div.contact-data > * > i {
  font-size: 30px;
}

div.contact-data .socialmedia a {
  text-decoration: none;
}

div.contact-data .socialmedia a:hover i {
  color: var(--color-black);
}

div.contact-data .socialmedia *:last-child i {
  font-size: 24px;
}

div.contact-data .socialmedia a[href*="whatsapp"]:hover i {
  color: var(--color-whatsapp);
}
div.contact-data .socialmedia a[href*="facebook"]:hover i {
  color: var(--color-facebook);
}
div.contact-data .socialmedia a[href*="instagram"]:hover i {
  color: var(--color-instagram);
}
div.contact-data .socialmedia a[href*="youtube"]:hover i {
  color: var(--color-youtube);
}
div.contact-data .socialmedia a[href*="twitter"]:hover i {
  color: var(--color-twitter);
}
div.contact-data .socialmedia a[href*="linkedin"]:hover i {
  color: var(--color-linkedin);
}

/* ---------- layout ---------- */
section.contact {
	display: grid;
	grid-template-columns: calc(50% + (var(--grid-2) + var(--offset-small))) 1fr;
	grid-template-rows: var(--offset) 1fr var(--offset);
	gap: 0 var(--offset)
}

section.contact .content	{
	grid-column: 1;
	grid-row: 2;
	display: grid;
	grid-template-columns: [title columns] var(--grid-8);
	grid-template-rows: [title] auto [columns]auto;
	gap: var(--offset);
	justify-content: end;
}

section.contact .content .title { grid-area: title; }
section.contact .content .columns {
	grid-area: columns;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, var(--grid-4)));
	gap: var(--offset)
}

section.contact .background {
	grid-column: 2;
	grid-row: 1 / -1;
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}

section.contact .background .image {
	grid-row: 1;
	grid-column: 1;
}

section.contact .background .certificate {
	position: absolute;
	left: -30px;
	top: var(--offset-small);
	z-index: 100;
	display: grid;
	grid-template-columns: 60px 120px minmax(auto, 260px);
	grid-template-rows: 30px auto 30px;
}

section.contact .background .certificate .color {
	grid-column: 2 / -1;
	grid-row: 1 / -1;
}

section.contact .background .certificate .logo {
	grid-row: 2;
	grid-column: 1 / 3;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 100;
}

section.contact .background .certificate .summary {
	grid-row: 2;
	grid-column: 3;
	z-index: 100;
}

/* ---------- lipstick ---------- */

section.contact {
	padding-top: var(--offset);
}

section.contact .background .image {
	background-size: cover;
	background-position: 50%;
}

section.contact .background .certificate .color {
	background: var(--color-black);
}

section.contact .background .certificate .summary {
	color: white;
	padding: var(--offset-small) var(--offset-tiny);
}

section.contact .background .certificate .summary i {
	font-size: 30px;
}

section.contact .background .certificate .summary h4 {
	font-size: 24px;
	font-weight: 300;
	text-transform: uppercase;
}

section.contact .background .certificate .logo {
	/*background: var(--color-red);*/
	background: #8d2125;
}

section.contact .background .certificate .logo img {
	max-width: 100%;
}

section.contact .background .certificate.hide {
	display: none;
}

/* ---------- mediaquery ---------- */

@media screen and (max-width: 1023px) {
  div.contact-data address,
  div.contact-data .openingstimes,
  div.contact-data .socialmedia {
    display: grid;
    grid-template-columns: 20px 1fr;
  }

  div.contact-data address > div {
    grid-column: 2;
  }

  div.contact-data > * > i {
    font-size: 18px;
    align-self: start;
    margin-top: 7px;
  }

  div.contact-data .openingstimes .time {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0 10px;
  }

  div.contact-data .openingstimes .time + .time {
    margin-top: var(--offset-tiny);
  }

  div.contact-data .openingstimes .time > div:first-child {
    font-weight: 700;
  }

  section.contact {
		grid-template-columns: var(--offset-small) 1fr var(--offset-small);
		grid-template-rows: auto minmax(40vh, 350px);
		gap: var(--offset) 0;
	}

	section.contact .content	{
		grid-column: 2;
		grid-row: 1;
		display: grid;
		grid-template-columns: [title columns] 1fr;
		grid-template-rows: [title] auto [columns] auto;
		gap: var(--offset);
		justify-content: center;
	}

	section.contact .content .columns {
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		gap: var(--offset-small);
	}

	section.contact .background {
		grid-column: 2;
		grid-row: 2;
		padding-left: var(--offset-small);
	}

	section.contact .background .certificate {
		position: absolute;
		left: 0px;
		grid-template-columns: 30px 90px auto;
	}

	section.contact .background .certificate .summary i {
		font-size: 24px;
	}

	section.contact .background .certificate .summary h4 {
		font-size: 18px;
	}
}

.button {
	--size: 50px;
	--line-height: 32px;
	--padding: calc((var(--size) - var(--line-height)) / 3) var(--offset-small);
	--radius: calc(var(--size) / 2);
}

.button[data-size="small"] {
	--size: 40px;
	--line-height: 32px;
	--padding: calc((var(--size) - var(--line-height)) / 4) calc(var(--line-height) / 2);
}

.button[data-size="tiny"] {
	--size: 30px;
	--line-height: 24px;
	--padding: calc((var(--size) - var(--line-height)) / 4) 20px;
}

.button {
	display: inline-grid; 
	grid-template-columns: 20px 1fr;
	grid-template-rows: 1fr;
	gap: 10px;
	place-items: center;
	background: var(--color-primary);
	border-radius: var(--radius); 
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	cursor: pointer;
	padding: var(--padding);
	color: var(--color-black); 
	text-decoration: none;
	border: 0; 
	min-height: var(--size); 
	box-shadow: 10px 10px 20px rgba(17,17,17,.2);
	transition: all var(--transition-speed);
	transform: translateY(-3px);
}

.button i  {
	font-size: 24px;
}

.button i:before {
	margin-right: 0px;
	color: white;
}

.button[data-size="small"] {
	font-size: 14px;
}

.button[data-size="tiny"] {
	font-size: 12px;
	grid-template-columns: 10px 1fr;
}

.button:hover,
.button[data-color]:hover {
	background: var(--color-black); 
	color: white;
	box-shadow: 5px 5px 10px rgba(17,17,17,.3);
	transform: translateY(0);
}

.button[data-color="black"]:hover {
	background: white;
	color: var(--color-black); 
}

.button[data-color="blue"] {
	background: var(--color-blue); 
	color: white;
}

.button[data-color="red"] {
	background: var(--color-red); 
	color: white;
}

.button[data-color="green"] {
	background: var(--color-green); 
}

.button[data-color="black"] {
	background: var(--color-black); 
	color: white;
}

@media screen and (max-width: 1439px) {
	.button {
		--size: 40px;
	}	
}

@media screen and (max-width: 1023px) {
	.button {
		--size: 40px;
		--line-height: 32px;
		font-size: 14px;
	}	
}
/* ---------- vars ---------- */
section.hero {
	--content: 680px;
}

section.hero-small {
	--content-small: 0px;
}
/* ---------- layout ---------- */
section.hero {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: calc(var(--header-height) + var(--section-spacing)) var(--content) 60px;
}

section.hero-small {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: var(--header-height) var(--content-small) 60px;
}

section.hero > * {
	grid-column: 1;
	grid-row: 2 / 4;
}

section.hero > .background { grid-row: 1 / 3; }

section.hero > .content {
	z-index: 100;
	display: grid;
	grid-template-columns: calc(50% - (var(--offset-small) + var(--grid-2))) 1fr;
	gap: var(--offset);
	align-items: start;
}

section.hero > .content .story {
	grid-column: 1;
	grid-row: 1;
	display: grid;
	grid-template-columns: var(--grid-4);
	justify-content: end;
}

section.hero > .content .swiper {
	grid-column: 2;
	grid-row: 1;
}

[data-interactive="1"] section.hero .swiper { overflow: initial; }
[data-interactive="1"] section.hero { --content: 100%; }
[data-interactive="1"] section.hero .swiper-wrapper {
	display: block;
}

/* ---------- lipstick ---------- */
section.hero {
	color: white;
	background: var(--color-layout);
}

section.hero > .content .story {
	padding: var(--offset) 0;
}

/* ---------- mediaquery ---------- */


@media screen and (max-width: 1679px) {

}

@media screen and (max-width: 1360px) {
	section.hero > .content .story {
		grid-template-columns: var(--grid-6);
	}
}

@media screen and (max-width: 1023px) {

	section.hero {
		grid-template-rows: var(--header-height) 680px 30px;
	}

	section.hero > * {
		grid-column: 1;
		grid-row: 1 / 4;
	}

	section.hero > .background {
		grid-row: 1 / 3;
	}

	section.hero > .content {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
	}

	section.hero > .content .story {
		grid-row: 2;
		grid-column: 1;
		padding: 0 var(--offset-small);
		grid-template-columns: 1fr;
		justify-content: start;
	}

	section.hero > .content .swiper {
			grid-column: 1;
			grid-row: 1;
	}
}
/* ---------- vars ---------- */


/* ---------- layout ---------- */
section.hero > .content .swiper {
	width: 100%;
	height: 100%;
}

section.hero > .content .swiper .slide {
	display: grid;
	grid-template-columns: 60px 1fr;
	grid-template-rows: 1fr;
}

section.hero > .content .swiper .slide > * {
	grid-column: 1 / -1;
	grid-row: 1;
}

section.hero > .content .swiper .slide .overlay {
	z-index: 100;
}

section.hero > .content .swiper .slide .image {
	z-index: 200;
	grid-column: 2;
}

[data-interactive="1"] section.hero > .content .swiper { height: 400px; }

/* ---------- lipstick ---------- */

section.hero > .content .swiper  {
	filter: drop-shadow(5px 5px 15px rgba(17,17,17,.3));
}

section.hero > .content .swiper .slide .overlay {
	background-image: url(/e2/site/gsvandenijssel/content/site/image/overlay.webp);
	background-position: 0 60px;
	background-repeat: no-repeat;
} 

section.hero > .content .swiper .slide .image {
	background-size: cover;
	background-position: 50%;
	-webkit-mask-image: url(/e2/site/gsvandenijssel/content/site/image/mask.png);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	-webkit-mask-position: 100%;
	mask-image: url(/e2/site/gsvandenijssel/content/site/image/mask.png);
	mask-repeat: no-repeat;
	mask-size: contain;
	mask-position: 100%;
}

/* ---------- mediaquery ---------- */


@media screen and (max-width: 1023px) {

	section.hero > .content .swiper .slide .overlay {
		display: none;
	}

	section.hero > .content .swiper .slide .image {
		grid-column: 1 / -1;
		mask-image: none;
		-webkit-mask-image: none;
		min-height: 30vh;
	}
}
/* ---------- vars ---------- */
section.hero > .background .dots {
	--color: rgba(255,255,255,.2);
	--active-color: rgba(255,255,255,.5);
}

/* ---------- layout ---------- */
section.hero > .background {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}

section.hero > .background .image,
section.hero > .background .dots, 
section.hero > .background .overlay {
	grid-column: 1;
	grid-row: 1;
}

section.hero > .background .dots {
	z-index: 50;
	position: absolute;
	left:calc(50% - (var(--offset-small) + var(--grid-2)));
	bottom: var(--offset);
}

section.hero > .background .overlay {
	display: grid;
	grid-template-columns: calc(50% - (var(--offset-small) + (var(--offset) * 2))) 1fr;
	z-index: 100;
}

section.hero > .background .overlay img {
	grid-column: 2;
	grid-row: 1;
	justify-self:start;
	align-self: end;
}

/* ---------- lipstick ---------- */
section.hero > .background {
	background: var(--color-blue); 
	border-bottom: 5px solid var(--color-red); 
}

section.hero-small > .background {
	background: var(--color-blue);
	border-bottom: 0px solid var(--color-red);
}

section.hero > .background .overlay {
	display: none;
}

section.hero > .background .image {
	opacity: .5;
	background-size: cover;
	background-position: 50%;
	mix-blend-mode: soft-light;
}

/* ---------- mediaquery ---------- */


@media screen and (max-width: 1023px) {
	section.hero > .background .overlay {
		display: none;
	}

	section.hero > .background .dots {
		z-index: 50;
		position: absolute;
		left: 50%;
		top: 30%;
	}

}
/* ---------- vars ---------- */


/* ---------- layout ---------- */

section.hero > .scroll {
	grid-row: 4;
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	justify-items: center;
	z-index: 300;
}

section.hero > .scroll a {
	top: -70px;
	position: absolute;
	height: 114px;
	width: 94px;
	display: flex;
	justify-content: center;
	align-items: center;
}

section.hero > .scroll a:before {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	content: "\f063";
	z-index: 100;
	top:50%;
}

section.hero > .scroll a:hover {
	top: -60px;
	
}

section.hero > .scroll a:hover:before {
	top: 65%;
	transition-delay: .3s;
}

/* ---------- lipstick ---------- */
section.hero > .scroll a .white {
	fill: white;
}

section.hero > .scroll a svg {
	filter: drop-shadow(10px 10px 30px rgba(17,17,17,.3));
}

section.hero > .scroll a {
	transition: all var(--transition-speed); 
}

section.hero > .scroll a:before {
	color: white;
	font-family: var(--fontawesome);
	font-size: 40px;
	font-weight: 700;
	transition: all var(--transition-speed); 
}

section.hero > .scroll a svg {
	filter: drop-shadow(5px 5px 10px rgba(17,17,17,.7));
}

/* ---------- mediaquery ---------- */


@media screen and (max-width: 1023px) {

	section.hero > .scroll a {
		top: -70px;
		height: 60px;
		width: 60px;
	}

	section.hero > .scroll a:before {
		font-size: 18px;
	}

	section.hero > .scroll { display: none !important; }
}
/* ---------- vars ---------- */


/* ----------  ---------- */

*[data-text-align="center"] {
    text-align: center;
}
*[data-text-align=""],
*[data-text-align="left"] {
    text-align: left;
}

*[data-text-align="right"] {
    text-align: right;
}

.text[data-text-size="small"],
.text[data-text-size="small"] p {
	--font-size: 14px;
	--line-height: 24px;
	font-size: var(--font-size); 
	line-height: var(--line-height);
}

.text > * + *,
[data-interactive="1"] .text > * + * {
	margin-top: var(--line-height); 
}

.text h3 + p {
	margin-top: 15px; 
}

.text-large p {
	font-size: 1.2em;
	line-height: 1.5em;
	font-weight: 400;
}

.text ul {}
.text ul li,
.text ol li {
	padding-left: var(--offset-small); 
}

.text ul li:before,
.text ol li:before {
	font-family: "Font Awesome 6 Pro";
	content: "\f105";
	color: var(--color-primary);
	position: absolute; 
	margin-left: -20px;
}

.text ol li:before { font-family: var(--font-family); font-weight: 700; }
.text ol li:nth-child(1):before { content: "1"; }
.text ol li:nth-child(2):before { content: "2"; }
.text ol li:nth-child(3):before { content: "3"; }
.text ol li:nth-child(4):before { content: "4"; }
.text ol li:nth-child(5):before { content: "5"; }
.text ol li:nth-child(6):before { content: "6"; }
.text ol li:nth-child(7):before { content: "7"; }
.text ol li:nth-child(8):before { content: "8"; }
.text ol li:nth-child(9):before { content: "9"; }
.text ol li:nth-child(10):before { content: "10"; }

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

.text figure img {
	max-width: 100%;
}

/* ---------- mediaquery ---------- */

@media screen and (max-width: 1023px) {
	.text-large p {
		font-size: 18px;
		line-height:28px;
		font-weight: 400;
	}
}

/* ---------- vars ---------- */
div.dots {
	--x: 4;
	--y: 14;
	--columns: repeat(var(--x), auto);
	--rows:  repeat(var(--y), auto);
	--size: 10px;
	--container-width: calc((var(--size) * var(--x)) + var(--offset-small) * var(--x));
	--active-color: var(--active-color, var(--color-primary)); 
	--color: var(--color, var(--color-primary)); 
}

div.dots[data-x="5"] { --x: 5; }
div.dots[data-y="13"] { --y: 13; }

/* ---------- layout ---------- */
div.dots {
	display: grid;
	grid-template-columns: var(--container-width);
}

div.dots .container {
	display: grid; 
	grid-template-columns: var(--columns);
	grid-template-rows: var(--rows);
	gap: calc(var(--offset-small) - calc(var(--size) / 2)); 
}


div.dots .container span {
	display: inline;
	width: var(--size);
	height: var(--size); 
}

/* ---------- lipstick ---------- */

div.dots .container span {
	border-radius: 50%;
	background: rgba(17,17,17,.2);
	transition: all var(--transition-speed); 
}

div.dots .container span {
	background: var(--color); 
}

div.dots .container .active {
	background: var(--active-color); 
	animation: dots-in .25s forwards ease-out;
}

/* ---------- mediaquery ---------- */

@keyframes dots-in {
	0%, 100% { transform: scale(1); }
	40% { transform: scale(1.2); }
	80% { transform: scale(.7); }
}

@media screen and (max-width: 1023px) {
	div.dots {
		--size: 6px;
	}
}
/* ---------- vars ---------- */
.rectangle:before {
	--rec-w: var(--width, var(--offset)); 
	--rec-h: var(--height, var(--offset-small)); 
	--rec-color: var(--color, var(--color-primary)); 
	--rec-delay: var(--delay, 0s); 
}

/* ---------- layout ---------- */

.rectangle {
	position: relative;
}

.rectangle:before {
	position: absolute;
	width: var(--rec-w);
	height: var(--rec-h); 
}

/* ---------- lipstick ---------- */
.rectangle:before {
	background: var(--rec-color);
	content: " ";
	transform: scaleX(0) scaley(.5);
	z-index: 1000;
}

/* ---------- visible ---------- */
.rectangle[data-observe="visible"]:before {
	animation: rectangle-in .4s forwards ease-out var(--rec-delay); 
}

/* ---------- mediaquery ---------- */

@keyframes rectangle-in {
	0% {
		transform: scaleX(0) scaleY(.5);
	}
	65% {
		transform: scaleX(2) scaleY(.5); 
	}

	80% {transform: scaleX(1) scaleY(.5);  }
	
	100% {
		transform: scaleX(1) scaleY(1);
	}
}

@media screen and (max-width: 1023px) {


}
/* ---------- layout---------- */
.checkboxes label {
	display: inline-flex;
	justify-content: start;
	gap: 5px;
}

.checkboxes label input { display: none; }

/* ---------- lipstick ---------- */

.checkboxes label {
	font-weight: 400;
	line-height: 20px;
	cursor: pointer;
}

.checkboxes label > span {
	display: inline-block;
	margin-right: 5px;
}

.checkboxes label > span:before {
	display: inline-block;
	font-family: "Font Awesome 6 Pro";
	content: "\f058";
	color: var(--color-gray);
	opacity: .2;
	font-weight: 700;
	font-size: 20px;
}

.checkboxes label > input:checked + span:before {
	color: var(--color-primary);
	content: "\f058";
	opacity: 1;
}

/* ---------- media query ---------- */

/* ---------- vars ---------- */

.form .fields .row.date  {
	--default-row: 120px auto auto auto;  
}

/* ---------- layout ---------- */
.form .fields .row.date  {
	display: grid; 
	justify-content: start;
}

.form .fields .row.date > div {
	display: flex;
	gap: 10px;
	align-items: center;
} 

/* ---------- lipstick ---------- */
.form .fields .row.date > div:nth-child(n+2) label {
	color: var(--color-gray-dark); 
}

/* ---------- mediaquery ---------- */


@media screen and (max-width: 1023px) {


}
/* ---------- layout---------- */
.form {
	--input-size: 50px;
	--border-radius: calc(var(--input-size) / 2);
	--default-row: var(--row);  
}

.form .fields,
.form .fields .columns > div {
	display: grid;
	grid-template-columns: 1fr;
	gap: 15px var(--offset-small); 
}

.form .fields .row.extended {
	grid-column: 1 / -1;
}

.form .fields .row {
	display: grid;
	grid-template-columns: var(--default-row, 120px 1fr);
	gap: var(--offset-small); 
	justify-content: center;
	align-items: center;
}

.form .fields .columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--offset);
}

.form .fields .row .inline {
	display: flex; 
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap; 
} 

.form .fields .row .inline > * + * {
	margin-left: var(--offset-small); 
}

.form .fields .top-align {
	align-self: start;
} 


/* ---------- lipstick ---------- */
.form .fields .row div:first-child {
	line-height: 18px;
}

.form .fields .row label {
	font-weight: 700;
	font-size: 13px;
}

.form .fields .row label > span {
	font-size: 14px;
	font-weight: 18px;
	font-weight: 300;
	display: block; 
}
.form .hide {
	display: none;
}

.form .fields .row.action {
	margin-top: var(--offset-small); 
	display: flex;
	justify-content: flex-end;
}

.form .fields .row > h3 {
	position: relative;
	margin-top: var(--line-height); 
	margin-bottom: calc(var(--line-height) / 2); 
	font-weight: 700;
	font-size: 16px;
	color: var(--color-black); 
	grid-column: 1 / -1;
}

.form .fields .row > h3 i {
	color: var(--color-green); 
}

.form .fields .row > h3.first {
	margin-top: 0;
}

/* ---------- media query ---------- */

@media screen and (max-width: 1360px) {
	.form {
		--input-size: 40px;
	}
}

@media screen and (max-width: 1023px) {

	.form .fields {
		grid-template-columns: 1fr;
	}

	.form .fields .row.extended {
		grid-column: 1;
	}

	.form .fields .row {
		grid-template-columns: 1fr;
		gap: 5px;
	}

}

/* ---------- layout---------- */
input[type="text"],
input[type="email"],
input[type="date"],
input[type="number"],
input[type="password"],
textarea,
select {
	font-size: 14px;
	line-height: var(--line-height);
	border: 0px; 
	padding: calc((var(--input-size) - var(--line-height)) / 2) calc(var(--input-size) / 2);
	border-radius: calc(var(--input-size) / 2); 
	width: 100%;
	font-family: var(--font-family);
	background: var(--color-layout); 
}

.search-form select,
.form select {
	appearance: none;
	outline: none;
}

.form select::placeholder,
.form input::placeholder,
.form textarea::placeholder {
	font-size: 13px; 
	font-weight: 600;
	font-style: italic;
	color: var(--color-gray-light); 
}

select { position: relative; }


/* ---------- lipstick ---------- */
select {
	min-height: var(--input-size);
}

textarea {
	min-height: calc(var(--line-height) * 4);
}


/* ---------- media query ---------- */