/* Reset */ 
body, html{ font-family: 'Inter', Arial, Helvetica, sans-serif; line-height: 1.5; font-size: 16px; box-sizing: border-box;margin: 0;padding: 0;}*,*:before,*:after{ box-sizing: border-box; }h1,h2,h3,h4,h5,h6, p, ol, ul{margin: 0 0 0 0;padding: 0;}ol,ul{padding-left: 20px;line-height: 1.5;}img{height: auto;}h1{font-size: 4rem;} h2{font-size: clamp(1.5rem, 0.9718rem + 1.6901vw, 3rem);} h3{font-size: 2rem;} h4{font-size: 1rem;} h5{font-size: 0.8rem;} h6{font-size: 0.6rem;}a{text-decoration:none}


/* Utilities */
:root {
    --brown-dark: #A0937D;
    --brown-middle: #E7D4B5;
    --brown-light: #EFE7E3;
    --white: #FFFFFF;
    --green: #B6C7AA;
    --black: #3C3C3C;
    --grey: #FBFBFB;
}

@font-face {
  font-family: 'Nunito';
  src: local('../fonts/Nunito ExtraLight'), local('Nunito-ExtraLight'),
      url('../fonts/Nunito-ExtraLight.woff2') format('woff2'),
      url('../fonts/Nunito-ExtraLight.woff') format('woff'),
      url('../fonts/Nunito-ExtraLight.ttf') format('truetype'),
      url('../fonts/Nunito-ExtraLight.svg#Nunito-ExtraLight') format('svg');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: local('../fonts/Nunito Regular'), local('Nunito-Regular'),
      url('../fonts/Nunito-Regular.woff2') format('woff2'),
      url('../fonts/Nunito-Regular.woff') format('woff'),
      url('../fonts/Nunito-Regular.ttf') format('truetype'),
      url('../fonts/Nunito-Regular.svg#Nunito-Regular') format('svg');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: local('../fonts/Nunito Medium'), local('Nunito-Medium'),
      url('../fonts/Nunito-Medium.woff2') format('woff2'),
      url('../fonts/Nunito-Medium.woff') format('woff'),
      url('../fonts/Nunito-Medium.ttf') format('truetype'),
      url('../fonts/Nunito-Medium.svg#Nunito-Medium') format('svg');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: local('../fonts/Inter Bold'), local('Nunito-Bold'),
      url('../fonts/Inter-Bold.woff2') format('woff2'),
      url('../fonts/Inter-Bold.woff') format('woff'),
      url('../fonts/Inter-Bold.woff') format('truetype'),
      url('../fonts/Inter-Bold.svg#Inter-Bold') format('svg');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: local('../Inter Regular'), local('Inter-Regular'),
      url('../fonts/Inter-Regular.woff2') format('woff2'),
      url('../fonts/Inter-Regular.woff') format('woff'),
      url('../fonts/Inter-Regular.ttf') format('truetype'),
      url('../fonts/Inter-Regular.svg#Inter-Regular') format('svg');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: local('../Inter Bold'), local('Inter-Bold'),
      url('../fonts/Inter-Bold.woff2') format('woff2'),
      url('../fonts/Inter-Bold.woff') format('woff'),
      url('../fonts/Inter-Bold.ttf') format('truetype'),
      url('../fonts/Inter-Bold.svg#Inter-Bold') format('svg');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.pt-1{padding-top: 3vh;}
.pt-2{padding-top: 5vh;}
.pt-3{padding-top: 10vh;}
.pb-1{padding-bottom: 3vh;}
.pb-2{padding-bottom: 5vh;}
.pb-3{padding-bottom: 10vh;}

.hide{display: none;}
.space{height: 10vh;}

.img-res{height: auto; width: 100%;}

h1,h2,h3,h4,h5,h6{font-family: "Nunito", Helvetica, Arial, sans-serif;font-weight: 200;}
h4{font-weight: 600;}
p{font-family: "Inter", Helvetica, Arial, sans-serif;font-weight: 400;text-align: justify;}
a{color: var(--black)}
a:hover{color:var(--brown-dark)}
.text-center{text-align: center;}
.text-justify{text-align: justify;}
.text-p{font-size: clamp(1rem, 0.8592rem + 0.4507vw, 1.4rem);}

/* DEVELOP */
/* #intro{display: none;}
#slider{display: none;}
#home-contacts{display: none;}
#services{display: none;} */
/* .socials{display: none !important;} */


body{color: var(--black);}

/* header */
.header{background-color: var(--white);position: sticky; top:0;left:0;z-index: 9999;width: 100%;padding: 10px 20px;}
.header__content{max-width: 1200px;width: 100%;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;}

.header__logo img{max-height: 80px;}
.header__logo,
.header__quick{display: flex; align-items: center;}
.header__quick .button{padding: 20px; background-color: var(--brown-dark);color:var(--white);border-radius: 15px;font-size: clamp(0.75rem, 0.662rem + 0.2817vw, 1rem);}

.header__menu{padding: 0;margin: 0;}
.header__menu li{display: inline-block;}
.header__menu li a{color:var(--brown-dark); opacity: 0.8;display: block;padding: 16px;font-size: clamp(0.75rem, 0.5563rem + 0.6197vw, 1.3rem);}
.header__menu li.curr a{background-color: var(--brown-dark);}
.header__menu li a:hover{background-color: var(--brown-dark);color: var(--white); border-radius: 15px;}

@media screen and (max-width: 1024px){
  .header__logo img{height: 50px;}
}

@media screen and (max-width: 832px) {
  .header__menu{   
    position: absolute; top:78px; left:0; background-color: var(--brown-dark); width: 100%; height: 100vh;
    height: 0vh; overflow: hidden;transition: all 1s cubic-bezier(.215, .61, .355, 1);
  }

  .header__menu li{width: 100%;border-bottom: 1px solid var(--brown-dark)}
  .header__menu li a{color:var(--white);font-size: clamp(1.75rem, 1.2813rem + 2.3438vw, 2.5rem);}
  .menu-open .header__menu{height: 100vh;padding: 3%;}

  .icon-hamburger{height: 50px;width: 40px;margin-left: 20px;padding-top: 5px;}
  .icon-hamburger span{height: 2px; width: 30px;background: var(--brown-dark);position: relative;display: block;margin-top: 11px;transition: all 0.2s cubic-bezier(.215, .61, .355, 1);}

  .menu-open .icon-hamburger span:nth-child(1){transform: rotate(45deg) translateY(9px);}
  .menu-open .icon-hamburger span:nth-child(2){transform: rotate(-45deg) translateY(-9px);}

  .header__quick{display: flex; justify-content: flex-end; width: 50%;}
  .header__quick a{visibility: hidden;}

}

/* Intro */
.intro__img{background: url('../images/panoramica-dal-balcone-sut-l-ala-bed-and-breakfast-netro-biella.jpg') no-repeat center center; background-size:cover;height: calc(100vh - 100px);
  opacity: 1;
  backdrop-filter: saturate(180%) blur(20px);
	animation: fade 4s ease-in-out;
}
@keyframes fade {from {opacity: 0;}}
.intro__text__container{display: flex;justify-content: center;align-items: center;position: absolute;left: 0;right: 0;top: 0;bottom: 0;flex-direction: column;}
.intro__text{background-color: var(--white);opacity: 0.9;color: var(--black);padding: 50px;border-radius: 25px;text-align: center;max-width: 50%;}
.intro__text p{font-size: clamp(1rem, 0.8239rem + 0.5634vw, 1.5rem);}

@media (max-width: 1366px) {
  .intro__text{max-width: 90%;padding: 25px;border-radius: 10px;}
}

/* Slider */
.slider{background-color: var(--grey)}
.card{border-radius: 10px;overflow: hidden;display: flex;flex-direction: row;box-shadow: 10px 10px 5px #d0d0d0;margin-bottom: 20px;}
.card__img, .card__text{background-color: var(--white); width: 50%;}
.card__img{border-radius: 10px;display:block;background-position: center center;background-size:cover;}
.card__text{display: flex;flex-flow: row wrap;padding: 20px;}
@media screen and (max-width: 1024px){
  .card{flex-direction: column;}
  .card__img, .card__text{width: 100%;}
  .card__img{height: 360px;}
}
@media screen and (max-width: 768px){
  .card{margin: 0 10px 15px 10px;}
}
.splide{padding-bottom: 20px;}
.splide__pagination{bottom: 0 !important;}
.splide__pagination__page{height: 12px !important; width: 12px !important; background-color: #d0d0d0 !important;}
.splide__pagination__page.is-active{background-color: var(--black) !important; transform: none !important;}

/* services - netro-services*/
.services, .netro-services{color: var(--black)}
.services__items, .netro-services__items{max-width: 1200px;width: 100%;display: flex;justify-content: space-evenly;align-items: center;flex-wrap: wrap;margin: 0 auto;}
.services__item, .netro-services__item{display: flex;align-items: center;flex-direction: column;padding: 1rem 0;}
.services__item i, .netro-services__item i{margin-bottom: 15px;color: var(--brown-dark)}
.netro-services__item img{height: 50px;margin-bottom: 15px;}

@media screen and (max-width: 1200px){
  .services__item, .netro-services__item{
    width: 33.33%;
  }
}
@media screen and (max-width: 800px){
  .services__item, .netro-services__item{
    width: 100%;
  }
}

/* home-contacts */
.home-contacts{background-color: var(--grey);}
.home-contacts__items{max-width: 1200px;width: 100%;display: flex;justify-content: space-between;align-items: center;flex-flow: wrap;margin: 0 auto;}
.home-contacts__item{display: flex;align-items: center;flex-direction: column;padding: 1rem 0;}
.home-contacts__item i{margin-bottom: 15px;color: var(--brown-dark)}

@media screen and (max-width: 1260px){
  .home-contacts{
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media screen and (max-width: 768px){
  .home-contacts__item{
    width: 100%;
  }
}

/* experience */
.experience{background-color: var(--grey);}
.experience__items{max-width: 1200px;width: 100%;display: flex;justify-content: space-between;align-items: baseline;flex-flow: wrap;margin: 0 auto;}
.experience__item{display: flex;flex-direction: column;width: 50%;padding: 1rem;}
.experience__item h3{font-size: 1rem;font-weight: 800;}

@media screen and (max-width: 1260px){
  .experience{
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media screen and (max-width: 768px){
  .experience__item{
    width: 100%;
  }
}

/* footer */
.footer{ background-color: var(--brown-dark);color: var(--white);width: 100%;padding: 30px 20px; }
.footer a{color: var(--white)}
.footer__columns{max-width: 1200px;width: 100%;margin: 0 auto; display: flex;justify-content: space-between;flex-direction: row;border-bottom: 1px solid var(--white);padding-bottom: 1rem;}
.footer__column{display: flex;flex-direction: column;}
.footer__row{display: flex;flex-direction: row;width: 30%;justify-content: space-around;align-items: center;}
.footer__item{display: flex;align-items: baseline;}
.footer__column h4{font-weight: 600;padding-bottom: 0.5rem;}
.footer__item p{padding-left: 10px;}
.socials .footer__item a img{height: 40px;}
/* .socials .footer__item a .h30px{height: 30px;} */
#div-footer-mobile{display: none;}

@media (max-width: 992px) {
  body{margin-bottom: 50px;}
  #div-footer-mobile {
      position: fixed;
      bottom: 0;
      z-index: 1;
      display: flex;
      background-color: var(--brown-dark);
      height: 50px;
  }
  .div-footer-mobile-container {
    display: flex;
    width: 100vw;
  }
  .div-footer-mobile-item {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .div-footer-mobile-item a {
    display: block;
    font-weight: 600;
    transition: .5s;
    text-align: center;
  }
  .div-footer-mobile-item i{margin-right: 0.5rem !important;}
  .div-footer-mobile-item a, .div-footer-mobile-item i{color: var(--white);}
}


@media screen and (max-width: 768px){
  .footer__columns{flex-direction: column;align-items: baseline;}
  .footer__row{width: 100%;}
}

/* copyright */
.copyright{padding-top: 10px;}

/* title*/
.title__text__container{display: flex;justify-content: center;align-items: center;}
.title__img{display: flex;justify-content: center;align-items: center;flex-direction: column;
  opacity: 1;
  backdrop-filter: saturate(180%) blur(20px);
	animation: fade 4s ease-in-out;
}
@keyframes fade {from {opacity: 0;}}
.title__text{background-color: var(--white);opacity: 0.9;color: var(--black);padding: 2rem;border-radius: 10px;text-align: center;line-height: 1;}
.title__text h1{font-size: clamp(1.5rem, 0.9718rem + 1.6901vw, 3rem);}

@media (max-width: 1366px) {
  .title__text{margin-left: 2rem;margin-right: 2rem;}
}

/* contatti */
#title-contacts .title__img{background: url('../images/biella-vista-dal-piazzo-michael-musto.jpg') no-repeat center center;background-size:cover;height: 50vh;}
.contacts-wrapper{max-width: 1200px;width: 100%;margin: 0 auto;}
.contacts-wrapper p:first-child{font-size: 1.2rem;font-weight: 600;}
.contacts-content{width: 100%;display: flex;align-items: center;flex-direction: row;}
.contacts{width: 33.33%;}
.contacts p:first-child{font-size: 1.05rem;font-weight: 400;}
.contacts__item{display: flex;align-items: center;flex-direction: row;color: var(--brown-dark);margin-bottom: 1rem;}
.contacts__item h2, .contacts__item p{margin-bottom: 0;}
.contacts__item h2{font-size: 24px;}
.contacts__item__text{display: flex;align-items: start;flex-direction: column;padding-left: 20px;}

#map{width: 66.66%;align-self: stretch;}

@media screen and (max-width: 1260px){
  .contacts-wrapper{
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media screen and (max-width: 1200px){
  .contacts__item h2{font-size: 20px;}
}

@media screen and (max-width: 1024px){
  .contacts-content{flex-direction: column;}
  .contacts{width: 100%;}
  #map{width: 100%;height: 500px;}
  .contacts__item h2{font-size: 32px;}
}

/* gallery */
#title-gallery .title__img{background: url('../images/viverone-tramonto-stormo-uccelli-sut-l-ala-bed-and-breakfast-netro-biella.jpg') no-repeat center center; background-size:cover;height: 50vh;}
.grid-gallery {width: 100%;max-width: 1200px;margin: 0 auto;}
.grid-gallery p:first-child{font-size: 1.2rem;font-weight: 600;}
.grid-gallery__items{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: 250px;
  grid-auto-flow: dense;
  grid-gap: 20px;
}

.grid-gallery__items .grid-gallery__item{
  position: relative;
  background-color: #efefef;
  overflow: hidden;
}

.grid-gallery__items .grid-gallery__item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.grid-gallery__items .grid-gallery__item:hover img{
  transform: scale(1.1);
}

.grid-gallery__items.grid-gallery__item a{
  cursor: zoom-in;
}

.grid-gallery__items .grid-gallery__item:nth-child(3n - 2) {
  grid-column: span 2;
  grid-row: span 2;
  }

  @media screen and (max-width: 1260px){
    .grid-gallery{
      padding-left: 20px;
      padding-right: 20px;
    }
  }

  /* Let's make it responsive */
  @media screen and (max-width: 768px) {
    .grid-gallery__items {
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-auto-rows: 250px;
  }

  .grid-gallery__items .grid-gallery__item:nth-child(3n - 2) {
    grid-column: unset;
    grid-row: unset;
  }
}

/* appartament */
#title-appartament .title__img{background: url('../images/parco-burcina-pollone-lago-sut-l-ala-bed-and-breakfast-netro-biella.jpg') no-repeat center center; background-size:cover;height: 50vh;}
.appartament{max-width: 1200px;width: 100%;display: flex;justify-content: space-evenly;align-items: center;flex-wrap: wrap;margin: 0 auto;}
.appartament__cards{display: flex;align-items: stretch;flex-direction: row;padding: 1rem 0;box-sizing: border-box;flex-wrap: wrap;justify-content: space-evenly;}
.appartament__card{display: flex;align-items: center;flex-direction: column;border-radius: 10px;overflow: hidden;box-shadow: 0 0 25px 10px#e4e4e4;background-color: var(--brown-light);padding: 1.5rem;width: 30%;margin-bottom: 3rem;}
.appartament__card__img, .card__text{width: 100%;min-height: 300px;}
.appartament__card__img{border-radius: 10px;display:block;background-position: center center;background-size:cover;margin-bottom: 1rem;}
.appartament__card__text{display: flex;flex-flow: row wrap;}

@media screen and (max-width: 1260px){
  .appartament{
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media screen and (max-width: 1200px){
  .appartament__card{
    width: 45%;
  }
}
@media screen and (max-width: 800px){
  .appartament__card{
    width: 100%;
  }
}

@media (prefers-reduced-motion: no-preference){
  .appartament__card{
    display: block;
    opacity: 0;
    scale: 0.7;
    animation: fade-in linear forwards;
    animation-timeline: view();
    animation-range: 50px 36%;
  }

  @keyframes fade-in {
    to {
      opacity: 1;
      scale: 1;
    }
  }
}

/* differences */
.differences{background-color: var(--grey);}
.differences__items{max-width: 1200px;width: 100%;display: flex;justify-content: space-evenly;align-items: center;flex-wrap: wrap;margin: 0 auto;}
.differences__item{display: flex;align-items: center;flex-direction: column;padding: 2rem;background-color: var(--white);border-radius: 25px;}

@media screen and (max-width: 1260px){
  .differences{
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media screen and (max-width: 1200px){
  .differences__item{
    width: 45%;
    margin: 0 1rem 1rem 1rem;
  }
}
@media screen and (max-width: 800px){
  .differences__item{
    width: 100%;
  }
}

/* activity */
#title-activity .title__img{background: url('../images/oropa-cortile-basilica-nuova-sut-l-ala-bed-and-breakfast-netro-biella.jpg') no-repeat center center; background-size:cover;height: 50vh;position: relative;}
.activity{display: flex;justify-content: center;flex-wrap: wrap;margin: 0 auto;}
.activity h4, .activity p{padding-bottom: 1rem;}
.activity__items{display: flex;flex-direction: column;box-sizing: border-box;width: 100%;}
.activity__item__container{display: flex;flex-direction: row;justify-content: center;padding: 3rem 0;}
.activity__item__container:nth-child(odd){background-color: var(--grey);width: 100%;}
.activity__item{max-width: 1200px;width: 100%;display: flex;flex-direction: column;overflow: hidden;}
.activity__item__img{border-radius: 10px;display:block;background-position: center center;background-size:cover;height: 70vh;}
.activity__item__text{display: flex;flex-flow: row wrap;padding-top: 2rem;}
.activity__item__text p:last-child{margin: 0 auto;padding-bottom: 0;padding-top: 2rem;}
.activity__item__text p a{font-size: clamp(0.75rem, 0.575rem + 0.875vw, 1.625rem);font-weight: 500;color: var(--brown-dark);}
.activity__item__text p a:hover{color: var(--brown-middle);}
.activity__item__img{display: flex;justify-content: center;align-items: center;position:relative;flex-direction: column;}
.activity__item__img__title{background-color: var(--white);opacity: 0.9;color: var(--black);padding: 15px;border-radius: 25px;text-align: center;max-width: 75%;position: absolute;bottom: 1rem;}
.activity__item__img__title h3{font-size: clamp(1.375rem, 1.2rem + 0.875vw, 2.25rem);}


@media screen and (max-width: 1260px){
  .activity{
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media screen and (max-width: 800px){
  .activity__item{
    width: 100%;
  }
}

@media (prefers-reduced-motion: no-preference){
  .activity__item{
    display: block;
    opacity: 0;
    scale: 0.7;
    animation: fade-in linear forwards;
    animation-timeline: view();
    animation-range: 50px 36%;
  }

  @keyframes fade-in {
    to {
      opacity: 1;
      scale: 1;
    }
  }
}

/* popup */
/* Popup container - can be anything you want */
.popup {position: absolute;display: inline-block;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;bottom: 0;right: 0;font-size: 1.5rem;color: #ffffff;padding: 0 0.5rem 0.5rem 0;}
/* The actual popup */
.popup .popuptext {visibility: hidden;width: 220px;background-color: #555;color: #fff;text-align: center;border-radius: 6px;padding: 8px 0;position: absolute;z-index: 1;bottom: 100%;right: 50%;font-size: 9px;}
/* Popup arrow */
.popup .popuptext::after {content: "";position: absolute;top: 100%;margin-left: -5px;border-width: 5px;border-style: solid;border-color: #555 transparent transparent transparent;}
/* Toggle this class - hide and show the popup */
.popup .show {visibility: visible;-webkit-animation: fadeIn 1s;animation: fadeIn 1s;}
.popuptext a{color: var(--white);}
.popuptext a:hover{color: var(--brown-dark);}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {from {opacity: 0;} to {opacity: 1;}}
@keyframes fadeIn {from {opacity: 0;} to {opacity:1 ;}}