/**
 * @copyright Marandi
 * @author Edoardo Palazuelos (edoardo@nucliux.mx)
 * @version 1.1.7 (Mayo 2021)
 * @since 1.0.0
 */
 
/*Importación de otros estilos*/
@import "reset.css?v=1.0.9";
@import "cabecera.css?v=1.0.9";
@import "menu.css?v=1.0.9";
@import "footer.css?v=1.1.1";
@import "portada.css?v=1.1.7";
/*@import "inicio.css";*/
@import "productos.css?v=1.1.7";
@import "producto.css?v=1.1.7";
@import "politicas.css?v=1.0.9";
@import "como.css?v=1.0.9";
@import "contacto.css?v=1.1.1";
@import "iniciar_sesion.css?v=1.0.9";
@import "perfil.css?v=1.0.9";
@import "carrito.css?v=1.1.1";
@import "checkout.css?v=1.1.1";

/*Tipografías*/
@font-face{
	font-family: "Gotham";
	src: url("fonts/Gotham-Light.otf");
}

@font-face{
	font-family: "Gotham";
	src: url("fonts/Gotham-Bold.otf");
	font-weight: bold;
}

@font-face{
	font-family: "Gotham Medium";
	src: url("fonts/Gotham-Medium.otf");
}

@font-face{
	font-family: "Ogg Roman";
	src: url("fonts/OggRoman.otf");
}

@font-face{
	font-family: "Pretty Pen";
	src: url("fonts/PrettyPen.ttf");
}

/*Página*/
html,body{
	background-color: white;
	width: 100%;
	height: 100%;
	color: black;
	font-family: "Gotham", sans-serif;
	font-size: 1.3vw;
	overflow: scroll!important;
}

.contenedor{
	padding: 3vh 8%;
	width: 84%;
}

.contenedor h2{
	color: #1B365D;
	text-transform: uppercase;
}

.contenedor p{
	margin-bottom: 1.5vh;
}

.contenedor li{
	list-style: disc;
	list-style-position: inside;
}

.contenedor-columna{
	display: flex;
	justify-content: space-between;
}

.contenedor-inicio{
	margin-top: 14vh;
	padding: 0 8%;
}

.contenedor-producto{
	margin-top: 0!important;
	padding-top: 0!important;
}

.contenedor-checkout{
	margin-top: 10vh!important;
}

.contenedor__filtros{
	display: flex;
	justify-content: space-between;
	padding: 2vh 0;
	border-bottom: 0.1vh solid black;

	display: -webkit-flex;
	-webkit-justify-content: space-between;
}

.contenedor__filtros div{
	display: flex;
	align-items: center;
	width: auto;

	display: -webkit-flex;
	-webkit-align-items: center;
}

.contenedor__filtros p{
	margin: 0!important;
}

.contenedor__filtros select{
	margin: 0 1.5vw;
	padding: 0.5vh 1vw;
	border: 0.1vw solid black;
	font-family: "Gotham", sans-serif;
	font-size: 1vw;
}

.contenedor__select{
	position: relative;
	margin: 0 0.5vw;
	width: 4vw!important;
	height: 2vw;
	font-family: "Gotham", sans-serif;
	font-size: 1.2vw;
	font-weight: bold;
	cursor: pointer;
}

.contenedor__select:after{
	background-image: url('../img/flecha_abajo.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	position: absolute;
	right: 0.5vw;
	top: 0.5vw;
	width: 1vw;
	height: 1vw;
	content: '';
}

.contenedor__select p{
	padding: 1vh 0;
	padding-left: 10%;
	width: 90%;
	text-align: left!important;
}

.contenedor__select ul{
	background-color: #E3E3E3;
	display: none;
	position: absolute;
	z-index: 8;
	top: 2vw;
	width: 100%;
}

.contenedor__select li{
	padding: 1vh 0;
	padding-left: 10%;
	width: 90%;
	list-style: none;

	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
}

.contenedor__select li:hover{
	background-color: rgba(255,255,255,0.5);
}

.contenedor__select-orden{
	width: 13vw!important;
}

.contenedor__select-marcas{
	width: 13vw!important;
}

.contenedor__select-marcas ul{
	max-height: 50vh;
	overflow-y: scroll;
}

.contenedor__paginacion{
	display: flex;
	justify-content: center;
	align-items: center;
	color: #1B365D;

	display: -webkit-flex;
	-webkit-justify-content: center;
	-webkit-align-items: center;
}

.contenedor__pagina{
	margin: 0 0.5vw;
	padding: 2vh 1.5vw;
	border: 0.1vw solid #1B365D;
	color: black;
	text-decoration: none;
	cursor: pointer;
	
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
}

.contenedor__pagina:hover{
	background-color: #A4C8E1;
	border: 0.1vw solid #A4C8E1;
	color: white;
}

.contenedor__pagina-activo{
	background-color: #1B365D;
	color: white;

	box-shadow: 3px 3px 8px #1B365D;
}

.contenedor__pagina-activo:hover{
	background-color: #1B365D;
	border: 0.1vw solid #1B365D;
}

.contenedor__pagina-especial{
	border: none;
	color: #1B365D;
}

.contenedor__pagina-especial:hover{
	background-color: transparent;
	border: none;
	color: #1B365D;

	box-shadow: none;
}

.columna{
	width: 48%;
}

.columna-nosotros{
	background-image: url('../img/nosotros_imagen.png');
	background-repeat: no-repeat;
	background-position: 260% 0;
	background-size: 78% auto;
}

.columna-admin{
	width: 100%;
}

.columna img{
	width: 100%;
}

.titulo{
	margin-bottom: 3vh;
	color: #1B365D;
	font-family: "Ogg Roman";
	font-size: 1.8vw;
	text-transform: uppercase;
}

.titulo a{
	color: #1B365D;
	text-decoration: none;
}

.alerta{
	color: #E81E27;
}

.oculto{
	margin: 2vh 0;
	border-top: 0.1vw solid black;
}

.oculto__titulo{
	display: flex;
	justify-content: space-between;
	padding: 3vh 0;
	color: #1B365D;
}

.oculto__titulo h1{
	text-transform: uppercase;
}

.oculto__titulo i{
	cursor: pointer;
}

.oculto__titulo-nosotros{
	padding-top: 2vh;
	padding-bottom: 1vh;
}

.oculto__cuerpo{
	display: none;
}

.preguntas__menu{
	display: flex;
	margin-bottom: 3vh;

	-webkit-display: flex;
}

.preguntas__opcion{
	background-color: #1B365D;
	margin-right: 1.5vw;
	padding: 1.5vh 0;
	width: 15%;
	color: white;
	text-align: center;
	text-transform: uppercase;
	list-style: none!important;
	cursor: pointer;

	box-shadow: 3px 3px 8px #1B365D;

	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
}

.preguntas__opcion:hover{
	background-color: #A4C8E1;
}

.preguntas__opcion-activo{
	background-color: #A4C8E1;
}

.liga{
	margin: 1.5vh 0;
	color: #1B365D;
	font-weight: bold;
	text-transform: uppercase;
}

.whatsapp{
	position: fixed;
	left: 1vw;
	bottom: 1vw;
	z-index: 13;
}

.whatsapp img{
	width: 5vw;
	height: 5vw;
}

.modal{
	background-color: rgba(0,0,0,0.8);
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 15;
	width: 100%;
	height: 100%;
	opacity: 0;
	pointer-events: none;

	display: -webkit-flex;
	-webkit-justify-content: center;
	-webkit-align-items: center;

	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
}

.modal-activo{
	opacity: 1;
	pointer-events: auto;
}

.modal__cerrar{
	position: absolute;
	top: 1vw;
	right: 1vw;
	color: white;
	font-size: 2vw;
	font-weight: bold;
	text-transform: uppercase;
	cursor: pointer;
}

.modal__contenedor{
	background-color: white;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 45vw;
	height: 55vh;

	display: -webkit-flex;
	-webkit-flex-direction: column;
	-webkit-justify-content: center;
}

.modal__contenedor-producto{
	padding: 5vh 0;
	height: auto;
}

.modal__contenedor h1{
	margin-bottom: 5vh;
	color: #1b365D;
	font-family: "Ogg Roman";
	font-size: 2.3vw;
	text-transform: uppercase;
	text-align: center;
}

.modal__contenedor h2{
	margin-bottom: 3vh;
	color: #1b365D;
	font-size: 1.5vw;
	text-transform: uppercase;
	text-align: center;
}

.modal__contenedor p{
	margin-bottom: 3vh;
}

.modal__contenedor div{
	display: flex;
	justify-content: space-between;
	padding: 0 10%;
	width: 80%;

	display: -webkit-flex;
	-webkit-justify-content: space-between;
}

.modal__contenedor a{
	background-color: #1b365D;
	padding: 1.5vh 0;
	width: 15vw;
	color: white;
	text-decoration: none;
	text-align: center;
	cursor: pointer;

	box-shadow: 3px 3px 8px #1B365D;

	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
}

.modal__contenedor a:hover{
	background-color: #A4C8E1;
}

.modal__cargando{
	width: 5vw;
	height: 5vw;
}

.modal__contenedor-bienvenida{
	/*background-image: url('../img/bienvenida.png');*/
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% auto;
	justify-content: flex-end;
	position: relative;
	width: 65vw;
	height: 80vh;

	-webkit-justify-content: flex-end;
}

.modal__contenedor-bienvenida .modal__cerrar{
	color: black;
}

.modal__imagen{
	margin-bottom: 3vh;
	width: 100%;
	height: auto;
	max-height: 65vh;
}

.modal__producto{
	margin-bottom: 3vh;
}

.modal__productoImagen{
	background-repeat: no-repeat;
	background-position: center;
	background-size: 75%;
	margin-right: 5%;
	width: 35%!important;
	height: 20vh!important;
}

.modal__producto div{
	flex-direction: column;
	justify-content: flex-start!important;
	padding: 0;
	width: 60%;

	-webkit-flex-direction: column;
	-webkit-justify-content: flex-start!important;
}

.modal__producto div p{
	margin-bottom: 0.8vh;
}

.modal__producto div b{
	text-transform: uppercase;
}

.modal__producto .modal__salto{
	margin-bottom: 3vh;
}

/*Estilo para media pantalla
______________________________*/
@media only screen and (max-width: 1024px){
	/*Página*/
	html,body{
		font-size: 1.8vw;
	}

	.contenedor{
		padding: 3vh 5%;
		width: 90%;
	}

.contenedor h2{
	text-transform: uppercase;
}

.contenedor p{
	margin-bottom: 1.5vh;
	text-align: justify;
}

.contenedor li{
	list-style: disc;
	list-style-position: inside;
}

.contenedor-columna{
	display: flex;
	justify-content: space-between;
}

	.contenedor-inicio{
		margin-top: 8vh;
	}

.contenedor__filtros{
	display: flex;
	justify-content: space-between;
	padding: 2vh 0;
	border-bottom: 0.1vh solid black;

	display: -webkit-flex;
	-webkit-justify-content: space-between;
}

.contenedor__filtros div{
	display: flex;
	align-items: center;

	display: -webkit-flex;
	-webkit-align-items: center;
}

.contenedor__filtros p{
	margin: 0!important;
}

	.contenedor__filtros select{
		font-size: 1.5vw;
	}

	.contenedor__select{
		width: 5vw!important;
		font-size: 1.5vw;
	}

	.contenedor__select li{
		list-style: none;
	}

	.contenedor__select-orden{
		width: 14vw!important;
	}

	.contenedor__select-marcas{
		width: 14vw!important;
	}

	.contenedor__pagina{
		margin: 0 1vw;
		padding: 2vh 3vw;
	}


.contenedor__pagina-especial{
	border: none;
}

.columna{
	width: 48%;
}

	.columna-nosotros{
		background-position: -95% 0;
		background-size: 130% auto;
	}

.columna img{
	width: 100%;
}

.titulo{
	margin-bottom: 3vh;
	font-family: "Ogg Roman";
	font-size: 2.8vw;
	text-transform: uppercase;
}

.preguntas__menu{
	display: flex;
	margin-bottom: 3vh;

	-webkit-display: flex;
}

	.preguntas__opcion{
		width: 23%;
	}

	.liga{
		font-size: 4vw;
		text-decoration: none;
	}

	.whatsapp img{
		width: 6vw;
		height: 6vw;
	}

	.modal__cerrar{
		top: 2vw;
		right: 3vw;
		font-size: 3.5vw;
	}

	.modal__contenedor{
		width: 65vw;
		height: 45vh;
	}

.modal__contenedor h1{
	margin-bottom: 5vh;
	font-family: "Ogg Roman";
	font-size: 2.3vw;
	text-transform: uppercase;
	text-align: center;
}

.modal__contenedor h2{
	margin-bottom: 3vh;
	font-size: 1.5vw;
	text-transform: uppercase;
	text-align: center;
}

.modal__contenedor p{
	margin-bottom: 3vh;
}

.modal__contenedor div{
	display: flex;
	justify-content: space-between;
	padding: 0 10%;
	width: 80%;

	display: -webkit-flex;
	-webkit-justify-content: space-between;
}

	.modal__contenedor a{
		width: 20vw;
	}

	.modal__cargando{
		width: 10vw;
		height: 10vw;
	}

	.modal__contenedor-bienvenida{
		width: 85vw;
		height: 55vh;
	}

	.modal__contenedor-bienvenida h1{
		margin-bottom: 3vh;
	}

	.modal__imagen{
		max-height: 40vh;
	}

.modal__producto{
	margin-bottom: 3vh;
}

	.modal__productoImagen{
		margin: 0;
		width: 40%!important;
		height: 18vh!important
	}

	.modal__producto div{
		padding: 0;
		width: 55%;
	}

.modal__producto div p{
	margin-bottom: 0.8vh;
}

.modal__producto div b{
	text-transform: uppercase;
}

.modal__producto .modal__salto{
	margin-bottom: 3vh;
}
}

/*Estilo para móviles
______________________________*/
@media only screen and (max-width: 465px){
	html,body{
		background-color: white;
		width: 100%;
		height: 100%;
		color: black;
		font-family: "Gotham", sans-serif;
		font-size: 4.5vw;
	}

	.contenedor{
		margin-top: 10vh;
		padding: 8vh 0;
		padding-bottom: 3vh;
		width: 100%;
	}

	.contenedor-columna{
		flex-direction: column;

		-webkit-flex-direction: column;
	}

	.contenedor-producto{
		padding: 8vh 3%;
		padding-bottom: 3vh;
		width: 94%;
	}

	.contenedor__filtros{
		flex-direction: column;
		border-bottom: none;

		-webkit-flex-direction: column;
	}

	.contenedor__filtros div{
		margin-bottom: 3vh;
	}

	.contenedor__filtros select{
		margin: 0 3vw;
		font-size: 4vw;
	}

	.contenedor__select{
		margin: 0 1vw!important;
		width: 13vw!important;
		height: 5vw;
		font-size: 4vw;
	}

	.contenedor__select:after{
		top: 1vw;
		width: 3vw;
		height: 3vw;
	}

	.contenedor__select ul{
		top: 5vw;
	}

	.contenedor__select-orden{
		width: 38vw!important;
	}

	.contenedor__select-marcas{
		width: 38vw!important;
	}

	.contenedor__pagina{
		margin: 0 2vw;
		padding: 2vh 4vw;
		border: 0.2vw solid black;
	}

	.contenedor__pagina-especial{
		border: none;
	}

	.columna{
		width: 100%;
	}

	.titulo{
		font-size: 6vw;
		text-align: center;
	}

	.preguntas__menu{
		flex-direction: column;
	}

	.preguntas__opcion{
		margin: 0 15%;
		margin-bottom: 3vh;
		width: 70%;
	}

	.whatsapp{
		left: 2vw;
		bottom: 2vw;
	}

	.whatsapp img{
		width: 13vw;
		height: 13vw;
	}

	.modal__cerrar{
		top: 4vw;
		right: 4vw;
		font-size: 5vw;
	}

	.modal__contenedor{
		width: 95vw;
		height: 70vh;
	}

	.modal__contenedor-producto{
		padding: 3vh 0;
		height: auto;
	}

	.modal__contenedor h1{
		margin-bottom: 3vh;
		font-size: 5.5vw;
	}

	.modal__contenedor h2{
		font-size: 4.8vw;
	}

	.modal__contenedor p{
		text-align: center;
	}

	.modal__contenedor div{
		flex-direction: column;
		align-items: center;
	}

	.modal__contenedor a{
		margin: 1.5vh 0;
		width: 50vw;
	}

	.modal__cargando{
		margin-top: 3vh;
		width: 18vw;
		height: 18vw;
	}

	.modal__contenedor-bienvenida{
		background-position: 53% 0;
		background-size: 170% auto;
		height: 68vh;
	}

	.modal__imagen{
		max-height: 38vh;
	}

	.modal__producto{
		flex-direction: row!important;
		align-items: flex-start!important;

		-webkit-flex-direction: row!important;
		-webkit-align-items: flex-start!important;
	}

	.modal__productoImagen{
		width: 40%!important;
	}

	.modal__producto div{
		align-items: flex-start;
		padding: 0;
		width: 55%;

		-webkit-align-items: flex-start;
	}

	.modal__producto div p{
		text-align: left;
	}
}