body {background:white; padding:0px; margin:0px; width:100%; float:left;}

/*main { width: 1900px;margin: 0 auto;}*/

.logo-holder {float:left; width:100%; text-align: center;padding-top: 40px; overflow: hidden;}
.zebra-logo, .shopping-retail{ text-align:center;padding-top: 40px;}


.shopping-retail, .logo-holder .arrow-top, .arrow-bottom{ float:left; width:100%}
.logo-holder .arrow-top{display:none; padding-top:40px; text-align:center}
.arrow-bottom{padding-bottom:30px; padding-top:10px !important; text-align:center}

.zebra-logo img {max-width: 280px;}

.zebra-logo {
    position: relative;
    overflow: hidden;
}


.zebra-logo:after {
    animation: shine 3s ease-in-out infinite;
    animation-fill-mode: forwards;
    content: "";
    position: absolute;
    top: -200%;
    left: -300%;
    width: 500%;
    height: 100%;
    opacity: 0;
    transform: rotate(30deg);
    background: rgba(255, 255, 255, 0.13);
    background: linear-gradient( to right, rgba(255, 255, 255, 0.199) 0%, rgba(255, 255, 255, 0.295) 77%, rgba(255, 255, 255, 0.63) 92%, rgba(255, 255, 255, 0) 100% );
    display:none;
}


@keyframes shine {
    10% {
      opacity: 1;
      top: -30%;
      left: -30%;
      transition-property: left, top, opacity;
      transition-duration: 1s, 1s, 1s;
      transition-timing-function: ease;
    }
    100% {
      opacity: 0;
      top: -30%;
      left: -30%;
      transition-property: left, top, opacity;
    }
  }
  

.shopping-retail img{max-width: 280px;}
.logo-holder .arrow-top img, .arrow-bottom img  {max-width: 200px;}




.flags-holder {max-width: 1900px; margin:0 auto}
.flags {float:left;width:100%;margin:0px; padding:0px; list-style-type: none;padding: 70px 0  0 0;}
.flags li {display: inline-block; width: 30%; text-align: center; max-width: 100px; min-height: 120px;   }


.flag-col a {float:left;width: 100%;   text-align: center;}


.flag-col a img {/* max-width: 100px; */width: 95%; transition: all 0.2s ease-in-out; }

.flags li:hover a img {width: 100%; }


.vivovita-logo {float:left; width:100%; text-align: center;}
.vivovita-logo img {max-width: 280px;}

.flags {
    display: inline-flex;flex-wrap: wrap;gap: 3% 3%;justify-content: center;align-items: center;margin: 0 auto;float: left;

}




@media only screen and (min-width: 768px) { 


  .flags {padding: 70px 0  70px 0;}
  .logo-holder .arrow-top {display:block !important; padding-top:40px}
  .arrow-bottom {display:none}

}

@media only screen and (min-width: 1024px) { 

    .flags {gap: 3% 5%;}

}


@media only screen and (min-width: 992px) and (max-width: 1441px) { 

  .zebra-logo img, .shopping-retail img  {max-width: 260px;}
  .logo-holder .arrow-top img, .arrow-bottom img  {max-width: 180px;}

  .flags {padding:50px 0 50px 0;}
  .flags li {max-width: 90px;}


}







