@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&family=Staatliches&display=swap');

*{
  color: #0000;
}

.contenedor1{
	width: 70%;
	justify-content: center;
}

.contenedor-navegar{
	display: flex;
	width: 80%; 
	margin: auto;
	justify-content: space-around;
	flex-wrap: wrap;
    background-repeat: repeat;
}

.contenedor-navegar .imagen{
	width: 50% ;
	position: relative;
	height: auto ;
	justify-content: center;
	overflow-y:  none;
	margin-top: 0px;
	margin-bottom: 0px;
}

.imagen img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.imagen h2{
	width: 100%;
	height: 25%;
	justify-content: center;
	align-content: center;
	padding-left: 2em;
	padding-right: 2em;
	padding-top: 2em;
	padding-bottom: 1em;
}


/*pasaer mouse*/
.overlay {
	position: absolute;
	bottom:0;
	left: 0;
	background: #000000a7;
	opacity: 1.9;
	width: 100%;
	height: 0;
	transition: .5s ease;
	overflow: hidden;
}

.overlay h2{
	color: white;
	font-family: 'Staatliches';
	font-weight: 300;
	font-size: 49px;
	line-height: 50px;
	position: absolute;
	top: 35%;
	left: 50%;
	text-align: center;
	transform: translate(-50%, -50%);
}

.imagen:hover .overlay{
	height: 100%;
	cursor: pointer;
}


@media screen and (max-width:1500px){
	.contenedor1{
		width: 100%;
	}

}

@media screen and (max-width:1300px){
	.contenedor1{
		width: 100%;
	}

}

@media screen and (max-width:800px){
	.contenedor1{
		width: 100%;
	}
	.contenedor-navegar .imagen{
		width: 100%;
		margin-top: 0px;
	    margin-bottom: 0px;
	}

	.overlay h2{
		font-size: 37px;
		line-height: 46px;
		margin-top: -40px;
	}

}

@media screen and (max-width:400px){
	.contenedor1{
		width: 100%;
	}
	.contenedor-navegar .imagen{
		width: 100%;
		margin-top: 0px;
	    margin-bottom: 0px;
	}

	.overlay h2{
		font-size: 38px;
		line-height: 39px;
		margin-top: -10%;
		margin-bottom: 10%;
		margin-left: 0%;
		margin-right: 0%;
	
	}

}