/* Config */
:root {
  --font-family: 'Rockwell Std', 'Open Sans', sans-serif;
  --font-family: 'Lato';
  --font-size: 16px;

  --main-color: #B34D96;
  --brighter-color: #FAFAFA;
  --bright-color: #76BBA4;
  --dark-color: #B34D96;
  --darkter-color: #B34D96;
  
  --body-backcolor: var(--brighter-color);
  --border-color: #cccccc;
  --thumb-backcolor: white;

  --header-background-image: url('/image/catalog/paltas-fondo.webp');
  --header-background-color: #FFF;

  --menu-backcolor: #76BBA4;
  --menu-bordercolor: #76BBA4;
  --menu-seeall: #FFF;
  --menu-color: #FFF;
  --menu-selbackcolor: #B34D96;
  --menu-selcolor: #FFF;
  --menu-submenu-filter: blur(8.5px);
  --menu-submenu-shadow: 0 8px 32px 0 #000000a1;
  --menu-submenu-background: #78bba5d4;
  --menu-submenu-border-left: 4px solid #B34D96;
  
  --footer-backcolor: #76BBA4;
  --footer-color: white;
  --footer-colorhover: white;
  
  --buttons-backcolor: var(--main-color);
  --buttons-color: white;
  --buttons-hoverbackcolor: var(--bright-color);
  --buttons-hovercolor: white;

  --shopping-cart-button-backcolor: var(--dark-color);
}

#header-image-wrapper {
    background-position: 0px -206px;
}
    
@font-face {
  font-family: 'Rockwell Std';
  src: url('/custom_fonts/Rockwell Std Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
} 

#content > h1 {
    font-size: 2.2em;
    font-weight: 700;
    margin-bottom: 18px;
    color: #B34D96;
    letter-spacing: 1px;
    text-align: center;
    position: relative;
    z-index: 1;
}
#content > h1::after {
    content: '';
    display: block;
    margin: 10px auto 0 auto;
    width: 60px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, #B34D96 0%, #76BBA4 100%);
    opacity: 0.7;
    transition: width 0.3s;
}
#content:hover h1::after {
    width: 90px;
}

/* VERRR!!! */
.nav.navbar-nav {
    background-color: var(--menu-backcolor);
    justify-content: space-around;
}
#menu .nav > li {
    flex-direction: row;
    flex: 1;
}
#menu .nav > li:not(:last-child):after {
    align-self: center;
    border-color: #FFF;
    content: "";
    border-left-style: solid;
    border-left-width: 2px;
    height: 35%;
    margin: 0 2px;
}
#menu .nav > li > a {
    white-space: nowrap;
    flex: 1;
}   
@media (max-width: 767px) {
    #menu .nav.navbar-nav > li {
        flex-direction: column;
    }
}

/* preloader */
.lds-ripple,
.lds-ripple div {
  box-sizing: border-box;
}
.lds-ripple {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ripple div {
  position: absolute;
  border: 4px solid #76BBA4;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes lds-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 8px;
    height: 8px;
    opacity: 0;
  }
  4.9% {
    top: 36px;
    left: 36px;
    width: 8px;
    height: 8px;
    opacity: 0;
  }
  5% {
    top: 36px;
    left: 36px;
    width: 8px;
    height: 8px;
    opacity: 1;
  }
  100% {
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    opacity: 0;
  }
}

.dropdown-menu > li > a {
    color: #666666;
 }

.b-game-card__text {
  background: rgba(118, 187, 164, 0.6);
}
.b-game-card:hover .b-game-card__overlay,
.b-game-card__overlay {
  background: rgba(179, 77, 150, 0.2);
}

.b-game-card__text {
  font-family: 'Rockwell Std', 'Open Sans', sans-serif;
  padding: 12px 20px 7px 20px;
}

/* First paint for the home category carousels. Breakpoints match the
   owlCarousel() calls stored in the Categorias 1 and Categorias 2 modules
   (1/2/3/4/5/6 items at 0/600/900/1200/1500/1800). owl-pending is removed
   when Owl returns, so these rules do not fight its pixel widths. */
#categories_1.owl-pending,
#categories_2.owl-pending {
    --owl-items: 1;
}
@media (min-width: 600px) {
    #categories_1.owl-pending,
    #categories_2.owl-pending {
        --owl-items: 2;
    }
}
@media (min-width: 900px) {
    #categories_1.owl-pending,
    #categories_2.owl-pending {
        --owl-items: 3;
    }
}
@media (min-width: 1200px) {
    #categories_1.owl-pending,
    #categories_2.owl-pending {
        --owl-items: 4;
    }
}
@media (min-width: 1500px) {
    #categories_1.owl-pending,
    #categories_2.owl-pending {
        --owl-items: 5;
    }
}
@media (min-width: 1800px) {
    #categories_1.owl-pending,
    #categories_2.owl-pending {
        --owl-items: 6;
    }
}
#categories_1.owl-pending .owl-stage,
#categories_2.owl-pending .owl-stage {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    transform: none;
}
#categories_1.owl-pending .owl-item,
#categories_2.owl-pending .owl-item {
    flex: 0 0 calc(100% / var(--owl-items));
    width: calc(100% / var(--owl-items));
    max-width: calc(100% / var(--owl-items));
    min-width: 0;
    float: none;
    box-sizing: border-box;
}