@media (prefers-color-scheme: dark) {
	body {
	--zoomist-slider-bg-color: rgba(12, 12, 12, 0.8);
	--zoomist-slider-track-color: #444;
	--zoomist-slider-track-color-hover: #666;
	--zoomist-slider-button-color: #ccc;
	--zoomist-zoomer-button-color: rgba(12, 12, 12, 0.9);
	--zoomist-zoomer-button-color-hover: rgba(24, 24, 24, 0.9);
	--zoomist-zoomer-button-color-disabled: rgba(12, 12, 12, 0.8);
	--zoomist-zoomer-icon-color: #ccc;
	--zoomist-zoomer-icon-color-hover: #eee;
	--zoomist-zoomer-icon-color-disabled: #666;
	--body-background-image: linear-gradient(
	to bottom right,
	#333,
	#191919
	);
	}
}

body, html{
	padding:0;
	margin:0;
	font-family:tahoma,arial,sans-serif;
	transition:background 0.25s;
}
body.layer2{background-color:#000;}
header, main, footer, body:before, body:after{
	position:fixed;
	left:0;
	right:0;
	z-index:10;
	margin:0;
}

/*LOADING*/
body:before, body:after{
	z-index:11;
	content:"";
	background:#fff;
	top:0;
	left:0;
	right:0;
	bottom:0;
	pointer-events:none;
	transition:all 2s;
}
body:after{
	bottom:auto;
	left:50%;
	right:auto;
	top:50vh;
	height:90%;
	width:90%;
	max-height:160px;
	transform: translate(-50%, -80%) scale(1);
	background:url(../img/media.png) no-repeat center;
	background-size:contain;
	animation:yo 1 2s, loading infinite ease-in-out alternate 1.5s;
}
@keyframes loading{
	from{ transform: translate(-50%, -80%) scale(1); }
	to{ transform: translate(-50%, -80%) scale(.9); }
}
@keyframes yo{
	from{ opacity:0;}
	to{ opacity:1; }
}
@keyframes final{
	from{ transform: translate(-50%, -80%) scale(1);opacity:1; }
	to{ transform: translate(-50%, -80%) scale(2.5);opacity:0; }
}
body.loading{pointer-events: none;}
body:not(.loading):before, body:not(.loading):after{opacity:0;}
body:not(.loading):after{transform: translate(-50%, -80%) scale(2.5); animation:final 1 2s; filter:blur(10px);}

/*LOADING*/
#v{
	position:fixed;
	z-index:1000;
	bottom:50%;
	left:50%;
	width:250px;
	max-width:60%;
	transform: translate(-50%, 100px);
	border-radius:4px;
	overflow:visible;
	pointer-events:none;
	transition:all .5s;
}
body:not(.loading) #v{opacity:0;}
#v p{
	position:fixed;
	right:0;
	top:0;
	margin:10px 0 0;
	font-size:12px;
	color:rgba(0,0,0,.2);
}
#lp, #v:after{
	display:block;
	position:fixed;
	top:0;
	left:0;
	height:4px;
	background:#00b0ff;
	transition:all .5s;
	width:0%;
	border-radius:4px;
}
#v:after{
	content:"";
	width:calc(100% - 2px);
	height:2px;
	background:transparent;
	border:1px solid rgba(0,0,0,.15);
}

/*HEADER*/
header{top:0;left:2%;}
header h1, header:after{
	content:"";
	display:block;
	position:absolute;
	font-size:0;
	color:transparent;
	width:clamp(200px,20%,80%);
	aspect-ratio: 821/300;
	transition:all 1.5s;
	opacity:0; 
	background:url(../img/media.png) no-repeat center;
	background-size:contain;
	pointer-events: none;
	top:15px;
	filter: drop-shadow(2px 2px 0px #ffffff) drop-shadow(0px 0px 20px #fff);
}
header:after{background-image:url(../img/media2.png);}
.layer1 header h1, .layer2 header:after{opacity:1;}

header p{
	position:fixed;
	top:144px;
	right:0;
	margin:0;
	width:48px;
	height:48px;
}
header a{
	display:flex;
	width:48px;
	height:48px;
	font-size:0;
	border-radius:0 0 0 10px;
	justify-content: center;
	align-items:center;
	text-decoration:none;
}
header a:after{
	content:"?";
	font-size:14px;
	background:rgba(0,0,0,.6);
	color:#fff;
	width:18px;
	height:18px;
	line-height:16px;
	text-align:center;
	border-radius:10px;
}
header a:hover{background-color:rgba(255,255,255,.6)}

footer{bottom:0;}
footer p:first-of-type{
	position:fixed;
	bottom:2%;
	left:2%;
	filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
footer p:first-of-type:after, footer p:first-of-type:before{
	content:"";
	display:block;
	height:60px;
	width:95px;
	background:red;
	position:absolute;
	z-index:0;
	pointer-events: none;
	left:0;
	top:50%;
	transform-origin: left center;
	transform: translateY(-50%) scale(.8);
	background:url(../img/sw1.png) no-repeat center;
	background-size:cover;
	border-radius:8px 0 0 8px;
	filter:drop-shadow(1px 1px 0px #fff) drop-shadow(-1px -1px 0px #fff) drop-shadow(1px -1px 0px #fff) drop-shadow(-1px 1px 0px #fff);
	transition:all .35s;
}
footer p:first-of-type:before{
	right:0;
	transform-origin: right center;
	left:auto;
	background-image:url(../img/sw2.png);
	border-radius:0 8px 8px 0;
}
.layer1 footer p:first-of-type:after, .layer2 footer p:first-of-type:before{transform: translateY(-50%) scale(1);z-index:1;}
footer p:first-of-type a{
	display:block;
	width:150px;
	height:50px;
	border-radius:6px;
	position:relative;
	text-decoration:none;
	font-size:0;
	color:transparent;
	z-index:5;
	text-align:center;
	}
footer p:first-of-type a:after{
	content:"";
	display:inline-block;
	width:42px;
	height:100%;
	background:url(../img/fl.png) no-repeat center;
	background-size:contain;
	transition:all .35s;
	transform: rotateY(0deg) translateX(16px);
}
.layer2 footer p:first-of-type a:after{transform: rotateY(-180deg) translateX(16px);}
footer p:first-of-type a span{
	position:absolute;
	height:26px;
	line-height:20px;
	white-space:nowrap;
	left:50%;
	transform: translateX(-50%);
	height:20px;
	background:#000;
	color:#fff;
	border-radius:4px;
	padding:2px 8px;
	font-size:12px;
	pointer-events:none;
	opacity:0;
	top:-20px;
	transition:all .25s;
}
footer p:first-of-type a:hover span{opacity:1;top:-42px;}
footer p:first-of-type a span:after{
	content:"";
	position:absolute;
	bottom:-4px;
	width:0px;
	height:0px;
	left:50%;
	transform: translateX(-50%) rotate(-45deg);
	border:5px solid #000;
	border-top-color:transparent;
	border-right-color:transparent;
}

main{
	z-index:9;
	top:0;
	bottom:0;
	aspect-ratio: 14/9;
	height:100vh;
}
.cat-zoomist {width: 100vw;height: 100vh;}
.zoomist-wrapper{background:none!important;}
.zoomist-image{
	width:100vw;
	height:100vh;
	text-align:center;
	position:relative;
	transition:all .2s!important;
}

.zoomist-image>div{
	position:absolute;
	z-index:3;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	display:block;
	height:100%;
	aspect-ratio: 14/9;
	overflow:hidden;
	transition:all .5s;
}
.zoomist-image>div#layer2{z-index:2;opacity:0;filter:blur(5px);pointer-events:none;}
.layer2 .zoomist-image>div#layer2{opacity:1;filter:blur(0px);pointer-events:auto;}
.zoomist-image>div#layer1{z-index:1;}
.layer2 .zoomist-image>div#layer1{filter:blur(5px);opacity:0;}
.zoomist-image img.fond, .zoomist-image svg {
	aspect-ratio: 14/9;
	height: 100vh;
	object-fit: contain;
	object-position: center;
}

/*SVG + BTNS*/
.zoomist-image .svg, .zoomist-image svg{position:absolute;z-index:2;}
g{fill:transparent;}
.zoomist-image path, .zoomist-image polygon, .zoomist-image rect, .zoomist-image ellipse{
	opacity:1;
	stroke-width: 10px;
	stroke:transparent;
	filter: blur(5px);
	transition:all .5s;
	cursor: pointer;
}
path:hover, polygon:hover, rect:hover, ellipse:hover{stroke:#007eff;fill:rgba(255,255,255,.2);filter:blur(5px);}

body:is(.open1, .open2, .open3, .open4) .svg_close,
body:not(.open1) .svg_open1,
body:not(.open2) .svg_open2,
body:not(.open3) .svg_open3,
body:not(.open4) .svg_open4{
	display:none;
	opacity:0;
	transition:all .25s;
}
body:not(.open1, .open2, .open3, .open4) .svg_close,
body.open1 .svg_open1,
body.open2 .svg_open2,
body.open3 .svg_open3,
body.open4 .svg_open4{
	display:block;
	opacity:1;
	transition:all .25s;
	transition-delay:.5s;
	animation: wait 1 linear .5s;
} 
@keyframes wait{
	0%{opacity:0;pointer-events: none;}
	99%{opacity:.99;pointer-events: none;}
	to{pointer-events: auto;}
}

.btn_bg1, .btn_bg2, .btn_bg3, .btn_bg4{display:block;fill:rgba(255,255,255,.9);}
.btn_bg1:hover, .btn_bg2:hover, .btn_bg3:hover, .btn_bg4:hover{fill:rgba(255,255,255,.5);}
#layer2 .btn_bg1, #layer2 .btn_bg2, #layer2 .btn_bg3, #layer2 .btn_bg4{ fill:rgba(0,0,0,.8); }
#layer2 .btn_bg1:hover, #layer2 .btn_bg2:hover, #layer2 .btn_bg3:hover, #layer2 .btn_bg4:hover{ fill:rgba(0,0,0,.4); }

/*SET GRAPHICS ELMS*/
.p1, .p2, .p3, .p4, .p5, .p6, .p7, .p8{
	display:block;
	background:transparent;
	position:absolute;
	z-index:1;
	aspect-ratio:auto;
	height:auto;
	opacity:1;
	transform-origin: top right;
	transition:transform .25s cubic-bezier(.25,.5,.5,1);
	width:7.02%;
	left:57.82%;
	top:35.15%;
}
.p2{width:6.9%;left:64.8%;top:35.1%;}
.p3{width:9.93%;left:34%;top:20.9%;}
.p4{width:9.9%;left:24.2%;top:20.9%;}
.p5{width:6.17%;left:11.9%;top:37.4%;}
.p6{width:6.17%;left:17.95%;top:37.4%;}
.p7{width:12.6%;left:13.25%;top:60.2%;}
.p8{width:12.35%;left:.95%;top:60.9%;}

#layer2 .p1{width:7.15%;left:58.2%;top:35.3%;}
#layer2 .p2{width:6.82%;left:65.2%;top:35.8%;}
#layer2 .p3{width:7.1%;left:34.1%;top:20.6%;}
#layer2 .p4{width:7.6%;left:26.6%;top:19.6%;}
#layer2 .p5{width:5.2%;left:12.4%;top:39.0%;}
#layer2 .p6{width:5.1%;left:17.4%;top:39.35%;}
#layer2 .p7{width:13.15%;left:13.2%;top:59.3%;}
#layer2 .p8{width:12.37%;left:0.9%;top:60.8%;}

.p2, .p3, .p6, .p7{transform-origin: top left;}
.open1 .p1,.open2 .p3,.open3 .p5,.open4 .p7,.p2,.p4,.p6,.p8{
	transform: scaleX(0%);
	transition:transform .25s cubic-bezier(.5,0,.75,.5);
	transition-delay:0s;
}
.p1,.p3,.p5,.p7,.open1 .p2,.open2 .p4,.open3 .p6,.open4 .p8{
	transform: scaleX(100%);
	transition:transform .25s cubic-bezier(.25,.5,.5,1);
	transition-delay:.25s;
}

/*ZOOMIST*/
.zoomer-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 3rem;
	height: 3rem;
	background-color: #efefef;
}
.zoomer-btn.zoomer-disabled {opacity: 0.2;}
.change-image-btn {padding: 0.5rem;background-color: #eee;}  
.zoomist-slider {
	top: auto!important;
	left: auto!important;
	bottom:0;
	right:0;
	border-radius:10px 0 0 0!important;
}
.zoomist-zoomer {border-radius:0!important;padding-bottom:48px;border-radius:0 0 0 10px!important;}
.zoomist-slider, .zoomist-zoomer{
	background:rgba(255,255,255,.5)!important;
	border-right:0;
	border-bottom:0;
	box-shadow:0 0 5px rgba(0,0,0,.5);
	opacity:.9;
}
.zoomist-zoomer-button:not(:hover){background:none!important;}

/*LIGHTBOX*/
#lightbox, #lightbox-close, #lightbox-main{
	position:fixed;
	z-index:1000;
	top:0;
	bottom:0;
	left:0;
	right:0;
	opacity:1;
	transition:all .5s;
}
#lightbox{backdrop-filter:blur(50px);transition:all .5s;}
#lightbox:not(.open){pointer-events:none;backdrop-filter:blur(0px);}
#lightbox-close{cursor:pointer;transition:all .5s;background:rgba(255,255,255,.5);}
#lightbox:not(.open) #lightbox-close{background:rgba(255,255,255,0);opacity:0;}
#lightbox-close:after{
	content:"+";
	display:block;
	position:absolute;
	top:1%;
	right:1%;
	text-align:center;
	font-size:70px;
	width:48px;
	height:48px;
	line-height:42px;
	transform: rotate(45deg);
}
#lightbox-main{
	top:50%;
	left:50%;
	right:auto;
	bottom:auto;
	overflow:hidden;
	width:max-content;
	max-width:calc(96vw - 96px);
	max-height:calc(90vh - 2%);
	transform: translate(-50%, -50%) scale(1);
	padding:1%;
	background:rgba(255,255,255,.75);
	border-radius:10px;
	transition:transform .3s;
	transition-delay:0.5s;
	box-shadow:0 0 15px rgba(0,0,0,.15);
	white-space:nowrap;
}
#lightbox:not(.open) #lightbox-main{transform: translate(-50%, -50%) scale(0);opacity:0;transition-delay:0s;}
@keyframes openlb{
	from{transform: translate(-50%, -50%) scale(0);}
	to{transform: translate(-50%, -50%) scale(1);}
}
#lightbox .imgs{
	max-width:70vw;
	height:max-content;
	display:inline-block;
	vertical-align: middle;
	overflow:hidden;
	font-size:0;
	position:relative;
}
#lightbox .imgs img{
	min-width:12vw;
	min-height:12vw;
	max-width:50vw;
	max-height:80vh;
	margin:0;
	display:block;
	position: relative;
	border-radius:5px;
	overflow: hidden;
}
#lightbox .imgs img:after, #lightbox .imgs img:before {  
	display: block;
	position: absolute;
	z-index:-2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: "";
	box-shadow:0 0 20px rgba(0,0,0,.15) inset;
}
#lightbox .imgs img:before {  
	z-index:-1;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border:6px solid black;
	width:24px;
	height:24px;
	border-radius:100%;
	border-top-color: transparent;
	opacity:.1;
	animation:rotateload infinite linear 1s;
}
@keyframes rotateload{
	from{transform: translate(-50%, -50%) rotate(00deg);}
	to{transform: translate(-50%, -50%) rotate(360deg);}
}
#lightbox .infos{
	width:24vw;
	max-width:350px;
	margin-left:1.5vw;
	display:inline-block;
	vertical-align: middle;
	overflow:auto;
	white-space:normal;
}
#lightbox h2{
	margin:0;
	font-size:34px;
	font-weight:normal;
	letter-spacing:1px;
	color:#0096e1;
}
#lightbox h3{
	font-size:20px;
	font-weight:normal;
	letter-spacing:1px;
	color:#999;
	padding:15px 0;
	margin:15px 0;
	border-top:1px solid #ccc;
}
#lightbox figure, #lightbox audio{margin:0;width:100%;}


/*MEDIAQUERIES*/
@media (max-aspect-ratio: 14/9) {
	.zoomist-image img.fond , .zoomist-image svg {height: auto;width:100vw;}
	.zoomist-image > div {height:auto;width:100%;}
	#lightbox-main{
		white-space:normal;
		display:flex;
		flex-wrap:wrap;
		width:calc(92vw - 4%);
		min-width:260px;
		justify-content: center;
		padding:2%;
		max-width: calc(92vw - 4%);
		max-height: calc(calc(92vh - 4%) - 24px);
		top:calc(50% + 24px);
	}
	#lightbox .imgs{
		max-width:100vw;
		width:max-content;
		height:max-content;
		display:block;
	} 
	#lightbox .imgs img{
		width:100%;
		height:auto;
		max-width:98vw;
		max-height:42vh;
	}
	#lightbox .infos{
		width:100%;
		max-width:100%;
		margin:2vh 0 0;
		display:block;
		overflow-y:auto;
		max-height:42vh;
	}
	#lightbox h2 {font-size: 28px;}
	#lightbox h3 {font-size: 20px;padding: 10px 0;margin: 10px 0;}
}

@media (min-aspect-ratio: 1) and (max-height:500px) {
	#lightbox-main{
		width:100%;
		height:100%;
		max-width:calc(94% - 48px);
		margin-left:-24px;
		display:flex;
		align-items: center;
		justify-content:space-evenly;
		gap:1%;
	}
	#lightbox .imgs{max-width:58%;text-align:center;} 
	#lightbox .imgs img{margin:0 auto;aspect-ratio: auto;max-width:100%;}
	#lightbox .infos{width:max-content;max-width: 40%;}
	#lightbox h2 {font-size: 28px;}
	#lightbox h3 {font-size: 20px;padding: 10px 0;margin: 10px 0;}
}