/* ------------------- GCE - Mis estilos personalizados ------------------- */

/* ------------- Para vista app.blade.php -------------- */


/*
el texto del logo #737373 rgb(115, 115, 115), otros Textos de color #EDEDED tambien.
Bolsas color #737373 rgb(115, 115, 115).
Fondo de logo gris color #8f9394

color primary (moradito)  #9c27b0   rgb(156, 39, 176)
color default (gris)      #909495   rgb(144, 148, 149)
0.8750em => 14px

Botones para pagina Petit Camille
btn-outline (para "< regresar")
btn-default (para botones principales)
btn-primary (botones moraditos, en esta pagina no se usa este estilo)
btn-secondary (es como el outline, pero sin la linea de borde, normalmente es para el "Cancelar" de modal dialogs)
*/


/* INI - para boton SALE u OFERTA / PAISES */

		.triangulo-boton-sale-top-right{
      width: 0;
      height: 0;
      border-right: 13px solid #9c27b0;
      border-top: 13px solid #9c27b0;
      border-left: 13px solid transparent;
      border-bottom: 13px solid transparent;
      position: absolute;
      right: 0;
      top: 0;
    }

		/* INI - para boton SALE u OFERTA cuando NO SE ESTA LOGUEADO y desde mobile  */
			@media(max-width: 991px){
				.custom-sail-nav-item-logout-mobile{
					background-color: #000;
					color: #fff !important;
					display: list-item;
				}

				.custom-sail-nav-link-logout-mobile{
					background-color: #000;
					color: #fff !important;
					display: block;
				}
			}

			@media(min-width: 992px){
				.custom-sail-nav-item-logout-mobile{
					background-color: #000;
					color: #fff !important;
					display: none;
				}

				.custom-sail-nav-link-logout-mobile{
					background-color: #000;
					color: #fff !important;
					display: none;
				}
			}
		/* INI - para boton SALE u OFERTA cuando NO SE ESTA LOGUEADO y desde mobile  */


		/* INI - para boton SALE u OFERTA cuando NO SE ESTA LOGUEADO y desde PC  */
		@media(max-width: 991px){
			.custom-sail-nav-item-logout-pc{
				background-color: #000;
				color: #fff !important;
				display: none;
			}

			.custom-sail-nav-link-logout-pc{
				background-color: #000;
				color: #fff !important;
				display: none;
			}

		}

		@media(min-width: 992px){
			.custom-sail-nav-item-logout-pc{
				background-color: #000;
				color: #fff !important;
				display: list-item;
			}

			.custom-sail-nav-link-logout-pc{
				background-color: #000;
				color: #fff !important;
				display: block;
			}

		}
		/* INI - para boton SALE u OFERTA cuando NO SE ESTA LOGUEADO y desde PC  */


		/* INI - para boton SALE u OFERTA cuando ESTA LOGUEADO y desde PC */
		@media(max-width: 991px){
			.custom-sail-nav-item-logged-pc{
				background-color: #000;
				color: #fff !important;
				display: none;
			}

			.custom-sail-nav-link-logged-pc{
				background-color: #000;
				color: #fff !important;
				display: none;
			}
		}

		@media(min-width: 992px){
			.custom-sail-nav-item-logged-pc{
				background-color: #000;
				color: #fff !important;
				display: list-item;
			}

			.custom-sail-nav-link-logged-pc{
				background-color: #000;
				color: #fff !important;
				display: block;
			}
		}
		/* FIN - para boton SALE u OFERTA cuando ESTA LOGUEADO y desde PC */

		/* INI - para boton SALE u OFERTA cuando ESTA LOGUEADO y desde mobile */
		@media(max-width: 991px){
			/*.custom-sail-nav-item-logged-mobile{
				background-color: #000;
				color: #fff !important;
				display: list-item;
			}*/

			.custom-sail-nav-link-logged-mobile{
				background-color: #000;
				color: #fff !important;
				display: block;
			}
		}

		@media(min-width: 992px){
			.custom-sail-nav-item-logged-mobile{
				background-color: #000;
				color: #fff !important;
				display: none;
			}

			.custom-sail-nav-link-logged-mobile{
				background-color: #000;
				color: #fff !important;
				display: none;
			}
		}
		/* FIN - para boton SALE u OFERTA cuando ESTA LOGUEADO y desde mobile */



		/* INI - para boton de PAISES */

			@media(max-width: 991px){
				.custom-countries-nav-item-logout{
					background-color: rgba(150, 150, 150, 0.1);
					margin-left: 0;
				}

				.custom-country-nav-link-logout{
					padding: 0 15px !important;
				}

				.custom-country-nav-link-logged{
					padding: 0 15px;
				}
			}

			@media(min-width: 992px){
				.custom-countries-nav-item-logout{
					background-color: rgba(150, 150, 150, 0.4);
					margin-left: 1em;
				}
			}
		/* FIN - para boton de PAISES */



/* FIN - para boton SALE u OFERTA / PAISES */



/* ----- INI -  para header, logo, texto petite camille, barra de navegacion ----- */
	.navbar{
		height: 8em;
	}
	.navbar-dark-gce{
		/* para que funcione esta clase 
		se comento la linea 14904 del archivo "css/material-kit.css" y 
		se modifico el archivo "js/material-kit.js" a partir de la linea 164
		la funcion "checkScrollForTransparentNavbar" */
		background-color: rgba(0,0,0,0.4) !important;
		color: #fff;
	}

	.navbar-brand .header-logo{
		display: initial;
		max-height: 100px; /* 85px */
		max-width: 178px;  /* para logos que no esten bien hechos */
		position: relative;
	  top: -30px; /* -20px */
	}

	#light-menu-gray a:link{
		background-color: #ccc;
	}

	@media(max-width: 991px){
		/* porque cuando es menor a 992px los items de la barra nav se contraen y el logo queda muy abajo */
		.navbar-brand .header-logo{
			max-height: 100px; /* 85px */
			top: -37px; /* -27px */
		}
	}

	.custom-font-moontime-regular{
		font-size: 6em;
	  font-family: "MoonTime Regular", "Roboto Slab", "Times New Roman", serif;
	  font-weight: normal;
	}

	.custom-font-moontime-regular-brand{
		display: none;
		font-size: 3em;
	  font-family: "MoonTime Regular", "Roboto Slab", "Times New Roman", serif;
	  font-weight: normal;
	}

	.material-icons.shopping-cart-red{
		color: #ce93d8;
	}

	@media(max-width: 470px){
		.navbar-brand .header-logo{
			display: none;
		}

		.custom-font-moontime-regular-brand{
			display: initial;
		}
	}
	@media(max-width: 425px){
		.custom-font-moontime-regular-brand{
			font-size: 2em;
		}

		.navbar{
			height: 5em;
		}

		.navbar.navbar-transparent{
			padding-top: 10px;
		}
	}

	.bg-gce-dropdown-header{
		background-color: #343a40 !important;
		padding-left: 5px;
		padding-right: 5px;
		color: white;
	}
/* ----- FIN -  para header, logo, texto petite camille, barra de navegacion ----- */




/* ------- INI - para ICONO FLOTANTE whatsapp --------- */
@media(max-width: 600px){
	.floating-wpp-button{
		width: 3.5em !important;
		height: 3.5em !important;
	}
}
/* ------- INI - para ICONO FLOTANTE whatsapp --------- */




/* -------- INI - chancando las propiedades de esta plantilla material kit --------- */

	/* INI - fuentes titulos, subtitulos, card-enlaces para toda la web */

	/* el original es font-family: "Roboto Slab", "Times New Roman", serif; */
		.title, .card-title, .info-title, .modal h5{
			/* font-family: "Roboto", "Times New Roman", serif; */
			color: #555;
			font-family: "Didact Gothic", "Futura Light", "Futura Book", sans-serif, "Roboto", helvetica, "Times New Roman", serif;
		}

		.info .info-title{
			color: #555;
		}

		h2.title{
			font-size: 1.6em;
		}

		h4.info-title{
			font-size: 1.3em;
		}

		.card a{
			color: #555;
		}

		@media(max-width: 600px){
			h2.title{
				font-size: 18px;
			}

				h4.info-title{
				font-size: 14px;
			}
			
		}
	/* FIN - fuentes titulos, subtitulos, card-enlaces para toda la web */

	.card.card-header-default, .card-header.card-header-default{
		/* background: linear-gradient(60deg, #ab47bc, #7b1fa2); */
		background: linear-gradient(60deg, #eee, #909495);
	}

	.btn.btn-default{
		background-color: #909495;    /* color petite camille */
	}
/* -------- INI - chancando las propiedades de esta plantilla material kit --------- */



/*

!-----------------!
Para material kit la clase "navbar-expand-lg" significa que el min-width sera 992px 
!-----------------!

@media (min-width: 992px)
.navbar-expand-lg {
    flex-flow: row nowrap;
    justify-content: flex-start;
}
*/

@media (min-width: 992px){

	.shopping-cart-badge{ /* se usa en el helpers.php, porque se crea en caliente */
		height: 20px;
	  display: flex;
	  padding: 6px;
	  z-index: 1;
	  position: absolute;
	  flex-wrap: wrap;
	  font-size: 0.75rem;
	  min-width: 20px;
	  box-sizing: border-box;
	  transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
	  align-items: center;
	  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
	  font-weight: 500;
	  line-height: 1;
	  align-content: center;
	  border-radius: 10px;
	  flex-direction: row;
	  justify-content: center;
	}

	.shopping-cart-badge-anchorOriginTopRightRectangle { /* se usa en el helpers.php, porque se crea en caliente */
	    top: 15px;
	    right: 10px;
	    transform: scale(1) translate(50%, -50%);
	    transform-origin: 100% 0%;
	}

	.shopping-cart-badge-colorPrimary { /* se usa en el helpers.php, porque se crea en caliente */
	    color: #fff;
	    background-color: rgb(156, 39, 176); /* rgb(206, 147, 216)   rgb(220, 0, 78) */
	}

	.shop-cart-pc{
		display: list-item;
	}

	.notifications-pc{
		display: list-item;
	}

	.shop-cart-mobile{
		display: none;
	}

	.notifications-mobile{
		display: none;
	}

}






@media (max-width: 991px){

	.icon-hidden{
		display: none;
	}

	.material-icons.shopping-cart-red{
		color: #ce93d8;
	}

	.shopping-cart-badge{ /* se usa en el helpers.php, porque se crea en caliente */
		height: 20px;
	  display: flex;
	  padding: 6px;
	  z-index: 1;
	  position: absolute;
	  flex-wrap: wrap;
	  font-size: 0.75rem;
	  min-width: 20px;
	  box-sizing: border-box;
	  transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
	  align-items: center;
	  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
	  font-weight: 500;
	  line-height: 1;
	  align-content: center;
	  border-radius: 10px;
	  flex-direction: row;
	  justify-content: center;
	}

	.shopping-cart-badge-anchorOriginTopRightRectangle { /* se usa en el helpers.php, porque se crea en caliente */
	    top: 10px;
	    /*right: 10px;*/
	    transform: scale(1) translate(50%, -50%);
	    transform-origin: 100% 0%;
	}

	.shopping-cart-badge-colorPrimary { /* se usa en el helpers.php, porque se crea en caliente */
	    color: #fff;
	    background-color: rgb(156, 39, 176); /* rgb(206, 147, 216)   rgb(220, 0, 78) */
	}

	.shop-cart-pc{
		display: none;
	}

	.notifications-pc{
		display: none;
	}

	.shop-cart-mobile{
		display: inline-block;
	}

	.notifications-mobile{
		display: inline-block;
	}

	/* chancamos navbar-nav que en material-kit.css tiene display: flex;*/
	.navbar-text .navbar-nav{
		display: inline-block;
	}

	.navbar-text a{
		display: inline-block;
	}

}