/* Add custom CSS styles below */

@media only screen and (min-width: 601px)
{
     body.index .s-block.s-block--logos-slider .grid
     {
       display: flex;
       flex-direction: row;
     }
     body.index .s-block.s-block--logos-slider a {
       height: auto;
     }
     body.index .brand-item img
    {
       max-width: 71px !important;
     }
}
  @media only screen and (max-width: 600px) 
  {
    header {
      display: flex !important;
      flex-direction: column !important;
      border-bottom-right-radius: 15px;
      border-bottom-left-radius: 15px;
      overflow: hidden;
    }
    .top-navbar{
    order: 2 !important}
    .main-nav-container {
    min-height: 0px;
    height: auto !important;
    }
    salla-slider[type]:not(.hydrated) > div > div, salla-slider[type]:not(.hydrated) .swiper > div > div > div, .carousel-slider .swiper-wrapper > div
    {width: 49vw}
    
    .store-footer {text-align: center}
    .soter-footer.flex.rtl:space-x-reverse.space-x-2.items-end           
    {
      display: block !important;
      text-align: center;
      align-items : center !important;
    }
    
    body.index section.s-block.s-block--banners.container > div.grid.two-row > a.banner-entry,
    a.banner-entry:first-child
    {
      width: 63px !important;
        height: 63px !important;
    }
        body.index section.s-block.s-block--banners.container > div.grid.two-row .banner-entry h3 
        {
         bottom: -16px !important;
        font-size: 11px !important;
        text-align: center;
        right: -22px;
        left: 0;
        }
        .banner-entry h3.text-with-border span
        {
          display: block;
          overflow: visible;
          width: max-content;
        }
        
        footer.store-footer div.flex
        {
          display: block;
          direction: unset !important;
          text-align: center;
        }
        footer .s-contacts-list-vertical
        {
          align-items: center;
        }
        .store-footer .contact-social
        {
          align-items: center;
          justify-content: center;
          display: flex;
      }
  }
  

@media (min-width: 100px)
{
 
 .s-user-menu-trigger {background: #000;}
 .s-cart-summary-total {color: #fff;}
    .main-nav-container .bg-inherit, 
    .top-navbar {
      background-color: #000 !important;
    }
    
    .banner--fixed img { 
      border-radius: 20px !important;
    }
    
    .main-menu li.root-level {
      color: #fff !important;
    }
    
    .main-menu .sub-menu{color: #000 !important;}
    
    .header-btn__icon,
    .topnav-link-item 
    { color: #fff; }

body.index section.s-block.s-block--banners.container > div.grid.two-row

    {
      display: flex !important;
      flex-direction: row!important;
      flex-wrap: no-wrap!important;
      justify-content: space-between!important;
    }
    
      body.index section.s-block.s-block--banners.container > div.grid.two-row .banner-entry ,     body.index section.s-block.s-block--banners.container > div.grid.two-row .banner-entry:first-child {
        padding: 1rem;
        width: 200px;
        height: 200px;
        overflow: visible;
        background: rgb(249 250 251);
    }
    
    body.index section.s-block.s-block--banners.container > div.grid.two-row .square-photos:hover:after {
      border-radius: 50%;
      border: 1px dotted #ccc;
      padding: 0;
      position: unset!important;
      background-color: unset!important;
    }
    .has-overlay:after {background: unset;}
    body.index section.s-block.s-block--banners.container > div.grid.two-row .square-photos .lazy__bg.loaded
    {
      border-radius: 50%;
    }
    
    body.index section.s-block.s-block--banners.container > div.grid.two-row .banner-entry h3 {
    font-size: 15px;
    bottom: -102px;
    color: #000;
    overflow: visible;
    opacity: 1;
    border: none;
}

  .sicon-menu {color: #fff;}
  .s-slider-block__title-left {
    background: #fff;
    padding: 5px 11px;
    border-radius: 10px;
    border: 1px solid #e9e9e9;
}
  }