/* Menú Hamburguesa */

.hamburguer-menu {
  padding: 0.3rem 1.3rem;
}

/* Header */
header div, header li {
  display: inline-block;
}

header a {
  color: #fff;
  display: block;
  text-decoration: none;
}

.background-color {
  background-color: rgb(244, 30, 7);
}

nav {
  padding: 14px;
  overflow: hidden;

}

.nav-left {
  float: left;
  font-size: 1.25rem;
  padding-left: 7%;
}

.nav-left a:hover {
  font-weight: 700;
}

.nav-right div{
  float: right;
  font-size: inherit;
}

.nav-right a {
  padding: 5px 15px;
  width: 100%;
}

.nav-right a:hover {
  background-color: #fff;
  color: rgb(244, 30, 7);
  font-weight: 700;
}

/* Imagen Principal*/

.main-image {
  background-image: url('../assets/images/hero.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  height: 400px;
}

h1 {
  font-size: 5rem;
  font-weight: 300;
}

h2 {
  font-size: 2.5rem;
  font-weight: 300;
}

.overlay {
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  height: 100%;
  padding: 7.5rem 0;
}

.line-height {
  line-height: 80px;
}

.text-center {
  text-align: center;
}

/* Primera Sección */

.first-section {
  padding: 3.5rem 22.5rem 4.8rem;
}

.first-section h2 {
  font-size: 1.7rem;
}

.font-weight {
  font-weight: 700;
}

.purpose p {
  padding: 1.3rem 0 2.2rem;
  line-height: 30px;
  text-align: justify;
}

.button {
  background-color: rgb(244, 30, 7);
  color: #fff;
  border: 2px solid #f41e2e;
  padding: 0.8rem 0.4rem;
  border-radius: 5px;
  outline: 0;
}

.contact-us {
  padding-left: 3rem;
}

.contact {
  padding: 1rem 0 1.5rem;
  line-height: 27px;
}

.phone-div {
  padding-top: 0.15rem;
}

.contact i {
  padding-right: 0.5rem;
}

/* AL ícono del teléfono y del correo les cambie a diferentes colores ya que les enseñé a algunas personas mi página y no les gustaba que estos dos íconos fueran grises y el resto de colores, sino que querían que todos fueran de colores */

.yellow-icon {
  color: rgb(241, 196, 15);
}

.orange-icon {
  color: rgb(229, 108, 7);
}

.green-icon {
  color: rgb(40, 180, 99);
  font-size: 1.1em;
}

.e-mail {
  color: rgb(52, 152, 255);
}

.social-media i {
  line-height: 27px;
  font-size: 1.2em;
  padding-right: 0.5rem;
}

.fa-facebook-official {
  color: rgb(49, 107, 222);
}

.fa-twitter {
  color: rgb(49, 191, 221);
}

.social-media a {
  text-decoration: none;
  color: #000;
}

/* Segunda Sección */

.second-section {
  padding: 0 13.5rem 3.3rem;
}

.box {
  border: 1px solid #d7dbdd;
  width: 302px; /*Es 3012, porque el borde es 1px y por lo tanto cada borde lateral(de los costados) vale 1px: 1+ 300 +1 = 302*/
}

.image {
  width: 300px;
  height: 200px;
}

.image img {
  width: 100%; /*No utilizo la propiedad width porque mi imagen se pixelea y no se ve bien, en cambio cuando es max-width la imagen toma un width no mayor del propuesto(300px)*/
  height: 200px;
  border-bottom: 1px solid #d7dbdd;
}

.second-section h3 {
  font-size: 1.3rem;
  padding: 1rem 0;
}

.first-box {
  padding-left: 10%;
}

.second-box {
  padding-left: 5%;
}

.sub-box {
  padding: 0 1rem;
  background-color: rgb(245, 176, 65);
}

/* Párrafos */

.sub-box p {
  text-align: justify;
}

.p-1 {
  padding: 0 0 2.1rem;
}

.p-2 {
  padding: 0 0 1rem;
}

.p-3 {
  padding: 0 0 2.5rem;
}

.button-div {
  border-top: 1px solid #d7dbdd;
  padding: 0.9rem 0;
  background-color: rgb(236, 158, 86);
}

.button-large {
  background-color: rgb(244, 30, 7);
  color: #fff;
  border: 2px solid #f41e2e;
  padding: 0.5rem 0.7rem;
  border-radius: 5px;
  outline: 0;
  margin-left: 1rem;
}

/* Footer */

footer {
  color: #fff;
  padding: 3rem;
}

@media (max-width: 1560px) {
  .first-section {
    padding: 3.5rem 10.5rem 4.8rem;
  }

  .second-section {
    padding: 0 0 3.3rem 0;
  }

  .first-box {
    padding-left: 5%;
  }

  .second-box {
    padding-left: 3.5%;
  }

  .third-box {
    padding-left: 2%;
  }
}

@media (max-width: 1200px) {
  .nav-left {
    padding-top: 0.6rem;
  }
}

@media (max-width: 991px) {
  .contact-us {
    padding-left: 0;
    padding-top: 5rem;
  }

  .first-box, .second-box, .third-box {
    padding-left: 35%;
    padding-top: 5rem;
  }

  .nav-left {
    padding-top: 0.6rem;
  }

  .div {
    width: 100%;
  }

}
/* Para dispositivos móviles como el Galaxy S5 */

@media (max-width: 550px) {
  .div {
    width: 180%;
  }

  .first-box, .second-box, .third-box {
    padding-left: 49%;
    padding-top: 5rem;
  }
}