@font-face {
  font-family: "RedHatDisplay";
  src: url("../assets/fonts/RedHatDisplay-Regular.otf") format("opentype");
  font-weight: 200;
  font-style: normal; }

@font-face {
  font-family: "RedHatDisplay";
  src: url("../assets/fonts/RedHatDisplay-Medium.otf") format("opentype");
  font-weight: 300;
  font-style: normal; }

@font-face {
  font-family: "RedHatDisplay";
  src: url("../assets/fonts/RedHatDisplay-Bold.otf") format("opentype");
  font-weight: 400;
  font-style: normal; }

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -moz-font-smoothing: unset;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-print-color-adjust: exact;
  font-family: 'RedHatDisplay';
  outline: 0;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth; }

html,
body {
  min-height: 100%;
  height: auto;
  width: 100vw;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar; }

img#mobile, #send {
  display: none; }

p#aviso {
  color: white;
  margin: auto;
  font-size: 2vw;
  padding-bottom: 11vw; }

.texto-aviso {
  padding: 7vw 14vw; }
  .texto-aviso p {
    font-weight: 200; }
    .texto-aviso p i {
      font-weight: 300; }

.banner {
  background: linear-gradient(180deg, #002935 5%, #07979D 100%); }

.banner.active {
  background: linear-gradient(180deg, #2F4C67 5%, #4E769C 100%);
  -webkit-transition: background 1000ms linear;
  transition: background 1000ms linear; 
  z-index: 2;
  position: relative;
}

nav.navbar {
  padding: 3vw 15vw 6vw; }
  nav.navbar a {
    font-size: 1.2vw; }

.navbar-brand img {
  width: 13vw; }

a.nav-link {
  color: white;
  font-weight: 300;
  font-size: 1.2vw; }
  a.nav-link:hover {
    color: #D3AF3C; }

#nav-icon {
  display: none;
  width: 6.5vw;
  height: 6vw;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer; }

#nav-icon span {
  display: block;
  position: absolute;
  height: 0.5vw;
  width: 100%;
  background: white;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out; }

#nav-icon span:nth-child(1) {
  top: 0px; }

#nav-icon span:nth-child(2) {
  top: 8px; }

#nav-icon span:nth-child(3) {
  top: 16px; }

#nav-icon.open span:nth-child(1) {
  top: 10px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg); }

#nav-icon.open span:nth-child(2) {
  opacity: 0; }

#nav-icon.open span:nth-child(3) {
  top: 10px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg); }

.info-banner {
  display: flex; 
  padding-bottom: 20vw;
}

.info-banner.aviso{
  padding-bottom: 0;
}

.info-banner.unactive {
  display: none; }

#mobilenav {
  display: none; }

#mobilenav.active {
  display: flex;
  padding-bottom: 14vw;
  padding-top: 12vw; }
  #mobilenav.active ul {
    margin: auto; }
    #mobilenav.active ul li {
      list-style: none; }
      #mobilenav.active ul li a {
        font-size: 5.3vw;
        text-align: center;
        padding: 9vw 0; }

.description {
  flex-basis: 50%;
  display: flex;
  flex-direction: column;
  padding-left: 15%; }
  .description p {
    width: 23vw;
    margin: 4vw auto 4vw;
    color: white;
    font-weight: 400;
    font-size: 2vw;
    line-height: 1.4; }
  .description a {
    width: 14vw;
    margin: 0vw auto 5vw;
    padding: 1vw 0vw;
    font-size: 1.3vw;
    color: black;
    background: #D3AF3C;
    text-align: center;
    font-weight: 300; }
    .description a:hover {
      text-decoration: none;
      color: black; }

.img-banner {
  flex-basis: 50%;
  position: relative; }
  .img-banner img {
    position: absolute;
    left: 10vw;
    z-index: 2;
    bottom: -0.8vw;
    width: 28vw; }

.identidad {
  background: #252525;
  padding: 25vw 10vw 12vw;
  position: relative; }

.img-texto-somos {
  display: flex; }
  .img-texto-somos img {
    width: 35vw;
    height: 100%; }

.somos {
  width: 50%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 0vw 2vw;
  position: relative; }
  .somos h2 {
    width: 100%;
    color: #D3AF3C;
    text-align: left;
    font-weight: 400;
    font-size: 2vw; }
  .somos p {
    width: 100%;
    color: white;
    text-align: left;
    font-weight: 200;
    font-size: 1.2vw; }

.valores {
  display: flex;
  flex-direction: column;
  padding: 9vw 0 6vw; }
  .valores h4 {
    color: white;
    font-weight: 300;
    padding-bottom: 2vw;
    font-size: 1.9vw; }
  .valores p {
    color: white;
    font-weight: 200;
    font-size: 1.2vw; }

.valores-img {
  position: absolute;
  bottom: -6vw; }
  .valores-img img {
    margin-right: 2.5vw;
    width: 13vw; }

.blanco-unicos {
  position: relative;
  padding-bottom: 12vw;
}

.unicos {
  padding: 15vw;
  padding-bottom: 8vw;
  position: relative; }
  .unicos h3 {
    font-weight: 400;
    padding: 4vw 0;
    font-size: 2.1vw; }
  .unicos p {
    font-weight: 200;
    font-size: 1.2vw; }
  .unicos img {
    padding: 0 0 4vw;
    width: 68vw; }

.triada-texto {
  display: flex;
  justify-content: space-between;
  padding: 0vw 0 3vw;
  list-style-type: none; }
  .triada-texto p {
    width: 22vw;
    font-size: 1.2vw;
    font-weight: 200; }

.proceso-div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 3vw 11vw;
  background: rgba(210, 210, 210, 0.2);
  min-height: 100%; }
  .proceso-div h3 {
    font-size: 2.1vw;
    margin: auto;
    text-align: left; }
  .proceso-div h5 {
    font-size: 1.4vw;
    margin-top: 2vw;
    margin-bottom: 0; }
  .proceso-div div.item {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: 3vw;
    text-align: center;
    align-self: stretch;
    flex-basis: 25%; }
    .proceso-div div.item p {
      font-size: 1.1vw;
      font-weight: 200;
      margin-top: 0.3vw; }
    .proceso-div div.item img {
      width: 2.5vw; }

#text-process {
  height: 12vw;
  display: flex;
  flex-direction: column; }

#proceso, #entrevista, #analisis {
  min-height: 105% !important;
  border-right: 1px solid #D2D2D2;
  border-bottom: 1px solid #D2D2D2; }

#diseno {
  border-bottom: 1px solid #D2D2D2; }

#cuestionario, #validacion, #app {
  border-right: 1px solid #D2D2D2; }

.buena-practica {
  width: 65%;
  background: #D2AE3B;
  padding: 4vw 5vw;
  text-align: center;
  position: absolute;
  top: -13vw;
  left: 50%;
  margin-left: -32.5%;
  z-index: 2; }
  .buena-practica h3 {
    width: 35vw;
    margin: auto;
    margin-bottom: 3vw;
    font-size: 2.1vw; }
  .buena-practica p {
    font-weight: 200;
    font-size: 1.2vw; }

.ventajas {
  background: #252525;
  padding: 12vw 18vw 12vw;
}
  .ventajas h3 {
    color: #D3AF3C;
    margin-bottom: 3vw;
    font-size: 2.1vw; }
  .ventajas p {
    color: white;
    font-weight: 200;
    width: 40%;
    font-size: 1.2vw; }

.texto-ventajas {
  display: flex;
  justify-content: space-between; }

.nosotros {
  display: flex;
  justify-content: space-between;
  padding: 14vw 13vw; }
  .nosotros .text {
    margin-top: 5vw; }
    .nosotros .text h3 {
      font-size: 2.1vw; }
  .nosotros div {
    flex-basis: 31%; }
  .nosotros p {
    font-weight: 200;
    margin: auto;
    margin-top: 3vw;
    font-size: 1.2vw; }

.img-libros {
  display: flex; }
  .img-libros img {
    margin: auto;
    width: 21vw;
    height: 100%; }

.contacto {
  padding: 8vw 15vw;
  padding-bottom: 0;
  background-image: linear-gradient(179deg, #07979D 0%, #012C39 72%, #252525 100%); }

.info-form {
  display: flex;
  justify-content: space-between; }
  .info-form .formulario, .info-form .informacion {
    flex-basis: 45%; }
  .info-form h3 {
    color: #D3AF3C;
    margin-bottom: 2vw;
    font-size: 2.1vw; }
  .info-form p {
    color: white;
    font-weight: 200;
    font-size: 1.2vw;
    margin-bottom: 4vw; }
  .info-form img {
    width: 30vw;
    margin: auto; }

.formulario {
  margin-top: 4vw; }

form {
  display: flex;
  flex-direction: column;
  justify-content: space-between; }
  form input {
    height: 4.5vw;
    margin: 0.7vw 0;
    padding: 0.8vw;
    border: none; }
  form input#msj {
    padding-bottom: 11vw;
    padding-top: 2vw; }
  form input::placeholder {
    font-weight: 200;
    font-size: 1.2vw; }
  form input[type=submit] {
    width: 50%;
    margin: 2vw 0 0 auto;
    padding: 1.3vw 0vw;
    font-size: 1.3vw;
    color: black;
    background: #D3AF3C;
    text-align: center;
    font-weight: 300;
    border: none !important; }

form.send {
  display: none; }

#send.active {
  display: flex;
  background: white;
  height: 100%; }
  #send.active img {
    width: 10vw;
    margin: auto; }

.footer {
  border-top: solid 3px #D3AF2B;
  margin-top: 4vw;
  padding-bottom: 1.5vw; }
  .footer p {
    font-size: 0.7vw;
    margin-top: 1vw;
    margin-bottom: 0;
    color: white;
    font-weight: 200;
    text-align: center; }
    .footer p a {
      color: white;
      text-decoration: none;
      font-weight: 600; }
  .footer img {
    width: 8vw; }

.img-aloux {
  width: 8vw;
  margin: auto;
  margin-top: 2vw;
  margin-right: 0; }

@media only screen and (max-width: 505px) {
  img#mobile {
    display: block; }
  #send.active {
    height: 90vw; }
    #send.active img {
      width: 30vw; }
  p#aviso {
    font-size: 5.2vw;
    padding-bottom: 6vw; }
  .info-banner.aviso {
    height: 60vw;
    padding-bottom: 0; }
  .texto-aviso {
    padding: 15vw 5vw; }
    .texto-aviso p {
      font-size: 4vw; }
  nav.navbar {
    padding: 6vw 10vw 6vw; }
  ul.nav {
    display: none; }
  .navbar-brand img {
    width: 35vw; }
  #nav-icon {
    display: block; }
  .info-banner {
    display: flex;
    flex-direction: column;
    padding-bottom: 45vw;
    position: relative;
    height: 750px;
  }
  .img-banner {
    padding-bottom: 20vw;
  }
    .img-banner img {
      display: none; }
    .img-banner img#mobile {
      width: 80vw; }
  .description {
    padding: 0 7vw; }
    .description p {
      width: 100%;
      font-size: 5.5vw;
      margin: 4vw auto 8vw; }
    .description a {
      width: 40vw;
      margin: 0vw auto 8vw;
      padding: 4vw 0vw;
      font-size: 4.5vw; }
  .identidad {
    padding: 70vw 9vw;
    padding-bottom: 65vw; }
  .img-texto-somos {
    display: flex;
    flex-direction: column; }
    .img-texto-somos img {
      display: none; }
    .img-texto-somos img#mobile {
      order: 2;
      width: 80vw; }
  .somos {
    width: 100%; }
    .somos h2 {
      font-size: 7vw; }
    .somos p {
      font-size: 4vw;
      padding-top: 10vw; }
  .valores h4 {
    font-size: 6vw; }
  .valores p {
    font-size: 4vw; }
  .valores-img {
    bottom: -16vw; }
    .valores-img img {
      display: none; }
    .valores-img img#mobile {
      width: 82vw; }
  .blanco-unicos {
    padding-top: 27vw;
    padding-bottom: 70vw; }
  .unicos {
    padding: 0;
    padding-bottom: 8vw;
    position: relative; }
    .unicos h3 {
      font-size: 7vw;
      text-align: center; }
    .unicos p {
      font-size: 4vw;
      padding: 5vw; }
    .unicos img {
      width: 100%;
      margin-bottom: 4vw; }
  .triada-texto {
    display: flex;
    flex-direction: column;
    padding: 0; }
    .triada-texto p {
      width: 90%;
      font-size: 4vw;
      margin: auto;
      display: flex;
      align-items: baseline;
      margin-bottom: 3vw; }
    .triada-texto p::before {
      content: "\2022";
      color: #D3AF3C;
      margin-right: 15px;
      font-size: 5vw; }
  .proceso-div {
    display: flex;
    justify-content: space-between;
    padding: 4vw 2vw;
    background: rgba(210, 210, 210, 0.2);
    min-height: 100%; }
    .proceso-div div.item {
      flex-basis: 40%;
      flex-grow: 1;
      padding: 10vw 4vw 8vw 4vw;
      display: flex;
      flex-direction: column;
      justify-content: space-between; }
      .proceso-div div.item p {
        font-size: 3.7vw;
        font-weight: 200;
        margin: auto; }
      .proceso-div div.item img {
        width: 7.5vw;
        margin: 0 auto; }
    .proceso-div h3 {
      font-size: 7.5vw;
      text-align: left;
      margin: auto; }
    .proceso-div h5 {
      font-size: 4.3vw;
      margin-top: 8vw; }
  #text-process {
    height: 45vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between; }
  #proceso, #cuestionario, #analisis {
    min-height: 105% !important;
    border-right: 1px solid #D2D2D2;
    border-bottom: 1px solid #D2D2D2; }
  #diseno, #entrevista, #validacion {
    border-bottom: 1px solid #D2D2D2;
    border-right: 0; }
  #app {
    border-right: 1px solid #D2D2D2; }
  .buena-practica {
    width: 90%;
    left: 50%;
    margin-left: -45%;
    top: -32vw;
    padding: 8vw 2vw; 
    z-index: 1;
  }
    .buena-practica h3 {
      width: 80vw;
      font-size: 6vw; }
    .buena-practica p {
      font-size: 4vw; }
  .ventajas {
    padding: 50vw 6vw 20vw; }
    .ventajas h3 {
      font-size: 7.5vw;
      margin-bottom: 10vw; }
    .ventajas p {
      color: white;
      font-weight: 200;
      width: 100%;
      font-size: 4vw; }
  .texto-ventajas {
    display: flex;
    flex-direction: column; }
  .nosotros {
    flex-direction: column;
    padding: 14vw 13vw; }
    .nosotros p {
      font-size: 4vw; }
    .nosotros .text h3 {
      font-size: 7vw; }
  .img-libros {
    display: flex; }
    .img-libros img {
      display: none; }
    .img-libros img#mobile {
      width: 76vw;
      margin: 20vw 0; }
  .contacto {
    padding: 8vw 0vw 3vw; }
  .info-form {
    flex-direction: column;
    padding: 0 6vw; }
    .info-form .formulario, .info-form .informacion {
      flex-basis: 45%; }
    .info-form h3 {
      font-size: 7vw; }
    .info-form p {
      font-size: 4vw; }
    .info-form img {
      width: 87vw; }
  .formulario {
    margin-top: 4vw; }
  form input {
    height: 15.5vw;
    margin: 2vw 0; }
  form input#msj {
    padding-bottom: 35vw;
    padding-top: 5vw;
    padding-left: 5px; }
  form input::placeholder {
    font-weight: 200;
    font-size: 4vw; }
  form input[type=submit] {
    width: 46%;
    font-size: 4vw; }
  .footer {
    margin-top: 10vw; }
    .footer p {
      font-size: 1.5vw;
      width: 90%;
      margin: auto;
      padding-top: 3vw; }
    .footer img {
      width: 25vw; }
  .img-aloux {
    width: 20vw;
    margin-right: 8vw; } }

@media only screen and (min-width: 506px) and (max-width: 870px) {
  nav.navbar {
    padding: 3vw 5vw 6vw; }
    nav.navbar a {
      font-size: 1.6vw; }
  .navbar-brand img {
    width: 16vw; }
  .description {
    padding: 0 7vw; }
    .description p {
      width: 24vw;
      font-size: 2.1vw; }
    .description a {
      font-size: 2vw; }
  .somos h2 {
    font-size: 3vw; }
  .somos p {
    font-size: 1.6vw; }
  .img-texto-somos img {
    width: 39vw; }
  .valores h4 {
    font-size: 2.5vw; }
  .valores p {
    font-size: 1.6vw; }
  .valores-img img {
    margin-right: 1.5vw;
    width: 15vw; }
  .unicos {
    padding: 15vw;
    padding-bottom: 8vw;
    position: relative; }
    .unicos h3 {
      font-size: 3vw; }
    .unicos p {
      font-size: 1.6vw; }
    .unicos img {
      padding: 0 0 4vw;
      width: 68vw; }
  .triada-texto p {
    width: 21vw;
    font-size: 1.6vw; }
  .proceso-div {
    padding: 3vw 2vw; }
    .proceso-div h3 {
      font-size: 2.6vw; }
    .proceso-div h5 {
      font-size: 1.9vw; }
    .proceso-div div.item p {
      font-size: 1.5vw; }
    .proceso-div div.item img {
      width: 3.5vw; }
  .buena-practica h3 {
    width: 45vw;
    font-size: 3vw; }
  .buena-practica p {
    font-size: 1.6vw; }
  .ventajas {
    padding: 19vw 18vw 9vw; }
    .ventajas h3 {
      font-size: 3vw; }
    .ventajas p {
      width: 44%;
      font-size: 1.6vw; }
  .nosotros {
    padding: 14vw 5vw; }
    .nosotros .text {
      margin-top: 5vw; }
      .nosotros .text h3 {
        font-size: 3vw; }
    .nosotros div {
      flex-basis: 33%; }
    .nosotros p {
      margin-top: 2.5vw;
      font-size: 1.6vw; }
  .contacto {
    padding: 8vw 9vw 0; }
  .info-form h3 {
    font-size: 3vw; }
  .info-form p {
    font-size: 1.6vw;
    margin-bottom: 4vw; }
  .info-form img {
    width: 37vw; }
  form input {
    height: 6.5vw;
    margin: 0.7vw 0;
    padding: 0.8vw; }
  form input#msj {
    height: 14vw; }
  form input::placeholder {
    font-weight: 200;
    font-size: 1.6vw; }
  form input[type=submit] {
    font-size: 1.6vw; }
  .footer {
    border-top: solid 3px #D3AF2B;
    margin-top: 4vw;
    padding-bottom: 1.5vw; }
    .footer p {
      font-size: 1vw; }
    .footer img {
      width: 12vw; }
  .img-aloux {
    width: 8vw;
    margin: auto;
    margin-top: 2vw;
    margin-right: 0; } }