/* COLORES 
*	
* Naranja: #f58220;
*
*/
@import url('https://fonts.googleapis.com/css?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

body{
	font-family: 'Roboto';
}

/* TAGS */

#btn-busqueda {
	border-radius: 1px!important;
}
.btn, .btn>.btn-facebook, .btn>.btn-google{
	border-radius:3px !important;
}


footer {
	background-color: #9c9da0;
	padding-bottom: 6em !important;
	padding-top: 3em !important;
}

footer a, footer a:active, footer a:focus, footer a:hover {
	color: #222222;
}

.footer-bs{
	background-color: #9461c8 !important; 
}

/* CLASES */
.form-control-esker {
	width: 145px !important;
}

.hovTop {
	text-transform: capitalize !important;
	/* 	font-size: 10px !important; */
}

.main-content {
	margin-bottom: 4em !important;
}

.gradient-bg, .agregar-al-carrito:hover {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#bb377d+0,f9aec9+100 */
	/* background-color: #f58220; */
	color: #ffffff;
}

/* ESTILO DE BOTON CUSTOM */

.btn-ecommerce-custom {
  background-color: #f58220;
  border-color: #f58220;
  color:#ffffff;
 
  transition: all 0.2s;
}


/* IMPORTANTE: dejar los ultimos dos digitos restantes al final de cada color, es la opacidad al momento de hacer click */
.btn-ecommerce-custom:hover,
.btn-ecommerce-custom:focus,
.btn-ecommerce-custom:active,
.btn-ecommerce-custom.active {
  background-color: #f5822080;
  border-color: #f5822080;
  color: #f58220;
}

.btn-ecommerce-custom:focus,
.btn-ecommerce-custom:active,
.btn-ecommerce-custom.active {
	box-shadow: 0px 0px 8px 1px #f5822075;
}

.btn-ecommerce-custom.disabled,
.btn-ecommerce-custom.disabled:hover,
.btn-ecommerce-custom.disabled:focus,
.btn-ecommerce-custom.disabled:active,
.btn-ecommerce-custom.disabled.active,
.btn-ecommerce-custom[disabled],
.btn-ecommerce-custom[disabled]:hover,
.btn-ecommerce-custom[disabled]:focus,
.btn-ecommerce-custom[disabled]:active,
.btn-ecommerce-custom[disabled].active {
  background-color: #e6e6e6;
  border-color: #e6e6e6;
  color: #ffffff;
}

.navbar-custom {
	background-color: #ffffff;
	border: none;
}

.navbar-custom>div.container-fluid {
	padding-bottom: 1em;
	padding-top: 1em;
}

.navbar-custom .navbar-nav>li>a {
	color: #58c0be;
	font-weight: bold;
}

.navbar-custom .navbar-nav>li>a:focus, .navbar-custom .navbar-nav>li>a:hover {
	color: #f58220;
}

.navbar-custom .navbar-nav>.active>a, .navbar-custom .navbar-nav>.active>a:focus,
.navbar-custom .navbar-nav>.active>a:hover, .navbar-custom .navbar-nav>.open>a,
.navbar-custom .navbar-nav>.open>a:focus, .navbar-custom .navbar-nav>.open>a:hover {
	color: #fff;
	background-color: #00b199;
}

.color-secundario-background {
	background-color: #f5822066;
}

.agregar-al-carrito {
	background-color: white !important;
	color: #9461c8 !important;
	border-radius: 9px;
	margin:0px!important;
	border: 2px solid #9461c8 !important;
	text-transform: uppercase;
}

.bannerDesktopHome{
	margin-top: 45px;
}

.containerMarcas{
	margin-top: 8px;
}

.containerMarcas .container{
	padding: 5px 15px !important;
}

.beneficio-container{
	height: 100px !important;
}

@media screen and (min-width: 1144px){
	.containerForm .form{
		flex-direction: row !important;
		max-width: 1200px !important;
		justify-content: center !important;
		width: 100%;
	}
	
	.containerForm .form h2{
		font-size: 20px !important;
		font-weight: 400 !important;
		text-align: center;
	}
	
	.containerForm .form h2 span{
		font-size: 13px !important;
		font-weight: 400 !important;
	}
	
	.containerForm .form form{
		flex-direction: row; 
		align-items: center !important;
		margin-top: 0 !important;
		margin-left: 20px;
	}
	
	.subscribe-container{
		margin-top: 0 !important;
	}
	
	.subscribe-container form .form-group{
		margin-right: 10px !important;
	}
	
	.btn-mail{
		padding: 6px 40px !important;
	}
	
	.subscribe-container form .form-group input{
		margin-bottom: 0px !important;
	}
	
	.subscribe-container div img{
		width: 60px;
		position: absolute;
		left: 120px;
		top: -15px;
	}
}


@media screen and (min-width: 551px) {
	.containerForm .form h2{
		font-size: 28px;
	}
}

.agregar-al-carrito:hover {
	font-weight: bolder;
	border-radius:0px!important;
}

.agregar-al-carrito span {
	display: none;	
}
.thumbnail-producto>.caption{
		padding: 9px!important;
}

@media (min-width: 1200px){
	#special1{
		width: 1300px!important;
	}	
}

@media screen and (max-width: 1024px) and (max-width: 1280px) {
	.breadcrumbArriba {
		margin-top: -2em;
	}
}


@media screen and (max-width:768px) {
	.navbar-custom {
		-webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
		transition: background .5s ease-in-out, padding .5s ease-in-out;
	}
	.navbar-custom>div.container-fluid {
		padding-bottom: 0.2em;
		padding-top: 0.2em;
	}
	.navbar-custom .navbar-nav>li>a, .navbar-custom .navbar-nav>li>a:focus,
		.navbar-custom .navbar-nav>li>a:hover {
		color: #333;
	}
	.main-content {
		margin-top: -56px;
	}
	.breadcrumbArriba {
		margin-top: 35px;
	}
}

@media screen and (max-width: 425px) {
	.main-content {
		margin-top: 15px;
	}
	.breadcrumbArriba {
		margin-top: -57px;
	}
}

@media ( max-width : 355px) {
	#logo-menu {
		height: 35px !important;
		margin-top: -3px !important;
		width: 130px !important;
		margin-left: 0px !important;
	}
}

.redes i.fa {
	background: #00b199;
}

.separator {
	padding: 0.2em;
	background: #f58220;
}

.thumbnail-producto>.caption a {
	color: #000000;
}

.thumbnail-producto>.caption h6, 
.thumbnail-producto>.caption h4 {
	font-family: Roboto;
}

/* ID'S */
#logo-menu {
	height: 30px;
	width: auto;
}

#toTop {
	background-color: #98887b;
}

@media only screen and (min-width: 768px) {

}

/* Configuracion de colores en el navbar 2*/


.menu-ico span, .menu-ico>span::before, .menu-ico>span::after {
	background-color: #3b3735!important;
}

.menu-ico.active>span::before, .menu-ico.active>span::after {
	background-color: #3b3735 !important;
}

#botones>li>a {
	color: #58c0be !important;
}

/* Estilo especial navbar */

/**** Cuando se hace scroll y se aleja del top, agrega un estilo en particular al navbar. Solicitado por esta brand ****/

#menu-superior {
	-webkit-transition: background-color 0.5s ease;
	transition: background-color 0.5s ease;
}

.top-nav-collapse>#menu-superior {
	background-color: #f58220!important;
}

.top-nav-collapse .menu-ico span, 
.top-nav-collapse .menu-ico span::after, 
.top-nav-collapse .menu-ico span::before {
	background-color: #ffffff!important;
}

.top-nav-collapse #busqueda {
	background-color: #ffffff;
	/* border-radius: 3px!important;	 */
}

.top-nav-collapse #custom-search-input {
	border:unset;	
}
.top-nav-collapse #custom-search-input button {
	border-color: #f58220!important;	
	color: #f58220!important;
}

.top-nav-collapse #custom-search-input .buscador-navbar-btn, .buscador-navbar-btn {
	color: #3b3735!important;
}

.top-nav-collapse #botones .glyphicon {
	color: #ffffff!important;
}
.saludoUsuario {
	color: #3b3735!important;
}

#iconLogin, #iconShopping{
	width: 23px;
}
/* Fin estilo especial navbar */

/* Fin configuracion color navbar 2*/


/* Configuracion responsive */

/** Centrado de contenido en home **/
.special {
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
	padding: 10px;
}


.slider {
	width: 64px;
    height: 64px;
    display: none;
    background-color: #fff;
    border-radius: 50%;
    border-width: 0;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.19);
    cursor: pointer;
    outline: 0;
    position: absolute;
    top: 48%;
    z-index: 2;
}

.prev-button,
.next-button {
	width: 64px;
    height: 64px;
    display: none;
    background-color: #fff;
    border-radius: 50%;
    border-width: 0;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.19);
    cursor: pointer;
    outline: 0;
    position: absolute;
    top: 48%;
    z-index: 2;
    font-size: 33px;
    color: #f58220;
}

.prev-button {
	border-bottom-right-radius: 0!important;
    border-top-right-radius: 0!important;
    left: -3.5px;
    border-radius: 4px!important;
    height: 50px!important;
    width: 50px !important;
    margin-top: -40px!important;
	box-shadow: 0 2px 4px 0 rgb(0 0 0 / 19%) !important;
    border-radius: 50% !important;
    /* top: 50%!important; */
    /* width: 33px!important; */
	
}
.next-button {
	border-bottom-right-radius: 0!important;
    border-top-right-radius: 0!important;
    right: -3.5px;
    border-radius: 4px!important;
    height: 50px!important;
    width: 50px !important;
    margin-top: -40px!important;
    border-radius: 50% !important;
	box-shadow: 0 2px 4px 0 rgb(0 0 0 / 19%) !important;
    /* top: 50%!important; */
    /* width: 33px!important; */
}



.prev-button:hover, .next-button:hover {
	-webkit-transition: box-shadow .2s;
    transition: box-shadow .2s;
}

.prev-button:hover {
	box-shadow: -2px 0 16px 0 rgba(47,47,47,.2), -1px 0 3px 0 rgba(47,47,47,.1);
}

.next-button:hover {
	box-shadow: -2px 0 16px 0 rgba(47,47,47,.2), -1px 0 3px 0 rgba(47,47,47,.1);
}

.slick-dotas li button {
	background-color: #c6c6c6;
    border-radius: 50%;
    display: inline;
    height: 6px;
    padding: 1px;
    width: 6px;
    -webkit-transition: none .1s ease-out;
    transition: none .1s ease-out;
    -webkit-transition-property: background-color,height,width;
    transition-property: background-color,height,width;
}
.slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    padding: 5px;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}

.slick-dots li.slick-active button:before {
	height: 10px;
    width: 10px;
}

.slick-dots li button:before {
    border-radius: 50%!important;
    display: inline!important;
    height: 6px!important;
    padding: 1px!important;
    width: 6px!important;
    -webkit-transition: none .1s ease-out!important;
    transition: none .1s ease-out!important;
    -webkit-transition-property: background-color,height,width!important;
    transition-property: background-color,height,width!important;
}

/*Copiado riadigos*/
.lista-destacada .prev-button,
.lista-destacada .next-button,
.containerMarcas .prev-button,
.containerMarcas .next-button {
	width: 30px!important;
    height: 30px!important;
    display: none;
    background-color: rgb(217 217 217);
    border-radius: 50%;
    border-width: 0;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.19);
    cursor: pointer;
    outline: 0;
    position: absolute;
    top: 50%;
    z-index: 2;
    font-size: 33px;
}

.lista-destacada {
	border-radius: 3px;	
	margin: 0!important;
	padding: 0!important;
}

.slider-index .lslide .thumbnail {
	width: 240px!important;
	max-width: 300px!important;
}

.lista-destacada-slider {
	max-width: 50%;
	margin-left:25px;	
}
.lista-destacada-slider .thumbnail {
	width: 270px!important;
	max-width: 300px!important;
}

.lista-destacada-title {
	width: 90%;
	margin: 10px 0;
} 

.lista-destacada-title .bg-image{
	height: 500px;
	background-size: contain;
}

.containerHero .sections .special > a {
/* 	border-bottom: solid 2px var(--primary-color); */
	display: flex;
    justify-content: center;
	font-size: 18px;
	text-decoration: none;
	color: #2e2e2e;
}

@media screen and (max-width: 1200px){
	.containerHero .sections .special > a{
		margin-bottom: 50px;
	}

	.containerHero .sections .special {
		text-align: center;
		margin-top: 50px!important;
	}
}
/* Fin copiado riadigos*/

/*  .lista-destacada {
	border-radius: 3px;
	margin-top: -20px;
}

.slider-index .lslide .thumbnail {
	width: 240px!important;
	max-width: 300px!important;
}
.lista-destacada-slider {
	max-width: 72%;
	margin-right:25px;	
}
.lista-destacada-slider .thumbnail {
	width: 270px!important;
	max-width: 300px!important;
} */

.lista-destacada-title a {
	display: none;
}

.lista-destacada-title img {
	width: 100%;
	max-width: inherit;
}

.lista-destacada-title p {
	font-size: 2em!important;
	font-family: roboto-black;
}

@media ( min-width : 768px) {
	.special {
		width: 750px;
	}
	
	#carousel-shopping-cart {
		margin-top: -3em !important;
	}
	
	.lista-destacada-title p {
		font-size: 4em!important;
	}
	
}

@media ( min-width : 992px) {
	.special {
		width: 970px;
	}
	
	.slider-index .lslide .thumbnail {
		width: 271px!important;
		max-width: 300px!important;
	}
	
	.lista-destacada-title p {
		font-size: 3em!important;
	}
}

@media ( min-width : 1200px) {
	.special {
		width: 1170px;
	}
}

@media screen and (min-width: 768px) {
	#menu-secundario nav .containerUl{
		justify-content: center !important;
	}

	#menu-secundario nav .containerUl p{
		color: white;
		font-weight: bold;
		margin-top: 5px;
		margin-bottom: 5px;
	}
}

/* fin centrado contenido*/

#logo-principal {
	height: 60px !important;
}

#menu-secundario nav .containerUl p  {
color: #000000 !important;
}

.footer-bs .footer-nav ul.pages a {
color: #fcfcfc;
}

footer a, footer a:active, footer a:focus, footer a:hover {
color: #fcfcfc;
}

.footer-bs .footer-brand p {
color: #fcfcfc;
}

.footer-bs {
color: #fcfcfc;
}

.footer-bs .footer-social a {
color: #fcfcfc;
}

.precioSinDescuento{
	color: #c1c1c1 !important;
}

.containerPrecio{
	flex-wrap: nowrap !important;
	flex-direction: column;
	justify-content: center;
}

.teAhorras{
	text-align: center !important;
}

.specialColumn .marca-nombre{
	text-align: center !important;
}

.marca a{
	justify-content: center !important;
}

.marca-nombre a{
	justify-content: center !important;
}

.precioSinDescuento{
	margin-right: 0 !important;
}

.marca-nombre .caracteristica{
	background-color: #dcdcdc !important;
}

@media screen and (min-width: 360px) and (max-width: 768px) {
	.containerFiltrosMobile {
	  top: 130px;
	}
  }
  
  @media screen and (min-width: 280px) and (max-width: 360px) {
	.containerFiltrosMobile {
	  top: 154px;
	}
  
	#productos{
	  margin-top: 25px;
	}
  }