/* CSS Document */
:root{
	--primary-color: #a3864b;
}

html{
	scroll-behavior: smooth;
}
body{
	font-family: myriad-pro, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	
}

h1 {
	font-family: pf-marlet-display, sans-serif;
	font-style: normal;
	font-weight: 500;
	text-transform: uppercase;
	font-size: 7rem;
}

h2, h3, h4, h5, h6{
	font-family: pf-marlet-display, sans-serif;
	font-style: normal;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--primary-color);
}

.myriad{
	font-family: pf-marlet-display, sans-serif;
}

p{
	font-family: myriad-pro, sans-serif;
}

.pf-marlet {
	font-family: pf-marlet-display, sans-serif;
	font-weight: 400;
}

.flex{ display: flex}

/* Intro animata */
.intro.flex { 
	justify-content: center; 
	align-items: center;
	/*background-color: #a3864b;*/
	box-shadow: inset 0 0 0 0 #fff;
	color:#fff;
	height: 100vh;	
	position: absolute;
	z-index:1000;
	width: 100%;	
}

.main {opacity: 0;}

.show .intro { 
	color: #fff; 
	transition: all .5s ease-in-out;
	box-shadow: inset 100vw 0 0 0 #a3864b;
}

.opacity .intro {
	opacity: 0; 
	transition: all 2s ease-in-out; 
	z-index: -999;
}
.opacity .main {
	opacity: 1; 
	transition: all 2s ease-in-out;
	transition-delay: 2s;
}

.hov:hover{
  color: #fff;
}
/* contenuto navigabile */
.main {
	/*width: 80%;
	margin: 0 3%;*/
}

.main h1 { margin-top: 0}



header p { margin-top: 0}
header .flex{justify-content: space-between;
align-items: center;}
.logo{ width: 300px;}


.padding{
	padding:40px 40px;
}
.color-d ul{
	padding-left: 0;
	gap: 20px;
	


}

.color-d li{
	list-style-type: none;}
.color-d a{
	text-decoration: none;
	text-transform: uppercase;
	font-family: pf-marlet-display, sans-serif;
	color: var(--primary-color);
	
}
li:hover{
	color: #161616;
}

.hero{
	margin:100px 0;
}
.ai-c{
	align-items: center;
}
.centre{
	margin: 0 auto;
	font-size: 26px;

	
}
 h2{

}
.hero_content, .hero_image{
	width: 50%;
}
.hero_content{
	
	
	font-size: larger;
}

.hero_image:hover{background-color: #caa55a}

.hero_image img {width: 100%;}

.icone {
	padding:30px 0;
	justify-content: center;
	align-items: flex-start;
	font-size: 1.5rem;
	text-align: center;
	gap:20px;
	
}

.icona {
	width: 20%;
}

.icona img {width: 100%;}

	
section{
		padding-bottom: 20px;
}

	
#gallery{
	padding-bottom: 200px;
}
.info{
	background-color: #000;
	font-size: 20px;
	color: #fff;
}
.filler_container {
	
	width: 50%;
}

.maps {	
	background: url("img/img-venaria-1.jpg") no-repeat; 
	background-size: cover;
	
	width: 50%;
}
.num-img {	
	background: url("img/reggia-numeri.jpg") no-repeat; 
	background-size: cover;
	background-attachment: fixed;
	background-position: left;
	z-index: -80;
	width: 50%;
}
.filler_text{
	text-align: center;
}
.filler_text p a{
   color: var(--primary-color);
}
.filler {
	width: 2px;
	border-top: 300px solid var(--primary-color);
	margin: auto;
}

.numeri-venaria span{
	display:block; 
	font-size: 2rem;
	font-weight: 900;
	
}

.numeri-venaria{
	text-align: center;
	background-color:#1e1e1e; 
	color: #fff;
	width: 50%;
}
.numeri-venaria h2{
	font-size: 4rem;
	text-transform: none;
	font-style: italic;
	color: #fff;
}
.numeri-venaria p{
	margin-bottom: 50px;
}
#gallery .filler_container{width: 30%}
#gallery h2{font-size: 3rem}
.slide{position: relative;width: 70%;}
.slide>div{
	width: 100%;
	height: 600px;
	background-position: center;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	animation: slide 18s infinite;
	opacity: 0;
	z-index: -1000;
	
}
.slide>div:nth-child(1){
	background-image: url("img/foto-venaria-1.jpg")
}

.slide>div:nth-child(2){
	background-image: url("img/foto-venaria-2.jpg");
	animation-delay: 3s;
		
}
.slide>div:nth-child(3){
	background-image: url("img/foto-venaria-3.jpg");
		animation-delay: 6s;
}
.slide>div:nth-child(4){
	background-image: url("img/foto-venaria-4.jpg");
		animation-delay: 9s;
}
.slide>div:nth-child(5){
	background-image: url("img/foto-venaria-5.jpg");
		animation-delay: 12s;
}
.slide>div:nth-child(6){
	background-image: url("img/foto-venaria-6.jpeg");
		animation-delay: 15s;
}
.events{
	background-color:#1e1e1e ;
	
}
.text-event{
	text-align: center;
	color: #fff;
	width: 50%;

}
.filler-e {
	
	border-top: 300px ;
	margin: auto;
}
.img-tavolo{
	
		width: 100%;
		height: 300px;
		
	
}
.img-e{
	width: 50%;
}
.form{
	width: 70%;
	background-color: #5c5b51;
	color: #fff;
	padding: 5%;}
.contact{
	width: 30%;
	background-color: #ebe7df;
	padding: 5%;
	text-align: center;
	}

.grid{
	display: grid;
	grid-template-columns: repeat(2,1fr);
	grid-template-rows: repeat(4,1fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
}

.div1{grid-area: 1/1/2/2; }
.div2{grid-area: 1/2/2/3;}
.div3{grid-area: 2/1/3/2;}
.div4{grid-area: 2/2/3/3;}
.div5{grid-area: 3/1/4/3;}
.div6{grid-area: 4/1/5/3;}

input, label, textarea{
	display: block;
}
input, textarea{
	background-color: transparent;
	border:none;
	border-bottom: 2px solid #fff;
	width: 100%;
}
::placeholder{
	color: #fff;
	font-style: italic;
}
::-webkit-datetime-edit,
::-webkit-calendar-picker-indicator{
	color: #fff;
}

.fl-animated.fl-slide-in-down {
    animation: fl-slide-in-down 1s ease;
    -webkit-animation: fl-slide-in-down 1s ease;
}

@-webkit-keyframes fl-slide-in-down {
    from {
        -webkit-transform: translate3d(0, -50%, 0);
        transform: translate3d(0, -50%, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}


@keyframes slide{
	
	10%{
		opacity: 1;
		
	}
	
	20%{
		opacity: 1;
	}
	30%{
		opacity: 0;
	}
}
.rivela{ opacity: 0}

.rivela.fade-in-up {
	animation: fl-slide-in-up .5s ease forwards; 
	animation-delay: calc(.3s * var(--i));
}

@-webkit-keyframes fl-slide-in-up {
    from {
        transform: translateY(200px);
		opacity: 0;
		transition: all 1s;
    }

    to {
        transform: translateY(0);
		opacity: 1;
    }
}

/* pulsante ticket fixed */
.fix-ticket {
	position:fixed;
	bottom:30px;
	right:30px;
	z-index:2;
}

.btn-ticket {
    border: 0;
    background: var(--primary-color);
    color: #fff;
    display: inline-block;
    position: relative;
    font-weight: 400;
    font-size: 2rem;
    padding: 5px 10px;
    text-decoration: none;
}

.bi-ticket-perforated{
	color:#fff;
	transform: rotate(20deg);
	padding-right: 20px;
	display: inline-block;
}


.btn-ticket:before {
    left: 100%;
    top: 50%;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    transform: scaleY(1.4);
	border: 17px solid transparent;
    border-left-color: var(--primary-color);
    margin-top: -17px;
}

.btn-ticket:after {
    top: 50%;   
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    right: 100%;
    left: auto;
    transform: scaleY(1.4);
	border: 17px solid transparent;
    border-right-color: var(--primary-color);
    margin-top: -17px;
}


.anim{
	margin-left: 20px;
	color: #fff;
	border:none;
	background-color:#5c5b51;
	font-size:30px;
	padding:20px 40px;
	text-transform:capitalize;
	cursor:pointer;
	transform:all 0.3s;
	position:relative;
	;
  }
  .anim:before{
	content:"";
	
	width:24px;
	height:24px;
	top:-5px;
	  left:-5px;
	border-top:2px solid var(--primary-color);
	border-left:2px var(--primary-color);
	transition:all 0.25s;
  }
  .anim:hover:before ,button:hover:after{
	width:104%;
	height:110%;
  }
  .anim:after{
	content:"";
	position :absolute;
	width:24px;
	height:24px;
	bottom:-5px;
	  right:-5px;
	border-bottom:2px solid var(--primary-color);
	border-right:2px solid var(--primary-color);
	transition:all 0.30s;
  }


.wrapHead{
	width: 90%;
	margin: 0 auto;
	transition: all ease-in-out 0.8s;
	scroll-behavior: smooth;
	height: 9vh;
	
  }
  .wrapHead.fixed-to-top{
	width: 96%;
	
  }
  .f-c{
	flex-direction: row;
  }
  .gap{
	gap: 10px;
	justify-content: center;
  }
.bg-grey{
	background: #EAEAEA;
	padding: 8px;
	
}
  
  .menu{
	
	top: 0;
	left: 0;
	width: 100%;
	height: 9vh;
	padding: 10px 0;
	z-index: 3;
	transition: all ease-in-out 0.2s;
  }
 
  .menu.fixed-to-top{
	background: rgb(235, 235, 235);
	position: fixed;
	height: 9vh;
	
  }
  
.fixed .menu{
	position: fixed;
	display: block;
	
	
	
}
.flex-r{
	display: flex;
}
  nav{
	margin-right: 0;
	
  }
  
  nav li{
	display: inline-block;
	margin: 0 4px;
	
  }
  nav li a{
	padding: 15px 0;
	text-decoration: none;
	color:#ebe7df;
	transition: all ease-in-out 0.5s;
	
  }
  nav li a:hover{
	color: #363636;
  }
 


.none-d{
	display: none;
}



  #meny{
	display: none;
}
.fix{position: fixed;}

.logo-w{
	width: 40%;
	padding-top: 15px;

}
.white{
	font-size: 25px;
}
ul .mobile{
	color: #000;
}
.logo-mobile{
	width: 200px;
	margin: 0 auto;
	display: none;
	justify-content: center;
}

.toggle, #drop{ display: none}

.row{
	display: none;
}
.img-responsive{
	display: none;
}
.responsive{
	display: none;
}

.reggia-r{
	display: none;
	
  }
  .reggia-t{
	display:none;
}
@media (max-width:1024px){
	button.none-d{
		display: block;
	}
	
	button.none{
		display: none;
	}
	.reggia-d{
		display: none;
	  }
  .reggia-r{
	display: block;
	width: 100%;
  }
  .hero_image {
    width:100%;
}
.centre{
	font-size: 15px
}
.hero{
	padding: 20px;
}


}

  @media (max-width:767px){
	.flex-r{flex-direction: row;}

	.reggia-t{
		display: block;
		
	}
	.reggia-d{display: none;}
.width-resp{width: 30%;}
	.row{
		flex-direction: row;
		display: block;
	} 
	.flex{
		flex-direction: column;
}
.none{
	display: none;
}
.hero_content{width: 100%;}
.centre{
	
	padding-bottom: 40px;
	width: 100%;
}
.form{
	width: 100%;
	
}
.icona img{
	
	padding:0 50px;
}
.icona{
	width: 100%;
	padding: 30px 0;
}
.none-d{
	display: block;
}
.togf{
	z-index: -1000;
	
}
#meny{
	text-align: right;
	 display: block;
	 padding:50px 30px ;
	 background-color:var(--primary-color);
	width: 100%;
	height: 100%;
	
	 }
	 ul{
		display: flex;
		justify-content: space-around;
	  }
	 .img-responsive img{
		 width: 300px;
	 }
	 .img-responsive{
		 width: 100%;
		 background-color: #000;
		 display: block;
		 height: 2000px;
	 }
	 .responsive{
		 display: block;
	 }
	 .none{
		 display: none;
	 }
	 .imgheader{
		 
		 animation:none ;
		 width: 100%;
	 }
	 .toggle{ 
		 display: flex;
		 flex-direction: column;
		 gap:5px;
		 justify-content: center;
		 height: 50px;
		 width: 30px;
		 margin-left: 10px;
		 z-index: 20;
	 
		 
		 
	 }
	 .toggle div { 
		 height: 3px; 
		 width: 30px;
		 background:#bdbdbd;
		 transition: all .3s;
		 border-radius: 50px;
		 z-index: 2000;
	 }
	 
	 nav {
		 transform: translatex(-1000px);
		 transition: transform .5s;
		 
		 
		 height: 100vh;
		 position: fixed;
		 right: 0;
		 top:0;
	 }
	 
	 
	 #drop:checked ~ nav { 
		 transform: translateX(0);	 
	 }
	 
	 header { 
		 height: 50px;
		
		 width: 100%;
		 top:0;
		 z-index: 1000;
	 }
	
	 header ul {
		 flex-direction: column;
		 text-align: right;
	 }
	 
	 #drop:checked ~ #burger > div:nth-child(1) {
	 transform: translateY(10px) rotate(45deg);
	 }
	 
	 #drop:checked ~ #burger > div:nth-child(2) {
		 opacity: 0;
	 }
	 
	 #drop:checked ~ #burger > div:nth-child(3) {
	 transform: translateY(-6px) rotate(-45deg);
	 }
	 
	 .numeri-img{
		width: 100%;
		height: 2vh;
		transform-origin: center;
	 }


	 .hero,.maps, .filler-container,.filler-text,.numeri-venaria, .icone, #numeri, #gallery, .contact{
		width: 100%;
		align-items: center;
	 }
   






  .venaria-mobile {display: block}
  .venaria {display: none}
  .icone.flex {flex-direction: column}
  .icone {height: auto}
  .info.flex{
	  flex-direction: column-reverse;
  }
  .maps { height: 500px}
  .filler_container, .maps {width: 100%}
  .filler {
  border-top: 150px solid var(--primary-color); 
  }
  .num-img {
	 height: 500px;
     width: 100%;}
  .numeri-venaria.flex {flex-direction: column;}
  #gallery.flex {flex-direction: column;height: 120vh;}
  .slide, #gallery .filler_container {width: 100%;}
  
  

}
.but-r{
	color: #fff;
	border:none;
	background-color:#5c5b51;
	
}
.but-r:hover{
	color: #000000;
	border:none;
	background-color: var(--primary-color);
	
}
.but-d{
	background-color: var(--primary-color);
	width: 90px;
}
  
/* ! Box Sizing */
*, *::after, *::before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
  }