/* BARRIOTHEME > RESPONSIVE CSS  */

/* =========================================================================================================== */
/* XL */

/*

    XX      XX   LL
      XX  XX     LL
        XX       LL
      XX  XX     LL
    XX      XX   LLLLLLL

*/

@media (min-width: 1200px) and (max-width: 1399.98px) {
  /* do some magic here */
}

/* =========================================================================================================== */
/* LG */

/*

    LL          GGGG
    LL         GG  GG
    LL        GG
    LL        GG   GG
    LLLLLLL    GGGGGG

*/

@media (min-width: 992px) and (max-width: 1199.98px) {
  /* __________________________________________________________________________ */
  /* Section: Territorio */

  section.territorio .cont-testo {
    padding-left: var(--distance);
  }

  section.territorio .cont-testo .testo {
    width: 100%;
  }

  section.territorio .cont-testo .occhiello {
    transform: translateX(0px);
    margin-top: var(--distance);
    margin-bottom: var(--distance);
  }
}

/* =========================================================================================================== */
/* MD */

/*

    MM      MM   DDDDD
    MMM    MMM   DD   DD
    MM  MM  MM   DD    DD
    MM      MM   DD   DD
    MM      MM   DDDDDD

*/

@media (min-width: 768px) and (max-width: 991.98px) {
  /* __________________________________________________________________________ */
  /* root */

  h1,
  h2,
  h3,
  .titolo {
    font-size: 2.8rem;
    line-height: 3.6rem;
  }

  .occhiello {
    font-size: 1.6rem;
    line-height: 2.2rem;
    letter-spacing: 15px;
  }

  /* __________________________________________________________________________ */
  /* General */

  .wrapper {
    width: calc(100% - 60px);
  }

  /* __________________________________________________________________________ */
  /* MEDIA */

  section.intro .intro-images img,
  section.territorio img {
    min-height: 450px;
  }

  section.vini .vino-item .cont-img,
  section.vini .vino-item .cont-img img {
    max-height: 350px;
  }

  /* __________________________________________________________________________ */
  /* Section: Hero */

  .hero .hero-background .background-head {
    width: 250px;
    height: 125px;
  }

  .hero .hero-background .background-head::before {
    width: 250px;
    height: 250px;
  }

  .hero .hero-background .background-head .logo {
    width: 115px;
    height: 75px;
  }

  /* __________________________________________________________________________ */
  /* Section: Intro */

  section.intro .cont-testo .occhiello {
    transform: translateX(0px);
    margin-top: var(--distance);
  }

  section.intro .cont-testo .testo {
    width: 100%;
  }

  /* __________________________________________________________________________ */
  /* Section: vini */

  section.vini .vini-head::before {
    width: 350px;
    height: 350px;
  }

  /* __________________________________________________________________________ */
  /* Section: Territorio */

  section.territorio .cont-testo {
    padding-left: var(--distance);
  }

  section.territorio .cont-testo .testo {
    width: 100%;
  }

  section.territorio .cont-testo .occhiello {
    transform: translateX(0px);
    margin-top: var(--distance);
    margin-bottom: var(--distance);
  }

  .slugs {
    margin-bottom: calc(var(--distance) * -2);
  }

  .slugs-container {
    padding: var(--distance) 200px var(--distance) var(--distance);
  }

  .slugs-container .slugs-footer {
    width: 200px;
    height: 200px;
    left: calc(100% + 50px);
  }
}

/* =========================================================================================================== */
/* SM */

/*

      SSSSSSS   MM      MM
    SS          MMM    MMM
     SSSSS      MM  MM  MM
          SS    MM      MM
    SSSSSSS     MM      MM

*/

@media (min-width: 576px) and (max-width: 767.98px) {
  html,
  body {
    background-color: var(--nero);
  }

  .rotate {
    position: fixed;
    display: block;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: var(--nero);
    z-index: 9999999;
  }

  .rotate::after {
    content: "";
    width: 250px;
    height: 250px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-image: url(../img/rotate.png);
    background-size: contain;
    background-position: bottom;
    background-repeat: repeat-x;
    pointer-events: none;
  }
}

/* =========================================================================================================== */
/* XS */

/*

    XX      XX     SSSSSSS
      XX  XX     SS
        XX        SSSSS
      XX  XX           SS
    XX      XX   SSSSSSS

*/

@media (max-width: 575.98px) {
  /* __________________________________________________________________________ */
  /* root */

  h1,
  h2,
  h3,
  .titolo {
    font-size: 2.4rem;
    line-height: 3.4rem;
  }

  .occhiello {
    font-size: 1.4rem;
    line-height: 2rem;
    letter-spacing: 15px;
  }

  /* __________________________________________________________________________ */
  /* General */

  .wrapper {
    width: calc(100% - 30px);
  }

  /* __________________________________________________________________________ */
  /* MEDIA */

  section.intro .intro-images img,
  section.territorio img {
    min-height: 350px;
  }

  section.vini .vino-item .cont-img,
  section.vini .vino-item .cont-img img {
    max-height: 300px;
  }

  /* __________________________________________________________________________ */
  /* Section: Hero */

  .hero {
    padding: 15px;
  }

  .hero::after {
    height: 25vh;
    bottom: -12.5vh;
  }

  .hero .hero-background {
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    top: 15px;
    left: 15px;
  }

  .hero .hero-background .background-head {
    width: 250px;
    height: 125px;
  }

  .hero .hero-background .background-head::before {
    width: 250px;
    height: 250px;
  }

  .hero .hero-background .background-head .logo {
    width: 140px;
    height: auto;
    background-position: center;
    background-size: cover;
  }

  /* __________________________________________________________________________ */
  /* Section: Intro */

  section.intro .cont-testo {
    padding-left: 0;
    padding-top: 150px;
  }

  section.intro .cont-testo .testo {
    width: 100%;
  }

  section.intro .cont-testo .occhiello {
    transform: translateX(0px);
    margin-top: var(--distance);
  }

  /* __________________________________________________________________________ */
  /* Section: vini */

  section.vini .vini-head {
    width: 100%;
    height: 300px;
  }

  section.vini .vini-head::before {
    width: 250px;
    height: 250px;
  }

  section.vini .vino-item {
    width: calc(100% - var(--distance-half));
    margin-bottom: var(--distance);
  }

  /* __________________________________________________________________________ */
  /* Section: Territorio */

  section.territorio {
    padding: calc(var(--distance-big)) 0 var(--distance-big);
  }

  section.territorio .cont-testo {
    /* padding-left: var(--distance); */
    padding-left: 0;
    padding-top: 150px;
  }

  section.territorio .cont-testo .testo {
    width: 100%;
  }

  section.territorio .cont-testo .occhiello {
    transform: translateX(0px);
    margin-top: var(--distance);
    margin-bottom: var(--distance);
  }

  /* __________________________________________________________________________ */
  /* footer */

  footer .logo-footer {
    width: 115px;
    height: 75px;
  }

  footer .footer-head {
    text-align: left;
  }

  footer .footer-body {
    align-items: flex-start;
  }

  .sub-footer .cont-subfooter {
    flex-direction: column;
    align-items: flex-start;
  }

  .sub-footer {
    padding: 30px 0;
  }

  .sub-footer .menu-footer {
    margin: 15px 0;
  }
}

/* =========================================================================================================== */
/* =========================================================================================================== */
/* =========================================================================================================== */

/* specials */

/* @media (max-width: 370px) {

} */