/*
font
*/
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap');

body{
  font-family: 'Source Sans Pro', sans-serif;
}
/*
*/
.no-click {
  pointer-events: none;
}

.colorprincipal{
  color: #FFCE00;
}
/*linea vertical*/
.grad-3 {
  padding: 5px 2px !important;
  background: linear-gradient(to bottom, rgba(240,47,23,1) 0%, rgba(253,29,29,1) 11%, rgba(247,247,52,1) 100%);
  height: auto;
  width: 5px;
}

/*linea horizontal*/
.grad1 {
  height: 5px;
  background: linear-gradient(90deg, rgba(240,47,23,1) 0%, rgba(253,29,29,1) 11%, rgba(247,247,52,1) 100%);
  width: 70%;
}



#filtros .form-check-input:checked {
    background-color: #FFCE00;
    border-color: #FFCE00;
}

a.text-dark:hover, a.text-dark:focus {
  color: #121416 !important;
}

.text-grey-vermas{
 color: #878787 !important;
 font-weight: 600;
}

.fz-15 {
  font-size: 1.5rem;
}

.border-left-red{
  border-left: 2px solid #CD2A21;
}

.lista-servicios {
  list-style: circle;
  color: #CD2A21;
}
.colorprincipal:hover{
  color: #FFCE00;
}
.fondo-gray-bold {
  background-color: #333333;
}

/*fondo formulario*/
.fondo-gray {
  background-color: #F1F1F1;
  border-radius: 35px;
}

.borderprincipal{
  border-color: #FFCE00 !important;
  border-style: solid
}

.border-left-red {
  border-left: 2px solid #CD2A21;
}

.lista-servicios-2 i {
  color: #FFCF00;
}


/*icono de frasco*/
.icon{
  background-color: #FFCE00;
  -webkit-mask: url("../imagenes/vial-solid.svg") no-repeat center;
  mask: url("../imagenes/vial-solid.svg") no-repeat center;
  height: 20px;
  width: 20px;
}



.bgprincipal{ /*// amarillo*/
  background: #FFCE00; 
}

.colorsecundario{
  color: #282827;
}
.bgsecundario{ /*obscuro*/
 background: #282827; 
}
.mitadbgsecundario{
  background: linear-gradient(to top,#FFF 50%,#282827 50%);
}
.btnvermasprod{
  background-color: #FFCE00;
  padding-left: 5rem;
  padding-right: 5rem;
  padding-bottom: 0.5rem;
  padding-top: 0.5rem;
  border-radius: 5rem;
}

.btnvermasmarcas{
  background-color: #CD2A21;
  padding-left: 4rem;
  padding-right: 4rem;
  padding-bottom: 0.5rem;
  padding-top: 0.5rem;
  border-radius: 5rem;
  color: #FFF;
}

.btnvermasmarcas:hover{
  color: #FFF !important;
}

/**Cuadricula de marcas**/
div.cuadriculado{
  height: 8vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.marcasrow div.cuadriculado{
  border-bottom: 1px solid;
  border-color: rgb(218, 218, 218) !important;
}

.marcasrow div.cuadriculado:nth-child(2){
  border-left: 1px solid;
  border-right: 1px solid;
}

.marcasrow div.cuadriculado:nth-child(3),.marcasrow div.cuadriculado:nth-child(4),.marcasrow div.cuadriculado:nth-child(5){
  border-right: 1px solid;
}

div.tabla-cont .marcasrow:last-child div.cuadriculado{
  border-bottom: none !important;
}

.marcasrow div.cuadriculado:last-child{
  border-right: none !important;
}

/* div.cuadriculado:nth-child(4){
  border-top: none !important;
  border-left: 1px solid grey;
  border-bottom: 1px solid grey;
}

div.cuadriculado:nth-child(4n+4){
  border: 1px solid grey;
  border-right: 0px solid #fff;
}

div.cuadriculado:nth-child(2n+4), div.cuadriculado:nth-child(3n+5){
  border: 1px solid grey;
  border-top: none;
}

div.cuadriculado:nth-child(4n+1){
  border: 1px solid grey;
  border-left: none !important;
}

div.cuadriculado:last-child, div.cuadriculado:nth-last-child(2), div.cuadriculado:nth-last-child(3), div.cuadriculado:nth-last-child(4){
  border-bottom: none !important;
}

div.cuadriculado:first-child{
  border-top: none;
} */

/**Termina cuadriculado de marcas**/

.colorterciario{
  color: #CC2A21;
}
.bgterciario{
  background: #CC2A21;
}
.bgcuarto{
  background: #E1E1E1;
}

.bgmasbuscados{
  background-color: #282827 !important;
}

.border-radius-0{
  border-radius: 0 !important;
}
/**/
/* menu active **/
.menuheader .nav-item .nav-link{
  border-top: 2px solid transparent;
}
.menuheader .nav-item .nav-link.active,.menuheader .nav-item .nav-link:hover {
    border-top: 2px solid #FFCE00;
}
/*bordergradietn*/
.bordergradient{
  background: rgb(205,43,32);
  background: linear-gradient(90deg, rgba(205,43,32,1) 0%, rgba(253,201,1,1) 100%);
  height: 3px;
}
/* tabs*/
.tabshistoria.nav-tabs{
  margin-left: 10px;
  border: 0;
}
.tabshistoria.nav-tabs .nav-link{
  border-radius: 0;  
  color: #000;
  border: 0;
  width: 200px;
  text-align: left;
}
.tabshistoria.nav-tabs .nav-link.active{
  border: 0;
  background: #FFCE00;
}
/*tabs navcategorias*/
.navcategorias.nav-tabs{
  margin-left: 10px;
  border: 0;
}
.navcategorias.nav-tabs .nav-link{
  color: #fff;
  border: 0;
  text-align: left;
}
.navcategorias.nav-tabs .nav-link.active{
  color: #000;
  border: 0;
  background: #FFCE00;
}
/* tabsdescripcionproducto */
.tabsdescripcionproducto.nav-tabs{
  margin-left: 10px;
  border: 0;
  font-size: 1.2rem;
}
.tabsdescripcionproducto.nav-tabs .nav-link{
  color: #000;
  border: 0;
  text-align: left;
  border-bottom: 2px solid transparent;
  border-radius: 0 !important;
}
.tabsdescripcionproducto.nav-tabs .nav-link.active{
  color: #CC2A21;
  border: 0;
  background: none;
  border-bottom: 2px solid #CC2A21;
}
/* tabsprocesocompra */
.tabsprocesocompra.nav-tabs{
  margin-left: 10px;
  border: 0;
}
.tabsprocesocompra.nav-tabs .nav-link{
   border-radius: 0 !important;
  color: #fff;
  border: 0;
  text-align: left;
  background: transparent;
  opacity: 0.5;
  border-bottom: 2px solid transparent;
}
.tabsprocesocompra.nav-tabs .nav-link .numbercircle{
  width: 40px;
  align-items: center;
  height: 40px;
  display: flex;
  justify-content: center;
    background: #FFCE00;
    color: #FFF;
}
.tabsprocesocompra.nav-tabs .nav-link.active{
  border: 0;
  opacity: 1;
  border-bottom: 2px solid #000;
}
/* tabsloginContent*/
.tabslogin.nav-tabs{
  margin-left: 10px;
  border: 0;
}
.tabslogin.nav-tabs .nav-link{
  color: #000;
  border: 0;
  text-align: left;
  border-bottom: 2px solid transparent;
  border-radius: 0 !important;
}
.tabslogin.nav-tabs .nav-link.active{
  color: #CC2A21;
  border: 0;
  background: none;
  border-bottom: 2px solid #CC2A21;
}
/**/
.catbtn:hover a{
  background: #efefef;
  border-radius: 10px;
}
/** paralaxx **/
.parallax {
    /* Create the parallax scrolling effect */
    background-attachment: fixed !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
  }

  /** efecto div cuand hover producto **/
.imgverproducto div {
    position: absolute;
    bottom: 0;
    transition: all 0.5s ease-in-out;
    opacity: 0;
    left: 0;
    right: 0;
}
.imgverproducto:hover div{
    bottom: 45%;
    opacity: 1;
}
.imgverproducto img{
  transition: all 0.5s ease-in-out;
}
.imgverproducto:hover img{
  opacity: 0;
  transition: all 0.5s ease-in-out;
}
  /* breadcrumbs */
.breadcrumb{
  margin-bottom: 0;
}
.breadcrumb  a{
  text-decoration: none;
  color: #000;
}
.breadcrumb .active{
  font-weight: bold;
}
/* agrega opacity al background */
  .bgopacity{
    position: relative;
  }
  .bgopacity:after {
    content:'';
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    background: rgba(0, 0, 0, 0.5);
  }

/* radio bigger */
.radiobigger{
  transform: scale(2); 
}
/* sticky top **/
@media (min-width: 768px)
{
  .sticky-md-topfiltros {
    top: 165px !important;
  }
}

/*Botones whatsapp y telefono*/
.social {
  position: fixed; /* Hacemos que la posición en pantalla sea fija para que siempre se muestre en pantalla*/
  right: 0; /* Establecemos la barra en la direccion */
  top: 400px; /* Bajamos la barra 300px de arriba a abajo */
  z-index: 2000; /* Utilizamos la propiedad z-index para que no se superponga algún otro elemento como sliders, galerías, etc */
  border-radius: 10px 0px 0px 10px;
  text-align: right;

}
 
  .social ul {
    list-style: none;
    text-align: right;
    padding:10px 4px 14px 4px;
    margin:0;
    align-items: center;

  }
 
  .social ul li a {
    display: inline-block;
    color:#fff;
    padding: 10px 15px;
    text-decoration: none;
    -webkit-transition:all 500ms ease;
    -o-transition:all 500ms ease;
    transition:all 500ms ease; /* Establecemos una transición a todas las propiedades */
    border-radius: 10px;
  }
  .social ul li .icon-background-ws {background:#1FC045 !important;} /* Establecemos los colores de cada red social, aprovechando su class */
  .social ul li .icon-background-ws:hover {background:#16e046 !important;} 
  .social ul li .icon-background-phone {background:#4a4a4a !important;}
  .social ul li .icon-background-phone:hover {background:#7b7a7a !important;}

 
.social ul li a:hover {
    background:gray ; /* Cambiamos el fondo cuando el usuario pase el mouse */
/*padding: 10px 30px; /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
}

#btncelulares{
    display: none;
}

@media (max-width: 720px){
  #btncelulares{
    display: block;
    position: fixed;
      bottom: 0;
      z-index: 100;
      width: 100%;
      padding: 5px;
  }

  .social{
      display:none;
  }
}


.btn:hover i{
  -webkit-animation: rotate 5s normal linear infinite;
  animation: rotate 5s normal linear infinite;
  display: inline-block;
}

@keyframes rotate {
  0% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
  25% {
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
  }
  50% {
    -webkit-transform: rotate3d(0, 0, 1, 180deg);
    transform: rotate3d(0, 0, 1, 180deg);
  }
  75% {
    -webkit-transform: rotate3d(0, 0, 1, 270deg);
    transform: rotate3d(0, 0, 1, 270deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 360deg);
    transform: rotate3d(0, 0, 1, 360deg);
  }
}

/* menu cliente */
.menucliente a{
  color: #000;
  display: flex;
  align-items: center;
}
.menucliente a i{
  color: transparent;
}
.menucliente a.active{
  color: #000;
  background: transparent;
  font-weight: bold;
}
.menucliente a.active i{
  color: #CC2A21;
}


/** imagen efecto gris **/
img.grayscale {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
  transition: all .3s ease;
  opacity: .3;
  object-fit: contain;
}

img.grayscale:hover {
  filter: none;
  opacity: 1;
  -webkit-filter: grayscale(0%);
}

@media (max-width: 767px) {
  .cuadriculado {
    min-height: 200px !important;
  }
}
/** menu vertical blog **/
.menuverticalblog li a{
  font-size: 1.2rem;
  color: #fff;
}
.menuverticalblog li a.active{
  background: #efefef;
  color: #000;
}
/** bg-producto **/
.bg-producto{
  border: 1px solid transparent;
  border-radius: 5px;
}
.bg-producto:hover{
 border: 1px solid #eaeaea; 
 box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.info-relevante-container{
  background-color: #F3F3F3;
  border-left: 1rem solid #CD2A21;
}

/*Efecto colores gris/color - Old*/
.clientes-marcas img{
  opacity: .3;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  transition: all .3s ease;
  backface-visibility: none;
  -webkit-backface-visibility: none;

}
.clientes-marcas img:hover{
opacity: 1;
filter: grayscale(0%);
-webkit-filter: grayscale(0%);

}


.border-left-red{
border-left: 2px solid #CD2A21;
}
.carousel-indicators-1{
background-color: #CD2A21;
}