$qs-width: 800px;
$qs-height: 375px;


.section-quickaction {

  z-index: $zindex-fixed;
  position: fixed;
  right: 0;
  top: 33%;
  transform: translate(0, -50%);
  will-change: transform;
  transition: transform .5s ease-out;
  @include media-breakpoint-up(md) {
    top: 50%;
    transform: translate(0, -50%);
    padding-right: 1rem;
  }

  &.is--sticky {

  }

  &.is--pinned {

  }

  &.is--unpinned {
    transform: translate(100%, -50%);
  }


  .frame + .frame {
    margin-top: 0;
  }
}


.qs-item {
  position: absolute;
  right: 0;
  background-color: rgba(255, 255, 255, 1);

  top: 50%;
  transform: translateX(0) translateY(-25vh);
  @include media-breakpoint-up(md) {
    transform: translateX(0) translateY(calc($qs-height/-2));
  }
  transition: all .35s ease-in-out;
  opacity: 1;



  &.collapse {
    &:not(.show) {
      //z-index: 0;
      display: inherit;
      transform: translateX(90vw) translateY(-25vh);
      @include media-breakpoint-up(md) {
        transform: translateX($qs-width) translateY(calc($qs-height/-2));
      }
    }
  }

  &.collapsing {
    transition: all .35s ease-in-out;
    height: inherit;
    transform: translateX(90vw) translateY(-25vh);
    @include media-breakpoint-up(md) {
      transform: translateX($qs-width) translateY(calc($qs-height/-2));
    }
  }

}

.qs-item.collapse {
  .ce-textpic {
    .ce-gallery {
      display: none;
    }
  }
}

// THE AWESOME IMAGES ....
.qs-item.collapse.show,
.qs-item.collapsing {

  .ce-row,
  .ce-column {
    margin: 0;
    padding: 0;
  }

  .ce-textpic {
    .ce-gallery {
      display: none;
      @include media-breakpoint-up(md) {
        display: block;
        position: absolute;
        width: 180px;

        padding: 0;
        margin: 0;
        left: -$grid-gutter-width*1.5;
        top: 5%;

        figure {
          margin: 0;
          padding: 0;

          img {
            max-width: 180px;
            height: auto;
            border-radius: 100%;
          }
        }
      }
    }
  }
}

.qs-item--contact{
  .lead{
    font-size:1.1rem;
  }
  p{
    margin:.5rem;
  }
}

.tx-kesearch-pi1 {
  span.resetbutt {
    display: none;
  }


  input {
    &[type="text"] {
      @extend .form-control
    }

    &[type="submit"] {
      @extend .btn;
      @extend .btn-primary;
    }
  }
}


.qs-inner {
  width: 90vw;
  min-height: $qs-height;
  padding: 2rem 6rem 2rem 2rem;


  @include media-breakpoint-up(md) {
    width: $qs-width;
    height: $qs-height;
    padding-top: 2rem;
    padding-right: 8rem;
    padding-left: 8rem;
    padding-bottom: 2rem;
  }
}

.qs-toggler-wrapper {
  position: relative;
  z-index: 2;
}

.qs-toggler {
  position: relative;
  border-radius: 100%;
  //display: block;
  width: 3.5rem;
  height: 3.5rem;
  margin: .5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: $primary-light;
  transition: all .2s ease;
  box-shadow: 0 1px 4px -1px rgba($black, .2);
  cursor:pointer;

  @include media-breakpoint-up(md) {
    width: 4rem;
    height: 4rem;
  }


  &.collapsed {
    background-color: $secondary;
    color: #fff;

    .qs-icon {
      color: #fff;
    }
  }

  .qs-icon {
    transition: all .2s ease;
    color: $primary;
    font-size: 1.5rem;
  }
}

.qs-overlay {
  background-color: $modal-backdrop-bg;
  opacity: 0;
  position: fixed;
  z-index: $zindex-fixed - 1;
  pointer-events: none;
  transition: all .4s ease-in-out;

  &.show {
    transition: all .4s ease-in-out;
    opacity: $modal-backdrop-opacity;
    pointer-events: inherit;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}
