@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,700;1,500;1,700&display=swap');
/*@import url('https://fonts.googleapis.com/css2?family=Homemade+Apple&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding:wght@400;700&display=swap');


html, body {
  margin: 0;
  padding: 0;
    font-family: "Lato", sans-serif;font-family: 'Nanum Gothic Coding', monospace;
  color: #333; background:#000;
  -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
body *{ box-sizing: border-box}

a{ text-decoration: none}
/*GESTIONE FONT*/
h1,h2,h3,.chapter-nav li span{/*font-family: 'Cormorant Garamond', serif;*/}
.alert, .route, .name-nav,  #logos, .map-legend {font-family: "Lato", sans-serif;}
.leaflet-popup-content, .intro h2{font-family: 'Nanum Gothic Coding', monospace;}
/*.diary-page {font-family: 'Homemade Apple', cursive;}*/

.row{ display: flex; flex-direction: row; flex-wrap: wrap; height: 100%; width: 100%;align-items: stretch;}
.row.reverse{ flex-direction: row-reverse}
.col{display: flex; align-content: center; align-items:center; position: relative }
.col.
.x20{ width: 20%}
.x30{ width: 30%}
.x40{ width: 40%}
.x50{ width: 50%}
.x60{ width: 60%}
.x70{ width: 70%}
.x80{ width: 80%}
.x90{ width: 90%}
.x100{ width: 100%}
.h-2{ height:200vh }
.h-15{ height:120vh }
.btn{ display: inline-block; text-decoration: none; background: none; font-weight: 800; color: #e10119; padding: 5px 0px; margin: 10px 0;}
.btn.marked{ background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 60%, rgb(255, 238, 153) 50%); background-size: 200% 0.6em; background-repeat: repeat-x; background-position: left -100% bottom 0.5em}
.btn.light{ color: #fff;}
.btn.dark{ color: #000}
.btn.skip{ position: absolute; bottom: 20px; right: 20px; background: #fff; padding: 10px 15px; z-index: 20; text-decoration: none}
section{height: 100vh; width: 100%; overflow: hidden; background: #000; position: relative }
.h-auto{ height: auto; overflow: visible }
.h-home{ height: auto; min-height: 100vh; padding-top: 300px}
.float-left{ float: left}
/*NAVIGATION*/
.main-nav{ position: fixed; z-index: 3000; top: 0; left: 0; height: 100px; width: 100%; display: flex; justify-content: space-between; align-items: center}
.bg-nav{ height: 100px; position: fixed; top: 0; left: 0; z-index: 20; background: rgba(0,0,0,0.5); width: 100%;
background: rgb(0,0,0);
background: linear-gradient(180deg, rgba(0,0,0,0.6) 19%, rgba(0,0,0,0) 100%);}
.right-nav{ display: flex; flex-direction: row; align-items: center; padding-right: 20px}
.toggle-megamenu{ display: block; width: 0px; overflow: hidden; position: relative; z-index: 200; opacity: 0; transition: all 0.5s ease-out}
.toggle-megamenu.active{ display: block; opacity: 1; width: 50px}
.navicon-line {width: 24px; width:100%;height: 1px; margin-bottom: 5px; background-color: #fff;}
.nav-toggle{ width: 30px; margin:0}
.close-window{ display: flex; width: 0; overflow: hidden; align-items: center; justify-content: flex-end; position: relative; z-index: 200; opacity: 0; color: #fff; font-size: 15px; transition: all 0.5s ease-out}
.close-window.active{opacity: 1; width: 100px }
.close-btn{ width: 30px; margin-left: 5px}

.logo-container{ position: relative; z-index: 100; display: flex; height: 100%; flex-wrap: wrap; flex-direction: row; align-items: center;transition: all 0.5s ease}
.logo-container img.ruota{ width: 90px; margin-left: -40px; cursor: pointer}
.logo-container img.ruota.active{ opacity: 1}
.logo-container img.logotipo{ margin-left: 10px;width: 0px; overflow: hidden; opacity: 0; transition: all 0.5s ease-out}
.logo-container img.logotipo.active{ width: 150px; opacity: 1}
.name-nav{ font-size: 1.2rem; color: #fff; font-weight: 800; padding: 0 0px; width: 0; overflow: hidden; position: relative;opacity: 0; transition: all 0.5s ease-out; white-space: nowrap; transition: all 0.5s ease}
.main-nav.home{ position: absolute; top: 10vh}
.home .logo-container{ height: 280px; max-width: 500px; margin: 0 auto 0 10vw ; margin-top: 0vh;}
.home .logo-container img.ruota{ width: 40%;}
.home .logo-container img.logotipo{ width: 60%; }

.name-nav.active{ width: 150px; opacity: 1; overflow: visible;padding: 0 10px; }
.name-nav a{ color: #fff}
.chapter-nav {position: absolute; z-index: 20; top: 30px; width: 600px; opacity: 0;overflow: hidden}
.chapter-nav ul{ margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; width:100%; max-width: 500px}
.chapter-nav li{ width: 100%}
.chapter-nav li a{background: none;font-size: 14px; letter-spacing: 0.2px; font-weight: 800; color: #fff; padding: 5px 0px; display: block}
.chapter-nav li span{ color: #e10119;}

.rotating-container:after{ content: ''; position: absolute; z-index: 100; top: 0; left: 0; width: 100%; height: 100vh; background: #000; opacity: 1; transition: all 1s ease-out}
.rotating-container.active:after{ opacity: 1; left: -150%}
.rotating-slider {transform: rotate(90deg); margin-left: 260px; position: relative; z-index: 10}
.rotating-slider *{ box-sizing: content-box}
.rotating-slider ul.slides li, ul.slides li{
    color: #fff; background: none
}
.rotating-slider ul.slides li.active-slide{ z-index: 200}
.rotating-slider .slides{ background: transparent url(images/ruota.svg) no-repeat center center; background-size: 30%}
.rotating-slider ul.slides li .inner{
    box-sizing: border-box;transform: rotate(-90deg);
    padding: 2em 2em 2em 2.5em;
    height: 100%;
    width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center
}
.rotating-slider h2{ font-size:2.5rem; margin: 0; position: relative}
.rotating-slider h2 span{ display: block; width: 30px; position: absolute; left: -30px; top:0.5em; color: #e10119; font-size: 0.6em}
.rotating-slider p{ font-size: 1rem; line-height: 1.6em; margin: 0}
.rotating-slider h2, .rotating-slider li p{ opacity: 0; width: 100%; transition: all 1s ease-out; text-align: left}
.rotating-slider .active-slide h2, .rotating-slider .active-slide  p{ opacity: 1}
.rotating-slider .previous-slide h2, .rotating-slider .next-slide h2{ opacity: 0}
.rotating-slider .active-slide  .progress{ opacity: 1}
.rotating-slider .active-slide  .route{ opacity: 1}
.rotating-slider ul.direction-controls li.left-arrow{ right:auto; left: 100%;margin-bottom: -50px; }
.rotating-slider ul.direction-controls li.right-arrow{  margin-top: -50px;}

.image-chapter .foto-fissa{ opacity: 0; transition: all 1s ease-out; top: -20px;  }
.image-chapter .foto-fissa.masked{mask-position:center right; -webkit-mask-position:center right; }
.image-chapter .foto-fissa.active{ opacity: 1; top: 0}
.foto-fissa:after{ content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 3; } 
.foto-fissa.no-layer:after{ background: rgba(0,0,0,0);} 

.text-chapter .foto-fissa{ opacity: 0; transition: all 1s ease-out; top: 20px; display: none   }
.text-chapter .foto-fissa.masked{-webkit-mask-size:contain;mask-size:contain; }
.text-chapter .foto-fissa.active{ opacity: 1; top: 0; } 

.image-header .foto-fissa{ opacity: 1; }
.image-header:after{ content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 3; display: none}

/*MEGAMENu*/
section.megamenu{ overflow: visible}
.megamenu-container{ padding: 40px; padding-top: 11vh}
.megamenu-container ul.slides{ padding-left: 0; display: flex; flex-wrap: wrap}
.megamenu-container ul.slides h2{ width: 100%; margin: 0; font-size: 1.8em}
.megamenu-container ul.slides h2 span{ font-size: 0.8em; color: #e10119}
.megamenu-container ul.slides h3{ width: 100%; margin: 0; font-size: 1.5em}
.megamenu-container ul.slides h3 a{ color: #fff}
.megamenu-container ul.slides h3 span{ font-size: 0.8em; color: #e10119}
.megamenu-container ul.slides li{ list-style: none; padding-left: 0; width: 33.3%; position: relative}
.megamenu-container ul.slides li ul{ width: 100%}
.megamenu-container ul.slides ul.social{ text-align: right}
.megamenu-container ul.slides ul.social li{ width: auto; font-size: 20px; display: inline-block; padding: 0 20px 0 10px}
.megamenu-container ul.slides ul.social li a{ color: #fff}
.megamenu-container .progress{ opacity: 1}
.megamenu-container ul.slides p{ font-size: 0.9em; line-height: 1.3em; width: 100%; max-width: 400px; margin-right: auto}
.megamenu-container ul.slides p a{ display: inline; text-decoration: none}
.megamenu-container ul.slides p a.btn{ display: inline-block; margin: 5px 0}
.megamenu-container .route{ opacity: 1}
.megamenu-container .route.big{ font-size: 0.85em}
.megamenu-container ul.slides li .inner{
    box-sizing: border-box;
    padding:20px;
    height: 100%;
    width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start
}
.megamenu-container .slides h2 a{ color: #fff} 
.megamenu-container ul.slides li:after{ transition: all 0.5s ease-in; content: ''; display: block; position: absolute; left: 0; top: 0; width: 0%; background: #000; height: 100%}
.is-animating .megamenu-container ul.slides li:after{ content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; background: #000; height: 100%}

/*ScrollBarNav*/
.bar{ position: fixed; top: -3px; height: 2px; width: 100%;  background: rgba(0,0,0,0.8); margin-left: -0px; z-index: 20000; font-family: sans-serif;  transition: all 1s ease-out;}
.bar.active{ top: 0}
.percent{ position: fixed; height: 2px; width: 0%; background: #333; border-bottom: 2px solid #e10119; box-sizing: border-box}
.percent span{ font-size: 10px; display: block; position: absolute; bottom: 0; height: 30px; width: 30px; line-height: 30px; background: #fff; text-align: center; border-radius: 50%; left: -35px}

/*ICON LIST*/
.icon-list{ padding: 10px 0;}
.icon-list ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.icon-list ul li{ display: flex; width: 25%; align-content: center; align-items: center}
.icon{ width: 30px; color: #fff; font-size: 30px; display: flex}
.icon img{ width: 90%;}
.icon-text{ color: #fff; font-size: 0.9em; padding: 5px 5px; font-weight: 800}

/*FOTO*/
.foto-fissa{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; -webkit-background-size:cover; background-size: cover; background-repeat: no-repeat; background-position: center right 20%; box-sizing: border-box; transition: all 1s ease }
.is-animating header .foto-fissa{}
.foto-fissa.bg-fixed{ background-position: 50% 0; background-size: cover; transform: translate3d(0,0,0); transition: none}
.h-2 .foto-fissa.bg-fixed{background-size: 300vh; }
.h-2 .foto-fissa{ height: 100%; background-size: cover}
.h-2 .foto-fissa:nth-child(2){ top: auto; bottom: 0}
.h-2 .foto-fissa:after{background: rgb(0,0,0);
background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,1) 93%);}
.dida{ max-width: 190px; z-index: 20; padding: 20px 30px}
.dida p{ font-size: 1em; color: #fff; line-height: 1.3em}
.hidden{ opacity: 0 }
.inView .hidden{ opacity: 1}
.foto-fissa.masked, .masked{mask-image: url("images/bg-text.svg");
    mask-position: center;
    mask-size:cover;
    mask-repeat: no-repeat;
    -webkit-mask-image: url("images/bg-text.svg");
    -webkit-mask-position: center;
    -webkit-mask-size:cover;
    -webkit-mask-repeat: no-repeat;}
/*PROGRESS*/
.progress{ display: flex; align-items: center; padding: 10px 0; margin: 5px 0;width: 100%; margin-right: auto; max-width: 200px; opacity: 0;  transition: all 1s ease-out; position: relative }
.progress-bar{ display: block; flex-grow: 1; background: #333; height: 3px; position: relative}
.progress-completed{ position: absolute; top: 0; left: 0; background: #fff; display: block; height: 3px; transition: all 2s ease}
.link-bar{ display: block; width: 100%}

/*ROUTE*/
.route{ color: #fff; display: flex; flex-wrap: wrap; font-size: 10px; text-transform: uppercase; align-items: center; margin-right: auto; padding: 10px 0; opacity: 0; transition: all 1s ease-out; }
.route .from, .route .to{ display: flex; align-items: center;}
.route i{ display: block; padding: 2px; font-size: 9px}
.route .from i, .route .to i{color: #e10119; font-size: 1.5em}
.route i.divider{ padding: 0 10px}

/*TEXT*/
.text-link{ text-decoration: underline; font-weight: 800; color: #e10119}
.text-right{ text-align: right !important}
.text-center{ text-align: center !important}
.text-left{ text-align: left !important}
.text-container{ position: relative; z-index: 30; align-self: flex-end; padding: 10vh 5vw 10vh 5vw; max-width: 900px}
.text-container h1{ font-size:4.5em; margin: 0; position: relative; color: #fff; line-height: 1em}
.text-container p{ font-size: 1.4em; line-height: 1.6em; margin: 0; color: #fff;  max-width: 500px}
.text-container ul{ margin: 10px 0}
.text-container li{ color: #fff; font-size: 1.2em; line-height: 1.6em}
.text-container h1 span{ display: block; width: 1em; position: absolute; left: -1em; color: #e10119; text-align: right; font-size: 0.6em; top: 0.21em}
.text-container h2{ font-size:3rem; margin: 20px 0; position: relative; color: #fff; line-height: 1.1em}
.text-container h2 span{ font-size: 0.8em; display: block; width: 1.1em; position: absolute; left: -1.2em; text-align: right; color: #e10119; bottom: -0.08em;  font-size: 16px; left: -40px; }
.text-container h2 span{ background: #e10119; background: #000; color: #fff; width: auto; padding: 0 5px; left: -50px;
mask-image: url("images/mask-circle.svg");
    mask-position: center;
    mask-size:contain;
    mask-repeat: no-repeat;
    -webkit-mask-image: url("images/mask-circle.svg");
    -webkit-mask-position: center;
    -webkit-mask-size:contain;
    -webkit-mask-repeat: no-repeat;}
.text-container h2 a{ color: #e10119}
.text-container h3{ font-size:2rem; margin: 20px 0; position: relative; color: #fff; line-height: 1.1em}
.text-container ul.interest{ list-style: none; margin: 0 0 20px 0; padding: 0}
.text-container ul.interest li{ padding-bottom: 5px}
.text-container ul.interest a{ display: flex; width: 100%; color: #fff; justify-content: left; align-items: center}
.text-container ul.interest a:hover{ color:#e10119;   }
.text-container ul.interest img{ height: 50px; margin-right: 10px;
mask-image: url("images/mask-circle.svg");
    mask-position: center;
    mask-size:contain;
    mask-repeat: no-repeat;
    -webkit-mask-image: url("images/mask-circle.svg");
    -webkit-mask-position: center;
    -webkit-mask-size:contain;
    -webkit-mask-repeat: no-repeat;}

header .image-chapter:after{ display: block}
header .image-chapter .foto-fissa{opacity: 1; }
header .progress{ opacity: 1; cursor: pointer; position: relative}
header .progress.continua:after, .progress.continua:after{ content: '► riprendi'; display: inline-block; position: absolute; top: 0em; line-height: 1em; right: -90px; color: #fff; font-size: 14px; text-transform: uppercase; background: rgba(0,0,0,0.5); padding: 5px 7px; border-radius: 5px; font-weight: 800 }
header .route{ opacity: 1}
header .text-container{ margin: 0 auto}
header .text-container h1{ font-size: 6em; font-size: 4em }
header .text-container p{ font-size: 1.6em }

/*TEXTONE*/
section.textone{ width: 100%; overflow: hidden; box-sizing: border-box; padding-right: 30%; display: flex; position: relative}
.textone .text-container p{ margin-bottom: 1em; font-size: 1em; max-width: 700px}
.text-container li{font-size: 1em;}
.textone .text-container{ align-self: center; /*background-image: url(images/bg-textxx.svg);*/ background-repeat: no-repeat; background-size: contain; background-position: center center; padding: 10vh 80px; border: 1px solid rgba(277,277,277,0.2); max-width: 900px; margin-left: 60px}
.textone .route{ opacity: 1; font-size: 12px}
.alert{ background: rgba(0,0,0,0.4); box-shadow: 0 0 20px rgba(0,0,0,0.2); color: #fff; font-size: 0.8em; padding: 15px; border-radius: 10px; margin-top: 20px; border: 0px solid rgba(277,277,277,0.1); }
.alert .btn{ margin-bottom: 0; margin-top: 0px; padding: 0 }
.alert hr{ height: 1px; margin: 0; border: 0; background: #fff; margin: 20px 0; opacity: 0.3}
.alert p{ overflow: hidden}
.alert p strong{ font-size: 1.15em }
.alert .icon{ float: left; padding-right: 10px}
.textone .text-container .alert p{ margin-bottom: 0.5em; font-size: 1.2em; max-width: 600px}

.is-animating > [data-barba='container'] {
  position: absolute; 
  width: 100%; min-height: 100vh; 
}
.is-animating > [data-barba='container']:first-child{ z-index: 200}

/*MAPPA*/
.map{ position: fixed; top: 0vh; right: -30%; z-index: 300; width: 30%; height: 100vh; background:none; padding: 10px 10px 10px 20px; padding-top: 10px; box-sizing: border-box; transition: all 0.3s ease-out}
.map:after{  content: ''; display: block; height: 100vh; width: 100%; position: absolute; top: 0; left: 0;
background: rgb(0,0,0);
background: linear-gradient(90deg, rgba(0,0,0,0) 29%, rgba(0,0,0,0.6) 100%);}
.map.opened{ right: 0}
.map.fullscreen{ width: 100%; padding-left: 70px}
.map.hidden{ opacity:0}
.map-container{ height: 100%; width: 100%; position: relative; box-sizing: border-box; box-shadow: 0 0 50px rgba(0,0,0,0.2)}
#map{ height: 100%; width: 100%; position: absolute; z-index: 20; top: 0; left: 0; box-shadow: 0 0 20px rgba(0,0,0,0.5)}

.map-container:before{ content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100px; background: #000; z-index: 21;
background: linear-gradient(0deg, rgba(0,0,0,0) 29%, rgba(0,0,0,0.6) 100%);}

.map-nav{ position: absolute; bottom: 0; left: -0px; width: 100%; padding: 5px 0; z-index: 20; display: flex; flex-direction: row; justify-content: space-between;background: rgb(0,0,0);
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);}
.map-nav-left{ padding-left: 5px; display: flex; transition: all 0.3s ease-out;}
.map-nav-right{ padding-right: 5px; display: flex}
.map-nav button, a.map-btn{ background: #fff; border: 0; border-radius: 50%; color: #000; font-size: 11px; display: flex; height: 40px; width: 40px; align-content: center; justify-content: center; align-items: center; transition: all 0.3s ease-out; box-shadow: 0 0 10px rgba(0,0,0,0.2)}
.map-nav-right button{ margin-left: 5px}
.map-nav button i{font-size: 20px;  }
.map-nav .map-nav-left{ margin-left: -90px;}
.opened .map-nav-left{margin-left: -60px;}
.map-nav .map-nav-left button{ overflow: hidden; width: 0px; opacity: 0; min-width: 0; padding: 0}
#openMap{ width: 40px; opacity: 1}
.opened #closeMap{ width: 40px; opacity: 1}
.opened #openMap{ width: 0px; opacity: 0 }
.leaflet-touch .leaflet-control-attribution{ display: none}
.map-legend{ position: absolute; color: #fff; top: 100px; right: 5px; width: 250px; padding: 5px 7px; z-index: 25; display: flex; flex-direction: column; background:#000;}
.leaflet-top{ top: 100px; z-index: 2300}
.map-legend .line{ font-size: 12px; display: flex; padding-bottom: 2px; flex-direction: row; justify-content: space-between; align-content: center; align-items: center}
.map-legend .line span{ display: block; width: 40px; height: 2px; border-color: #ccc; border-bottom: 2px solid #ccc;}
.map-legend .line.original span{  border-color: #fff; border-bottom-style: dashed}
.map-legend .line.alternative span{ border-color: #e10119}
.map-legend .wp{ width: 33.3%; width: 50%; padding: 5px 5px 5px 0; display: flex; align-items: center; flex-direction: row; font-size: 10px; text-align: left;}
.wp-container{ display: flex; flex-wrap: wrap; flex-direction: row; border-top: 1px solid #333; margin-top: 5px}
.map-legend .wp img{ width: 15px; margin-right: 3px}
.leaflet-touch .leaflet-bar a:last-child, .leaflet-touch .leaflet-bar a:first-child{ border-radius: 50%; line-height: 1em; display: flex; justify-content: center; align-items: center}
.leaflet-touch .leaflet-bar a{ line-height: 40px; width: 40px; height: 40px; margin-bottom: 3px}
.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar{ border-color:transparent}
.map path.gpx_current{ stroke-width:5; filter: drop-shadow( 0 0px 4px #057eff ); fill:none}
.map path.official{stroke-width:2; stroke-dasharray: 3;}
/*GALLERY*/
.gallery{ position: relative}
.gallery ul{ margin: 0; padding: 0; list-style: none;  height: 100%; padding: 8vh 11vw; box-sizing: border-box}
.gallery li{ height: 110%; width: 50%; float: left; position: relative; z-index: 10; box-shadow: 0 0 40px rgba(0,0,0,1); transition: all 0.5s ease; opacity: 0}
.gallery.reverse li{ float: right}
.gallery li:hover { z-index: 20}
.gallery li:hover .foto-fissa{ transform: scale(1.06); transform-origin: center; border-color: transparent; border-width: 0px; box-shadow: 0 0 20px rgba(0,0,0,01); z-index: 20}
.gallery li .foto-fissa{ border: 0px solid #000; transition: all 0.3s ease-out; z-index: 10}
.gallery li .foto-fissa:after{ background: rgba(0,0,0,0)}
.gallery .foto-fissa:after{background: rgb(0,0,0);
background: radial-gradient(circle, rgba(0,0,0,0.3) 6%, rgba(0,0,0,1) 74%);}
.gallery li:nth-child(2){ height: 50%; }
.gallery li:nth-child(3){ height: 50%;}
.gallery.inView  li{transform: translate(-5vw,-2vh);opacity: 1}
.gallery.inView  li:nth-child(2){opacity: 1 ; transform: translate(5vw,-0vh)}
.gallery.inView  li:nth-child(3){transform: translate(5vw,5vh);opacity: 1}
.gallery.reverse.inView  li{transform: translate(5vw,2vh);opacity: 1}
.gallery.reverse.inView  li:nth-child(2){ transform: translate(-5vw,-0vh);}
.gallery.reverse.inView  li:nth-child(3){ transform: translate(-5vw,2vh);}

.gallery li a{ display: block; width: 100%; height: 100%; position: relative}
.gallery .dida{ position: absolute; bottom: -20px; left: -20px; background: rgba(0,0,0,1)}
.gallery .dida.tl{ bottom: auto; right: auto; top: 10px; left: 10px}
.gallery .dida.tr{ bottom: auto; right: -20px; top: -20px; left: auto}
.gallery .dida.br{ bottom: -20px; right: -20px; top: auto; left: auto}



/*VIDEO*/
.video-js{ font-size: 20px; width: 100%; height: 100%}
.video-js .vjs-control-bar{ bottom: 10%; background-color: transparent; padding: 0 5%}
.vjs-poster{ background-size: cover}
.video-js .vjs-big-play-button{ height: 2em; width: 2em; margin-left: -1em; margin-top: -1em; font-size: 4em; border: 1px solid #fff; background: none; border-radius: 50%; top: 50%; left: 50%}
.vjs-icon-play:before, .video-js .vjs-play-control .vjs-icon-placeholder:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before{display: flex; align-items: center; justify-content: center; }
.videowall{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; object-fit: cover; opacity: 0.5}
.videowall:after{ content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 3; } 
.vjs-no-js{ padding-top: 40%}
.play-container{ min-height: 40vh; align-items: center}
.play-button{ display: block; width: 100px; margin: 0 auto; position: relative; z-index: 10; align-self: center}
.play-button img{ width: 100%; display: block }
.video-js .vjs-tech{ object-fit: cover}
section.videone{ padding: 0vh; box-sizing: border-box}
.videone .foto-fissa.masked{ transform: scale(0.9);
    mask-image: url("images/bg-text.svg");
    mask-position: center;
    mask-size:cover;
    mask-repeat: no-repeat;
    -webkit-mask-image: url("images/bg-text.svg");
    -webkit-mask-position: center;
    -webkit-mask-size:cover;
    -webkit-mask-repeat: no-repeat;
}
.videone .text-container{ align-self: center; margin: 0 auto}
.videone .text-container p{ max-width: 900px; max-width: 700px}
.videone .diary-page .text-container p{ max-width: 900px;}
.box-video{ width: 90%; max-width: 800px; position: relative; z-index: 22; height: 60%; margin: 0 auto}
.video-js-tile{ height: 100%; width: 100%}
.box-video .video-js { width: 100%; height: 100%}
.box-video .video-js .vjs-big-play-button{ font-size: 3em}

.videone.h-auto .text-container{ padding-top: 15vh; padding-bottom: 15vh; opacity: 0; transition: all 1.2s ease-out }
.videone.h-auto.inView .text-container{ opacity: 1 }

/*DIARY PAGE*/
.diary-page{ height: 80%; max-height: 700px; width: 66%; margin: 0 auto 0 40px; align-self: center}
.diary-pagexx{background-image: 
    linear-gradient(0deg, transparent 5em, rgba(255,0,0,.2) 0, transparent 5.1em), 
    linear-gradient(rgba(0,0,255,.3) 1px, transparent 0);
  background-size: 100% 2em; background-color: #333}
.diary-page .text-container{ padding-top: 2vh}
.diary-page h3{ font-size: 1.8em; align-self: flex-start; margin: 0 0 3vh 0;}
.diary-page h2{ margin-bottom: 5vh; font-size: 2.5rem}
span.diary-marker{ color: #000}
/*INTRO*/
.text-container.intro{ align-self: flex-end; margin: 0 auto 10vh 10vw; border-left: 0px solid #fff; max-width: 50%; padding: 0}
.text-container.intro h2{ font-size: 2em; max-width: none }
.text-container.intro p{ max-width: none; column-count: 2; font-size: 17px }
.text-container.intro p.btn-intro-container{  column-count: 1; font-size: 20px; padding-top: 20px }
.text-container.intro .btn{ display: inline-block; color: #000; background: #e10119; padding: 5px 30px; font-size: 1.2rem; margin-top: 20px}
#logos{ display: flex; flex-wrap: wrap; text-align: center; justify-content: center; margin-top: 10vh; position: relative; z-index: 10;  padding-bottom: 10vh}
#logos .logo-container{ color: #fff; margin-bottom: 10px; width: 15%; max-width: 160px; display: flex; align-items: center; justify-content: center; flex-direction: column; font-size: 13px}
#logos .logo-container a{ color: #fff}
#logos  p{ color: #fff; font-size: 1.1em; margin: 0; padding: 0; margin-top: 40px}
#logos .logo-container img{ height: 60px; width: 90%; object-fit: contain; margin-bottom: 5px }
#logos .logo-container.fesr{ max-width: 320px; width: 30%}
#logos .logo-container.fesr img{ height: 60px}
#logos  hr{ width: 100%; background-color: transparent; border: 0}
/* =Clip-path transition */
.video-enter {
    clip-path: circle(0%);
}
.video-enter-active {
    position: absolute;
    top: 0;
    z-index: 2;
}
.video-leave-active,
.video-enter-active {
    transition: all 3.75s ease;
}
.video-enter-to {
    clip-path: circle(75%);
}
.video-leave {
    opacity: 1;
}
.video-leave-to {
    opacity: 0;
}

/*BACK TO INDEX*/
.back-to-index{ display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; height: 70vh;}
.back-to-index .logo-container{ height: 50%}
.back-to-index .text-container{ text-align: center; box-sizing: border-box; align-self:  center; height: 130%; height: 110vh; margin-bottom: -30%; padding-top: 0px; padding-bottom: 20px; background: url(images/ruota.svg) no-repeat; background-position: center center; background-size: 50vh; transition: all ease-out 1s; transform: rotate(-180deg); opacity: 0}
.back-to-index.inView .text-container{ transform: rotate(0deg); opacity: 1}
.back-to-index .text-container h2{ margin-bottom: 5px}

/*DOCSPOT*/
header.docspot{ height: 90vh;  width: 95%; margin: 0 auto; padding-top: 10vh; padding-bottom: 5vh; }
header.docspot section{ height: 100%; width: 100%;  }
header.docspot .text-container{ padding-top: 10vh}
header.docspot .text-container h1{ font-size: 3em; margin-bottom: 0em; color: #e41f33;}
header.docspot .text-container h2{ font-size: 2em; margin-bottom: 0.5em; margin-top: 0;}
header.docspot .text-container p{ font-size: 1.1em}
header.docspot .foto-fissa{ left: 10px }
header.docspot .foto-fissa:after{background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 100%);}
header.docspot blockquote{ position: relative; margin-left: 0; padding-left: 50px; background: transparent url(images/quote.svg) no-repeat 5px 5px; background-size: 35px }
.docspot .icon-list ul li{ width: 90%; line-height: 1.2em; margin-bottom: 10px}
.docspot .icon-list ul li a{ color:#e41f33 }
.videone.docspot .play-container img{ width: 100%; height: auto; max-height: 500px; max-width: 500px; object-fit: cover; position: relative; z-index: 10;
    transition: all 0.4s ease-out; opacity: 0;
    mask-image: url("images/mask-circle.svg");
    mask-position: center;
    mask-size:contain;
    mask-repeat: no-repeat;
    -webkit-mask-image: url("images/mask-circle.svg");
    -webkit-mask-position: center;
    -webkit-mask-size:contain;
    -webkit-mask-repeat: no-repeat;
}
.videone.docspot.inView .play-container img{ opacity: 1;}
.videone.docspot .play-container{ justify-content: center; justify-content: flex-end; padding: 10vh 0}
.videone.docspot blockquote{ position: relative; margin-top: 30px; margin-bottom: 30px; margin-left: -50px; padding-left: 50px; background: transparent url(images/quote.svg) no-repeat 5px 5px; background-size: 35px }
.videone.docspot blockquote p{ font-style: italic; font-weight: 600  }
.videone.docspot blockquote small{ color: #e41f33; font-style:normal}
.arrow-container{ width: 100px; z-index: 30}
.docspot .text-container h3{ font-size: 1.8em; margin-bottom: 0.5em; margin-top: 1em; color: #e41f33}
.videone.docspot .arrow-container img{ width: 20px; transition: all 0.3s ease-out}
.videone.docspot.inView .arrow-container img{ width: 100%}
.videone.docspot.inView .arrow-container:hover img{ width: 80%; margin-right: 20%; transition: all 0.1s ease-out}
.videone.docspot .text-container{ padding-left: 20px}
.name-nav.docspot a{ padding-right: 5px; }
.name-nav.docspot { font-size: 1.7rem; width: 1px}
.name-nav.docspot.active { width: auto}
.videone.docspot ul li{ font-size: 1.4em}

/*EBOOK*/
header.ebook{ height: 100vh;  width: 95%; margin: 0 auto; padding-top: 10vh; padding-bottom: 5vh; }
header.ebook section{ height: 100%; width: 100%; overflow: visible  }
header.ebook .text-container{ padding-top: 0vh; align-self: center}
header.ebook .text-container h1{ font-size: 3em; margin-bottom: 0em; color: #e41f33;}
header.ebook .text-container h2{ font-size: 2em; margin-bottom: 0.5em; margin-top: 0;}
header.ebook .text-container p{ font-size: 1.1em}
img.cover{ width: 90%; margin: 0 auto;max-height: 700px; object-fit: contain}

.ebook .icon-list ul li{ width: 90%; line-height: 1.2em; margin-bottom: 10px}
.ebook .icon-list ul li a{ color:#e41f33 }
.name-nav.ebook a{ padding-right: 5px; }
.name-nav.ebook{ font-size: 1.7rem; width: 1px}
.name-nav.ebook.active { width: auto}

@media(min-width:1600px){
    
}
@media(max-width:1300px){
    html,body{ font-size: 14px}
}
@media(max-width:1200px){   
	}
@media(max-width:1024px){
    html,body{ font-size: 14px}
    .no-mobile{ display: none}
    .logo-container img.logotipo.active{ height: 30px; margin-left: 5px}
    .right-nav{ padding-right: 10px}
    .name-nav{ padding: 0}
    .rotating-slider{ margin-left: auto; transform: rotate(-0deg);  margin-bottom: 0}
    .rotating-slider ul.slides li .inner{ transform: rotate(-0deg);}
    .image-chapter .foto-fissa{ right: -60% }
    .rotating-slider ul.slides li .inner{ padding-left: 0; padding-right: 2em}
    .x40, .x50, .x60, .x70, .x30{ width: 100%}
    .row.reverse{ flex-direction: row}
    .image-chapter{ position: absolute; top: 0; left: 0; height: 100%; }
    .image-chapter:after{display: block;} 
    .rotating-slider h2 span{ font-size: 0.7em; width: 20px; left: -20px; bottom: 0}
    .rotating-slider ul.direction-controls li.left-arrow{transform: rotate(90deg); }
    .rotating-slider ul.direction-controls li.right-arrow{ transform: rotate(90deg);}
    
    /*TEXT*/
    .text-container h1{ font-size: 3rem}
    .text-container h2{ font-size: 2.5rem}
    header .text-container h1{ font-size: 3rem }
    .text-container h1 span{ width: 30px; left: -30px; font-size: 18px}
    .play-button{ margin-top: auto; width: 70px; opacity: 0.5}
    .row .col:nth-child(2) .play-button{ margin-top: 5px; margin-bottom: auto}
    header .text-container p, .text-container p, .dida p{ font-size: 1.1em}
    section.textone{ padding-right: 0}
    .textone .text-container{ padding: 40px}
    .textone .text-container p{ font-size: 1em}
    .icon-list ul li{ width: 33.3%}
    .videone.docspot ul li{ font-size: 1.1em}
    
    /*MAPPA*/
    .map{ width: 100%; padding: 2px; right: -100%; height: 40vh; top: auto; bottom: 0}
    .map.opened{ box-shadow: 0 0 40px rgba(0,0,0,0.9)}
    .map-nav{ padding: 10px 0}
    .map-legend{ top: 10px}
    .leaflet-top{ top: auto; bottom: 60px}
    .leaflet-left .leaflet-control{ margin-left: 8px}
    .map-nav .map-nav-left{ margin-left: -60px;}
    .opened .map-nav-left{margin-left: 5px;}
    .map.fullscreen{ width: 100%; height: 100vh; padding-left: 2px}
    .map.fullscreen .map-legend{ top: 90px}
    .map.fullscreen .map-container:before{ height: 100px}
    .map:after{background:#000}
    .leaflet-touch .leaflet-control-attribution{ display: none}
    .map-container:before{ height: 20px}
    
    /*FOTO*/
    .gallery{ height: auto}
    .gallery ul{ padding: 60px 20px; overflow: hidden; height: auto}
    .gallery li .foto-fissa{ border-width: 2px}
    .gallery li{ height: 70vh; width: 100%}
    .gallery li:nth-child(2), .gallery li:nth-child(3){ height: 50vh}
    .foto-fissa.bg-fixed{ background-position: 45% 0; }
    .gallery .dida.tl{ left: -20px; top: -20px}
    .gallery.inView li, .gallery.inView li:nth-child(2), .gallery.inView li:nth-child(3){ transform: translate(-0vw,-0vh)}
    .gallery.reverse.inView li, .gallery.reverse.inView li:nth-child(2), .gallery.reverse.inView li:nth-child(3){ transform: translate(-0vw,-0vh)}
    
    .gallery li{ height: 60vh}
    .gallery li:nth-child(2), .gallery li:nth-child(3){ height: 35vh}
    /*MEGAMENU*/
    .megamenu-container { padding-left: 50px}
    .megamenu-container ul.slides li{ width: 50%}
    
    .megamenu-container ul.slides{ margin-top: 0}
    .megamenu-container .progress{ margin: 0 auto 0 0}
    .megamenu-container ul.slides li .inner{ padding: 5px}
    .megamenu-container .route{ padding: 0px 0 10px 0}
    .megamenu-container ul.slides ul.social{ text-align: left; padding: 20px 0}
    
    /*BACK TO INDEX*/
    .back-to-index .text-container{ margin-bottom: -60%}
    
    
    .video-js{ font-size: 15px;}
    .videone .text-container{ padding: 20px 40px}
    .videone .foto-fissa.masked{ transform: scale(0.98)}
    .box-video{ height: 100%}
    
    /*DIARY PAGE*/
    .diary-page{ width: 100%; margin: 0; max-height: none}
    .diary-page .text-container  h2{ font-size: 2em; margin-bottom: 10px; margin-top: 0}
    .diary-page h3{ font-size: 1.5em}
    
    /*HOME*/
    .text-container.intro{ margin-top: 200px}
    .text-container.intro p{ column-count: 1; font-size: 17px }
    .h-home{ height: auto; min-height: 120vh}
    .home .logo-container img.ruota{ width: 120px}
    .home .logo-container img.logotipo.active{ height: 50px}
    #logos .logo-container{ width: 33.3%; padding-bottom: 20px; font-size: 11px}
    #logos .logo-container.fesr{ width: 80% }
    .home .logo-container{ height: 200px}
    .foto-fissa.foto-home{ height: 100vh}
    .foto-fissa.foto-home:after{ background: rgb(0,0,0);
background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 100%);}
    
	}
@media(max-width:700px){
    .right-nav{}
    .nav-toggle { width: 20px}

    .toggle-megamenu.active{ width: 30px}
    .name-nav.active{ padding: 0 5px}
    .bg-nav{ background: linear-gradient(180deg, rgba(0,0,0,0.9) 9%, rgba(0,0,0,0) 100%)}
    
    .megamenu-container ul.slides li{ width: 100%}
    .megamenu-container ul.slides h2{ font-size: 2em}
    .megamenu-container{ padding-top: 150px}
    .megamenu-container ul.slides p{}
    .megamenu-container ul.slides h3{ font-size: 1.1em}
    .megamenu-container ul.slides li.social{ padding: 20px 10px}
    
    .textone .route{ font-size: 10px}
    
    
    .dida{ max-width: 320px}
    .text-container h2 span{ font-size: 0.4em; line-height: 1.7em; left: -35px;}
    .icon-list ul li{ width: 50%}
    
    /*BACK TO INDEX*/
    .back-to-index .text-container{ margin-bottom: -80%}
    .image-chapter .foto-fissa:after{background: rgb(0,0,0);
background: linear-gradient(0deg, rgba(0,0,0,0.7) 40%, rgba(0,0,0,0.4) 100%);}
    .image-chapter .foto-fissa.masked{ height: 80%}
    
    .rotating-slider .slides{ background-size: 40%}
    .rotating-slider ul.slides li .inner{ padding-top: 13vh}
    
    /*HOME*/
    .text-container.intro{ max-width: 100%; margin-left: 0; margin-right: 0; padding: 20px; margin-bottom: 10px}
    
    /*INDEX*/
    .foto-fissa:after{}
    
    /*DOCSPOT*/
    header.docspot{ height: 130vh;  width: 100%; margin: 0 auto; padding-top: 15vh; padding-bottom: 0vh}
    header.docspot .text-container{ padding-top: 20vh}
    header.docspot .foto-fissa{ left: 0}
    .videone.docspot blockquote{ margin-right: -10px; margin-left: -15px}
    .videone.docspot .play-container{ padding: 20px 0 0 0; justify-content: center}
    .videone.docspot .play-container img{ height: 200px; width: 200px}
    .videone.docspot .text-container{ padding-top: 20px; padding-bottom: 20px; padding-right: 5px}
    .videone.docspot .text-container h3{ font-size: 16px; text-align: left; margin: 5px 0}
    .videone.docspot .text-container h2{ text-align: left; margin: 5px 0}
    .videone.docspot blockquote{ margin-top: 10px}
    .videone.docspot blockquote small{ font-size: 11px; line-height: 1.3em; display: block}
    
}
@media(max-width:420px){
    .logo-container img.ruota{ margin-left: -60px}
    .play-container{ min-height: 30vh}
    .text-container { padding-left: 30px; padding-right: 30px}
    .text-container h2{ font-size: 2.2rem}
    .text-container.intro h2{ font-size: 1.85em}
    .h-home .text-container.intro p{ font-size: 16px}
    .foto-fissa.foto-home{ background-position: top 0% right 35%; background-size: 160%}
    .foto-fissa.foto-home:after{ background:  linear-gradient(0deg, rgba(0,0,0,09) 0%, rgba(0,0,0,0.05) 100%)}
    .text-container.intro{ margin-top: 50vh}
    .text-container.intro .btn{ text-align: center}
    p.btn-intro-container{ position: fixed; bottom: 0; left: 0; z-index: 20; width: 100%; text-align: center; padding: 15px 0;
    background: rgb(0,0,0);
background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 100%); }
    
    .home .logo-container img.ruota{ width: 100px; margin-left: -20px}
    .home .logo-container img.logotipo.active{ height: 35px; margin-left: 0}
    

}