@charset "utf-8";
/* CUSTOM CSS Document */

/*
Google Fonts
// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 300 to 800

.open-sans-<uniquifier> {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.rajdhani-bold {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-style: normal;
}

*/

body{
	color: #212121;
	background-color: #f2f2f2;	
  font-family: "Open Sans", sans-serif;
}

h1, h2, h3{
 font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-style: normal;
	position: relative;
}

header{
	background-color: #ffffff;
	color: #212121;
	position: sticky;
}

header.inside{
	margin-bottom: 30px;
}

header .top{
	background-color: #009df4;
}

header .redes, header .optIcons {
    line-height: normal;
    height: auto;
}

header .logo{
	background-image: url("logo.png");
	width: 83px;
	height: 60px;
	margin: 10px 0;
}

.buscando form input[type="submit"], .articulo form.buscandoDescarga input[type="submit"]{
	background-color: #009df4;
	
}

header ul.options{
	font-size: 0;
}

header ul.options > li {
	height: 80px;
	line-height: 80px;
	vertical-align: middle;
	margin: 0 10px;}

header ul.options > li a{
	color: #212121;
	margin-left: 0;
	padding: 0 5px;
}

header ul.options li *:hover{
	opacity: 1;
}

header ul.options > li > a:after, header ul.options > li > p:after{
    content: '';
    height: 3px;
background: rgb(0,157,244);
background: -moz-linear-gradient(90deg, rgba(0,157,244,1) 50%, rgba(227,245,255,0) 100%);
background: -webkit-linear-gradient(90deg, rgba(0,157,244,1) 50%, rgba(227,245,255,0) 100%);
background: linear-gradient(90deg, rgba(0,157,244,1) 50%, rgba(227,245,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#009df4",endColorstr="#e3f5ff",GradientType=1);
    width: 0%;
    position: absolute;
    left: 0;
    bottom: -19px;
	transition: width .3s;
}

header ul.options > li > a:hover:after, header ul.options > li > p:hover:after{
    width: 100%;
}

header ul.options > li ul{
	position: fixed;
	left: 0;
	height: 0;
	background-color: #ffffff;
	text-align: center;	
	width: 100%;
}

header ul.options > li ul li{
	width: 20%;
	float: left;
	border-right: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;	
}

header ul.options > li ul li a, header ul.options > li ul li p{
	display: block;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

header ul.options > li ul li a{
	text-align: left;
	display: block;
	width: 100%;
	padding: 15px;
	font-size: 1rem;
	transition: background .3s;
}

header ul.options > li ul li a:hover{
	color:#ffffff;
	background: rgb(0,157,244);
	background: -moz-linear-gradient(90deg, rgba(0,157,244,1) 50%, rgba(227,245,255,0) 100%);
	background: -webkit-linear-gradient(90deg, rgba(0,157,244,1) 50%, rgba(227,245,255,0) 100%);
	background: linear-gradient(90deg, rgba(0,157,244,1) 50%, rgba(227,245,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#009df4",endColorstr="#e3f5ff",GradientType=1);
}

header ul.options > li.active ul{
	border-top: 1px solid #cccccc;
	padding: 0;
	height: auto;
	max-height: 70vh;
	overflow-x: hidden;
	overflow-y: auto;
}

header .options ul li:last-child{
	margin-bottom: 0;
}

.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before{
	background-color: #212121;
}

/*
    content: '';
    height: 3px;
    background: -webkit-linear-gradient(0.02deg, #F73859 .39%, #6E5CFF 99.99%);
    background: linear-gradient(89.98deg, #F73859 .39%, #6E5CFF 99.99%);
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -19px;
*/

.carousel-item h1{
	font-size: 3rem;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.6);	
}

.carousel-item p{
	text-shadow: 1px 1px 2px rgba(0,0,0,0.6);	
}

.carousel-item:after{
	background: rgb(0,0,0);
	background: -moz-linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 75%);
	background: -webkit-linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 75%);
	background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 75%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
}

.clientes{
	color: #1C1C1C;
	padding: 60px;
	background-color: #ffffff;
	margin-bottom: 0;
}

.lineasH{
	position: relative;
	margin-bottom: 30px;
}

.lineasH:after, .contacto h2:after, .destacadosTienda h2:after, #destacados h2:after{
	content: '';
    height: 3px;
	background: rgb(0,157,244);
	background: -moz-linear-gradient(90deg, rgba(0,157,244,0) 25%, rgba(0,157,244,1) 50%, rgba(0,157,244,0) 75%);
	background: -webkit-linear-gradient(90deg, rgba(0,157,244,0) 25%, rgba(0,157,244,1) 50%, rgba(0,157,244,0) 75%);
	background: linear-gradient(90deg, rgba(0,157,244,0) 25%, rgba(0,157,244,1) 50%, rgba(0,157,244,0) 75%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#009df4",endColorstr="#009df4",GradientType=1);
	width: 50%;
	position: absolute;
	left: 50%;
	bottom: -19px;
	transform: translateX(-50%);
}

#destacados{
	margin-top: 60px;
}

.clientes .logos{
	text-align: center;
}

.clientes .logos span{
	display: inline-block;
	width: 17.5%;
}

.clientes .logos span img{
	width: 100%;
}

footer{
	background-color: #cccccc;
}

footer .redes a{
	width: 50px;
	height: 50px;
	line-height: 50px;
	vertical-align: middle;
	color: #ffffff;
	background-color: #cccccc;
	border-radius: 500px;
	border: 2px solid #009df4;
	transition: all .3s;
}

footer .redes a:before{
	font-size: 1.25rem;
}

footer .redes a:hover{
	transform: translateY(-10px);
	border: 2px solid #7e286f;
}


section#categorias{
	padding: 120px 0;
	margin-bottom: 0;
	background-image: url("fondo.png");
	background-color: #ffffff;
}

section#categorias .listadoCategorias a{
	color: #ffffff;
 font-family: "Rajdhani", sans-serif;
	font-size: 2rem;
	transition: all .3s;

	box-shadow: 0px 0px 0px 0px rgba(0, 157, 244, 0.7),
			0px 0px 0px 0px rgba(0, 157, 244, 0.7),
			0px 0px 0px 0px rgba(0, 157, 244, 0.7),
			0px 0px 0px 0px rgba(0, 157, 244, 0.7);		
	border: 5px solid rgba(0, 157, 244, 0);
	background-color: #cccccc;
}

section#categorias .listadoCategorias a:hover{
	border: 5px solid rgba(0, 157, 244, 1);

	box-shadow: 0px 1px 2px 0px rgba(0, 157, 244, 0.7),
			1px 2px 4px 0px rgba(0, 157, 244, 0.7),
			2px 4px 8px 0px rgba(0, 157, 244, 0.7),
			2px 4px 16px 0px rgba(0, 157, 244, 0.7);		
}

section#categorias .listadoCategorias a p{
width: 100%;
margin: 0;
bottom: 50%;
transform: translate(-50%, 50%);
padding: 20px;
text-align: left;
opacity: 1;
background: #CCCCCC;
background: linear-gradient(90deg, rgba(204, 204, 204, 1) 0%, rgba(204, 204, 204, 0) 100%);	
transition: all .3s;}

section#categorias .listadoCategorias a:hover p{
background: rgb(0,157,244);
background: -moz-linear-gradient(90deg, rgba(0,157,244,1) 0%, rgba(227,245,255,0) 100%);
background: -webkit-linear-gradient(90deg, rgba(0,157,244,1) 0%, rgba(227,245,255,0) 100%);
background: linear-gradient(90deg, rgba(0,157,244,1) 0%, rgba(227,245,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#009df4",endColorstr="#e3f5ff",GradientType=1);

}

.listadoCategorias a img{
	opacity: 1;
	filter: grayscale(0);
}

.listadoCategorias a:hover img{
	opacity: .125;
	filter: grayscale(1);
	width: 101%;
	height: 101%;
	transition: all .3s;
}

section#categorias .listadoCategorias a img{
	transition: all .3s;
}


.contacto{
	padding: 120px 0;
	margin-bottom: 0;
	background-color: #ffffff;
}

.contacto .container{
	padding: 60px 30px;
	border: 1px solid #cccccc;
	overflow: hidden;
	backdrop-filter: blur(4px);
}

.contacto h2{
	text-align: center;
	font-size: 3rem;
	margin-bottom: 60px;
}

.contacto h3{
	margin-bottom: 30px;
}

.contacto ol{
	list-style: none;
	padding: 0;
	margin: 0 auto 60px;
	text-align: center;
	font-size: 0;
	padding-bottom: 60px;
	border-bottom: 1px solid #1a1a1a;
}

.contacto ol li{
	padding-top: 0;
	font-size: 1rem;
	display: inline-block;
	vertical-align: top;
}

.contacto ol li:first-of-type p:before, .contacto ol li:last-of-type p:before{
	content: "x";
	display: block;
	width: 70px;
	height: 70px;
	line-height: 70px;
	vertical-align: middle;
	border-radius: 500px;
	margin: 0 auto;
	background-color: rgba(0,0,0,.75);
	color: #ffffff;
	font-family: "Font Awesome 6 Free";
	font-weight: 600;
	font-size: 1.5rem;
	border: 2px solid #009df4;
}

.contacto ol li:first-of-type p:before{
    content: "\f07a";	
}
.contacto ol li:last-of-type p:before{
	content: "\f232";
	font-family: "Font Awesome 6 Brands";
    font-weight: 400;	
}

.contacto ol li p{
	font-size: .879rem;
	margin-bottom: 0;
}

.contacto ol li p strong{
  font-family: "Rajdhani", sans-serif;	
	font-weight: 700;
	font-size: 1.5rem;
	color: #009df4;
}

.contacto ul{
	list-style: none;
	padding: 0;
}

.contacto ul li{
	font-size: .879rem;
	margin-bottom: .5rem;
}

.contacto ul li a{
	color: #ffffff;
}

.contacto ul li a:hover{
	color: #009df4;
}

.contacto ul li:before{
	content: "\f111";
	font-family: "Font Awesome 6 Free";
	font-weight: 600;
	margin-right: 5px;
	color: #009df4;
}

textarea + label, .form-floating label{
	color: #414141;
}

footer .links{
	width: 100%;
	text-align: center;
}

footer .links p{
	display: inline-block;
	vertical-align: top;
}

footer .links p a{
	font-size: .879rem;
	text-transform: uppercase;
}

.breadcrumbs a, .share a{
	color: #ffffff;
}

footer .links p a:hover, .breadcrumbs a:hover, .share a:hover{
	color: #009df4;
}

.btn-call{
	border: 2px solid #009df4;
	background-color: #000;
	color: #009df4;
}

footer .btn-call{
	background-color: #cccccc;
}

footer .links p a{

	color: #212121;	
}

.btn-call:hover{
	border: 2px solid #009df4;	
	background-color: #009df4;
	color: #ffffff;
}

footer .links p a.btn-call:hover{
	color: #ffffff;	
}

.destacadosTienda h2, #destacados h2{
	text-align: center;
	font-size: 2.5rem;
	margin-bottom: 2em;
}

.productos a, .listadoProductos a{
	background-color: rgba(0,0,0,.125);
	color: #212121;
	padding: 15px;
	border: 2px solid #ccc;
	box-shadow: 0px 0px 0px 0px rgba(0, 157, 244, 0.7),
			0px 0px 0px 0px rgba(0, 157, 244, 0.7),
			0px 0px 0px 0px rgba(0, 157, 244, 0.7),
			0px 0px 0px 0px rgba(0, 157, 244, 0.7);	
	transition: all .3s;
}

.productos a:hover, .listadoProductos a:hover{
	border: 2px solid rgba(0, 157, 244, 1);	
	box-shadow: 0px 1px 2px 0px rgba(0, 157, 244, 0.7),
			1px 2px 4px 0px rgba(0, 157, 244, 0.7),
			2px 4px 8px 0px rgba(0, 157, 244, 0.7),
			2px 4px 16px 0px rgba(0, 157, 244, 0.7);	
}

.productos a .nombreProducto, .listadoProductos a .nombreProducto{
	font-size: 1rem;
}

.productos a .nombreProducto, .listadoProductos a .nombreProducto, .listadoProductos a .precioProducto, .productos a .precioProducto{
	color: #009df4;
  font-family: "Rajdhani", sans-serif;	
}

.productos a .precioOriginal, .listadoProductos a .precioOriginal{
	color: #212121;
	text-decoration: none;
}



.formasEnvio, .formasPago {
    background-color: transparent;
    color: #212121;
	border: 2PX SOLID #212121;}

.formasEnvio:hover, .formasPago:hover, .formasEnvio.active, .formasPago.active {
    background-color: #000;
    color: #ffffff;
	border: 2PX SOLID #009df4;}
	
header .mask.active{
	display: none;
}

section.producto h1{
	margin-bottom: 2rem;
}

.productos .pagination a:hover, .productos .pagination a.current{
	background-color: #000;
}


.subCategorias{
	margin-bottom: 30px;
}

.listaCarrito{
	color: #414141;
}

.listaCarrito ul.productos li:nth-child(even){
	background-color: #f2f2f2;
}

li a.borrarProducto{
	padding: 0;
	background-color: transparent;
	border: 0;
}

li a.borrarProducto:before{
	color: #414141;
}

li a.borrarProducto:hover{
	background-color: transparent;
	border: 0;
	box-shadow: 0 0 0 rgba(0,0,0,0);
}

li a.borrarProducto:hover:before{
	color: #009df4;
	background-color: transparent;
	border: 0;	
}

.totales{
	color: #414141;	
}


.totales form > p:first-of-type {
    color: #414141;
    font-weight: bold;
    text-transform: uppercase;
    border-left: 2px solid #009df4;
    padding-left: 15px;
}

.totales form .btn.seguirComprando {
    background-color: transparent;
    margin: 15px 0;
    white-space: normal;
    padding: 10px 15px;
    width: 100%;
    text-transform: none;
    color: #414141;
    border-color: #009df4;
    BORDER-RADIUS: 0;
    font-size: .8rem;
    font-weight: 400;
}


.totales form .btn.finalizar {
    background-color: #009df4;
    margin: 15px 0;
    white-space: normal;
    padding: 10px 15px;
    width: 100%;
    text-transform: none;
    color: #ffffff;
    border-color: #009df4;
    BORDER-RADIUS: 0;
    font-size: .8rem;
    font-weight: 700;
}

.totales form .btn.finalizar:hover {
    background-color: #000000;
    color: #009df4;
    border-color: #009df4;
}

.finalizarCompra.active .col-md-6{
	width: 100%!important;
	padding: 0!important;
	margin-bottom: 1rem;
}

.finalizarCompra.active input{
	width: 100%!important;
}

.finalizarCompra.active input.btn{
	font-size: .8rem;
	text-wrap: pretty;
	color: rgba(0, 0, 0, 1);
    border: 1px solid #009df4;
    border-radius: 0;
    padding: 10px 20px;
    background-color: rgba(0, 157, 244, 0);	
}

.finalizarCompra.active input.btn:hover{
	color: rgba(255,255,255,1.00);
    background-color: rgba(0, 157, 244, 1);	
}

.loginRegistro, .mensaje{
	color: #414141;
}


section#categorias .listadoCategorias a.ultimaCategoria{
	background-color: #000000;
	background-image: url("logoWhite.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 50%;
	cursor: default;
	border: none;
}

section#categorias .listadoCategorias a.ultimaCategoria:hover{
	background-color: #000000;
	background-image: url("logoWhite.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 50%;

	border: none;	
}

.listadoCategorias a.ultimaCategoria:hover img{
	mix-blend-mode: normal;
}

body > .ultimaCategoria{
	display: none;
}

header ul.options > li ul li a, section#categorias .listadoCategorias a p{
	text-transform: lowercase;
}

header ul.options > li ul li a:first-letter, section#categorias .listadoCategorias a p:first-letter{
	text-transform: capitalize;
}

@media only screen and (max-width : 479px) {

	
header ul.options > li {
	height: 60px;
	line-height: 60px;}
	
	
header ul.options > li ul {
    position: relative;
	top: auto;
	left: 0;}
	
	header ul.options > li.active ul{
		max-height: 45vh;
		float: left;
		text-align: left;
	}	
	
	header ul.options > li.active ul li{
		text-align: left;
	}	
	header ul.options > li ul li{
		width: 100%;
		border: 0;
	}
	.carousel-item h1{
		font-size: 2rem;
	}	
	.carousel-item h1 + p{
		height: 2.75rem;
		overflow: hidden;
	}	
	
section#categorias .listadoCategorias a{
	width: 100%;
	margin-right: 0;
}

section#categorias .listadoCategorias a:after{
	padding-bottom: 75%;
}

section#categorias .listadoCategorias a:last-of-type, section#categorias .listadoCategorias a:nth-last-of-type(0){
	margin-bottom: 0;
		
	}
	
section#categorias .listadoCategorias a:nth-child(2n), section#categorias .listadoCategorias a:last-child{
	margin-right: 0;}


	h3.lineasH{
		font-size: 1.75rem;
		text-align: center;
	}

	h3{
		text-align: center;
	}
	
	.clientes{
		padding: 60px 1rem;
	}	
	
	
.clientes .logos span{
		width: 40%;
	}	
	
	.contacto ol{
		width: 100%;
	}

	.contacto ol li{
		width: 100%;
		padding:30px 30px 15px;
	}

	.contacto ul li{
		width: 100%;
		display: inline-block;
	}

	.contacto iframe{
		width: 100%;
		float: left;
		height: 33.33vh;
	}
	
	.contacto form{
		width: 100%;
		float: right;
		margin: 0;
		padding: 0;
	}			
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width:480px) and (max-width : 767px) {

	
	
	
	
header ul.options > li ul {
    position: relative;
	top: auto;
	left: 0;}
	
	header ul.options > li.active ul{
		max-height: 45vh;
		float: left;
		text-align: left;
	}	
	
	header ul.options > li.active ul li{
		text-align: left;
	}	
	
section#categorias .listadoCategorias a{
	width: 100%;
	margin-right: 0;
}

section#categorias .listadoCategorias a:after{
	padding-bottom: 75%;
}

section#categorias .listadoCategorias a:last-of-type, section#categorias .listadoCategorias a:nth-last-of-type(0){
	margin-bottom: 0;
		
	}
	
section#categorias .listadoCategorias a:nth-child(2n), section#categorias .listadoCategorias a:last-child{
	margin-right: 0;}


	h3.lineasH{
		font-size: 1.75rem;
		text-align: center;
	}

	h3{
		text-align: center;
	}
	
	.contacto ol{
		width: 100%;
	}

	.contacto ol li{
		width: 100%;
		padding:30px 30px 15px;
	}

	.contacto ul li{
		width: 100%;
		display: inline-block;
	}

	.contacto iframe{
		width: 100%;
		float: left;
		height: 33.33vh;
	}
	
	.contacto form{
		width: 100%;
		float: right;
		margin: 0;
		padding: 0;
	}		
}

/* Small Devices, Tablets */
@media only screen and (min-width:768px) and (max-width : 991px) {

	
	
header ul.options > li ul {
    position: relative;
	top: auto;
	left: 0;}
	
	header ul.options > li.active ul{
		float: left;
		text-align: left;
	}	
	
	header ul.options > li.active ul li{
		text-align: left;
	}	
	
section#categorias .listadoCategorias a{
	width: 48.75%;
}

section#categorias .listadoCategorias a:after{
	padding-bottom: 75%;
}

section#categorias .listadoCategorias a:nth-of-type(odd){
	margin-right: 2.5%;
	}
section#categorias .listadoCategorias a:last-of-type, section#categorias .listadoCategorias a:nth-last-of-type(2){
	margin-bottom: 0;
		
	}
	
section#categorias .listadoCategorias a:nth-child(2n), section#categorias .listadoCategorias a:last-child{
	margin-right: 0;}


	h3.lineasH{
		font-size: 1.75rem;
		text-align: center;
	}

	h3{
		text-align: center;
	}
	
	.contacto ol{
		width: 100%;
	}

	.contacto ol li{
		width: 100%;
		padding:30px 30px 15px;
	}

	.contacto ul li{
		width: 48.75%;
		display: inline-block;
	}

	.contacto iframe{
		width: 100%;
		float: left;
		height: 33.33vh;
	}
	
	.contacto form{
		width: 100%;
		float: right;
		margin: 0;
		padding: 0;
	}		
}

/* Medium Devices, Desktops */
@media only screen and (min-width:992px) and (max-width : 1199px) {
section#categorias .listadoCategorias a{
	width: 48.75%;
}

section#categorias .listadoCategorias a:after{
	padding-bottom: 75%;
}

section#categorias .listadoCategorias a:nth-of-type(odd){
	margin-right: 2.5%;
	}
section#categorias .listadoCategorias a:last-of-type, section#categorias .listadoCategorias a:nth-last-of-type(2){
	margin-bottom: 0;
		
	}
	
section#categorias .listadoCategorias a:nth-child(2n), section#categorias .listadoCategorias a:last-child{
	margin-right: 0;}


	h3.lineasH{
		font-size: 1.75rem;
		text-align: center;
	}

	h3{
		text-align: center;
	}
	
	.contacto ol{
		width: 100%;
	}

	.contacto ol li{
		width: 50%;
		padding:0 30px 30px;
	}

	.contacto ul li{
		width: 49%;
		display: inline-block;
	}

	.contacto iframe{
		width: 48.75%;
		float: left;
	}
	
	.contacto form{
		width: 48.75%;
		float: right;
	}	
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
	
section#categorias .listadoCategorias a{
	width: 48.75%;
}

section#categorias .listadoCategorias a:after{
	padding-bottom: 75%;
}

section#categorias .listadoCategorias a:last-of-type, section#categorias .listadoCategorias a:nth-last-of-type(2){
	margin-bottom: 0;
		
	}
	
section#categorias .listadoCategorias a:nth-child(2n), section#categorias .listadoCategorias a:last-child{
	margin-right: 0;}

	h3.lineasH{
		font-size: 1.75rem;
		text-align: center;
	}

	h3{
		text-align: center;
	}
	
	.contacto ol{
		width: 100%;
	}

	.contacto ol li{
		width: 33.33%;
		padding:0 30px 30px;
	}

	.contacto ul li{
		width: 49%;
		display: inline-block;
	}

	.contacto iframe{
		width: 48.75%;
		float: left;
	}
	
	.contacto form{
		width: 48.75%;
		float: right;
	}
	
	
}