:root {
  --clr-primary: #8b2b32;
  --clr-background: #ede9e2;
  --clr-dark: #222222;
  --clr-light: white;
  --clr-lightgrey: #dadada;
  --clr-background-lighter: #fdfcfb;
  --clr-event-primary: #CAAE84;
  --clr-event-brown: #555050;
  --ver-padding: 3em;
  --min-side-padding: 20px;
  --max-width: 1200px;
  --max-header-width: 1600px;
  --min-width: 300px; }

/***** Reset *****/
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

ul {
  list-style: none; }

img {
  display: block; }

/****** General *******/
html {
  font-family: "Roboto", sans-serif;
  text-rendering: optimizeSpeed;
  scroll-behavior: smooth; }

a,
a:visited,
a:active {
  color: var(--clr-primary);
  text-decoration: none; }

a:hover {
  color: var(--clr-background);
  text-decoration: none; }

h2 {
  color: var(--clr-primary);
  font-weight: normal;
  margin-bottom: 1em;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  /* &::first-letter{
        letter-spacing: 0.15em;
    } */ }

h3 {
  margin-bottom: 0.5em;
  text-transform: uppercase;
  font-weight: normal; }

/******* Utility Classes ********/
.bg-light {
  background-color: var(--clr-background); }
  .bg-light a:hover {
    color: var(--clr-dark); }

.bg-lighter {
  background-color: var(--clr-light); }

.centered {
  text-align: center; }
  .centered > p {
    font-size: 1.2rem;
    line-height: 2.2rem;
    text-align: center; }

.italic {
  font-style: italic; }

.btn,
.btn:visited,
.btn:active {
  background-color: var(--clr-primary);
  display: block;
  color: var(--clr-light);
  max-width: max-content;
  padding: 0.3em 0.7em;
  text-decoration: none;
  font-size: 1.2rem;
  margin: 1em 0;
  text-transform: uppercase;
  font-weight: normal;
  text-align: center; }
  @media (min-width: 1200px) {
    .btn,
    .btn:visited,
    .btn:active {
      text-align: left; } }
.btn:hover {
  color: var(--clr-primary) !important;
  background-color: var(--clr-background-lighter); }

.btn-inverted,
.btn-inverted:visited,
.btn-inverted:active {
  background-color: var(--clr-background-lighter);
  color: var(--clr-primary); }

.btn-inverted:hover {
  color: var(--clr-light) !important;
  background-color: var(--clr-primary); }

ul.card-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin: 3rem auto; }
  ul.card-list > * {
    margin-left: 30px; }
  ul.card-list > *:first-child {
    margin-left: 0; }
  ul.card-list li {
    text-align: center;
    width: 30ch;
    margin: 0; }
    ul.card-list li img {
      max-height: min(120px, 12vh);
      margin: 40px auto 30px; }

header {
  position: relative;
  /**Header bg**/ }
  header .header__bg {
    object-fit: cover;
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    z-index: -2; }
    header .header__bg video {
      object-fit: cover; }
  header .header__top {
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0 max(5rem, calc(50% - (var(--max-header-width) / 2))) 1em;
    background-color: var(--clr-background-lighter); }
    @media (min-width: 1400px) {
      header .header__top {
        flex-direction: row;
        padding-bottom: 0; } }
  header .header__logo {
    position: relative;
    display: block;
    margin: 30px auto 20px;
    width: min-content;
    height: 75px;
    z-index: 101; }
    header .header__logo img {
      height: 100%; }
  header nav {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.2rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    /** burger **/
    /** /burger **/ }
    @media (min-width: 1200px) {
      header nav {
        height: 60px;
        width: 100%;
        justify-content: space-around; } }
    header nav a,
    header nav a:visited,
    header nav a:active {
      color: var(--clr-dark);
      text-decoration: none; }
    header nav a.active {
      color: var(--clr-primary); }
    header nav a:hover {
      color: var(--clr-primary); }
    header nav ul {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 99;
      background-color: var(--clr-background);
      list-style: none;
      visibility: hidden;
      padding: min(250px,30vh) 0 1em 50px;
      width: 100vw;
      height: 100vh; }
      header nav ul li {
        padding-top: 0.8em; }
        header nav ul li:last-of-type a {
          color: var(--clr-event-brown);
          background-color: var(--clr-event-primary);
          padding: 0.3rem 0.6rem; }
          header nav ul li:last-of-type a, header nav ul li:last-of-type a:visited, header nav ul li:last-of-type a:active {
            color: var(--clr-event-brown);
            text-decoration: none; }
          header nav ul li:last-of-type a:hover {
            color: var(--clr-light) !important; }
      @media (min-width: 1200px) {
        header nav ul {
          position: unset;
          background-color: transparent;
          list-style: none;
          display: flex;
          justify-content: space-between;
          width: 80%;
          height: min-content;
          padding: 0;
          margin: 0;
          visibility: visible; }
          header nav ul li {
            padding: unset; } }
      @media (min-width: 1400px) {
        header nav ul {
          width: 80%;
          margin-left: 10%;
          justify-content: space-evenly; } }
    header nav .lang-menu {
      position: fixed;
      bottom: 10vh;
      z-index: 99;
      height: min-content;
      font-weight: 500;
      right: calc(2 * var(--min-side-padding));
      visibility: hidden; }
      @media (min-width: 1200px) {
        header nav .lang-menu {
          position: unset;
          visibility: visible;
          padding-left: 1em; } }
    header nav input {
      display: block;
      width: 33px;
      height: 27px;
      position: fixed;
      top: 30px;
      left: 5%;
      cursor: pointer;
      opacity: 0;
      /* hide this */
      z-index: 101;
      /* and place it over the hamburger */
      -webkit-touch-callout: none; }
    header nav #burger {
      position: absolute;
      top: 50px;
      left: 5%;
      z-index: 100; }
      header nav #burger span {
        display: block;
        width: 33px;
        height: 4px;
        margin-bottom: 5px;
        position: relative;
        background: var(--clr-dark);
        border-radius: 3px;
        z-index: 100; }
    header nav input:checked ~ #burger {
      position: fixed; }
      header nav input:checked ~ #burger span {
        background-color: var(--clr-dark) !important; }
    header nav input:checked ~ ul {
      visibility: visible; }
    header nav input:checked ~ .lang-menu {
      visibility: visible; }
    @media (min-width: 1200px) {
      header nav input,
      header nav #burger {
        display: none; } }
  header .headline {
    position: absolute;
    bottom: 50px;
    left: 0;
    padding-left: var(--min-side-padding);
    padding-right: var(--min-side-padding);
    font-size: 1.9rem;
    line-height: 1.3;
    z-index: 60;
    letter-spacing: 1px;
    font-weight: 300;
    min-width: 22ch;
    width: 100%;
    color: var(--clr-background-lighter); }
    @media (max-width: 380px) {
      header .headline {
        width: 22ch; } }
    header .headline span {
      padding: 0.1em; }
    header .headline em {
      font-style: normal;
      text-transform: uppercase;
      font-weight: normal; }
    @media (min-width: 1200px) {
      header .headline {
        padding-left: max(calc(4 * var(--min-side-padding)), calc(50% - (var(--max-header-width) / 2))); } }
  header .header__scroll-down {
    display: none; }

/******* Layout ********/
.with-header header .header__bg {
  height: 70vh;
  min-height: 150px; }

/** Page Headers **/
.home header {
  --bg-position: fixed;
  height: 100vh;
  min-height: 500px; }
  .home header .header__bg {
    position: var(--bg-position);
    height: inherit;
    min-height: inherit; }
  .home header .header__top {
    background: transparent; }
    .home header .header__top #burger span {
      background-color: var(--clr-light); }
    @media (min-width: 1200px) {
      .home header .header__top nav a,
      .home header .header__top nav a:visited,
      .home header .header__top nav a:active {
        color: var(--clr-light); }
      .home header .header__top nav a:hover {
        color: var(--clr-primary); }
      .home header .header__top nav a.highlight,
      .home header .header__top nav a.highlight:visited,
      .home header .header__top nav a.highlight:active {
        color: var(--clr-dark); }
      .home header .header__top nav a.highlight:hover {
        color: var(--clr-primary); } }
  .home header .header__top::after {
    content: "";
    display: block;
    background: linear-gradient(180deg, rgba(252, 177, 177, 0.4) 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.05) 60%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 50;
    /*To fix scroll down refresh on mobile*/
    top: -300px;
    height: calc(100% + 300px); }
  .home header .header__scroll-down {
    display: flex;
    position: absolute;
    left: 0;
    bottom: 2rem;
    width: 100%;
    z-index: 99;
    justify-content: center;
    align-items: center; }
    .home header .header__scroll-down a {
      display: block;
      color: var(--clr-background-lighter);
      text-decoration: none;
      animation-iteration-count: infinite;
      animation-duration: 3s;
      animation-name: bounceIn; }
    .home header .header__scroll-down span {
      display: block;
      height: 6px;
      width: 40px;
      background: var(--clr-background-lighter);
      border-radius: 6px; }
    .home header .header__scroll-down span:first-child {
      transform: translateX(-12px) rotate(45deg);
      -webkit-transform: translateX(-12px) rotate(45deg);
      -moz-transform: translateX(-12px) rotate(45deg);
      -ms-transform: translateX(-12px) rotate(45deg);
      -o-transform: translateX(-12px) rotate(45deg); }
    .home header .header__scroll-down span:last-child {
      transform: translate(12px, -6px) rotate(-45deg);
      -webkit-transform: translate(12px, -6px) rotate(-45deg);
      -moz-transform: translate(12px, -6px) rotate(-45deg);
      -ms-transform: translate(12px, -6px) rotate(-45deg);
      -o-transform: translate(12px, -6px) rotate(-45deg); }
    .home header .header__scroll-down .header__scroll-down:hover {
      animation-play-state: paused; }

@keyframes bounceIn {
  0% {
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8); }
  70% {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2); }
  100% {
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8); } }
  .home header .headline {
    bottom: 150px; }

.wines .header__bg {
  object-position: center bottom; }

.about .header__bg {
  object-position: center top; }

footer,
main section {
  padding: var(--ver-padding) max(var(--min-side-padding), calc(50% - (var(--max-width) / 2)));
  /*  display:grid;
    grid-template-columns: minmax(var(--min-side-padding), 1fr) minmax(var(--min-width),var(--max-width)) minmax(var(--min-side-padding), 1fr);

    &>* {
        grid-column: 2 / 3;
    } */ }

main {
  font-weight: 300; }
  main section {
    min-height: 400px; }
    main section p {
      font-size: 1.2rem;
      line-height: 1.5;
      text-align: justify; }
  main section {
    overflow: hidden; }
  main section.centered p {
    min-width: 20ch;
    max-width: 50ch;
    width: 80%;
    margin: 0 auto;
    text-align: center; }

.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; }
  .flex > * {
    max-width: 100%;
    width: 48%;
    flex-grow: 2;
    padding: 0.7rem; }
  .flex img {
    object-fit: contain; }
    @media (min-width: 1200px) {
      .flex img {
        object-fit: cover; } }
/*** Footer ***/
footer {
  min-height: 200px;
  font-size: 1em;
  line-height: 1.5em;
  background-color: var(--clr-primary);
  color: var(--clr-light);
  text-align: center;
  padding-top: 4rem;
  padding-bottom: 4rem; }
  @media (min-width: 1200px) {
    footer {
      text-align: left;
      display: flex;
      justify-content: center;
      align-items: center; } }
  footer a,
  footer a:visited,
  footer a:active {
    color: var(--clr-light); }
  footer a:hover {
    color: var(--clr-dark); }
  footer .footer__logo picture {
    display: flex;
    flex-direction: column;
    align-items: center; }
  footer .footer__logo picture img {
    padding-top: 40px;
    height: 170px;
    max-height: max-content;
    margin-bottom: 50px; }
  footer .footer__legal p {
    margin-bottom: 20px; }
  footer .footer__legal .footer__menu {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; }
    @media (min-width: 1200px) {
      footer .footer__legal .footer__menu {
        justify-content: space-between;
        justify-content: left; } }
    footer .footer__legal .footer__menu > * {
      margin-left: 10px; }
    footer .footer__legal .footer__menu > *:first-child {
      margin-left: 0; }
  @media (min-width: 1200px) {
    footer .footer__legal {
      margin: 0 8rem 0 4rem; } }
  footer .footer__social {
    width: 100%;
    margin-top: 3em;
    font-size: 1.2rem; }
    @media (min-width: 1200px) {
      footer .footer__social {
        width: max-content;
        margin-top: 0; } }
    footer .footer__social ul {
      width: max-content;
      list-style: none;
      display: flex;
      margin: 0.8em auto 0;
      justify-content: right; }
      @media (min-width: 1200px) {
        footer .footer__social ul {
          justify-content: right; } }
      footer .footer__social ul li + li {
        margin-left: 30px; }
      footer .footer__social ul li a,
      footer .footer__social ul li a:visited,
      footer .footer__social ul li a:active {
        display: block;
        background-repeat: no-repeat;
        width: 30px;
        height: 30px;
        text-indent: -99999px; }
      footer .footer__social ul li a:hover {
        color: var(--clr-dark); }

/***************CUSTOM***************/
/** Home **/
.home h3 {
  color: var(--clr-primary);
  font-size: 1.5em; }

.home .btn {
  margin-left: auto;
  margin-right: auto; }
  @media (min-width: 1200px) {
    .home .btn {
      margin-left: 0;
      margin-right: 0; } }
.section--intro--wines {
  align-items: center; }
  .section--intro--wines img {
    object-fit: contain;
    padding-top: 40px;
    min-width: 300px;
    min-height: 300px;
    max-height: min(50vh, 350px);
    flex-grow: 0; }

/* .section--intro--territory {

    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: top;

    &>* {
        flex-basis: 300px;
        flex-grow: 1;
        padding:0.5em;
    }

    h3 {
        @include landscape{
            max-width: 20ch;
        }
    }

    p {
        text-align: justify;
        margin-top: 1em;
    }

    img {
        width: 100%;

        height: auto;
        min-height: 300px;
        max-height: min(80vh,600px);

        object-fit: cover;
        
    }

    &>*:last-child {

        img{
            height: 100%;
            width: 100%;
            min-height: 500px;
        }
    }

    


} */
.section--intro--territory {
  flex-direction: row-reverse; }
  .section--intro--territory > *:last-child {
    min-width: 350px; }
    .section--intro--territory > *:last-child img {
      max-height: 700px; }
    @media (max-width: 380px) {
      .section--intro--territory > *:last-child {
        display: none; } }
  .section--intro--territory h3 {
    max-width: 100%;
    font-weight: normal; }
    @media (min-width: 1200px) {
      .section--intro--territory h3 {
        max-width: 25ch;
        margin-bottom: 1.1em; } }
  .section--intro--territory p {
    margin: 1.1em auto; }
  .section--intro--territory img {
    width: 100%;
    min-height: 300px;
    max-height: min(60vh, 600px);
    object-fit: cover; }
    @media (min-width: 1200px) {
      .section--intro--territory img {
        max-height: unset; } }
.section--intro--azienda div:first-of-type {
  height: 100%;
  background-image: url(../about/sketch_red.png);
  background-size: 120%;
  background-repeat: no-repeat;
  background-position: center bottom;
  padding: 0.7em 0.7em 40%;
  text-align: center; }
  @media (min-width: 1200px) {
    .section--intro--azienda div:first-of-type {
      padding-bottom: 3em;
      background-position: left calc(var(--max-width) / 4.5) bottom;
      background-size: 100%; } }
  @media (min-width: 1400px) {
    .section--intro--azienda div:first-of-type {
      padding-bottom: 3em;
      background-position: left calc(var(--max-width) / 3.1) bottom;
      background-size: 90%; } }
  @media (min-width: 1200px) {
    .section--intro--azienda div:first-of-type > * {
      width: 40%; } }
  .section--intro--azienda div:first-of-type em {
    color: var(--clr-primary);
    font-family: serif;
    font-weight: lighter;
    text-transform: uppercase;
    display: block;
    font-size: 1.5rem;
    margin-bottom: 1em; }
  .section--intro--azienda div:first-of-type em:after {
    content: "";
    display: block;
    height: 1em;
    width: 40%;
    border-bottom: 1px solid var(--clr-primary);
    margin: 0 auto; }
  @media (min-width: 1200px) {
    .section--intro--azienda div:first-of-type {
      text-align: justify; }
      .section--intro--azienda div:first-of-type em {
        text-align: left;
        max-width: 30ch; }
      .section--intro--azienda div:first-of-type em:after {
        margin: 0; } }
.section--intro--azienda div:last-of-type {
  margin-top: 4rem; }
  .section--intro--azienda div:last-of-type .btn {
    margin-left: auto;
    margin-right: auto; }

/** About **/
@media (min-width: 1200px) {
  .section--azienda {
    display: grid;
    grid-template-columns: minmax(--min-side-padding, 1fr) repeat(2, 1fr) minmax(--min-side-padding, 1fr);
    gap: 2em; } }

.section--azienda > div {
  width: 100%;
  align-self: center; }
  @media (min-width: 1200px) {
    .section--azienda > div {
      grid-column: 1 / 2;
      min-width: 300px;
      max-width: 500px; } }
  .section--azienda > div p {
    padding-right: 2em; }
    @media (min-width: 1200px) {
      .section--azienda > div p {
        padding-right: 0;
        text-align: left;
        letter-spacing: 0.4px; } }
.section--azienda img {
  object-fit: contain;
  margin: 2em 1em;
  min-width: 400px;
  height: max(300px,40vh); }
  @media (min-width: 1200px) {
    .section--azienda img {
      grid-column: 2 / 3;
      width: 100%;
      max-width: 500px; } }
.section--cantina {
  flex-direction: row-reverse;
  align-items: center; }
  .section--cantina picture {
    flex-basis: 500px; }
    .section--cantina picture img {
      width: 100%;
      object-fit: cover;
      height: max(300px,60vh);
      object-fit: cover;
      max-width: 700px; }
      .section--cantina picture img + img {
        margin-top: 2rem; }
        @media (min-width: 1200px) {
          .section--cantina picture img + img {
            margin-top: 0; } }
    @media (min-width: 1200px) {
      .section--cantina picture {
        display: flex;
        flex-wrap: wrap; }
        .section--cantina picture img {
          width: 45%;
          height: max(400px,60vh); }
        .section--cantina picture img + img {
          margin-left: 2%; } }
  .section--cantina > div {
    width: 40%; }
    .section--cantina > div p + p {
      margin-top: 1em; }
  .section--cantina > div:last-child {
    margin-top: 2em;
    width: 100%;
    flex-grow: 0; }
    .section--cantina > div:last-child .btn {
      margin-left: auto;
      margin-right: auto; }

.section--mission {
  align-items: center; }
  @media (min-width: 1200px) {
    .section--mission {
      display: grid;
      grid-template-columns: repeat(2, auto);
      gap: 4em;
      padding: var(--min-side-padding); } }
  .section--mission > div {
    width: 100%;
    text-align: justify; }
    .section--mission > div p {
      padding-right: 2em; }
      @media (min-width: 1200px) {
        .section--mission > div p {
          grid-column: 1 / 2;
          padding-right: 0;
          max-width: 600px;
          min-width: 300px; } }
  .section--mission img {
    width: 100%;
    height: max(400px,50vh);
    flex-grow: 0;
    object-position: center;
    object-fit: cover;
    max-width: 500px;
    min-width: 400px; }
    @media (min-width: 1200px) {
      .section--mission img {
        grid-column: 2 / 3;
        width: 100%;
        height: max(700px,50vh); } }
/** Territory **/
.section--territory--position img {
  max-height: max(40vh, 500px);
  min-width: 320px;
  margin-top: 3em;
  object-fit: contain; }

@media (min-width: 1200px) {
  .section--territory--position {
    display: flex;
    align-items: center; } }

.section--territory--position .territory__text > p {
  max-width: 450px;
  margin-right: 2rem; }

.section--territory--position .territory__legend {
  list-style: none;
  text-transform: uppercase;
  color: var(--clr-primary);
  font-size: 1.1rem;
  margin-top: 2em; }
  .section--territory--position .territory__legend li + li {
    margin-top: 0.6rem; }
  .section--territory--position .territory__legend li::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 5px 0.5em 0px 0;
    border: 5px solid;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px; }
  .section--territory--position .territory__legend li:first-child::before {
    border-color: #b07f49; }
  .section--territory--position .territory__legend li:last-child::before {
    background-color: #8f9c92;
    border-color: #8f9c92; }

.section--territory--features h2 {
  padding-top: 0.7em; }

.section--territory--features p {
  text-align: center; }

/** Contacts **/
.section--tasting {
  padding-top: 0;
  padding-bottom: 0;
  background-color: var(--clr-primary);
  min-height: auto; }
  @media (min-width: 1200px) {
    .section--tasting {
      display: grid;
      grid-template-columns: minmax(100px, 1fr) minmax(466px, 1.5fr) minmax(100px, 1fr);
      grid-template-rows: 55vh;
      padding: 0; } }
  .section--tasting img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 45% center;
    display: none; }
    @media (min-width: 1200px) {
      .section--tasting img {
        display: block; } }
  .section--tasting img:first-of-type {
    object-position: left; }
  .section--tasting .text-wrapper {
    padding: 4em;
    align-self: center;
    color: var(--clr-light);
    text-align: center; }
    .section--tasting .text-wrapper h3 {
      font-weight: normal;
      margin-bottom: 1.5em;
      letter-spacing: 2px; }
    .section--tasting .text-wrapper p {
      margin: 0 auto;
      max-width: 40ch;
      text-align: center; }

/** Wines **/
.section--spedizione {
  background-color: var(--clr-primary);
  color: var(--clr-background-lighter);
  max-height: max-content;
  min-height: 30px;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column-reverse; }
  @media (min-width: 1200px) {
    .section--spedizione {
      flex-direction: row;
      align-items: center; } }
  .section--spedizione > div {
    text-align: center; }
  .section--spedizione a {
    color: white;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 0.3em;
    display: block; }
    @media (min-width: 1200px) {
      .section--spedizione a {
        font-size: 1.4rem;
        letter-spacing: 2px; } }
  .section--spedizione p {
    text-align: center;
    line-height: 1.2em;
    width: 60%;
    margin: 0 auto;
    font-size: 1.25rem; }
    @media (min-width: 1200px) {
      .section--spedizione p {
        width: 100%;
        font-size: 1.35rem;
        line-height: 1em;
        letter-spacing: 1.2px; } }
  .section--spedizione .section--spedizione__icon {
    height: 40px;
    margin-bottom: 1.7em; }
    @media (min-width: 1200px) {
      .section--spedizione .section--spedizione__icon {
        height: 65px;
        margin: 0 4em; } }
    .section--spedizione .section--spedizione__icon:first-child {
      display: none; }
      @media (min-width: 1200px) {
        .section--spedizione .section--spedizione__icon:first-child {
          display: block; } }
.filters {
  margin: 3em auto;
  display: flex;
  width: max-content;
  padding: 1em 0;
  text-transform: uppercase;
  border: 1px solid var(--clr-primary);
  border-left: none;
  border-right: none;
  letter-spacing: 1px;
  font-weight: normal; }
  .filters li {
    padding: 0.5em; }
    .filters li button {
      all: unset;
      cursor: pointer; }
      .filters li button:hover {
        text-decoration: underline; }
    .filters li button.selected {
      color: var(--clr-primary); }

.wine-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center; }
  .wine-list li {
    position: relative;
    text-align: center;
    z-index: 2;
    width: 33%;
    min-width: min-content;
    padding: 1em; }
    .wine-list li * {
      position: relative;
      z-index: inherit; }
    .wine-list li a,
    .wine-list li a:visited,
    .wine-list li a:active {
      font-size: 1.4rem;
      text-decoration: none;
      display: block;
      margin: 1em 0 0.3em 0;
      text-transform: uppercase;
      font-weight: normal; }
    .wine-list li a:hover {
      color: var(--clr-dark); }
    .wine-list li img {
      max-height: 50vh;
      height: 300px;
      margin: 0 auto; }
    .wine-list li::after {
      content: "";
      width: 100%;
      height: 35%;
      background-color: var(--clr-background);
      position: absolute;
      top: 20%;
      left: 0;
      z-index: 1; }
  .wine-list li.filtered-out {
    display: none; }

/** Wine **/
.wine {
  padding: 0;
  display: grid;
  grid-template-columns: minmax(var(--min-side-padding), 1fr) 1fr minmax(250px, 1fr) 1fr minmax(var(--min-side-padding), 1fr);
  grid-template-rows: 170px 170px 100px 200px repeat(2, minmax(200px, max-content)); }
  .wine .wine__header {
    grid-column: 1 / -1;
    grid-row: 1 / 3;
    z-index: 5;
    background-color: var(--clr-background); }
    .wine .wine__header h2 {
      margin: 60px 0 0 0;
      font-weight: bold; }
    .wine .wine__header .wine__subtitle {
      text-transform: uppercase;
      font-weight: normal; }
  .wine .wine__bottle {
    grid-column: 1 / -1;
    grid-row: 1 / 5;
    justify-self: center;
    display: flex;
    align-items: flex-end;
    background: url(../img/grapes.png) no-repeat transparent;
    background-position: center center;
    background-size: contain;
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 700px; }
    @media (min-width: 1200px) {
      .wine .wine__bottle {
        grid-column: 2 / -2; } }
    .wine .wine__bottle img {
      height: 500px;
      margin: 0 auto;
      position: relative; }
  .wine dt::after {
    content: ":";
    margin-left: 1px; }
  .wine .wine__data {
    grid-column: 2 / -2;
    grid-row: 5 / 6;
    padding-bottom: 2em;
    border-bottom: 1px var(--clr-primary) solid;
    font-size: 1.1em;
    line-height: 1.6rem; }
    @media (min-width: 1200px) {
      .wine .wine__data {
        grid-row: 4 / 6;
        display: grid;
        grid-template-columns: repeat(3, 1fr); }
        .wine .wine__data > div:first-of-type {
          grid-column: 1 / 2;
          text-align: left; }
        .wine .wine__data > div:last-of-type {
          grid-column: 3 / -1;
          text-align: right; } }
    .wine .wine__data > div > div {
      margin: 1.8em 0; }
    .wine .wine__data dt {
      text-transform: uppercase;
      color: var(--clr-primary);
      font-weight: normal; }
  .wine .wine__specs {
    grid-column: 2 / 5;
    grid-row: 6 / 7;
    margin: 0 auto;
    padding-top: 2em;
    font-size: 1.1em;
    line-height: 2rem; }
    .wine .wine__specs > div {
      margin: 0 auto; }
      @media (min-width: 1200px) {
        .wine .wine__specs > div {
          width: 60%; } }
    .wine .wine__specs dt {
      font-weight: normal;
      margin-right: 0.5em; }
    .wine .wine__specs dt,
    .wine .wine__specs dd {
      display: inline; }

.btn.techsheet {
  margin: 2rem auto; }

/** Wine Single Page - Sezione Collezioni Shop **/
a.toshop, a.toshop:active, a.toshop:visited {
  margin: 0 auto;
  text-align: center;
  margin-bottom: 5rem; }
  @media (min-width: 1200px) {
    a.toshop, a.toshop:active, a.toshop:visited {
      margin-bottom: 2rem; } }
/** Codice per richiamare le box dello shop in cui sono contenuti i vini **/
/*** Contacts ***/
.section--contacts h2 {
  color: var(--clr-primary); }

.section--contacts .address {
  margin: 3em auto;
  text-align: center;
  color: var(--clr-primary); }

/*.section--contacts .address::before, .section--contacts .address::after {
    border-bottom: 1px solid #8B2B32;
    display: block;
    margin: 2.5rem auto;
    width: 40%;
    content: "";
}*/
.section--form form input,
.section--form textarea {
  width: 80%;
  max-width: 600px;
  padding: 1em 4px; }

input,
label,
select,
button,
textarea {
  margin: 0;
  border: 0;
  padding: 0;
  background: none;
  line-height: 1;
  /* Browsers have different default form fonts */
  font-size: 14px;
  font-family: "Roboto", sans-serif; }

input:focus,
textarea:focus {
  background-color: #8b2b32;
  color: white;
  outline: none; }

.section--form label {
  display: block;
  text-indent: -9999px; }

.section--form p {
  color: #8b2b32;
  text-align: center;
  margin-bottom: 40px; }

.section--form form input[type="text"],
.section--form form input[type="email"],
.section--form form textarea {
  border-bottom: 1px solid #8b2b32;
  display: block;
  margin: 0 auto;
  content: "";
  height: 50px; }

/*Hide antispam input*/
.section--form form input.gotcha {
  display: none; }

.section--form form input[type="checkbox"] {
  margin-top: 3em;
  width: 10%;
  max-width: 100px;
  padding: 1em 4px; }

label[for="data_consent"] {
  display: inline;
  text-indent: unset; }

.section--form form textarea {
  height: 150px;
  text-align: left;
  resize: none; }

.section--form .privacy {
  width: 80%;
  max-width: 600px;
  padding: 1em 4px;
  margin: 0 auto;
  text-align: center; }

.section--form form input[type="submit"] {
  all: unset;
  display: block;
  background-color: #8b2b32;
  color: white;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1em;
  padding: 1em;
  width: min-content;
  margin: 0 auto;
  margin-top: 20px;
  cursor: pointer; }

.section--form #status {
  margin-top: 2em; }

.privacy main h1,
.privacy main h2,
.privacy main h3,
.privacy main h4,
.privacy main h5,
.privacy main h6,
.privacy main b,
.privacy main strong {
  font-weight: bold; }

.privacy main em,
.privacy main i,
.privacy main dfn {
  font-style: italic; }

.privacy main p {
  margin: 0 0 1.5em 0; }

.privacy main ul,
.privacy main ol {
  list-style: disc; }

.privacy main li ul,
.privacy main li ol {
  margin: 0 1.5em; }

.privacy main ul,
.privacy main ol {
  margin: 0 1.5em 1.5em 1.5em; }

/** Shop **/
/*
// * Vogliamo che la pagina abbia le fasce con i titoli che vanno a tutta larghezza, quindi togliamo il padding che avevamo dato all'inizio per poi darlo solo alle sezioni dei prodotti di shopify per dargli un po' di margine sinistro e destro
*
*
*/
body.shop section {
  padding: 0; }
  body.shop section > * {
    padding: var(--ver-padding) max(var(--min-side-padding), calc(50% - (var(--max-width) / 2))); }
  body.shop section div.shop-collection {
    padding-bottom: 0; }

section.banner-shop {
  width: 100vw;
  height: auto; }
  section.banner-shop div.free-delivery {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: min-content;
    max-height: max-content;
    padding: 0;
    margin: 0; }
    section.banner-shop div.free-delivery p {
      width: 100%;
      padding: 1rem;
      justify-content: center;
      text-align: center;
      background-color: var(--clr-primary);
      color: var(--clr-background);
      text-transform: uppercase;
      font-weight: bolder;
      letter-spacing: 1px; }
  section.banner-shop div.banner-wrapper {
    width: 100vw;
    background-image: url(/img/banner-shop.png);
    object-fit: cover;
    background-repeat: no-repeat; }
    section.banner-shop div.banner-wrapper div.promo-shop-details {
      width: 80%;
      margin: 0 auto;
      padding: 2rem;
      background-color: white;
      color: var(--clr-primary);
      text-align: center;
      display: flex;
      flex-direction: column; }
      section.banner-shop div.banner-wrapper div.promo-shop-details h2 {
        font-weight: 600;
        font-size: 4.5rem;
        padding: 0;
        margin-bottom: 0; }
      section.banner-shop div.banner-wrapper div.promo-shop-details p {
        text-align: center; }
  section.banner-shop ul.shopfeature-list {
    padding: 0; }
    @media (min-width: 1200px) {
      section.banner-shop ul.shopfeature-list {
        width: 80%;
        margin: 0.8rem auto;
        display: flex;
        flex-direction: row; } }
    section.banner-shop ul.shopfeature-list li {
      width: 80%;
      margin: 3rem auto;
      list-style: none;
      text-transform: uppercase;
      color: var(--clr-primary);
      text-align: center;
      display: flex;
      flex-direction: column; }
      @media (min-width: 1200px) {
        section.banner-shop ul.shopfeature-list li {
          margin: 2rem 2rem; } }
      section.banner-shop ul.shopfeature-list li li + li {
        margin-top: 0.6rem; }
        @media (min-width: 1200px) {
          section.banner-shop ul.shopfeature-list li li + li {
            margin-top: 0; } }
      section.banner-shop ul.shopfeature-list li img {
        height: 50px;
        margin-bottom: 1rem; }
      section.banner-shop ul.shopfeature-list li h3 {
        font-size: 1.3rem;
        margin: 0.8rem;
        max-width: 50ch;
        line-height: 1.8rem; }
      section.banner-shop ul.shopfeature-list li p {
        text-transform: none;
        text-align: center; }

/** Typography Shop **/
div.text-shop {
  background-color: var(--clr-background);
  margin: 0 auto;
  margin-bottom: 0.8rem;
  width: 100vw;
  padding: 2rem 4rem;
  line-height: 2rem; }
  div.text-shop > div {
    max-width: 60ch;
    margin: 0 auto; }
    div.text-shop > div h2 {
      margin-bottom: 0.8rem; }
    div.text-shop > div p {
      text-align: center;
      line-height: 1.8rem; }
    div.text-shop > div img.icon-vendors {
      height: 100px;
      margin: 0 auto;
      margin-bottom: 1.5rem; }
  div.text-shop.vendors {
    margin-bottom: 0;
    padding-bottom: 2rem; }
  div.text-shop div > a.tocontacts, div.text-shop div > a.tocontacts:visited, div.text-shop div > a.tocontacts:active {
    font-size: 1.2rem;
    line-height: 1.5;
    text-align: justify;
    color: var(--clr-dark); }
    div.text-shop div > a.tocontacts:hover, div.text-shop div > a.tocontacts:visited:hover, div.text-shop div > a.tocontacts:active:hover {
      color: var(--clr-primary); }