body {
  background-color: white;
  font-family: 'Century Gothic';
}

h1 {
  position: absolute;
  top: 100px;
  left: 0px;
  width: 100%;
  }

h2 {
  font-weight: bold;
}
  
.container {
  width: 90%;
}

.banner {
  position: relative;
  background-color: rgb(171, 214, 182);
  padding-top: 30px;
  padding-left: 30px;
  padding-bottom: 40px;
  text-align:center ;
  font-size: 15px;
  color: rgb(15, 15, 15);
}

/* Estilo para los enlaces no visitados */

a:link {
  color: seagreen;
  text-decoration-line: none;
  padding-bottom: 2%;
  font-weight: bold;
}

/* Estilo para los enlaces visitados */
a:visited {
   color: seagreen;
   text-decoration-line: none;
   font-weight: bold;
}

/* Estilo para los enlaces al pasar el cursor encima */
a:hover {
   color: rgb(13, 72, 39);
   text-decoration-line: none;
   font-weight: bold;
}

/* Estilo para los enlaces al ser activados*/
a:active {
  color: rgb(13, 72, 39);
  text-decoration-line: none;
}

   /* Estilo de top navigation bar - la barra de navegación superior */
   .menu {
    display: flex;
    background-color: rgb(99, 142, 99);
  }

  .menu a:link {
    color: white;
    text-decoration-line: none;
  }
  
  /* Estilo para los enlaces visitados */
  .menu a:visited {
     color: white;
     text-decoration-line: none;
  }
  
  /* Estilo para los enlaces al pasar el cursor encima */
  .menu a:hover {
     color: rgb(13, 72, 39);
     text-decoration-line: none
  }

/* Estilo para los enlaces al ser activados*/
.side1 a:active {
  color: rgb(13, 72, 39);
  text-decoration-line: none;
}

/* Estilo para los enlaces no visitados */

.side1 a:link {
  color: seagreen;
  text-decoration-line: none;
}

/* Estilo para los enlaces visitados */
.side1 a:visited {
   color: seagreen;
   text-decoration-line: none;
}

/* Estilo para los enlaces al pasar el cursor encima */
.side1 a:hover {
   color: rgb(13, 72, 39);
   text-decoration-line: none
}

/* Estilo para los enlaces al ser activados*/
.side1 a:active {
  color: rgb(13, 72, 39);
  text-decoration-line: none;
}


.side1 {
  background-color: rgb(227, 253, 227);
}

.side2 {
    background-color: white;
}


  .footer {
    background-color: rgb(171, 214, 182);
    padding: 10px;
    text-align: center;
    color: white;
    font-size: 12pt;
    font-weight: bold;
  }

  .portada {
    background-image: url(images/ExplanadaCU.jpeg);
    background-color: transparent;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
    height: 100%;
    width: 100% ;
    text-align:center;
  }

.text{
margin: 30px 0px 30px 0px;	
padding: 10px;
background: rgba(0,0,0,0.5);
display: inline-block;
}

.contenedor {
  position: relative;
  overflow: hidden;
  float: left;
  width: 83%;
  padding-top: 50%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */ 
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.flex-container {

  display: flex;
  flex-direction: column;
  background-color: white;
  justify-content: center;
  align-items: center;

}

.flex-container>div {

  background-color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
 font-size: 10pt;
  
}

/* Estilo para la imagen */
img.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: none;
  max-height: 400px;
 
}

/* Estilo para el contenido */
.article {
  -webkit-flex: 2;
  -ms-flex: 2;
  flex: 2;
  background-color: rgb(255, 255, 255);
  padding: 1%;
}

/* Diseño responsivo: hace que el menú y el contenido (dentro de la sección) se coloque uno encima del otro en lugar de uno al lado de otro. */
@media (max-width: 600px) {
   section {
       -webkit-flex-direction: column;
       flex-direction: column;
   }
}

.equipos {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-content: space-around;
}

.team {
width: 200px;
text-align: center;
padding-bottom: 5%;
}

.nombre {
  height: 100%;
  color: rgb(13, 72, 39);
  font-family: 'Century Gothic';
  font-weight: bold;
  text-decoration-line: none;
  font-size: 1em;
}

.nombre:hover {
  width: 110%;
  height: 110%;
  color: #d9ecff;
  background-color: rgb(63, 148, 70);
  font-family: 'Century Gothic';
  font-weight: normal;
  text-decoration-line: none;
  font-size: 1em;
}

.muestra {
  width: 70%;

}