.md-perspective,
.md-perspective body {
  height: 100%;
  overflow: hidden;
}

.md-perspective body {
  -webkit-perspective: 600px;
  -ms-perspective: 600px;
  perspective: 600px;
}

.effeckt-off-screen-nav-show {
  visibility: visible;
}

.effeckt-off-screen-nav-left-overlay {
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: 500ms cubic-bezier(0.09, 0.68, 0, 0.99);
  transition: 500ms cubic-bezier(0.09, 0.68, 0, 0.99);
}

.effeckt-off-screen-nav-left-overlay.effeckt-off-screen-nav-show {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}

.effeckt-off-screen-nav-left-push {
  -webkit-transform: translateX(-12rem);
  -ms-transform: translateX(-12rem);
  transform: translateX(-12rem);
  -webkit-transition: 500ms;
  transition: 500ms;
}

.effeckt-off-screen-nav-left-push.effeckt-off-screen-nav-show {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}

.effeckt-off-screen-nav-left-push.effeckt-off-screen-nav-show ~ [data-effeckt-page] {
  -webkit-transform: translateX(12rem);
  -ms-transform: translateX(12rem);
  transform: translateX(12rem);
}

.effeckt-off-screen-nav-left-push ~ [data-effeckt-page] {
  -webkit-transition: 500ms;
  transition: 500ms;
}

.effeckt-off-screen-nav-left-reveal {
  width: 0px;
  -webkit-transform: translate3D(0, 0, 0);
  -ms-transform: translate3D(0, 0, 0);
  transform: translate3D(0, 0, 0);
  -webkit-transition: 500ms;
  transition: 500ms;
}

.effeckt-off-screen-nav-left-reveal h4 {
  width: 10rem;
}

.effeckt-off-screen-nav-left-reveal.effeckt-off-screen-nav-show {
  width: 12rem;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}

.effeckt-off-screen-nav-left-reveal.effeckt-off-screen-nav-show ~ [data-effeckt-page] {
  -webkit-transform: translateX(12rem);
  -ms-transform: translateX(12rem);
  transform: translateX(12rem);
}

.effeckt-off-screen-nav-left-reveal ~ [data-effeckt-page] {
  -webkit-transition: 500ms;
  transition: 500ms;
}

.effeckt-off-screen-nav-left-squeeze {
  width: 40%;
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: 500ms;
  transition: 500ms;
}

.effeckt-off-screen-nav-left-squeeze.effeckt-off-screen-nav-show {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}

.effeckt-off-screen-nav-left-squeeze.effeckt-off-screen-nav-show ~ [data-effeckt-page] {
  width: 60%;
}

.effeckt-off-screen-nav-left-squeeze ~ [data-effeckt-page] {
  float: right;
  -webkit-transition: width 500ms;
  transition: width 500ms;
  max-width: none;
}

.effeckt-off-screen-nav-right-overlay {
  right: 0;
  left: auto;
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition: 500ms cubic-bezier(0.09, 0.68, 0, 0.99);
  transition: 500ms cubic-bezier(0.09, 0.68, 0, 0.99);
}

.effeckt-off-screen-nav-right-overlay.effeckt-off-screen-nav-show {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}

.effeckt-off-screen-nav-right-push {
  left: auto;
  right: 0;
  -webkit-transform: translateX(12rem);
  -ms-transform: translateX(12rem);
  transform: translateX(12rem);
  -webkit-transition: 500ms;
  transition: 500ms;
}

.effeckt-off-screen-nav-right-push.effeckt-off-screen-nav-show {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}

.effeckt-off-screen-nav-right-push.effeckt-off-screen-nav-show ~ [data-effeckt-page] {
  -webkit-transform: translateX(-12rem);
  -ms-transform: translateX(-12rem);
  transform: translateX(-12rem);
}

.effeckt-off-screen-nav-right-push ~ [data-effeckt-page] {
  -webkit-transition: 500ms;
  transition: 500ms;
}

.effeckt-off-screen-nav-right-reveal {
  width: 0;
  overflow: hidden;
  left: auto;
  right: 0;
  -webkit-transform: translate3D(0, 0, 0);
  -ms-transform: translate3D(0, 0, 0);
  transform: translate3D(0, 0, 0);
  -webkit-transition: 500ms;
  transition: 500ms;
}

.effeckt-off-screen-nav-right-reveal h4 {
  width: 10rem;
  position: absolute;
  top: 0px;
  right: 0;
}

.effeckt-off-screen-nav-right-reveal ul {
  width: 12rem;
  position: absolute;
  top: 3.2rem;
  right: 0;
}

.effeckt-off-screen-nav-right-reveal.effeckt-off-screen-nav-show {
  width: 12rem;
}

.effeckt-off-screen-nav-right-reveal.effeckt-off-screen-nav-show ~ [data-effeckt-page] {
  -webkit-transform: translateX(-12rem);
  -ms-transform: translateX(-12rem);
  transform: translateX(-12rem);
}

.effeckt-off-screen-nav-right-reveal ~ [data-effeckt-page] {
  -webkit-transition: 500ms;
  transition: 500ms;
}

.effeckt-off-screen-nav-right-squeeze {
  left: auto;
  right: 0;
  width: 40%;
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition: 500ms;
  transition: 500ms;
}

.effeckt-off-screen-nav-right-squeeze.effeckt-off-screen-nav-show {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}

.effeckt-off-screen-nav-right-squeeze.effeckt-off-screen-nav-show ~ [data-effeckt-page] {
  width: 60%;
}

.effeckt-off-screen-nav-right-squeeze ~ [data-effeckt-page] {
  float: left;
  -webkit-transition: width 500ms;
  transition: width 500ms;
  max-width: none;
}

.effeckt-off-screen-nav-rotate {
  -webkit-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-transition: 500ms;
  transition: 500ms;
  -webkit-transform: translateX(-100%) translateX(6px) scale(1.01) rotateY(-30deg);
  -ms-transform: translateX(-100%) translateX(6px) scale(1.01) rotateY(-30deg);
  transform: translateX(-100%) translateX(6px) scale(1.01) rotateY(-30deg);
}

.effeckt-off-screen-nav-rotate.effeckt-off-screen-nav-show {
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
}

.effeckt-off-screen-nav-rotate.effeckt-off-screen-nav-show ~ [data-effeckt-page] {
  -webkit-transform: translateX(260px) rotateY(15deg);
  -ms-transform: translateX(260px) rotateY(15deg);
  transform: translateX(260px) rotateY(15deg);
  height: 200%;
  overflow: hidden;
}

.effeckt-off-screen-nav-rotate.effeckt-off-screen-nav-show ~ [data-effeckt-page] .off-screen-nav-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.effeckt-off-screen-nav-rotate ~ [data-effeckt-page] {
  -webkit-transform-origin: 0 50%;
  -ms-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.effeckt-off-screen-nav-rotate ~ .effeckt-overlay {
  z-index: 900;
  visibility: visible;
}

.effeckt-off-screen-nav-top-overlay {
  width: 100%;
  bottom: auto;
  -webkit-transition: 500ms;
  transition: 500ms;
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
}

.effeckt-off-screen-nav-top-overlay.effeckt-off-screen-nav-show {
  visibility: visible;
  -webkit-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%);
}

.effeckt-off-screen-nav-bottom-overlay {
  width: 100%;
  top: auto;
  -webkit-transition: 500ms;
  transition: 500ms;
  -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
}

.effeckt-off-screen-nav-bottom-overlay.effeckt-off-screen-nav-show {
  -webkit-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%);
}

.effeckt-off-screen-nav-top-bounce {
  width: 100%;
  bottom: auto;
  -webkit-transition: 500ms;
  transition: 500ms;
}

.effeckt-off-screen-nav-top-bounce.effeckt-off-screen-nav-show {
  visibility: visible;
  -webkit-animation: navFromTopBounceIn 500ms both ease;
  animation: navFromTopBounceIn 500ms both ease;
}

.effeckt-off-screen-nav-top-bounce.effeckt-off-screen-nav-hide {
  -webkit-animation: navFromTopBounceOut 500ms both ease;
  animation: navFromTopBounceOut 500ms both ease;
}

@-webkit-keyframes navFromTopBounceIn {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }

  20% {
    padding-top: 0px;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }

  60% {
    padding-top: 20px;
  }

  100% {
    padding-top: 0;
  }
}

@keyframes navFromTopBounceIn {
  0% {
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
  }

  20% {
    padding-top: 0px;
    -webkit-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
  }

  60% {
    padding-top: 20px;
  }

  100% {
    padding-top: 0;
  }
}

@-webkit-keyframes navFromTopBounceOut {
  0% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    padding-top: 0px;
  }

  40% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    padding-top: 20px;
  }

  80% {
    padding-top: 0px;
  }

  90%, 100% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}

@keyframes navFromTopBounceOut {
  0% {
    -webkit-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
    padding-top: 0px;
  }

  40% {
    -webkit-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
    padding-top: 20px;
  }

  80% {
    padding-top: 0px;
  }

  90%, 100% {
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}

.effeckt-off-screen-nav-bottom-bounce {
  width: 100%;
  top: auto;
  -webkit-transition: 500ms;
  transition: 500ms;
}

.effeckt-off-screen-nav-bottom-bounce.effeckt-off-screen-nav-show {
  -webkit-animation: navFromBottomBounceIn 500ms both ease;
  animation: navFromBottomBounceIn 500ms both ease;
}

.effeckt-off-screen-nav-bottom-bounce.effeckt-off-screen-nav-hide {
  -webkit-animation: navFromBottomBounceOut 500ms both ease;
  animation: navFromBottomBounceOut 500ms both ease;
}

@-webkit-keyframes navFromBottomBounceIn {
  0% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }

  20% {
    padding-bottom: 0px;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }

  60% {
    padding-bottom: 20px;
  }

  100% {
    padding-bottom: 0;
  }
}

@keyframes navFromBottomBounceIn {
  0% {
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
  }

  20% {
    padding-bottom: 0px;
    -webkit-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
  }

  60% {
    padding-bottom: 20px;
  }

  100% {
    padding-bottom: 0;
  }
}

@-webkit-keyframes navFromBottomBounceOut {
  0% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    padding-bottom: 0px;
  }

  40% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    padding-bottom: 20px;
  }

  80% {
    padding-bottom: 0;
  }

  90%, 100% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
}

@keyframes navFromBottomBounceOut {
  0% {
    -webkit-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
    padding-bottom: 0px;
  }

  40% {
    -webkit-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
    padding-bottom: 20px;
  }

  80% {
    padding-bottom: 0;
  }

  90%, 100% {
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
  }
}

.effeckt-off-screen-nav-push-top {
  width: 100%;
  bottom: auto;
  -webkit-transition: 500ms;
  transition: 500ms;
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
}

.effeckt-off-screen-nav-push-top.effeckt-off-screen-nav-show {
  visibility: visible;
  -webkit-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%);
}

.effeckt-off-screen-nav-push-top.effeckt-off-screen-nav-show ~ [data-effeckt-page] {
  -webkit-transform: translateY(12rem);
  -ms-transform: translateY(12rem);
  transform: translateY(12rem);
}

.effeckt-off-screen-nav-push-top ~ [data-effeckt-page] {
  -webkit-transition: 500ms;
  transition: 500ms;
}

.effeckt-off-screen-nav-push-bottom {
  width: 100%;
  top: auto;
  -webkit-transition: 500ms;
  transition: 500ms;
  -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
}

.effeckt-off-screen-nav-push-bottom.effeckt-off-screen-nav-show {
  visibility: visible;
  -webkit-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%);
}

.effeckt-off-screen-nav-push-bottom.effeckt-off-screen-nav-show ~ [data-effeckt-page] {
  -webkit-transform: translateY(-12rem);
  -ms-transform: translateY(-12rem);
  transform: translateY(-12rem);
}

.effeckt-off-screen-nav-push-bottom ~ [data-effeckt-page] {
  -webkit-transition: 500ms;
  transition: 500ms;
}