html {
    scroll-behavior: smooth;
  }
  .top{
      background-size: cover;
  }
  .info{
      padding-bottom: 50px;
      background: -moz-linear-gradient(top,  #d1d5de 0%, #f4f4f4 40%,#f4f4f4 100%); /* FF3.6-15 */
      background: -webkit-linear-gradient(top,  #d1d5de 0%,#f4f4f4 40%,#f4f4f4 100%); /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to bottom,  #d1d5de 0%,#f4f4f4 40%,#f4f4f4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1d5de', endColorstr='#f4f4f4',GradientType=0 ); /* IE6-9 */
      padding: 50px 0 50px;
     position: relative;
      }
  #contacto{
      background: #E6EAEE;
      padding: 80px 0 80px;
     position: relative;
      }
  .formulario{
      background: #ffffff;
      padding: 30px 40px;
  }
  label{
      text-transform: uppercase;
      letter-spacing: 0px;
      font-size: 12px;
      margin: 0;
  }
  label small{
    text-transform: none;

}
  .form-control{
      border-radius: 0;
      border: solid 1px #d7d7d7;
      background: #ecedef;
      font-size: 14px;
      padding: 8px 10px;
  }
  
  .msj{
      width: 100%;
      display: none;
  }
  .loading{
      width: 100%;
      height: 100%;
      background: rgba(1, 12, 44,.8);
      position: absolute;
      left: 0;
      top: 0;
      color: #fff;
      border-radius: 10px;
      z-index: 1;
  }
  .loading .content h4{
      font-size: 22px;
      font-weight: 600;
  }
  .loading .content{
      width: 300px;
      text-align: center;
  }
  .loaded{
      width: 100%;
      height: 100%;
      background: rgba(1, 12, 44,.8);
      position: absolute;
      left: 0;
      top: 0;
      color: #fff;
      border-radius: 10px;
      z-index: 1;
  }
  .loaded .content h4{
      font-size: 22px;
      font-weight: 600;
  }
  .loaded .content{
      width: 300px;
      text-align: center;
  }
  .loaded-icon{
      width: 70px;
      border-radius: 50px;
      margin-bottom: 10px;
  }
  .center-all{
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
  }
  .loading-icon{
      width: 50px;
      border-radius: 50px;
      opacity: .7;
      border: solid 8px #3e83ff;
      margin-bottom: 10px;
  }
  .card{
      height: 100%;
      text-align: center;
      padding: 30px;
      border: none;
      border-radius: 15px;
      margin: 5px auto;
      background-position:  right bottom !important;
      background-size: 60%;
      max-width: 340px;
      background-repeat: no-repeat;
  }
  .card img{
      width: 80px;
      display: table;
      margin: 0 auto 20px;
  }
  .card h4{
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 20px;
  }
  .card ol{
      text-align: left;
      padding-left: 15px;
      font-size: 13px;
      margin: 0;
  }
  .card ol li {
    font-weight: 600;
    padding-bottom: 10px;
  }
  .card ol li span{
      font-weight: 400;
      color: #141B38;
  }
  .bases{
      background: #D6D8E0;
      padding: 80px 0;
  }
  .bases-list li{
      font-weight: 800;
      color: #5FA045;
      padding-bottom: 4px;
  }
  .bases-list li span{
      font-weight: 400;
      color: #000;
      font-size: 14px;
      margin-left: 10px;
      
  }
  
  .card-gris{
      background: #C0C2CB;
      color: #212529;
  }
  .form-check-label{
      text-transform: none;
      letter-spacing: 1;
  }
  .btn-tooltip{
      padding: 0;
      background: none;
  }
  
  /* Add this attribute to the element that needs a tooltip */
  [data-tooltip] {
    position: relative;
    z-index: 2;
    cursor: pointer;
  }
  
  /* Hide the tooltip content by default */
  [data-tooltip]:before,
  [data-tooltip]:after {
    visibility: hidden;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    pointer-events: none;
  }
  
  /* Position tooltip above the element */
  [data-tooltip]:before {
    position: absolute;
    bottom: 150%;
    left: 50%;
    margin-bottom: 5px;
    margin-left: -280px;
    padding: 7px;
    width: 320px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: #010C2C;
    color: #ffffff;
    content: attr(data-tooltip);
    text-align: center;
    font-size: 13px;
    line-height: 1.2;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, .3);
    text-transform: none;
  letter-spacing: 0;
  }
  
  /* Triangle hack to make tooltip look like a speech bubble */
  [data-tooltip]:after {
    position: absolute;
    bottom: 150%;
    left: 50%;
    margin-left: -5px;
    width: 0;
    border-top: 5px solid #010C2C;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    content: " ";
    font-size: 0;
    line-height: 0;
  }
  
  /* Show tooltip content on hover */
  [data-tooltip]:hover:before,
  [data-tooltip]:hover:after {
    visibility: visible;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
  }
  .form-check-label{
      letter-spacing: 0;
      text-transform: none;
  }
  .vericaltext{
      width:1px;
      word-wrap: break-word;
      font-family: monospace; /* this is just for good looks */
      white-space: pre-wrap;/* this is for displaying whitespaces including Firefox */
      line-height: 1;
      text-transform: uppercase;
      font-size: 13px;
      font-family: 'Montserrat', sans-serif;
      text-align: center;
      font-weight: 600;
  }
  .section-form{
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  }
  .form-title{
      width: 40px;
      margin-right: 20px;
      background: gray;
      height: 95%;
      padding: 15px;
  }
  .form-section{
      width: calc(100% - 60px);
      position: relative;
  }
  .letrota{
      font-weight: 800;
      font-size: 35px;
      margin: 0 0 11px 5px;
      color: #5fa045;
      background: #94de1d;
      width: 50px;
      text-align: center;
      height: 50px;
      border-radius: 50%;
  }
  .letrota2{
      font-weight: 800;
      font-size: 35px;
      margin: 0 0 11px 5px;
      color: #5fa045;
      background: #94de1d;
      width: 50px;
      text-align: center;
      height: 50px;
      border-radius: 50%;
  }
  .texto-etapa{
      width: calc( 100% - 60px);
  }
  
  .landing{
      background: #d1d5de;
      padding: 80px 0;
  }
  .form-23{
      background-color: #C0C2CB;
      padding: 15px;
      border-radius: 13px;
  }
  .success{
      display: none;
      text-align: center;
      background: #84c493;
      margin-top: 10px;
      padding: 10px 0 1px;
      border-radius: 5px;
      color: #0b4f1a;
      line-height: 0.5;
  }
  .success h4{
      font-weight: 600;
      font-size: 20px;
  }
  .enviando {
      display: none;
    text-align: center;
    background: #3e83ff;
    margin-top: 10px;
    padding: 10px 0 1px;
    border-radius: 5px;
    color: #fbfbfb;
    line-height: 0.5;
  }
  .enviando h4{
      font-weight: 600;
      font-size: 20px;
  }
  .error{
      display: none;
      text-align: center;
      background: #c48484;
      margin-top: 10px;
      padding: 10px 0 1px;
      border-radius: 5px;
      color: #771919;
      line-height: 0.5;
  }
  .error h4{
      font-weight: 600;
      font-size: 20px;
  }
  .etapa{
      display: flex;
  }
  .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #fff;
    background-color: #010c2c;
    border-color: #dee2e6 #dee2e6 #fff;
  }
  .nav-fill .nav-item {
    color: #010c2c;
    background: #fff;
  }
  .success-2{
      width: 100%;
      background-color: #d1f497;
      text-align: center;
      margin-bottom: 20px;
      border-radius: 5px;
      padding: 20px;
  }
  .success-icon{
      width: 60px;
      height: 60px;
      border-radius: 30px;
      margin-right: 20px;
  }
  .success-2 .content{
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      max-width: 360px;
      margin: auto;
  }
  .success-2 .content div{
      width: calc(100% - 60px);
  }
  
  
  
  .warning{
      width: 100%;
      background-color: #fdf3be;
      text-align: center;
      margin-bottom: 20px;
      border-radius: 5px;
      padding: 20px;
  }
  
  .warning .content{
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      max-width: 360px;
      margin: auto;
  }
  .warning .content div{
      width: calc(100% - 80px);
  }
  .warning-icon{
      width: 60px;
      height: 60px;
      border-radius: 30px;
      margin-right: 20px;
  }
  .warning .content p{
      font-size: 17px;
  }
  .btn-verde {
    background: #94DE1D;
    color: #273f00;
    padding: 15px 60px;
    border-radius: 40px;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 2px;
    transition: all .3s;
    transform: scale(1);
    display: table;
    margin: auto;
  }
  
  
  @media (max-width: 767.98px){
      .formulario{
          padding: 30px 40px;
      }
  }
  @media (max-width: 480px){
      .formulario{
          padding: 30px 20px;
      }
      [data-tooltip]:before {
          left: -106px;
          margin-bottom: 5px;
          margin-left: -100%;
          width: 200px;
      }
      .formulario {
          padding: 30px 20px 30px 0;
      }
          .form-title{
          width: 30px;
          margin-right: 10px;
          padding: 10px;
      }
      
      .form-section{
          width: calc(100% - 40px);
      }
      .success-2 .content div{
          width: 100%;
      }
      .success-icon {
          display: table;
          margin: 0 auto 20px;
      }
  }