@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700');

*{
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 62,5%;
}

body {
  text-align:center;
}

header {
  background-image: url(../img/header.gif);
  background-size: cover;
  color: #ffffff;
  font-size: 2rem;
  padding: 4rem;
  margin:0;
}

header:hover{
  color: #6db9b6;
}

.menu i {
  padding: 1rem;
}
.menu nav{
  display: none;
}

.menu nav ul{
  margin:0rem;
  padding: 0rem;
}

.menu nav ul li {
  list-style-type: none;
  background: #6db9b6;
  text-align: center;
}

.menu nav ul li a {
  padding: 1rem;
  display: block;
  text-decoration: none;
  color: #fff;
  justify-content: center;
}

.menu nav ul li a:hover {
  background: #16516a;
  color: #6db9b6;
}

.fa-bars{
    color: #16516a;
}

.fa-bars:hover {
    color: #6db9b6;
}

h2 {
  color: #16516a;
}

h3 {
  color: #16516a;
}

h4 a{
  text-decoration: none;
  font-size: 0.75rem;
  color: #6db9b6;
}

h4 a:hover {
  color: #16516a;
}

main section{
  padding: 2rem;
}

article img {
  margin-top: 2rem;
  border-radius: 53rem;
}

article {
  padding: 2rem;
  margin: auto;
}

article:hover {
  background: #d8e4e7;
}

hr{
  border-color: #b3bfc4;
}

footer{
  color: #c2c2c2;
  font-size: 0.5rem;
  padding: 1rem;
}

.plan {
  text-align: left;
}

.plan h1 {
  padding-bottom: 3rem;
}

.plan hr{
  border-color: #b3bfc4;
  border-width: medium;
}

.plan h3 {
  padding-top: 2rem;
  font-weight: 700;
}

.plan h4 {
  font-weight: 400;
}

.integrantes {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  align-content: center;
  border-box: 0.1rem #beccd0;
}
.datos{
  font-size: 0.75rem;
  margin: 2rem 0rem 2rem 0rem;
  border-radius: 1.5rem;
  border: solid 1.5px #16516a;
  padding: 0rem;
  
}

.datos h3{
  font-size: 0.75rem;
  text-align: left;

}

.listdatos{
  list-style-type: square;
  text-align: left;
}



.descrip-tema{
  font-size: 0.75rem;
  margin: 2rem 0rem 2rem 0rem;
  border-radius: 1.5rem;
  border: solid 1.5px #16516a;
  padding: 0rem;
}

.descrip{
 text-align: left;
 padding-left: 5rem;
 padding-right: 5rem;

}

.descrip h3{
  font-size: 0.75rem;
  text-align: left;

}

@media (min-width: 60rem) {
.integrantes {
  display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: stretch;
	align-content: center;

}
  
.datos {
  column-count: 3;

  display: flex;
  justify-content:space-around;
  font-size: 0.75rem;
  margin: 2rem 0rem 2rem 0rem;
  border-radius: 1.5rem;
  border: solid 1.5px #16516a;
  padding: 0rem;

 }

 .datosdgpc{
  padding-top: 4rem;
}


}