/*HERO*/
.hero{
  width: 100%;
  height: 100vh;
  background-color: var(--claro1);
}

.info_header{
  position: absolute;
  left: 0px;
  width: 190px;
  height: 100vh;
  background-color: var(--claro1);
}

.logo_header{
  position: relative;
  width: 100%;
  padding: 25px;
}

.info_center{
  height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  justify-content: end;
}

.linea{
  height: 5vmin;
  width: 1px;
  margin: 15px auto 0;
  background-color: #646464;
}
.social-list .fa {
  font-size: 2.6vmin;
  color: #606060;
}
.social-list {
  /* margin-bottom: 3.5vmin; */
  text-align: center;
}
.social-list li {
  /* margin-top: 3.8vmin; */
}
.social-list li>a {
  text-decoration: none;
}
ul {
  list-style: none;
  padding-left: 0;
}

.vertical-panel-title {
  font-family: 'montserratsemibold';
  font-size: 1.1em;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .7em;
  position: relative;
  left: -6px;
  margin: 0 auto;
  width: 1px;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

.cp{
  color:#ffffff;
  font-size: 30px;
  font-family: 'Oswald', sans-serif;
  font-weight:400;
  letter-spacing: 5px;
  text-transform: uppercase;

}

.cp2{
  color:#ffffff;
  font-size: 18px;

}


.slide-title{
  color:#ffffff;
  font-size: 30px;
  font-weight: bold;

}


/*Por_que*/
#por_que{
  background-color: var(--claro1);
}

.icon_x{
  width: 90px;
}

#socios{
  position: relative;
  width: 100%;
  padding: 30px 0px 30px 0px;
}

.logo_socio{
  width: 100px;
  margin: 0 auto;
  filter:invert(.5);
}

.cuadro_conten{
  background-color:rgba(255,255,255,0.5);
  height: 500px;
}
.fondo_invercion{
  background-image: url(../img/Fraiche_garatia_inversion_color.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.fondo_comenzar{
  background-image: url(../img/Fraiche_como_comenzar_light.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 50px;
}
.fondo_comenzar2{
  background-image: url(../img/Fraiche_como_comenzar_light.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 50px;
}

.cuadro_encima{
  position: relative;
  width: 130%;
  padding: 80px 40px 80px 40px;
  background-image: url(../img/Fraiche_garantia_tulipan.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  z-index: 999;
}

.recarga_derecha{
  left: -30%;
}

/**/
/**/
#exito_fraiche{
  background-color: var(--blanco);
}

.img_indicador{
  width: 120px;
  filter: invert(.8);
}


/**/
#callTo{
  background-color:var(--claro1);
}

.conten_flex_uno{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}


.text-parallax-content {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 14em;
  line-height: 1;
  overflow: hidden;
  margin-bottom: 0;
  background-color:var(--claro1);
  color: var(--bscuro1);
  mix-blend-mode: lighten;
  -ms-mix-blend-mode: lighten;
}

.text-info{
  font-size: 18px;
  color:#ffffff!important;
  display: flex;
  flex-direction: column;
  justify-content: center;

}

.text-info>strong{
  color:#2cbbc4;
}


.conten_numero{
  background-color: #ffffff;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap:20px;
  min-height: 188px;
}

.numero{
  color:#ffffff;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  font-weight: bold;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#estadistica{
  background-color: var(--bscuro2);
  background-image: url("../img/Fraiche_en_numeros.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
#sec_num{
  height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.flex_nueros{
  position:relative;
  display: flex;
  justify-content: center;
  gap:45px

}
.item_n{
  position:relative;
  width: 100px;
  height: 100px;
  font-size: 2.3em;
  font-weight: 300;
  letter-spacing: 1px;
  background-color:var(--bscuro1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-right: 0px;
  opacity: 0;

}

.subitem{
  position: absolute;
  width: 200%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color:#000000;
  opacity: 0;
}

.sub_bottom{
  margin-top: 0px;
  min-height: 106px;
  display: flex;
  justify-content: flex-start;
}
.sub_Top{
  margin-top: 0px;
  min-height: 128px;
  display: flex;
  justify-content: end;

}

.anima_abajo{
  animation: anima_botom 2s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
}

.anima_arriba{
  animation: anima_top 2s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

.pitem{
  margin: 0px;
  font-size: .4em;
}

.title_item{
  font-weight: 500;

}

.linea_item{
  height: 40px;
  width: 1px;
  background-color: #fc2a68;
}

.anima_n1{
  left: -130px;
  animation: fly-ball0 2s;
  animation-fill-mode: forwards;
}
.anima_n2{
  left: -130px;
  animation: fly-ball 2s;
  animation-fill-mode: forwards;
}
.anima_n3{
  left: -260px;
  animation: fly-ball2 2s;
  animation-fill-mode: forwards;
}
.anima_n4{
  left: -390px;
  animation: fly-ball3 2s;
  animation-fill-mode: forwards;
}
.anima_n5{
  left: -520px;
  animation: fly-ball4 2s;
  animation-fill-mode: forwards;
}
.anima_n6{
  left: -650px;
  animation: fly-ball5 2s;
  animation-fill-mode: forwards;
}

.modal-footer{
  display: block;
}

.bot-ok{
  background-color: var(--turquesa);
  border: none;
  color:#ffffff
}

.info_extra{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #272727;
  height: 280px;
}

.info_extra>h3{
  font-size: 1.3em;
  color:#fff; 
}






@keyframes fly-ball0 {
  100% {
    transform: translateX(130px) translateY(0px);
    }
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
}
@keyframes fly-ball {
  100% {
    transform: translateX(130px) translateY(0px);
    }
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
}
@keyframes fly-ball2 {
  100% {
    transform: translateX(260px) translateY(0px);
    }
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
}
@keyframes fly-ball3 {
  100% {
    transform: translateX(390px) translateY(0px);
    }
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
}
@keyframes fly-ball4 {
  100% {
    transform: translateX(520px) translateY(0px);
    }
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
}
@keyframes fly-ball5 {
  100% {
    transform: translateX(650px) translateY(0px);
    }
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes anima_botom {
  100% {
    transform: translateX(0px) translateY(103px);
    }
    0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
   }
}

@keyframes anima_top {
  100% {
    transform: translateX(0px) translateY(-113px);
    }
    0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
   }
}

/*Comenzar*/
#requisitos{
  background-color: var(--claro1);
}

.conten_pasos{
  margin-bottom: 17px;
  display: flex;
  align-items:center;
  gap:10px;
}

.numeracion{
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: invert(1);
}



/*Seccion  formulario*/
#solicitar{
  background-color: var(--bscuro1);
  background-image: url(../img/Fraiche_Contactanos.png);
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
}

.form-control,.form-select {
  background-color:var(--blanco);
  border:none;
}

.form-control:focus {
  background-color: var(--blanco);
  border: none;
}
.form-floating {
  color: #787878;
}

/*Respopnsive*/
@media (min-width: 992px) {

}


@media (max-width: 767.98px) {
  .cuadro_encima{
    width: 100%;
  }

  #estadistica{
    display: none;
  }

  /*Slider*/
  .info_header{
    width: 90px;
    background-color: transparent;
  }

  .vertical-panel-title{
    letter-spacing: 7px;
  }

  .social-list .fa {
    font-size: 1em;
  }

  .cp{
    font-size: 1.5em!important;
    letter-spacing: normal;
    margin-bottom: 40px!important;
  }
  .cp2{
    max-width: 100% !important;
    font-size: 1.2em!important;
    letter-spacing: normal;
    margin-top: 50px!important;
    white-space:break-spaces!important;
    line-height: 20px !important;
    height: 50px;
  }

  .cpB{
    width: 70%!important;
    height: 35px;
    font-size: 14px!important;
    display: flex;
    align-items: center;
    justify-content: center;
    top:410px!important;

  }

  .info_header{
    display: none;
  }




  /*Por que Fraiche*/
  .icon_x {
    width: 70px;
  }

  .logo_socio {
    width: 70px;
  }

  .cuadro_encima {
    padding: 40px 20px 40px 20px;
  }
  .img_indicador {
    width: 100px;
  }
  .cuadro_conten {
    height: 350px;
  }

  .text-parallax-content {
    font-size: 10em;
  }

  /*Requizito COmenzar*/
  .fondo_comenzar{
    height: 600px;
  }

  .fondo_comenzar2{
    height: 450px;
  }

  .recarga_derecha {
    left: auto;
  }



}


.progress {
  background: rgba(0,0,0,0.1);
  justify-content: flex-start;
  border-radius: 100px;
  align-items: center;
  position: relative;
  display: flex;
}

.progress-value {
  box-shadow: 0 10px 40px -10px #fff;
  border-radius: 100px 0px 0px 100px;
  background:var(--turquesa);
  height: 30px;
  width: 0;
}

.porciento_50{
  animation: anima_50 3s normal forwards;
  animation-delay: 700ms;
}
.porciento_95{
  animation: anima_95 3s normal forwards;
  animation-delay: 700ms;
}


@keyframes anima_50{
  0% { width: 0; }
  100% { width: 50%; }
}

@keyframes anima_95{
  0% { width: 0; }
  100% { width: 95%; }
}




@media (max-height: 922px) {
  .vertical-panel-title{
    font-size: .8em;
  }
}

@media (max-height: 767.98px) {
  .vertical-panel-title{
    font-size: .5em;
  }
}

/*Imput type rango*/

.mi_label{
  color:#ffffff!important;
}


#output{
  display: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  background-color: #040404;
  -webkit-box-shadow: 0px 1px 26px 10px var(--turquesa);
  -moz-box-shadow: 0px 1px 26px 10px var(--turquesa));
  box-shadow: 0px 1px 26px 10px var(--turquesa);
  height: 1.5rem;
  width: 1.5rem;
  border-radius: 50%;
}

.inputDiv {
  width: 100%;
  display:block;
  margin: 0px auto;
  color:#aaa;
  position:relative;
}
.output{
  display:inline-block;
}

input[type='range'] {
  display: inline-block;
  width: 100%;
}

input[type='range']:focus {
  outline: none;
}

input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]::-webkit-slider-thumb {
  background-color: #ffffff;
  width: 20px;
  height: 20px;
  border: 3px solid var(--turquesa);
  border-radius: 50%;
  margin-top: -9px;
}

input[type=range]::-moz-range-thumb {
  background-color: #ffffff;
  width: 15px;
  height: 15px;
  border: 3px solid var(--turquesa);
  border-radius: 50%;
}

input[type=range]::-ms-thumb {
  background-color: #ffffff;
  width: 20px;
  height: 20px;
  border: 3px solid var(--turquesa);
  border-radius: 50%;
}

input[type=range]::-webkit-slider-runnable-track {
  background-color: #777;
  height: 3px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  outline: none;
}

input[type=range]::-moz-range-track {
  background-color: #777;
  height: 3px;
}

input[type=range]::-ms-track {
  background-color: #777;
  height: 3px;
}

input[type=range]::-ms-fill-lower {
  background-color: HotPink
}

input[type=range]::-ms-fill-upper {
  background-color: black;
}