.txt-1 {
    font-size: 3.5rem!important
}

/* Mark input boxes that gets an error on validation: */
input.invalid {
    background-color: #ffdddd;
  }

  .start-buzon h1 {
      font-size: 3rem;
  }

  .start-buzon h2 {
      font-size: 2.3rem;
      font-weight: 400;
  }

  .start-buzon h3 {
    font-size: 2rem;
    font-weight: 400;
}
  
  /* Hide all steps by default: */
  .tab {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    left: 50%;
    top: 8%;
    width: 60%;
    height: 70%;
    transform: translate(-50%, 100%);
    opacity: 0;
    transition: 1s all ease;
    pointer-events: none;
  }
  
  .tab.on{
      transform: translate(-50%, 0%);
      opacity: 1;
      transition: 1s all ease;
      pointer-events: initial;
  }

  .img-tab {
      width: 140px;
  }
  
  /* Make circles that indicate the steps of the form: */
  .step {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: rgba(254, 201, 58, 1);
    border: none;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
  }
  
  /* Mark the active step: */
  .step.active {
    opacity: 1;
  }
  
  /* Mark the steps that are finished and valid: */
  .step.finish {
    background-color: rgba(254, 201, 58, 1);
  }
  
  .margin-top-5 {
      margin-top: 1rem;
  }
  
  .margin-bottom-5 {
      margin-bottom: 1rem;
  }
  
  .cc-selector {
      display: flex;
      justify-content: center;
  }
  
  .cc-selector input{
      margin:0;padding:0;
      -webkit-appearance:none;
          -moz-appearance:none;
              appearance:none;
  }
  
  .cc-selector-2 input{
      position:absolute;
      z-index:999;
  }
  
  .cc-selector label p {
      position: absolute;
      text-align: left;
      font-size: 1.5rem;
      line-height: 1;
      left: 10px;
      bottom: 0%;
  }
  
  .rrhh{background-image:url('https://vall.mx/img/buzon-sugerencias/rrhh.png');}
  .logistica{background-image:url('https://vall.mx/img/buzon-sugerencias/logistica.png');}
  .confeccion{background-image:url('https://vall.mx/img/buzon-sugerencias/confeccion.png');}
  .produccion{background-image:url('https://vall.mx/img/buzon-sugerencias/produccion.png');}
  .innovacion{background-image:url('https://vall.mx/img/buzon-sugerencias/innovacion.png');}
  .codigo-etico{background-image:url('https://vall.mx/img/buzon-sugerencias/codigo-etico.png');}
  .seguridad{background-image:url('https://vall.mx/img/buzon-sugerencias/seguridad.png');}
  .at-cliente{background-image:url('https://vall.mx/img/buzon-sugerencias/atencion-cliente.png');}
  .img-corporativo{background-image:url('https://vall.mx/img/buzon-sugerencias/corporativo.png');}
  
  .cc-selector-2 input:active +.drinkcard-cc,
  .cc-selector input:active +.drinkcard-cc {
      opacity: .9;
  }
  .cc-selector-2 input:checked +.drinkcard-cc,
  .cc-selector input:checked +.drinkcard-cc {
      -webkit-filter: none;
         -moz-filter: none;
              filter: none;
  }
  
  .drinkcard-cc{
      position: relative;
      cursor:pointer;
      border: 3px solid #FEC93A!important;
      background-size: 60%;
      background-position: 50% 35%;
      background-repeat:no-repeat;
      width: 160px;
      height: 160px;
      margin: 0.5rem!important;
      border-radius: 5px;
      -webkit-transition: all 100ms ease-in;
         -moz-transition: all 100ms ease-in;
              transition: all 100ms ease-in;
      -webkit-filter: grayscale(1) opacity(.7);
         -moz-filter: grayscale(1) opacity(.7);
              filter: grayscale(1) opacity(.7);
  }
  
  .drinkcard-cc:hover{
      -webkit-filter: grayscale(.5) opacity(.9);
         -moz-filter: grayscale(.5) opacity(.9);
              filter: grayscale(.5) opacity(.9);
  }
  
  .drinkcard-cc input {
      border-bottom: 0px solid #fdc82f;
  }
  
  textarea,
  input {
      font-size: 2rem;
      border: 0;
      border-bottom: 1px solid #FEC93A;
  }
  
  :focus-visible {
      outline: 0!important;
  }
  
  input::-webkit-input-placeholder,
  textarea::-webkit-input-placeholder {
      font-size: 2rem!important;
      color: rgba(254, 201, 58, 0.6);
  }
  
  /* Extras */
  a:visited{color:#888}
  a{color:#444;text-decoration:none;}
  p{margin-bottom:.3em;}
  .cc-selector-2 input{ margin: 5px 0 0 12px; }
  .cc-selector-2 label{ margin-left: 7px; }
  span.cc{ color:#6d84b4 }
  
  button {
      color: #000 !important;
      background: #FEC93A;
      padding: 10px 20px;
      font-size: 1.5rem;
      font-weight: 700;
      border: 0;
      text-transform: uppercase;
      text-decoration: none;
      margin: 0 1rem;
  }
  

  .grecaptcha-badge {
      display: none;
  }

  @media (max-width: 996px) {

    p, h1, h2 {
        text-align: left;
    }

    .img-tab {
        width: 90px;
        margin-bottom: 20px;
    }

    .tab {
        position: absolute;
        display: flex;
        flex-direction: column;
        justify-content: center;
        left: 50%;
        top: 8%;
        width: 90%;
        height: 70%;
        transform: translate(-50%, 100%);
        opacity: 0;
        transition: 1s all ease;
        pointer-events: none;
      }

      .tab h1 {
          font-size: 2.3rem!important;
      }

    .start-buzon,
    .start-buzon h1,
    .start-buzon h2,
    .start-buzon h3 {
        text-align: center!important;
    }

    .start-buzon h1 {
        font-size: 2rem!important;
    }
  
    .start-buzon h2 {
        font-size: 1.7rem;
        font-weight: 400;
    }
  
    .start-buzon h3 {
        font-size: 1.5rem;
        font-weight: 400;
    }

    .txt-1 {
        font-size: 2.5rem!important;
    }

      .margin-top-5 {
          margin-top: 0;
      }
  
      .margin-bottom-5 {
          margin-top: 0;
      }
  
      .cc-selector {
        display: flex;
        justify-content: center;
    }
  
      .drinkcard-cc{
        position: relative;
        cursor:pointer;
        border: 3px solid #FEC93A!important;
        background-size: 60%;
        background-position: 50% 35%;
        background-repeat:no-repeat;
        width: 100px;
        height: 100px;
        margin: 0.5rem!important;
        border-radius: 5px;
        -webkit-transition: all 100ms ease-in;
           -moz-transition: all 100ms ease-in;
                transition: all 100ms ease-in;
        -webkit-filter: grayscale(1) opacity(.7);
           -moz-filter: grayscale(1) opacity(.7);
                filter: grayscale(1) opacity(.7);
    }
  
      .cc-selector> input {
          font-size: 2rem;
          border: 0;
          border-bottom: 0!important;
      }

      .cc-selector label p {
        position: absolute;
        text-align: left;
        font-size: 1.2rem;
        line-height: 1;
        left: 10px;
        bottom: 0%;
    }
  
  }