/* -----------------------
    POSITION ELEMENT
-------------------------*/
/* .posiion__element__ready__wrap {
	width: 100vw;
    display: block;
    transform: translateX(-50%);
    position: relative;
    left: 50%;
} */

.jump{
    -webkit-animation-name: jump;
    animation-name: jump;
}
@-webkit-keyframes jump {
 0% {transform: translate3d(0px, 0px, 0px);}40% {transform: translate3d(0px, 50%, 0px);}100% {transform: translate3d(0px, 0px, 0px);}
}
@keyframes jump {
 0% {transform: translate3d(0px, 0px, 0px);}40% {transform: translate3d(0px, 50%, 0px);}100% {transform: translate3d(0px, 0px, 0px);}
}

.rotated{
    -webkit-animation-name: rotated;
    animation-name: rotated;
}
@-webkit-keyframes rotated {
 0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}
}
@keyframes rotated {
 0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}
}

.rotatedHalf{
    -webkit-animation-name: rotatedHalf;
    animation-name: rotatedHalf;
}
@-webkit-keyframes rotatedHalf {
 0% {transform: rotate(0deg);}50% {transform: rotate(90deg);}100% {transform: rotate(0deg);}
}
@keyframes rotatedHalf {
 0% {transform: rotate(0deg);}50% {transform: rotate(90deg);}100% {transform: rotate(0deg);}
}

.rotatedHalfTwo{
    -webkit-animation-name: rotatedHalfTwo;
    animation-name: rotatedHalfTwo;
}
@-webkit-keyframes rotatedHalfTwo {
 0% {transform: rotate(-90deg);}100% {transform: rotate(90deg);}
}
@keyframes rotatedHalfTwo {
 0% {transform: rotate(-90deg);}100% {transform: rotate(90deg);}
}

.scaleUpOne{
    -webkit-animation-name: scaleUpOne;
    animation-name: scaleUpOne;
}
@-webkit-keyframes scaleUpOne {
 0% {transform: scale(1);}100% {transform: scale(0.2);}
}
@keyframes scaleUpOne {
 0% {transform: scale(1);}100% {transform: scale(0.2);}
}

.scaleRight{
    -webkit-animation-name: scaleRight;
    animation-name: scaleRight;
}
@-webkit-keyframes scaleRight {
 0% {transform: translateX(-50%);}50% {transform: translateX(50%);}100% {transform: translateX(-50%);}
}
@keyframes scaleRight {
 0% {transform: translateX(-50%);}50% {transform: translateX(50%);}100% {transform: translateX(-50%);}
}

.fade_in{
    -webkit-animation-name: fade_in;
    animation-name: fade_in;
}
@-webkit-keyframes fade_in {
 0% {opacity: 0.7;}40% {opacity: 1;}100% {opacity: 0.7;}
}
@keyframes fade_in {
 0% {opacity: 0.7;}40% {opacity: 1;}100% {opacity: 0.7;}
}

.prettyFade{
    -webkit-animation-name: prettyFade;
    animation-name: prettyFade;
}
@-webkit-keyframes prettyFade{
 0%{-webkit-filter:brightness(1) contrast(1) saturate(1);};100%{-webkit-filter:brightness(0) contrast(5) saturate(0.5); };
}
@keyframes prettyFade{
 0%{-webkit-filter:brightness(1) contrast(1) saturate(1);};100%{-webkit-filter:brightness(0) contrast(5) saturate(0.5); };
}

.rippleOutOne{
    -webkit-animation-name: rippleOutOne;
    animation-name: rippleOutOne;
}
@-webkit-keyframes rippleOutOne {
 0% {bottom: 0;left: 0;opacity: 1;right: 0;top: 0;}100% {bottom: -6px;left: -6px;opacity: 0;right: -6px;top: -6px;}
}
@keyframes rippleOutOne {
 0% {bottom: 0;left: 0;opacity: 1;right: 0;top: 0;}100% {bottom: -6px;left: -6px;opacity: 0;right: -6px;top: -6px;}
}

.rippleOuTwo{
    -webkit-animation-name: rippleOuTwo;
    animation-name: rippleOuTwo;
}
@-webkit-keyframes rippleOuTwo {
 0% {bottom: 0;left: 0;opacity: 1;right: 0;top: 0;}100% {bottom: -12px;left: -12px;opacity: 0;right: -12px;top: -12px;}
}
@keyframes rippleOuTwo {
 0% {bottom: 0;left: 0;opacity: 1;right: 0;top: 0;}100% {bottom: -12px;left: -12px;opacity: 0;right: -12px;top: -12px;}
}

.scaleUpOne{
    -webkit-animation-name: scaleUpOne;
    animation-name: scaleUpOne;
}
@keyframes scaleUpOne {
 0% {transform: scale(1);}40% {transform: scale(0.5);}100% {transform: scale(1);}
}

.scaleUpTwo{
    -webkit-animation-name: scaleUpTwo;
    animation-name: scaleUpTwo;
}
@-webkit-keyframes scaleUpTwo {
 0% {transform: scale(0.5);}40% {transform: scale(0.8);}100% {transform: scale(0.5);}
}
@keyframes scaleUpTwo {
 0% {transform: scale(0.5);}40% {transform: scale(0.8);}100% {transform: scale(0.5);}
}

.scaleUpThree{
    -webkit-animation-name: scaleUpThree;
    animation-name: scaleUpThree;
}
@-webkit-keyframes scaleUpThree {
 0% {transform: scale(0.7);}40% {transform: scale(0.4);}100% {transform: scale(0.7);}
}
@keyframes scaleUpThree {
 0% {transform: scale(0.7);}40% {transform: scale(0.4);}100% {transform: scale(0.7);}
}

.FramesOne{
    -webkit-animation-name: FramesOne;
    animation-name: FramesOne;
}
@-webkit-keyframes FramesOne {
 0% {transform: translate(0px, 0px) rotate(0deg);}20% {transform: translate(73px, -1px) rotate(36deg);}40% {transform: translate(141px, 72px) rotate(72deg);}60% {transform: translate(83px, 122px) rotate(108deg);}80% {transform: translate(-40px, 72px) rotate(144deg);}100% {transform: translate(0px, 0px) rotate(0deg);}
}
@keyframes FramesOne {
 0% {transform: translate(0px, 0px) rotate(0deg);}20% {transform: translate(73px, -1px) rotate(36deg);}40% {transform: translate(141px, 72px) rotate(72deg);}60% {transform: translate(83px, 122px) rotate(108deg);}80% {transform: translate(-40px, 72px) rotate(144deg);}100% {transform: translate(0px, 0px) rotate(0deg);}
}

.FramesTwo{
    -webkit-animation-name: FramesTwo;
    animation-name: FramesTwo;
}
@-webkit-keyframes FramesTwo {
 0% {transform: translate(0px, 0px) rotate(0deg) scale(1);}20% {transform: translate(73px, -1px) rotate(36deg) scale(0.9);}40% {transform: translate(141px, 72px) rotate(72deg) scale(1);}60% {transform: translate(83px, 122px) rotate(108deg) scale(1.2);}80% {transform: translate(-40px, 72px) rotate(144deg) scale(1.1);}100% {transform: translate(0px, 0px) rotate(0deg) scale(1);}
}
@keyframes FramesTwo {
 0% {transform: translate(0px, 0px) rotate(0deg) scale(1);}20% {transform: translate(73px, -1px) rotate(36deg) scale(0.9);}40% {transform: translate(141px, 72px) rotate(72deg) scale(1);}60% {transform: translate(83px, 122px) rotate(108deg) scale(1.2);}80% {transform: translate(-40px, 72px) rotate(144deg) scale(1.1);}100% {transform: translate(0px, 0px) rotate(0deg) scale(1);}
}

.FramesThree{
    -webkit-animation-name: FramesThree;
    animation-name: FramesThree;
}
@-webkit-keyframes FramesThree {
 0% {transform: translate(165px, -179px);}100% {transform: translate(-346px, 617px);}
}
@keyframes FramesThree {
 0% {transform: translate(165px, -179px);}100% {transform: translate(-346px, 617px);}
}

.FramesFour{
    -webkit-animation-name: FramesFour;
    animation-name: FramesFour;
}
@-webkit-keyframes FramesFour {
 0% {transform: translate(-300px, 151px) rotate(0deg);}100% {transform: translate(251px, -200px) rotate(180deg);}
}
@keyframes FramesFour {
 0% {transform: translate(-300px, 151px) rotate(0deg);}100% {transform: translate(251px, -200px) rotate(180deg);}
}

.FramesFive{
    -webkit-animation-name: FramesFive;
    animation-name: FramesFive;
}
@-webkit-keyframes FramesFive {
 0% {transform: translate(61px, -99px) rotate(0deg);}21% {transform: translate(4px, -190px) rotate(38deg);}41% {transform: translate(-139px, -200px) rotate(74deg);}60% {transform: translate(-263px, -164px) rotate(108deg);}80% {transform: translate(-195px, -49px) rotate(144deg);}100% {transform: translate(-1px, 0px) rotate(180deg);}
}
@keyframes FramesFive {
 0% {transform: translate(61px, -99px) rotate(0deg);}21% {transform: translate(4px, -190px) rotate(38deg);}41% {transform: translate(-139px, -200px) rotate(74deg);}60% {transform: translate(-263px, -164px) rotate(108deg);}80% {transform: translate(-195px, -49px) rotate(144deg);}100% {transform: translate(-1px, 0px) rotate(180deg);}
}

.gradientBG{
    -webkit-animation-name: gradientBG;
    animation-name: gradientBG;
}
@-webkit-keyframes gradientBG {
 0% {background-position: 0 0;}50% {background-position: 300% 0;}100% {background-position: 0 0;}
}
@keyframes gradientBG {
 0% {background-position: 0 0;}50% {background-position: 300% 0;}100% {background-position: 0 0;}
}

.gradientBG{
    -webkit-animation-name: gradientBG;
    animation-name: gradientBG;
}
@keyframes gradientBG {
 0% {background-position: 0 0;}50% {background-position: 120% 0;}100% {background-position: 0 0;}
}


.bgMove{
    -webkit-animation-name: bgMove;
    animation-name: bgMove;
}
@-webkit-keyframes bgMove {
 from { background-position: 0 0; }to { background-position: -400px 0; }
}
@keyframes bgMove {
 from { background-position: 0 0; }to { background-position: -400px 0; }
}

.imageBgAnim{
    -webkit-animation-name: imageBgAnim;
    animation-name: imageBgAnim;
}
@-webkit-keyframes imageBgAnim {
 0% {background-position: 0 0;}50% {background-position: 120% 0;}100% {background-position: 0 0;}
}
@keyframes imageBgAnim {
 0% {background-position: 0 0;}50% {background-position: 120% 0;}100% {background-position: 0 0;}
}

.zoomBounce{
    -webkit-animation-name: zoomBounce;
    animation-name: zoomBounce;
}
@-webkit-keyframes zoomBounce {
 0% {transform: scale(0.9)translateY(-50%);}50% {transform: scale(1)translateY(-60%);}100% {transform: scale(0.9)translateY(-50%);}
}
@keyframes zoomBounce {
 0% {transform: scale(0.9)translateY(-50%);}50% {transform: scale(1)translateY(-60%);}100% {transform: scale(0.9)translateY(-50%);}
}

.ballBounce{
    -webkit-animation-name: ballBounce;
    animation-name: ballBounce;
}
@-webkit-keyframes ballBounce {
 0% {transform: translateX(-20px) scale(1, 1.2);}25% {transform: scale(1.2, 1);}50% {transform: translateX(15px) scale(1, 1.2);}75% {transform: scale(1.2, 1);}100% {transform: translateX(-20px);}
}
@keyframes ballBounce {
 0% {transform: translateX(-20px) scale(1, 1.2);}25% {transform: scale(1.2, 1);}50% {transform: translateX(15px) scale(1, 1.2);}75% {transform: scale(1.2, 1);}100% {transform: translateX(-20px);}
}

.bigSpin{
    -webkit-animation-name: bigSpin;
    animation-name: bigSpin;
}
@-webkit-keyframes bigSpin {
 0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}
}
@keyframes bigSpin {
 0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}
}


.Zoom_In_Out{
    -webkit-animation: zoom-in-out;
    animation: zoom-in-out;
}
@-webkit-keyframes zoom-in-out {
    0% {
        transform: scale(0.9)
    }

    50% {
        transform: scale(1.1)
    }

    100% {
        transform: scale(0.9)
    }
}
@keyframes zoom-in-out {
    0% {
        transform: scale(0.9)
    }

    50% {
        transform: scale(1.1)
    }

    100% {
        transform: scale(0.9)
    }
}

.Circle_Large{
    -webkit-animation: circle-large;
    animation: circle-large;
}
@-webkit-keyframes circle-large {
    0% {
        transform: rotate(0deg) translate(-150px) rotate(0deg);
    }

    100% {
        transform: rotate(360deg) translate(-150px) rotate(-360deg);
    }
}
@keyframes circle-large {
    0% {
        transform: rotate(0deg) translate(-150px) rotate(0deg);
    }

    100% {
        transform: rotate(360deg) translate(-150px) rotate(-360deg);
    }
}

.Fade_In_Out{
    -webkit-animation: fade-in-out;
    animation: fade-in-out;
}
@-webkit-keyframes fade-in-out {
     0% {
        opacity: 0;
        transform: scale(0);
    }

    50% {
        opacity: 1;
        transform: scale(0.5);
    }

    100% {
        opacity: 0;
        transform: scale(1);
    }
}
@keyframes fade-in-out {
     0% {
        opacity: 0;
        transform: scale(0);
    }

    50% {
        opacity: 1;
        transform: scale(0.5);
    }

    100% {
        opacity: 0;
        transform: scale(1);
    }
}

.blurFadeInOut{
    -webkit-animation-name: blurFadeInOut;
    animation-name: blurFadeInOut;
}
@-webkit-keyframes blurFadeInOut {
    0% {opacity: 0;text-shadow: 0px 0px 40px #ffffff;transform: scale(1.3);}20%, 75% {opacity: 1;text-shadow: 0px 0px 1px #ffffff;transform: scale(1);}100% {opacity: 0;text-shadow: 0px 0px 50px #ffffff;transform: scale(0);}
}
@keyframes blurFadeInOut {
    0% {opacity: 0;text-shadow: 0px 0px 40px #ffffff;transform: scale(1.3);}20%, 75% {opacity: 1;text-shadow: 0px 0px 1px #ffffff;transform: scale(1);}100% {opacity: 0;text-shadow: 0px 0px 50px #ffffff;transform: scale(0);}
}

.blurFadeIn{
    -webkit-animation-name: blurFadeIn;
    animation-name: blurFadeIn;
}
@-webkit-keyframes blurFadeIn {
    0% {opacity: 0;text-shadow: 0px 0px 40px #ffffff;transform: scale(1.3);}50% {opacity: 0.5;text-shadow: 0px 0px 10px #ffffff;transform: scale(1.1);}100% {opacity: 1;text-shadow: 0px 0px 1px #ffffff;transform: scale(1);}
}
@keyframes blurFadeIn {
    0% {opacity: 0;text-shadow: 0px 0px 40px #ffffff;transform: scale(1.3);}50% {opacity: 0.5;text-shadow: 0px 0px 10px #ffffff;transform: scale(1.1);}100% {opacity: 1;text-shadow: 0px 0px 1px #ffffff;transform: scale(1);}
}

.fadeInBack{
    -webkit-animation-name: fadeInBack;
    animation-name: fadeInBack;
}
@-webkit-keyframes fadeInBack {
    0% {opacity: 0;transform: scale(0);}50% {opacity: 0.4;transform: scale(2);}100% {opacity: 0.2;transform: scale(5);}
}
@keyframes fadeInBack {
    0% {opacity: 0;transform: scale(0);}50% {opacity: 0.4;transform: scale(2);}100% {opacity: 0.2;transform: scale(5);}
}

.fadeInRotate{
    -webkit-animation-name: fadeInRotate;
    animation-name: fadeInRotate;
}
@-webkit-keyframes fadeInRotate {
    0% {opacity: 0;transform: scale(0) rotate(360deg);}100% {opacity: 1;transform: scale(1) rotate(0deg);}
}
@keyframes fadeInRotate {
    0% {opacity: 0;transform: scale(0) rotate(360deg);}100% {opacity: 1;transform: scale(1) rotate(0deg);}
}

.bigSquare {
  -webkit-animation-name: bigSquare;
  animation-name: bigSquare;
}
@-webkit-keyframes bigSquare {
 from {transform: translateY(10%) rotate(-80deg) scale(0);}to {transform: translateY(0) rotate(0deg) scale(1);}
}
@keyframes bigSquare {
 from {transform: translateY(10%) rotate(-80deg) scale(0);}to {transform: translateY(0) rotate(0deg) scale(1);}
}

.littleSquare {
  -webkit-animation-name: littleSquare;
  animation-name: littleSquare;
}
@-webkit-keyframes littleSquare {
 from {transform: translate(226%, 183%) rotate(140deg) scale(0);}to {transform: translate(0%, 0%) rotate(0deg) scale(1);}
}
@keyframes littleSquare {
 from {transform: translate(226%, 183%) rotate(140deg) scale(0);}to {transform: translate(0%, 0%) rotate(0deg) scale(1);}
}

.triAngle {
  -webkit-animation-name: triAngle;
  animation-name: triAngle;
}
@-webkit-keyframes triAngle {
 from {transform: rotate(-140deg) scale(0);}to {transform: rotate(0deg) scale(1);}
}
@keyframes triAngle {
 from {transform: rotate(-140deg) scale(0);}to {transform: rotate(0deg) scale(1);}
}

.Hoop {
  -webkit-animation-name: Hoop;
  animation-name: Hoop;
}
@-webkit-keyframes Hoop {
 from {transform: translate(-160%, -33%) scale(0);}to {transform: translate(0%, 0%) scale(1);}
}
@keyframes Hoop {
 from {transform: translate(-160%, -33%) scale(0);}to {transform: translate(0%, 0%) scale(1);}
}

.bigCircle {
  -webkit-animation-name: bigCircle;
  animation-name: bigCircle;
}
@-webkit-keyframes bigCircle {
 from {transform: scale(0) translate(60%, 3%);}to {transform: scale(1) translate(0%, 0%);}
}
@keyframes bigCircle {
 from {transform: scale(0) translate(60%, 3%);}to {transform: scale(1) translate(0%, 0%);}
}

.littleCircle {
  -webkit-animation-name: littleCircle;
  animation-name: littleCircle;
}
@-webkit-keyframes littleCircle {
 from {transform: scale(0);}to {transform: scale(1);}
}
@keyframes littleCircle {
 from {transform: scale(0);}to {transform: scale(1);}
}



/* Dots
---------------------------*/
/*.circle_animate {z-index: 0;animation: dots 6s infinite linear;}
@keyframes dots_circle {from {transform: rotate(-360deg)}to {transform: rotate(0)}}
@keyframes dot_circle_1 {from {transform: translate(15%, 5%);opacity: 1;}to {transform: translate(25%, 5%);opacity: 1;}}
@keyframes dot_circle_2 {from {transform: translate(-8%, 8%);opacity: 1;}to {transform: translate(-19%, 19%);opacity: 1;}}
@keyframes dot_circle_3 {from {transform: translate(-5%, -12%);opacity: 1;}to {transform: translate(-10%, -24%);opacity: 1;}}*/


.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.fast {
  -webkit-animation-duration: 800ms;
  animation-duration: 800ms;
}

.animated.faster {
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
}

.animated.slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.slower {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}