OwlCyberSecurity - MANAGER

Edit File: _animations.scss

@-webkit-keyframes slidein {
    0%      { -webkit-transform: translate3d(0, 3rem, 0); }
    100%    { -webkit-transform: none; }
}
@-moz-keyframes slidein {
    0%      { -moz-transform: translate3d(0, 3rem, 0); }
    100%    { -moz-transform: none; }
}
@-ms-keyframes slidein {
    0%      { -ms-transform: translate3d(0, 3rem, 0); }
    100%    { -ms-transform: none; }
}
@-o-keyframes slidein {
    0%      { -o-transform: translate3d(0, 3rem, 0); }
    100%    { -o-transform: none; }
}
@keyframes slidein {
    0%      { transform: translate3d(0, 3rem, 0); }
    100%    { transform: none; }
}

@-webkit-keyframes slideout {
    0%      { -webkit-transform: none; }
    100%    { -webkit-transform: translate3d(0, -3rem, 0); }
}
@-moz-keyframes slideout {
    0%      { -moz-transform: none; }
    100%    { -moz-transform: translate3d(0, -3rem, 0); }
}
@-ms-keyframes slideout {
    0%      { -ms-transform: none; }
    100%    { -ms-transform: translate3d(0, -3rem, 0); }
}
@-o-keyframes slideout {
    0%      { -o-transform: none; }
    100%    { -o-transform: translate3d(0, -3rem, 0); }
}
@keyframes slideout {
    0%      { transform: none; }
    100%    { transform: translate3d(0, -3rem, 0); }
}

@-webkit-keyframes slidein-fromleft {
    0%      { -webkit-transform: translate3d(-100%, 0, 0); width: 0; }
    100%    { -webkit-transform: none; width: 100%; }
}
@-moz-keyframes slidein-fromleft {
    0%      { -moz-transform: translate3d(-100%, 0, 0); width: 0; }
    100%    { -moz-transform: none; width: 100%; }
}
@-ms-keyframes slidein-fromleft {
    0%      { -ms-transform: translate3d(-100%, 0, 0); width: 0; }
    100%    { -ms-transform: none; width: 100%; }
}
@-o-keyframes slidein-fromleft {
    0%      { -o-transform: translate3d(-100%, 0, 0); width: 0; }
    100%    { -o-transform: none; width: 100%; }
}
@keyframes slidein-fromleft {
    0%      { transform: translate3d(-100%, 0, 0); width: 0; }
    100%    { transform: none; width: 100%; }
}

@-webkit-keyframes slideout-toright {
    0%      { -webkit-transform: none; width: 100%; }
    100%    { -webkit-transform: translate3d(100%, 0, 0); width: 0; }
}
@-moz-keyframes slideout-toright {
    0%      { -moz-transform: none; width: 100%; }
    100%    { -moz-transform: translate3d(100%, 0, 0); width: 0; }
}
@-ms-keyframes slideout-toright {
    0%      { -ms-transform: none; width: 100%; }
    100%    { -ms-transform: translate3d(100%, 0, 0); width: 0; }
}
@-o-keyframes slideout-toright {
    0%      { -o-transform: none; width: 100%; }
    100%    { -o-transform: translate3d(100%, 0, 0); width: 0; }
}
@keyframes slideout-toright {
    0%      { transform: none; width: 100%; }
    100%    { transform: translate3d(100%, 0, 0); width: 0; }
}

@-webkit-keyframes fadein {
    0%      { opacity: 0; }
    100%    { opacity: 1; }
}
@-moz-keyframes fadein {
    0%      { opacity: 0; }
    100%    { opacity: 1; }
}
@-ms-keyframes fadein {
    0%      { opacity: 0; }
    100%    { opacity: 1; }
}
@-o-keyframes fadein {
    0%      { opacity: 0; }
    100%    { opacity: 1; }
}
@keyframes fadein {
    0%      { opacity: 0; }
    100%    { opacity: 1; }
}

@-webkit-keyframes fadeout {
    0%      { opacity: 1; }
    100%    { opacity: 0; }
}
@-moz-keyframes fadeout {
    0%      { opacity: 1; }
    100%    { opacity: 0; }
}
@-ms-keyframes fadeout {
    0%      { opacity: 1; }
    100%    { opacity: 0; }
}
@-o-keyframes fadeout {
    0%      { opacity: 1; }
    100%    { opacity: 0; }
}
@keyframes fadeout {
    0%      { opacity: 1; }
    100%    { opacity: 0; }
}

.single .featured-image,
.page .featured-image,
.single-lens_gallery .pixslider,
#gmap {

.no-android-browser & {
        opacity: 0;
        @include backface-visibility(hidden);
        @include perspective(1000px);
    }

.no-android-browser.no-cssanimations.loaded & { 
        opacity: 1; 
    }

.no-android-browser.no-cssanimations.loading & {
        opacity: 0;
    }

.no-android-browser.cssanimations.loaded & {
        -webkit-animation: slidein .25s ease-in-out forwards, fadein .25s ease-in-out forwards;
           -moz-animation: slidein .25s ease-in-out forwards, fadein .25s ease-in-out forwards;
             -o-animation: slidein .25s ease-in-out forwards, fadein .25s ease-in-out forwards;
                animation: slidein .25s ease-in-out forwards, fadein .25s ease-in-out forwards;
    }

.no-android-browser.cssanimations.loading & {
        opacity: 1;
        -webkit-animation: slideout .25s ease-in-out forwards, fadeout .25s ease-in-out forwards;
           -moz-animation: slideout .25s ease-in-out forwards, fadeout .25s ease-in-out forwards;
             -o-animation: slideout .25s ease-in-out forwards, fadeout .25s ease-in-out forwards;
                animation: slideout .25s ease-in-out forwards, fadeout .25s ease-in-out forwards;
    }
}

.single-lens_gallery .pixslider .rsBullets,
.single-lens_gallery .gallery-control,
.masonry__pagination a,
.mosaic__filter, .cart--widget {

.no-android-browser &{    
        opacity: 0;
        @include backface-visibility(hidden);
        @include perspective(1000px);
    }

.no-android-browser.no-cssanimations.loaded & {
        opacity: 1;
    }

.no-android-browser.no-cssanimations.loading & {
        opacity: 0;
    }

.no-android-browser.cssanimations.loaded & {
        -webkit-animation: slidein .25s .5s ease-in-out forwards, fadein .25s .5s ease-in-out forwards;
           -moz-animation: slidein .25s .5s ease-in-out forwards, fadein .25s .5s ease-in-out forwards;
             -o-animation: slidein .25s .5s ease-in-out forwards, fadein .25s .5s ease-in-out forwards;
                animation: slidein .25s .5s ease-in-out forwards, fadein .25s .5s ease-in-out forwards;
    }

}

.single .entry__title,
.page .entry__title {

.no-android-browser &{
        opacity: 0;
        @include backface-visibility(hidden);
        @include perspective(1000px);
    }

.no-android-browser.no-cssanimations.loaded & {
        opacity: 1;
    }

.no-android-browser.no-cssanimations.loading & {
        opacity: 0;
    }

.no-android-browser.cssanimations.loaded & {
        -webkit-animation: slidein .45s .15s bezier(easeOutBackF) forwards, fadein .45s .15s ease-in-out forwards;
        -webkit-animation: slidein .45s .15s bezier(easeOutBack) forwards, fadein .45s .15s ease-in-out forwards;
           -moz-animation: slidein .45s .15s bezier(easeOutBack) forwards, fadein .45s .15s ease-in-out forwards;
             -o-animation: slidein .45s .15s bezier(easeOutBack) forwards, fadein .45s .15s ease-in-out forwards;
                animation: slidein .45s .15s bezier(easeOutBack) forwards, fadein .45s .15s ease-in-out forwards;
    }

.no-android-browser.cssanimations.loading & {
        opacity: 1;
        -webkit-animation: slideout .45s .15s bezier(easeInBackF) forwards, fadeout .45s .15s ease-in-out forwards;
        -webkit-animation: slideout .45s .15s bezier(easeInBack) forwards, fadeout .45s .15s ease-in-out forwards;
           -moz-animation: slideout .45s .15s bezier(easeInBack) forwards, fadeout .45s .15s ease-in-out forwards;
             -o-animation: slideout .45s .15s bezier(easeInBack) forwards, fadeout .45s .15s ease-in-out forwards;
                animation: slideout .45s .15s bezier(easeInBack) forwards, fadeout .45s .15s ease-in-out forwards;
    }

}

.single .separator--dotted,
.page .separator--dotted {

.no-android-browser & {
        @include backface-visibility(hidden);
        @include perspective(1000px);
    }

.no-android-browser.cssanimations.loaded & {
        -webkit-animation: slidein-fromleft .3s .3s bezier(easeOutBackF) forwards;
        -webkit-animation: slidein-fromleft .3s .3s bezier(easeOutBack) forwards;
           -moz-animation: slidein-fromleft .3s .3s bezier(easeOutBack) forwards;
             -o-animation: slidein-fromleft .3s .3s bezier(easeOutBack) forwards;
                animation: slidein-fromleft .3s .3s bezier(easeOutBack) forwards;
    }

.no-android-browser.cssanimations.loading & {
        -webkit-animation: slideout-toright .2s .3s bezier(easeInBackF) forwards;
        -webkit-animation: slideout-toright .2s .3s bezier(easeInBack) forwards;
           -moz-animation: slideout-toright .2s .3s bezier(easeInBack) forwards;
             -o-animation: slideout-toright .2s .3s bezier(easeInBack) forwards;
                animation: slideout-toright .2s .3s bezier(easeInBack) forwards;
    }

.no-android-browser.no-cssanimations.loaded & {
        opacity: 1;
    }

.no-android-browser.no-cssanimations.loading & {
        opacity: 0;
    }
}

.single .entry__body,
.page .entry__body {

.no-android-browser & {
        opacity: 0;
        @include backface-visibility(hidden);
        // @include perspective(1000px);
    }

.no-android-browser.no-cssanimations.loaded & {
        opacity: 1;
    }

.no-android-browser.no-cssanimations.loading & {
        opacity: 0;
    }

.no-android-browser.cssanimations.loaded & {
        -webkit-animation: slidein .35s .25s bezier(easeOutBackF) forwards, fadein .35s .25s ease-in-out forwards;
        -webkit-animation: slidein .35s .25s bezier(easeOutBack) forwards, fadein .35s .25s ease-in-out forwards;
           -moz-animation: slidein .35s .25s bezier(easeOutBack) forwards, fadein .35s .25s ease-in-out forwards;
             -o-animation: slidein .35s .25s bezier(easeOutBack) forwards, fadein .35s .25s ease-in-out forwards;
                animation: slidein .35s .25s bezier(easeOutBack) forwards, fadein .35s .25s ease-in-out forwards;
    }

.no-android-browser.cssanimations.loading & {
        opacity: 1;
        -webkit-animation: slideout .35s .25s bezier(easeInBackF) forwards, fadeout .35s .25s ease-in-out forwards;
        -webkit-animation: slideout .35s .25s bezier(easeInBack) forwards, fadeout .35s .25s ease-in-out forwards;
           -moz-animation: slideout .35s .25s bezier(easeInBack) forwards, fadeout .35s .25s ease-in-out forwards;
             -o-animation: slideout .35s .25s bezier(easeInBack) forwards, fadeout .35s .25s ease-in-out forwards;
                animation: slideout .35s .25s bezier(easeInBack) forwards, fadeout .35s .25s ease-in-out forwards;
    }
}

.sidebar--right {

.no-android-browser & {
        opacity: 0;
        @include backface-visibility(hidden);
        // @include perspective(1000px);
    }

.no-android-browser.loaded & {
        -webkit-animation: slidein .5s .5s bezier(easeOutBackF) forwards, fadein .5s .5s ease-in-out forwards;
        -webkit-animation: slidein .5s .5s bezier(easeOutBack) forwards, fadein .5s .5s ease-in-out forwards;
           -moz-animation: slidein .5s .5s bezier(easeOutBack) forwards, fadein .5s .5s ease-in-out forwards;
             -o-animation: slidein .5s .5s bezier(easeOutBack) forwards, fadein .5s .5s ease-in-out forwards;
                animation: slidein .5s .5s bezier(easeOutBack) forwards, fadein .5s .5s ease-in-out forwards;
    }

.no-android-browser.no-cssanimations.loaded & {
        opacity: 1;
    }

.no-android-browser.no-cssanimations.loading & {
        opacity: 0;
    }

.no-android-browser.loading & {
        opacity: 1;
        -webkit-animation: slideout .5s .5s bezier(easeInBackF) forwards, fadeout .5s .5s ease-in-out forwards;
        -webkit-animation: slideout .5s .5s bezier(easeInBack) forwards, fadeout .5s .5s ease-in-out forwards;
           -moz-animation: slideout .5s .5s bezier(easeInBack) forwards, fadeout .5s .5s ease-in-out forwards;
             -o-animation: slideout .5s .5s bezier(easeInBack) forwards, fadeout .5s .5s ease-in-out forwards;
                animation: slideout .5s .5s bezier(easeInBack) forwards, fadeout .5s .5s ease-in-out forwards;
    }
}