body {
            opacity: 0;
            transition: opacity 0.4s ease-in;
        }

        body.loaded {
            opacity: 1;
        }


        	.menu-contacts{
		color: #F2F4B7;
position: absolute;
bottom: 0;
display: flex;
flex-direction: row;
padding: 2em;
width: 100%;
justify-content: space-between;
	}

p{
	margin:0;
}

.subsection-body{
			font-size: 20px;
line-height: 29px;
}

.subsection-body>*{
				font-size: inherit;
line-height: inherit;
}

.subsection-body p{
		padding-block: 1em;
	}

.cartella-scheda h4{
	margin: 20px;
	position: absolute;
	bottom:0;
}

.spacer-body{
	position: relative;
	display: flex;
}

.spacer-wrap{
	align-self: center;
}

.spacer, .spacer2, .spacer3, .spacer4 {
	position: relative;
	height: auto!important;
	padding-block: 3em;
	min-height: 70vh;
}

.spacer:before, .spacer2:before, .spacer3:before,.spacer4:before{
		  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  background-repeat: repeat-x;
  background-position: center center;
  background-size: auto 100%;
  z-index: 0;
  pointer-events: none;
	
}

.spacer:before{
	background-image: url('bgs/spacer.svg');
}

.spacer2:before{
	background-image: url('bgs/spacer2.svg');
}

.spacer3:before{
	background-image: url('bgs/spacer3.svg');
	opacity: 0.1;
}



.button{
	font-size: 15px;
	text-transform: uppercase;
	padding-inline: 1em;
	padding-block: 0.5em;
	background-color: #192e41;
	color: white;
	border-radius: 120px;
	letter-spacing: 1px;
}
.spacer-body .spacer-wrap{
	text-align: center;
width: 100%;
/* position: absolute;*/
/* margin: auto; */
padding-inline: 1em;
margin: 0!important;

font-size: 40px;
line-height: 45px;
}


.logo{
	width: 600px;
height: 390px;
background-size: contain;
background-repeat: no-repeat;


}

.items{
	position: absolute;
top: 50%;
transform: translate(0, -60%);

list-style: none;
padding: 30px;
}

.items li{
	color: #F2F4B7;
	font-size: 40px;
	z-index: 300;

	line-height: 44px;
margin-block: 25px;
}



.navigation{
	position: fixed;
	background-color: #192E41;
	width: 500px;
	height: 100vh;
	right: 0;
	top:0;
	z-index: 620;
	
	transform: translate(100%,0);
	transition: 0.4s;
}

#ham{
	background-image: url('icons/ham.svg');
	background-size: contain;
	background-repeat: no-repeat;
}

#cross{
	background-image: url('icons/cross.svg');
	background-size: contain;
	background-repeat: no-repeat;
}

.open{
	transform: translate(0%,0);
	box-shadow: -8px 6px 23px 0 rgba(0, 0, 0, 0.4);
	
}

.navigation:before{
	  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.2;
  background-repeat: no-repeat;
  background-position: 15% 0;
  background-size: contain;
  z-index: 0;
  pointer-events: none;
	background-image: url('bgs/1.svg');

}

nav{
position: fixed;
z-index: 600;
padding: 30px;
display: flex;
width: 100vw;
justify-content: space-between;
}	

.hamburger{
	width: 40px;
	height: 40px;

}

   	@font-face {
  font-family: "ortica";
  src: url("OrticaLinear-Light.woff") format("woff");
}

*{
	font-family: 'ortica' ;
}

   	/* Hide scrollbar for Chrome, Safari and Opera */
*::-webkit-scrollbar {
  display: none!important;
}

/* Hide scrollbar for IE, Edge and Firefox */
* {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */

  box-sizing: border-box;
}

body{
	margin: 0;
	background-color: #192E41 ;
}
.opening{
	width: 100vw;
	height: 100vh;
	background-position: center;
	background-size: cover;
	background-attachment:scroll;
	background-blend-mode: multiply;
	background-color: rgba(0, 0, 0, 0.21);
}


.fade{
	opacity: 0;
	transition:  0.9s;
	transform: translate(0, 30px);

}

.visible{
	opacity: 1!important;
	transform: translate(0, 0px);
}

.bar{
	display: flex;
	width: 100%;
	height: 70px;
}
.title{
	position: relative;
}

.bg1:before, .bg2:before, .bg3:before, .bg4:before, .bg5:before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1;
  background-repeat: no-repeat;
  background-position: 15% 100%;
  background-size: contain;
  transition: transform .7s;
  transform: translate(-100px, 0);
  z-index: 0;
  pointer-events: none;
}

.bg1:before {
  background-image: url('bgs/1.svg');
}

.bg2:before {
  background-image: url('bgs/3.svg');
}

.bg3:before {
  background-image: url('bgs/4.png');
  opacity: 1;
  background-size: cover!important;
    background-position: center!important;
}

.bg4:before {
  background-image: url('bgs/2.svg');

}

.bg5:before {
  background-image: url('bgs/3.svg');
    background-size: cover!important;
    background-position: center!important;
    bottom: 0;
    top: auto;
width: 100%;
height: 30%;

}

.translate:before {
  transform: translate(0px, 0px);
}

a{ color:inherit;
text-decoration:none; }

.bar a{
	flex: 1;
	color: inherit;
	text-decoration: none;
	text-align: center;
	align-self: center;
}

h1, h2, h3, h4{
	z-index: 200;
	margin: 0;

}

h1{
	font-size: 60px;
	margin: 30px;
	line-height: 65px;
	font-weight: normal;
}
h2{
	margin: 20px;
	font-size: 40px;
	line-height: 45px;
	font-weight: normal;

	   		position: absolute;
   		bottom:0;
}

h3{
	font-size: 35px;
	margin: 10;
	line-height: 35px;
	font-weight: normal;
}

h4{
	font-size: 20px;
	margin: 10;
	line-height: 25px;
	font-weight: normal;
}
   	

   	.section{
   		width:100vw;
   		min-height: 70vh;
   		display: flex;
   		flex-direction: row;
   		box-sizing: border-box;
   	}

   	.section>*{
   		flex: 1;
   	}

   	.cartella-sub{
   		display: flex;
   		flex-direction: column;
   	}

   	.menu-sub{
   		   		display: flex;
   		flex-direction: column;
   	}

   	.menu-sub>*{
   		flex: 1;
   		position: relative;
   	}



   	.cartella-sub>*{
   		flex: 1;
   		position: relative;
   	}

   	.accordion-sub{
overflow: scroll;
display: flex;
flex-direction: column;
justify-content: end;
   	}

   	.accordion-scheda{
   		border-bottom: 1px solid;
   		padding: 1em;
   		margin-inline: 1em;
   	}

   	.accordion-scheda:last-child{
   		border-bottom: 1px solid;
   		margin-bottom: 1em;
   	}



   	.subsection-body{
   		max-height: 0px;
   		overflow: scroll;
   		transition: 0.2s ease-in-out;
   	}

   	.expanded{
   		max-height: 350px!important;
   	}


.banner-button{
	position: absolute;
	background-color: #3E6F53;
	right:0;
	top:0;
	z-index: 200;
	height: 100%;
	padding-inline: 30px;
	align-items: center;
	color: #F2F4B7;
display: flex;
}

.banner {
  width: 100%;
  background-color: #F2F4B7;
  color: #192E41;
  overflow: hidden;
  white-space: nowrap;
  font-size: 20px;
  position: fixed;
  bottom:0;

  z-index: 500;
  padding-block: 1em;

  box-shadow: -8px 6px 23px 0 rgba(0, 0, 0, 0.4);

}

.scrolling-text {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  animation: scroll 40s linear infinite;
}

.scrolling-text span {
  display: inline-block;
  padding-right: 100px; /* Space between the repeated text */
}

@keyframes scroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}


.page-title{
	color: white;
	position: absolute;
	width: 100%;
	bottom:0;
	text-align: center;
	margin-block: 100px;
	font-size: 50px;
	z-index: 200;

}

.opening-button{
	width: max-content;
margin: auto;
background-color: white;
color: black;
font-size: 12px;
border-radius: 30px;
padding-inline: 18px;
text-transform: uppercase;
padding-block: 9px;
letter-spacing: 1px;
margin-top: 21px;
}


.scheda-close{
	position: fixed;
	top:0;
	right:0;
	z-index: 400;
	color: red;
mix-blend-mode: difference;
}

#cross{
background-image: url('icons/close2.svg');
background-size: contain;
background-repeat: no-repeat;

width: 50px;
height: 50px;

margin: 20px;
}

#crossm{
background-image: url('icons/close2.svg');
background-size: contain;
background-repeat: no-repeat;

width: 40px;
height: 40px;
top: 0;
right: 0;
position: absolute;
margin: 30px;

}



.carousel {
  position: relative;
  width: 100%;
  height: 100vh; /* Adjust as needed */
  overflow: hidden;
  cursor: pointer;
}

.carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: opacity 1.5s ease-in-out;
  opacity: 0;
}

.carousel-slide.active {
  opacity: 1;
}