/*!
 * App style
 */
  @import url('https://fonts.googleapis.com/css2?family=Baskervville:ital,wght@0,400..700;1,400..700&display=swap');
  :root {
    --primary: black; 
    --secondary: white;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  html {
    width: 100%;
    overflow: auto;
    font-size: 16px;
  }
  html.no-overflow{
    overflow: hidden;
  }
  html.no-overflow .main-content-mobile-maschera .container-custom{ overflow: hidden;}
  html,
  body {
    height: 100%;
    overflow-x: clip;
  }
  .img-cover {width: 100%; height: 100%; object-fit: cover;}
  .img-contain {width: 100%; height: 100%; object-fit: contain;}
  
  body{
    /* background-color: black; */
    background-color: #1D1D1B;
    color: white;
    width: 100%;  
    font-family: "Baskervville", serif;
    font-style: normal;
    font-optical-sizing: auto;
    font-weight: 400;
    
    top: initial !important;
    position: initial !important;
    padding:0 !important;
    min-height: 100dvh !important;
  }

  a,
  a:hover {text-decoration: none;}
  a:hover{
    color: var(--primary) !important;
  }

  h1,h2,h3,h4,h5,h6{
    font-family: "Baskervville", serif;
  }

  hr{
    border-color: var(--primary);
  }
  p{
    margin: 0;
    font-size: 1rem;
    line-height: 1.1;
  }
  .img-zoomed{
    overflow: hidden;
  }
  .img-zoomed img {
      transform: scale(1);
      transition: all 500ms ease-in-out;
  }
  .img-clip{
    clip-path: polygon(12% 0%, 100% 0%, 88% 100%, 0% 100%);
  }
  .scroll-custom::-webkit-scrollbar{
    width: 5px;
    height: 10px;
  }
  .scroll-custom::-webkit-scrollbar-thumb{
    background: rgba(90, 90, 90, 0.374);
  }
  .scroll-custom::-webkit-scrollbar-track{
    background: rgba(0, 0, 0, 0);
  }
  .main-content-desktop, .main-content-desktop-maschera,
  .main-content-mobile, .main-content-mobile-maschera{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* padding-bottom: 10dvh; */
    transition: all .8s ease-in-out;
  }
  .main-content-mobile, .main-content-mobile-maschera{display: block;}
  .blur-bg{
    filter: blur(10px);
  }
  .blur-bg.blur{
    filter: blur(0px);
  }
  .active_hover_effect, .pulsante{
    cursor: pointer;
  }
  .logo{
    height: 15dvh;
  }
  .mask{
    height: 43dvh;
    max-width: 100%;
  }
  .mask_vino{
    position: absolute;
    z-index: 1;
    bottom: calc((42dvh) / 2);
    width: calc(calc(43dvh * 0.686667) + 1px);
    height: 43dvh;
    display: flex;
    /* display: none; */
    align-items: flex-start;
    justify-content: center;
  }
  .effect_fade_click{
    opacity: 1;
    transition: opacity 1s ease-in-out;
  }
  .effect_fade_click.effect_fade{
    opacity: 0;
    pointer-events: none;
  }
  .mask_vino p{
    padding-top: max(20px, min(3.3vh, 30px));
    font-size: max(16px, min(2.6vh, 28px));
    line-height: calc(max(16px, min(2.6vh, 28px)) * 1.1);
    color: white;
    width: 100%;
    max-width: calc(1.20666 * 15dvh);
  }
  .mask_vino img{
    z-index: -1;
    position: absolute;
    height: 100%;
    width: 100%;
  }
  .pulsante{
    position: absolute;
    left: 50%;
    transform: translate(-50%, -32%);
    top: 50%;
    height: 43dvh;
    margin: auto;
    display: flex;
    align-items: flex-end;
    padding-bottom: 15dvh;
  }
  .container-pulsante{
    position: relative;
    display: grid;
    place-items: center;
  }
  .pulsante img{
    /* width: 40px; */
    height: 4dvh !important;
  }
  .playAudio{
    width: 4dvh !important;
    height: 4dvh !important;
    z-index: 1 !important;
    position: absolute !important;
    align-self: center;
    cursor: pointer;

  }
  .audio-play .playAudio{
    transform: translateY(70%);
    top: 50%;
  }
  section > .playAudio{
    left: 20px;
    bottom: 20px;
  }
  .audio-bg{
    width: 100%;
    height: 100%;
    background-color: rgb(63 1 8 / 25%);
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
  }
  .anangrafica{
    position: absolute;
    color: white;
    bottom: calc((100dvh - 58%) / 2);
    transform: translate(50%, 130%);
  }
  .anangrafica a{
    color: white !important;
    text-decoration: underline;
  }
  #powered {
    width: 90px;
    left: -20px;
    position: relative;
  }
  #powered :is(#mtn-line, #mtn-heart) {
      fill: white;
  }
  section[class^="main-content-mobile-maschera"] .pulsante img{
    position: relative !important;
    width: 4dvh !important;
    height: 4dvh !important;
  }
  .pulsante .cerchio{
    --durata: 4s;
    --n: 8px;
    --gap: 2px;
    --d: 0s;
    top: 50%;
    left:50%;
    transform:translate(-50%, -50%);
    position: absolute;
    border: 2px solid black;
    border-radius: 100%;
    height: calc(4dvh + var(--gap, 2px) + var(--n)*2);
    width: calc(4dvh + var(--gap, 2px) + var(--n)*2);
    /* width: 40px; */
    opacity: 0;
    /* animation: pulse 1s 0s ease-in-out infinite; */
    animation: pulse var(--durata) var(--d) ease-in-out infinite;

  }
  
  @keyframes pulse{
    0%{
      opacity:1;
    }
    /* sono 4 animazioni, quindi 100% / 4 */
    25%{ 
      opacity: 0;
    }
  }
  .pulsante .cerchio:nth-child(2){
    --n: 4px;
    --d: 1s;
  }
  .pulsante .cerchio:nth-child(3){
    --n: 0px;
    --d: 2s;
  }
  .pulsante .cerchio-centrale{
    --durata: 4s;
    --d: 3s;
    position: absolute;
    border-radius: 100%;
    border: 2px solid black;
    width: 1px;
    height: 1px;
    opacity: 0;
    animation: pulse var(--durata) var(--d) ease-in-out infinite;
  }
  .img-bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    transition: all 0.2s ease-in-out;
  }
 
  .main-content-desktop-maschera .mask,
  .main-content-mobile-maschera .mask{
    opacity: 0;
  }
  .main-content-mobile-maschera .img-bg,
  .main-content-desktop-maschera .img-bg{
    /* maschera sopra */
    -webkit-mask-image: url("/media/images/maschera.svg");
    mask-image: url("/media/images/maschera.svg");

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    /* -webkit-mask-size: auto 43%;
    mask-size: auto 43%; */
    -webkit-mask-size: calc(100% - 30px) 43%;
    mask-size: calc(100% - 30px) 43%;

    /* scegli TU dove metterla */
    -webkit-mask-position: 50% 63%;   /* es: 60% 40% */
    mask-position: 50% 63%;
  }
  
  .main-content-desktop-maschera,
  .main-content-mobile-maschera,
  .maschera .main-content-mobile,
  .maschera .main-content-desktop{
    opacity: 0;
    pointer-events: none;
  }
  .main-content-mobile-maschera{
    overflow-x: hidden;
  }
  .maschera .main-content-mobile-maschera{
    overflow: initial;
  }
  .maschera .main-content-mobile-maschera,
  .maschera .main-content-desktop-maschera{
    opacity: 1;
    pointer-events: all;
  }
  .main-content-mobile,
  .main-content-desktop{
    color: var(--primary);
  }
  .main-content-mobile-maschera,
  .main-content-desktop-maschera{
    color: var(--secondary);
  }
  .riga-testo{
    position: absolute;
    top:0;
    width: calc(100% - 15px);
  }

  .riga-testo .content{
    width: 100%;
    height: 58%;
    top: 15%;
    position: relative;
    display: flex;
    justify-content: space-between;
  }
  section[class^="main-content-mobile"] .riga-testo .content{
    display: block;
    height: 100%;
    top:0;
    position: relative;
  }
  .pagina-iniziale{
    padding: 30px;
    position: fixed;
    top:0;
    left:0;
    height: 100dvh;
    width: 100%;
    z-index: 1;
    overflow: hidden;

    will-change: transform;
  }
  .pagina-iniziale img{
    position: absolute;
    top: -1px;
    left:0;
    width: 100%;
    height: 102%;
    z-index: -1;
    object-fit: cover;
    object-position: 66%;
  }
  /* section[class^="main-content-mobile"] .blocco-paragrafo{
    height: auto;
    min-height: 100dvh;
    position: relative;
    z-index: 3;
    margin-top: -200dvh;
    top: 300dvh;
    position: absolute;
    margin-top: 100dvh;
    top: 100dvh;
  } */
  section[class^="main-content-mobile"] .blocco-paragrafo{
    position: relative;
    z-index: 3;
    margin-top: 100dvh;
    pointer-events: none;
  }

  section[class^="main-content-mobile"] .blocco-paragrafo .triangle{
    margin-bottom: -1px;
    position: relative;
  }
  section[class^="main-content-mobile"] .blocco-paragrafo .triangle.bottom{
    transform: scale(-1, -1);
    margin:0 !important;
    margin-top: -1px !important;
  }
  .fixed{
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100dvh;
  z-index: 1;
}
.fixed.is-fixed{
  position: fixed;
  top: 0; left: 0; right: 0;
}
.fixed.is-bottom{
  position: absolute;
  top: auto;
  bottom: 0;
}
  .riga-testo .content .pulsante{
    cursor: pointer;
    left: 0;
    top: 0;
    height: auto;
    padding: 0;
    transform: translateY(calc(-100% - 16px));
  }
  section[class^="main-content-mobile-maschera"] .riga-testo .content .pulsante{
    position: absolute;
    height: 100%;
    bottom: 0px;
    left: initial;
    right: 0px;
    transform: initial;
    z-index: 1;
  }
  section[class^="main-content-desktop"] .riga-testo .content .blocco-paragrafo{
    max-width: 33%;
    flex: 0 0 33%;
  }
  .riga-testo .content .blocco-paragrafo .p{
    max-width: 250px;
    position: relative;
    font-size: 15px;
    line-height: 17px;
    letter-spacing: -1px;
  }
  section[class^="main-content-mobile"] .riga-testo .content .blocco-paragrafo .p{
    max-width: 100%;
    width: 100%;
    padding: 30px;
    background-color: #1D1D1B;
  }
  section[class^="main-content-mobile"] .riga-testo .content .blocco-paragrafo .p p{
    /* max-width: 80%; */
  }
  .riga-testo .content .blocco-centrale{
    max-width: 31%;
    flex: 0 0 31%;
  }


  /*MOBILE*/
  .main-content-mobile-maschera :is(.riga-logo, .img-bg){
    transition: none;
  }
  body.maschera .main-content-mobile-maschera :is(.riga-logo, .img-bg){
    transition: all 1.5s 2s ease-in-out;
    transform: translateX(calc(-100% - 15px));
  }
  .main-content-mobile-maschera .riga-testo{
    transform: translateX(100%);
    transition: none;
  }
  body.maschera .main-content-mobile-maschera .riga-testo{
    transition: all 1.5s 2s ease-in-out;
    transform: translateX(calc(0% - 15px));
    width: calc(100% - 0px);
  }

  #scrolldown {
    position: absolute;
    bottom: 0px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 2;
    color: #fff;
    text-decoration: none;
    display: block;
    border: 2px solid #fff;
    width: 20px;
    height: 32px;
    border-radius: 15px;
  }
  #scrolldown .fa {
    position: absolute;
    left: 0px;
    bottom: -21px;
    font-size: 20px;
}
  #scrolldown::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 0;
    display: block;
    height: 7px;
    width: 4px;
    border-radius: 45%;
    background-color: #fff;
    -webkit-animation: 1.8s ease infinite scroll-indicator;
    animation: 1.8s ease infinite scroll-indicator
  }
  @-webkit-keyframes scroll-indicator {
    0% {
      margin-top: 10px;
      opacity: 0
    }
    30% {
      opacity: 1
    }
    100% {
      margin-top: 2px;
      opacity: 0
    }
  }
  @keyframes scroll-indicator {
    0% {
      margin-top: 10px;
      opacity: 0
    }
    30% {
      opacity: 1
    }
    100% {
      margin-top: 2px;
      opacity: 0
    }
  }

@media (min-width: 576px) {
}
@media screen and (max-width: 768px){
  .anangrafica{
    transform: translate(50%, 120%);
    /* text-align: center; */
  }
  .anangrafica p{
    font-size: 0.8rem;
  }
  .mask_vino p{
    font-size: 1.1rem !important;
    /* color: blue; */
    line-height: 1.1 !important;
  }
}
@media screen and (min-width: 768px){
  .main-content-mobile, .main-content-mobile-maschera{
    display: none;
  }
  .main-content-desktop, .main-content-desktop-maschera{
    display: block;
  }
  .pulsante img, .playAudio{
    /* height: 2.722dvh !important; */
  }
}


@media screen and (min-width: 992px) {
}
@media screen and (min-width: 1200px){
  .container-custom{
    max-width: 80% !important;
  }
}