.portada {
    position: relative;
    display: inline-block;
}

.titulo {
    position: absolute;
    top: 10%;
    left: 10%;
}

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);

}

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

.logo {
  width: 20%;
}

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

.area {
width: 300px;
text-align: center;
padding-bottom: 5%;
}

h1 {
    font-size: 3em;
    color: #003D79;
  }


  @media screen and (max-width: 80em) {
    h1 {
        font-size: 2.7em;
        color: #001e3d;
      }
    }

@media screen and (max-width: 64em) {
h1 {
    font-size: 2.5em;
    color: #001e3d;
  }
}

@media screen and (max-width: 50em) {
h1 {
    font-size: 2em;
    color:#001e3d;
  }
}

@media screen and (max-width: 30em){
h1 {
    font-size: 1.5em;
    color:#001e3d;
  }
}

@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 {
  width: 98%;
  margin-left: 1%;
  margin-right: 1%;
  color:rgb(246, 249, 251);
  background-color:#662483;
  padding-top: 10px;
  padding-bottom: 1px;
}

@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;
}

.muestra {
  width: 80%;
}

.nombre {
  height: 100%;
  color: #014c98;
  font-family: 'Century Gothic';
  font-weight: bold;
  text-decoration-line: none;
  font-size: 1em;
}

.nombre:hover {
  width: 105%;
  height: 105%;
  color: #d9ecff;
  background-color: #4EBCE9;
  font-family: 'Century Gothic';
  font-weight: normal;
  text-decoration-line: none;
  font-size: 1em;
}

.modal-header {
  background-color: #4EBCE9;
  color: aliceblue;
}

.modal-footer {
  background-color: #FFEA0E;
}

.close {
  background-color: #F9B233;
  border-color: #DC931C;
}

.visita {
  background-color: #662483;
  border-color: #4b0867;
}

hr.style18 { 
  height: 15px; 
  border-style: solid; 
  border-color: #1777b3;
  background-color: #014c98;
  border-width: 1px 0 0 0; 
  border-radius: 20px; 
} 
hr.style18:before { 
  display: block; 
  content: "Nosotros"; 
  height: 15px; 
  margin-top: -31px; 
  border-style: solid; 
  border-color: #0c99e0; 
  border-width: 0 0 1px 0; 
  border-radius: 20px; 
}
/*fuentes
 <uniquifier>: Use a unique and descriptive class name
 <weight>: Use a value from 200 to 800*/

.stick-no {
  font-family: "Stick No Bills", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}