@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
        filter: alpha(opacity=0);
    }
    100% {
        opacity: 1;
        filter: alpha(opacity=100);
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        filter: alpha(opacity=0);
    }
    100% {
        opacity: 1;
        filter: alpha(opacity=100);
    }
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
        filter: alpha(opacity=100);
    }
    100% {
        opacity: 0;
        filter: alpha(opacity=0);
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
        filter: alpha(opacity=100);
    }
    100% {
        opacity: 0;
        filter: alpha(opacity=0);
    }
}

@-webkit-keyframes moveInFromLeft {
    0% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
}

@keyframes moveInFromLeft {
    0% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
}

@-webkit-keyframes moveOutToLeft {
    0% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(-125%);
                transform: translateX(-125%);
    }
}

@keyframes moveOutToLeft {
    0% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(-125%);
                transform: translateX(-125%);
    }
}

@-webkit-keyframes moveInFromRight {
    0% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
}

@keyframes moveInFromRight {
    0% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
}

@-webkit-keyframes moveOutToRight {
    0% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(125%);
                transform: translateX(125%);
    }
}

@keyframes moveOutToRight {
    0% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(125%);
                transform: translateX(125%);
    }
}

#page_margins {
  position: relative;
  overflow: hidden;
}

#page_preview {
  position: absolute;
  top: 0;
  z-index: -1;
}

#page {
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-transition-timing-function: ease-in;
            transition-timing-function: ease-in;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
}

.is-exiting > #page {
    -webkit-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
}

#page_margins[data-transition=fade] #page {
    -webkit-animation-name: fadeIn;
            animation-name: fadeIn;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
}

#page_margins[data-transition=fade].is-exiting #page {
    -webkit-animation-name: fadeOut;
            animation-name: fadeOut;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
}

#page_margins[data-transition=moveleft] > #page {
    -webkit-animation-name: moveInFromLeft;
            animation-name: moveInFromLeft;
}

#page_margins[data-transition=moveleft].is-exiting > #page {
    -webkit-animation-name: moveOutToRight;
            animation-name: moveOutToRight;
}

#page_margins[data-transition=moveright] > #page {
    -webkit-animation-name: moveInFromRight;
            animation-name: moveInFromRight;
}

#page_margins[data-transition=moveright].is-exiting > #page {
    -webkit-animation-name: moveOutToLeft;
            animation-name: moveOutToLeft;
}