/*****************************************************
LESS compilation failed due a JavaScript error!

Input: apps/eon/eon-aem-italia-energia/components/content/modular-hero_IT/clientlibs/css/modular-hero_IT.less
Error: ParseError: missing opening `(` in apps/eon/eon-aem-italia-energia/components/content/modular-hero_IT/clientlibs/css/modular-hero_IT.less on line 182, column 8:
181         }
182       })
183     }


(uncompiled LESS src is included below)
*****************************************************/
.modular-hero{
  &__element{
    position: relative;
    width: 100%;

    .size-h1{
      @media screen and (max-width: 767px){
        font-size: 48px;
      }

      @media screen and (min-width: 768px) and (max-width: 1023px){
        font-size: 60px;
      }

      @media screen and (min-width: 1024px) and (max-width: 1535px){
        font-size: 72px;
      }
    }

    .size-h2{
      @media screen and (max-width: 767px){
        font-size: 40px;
      }

      @media screen and (min-width: 768px) and (max-width: 1023px){
        font-size: 48px;
      }

      @media screen and (min-width: 1024px) and (max-width: 1535px){
        font-size: 56px;
      }

    }

    .size-h3{
      @media screen and (max-width: 767px){
        font-size: 32px;
      }

      @media screen and (min-width: 768px) and (max-width: 1023px){
        font-size: 40px;
      }

      @media screen and (min-width: 1024px) and (max-width: 1535px){
        font-size: 48px;
      }

    }

    .size-h4{
      @media screen and (max-width: 767px){
        font-size: 28px;
      }

      @media screen and (min-width: 768px) and (max-width: 1023px){
        font-size: 30px;
      }

      @media screen and (min-width: 1024px) and (max-width: 1535px){
        font-size: 32px;
      }

    }

    .size-h5{
      @media screen and (max-width: 767px){
        font-size: 22px;
      }

      @media screen and (min-width: 768px) and (max-width: 1023px){
        font-size: 24px;
      }

      @media screen and (min-width: 1024px) and (max-width: 1535px){
        font-size: 24px;
      }

    }

    .size-h6{
      @media screen and (max-width: 767px){
        font-size: 16px;
      }

      @media screen and (min-width: 768px) and (max-width: 1023px){
        font-size: 18px;
      }

      @media screen and (min-width: 1024px) and (max-width: 1535px){
        font-size: 20px;
      }

    }




  }

  &__bg-image,
  &__bg-image-outside,
  &__bg-image-inside{
    height: fit-content;
  }

  &__bg-video,
  &__bg-video-outside,
  &__bg-video-inside{
    @media screen and (min-width: 992px){
      min-height: 700px;
    }

    @media screen and (min-width: 768px) and (max-width: 991px){
      min-height: 1170px;
    }

    @media screen and (max-width: 767px){
      min-height: 790px;
    }
  }

  &__container{
    justify-content: center;
    display: flex;
    padding-top: 30px;
    padding-bottom: 30px;
    height: 100%;

    &.countdown{
      padding-top: 100px;
      padding-bottom: 100px;

      @media screen and (min-width: 768px) and (max-width: 991px){
        padding-top: 200px;
        padding-bottom: 200px;
      }

      @media screen and (max-width: 767px){
        padding-top: 30px;
        padding-bottom: 250px;
      }
    }

    &.staticCampagna{
      padding-bottom: 40px;
    }

    .row{
      align-content: center;
    }

    .inRow{
      gap: 20px!important;
    }

    @media screen and (max-width: 767px){
      .inRow{
        gap: 10px!important;
      }
    }

    &.staticCampagna{
      @media screen and (min-width: 768px) and (max-width: 991px){
        .row{
          display: flex;
          flex-direction: column-reverse;

          .modular-hero__right-column,
          .modular-hero__left-column{
            height: 50%;
          }
        }
      }

      @media screen and (max-width: 767px){
        .row{
          .modular-hero__right-column,
          .modular-hero__left-column{
           // height: auto;
          }
        }
      })
    }
  }



  &__left-column,
  &__right-column{
    align-content: center;

    @media screen and (min-width: 992px){
      height: 100%;
    }
  }

  &__countdown-version{
    .top{
      top: 0;
      position: absolute;
      width: 100%;
      left: 0;
    }

    .bottom{
      bottom: 0;
      position: absolute;
      width: 100%;
      left: 0;
    }
  }

}



@media screen and (min-width: 768px) and (max-width: 991px){
  .width70-tab{
    width: 70%;
  }

  .flex-tab{
    display: flex;
  }
}

.mb--15{
  margin-bottom: -15px;
}