@keyframes slideFromRight {
    0% {
        opacity: 0;
        position: relative;
        right:-20%
    }
    100% {
        opacity: 1;
        right: 0
    }
}

.slideFromRight {
    animation: slideFromRight;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
}

.animateSlideFromRight {
    right:-20%;
    position: relative;
    opacity: 0;
}

@keyframes slideFromLeft {
    0% {
        opacity: 0;
        position: relative;
        left:-20%
    }
    100% {
        opacity: 1;
        left: 0
    }
}

.slideFromLeft {
    animation: slideFromLeft;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
}

.animateSlideFromLeft {
    left:-20%;
    position: relative;
    opacity: 0;
}

@keyframes slideFromTop {
    0% {
        opacity: 0;
        position: relative;
        top:-200px
    }
    100% {
        opacity: 1;
        top: 0
    }
}

.slideFromTop {
    animation: slideFromTop;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
}

.animateSlideFromTop {
    top: -200px;
    position: relative;
    opacity: 0;
}

@keyframes slideFromBottom {
    0% {
        opacity: 0;
        position: relative;
        bottom: -200px
    }
    100% {
        opacity: 1;
        bottom: 0
    }
}

.slideFromBottom {
    animation: slideFromBottom;
    animation-fill-mode: forwards;
    -webkit-animation-duration: .5s;
    -moz-animation-duration: .5s;
    -o-animation-duration: .5s;
    animation-duration: .5s;
}

.animateSlideFromBottom {
    bottom: -200px;
    position: relative;
    opacity: 0;
}

@keyframes fadeInNew {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.fadeInNew {
    animation: fadeInNew;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
}

.animateFadeIn {
    opacity: 0;
}

.animateFadeInNoScroll {
    opacity: 0;
}

.animateSlideTopRight ,.animateSlideTopLeft ,.animateSlideBottomRight ,.animateSlideBottomLeft {
    opacity: 0;
}

@keyframes slideInBottomRight {
    0% {
        opacity: 0;
        bottom: -100px;
        right: -100px;
    }
    100% {
        opacity: 1;
        bottom: 0;
        right:0;
    }
}

.slideInBottomRight {
    animation: slideInBottomRight;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    -o-animation-duration: 2s;
    animation-duration: 2s;
}

@keyframes slideInTopRight {
    0% {
        opacity: 0;
        top: -100px;
        right: -100px;
    }
    100% {
        opacity: 1;
        top: 0;
        right:0;
    }
}

.slideInTopRight {
    animation: slideInTopRight;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    -o-animation-duration: 2s;
    animation-duration: 2s;
}

@keyframes slideInTopLeft {
    0% {
        opacity: 0;
        top: -100px;
        left: -100px;
    }
    100% {
        opacity: 1;
        top: 0;
        left:0;
    }
}

.slideInTopLeft {
    animation: slideInTopLeft;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    -o-animation-duration: 2s;
    animation-duration: 2s;
}

@keyframes slideInBottomLeft {
    0% {
        opacity: 0;
        bottom: -100px;
        left: -100px;
    }
    100% {
        opacity: 1;
        bottom: 0;
        left:0;
    }
}

.slideInBottomLeft {
    animation: slideInBottomLeft;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    -o-animation-duration: 2s;
    animation-duration: 2s;
}