*,
*::before,
*::after {
  box-sizing: border-box;
}
:root {
  --white: #000000;
}
html {
	font-family: "futura-pt", sans-serif;
    font-size: 20px;
    letter-spacing: 10px;
    font-weight: 400;
    color: rgba(32,32,32,1.00);
    background-color: rgba(255,255,255,1.00);
}
@media screen and (max-width: 768px) {
  html {
    font-size: 16px;
  }
}
html, body {
 	min-height: 100%;
 	cursor: none;
 	overflow: auto; 
	overflow-x: hidden
}
body::-webkit-scrollbar {
  display: none;
}
html:hover .cursor {
  opacity: 1;
}
body {
	--cursor-stroke: rgba(110,110,110,1.00);
	}
html:hover .cursor {
  opacity: 1;
}
a {
	color: rgba(32,32,32,1.00);
    text-decoration: none;
    transition: all 0.3s ease-in-out .3s;
}
a:hover {
	color: rgba(215,68,0,1.00);
	transform: scale(1.);
    box-shadow: 10px 10px 26px -1px rgba(0, 0, 0, 0.0);	  
}
   







/*--------------------home---------------------*/
.home {
	display: flex;
 	justify-content: center;
 	align-items: center;
 	height: 100vh; 
}
@media screen and (max-width: 768px) {
  .home {
    margin-top:-10vh;
  }
}


.home .title, .spazio8 .title{
	font-family: "Carola";
	font-size: 30vw;
	font-weight: 100;
	letter-spacing: 0px;
	color:rgba(36,36,36,1.00);
}
.eight {
    font-family: "Times New Roman", "serif";
    font-size: 30vw;
    font-weight: 100;
    color: rgba(179,179,179,1.00)
}
.letter {
    display: inline-block;
}	
.call {	
	color: rgba(249,69,20,0.90);
	text-align: center;
    padding-top: 15vh;
	padding-bottom: 5vh;
    font-size: 5vw;
    letter-spacing: -.3vh;
	text-transform: uppercase;
}
@media screen and (max-width: 768px) {
  .call {
	  font-size: 7vw;
      letter-spacing: -.2vh;
  }
}



/*-----------------logo--------------------*/
.logo_icon {
  opacity: 0; 
  transition: opacity 0.3s ease-in-out; 
}
.logo_icon.visible {
  opacity: 1; 
}
.logo {
	position: fixed;
	width: 60px;
	left: 10px;
	top: 10px;	
	box-shadow: -1px 0px 78px 0px rgba(0,0,0,0);
	z-index: 99
}
@media screen and (max-width: 768px) {
  .logo {
    width: 30px;
  }
}





/*-----------------messages--------------------*/
.message01, .message02, .message03, .message04, .message05, .message06 {
    position: absolute;
    text-align: left;
    padding: 5vh;
    font-size: 1.5vw;
    letter-spacing: .5vh;
    height: auto;
    margin-right: 0;
    z-index: 9;
    text-transform: uppercase;
    color: rgba(255,255,255,1.00);
    background-color: rgba(58,58,58,1.0);
}
@media screen and (max-width: 768px) {
  .message01, .message02, .message03, .message04, .message05, .message06 {
      font-size: 4.5vw; 
	  letter-spacing: 0vh;
	  padding: 2vh;
    }
}
.message01 {
	width: 65vh;
}
@media screen and (max-width: 768px) {
  .message01 {
      width: auto
    }
}
.message02 {
	width: 82vh;
}
@media screen and (max-width: 768px) {
  .message02 {
     width: auto
    }
}
.message03 {
	width: 81vh;
}
@media screen and (max-width: 768px) {
  .message03 {
      width: auto
    }
}
.message04 {
	width: 92vh
}
@media screen and (max-width: 768px) {
  .message04 {
      width: auto
    }
}
.message05 {
	width: 85vh
}
@media screen and (max-width: 768px) {
  .message05 {
      width: auto
    }
}
.message06 {
	width: 75vh
}
@media screen and (max-width: 768px) {
  .message06 {
      width: auto
    }
}






/*-----------------photos--------------------*/
.gallery {
	width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
    flex-wrap: wrap;
	text-align: center;	
	padding-bottom: 10vh;
}
@media screen and (max-width: 768px) {
  .gallery  {
      width: 100%; 
	  padding-bottom: 0vh;
    }
}
.box {
	margin: 150px;
}
@media screen and (max-width: 768px) {
  .box {
	  margin: 0px;
	  margin-top: 30px;
	  min-width: 100%
    }
}
.gallery a {
    cursor: pointer;
}
.gallery img {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);		
}
.gallery img:hover {
    transform: scale(1.05);
}
.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,1);
    display: none; 
    justify-content: center;
    align-items: center;
    z-index: 99;   
}
.fullscreen img {
    max-width: 90%;
    max-height: 90%;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@media screen and (max-width: 768px) {
  .fullscreen img  {
      max-width: 90%; 
    }
}
.fullscreen.active {
    display: flex;
}
.fullscreen img:hover {
    transform: scale(1.02);
}
.photo_01 {
	width: 60%;
 	height: auto;
}
.photo_02 {
	width: 60%;
  	height: auto;
}
.photo_03 {
	width: 60%;
  	height: auto;
}
.photo_04 {
	width: 35%;  
	height: auto;	
}
.photo_05 {
	width: 60%;
 	height: auto;
}
.photo_06 {
	width: 40%;
 	height: auto;
}
.photo_07 {
	width: 60%;
 	height: auto;
}
.photo_08 {
	width: 40%;
 	height: auto;
}
.photo_09 {
	width: 60%;
 	height: auto;
}
.photo_10 {
	width: 60%;
  	height: auto;
}
.photo_11 {
	width: 35%;
  	height: auto;
}
.photo_12 {
	width: 60%;
 	height: auto;
}
.photo_13 {
	width: 60%;
 	height: auto;
}
.photo_14 {
	width: 60%;
 	height: auto;
}
.photo_15 {
	width: 60%;
 	height: auto;
}
.photo_16 {
	width: 40%;
 	height: auto;
}
@media screen and (max-width: 768px) {
 	.photo_01, .photo_02, .photo_03, .photo_05, 
	.photo_06, .photo_07, .photo_09, .photo_10, 
	.photo_12, .photo_13, .photo_14, .photo_15 {
	  min-width: 90%;
    }
}
@media screen and (max-width: 768px) {
 	 .photo_04, .photo_08 {
	  min-width: 60%;
    }
}






/*-----------------spazio bottom--------------------*/
.spazio8 {
	height: 60vh;
 	display: flex;
 	flex-direction: column; 
 	align-items: center;    
 	justify-content: center;        
 	text-align: center;
	padding-bottom: 10vh;
}
@media screen and (max-width: 768px) {
 	.spazio8  {
		padding-top: 20vh
    }
}
.text {
	font-family: "futura-pt", sans-serif;	
	font-size: 5vw;
    letter-spacing: 2vw;
  	color: rgba(249,69,20,0.90);
	text-transform: uppercase;
	font-weight: 400
}





	
/*-----------------------contact--------------------*/	
.contact {
    width: 100%;
	padding: 10vh;
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(236,236,236,0.00);
}
@media screen and (max-width: 768px) {
 	.contact {
	  padding: 0vh;
    }
}
.contact .title {
	font-family: "futura-pt", sans-serif;	
	text-align: center;
	font-size: 4.1vw;
    letter-spacing: -.4vw;
	padding: 0px;
	margin-top: 10vh;
	text-transform: uppercase
}
@media screen and (max-width: 768px) {
 	.contact .title {
		font-size: 7vw;
		letter-spacing: -.7vw;
	 	padding: 10px;
    }
}
.contact img {
	box-shadow: -1px 0px 78px 0px rgba(0,0,0,0);
}





.plan {
	width: 100%;
	height: auto;	
}
.plan img{
	display:block;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
}
@media screen and (max-width: 768px) {
 	.plan img {
	
		margin-top: 20px;
	  width: 95%;
    }
}




.links {
	width: 70%;
	margin-left: auto;
	margin-right: auto;
}
@media screen and (max-width: 768px) {
 	.links {
		width: 100%;
		padding: 2vh;
		padding-bottom: 10vh;
    }
}

#google {
	width: 180px;
	margin-top: 50px;
	padding: 20px;
	background-color:rgba(0,0,0,.01);
	text-align: center;
	margin-left: auto;
	margin-right: auto
}
@media screen and (max-width: 768px) {
 	#google {
		width: 140px;
		padding: 10px;
    }
}
.infos {
    display: flex;
    align-items: center; 
	margin-bottom: 20px;
	
}
.infos a {
	letter-spacing: -.03vw;
    display: flex;
    align-items: center; 
    text-decoration: none; 
}
.infos img {
	height: 30px;
    margin-left: 10px; 
}














/*---------------------------sign---------------------------*/
.sign {
    font-family: "LemonMilk";
    font-size: 20px;
    background-color: rgba(33,33,33,1);
    color: rgba(242,242,242,.7);
    padding: 130px;
    padding-left: 5px;
    max-width: 100px;
    letter-spacing: 0px;
    text-align: left;
    line-height: .9;
    -moz-transition: filter 0.4s ease-in-out;
    -o-transition: filter 0.4s ease-in-out;
    -webkit-transition: filter 0.4s ease-in-out;
    -ms-transition: filter 0.4s ease-in-out;
    transition: filter 0.4s ease-in-out;
    filter: invert(0%);
}
@media (max-width: 992px) {
  .sign{
	  font-size: 11px;
    padding: 40px;
    padding-left: 5px;
    width: 20%;
    letter-spacing: 0px;
    text-align: left;
    line-height: .9;
	}
}
.sign:hover {
	filter:invert(1)
}




/*-------------------cursor---------------------*/
.cursor {
	display: none;
}
@media screen and (min-width: 53em) {
	.frame {
		flex-direction: row;
	}
	.frame__title {
		margin-top: 0;
	}
	.frame__links {
		margin-left: 8vw;
	}
	.content__row--text {
		padding: calc(var(--padding-hor) + 4rem) 0 2.5rem;
	}
}
@media (any-pointer:fine) {
	.cursor {
		position: fixed;
		top: 0;
		left: 0;
		display: block;
		pointer-events: none;
		z-index: 10000;
	}
	.cursor__inner {
		fill: none;
		stroke: var(--cursor-stroke);
		stroke-width: 1.3px;
	}
	.no-js .cursor {
		display: none;
	}
}
/*---------------------arrow-------------------*/
.arrow {
 	width: 40px;
 	height: 40px;
	margin-left: 1px;
	margin-top: 5px;
	display: inline-block;
	position: fixed;
	transition: transform 0.3s ease; 
	z-index: 99;
}
.arrow::before {
 	content: '';
 	display: block;
 	width: 30px;
 	height: 30px;
 	top: 50%;
  	left: 45%;
 	border-style: solid;
 	border-color: rgba(243,80,4,1.00); 
 	border-width: 1px 1px 0 0;
 	position: absolute;
 	transform-origin: 50% 50%;
}
.arrow.left::before {
 	transform: rotate(-135deg);
 	margin: -15px 0 0 -10px;
}
.arrow::after {
  content: '';
  display: block;
  top: 50%;
  left: 45%;
  border-style: solid;
  border-color: rgba(243,80,4,1.00); 
  position: absolute;
  transform-origin: 50% 50%;
}
.arrow.left::after {
  width: 40px;
  height: 0;
  border-width: 1px 0 0 0;
  transform: translate(-14px, -1px);
}
.arrow:hover::before {
  	border-color: rgba(255,255,255,1.00); 
	transition: transform 0.3s ease; 
}
.arrow:hover::after {
  border-color: rgba(255,255,255,1.00);
}

.arrow.circle {    
    border-radius: 50px;
	background-color: rgba(37,37,37,0);
}
.circle:hover {
  	transform: scale(1.2); 
	background-color: rgba(255,255,255,0);
	 
}
@media (max-width: 768px) {
  .arrow {
    width: 30px;
    height: 30px;
	  	margin-left: 0px;
	margin-top: 0px;
  }
  .arrow::before {
    width: 15px;
    height: 15px;
    left: 40%;
  }
  .arrow.left::before {
    margin: -7px 0 0 -5px;
  }
  .arrow::after {
    left: 40%;
  }
  .arrow.left::after {
    width: 20px;
    transform: translate(-7px, -1px);
  }
}
/*----------------------audio--------------------*/
.audio_box {
	width: 100%;
    display: flex;
    justify-content: left;
    margin: 0px 0;
	margin-left: 0;
	margin-bottom: 20px;	
}
@media screen and (max-width: 768px) {
  .audio_box {
	  max-width: 90%;
	  display: flex;
  	  flex-direction: column; 
  }
}
.audio_player {
    display: flex;
    align-items: center;
    width: auto;
    margin-left: 10px;
    padding-right: 10px;
    background-color: rgba(255,255,255,.20);
}
@media screen and (max-width: 768px) {
  .audio_player {
	  margin: 2px;
	  margin-bottom: 2px;
	  margin-top: 2px;
  }
}
button {
    border: none;
    background: none; 
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px; 
    height: 18px; 
	margin-left: 4px; 
	margin-right: 10px;
}
@media screen and (max-width: 768px) {
  button {
	  margin-right: 0px; 
    }
}
.play_icon {
    width: 0;
    height: 0;
    border-left: 13px solid rgba(255,255,255,1.00); 
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}
@media screen and (max-width: 768px) {
  .play_icon {
	  border-left: 8px solid rgba(255,255,255,1.00);
      border-top: 5px solid transparent; 
      border-bottom: 5px solid transparent;
    }
}
.pause_icon { 
    display: flex;
    justify-content: space-between;
    width: 13px;
    height: 13px;
}
@media screen and (max-width: 768px) {
  .pause_icon {
    width: 9px;
    height: 9px;
    }
}
.pause_icon div {
    background-color: rgba(255,255,255,1.00);
    width: 10px;
    height: 100%;
    margin-right: 1px; 
}
.time {
	font-size: 13px;
    color: rgba(255,255,255,1.00);
	margin-top: 2px;
    text-align: right;
}
@media screen and (max-width: 768px) {
  .time {
	  font-size: 10px;
	  min-width: 80px;	  
  }
}
/*------------------seasons modal box------------------*/
.modal_btn {
	border: none;
    cursor: pointer;
    position: relative; 
}
.modal_box {
	position: absolute;
	text-align: left;
	opacity: 0;
    visibility: hidden;
    bottom: 100%;
	left: -200px;
	margin-bottom: 20px; 
    width: 400px;
	height: auto;
    padding: 60px;
	color: rgba(17,17,17,1.00);
    background-color: rgba(255,255,255,1.00);
    border: 0px solid #000;
    border-radius: 5px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 99;
    transition: opacity 0.3s ease, visibility 0.3s ease; 
	transition: transform 2s cubic-bezier(0.22, 1, 0.36, 1), opacity .3s ease, visibility .3s ease;
}
@media screen and (max-width: 768px) {
  .modal_box {
      width: 300px;
	  left: -105px;
	  margin-bottom: 5px;
    }
}
.modal_btn:hover .modal_box {
  	opacity: 1; 
    visibility: visible;
}