/* sidebar settings */
.slider-frame {
  position: fixed;
  display: block;
  top: 0;
  width: 100vw;
  bottom: 0;
  z-index: 1035;
  min-height: 100%;
  max-height: none;
  overflow: auto;
  background-color: white;
  box-shadow: 0px 0px 20px 0px rgba(115, 77, 191, 0.2);
}

.slider-frame-left {
  left: 0;
}

.slider-frame-right, .slider-frame-profile {
  right: 0;
}

/* css to override hiding the sidebar according to different screen sizes */
.row .slider-frame.slider-frame-left.slider-frame-xs-show {
  left: 0;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  transform: translate(0, 0);
}

/*right sidebar is untested */
.row .slider-frame.slider-frame-right.slider-frame-xs-show, .row .slider-frame.slider-frame-profile.slider-frame-xs-show {
  right: 0;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  transform: translate(0, 0);
}

@media (min-width: 768px) {
  .slider-frame {
    width: 80vw;
  }
  .row .slider-frame.slider-frame-left.slider-frame-sm-show {
    left: 0;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  /*right sidebar is untested */
  .row .slider-frame.slider-frame-right.slider-frame-sm-show, .row .slider-frame.slider-frame-profile.slider-frame-sm-show {
    right: 0;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@media (min-width: 992px) {
  .row .slider-frame.slider-frame-left.slider-frame-md-show {
    left: 0;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  .row .slider-frame.slider-frame-right.slider-frame-md-show, .row .slider-frame.slider-frame-profile.slider-frame-md-show {
    right: 0;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@media (min-width: 1170px) {
  .slider-frame {
    width: 60vw;
  }
  .row .slider-frame.slider-frame-left.slider-frame-lg-show {
    left: 0;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  .row .slider-frame.slider-frame-right.slider-frame-lg-show, .row .slider-frame.slider-frame-profile.slider-frame-lg-show {
    right: 0;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
/* animation class - optional: without it the sidebar would just pop in and out*/
.slider-frame-animate {
  -webkit-transition: -webkit-transform 300ms ease;
  -moz-transition: -moz-transform 300ms ease;
  -o-transition: transform 300ms ease;
  transition: transform 300ms ease;
}

/* Left panel positioning classes */
.slider-frame.slider-frame-left {
  -webkit-transform: translate(-100%, 0);
  -moz-transform: translate(-100%, 0);
  -ms-transform: translate(-100%, 0);
  -o-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
}

.slider-frame.slider-frame-left.slider-frame-open {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}

.slider-frame.slider-frame-right, .slider-frame.slider-frame-profile {
  -webkit-transform: translate(100%, 0);
  -moz-transform: translate(100%, 0);
  -ms-transform: translate(100%, 0);
  -o-transform: translate(100%, 0);
  transform: translate(100%, 0);
}

.slider-frame.slider-frame-right.slider-frame-open, .slider-frame.slider-frame-profile.slider-frame-open {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}

.slider-frame > .iframe {
  height: 100vh;
  width: 100%;
  border: 0;
}

.slider-frame {
  overflow: hidden;
}

.slider-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(128, 128, 128, 0.5);
  display: none;
  z-index: 101;
}

.slider-overlay-open {
  display: block;
}