/*: Desktop styles  */
section[id="contact"] {
  scroll-margin-top: 2.5rem; /* 2.5rem = 140 px */
}

.contact {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
/* 
.contact::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 35.5%;
  height: 100%;
} */

.contact-container {
  position: relative;
  min-width: 68.8rem; /* 68.75rem = 1.100px */
  min-height: 34.4rem; /* 34.375rem = 550px */
  display: flex;
  z-index: 99;
  background: rgba(255, 255, 255, 0.1);
}

.contact-container .contactInfo {
  position: absolute;
  top: 2.5em; /* 2.5em = 40px */
  width: 23.1em; /* 23.125em = 370px */
  /* height: 31.3em; /* 31.25em = 500px */
  /* height: auto; */
  height: 570px;
  background: var(--background-contact-color);
  z-index: 1;
  padding: 2.5em;
  display: flex;
  justify-content: center;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 20px 25px rgba(0, 0, 0, 1.15);
  margin-top: 0;
}

.contact-container .contactInfo h2 {
  font-size: 1.5em;
  color: var(--green-color);
}

.contact-container .contactInfo ul.info {
  position: relative;
  margin: 0;
  margin-top: 3.5rem;
  font-size: 1.1em;
}

.contact-container .contactInfo ul.info li {
  position: relative;
  list-style: none;
  display: flex;
  margin: 1.6em 0;
  padding-right: 1.3em;
  cursor: pointer;
  align-items: flex-start;
  pointer-events: none;
  line-height: 1.4;
}

.contact-container .contactInfo ul.info li span:nth-child(1) {
  width: 1.9em;
  min-width: 1.9em;
  color: #fff;
  margin-left: 0.6em;
  font-weight: 300;
}

.contact-container .contactInfo ul.info li span:nth-child(1) img {
  max-width: 100%;
  filter: invert(1);
  -webkit-filter: invert(1);
}

.contact-container .contactInfo ul.info li span:nth-child(2) {
  color: #fff;
  min-width: 1.9em;
  margin-left: 0.6em;
  font-weight: 300;
}

.contact-container .contactInfo ul.info li span a {
  display: block;
  margin-top: 0.6em;
}

.contact-container .contactInfo ul.info li span a:nth-child(1) {
  color: #fff;
  min-width: 1.9em;
  margin-left: 0.6em;
  font-weight: 300;
  pointer-events: all;
}
.contact-container .contactInfo ul.info li span a:nth-child(2) {
  color: #fff;
  min-width: 1.9em;
  margin-left: 0.6em;
  font-weight: 300;
  pointer-events: all;
}
.contact-container .contactInfo ul.info li span a:nth-child(3) {
  color: #fff;
  min-width: 1.9em;
  margin-left: 0.6em;
  margin-bottom: 0.6em;
  font-weight: 300;
  pointer-events: all;
}

.contact-container .contactInfo ul.sci {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -2.5em;
}

.contact-container .contactInfo ul.sci li {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0 auto;
}

.contact-container .contactInfo ul.sci li a {
  text-decoration: none;
  padding: 1.6em;
}

.sci li a .fab {
  color: var(--white-color);
  font-size: 2em;
}

/*_ Hover effects on social media icons */

.sci .fab.fa-twitter:hover {
  color: var(--color-twitter);
  transform: scale(1.4);
}
.sci .fab.fa-instagram:hover {
  text-align: center;
  border-radius: 40px;
  color: #fff;
  background: #d6249f;
  background: radial-gradient(
    circle at 30% 107%,
    #fdf497 0%,
    #fdf497 5%,
    #fd5949 45%,
    #d6249f 60%,
    #285aeb 90%
  );
  transform: scale(1.4);
}
.sci .fab.fa-linkedin-in:hover {
  color: var(--color-linkedin);
  transform: scale(1.4);
}
.sci .fab.fa-whatsapp:hover {
  color: var(--color-whatsapp);
  transform: scale(1.4);
}

/*_ Formulario */
.contact-container .contactForm {
  position: absolute;
  padding: 4.4em 3.1em;
  padding-left: 15.6em;
  margin-left: 9.4em;
  width: calc(100% - 9.4em);
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 50px 50px rgba(0, 0, 0, 0.25);
}

.contact-container .contactForm h2 {
  color: var(--text-color);
  text-align: center;
  font-size: 1.9em;
  font-weight: 500;
}

.contact-container .contactForm .formBox {
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-top: 1.9em;
  font-size: 18px;
}

.contact-container .contactForm .formBox .inputBox {
  position: relative;
  margin-bottom: 2.2em;
}

.contact-container .contactForm .formBox .inputBox.w50 {
  width: 47%;
}
.contact-container .contactForm .formBox .inputBox.w100 {
  width: 100%;
}

.contact-container .contactForm .formBox .inputBox input,
.contact-container .contactForm .formBox .inputBox textarea {
  width: 100%;
  resize: none;
  padding: 0.3em 0;
  font-size: 1.1em;
  font-weight: 300;
  color: #333;
  border: none;
  outline: none;
  background: transparent;
  border-bottom: 1px solid rgba(15, 57, 87, 0.25);
  /* cursor: pointer; */
}

.contact-container .contactForm .formBox .inputBox textarea {
  height: 7.5em; /* 7.5em = 120px */
}

.contact-container .contactForm .formBox .inputBox span {
  position: absolute;
  left: 0;
  padding: 0.3em 0;
  pointer-events: none;
  font-size: var(--step-0);
  font-size: 1.1em;
  font-weight: 300;
  color: var(--text-color);
  transition: 0.3s;
}

.contact-container .contactForm .formBox .inputBox input:focus ~ span,
.contact-container .contactForm .formBox .inputBox input:valid ~ span,
.contact-container .contactForm .formBox .inputBox textarea:focus ~ span,
.contact-container .contactForm .formBox .inputBox textarea:valid ~ span {
  transform: translateY(-20px);
  font-size: 0.8em;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--green-color);
  -webkit-transform: translateY(-20px);
  -moz-transform: translateY(-20px);
  -ms-transform: translateY(-20px);
  -o-transform: translateY(-20px);
}

.contact-container .contactForm .formBox .inputBox input[type="submit"] {
  position: relative;
  cursor: pointer;
  background: var(--background-contact-color);
  color: var(--boton-contact-color);
  border: none;
  font-size: 1.5em; /*# OJO! anterior: 1.9em */
  max-width: 3.5em; /*# OJO! anterior: 6.3em */
  padding: 0.4em; /*# OJO! anterior: 0.8em */
  border-radius: 5px;
}

.contact-container .contactForm .formBox .inputBox input[type="submit"]:hover {
  background: var(--light-color);
}

/*! Now, make it responsive */

/** max-width: Desde 0 hasta el size especificado en este parametro, el DOM utilizará lo especificado en la media query. Es decir, cuando el tamaño sea >= al size especificado en max-width, el DOM utilizará lo especificado en el código de arriba (en el flujo normal de codificación). */

/** min-width: Hasta el size especificado en este parametro, el DOM utilizará lo especificado en el código de arriba (flujo normal de codificación). Es decir, cuando el tamaño sea >= al size especificado en este parametro, el DOM utilizará lo especificado en la media query. */

/*: iPad landscape styles  */
@media (max-width: 1024px) {
  .contact-container {
    width: 90%;
    min-width: auto;
    margin: 1.3em;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  }
  .contact-container .contactInfo {
    top: 0;
    width: 21.9em; /* 21.875em = 350px */
    /* height: 34.4em; /* 34.375em = 550px */
    height: auto;
    position: relative;
  }

  .contact-container .contactInfo ul.sci {
    width: 100%;
  }

  /* Colocar los iconos en columna */
  .contact-container .contactInfo .sci li {
    display: flex;
    align-items: center;
    margin: 0 auto;
  }
  .contact-container .contactInfo .sci li a {
    padding: 1.6em;
  }

  .contact-container .contactForm {
    position: relative;
    width: 100%;
    height: 100%; /*# anterior: auto */
    padding-left: 0;
    margin-left: 0;
    padding: 2.5em;
  }
  .contact-container .contactForm .formBox .inputBox input[type="submit"] {
    font-size: 1.5em;
  }
}

/*! Estilos para iPad: 991px & 768px x 1023px. Estas dos Media Query son para iPad modo vertical or Portrait */
/*: Other iPad landscape styles  */
@media (max-width: 991px) {
  section::before {
    display: none;
  }
  .contact-container {
    display: flex;
    flex-direction: column-reverse;
  }

  .contact-container .contactInfo {
    width: 100%;
    height: auto;
    flex-direction: row;
  }
  .contact-container .contactInfo ul.sci {
    display: flex;
    justify-content: center;
  }

  /* Colocar los iconos en columna */
  .contact-container .contactInfo .sci li {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 3.1em;
  }
  .contact-container .contactInfo .sci li a {
    padding: 1.9em;
  }

  .contact-container .contactForm {
    width: 100%;
    height: 100%; /*# anterior: auto */
  }
}

/*: iPad portrait styles  */
@media (max-width: 774px) {
  .contact-container .contactInfo ul.sci {
    width: 100%;
  }
  .contact-container .contactInfo .sci li {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    width: 100%;
  }
  .contact-container .contactInfo .sci li a {
    padding: 1.9em;
  }
  .contact-container .contactInfo h2 {
    font-size: 2em;
  }

  .contact-container .contactInfo ul.info {
    font-size: 1.5em;
  }
}

/*: Smartphones styles */
@media (max-width: 640px) {
  .contact-container .contactInfo {
    padding: 1.6em;
    flex-direction: column;
    align-items: flex-start;
  }
  .contact-container .contactInfo h2 {
    font-size: 1.5em;
  }

  .contact-container .contactInfo ul.info {
    font-size: 1.1em;
  }

  .contact-container .contactInfo ul.sci {
    width: 100%;
    margin-top: 2.5em;
    display: flex;
    justify-content: center;
    padding-right: 0px;
  }
  .contact-container .contactInfo ul.sci li {
    flex-direction: row;
  }
  .contact-container .contactInfo ul.sci li a {
    display: inline-block;
    text-align: center;
    padding-left: 0.6em;
  }
  .contact-container .contactInfo ul.sci li a .fab {
    font-size: 1.8rem;
  }
  .contact-container .contactForm {
    padding: 1.6em;
  }
  .contact-container .contactForm .formBox .inputBox.w50 {
    width: 100%;
  }
}