*{
	margin: 0;
	padding: 0;
	font-family: 'PT Sans Narrow', sans-serif;
}

/*------MODAL------------------------------------------------------------------------*/

.modal{
	background-color: rgba(0,0,0,0.8);
	bottom: 0;
	top:0;
	left: 0;
	right: 0;
	position: fixed;
	z-index: 1010;

	color: #fff;
	text-align: center;
	padding-top: 0.5%;
}
.submodal{
	width: 35%;
	box-sizing: border-box;
	float: left;
	text-align: center;
	margin-left: 32.5%;
}

.cerrar-modal{
	width: 100%;
	float: left;
	box-sizing: border-box;
	color: #fff;
	text-align: right;
	font-size: 1.5em;
}
.cerrar-modal .icon-cross1:hover{
	color: orange;
	cursor: pointer;
}

.submodal figure{
	width: 100%;
}
.submodal figure img{
	width: 100%;
	height: auto;
}








/*---HEADER--------------------------------------------------------------------------------------------------------------------------------------------------------*/

.firstline{
	width: 100%;
	float: left;
	box-sizing: border-box;
	padding: 10px 15% 10px 15%;
	background-color: #3bb3c2;
	color: #fff;
	text-align: center;
	font-size: 1.2em;
}
.firstline .joyeria{
	float: left;
}
.firstline .cel{
	float: right;
}



header{
	width: 70%;
	float: left;
	margin-left: 15%;
	box-sizing: border-box;
}

.nav1{
	width: 100%;
}


.nav1 figure{
	width: 30%;
	float: left;
	box-sizing: border-box;
	padding-top: 20px;
}
header figure .logo2{
	display: none;
}

.nav1 figure img{
	width: 100%;
	height: auto;
}

.nav1 ul{
	width: 70%;
	float: right;
	box-sizing: border-box;
	text-align: right;
	margin-top: 40px;
}
.nav1 ul li{
	display: inline-block;
}
.nav1 ul li a{
	padding: 15px;
	display: block;
	color: #000;
	text-decoration: none;
	font-size: 1.2em;
}
.nav1 ul li a:hover{
	color: #3bb3c2;
	text-decoration: underline;
}

.nav1 section{
	width: 100%;
	float: right;
	text-align: right;
	border: solid;
}






.nav2{
	display: none;
}



.nav{
	width: 100%;
	float: left;
}
.nav figure{
	width: 50%;
	float: left;
}
.nav ul{
	width: 50%;
	float: left;
}




hr{
	border: none;
	background-color: #3bb3c2;
	height: 3px;
	width: 100%;
	float: left;
	margin-bottom: 30px;
}










/*--------PRODUCTOS-------------------------------------------------------------------------------------------------------------------*/

main{
	width: 70%;
	box-sizing: border-box;
	margin: auto;
}

section{
	display: flex;
	width: 100%;
	justify-content: space-around;
	flex-wrap: wrap;
	max-width: 1000px;
	margin: auto;
}

h2{
	width: 100%;
	background-color: #e5e5e5;
	padding: 10px;
	margin-bottom: 15px;
}


article{
	width: 230px;
	margin-bottom: 30px;
}

figure{
	width: 230px;
	height: 288px;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}

figure .img_producto{
	width: 230px;
	height: 288px;
	object-fit: cover;
}
section article p{
	width: 100%;
}
.descripcion-producto{
	padding: 10px;
}
.precio-producto{
	padding: 0 10px;
	text-align: right;
	color: #a11217;
}



/*---------SOMOS-------------------------------------------------------------------------------------------------------------------*/
.somos h3{
	font-size: 2.2em;
	margin-bottom: 30px;
	margin-top: 15px;
	padding: 0 7px;
}
.somos h5{
	float: left;
	font-size: 1.5em;
	padding: 0 7px;
}
.somos p{
	width: 100%;
	float: left;
	margin-bottom: 30px;
	font-size: 1.3em;
	text-align: justify;
	padding: 0 7px; 
}













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





.subfooter{
	width: 100%;
	float: left;
	background-color: #6cd2df;
	text-align: center;
	padding: 10px;
}
.subfooter:hover{
	background-color: #61bdc8;
	cursor: pointer;
}
.subfooter a{
	text-decoration: none;
	display: block;
	color: #fff;
}
.subfooter a:hover{
	text-decoration: underline;
}

footer{
	width: 100%;
	float: left;
	background-color: #3bb3c2;
	padding: 20px;
	text-align: center;
}

footer > figure{
	width: 100%;
	box-sizing: border-box;
	text-align: center;
}
footer figure img{
	width: 10%;
	height: auto;
	box-sizing: border-box;
}
footer p{
	width: 100%;
	box-sizing: border-box;
	color: #fff;
	text-align: center;
	font-size: 1.1em;
	margin-top: 20px;
	margin-bottom: 20px;
}





























/*---------------MEDIA QUERYS-------------------------------------------------------------------------------------------------------------------------------*/

@media (min-width: 280px) and (max-width: 480px) {

header, main, footer, .subfooter{
	width: 100%;
	margin-left: 0;
}

.firstline,.nav1{
	display: none;
}
.nav2{
	display: block;
}

footer figure img{
	width: 40%;
	height: auto;
}
p{
	font-size: 1em;
	margin-top: 5px;
}

hr{
	display: none;
}

.submodal{
	width: 100%;
	margin-left: 0;
}

}






/*-------------*/
@media (min-width: 481px) and (max-width: 600px) { 

header, main, footer, .subfooter{
	width: 100%;
	margin-left: 0;
}

.firstline,.nav1{
	display: none;
}
.nav2{
	display: block;
}

footer figure img{
	width: 40%;
	height: auto;
}
p{
	font-size: 1em;
	margin-top: 5px;
}

.submodal{
	width: 100%;
	margin-left: 0;
}

}







/*-------------*/
@media (min-width: 601px) and (max-width: 800px) {

header{
	width: 95%;
	margin-left: 2.5%;
}

header figure .logo2{
	display: block;
}
header figure .logo2 img{
	width: 57%;
	height: auto;
}
header figure .logo1{
	display: none;
}


main, footer, .subfooter{
	width: 100%;
	margin-left: 0;
}

}
/*-------------*/
@media (min-width: 801px) and (max-width: 1023px) {

header{
	width: 95%;
	margin-left: 2.5%;
}


main, footer, .subfooter{
	width: 100%;
	margin-left: 0;
}

    
}
/*-------------*/
@media (min-width: 1024px) and (max-width: 1200px) {

header{
	width: 95%;
	margin-left: 2.5%;
}

main, footer, .subfooter{
	width: 100%;
	margin-left: 0;
}


}