/*Font*/

@font-face{
	font-family: Bulgia;
	src: url('fonts/Bulgia.otf');
}

@font-face{
	font-family: Winky Milky;
	src: url('fonts/Winky Milky.ttf');
}



body{

  background-color: gainsboro;

}



/*.navbar{

  background-color: whitesmoke;

}*/



/*color: LightYellow;*/



.navbar-brand{

  margin-left: 3%;

}



#page-logo{

  width: 85px;

  height: 85px;

  margin-left: -25%;

  aspect-ratio: 1 / 1;

  mix-blend-mode: darken;

}



.navbar-nav{

  margin-left: 7%;

}



.nav-item {

  /*margin-left: 8px;*/

  margin-left: 2%;

  margin-right: 1%;

  padding-right: 3%;

  padding-left: 3%;

  padding-top: 0%;

  border-right-style: solid;

  border-right-width: 2px;

  border-right-color: transparent;

  width: 22%;

  height: 76px;

  margin-bottom: -12%;

  margin-top: -5%;

  /*background-color: #F5F5F5;

  border-radius: 10%*/

}





#other-tabs{

  padding-right: 19.5%;

  width: 22%;

}





#hist-tab{

  padding-right: 2.5%;

  width: 24%;

}







.nav-item:hover {

  background-color: white;

}







/*#tab-gallery, #tab-contact{

  margin-left: 1%;

  padding-right: 23%;

  padding-left: 3%;

}*/



#tab-gallery{

  padding-left: 2.8%;

  padding-right: 24.5%

}



#tab-contact{

  padding-left: 3%;

  padding-right: 24.8%;

}



#first-tab{

  border-left-style: solid;

  border-left-width: 2px;

  border-left-color: transparent;

  margin-right: 3%;

  padding-left: 2%;

  padding-right: 20.2%;

  width: 22.6%;

}



.navbar-nav{

  margin-left: 106px;

}



/*.nav-item:after{

  content: " | ";

  color: white;

}*/



.nav-link{

  font-family: "Playfair Display";

  font-weight: normal;

  text-transform: none;

  color: #ead400;

}



a.nav-link:hover{

  color: DarkGoldenRod;

}





.navbar-nav .nav-link.active{

  font-family: "Playfair Display";

  font-weight: normal;

  text-transform: none;

  color: DarkGoldenRod;

}



a.nav-link:focus{

  color: DarkGoldenRod;

}





.carousel{

  width: 55%;

  margin: auto;

  margin-top: 4%;

  margin-bottom: 15%;

  margin-left: 22%;

  /*height: 75%;*/

}













 .carousel-img {

  height: 570px;

  object-fit: cover;

}













































/*.carousel-item{

  margin:3%;

}*/







/*.carousel-item img{

  object-fit: contain;

}*/







/*.car-img-1, .car-img-2, .car-img-3, .car-img-4{

width:100%;

}*/









.carousel-indicators{

}





li::marker{

  font-size: 0px;

}



@keyframes dissolvence {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes entraDaSinistra{
	from{
		opacity: 0;
		transform: translateX(-100px);
	}
	to{
		opacity: 1;
		transform: translateX(0);
	}
}


#name-ph{
  opacity: 0;
  animation: dissolvence 1.6s ease-in-out forwards;
  margin-bottom: 7%;
  margin-top: 5%;
  text-align: center;
  font-family: 'Winky Milky';
  font-size: 465%;
  color: ghostwhite;
  text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
}


#quote-ph {
  opacity: 0;
  animation: entraDaSinistra 1.1s ease-out forwards;
  margin-bottom: 6%;
  margin-top: 5%;
}



#quote {
  margin-left: 38%;
  font-family: "Cinzel Decorative", serif;
  font-size: 104%;
  font-style: normal;
  color: ghostwhite;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}




#paragraph-1, #paragraph-3{

 text-align: center;

 font-size: 110%;

 padding-bottom: 2%;

 padding-top: 1%;

}







#ph-title-1, #ph-title-2, #ph-title-3 {

  margin-left: 2%;

  text-shadow: 2px -4px 14px black;

}









#paragraph-2{

  text-align: center;

  font-size: 110%;

  color:ghostwhite;

  border: 3px solid transparent;

  padding-bottom: 2%;

  padding-top: 1%;

  width: 100%;

  background-image: url("img/gallery-image.jpg");

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  background-origin: border-box;

  filter: grayscale(100%);

  transition: 1s ease;

}







#paragraph-2:hover{

filter: grayscale(0%);

transition: 1s ease;

}









#paragraph-1{

  color:ghostwhite;

  border: 3px solid transparent;

  width: 100%;

  background-image: url("img/grotta-di-san-michele-1.png");

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  background-origin: border-box;

  filter: grayscale(100%);

  transition: 1s ease;

}







#paragraph-1:hover{

filter: grayscale(0%);

transition: 1s ease;

}







#paragraph-3{

  color:ghostwhite;

  border: 3px solid transparent;

  width: 100%;

  background-image: url("img/def-history-image.jpg");

  background-position: center;

  background-position-y: 9%;

  background-repeat: no-repeat;

  background-size: cover;

  background-origin: border-box;

  filter: grayscale(100%);

  transition: 1s ease;

}







#paragraph-3:hover{

filter: grayscale(0%);

transition: 1s ease;

}











#paragraph-3{

  z-index: 1;

  background-color: #faebd7;

}









/*#paragraph-3{

  background-color: #faebd7;

}*/







#p-background-1{

  width:10%;

  z-index: -1;

}





#phtext-2{

  margin-left: 41.5%;

  text-shadow: 1px 1px 3px black;

}





#phtext-3{

  text-shadow: 0px 0px 4px black;

}







#phtext-1, #phtext-2, #phtext-3{

 text-align: justify;

}



.phbtn{

  margin-left: 2%;

  margin-top: 0.5%;

  margin-bottom: 1%;

  border-radius: 8px;

  border-style: solid;

  border-color: white;

  background-color: white;

  text-decoration: none;

  color: lightgrey;

  padding: 0.35%;

  text-shadow: 0px 0px 0px lightgrey;

}



.phbtn:hover{

  background-color: transparent;

  color: white;

  border-width: 2px;

  border-color: white;

  text-shadow: 1px 1px 5px grey;

}







#principal-container {

  padding-bottom: 0%;

  margin-top: -13%;

  padding-top: 13%;

  margin-bottom: -1%;

}





#info-p, #visit-p, #contact-p{

  padding-top:0%;

}











.footer-text{

  color: black;

}



.footer-text:hover{

  color: white;

  text-shadow: 2px 1px 3px grey;

}





#btn-p{

  margin-left: 2%;

  margin-top: -8.5%;

  margin-bottom: 1%;

  border-radius: 8px;

  border-style: solid;

  border-color: white;

  background-color: white;

  text-decoration: none;

  color: lightgrey;

  padding: 1.35%;

  width: 30%;

  text-shadow: 0 0 0px grey;

}





#btn-p:hover{

  background-color: #ebebeb;

  color: white;

  border-width: 2px;

  border-color: white;

  text-shadow: 2px 1px 2px darkgrey;

}





#email-field{

  margin-top: 3% ;

  margin-left: 2%;

}











/* gallery */





.galleria-titolo {

      font-size: 2rem;

      font-weight: bold;

      text-align: center;

      margin: 2rem 0 1rem;

      position: relative;

    }

    .galleria-titolo::before,

    .galleria-titolo::after {

      content: "";

      height: 2px;

      background-color: #000;

      position: absolute;

      top: 50%;

      width: 40%;

    }

    .galleria-titolo::before { left: 0; }

    .galleria-titolo::after { right: 0; }



    .thumbnail {

      width: 80px;

      height: 50px;

      object-fit: cover;

      cursor: pointer;

      transition: border 0.3s;

      border: 3px solid transparent;

    }

    .thumbnail.active {

      border-color: #0d6efd;

    }



    .modal-backdrop.show {

      background-color: rgba(0, 0, 0, 0.85);

    }



    /*.modal .carousel-inner img {

      max-height: 80vh;

      object-fit: contain;*/







    /*#mainCarousel .carousel-inner {

       height: 500px;

     }



    #mainCarousel .carousel-inner img {

       max-height: 500px;

       width: auto;

       margin: 0 auto;

       display: block;

     }



     #mainCarousel .carousel-indicators{

       top: 93%;

  }*/