.sidebar{
  position: fixed;
  width: 100vw;
  height: 100vh;
  @include transition(right 1s cubic-bezier(0.77,0.2,0.05,1.0));
  right: -3000px;
  top: 0;
  z-index: 9999;

  >div:first-child{
    height: 100%;
    width: 5%;
    @include media-breakpoint-up(sm){
      width: 10%;
    }
    @include media-breakpoint-up(lg){
      width: 20%;
    }
    @include media-breakpoint-up(xl){
      width: 30%;
    }
  }
  >div:last-child{
    background-color: white;
    height: 100%;
    width: 95%;
    -webkit-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.25);
    @include media-breakpoint-up(sm){
      width: 90%;
    }
    @include media-breakpoint-up(lg){
      width: 80%;
    }
    @include media-breakpoint-up(xl){
      width: 70%;
    }
  }
  &.open {
    right: 0;
    &.load-finished{
      backdrop-filter: blur(5px);
      @include transition(backdrop-filter .5s ease-in);
    }
  }
  .btn-toggle {
    position: absolute;
    top: $size-medium;
    right: $size-medium;
    @include media-breakpoint-down(sm){
      top: $size-small;
      right: $size-small;
    }
    svg {
      color: white;
      width: 50px;
      @include transition(color 0.3s cubic-bezier(0.77, 0.2, 0.05, 1.0));
      @include media-breakpoint-down(sm){
        width: 30px;
      }
    }

    &:hover {
      svg {
        color: black;
      }
    }
  }
}