.wrapper {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    position: relative;
}


/*
Theme Name: Uncode Child
Description: Child theme for Uncode theme
Author: Undsgn™
Author URI: http://www.undsgn.com
Template: uncode
Version: 1.0.0
Text Domain: uncode
*/


body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    --header-height:0px;
    --scroll-bar-height:0px;
    --footer-height:0px;
    --navigation-arrows:5rem;
  }
  
  /* Header must be fixed and with height set up with variable */
  /* Other rules can be changed */
  header {
    position: fixed;
    z-index: 9999;
    background: white;
    width: 100%;
    height: var(--header-height);
    top: 0;
  }
  header nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 25px;
    height: 100%;
  }
  header nav .navbar-links ul {
    list-style: none;
  }
  header nav .navbar-links ul li {
    display: inline-block;
    margin-left: 0.75rem;
  }
  header nav .navbar-links ul li a,
  header nav .navbar-links ul li a:active {
    color: white;
  }
  /* Footer show up only on modbile (<768px) and use variable for height */
  footer{
    display:none;
    height: calc(var(--footer-height) + var(--header-height));
  }
  
#HighwayContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

#HighwayContainer.moving.back {
    top: -100vh;
}



  .highwway-wrapper.moving {
    position: relative;
    top: 100vh;
    left: 0;
    width: 100%;
  }

.highwway-wrapper.moving.back {
    top: 0;
	height: auto;
}
/*
  .highwway-wrapper.moving {
    animation: anima 1.5s linear -1.5s 1;
  }
  @keyframes anima {
    to{
      top:100vh;
    }
    from{
      top:0;
    }
  }
  */
  #PinContainer {
    perspective: 1px;
    height: 100%;
    width: 100%;
    overflow-y:hidden;
    overflow-x: auto;
    min-height: 100vh;
  }
  #PinContainer::-webkit-scrollbar {
    height: var(----scroll-bar-height,0);
  }
  .layer img{
    height: 100%;
    max-width:inherit;
  }
  
  .layer {
    position:absolute;
    top:var(--header-height);
    right:0;
    bottom:0;
    left:0;
    height: calc(100vh - var(--header-height) - var(--scroll-bar-height));
  }
  
  /* Scale for translateZ */
  /* 1 + (translateZ * -1) / perspective */
  #BackgroundContainer{
    display:flex;
    width: 100%;
    transform: translateZ(-0.087px) scale(1.08);
  }
  
  #ScenesContainer{
    display:flex;
    width: 100%;
    transform: translateZ(0) scale(1);
  }
  
  #TopContainer{
    display:flex;
    width: 100%;
	transform: translateZ(0.072px);
    scale: 0.934;
    pointer-events: none;
  }
  #TopContainer .top{
    height: 100%;
    position:absolute;
    z-index: 9;
    transition:all 0.3s linear;
    pointer-events: none;
  }
  #LoaderContainer {
    display:none;
    position:absolute;
    top:var(--header-height);
    width: 100vw;
    height: calc(100vh - var(--header-height));
    justify-content: center;
    align-items: center;
    background:white;
    z-index: 9999;
  }
  #LoaderContainer object{
    width: 50px;
    height: 50px;
  }
  #LoaderContainer.active {
    display:flex;
  }
  .moving #NavigationControllerContainer{
    position:absolute;
  }
  #NavigationControllerContainer{
    position:fixed;
    right: 50px;
    bottom:50px
  }
  #NavigationControllerContainer button{
    width: var(--navigation-arrows,60px);
    height: var(--navigation-arrows,60px);
    background:transparent;
    color:white;
    border:none;
    border-radius:50%;
    cursor: pointer;
    scale:1;
    transition:scale 0.3s linear;
  }
  #NavigationControllerContainer button img{
    width: var(--navigation-arrows,60px);
    height: var(--navigation-arrows,60px);
  }
  #NavigationControllerContainer button:hover{
    transition:scale 0.3s linear;
    scale:1.2;
  }
  /* Old values for tops positions without parallax */
  /* #TopContainer .top-1{
    left:10.5%;
  }
  #TopContainer .top-2{
    left:21.5%;
  }
  #TopContainer .top-3{
    left:37%;
  }
  #TopContainer .top-4{
    left:49.5%;
  }
  #TopContainer .top-5{
    left:62%;
  } */
  #TopContainer .top-6{
    height: 50%;
    bottom:0;
  }
  /* #TopContainer .top-7{
    left:85.5%;
  }
  #TopContainer .top-8{
    left:98%;
  } */
  #HotSpotContainer{
    opacity:0;
    transition:opacity 0.3s linear;
  }
  #HighwayContainer.movingIn{
    top:-100%;
  }
  .hotspot{
    position:absolute;
    left:0;
    bottom:0;
    height: calc(100vh - var(--header-height) - var(--scroll-bar-height));
  }
  .hotspot a{
    position:absolute;
    scale:1;
    /* Animation svg pulsing */
    animation: pulse 2s ease-out infinite normal;
    /* animation: pulse 3s cubic-bezier(1,-0.01,1,-0.01) infinite; */
    transition:scale 0.3s ease-in-out;
  }
  
  .hotspot a:hover{
    scale:1.1;
    animation:none;
    transition:scale 0.3s ease-in-out;
  }
  .hotspot .scene1-0 {
      transition-delay: 0.2s;
  }
  
  .hotspot .scene2-0 {
      transition-delay: 1.2s;
  }
  
  .hotspot .scene2-1 {
      transition-delay: 2.2s;
  }
  
  .hotspot .scene2-2 {
      transition-delay: 3.2s;
  }
  
  .hotspot .scene3-0 {
      transition-delay: 0.2s;
  }
  
  .hotspot .scene3-1 {
      transition-delay: 1.2s;
  }
  
  .hotspot .scene3-2 {
      transition-delay: 2.2s;
  }
  
  .hotspot .scene3-3 {
      transition-delay: 3.2s;
  }

  .hotspot .scene3-4 {
      transition-delay: 3.2s;
  }
  
  .hotspot .scene4-0 {
      transition-delay: 0.2s;
  }
  
  .hotspot .scene4-1 {
      transition-delay: 1.2s;
  }
  
  .hotspot .scene4-2 {
      transition-delay: 2.2s;
  }
  
  .hotspot .scene4-3 {
      transition-delay: 3.2s;
  }
  
  .hotspot .scene4-4 {
      transition-delay: 4.2s;
  }
  
  .hotspot .scene4-5 {
      transition-delay: 5.2s;
  }
  
  .hotspot .scene5-0 {
      transition-delay: 0.2s;
  }
  
  .hotspot .scene5-1 {
      transition-delay: 1.2s;
  }
  
  .hotspot .scene5-2 {
      transition-delay: 2.2s;
  }
  
  .hotspot .scene5-3 {
      transition-delay: 3.2s;
  }
  
  .hotspot .scene5-4 {
      transition-delay: 4.2s;
  }
  
  .hotspot .scene5-5 {
      transition-delay: 5.2s;
  }
  
  .hotspot .scene6-0 {
      transition-delay: 0.2s;
  }
  
  .hotspot .scene6-1 {
      transition-delay: 1.2s;
  }
  
  .hotspot .scene6-2 {
      transition-delay: 2.2s;
  }
  
  .hotspot .scene6-3 {
      transition-delay: 3.2s;
  }
  
  .hotspot .scene6-4 {
      transition-delay: 4.2s;
  }
  
  .hotspot .scene6-5 {
      transition-delay: 5.2s;
  }
  
  .hotspot .scene6-6 {
      transition-delay: 6.2s;
  }
  
  .hotspot .scene7-0 {
      transition-delay: 0.2s;
  }
  
  .hotspot .scene7-1 {
      transition-delay: 1.2s;
  }
  
  .hotspot .scene7-2 {
      transition-delay: 2.2s;
  }
  
  .hotspot .scene8-0 {
      transition-delay: 0.2s;
  }
  

  
  /* Hotspot positions */
  .hotspot .scene1-0 {
      top: 65%;
      left: 3%;
  }
  .hotspot .scene2-0 {
      top: 38%;
      left: 14.5%;
  }
  .hotspot .scene2-1 {
      top: 54%;
      left: 16%;
  }
  .hotspot .scene2-2 {
      top: 63%;
      left: 19.1%;
  }
  .hotspot .scene3-0 {
      top: 37%;
      left: 29.4%;
  }
  .hotspot .scene3-1 {
      top: 46%;
      left: 30.1%;
  }
  .hotspot .scene3-2 {
      top: 15%;
      left: 30%;
  }
  .hotspot .scene3-3 {
      top: 21%;
      left: 33.2%;
  }
  .hotspot .scene3-4 {
      top: 45%;
      left: 27%;
  }
  .hotspot .scene4-0 {
      top: 44%;
      left: 41.7%;
  }
  .hotspot .scene4-1 {
      top: 34%;
      left: 44%;
  }
  .hotspot .scene4-2 {
      top: 35%;
      left: 45.1%;
  }
  .hotspot .scene4-3 {
      top: 51.6%;
      left: 45.1%;
  }
  .hotspot .scene4-4 {
      top: 78%;
      left: 45.2%;
  }
  .hotspot .scene4-5 {
      top: 44.8%;
      left: 46.2%;
  }
  .hotspot .scene5-0 {
      top: 38.2%;
      left: 54.76%;
  }
  .hotspot .scene5-1 {
      top: 15.5%;
      left: 54.2%;
  }
  .hotspot .scene5-2 {
      top: 35.6%;
      left: 56.2%;
  }
  .hotspot .scene5-3 {
      top: 19%;
      left: 56.2%;
  }
  .hotspot .scene5-4 {
      top: 14%;
      left: 57.9%;
  }
  .hotspot .scene5-5 {
      top: 39.7%;
      left: 59.3%;
  }
  .hotspot .scene6-0 {
      top: 30%;
      left: 66.2%;
  }
  .hotspot .scene6-1 {
      top: 71%;
      left: 66%;
  }
  .hotspot .scene6-2 {
      top: 37%;
      left: 68.3%;
  }
  .hotspot .scene6-3 {
      top: 45.3%;
      left: 69.9%;
  }
  .hotspot .scene6-4 {
      top: 76%;
      left: 69.8%;
  }
  .hotspot .scene6-5 {
      top: 32%;
      left: 71.2%;
  }
  .hotspot .scene7-0 {
      top: 40%;
      left: 77%;
  }
  .hotspot .scene7-1 {
      top: 37%;
      left: 78.8%;
  }
  .hotspot .scene7-2 {
      top: 43.2%;
      left: 81.3%;
  }
  .hotspot .scene8-0 {
      top: 33%;
      left: 91.5%;
  }
  
  /* Hotspot dimensions */
  .hotspot .scene1-0 img{
    width: auto;
    height: 25vh;
  }
  .hotspot .scene2-0 img{
    width: auto;
    height: 39vh;
  }
  .hotspot .scene2-1 img{
    width: auto;
    height: 24vh;
  }
  .hotspot .scene2-2 img{
    width: auto;
    height: 13vh;
  }
  .hotspot .scene3-0 img {
    width: auto;
    height: 11.32vh;
  }
  .hotspot .scene3-1 img {
    width: auto;
    height: 11.75vh;
  }
  .hotspot .scene3-2 img {
    width: auto;
    height: 12.27vh;
  }
  .hotspot .scene3-3 img{
    width: auto;
    height: 59vh;
  }
  .hotspot .scene3-4 img{
    width: auto;
    height: 35vh;
  }
  .hotspot .scene4-0 img{
    width: auto;
    height: 37vh;
  }
  .hotspot .scene4-1 img{
    width: auto;
    height: 49vh;
  }
  .hotspot .scene4-2 img {
    width: auto;
    height: 10.05vh;
  }
  .hotspot .scene4-3 img{
    width: auto;
    height: 9vh;
  }
  .hotspot .scene4-4 img{
    width: auto;
    height: 9vh;
  }
  .hotspot .scene4-5 img{
    width: auto;
    height: 37vh;
  }
  .hotspot .scene5-0 img {
    width: auto;
    height: 19.5vh;
  }
  .hotspot .scene5-1 img {
    width: auto;
    height: 19.06vh;
  }
  .hotspot .scene5-2 img {
    width: auto;
    height: 22vh;
  }
  .hotspot .scene5-3 img {
    width: auto;
    height: 15.42vh;
  }
  .hotspot .scene5-4 img {
    width: auto;
    height: 20.06vh;
  }
  .hotspot .scene5-5 img {
    width: auto;
    height: 4.07vh;
  }
  .hotspot .scene6-0 img{
    width: auto;
    height: 52vh;
  }
  .hotspot .scene6-1 img {
    width: auto;
    height: 15.05vh;
  }
  .hotspot .scene6-2 img{
    width: auto;
    height: 46vh;
  }
  .hotspot .scene6-3 img{
    width: auto;
    height: 34vh;
  }
  .hotspot .scene6-4 img {
    width: auto;
    height: 9.10vh;
  }
  .hotspot .scene6-5 img {
    width: auto;
    height: 49.51vh;
  }
  .hotspot .scene6-6 img{
    width: auto;
    height: 49vh;
  }
  .hotspot .scene7-0 img{
    width: auto;
    height: 46vh;
  }
  .hotspot .scene7-1 img{
    width: auto;
    height: 37vh;
  }
  .hotspot .scene7-2 img{
    width: auto;
    height: 13vh;
  }
  .hotspot .scene8-0 img{
    width: auto;
    height: 50vh;
  }
  
  @media (max-width:768px){
    header{
      top:0;
    }
    footer{
      display:block;
      padding-top:var(--header-height);
    }
    #HighwayContainer,
    #PinContainer,
    #BackgroundContainer,
    #ScenesContainer,
    #HotSpotContainer,
    #TopContainer{
      top:var(--header-height);
      height: calc(100vh - var(--footer-height) - var(--header-height));
    }
    #HighwayContainer{
      top:0;
    }
    /* Hotspot positions MOBILE*/
    .hotspot .scene1-0 {
        top: 66%;
        left: 3%;
    }
    .hotspot .scene1-0 img{
        height: 20vh;
    }
    .hotspot .scene2-0 {
      top: 43.5%;
      left: 14.8%;
    }
    .hotspot .scene2-0 img{
      height: 34vh;
    }
    .hotspot .scene2-1 {
        top: 59%;
        left: 16.4%;
    }
    .hotspot .scene2-1 img{
      height: 20vh;
    }
    .hotspot .scene2-2 {
    	top: 65%;
    	left: 19.2%;
    }
    .hotspot .scene2-2 img{
      height: 13vh;
    }
    .hotspot .scene3-0 {
      top: 37%;
      left: 29.4%;
    }
    .hotspot .scene3-0 img {
      height: 10.32vh;
    }
    .hotspot .scene3-1 {
      left: 30.1%;
    }
    .hotspot .scene3-1 img{
      height: 10.75vh;
    }
    .hotspot .scene3-2 {
      top: 14%;
      left: 30%;
    }
    .hotspot .scene3-2 img {
      height: 11.27vh;
    }
    .hotspot .scene3-3 {
      top: 21%;
      left: 33.4%;
    }
    .hotspot .scene3-3 img{
      height: 57vh;
    }
	.hotspot .scene3-4 {
      top: 45%;
      left: 27%;
    }
    .hotspot .scene3-4 img{
      height: 35vh;
    }
    .hotspot .scene4-0 img{
      height: 37vh;
    }
	.hotspot .scene4-0 {
 	  top: 44%;
	  left: 41.4%;
	}
    .hotspot .scene4-1 {
      top: 34%;
      left: 44%;
    }
    .hotspot .scene4-1 img{
      height: 52vh;
    }
    .hotspot .scene4-2 {
      top: 35%;
      left: 45%;
    }
    .hotspot .scene4-2 img{
      height: 11.08vh;
    }
    .hotspot .scene4-3 {
        top: 52.4%;
        left: 45.1%;
    }
    .hotspot .scene4-3 img{
      height: 8vh;
    }
    .hotspot .scene4-4 {
        top: 78%;
        left: 45.2%;
    }
    .hotspot .scene4-5 {
        top: 44.4%;
        left: 46.4%;
    }
    .hotspot .scene4-5 img{
      height: 37vh;
    }
    .hotspot .scene5-0 {
        top: 37.7%;
   		left: 54.7%;
    }
    .hotspot .scene5-0 img{
      height: 19.8vh;
    }
    .hotspot .scene5-1 {
        top: 5.5%;
        left: 53.8%;
    }
    .hotspot .scene5-1 img{
      height: 22.6vh;
    }
    .hotspot .scene5-2 {
        top: 35%;
    	left: 56.15%;
    }
    .hotspot .scene5-2 img{
      height: 22.5vh;
    }
    .hotspot .scene5-3 {
        top: 12%;
        left: 55.7%;
    }
    .hotspot .scene5-3 img {
      height: 17.42vh;
    }
    .hotspot .scene5-4 {
        top: 6%;
        left: 58%;
    }
    .hotspot .scene5-4 img{
      height: 20.06vh;
    }
    .hotspot .scene5-5 {
        top: 37.7%;
        left: 59.2%;
    }
    .hotspot .scene5-5 img{
      height: 6.07vh;
    }
    .hotspot .scene6-0 {
        top: 29%;
        left: 66.55%;
    }
    .hotspot .scene6-0 img{
      height: 53.1vh;
    }
    .hotspot .scene6-1 {
        top: 74%;
        left: 66%;
    }
    .hotspot .scene6-1 img{
      height: 12.05vh;
    }
    .hotspot .scene6-2 {
        top: 37%;
        left: 68.3%;
    }
    .hotspot .scene6-2 img{
      height: 44vh;
    }
    .hotspot .scene6-3 {
        top: 45.3%;
        left: 69.91%;
    }
    .hotspot .scene6-3 img{
      height: 34.5vh;
    }
    .hotspot .scene6-4 {
        top: 76%;
        left: 69.8%;
    }
    .hotspot .scene6-4 img{
      height: 9.1vh;
    }
    .hotspot .scene6-5 {
        top: 32%;
        left: 71.2%;
    }
    .hotspot .scene6-5 img{
      height: 48vh;
    }
    .hotspot .scene7-0 {
        top: 40%;
        left: 77%;
    }
    .hotspot .scene7-0 img{
      height: 43vh;
    }
    .hotspot .scene7-1 {
        top: 37%;
        left: 78.8%;
    }
    .hotspot .scene7-1 img{
      height: 37vh;
    }
    .hotspot .scene7-2 {
        top: 43.1%;
        left: 81.33%;
    }
    .hotspot .scene7-2 img{
      height: 12.5vh;
    }
    .hotspot .scene8-0 {
        top: 33%;
        left: 91.5%;
    }
    .hotspot .scene8-0 img{
      height: 53vh;
    }
    #NavigationControllerContainer {
      	bottom:30px;
		width: 100%;
    	text-align: center;
    	right: 0px!important;
    }
  }
  
  @keyframes maskPulse {
    0%{
      scale:1;
      opacity:1;
    }
    50%{
      scale:1.10;
      opacity:0;
    }
    100%{
      opacity:0;
      scale:1;
    }
  }
  @keyframes pulse {
    0%{
      scale:1;
    }
    10%{
      scale:1.05;
    }
    20%{
      scale:1;
    }
    50%{
      scale:1;
    }
    60%{
      scale:1;
    }
    65%{
      scale:1;
    }
    70%{
      scale:1;
    }
    75%{
      scale:1;
    }
    80%{
      scale:1;
    }
    85%{
      scale:1;
    }
    90%{
      scale:1;
    }
    95%{
      scale:1;
    }
    100%{
      scale:1;
    }
  
  }
  
.menu-wrapper {
	display: block;
	width: 100%;
	position: fixed;
	height: 1px;
	top: 0;
	width: 100%;
	height: 30px !important;
	z-index: 9999999;
}
	
/*@media (max-width: 480px) {
#NavigationControllerContainer .prev {
    display: none;
}}	
*/

/* Stili per nascondere le frecce su mobile */
   @media (max-width: 480px) {
        #NavigationControllerContainer {
            display: none;
        }
        #NavigationControllerContainer.show-right {
            display: flex;
            justify-content: center;
        }
        #NavigationControllerContainer.show-right button {
            display: none;
        }
        #NavigationControllerContainer.show-right button.next {
            display: block;
            animation: blink 2s infinite ease-in-out; /* Aumenta la durata dell'animazione */
        }
    }

    @keyframes blink {
        0%, 50%, 100% {
            opacity: 1;
        }
        25%, 75% {
            opacity: 0;
        }
    }