body {
	font-family: "Roboto", "Lobster", "Verdana", "DM Serif Display", serif;
	background-color: #F2F4F3;
	margin: 0;
    padding-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 20px;

}

.barra-superior {

	width: 100%;

	background-color: #303030;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	font-family: "Roboto"; 
	font-size: 120%;
	color: #D9FFE6;



}


.barra-links {
	padding-top: 15px;
	padding-bottom: 15px;
	font-family: "Roboto"; 
	font-weight: bold;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	background-color: white;
	text-decoration: none;
}


.dgpc {
	     width: 20%;
	     height: 30%;
 }


.imagenytitulo {
	background-color: #BACEC0;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
}

.circular--square {

	width: 40%;
	padding-left: 30px;
    padding-right: 30px;
    padding-top: 30px;
    padding-bottom: 30px;
	border-radius: 50%;

}

h1 {

	font-family: "Lobster";
	font-weight: bold; 
	font-size: 40px;
	line-height : 40px;
	color:#3C423E;
	padding-right:30px;

}


h4 {
	font-family: "DM Serif Display";
	color: #BACEC0;
	font-size: 40px;
		padding-left:35px; 

}


.materias h5 {
	font-family: "DM Serif Display";
	color: #BACEC0;
	font-size: 30px;
	padding-left:35px; 
}

.materias ul li {
	
	font-family: "Verdana";
	font-size: 25px;
	text-decoration: none;
	list-style: none;
	line-height : 35px;
	margin-bottom: 20px;
	background-color: #BACEC0;
	padding-right: 50px;


}


a{
color:#000
}


a:hover {
color:#496355;
}


.article h6 {
	font-family: "DM Serif Display";
	font-size: 20px;
	padding-left: 20px;
}

.article li {
	font-family: "Verdana";
	line-height : 30px;
	list-style: none;

}

span {
	font-weight: bold; 
background-color: white;
}

.footer {
	padding-top: 30px;
	font-family: "Verdana";
	font-size: 12px;

}

h5 {
	font-family: "DM Serif Display";
	color: #C7E2CF;
	font-size: 30px;
	padding-left:35px; 
}


.parrafo {
	padding-left: 20px;
	padding-right: 20px;
}

p {
	font-family: "Verdana";
		font-size: 16px;
}

.plan-mapa-titulo {
	text-align: center;
}

.pelota {
	width: 100%;
} 












.mapaimgs {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.mapaimagenes {
  width: 100px;
  height: 200px;
  line-height: 2em;
  margin-bottom: 2em;
}