/* ANIMATION */

.animation-element {
    opacity: 0;
    position: relative;
}
/*animation element sliding left*/

.animation-element.slide-left {
    opacity: 0;
    -moz-transition: all 500ms linear;
    -webkit-transition: all 500ms linear;
    -o-transition: all 500ms linear;
    transition: all 500ms linear;
    -moz-transform: translate3d(-100px, 0px, 0px);
    -webkit-transform: translate3d(-100px, 0px, 0px);
    -o-transform: translate(-100px, 0px);
    -ms-transform: translate(-100px, 0px);
    transform: translate3d(-100px, 0px, 0px);
}

.animation-element.slide-left.in-view {
    opacity: 1;
    -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-right {
    opacity: 0;
    -moz-transition: all 500ms linear;
    -webkit-transition: all 500ms linear;
    -o-transition: all 500ms linear;
    transition: all 500ms linear;
    -moz-transform: translate3d(100px, 0px, 0px);
    -webkit-transform: translate3d(100px, 0px, 0px);
    -o-transform: translate(100px, 0px);
    -ms-transform: translate(100px, 0px);
    transform: translate3d(100px, 0px, 0px);
}

.animation-element.slide-bottom {
    opacity: 0;
    -moz-transition: all 500ms linear;
    -webkit-transition: all 500ms linear;
    -o-transition: all 500ms linear;
    transition: all 500ms linear;
    -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-bottom.in-view, .animation-element.slide-right.in-view, .animation-element.slide-left.in-view,
div [data-drupal-selector="edit-layout-builder-layout-wrapper"] .animation-element,
#layout-builder .animation-element{
    opacity: 1;
    -moz-transform: translate3d(0px, 0px, 0px)!important;
    -webkit-transform: translate3d(0px, 0px, 0px)!important;
    -o-transform: translate(0px, 0px)!important;
    -ms-transform: translate(0px, 0px)!important;
    transform: translate3d(0px, 0px, 0px)!important;
}
.animation-element.event-counter.in-view{
    opacity: 1;
}

@media screen and (max-width: 992px) {
    .animation-element.slide-bottom {
        opacity: 0;
        -moz-transition: all 300ms ease-in-out;
        -webkit-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
        -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);
    }
}