@charset "UTF-8";

/**
version : 3.0.0 – 20241002

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

.overlay == fullscreen [default]
.overlay.short == not fullscreen
.overlay.modal == floating box [default] - to combine with .left / .right / .top / .bottom - to combine with .short

.overlay positions == .overlay.top / .overlay.left / .overlay.right / .overlay.bottom == auto height

.overlay.interactive == keeps page interactive (no clickoutside)
.overlay.freeze == clickoutside disabled (eg. cookies)
.overlay.instant == no transition animation (instantly visible > eg. cookies)

.overlay.vertical-centered == overlay-content vertical centered

body.overlayed == default > no scrollbar
body.overlayed.interactive == has scrollbar
body.overlayed.freeze == no interactions
body.overlayed.instant == at start

.clickoutside
.overlay-close
*/

/**
visibility == for :focus-visible
**/

/******************************/
/******************************/
/********** 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 {
	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;
	/*display: block;*/
	max-height:100%;
	width:100%;
	overflow:hidden;
	-webkit-overflow-scrolling:touch;
	opacity: 0;
	pointer-events:none;
	visibility: hidden;
	background: rgba(var(--dark-rgb), 0);
}
.overlay.active {
	overflow-x:hidden;
	overflow-y:auto;
	scroll-behavior: smooth;
	opacity:1;
	cursor: pointer;
	pointer-events: all; /* issue with accessibility */
	visibility: visible;
	background: rgba(var(--dark-rgb), .33);
}

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

.overlay .overlay-container {
	position:relative;
	z-index:100;
	min-height:100%;
	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;
	height: -webkit-fit-content;
	height: -moz-fit-content;
	height: fit-content;
	margin:0 auto;
	cursor:auto;
	pointer-events:none;
	-webkit-filter:drop-shadow(0 0 .25em rgba(var(--dark-rgb), 0));
	        filter:drop-shadow(0 0 .25em rgba(var(--dark-rgb), 0));
	background:var(--bright-color);
	overflow: auto;
}
.overlay.active .overlay-container {
	-webkit-filter:drop-shadow(0 0 .25em rgba(var(--dark-rgb), .5));
	        filter:drop-shadow(0 0 .25em rgba(var(--dark-rgb), .5));
}

/*******************************/
/********** OVERLAYED **********/
/*******************************/

body.overlayed {
	overflow:hidden !important;
}
body.overlayed:not(.interactive) #wrapper {
	-webkit-filter: blur(.5em);
	        filter: blur(.5em);
	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 SHORT **********/
/***********************************/
/***********************************/

/**
not fullscreen
top, bottom == full width / min height
left, right == min width / full height
**/
/*
.overlay.short.bottom {
	top:unset;
}
*/

/********** SHORT DEFAULT **********/

.overlay.short .overlay-container {
	width: 100%;
}
.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;
}

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

@media (min-width:760px) {
	.overlay.short.left .overlay-container,
	.overlay.short.right .overlay-container {
		max-width:80%;
	}
}
@media (min-width:1000px) {
	.overlay.short.left .overlay-container,
	.overlay.short.right .overlay-container {
		max-width:60%;
	}
}

/***********************************/
/***********************************/
/********** 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: 2em;
	   -moz-border-radius: 2em;
	        border-radius: 2em;
}
.overlay.modal .overlay-header {
	-webkit-border-radius: 2em 2em 0 0;
	   -moz-border-radius: 2em 2em 0 0;
	        border-radius: 2em 2em 0 0;
}
.overlay.modal .overlay-content {
	-webkit-border-radius: 2em;
	   -moz-border-radius: 2em;
	        border-radius: 2em;
}
.overlay.modal .overlay-footer {
	-webkit-border-radius: 2em 2em 0 0;
	   -moz-border-radius: 2em 2em 0 0;
	        border-radius: 2em 2em 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;
}

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

/* default / short */

@media (max-width:760px) {
	.overlay.modal .overlay-container {
		width: 100%;
	}
}
@media (min-width:760px) {
	.overlay.modal .overlay-container {
		max-width: var(--overlay-width-short);
		width: var(--overlay-width-short);
	}
	.overlay.modal.short .overlay-container {
		width:auto;
		min-width: var(--overlay-width-limit);
	}
}

/*******************************************************/
/*******************************************************/
/********** 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;
	max-width: var(--content-maxwidth);
	background: var(--bright-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 + .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;
	background:var(--bright-color);
}
.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;
	-webkit-flex-grow:1;
	   -moz-box-flex:1;
	    -ms-flex-positive:1;
	        flex-grow:1;
	display:-webkit-inline-box;
	display:-webkit-inline-flex;
	display:-moz-inline-box;
	display:-ms-inline-flexbox;
	display:inline-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;
	/*overflow: unset;*/
	overflow: hidden;
	min-height: 6.5em;
	max-width: var(--content-maxwidth);
	margin-left:auto;
	margin-right:auto;
}
.overlay-content.vertical-centered {
	-webkit-box-pack:center;
	-webkit-justify-content:center;
	   -moz-box-pack:center;
	    -ms-flex-pack:center;
	        justify-content:center;
}

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

/** modal padding ! **/

.overlay.modal .overlay-container .overlay-header {
	-webkit-border-radius: 2em 2em 0 0;
	   -moz-border-radius: 2em 2em 0 0;
	        border-radius: 2em 2em 0 0;	
}
.overlay.modal .overlay-container .overlay-footer {
	-webkit-border-radius: 0 0 2em 2em;
	   -moz-border-radius: 0 0 2em 2em;
	        border-radius: 0 0 2em 2em;
}
.overlay.modal .overlay-container .overlay-header.sticky {
	top: -webkit-calc(var(--gutter-gap) * -1);
	top: -moz-calc(var(--gutter-gap) * -1);
	top: calc(var(--gutter-gap) * -1);
}
.overlay.modal .overlay-container .overlay-footer.sticky {
	bottom: -webkit-calc(var(--gutter-gap) * -1);
	bottom: -moz-calc(var(--gutter-gap) * -1);
	bottom: calc(var(--gutter-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(--gutter-gap) * 1.75);
		padding:-moz-calc(var(--gutter-gap) * 1.75);
		padding:calc(var(--gutter-gap) * 1.75);
	}
}
@media (min-width:760px) {
	.overlay .overlay-container .overlay-header,
	.overlay .overlay-container .overlay-content,
	.overlay .overlay-container .overlay-footer {
		padding:var(--gutter-gap);
	}
}

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

.overlay.is-loading:before {
	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 {
	opacity:0;
}
.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;
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	line-height: 1;
	margin: 0 0 0 auto;
}

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

@media (max-width:760px) {
	.overlay .overlay-container > .overlay-close:first-child,
	.overlay .overlay-header > .overlay-close:first-child {
		padding: -webkit-calc(var(--gutter-gap) * 1.75 - .375em);
		padding: -moz-calc(var(--gutter-gap) * 1.75 - .375em);
		padding: calc(var(--gutter-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(--gutter-gap) - .5em);
		padding: -moz-calc(var(--gutter-gap) - .5em);
		padding: calc(var(--gutter-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);
	}
}
@media (min-width:1000px) {
	.overlay .overlay-container > .overlay-close,
	.overlay .overlay-header > .overlay-close {
		font-size: -webkit-calc(var(--font-size) * 2);
		font-size: -moz-calc(var(--font-size) * 2);
		font-size: calc(var(--font-size) * 2);
	}
}

/*****************************************/
/*****************************************/
/********** 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;
}