

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

	##	FLICKITY CUSTOM STYLING
	
	Flickity Version: 2.2.1
	Date: 29.04.2021
	
	https://flickity.metafizzy.co

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


.flickity-enabled {
	position: relative;
}

.flickity-enabled:focus {
	outline: none;
}

.flickity-viewport {
	overflow: hidden;
	position: relative;
	height: 100%;
}

.flickity-slider {
	position: absolute;
	width: 100%;
	height: 100%;
}


/* DRAGGABLE */

.flickity-enabled.is-draggable {
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
	cursor: move;
	cursor: -webkit-grab;
	cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
	cursor: -webkit-grabbing;
	cursor: grabbing;
}




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

	##	FLICKITY FADE
	
	16.12.2020
	
----------------------------------------------------------------------------- */


.flickity-enabled.is-fade .flickity-slider > * {
	pointer-events: none;
	z-index: 0;
}

.flickity-enabled.is-fade .flickity-slider > .is-selected {
	pointer-events: auto;
	z-index: 1;
}



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

	##	FLICKITY FULLSCREEN
	
	20.11.2020
	
	prevent page scrolling when flickity is fullscreen

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


.slideshow.is-fullscreen {
	--slideshowControlOffset: 0;
	--slideshowControlSize: 15%;
	--slideshowIndexHeight: 1rem;
	--slideshowButtonPadding: 2rem;
}

.slideshow--header {
	--slideshowControlOffset: 0;
	--slideshowControlSize: 15%;
	--slideshowButtonPadding: 2rem;
}

.slideshow--story {
	--slideshowControlOffset: 0;
	--slideshowControlSize: 15%;
	--slideshowButtonPadding: 2rem;
}

html.is-flickity-fullscreen {
	overflow: hidden;
}


.flickity-enabled.is-fullscreen {
	z-index: 1001;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: black;
}






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

	##	FLICKITY BUTTON
	
	20.11.2020

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


.flickity-button {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	border: none;
	background: transparent;
	padding: var(--slideshowButtonPadding);
	cursor: pointer;
}

.flickity-button:focus {
	outline: none;
	box-shadow: 0 0 0 5px #19F;
}

.flickity-button:disabled {
	cursor: auto;
	pointer-events: none;
}


/* FLICKITY BUTTON : ICON */

.flickity-button .icon {
	fill: currentColor;
	font-size: var(--slideshowIconSize);
}






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

	##	FLICKITY BUTTON : PREVIOUS/NEXT
	
	29.04.2021

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


.flickity-prev-next-button {
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 0;
	width: 50%;
	height: 100%;
	color: var(--colorBronze);
	background-color: rgba(255,0,0,0);
}

.flickity-prev-next-button.previous {
	justify-content: flex-start;
	left: 0;
}

.flickity-prev-next-button.next {
	justify-content: flex-end;
	right: 0;
}



/* BUTTONS – SLIDESHOW */

.slideshow .flickity-prev-next-button {
	width: var(--slideshowControlSize);
}

.slideshow .flickity-prev-next-button.previous {
	left: var(--slideshowControlOffset);
}

.slideshow .flickity-prev-next-button.next {
	right: var(--slideshowControlOffset);
}

.device--touch .slideshow .flickity-prev-next-button {
	display: none !important;
}






/* BUTTONS – CAROUSEL */

.carousel .flickity-prev-next-button {
	align-items: flex-start;
	padding-top: 7%;
	transition-property: opacity;
	transition-duration: var(--transHoverDurationLong);
	transition-timing-function: var(--transHoverTimingLong);
	color: #FFF;
	opacity: 1;
}

.carousel .flickity-prev-next-button.next {
	width: 20%;
	background-image: linear-gradient(to left, rgba(245, 245, 240, 1) 0%, rgba(245, 245, 240, 0) 100%);
}

.carousel .flickity-prev-next-button.previous {
	width: 10%;
}

.carousel .flickity-prev-next-button[disabled] {
	opacity: 0;
}

/* 768PX (S) */
@media screen and (max-width: 48em) {
	
	.carousel .flickity-prev-next-button.previous,
	.carousel .flickity-prev-next-button.next {
		justify-content: center;
		padding-top: 10.5%;
		padding-left: 0;
		padding-right: 0;
		color: var(--colorLink);
	}
	
	.carousel .flickity-prev-next-button.next {
		width: calc(10vw + var(--gridGutter));
		transform: translateX(5vw);
		padding-left: 5vw;
	}
	
	.carousel .flickity-prev-next-button.previous {
		width: calc(5vw + var(--gridGutter));
		transform: translateX(-5vw)
	}
	
}


/* 480PX (XS) */
@media screen and (max-width: 30em) {
	
	.carousel .flickity-prev-next-button.previous,
	.carousel .flickity-prev-next-button.next {
		padding-top: 12.5%;
	}

}














/* FLICKITY PREVIOUS/NEXT BUTTONS : ICONS */


.flickity-prev-next-button .icon {
	transition-property: opacity, transform;
	transition-duration: var(--transHoverDurationLong);
	transition-timing-function: var(--transHoverTimingLong);
}

.slideshow .flickity-prev-next-button .icon {
	opacity: 0;
}

.slideshow--story .flickity-prev-next-button:not([disabled]) .icon {
	opacity: 1;
}

.flickity-prev-next-button.state--clicked .icon {
	transition-duration: 200ms;
	transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); /* EaseOutQuart */
}

.flickity-prev-next-button.previous .icon {
	transform: translate3d(50%,0,0);
}

.flickity-prev-next-button.next .icon {
	transform: translate3d(-50%,0,0);
}



@media (hover: hover) {
	.flickity-prev-next-button:hover .icon {
		opacity: 1;
		transform: translate3d(0,0,0);
	}
}

.flickity-prev-next-button.previous.state--clicked .icon {
	transform: translate3d(50%,0,0);
	opacity: 0.5;

}

.flickity-prev-next-button.next.state--clicked .icon {
	transform: translate3d(-50%,0,0);
	opacity: 0.5;
}




/* 768PX (S) */
@media screen and (max-width: 48em) {
	
	.carousel .flickity-prev-next-button.next .icon,
	.carousel .flickity-prev-next-button.previous .icon {
		transform: none !important;
		opacity: 1 !important;
	}
	
}









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

	##	FLICKITY BUTTON : FULLSCREEN
	
	20.11.2020

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


.flickity-fullscreen-button {
	right: 0;
	top: 0;
	opacity: 0;
	transition-property: opacity;
	transition-duration: var(--transStateDurationLong);
	transition-timing-function: var(--transStateTiming);
	color: white;
}


.flickity-fullscreen-button-exit { display: none; }

.flickity-enabled.is-fullscreen .flickity-fullscreen-button-exit { display: flex; }
.flickity-enabled.is-fullscreen .flickity-fullscreen-button-view { display: none; }



@media (hover: hover) {
	.slideshow:hover .flickity-fullscreen-button {
		opacity: 1;
		transition-duration: var(--transStateDuration);
	}
}













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

	##	FLICKITY PAGE DOTS
	
	20.11.2020
	
	Index Bar Style

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


.flickity-page-dots {
	z-index: 3;
	display: flex;
	flex-direction: row;
	justify-content: center;
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 0;
	overflow: hidden;
	transition-property: height;
	transition-duration: var(--transStateDurationLong);
	transition-timing-function: var(--transStateTiming);
}


.slideshow.is-fullscreen .flickity-page-dots,
.slideshow.state--changed .flickity-page-dots,
.slideshow.state--autoplay .flickity-page-dots,
.device--touch .slideshow .flickity-page-dots {
	height: var(--slideshowIndexHeight);
	transition-duration: var(--transStateDuration);
}

@media (hover: hover) {
	.slideshow:not(.slideshow--header):hover .flickity-page-dots {
		height: var(--slideshowIndexHeight);
		transition-duration: var(--transStateDuration);
	}
}

.slideshow--header:not(.is-fullscreen) .flickity-page-dots {
	height: 0;
}


/* FLICKITY PAGE DOTS : DOT */

.flickity-page-dots .dot {
	position: relative;
	width: 100%;
	height: 100%;
	flex-shrink: 1;
	background-color: var(--colorLink);
	transition-property: opacity;
	transition-duration: var(--transHoverDuration);
	transition-timing-function: var(--transHoverTiming);
	opacity: .33;
	cursor: pointer;
}

@media (hover: hover) {
	.flickity-page-dots .dot:hover {
		opacity: .66;
	}
}

.flickity-page-dots .dot.is-selected {
	opacity: 1;
}







