/*
*   Animation Global Classes
*/
    
/*  animation-name */
.anim-name-simple_bounce_NR_animate_1 {animation-name: simple_bounce_NR_animate_1;}



    /*  animation-timing-function */
.anim-tm-fn-ease {animation-timing-function: ease;}
.anim-tm-fn-ease-in  {animation-timing-function: ease-in;}
.anim-tm-fn-ease-out  {animation-timing-function: ease-out;}
.anim-tm-fn-ease-in-out  {animation-timing-function: ease-in-out;}
.anim-tm-fn-linear  {animation-timing-function: linear;}
.anim-tm-fn-step-start  {animation-timing-function: step-start;}
.anim-tm-fn-step-end  {animation-timing-function: step-end;}

    /*animation-iteration-count*/
.anim-itr-ct-infinite {animation-iteration-count: infinite;}
.anim-itr-ct-1  {animation-iteration-count: 1;}
.anim-itr-ct-2  {animation-iteration-count: 2;}
.anim-itr-ct-3  {animation-iteration-count: 3;}
.anim-itr-ct-4  {animation-iteration-count: 4;}
.anim-itr-ct-5  {animation-iteration-count: 5;}

    /*animation-duration*/
.anim-dur-01    {animation-duration: .1s;}
.anim-dur-02    {animation-duration: .2s;}
.anim-dur-03    {animation-duration: .3s;}
.anim-dur-04    {animation-duration: .4s;}
.anim-dur-05    {animation-duration: .5s;}
.anim-dur-06    {animation-duration: .6s;}
.anim-dur-07    {animation-duration: .7s;}
.anim-dur-08    {animation-duration: .8s;}
.anim-dur-09    {animation-duration: .9s;}
.anim-dur-1     {animation-duration: 1s;}
.anim-dur-2     {animation-duration: 2s;}
.anim-dur-3     {animation-duration: 3s;}
.anim-dur-4     {animation-duration: 4s;}
.anim-dur-5     {animation-duration: 5s;}
.anim-dur-6     {animation-duration: 6s;}
.anim-dur-7     {animation-duration: 7s;}
.anim-dur-8     {animation-duration: 8s;}
.anim-dur-9     {animation-duration: 9s;}
.anim-dur-10    {animation-duration: 10s;}
.anim-dur-11    {animation-duration: 11s;}
.anim-dur-12    {animation-duration: 12s;}
.anim-dur-13    {animation-duration: 13s;}
.anim-dur-14    {animation-duration: 14s;}
.anim-dur-15    {animation-duration: 16s;}
.anim-dur-16    {animation-duration: 18s;}
.anim-dur-17    {animation-duration: 16s;}
.anim-dur-18    {animation-duration: 18s;}
.anim-dur-19    {animation-duration: 19s;}
.anim-dur-20    {animation-duration: 20s;}

/**
 *  animation delay classes
 * div {
  animation-delay: 2s;
}
*/


.anim-delay-01    {animation-delay: .1s !important;}
.anim-delay-02    {animation-delay: .2s !important;}
.anim-delay-03    {animation-delay: .3s !important;}
.anim-delay-04    {animation-delay: .4s !important;}
.anim-delay-05    {animation-delay: .5s !important;}
.anim-delay-06    {animation-delay: .6s !important;}
.anim-delay-07    {animation-delay: .7s !important;}
.anim-delay-08    {animation-delay: .8s !important;}
.anim-delay-09    {animation-delay: .9s !important;}
.anim-delay-1     {animation-delay: 1s !important;}
.anim-delay-2     {animation-delay: 2s !important;}
.anim-delay-3     {animation-delay: 3s !important;}
.anim-delay-4     {animation-delay: 4s !important;}
.anim-delay-5     {animation-delay: 5s !important;}
.anim-delay-6     {animation-delay: 6s !important;}
.anim-delay-7     {animation-delay: 7s !important;}
.anim-delay-8     {animation-delay: 8s !important;}
.anim-delay-9     {animation-delay: 9s !important;}
.anim-delay-10    {animation-delay: 10s !important;}
.anim-delay-11    {animation-delay: 11s !important;}
.anim-delay-12    {animation-delay: 12s !important;}
.anim-delay-13    {animation-delay: 13s !important;}
.anim-delay-14    {animation-delay: 14s !important;}
.anim-delay-15    {animation-delay: 16s !important;}
.anim-delay-16    {animation-delay: 18s !important;}
.anim-delay-17    {animation-delay: 16s !important;}
.anim-delay-18    {animation-delay: 18s !important;}
.anim-delay-19    {animation-delay: 19s !important;}
.anim-delay-20    {animation-delay: 20s !important;}












.simple_bounce_NR_animate img {position:relative;animation-iteration-count: infinite;animation-timing-function:ease-in-out;}
.simple_bounce_NR_animate_1 img {animation-name : simple_bounce_NR_animate_1;animation-duration: 8s;animation-fill-mode: both;}
.simple_bounce_NR_animate_2 img {animation-name : simple_bounce_NR_animate_2;animation-duration: 11s;}
.simple_bounce_NR_animate_3 img {animation-name : simple_bounce_NR_animate_3;animation-duration: 13s;}
.simple_bounce_NR_animate_4 img {animation-name : simple_bounce_NR_animate_4;animation-duration: 15s;}
.simple_bounce_NR_animate_5 img {animation-name : simple_bounce_NR_animate_5;animation-duration: 8s;}




                            /*  KeyFrames   */

                            
    /* SlideIn Down */
@keyframes slideInDown {
    0% {
        transform: translate3d(0,-100%,0);
        visibility: visible;
    }
    100% {
        transform: translate3d(0,0,0);
    }
}

.slideInDown {animation-name: slideInDown;animation-duration: 2s;animation-iteration-count: 1;}





@keyframes bgPos {
    0% {background-position: 50% 0;}
    100% {background-position: -150% 0;}
}
.animated-bg {
    background-image: linear-gradient(
        to right,
        #f6f7f8 0%,
        #edeef1 10%,
        #f6f7f8 20%,
        #f6f7f8 100%
    );
    background-size: 200% 100%;
    animation: bgPos 1s linear infinite;
}











/* Ringing Bell animation */

   

    @keyframes ring {
        0% { transform: rotate(0); }
        1% { transform: rotate(30deg); }
        3% { transform: rotate(-28deg); }
        5% { transform: rotate(34deg); }
        7% { transform: rotate(-32deg); }
        9% { transform: rotate(30deg); }
        11% { transform: rotate(-28deg); }
        13% { transform: rotate(26deg); }
        15% { transform: rotate(-24deg); }
        17% { transform: rotate(22deg); }
        19% { transform: rotate(-20deg); }
        21% { transform: rotate(18deg); }
        23% { transform: rotate(-16deg); }
        25% { transform: rotate(14deg); }
        27% { transform: rotate(-12deg); }
        29% { transform: rotate(10deg); }
        31% { transform: rotate(-8deg); }
        33% { transform: rotate(6deg); }
        35% { transform: rotate(-4deg); }
        37% { transform: rotate(2deg); }
        39% { transform: rotate(-1deg); }
        41% { transform: rotate(1deg); }

        43% { transform: rotate(0); }
        100% { transform: rotate(0); }
    }
    .bell_animation {
        animation: ring 4s .7s ease-in-out infinite;
        transform-origin: 50% 4px;
    }












/* product grid  hover animation  */
    
    /**
     * infinate mysterybox hover
     * 
    */
        @keyframes infinate_mysterybox_hover {

          0%    {transform:translateZ( -250px) rotate(0deg) rotateX(-30deg) rotateY(-45deg) rotateZ(0deg)}
          6.875%   {transform:translateZ( -250px) rotate(0deg) rotateX(-15deg) rotateY(0deg) rotateZ(0deg)}
          
          20.625%   {transform: translateZ( -250px) rotate(0deg) rotateX(-15deg) rotateY(90deg) rotateZ(0deg);}
          35.625%   {transform: translateZ( -250px) rotate(0deg) rotateX(-15deg) rotateY(90deg) rotateZ(0deg);}


          49.375%   {transform: translateZ( -250px) rotate(0deg) rotateX(-15deg) rotateY(180deg) rotateZ(0deg);}
          64.375%   {transform: translateZ( -250px) rotate(0deg) rotateX(-15deg) rotateY(180deg) rotateZ(0deg);}

          78.125%   {transform: translateZ( -250px) rotate(0deg) rotateX(-15deg) rotateY(270deg) rotateZ(0deg);}
          93.125%   {transform: translateZ( -250px) rotate(0deg) rotateX(-15deg) rotateY(270deg) rotateZ(0deg);}

          100%  {transform:translateZ( -250px) rotate(0deg) rotateX(-30deg) rotateY(315deg) rotateZ(0deg)}
        }

        .type-mysterybox .cx-my-box-wraper.box-grid-item:hover .cx-my-box.hover-animate-rotate {
            animation-name: infinate_mysterybox_hover;animation-duration: 6s;animation-iteration-count: 1;
            animation-fill-mode: forwards;transition: all 0.2s ease-in;
        }


        @keyframes infinate_mysterybox_hover_wall_1 {

            0%    {opacity: 1;z-index: 9;}

            20.625%   {opacity: 1;z-index: 9;}
            25.625%   {opacity: 0.4;z-index: 7;}
            30.625%   {opacity: 0.4;z-index: 7;}
            35.625%   {opacity: 1;z-index: 9;}

            100%  {opacity: 1;z-index: 9;}
        }
        @keyframes infinate_mysterybox_hover_wall_2 {

            0%    {opacity: 1;z-index: 9;}

            45%   {opacity: 1;z-index: 9;}
            50%   {opacity: 0.4;z-index: 7;}
            55%   {opacity: 0.4;z-index: 7;}
            60%   {opacity: 1;z-index: 9;}

            100%  {opacity: 1;z-index: 9;}
        }
        @keyframes infinate_mysterybox_hover_wall_3 {

            0%    {opacity: 1;z-index: 9;}

            75%   {opacity: 1;z-index: 9;}
            80%   {opacity: 1;z-index: 7;}
            85%   {opacity: 1;z-index: 7;}
            90%   {opacity: 1;z-index: 9;}

            100%  {opacity: 1;z-index: 9;}
        }

        .cx-my-box-wraper.box-grid-item:hover .cx-my-box.hover-animate-rotate .cx-my-box__face.cx-my-box__face--left.outer .background-container {
            animation-name: infinate_mysterybox_hover_wall_1;
            animation-duration: 6s;animation-iteration-count: 1;animation-fill-mode: forwards;
        }
        .cx-my-box-wraper.box-grid-item:hover .cx-my-box.hover-animate-rotate .cx-my-box__face.cx-my-box__face--back.outer .background-container {
            animation-name: infinate_mysterybox_hover_wall_2;
            animation-duration: 6s;animation-iteration-count: 1;animation-fill-mode: forwards;
        }
        .cx-my-box-wraper.box-grid-item:hover .cx-my-box.hover-animate-rotate .cx-my-box__face.cx-my-box__face--right .background-container {
            animation-name: infinate_mysterybox_hover_wall_3;
            animation-duration: 6s;animation-iteration-count: 1;animation-fill-mode: forwards;
        }



    /**
     * fixed mysterybox hover
     * 
    */
















/**
 * how it works
 * 
 * */


    @keyframes how_it_work_dot_animatation_1 {
        /*0% {background: white;}*/
        0% {background:var(--e-header-bg);}
        
        5% {background: var(--e-primary);}
        95% {background: var(--e-primary);}

        /*100% {background: white;}*/
        100% {background:var(--e-header-bg);}
    }
    @keyframes how_it_work_dot_animatation_2 {
        0% {background: /*white*/var(--e-header-bg);}

        22.5% {background: /*white*/var(--e-header-bg);}
        27.5% {background: var(--e-primary);}
        95% {background: var(--e-primary);}
        100% {background: /*white*/var(--e-header-bg);}
        
    }
    @keyframes how_it_work_dot_animatation_3 {
        0% {background: /*white*/var(--e-header-bg);}

        45% {background: /*white*/var(--e-header-bg);}
        50% {background: var(--e-primary);}
        95% {background: var(--e-primary);}
        100% {background: /*white*/var(--e-header-bg);}
        
    }
    @keyframes how_it_work_dot_animatation_4 {
        0% {background: /*white*/var(--e-header-bg);}

        67.5% {background: /*white*/var(--e-header-bg);}
        72.5% {background: var(--e-primary);}
        95% {background: var(--e-primary);}
        100% {background: /*white*/var(--e-header-bg);}
        
    }

    /*===============================
    ===============================*/

    @keyframes how_it_work_icon_animatation_1 {
        0% {top: 0px;}
        5% {top: -15px;}
        95% {top: -15px;}
        100% {top: 0px;}
    }
    @keyframes how_it_work_icon_animatation_2 {
        0% {top: 0px;}
        22.5% {top: 0px;}
        27.5% {top: -15px;}
        95% {top: -15px;}
        100% {top: 0px;}
        
    }
    @keyframes how_it_work_icon_animatation_3 {
        0% {top: 0px;}
        45% {top: 0px;}
        50% {top: -15px;}
        95% {top: -15px;}
        100% {top: 0px;}

        
    }
    @keyframes how_it_work_icon_animatation_4 {
        0% {top: 0px;}
        67.5% {top: 0px;}
        72.5% {top: -15px;}
        95% {top: -15px;}
        100% {top: 0px;}
        
    }



     /* check for  svgs */

    @keyframes how_it_work_icon_i_animatation_1 {
        0% {color: var(--cx-site-main-color); fill: var(--cx-site-main-color);}
        5% {color: var(--e-primary);fill:var(--e-primary);}
        95% {color: var(--e-primary);fill:var(--e-primary);}
        100% {color: var(--cx-site-main-color);fill:var(--cx-site-main-color);}
    }

    @keyframes how_it_work_icon_i_animatation_2 {
        0% {color: var(--cx-site-main-color);fill:var(--cx-site-main-color);}
        22.5% {color: var(--cx-site-main-color);fill:var(--cx-site-main-color);}   
        27.5% {color: var(--e-primary);fill:var(--e-primary);}
        95% {color: var(--e-primary);fill:var(--e-primary);}
        100% {color: var(--cx-site-main-color);fill:var(--cx-site-main-color);}
        
    }
    @keyframes how_it_work_icon_i_animatation_3 {
        0% {color: var(--cx-site-main-color);fill:var(--cx-site-main-color);}
        45% {color: var(--cx-site-main-color);fill:var(--cx-site-main-color);}
        50% {color: var(--e-primary);fill:var(--e-primary);}
        95% {color: var(--e-primary);fill:var(--e-primary);}
        100% {color: var(--cx-site-main-color);fill:var(--cx-site-main-color);}
    }
    @keyframes how_it_work_icon_i_animatation_4 {
        0% {color: var(--cx-site-main-color);fill:var(--cx-site-main-color);}
        67.5% {color: var(--cx-site-main-color);fill:var(--cx-site-main-color);}
        72.5% {color: var(--e-primary);fill:var(--e-primary);}
        95% {color: var(--e-primary);fill:var(--e-primary);}
        100% {color: var(--cx-site-main-color);fill:var(--cx-site-main-color);}    
    }



    div#how-it-work-icon-list .elementor-column::after,
    div#how-it-work-icon-list .elementor-column .elementor-icon-box-icon,
    div#how-it-work-icon-list .elementor-column .elementor-icon-box-icon i,
    div#how-it-work-icon-list .elementor-column .elementor-icon-box-icon svg * {
        animation-duration: 20s;
        animation-iteration-count: infinite;
        position: relative;
    }
    


    div#how-it-work-icon-list .elementor-column:nth-child(1)::after {
        animation-name: how_it_work_dot_animatation_1;
    }
    div#how-it-work-icon-list .elementor-column:nth-child(2)::after {
        animation-name: how_it_work_dot_animatation_2;
    }
    div#how-it-work-icon-list .elementor-column:nth-child(3)::after {
        animation-name: how_it_work_dot_animatation_3;
    }
    div#how-it-work-icon-list .elementor-column:nth-child(4)::after {
        animation-name: how_it_work_dot_animatation_4;
    }



    div#how-it-work-icon-list .elementor-column:nth-child(1) .elementor-icon-box-icon {
        animation-name: how_it_work_icon_animatation_1;
    }
    div#how-it-work-icon-list .elementor-column:nth-child(2) .elementor-icon-box-icon {
        animation-name: how_it_work_icon_animatation_2;
    }
    div#how-it-work-icon-list .elementor-column:nth-child(3) .elementor-icon-box-icon {
        animation-name: how_it_work_icon_animatation_3;
    }
    div#how-it-work-icon-list .elementor-column:nth-child(4) .elementor-icon-box-icon {
        animation-name: how_it_work_icon_animatation_4;
    }

    div#how-it-work-icon-list .elementor-column:nth-child(1) .elementor-icon-box-icon i,
    div#how-it-work-icon-list .elementor-column:nth-child(1) .elementor-icon-box-icon svg *
    {animation-name: how_it_work_icon_i_animatation_1;}

    div#how-it-work-icon-list .elementor-column:nth-child(2) .elementor-icon-box-icon i,
    div#how-it-work-icon-list .elementor-column:nth-child(2) .elementor-icon-box-icon svg *
    {animation-name: how_it_work_icon_i_animatation_2;}

    div#how-it-work-icon-list .elementor-column:nth-child(3) .elementor-icon-box-icon i,
    div#how-it-work-icon-list .elementor-column:nth-child(3) .elementor-icon-box-icon svg *
    {animation-name: how_it_work_icon_i_animatation_3;}

    div#how-it-work-icon-list .elementor-column:nth-child(4) .elementor-icon-box-icon i,
    div#how-it-work-icon-list .elementor-column:nth-child(4) .elementor-icon-box-icon svg *
    {animation-name: how_it_work_icon_i_animatation_4;}










    /**
     * simple bounce animate
     * */
    @keyframes bounce_animate {

        0%    {top: 0px;}
        25%   {top: -10px;}
        50%   {top: 0px;}
        75%   {top: 10px;}
        100%  {top: 0px;}
    }

    .bounce-animate, .bounce-animate-img-container img {
        animation-name: bounce_animate;
        animation-duration: 5s;animation-iteration-count: infinite;animation-timing-function: linear;
    }

    .bounce-animate-img-container img {
        animation-duration: 6.5s;
        position: relative;
    }
    .bounce-animate-img-container-1 img,
    .bounce-animate-img-container-2 img,
    .bounce-animate-img-container-3 img,
    .bounce-animate-img-container-4 img,
    .bounce-animate-img-container-5 img {
        position: relative;
        animation-name: bounce_animate;
        animation-iteration-count: infinite;animation-timing-function: linear;
    }

    .bounce-animate-img-container-1 img {animation-duration: 6.5s;}
    .bounce-animate-img-container-2 img {animation-duration: 4.5s;}
    .bounce-animate-img-container-3 img {animation-duration: 5.3s;}
    .bounce-animate-img-container-4 img {animation-duration: 4.9s;}
    .bounce-animate-img-container-5 img {animation-duration: 5.8s;}

    @keyframes bounce-item {
        0% {transform: translateY(0); }
        50% {transform: translateY(-20px);}
        100% {transform: translateY(0);}
    }






    @keyframes rotate_complete {

        0% {transform: rotate(0deg);}
        100% {transform: rotate(359deg);}

    }

    @keyframes bounce_and_rotate {

      0%    {
        transform:
            translateZ( calc( 0px - (var(--box-coomingsoon-img-size) * 2.5) ) ) 
            rotate(0deg) 
            rotateX(-30deg) 
            rotateY(-45deg) 
            rotateZ(0deg);
        /*top: 0px;*/
      }
      25%   {
        transform:
            translateZ( calc( 0px - (var(--box-coomingsoon-img-size) * 2.5) ) ) 
            rotate(0deg) 
            rotateX(-30deg) 
            rotateY(45deg) 
            rotateZ(0deg);
        /*top: calc( var(--box-coomingsoon-img-size) / 10 );*/
      }
      50%   {
        transform:
            translateZ( calc( 0px - (var(--box-coomingsoon-img-size) * 2.5) ) ) 
            rotate(0deg) 
            rotateX(-30deg) 
            rotateY(135deg) 
            rotateZ(0deg);
        /*top: 0px;*/
      }
      75%   {
        transform:
            translateZ( calc( 0px - (var(--box-coomingsoon-img-size) * 2.5) ) ) 
            rotate(0deg) 
            rotateX(-30deg) 
            rotateY(225deg) 
            rotateZ(0deg);
        /*top: calc( 0px - var(--box-coomingsoon-img-size) / 10 );*/
      }
      100%  {
        transform:
            translateZ( calc( 0px - (var(--box-coomingsoon-img-size) * 2.5) ) ) 
            rotate(0deg) 
            rotateX(-30deg) 
            rotateY(315deg) 
            rotateZ(0deg);
        /*top: 0px;*/
      }
    }

    @keyframes bounce_slow {
        0%    {top: 0px;}
        25%   {top: calc( var(--box-coomingsoon-img-size) / 10 );}
        50%   {top: 0px;}
        75%   {top: calc( 0px - var(--box-coomingsoon-img-size) / 10 );}
        100%  {top: 0px;}
    }
    @keyframes bounce_slow_partial {
        0%    {top: 0px;}
        25%   {top: calc( var(--box-coomingsoon-img-size) / 20 );}
        50%   {top: 0px;}
        75%   {top: calc( 0px - var(--box-coomingsoon-img-size) / 20 );}
        100%  {top: 0px;}
    }
    







    /*simple bounce animation start*/
    /*with roatation*/
   @keyframes simple_bounce_animate_1 {
        0%    {top: 0px; transform: rotate(20deg);}
        25%   {top: -10px; transform: rotate(60deg);}
        50%   {top: 0px;transform: rotate(20deg);}
        75%   {top: 8px;transform: rotate(60deg);}
        100%  {top: 0px;transform: rotate(30deg);}
    }
    @keyframes simple_bounce_animate_2 {
        0%    {top: 0px;transform: rotate(30deg);}
        20%   {top: -10px;transform: rotate(10deg);}
        50%   {top: 12px;transform: rotate(30deg);}
        75%   {top: -12px;transform: rotate(50deg);}
        100%  {top: 0px;transform: rotate(30deg);}

    }
    @keyframes simple_bounce_animate_3 {
        0%    {top: 0px;}
        25%   {top: -10px;}
        50%   {top: 0px;}
        75%   {top: 10px;}
        100%  {top: 0px;}
    }
    @keyframes simple_bounce_animate_4 {
        0%    {top: 0px;transform: rotate(50deg);}
        25%   {top: -12px;transform: rotate(90deg);}
        50%   {top: 0px;transform: rotate(20deg);}
        75%   {top: -6px;transform: rotate(80deg);}
        100%  {top: 0px;transform: rotate(30deg);}
    }
    @keyframes simple_bounce_animate_5 {
        0%    {top: 0px; transform: rotate(0deg);}
        25%   {top: 10px;transform: rotate(60deg);} 
        50%   {top: 0px;transform: rotate(-20deg);}
        75%   {top: 12px;transform: rotate(10deg);}
        100%  {top: 0px;transform: rotate(0deg);}
    }


    /* no rotation */


    /*@keyframes simple_bounce_NR_animate_1 {
        0%    {top: 0px;}
        25%   {top: -30px;}
        50%   {top: 20px;}
        75%   {top: 4px;}
        100%  {top: 0px;}
    }*/
    @keyframes simple_bounce_NR_animate_1 {
        0%    {top: -15px;}
        /*25%   {top: -15px;}*/
        /*50%   {top: 0px;}*/
        50%   {top: 15px;}
        /*75%   {top: 15px;}*/
        100%  {top: -15px;}
    }
    @keyframes simple_bounce_NR_animate_2 {
        0%    {top: -30px}
        /*25%   {top: -30px;}*/
        50%   {top: 0px;}
        /*75%   {top: 50px;}*/
        100%  {top: -30px;}

    }
    @keyframes simple_bounce_NR_animate_3 {
        0%    {top: -30px;}
        /*25%   {top: -30px;}*/
        50%   {top: 30px;}
        /*75%   {top: 30px;}*/
        100%  {top: -30px;}
    }
    @keyframes simple_bounce_NR_animate_4 {
        0%    {top: -50px;}
        /*25%   {top: -50px;}*/
        50%   {top: 0px;}
        /*75%   {top: 50px;}*/
        100%  {top: -50px;}
    }
    @keyframes simple_bounce_NR_animate_5 {
        0%    {top: 0px; }
        /*25%   {top: 10px;} */
        50%   {top: 12px;}
        /*75%   {top: 12px;}*/
        100%  {top: 0px;}
    }

/* animation end*/



/*    gemAnimation*/
    @keyframes gemAnimation {
        0% {top: -20%;}
        5% {opacity: .5}
        15% {opacity: .8;}
        100% {top: calc(100% - 47px);opacity: 1;}
    }

    @keyframes gemAnimationOut {
        0% {opacity: 1;top: calc(100% - 40px);}
        100% {opacity: 0;top: calc(100% - 40px);}
    }

/*    AnimationStack1Coin1*/
    @keyframes AnimationStack1Coin1 {
        0% {top: -50%;}
        5% {opacity: .5}
        15% {opacity: .8;}
        100% {top: 0;opacity: 1;}
    }

    @keyframes AnimationStack1Coin1Out {
        0% {opacity: 1;top: 0;}
        100% {opacity: 0;top: 0;}
    }

/*    AnimationStack1Coin2*/
    @keyframes AnimationStack1Coin2 {
        0% {top: -50%;right: 23px;}
        5% {opacity: .5}
        15% {opacity: .8;}
        100% {top: -10px;right: 23px;opacity: 1;}
    }

    @keyframes AnimationStack1Coin2Out {
        0% {opacity: 1;top: -10px;right: 23px}
        100% {opacity: 0;top: -10px;right: 23px}
    }

/*    AnimationStack2Coin1*/
    @keyframes AnimationStack2Coin1 {
        0% {top: -50%;right: 112px;}
        5% {opacity: .5}
        15% {opacity: .8;}
        100% {top: 18px;right: 112px;opacity: 1;}
    }
    @keyframes AnimationStack2Coin1Out {
        0% {opacity: 1;top: 18px;right: 112px;}
        100% {opacity: 0;top: 18px;right: 112px;}
    }

/*    AnimationStack2Coin2*/
    @keyframes AnimationStack2Coin2 {
        0% {top: -50%;}
        5% {opacity: .5}
        15% {opacity: .8;}
        100% {top: 8px;opacity: 1;}
    }
    @keyframes AnimationStack2Coin2Out {
        0% {opacity: 1;top: 8px;}
        100% {opacity: 0;top: 8px;}
    }






/*    Bump Animation */

@keyframes card_bump {
    0% {transform: scale(.98);}
    50% {transform: scale(1);}
    100% {transform: scale(.98);}
}









@keyframes wandering_box {
    0%    {top: 130%;left:5%;transform: rotate(0deg);opacity:0}
    3%    {opacity:0.1}
    25%   {opacity:0.2}
    45%   {opacity:0.2}
    75%   {opacity:0.2}
    97%  {opacity:0.1;}
    100%  {top: 60%;left:95%;transform: rotate(360deg);opacity:0;}
}
@keyframes wandering_box-1 {
    0%    {top: 100%;left:5%;transform: rotate(0deg);opacity:0}
    3%    {opacity:0.1}
    45%   {opacity:0.2}
    75%   {opacity:0.2}
    97%  {opacity:0.1;}
    100%  {top: 10%;left:95%;transform: rotate(720deg);opacity:0;}
}
@keyframes wandering_box-2 {
    0%    {top: 100%;left:50%;transform: rotate(0deg);opacity:0.1}
    25%   {opacity:0.3}
    45%   {opacity:0.2}
    75%   {opacity:0.3}
    100%  {top: -50%;left:100%;transform: rotate(360deg);opacity:0.3;}
}

@keyframes wandering_box-3 {
    0%    {top: 50%;left:70%;transform: rotate(0deg);opacity:0.1}
    25%   {opacity:0.3}
    
    30%   {top: 0%;left:130%;}
    31%   {top: 130%;left:130%;}
    32%   {top: 130%;left:0%;}

    45%   {opacity:0.2}
    75%   {opacity:0.3}
    100%  {top: 50%;left:70%;transform: rotate(360deg);opacity:0.3;}
}

.wandering-box-big, .wandering-box-medium, .wandering-box-small, .wandering-box-small-2 {
    position: absolute !important;
    width: 10vw !important;
    height: 10vw !important;
    border: 5px solid rgba(255,255,255,.5);
    opacity: 1;
    animation-name: wandering_box;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration:37s;
    top:0px;
    transform: translateY(100%);
}

.wandering-box-small {
    width: 4vw !important;
    height: 4vw !important;
    border: 4px solid rgba(255,255,255,.5);
    animation-name: wandering_box-1;
    animation-duration:22s;
    top:0px;
}


.wandering-box-small-2 {
    width: 6vw !important;
    height: 6vw !important;
    border: 3px solid white;
    animation-name: wandering_box-1;
    animation-duration:31s;
    top:0px;
}
.wandering-box-small-3 {
    width: 6vw !important;
    height: 6vw !important;
    border: 3px solid white;
    animation-name: wandering_box-3;
    animation-duration:25s;
    top:0px;
}

.wandering-box-big {
    width: 25vw !important;
    height: 25vw !important;
    border: 10px solid white;
    opacity: 1;
    animation-name: wandering_box-2;
    animation-duration:45s;
}




/* colored wandering box */
@keyframes wandering-box-medium-colored {
    0%    {top: 10%;left:5%;transform: rotate(0deg);opacity:0}
    3%    {opacity:1}
    25%   {opacity:0.5}
    45%   {opacity:0.5}
    75%   {opacity:0.5}
    97%  {opacity:1;}
    100%  {top: 0%;left:95%;transform: rotate(360deg);opacity:0;}
}

.wandering-box-medium-colored{
    position: absolute !important;
    width: 10vw !important;
    height: 10vw !important;
    border: 5px solid rgba(126, 51, 148, 0.45);
    opacity: 1;
    animation-name: wandering-box-medium-colored;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration:37s;
    transform: translateY(100%);
    top:0px;
    z-index:-99;
}
  





/*wandering circle*/

@keyframes wandering_box {
    0%    {top: 130%;left:5%;transform: rotate(0deg);opacity:0}
    3%    {opacity:0.1}
    25%   {opacity:0.2}
    45%   {opacity:0.2}
    75%   {opacity:0.2}
    97%  {opacity:0.1;}
    100%  {top: 60%;left:95%;transform: rotate(360deg);opacity:0;}
}


@keyframes wandering-circle-small-2 {
    0%    {top: 10%;left:5%;transform: rotate(0deg);opacity:0}
    3%    {opacity:0.1}
    25%   {opacity:0.2}
    45%   {opacity:0.2}
    75%   {opacity:0.2}
    97%  {opacity:0.1;}
    100%  {top: 0%;left:95%;transform: rotate(360deg);opacity:0;}
}
@keyframes wandering-circle-x-small {
    0%    {top: 10%;left:5%;transform: rotate(0deg);opacity:0}
    3%    {opacity:0.1}
    25%   {opacity:0.2}
    45%   {opacity:0.2}
    75%   {opacity:0.2}
    97%  {opacity:0.1;}
    100%  {top: 0%;left:95%;transform: rotate(360deg);opacity:0;}
}



.wandering-filled-circle {
    width: 45px !important;
    height: 45px !important;
    border-radius: 50%;
    border: 5px solid white;
    opacity: 0;
    animation-name: wandering_box;
    animation-duration:15s;
    position: absolute !important;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration:30s;
    top:0px;
    transform: translateY(100%);
}
.wandering-circle-small {
    width: 45px !important;
    height: 45px !important;
    border-radius: 50%;
    border: 5px solid white;
    opacity: 0;
    animation-name: wandering_box;
    animation-duration:15s;
    position: absolute !important;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration:30s;
    top:0px;
    transform: translateY(100%);
}





.wandering-circle-small-2 {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50%;
    border: 5px solid white;
    opacity: 0;
    animation-name: wandering-circle-small-2;
    animation-duration:5s;
    position: absolute !important;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration:30s;
    top:0px;
    transform: translateY(100%);
}
.wandering-circle-x-small {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50%;
    border: 5px solid white;
    opacity: 0;
    animation-name: wandering-circle-x-small;
    animation-duration:5s;
    position: absolute !important;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration:30s;
    top:0px;
    transform: translateY(100%);
}




/* scale from 0 to 1 */
.scale-0 {
    transform: scale(0.0);
    opacity: 0.1;
    transition: all 0.45s cubic-bezier(0.37, 1.1, 1, 1) !important ;
}
.scale-0.scale-0-1 {
    transform: scale(1);
    opacity: 1;
}



/*wandering triangle*/

.triangle-animation {
/*     position: absolute !important; */
    height: 100%;
}

.triangle-animation svg {
    font-size: 100px;
    opacity: 0;
    animation-name: wandering_triangle;
    animation-duration:15s;
    position: absolute !important;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration:30s;
}

.triangle-animation path {
    fill: transparent;
}

@keyframes wandering_triangle {
    0% {opacity: 0; top: 80%; left: 0; transform: rotate(0deg);}
    10% {opacity: 1;}
    90% {opacity: 1;}
    100% {opacity: 0; top: 20%; left: 100%;transform: rotate(360deg);}
}


/* wandering Star Animation */


.star-animation {
/*     position: absolute !important; */
    height: 100%;
}


.star-animation svg {
    font-size: 80px;
    opacity: 1;
    animation-name: wandering_star;
    animation-duration:15s;
    position: absolute !important;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration:50s;
    animation-delay: 8s;
}

.star-animation path {
    fill: transparent;
}


@keyframes wandering_star {
    0% {opacity: 0; top: 100%; left: 0;transform: rotate(0deg);}
    10% {opacity: 1;}
    90% {opacity: 1;}
    100% {opacity: 0; top: 0%; left: 100%; transform: rotate(360deg);}
}



.hexagon-animation {
/*     position: absolute !important; */
    height: 100%;
}


.hexagon-animation svg {
    font-size: 100px;
    opacity: 0;
    animation-name: wandering_hexagon;
    animation-duration:15s;
    position: absolute !important;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration:40s;
    animation-delay: 15s;
}

.hexagon-animation path {
    fill: transparent;
}

@keyframes wandering_hexagon {
    0% {opacity: 0; top: 60%; left: 0;transform: rotate(0deg);}
    10% {opacity: 1;}
    90% {opacity: 1;}
    100% {opacity: 0; top: 40%; left: 100%; transform: rotate(360deg);}
}



.wandering-box-top-to-bottom{
    position: absolute !important;
    width: 40px !important;
    height: 40px !important;
    border: 3px solid rgba(255,255,255,.5);
    opacity: 0;
    animation-name: wandering_box-top-to-bottom;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration:30s;
    top:0px;
    transform: translateY(100%);
    animation-delay: 10s !important;

}


@keyframes wandering_box-top-to-bottom {
    0%    {top: 0%;left:5%;transform: rotate(0deg);opacity:0}
    3%    {opacity:0.1}
    25%   {opacity:0.2}
    45%   {opacity:0.2}
    75%   {opacity:0.2}
    97%  {opacity:0.1;}
    100%  {top: 100%;left:95%;transform: rotate(360deg);opacity:0;}
}





.animate-bounce-and-rotate {
    animation-name: bounce_and_rotate;
    animation-duration: 35s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.bounce-slow-animate {
    position: relative;
    animation-name: bounce_slow;
    animation-duration: 16s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;   
}
.bounce-slow-animate-partial {
    position: relative;
    animation-name: bounce_slow_partial;
    animation-duration: 12s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;   
}




@keyframes popup_animate_down {
     0%   {top:-50%;}
     100% {top:0%;}
}

@keyframes popup_animate_up {
     0%   {top:0%;}
     100% {top:-50%;}
}
.animate_top_up{
    animation-name: popup_animate_up;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    position: relative;
   
    display: grid;
}
.animate_top_down{
    animation-name: popup_animate_down;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    position: relative;
    display: grid;
    top:0%;
}




@keyframes popup_animate_down_bottom {
    0%   {bottom:-100%;}
    100% {bottom:-50%;}
}

@keyframes popup_animate_up_bottom {
    0%   {bottom:-50%;}
    100% {bottom:-100%;}
}
.animate_bottom_up{
    animation-name: popup_animate_up_bottom;
    animation-duration: 0.7s;
    animation-iteration-count: 1;
    position: relative;
    display: grid;
   
}
.animate_bottom_down{
    animation-name: popup_animate_down_bottom;
    animation-duration: 0.6s;
    animation-iteration-count: 1;
    position: relative;
    display: grid;
    bottom:-50%;
}

.animate_responsive{
    display: block !important;
    padding: 0 !important;
   
}


@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}


@keyframes expandWidth {
    0% {
        width: 0%;
    }
    20% {
        width: 100%;
    }
    70% {
        width: 100%;
    }
    80% {
        width: 0%;
    }
    100% {
        width: 0%;
    }
}