/* COLORES 
*	
* Celeste: #00abee;
*
*/
@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;
}

/* 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: #00abee; */
	color: #ffffff;
}

/* ESTILO DE BOTON CUSTOM */

.btn-ecommerce-custom {
  background-color: #00abee;
  border-color: #00abee;
  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: #00abee80;
  border-color: #00abee80;
  color: #00abee;
}

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

.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: #00abee;
}

.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: #cf358c;
}

.agregar-al-carrito {
	/* 	background-color: #00b199; */
	color: white !important;
	border-radius: 3px;
	margin:0px!important;
}

.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: 90%!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;
	}
}


@media (max-width: 1200px) {
/*     #menu a { */
/*     	color: var(--letra-menu-inferior)!important; */
/*     } */
}

@media (min-width: 1200px) {
	.drop-icon {
		padding: 0!important;
	}
	
	.item-label {
		width: auto;
		min-width: 0!important;
	}
	
	.main-menu>li {
		display: flex!important;
	} 
	
	.main-menu a{
		padding: 1em 0.3em!important;
	    font-size: 12px;
	    display: flex!important;
	}
	
	.drop-icon {
	    font-size: 12px;
	}
	
}

.descuento { 
	background-color: #ff51cd !important;
}
@media (min-width: 1440px) {
	.main-menu a {
		font-size: 14px;
	}
	
	.drop-icon {
	    font-size: 14px;
	}
}

@media (min-width: 1920px) {
	.main-menu a {
		font-size: 18px;
	}
	
	.drop-icon {
		font-size: 18px;
	}
}

.etiquetaHomeSinBordes {
	border-radius: 0;	
}


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

.separator {
	padding: 0.2em;
	background: #00abee;
}

.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: #00abee!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: #00abee!important;	
	color: #00abee!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;
}

.marcas-slider-container {
	padding-right: 25px;
    padding-left: 25px;
    width: 100%;
}


.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: #00abee;
}

.prev-button {
	border-bottom-left-radius: 0!important;
    border-top-left-radius: 0!important;
    left: -3.5px;
	border-radius: 4px!important;
    height: 80px!important;
    margin-top: -25px!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: 80px!important;
    margin-top: -25px!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;
}

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

.lista-destacada-title {
	display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    margin: 3rem 0;
    margin-left: 0px!important;
}
.slider-index .lslide .thumbnail {
	width: 240px!important;
	max-width: 300px!important;
}
.lista-destacada-slider {
	/* max-width: 80%; */
	/* margin-right:25px;	 */
}
.lista-destacada-slider .thumbnail {
	width: 270px!important;
	max-width: 300px!important;
}

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

.eskeleton {
	display: none !important;
}


@media ( min-width : 768px) {
	.special {
		width: 90%;
	}
	
	.lista-destacada-title p {
		font-size: 4em!important;
	}
	
}

@media ( min-width : 992px) {
	.special {
		width: 85%;
	}
	
	.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: 85%;
	}
	
}

/* fin centrado contenido*/

@media (min-width: 1441px){
    .bannerLarge {
         margin-top: unset !important;
    }
}