/* ----------------------------------------------------------
    :: Template Name: Karl - Fashion Ecommerce Template
    :: Author: Colorlib
    :: Author URL: https://colorlib.com
    :: Description: Karl is smart & elegant fashion e-commerce Template. It's suitable for all e-commerce business platform. It's super responsive for all      Desktop/Mobile layout.
    :: Version: 1.0
    :: Created: 09 January 2018
    :: Last Updated: 09 January 2018
    ---------------------------------------------------------- */

    /* -------------------------------------------------
    ============ PLACE YOUR CUSTOM CSS HERE ============
    ------------------------------------------------- */

/*========================================
ICONOS EN CARRO DE COMPRA Y FAVORITOS MINI Y EN POPUP DE PRODCTOS
===========================================*/
.cart i,.share_wf i{

    font-size: 1.7rem !important;

}

.quantity i{


    font-size:.8rem !important;
}

select{

    height:41px !important;
    border-radius: 5px !important;
    color: #575748;
    
}
/*=========================
INPUT SELECCIONADOS
========================*/
.mi-custom-select:focus, .mi-selectbox.active .select, input[type="text"]:focus,
input[type="number"]:focus,input[type="email"]:focus,textarea:focus, .btn-generic-active:focus{

    border-color: #F0A6A7 !important;
    /*box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(0, 0, 0, 0.075);*/
    -webkit-box-shadow:0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 2px #F0A6A7 !important;
    -ms-box-shadow:0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 2px #F0A6A7 !important;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 2px #F0A6A7 !important;
    background-color: #fff !important;
    transition: all .3s;
}
.mi-custom-select:focus + i {

  background-color: #fff !important;
  transition: all .3s;
}
/*==========================
    COMBO COLOR
============================*/
.miComboColor{/*ESTILO DEL COMBO ORIGINAL QUE LELVA EL VALOR POR POST */

  visibility: hidden;
  position: absolute;
  z-index: -1;

}

.mi-selectbox {
  
  width:70px !important;
  /*margin: auto;*/
  position: relative;
  
  border-radius: 6px;
}

.mi-selectbox a {
  text-decoration: none;
}

.mi-selectbox .mi-color{

  height: 30px;
  width:30px;
  border-radius: 7px;
  transform:translateX(2px);
  border:1px solid #DDDDDD;


}
.mi-selectbox .select {
  background: #fff;
  width: 70px;
  /*box-shadow: 0px 0px 0px rgba(0, 0, 0, .16);*/
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: .2s ease all;
  margin-bottom: 1px;
  padding: 4px;
  position: relative;
  z-index: 200;
  border:1px solid #DDDDDD;
}


.mi-selectbox:hover .select {
  /*box-shadow: 0px 5px 10px rgba(0, 0, 0, .16);*/
  border: 1px solid #b8b8b8;

}

.mi-selectbox .select.active:before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  border-top: 15px solid #213f8f;
  border-right: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid transparent;
  position: absolute;
  bottom: -30px;
  left: calc(50% - 15px);
}

.mi-selectbox .select i {
  font-size: 21px;
  transform:translateX(-8px) rotateX(0deg);
  color: #213f8f;
  transition:transform .4s;
}

.mi-selectbox.active .select i {
  
  transform:translateX(-8px) rotateX(360deg);
  transition:transform 0.4s;
}
/*
.titulo {
  margin-bottom: 10px;
  color: #000;
  font-weight: 600;
  font-size: 30px;
}

.descripcion {
  font-size: 18px;
  color: #434343;
}
*/
.mi-selectbox .opciones {
  background: #fff;
  border-radius:  10px;
  box-shadow: 1px 5px 10px rgba(0,0,0,.16);
  max-height: 400px;
  overflow: auto;
  z-index: 100;
  width: 70px;
  display: none;
  position: absolute;
}

.mi-selectbox .opciones.active {
  display: block;
  animation: fadeInSelect .3s forwards;
}

@keyframes fadeInSelect {
  from {
    transform: translateY(-60px) scale(.5);
  }
  to {
    transform: translateY(0) scale(1);
  }
}

.mi-selectbox .contenido-opcion {
  width: 100%;
  display: flex;
  align-items: center;
  transition: .2s ease all;
}

.mi-selectbox .opciones .contenido-opcion {
  padding: 5px;
  padding-top: 6px;
  padding-right: 0px;
  padding-left:8px;
}
/*
.contenido-opcion img {
  width: 60px;
  height: 60px;
  margin-right: 30px;
}
*/

.mi-selectbox .opciones .contenido-opcion:hover {
  background: rgba(0,163,217,.19);
  
}
/*
.opciones .contenido-opcion:hover .titulo,
.opciones .contenido-opcion:hover .descripcion {
  color: #fff;
}
*/

/*==============================
COMBO GENERICO
==================*/
/*COMBO GENERICO*/
.mi-custom-select {

  background-color: #FFFFFF !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  -o-appearance: none !important;
  /* no standardized syntax available, no ie-friendly solution available */
   height: 43px;
   border:1px solid #DDDDDD;/*COLOR BORDE CAMBO EN REPOSO*/
   border-radius:2px !important;
   padding-right:30px !important;
   padding-left:10px !important;
}
.mi-custom-select:hover {

  cursor:pointer;
  border:1px solid #b8b8b8;

}
.mi-custom-select.active + i{

  /*animation:spinIconSelect .5s linear;*/
  
  transform:rotateX(360deg);
  transition:transform .4s;

}
.mi-custom-select + i{

  float:right !important;
  position: relative;
  font-size:1.5rem;
  right: 25px;
  color: #575748;
  /* this is so when you click on the chevron, your click actually goes on the dropdown menu */
  pointer-events: none;
  /* everything after this is just to cover up the original arrow */
  /* (for browsers that don't support the syntax used above) */
  background-color: #fff;
  
  transform:rotateX(0deg);
  transition:transform .4s;


}

/*===================================
    TOOLTIP PERSONALIZADO
=====================================*/
.tooltip-puntos {

  display: inline-block;
  position: relative;
  z-index:99;
  width:22px;
  height:22px;
  top:1px;
  left:2px;
  color:#4CC9A9;
  font-weight:bold;
  border:2px solid #4CC9A9; 
  padding:0px 3px;
  padding-bottom:3px;
  border-radius:5px;
  cursor:pointer;

}
.tooltip-puntos:before {

  content:"...";
  position:absolute;
  margin:0 auto !important;
  bottom:1px;

}

.tooltip-puntos.info {

  display: inline-block;
  position: relative;
  width:22px;
  height:22px;
  top:3px;
  left:2px;
  color:#4CC9A9;
  background-color: #4CC9A9;
  font-weight:bold;
  border:2px solid #4CC9A9; 
  padding:0px 3px;
  padding-bottom:3px;
  border-radius:50%;
  cursor:pointer;

}

.tooltip-puntos.info:before {

  content: "\f129";
  font-family: "fontawesome";
  font-size:16px;
  font-weight: lighter;
  position:absolute;
  margin:0 auto !important;
  transform: translate(3px,3px);
  bottom:0px;
  left:4px;
  color:#fff;
  
}

.tooltip-puntos.dolar {

  display: inline-block;
  position: relative;
  width:22px;
  height:22px;
  top:-1px;
  left:2px;
  color:#FF0000;
  background-color: #FF0000;
  font-weight:bold;
  border:2px solid #FF0000; 
  padding:0px 3px;
  padding-bottom:3px;
  border-radius:50%;
  cursor:pointer;

}

.tooltip-puntos.dolar:before {

  content: "\f155";
  font-family: "fontawesome";
  font-size:14px;
  font-weight: lighter;
  position:absolute;
  margin:0 auto !important;
  transform: translate(2px,3px);
  bottom:2px;
  color:#fff;
  
}


.mi-data-tooltip {

  position: relative;
  background:transparent !important;

}
.mi-data-tooltip:before {

  content: attr(data-mi-tooltip); /* here's the magic */
  position:absolute;
  pointer-events: none;

  /*arribe y centrado*/
  transform:translate(-50%,-105%);
 
  
  /*espacio entre lineas*/
  line-height: 15px;
  /* basic styles */
  width:200px;
  padding:10px;
  border-radius:5px;
  background:#000;
  color: #fff !important;
  text-align:left;
  font-weight: normal;
  font-size:13px;
  opacity:0;
  transition: opacity .5s;
  
}
.mi-data-tooltip.abajo:before{

  transform:translate(-50%,25%);

}
.tooltip-puntos:hover .mi-data-tooltip:before {

  opacity:1;

}

.mi-data-tooltip.izquierda:before {

/* vertically center */
  top:50%;
  transform:translateY(-50%);
  /* reset defaults */
  left:initial;
  margin:initial;

  /* set new values */
  right:100%;
  margin-right:17px;
}
.mi-data-tooltip.derecha:before {

  /* vertically center */
  top:50%;
  transform:translateY(-50%);
  /* reset defaults */
  right: :initial;
  margin:initial;

  /* set new values */
  left:100%;
  margin-left:20px;
}

/*-------FIN TOOLTIP PERSONALIZADO-----------*/

/*--- FIN DETALLE COBRO ADICIONAL ENVIO --- */

/*===============================
    NUEVOS ICONOS
===============================*/
@font-face {
  font-family: 'icomoon';
  src:  url('../../css/new_svg_icons/fonts/icomoon.eot?5ecsmg');
  src:  url('../../css/new_svg_icons/fonts/icomoon.eot?5ecsmg#iefix') format('embedded-opentype'),
    url('../../css/new_svg_icons/fonts/icomoon.ttf?5ecsmg') format('truetype'),
    url('../../css/new_svg_icons/fonts/icomoon.woff?5ecsmg') format('woff'),
    url('../../css/new_svg_icons/fonts/icomoon.svg?5ecsmg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="mi-icon-"], [class*=" mi-icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fa-twitter:before, .ti-twitter:before {
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\e900";
}
/*--- MAPAS --*/
.mis-mapas-ecom {

  position:relative;
  z-index:2;
  min-height:450px;
  min-width:340px;
  transform:translateX(-4px);
  
}



/*--- DETALLE COBRO ADICIONAL ENVIO --- */



.expand-envio[aria-expanded="false"] i:nth-child(1) {

  display:block;

}
.expand-envio[aria-expanded="false"] i:nth-child(2) {

  display:none;

}
.expand-envio[aria-expanded="true"] i:nth-child(1) {

  display:none;

}

.expand-envio[aria-expanded="true"] i:nth-child(2) {

  display:block;
  
}

.promo-despacho .mensaje-promo { /*Contenedor promocion de despacho gratis o con descuento*/

  background-color:#D9F5FF; 
  
  width:100%; 
  padding:20px 10px 15px 10px;


}
.promo-despacho .mensaje-promo p{/*Texto mensaje promo despacho*/

  padding-left:3px;
  text-align: left !important;
  color:#2C2C3F;
  font-weight:600; 

}
.promo-despacho .progress {

  width: 100%;
  height:6px;
  margin-top:5px;

}

.promo-despacho .progress .progress-bar {

  height:6px;
  background-color: #FF8000;/*Color barra*/

}

.promo-despacho .gratis {

  color:#00B200 !important;
  font-weight:600;


}

#detEnvioAd {

  width:100%;

}
#detEnvioAd .motivo-adicional {

  font-weight: 600;


}
#detEnvioAd .lista-adicional {

  position:relative !important;
  display: -ms-flexbox !important;
    display: flex !important;

  -ms-flex-pack: justify !important;
    justify-content: space-between !important;
    margin-bottom:8px;

}
#detEnvioAd span {

  float:none;

}

/*--- FIN DETALLE COBRO ADICIONAL ENVIO --- */

.btn-generic {
   
    font-weight: 700;
    display: block;
    background-color:#93B0B4 ;
    border-radius: 0;
    color: #fff;
    font-size: 1rem !important;
    text-align: center;
    padding-top:20px;
    padding-bottom:20px;
    border:none;
    cursor:pointer;
    transition: all .5s;
}

.btn-generic:hover {
    font-weight: 700;
    background-color: #F0A6A7;
    color: #fff;
    
}

.btn-generic-active{

    font-weight: 600;
    background-color:#F0A6A7 ;
    padding:15px 25px;
    margin:40px 2px;
    border-radius: 0;
    color: #fff;
    font-size: 1rem !important;
    transition: background-color .4s;
    text-align: center;

}

.btn-generic-active:hover {

  font-weight: 600;
  background-color:#93B0B4;
  color: #fff;

}


.top_logo img{

    transform:translateX(-15px);
    max-width:225px;
    max-height: 180px;
    width: 100%;
    height: auto;
    transition: all .3s;

    }
/*================
  PRELOADER
=================*/
.myPreloader {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999999;
  width: 100%;
  height: 100%;
  background-color: #fff;
  overflow: hidden;
}
.myPreloader-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  /*animation:fadingIn .7s;*/
}

.myPreloader-inner i{

  font-size:100px !important;
  animation: fadingIn 1s linear, gira360 2s linear infinite, colorIcon 1s linear infinite;

}
/*=====================================
FACEBOOK Y WHATSAPP
============================*/
.usr-facebook-chat{

  /*position:fixed;*/
  display:inline-flex !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
  bottom:10px;
  right: 65px;
  width: 55px;
  height: 55px;
  padding-top: 3px;
  background: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19);
  border-radius: 50%;
  margin-right: 5px;

}

.usr-whatsapp-chat{

  /*position:fixed;*/
  display:inline-flex !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
  bottom:10px;
  right: 10px;
  width: 55px;
  height: 55px;
  padding-top: 3px;
  background: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19);
  border-radius: 50%;
}

.rrss-css{

  position: fixed !important;
  bottom:5px;
  z-index:101 !important;
  right:10px;

}
.rrss-css .container{

  -ms-flex-pack: end !important;
  justify-content: flex-end !important;
   height: 65px;
   bottom:5px;

}
.my-icons{/*ICONOS DEFINIDOS EN my-icons.svg*/

        fill:#D6C6B1;
        width:2.5rem;
        height: auto;
        max-height: 60px;
        position:relative;
        left:0px;
        transition:all .8s;
        

      }
.my-icons:hover{


  fill:#D10024 !important;
}
/*=======================
        POPUP FAVORITOS
=========================*/       
button.dropdown-product-remove {
background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}
.dropdown-product-remove i {

  font-size:1.3rem !important;

}
.favorite-list {
    background-color: #f4f6f8;
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.15);
    -webkit-transition-duration: 750ms;
    transition-duration: 750ms;
    border-radius: 0;
    display: none;
    position: absolute;
    right: -44px;
    top: 50px;
    width: 280px;
    z-index: 120;
}

.mi-favorito-list.favorite-list {
    display: block;
}

.favorite-list > li {
    border-bottom: 1px solid #ebebeb;
    padding: 20px 15px;
    position: relative;
    text-align: left;
    z-index: 1;
}

.favorite-list li .image {
    left: 15px;
    position: absolute;
    top: 20px;
    z-index: 9;
}

.favorite-list .image > img {
    width: 40px;
    height: 40px;
}

.favorite-list li .btn-checkout,
.favorite-list li .btn-cart {
    background-color: #F0A6A7;
    border-radius: 0;
    color: #fff;
    font-size: 13px;
}

.favorite-list li .btn-cart {
    background-color: #93B0B4;
}

.favorite-list li span {
    font-size: 13px;
    text-transform: uppercase;
}

.bg-carro-favo{

    background:#b8b8b8;
    color:#fff;

}
.bg-carro-favo i{

    color:#fff;
    font-size:2.3rem !important;


}
/*=================
MODALES DE INFO Y SUCURSAL
==========*/
#modal_info{

  z-index:10000;

}

.mi-modal-css .modal-header{

  background:#93B0B4;
  height: 70px;

}
.mi-modal-css h2{

  color:#93B0B4;
  font-weight: 600;
  font-size:19px;
  color:#fff;
}

.mi-modal-css p{

  font-size:1rem;
  font-weight: 500;
  padding:10px;

}
.mi-modal-css hr{

  height: 1px;
    background-color: rgba(153,153,153,.2);
    border: none;

}
/*======================
    FULL SLIDER
======================*/
.img-info    {

  position:relative;
  max-width: 120px;

}
/*==============
SLIDER MARCAS
===============*/
.marcas-img img {

  max-width: 120px;

}

.marcas-img img:first-child {

  margin-left:20%;

}

/*DESPACHOS*/
.section-despacho img:first-child {

  margin-left:20%;
}
/*============================
SCROLL PERSONALIZADO
=====================*/

.hide-scroll-menu{

  background-color: white;
  max-height: 80vh;
  overflow-y:auto; 
  scrollbar-width: none;
  -ms-overflow-style: none;
  /*border:20px solid blue;*/
   /*scrollbar-color: rgba(0, 0, 0, .5) rgba(0, 0, 0, 0);*/
   /*COLOR EN MOZILLA, ORDEN: COLOR DE BARRA DE SCROLL, COLOR DE FONDO DEL SCROLL*/;
   scrollbar-color: #F0A6A7 #CEF3FF;
    scrollbar-width: thin;
}


.hide-scroll-menu::-webkit-scrollbar {
    -webkit-appearance: none;
}

.hide-scroll-menu::-webkit-scrollbar:vertical {
    width:10px;
}

.hide-scroll-menu::-webkit-scrollbar-button:increment,.hide-scroll-menu::-webkit-scrollbar-button {
    display: none;
} 

.hide-scroll-menu::-webkit-scrollbar:horizontal {
    height: 10px;
}

.hide-scroll-menu::-webkit-scrollbar-thumb {
    background-color: #F0A6A7;/*COLKOR DEL SCROLL EN CHROME */
    border-radius: 20px;
    border: 2px solid #f1f2f3;
}

.hide-scroll-menu::-webkit-scrollbar-track {
    border-radius: 10px;  
}

/*==============================
MEGA MENU DE MENU NAV
==============================*/
.mega-menu-gen{
position:absolute !important;
z-index:501;
width:90vw;
top:-70px;
animation:animatetop 1s, miUnblur .8s !important;
background: #FFFFFF;
padding:50px;
padding-top:10px;
border: 1px solid rgba(0,0,0,.1);
border-top:none;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
box-shadow: 3px 6px 10px  rgba(0,0,0,.4);
max-height: 350px;
height: auto;
overflow-x: hidden;
left:4.5vw;
}

.single-menu{

  width:33%;
  margin-bottom:40px;

}

.single-menu .title-link{

  background-color: #b8b8b8;
  border-radius: 2px;
  padding:8px;
  padding-left:12px;
  padding-right:12px;
  display: inline-block;
 transition: .6s all;
}
.single-menu .title-link:hover{

  background-color: #F0A6A7;
  
}
.single-menu .title-link h3{

  color:white;
  font-size:17px;
  font-weight: 400;
  margin:0;

}

.single-menu .image{

  position: relative;
  width:100%;
  padding:10px;
  padding-left:0;

}
.single-menu .image img{

  width:100%;

}
.single-menu .inner-link{

  display:block;
  padding-left:3px;
  padding-top:10px;
}
.single-menu .inner-link a {

    float: left;
    clear: left;
    margin-top:5px;
    margin-bottom:5px;
    font-size: 16px;
    transition: all .4s;
}
.single-menu .inner-link a:hover {

  color:#F0A6A7;

  }
/*============================
VISTA GENERAL DE PRODUCTO
============================*/
.oferta-triangle {
    
    /*USR - MODIFICO Y DEJO LA ELIPSE COMO TRIANGULO*/
    color: #fff;
    left: 0px;
    top: 0px;
    text-align: left;
    position: absolute;
    z-index:10;
    height: 0;
    width:0;
     border-left: 100px solid #E87578;
     border-right: 100px solid transparent;
     border-bottom: 100px solid transparent; 
}
.oferta-triangle+span {
    /* USR- Esto lo agrego apra la nueva ribbon triangular que hice*/
    
    color:white;
    position:absolute;
    z-index:11;
    top:22px;
    left:5px;
    transform:rotate(-45deg);
    font-weight: bold;
    font-size: 24px;
}
a.sel-carro-add:hover{

    color:#ffffff;
    border:2px solid #ffffff !important;
    transition: color .4s;

}

a.sel-carro-add:hover i{

    color:#ffffff;
    transition: color .4s;
}

/*======================================
TRIANGULO MAS GRANDE PARA OFERTA
====================================*/
.oferta-triangle-xl {
    
    /*USR - MODIFICO Y DEJO LA ELIPSE COMO TRIANGULO*/
    color: #fff;
    top: 0px;
    left: 0px;
    text-align: left;
    position: absolute;
    z-index:10;
    height: 0;
    width:0;
     border-left: 150px solid #F0A6A7;
     border-right: 150px solid transparent;
     border-bottom: 150px solid transparent; 
}
.oferta-triangle-xl+span {
    /* USR- Esto lo agrego apra la nueva ribbon triangular que hice*/
    
    color:white;
    position:absolute;
    z-index:11;
    top:32px;
    left:20px;
    transform:rotate(-45deg);
    font-weight: bold;
    font-size: 30px;
}
/*===================
VIÑETA VENTAS POR MAYOR
=======================*/
.info-pmayor{

  position: absolute;
  z-index: 20;
  top:0;
  right:0;
  width:65% !important;
  height: 0px;
  border-right: 0px solid transparent;
  border-left: 50px solid transparent;
  border-top: 50px solid #FF9D3C;
  opacity: .8;

}

.info-pmayor>div{

  position:absolute;
  right: 0px;
  top:-40px;
  width: 110%;
  color:#ffffff;
  text-align: center;
  
}

.info-pmayor .precios{


  color:#ffffff;
  font-size:1.15rem;
  font-weight:600;
  

}

.info-pmayor-shop{

  position: absolute;
  z-index: 20;
  top:0;
  right:0;
  width:auto !important;
  height: 0px;
  border-right: 0px solid transparent;
  border-left: 50px solid transparent;
  border-top: 50px solid #FF9D3C;
  opacity: 1;

}

.info-pmayor-shop>div{

  position:relative;
  margin:0 auto !important;
  top:-60px;
  width: auto;
  color:#ffffff;
  text-align: left !important;
  
}

.info-pmayor-shop .precios{


  color:#ffffff;
  font-size:0.9rem;
  font-weight:600;
  

}
.info-pmayor-shop .o-mas{

    color:#ffffff;
  font-size:0.85rem;
  font-weight:600;
  transform:translateY(-5px);

}
/*=============
ICHECK
===========*/
[class*="icheck-"] {
    min-height: 22px;
    margin-top: 6px !important;
    margin-bottom: 6px !important;
    padding-left: 0px;
}

.icheck-inline {
    display: inline-block;
}

    .icheck-inline + .icheck-inline {
        margin-left: .75rem;
        margin-top: 6px;
    }

[class*="icheck-"] > label {
    padding-left: 29px !important;
    min-height: 22px;
    line-height: 22px;
    display: inline-block;
    position: relative;
    vertical-align: top;
    margin-bottom: 0;
    font-weight: 500;
    font-size:1rem;
    cursor: pointer;
}

[class*="icheck-"] > input:first-child {
    position: absolute !important;
    opacity: 0;
    margin: 0;
}

    [class*="icheck-"] > input:first-child:disabled {
        cursor: default;
    }

    [class*="icheck-"] > input:first-child + label::before,
    [class*="icheck-"] > input:first-child + input[type="hidden"] + label::before {
        content: "";
        display: inline-block;
        position: absolute;
        top:0px;
        width: 22px;
        height: 22px;
        border: 1px solid #BBBBBB;
        border-radius: 4px;
        margin-left: -29px;
    }

    [class*="icheck-"] > input:first-child:checked + label::after,
    [class*="icheck-"] > input:first-child:checked + input[type="hidden"] + label::after {
        content: "";
        display: inline-block;
        position: absolute;
        top: -1px;
        left: 0px;
        width: 7px;
        height: 12px;
        border: solid 3px #fff;
        border-left: none;
        border-top: none;
        transform: translate(7.75px, 4.5px) rotate(45deg);
        -ms-transform: translate(7.75px, 4.5px) rotate(45deg);
    }

[class*="icheck-"] > input[type="radio"]:first-child + label::before,
[class*="icheck-"] > input[type="radio"]:first-child + input[type="hidden"] + label::before {
    border-radius: 50%;
}

[class*="icheck-"] > input:first-child:not(:checked):not(:disabled):hover + label::before,
[class*="icheck-"] > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
    border-width: 2px;
}

[class*="icheck-"] > input:first-child:disabled + label,
[class*="icheck-"] > input:first-child:disabled + input[type="hidden"] + label,
[class*="icheck-"] > input:first-child:disabled + label::before,
[class*="icheck-"] > input:first-child:disabled + input[type="hidden"] + label::before {
    pointer-events: none;
    cursor: default;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65;
}

.icheck-success > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-success > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
  border-color: #F0A6A7;
}

.icheck-success > input:first-child:not(:checked):not(:disabled):focus + label::before,
.icheck-success > input:first-child:not(:checked):not(:disabled):focus + input[type="hidden"] + label::before {
  border-color: #F0A6A7;
}

.icheck-success > input:first-child:checked + label::before,
.icheck-success > input:first-child:checked + input[type="hidden"] + label::before {
  background-color: #F0A6A7;
  border-color: #F0A6A7;
}
/*=====================================
DESPACHOS, NUESTRAS MARCAS TITULOS
==================================*/
.nueva-seccion{

    border-bottom:1px solid #F0A6A7;
}

.nueva-seccion .titulo{

    margin:0 auto;
    max-width: 400px;
    width:auto;
    padding:25px 50px 15px 50px;
    background-color: #F0A6A7;
    text-align: center;

}
.nueva-seccion h4, .nueva-seccion-2 h4{

    margin:0;
    padding:0;
    color:#ffffff;

}

.nueva-seccion-2{

    border-bottom:1px solid #b8b8b8;
}
.nueva-seccion-2 .titulo{

    margin:0 auto;
    max-width: 400px;
    width:auto;
    padding:25px 50px 15px 50px;
    background-color: #b8b8b8;
    text-align: center;

}
/*=========================
COPYRIGHT
==================*/
.mi-copyright{

    opacity: 0.3;

}

.mi-copyright p{

    margin:0;
    font-size:14px;

}
/*=====================================================================
FILTRO LATERAL PARA PAGINA DE CATEGORIA FIANL DE PRODUCTO Y BUSQUEDA
======================================================================*/

.orden-filter{

  display:none;

}
.filter-side-show{

  opacity: 1 !important;
  left:0 !important;
  width: 100%;

  
}     

    
.filter-movil-show{

  opacity: 1 !important;
  right:20px !important;
  

}
.filter-movil-hide{

  position: absolute;
  right: -30vw;
  top: 3.5% ;
  opacity: 0;
  z-index:26;
  font-size:2rem;
  transition: all .8s;

}
/*==========================
PAGINA DETALLE DE PRODUCTO
============================*/
.old-price-detail{

     
    font-weight: 500;
    font-size:1.2rem;
    color: #9f9f9f;
    text-decoration: line-through;

}
.detail-pmayor span{

    color:#00D9A3;
    font-weight: 700;
}
.detail-pmayor h4{

    color:#00D9A3;

}
.oferta-detail-prod{

    position:relative;
    margin-left: 3px;

}

.propiedad-prod label, .contene-coment label{

    font-weight: 600;
    padding-right: 10px;

}

.table-spec tr td:first-child span{


  font-weight: 600;
}


/*==================================
VALORACIONES Y COMENTARIOS
==================================*/
i.fa.fa-star-o{

    color:#d5d6d8;
    border:red !important;

}

i.fa.fa-star{

    color:#FF8000;
    border:red !important;

}
.stars-rating label i{

    cursor:pointer;
    color:#d5d6d8 !important;
    font-size: 1.7rem !important;

}
.stars-rating label:hover i{

    color:#FF8000 !important; 

}
.stars-rating label:hover ~label i{/*TODOS LOS I DENTRO DE LOS LABESL QUE LO PRECEDEN A LABEL:HOVER*/;

    color:#FF8000 !important; 

}
.stars-rating input[type = "radio"]{

    visibility: hidden;
    position:absolute;

}
.stars-rating input[type = "radio"]:checked ~ label i{

    color:#FF8000 !important; 

}
.stars-rating{

     direction: rtl;/* right to left */
      unicode-bidi: bidi-override;/* bidi de bidireccional */

}
.hr-comment{

    height: 1px;
    background-color: rgba(153,153,153,.2);
    border: none;
    

}
.rating-barra {
  position: relative;
  display: inline-block;
  height: 10px;
  background-color: #E4E7ED;
  width: 120px;
  /*margin: 0px 10px;*/
  border-radius: 5px;
}

.rating-barra > div {
  background-color: #FE9429;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 5px;
}
.coment-resen .bar-review span{

    transform:translateY(-5px);

}
.coment-resen span.text-resume{

    font-weight: 550 !important;

}
.coment-resen .subject {

  font-weight: 600 !important;

}
/*===========================
  PAGINA CARRO DE COMPRAS
============================*/
.delete-carro i {

  font-size: 1.5rem;
  cursor: pointer;
}
/*==================================================
      PAGINA VENTA EXITOSA - FALLIDA - EN ESPERA
====================================================*/
.contenedor-msje-fin{

  padding:5px;
  background-color: #FFFFFF;

}
.msje-fin-compra{

  color:#2c2d3f;
  font-weight:400;
  font-size: 1rem;

}
.msje-info-compra{

  color:#2c2d3f;
  font-weight:400;
  font-size: .95rem;

}
.orden-numero {

  background-color: #f4f2f8;
  font-weight: 700;
  font-size:1.15rem;
  text-align: center;
  padding:10px 0px;
  border-bottom:2px solid #FFFFFF !important;

}  

.compra-resumen-fin {
  background: #f4f2f8;;
  padding: 40px;
  max-width: 500px;
  width: 100%;
}
.compra-resumen-fin h6 {
  color: #111111;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.compra-resumen-fin ul {
  margin-bottom: 25px;
}

.compra-resumen-fin ul li {
  list-style: none;
  font-size: 16px;
  color: #111111;
  font-weight: 600;
  overflow: hidden;
  line-height: 40px;
}
.compra-resumen-fin ul li span {
  color: #ca1515;
  float: right;
}
.css-form-fin .importante {

  font-weight: 700;
  color:#FFFFFF;
  background-color: #F0A6A7;
  padding:10px 15px;
  border-radius: 1;
  margin:20px 0px;

}
.css-form-fin .bg-info-fin {

  background-color: #f4f2f8;
  padding: 20px;

}

.cart-table table .tr-tabla {

  border-bottom:1px solid #EEEEEE;
}

.css-form-fin h2 {

  font-weight: 600;
  font-size:1.5rem;

}
.css-form-fin label {

  font-weight: 600;

}

.css-form-fin label span {

  color: #ca1515;
  padding:0px 8px;
}
/*======
FOOTER
=======*/
.footer-info{

  margin-top: 25px;

}
.footer-info a{

  color:#93B0B4 !important;
  margin-bottom:10px;

}
.footer-info a span{ 

  font-size:0.87rem;

}
.footer-info i{

  font-size:1.8rem !important;
  margin-right:10px;

}
/*=============================
PAGINA DE CONTACTO
=====================*/
.contacto-page input, .contacto-page textarea{
    
    height: 52px;
    border: none;
    background-color: #f4f2f8;
    border-radius: 0;
  }
.contacto-page h4 {

  font-size:1.2rem;

}
  .contacto-page i{

    font-size:2rem;
    color:#F0A6A7;


  }
 .contacto-page i+span{

   padding-left:10px;

 }

 .contacto-page label span{

  color: #F0A6A7;
  
 }

/*=============================
    PAGINA QUIENES SOMOS
 ============================*/
  .title-qsomos {

    position: relative;
    margin:10px 0px;
    display: flex;
    -ms-flex: flexbox;
    white-space: nowrap !important;

  }
   .title-qsomos h4 {

    font-size: 1.1rem !important;
   

   }
 .title-qsomos h4 span:first-child{

  position: relative;
  background-image:linear-gradient(to right, #F0A6A7, #F0A6A7 );
  padding:7px 15px;
  color:#FFFFFF;

 }
  .title-qsomos h4 span:first-child:after {

    content:"";
    position: absolute;
    top:-5px;
    right: -8px;
    z-index:2 !important;
    background-color:#FFFFFF;
    width: 15px !important;
    height: 55px !important;
    transform:rotate(20deg);

  }
 .title-qsomos h4 span:last-child{

  position: relative;
  background-image:linear-gradient(to right, #93B0B4, #93B0B4);
  padding:7px 15px;
  padding-left:20px;
  color:#FFFFFF;

 }
/*============================
EFECTOS VARIOS
=================*/
.fade-in-newfields{

  animation:fadingIn 0.7s;

}
.fade-in-productos {

  opacity:0;
  animation:fadingIn 1.8s, miUnblur 1s;
  animation-fill-mode: forwards;

}
.opacity-0{

  visibility: hidden;
  opacity: 0 !important;
  transition:all 0.6s;

}

.fade-in-blur {

  animation:fadingIn 0.4s, miUnblur .9s;

}
/*=================
BRILLO
SIRVE PARA QUE BRILLE EL COMPONENTEN CUANDO ME ONGO SOBRE EL, 
SE PONE EN EL CONTENEDOR DEL OBJETO, pOr ejemplo en imagenes, se pone en el contenedor de la imagen
=====================================================================================*/
.usr-glow {

  overflow: hidden;
  display: inline-block;
}

.usr-glow:after {
  content: "";
  position: absolute;
    top: -50%;
  left: -20%;/*DE DONDE PARTE EL BRILO*/
  width: 20%;
  height: 200%;
  opacity: 0;
  transform: rotate(30deg);

  background: rgba(255, 255, 255, 0.13);
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0.13) 77%,
    rgba(255, 255, 255, 0.6) 100%,
    rgba(255, 255, 255, 0.5) 92%,
    rgba(255, 255, 255, 0.0) 100%
  );
}

/* Hover state - trigger effect */
.usr-glow:hover:after {
  opacity: 1;
  left: 130%;
  transition-property: left, top, opacity;
  transition-duration: 0.7s, 0.7s, 0.15s;
  transition-timing-function: ease;
}

/* Active state */
.usr-glow:active:after {
  opacity: 0;
}
/*COLORES DE PRODUCTO EN VITRINA*/
.dot-color{

  width: 20px;
     height: 20px;
     /*border-radius: 50%;*/
     background: #5cb85c;
     margin-right: 5px;

}
/*==============
ANIMACIONES
================*/
@keyframes fadingIn{

  from{opacity: 0} 

  to{opacity:1}


}

@keyframes animatetop{

  from{transform:translateY(-20px);opacity:0} 

  to{transform:translateY(0px);opacity:1}

}
@keyframes gira360 {

  from{

    transform:rotate(0deg);

  }to{

    transform:rotate(360deg);

  }
}

@keyframes colorIcon {

  0% {

    color:#F0A6A7;

  }
  60% {

    color:#FF9D3C;

  }

  100% {

    color:#F0A6A7;

  }
}

@keyframes miUnblur {

  from{

    filter:blur(15px);

  } to {

    filter:blur(0px);

  }

}

@media (max-width: 991.98px){

  .filter-side {

      opacity: 1;
      position:fixed !important;
      padding-top:40px;
      z-index:24;
      background:white;
      left:-120vw;
      max-width: 450px !important;
      width:99vw;
      top:0%;
      height: 100vh;
      overflow-y:scroll;
      transition: all .8s;
      box-shadow: 3px 3px 16px rgba(0,0,0,.7);
  

  }

  .orden-filter {

    display:block;

  }

  .title-qsomos h4 {

    font-size: 1.1rem !important;
   

   }

}
@media (max-width: 600px){

  .h1-producto{

      max-width: 350px;

  }

  .fix-movil {

      display:inline-grid !important;

    }
}


@media (max-width: 450px){
.title-qsomos h4 {

    font-size: .98rem !important;
   

   }

   .top_logo img {

    max-height: 110px;


   }

  .h1-producto{

      max-width: 350px;

  }
 }