/* ========================================================================
   Component: Off-canvas
 ========================================================================== */
/*
 * 1. Hide by default
 * 2. Set position
 */
.uk-offcanvas {
  /* 1 */
  display: none;
  /* 2 */
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
}

.uk-offcanvas-flip .uk-offcanvas {
  right: 0;
  left: auto;
}

.uk-offcanvas-bar {
  /* 1 */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  /* 2 */
  box-sizing: border-box;
  width: 270px;
  padding: 20px 20px;
  background: #fff;
  /* 3 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* 4 */
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}
@media (min-width: 960px) {
  .uk-offcanvas-bar {
    width: 350px;
    padding: 40px 40px;
  }
}
/* Flip modifier */
.uk-offcanvas-flip .uk-offcanvas-bar {
  left: auto;
  right: 0;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}
/*
 * Open
 */
.uk-open > .uk-offcanvas-bar {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
/*
 * Slide Animation (Used in slide and push mode)
 */
.uk-offcanvas-bar-animation {
  -webkit-transition: -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}
/*
 * Reveal Animation
 * 1. Set position
 * 2. Clip the bar
 * 3. Animation
 * 4. Reset transform
 */
.uk-offcanvas-reveal {
  /* 1 */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  /* 2 */
  width: 0;
  overflow: hidden;
  /* 3 */
  -webkit-transition: width 0.3s ease-out;
  transition: width 0.3s ease-out;
}
.uk-offcanvas-reveal .uk-offcanvas-bar {
  /* 4 */
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
.uk-open > .uk-offcanvas-reveal {
  width: 270px;
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
  .uk-open > .uk-offcanvas-reveal {
    width: 350px;
  }
}
/*
 * Flip modifier
 */
.uk-offcanvas-flip .uk-offcanvas-reveal {
  right: 0;
  left: auto;
}
/* Close
 * Adopts `uk-close`
 ========================================================================== */
.uk-offcanvas-close {
  position: absolute;
  z-index: 1000;
  top: 20px;
  right: 20px;
  padding: 5px;
  background-color:#fff;
}
/* Overlay
 ========================================================================== */
/*
 * Overlay the whole page. Needed for the `::before`
 * 1. Using `100vw` so no modification is needed when off-canvas is flipped
 * 2. Allow for closing with swipe gesture on devices with pointer events.
 */
.uk-offcanvas-overlay {
  /* 1 */
  width: 100vw;
  /* 2 */
  touch-action: none;
}
/*
 * 1. Mask the whole page
 * 2. Fade-in transition
 */
.uk-offcanvas-overlay::before {
  /* 1 */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.1);
  /* 2 */
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
.uk-offcanvas-overlay.uk-open::before {
  opacity: 1;
}
/* Container
 ========================================================================== */
/*
 * Prevent horizontal scrollbar when the content is slide-out
 * Has to be on the `html` element too to make it work on the `body`
 */
.uk-offcanvas-page,
.uk-offcanvas-container {
  overflow-x: hidden;
}
/*
 * Prevent all scrollbars if overlay is used
 */
.uk-offcanvas-container-overlay {
  overflow: hidden;
}
/* Content
 ========================================================================== */
/*
 * Prepare slide-out animation (Used in reveal and push mode)
 * Using `position: left` instead of `transform` because position `fixed` elements like sticky navbars
 * lose their fixed state and behaves like `absolute` within a transformed container
 * Note: JS sets a fixed width and height so the page can slide-out without shrinking
 * 1. Smooth scrolling
 */
.uk-offcanvas-container .uk-offcanvas-content {
  position: relative;
  left: 0;
  -webkit-transition: left 0.3s ease-out;
  transition: left 0.3s ease-out;
  /* 1 */
  -webkit-overflow-scrolling: touch;
}
/* Disable scrolling if overlay mode */
.uk-offcanvas-overlay .uk-offcanvas-content {
  overflow-y: hidden;
}
/*
 * Activate slide-out animation
 */
:not(.uk-offcanvas-flip) > .uk-offcanvas-content-animation {
  left: 270px;
}
.uk-offcanvas-flip > .uk-offcanvas-content-animation {
  left: -270px;
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
  :not(.uk-offcanvas-flip) > .uk-offcanvas-content-animation {
    left: 350px;
  }
  .uk-offcanvas-flip > .uk-offcanvas-content-animation {
    left: -350px;
  }
}