*, *::before, *::after {box-sizing: border-box;margin: 0;padding: 0;}
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 {
  --red: #ef4346;
  --mid-grey: #939597;
  --light-grey: #f3f3f3;
}

/**---Fonts------------------------*/
@font-face {
  font-family: 'IndivisibleF-Medium';
  font-weight: normal;
  src:  url('../fonts/IndivisibleFv2/woff/IndivisibleF-Medium.woff') format("woff"),
        url('../fonts/IndivisibleFv2/woff/IndivisibleF-Medium.woff2') format("woff2"),
        url('../fonts/IndivisibleFv2/otf/IndivisibleF-Medium.otf') format("opentype");
}
@font-face {
  font-family: 'IndivisibleF-MediumItalic';
  font-weight: normal;
  src:  url('../fonts/IndivisibleFv2/woff/IndivisibleF-MediumItalic.woff') format("woff"),
        url('../fonts/IndivisibleFv2/woff/IndivisibleF-MediumItalic.woff2') format("woff2"),
        url('../fonts/IndivisibleFv2/otf/IndivisibleF-MediumItalic.otf') format("opentype");
}
@font-face {
  font-family: 'IndivisibleF-Bold';
  font-weight: normal;
  src:  url('../fonts/IndivisibleFv2/woff/IndivisibleF-Bold.woff') format("woff"),
        url('../fonts/IndivisibleFv2/woff/IndivisibleF-Bold.woff2') format("woff2"),
        url('../fonts/IndivisibleFv2/otf/IndivisibleF-Bold.otf') format("opentype");
}
@font-face {
  font-family: 'IndivisibleF-BoldItalic';
  font-weight: normal;
  src:  url('../fonts/IndivisibleFv2/woff/IndivisibleF-BoldItalic.woff') format("woff"),
        url('../fonts/IndivisibleFv2/woff/IndivisibleF-BoldItalic.woff2') format("woff2"),
        url('../fonts/IndivisibleFv2/otf/IndivisibleF-BoldItalic.otf') format("opentype");
}

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

.mobile {max-width: 500px;margin: 0 auto;position: relative;}

main {min-height: 100vh;}
#map-page {min-height: 100svh;}

/* 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-right {text-align: right;}
.padT60 {padding-top: 60px;}
.hidden {display: none;}
.grid {display: grid;}
.mid-grey-col {color: var(--mid-grey);}

/**---Layout------------------------*/
.wrapper {padding-inline: var(--margin); overflow: hidden;}
.path-list-intro {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;}

/* #grid-desktop {display: grid;grid-template-columns: 100vh 1fr;} */

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

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

/**---Return Btn--------------------*/
.return-to {display: block;width: 48px;height: 48px;;background: hsla(0, 0%, 100%, 0.3) url('../images/icons-black/close.svg') 0 0 / 48px 144px no-repeat;text-indent: -9999px;position: fixed;right: 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) {
  .return-to:hover {background-position: 0 -48px;}
}
.return-to:focus, .return-to:active {background-position: 0 -96px;}

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

/**---SplashScreen------------------*/


#splashscreen {
  position: fixed;
  z-index: 10000;
  inset: 0;
  background: #fff;
  color: #000;
}

/* #splashscreen h1 {
background-color: none !important;
mix-blend-mode: multiply;
} */

#splashscreen .visu {
  width: 100%;
  height: calc(50vh);
  /* float: right; */
  position: fixed;
  margin-top: 50vh;
  bottom: 0;
  /* margin-bottom: var(--margin-top2);  */
  object-fit: cover; 
  /* margin-top: calc(var(--margin) + var(--width3) / 2) */
}

#splashscreen #wrapped {
  position: absolute;
  margin-left: var(--margin); 
  /* bottom: calc(var(--margin) + 15vh);  */
  padding-right: var(--margin); 
  padding-top: var(--margin)}

#splashscreen #wrapped h1 {
  font-size: calc(var(--fontSize) * 3); 
  line-height: calc(var(--fontSize) * 2.75);
  mix-blend-mode: multiply;
}

#splashscreen .splash-logo {
  position: fixed;
  width: 45vw;
  bottom: 53vh;
  right: 5vw;
  object-fit: cover;
}


@media only screen and (min-width: 568px) { 
  #splashscreen {display: none;}
}


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

.loadAnim{
	/* background-color: red; */
	display: flex;
	flex-direction: column;
	position: fixed;
	width: 100%;
	bottom: 37svh;
	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%, 100%); opacity: .8;}
	50% {color: hsl(0, 0%, 100%); opacity: 0;}
	100% {color: hsl(0, 0%, 100%); 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 #ffffff;
	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-intro h1 {width: 75%;}
#intro {margin-top: var(--margin-top2);padding-top: var(--margin-top1);border-top: 1px solid var(--light-grey);overflow: hidden;}
#intro .text-content {width: 75%;float: right;}
.text-content p img {height: auto;}
h1 + .text-content {margin-top: 30px;}
#home-intro .logo {width: 50%;}

#focus {padding-top: 15px;border-top: 1px solid var(--light-grey);}
#focus h2 {margin-bottom: var(--lineHeight);}
#focus a {display: block;}
#focus a img {height: auto;}
#focus a span {display: block;color: #000;}

/**---Nav--------------------------*/
main nav {margin-top: var(--margin-top1);}
main nav>ul>li {padding-block: var(--margin-top1);margin-block: 0;}
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;}
main nav>ul>li#search {padding-bottom: 0;}
main nav>ul>li .title-link {display: block;position: relative;color: #000;margin-bottom: 0;}
main .from-footer::after {content: '';width: 40px;height: 40px;position: absolute;right: 0;top: -6px;background-position: 0 0;background-size: 40px 120px;background-repeat: no-repeat;background-image: url('../images/icons-black/goRight.svg');}
@media (hover: hover) {main .from-footer:hover::after {background-position: 0 -40px;}}
main .from-footer:focus::after, .from-footer:active::after  {background-position: 0 -80px;}

/**---Footer-----------------------*/
footer {background-color: #000;color: #fff;padding: 30px 20px 200px;margin-top: 50px;}
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;color: #fff;}
#social_networks, #about-social-network {display: flex;gap: 15px;justify-content: center;align-items: center;padding-block: 30px;border-top: 1px solid #fff;}
#social_networks a, #about-social-network a {display: block;width: 30px;height: 30px;background-position: 0 0;background-size: cover;background-repeat: no-repeat;text-indent: -9999px;}
#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');}

#about-social-network .facebook {background-image: url('../images/socials/facebook-m.svg');filter: invert(1);}
#about-social-network .instagram {background-image: url('../images/socials/instagram-m.svg');filter: invert(1);}
#about-social-network .youtube {background-image: url('../images/socials/youtube-m.svg');filter: invert(1);}
#about-social-network .fmac {background-image: url('../images/icons-black/FMAC_Logo_Pastille_Black.svg');}

.vdg-logos {display: flex;justify-content: space-between;align-items: center; flex-direction: row-reverse;}
.uivdg {width: 90px;}
.vdg {width: 200px;}

/**---Swiper-----------------------*/
#to-paths .swiper, #video-gallery .swiper {width: calc(100% + var(--margin));padding-bottom: 34px !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(--red);}
#to-paths .swiper-pagination-bullets, #video-gallery .swiper-pagination-bullets {bottom: var(--lineHeight);}

/**---Map--------------------------*/
#home-map {display: block;aspect-ratio: 1.8;/*width: 100vw;margin-left: calc(var(--margin) * -1);*/position: relative;}
#home-map::after {content: '';position: absolute;top: 50%;left: 50%;width: 45%;aspect-ratio: 1;background: #fff url('../images/icons-black/backToPath.svg') 0 center / cover no-repeat;border-radius: 50%;transform: translate(-50%, -50%);border: 20px solid #fff;z-index: 1000;}
#home-map:hover::after {background: #fff url('../images/icons-red/backToPath.svg') 0 center / cover no-repeat;}
#home-map > .map {pointer-events: none;}
#artworkMap .map-view {height: 50vh;}
#standalone-map {--height-size: 112px;height: calc(100svh - var(--height-size));}
#info-panel {padding-bottom: var(--margin);position: absolute;bottom: 0;background-color: #fff;z-index: 100;width: 100%;}
#path-map {aspect-ratio: 1;}
#path-map-active {--height-size: 112px;height: calc(100svh - var(--height-size));}
.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;}

/**---GeoMarker--------------------*/
.geo-spot {position: absolute;width: 48px;height: 48px;cursor: pointer;transition: width 1s ease-in-out, height 1s ease-in-out;}
.geo-spot.circle {border-radius: 50%;}
.geo-spot.next {z-index: 20;width: 72px;height: 72px;animation: pulse-anim 2s infinite;}

.geo-spot .border {filter: brightness(0) invert(1);}
.geo-spot.next .border {filter: brightness(0) invert(1);}
.geo-spot[data-interactive="true"]:hover .border, .geo-spot.selected .border {filter: invert(0)}
.geo-spot.big, .geo-spot:hover {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}
.geo-spot .smallIcon {position: absolute;top: 0; left: 0;width: 48px;height: 48px;}
.geo-spot.big .smallIcon, .geo-spot:hover .smallIcon {width: 96px;height: 96px;}
.geo-spot.big .border {filter: brightness(0);}
.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');}

.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: 120px;}

/**---Search-----------------------*/
#fake-input {position: relative;height: 40px;border: 1px solid var(--red);}
#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-grey.svg') 0 0 / cover no-repeat;top: calc(50% - 15px);left: 10px;}
search input[type="search"] {border: 1px solid var(--mid-grey);padding: 10px 20px 10px 40px;font-size: 16px;width: 100%;border-left: none;border-right: none;outline: none;}
search input:focus[type="search"] {border: 2px solid var(--mid-grey);outline: none;border-left: none;border-right: none;}

/**---Search List---------------------*/
.search-list {margin: 0 0 var(--margin-top1);}
.search-list li {margin: 0;}
.search-list li + li {margin-top: 8px;}
.search-list li a {display: flex;gap: 20px;flex-wrap: nowrap;align-items: center;color: #000;}
.search-list .push {width: 48px;}
.search-list .cover {width: 48px;height: 48px;overflow: hidden;flex: 0 0 48px;}
.search-list .cover img {width: 100%;height: 100%;object-fit: cover;}
.search-list .artist-name {color: #77787b;font-size: 12px;}

/* .artworks-list .cover {border-radius: 50%;} */
.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: start;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: calc(var(--fontSize) * .75); margin-top: calc(var(--lineHeight) * -.10);; display: block;}

.artists-list {}
.artists-list li {padding-block: 3px;}
.artists-list li + li {border-top: 1px solid var(--light-grey);}

/**---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%;opacity: 0;}
#artwork-cover img.loaded {opacity: 1;}

.block-info + .block-info {margin-top: var(--margin);}
.artist-info h2{margin-top:var(--margin);}
.denomination {margin-top:calc(var(--lineHeight) * 2);}

.bordered {border-top: 1px solid var(--light-grey);padding-block: calc(var(--lineHeight) * 2);}
.bordered h2 {margin-bottom: calc(var(--lineHeight) * 2);}
.bordered .text-content p {margin-top: var(--lineHeight);}



.portrait {aspect-ratio: 1;}
.portrait img {object-fit: cover;}


.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);--plyr-control-icon-size: 24px;position: fixed;bottom: 0;left: 0;width: 100%;z-index: 10000;}

/* .plyr--audio .plyr__control:focus-visible, .plyr--audio .plyr__control:hover, .plyr--audio .plyr__control[aria-expanded=true] {border-radius: 50%;} */

#audio-gallery {--plyr-audio-controls-background: hsla(0, 0%, 100%, 0.3);--plyr-control-icon-size: 48px;}
.audioList {border-top: 1px solid var(--light-grey);border-bottom: 1px solid var(--light-grey);}
.audio-bloc {padding-block: 8px;}
.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-black/hasAudio.svg') 0 0 / cover no-repeat;}

.audiotrack {--blur: 6px;--brightness: 85%;backdrop-filter: blur(var(--blur)) brightness(var(--brightness));-webkit-backdrop-filter: blur(var(--blur)) brightness(var(--brightness));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-black/close.svg') 0 0 / cover no-repeat;width: var(--size);height: var(--size);}
.closeAudio img {pointer-events: none;}

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

#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-red/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;}
#video-gallery .video_thumbnail {position: relative;--size: 40px;width: 100%;aspect-ratio: 16/9;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;}


.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: calc(100% - 40px);width: calc(100% - 40px);position: absolute;box-shadow: 0px 0px 30px rgba(0, 0, 0, .1);object-fit: contain;}

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

#swiperGallery .swiper-button-close,
#swiperGallery .swiper-button-prev, 
#swiperGallery .swiper-button-next  {display: block;width: 48px;height: 48px;text-indent: -9999px;position: fixed;z-index: 1;cursor: pointer;filter: drop-shadow(0px 3px 2px rgba(0, 0, 0, .4));}

#swiperGallery .swiper-button-close {background: url('../images/icons-white/close.svg') 0 0 / 48px 144px no-repeat;left: var(--margin);top: var(--margin);}

#swiperGallery .swiper-button-prev {background: url('../images/icons-white/goLeft.svg') 0 0 / 48px 144px no-repeat;}
#swiperGallery .swiper-button-next {background: url('../images/icons-white/goRight.svg') 0 0 / 48px 144px no-repeat;}
@media (hover: hover) {
	#swiperGallery .swiper-button-close:hover,
	#swiperGallery .swiper-button-prev:hover, 
	#swiperGallery .swiper-button-next:hover {background-position: 0 -48px;}
}
.swiper-button-close:focus, .swiper-button-close:active {background-position: 0 -96px;}

/**---Paths------------------------*/
.cover {/*aspect-ratio: 4;*/overflow: hidden;position: relative;}
.cover img {height: auto;}
.smallImg {height: 100%;background-size: cover;background-position: center center;background-repeat: no-repeat;}
.paths-list li + li {margin-top: 40px;}
.paths-list .cover {position: relative;aspect-ratio: 2.07959;background-repeat: no-repeat;background-size: cover;-webkit-mask: url('../images/path-arrow.svg') 0 0 / cover no-repeat;mask: url('../images/path-arrow.svg') 0 0 / cover no-repeat;}
.paths-list .cover::after {content: '';height: 90px;width: 90px;position: absolute;bottom: 10px;left: 0;background: url('../images/icons-white/walkingman.svg') 0 0 / 90px 270px 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(--red)}
.paths-list a>span {display: block;}

/**---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 36px;background: url('../images/icons-black/totaldistance.svg') 0 0 no-repeat;}
#walking {padding: 12px 0 0 21px;background: url('../images/icons-black/walking.svg') 0 0 no-repeat;}
#cycling {padding: 12px 0 0 35px;background: url('../images/icons-black/cycling.svg') 0 0 no-repeat;}

#en-chemin {padding-block: 30px;position: fixed;bottom: 0;width: calc(100% - (2 * var(--margin)));z-index: 300;text-align: center;}
#en-chemin a#startBtn {display: block;background: url('../images/icons-red/start-path.svg') 0 center / 100% auto no-repeat;height: 80px;color: #fff;font-size: 24px;position: relative;display: flex;justify-content: center;align-items: center;padding-right: 10%;overflow: hidden;}
#en-chemin a#startBtn .icon {width: 60px;aspect-ratio: 1;overflow: hidden;}
#en-chemin a#startBtn .icon img {width: 100%;height: auto;}
#continuePath {--blur: 10px;color: var(--red);display: inline-block;margin-top: var(--margin);background-color: rgba(255, 255, 255, 0.6);padding: 5px 7px;/* box-shadow: 0px 0px 6px 6px rgba(255, 255, 255, 0.8); */border-radius: 6px;backdrop-filter: blur(var(--blur));-webkit-backdrop-filter: blur(var(--blur));}

#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(--red);color: #fff;padding: 6px var(--margin);}

/* #info-path-artworks {position: absolute;bottom: 0;background: #fff;z-index: 100;padding-bottom: 20px;width: 100%;} */

.return-to-path {background: url('../images/icons-red/backToPath.svg') 0 -120px / cover no-repeat;display: block;height: 60px;width: 60px;text-indent: -9999px;overflow: hidden;}
.return-to-paths-page {background: url('../images/icons-red/pathExit.svg') 0 -120px / cover no-repeat;display: block;height: 60px;width: 60px;text-indent: -9999px;overflow: hidden;}

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

.img-list li + li {margin-top: 40px;}
.img-list li a {display: block;color: #000;}
.img-list li a .cover {position: relative;aspect-ratio: 1.7;overflow: clip;margin-bottom: 8px;}
.img-list li a .cover img {height: auto;position: absolute;top: 50%;transform: translateY(-50%);transition: transform 800ms ease-in-out;}
.img-list li a:hover .cover img {transform: translateY(-50%) scale(1.2);}
.img-list li a:hover p {color: var(--red);}

/**---Help Page---------------------*/
.qna {padding-block: 30px 60px;}
.qna + .qna {border-top: 1px solid var(--light-grey);}
.text-content ol {list-style: inside decimal;}

@media (min-width: 500px) {
	main {min-height: auto;}
	#grid-desktop {display: grid;grid-template-columns: 60vw 1fr;height: 100vh;}
	#content-desktop {height: 100vh;overflow-y: auto;box-shadow: 0px 7px 29px rgba(0, 0, 0, .2);z-index: 1;}
	footer {padding-bottom: 30px;}
	.geo-spot.pulse {animation: pulse-anim 2s infinite;}
}