/*
Theme Name: Santoriello Theme
Author: Santoriello
Author URI: https://www.santoriello.it
*/

@charset "UTF-8";

/* BODY
-------------------------------------------------- */
    @font-face {
    font-family: 'Trueno Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Trueno Regular'), url('../font/TruenoRg.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Trueno Regular Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Trueno Regular Italic'), url('../font/TruenoRgIt.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Trueno UltraLight';
    font-style: normal;
    font-weight: normal;
    src: local('Trueno UltraLight'), url('../font/TruenoUltLt.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Trueno UltraLight Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Trueno UltraLight Italic'), url('../font/TruenoUltLtIt.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Trueno Light';
    font-style: normal;
    font-weight: normal;
    src: local('Trueno Light'), url('../font/TruenoLt.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Trueno Light Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Trueno Light Italic'), url('../font/TruenoLtIt.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Trueno SemiBold';
    font-style: normal;
    font-weight: normal;
    src: local('Trueno SemiBold'), url('../font/TruenoSBd.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Trueno SemiBold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Trueno SemiBold Italic'), url('../font/TruenoSBdIt.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Trueno Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Trueno Bold'), url('../font/TruenoBd.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Trueno Bold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Trueno Bold Italic'), url('../font/TruenoBdIt.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Trueno Bold Outline';
    font-style: normal;
    font-weight: normal;
    src: local('Trueno Bold Outline'), url('../font/TruenoBdOl.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Trueno Bold Outline Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Trueno Bold Outline Italic'), url('../font/TruenoBdOlIt.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Trueno ExtraBold';
    font-style: normal;
    font-weight: normal;
    src: local('Trueno ExtraBold'), url('../font/TruenoExBd.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Trueno ExtraBold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Trueno ExtraBold Italic'), url('../font/TruenoExBdIt.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Trueno ExtraBold Outline';
    font-style: normal;
    font-weight: normal;
    src: local('Trueno ExtraBold Outline'), url('../font/TruenoExBdOl.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Trueno ExtraBold Outline Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Trueno ExtraBold Outline Italic'), url('../font/TruenoExBdOlIt.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Trueno Black';
    font-style: normal;
    font-weight: normal;
    src: local('Trueno Black'), url('../font/TruenoBlk.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Trueno Black Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Trueno Black Italic'), url('../font/TruenoBlkIt.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Trueno Black Outline';
    font-style: normal;
    font-weight: normal;
    src: local('Trueno Black Outline'), url('../font/TruenoBlkOl.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Trueno Black Outline Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Trueno Black Outline Italic'), url('../font/TruenoBlkOlIt.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Trueno UltraBlack';
    font-style: normal;
    font-weight: normal;
    src: local('Trueno UltraBlack'), url('../font/TruenoUltBlk.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Trueno UltraBlack Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Trueno UltraBlack Italic'), url('../font/TruenoUltBlkIt.woff') format('woff');
    }


/* BODY
-------------------------------------------------- */
body {
    padding-top: 15.5rem;
    padding-bottom: 0!important;
    padding-bottom: 3rem;
    font-family: 'Montserrat';
    font-size: 12px;
}

main {
  position: relative;
}

h1, h2, h3 {
  font-family:'Trueno Bold'; 
  font-weight:normal;
}

.btn-primary {
  border-radius: 0!important;
  border: 0;
  font-weight: 600;
  padding: 12px 20px!important;
  text-transform: uppercase;
  font-family: 'Montserrat';
  font-size: 16px;
  font-weight: 300;
}

.padding-block {
      padding-top: 60px;
      padding-bottom: 60px;
}

.featurette-divider {
    margin: 30px 0!important;
    border: 0;
}

.modal-content {
  border-radius: 0;
}

@media (max-width: 767px) {
  body {
    padding-top: 210px;
}

  .padding-block {
      padding-top: 40px;
      padding-bottom: 40px;
  }

  .featurette-divider {
    margin: 25px 0!important;
  }
}


/* HEADER
-------------------------------------------------- */
.navbar {
    background-color:rgba(255, 255, 255, 0.98);
    padding: 50px 0;
}

.navbar-brand {
    color: black;
    display: inline-block;
    width: 100%;
    text-align: center;
    margin: 0;    
}

.navbar-brand img {
  position: relative; z-index: 1;  
  width: 300px; /* Larghezza iniziale */
  height: auto; /* Mantiene le proporzioni */
  transition: width 0.5s ease-in-out; /* Effetto transizione */
}

.sticked .navbar-brand>img {
  width:18%;
  opacity: 1;
}

@media (max-width: 767px) {
  .navbar-brand img {
    width: 250px; 
  }

  .sticked .navbar-brand>img {
    width:35%;
  }
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 4rem;
  text-align: center;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 2rem;
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  height: 32rem;
}

.carousel-control-next:focus, .carousel-control-next:hover, .carousel-control-prev:focus, .carousel-control-prev:hover {
  opacity: 1;
}

.carousel-control-prev .carousel-wrap-icon, .carousel-control-next .carousel-wrap-icon {
  background-color: #635939;
  padding: 10px;
}

.carousel-wrap-icon:hover, .carousel-wrap-icon:focus {
  background-color: #bf9474;
}

.carousel-control-prev, .carousel-control-next {
  opacity: 1;
}

.carousel-control-next-icon, .carousel-control-prev-icon {
  background: none;
}

.carousel-control-next-icon img, .carousel-control-prev-icon img {
  filter: invert(1) sepia(0) saturate(5) hue-rotate(25deg);
  width: 2rem;
  height: 2rem;
}

.carousel-indicators {
    margin-bottom: -40px;
  }

.carousel-indicators [data-bs-target] {
  width: 40px;
  opacity: 1;
  background-color: #bf9474;
}

.carousel-indicators .active {
  background-color: #635939;
}

.carousel-item .btn-primary {
  background-color: #635939;
}

.carousel-item .btn-primary:hover, .carousel-item .btn-primary:focus {
  background-color: #bf9474;
}

.video-embed {
  position: relative;
  /*height: 22rem!important;*/
  background-color: #e5e5f7;
  opacity: 0.8;
  background: repeating-linear-gradient( 45deg, #d5d5d5, #d5d5d5 5px, #e5e5f7 5px, #e5e5f7 25px );
}

.embed-responsive-item {
  height: 100%!important;
}

#modalVideo .btn-secondary {
  background-color: #635939;
  color: #fff;
  border: 0;
  border-radius: 0;
  text-transform: uppercase;
  font-family: 'Montserrat';
  font-size: 16px;
  font-weight: 300;
}

#modalVideo .btn-secondary:hover, #modalPrivacy .btn-secondary:focus {
  color: #fff;
  text-decoration: none;
  background-color: #bf9474;
}

@media (max-width: 1600px) {
  .carousel {
    margin-bottom: 20px;
  }
  
  .carousel-item {
    height: auto;
  }
}

@media (max-width: 991px) {
  .carousel-caption {
    bottom: 25%;
  }

  .carousel-caption h1 {
    font-size: 16px;
    display: none;
  }

  .carousel-caption p.desc {
    font-size: 12px;
    display: none;
  }

  .carousel-caption p.cta {
    margin: 0;
    border: 0;
  }

  .carousel-caption .btn-primary {
    font-size: 12px;
  }
}

@media (max-width: 767px) {
  .carousel-indicators {
    margin-bottom: -20px;
  }
  .carousel-control-prev, .carousel-control-next {
    display: none;
  }
}

/* MARKETING CONTENT
-------------------------------------------------- */
/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
/* rtl:begin:ignore */
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}
/* rtl:end:ignore */


/* HERO
-------------------------------------------------- */
.hero h1 {
  font-size: 30px;
  color: #635939!important;
  text-transform: uppercase;
  padding-bottom: 25px;
  margin-bottom: 25px;
  position: relative;
}

.hero h1::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 48.6%;
  width: 40px;
  height: 2px;
  background: #cbaa88;
}

.hero .lead {
  font-size: 16px;
  color: #635939!important;
}

.hero .lead strong {
  font-weight: 800;;
}

@media (max-width: 460px) {
  .hero h1::after {
    left: 44.6%;
  }
}


/* FEATURETTES
------------------------- */
.wrap-featurette {
  /*background-image: url("../imgs/pergola-bg.png");*/
  background-repeat: no-repeat;
  background-size: 80%;
  background-position: bottom center;
  background-color: #fffcf8;
}

.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
/* rtl:begin:remove */
h2.featurette-heading {
  font-size: 30px;
  color: #635939;
  text-transform: uppercase;
}

h3.featurette-heading {
  color: #635939;
  line-height: 28px !important;
}

h3.featurette-heading span {
  font-size: 16px;
}

.featurette .lead {
  font-size: 16px;
  color: #635939;
}

.featurette .lead strong {
  font-weight: 900;
}

.featurette-image {
  max-width: stretch!important;
  box-shadow: 6px 7px 19px -11px rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: 6px 7px 19px -11px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 6px 7px 19px -11px rgba(0,0,0,0.75);
}

.wrap-btn-gallery {text-align: right;}

.featurette .btn-primary {
  background-color: #635939;
}

.featurette .btn-primary:hover, .featurette .btn-primary:focus {
  background-color: #bf9474;
}

.fancy-gallery {
  display: none;
}

@media (max-width: 767px) {
  .featurette-heading, .featurette .lead, .wrap-btn-gallery {
    text-align: center; 
  }
  .featurette-image {
    margin-bottom: 20px;
  }
}

/* rtl:end:remove */


/* FANCYBOX
------------------------- */
.fancybox__thumbs, .f-carousel__toolbar {
  display: none;
}

.f-button {
  border-radius: 0;
  background-color: #635939;
}

.f-button:hover, .f-button:focus {
  background-color: #bf9474!important;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    line-height: 1.4;
  }
}

/* HERO
-------------------------------------------------- */
@media (min-width: 992px) {
  .rounded-lg-3 { border-radius: .3rem; }
}

/* CONTATTACI
-------------------------------------------------- */
  #contact{
    /*background-color: #635939;*/
    background-color: #cbaa88;
    font-size: 16px;
  }

.form-signin, .dovesiamo {
  padding: 1rem;
  color: white;
}

.form-signin h3, .dovesiamo h3 {
  color: white;
}

.form-signin .form-floating:focus-within {
  z-index: 2;
}

.form-signin input, .form-signin textarea {
  margin-bottom: -1px;
  border-radius: 0;
  background-color: #e8ccb0;
  color: white;
  border: 0;
  margin-bottom: 10px;
}

.form-floating>.form-control, .form-floating>.form-control-plaintext, .form-floating>.form-select {
  height: auto!important;
}

.btn-sendform {
  text-align: right;
}

.form-floating {
  margin-bottom: 15px;
}

.form-floating>label {
  color: #574e30;
}

.form-signin .my-3 {
  margin-bottom: 0!important;
}

.wrap-form {
  margin-top: 15px;
}


.form-check {
  padding-left: 35px;
}

.form-check .btn {
  padding: 0;
  margin: 0;
  vertical-align: inherit;
  color: #574e30;
  text-decoration: underline;
}

.form-check .btn:hover {
  color: #fff;
  text-decoration: none;
}

.btn-sendform .btn-form {
  background: white;
  color: #635939;
}

.btn-sendform .btn-form:hover, .btn-sendform .btn-form:focus {
  color: #fff;
  text-decoration: none;
  background-color: #70684c;
}

.form-check-input[type=checkbox] {
  border-radius: 0;
}

.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.field-obb {
  font-size: 11px;
}

.alert-success {
  border: 0;
  border-radius: 0;
}

#modalPrivacy h2{
  font-size: 1rem;
}

#modalPrivacy .btn-secondary {
  background-color: #635939;
  color: #fff;
  border: 0;
  border-radius: 0;
  text-transform: uppercase;
  font-family: 'Montserrat';
  font-size: 16px;
  font-weight: 300;
}

#modalPrivacy .btn-secondary:hover, #modalPrivacy .btn-secondary:focus {
  color: #fff;
  text-decoration: none;
  background-color: #bf9474;
}

.gmap {
  max-width: stretch!important;
  box-shadow: 6px 7px 19px -11px rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: 6px 7px 19px -11px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 6px 7px 19px -11px rgba(0,0,0,0.75);
}

.address {
  text-align: center;
  padding: 10px 0 0 0;
  font-weight: 400;
}

.perche .card {
  border: 0!important;
  border-radius: 0!important;
  text-align: center!important;
}

.perche .card .ico, .perche .card h4, .perche .card .desc {
  color: #635939;
}

.perche .card .ico img {
  width: 140px;
}

.perche .card h4 {
  font-family: 'Trueno Bold';
}

.perche .card .desc {
  font-size: 16px;
}

@media (max-width: 767px) {
  .form-check {
    margin-top: 0!important;
  }
  .dovesiamo h3 {
    padding-top: 25px;
  }

  .perche .card {
    margin-bottom: 15px;
  }

  .btn-sendform {
    margin-top: 10px;
  }
}


/* WHATSAPP
------------------------- */
.whatsapp {
  max-width: 570px;
  text-align: center;
}

.whatsapp a {
  padding: 0;
  margin: 0;
  font-weight: 900;
  display: inline-block;
}

.whatsapp a:hover, .whatsapp a:focus {
  color: #fff;
}


.whatsapp a img {
    width: 40px;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
    filter: brightness(0) saturate(100%) invert(32%) sepia(3%) saturate(4995%) hue-rotate(8deg) brightness(97%) contrast(83%);
}

.whatsapp a:hover img, .social a:focus img {
  filter: invert(1) sepia(0) saturate(5) hue-rotate(25deg);
}



/* SOCIAL
-------------------------------------------------- */
.social  {
  text-align: center;
  /*background-color: #70684c;*/
  background-color: #e8ccb0;
}

.social h3 {
  color: white;
}

.social a img {
    width: 40px;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
    filter: invert(1) sepia(0) saturate(5) hue-rotate(25deg);
}

.social a img:hover, .social a img:focus {
  filter: brightness(0) saturate(100%) invert(32%) sepia(3%) saturate(4995%) hue-rotate(8deg) brightness(97%) contrast(83%);
}

.to-top {
  position: fixed;
  right: 15px;
  bottom: 40px;
  padding: 8px;
  background-color: #635939;
  display: none;
}

.to-top:hover, .to-top:focus {
  background-color: #bf9474;
}

.to-top img {
  filter: invert(1) sepia(0) saturate(5) hue-rotate(25deg);
  display: inline-block;
  width: 2rem;
  height: 2rem;
}


/* FOOTER
-------------------------------------------------- */
.footer p {
  margin: 0;
}

.footer p.copy, .footer p.credits {
  display: inline-block;
  width: auto;
}

.footer a {
  color: #635939;
  font-weight: bold;
}

.footer a:hover, .footer a:focus {
  text-decoration: none;
}

@media (max-width: 767px) {
  .footer p.copy, .footer p.credits {
    width: 80%;
    text-align: left;
    float: left!important;
  }
  .float-none {
    float: none;
  }
}