.layout-creazione {
  margin: 5rem 0 10rem;
  .gform_wrapper {
    .gf_page_steps {
      display: block;
      border: 1px solid $gray-light;
      width: 100%;
      display: table;
      text-align: center;
      padding: 1rem 0 0;
      margin: 0;
      .gf_step {
        display: inline-block;
        width: calc(100% / 3);
        height: 100%;
        position: relative;
        color: $gray-darker;
        transition: all .4s $easing;
        font-size: .79em;
        font-weight: 400;
        margin: 0;
        padding: 2rem 0;
        @media screen and($bp-larger-than-mobile) {
          letter-spacing: .05rem;
          font-size: 1.05em;
        }
        span {
         vertical-align: super !important;
          &.gf_step_number {
            font-family: $font-family-sans-serif !important;
            vertical-align: top !important;
            font-size: 1em;
            position: relative;
            margin-right: 2rem;
            &:after {
              content:'-';
              position: absolute;
              left: calc(100% + .75rem);
              top: 50%;
              transform: translateY(-50%);
            }
          }
        }
        &:after {
          content:'';
          position: absolute;
          top: 101%;
          left: 50%;
          transform: translate(-50%, -50%) scale(.5);
          border-radius: 100%;
          height: 1.5rem;
          width: 1.5rem;
          border: 2px solid $primary-color;
          background-color: $white;
          transition: all .4s $easing;
          opacity: 0;
        }
        &.gf_step_active {
          color: $black;
          &:after {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
          }
        }
      }
    }
    .gform_body {
      border: 1px solid $gray-light;
      border-top: none;
      border-bottom-left-radius: 1rem;
      border-bottom-right-radius: 1rem;
      padding: 5rem 5rem;
      text-align: center;
      @media screen and($bp-larger-than-tablet) {
        padding: 5rem 25rem;
      }
      .gfield {
        h1, h2, h3, h4, h5, h6 {
          font-family: $font-family-sans-serif;
          font-weight: 500;
        }
      }
      .single-step {
        &:focus, &:hover {
          outline: none !important;
          box-shadow: none !important;
        }
      }
      // STEP 1
      textarea {
        // margin: 2.5rem 0 5rem;
        width: 100%;
        height: 30rem;
        resize: none;
        border-color: $gray-light;
        border-radius: 0;
        font-weight: 300;
        padding: 3rem 2.5rem !important;
        font-size: .89em;
      }
      // STEP 2
      .upload-title {
        text-align: center;
        font-family: $font-family-sans-serif;
        font-weight: 400;
        letter-spacing: .05rem;
        margin-top: 5rem;
        small {
          margin-left: 1rem;
          font-weight: 100;
        }
      }
      .gform_drop_area {
        border: 3px dashed $gray-base !important;
        max-width: 50rem;
        margin: 1.5rem auto 5rem;
        padding: 5rem 0;
        border-radius: 1rem;
        background-color: transparent !important;
        input[type=button], input[type=submit] {
          @extend .btn;
          @extend .btn-primary;
          text-transform: uppercase;
          padding: .75rem 2rem .5rem;
          border-radius: 0;
          transition: all .4s $easing;
          &:hover {
            background-color: $black;
          }
        }
      }
      // STEP 3
      .single-step[data-step="3"] {
        .upper-text, .lower-text {
          margin-top: 5rem;
          margin-bottom: 10rem;
        }
      }
      .team-title {
        font-family: $font-family-sans-serif;
        font-weight: 400;
        letter-spacing: .05rem;
        font-size: calc(.7em + .7vw);
        margin-bottom: 5rem;
      }
      .send-title {
        font-family: $font-family-sans-serif;
        font-weight: 400;
        letter-spacing: .05rem;
        font-size: calc(.55em + .55vw);
        margin-bottom: 1rem;
      }
      input[type="submit"] {
        height: auto;
        border: none !important;
        color: $white !important;
        font-size: 1.15em;
        letter-spacing: 2px;
        padding: .25rem 3rem 0;
        font-weight: 400;
      }
      .ginput_preview {
        text-align: left;
        position: relative;
        border-bottom: 1px solid $gray-light;
        padding: 2rem 0;
        max-width: 80rem;
        margin: 0 auto;
        font-size: .9em;
        strong {
          font-weight: 100;
        }
        // &:after {
        //   content:'\e68d';
        //   font-family: 'dueper-font';
        //   position: absolute;
        //   right: 0;
        //   top: 50%;
        //   transform: translateY(-50%);
        //   color: $gray-darker;
        // }
        img {
          // display: none;
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
    .gform_page_footer {
      border: none !important;
      input[type=button], input[type=submit] {
        @extend .btn;
        @extend .btn-primary;
        text-transform: uppercase;
        padding: .75rem 2rem .5rem;
        border-radius: 0;
        transition: all .4s $easing;
        &:hover {
          background-color: $black;
        }
      }
    }
  }
}
