*, *::before, *::after {box-sizing: border-box;margin: 0;padding: 0;}
html, body {scroll-behavior: smooth;}
body, header, footer, nav,
p, ul, ol, li,
h1, h2, h3, h4, h5, h6, 
form, input, textarea, fieldset, blockquote, 
section, article, aside,
dl, dt, dd, 
table, td, th, tr, 
button, div, span {margin: 0;padding: 0;font-size: 100%;font-weight: normal;box-sizing: border-box;}
table {border-collapse: collapse;border-spacing: 0}
ul {list-style: none;}
img {max-width: 100%;height: 100%;vertical-align: middle;font-style: italic;background-repeat: no-repeat;background-size: cover;shape-margin: .75rem;}
img, fieldset {border: 0;}
/* hr {display: none;} */
/* sup {vertical-align: super;font-size: .7em;line-height: .8em;} */
sub {vertical-align: sub;font-size: .7em;line-height: .8em;}
address {font-style: normal;}
a, a:hover, a:visited, a:focus, a:active {text-decoration: none;box-sizing: border-box;}
button, button:hover, button:visited, button:focus, button:active {border: none;outline: none;cursor: pointer;background-color: transparent;}
input, button, textarea, select, optgroup, option {font-family: inherit;font-size: inherit;box-sizing: border-box;border: 0;}
textarea {resize: none;}
button img {pointer-events: none;}

:root {
	/* --primary-color: #6d86ee; */
	--primary-color: hsl(270, 100%, 50%);
  --mid-grey: #939597;
  --light-grey: #f3f3f3;
}

/**---Fonts------------------------*/
@font-face {
  font-family: 'SuisseIntl-Regular';
  font-weight: normal;
  src:  url('../fonts/SuisseInternational/SuisseIntl-Regular-WebXL.woff') format("woff"),
        url('../fonts/SuisseInternational/SuisseIntl-Regular-WebXL.woff2') format("woff2"),
        url('../fonts/SuisseInternational/SuisseIntl-Regular-WebXL.otf') format("opentype");
}
@font-face {
  font-family: 'SuisseIntl-Medium';
  font-weight: normal;
  src:  url('../fonts/SuisseInternational/SuisseIntl-Medium-WebXL.woff') format("woff"),
        url('../fonts/SuisseInternational/SuisseIntl-Medium-WebXL.woff2') format("woff2"),
        url('../fonts/SuisseInternational/SuisseIntl-Medium-WebXL.otf') format("opentype");
}
@font-face {
  font-family: 'SuisseIntl-MediumItalic';
  font-weight: normal;
  src:  url('../fonts/SuisseInternational/SuisseIntl-MediumItalic-WebXL.woff') format("woff"),
        url('../fonts/SuisseInternational/SuisseIntl-MediumItalic-WebXL.woff2') format("woff2"),
        url('../fonts/SuisseInternational/SuisseIntl-MediumItalic-WebXL.otf') format("opentype");
}
@font-face {
  font-family: 'ESFace-Book';
  font-weight: normal;
  src:  url('../fonts/Face/ESFace-Book.woff') format("woff"),
        url('../fonts/Face/ESFace-Book.woff2') format("woff2"),
        url('../fonts/Face/ESFace-Book.otf') format("opentype");
}
@font-face {
  font-family: 'ESFace-BookItalic';
  font-weight: normal;
  src:  url('../fonts/Face/ESFace-BookItalic.woff') format("woff"),
        url('../fonts/Face/ESFace-BookItalic.woff2') format("woff2"),
        url('../fonts/Face/ESFace-BookItalic.otf') format("opentype");
}


/**---General----------------------*/
/* html, body {background-color: #fff;} */
body {font-family: 'SuisseIntl-Medium', sans-serif;background-color: #ffffff;}
body.no-scroll {overflow: hidden;}

main {min-height: 100svh;
	background-color: #fff;
	/* padding-bottom: var(--margin-top2); */
}
	
#map-page {min-height: 100svh;}

.mobile {max-width: 500px;margin: 0 auto;position: relative;}
.dod {display: none;}
.dom {display: block;}

/* p {font-size: 16px;}
h1 {font-size: 34px;margin-bottom: 32px;}
h2 {font-size: 26px;margin-bottom: 26px;}
h3 {font-size: 20px;margin-bottom: 18px;} */

.off {display: none;}
.text-center {text-align: center;}
.text-right {text-align: right;}
.padT60 {padding-top: 60px;}
.hidden {display: none !important;}
.grid {display: grid;}

/**---Layout------------------------*/
header {display: none;}
.wrapper, .wrapper-wide {padding-inline: var(--margin); overflow: hidden;}
.path-list-intro {margin-bottom: 60px; padding-top: calc(var(--lineHeight) * 2);}
.path-list-intro-title{margin-bottom: 60px;padding-top: 60px;}


.in-transition {width: 100dvw;height: 100dvh;position: relative;z-index: 2 !important;visibility: visible !important;opacity: 1;}
.out-transition {width: 100dvw;height: 100dvh;position: relative;z-index: 1 !important;visibility: visible !important;opacity: 1;}

/**---Layout Single-----------------*/
.single-intro {margin-block: 20px;}
.single-intro h1 {margin-bottom: 0;}

/**---Header Title------------------*/
header.title {display: flex;justify-content: space-between;align-items: center;background-color: #fff;height: 50px;}
header.title h1 {margin-bottom: 0;}

/**---Menu hamburger----------------*/
#menu {position: fixed;top: 0;right: 0;width: 100%;z-index: 22;}
#hamburger, #close-nav {display: block;width: 48px;height: 48px;background-image: url('../images/icons-hyper/menu.svg');background-position: 0 0;background-size: 48px 144px;background-repeat: no-repeat;position: fixed;top: calc(var(--margin) - 8px);right: calc(var(--margin) - 8px);background-color: hsla(0, 0%, 100%, .8);--blur: 10px;backdrop-filter: blur(var(--blur));-webkit-backdrop-filter: blur(var(--blur));border-radius: 50%;cursor: pointer;}
#close-nav {background-image: url('../images/icons-hyper/close.svg');}
#menu nav {translate: 100% 0;position: absolute;padding: var(--margin);background-color: #4b4b4b;width: 100%;height: 100dvh;transition: translate 350ms ease-in-out;}
#menu nav.on {translate: 0 0;}

#menu li {
padding: calc(var(--lineHeight) * 1.1) 0 var(--lineHeight) 0 ;
margin: 0;
}

.menuItem {
	color: white;
	font-size: calc(var(--fontSize) * 1.4);
}

/* #menu .vdg-logos{
	background-color: red;
} */



/**---Return Btn--------------------*/
.return-to {display: block;width: 48px;height: 48px;background-image: url('../images/icons-hyper/goLeft.svg');background-position: 0 0;background-size: 48px 144px;background-repeat: no-repeat;text-indent: -9999px;position: fixed;left: calc(var(--margin) - 8px);top: calc(var(--margin) - 8px);border-radius: 50%; z-index: 21;background-color: hsla(0, 0%, 100%, .8);--blur: 10px;backdrop-filter: blur(var(--blur));-webkit-backdrop-filter: blur(var(--blur));}

@media (hover) {
  .return-to:hover {background-position: 0 -48px;}
}
.return-to:focus, .return-to:active {background-position: 0 -96px;}

.return-to.pushed {transform: translateY(82px)}

.return-to-path-home {display: block;width: 48px;height: 48px;background: url('../images/icons-hyper/close.svg') 0 0px / cover no-repeat;text-indent: -9999px;overflow: hidden;position: fixed;left: calc(var(--margin) - 8px);top: calc(var(--margin) - 8px);border-radius: 50%; z-index: 21;background-color: hsla(0, 0%, 100%, .8);
	
	/* s--blur: 10px; */
	
	backdrop-filter: blur(var(--blur));-webkit-backdrop-filter: blur(var(--blur));}

/**---SplashScreen------------------*/
#splashscreen {position: fixed;z-index: 900;inset: 0;
	background-color: #ffffff;
	overflow: hidden;}

.p5Canvas {position: fixed;
	/* z-index: -1; */
	pointer-events: none;
	mix-blend-mode: multiply;
    top: 0;
} 

@media only screen and (max-width: 568px) {

	.p5Canvas {
		position: absolute;
		z-index: 1000;
		pointer-events: none;
		/* mix-blend-mode: multiply; */
		top: -5%;
		transition: top 2s;

	} 
}


#wrapped {
	position: absolute;
	inset: 0;
	z-index: 10;
}
.visual {
  /* display: none; */
	background-color: rgb(0, 0, 0);
	position: absolute;
	left: 30%;
	width: 70%;
	height: 100vh;
	opacity: 50%;
	z-index: 2;
}

.image {
	display: block;
	width: 100%;
	height: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	filter: saturate(2);
}

.titlewrap {
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
    color: #000000;
	/* background-color: hsla(271, 22%, 38%, 0.5); */
	z-index: 30;
	width: 90%;
	transform: translate(-50%, -50%);
	opacity: 95%;
}
.titlewrap span {display: block;}
.titlewrap h1 span{
	font-size: calc((2px + 10svh) * 1.2);
	line-height: calc((2px + 10svh) * 1.0);
}

.subtitlewrap {
	margin-left: var(--margin);
	margin-bottom: var(--margin);
	margin-top: 2em;
    color: #000000;
}

.subtitlewrap h2 {
	/* font-size: calc((2px + 10svh) * .2);
	line-height: calc((2px + 10svh) * .2); */
	font-size: calc(var(--fontSize) * .8 );
	line-height: calc(var(--lineHeight) * .7 );
    font-weight: 500;
}

.hy {
	text-align: right;
	margin-right: -0.08em;
	margin-bottom: 1.2vh;
}

.per {
	text-align: right;
	margin-bottom: 2.5vh;
}

/* .ci {
} */

.ty {
	margin-left: 1.2em;
}

.dash {
	vertical-align: 0.7rem;
	line-height: 0px;
}


/**--- Loading animation ----------*/

.loadAnim{
	/* background-color: red; */
	display: flex;
	flex-direction: column;
	position: fixed;
	width: 100%;
	bottom: 3svh;
	z-index: 3;
}

.loading {
	margin: auto;
	margin-top: 1.5rem;
	margin-bottom: 1rem;
	animation: loadingPulse 1.5s infinite;
	font-size: calc(var(--fontSize) * .75);
  }
  
  @keyframes loadingPulse {
	0% {color: hsl(0, 0%, 0%); opacity: .8;}
	50% {color: hsl(0, 0%, 0%); opacity: 0;}
	100% {color: hsl(0, 0%, 0%); opacity: .8;}
  }
  
  .loader {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	position: relative;
	margin: auto;
	animation: rotate 6s linear infinite;
  }
  
  .loader::before {
	content: "";
	box-sizing: border-box;
	position: absolute;
	inset: 0px;
	border-radius: 50%;
	border: 3px solid #000000;
	opacity: .8;
	animation: prixClipFix 3s linear infinite;
  }
  
  @keyframes rotate {
	100% {transform: rotate(300deg);}
  }
  
  @keyframes prixClipFix {
	0% {clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);}
	25% {clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);}
	50% {clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);}
	75% {clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);}
	100% {clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);}
  }



/**---HomePage---------------------*/
#home {position: relative;min-height: auto;}
#home-intro h1 {width: 75%;}
#home-intro .text-content {width: 75%;}
#home-intro .logo {width: 50%;}

#focus {margin-top: 40px;}
#focus h2 {margin-bottom: 10px;}
#focus a {display: block;}
#focus a img {height: auto;}
#focus a span {display: block;color: #000;}

#untouchable {position: relative;
	/* height: calc(100svh - 260px); */
	height: calc(100svh - var(--margin-top11));
}
#untouchable .over-swiper {position: absolute;inset: 0;z-index: 2;background-color: rgba(0, 0, 0, 0);	mix-blend-mode: multiply;}
.color {position: fixed;z-index: -1;width: 100%;height: 100svh;top: 0}
#untouchable .over-swiper .titlewrap {position: absolute;top: var(--margin);left: var(--margin);transform: none;}
#untouchable .over-swiper .subtitlewrap {position: absolute;bottom: 2%;left: 2%;transform: none;}


#touchable {
	width: 100%;color: #000;
	background-color: hsla(0, 0%, 100%, 0);
	/* background: rgb(2,0,36); */
	background: linear-gradient(0deg,hsla(0, 0%, 100%, .8) 0%, hsla(0, 0%, 100%, .8) 70%, hsla(0, 0%, 100%, 0) 100%); 
	/* z-index: 1001; */
	padding-bottom: var(--margin-top3);
}
#touchable h5 {padding-block: var(--margin);}

#touchable nav#home-footer>ul>li>a {font-size: 16px;line-height: 18px;}

/**---block-path------------------*/
.path-block {width: 100%;
}

.path-block:last-child {
	margin-bottom: var(--margin-top3);
}


.path-block .label {
	display: block;
	color: var(--primary-color);
	margin-top:calc(var(--margin-top1) / 3 ); 
	margin-bottom:calc(var(--margin-top1) /1); 
	padding-left:0;
	padding-bottom:calc(var(--margin-top1) /3); 
	padding-right:calc(var(--margin-top2) /3); 

	/* font-size: calc((2px + 10svh) * .2); */
	/* line-height: calc((2px + 10svh) * .22); */
	font-size: calc(var(--fontSize) * .9);
	line-height: calc(var(--lineHeight) * .9);
	border-bottom: 1px solid rgb(237, 237, 237);
}


.path-block .label:after {
	/* border: 1px solid red;	 */
	content: '';
	background: url('../images/icons-hyper/arrow.svg') 0 0 / cover no-repeat;
	position: absolute;
	height: var(--fontSize);
	scale: 1.7;
	margin-left: calc(var(--gutter-width) / 4);
	right: var(--margin);
	aspect-ratio: 1;
}



.path-block + .path-block {margin-top: calc(var(--margin-top1) / 1 );}
.path-block .vignette {width: 100%;
	/* height: 240px; */
	aspect-ratio: 2;
	display: block;background-position: center center;background-repeat: no-repeat;background-size: cover;}

/**---Home Swiper------------------*/
#swiper-slave {pointer-events: none;height: 100%;}
#swiper-slave .swiper-slide {aspect-ratio: 1;height: 100%}
#swiper-slave .swiper-slide img {object-fit: cover;}

#swiper-master .swiper-slide {height: 140px;border-radius: 5px;overflow: hidden;}
#swiper-master .swiper-slide a {color: #fff;background-position: center center;background-repeat: no-repeat;background-size: 103% auto;display: block;padding: var(--margin);aspect-ratio: calc(270 / 140);transition: background-size 1s ease-in-out;}
@media (hover) {
	#swiper-master .swiper-slide a:hover {background-size: 120%;transition: background-size 1s ease-in-out;} 
}
#swiper-master .swiper-slide a, #video-gallery .swiper-slide a {display: block;}

#swiper-master .invisible-slide {border: none !important;background: transparent !important;}

/**---Nav--------------------------*/
main nav>ul>li {padding-block: 15px;}
main nav>ul>li + li {border-top: 1px solid var(--light-grey);}
main nav>ul>li a {color: #000;}
main nav>ul>li a>span {display: block;}
.title-link {display: block;position: relative;}
main .title-link::after {content: '';width: 28px;height: 28px;position: absolute;right: 0;top: 0;background-position: 0 0;background-size: 28px 84px;background-repeat: no-repeat;background-image: url('../images/icons-red/arrow.svg');}
@media (hover) {main .title-link:hover::after {background-position: 0 -28px;}}
main .title-link:focus::after, .title-link:active::after  {background-position: 0 -56px;}

#home-footer {
	position: fixed;
	width: 100%;
	bottom: 0;
	left:0;
	/* margin-block: var(--margin-top2); */
	padding-bottom: 2svh;
	padding-top: 2svh;
	background-color: hsla(0, 0%, 98%, 0.97);
	box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

#home-footer .title-link::after {background: none;}
nav#home-footer>ul {display: flex;gap: /** var(--margin)**/ 0px;}
nav#home-footer>ul>li {
	border: 0;
	border-right: 1px solid var(--mid-grey);
	padding: 8px 0px 8px 0px;
	flex: 1 1 auto;
	text-align: center;
	border-radius: 0px;
	margin-bottom: 0;
}
nav#home-footer>ul>li:first-child {padding-left:0;}
nav#home-footer>ul>li:last-child {border: 0;border-right: 0; padding-right:0;}
nav#home-footer>ul>li>a {margin: 0;}
nav#home-footer>ul>li.disabled {border-color: #dddddd;opacity: 0.25;}
nav#home-footer>ul>li>a.disabled {color: #dddddd;pointer-events: none;}

/**---Footer-----------------------*/
footer {background-color: #000;color: #fff;padding: 30px 20px 200px 20px;margin-top: calc(var(--lineHeight) * 3) !important;}
footer a {color: #fff}
footer nav li {padding-top: 20px;}
footer nav li + li {border-top: 1px solid #fff;}
footer .title-link {margin-bottom: 0;}
#social_networks {display: flex;gap: 15px;justify-content: center;align-items: center;padding-block: 30px;border-top: 1px solid #fff;}
#social_networks a {display: block;width: 30px;height: 30px;background-position: 0 0;background-size: cover;background-repeat: no-repeat;text-indent: -9999px;}
#social_networks .x {background-image: url('../images/socials/twitterX.svg');}
#social_networks .facebook {background-image: url('../images/socials/facebook-m.svg');}
#social_networks .instagram {background-image: url('../images/socials/instagram-m.svg');}
#social_networks .youtube {background-image: url('../images/socials/youtube-m.svg');}

.vdg-logos {display: flex;justify-content: space-between;align-items: center;}
.uivdg {width: 110px;}
.vdg {width: 110px;}

/**---Collection-------------------*/
a.btn {display: block;aspect-ratio: 16/9;}


/**---Swiper-----------------------*/
#to-paths .swiper, #video-gallery .swiper {width: calc(100% + var(--margin));padding-bottom: 34px !important;}
#video-gallery .swiper, #video-gallery .swiper-wrapper {padding-bottom: 44px !important;}
#to-paths .swiper-slide {width: 270px !important;}
#to-paths .swiper-slide a, #video-gallery .swiper-slide a {display: block;}
#to-paths .swiper-slide a span, #video-gallery .swiper-slide a span {display: block;margin-block: 10px;}
#to-paths .swiper-slide .cover, #video-gallery .swiper-slide .cover {width: 100%;aspect-ratio: 1.8;background-repeat: no-repeat;background-size: cover;}
#to-paths .swiper-pagination-bullet-active, #video-gallery .swiper-pagination-bullet-active {background-color: var(--primary-color);}
#to-paths .swiper-pagination-bullets, #video-gallery .swiper-pagination-bullets {bottom: var(--lineHeight);}

/**---Map--------------------------*/
#home-map {display: block;}
#home-map > .map {pointer-events: none;}
#home-map, #artworkMap .map-view {height: 50vh;}
#standalone-map {height: calc(100svh - 100px);}

#map-flap {position: relative;overflow: hidden;min-height: 100svh;}
#flap {position: absolute;top: 0;right: 0;bottom: 118px;width: 85.3%;background: #fff;z-index: 2;padding-inline: var(--margin);border-left: 1px solid #494949;}
#invisible-flap {position: absolute;top: 0;left: 0;bottom: 118px;width:50%;z-index: 2;background-color: transparent;}
#invisible-flap.collapse {translate: -100% 0;}
#flap.half-collapse {translate: 40% 0;} 
#flap.collapse {translate: 80% 0;}
#all-halts {overflow-y: auto;height: 100%;}
#all-halts>div {padding-block: 50px 80px;}
#flap.collapse #all-halts a, #flap.half-collapse #all-halts a {pointer-events: none;}

#path-map {height: calc(100svh - 118px);position: relative;z-index: 1;}
#path-map-active {height: calc(100svh - 118px);}
.map {position: relative;top:0;left:0;width:100%;height:100%;}

.switch-container .gps-activation {font-family: "Arial", sans-serif;font-weight: bold;width: 60px;height: 30px;background: white;border: 2px solid black;border-radius: 5px;transform: translateX(46px);transition: transform 0.3s;transition-delay: .3s;transition-timing-function: ease-out;color: hsl(0, 0%, 0%);}
@media (hover) {
  .switch-container .gps-activation:hover {color: white;background: hsl(202, 50%, 45%);border: 2px solid hsl(202, 50%, 45%);}
}
.switch-container .gps-activation:active {color: white;background: hsl(0, 0%, 0%);border: 2px solid hsl(0, 0%, 0%);}
.switch-container .gps-activation.on {color: white;background-color: hsl(202, 82%, 67%);border: 2px solid hsl(202, 82%, 67%);transform: translateX(0);}

.switch-container #mapPointerBtn {width: 40px;height: 40px;position: relative;background-color: transparent;border: 2px solid #000;border-radius: 50%;transform: translateX(100px);opacity: 0;transition: transform .3s ease-out, opacity .15s ease-out;}
.switch-container #mapPointerBtn.on {background-color: hsl(202, 82%, 67%);border: none;}
@media (hover) {
  .switch-container #mapPointerBtn:hover {background: hsl(202, 50%, 45%);border: none;}
  .switch-container #mapPointerBtn:hover>div {background: url('../images/icons-white/centerMe.svg') 0 0 / cover no-repeat;top: 2px;left: 2px;}
}
.switch-container #mapPointerBtn:active {background: hsl(0, 0%, 0%);}
.switch-container.on>#mapPointerBtn {transform: translateX(0);opacity: 1;transition: transform 0.25s ease-out 0.5s, opacity 0.2s ease-out 0.6s;}
#mapPointerBtn>div {width: 36px;height: 36px;position: absolute;top: 0;left: 0;background: url('../images/icons-black/centerMe.svg') 0 0 / cover no-repeat;}
#mapPointerBtn.on>div {width: 36px;height: 36px;position: absolute;top: 2px;left: 2px;background: url('../images/icons-white/centerMe.svg') 0 0 / cover no-repeat;}

#geoloc-activation-bar {height: 50px;display: grid; grid-template-columns: repeat(2, 1fr);justify-content: space-between;align-items: center;}

#geoloc-activation {background-color: #fff;display: flex;align-items: center;justify-content: flex-end;gap: 6px}
.switch-container {display: flex;align-items: center;gap: 8px;overflow: hidden;}

.pointer-container, .pointer-container button {width: 30px;height: 30px;}

.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon {background-image: url('../images/mapbox-icons/mapboxgl-ctrl-zoom-in.svg') !important;}
.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon {background-image: url('../images/mapbox-icons/mapboxgl-ctrl-zoom-out.svg') !important;}
.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon {background-image: url('../images/mapbox-icons/mapboxgl-ctrl-compass.svg') !important;}

/**---Map legend--------------------*/
#legends {position: absolute;top: 0;left: 0;translate: 0 -100%;padding: 8px;pointer-events: none;}
.legend {display: flex;gap: 6px;}
.legend img {width: 16px;height: auto;}
.legend .txt {font-family: 'SuisseIntl-Regular';font-size: 12px;}

/**---GeoMarker--------------------*/
.geo-spot {position: absolute;width: 48px;height: 48px;}
.geo-spot.circle {border-radius: 50%;}
.geo-spot.next {z-index: 20;width: 72px;height: 72px;animation: pulse-anim 2s infinite;}
.geo-spot.pulse {z-index: 20;width: 72px;height: 72px;animation: pulse-anim 2s infinite;}
/* .geo-spot:hover {scale: 1.2} */
.geo-spot .border {filter: brightness(0) invert(1);}
.geo-spot.next .border, .geo-spot.pulse .border {filter: hue-rotate(270deg);}
.geo-spot[data-interactive="true"]:hover .border, .geo-spot.selected .border {filter: brightness(0);}
.geo-spot.big {width: 96px;height: 96px;transition: width 1s ease-in-out, height 1s ease-in-out;z-index: 10;}
.geo-spot.disabled {cursor: default;}
.geo-spot .icon {position: absolute;inset: 0;width: 96px;z-index: 2;object-fit: cover;}
.geo-spot .smallIcon {position: absolute;inset: 0;width: 48px;height: 48px;background-position: 0 0;background-repeat: no-repeat;background-size: cover;border-radius: 50%;}
.geo-spot.circle .icon, .geo-spot.circle .smallIcon {-webkit-mask: url('../images/circle-mask.svg');mask: url('../images/circle-mask.svg');}
.geo-spot.house .icon, .geo-spot.house .smallIcon {-webkit-mask: url('../images/house-mask.svg');mask: url('../images/house-mask.svg');}

.geo-spot .number {
	position: absolute;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: calc(var(--gutter-width) / 1.5);
	height: calc(var(--gutter-width) / 1.5);
	z-index: 3;
	/* border: 1px solid #535353; */
	transform: translate(4px, -4px);
	background-color: white;
	border-radius: 50%;
	font-family: 'SuisseIntl-Medium', sans-serif;

}

@media(hover) {
	.geo-spot:hover {cursor: pointer;width: 96px;height: 96px;transition: width 1s ease-in-out, height 1s ease-in-out;z-index: 10;}
}

.ghost {filter: grayscale(100%) brightness(170%) contrast(90%) opacity(100%)}

@keyframes pulse-anim {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
  }
}

/**---GeoLocation Warning----------*/
#geoloc-warning {height: 65px;}
#geoloc-warning p {font-size: .90em;}

/**---Search-----------------------*/
#fake-input {position: relative;height: 40px;border: 1px solid var(--primary-color);}
#fake-input::before, #fake-input::after {content: '';position: absolute;top: 5px;width: 30px;height: 30px;} 
#fake-input::before {left: 10px;background: url('../images/icons-red/magnifier.svg') 0 0 / cover no-repeat;} 
#fake-input::after {right: 10px;background: url('../images/icons-red/close.svg') 0 0 / cover no-repeat;} 

search {margin-block: 20px;}
search>span {display: block;position: relative;}
search>span::before {content: '';position: absolute;width: 30px;height: 30px;background: url('../images/icons-red/magnifier.svg') 0 0 / cover no-repeat;top: calc(50% - 15px);left: 10px;}
search input[type="search"] {border: 1px solid var(--primary-color);padding: 10px 20px 10px 40px;font-size: 16px;width: 100%;outline-offset: -2px;}
search input:focus[type="search"] {border: 2px solid var(--primary-color);outline: 3px solid var(--primary-color);outline-offset: -2px;}

/**---Artworks---------------------*/
.artworks-list li + li {margin-top: 10px;}
.artworks-list li {margin: 0;}
.artworks-list li a {display: flex;gap: 20px;flex-wrap: nowrap;align-items: center;color: #000;}
.artworks-list .push {width: 48px;}
.artworks-list .cover {width: 48px;height: 48px;overflow: hidden;border-radius: 50%;flex: 0 0 48px;}
.artworks-list .cover img {width: 48px;height: 48px;}
.artworks-list .artist-name {color: #77787b;font-size: 12px;}

/**---Artworks Single Page---------*/
.fixed {position: fixed;bottom: 20px;right: 20px;z-index: 10;}

#artwork-cover {position: relative;aspect-ratio: 1;overflow: clip;}
#artwork-cover img {position: absolute;object-fit: cover;top: 50%;translate: 0 -50%;width: 100%;height: 100%;}

.block-info + .block-info {margin-top: var(--margin);}
.artist-info h2{margin-top:var(--margin);}
.denomination {margin-top:calc(var(--lineHeight) * 2);}
.about-artwork {padding-block:calc(var(--lineHeight) * 2); ;border-top: 1px solid black;}

.about-artwork .content-text{margin-top: calc(var(--lineHeight) * 2)}

.artwork:first-child {margin-top: 50px;}
.artwork {padding-block: 16px;border-top: 1px solid rgb(195, 195, 195);}

.artwork-info {margin-top: var(--lineHeight);display: table;}
.artwork-info>div {display: table-row;}
.artwork-info>div>dt {display: table-cell;padding-right: 5px;white-space: nowrap; width: 110px}
.artwork-info>div>dd {display: table-cell;}

.other-artworks{margin-top: var(--margin-top1)}
.photograph {color: var(--mid-grey)}

#artworkMap {margin-block: 26px;}

#audioZone {--plyr-color-main: var(--red);--plyr-audio-controls-background: hsla(0, 0%, 100%, 0.3);position: fixed;bottom: 0;left: 50%;width: 100%;max-width: 500px;z-index: 2;translate: -50% 0;transition: translate 200ms ease-in-out}
#audioZone.pushup {translate: -50% -94px;}

#audio-gallery {--plyr-audio-controls-background: transparent;--plyr-control-icon-size: 24px;}
.audioList {border-top: 1px solid var(--light-grey);border-bottom: 1px solid var(--light-grey);}
.audio-bloc {padding-block: 8px;height: 72px;transition: height 300ms;overflow: hidden;}
.audio-bloc.on {height: auto;}
.audio-bloc + .audio-bloc {border-top: 1px solid var(--light-grey);}
.audioBtn {width: 100%;display: flex;gap: 20px;flex-wrap: nowrap;align-items: start;color: #000;text-align: left;align-items: center;}
.audioBtn span {pointer-events: none;}
.audioBtn .cover {width: 48px;height: 48px;overflow: hidden;border-radius: 50%;flex: 0 0 48px;}
.audioBtn .cover img {width: 48px;height: 48px;}
.audioBtn .coverAudio {width: 48px;height: 48px;overflow: hidden;border-radius: 50%;flex: 0 0 48px;background: url('../images/icons-hyper/hasAudio4.svg') 0 0 / cover no-repeat;}

.audiotrack {display: grid;grid-template-columns: auto 60px;align-items: center;}
.closeArea {background: var(--plyr-audio-controls-background,#fff);height: 100%;display: grid;justify-content: start;align-items: center;}
.closeAudio {--size: 36px;background: url('../images/icons-hyper/close.svg') 0 0 / cover no-repeat;width: var(--size);height: var(--size);}
.closeAudio img {pointer-events: none;}

#externalLinks a {padding-block: 10px;display: block}
#externalLinks .links {border-top: 1px solid var(--light-grey);border-bottom: 1px solid var(--light-grey);}
#externalLinks a + a {border-top: 1px solid var(--light-grey);}
#externalLinks .title {--size: 20px;padding-right: var(--size);color: #000;position: relative;}
#externalLinks .title::after {content: ''; width: var(--size);height: var(--size);background: url('../images/icons-red/externalLink.svg') right 0 top 0 / cover no-repeat;position: absolute;right: 0;top: calc(50% - var(--size) * .5);}
#externalLinks .description {color: #8F8F8F;}

.pdfList a {padding-block: 10px;display: block;color: #000;position: relative;--_size: 40px;padding-left: var(--_size);}
.pdfList a + a {border-top: 1px solid var(--light-grey);}
.pdfList a::before {content: '';width: var(--_size);height: var(--_size);background: url('../images/icons-hyper/hasPDF.svg') right 0 top 0 / cover no-repeat;position: absolute;left: 0;top: 4px;}

#videoZone {position: fixed;inset: 0;z-index: 50;align-items: center;}
#overlay-video {position: absolute;width: 100vw;height: 100dvh;background-color: rgba(0, 0, 0, .7);}
#video-box {width: 90%;position: absolute;top: 50%;left: 50%;translate: -50% -50%;}
#videoZone .close {display: block;width: 48px;height: 48px;;background: hsla(0, 0%, 100%, 0.3) url('../images/icons-hyper/close.svg') 0 0 / 48px 144px no-repeat;text-indent: -9999px;position: fixed;left: var(--margin);top: var(--margin);border-radius: 50%; z-index: 10;--blur: 1px;backdrop-filter: blur(var(--blur));-webkit-backdrop-filter: blur(var(--blur));}
@media (hover) {
  #videoZone .close:hover {background-position: 0 -48px;}
}
#videoZone .close:focus, #videoZone .close:active {background-position: 0 -96px;}

#video-gallery .swiper-slide {width: 270px !important;aspect-ratio: 16/9;}
#video-gallery .video_thumbnail {position: relative;--size: 40px;width: 100%;height: 100%;overflow: hidden;}
#video-gallery .video_thumbnail .thumbnail {height: auto;position: absolute;top: 50%;left: 0;width: 100%;translate: 0 -50%;}
#video-gallery .video_thumbnail .icon {height: var(--size);width: var(--size);position: absolute;top: calc(50% - .5 * var(--size));left: calc(50% - .5 * var(--size));background: url('../images/icons-white/play.svg') 0 0 / cover no-repeat;z-index: 2;}
#video-gallery .video_thumbnail .plyr {position: absolute;inset: 0;}
#video-gallery .video_thumbnail video.player {position: absolute;inset: 0;}
.play-rts{width: 100%;aspect-ratio: 16 / 9;}

.videoCaption{
	padding-top: calc(var(--lineHeight)/2);
	padding-left: var(--margin);
	padding-right: calc(var(--margin) * 4); 
	color:#818181
}

@media only screen and (max-width: 568px) {
	.videoCaption{
		font-size: calc(var(--fontSize)*.7);
		line-height: calc(var(--lineHeight)*.7);
	}
	} 


@media screen and (width > 1250px){
	.plyr--video{
		max-width: 70vw;
		max-height: 80vh;
		margin: auto;
	}
}


.photo-gallery {display: grid;grid-template-columns: repeat(3, 1fr);gap: 6px}
.photo-gallery > button {aspect-ratio: 1;position: relative;overflow: clip;}
.photo-gallery > button img {object-fit: cover;width: 100%;height: 100%;position: absolute;top: 0;translate: -50%;transition: scale 800ms ease-in-out;}
.photo-gallery > button:hover img {scale: 1.2;}
.photo-gallery > button::before {content: '';width: 40%;height: 40%;position: absolute;pointer-events: none;background: url('../images/icons-white/look.svg') 0 0 / cover no-repeat;top: 30%;left: 30%;z-index: 1;}

#swiperGallery {display: none;position: fixed;width: 100%;height: 100vh;top: 0;left: 0;z-index: 20;background: linear-gradient(0deg, rgba(0, 0, 0, .95) 9%, rgba(0, 12, 14, .85) 100%);}
#swiperGallery .swiper-slide {padding: 20px;display: grid;justify-content: center;align-items: center;position: relative;}
#swiperGallery .swiper-slide img {height: auto;width: auto;position: relative;left: 50%;transform: translate(-50%, 0);margin-bottom: 20px;box-shadow: 0px 0px 30px rgba(0, 0, 0, .1);}

.swiper-overlay {position: absolute;inset: 0;z-index: -1;}

#swiperGallery .swiper-button-prev, #swiperGallery .swiper-button-next {color: var(--light-grey)}
#swiperGallery 

.swiper-button-close {display: block;width: 48px;height: 48px;background: url('../images/icons-white/close.svg') 0 0 / 48px 144px no-repeat;text-indent: -9999px;position: fixed;right: var(--margin);top: var(--margin);z-index: 1;}

@media (hover) {
  .swiper-button-close:hover {background-position: 0 -48px;}
}
.swiper-button-close:focus, .swiper-button-close:active {background-position: 0 -96px;}

/**---podcast----------------------*/
#podcast, #vidcast {position: relative;height: 80svh;background-position: center center;background-repeat: no-repeat;background-size: cover;}
.play, .pause {--btn-size: 60px;width: var(--btn-size);height: var(--btn-size);border-radius: 50%}
.play {background: hsl(0, 0%, 100%, .9) url('../images/icons-black/play.svg') center top / cover no-repeat;}
.pause {background: hsl(0, 0%, 100%, .9) url('../images/icons-black/pause.svg') center top / cover no-repeat;}
.play:hover, .pause:hover {background-color: hsl(0, 0%, 100%);}
#audio-control {--blur: 20px;position: absolute;height: 88px; top: 72%;left: 50%;translate: -50% -50%;backdrop-filter: blur(var(--blur));-webkit-backdrop-filter: blur(var(--blur));padding: 10px;box-shadow: inset 0px 0px 1px 0px rgba(255, 255, 255, .8);border-radius: 5px;width: 80%; max-width: 625px;overflow: hidden;}
#audio-control .seek-slider {position: absolute; width:100%;bottom: 0;left: 0;right: 0;appearance: none;-webkit-appearance: none;background: rgba(255, 255, 255, .4);height: 10px;border-radius: 5px;}
#audio-subcontrol .seek-slider {appearance: none;-webkit-appearance: none;background: rgba(255, 255, 255, .4);height: 10px;border-radius: 5px;}
#audio-control .seek-slider::-webkit-slider-thumb, #audio-subcontrol .seek-slider::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
    background: #fff;
	border:none;
    height: 10px;
	width: 10px;
	border-radius: 50%;
	cursor: pointer;
}
#audio-control .seek-slider::-moz-range-thumb, #audio-subcontrol .seek-slider::-moz-range-thumb {
	appearance: none;
	border:none;
	background: #fff;
    height: 10px;
	width: 10px;
	border-radius: 50%;
	cursor: pointer;
}

#vidcast {display: grid;place-items: center;}

#subControl {position: fixed;bottom: 0;width: 100%;translate: 0 0;transition: translate 200ms ease-in-out;z-index: 2;background: linear-gradient(180deg, hsla(240, 100%, 100%, 0), hsl(0, 100%, 100%, .5) 22%)}
#subControl::after {content: '';position: absolute;inset: 25px 0 0;z-index: -1;--blur: 20px;backdrop-filter: blur(var(--blur));-webkit-backdrop-filter: blur(var(--blur));background-color: hsla(0, 0%, 20%, .1)} 
#subControl.withPageNav::after {top: 30px;border-radius: 5px 5px 0 0;} 
#subControl.hide {translate: 0 100%;}

#subControl .bg {position: absolute;inset: 30px 0 0;z-index: -1;background-position: center center;background-size: cover;background-repeat: no-repeat;}
#audio-subcontrol {
	display: grid;
	grid-template-columns: 72px auto 72px;
	height: 72px;
	align-items: center;
	width: 80%; max-width: 625px; 
	margin-left: 50%; 
	translate: -50% 0%; 
	margin-bottom:16px;
	z-index: 5;}
#audio-subcontrol .cover {--cover-size: 64px;width: 64px;height: 64px;}
#audio-subcontrol .btn-control {height: 60px;}
#audio-subcontrol .play, #audio-subcontrol .pause {--btn-size: 60px;}

.audioTimer {position: absolute; right: 16px; top: 50%; translate: -0% -50%; letter-spacing: .05em; color: #fff;}

.pageNav {display: flex;align-items: center;}
.pageNav > div {flex: 1 1 0;text-align: center;--bg-size: 70px 210px;--side-size: 70px;}
.pageNav > div a {display: inline-block;text-indent: -9999px;width: var(--side-size);height: 28px;background-position: center -21px;background-repeat: no-repeat;background-size: var(--bg-size)}
.pageNav .return-to-path, .pageNav .return-to-paths-page, .pageNav .next-halt  {width: var(--side-size);height: var(--side-size);background-size: var(--bg-size);background-position: center top;position: relative;top: 3px} 
.pageNav .return-to-path {background-image: url('../images/backToPathb.svg');}
.pageNav .return-to-paths-page {background-image: url('../images/pathExitb.svg');}
.pageNav .next-halt {background-image: url('../images/backToPathb.svg');}
.pageNav .editorial-icon {background-image: url('../images/backToTopb.svg');}
.pageNav .bibliography-icon {background-image: url('../images/hasBibliographyb.svg');}
.pageNav .bonus-icon {background-image: url('../images/hasBonusb.svg');}
.pageNav .gallery-icon {background-image: url('../images/hasGalleryb.svg');}
/* .pageNav .return-to-path {width: 50px;height: 50px;background-image: url('../images/icons-hyper/backToPath3.svg');border: 1px solid  hsla(0, 0%, 30%, .18)}
.pageNav .return-to-paths-page {width: 50px;height: 50px;background-image: url('../images/icons-hyper/pathExit3.svg');border: 1px solid  hsla(0, 0%, 30%, .18)}
.pageNav .next-halt {width: 50px;height: 50px;background-image: url('../images/icons-hyper/backToPath2.svg');border: 1px solid  hsla(0, 0%, 30%, .18)}
.pageNav .editorial-icon {background-image: url('../images/icons-hyper/backToTop.svg'); border: 1px solid  hsla(0, 0%, 30%, .18)}
.pageNav .bibliography-icon {background-image: url('../images/icons-hyper/hasBibliography.svg'); border: 1px solid  hsla(0, 0%, 30%, .18)}
.pageNav .bonus-icon {background-image: url('../images/icons-hyper/hasBonus.svg'); border: 1px solid  hsla(0, 0%, 30%, .18)}
.pageNav .gallery-icon {background-image: url('../images/icons-hyper/hasGallery.svg'); border: 1px solid  hsla(0, 0%, 30%, .18)} */
.pageNav .icon.disabled {opacity: 0.1;cursor: default; width:0; height:0; display: none;}

#inNav {
	width: 80%; 
	max-width: 625px;
	top: 85%;
	left: 50%;
	translate: -50% -25%;
	position: absolute;
	/* --blur: 30px; */
	/* backdrop-filter: blur(var(--blur)); */
	/* -webkit-backdrop-filter: blur(var(--blur));padding: 0px; */
	/* box-shadow: inset 0px 0px 1px 0px rgba(255, 255, 255, .8); */
	/* border-radius: 5px; */
}

#inSubNav {
	width: 70%;
	max-width: 625px;
	position: relative;
	left:50%; 
	translate: -50% -10%;
}

#vidcast .video_thumbnail {width: 90%;}

#footnotes {margin-top: var(--margin);}
#footnotes>li {scroll-margin-top: 120px;}
#footnotes a.footnote-number {color: var(--primary-color);float: left;margin-right: 10px;}
/* Trying to select these footnotes refs in the text… dang */
/* #footnotes a[id*='footnote']{background-color:red;} */

.return-to-top { 
	position:fixed;
	z-index: 100;
	/* bottom: calc(var(--margin) - 8px); */
	bottom: 32px;
	right: var(--margin); 
	background: url('../images/icons-hyper/goLeft.svg') 0 0px / cover no-repeat;	
	width: 40px;
	height: 40px;
	background-color: #fff !important;
	border: 1px solid  hsla(0, 0%, 30%, .18);
	border-radius: 50%;
	transition: scale .3s, opacity .3s;
	transform: rotate(90deg);
	opacity: 1;
}

.return-to-top:hover { 	
	/* background-color: #e2e2e2; */
	scale: 1.2;
	transition: scale .3s;
}
.return-to-top.hide {
	opacity: 0;
	transition: opacity .3s;
}


/**---Paths------------------------*/
.cover {/*aspect-ratio: 4;*/overflow: hidden;position: relative;}
.cover img {height: auto;}
.paths-list li + li {margin-top: 40px;}
.paths-list .cover {position: relative;aspect-ratio: 2;background-repeat: no-repeat;background-size: 100% auto;background-position: center center ;border-radius: 6px;transition: background-size 1s ease-in;}
@media (hover) {
	.paths-list a:hover .cover {background-size: 120%;transition: background-size 1s ease-out;}
}

/* .paths-list .cover::after {
	content: '';
	height: 45px;
	width: 45px;
	position: absolute;
	bottom: 10px;
	right: 0;
	background: url('../images/icons-hyper/walkingman2.svg') 0 0 / 45px 135px no-repeat;
	overflow: hidden;
}  */

@media (hover) {.paths-list a:hover .cover::after {background-position: 0 -90px;} }
.paths-list a:focus .cover::after, .paths-list a:active .cover::after  {background-position: 0 -180px;} 
.paths-list a {color: var(--primary-color)}
.paths-list a>span {display: block;}

.pathLink span {margin-top: 8px;}

/**---Single Path-------------------*/
.path-intro h1 {margin-bottom: 20px;}
.path-intro h3 {font-size: 18px;margin-bottom: 20px;padding-right: 20%;}
.path-intro .text-content {margin-top: 30px;
	/* padding: 30px 0 30px 20%; */
	border-top: 1px solid var(--light-grey);}

.distances {display: flex;justify-content: flex-end;align-items: baseline;gap: 20px;}
.distances>div {line-height: 12px;}
#total {padding: 12px 0 0 30px;background: url('../images/icons-black/totaldistance.svg') 0 0 no-repeat;}
#walking {padding: 12px 0 0 15px;background: url('../images/icons-black/walking.svg') 0 0 no-repeat;}
#cycling {padding: 12px 0 0 29px;background: url('../images/icons-black/cycling.svg') 0 0 no-repeat;}

#en-chemin {position: fixed;bottom: 0;padding: var(--margin) var(--margin) calc(var(--margin) * 2) var(--margin);left: 0;z-index: 300;text-align: center;width: 100%;display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background-color: #fff;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;}
	
#en-chemin a#startBtn {background: var(--primary-color);display: inline-block;color: #fff;font-size: var(--fontsize);position: relative;overflow: hidden;border-radius: 5px;padding: var(--margin) var(--margin) var(--margin) 0;width: 100%;
}

#en-chemin a#startBtn .icon {width: 56px;aspect-ratio: 1;overflow: hidden;background: url('../images/icons-hyper/arrow.svg') 0 0 / cover no-repeat;position: absolute;right: 10px;top: 50%;translate: 0 -50%; scale: .8; opacity: 100%; filter: invert(); scale: .75;}

#continuePath {background: #fff; border: 1px solid var(--primary-color); display: inline-block;color: var(--primary-color);font-size: var(--fontsize);position: relative;overflow: hidden;border-radius: 5px;padding: var(--margin) var(--margin) var(--margin) var(--margin);width: 100%;	box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
flex-shrink: 2;}


#modalBtns {display: grid;grid-template-columns: repeat(2, 1fr);justify-content: space-around;align-items: center;margin-top: 10px;}
#modalBtns>div {text-align: center;}
#modalBtns button {background-color: var(--primary-color);color: #fff;padding: 6px var(--margin);}

#info-path-artworks, #panel-info {position: absolute;bottom: 0;background: #fff;z-index: 10000;padding-bottom: 20px;width: 100%;overflow: initial;border-top: 1px solid #000;}

.return-to-path {background: var(--primary-color) url('../images/icons-hyper/backToPath3-white.svg') 0 0px / cover no-repeat;display: block;height: 60px;width: 60px;text-indent: -9999px;overflow: hidden;border-radius: 50%;}
.return-to-paths-page {background: var(--primary-color) url('../images/icons-hyper/pathExit3-white.svg') 0 0px / cover no-repeat;display: block;height: 60px;width: 60px;text-indent: -9999px;overflow: hidden;border-radius: 50%;}

.artworks-path {padding-top: 30px;padding-bottom: calc(var(--lineHeight) * 3); border-top: 1px solid var(--light-grey);}
.artworks-path h2 {margin-bottom: 30px;}

.img-list li + li {margin-top: calc(var(--lineHeight) * .75);}
.img-list li a {display: block;color: #000;}
.img-list li a .cover {position: relative;aspect-ratio: 1.77;overflow: clip;margin-bottom: 8px;}
.img-list li a .cover img {width: 100%;height: auto;position: absolute;top: 50%;transform: translateY(-50%);transition: transform 800ms ease-in-out;}
@media(hover) {
	.img-list li:hover, .img-list li.hovered {background: var(--light-grey);}
	.img-list li a:hover .cover img {transform: translateY(-50%) scale(1.2);}
	.img-list li a:hover p {color: var(--primary-color);}
}


.img-list li > a{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
}

.img-list li .number-wrapper{ 
	width: calc(var(--lineHeight) * 1.25);
	height: 100%;
}

.img-list li .number{ 
	background-color: rgb(245, 245, 245);
	display: flex;
	justify-content: center;
	align-items: center;
	width: calc(var(--lineHeight) * 1.25);
	height: calc(var(--lineHeight) * 1.25);
	border-radius: 50%;
	font-size: calc(var(--fontSize) * .9);
	scale: 75%;
}

.img-list li .text-wrapper {
	padding-left: calc(var(--lineHeight) * .25);
	padding-top: calc(var(--fontSize) * .15);
}

.img-list li .text-wrapper:hover {
	color: var(--primary-color);
}







/**---Help Page---------------------*/
.qna {padding-block: 30px 60px;}
.qna + .qna {border-top: 1px solid hsl(0, 0%, 70%);;}

/**---Post Page---------------------*/
#posts {padding-bottom: 50px;}
.post .flex {display: flex;gap: 30px;}
.post img {height: auto;}
.post + .post {margin-top: 25px;padding-top: 25px;border-top: 1px solid var(--mid-grey);}
.post .short-description, .post .date {color: #000;}
.post > a.readmore {color: var(--primary-color);padding-right: 16px;position: relative;}
.post > a.readmore::after {content: '';background: url('../images/icons-hyper/arrow.svg') 0 0 / cover no-repeat;position: absolute;height: 100%;aspect-ratio: 1;}

@media screen and (width > 500px) {
	body {background-color: transparent;}
	.mobile {max-width: none;margin: auto;}
	.dod {display: block;}
	.dom, #splashscreen {display: none;}

	/**---Layout---*/
	.wrapper {padding-inline: 10vw; max-width: 1250px;margin:auto;}
	.wrapper-wide {padding-inline: calc(var(--gutter-width) * 2); margin:auto;} /** Delete this one and use clamp for texts? **/
	.clamp {max-width: 1250px; margin: auto;}

	#standalone-map {padding-inline: 10vw;}
	.path-list-intro .text-content {padding-inline: 25% 6%;}

	/**---Layout---*/
	#standalone-map {aspect-ratio: 2;}
	#standalone-map {height: auto;}

	/**---Header---*/
	header {display: flex;justify-content: space-between;padding-block: var(--margin-top2) var(--margin);padding-inline: var(--margin-top2);position: sticky;top: 0;z-index: 10001;background-color: hsla(0, 0%, 90%, 0.5);}
	header ul {display: flex;gap: var(--margin)}
	header li {margin-bottom: 0;}
	header a {color: #000000;}
	header a:hover {color: var(--primary-color);}

	header.dark {background-color: rgba(255, 255, 255, .95);}
	header.dark a {color: #222020;}
	header.dark a:hover {color: var(--primary-color);}

	/**---Footer-----*/
	footer {background-color: #000000;padding: calc(var(--lineHeight) * 1.6) var(--margin-top2) calc(var(--lineHeight) * 1.6) var(--margin-top2); padding-bottom: var(--height8); padding-top: var(--height4)}
	footer nav ul {display: grid;grid-template-columns: repeat(2, 1fr);gap: var(--margin);}
	footer nav li {border-bottom: 1px solid;padding-bottom: 20px;}
	footer nav li + li {border-top: none;}

	#social_networks {border-top: 0;border-bottom: 1px solid;margin-bottom: var(--margin-top2);justify-content: flex-start}
	#social_networks a {width: calc(var(--margin-top1) * 1.4);height: calc(var(--margin-top1) * 1.4);}

	.uivdg, .vdg {width: 16%;}

	/**---HomePage---*/
	/* #home {background-color: #ffffff;} */
	.hy {margin-right: 0;}
	.per {margin-right: .08em;}
	#swiper-slave {display: none;}
	#untouchable {height: auto;}
	#untouchable .over-swiper {background-color: transparent;display: grid;grid-template-columns: 30% 70%;position: static;margin-inline: var(--margin-top2);align-items: end;padding-block: var(--margin-top2);}
	#untouchable .over-swiper .titlewrap, #untouchable .over-swiper .subtitlewrap {position: static;}
	#untouchable .over-swiper .titlewrap {/*width: calc(100% - (2 * var(--margin-top2)));*/order: 1;width: auto;}
	#untouchable .over-swiper .subtitlewrap {order: -1;margin: 0;}
	/* #touchable {position: static;} */
	#touchable > h3.dod {padding-bottom: var(--margin);border-bottom: 1px solid #989898;margin-bottom: var(--margin-top1);}
	#touchable .desktop h5 {padding-block: 0;}
	.desktop .post .date {color: #fff;}

	.p5Canvas {bottom: none;top: 0;}

	
	#swiper-master {position: relative;z-index: 1000;}
	#swiper-master .swiper-wrapper {display: grid;grid-template-columns: repeat(2, 1fr);gap: var(--margin);}
	#swiper-master .swiper-slide {width: 100% !important;height: auto;aspect-ratio: 2;}
	#swiper-master .swiper-slide.invisible-slide {display: none;}

	.grid2col {display: grid;grid-template-columns: repeat(2, 1fr);gap: var(--margin);}

	/**---Constellations---*/
	.map-desktop-content {margin-bottom: var(--margin-top1);display: grid;grid-template-columns: auto 128px;gap: var(--margin-top1);align-items: start;}

	/**---Collections---*/
	.paths-list {display: grid;grid-template-columns: repeat(3, 1fr);gap: var(--lineHeight); 
		/* margin-bottom: 60px; */
	}
	.paths-list li + li {margin: 0;}
	.paths-list .cover::after {--_size: 18%;width: var(--_size);aspect-ratio: 1;height: auto;background-size: cover;}
	@media (hover) {.paths-list a:hover .cover::after {background-position: 0 100%;} }
	
	@media screen and (width < 1250px) {
		.paths-list {grid-template-columns: repeat(2, 1fr);}
		}

	.cover, #artwork-cover {aspect-ratio: 2.5;}
	.cover img, #artwork-cover img {width: 100%;height: calc(100% - 35px);object-fit: cover;object-position: 50% 50%;}

	.flex2col {display: grid;padding-block: 30px;grid-template-columns: 66% 33%;gap: 2%;padding-inline: 10vw;--header-height: 100px;}
	#path-map {aspect-ratio: auto;position: sticky;top: var(--header-height);height: calc(100vh - var(--header-height));}
	#artworks-path-list h2 {margin-bottom: var(--lineHeight);}
	#artworks-path-list .img-list li a .cover {aspect-ratio: 1.77;}
	#artworks-path-list .img-list li a .cover img {position: static;object-fit: cover;height: 100%;transform: translateY(0) scale(1)}
	#artworks-path-list .img-list li a:hover .cover img {transform: translateY(0) scale(1.2)}

	/* #desktop .post {} */
	.geo-spot {transition: width 1s ease-in-out, height 1s ease-in-out;}
}