.Swing dd { padding:8%; color:#FFF; }
.Slide dd { padding:8%; color:#FFF; }
.Situat dd { padding:8%; color:#FFF; }


@-webkit-keyframes inSwing-top {
  from {
    -webkit-transform: rotate3d(-1, 0, 0, 90deg);
            transform: rotate3d(-1, 0, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}

@keyframes inSwing-top {
  from {
    -webkit-transform: rotate3d(-1, 0, 0, 90deg);
            transform: rotate3d(-1, 0, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@-webkit-keyframes inSwing-right {
  from {
    -webkit-transform: rotate3d(0, -1, 0, 90deg);
            transform: rotate3d(0, -1, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@keyframes inSwing-right {
  from {
    -webkit-transform: rotate3d(0, -1, 0, 90deg);
            transform: rotate3d(0, -1, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@-webkit-keyframes inSwing-bottom {
  from {
    -webkit-transform: rotate3d(1, 0, 0, 90deg);
            transform: rotate3d(1, 0, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@keyframes inSwing-bottom {
  from {
    -webkit-transform: rotate3d(1, 0, 0, 90deg);
            transform: rotate3d(1, 0, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@-webkit-keyframes inSwing-left {
  from {
    -webkit-transform: rotate3d(0, 1, 0, 90deg);
            transform: rotate3d(0, 1, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@keyframes inSwing-left {
  from {
    -webkit-transform: rotate3d(0, 1, 0, 90deg);
            transform: rotate3d(0, 1, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@-webkit-keyframes outSwing-top {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(-1, 0, 0, 104deg);
            transform: rotate3d(-1, 0, 0, 104deg);
  }
}
@keyframes outSwing-top {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(-1, 0, 0, 104deg);
            transform: rotate3d(-1, 0, 0, 104deg);
  }
}
@-webkit-keyframes outSwing-right {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(0, -1, 0, 104deg);
            transform: rotate3d(0, -1, 0, 104deg);
  }
}
@keyframes outSwing-right {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(0, -1, 0, 104deg);
            transform: rotate3d(0, -1, 0, 104deg);
  }
}
@-webkit-keyframes outSwing-bottom {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(1, 0, 0, 104deg);
            transform: rotate3d(1, 0, 0, 104deg);
  }
}
@keyframes outSwing-bottom {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(1, 0, 0, 104deg);
            transform: rotate3d(1, 0, 0, 104deg);
  }
}
@-webkit-keyframes outSwing-left {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(0, 1, 0, 104deg);
            transform: rotate3d(0, 1, 0, 104deg);
  }
}
@keyframes outSwing-left {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(0, 1, 0, 104deg);
            transform: rotate3d(0, 1, 0, 104deg);
  }
}

/* Swing */
.Swing {
  width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index:15;
  pointer-events: none; background-color: rgba(0,0,0,.8);
  -webkit-transform: rotate(0) translate3d(0, -100%, 0);
          transform: rotate(0) translate3d(0, -100%, 0);
  -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
          animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.inSwing-top .Swing {
  -webkit-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
  -webkit-animation: inSwing-top 300ms ease 0ms 1 forwards;
          animation: inSwing-top 300ms ease 0ms 1 forwards;
}

.inSwing-right .Swing {
  -webkit-transform-origin: 100% 0%;
          transform-origin: 100% 0%;
  -webkit-animation: inSwing-right 300ms ease 0ms 1 forwards;
          animation: inSwing-right 300ms ease 0ms 1 forwards;
}

.inSwing-bottom .Swing {
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  -webkit-animation: inSwing-bottom 300ms ease 0ms 1 forwards;
          animation: inSwing-bottom 300ms ease 0ms 1 forwards;
}

.inSwing-left .Swing {
  -webkit-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
  -webkit-animation: inSwing-left 300ms ease 0ms 1 forwards;
          animation: inSwing-left 300ms ease 0ms 1 forwards;
}

.outSwing-top .Swing {
  -webkit-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
  -webkit-animation: outSwing-top 300ms ease 0ms 1 forwards;
          animation: outSwing-top 300ms ease 0ms 1 forwards;
}

.outSwing-right .Swing {
  -webkit-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
  -webkit-animation: outSwing-right 300ms ease 0ms 1 forwards;
          animation: outSwing-right 300ms ease 0ms 1 forwards;
}

.outSwing-bottom .Swing {
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  -webkit-animation: outSwing-bottom 300ms ease 0ms 1 forwards;
          animation: outSwing-bottom 300ms ease 0ms 1 forwards;
}

.outSwing-left .Swing {
  -webkit-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
  -webkit-animation: outSwing-left 300ms ease 0ms 1 forwards;
          animation: outSwing-left 300ms ease 0ms 1 forwards;
}


@-webkit-keyframes inSlide-top {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

@keyframes inSlide-top {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes outSlide-top {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
  to {
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
}
@keyframes outSlide-top {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
  to {
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
}


@-webkit-keyframes inSlide-right {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

@keyframes inSlide-right {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes outSlide-right {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
}
@keyframes outSlide-right {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
}

@-webkit-keyframes inSlide-bottom {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

@keyframes inSlide-bottom {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes outSlide-bottom {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
}
@keyframes outSlide-bottom {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
}


@-webkit-keyframes inSlide-left {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

@keyframes inSlide-left {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes outSlide-left {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
}
@keyframes outSlide-left {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
}

/* Slide */
.Slide {
  width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index:15;
  pointer-events: none; background-color: rgba(0,0,0,.8);
  -webkit-transform: translate3d(0, -100%, 0);
          transform: translate3d(0, -100%, 0);
  -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
          animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.inSlide-top .Slide {
  -webkit-animation: inSlide-top 300ms ease 0ms 1 forwards;
          animation: inSlide-top 300ms ease 0ms 1 forwards;
}

.inSlide-right .Slide {
  -webkit-animation: inSlide-right 300ms ease 0ms 1 forwards;
          animation: inSlide-right 300ms ease 0ms 1 forwards;
}

.inSlide-bottom .Slide {
  -webkit-animation: inSlide-bottom 300ms ease 0ms 1 forwards;
          animation: inSlide-bottom 300ms ease 0ms 1 forwards;
}

.inSlide-left .Slide {
  -webkit-animation: inSlide-left 300ms ease 0ms 1 forwards;
          animation: inSlide-left 300ms ease 0ms 1 forwards;
}

.outSlide-top .Slide {
  -webkit-animation: outSlide-top 300ms ease 0ms 1 forwards;
          animation: outSlide-top 300ms ease 0ms 1 forwards;
}

.outSlide-right .Slide {
  -webkit-animation: outSlide-right 300ms ease 0ms 1 forwards;
          animation: outSlide-right 300ms ease 0ms 1 forwards;
}

.outSlide-bottom .Slide {
  -webkit-animation: outSlide-bottom 300ms ease 0ms 1 forwards;
          animation: outSlide-bottom 300ms ease 0ms 1 forwards;
}

.outSlide-left .Slide {
  -webkit-animation: outSlide-left 300ms ease 0ms 1 forwards;
          animation: outSlide-left 300ms ease 0ms 1 forwards;
}



@-webkit-keyframes inSituat-top {
  from {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

@keyframes inSituat-top {
  from {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@-webkit-keyframes outSituat-top {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
}
@keyframes outSituat-top {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
}


@-webkit-keyframes inSituat-right {
  from {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

@keyframes inSituat-right {
  from {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@-webkit-keyframes outSituat-right {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
}
@keyframes outSituat-right {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
}

@-webkit-keyframes inSituat-bottom {
  from {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

@keyframes inSituat-bottom {
  from {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@-webkit-keyframes outSituat-bottom {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
}
@keyframes outSituat-bottom {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
}


@-webkit-keyframes inSituat-left {
  from {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

@keyframes inSituat-left {
  from {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@-webkit-keyframes outSituat-left {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
}
@keyframes outSituat-left {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
}

/* Situat */
.Situat {
  width: 100%; height:100%; position: absolute; top: 0; left: 0; z-index:15;
  pointer-events:none; background-color: rgba(0,0,0,.8);
  -webkit-transform: rotate(0) translate3d(0, -100%, 0);
          transform: rotate(0) translate3d(0, -100%, 0);
  -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
          animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.inSituat-top .Situat {
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-animation: inSituat-top 300ms ease 0ms 1 forwards;
          animation: inSituat-top 300ms ease 0ms 1 forwards;
}

.inSituat-right .Situat {
  -webkit-transform-origin: right top;
          transform-origin: right top;
  -webkit-animation: inSituat-right 300ms ease 0ms 1 forwards;
          animation: inSituat-right 300ms ease 0ms 1 forwards;
}

.inSituat-bottom .Situat {
  -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
  -webkit-animation: inSituat-bottom 300ms ease 0ms 1 forwards;
          animation: inSituat-bottom 300ms ease 0ms 1 forwards;
}

.inSituat-left .Situat {
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-animation: inSituat-left 300ms ease 0ms 1 forwards;
          animation: inSituat-left 300ms ease 0ms 1 forwards;
}

.outSituat-top .Situat {
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-animation: outSituat-top 300ms ease 0ms 1 forwards;
          animation: outSituat-top 300ms ease 0ms 1 forwards;
}

.outSituat-right .Situat {
  -webkit-transform-origin: right top;
          transform-origin: right top;
  -webkit-animation: outSituat-right 300ms ease 0ms 1 forwards;
          animation: outSituat-right 300ms ease 0ms 1 forwards;
}

.outSituat-bottom .Situat {
  -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
  -webkit-animation: outSituat-bottom 300ms ease 0ms 1 forwards;
          animation: outSituat-bottom 300ms ease 0ms 1 forwards;
}

.outSituat-left .Situat {
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-animation: outSituat-left 300ms ease 0ms 1 forwards;
          animation: outSituat-left 300ms ease 0ms 1 forwards;
}