/* ==========================================================================
   Author's custom styles
   ========================================================================== */
@font-face {
  font-family: 'BryantPro-Regular';
  src: url('../fonts/BryantPro-Regular.eot');
  src: url('../fonts/BryantPro-Regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/BryantPro-Regular.woff') format('woff'),
    url('../fonts/BryantPro-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'BryantPro-Light';
  src: url('../fonts/BryantPro-Light.eot');
  src: url('../fonts/BryantPro-Light.eot?#iefix') format('embedded-opentype'),
    url('../fonts/BryantPro-Light.woff') format('woff'),
    url('../fonts/BryantPro-Light.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'BryantPro-Bold';
  src: url('../fonts/BryantPro-Bold.eot');
  src: url('../fonts/BryantPro-Bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/BryantPro-Bold.woff') format('woff'),
    url('../fonts/BryantPro-Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}



body {
  margin: 0;
  padding: 0;
  width: 100%;
  height:calc(100vh - 102px );
  font-family: Arial;
  font-size: 100%;
  background-position: center center;
  background: url(../images/background/bg-distrigo.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  /* background-color: #878787;*/
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-height: 1024px) {
  body{
    height: unset;
    flex-direction: column;
  }
   .home-pasos.paso-1, .home-pasos.paso-2, .home-pasos.paso-3{
    padding-top: 4rem;
    padding-bottom: 142px;
  }

}

@media (max-width: 991px) {
  body{
    flex-direction: column;
    height:calc(100vh - 171px );
  }
}

@media (max-width: 768px) {
  body{
    height: unset;
  }
}

/* ALTURAS EN MOBILE SCROLL O VH DEPENDIENDO DEL ALTO*/
  @media (min-height:820px) and (max-width: 768px) {
    .paso-2{
      height:calc(100vh - 171px );
    }
  }
  @media (min-height:840px) and (max-width: 768px) {
    .paso-3{
      height:calc(100vh - 171px );
    }
  }

@media (min-width: 1200px) {
  .container {
      width: 1200px;
  }
}

.paso-1{
  display: none;
}

.main-container-left p{
 font-size: 22px;
 line-height: 26.4px;
 color: #1D1D1B;
 margin-top: 4rem;
}

.main-container-left img{
  max-width: 53rem;
 }
 @media (max-width: 1200px) {
  .main-container-left img{
    max-width: 43rem;
   }
 }
 @media (max-width: 991px) {
  .main-container-left img{
    margin-top: 5rem;
   }
   .main-container-left p{
    font-size: 16px;
    margin-top: 3rem;
   }
   .main-container-right{
   margin-top: 3rem;
   margin-bottom: 3rem;
   }
 }

.main-container-right{
  display: flex;
  flex-direction: column;
  gap:2rem;
}

.main-container-right-caja{
  background-color: white;
  border: 2px solid white;
  border-radius: 3rem;
  border-bottom-left-radius: 0rem;
  -webkit-box-shadow: 0px 0px 12px -1px rgba(0,0,0,0.42);
  -moz-box-shadow: 0px 0px 12px -1px rgba(0,0,0,0.42);
  box-shadow: 0px 0px 12px -1px rgba(0,0,0,0.42);
  padding: 2rem 1rem;
  display: flex;
  position: relative;
 
  min-height: 141px;
}

.main-container-right-caja a{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

@media all and (max-width: 991px) {

  .main-container-right-caja{
    border: 2px solid #FF4B00;
    padding: 1rem;
  }
}

.flecha{
  position: absolute;
  bottom: 0;
  right: 0;
  margin-bottom: 1.5rem;
  margin-right: 2rem;
  opacity: 0;
  
}

.main-container-right-caja:hover{
  cursor: pointer;
  border: 2px solid #FF4B00;
}

@media all and (max-width: 991px) {
  .caja-mitad-1{
    width: 35%;
  
  }
}

.main-container-right-caja:hover .caja-mitad-1, .main-container-right-caja:hover .caja-mitad-2{
  opacity: 1;
}

.main-container-right-caja:hover .flecha{
  opacity: 1;
}

@media all and (max-width: 991px) {
  .main-container-right-caja .flecha{
    opacity: 1;
    max-width: 1rem;
  }
}

.caja-mitad-1{
  width: 40%;
  display: flex;
  justify-content: center;
  opacity: 0.5;

}

@media all and (max-width: 991px) {
  .caja-mitad-1{
    width: 35%;
  
  }
}

.caja-mitad-1 img{
  max-width: 17rem;
  min-width: 17rem;
}

@media (max-width: 1200px) {
  .caja-mitad-1 img{
    max-width: 14rem;
    min-width: 14rem;
  }
  
}

@media all and (max-width: 991px) {
  .caja-mitad-1{
    opacity: 1;
  }
  .caja-mitad-2{
    opacity: 1!important;
  }
  .caja-mitad-1 img{
    max-width: 10rem;
    min-width: 10rem;
  }
}

.caja-mitad-2{
  width: 60%;
  padding-left: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.5;
  transition-duration: .4s;
}

@media all and (max-width: 991px) {
  .caja-mitad-2{
    width: 65%;
  
  }
}

.caja-mitad-2 p{
  margin-bottom: 0px;
}

.caja-mitad-2 ul {
  padding-left: 2rem;
  margin-top: .5rem;
 }

.caja-mitad-2 ul li{
 font-size: 16px;
 color: #1D1D1B;
 line-height: 19px;
}

.caja-title{
  font-family: 'BryantPro-Bold', Helvetica, Arial, sans-serif;
  font-size: 16px;
  letter-spacing: 10px;
  color: #FF4B00;
  text-transform: uppercase;
}

@media all and (max-width: 991px) {
  .caja-title{
    font-size: 13px;
  }
  .caja-mitad-2 ul li{
    font-size: 12px;
   }
}

footer {
  background-repeat: no-repeat;
  background-position: center top;
  background-color: #1A1A18;
  margin: 0;
  padding: 20px 0;
  border-top: 2px solid #FF4B00;
  position: fixed;
  width: 100%;
  bottom: 0;
  height: 100px;
}

@media all and (max-width: 991px) {
  footer{
    height: 171px;
    width: 100%;
  }
  .footer-left{
    display: flex;
    justify-content: center;
    padding-top: 2rem;
  }
}

@media all and (max-width: 768px) {
  footer{
    height:unset;
  }

}

.footer-container{
  display: flex;
  align-items: center;
}

@media all and (max-width: 991px) {
  .footer-container{
      flex-direction: column;
  }
}

.footer-left{
  display: flex;
  justify-content: flex-start;
}

.footer-right{
  display: flex;
  justify-content: flex-end;
}

@media all and (max-width: 991px) {
  .footer-left img{
    margin-bottom: 2rem;
    width: 176px;
 }
  .footer-right{
    display: flex;
    justify-content: center;
  }
  .footer-right p{
    font-size: 12px!important;
  }
}

.footer-right p{
  color: white!important;
  font-size: 12px!important;
  margin-bottom: 0px;
  font-family: 'BryantPro-Regular', Helvetica, Arial, sans-serif !important;
}



/*paso 2*/

.paso-2{
 display: none;
} 


@media all and (max-width: 991px) {
    .paso-2 .main-container{
      gap: 2rem;
      display: flex;
      flex-direction: column;
      margin-bottom: 4rem;
    }
}

.paso-2-logo{
  display: flex;
  justify-content: center;
  margin-bottom: 7rem;
}

@media all and (max-height: 1024px) {
  .paso-2-logo{
    margin-top: 5rem;
  }
}

@media all and (max-width: 991px) {
  .paso-2-logo {
    margin-top: 5rem;
    margin-bottom: 0rem;
   }
  .paso-2-logo img{
   width: 85%;
  }
}

.caja-paso-2{
  background-color: white;
  border: 2px solid #FF4B00;
  height: 162px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 3rem;
  padding: 4rem;
  border-bottom-left-radius: 0rem;
}

.caja-paso-2 a{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

@media all and (max-width: 991px) {
  .caja-paso-2 {
    height: 90px;
    border-radius: 1rem;
    border-bottom-left-radius: 0rem;
  }
}

.caja-paso-2:hover{
  background-color: #FF4B00;
  border: 1px solid #FF4B00;
color: white;
}

.caja-paso-2 p{
  text-transform: uppercase;
  font-size: 2rem;
  margin-bottom: 0px;
  font-weight: 700;
}
.caja-paso-2 p br.mobile{
  display: none;
}
@media all and (max-width: 991px) {
  .caja-paso-2 p{
    font-size: 1.4rem;
  }
  .caja-paso-2 p br.desktop{
    display: none;
  }
  .caja-paso-2 p br.mobile{
    display: block;
  }
}

.next-white{
  display: none;
}

.caja-paso-2:hover .next-white{
  display: block!important;
}

.caja-paso-2:hover .next-red{
  display: none;
}

/* paso-3 login */

.paso-3{
  
} 

.paso-3 .paso-3-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 7rem;
}

@media all and (max-width: 991px) {
  .paso-3-logo {
    margin-top: 5rem;
    margin-bottom: 0rem;
   }
  .paso-3-logo img{
   width: 85%;
  }
}

.contenedor-caja-login{
  display: flex;
  justify-content: center;
  align-items: center;
}

@media all and (max-width:768px) {
  .contenedor-caja-login{
   margin-bottom: 5rem;
  }
}

.paso-3 .caja-login{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-radius: 2rem;
  border-bottom-left-radius: 0rem;
  padding: 2rem 2rem 4rem 2rem;
  background-color: white;
  border: 2px solid #FF4B00;
  width: 368px;
 
}
@media all and (max-width: 576px) {
  .paso-3 .caja-login{
    width: 90%;
   
  }
}


.paso-3 .caja-login-title{
  color: #1D1D1B;
  font-size: 20px;
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 1rem;
}

.paso-3 .caja-login-usuario{
  width: 100%;
  margin-top: 2rem;
}

.paso-3 .caja-login-contrasena{
  width: 100%;
  margin-top: 2rem;
}

.paso-3 .caja-login input{
  border-radius: 3rem;
  width: 100%;
  height: 50px;
  color: #7F7F7F;
  font-size: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #7F7F7F;
  width: 100%;
  text-align: center;
  letter-spacing: 2px;
}

.paso-3 .caja-login-pregunta{
  margin-top: 2.5rem;
}

.paso-3 .caja-login-pregunta a{
  color: #777777;
  font-size: 14px;
  text-decoration: underline;
}

.paso-3 .caja-login-cta{
  margin-top: 3.5rem;
  width: 100%;
}

.paso-3 .caja-login-cta input{
  background-color: #FF4B00;
  border: 2px solid #FF4B00;
  color: white;
  font-size: 18px;
  text-transform: uppercase;
  width: 100%;
  height: 57px;
  transition-duration: .3s;
  border-radius: 3rem;
}

.paso-3 .caja-login-cta input:hover{
  background-color: #be3a12;
  border: 2px solid #be3a12;
  cursor: pointer;
}

.paso-3 .modal-recuperar-contrasena .modal-body{
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding-bottom: 3rem;
}

.paso-3 .modal-recuperar-contrasena p{
  color: #1D1D1B;
  font-size: 14px;
  text-align: center;
}

.paso-3 .modal-recuperar-contrasena .caja-login-email{
  margin-top: 1rem;
  display: flex;
  justify-content: center;
}
.paso-3 .modal-recuperar-contrasena .caja-login-email input{
  border-radius: 3rem;
  width: 100%;
  height: 50px;
  color: #7F7F7F;
  font-size: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #7F7F7F;
  max-width: 280px;
  text-align: center;
  letter-spacing: 2px;
}

.paso-3 .modal-recuperar-contrasena .caja-login-cta{
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

.paso-3 .modal-recuperar-contrasena .caja-login-cta input{
  max-width: 280px;
 
}

.home-pasos {
  display: none;
}
.home-pasos.visible {
  display: block;
}



h1 {
  font-family: 'BryantPro-Bold', Helvetica, Arial, sans-serif;
  font-size: 40px;
  color: #ffffff;
  margin-top: 0;
  text-align: center;
  padding-top: 40px;
}

h1 strong {
  font-family: 'BryantPro-Regular', Helvetica, Arial, sans-serif;
  font-size: 80px;
  display: block;
  color: #e84e0f;
  font-weight: 100;
}

a.disabled {
  cursor: not-allowed;
  text-decoration: none;
}

a.disabled img {
  opacity: 0.5;
}

a.disabled:after {
  content: "En actualización";
  background-color: #FF4B00;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
}

@media all and (max-width: 991px) {
  
  .box_punto{
    margin-bottom: 3rem;
  }
  .box_punto_logos{
    margin-bottom: 3rem;
  }
  
  .distrigo-challenges{
    max-width: 16rem;
  }
  .home-animaciones .items{
    display: flex;
    flex-direction: column;
  }
  .home-animaciones .items .item{
    width: 90%;
    margin: 0 auto;
  }
}

@media all and (max-width: 768px) {
  h1 {
    font-family: 'BryantPro-Regular', Helvetica, Arial, sans-serif;
    font-size: 15px;
    color: #ffffff;
  }

  h1 strong {
    font-family: 'BryantPro-Bold', Helvetica, Arial, sans-serif;
    font-size: 25px;
    display: block;
  }

  .text_body {
    min-height: auto;
  }
  header{
    height: unset;
  }
  
  header .titulo-s img{
    margin-top: 2rem;
    max-width: 84%;
  }
  .titulo{
    font-size: 24px;
  }
  .box_punto .mitad:nth-child(1){
    padding-top: unset;
  }
  section {
  padding: unset;
 /*  background-color: #ffffff; */
  }
  .intro {
    font-size: 17px;
    font-weight: normal;
  }
  .text_body a {
 
    bottom: 15px;
  
  }
.text_body2 a {
 
    bottom: -15px;
  
  }
  
  .box_punto.punto_largo .mitad:nth-child(1) {
    height: 60%;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .box_punto.punto_largo .mitad:nth-child(2) {
    height: 40%;
  }

  .box_punto.punto_largo .text_body2{
    padding: unset; 
    margin: unset;
  }
  footer {

    position: unset;

  }
}