.ui-help-container {
    transition: all .4s;
}
.ui-help {
    background:   #fff7dd;
    position:     fixed;
    bottom:       0;
    top:          0;
    height:       100%;
    z-index:      999;
    transition:   all .4s;
    width:        30%;
    margin-right: -30%;
    right:        50px;

    .ui-help-wrapper {
      position: relative;
      top:      80px;
      padding:  50px;
    }

    .ui-help--shadow.ui-help--active & {
      box-shadow: 0 0 50px rgba(0,0,0,0.1);
    }

    .ui-help--active & {
        margin-right:  0;
        right:         0;

        .ui-help-label {
            opacity:    0;
            margin-top: 55px;
        }

        .ui-help-text {
            opacity:    1;
            transition: opacity .4s;
        }
    }

    .ui-help-toggle {
        position:    absolute;
        left:        0;
        top:         0;
        margin-left: -20px;
        transition:  all .4s;
    }

    .ui-help-label {
        position:         absolute;
        right:            100%;
        font-weight:      300;
        color:            mix(#fff7dd, #000, 70);
        text-transform:   uppercase;
        transform:        rotate(-90deg);
        transform-origin: top right;
        white-space:      nowrap;
        font-size:        18px;
        letter-spacing:   1.6px;
        transition:       all .4s;
        margin:           5px -15px 0 0;
        opacity:          1;
    }

    .ui-help-text {
        opacity:     1;
        font-size:   18px;
        line-height: 28px;
        font-weight: 300;
        color:       #333;
        transition:  all .4s;
        opacity:     0;
    }

}

@media (max-width: 992px) {
  .ui-help {
    width:        40%;
    margin-right: -40%;
  }
}
@media (max-width: 768px) {
  .ui-help-container {
    position: relative;

    > h1, > h2, > h3{
      transition: all .4s;
    }

    &.ui-help--active {
      background: #fff7dd;
      padding:    25px;
      margin:     -25px -25px 25px;

      .ui-help-toggle {
          right: 25px;
          top:   -20px;
          // top:   20px;
      }
    }

    > h1, > h2, > h3 {
      padding-top: 0;
    }
  }
  .ui-help {
    position:   static;
    padding:    0;
    width:      100%;
    margin:     0;
    background: transparent;
    height:     0;

    .ui-help-wrapper {
      top:     0;
      padding: 0;
      position: static;
    }

    .ui-help--shadow.ui-help--active & {
      box-shadow: none;
    }

    .ui-help--active & {
      box-shadow: none;
      height:     auto;
    }

    .ui-help-label {
      display: none;
    }

    .ui-help-toggle {
      position: absolute;
      left:     auto;
      top:      -5px;
      right:    0;
    }
  }
}