body, html {
  height: 100%;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
* {
  margin: 0;
  box-sizing: border-box;
}
hr {
  margin: 10px 3%;
  border: 0.5px solid #e34c00;
}
h1 {
  font-size: 50px;
  text-shadow: 1px 1px #e34c00;
}
h2 {
  font-size: 40px;
  font-family: 'Carrois Gothic SC', sans-serif;
  text-align: center;
  margin: 10px;
  color: #FAB20C;
}
.header-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../Images/portrait.jpg");
  height: 75%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.header-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}
.navigation {
  z-index: 10;
  top: 0;
  position: fixed;
  width: 100%;
  margin: 0;
  text-align: center;
  background: #e34c00;
}
.navigation a {
  font-size: 17px;
  float: left;
  display: block;
  text-align: center;
  padding: 10px 20px;
  font-family: Helvetica;
  text-decoration: none;
  color: white;
 }
 .navigation a.right {
   float: right;
 }
 .navigation a:hover {
   text-decoration: none;
   background-color: #ddd;
   color: #e34c00;
 }
 .navigation .icon {
   display: none;
 }
 .tarjeta {
   margin: 0 1%;
   width: 48%;
   float: left;
 }
 .tarjeta img {
   width: 100%;
   border-radius: 5%;
 }
 .proyectos::after {
   clear: both;
   content: "";
   display: flex;
 }
 .equipo {
   overflow: auto;
 }
 .equipo::after {
   content: " ";
   clear: both;
   display: table;
 }
 .member_card {
   float: left;
   width: 32%;
   margin: 0 0.666%;
   background-color: #f2f2f2;
   border-radius: 5%;
   color: #e34c00;
   text-decoration: none;
   box-shadow: 1px 1px 1px black;
   padding-top: 5px;
   padding-bottom: 10px;
  }
 .member_card img {
   width: 95%;
   margin: 3%;
   border-radius: 5%;
 }
 .member_card h4, h5, h6 {
   font-size: 1.2em;
   margin: auto 5%;
   text-shadow: 1px 1px white;
 }
 .member_card h5 {
   color: #fff;
   text-shadow: 1px 1px 1px black;
 }
 .footer {
   font-family: Helvetica;
   background: #E34C00;
   text-align: center;
   width: 100%;
   display: inline-block;
   padding: 0;
 }
 .footer hr {
   border: 0.5px solid #FAB20C;
   margin: 10px 4%;
   margin-top: 2.0em;
 }
 .footer h6 {
   margin-left: 5%;
   float: left;
   font-weight: lighter;
   color: #FAB20C;
   font-size: 0.9em;
   padding: 15px 0;
   text-shadow: none;
 }
 .footer .legal  {
   float: left;
   padding: 15px 20px;
   color: white;
   margin: 0;
   font-size: 0.9em;
   text-decoration: none;
 }
 .footer .legal.right {
   float: right;
 }
 .footer .legal:hover {
 text-decoration: underline;
 }
 .footer .developers::before {
   clear: both;
   content: "";
   display: table;
 }
 .footer .developers {
   color: white;
   text-decoration: none;
   clear: both;
   float: none;
   font-size: 0.8em;
   padding: 0;
   margin: 0 5%;
 }
 @media screen and (max-width: 150px) {
   .navigation a:not(:first-child) {
     display: none;
   }
   .navigation a.icon {
     float: right;
     display: block;
   }
   .navigation.responsive .icon {
     text-align: center;
     position: fixed;
     top: 0;
     right: 0;
     width: 10%;
   }
   .navigation.responsive a:first-child {
     width: 90%;
   }
   .navigation.responsive a {
     float: none;
     display: block;
     text-align: left;
   }
 }
 @media screen and (max-width: 850px) {
   .tarjeta img {
     height: auto;
     width: 100%;
   }
   .tarjeta {
     width: 98%;
   }
   .member_card img {
     height: auto;
     width: 95%;
   }
   .member_card {
     margin: 10px 1%;
     width: 98%;
     font-size: 0.8em;
   }
 }