@charset "UTF-8";

/**
* OVERLAYS.CSS - Modal & Overlay System
* Version: 3.0.0
* 
* STRUCTURE: .overlay > .overlay-container > .overlay-header + .overlay-content + .overlay-footer
* 
* TYPES:
* .overlay              # Fullscreen overlay [default]
* .overlay.short        # Not fullscreen
* .overlay.modal        # Floating box [default] - combine with .left/.right/.top/.bottom + .short
* 
* POSITIONS: .overlay.top/.left/.right/.bottom == auto height
* 
* BEHAVIORS:
* .overlay.interactive  # Keeps page interactive (no clickoutside)
* .overlay.freeze       # Clickoutside disabled (eg. cookies)
* .overlay.instant      # No transition animation (instantly visible > eg. cookies)
* 
* ALIGNMENT:
* .overlay.vertical-centered # overlay-content vertical centered
* 
* BODY STATES:
* body.overlayed            # default > no scrollbar
* body.overlayed.interactive # has scrollbar
* body.overlayed.freeze     # no interactions
* body.overlayed.instant    # at start
* 
* CONTROLS:
* .clickoutside / .overlay-close
* 
* ACCESSIBILITY:
* visibility == for :focus-visible
**/


/** WIP **/


/*
.overlay-header .background:after {
	content: '';
	position: absolute;
	z-index: -1;
	inset: 0;
	background: var(--yellow-color);
}
*/

.overlay-header.min,
.overlay-content.min,
.overlay-footer.min {
	padding: 0 !important;
}
/*
.swiper-container.overlay-content.min {
	padding: 0 !important;
}
*/


/*
.swiper-container.overlay-content .swiper-slide:not(.thumbnail) {
	padding: var(--overlay-gap) !important;
}
*/

/**************************/
/**************************/
/********** VARS **********/
/**************************/
/**************************/

/*****************************/
/********** DEFAULT **********/
/*****************************/

#overlays {
	--overlay-container-bg-color: var(--bright-color);
	--overlay-border-radius: 0;

	--overlay-bg-opacity: .66;
	--overlay-bg-color: rgba(var(--dark-rgb), 0);

	/*--overlay-active-bg-color: rgba(var(--dark-rgb), .33);*/
	--overlay-active-bg-color: rgba(var(--dark-rgb), .66);

	--overlay-filter: drop-shadow(0 0 .25em rgba(var(--dark-rgb), 0));
	--overlay-active-filter: drop-shadow(0 0 .25em rgba(var(--dark-rgb), .5));

	--overlay-min-height: 6em;
	--overlay-min-width: min(40rem, calc(100vw - var(--gutter-gap) * 4));

	--overlay-gap: var(--gutter-gap);
}

/****************************/
/********** @MEDIA **********/
/****************************/

@media (min-width: 0px) {
	#overlays {
		--overlay-max-width: 95%;
		--overlay-close-font-size: var(--font-size);
	}
}
@media (min-width:760px) {
	#overlays {
		--overlay-max-width: 66%;
		--overlay-close-font-size: calc(var(--font-size) * 1.75);
	}
}
@media (min-width:1000px) {
	#overlays {
		--overlay-max-width: 50%;
		--overlay-close-font-size: calc(var(--font-size) * 2)
	}
}


@media (max-width:760px) {
	/*.overlay .overlay-container > .overlay-close:first-child,
	.overlay .overlay-header > .overlay-close:first-child {
		padding: -webkit-calc(var(--overlay-gap) * 1.75 - .375em);
		padding: -moz-calc(var(--overlay-gap) * 1.75 - .375em);
		padding: calc(var(--overlay-gap) * 1.75 - .375em);
	}*/
	/*.overlay .overlay-container > .overlay-close,
	.overlay .overlay-header > .overlay-close {
		font-size: -webkit-calc(var(--font-size) * 1.75);
		font-size: -moz-calc(var(--font-size) * 1.75);
		font-size: calc(var(--font-size) * 1.75);
	}*/
}
@media (min-width:760px) {
	/*.overlay .overlay-container > .overlay-close:first-child,
	.overlay .overlay-header > .overlay-close:first-child {
		padding: -webkit-calc(var(--overlay-gap) - .5em);
		padding: -moz-calc(var(--overlay-gap) - .5em);
		padding: calc(var(--overlay-gap) - .5em);
	}*/
	/*.overlay .overlay-container > .overlay-close,
	.overlay .overlay-header > .overlay-close {
		font-size: -webkit-calc(var(--font-size) * 1.5);
		font-size: -moz-calc(var(--font-size) * 1.5);
		font-size: calc(var(--font-size) * 1.5);
	}*/
}

/********************************/
/********************************/
/********** ANIMATIONS **********/
/********************************/
/********************************/

/** out **/

/*#overlays {
	--duration-fast: 1s;
}*/

.overlay {
	transition:
	opacity var(--duration-fast) var(--easeInQuint),
	/*height var(--duration-fast) var(--easeInQuint),*/
	/*height .5s var(--ease),*/
	background calc(var(--duration-fast) / 2) var(--easeInQuint),
	backdrop-filter calc(var(--duration-fast) / 2) var(--easeInQuint),
	visibility .01s linear var(--duration-fast);
}
.overlay .overlay-container {
	transition:
	filter var(--duration-fast) var(--easeInQuint),
	transform var(--duration-fast) var(--easeInQuint);
}

/** in **/

.overlay.active {
	transition:
	visibility .01s linear,
	opacity var(--duration-fast) var(--easeOutQuint) calc(var(--duration-fast) / 2),
/*height .5s var(--ease),*/
	background var(--duration-fast) var(--easeOutQuint) calc(var(--duration-fast) / 2),
	backdrop-filter var(--duration-fast) var(--easeOutQuint) calc(var(--duration-fast) / 2);
}
.overlay.active .overlay-container {
	transition:
	filter var(--duration-fast) var(--easeOutQuint) calc(var(--duration-fast) / 2),
	transform var(--duration-fast) var(--easeOutQuint) calc(var(--duration-fast) / 2);
}

/*
.overlay .overlay-container {
    display: grid;
    grid-template-rows: 0fr;
}
.overlay.active .overlay-container {
    grid-template-rows: 1fr;
}
*/

/** onload **/

body.onload .overlay {
	transition: none;
}

/******************************/
/******************************/
/********** OVERLAYS **********/
/******************************/
/******************************/

/******************************/
/********** OVERLAYS **********/
/******************************/

#overlays {
	position: relative;
	z-index: 10000;
	-webkit-transform: none !important;
	   -moz-transform: none !important;
	    -ms-transform: none !important;
	     -o-transform: none !important;
	        transform: none !important;
	margin: 0 !important;
	pointer-events: none;
}

/*************************************/
/********** OVERLAY DEFAULT **********/
/*************************************/

/**
.overlay.active {
	pointer-events: all == issue with accessibility
}
**/

.overlay {
	position: fixed;
	z-index: 1000;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	max-height: 100%;
	width: 100%;
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	background: var(--overlay-bg-color);
	/* Disable Android tap highlight */
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
}
.overlay.active {
	overflow-x: hidden;
	overflow-y: auto;
	scroll-behavior: smooth;
	opacity: 1;
	cursor: pointer;
	pointer-events: all;
	visibility: visible;
	background: var(--overlay-active-bg-color);
}

/***************************************/
/********** OVERLAY CONTAINER **********/
/***************************************/

.overlay .overlay-container {
	position: relative;
	z-index: 100;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	min-width: var(--overlay-min-width);
	height: fit-content;
	width: 100%;
	width: 100%;
	margin: 0 auto;
	cursor: auto;
	pointer-events: none;
	background: var(--overlay-container-bg-color);
	overflow: clip; /* for autoheight swipers */
	overflow-x: clip;
	overflow-y: visible;
}
.overlay .overlay-container.has-auto-height {
	overflow: clip; /* for autoheight swipers */
}

/********************************/
/********** OVERLAY FX **********/
/********************************/

.overlay .overlay-container {
	-webkit-filter: var(--overlay-filter);
	        filter: var(--overlay-filter);
}
.overlay.active .overlay-container {
	-webkit-filter: var(--overlay-active-filter);
	        filter: var(--overlay-active-filter);
}
body.overlayed {
	overflow: hidden !important;
}
body.overlayed:not(.interactive) #wrapper {
	pointer-events: none;
}

/****************************************************/
/****************************************************/
/********** OVERLAY POSITIONS / ANIMATIONS **********/
/****************************************************/
/****************************************************/

/**
if no position == fading animation
**/

.overlay.top .overlay-container {
	-webkit-transform: translate3d(0,-100%,0);
	   -moz-transform: translate3d(0,-100%,0);
	        transform: translate3d(0,-100%,0);
}
.overlay.bottom .overlay-container {
	-webkit-transform: translate3d(0,100%,0);
	   -moz-transform: translate3d(0,100%,0);
	        transform: translate3d(0,100%,0);
}
.overlay.left .overlay-container {
	-webkit-transform: translate3d(-100%,0,0);
	   -moz-transform: translate3d(-100%,0,0);
	        transform: translate3d(-100%,0,0);
}
.overlay.right .overlay-container {
	-webkit-transform: translate3d(100%,0,0);
	   -moz-transform: translate3d(100%,0,0);
	        transform: translate3d(100%,0,0);
}
.overlay.top.active .overlay-container,
.overlay.bottom.active .overlay-container,
.overlay.left.active .overlay-container,
.overlay.right.active .overlay-container {
	-webkit-transform: translate3d(0,0,0);
	   -moz-transform: translate3d(0,0,0);
	        transform: translate3d(0,0,0);
}

/***********************************/
/***********************************/
/********** OVERLAY SIZES **********/
/***********************************/
/***********************************/

/**
not fullscreen
top, bottom == full width / min height
left, right == min width / full height
**/

/***************************/
/********** SHORT **********/
/***************************/

.overlay.short.top .overlay-container,
.overlay.short.bottom .overlay-container {
	min-height: auto;
}
.overlay.short.top .overlay-container {
	margin-top: 0;
	margin-bottom: auto;
}
.overlay.short.bottom .overlay-container {
	margin-top: auto;
	margin-bottom: 0;
}
.overlay.short.left .overlay-container {
	margin-left: 0;
	margin-right: auto;
}
.overlay.short.right .overlay-container {
	margin-left: auto;
	margin-right: 0;
}
.overlay.short.left .overlay-container,
.overlay.short.right .overlay-container {
	max-width: var(--overlay-max-width);
}

/*************************/
/********** MIN **********/
/*************************/

.overlay.min .overlay-container {
	width: auto;
}

/***********************************/
/***********************************/
/********** OVERLAY MODAL **********/
/***********************************/
/***********************************/

/**
floating modal box
**/

/*****************************/
/********** DEFAULT **********/
/*****************************/

.overlay.modal {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	   -moz-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	padding: var(--gutter-gap);
}
.overlay.modal .overlay-container {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	   -moz-box-orient: vertical;
	   -moz-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	margin: auto;
	min-height: auto;
	/*width: auto;*/
	-webkit-border-radius: var(--overlay-border-radius);
	   -moz-border-radius: var(--overlay-border-radius);
	        border-radius: var(--overlay-border-radius);
}

/*********************************************/
/********** OVERLAY MODAL STRUCTURE **********/
/*********************************************/

.overlay.modal .overlay-header {
	-webkit-border-radius: var(--overlay-border-radius) var(--overlay-border-radius) 0 0;
	   -moz-border-radius: var(--overlay-border-radius) var(--overlay-border-radius) 0 0;
	        border-radius: var(--overlay-border-radius) var(--overlay-border-radius) 0 0;
}
.overlay.modal .overlay-content {
	-webkit-border-radius: var(--overlay-border-radius);
	   -moz-border-radius: var(--overlay-border-radius);
	        border-radius: var(--overlay-border-radius);
}
.overlay.modal .overlay-footer {
	-webkit-border-radius: var(--overlay-border-radius) var(--overlay-border-radius) 0 0;
	   -moz-border-radius: var(--overlay-border-radius) var(--overlay-border-radius) 0 0;
	        border-radius: var(--overlay-border-radius) var(--overlay-border-radius) 0 0;
}

/*********************************************/
/********** OVERLAY MODAL POSITIONS **********/
/*********************************************/

.overlay.modal.top .overlay-container {
	margin-top: 0;
}
.overlay.modal.bottom .overlay-container {
	margin-bottom: 0;
}
.overlay.modal.left .overlay-container {
	margin-left: 0;
}
.overlay.modal.right .overlay-container {
	margin-right: 0;
}

/*********************************/
/********** MODAL SHORT **********/
/*********************************/

.overlay.modal.short .overlay-container {
	max-width: var(--overlay-max-width);
}

/*******************************************************/
/*******************************************************/
/********** OVERLAY HEADER / CONTENT / FOOTER **********/
/*******************************************************/
/*******************************************************/

/**
.overlay-container > .overlay-header + .overlay-content + .overlay-footer
**/

/*****************************/
/********** DEFAULT **********/
/*****************************/

.overlay .overlay-container .overlay-header,
.overlay .overlay-container .overlay-content,
.overlay .overlay-container .overlay-footer {
	position: relative;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.overlay .overlay-container .overlay-header,
.overlay .overlay-container .overlay-footer {
	background: var(--bright-color);
}
.overlay .overlay-container .overlay-content {
	background: var(--light-color);
}
.overlay.active .overlay-container .overlay-header,
.overlay.active .overlay-container .overlay-content,
.overlay.active .overlay-container .overlay-footer {
	position: relative;
	pointer-events: all;
}

/*****************************/
/********** SPACING **********/
/*****************************/
/*
.overlay .overlay-container .overlay-header:not(.sticky) + .overlay-content {
	padding-top: 0;
}
.overlay .overlay-container:has(.overlay-footer) .overlay-content {
	padding-bottom: 0;
}
*/
/****************************/
/********** STICKY **********/
/****************************/

.overlay .overlay-container .overlay-header.sticky,
.overlay .overlay-container .overlay-footer.sticky {
	position:-webkit-sticky;
	position: sticky;
	z-index: 30;
}
.overlay .overlay-container .overlay-header.sticky {
	top: 0;	
}
.overlay .overlay-container .overlay-footer.sticky {
	bottom: 0;
}

/*****************************/
/********** CONTENT **********/
/*****************************/

/** like main **/

.overlay .overlay-content {
	-webkit-box-flex: 1;
	    -ms-flex-positive: 1;
	        flex-grow: 1;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-align: start;
		-ms-flex-align: start;
			align-items: flex-start;
	overflow: unset;
	min-height: var(--overlay-min-height);
	margin-left: auto;
	margin-right: auto;
}
.overlay-content.vertical-centered {
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}
.overlay-content.centered {
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

/***************************/
/********** MODAL **********/
/***************************/

/** modal padding ! **/

.overlay.modal .overlay-container .overlay-header {
	-webkit-border-radius: var(--overlay-border-radius) var(--overlay-border-radius) 0 0;
	   -moz-border-radius: var(--overlay-border-radius) var(--overlay-border-radius) 0 0;
	        border-radius: var(--overlay-border-radius) var(--overlay-border-radius) 0 0;	
}
.overlay.modal .overlay-container .overlay-footer {
	-webkit-border-radius: 0 0 var(--overlay-border-radius) var(--overlay-border-radius);
	   -moz-border-radius: 0 0 var(--overlay-border-radius) var(--overlay-border-radius);
	        border-radius: 0 0 var(--overlay-border-radius) var(--overlay-border-radius);
}
.overlay.modal .overlay-container .overlay-header.sticky {
	top: -webkit-calc(var(--overlay-gap) * -1);
	top: -moz-calc(var(--overlay-gap) * -1);
	top: calc(var(--overlay-gap) * -1);
}
.overlay.modal .overlay-container .overlay-footer.sticky {
	bottom: -webkit-calc(var(--overlay-gap) * -1);
	bottom: -moz-calc(var(--overlay-gap) * -1);
	bottom: calc(var(--overlay-gap) * -1);
}

/****************************/
/********** @MEDIA **********/
/****************************/

@media (max-width:760px) {
	.overlay .overlay-container .overlay-header,
	.overlay .overlay-container .overlay-content,
	.overlay .overlay-container .overlay-footer {
		padding: -webkit-calc(var(--overlay-gap) * 1.75);
		padding: -moz-calc(var(--overlay-gap) * 1.75);
		padding: calc(var(--overlay-gap) * 1.75);
	}
}
@media (min-width:760px) {
	.overlay .overlay-container .overlay-header,
	.overlay .overlay-container .overlay-content,
	.overlay .overlay-container .overlay-footer {
		padding: var(--overlay-gap);
	}
}

/*************************************/
/*************************************/
/********** OVERLAY LOADING **********/
/*************************************/
/*************************************/

.overlay.is-loading:before {
	display: none;
}
.overlay.is-loading .overlay-container:before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: calc(var(--stroke-width) * 10);
	width: calc(var(--stroke-width) * 10);
	border-radius: 50%;
	box-shadow: inset 0 0 0 calc(var(--stroke-width) * 10);
	color: var(--yellow-color);
	animation: pulse .5s infinite linear;

	position: absolute;
	z-index: 110;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	   -moz-transform: translate(-50%,-50%);
	    -ms-transform: translate(-50%,-50%);
	     -o-transform: translate(-50%,-50%);
	        transform: translate(-50%,-50%);
	pointer-events: none;
}
.overlay.is-loading .overlay-content {
	opacity: 0;
}

/***********************************/
/***********************************/
/********** OVERLAY CLOSE **********/
/***********************************/
/***********************************/

/*****************************/
/********** DEFAULT **********/
/*****************************/

.overlay-close {
	display: inline-flex;
	border: 0;
	margin: 0;
	opacity: 0;
	font-size: var(--overlay-close-font-size);
	line-height: 1;
	padding: 1em;
}
.overlay-close:hover > span {
	transform: scale(.8);
}
.overlay.active .overlay-close {
	opacity: 1;
	pointer-events: all;
}

/**********************************/
/********** ONLY TOP ONE **********/
/**********************************/

.overlay .overlay-container > .overlay-close:first-child,
.overlay .overlay-header > .overlay-close:first-child {
	position: absolute;
	z-index: 40;
	top: 0;
	right: 0;
	/*margin: 0 0 0 auto;*/
}

/****************************/
/********** @MEDIA **********/
/****************************/

/*
@media (min-width:0px) {
	.overlay-close {
		padding:1.25rem;
	}
	.overlay-close:after {
		font-size: 1rem;
	}
}
@media (min-width:760px) {
	.overlay-close {
		padding:2.5rem;
	}
	.overlay-close:after {
		font-size: 2rem;
	}
}
*/

/*****************************************/
/*****************************************/
/********** OVERLAY INTERACTIVE **********/
/*****************************************/
/*****************************************/

/**
keeps page interactive == no clickoutside
**/

body.overlayed.interactive {
	overflow: auto !important;
}
body.overlayed.interactive main {
	pointer-events: all;
}

/**********************************************/
/**********************************************/
/********** OVERLAY FREEZE / INSTANT **********/
/**********************************************/
/**********************************************/

/**
no behaviours until overlay closed == for ex. cookies
**/

.overlay.freeze:after,
.overlay.instant:after {
	content: "";
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	opacity: var(--overlay-bg-opacity);
}
.overlay.freeze,
body.overlayed.freeze,
body.freeze.overlayed main {
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
	pointer-events: none;
}

/****************************/
/****************************/
/********** CUSTOM **********/
/****************************/
/****************************/

/******************************/
/********** LOCATION **********/
/******************************/

.overlay.location .overlay-header {
	color: var(--bright-color);
	background: var(--dark-color);
}

/**********************************/
/**********************************/
/********** CUSTOM EVENT **********/
/**********************************/
/**********************************/

/****************************/
/********** HEADER **********/
/****************************/

.overlay.event .overlay-header {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.overlay.event .overlay-header > * {
	margin: 0;
}

/********** INFOS **********/

.overlay.event .overlay-header .infos {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	font-size: .75em;
	padding: var(--overlay-gap) 0 var(--overlay-gap) var(--overlay-gap);
	margin-right: calc(var(--overlay-close-font-size) * 3);
}
.overlay.event .overlay-header .infos > * {
	margin: 0;
}
/*
.overlay.event .overlay-header .thumbnail .swiper-container {
	height: 100%;
}
*/
/*****************************/
/********** CONTENT **********/
/*****************************/
/*
.overlay.event .content .swiper-slide p,
.overlay.event .content .swiper-slide h3,
.overlay.event .content .swiper-slide .artist-title {
    user-select: text;
    -webkit-user-select: text;
    pointer-events: auto;
}
*/
.overlay.event .overlay-content.min > .images,
.overlay.event .overlay-content.min > .content {
	width: 100%;
	padding: var(--overlay-gap);
}

.overlay.event .overlay-content.min .images + .content {
	margin-top: 0;
	padding-top: 0;
}
.overlay.event .overlay-content.min .images + .content .swiper-slide {
	margin-top: 0;
	padding-top: 0;
}


.overlay.event .infos .post-tag {
	/*position: absolute;
	top: var(--overlay-gap);
	left: var(--overlay-gap);*/
	order: -1;
}
.overlay.event .infos .inline {
	gap: 1em;
}
.overlay.event .infos .inline > * {
	margin: 0;
}
.overlay.event .post-price {
	font-size: .75em;
}
.overlay.event .overlay-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: .75em;
	padding: calc(var(--overlay-gap) / 2) !important;
}
.overlay.event .overlay-footer > * {
	margin: 0;
}
.overlay.event .overlay-footer .swiper-controls {
	width: auto;
}

/*
.overlay.event .swiper-slide.thumbnail {
	opacity: 1 !important;
}
*/
/*
.overlay.event .overlay-header .infos {
	font-size: 1em;
	color: var(--bright-color);
	background: var(--dark-color);
	margin-top: auto;
	padding: 1em;

	color: var(--yellow-color);
	background: var(--festival-primary-color);
}
}*/