/* These are temporary additions - they should be implemented properly in the scss at some point... */


/* Mobile break */

@media (min-width: 767px) {
	br.mobile {
		display: none;
	}
}


/* Slide/section-3 */

@media (max-width: 767px) {
	.twentytwentyfour .page.slide:is(#section-3) section:nth-of-type(2) {
		padding-left: 0;
	}
}

/* Slide/section-5 */

.twentytwentyfour .page.slide#section-5 .fp-tableCell {
	position: relative;
	max-height: 100%;
}

.twentytwentyfour .page.slide#section-5 .heading {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	order: -1;
	transition: opacity 0.2s;
	transition-delay: 0.7s;
}

.twentytwentyfour .page.slide#section-5:has(section:nth-of-type(1) .visible) .heading,
.twentytwentyfour .page.slide#section-5:has(section:nth-of-type(2) .visible) .heading {
	opacity: 0;
	transition-delay: 0s;
}

@media (max-width: 767px) {
	#lottie_2 {
		margin-top: -5rem;
	}
	
	.twentytwentyfour .page.slide#section-5 {
		margin-top: -6rem;
	}
	
	.twentytwentyfour .page.slide#section-5 .heading {
		position: static;
		text-align:center;
		margin-bottom: 2rem;
		opacity: 1 !important;
	}
	
	.twentytwentyfour .page.slide#section-5 .heading h2 {
		text-transform: uppercase;
		font-size: 1rem;
		color: #fff;
		background-color: #000;
		box-shadow: 2px 2px 0 0 var(--green);
		padding: 12px 0px;
	}
	
	.twentytwentyfour .page.slide#section-5 .heading::after {
		content: unset;
	}
	
	.twentytwentyfour .page.slide#section-5 section:nth-of-type(even):not(.heading) {
		padding-left: 15px;
		padding-right: 0;
		text-align: right;
	}
	
	.twentytwentyfour .page.slide#section-5 section:nth-of-type(even):not(.heading)::after {
		right: -3rem;
		left: unset;
	}
}


/* Image 2 / Lottie 3 */
#lottie_3 {
	display: none;
}

@media (max-width: 767px) {
	#image_2 {
		height: auto !important;
		max-height: none !important;
	}
	
	#image_2 .fp-tableCell {
		height: auto !important;
		max-height: none !important;
		flex-direction: column;
	}
	
	#image_2 section {
		padding: 3rem 0 !important;
	}
	
	#lottie_3 {
		display: block;
	}
	
	#lottie_3 lottie-player {
		width: 160vw;
	}
}


 /* Slide/section-6  */

.twentytwentyfour .page.slide#section-6 .fp-tableCell {
    flex-wrap: wrap;
	justify-content: space-around;
}

.twentytwentyfour .page.slide#section-6 section {
	height: 50%;
}

.twentytwentyfour .page.slide#section-6 .heading {
	order: -1;
	width: 50%;
	flex-basis: 50%;
	margin-left: 25%;
	justify-content: flex-end;
	padding-bottom: calc(1rem + var(--stemLength));
}

.twentytwentyfour .page.slide#section-6 .heading::after {
	position: absolute;
    bottom: 0;
    left: 0%;
    height: 0;
    width: 1px;
    background: black;
    transition: height linear 0.3s;
    content: "";
}

.twentytwentyfour .page.slide#section-6.lineLoaded .heading::after {
	height: var(--stemLength);
}

.twentytwentyfour .page.slide#section-6 section:nth-of-type(1),
.twentytwentyfour .page.slide#section-6 section:nth-of-type(2) {
    width: 40%;
    flex-basis: 40%;
	justify-content: flex-start;
    padding-top: calc(1rem + var(--stemLength));
}

.twentytwentyfour .page.slide#section-6 section:nth-of-type(1)::after,
.twentytwentyfour .page.slide#section-6 section:nth-of-type(2)::after {
	top: 0;
	left: 0;
}

@media (max-width: 767px) {
	.twentytwentyfour .page.slide#section-6 {
		margin-top: 3rem;
	}
	
	.twentytwentyfour .page.slide#section-6 .fp-tableCell {
		flex-direction: column;
		flex-wrap: nowrap;
		height: auto !important;
	}
	
	.twentytwentyfour .page.slide#section-6 section {
		width: 100% !important;
		flex-basis: 100% !important;
		height: auto;
		padding: 0 0 calc(1rem + var(--stemLength)) 0 !important;
		margin: 0 !important;
	}
	
	.twentytwentyfour .page.slide#section-6 section::after {
		height: 0 !important;
	}
	
	.twentytwentyfour .page.slide#section-6 .heading {
		text-align: center;
	}
	
	.twentytwentyfour .page.slide#section-6 .heading h2 {
		text-transform: uppercase;
		color: #fff;
		background-color: #000;
		box-shadow: 2px 2px 0 0 var(--green);
		padding: 12px 0px;
	}
	
	.twentytwentyfour .page.slide#section-6 .heading h2::after {
		content: unset !important;
	}
}


/* Image 3 */

#image_3 .fp-tableCell {
    padding: inherit!important;
}

#image_3 section {
    max-height: 100%;
    padding: 6rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#image_3 section img {
    width: auto;
    height: 100%;
    transition: opacity ease 0.4s, transform ease 0.8s;
    z-index: 1;
}

#image_3 section img.pageLoaded {
    opacity: 1;
}

#image_3 section img:hover {
      transform: scale(1.01);
}

@media (max-width: 767px) {
	#image_3 {
		max-height: 100vw;
		min-height: auto;
	}
	
	#image_3 .fp-tableCell section img {
		width: 100vw;
		max-width: none;
	}
}