/* https://www.toomanywords.nl 
   v1.3 | 2020-10-07
*/

@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* HTML5 display-role reset for older browsers */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, 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 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
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;
}

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


/* ----------------Page setup---------------------*/
html {
	scroll-behavior: smooth;
}

body {
	position:relative;
	float:left;
	display:block;
	background-color:#000;
	color: #fff;
	font-family: "Montserrat", sans-serif;
	font-size: 1.3em;
	letter-spacing:0.02em;
	font-weight:500;
	line-height:1.4em;
  	width: 100%;
}

.container {
	position:relative;
	float:left;
	display:block;
	width:100%;
	height:100%;
}

.grid {
	position:relative;
	width:100%;
	margin:0px auto 0px;
	padding-bottom: 350px;
}

.holder {
	position:relative;
	max-width:1450px;
	margin:20px auto;
	display:flex;
  	flex-wrap: wrap;
	padding:0px 6%;
}

.holder-no-wrap {
	max-width:1350px;
	margin:0px auto;
	display:flex;
}

/* ----------------COLUMNS---------------------*/

.FiveBox {
    flex: 0 1 calc(20% - 40px); /* Adjust width and include margin space */
    margin-right: 40px;
    margin-bottom: 20px;	
	position: relative;
    box-sizing: border-box; /* Ensures padding and border are included in the width and height */
}

.FiveBox:nth-child(5n) {
    margin-right: 0; /* Remove right margin for every 5th element */
}

.FourBox {
    flex: 0 1 calc(25% - 40px); /* Adjust width and include margin space */
    margin-right: 40px;
    margin-bottom: 20px;
	position: relative;
}

.FourBox:nth-child(4n) {
    margin-right: 0;
}

.ThreeBox {
    flex: 0 1 calc(33.333333% - 60px); /* Adjust width and include margin space */
    margin-right: 60px;
    margin-bottom: 20px;	
	position: relative;
}

.ThreeBox:nth-child(3n) {
    margin-right: 0;
}

.OneThreeBox {
    flex: 0 1 calc(33.333333% - 60px); /* Adjust width and include margin space */
    margin-right: 60px;
    margin-bottom: 20px;
}

.TwoThreeBox {
    flex: 0 1 calc(66.6666% - 60px); /* Adjust width and include margin space */
    margin-right: 0px;
    margin-bottom: 20px;
}

.TwoBox {
    flex: 0 1 calc(50% - 40px); /* Adjust width and include margin space */
    margin-right: 40px;
    margin-bottom: 20px;
	position: relative;
}

.TwoBox:nth-child(2n) {
    margin-right: 0;
}

.OneBox {
    width: 100%;
    margin-right: 40px;
    margin-bottom: 20px;
	position: relative;
}

.centeredDiv {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
}

.ImageCombine .FourBox {
	margin: 0px;
	flex: 0 1 calc(25%);	
}

.ImageCombine .ThreeBox {
	margin: 0px;
	flex: 0 1 calc(33%);	
}

/*-------------------HEADER NAVIGATION---------------------------*/
.header {
	position:fixed;
	float:left;
	display: block;
	width:100%;
	height: auto;
	padding:0;
	z-index: 1000;
  	background-color: transparent;
	color: #fff;
}

#nav {
 	width: 100%;
  	position: relative;
	display: block;
  	z-index: 1000;
	font-size: 70%;
	float: left;	
}

.holdernav {
	position:relative;
	max-width:1350px;
	margin:0px auto;
	display:flex;
	padding: 0px 6%;
  	flex-wrap: wrap;
}

#nav > ul {
  	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
  	list-style: none;
  	padding: 10px 0px 20px;
  	margin: auto;
	gap: 10rem;
}

.nav-links {
	position: relative;
	mix-blend-mode: difference;
}

#nav > ul > li {
	position: relative;
  height: 100%;
}

#nav > ul > li > a {
  display: block;
  padding: 15px 20px;
  text-decoration: none;
	color: #FFF;
	line-height: 1.2em;
	font-weight: 600;
	font-size: clamp(0.8rem, 2vw, 1.2rem);
}

.home #nav > ul > li > a {
	color: #FFF;
}

#nav > ul > li > a:active,
#nav > ul > li > a:hover {
    text-decoration: underline;
}

/* Submenu CSS */
	.submenu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		list-style: none;
		padding: 20px;
		margin: 0;
		min-width: 250px;
		background-color: rgb(96 233 149);
		box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Optioneel, voor wat schaduw effect */
		z-index: 1000;
	}

	.submenu > li {
		width: 100%; /* Optioneel, voor volle breedte submenu items */
	}

	.submenu > li > a {
		display: block;
		text-decoration: none;
	}

	.submenu > li > a:hover {
		background-color: rgba(96, 233, 149, 0.1); /* Optioneel, voor een hover effect op submenu items */
	}

	/* Toon submenu bij hover */
	#nav > ul > li:hover .submenu {
		display: block;
	}

/* Menu toggle button */
#menu-toggle {
    display: none;
}

.menu-icon {
    display: none;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;	
    width: 30px;
    height: 30px;
	float: right;
}

.menu-icon div {
    width: 25px;
    height: 3px;
    margin: 4px 0;
    background-color: #FFF;
    transition: 0.4s;
}

.home .menu-icon div {
    background-color: rgb(0 40 100);
}

/*------------------------WWHATSAPP CONTACT LINK------------------------*/
.contact-wrapper {
    position: relative;
}

/* Default hiding position */
.qr-popup {
    position: absolute;
    top: 100%; 
    right: 0;
    background: rgba(0, 0, 0, 0.7);
		backdrop-filter: blur(10px);
    padding: 10px;
    border-radius: 10px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity .25s ease, transform .25s ease;
}

.qr-gap-bridge {
	position: absolute;
	top: 10px;
	left: 0;
	width: 120px;
	height: 30px;
	z-index: -1;
	opacity: 0;
	transition: opacity .25s ease;
}

.contact-wrapper:hover .qr-gap-bridge {
	position: absolute;
	opacity: 1;
	transform: translateY(30px);
	pointer-events: auto;
	z-index: -1;
}

/* Sliding down */
.contact-wrapper:hover .qr-popup {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(10px);
}
/*------------------------FONT BASICS------------------------*/

h1, h2, h3, h4, h5, h6 {
	font-family: "Merriweather", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
	margin-bottom:0.4em;
	font-weight:700;
    width: 100%;
	margin-top:1em;
}

h1 {
	font-size:3em;
	font-weight: 900;
	margin-bottom: 40px;
	line-height: normal;
}
h1 span {
	display: block;
}

.PreTitle {
	position: absolute;
	top: 0;
  left: 0;
}
.AfterTitle {
	position: absolute;
  	top: 5rem;
  	left: 0;
	white-space: nowrap;
}

h2 {
	font-size:1.5em;	
	font-weight: 700;
	line-height:normal;
}

h3 {
	font-size:1.1em;
	margin-bottom:10px;
}

h4 {
	font-size:1em;
	margin-bottom:0.2em;
}

h5 {
	font-size:1.3em;
	line-height:2.0em;
}

p {
	margin:0px 0px 1em;
}

.p-clean {
	margin: 0px;
	padding: 0px;
	line-height: normal;
}

em {
	font-style: italic;
}

.small {
	padding-top: 10px;
	font-size:small;
	line-height: normal;
}

strong {
	font-weight:bold;
}

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

a:hover, a:focus {
	text-decoration: underline;
}

ol {
	list-style-type: decimal;
	padding:0px 30px;
}

ul.list {
    list-style-type: none;
	margin: 0px 0px 20px 20px;
}

.list li:before {
    content: "# ";
    margin: 0 0 0 -15px;
}

td {
	padding: 5px;
	color: #000;
}


img {
	position:relative;
	display:block;
	margin-left: auto;
  	margin-right: auto;
	max-width:100%;
}

.text-shadow {
    color: white;
    text-shadow:
        0 0 6px rgba(0,0,0,0.5);
}

.text-clamp-xxs {
	font-size: clamp(0.6rem, 3vw, 0.8rem);
	line-height: clamp(0.8rem, 3vw, 1rem);
}

.text-clamp-xs {
	font-size: clamp(0.8rem, 3vw, 1.2rem);
	line-height: clamp(1rem, 3vw, 1.4rem);
}

.text-clamp-sm {
	font-size: clamp(1rem, 3vw, 1.5rem);
	line-height: clamp(1.2rem, 3vw, 1.7rem);
}

.text-clamp-md {
	font-size: clamp(1.2rem, 3vw, 1.8rem);
	line-height: clamp(1.4rem, 3vw, 2rem);
}

.text-clamp-lg {
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: clamp(1.7rem, 3vw, 2.2rem);
}

.text-clamp-logo-xxs {
	font-size: clamp(0.7rem, 3vw, 0.9rem);
	line-height: clamp(0.9rem, 3vw, 1.1rem);
}

.text-clamp-logo-xs {
	font-size: clamp(1rem, 3vw, 1.5rem);
	line-height: clamp(1.2rem, 3vw, 1.7rem);
}

.text-clamp-logo-sm {
	font-size: clamp(1.2rem, 3vw, 1.8rem);
	line-height: clamp(1.4rem, 3vw, 2.2rem);
}

.text-clamp-logo-md {
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	line-height: clamp(1.7rem, 3vw, 2.2rem);
}

.text-clamp-logo-lg {
	font-size: clamp(2rem, 3vw, 2.5rem);
	line-height: clamp(2.2rem, 3vw, 2.7rem);
}

.text-clamp-hero {
	font-size: clamp(1.2rem, 3vw, 1.5rem);
	line-height: clamp(1.4rem, 3vw, 1.7rem);
}

.header-clamp-sm {
	font-size: clamp(1.2rem, 3vw, 1.8rem);
	line-height: clamp(1.4rem, 3vw, 2rem);
}

.header-clamp-md {
	font-size: clamp(1.8rem, 3vw, 2.5rem);
	line-height: clamp(2rem, 3vw, 2.7rem);
	font-weight: 600;
}

.header-clamp-lg {
	font-size: clamp(2.5rem, 3vw, 3.5rem);
	line-height: clamp(2.7rem, 3vw, 3.7rem);
	font-weight: 600;
}

.header-clamp-xl {
	position: relative;
	width: 100%;
	font-size: clamp(5rem, 3vw, 6.5rem);
	line-height: clamp(5.2rem, 3vw, 6.7rem);
	font-weight: 600;
}

.header-clamp-2xl {
	font-size: clamp(6rem, 3vw, 7.5rem);
	line-height: clamp(6.2rem, 3vw, 7.7rem);
	font-weight: 600;
}

.header-clamp-3xl {
	font-size: clamp(7rem, 3vw, 8.5rem);
	line-height: clamp(7.2rem, 3vw, 8.7rem);
	font-weight: 600;
}

.hero-text-clamp {
	font-size: clamp(0.5rem, 1vw, 1.5rem);
	line-height: clamp(1.7rem, 3vw, 2.2rem);
}

.italic {
	font-style: italic;
	font-weight: 400;
}

/*------------------------SIZE AND PLACEMENT----------------------------------*/

.right, .right a {
	text-align:right !important;
}

.center {
	text-align:center !important;
	margin-left:auto;
	margin-right: auto;
}

.clear {
	clear:both;
}

/*------------------------COLOUR----------------------------------*/

.bgwhite {
    background-color: #fff;
}

.bgwhite li, .bgwhite  p, .bgwhite  h1, .bgwhite  h2, .bgwhite  h3, .bgwhite  span, .bgwhite  a {
    color: #000;
}

.shadow {
  filter: drop-shadow(0 35px 50px rgba(0,0,0,0.85));
}

.white-link {
	color: #FFF;
	text-decoration: underline;
}

.JourneyHeader {
	color: yellow !important;
}


/*------------------------MARGIN----------------------------------*/

.margin {
	margin:80px 0px; 
	width:100%; 
	position:relative;
	display:block;
}

.margin-0 {
	margin: 0;
}

.m200 {
	margin:200px 0px;
}

.m160 {
	margin:160px 0px;
}

.m120 {
	margin:120px 0px;
}

.m100 {
	margin:100px 0px;
}

.m80 {
	margin:80px 0px;
}

.m60 {
	margin:60px 0px;
}

.m40 {
	margin:40px 0px;
}

.m20 {
	margin:20px 0px;
}

.m10 {
	margin:10px 0px;
}

.notopmargin {
	margin-top:0px;
}

.nobottommargin {
	margin-bottom:0px;
}

.nomargin {
	margin:0px;
}

/*------------------------FLEX------------------------*/

.text-center {
	text-align: center;
	margin: auto;
}

.flex-col {
	display: flex;
	flex-direction: column;
}

.flex-center {
	display: flex;
	justify-content: center;
	align-items: center;
}

.flex-col-center {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.flex-col-start {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: start;
}

.flex-col-end {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: end;
}

.flex-row {
	display: flex;
	flex-direction: row;
}

.flex-row-center {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.flex-row-start-around {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: start;
}

.flex-row-start-between {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: start;
}

.flex-between {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.flex-around {
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.flex-row-around {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
}

.flex-col-around {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}

.flex-col-between {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.flex-end {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.flex-start {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.flex-wrap {
	display: flex;
	flex-wrap: wrap;
}

.wrap {
	flex-wrap: wrap;
}

.gap-one {
	gap: 1rem;
}

.gap-two {
	gap: 2rem;
}

.gap-three {
	gap: 3rem;
}


/*------------------------ANCHORS------------------------*/
  #anchor-list {
    border-bottom:none;
    margin-bottom: 20px;
	position: relative;
    display: block;
    float: left;
    }
    #anchor-list ul {
      list-style-type: none;
      padding: 0;
    }
    #anchor-list li {
      margin-bottom: 5px;
    }
    #anchor-list li a {
      text-decoration: none;
    }

    #anchor-list li a:hover {
      text-decoration: underline;
    }

.anchor-link {
	text-decoration: none !important;
	position:relative;
	float:left;
	width:100%;
	scroll-margin-top: 250px;
}


/*------------------------BUTTON AND FORM----------------------------------*/

button, .button {
	display: inline-block;
	border: none;
	margin: 20px 0px;
	padding: 0px;
	cursor: pointer;
}

button a, .button a, .contact-form button {
	display: inline-block;
	padding: 0.7em 0.9em;
	text-decoration: none;
	color:  rgb(96 233 149);
	font-weight: bold;
	border: 4px solid rgb(0 40 100);
	background-color:  rgb(0 40 100);
	cursor: pointer;
	font-size: 20px;
}

button a:hover, .button a:hover, .contact-form button:hover {
	text-decoration: none;
	color: rgb(0 40 100);
	background-color: rgb(96 233 149);
}


/* Box buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.bottombox {
	position: fixed;
	top: 0;
	right: 1%;
	transform: translateX(-50%);
	z-index: 1000;
	width: auto;
}

.buttontop, .buttonbottom {
	position: relative;
	height: auto;
	margin: 0px 10px;
	text-decoration: none;
	opacity: 0.5;
	float: left;	
	padding: 5px 10px;
	background: rgba(0, 0, 0, 1);
	backdrop-filter: blur(3px);	
	border-radius: 0 0 10px 10px; 
}

.buttontop a, .buttonbottom a {
	position: relative;
	display: block;
  	color: white;
	text-decoration: none;
	font-size: 18px;
	
}

.svg-wrapper {
	width: 100%;
	height: 100%;
  display: grid;
  place-items: center;
}

.scroll-arrow-up {
  width: 2rem;
  height: auto;
  fill: white;
  display: block;
  transform: rotate(90deg);
	transition: transform 0.4s ease-in-out
}

.buttonbottom img {
	padding: 0;
	margin: 0;
	width: 70px;
	color: rgb(96 233 149);
	opacity: 0.5;
}


/* Cookie banner
–––––––––––––––––––––––––––––––––––––––––––––––––– */

  .cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    background: rgb(0, 0, 0);
    color: #fff;
    text-align: center;
    padding: 0.rem;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
	  width: 100%;
  }

  .cookie-banner p {
    margin: 0;
    flex: 1;
	  font-size: 0.8rem;
  }

  .cookie-banner a {
	
  }

  .btn {
    background: rgb(0,0,0);
    border: none;
    padding: 0.5rem 1rem;
    margin-right: 1rem;
    cursor: pointer;
	color: #fff;
  }

  .btn:hover {
    background: #fff;
	color:#000;
  }

/*-------------------HERO SECTION---------------------------*/	
/* HERO PARALLAX */	

#hero {
	width: 100%;
 	background-size: cover; /* scale with viewport */
  	background-position: center;
  	position:absolute;
	height: auto;
	z-index: 0;
	padding-bottom: 0px;
}

/* BLACK GRADIENTS */
.gradient__black__top {
	position: absolute;
	top: 0;
	z-index: 3;
	height: 20%;
	width: 100%;
	background: linear-gradient(to top, transparent, black);
}

.gradient__black__bottom {
	position: absolute;
	bottom: 0;
	z-index: 3;
	height: 20%;
	width: 100%;
	background: linear-gradient(to bottom, transparent, black);
}


/* HERO PARALLAX */	
.parallax {
	position: relative;
	width: 100%;
	margin: 0 auto;
	height: 150vh;
}

.parallax > *:not(.parallax__logo) {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	overflow-x: hidden;
	pointer-events: none;
	grid-area: stack;
	animation: parallax linear;
	animation-timeline: scroll();
	object-fit: cover;
	object-position: top;
}

.parallax > img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	max-width: none;
}

.parallax__bg {
	position: relative;
	z-index: 1;
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.parallax__logo {
	animation: none !important;
	transform: none !important;
	z-index: 3;
	width: 100%;
}

.parallax__text {
	--parallax-speed: 2;
	text-align: center;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	justify-content: center;
	align-items: center;
	z-index: 2;
	padding-top: clamp(240px, 27vw, 660px);
}

@supports (-moz-appearance: none) {
  .parallax__text {
    padding-top: 40vh;
  }
}

.parallax__text h1 {
	margin: 0;
	padding: 0;
	font-family: Montserrat;
}

.parallax__text span {
	white-space: nowrap;
}

.parallax__fg {
	--parallax-speed: -2;
	z-index: 3;
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: center;
}

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

/* Parallax keyframes */
@keyframes parallax {
  to { transform: translateY(calc(var(--parallax-speed) * 200px)); }
}

/* HERO GRADIENT */
.parallax__gradient {
	position: absolute;
	bottom: -4rem;
	left: 0;
	--parallax-speed: 10;
	z-index: 10;
	height: 20%;
	width: 100%;
	background: linear-gradient(to bottom, transparent, black);
}

/*-------------------LOGO FLAMES-----------------------------*/	
.logo-container {
	position: relative;
	display: block;
	justify-content: center;
	align-items: center;
	width: 100%;
}

/* Responsive container */
.flame-container {
	margin: 4rem auto 0px;
  	width: 9vw;               
  	max-width: 150px;           
  	aspect-ratio: 170 / 255;    
  	overflow: hidden;
 	position: relative;
	z-index: 4;
}

/* Flame sprite */
.flame {
  /* position: absolute;
  top: 0;
  left: 0; */
  width: calc(100% * 45);   
  height: 100%;
  background: url('../images/logo/flames-Logo-YAD.svg') no-repeat;
  background-size: cover;

  /* Smooth looping */
  animation: burn 10s steps(44, end) infinite;
}

/* White flame variant */
.whiteflame {
  background: url('../images/logo/flames-white-Logo-YAD.svg') no-repeat;
}

@keyframes burn {
  from { transform: translateX(0%); }
  to { transform: translateX(-97.7778%); } /* (44/45)*100% */
}

.logo-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: white;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.2em;
	z-index: 4;
}

.logo-text h1 {
	font-size: 1.5rem;
	font-weight: 400;
	text-transform: uppercase;
	padding: 0;
	margin: 0;
}

.ya-pretitle {
	left: 7rem;
}

.ya-aftertitle {
	left: 8.5rem;
}

/*-------------------------------------YOUR OPTIONS------------------------------------------*/
.yo-pretitle {
	left: 4rem;
}

.yo-aftertitle {
	left: 8rem;
}


/*-------------------------------------WHY WOULD YOU GO ALONE------------------------------------------*/
.wa-pretitle {
	left: 5rem;
	white-space: nowrap;
}

.wa-aftertitle {
	left: 8.5rem;
}

/*-------------------------------------YOUR TAILORED JOURNEY------------------------------------------*/
.ytj-pretitle {
	left: 8rem;
	white-space: nowrap;
}

.ytj-aftertitle {
	left: 12rem;
}

/* Your Tailored Journey Diagram */
.diagram-container {
	position: relative;
	width: 100%;
	max-width: 1600px; 
	margin: 0 auto;
	padding: 200px 0;
	background-color: #000;
}

.diagram-image {
	width: 100%;
	height: auto;
	display: block;
}
.diagram-label-sm,
.diagram-label-md,
.diagram-label-lg {
	position: absolute; /* REQUIRED */
	transform: translate(-50%, -50%);
	color: white;
}
/* Text blocks */
.diagram-label-sm {
	width: 20%;
	max-width: 300px;
}

.diagram-label-md {
	width: 25%;
	max-width: 300px;
}

.diagram-label-lg {
	width: 30%;
	max-width: 350px;
}

.label-start {
	top: 20%;
	left: 10%;
}

.label-pathfinder {
	top: 28%;
	left: 38%;
}

.label-adventure {
	top: 22%;
	left: 68%;
}

.label-meeting {
	top: 70%;
	left: 18%;
}

.label-payment {
	top: 67%;
	left: 73%;
}

/* Vertical lines */
.label-line {
	width: 1px;
	background: white;
	margin: 10px 0;
}

.text-clamp-journey {
	font-size: clamp(0.6rem, 3vw, 1.4rem);
	line-height: clamp(0.8rem, 3vw, 1.6rem);
}

.waterfall-video-container {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	position: relative;
	z-index: 6;
}

.waterfall-video {
  width: 100%;
	height: auto;
  display: block;
	padding: 0;
	margin: 0;
}

.video__gradient {
	position: absolute;
	top: 0;
	z-index: 3;
	min-height: 20%;
	width: 100%;
	background: linear-gradient(to bottom, black, transparent);
}

/*-------------------------------------THE AREA------------------------------------------*/

.norway-map-wrapper {
  	width: 100%;
	position: absolute;
	bottom: 0px;
  	height: auto;
	display: flex;
}
/*-------------------------------------A TYPICAL DAY------------------------------------------*/
.black-text-stone {
	color: #fff;
	width: 23rem;
	height: 50rem;
	padding: 60px;
}
.black-text-stone p{
	color: #fff;
}
/* A Typical Day PARALLAX */
.parallax-atd {
	position: relative;
  	z-index: 0;
  	height: 1200px;
  	display: grid;
  	grid-template-areas: "stack";
}

.parallax-atd > * {
	grid-area: stack;
	animation: parallax linear;
	animation-timeline: scroll();
}

.parallax-atd > img {
	max-width: 100%;
}

.parallax__bg__atd {
	z-index: 1;
	height: 1200px;
	width: 100%;
	/* scale: 1.16; */
	object-fit: cover;
}

.parallax__text__atd {
	position: absolute;
	top: -40rem;
	left: 36vw;
	--parallax-speed: 8;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

.parallax__fg__atd {
	position: absolute;
	top: 0rem;
	z-index: 3;
	height: 1200px;
	width: 100%;
	object-fit: cover;
}

.text-box-atd {
  padding: 2rem 3rem;
  text-align: center;
	margin-bottom: 8rem;
}

.text-box-atd h1 {
	display: flex;
	flex-direction: column;
	text-transform: uppercase;
	color: white;
	font-size: clamp(3rem, 5vw, 6rem);
	line-height: clamp(3.2rem, 5vw, 6.2rem);
}

.markup-atd-container {
	margin-top: 135rem;
	color: white;
	z-index: 6;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

@keyframes parallax-atd {
  to {
    transform: 
      translateY(calc(var(--parallax-speed) * 200px));
  }
}

/* HERO GRADIENT */
.parallax__gradient {
	position: absolute;
	bottom: 0;
	--parallax-speed: -10;
	z-index: 3;
	min-height: 10%;
	width: 100%;
	background: linear-gradient(to bottom, transparent, black);
}


/*-------------------------------------MEET YOUR GUIDE------------------------------------------*/
/* your guide */
.jay-wrapper {
	position: relative;
	margin-top: -15rem;
	padding: 1rem;
}

.jay-title {
	position: absolute;
	width: min-content;
	top: -3.5rem;
	right: -2.5rem;
}

.jay-pretitle {
	left: 2.5rem;
	white-space: nowrap;
}

.jay-title img {
	width: 100%;
}

/* why am i */
.why-am-i {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

/* your kit */
.your-kit-wrapper {
	width: 100%;
	margin-top: 8rem;
}

.knife-compass-img {
	width: 100%;
}

.knife-compass-img img {
	width: 100%;
	max-width: 160px;
}


.kit-title {
	position: relative;
	width: min-content;
}

.kit-pretitle {
	left: 0;
	top: -1rem;
	white-space: nowrap;
}

/* your health and safety */
.yhas-wrapper {
	width: 100%;
	margin-top: 8rem;
}

.cross-img {
	width: 100%;
}

.cross-img img {
	width: 100%;
	max-width: 160px;
}


.yhas-title {
	position: relative;
	width: min-content;
}

.yhas-pretitle {
	left: 0;
	top: -1rem;
	white-space: nowrap;
}

.kit-specs strong {
	display: inline-block;
	margin-top: 1rem;
}

.kit-specs p {
	margin: 0;
}

/*-------------------------------------FOOTER------------------------------------------*/
.footer-credits {
	margin: 100px auto 0px;
	color: #444444;
}

.footer-credits a {
	color: #444444;
}

.footer {
	padding-bottom: 20px;
}

/*-------------------------------------SMALLER SCREENS------------------------------------------*/

.smallshow {
	display:none !important;
}

@media only screen and ( max-width: 1200px )
{
html
{
	font-size: 75%;
}
}

/*--------------------------------------MOBILE-------------------------------------------------*/

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

h1, h2, h3, h4, h5, h6 {
	line-height:1em;
	margin:25px 0px 30px 0px;
}	
		
.header {
	position: relative;
	height: auto;
}
	
.grid {
	padding-bottom: 100px;
}

.header.grid {
	padding-bottom: 0px;
}

img.logo {
	position:relative;
	float:left;
	display:block;
	margin:15px 0px 10px;
	z-index:999;
	width: 75px;
}	
	
#nav {
	float: right;
	display: flex;
	flex-direction: column;
	position: relative;
	padding: 20px 0px;	
	background: transparent;
}

.menu-icon {
	display: flex;
	margin-left: auto;
	}

/* first level */

#nav > ul {
    display: none;
    flex-direction: column;
    width: 100%;
    top: 50px;
    left: 0;
    gap: 0px;
	background: rgba(0,0,0,0.40)
}

#nav > ul > li {
	width: 100%;
	height: auto;
	padding:5px 0px;
}

#nav > ul > li > a {
	position:relative;
	float: right;
	display: flex;
    flex-direction: column;
	padding: 5px 20px;
	text-align: right;
	font-size: 1.7em;
	font-weight: 700;
	text-decoration: none;
	width: 100%;
}
	
#nav > ul > li > a br {
            display: none;
        }
	
	
  #menu-toggle:checked + .menu-icon + .nav-links {
        display: flex;
				font-size: 2rem;
    }

    #menu-toggle:checked + .menu-icon .bar1 {
        transform: rotate(-45deg) translate(-7px, 7px);
    }

    #menu-toggle:checked + .menu-icon .bar2 {
        opacity: 0;
    }

    #menu-toggle:checked + .menu-icon .bar3 {
        transform: rotate(45deg) translate(-7px, -7px);
    }

.navigationmargin {
	position:relative;
	float:left;
	display: block;
	width:100%;
	height: 50px;	
}	
	
.smallhide {
	display: none !important;
}
	
.smallshow {
	display:inline-block!important;
}
	
.holder {
	position:relative;
	width:100%;
	margin:0%;
	height:auto;
	display:flex;
  	flex-wrap:wrap;
}
	
.norway-map-wrapper {
	position: relative;
	display: block;
	margin-top:-80vh;
}
.black-text-stone {
    width: 20rem;
    padding: 30px;
}

.FiveBox, .FourBox {
    flex: 0 1 calc(50% - 10px); /* Adjust width and include margin space */
    margin-right: 10px;
    margin-bottom: 50px;
}
	
.TwoBox, .ThreeBox, .TwoThreeBox, .OneThreeBox {
    flex: 0 1 calc(100% - 10px); /* Adjust width and include margin space */
    margin-right: 10px;
    margin-bottom: 10px;
}
	
.FiveBox:nth-child(5n), .FourBox:nth-child(4n) {
    margin-right: 10px;
}
	
.FiveBox:nth-child(5n), .FourBox:nth-child(4n) {
    margin-right: 10px;
}	
	
.FiveBox:nth-child(2n), .FourBox:nth-child(2n){
    margin-right: 0;
}

.ThreeBox:nth-child(1n), .TwoThreeBox:nth-child(1n), .OneThreeBox:nth-child(1n), .TwoBox:nth-child(1n){
    margin-right: 0;
}
.smallmaxwidth{
	flex: 0 1 calc(100%);
}
	
.right, .right a {
	text-align:left !important;
}
	
.margin, .m10, .m20 {
	margin:25px 0px;
}
	
.buttonbottombox {
	right: 0px;
}
	
.buttontopbox {
	display:none; 
}

.label-pathfinder {
	top: 23%;
	left: 38%;
}

.label-adventure {
	top: 27%;
	left: 68%;
}

.label-meeting {
	top: 80%;
	left: 18%;
}
}