@font-face {
    font-family: 'Barlow Condensed';
    src: url('/fonts/BarlowCondensed-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Barlow Condensed';
    src: url('/fonts/BarlowCondensed-Black.ttf') format('truetype');
    font-weight: 900; /* Black font weight is usually 900 */
    font-style: normal;
}

@font-face {
    font-family: 'Barlow Condensed';
    src: url('/fonts/BarlowCondensed-BlackItalic.ttf') format('truetype');
    font-weight: 900; /* Black font weight is usually 900 */
    font-style: italic;
}

@font-face {
    font-family: 'Barlow Condensed';
    src: url('/fonts/BarlowCondensed-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


body {
  font-family: 'Barlow Condensed', sans-serif;
    color:white
}

.fw_bold{
    font-weight: 700 !important;
}

.fw_regular{
    font-weight: normal !important;
}

.fw_black{
    font-weight: 900 !important;
}

.fw_blackI{
    font-style: italic !important;
    font-weight: 900 !important;
}


.ra-elegido{
    background:linear-gradient(90deg, rgb(147 0 255) 0%, rgb(0 58 255 / 75%) 100%) !important;
}



.agrandar{
    
    transition:0.3s;
}

.sombra_cartas{
    box-shadow:2px 2px 2px 2px rgba(0, 0, 0, 0.9);
}

.agrandar:hover{
    
    -webkit-transform: scale(1.1) !important;
    transform: scale(1.1) !important;
}

.agrandar2{
    transition:0.3s;
}

.agrandar2:hover{
    
    -webkit-transform: scale(1.05) !important;
    transform: scale(1.05) !important;
}


select{
    transition: .3s;
}

.spinner-grow {
    --bs-spinner-animation-speed: 1.5s;
}


input:focus {
    border: 1 solid rgba(255, 255, 255, 0);
}




body::-webkit-scrollbar {
    width: 1em;
  }
   
  body::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  }
   
  body::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    outline: 0px solid slategrey;
  }





.offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-sm, .offcanvas-xl, .offcanvas-xxl{
    --bs-offcanvas-width : 300px;
    transition: 1s ease;
    background-color: transparent;
    --bs-offcanvas-border-width: 0px;
}



/* width */
::-webkit-scrollbar {
    width: 15px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 0px black; 
    border-radius: 0px;
    background:rgba(58, 56, 56, 0.623);
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, rgb(255, 169, 50) 0%, rgb(255, 211, 39) 100%); 
    border-radius: 10px;
    border: 0px solid black;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, rgb(255 211 151) 0%, rgb(255 234 151) 100%);
  }

  







.modal{
    --bs-modal-width: 360px;
}




/* input:-webkit-autofill,
input:-webkit-autofill:focus {
  transition: background-color 600000s 0s, color 600000s 0s;
} */


/* #name::placeholder{
    color:rgba(255, 255, 255, 0.8);
} */



-check-input:checked{
    background-color: #38c1e3;
    border-color:#38c1e3;
    
}

.form-check-input{
    transition: 0.8s;
}



input:focus{
    outline: none;
    border: 0px;
}

input{
    color:black;
}



    .content {
        /* this is needed or the background will be offset by a few pixels at the top */
        overflow: auto;
        position: relative;
      }


select option{
    background:white;
}

select{

   background:linear-gradient(90deg, rgb(255, 169, 50) 0%, rgb(255, 211, 39) 100%) !important;
    
}


select:hover{

    background-color: rgb(255, 255, 255);

}

.dropdown-menu {
    --bs-dropdown-min-width: 15rem;
    --bs-dropdown-link-active-bg: #00ccffc7;
}


  /* sssssssssssssssssssss */





  .web-center{
    display:flex;
    justify-content:center;
    align-items:center;
  }

  .bg-fondo{
    background-color:#7aadff;
  }

  .bg-cartas{
    background:linear-gradient(170deg, rgba(58, 56, 56, 0.623) 0%, rgb(31, 31, 31) 100%) !important;
  }
  
  .bg_cartas{
    background:linear-gradient(170deg, rgba(58, 56, 56, 0.623) 0%, rgb(31, 31, 31) 100%) !important;
  }
  
   .bg_amarillo{
    background:linear-gradient(90deg, rgb(255, 169, 50) 0%, rgb(255, 211, 39) 100%) !important;
  }
  
  .border_unselected{
      border: 2px solid #2d2d2d;
  }
  
  .border_selected{
      background:linear-gradient(90deg, rgb(255, 169, 50) 0%, rgb(255, 211, 39) 100%) !important;
  }
  
  .texto_amarillo_oscuro{
      color: #8d5800c4;
  }

  .fondo1{
    background-image:url('/img/fondo1.png');
    background-size:cover;
    background-position:50%;
  }

  .editorial {
    display: block;
    width: 100%;
    height: 60px;
    max-height: 60px;
    margin: 0;
    z-index:5;
    bottom:0;
    position:absolute;
    left:0px;
    float:left;
  }
  
  .parallax1 > use {
    animation: move-forever1 10s linear infinite;
    &:nth-child(1) {
      animation-delay: -2s;
    }
  }
  .parallax2 > use {
    animation: move-forever2 8s linear infinite;
    &:nth-child(1) {
      animation-delay: -2s;
    }
  }
  .parallax3 > use {
    animation: move-forever3 6s linear infinite;
    &:nth-child(1) {
      animation-delay: -2s;
    }
  }
  .parallax4 > use {
    animation: move-forever4 4s linear infinite;
    &:nth-child(1) {
      animation-delay: -2s;
    }
  }
  @keyframes move-forever1 {
    0% {
      transform: translate(85px, 0%);
    }
    100% {
      transform: translate(-90px, 0%);
    }
  }
  @keyframes move-forever2 {
    0% {
      transform: translate(-90px, 0%);
    }
    100% {
      transform: translate(85px, 0%);
    }
  }
  @keyframes move-forever3 {
    0% {
      transform: translate(85px, 0%);
    }
    100% {
      transform: translate(-90px, 0%);
    }
  }
  @keyframes move-forever4 {
    0% {
      transform: translate(-90px, 0%);
    }
    100% {
      transform: translate(85px, 0%);
    }
  }

  .texto-oscuro{
    color:#344767;
  }

  .bg-oscuro{
    background: linear-gradient(310deg,rgba(2, 6, 21, 0.03) 0%,rgba(2, 6, 21, 0.05) 100%)
  }

  .border-oscuro{
    border:1px solid #e9e9e9;
  }











  /* slider -------------------- */
  
  input[type=range]::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3bade3 ', endColorstr='#ff357f ', GradientType=1 );
    height: 20px;
    border-radius: 20px;
  }
  
  input[type=range]:focus {
    outline: none;
  }
  
  input[type=range]::-moz-range-track {
    -moz-appearance: none;
    background: rgba(59,173,227,1);
    background: -moz-linear-gradient(45deg, rgba(59,173,227,1) 0%,  rgb(0, 200, 255) 51%, rgb(4, 38, 255) 100%);
    background: -webkit-linear-gradient(45deg, rgba(59,173,227,1) 0%,  rgb(0, 200, 255) 51%, rgb(4, 38, 255) 100%);
    background: -o-linear-gradient(45deg, rgba(59,173,227,1) 0%,  rgb(0, 200, 255) 51%, rgb(4, 38, 255) 100%);
    background: -ms-linear-gradient(45deg, rgba(59,173,227,1) 0%,  rgb(0, 200, 255) 51%, rgb(4, 38, 255) 100%);
    background: linear-gradient(45deg, rgba(59,173,227,1) 0%,  rgb(0, 200, 255) 51%, rgb(4, 38, 255) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3bade3 ', endColorstr='#ff357f ', GradientType=1 );
    height: 30px;
  }

#rangoCantidad {
    -webkit-appearance: none;
}

#rangoCantidad::-webkit-slider-thumb {
  position:relative;
    appearance: none;
    width: 30px;
    height: 30px;
    bottom:30%;
    background:linear-gradient(45deg, #b3731b 0%, #ffd327 51%, #b3731b 100%);
    border-radius: 50%;
    cursor: -webkit-grabbing;
    border:1px solid #ffd327;
}

#rangoCantidad::-webkit-slider-thumb:hover {

    outline:10px solid #0073ff96;

}


#rangoCantidad::-moz-range-thumb {
    -moz-appearance: none;
    appearance: none;
    width: 30px;
    height: 30px;
    background-color: red;
    border-radius: 50%;
}




  

  input[type=range]::-webkit-slider-thumb:active {
    cursor: -webkit-grabbing;
  }
  
  input[type=range]::-moz-range-thumb:active {
    cursor: -moz-grabbing;
  }

  
  #rangoContainer {
    position: relative;
}

.menuClass{
  transition: 0.3s;

}

.menuClass:hover{
  background: linear-gradient(310deg,#288eca 0%,#005aff 100%) !important;
  color: white !important;
}

.opcionesMenu{
  transition:0.3s;
}
.opcionesMenu:hover{
  border-radius:1rem !important;
  background: linear-gradient(310deg,#288eca 0%,#005aff 100%) !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  color: white !important;
  padding-left : 0.5rem !important;
  padding-right: 0.5rem !important;
}

.opcionesMenu:hover i,
.opcionesMenu:hover span{
  color: white !important;
}

.hoverColor{
  transition:0.3s;
}

.hoverColor:hover{
    
  border-radius:1rem !important;
  background: linear-gradient(90deg, rgb(255, 169, 50) 0%, rgb(255, 211, 39) 100%) !important;
  color: white !important;
  
}


.botonSelect{
  border-radius:1rem !important;
  background: linear-gradient(90deg, rgb(255, 169, 50) 0%, rgb(255, 211, 39) 100%) !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  color: white !important;
}

.hover1_1{
  transition:0.3s;
  pointer-events: none;
}

.hover1:hover .hover1_1{
  opacity:1 !important;
  pointer-events: auto;
}

.hover2_1{
  transition:0.3s;
  pointer-events: none;
}

.hover2:hover .hover2_1{
  opacity:1 !important;
  pointer-events: auto;
}

.color-azul{
  color:#005aff;
}

.color_amarillo{
    color:#ffd327;
}

.z9820pa{
  position:absolute;
}

.w91sw1{
 width: 100% !important;
}

.card_box {

  border-radius: 20px;
  position: relative;
  box-shadow: 0 25px 50px rgba(0,0,0,0.55);
  cursor: pointer;
  transition: all .3s;
  
}



.card_box span {
  position: absolute;
  overflow: hidden;
  width: 150px;
  height: 150px;
  top: -10px;
  left: -10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card_box span::before {
  font-size:0.7rem;
  content: 'FREE';
  position: absolute;
  width: 44%;
  height: 15px;
  background-image: linear-gradient(90deg, rgb(255, 169, 50) 0%, rgb(255, 211, 39) 100%);
  transform: rotate(-45deg) translateY(-73px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  z-index:2;
}

.card_box span::after {
    content: '';
    position: absolute;
    width: 10px;
    bottom: 63px;
    left: 0;
    height: 8px;
    z-index: 1;
    box-shadow: 77px -77px #cc3f47;
    background-image: linear-gradient(45deg, #FF512F 0%, #F09819 51%, #FF512F 100%);
}

.no-select {
    user-select: none; /* Estándar */
    -webkit-user-select: none; /* Chrome, Safari y Opera */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
}