.home{
   min-height: 100vh;
}
.video-section{
   position: relative;
   right: 0;
   bottom: 0;
   width: 100%;
   height: 600px;
   overflow: hidden;
}
/*.video-section:before{
   content: '';
   background: #000;
   text-align: center;
   padding-top: 20%;
   font-size: 2vw;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}*/
.fullscreen-video {
   object-fit: cover;
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
}


.video-content {
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  height: 30%;
  padding: 0;
}
.video-content-img {
    width: 185px;
    /*max-width: 295px;
    min-width: 200px;*/
    height: auto;
    margin: 5px 6px;
    filter: invert(80%);
    -webkit-filter: invert(80%);
}
.video-subtitle{
   color: #fff;
   font-size: 14px;
   text-align: center;
}
/* SWIPER 1 HOME PAGE */
.home-swiper-container {
  width: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
}
.home-swiper-slide {
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   width: 300px;
   height: 400px;
}
.home-swiper-button-next{
   position: absolute;
    top: 50%;
    right: 0;
    width: 30px;
    height: 30px;
    margin-block-start: auto;
    background-image: url(../../site_ico/dx-arrow-slider.png);
    background-size: 30px;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    z-index: 10;
    transition: all .4s linear;
}
.home-swiper-button-prev{
   position: absolute;
    top: 50%;
    left: 0;
    width: 30px;
    height: 30px;
    margin-block-start: auto;
    background-image: url(../../site_ico/sx-arrow-slider.png);
    background-size: 30px;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    z-index: 10;
    transition: all .4s linear;
}
/* FINE SWIPER 1 HOME PAGE */


.home-bseller{
   margin: 50px auto;
}
.home-bseller>h1{
   margin: 20px auto;
   padding-top: 20px;
}
/* BEST SELLER SLIDER */
.bseller-swiper-container {
  width: 100%;
  height: auto;
}

.bseller-swiper-slide {
   text-align: center;
   background: #fff;

   /* Center slide text vertically */
   display: -webkit-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   -webkit-align-items: center;
   align-items: center;
   
}

.bseller-swiper-button-next{
    position: absolute;
    top: 50%;
    right: 0;
    width: 30px;
    height: 30px;
    margin-block-start: auto;
    background-image: url(../../site_ico/dx-arrow-slider.png);
    background-size: 30px;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    z-index: 10;
    transition: all .4s linear;
}
.bseller-swiper-button-prev{
   position: absolute;
    top: 50%;
    left: 0;
    width: 30px;
    height: 30px;
    margin-block-start: auto;
    background-image: url(../../site_ico/sx-arrow-slider.png);
    background-size: 30px;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    z-index: 10;
    transition: all .4s linear;
}

.bseller-article-container{
   display: block;
   text-align: center;
   width: 90%;
}
.bseller-prod-img{
   width: 100%;
   height: 200px;
   background-position: center;
   background-size: contain;
   background-repeat: no-repeat;
}
.bseller-article-container>h2{ margin: 10px auto;}

/* FINE BEST SELLER SLIDER */

.home-presentazione{
   width: 100%;
   min-height: 400px;
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   position: relative;
}
.home-presentazione:before{
   content: '';
   background-image: url(../../media/img_sfondo_presentazione.jpg);
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   opacity: 0.3;
   z-index: -1;
}

.home-presentazione-testo{
   position: absolute;
   top: 10px;
   left: 50%;
   width: 100%;
   height: 100%;
   transform: translateX(-50%);
   
   padding: 10px 10%;
}
.home-presentazione-testo>h1{ font-size: 30px;margin-bottom: 20px; line-height: 32px;}
.home-presentazione-testo>p{ font-size: 24px; line-height: 30px; text-align: justify; margin: 10px auto}



.home-theIcon{
   width: 100%;
   height: 100vh;
   position: relative;
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   text-align: center;
}

.home-theIcon>div{
   position: absolute;
   top: 40%;
   left: 50%;
   transform: translateX(-50%);
   width: 50%;
}
.home-theIcon h1{ font-size: 60px; margin-bottom: 50px; line-height: 60px;}

.home-scopri{
   display: flex;
   justify-content: center;
   align-items: flex-start;
   flex-direction: row;
}
.home-scopri>div{
   width: 50%;
   height: 100vh;
   position: relative;
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
}

.home-scopri>div div{
   position: absolute;
   top: 45%;
   left: 50%;
   transform: translateX(-50%);
   width: 50%;
}
.home-scopri h1{ font-size: 40px; margin-bottom: 50px; line-height: 60px;}



/* loading video icon*/

.loader-container{
   position: absolute;
   top:0;
   left: 0;
   width: 100%;
   height: 100%;
   margin: 0 auto;
   padding: 0;
   font-family: consolas;
   font-size: 30px;
   display: flex;
   justify-content: center;
   align-items: center;
   background: #363636;
   min-height: 200px;
}

.loader{
   display: flex;
   align-items: flex-end;
   transform: translateY(-35px);
}
.loader span{
   width: 20px;
   height: 10px;
   background: #111;
   margin: 0 10px;
   height: calc(10px * var(--i));
   display: flex;
   justify-content: center;
   align-items: flex-end;
   animation: barra 2s linear infinite;
   animation-delay: calc(0.10s * var(--i));
}

.loader span i{
   display: block;
   font-stretch: normal;
   color: #fff;
   font-weight: bold;
   transform: translateY(70px);
   animation: lettere 2s linear infinite;
   animation-delay: calc(0.10s * var(--i));
}

.search-bar-container{
   display: none;
   width: 350px;
   height: 40px;
   position: fixed;
   top: 120px;
   right: 0px;
   padding-left: 20px;
   box-shadow: 0px 5px 12px #333;
   border-radius: 10px;
   z-index: 10000;
   background-color: white;
}

.popup-container{
   width: 60vw;
   height: 80vh;
   position: fixed;
   top: 18%;
   left: 50%;
   transform: translateX(-50%);
   padding: 0;
   margin: 0 auto;
   box-shadow: 0px 5px 12px #333;
   z-index: 10000;
   background-color: white;
   animation: popup 1s linear;
}

.popup-container > img{
   width: 100%;
   height: 100%;
}
.popup-container > .closer-btn{
   position: absolute;
   right: 0;
   top: 0;
   width: 65px;
   padding: 10px;
}

.cookie-bar-container{
   width: 100vw;
   height: auto;
   position: fixed;
   bottom: 0px;
   left: 0px;
   padding: 20px;
   box-shadow: 0px 5px 12px #333;
   z-index: 10000;
   background-color: white;
}
.cookie-bar-container p{
   width: 90%;
   text-align: justify;
}
.cookie-bar-container .btn-std{
    position: absolute;
    top: -7px;
    right: 16px;
    width: 35px;
    height: 35px;
}
.search-bar-container .btn-std{
   position: absolute;
    top: -7px;
    right: 10px;
    width: 35px;
    height: 35px;
}
.search-bar-container .btn-std img{
    width: 20px;
    height: auto;
}

@media screen and (max-width: 800px){
   .search-bar-container {
      top: 60px;
      left: 0px;
   }
   .cookie-bar-container .btn-std{ right: 5px; }
   .video-section{  height: 45vh; }
   .fullscreen-video {
      object-fit: fill;
      width: 100%;
      height: 100%;
   }
   .video-content { /*display: none;*/ }
   .video-content-img {
      width: 20vw;
      min-width: 100px;
      height: auto;
      margin: 2px 1px;
   }
   .video-subtitle{ text-align: center; }
   .video-subtitle h1{ font-size: 1.3rem;}
   .home-presentazione-testo>h1 {
      font-size: 28px;
      margin-bottom: 15px;
      line-height: 28px;
   }
   .home-presentazione-testo>p {
      font-size: 16px;
      line-height: 24px;
      text-align: justify;
      margin: 10px auto;
   }
   .home-theIcon>div{ width: 80% }
}


@media screen and (max-width: 500px){
   .home-presentazione-testo>h1 {
      font-size: 21px;
      margin-bottom: 3px;
      line-height: 21px;
   }
   .home-presentazione-testo>p {
      font-size: 12px;
      line-height: 23px;
      text-align: justify;
      margin: 6px auto;
   }
   .home-theIcon{ height: 300px; background-size: contain;}
   .home-theIcon>div{ width: 90%; top: 30%;}
   .home-theIcon h1 { font-size: 34px; }
   .home-scopri{ flex-direction: column; }
   .home-scopri>div{ width: 100%; height: 300px; background-size: contain;}
   .home-scopri>div div{ width: 90%; }
   .search-bar-container {
      width: 100vw;
      top: 60px;
      left: 0px;
   }
   .popup-container { width: 100vw; };
}



@keyframes barra{
   0%{
      background: #fff;
      filter: blur(2px);
      box-shadow: 0 0 10px #00b3ff,
                  0 0 20px #00b3ff,
                  0 0 40px #00b3ff,
                  0 0 80px #00b3ff,
                  0 0 120px #00b3ff,
                  0 0 200px #00b3ff,
                  0 0 300px #00b3ff,
                  0 0 400px #00b3ff;
   }
   25%,75%{
      background: #111;
      filter: blur(0px);
      box-shadow: none;
   }
   100%{
      background: #fff;
      filter: blur(2px);
      box-shadow: 0 0 10px #00b3ff,
                  0 0 20px #00b3ff,
                  0 0 40px #00b3ff,
                  0 0 80px #00b3ff,
                  0 0 120px #00b3ff,
                  0 0 200px #00b3ff,
                  0 0 300px #00b3ff,
                  0 0 400px #00b3ff;
   }
}

@keyframes lettere{
   0%{
      color: #fff;
      filter: blur(2px);
      text-shadow: 0 0 10px #00b3ff,
                  0 0 20px #00b3ff,
                  0 0 40px #00b3ff,
                  0 0 80px #00b3ff,
                  0 0 120px #00b3ff,
                  0 0 200px #00b3ff,
                  0 0 300px #00b3ff,
                  0 0 400px #00b3ff;
   }
   25%,75%{
      color: #111;
      filter: blur(0px);
      text-shadow: none;
   }
   100%{
      color: #fff;
      filter: blur(2px);
      text-shadow: 0 0 10px #00b3ff,
                  0 0 20px #00b3ff,
                  0 0 40px #00b3ff,
                  0 0 80px #00b3ff,
                  0 0 120px #00b3ff,
                  0 0 200px #00b3ff,
                  0 0 300px #00b3ff,
                  0 0 400px #00b3ff;
   }
}

@keyframes popup{
   0%    { opacity: 0; }
   50%   { opacity: 0.5; }
   100%  { opacity: 1; }
}