/*
CSS3.
	Regla del 0,0
	Carga de fuentes
	Body
	Contendor
	Contenido
	
Colores:


*/

/*Regla del 0,0*/
* {
	margin:0px;
	padding: 0px;
	text-decoration: none;
	list-style: none;
	box-sizing: border-box;
	color: #000;
	font: menu;
	font-size: 16px;
}
/*Se quitan todos los bordes a las imagenes, para Internet Explorer*/
img {
    border:none;
}

/* Cargamos las fuentes para mostrar la pagina*/


/*Le damos un color al fondo y una fuente para toda la pagina*/
body {
	background-color:white;	
}




.equipo{
	margin-top: 1%;
	margin-bottom: 1%;
	display: flex;	
	flex-direction:row;
	justify-content: center;
	align-items:center;
	padding-left: 1px;
	font-size: 18px;
	
}

.equipo ul{
	width:80%;	
	display:grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 16px;
}


.persona{
	min-height: 200px;
	background-color: rgba(0, 0, 0, 0.3);
}
.servicio_data{
	font-size: 25px;
	width:100%;	
	height:100%;
	font-weight: bold;
	display:flex;
	align-items:center;
	flex-direction:column;
	justify-content: center;
	color:white;
	
}
h1{
	font-size: 18px;
	font-weight: bold;
}


.overlay div{
	text-align: center;
	gap: 16px;
}


h1 {
	margin-bottom: 10px;
}

.persona:hover .servicio_data, .persona:focus .servicio_data{
	display:none
}

.persona:hover .overlay, .persona:focus .overlay{
	display:flex;
	align-items:center;
	flex-direction:column;
	justify-content: center;
}

.persona:hover .img_servicio, .persona:focus .img_servicio{
	display:none;
}

.overlay{
	display:none;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.7);
}


@media (max-width: 858px){
	.equipo{
		margin-top: 2%;
		margin-bottom: 5%;
	}
}