*{
	padding: 0;
	margin: 0;
	outline: 0;
	text-decoration: none;
	list-style: none;
	box-sizing: border-box;
	font-family: tahoma;
	}

nav {
	background: #fff;
	height: 65px;
	width: 100%;
	}
	.enlace{
	position: absolute;
	margin: 2px 0 0 30px;
	padding: 0px 0px;
	}

	.logo{
	height: 40px;
	margin-top: 7px;
	}

	nav ul{
	height: 66px;
	display: flex;
	align-items: center;
	padding: 10px 10px;
	justify-content: center;
	justify-content: end;
	}

	nav ul li{
	display: inline-block;
	margin: 0 5px;

	}

	nav ul li a{
	color: black;
	font-size: 20px;
	padding: 7px 0px;
	border-radius: 3px;
	margin: 15px;
	}

	li a.active, li a:hover{
	color: #0069ff;
	border-bottom: 3px solid #0069ff;
	}

	.checkbtn{
	font-size: 30px;
	color: #fff;
	line-height: 0px;
	margin-right: 0px;
	cursor: pointer;
	display: none;
	}

	#check{
	display: none;
	}

	.textologo{
	display: none;
	}

	i{
		margin-right: 10px;
		margin-top: 5px;
	}

/*----------------------------------inicio --------------------------*/
.ubicacion h2{
	display: inline-block;
	font-size: 16px;
	margin: 0px 3px;
	margin-left:10px;
	color: #aaa;
}
.ubicacion a{
	font-size: 16px;
	margin: 0px 3px;
	text-decoration: none;
	color: #aaa;
}

.ubicacion a:hover{
	color: #0069ff;
}
.grid-layout{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(auto-fit, auto-fill);
	grid-template-areas:
	"imagenes imagenes nombre nombre"
	"imagenes imagenes descripcion descripcion"
	"imagenes imagenes precio precio"
	"comprar comprar comprar comprar"
	"despacho despacho despacho despacho"
	"usuarios usuarios usuarios usuarios"
	"complemento complemento complemento complemento";
	gap: 20px;
	margin: 20px;
	

}


.nombre{
grid-area: nombre;
padding: 13px 0;
text-align: center;
color: #002f69;
font-weight: bold;

}

.imagenes{
grid-area: imagenes;
background:url(../../imagenes/tapete.jpg);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
border-right: 2px solid #002f69;
}

.descripcion{
grid-area: descripcion;
padding: 20px;
padding-top: 0px;
}

.descripcion a{
color: #0069ff;
font-weight: bold;

}
.descripcion a:hover{
transition: 0.5s;
font-size: 17px;
}

.precio{
grid-area: precio;
font-size: 26px;
text-align: center;
display: flex;
flex-flow: row wrap;
justify-content: center;
gap: 40px;
}

.precio div, .precio a{
	padding:10px 20px;
}

.btn-comprar{
	color: #0069ff;
	border:2px solid #0069ff;
}

.btn-comprar:hover{
	color: #fff;
	background: #0069ff;
	transition: 0.5s;
	transform: scale(1.1);
	
}

.comprar{
grid-area: comprar;
border-top: 2px solid #002f69;
}

.comprar h3{
	font-size: 24px;
	background: #eeeef2;
	color: #002f69;
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: center;
}
.parrafo-space{
	padding-left: 20px;
}

.warning{
	background: #002f69;
	padding: 10px;
	color: #fff;
}

.despacho{
	grid-area: despacho;
	display: flex;
	flex-flow: row wrap;
	gap:50px;
	justify-content: center;
}

.despacho div{
	width: 250px;
	height: 140px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.despacho div:hover{
	transform: scale(1.1);
	transition: 0.5s;

}


.despacho i{
	font-size: 60px;
	color: #002f69;
}

.despacho i:hover{
	color: #0069ff;
}

.despacho p{
	margin-top: 20px;
	font-size: 20px;
}


.usuarios{
	grid-area: usuarios;
	text-align:center;
	font-size: 24px;
	font-weight: bold;
	padding-top: 20px;
	padding-bottom: 20px;
	background: #eeeef2;
	color: #002f69;
}

.complemento{
grid-area: complemento;
display: flex;
flex-flow: row wrap;
gap: 20px;
padding: 20px;
justify-content: center;
}

.complemento div{
text-decoration: none;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}

.complemento div:hover{
	transform: scale(1.1);
	transition: 0.5s;
}

.complemento div a{
	width: 180px;
	height: 150px;
}

.complemento div p{
	margin: 10px 0;
	color: #0069ff;
	
}

.complemento div p:nth-child(3){
	color:#000;
}



.guante2{
	background: url(../../imagenes/guantedi.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;

}

.tapete0{
	background: url(../../imagenes/tapete.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.detector{
	background: url(../../imagenes/detector-cono.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.pertiga{
	background: url(../../imagenes/pertiga.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.balaclava{
	background: url(../../imagenes/balaclava.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.botas{
	background: url(../../imagenes/b-novax.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}


/*----------------------------------BTN WSP --------------------------*/

.btn-wsp{
	position: fixed;
	width: 55px;
	height: 55px;
	line-height: 55px;
	bottom:25px;
	right: 25px;
	background: #0df053;
	color: #fff;
	border-radius: 50px;
	text-align: center;
	font-size: 30px;
	box-shadow: 0px 1px 10px rgba(0,0,0,0.3);
	z-index: 100;
	padding-left: 10px;

}

.btn-wsp:hover{

	color: #0df053;
	background: #fff;


}



/*----------------------------------FOOTER --------------------------*/


.contenedor-footer{
	background-color: #000;
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-content: center;

}

.contenedor-footer div{
	width: 200px;
	height: 230px;
	margin-top: 10px;
}

.contenedor-footer div h3{
	text-align: center;
	padding: 10px;
	border-bottom: 3px solid #0069ff;
	color: #fff;
	margin-top: 3px;
}

.contenedor-footer div a{
	display: block;
	text-align: center;
	padding: 7px;
	color: #fff;
}

.contenedor-footer div p{
	color: #fff;
	text-align: center;
	padding: 2px;
	padding-top: 5px;

}


.footer-info a:hover{
	color: #0069ff;

}

.copyright{
	background: #ccc;
	color: #000;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5px;
	gap: 5px;
	flex-flow: row wrap;
}

.copyright a{
	color: #002f69;
	text-decoration: underline;
}


@media screen and (max-width: 952px) {
	.enlace{
			padding-left: 20px;
				}
				nav ul li a{
			font-size: 16px;
				}



}









@media screen and (max-width: 858px) {
	.checkbtn{
		display: inline-block;
		color: black;
		float: right;
		margin: 10px 10px 0 0;
		}

		ul{
		position: fixed;
		width: 100%;
		height: 50vh;
		background-color: #ccc;
		top: 60px;
		left: -100%;
		text-align: center;
		transition: all .05s;
		display: flex;
		justify-content: center;
		}
		nav ul li a{
			font-size: 12px;
		}

		nav ul li{
		margin: auto;
		line-height: 27px;
			}
		nav ul li{
		font-size: 0px;
			}
		li a:hover, li a.active{
		background: none;
		color: #0069ff;
			}
		#check:checked ~ ul{
		left: 0;
			}



.imagenes{
	width: 230px;
	height: 230px;
	border:none;
	margin:auto;
}

.precio{
	gap: 15px;
}

.grid-layout{
	grid-template-areas: 
	"nombre nombre nombre nombre"
	"descripcion descripcion descripcion descripcion"
	"precio precio precio precio"
	"imagenes imagenes imagenes imagenes"
	"comprar comprar comprar comprar"
	"despacho despacho despacho despacho"
	"usuarios usuarios usuarios usuarios"
	"complemento complemento complemento complemento"
	;

}
}