body {
    background-color: rgb(216, 225, 231);
    font-size: 100%;
    }

a {
  color: #014c98;
  font-weight: bold;
  text-decoration-line: none;
  font-size: 1.1em;
}

.container {
    background-color: rgb(246, 249, 251);

}

.empresa {
  display: flex;
  align-items: center;
}

.logo {
  width: 20%;
}

@media screen and (max-width: 64em) {
    body {
         font-size: 90%;
      }
   }
   
   @media screen and (max-width: 50em) {
    body {
          font-size: 75%;
      }
   }
   
   @media screen and (max-width: 30em) {
      body {
           font-size: 50%;
     }
   }
   
   
   p {
     font-family: 'Century Gothic';
     text-align: justify;
   }
   
   
   .footer {
     background-color: rgb(207, 214, 220);
     width: 98%;
     margin-left: 1%;
     margin-right: 1%;
   }
   
   @media screen and (max-width: 64em) {
     .footer {
          font-size: 80%;
       }
    }
    
    @media screen and (max-width: 40em) {
     .footer {
           font-size: 75%;
       }
    }
    
    @media screen and (max-width: 25em) {
       .footer {
            font-size: 50%;
      }
    }
   
    .espacio1 {
      height: 5%;
      background-color:#FFEA0E;
      margin-left: .01%;
      margin-right: .01%;
      font-size: .5em;
    }
    
    .espacio2 {
      height: 5%;
      background-color: #4EBCE9;
      margin-left: .01%;
      margin-right: .01%;
      font-size: .5em;
    }
   
   .muestra2 {
     width: 150%;
   }
   

.integrantes {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-content: space-around;
  }
  
  .instala {
    width: 500px;
    height: 500px;
    text-align: center;
    padding-bottom: 5%;
    }
  
    .nombre2 {
      height: 100%;
      width:100%;
      font-family: 'Century Gothic';
      font-weight: normal;
      text-decoration-line: none;
      font-size: 1em;
      border-radius: 25%;
      padding-left: 15%;
      padding-right: 15%;
      padding-top: 10%;
      padding-bottom: 10%;
      color: #4EBCE9;
    }
    
    .nombre2:hover {
      width: 100%;
      height: 100%;
      font-family: 'Century Gothic';
      font-weight: normal;
      text-decoration-line: none;
      font-size: 1em;
      border-radius: 25%;
      background-color: #4EBCE9;
      color: #FFEA0E;
    }
    .nombre3 {
      height: 100%;
      width:100%;
      font-family: 'Century Gothic';
      font-weight: normal;
      text-decoration-line: none;
      font-size: 1em;
      border-radius: 25%;
      padding-left: 15%;
      padding-right: 15%;
      padding-top: 10%;
      padding-bottom: 10%;
      color: #4EBCE9;
    }
    
    .nombre3:hover {
      width: 100%;
      height: 100%;
      font-family: 'Century Gothic';
      font-weight: normal;
      text-decoration-line: none;
      font-size: 1em;
      border-radius: 25%;
      background-color: #FFEA0E;
      color: #4EBCE9;
    } 
  
    .modal-header {
      background-color: aliceblue;
    }
    
    .modal-footer {
      background-color: aliceblue;
    }

    .inicio {
      font-size: 50px;
      -webkit-text-fill-color: #4EBCE9;

    }