/*------------------------------------------------------------------
[Animations Stylesheet]

Author: AtypicalThemes
Template: Nixo - Creative Agency OnePage.
Version:	1.0
Last change:	07/01/2017

------------------------------------------------------------------- */
/* KEYFRAMES */
@keyframes pop-in {
0% { opacity: 0; transform: scale(0.5); }
100% { opacity: 1; transform: scale(1); }
}

/* --- The first part of the stylesheet sets the initial position of the animation elements and sets their opacity and timing --- */
.animation-element {
    opacity: 0;
    position: relative;
    -moz-transition: all 600ms ease-out;
    -webkit-transition: all 600ms ease-out;
    -o-transition: all 600ms ease-out;
    transition: all 600ms ease-out;
}
.animation-element.slide-in-left {
    -moz-transform: translate3d(-200px, 0px, 0px);
    -webkit-transform: translate3d(-200px, 0px, 0px);
    -o-transform: translate(-200px, 0px);
    -ms-transform: translate(-200px, 0px);
    transform: translate3d(-200px, 0px, 0px);
}
.animation-element.slide-in-left-delayed {
    -moz-transform: translate3d(-200px, 0px, 0px);
    -webkit-transform: translate3d(-200px, 0px, 0px);
    -o-transform: translate(-200px, 0px);
    -ms-transform: translate(-200px, 0px);
    transform: translate3d(-200px, 0px, 0px);
}
.animation-element.slide-in-right {
    -moz-transform: translate3d(200px, 0px, 0px);
    -webkit-transform: translate3d(200px, 0px, 0px);
    -o-transform: translate(200px, 0px);
    -ms-transform: translate(200px, 0px);
    transform: translate3d(200px, 0px, 0px);
}
.animation-element.slide-in-right-delayed {
    -moz-transform: translate3d(200px, 0px, 0px);
    -webkit-transform: translate3d(200px, 0px, 0px);
    -o-transform: translate(200px, 0px);
    -ms-transform: translate(200px, 0px);
    transform: translate3d(200px, 0px, 0px);
}
.animation-element.slide-up {
    -moz-transform: translate3d(0px, 150px, 0px);
    -webkit-transform: translate3d(0px, 150px, 0px);
    -o-transform: translate(0px, 150px);
    -ms-transform: translate(0px, 150px);
    transform: translate3d(0px, 150px, 0px);
}
.animation-element.slide-up-delayed-1 {
    -moz-transform: translate3d(0px, 150px, 0px);
    -webkit-transform: translate3d(0px, 150px, 0px);
    -o-transform: translate(0px, 150px);
    -ms-transform: translate(0px, 150px);
    transform: translate3d(0px, 150px, 0px);
}
.animation-element.slide-up-delayed-2{
    -moz-transform: translate3d(0px, 150px, 0px);
    -webkit-transform: translate3d(0px, 150px, 0px);
    -o-transform: translate(0px, 150px);
    -ms-transform: translate(0px, 150px);
    transform: translate3d(0px, 150px, 0px);
}

.animation-element.slide-down {
    -moz-transform: translate3d(0px, -100px, 0px);
    -webkit-transform: translate3d(0px, -100px, 0px);
    -o-transform: translate(0px, -100px);
    -ms-transform: translate(0px, -100px);
    transform: translate3d(0px, -100px, 0px);
}
.animation-element.slide-down-delayed-1 {
    -moz-transform: translate3d(0px, -100px, 0px);
    -webkit-transform: translate3d(0px, -100px, 0px);
    -o-transform: translate(0px, -100px);
    -ms-transform: translate(0px, -100px);
    transform: translate3d(0px, -100px, 0px);
}
.animation-element.slide-down-delayed-2 {
    -moz-transform: translate3d(0px, -100px, 0px);
    -webkit-transform: translate3d(0px, -100px, 0px);
    -o-transform: translate(0px, -100px);
    -ms-transform: translate(0px, -100px);
    transform: translate3d(0px, -100px, 0px);
}

/* --- The second part of the stylesheet sets the position and opacity of animation elements when they are "in-view"  --- */
.animation-element.in-view {
    opacity: 1;
}
.animation-element.pop-in.in-view {
    -webkit-animation: pop-in 0.6s;
    -moz-animation: pop-in 0.6s;
    -ms-animation: pop-in 0.6s;
}
.animation-element.pop-in-slow.in-view {
    -webkit-animation: pop-in 0.8s;
    -moz-animation: pop-in 0.8s;
    -ms-animation :pop-in 0.8s;
}
.animation-element.slide-in-left.in-view {
    -moz-transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate3d(0px, 0px, 0px);
}
.animation-element.slide-in-left-delayed.in-view {
    -moz-transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate3d(0px, 0px, 0px);
    -webkit-transition-delay: 400ms;
    transition-delay: 400ms;
}
.animation-element.slide-in-right.in-view {
    -moz-transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate3d(0px, 0px, 0px);
}
.animation-element.slide-in-right-delayed.in-view {
    -moz-transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate3d(0px, 0px, 0px);
    -webkit-transition-delay: 200ms; 
    transition-delay: 200ms;
}
.animation-element.slide-down.in-view {
    -moz-transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate3d(0px, 0px, 0px);
}
.animation-element.slide-down-delayed-1.in-view {
    -moz-transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate3d(0px, 0px, 0px);
    -webkit-transition-delay: 200ms; 
    transition-delay: 200ms;
}
.animation-element.slide-down-delayed-2.in-view {
    -moz-transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate3d(0px, 0px, 0px);
    -webkit-transition-delay: 400ms; 
    transition-delay: 400ms;
}
.animation-element.slide-up.in-view {
    -moz-transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate3d(0px, 0px, 0px);
}
.animation-element.slide-up-delayed-1.in-view {
    -moz-transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate3d(0px, 0px, 0px);
    -webkit-transition-delay: 200ms; 
    transition-delay: 200ms;
}
.animation-element.slide-up-delayed-2.in-view {
    -moz-transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate3d(0px, 0px, 0px);
    -webkit-transition-delay: 400ms; 
    transition-delay: 400ms;
}