.animate {
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
/*  -webkit-font-smoothing: subpixel-antialiased;
  font-smoothing: subpixel-antialiased;*/
}

@keyframes slideOver {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    -webkit-transform: translate3d(-37%, 0, 0);
    transform: translate3d(-37%, 0, 0);
  }
}

.slideOver {
  -webkit-animation-name: slideOver;
  animation-name: slideOver;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
  animation-timing-function: ease-in;
  -webkit-animation-timing-function: ease-in;
}

.slideVertical {
  opacity: 0.5 !important;
  -moz-transform: rotate(90deg) translate(-27px);
  -webkit-transform: rotate(90deg) translate(-27px);
  -o-transform: rotate(90deg) translate(-27px);
  transform: rotate(90deg) translate(-27px);
  width: 400px;
}

@keyframes slideBack {
  from {
    -webkit-transform: translate3d(-37%, 0, 0);
    transform: translate3d(-37%, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideBack {
  -webkit-animation-name: slideBack;
  animation-name: slideBack;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
  animation-timing-function: ease-in;
  -webkit-animation-timing-function: ease-in;
}

@keyframes fSlideLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    /*opacity: 0;*/
    -webkit-transform: translate3d(-33%, 0, 0);
    transform: translate3d(-33%, 0, 0);
  }
}

.fSlideLeft {
  opacity: 0;
  -webkit-animation-name: fSlideLeft;
  animation-name: fSlideLeft;
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
  -webkit-animation-timing-function: ease-in;
  pointer-events: none;
}

@keyframes fSlideRight {
  from {
    -webkit-transform: translate3d(-33%, 0, 0);
    transform: translate3d(-33%, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fSlideRight {
  opacity: 1;
  -webkit-animation-name: fSlideRight;
  animation-name: fSlideRight;
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
  -webkit-animation-timing-function: ease-in;
}

@media screen and (min-width: 40.5em) { 


    @keyframes slideBack {
      from {
        -webkit-transform: translate3d(-30.4%, 0, 0);
        transform: translate3d(-30.4%, 0, 0);
    }
}
    @keyframes slideOver {
        to {
    -webkit-transform: translate3d(-30.4%, 0, 0);
    transform: translate3d(-30.4%, 0, 0);
  }
}

  #main.fmSlideLeft {
    left: 25%;
  }

  #main.ffwSlideRight {
    left: 30%;
  }

  #main.ffwSlideLeft {
    left: 23%;
  }

  }