@keyframes scroll-btn {
    100%{
        transform: translateY(10px);
    }
}
@keyframes section-fade {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

@keyframes rocket {
    0%{
        transform: scale(1, 1)
    }
    100%{
        transform: scale(0, 0)
    }
}
@keyframes rocket-zoom{
    100%{
        transform: scale(1, 1)
    }
}
@keyframes slide-left {
    90%{
        transform: scale(0.95, 0.95) translateX(5%);
        opacity: 1;
    }
    100%{
        transform: scale(1.0, 1.0) translateX(0%);
        opacity: 1;
    }
}
@keyframes slide-right {
    90%{
        transform: scale(1.0, 1.0) translateX(-5%);
        opacity: 1;
    } 
    100%{
        transform: scale(1.0, 1.0) translateX(0%);
        opacity: 1;
    }
}
@keyframes slide-right1 {
    0%{
        transform: scale(0.2, 0.2) translateX(-400%);
        opacity: 0;
    }
    90%{
        transform: scale(1.1, 1.1) translateX(5%);
        opacity: 1;
    } 
    100%{
        transform: scale(1.0, 1.0) translateX(0%);
        opacity: 1;
    }
}
@keyframes btn-view {
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
@keyframes showform {
    100%{
        z-index: 2;
    }
}

/* ----- animated call-us png as a background -----------
@keyframes contact-zoomout {
    0%{
        background: url('../images/contact/call-us.png') no-repeat 190% bottom/auto calc(125% + 5px),
        linear-gradient(to bottom left, white, #E5E5E5 60%,  #F9F9F9) no-repeat 0 0/100%;
        }
    90%{
        background: url('../images/contact/call-us.png') no-repeat right bottom/auto calc(90% + 5px),
        linear-gradient(to bottom left, white, #E5E5E5 60%,  #F9F9F9) no-repeat 0 0/100%;
        }
    100%{
        background: url('../images/contact/call-us.png') no-repeat right bottom/auto calc(95% + 5px),
        linear-gradient(to bottom left, white, #E5E5E5 60%,  #F9F9F9) no-repeat 0 0/100%;
        }
}
----------------------------------------------------*/



/*-----------------------------------------------*/

@keyframes article-slideright{
    0%{
        transform: scale(1.1, 1.1) translateX(50%);
        opacity: 0;
    }
    /*
    90%{
        transform: scale(0.95, 0.95) translateX(-5%);
        opacity: 0.95;
    }
    */
    100%{
        transform: scale(1.0, 1.0) translateX(0);
        opacity: 1;
    }
}
@keyframes article-slideright2{
    0%{
        transform: scale(1.1, 1.1) translateX(50%);
        opacity: 0;
    }
    90%{
        transform: scale(0.95, 0.95) translateX(-20%);
        opacity: 0.95;
    }
    100%{
        transform: scale(1.0, 1.0) translateX(-15%);
        opacity: 1;
    }
}

@keyframes div-slideright{
    0%{
        transform: scale(1.1, 1.1) translateX(50%);
        opacity: 0;
    }
    90%{
        transform: scale(0.95, 0.95) translateX(-20%);
        opacity: 0.95;
    }
    100%{
        transform: scale(1.0, 1.0) translateX(0%);
        opacity: 1;
    }
}

@keyframes div-slideleft{
    0%{
        transform: scale(1.1, 1.1) translateX(-50%);
        opacity: 0;
    }
    /*
    90%{
        transform: scale(0.95, 0.95) translateX(5%);
        opacity: 0.95;
    }
    */
    100%{
        transform: scale(1.0, 1.0) translateX(0);
        opacity: 1;
    }
}

@keyframes article-slideleft{
    0%{
        transform: scale(1.1, 1.1) translateX(-50%);
        opacity: 0;
    }
    90%{
        transform: scale(0.95, 0.95) translateX(5%);
        opacity: 0.95;
    }
    100%{
        transform: scale(1.0, 1.0) translateX(0);
        opacity: 1;
    }
}
@keyframes article-slideleft2{
    0%{
        transform: scale(1.1, 1.1) translateX(-50%);
        opacity: 0;
    }
    90%{
        transform: scale(0.95, 0.95) translateX(20%);
        opacity: 0.95;
    }
    100%{
        transform: scale(1.0, 1.0) translateX(15%);
        opacity: 1;
    }
}


@keyframes background-sliding{
    0%{
        transform: translateX(70%) translateY(70%);
        opacity: 0;
    }
    /*
    80%{
        transform: translateX(50%) translateY(50%);
    opacity: 0.4;
    }
    */
    100%{
        transform: translateX(0%) translateY(0%);
        opacity: 1;
    }
}


@keyframes slide-down {
    90%{
        transform: translateY(10px) scale(0.95, 0.95);
        opacity: 1;
    }
    100%{
        transform: translateY(0) scale(1, 1);
        opacity: 1;
    }
}

@keyframes slide-up1 {
    90%{
        top: 200%;
        scale: (0, 0);
        opacity: 0;
    }
    100%{
        top: 42%;
        scale: (11, 1);
        opacity: 1;
    }
}

@keyframes slide-up {
    0%{
        transform: translateY(130%) scale(0, 0);
        opacity: 0;
    }
    95%{
        transform: translateY(0) scale(1.1, 1.1);
        opacity: 1;
    }
    100%{
        transform: translateY(0) scale(1, 1);
        opacity: 1;
    }
}



@keyframes leisure-carosel-entrance {
    0%{
        transform: translateX(100%) scale(1.5, 1.5);
    }
    90%{
        transform: translateX(-5%) scale(0.95, 0.95);
    }
    100%{
        transform: translateX(-0%) scale(1, 1);
    }
}

@keyframes background-enterance {
    0%{
        opacity: 0 !important;
    }
    100%{
        opacity: 1 !important;
    }
  }


@keyframes background-enterance-right {
    0%{
        background: radial-gradient(closest-side at 67% 50%,  transparent, transparent, transparent);
        opacity: 0;
    }
    25%{
        background: radial-gradient(closest-side at 67% 50%,  rgba(109, 139, 183, 0.12), rgba(172, 184, 203, 0.1), transparent);

    }
    50%{
        background: radial-gradient(closest-side at 67% 50%,  rgba(109, 139, 183, 0.25), rgba(172, 184, 203, 0.2), transparent);
        opacity: 0.5;
    }
    75%{
        background: radial-gradient(closest-side at 67% 50%,  rgba(109, 139, 183, 0.38), rgba(172, 184, 203, 0.3), transparent);
    }
    100%{
        background: radial-gradient(closest-side at 67% 50%,  rgba(109, 139, 183, 0.5), rgba(172, 184, 203, 0.4), transparent);
        opacity: 1;
    }
  }


  @keyframes background-enterance-left {
    0%{
        background: radial-gradient(closest-side at 28% 50%,  transparent, transparent, transparent);
    }
    25%{
        background: radial-gradient(closest-side at 28% 50%,  rgba(109, 139, 183, 0.12), rgba(172, 184, 203, 0.1), transparent);
    }
    50%{
        background: radial-gradient(closest-side at 28% 50%,  rgba(109, 139, 183, 0.25), rgba(172, 184, 203, 0.2), transparent);
    }
    75%{
        background: radial-gradient(closest-side at 28% 50%,  rgba(109, 139, 183, 0.38), rgba(172, 184, 203, 0.3), transparent);
    }
    100%{
        background: radial-gradient(closest-side at 28% 50%,  rgba(109, 139, 183, 0.5), rgba(172, 184, 203, 0.4), transparent);
    }
  }

  @keyframes background-enterance-middle {
    0%{
        background: radial-gradient(closest-side at 50% 50%,  transparent, transparent, transparent);
    }
    25%{
        background: radial-gradient(closest-side at 50% 50%,  rgba(109, 139, 183, 0.12), rgba(172, 184, 203, 0.1), transparent);
    }
    50%{
        background: radial-gradient(closest-side at 50% 50%,  rgba(109, 139, 183, 0.25), rgba(172, 184, 203, 0.2), transparent);
    }
    75%{
        background: radial-gradient(closest-side at 50% 50%,  rgba(109, 139, 183, 0.38), rgba(172, 184, 203, 0.3), transparent);
    }
    100%{
        background: radial-gradient(closest-side at 50% 50%,  rgba(109, 139, 183, 0.5), rgba(172, 184, 203, 0.4), transparent);
    }
  }

@keyframes wrapper-enterance {
    0%{
        transform: perspective(10000px) translateX(50%) rotateX(0) ranslateY(0);
        box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
        opacity: 1;
    }
    85%{
        opacity: 1;
    }
    100%{
        transform: perspective(400px) translateX(-4%) rotateX(35deg) translateY(-20%);
        box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
        opacity: 0;
    }
  }
  
  @keyframes wrapper-enterance-R {
    0%{
        transform: perspective(10000px) translateX(50%) rotateX(0) ranslateY(0);
        box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
        opacity: 1;
    }
    85%{
        opacity: 1;
    }
    100%{
        transform: perspective(400px) translateX(-4%) rotateX(35deg) translateY(-20%);
        box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
        opacity: 1;
    }
  }


  @keyframes animparts-enterance {
    0%{
      opacity: 0;
      transform: scaleY(0);
    }
    85%{
      opacity: 0.1;
      transform: scaleY(0);
    }
    90%{
      opacity: 0.3;
      transform: scaleY(1.1);
    }
    100%{
      opacity: 0.9;
      transform: scaleY(1);  
    }
  }

  @keyframes animparts-enteranceX {
    0%{
      opacity: 0;
      transform: scaleX(0);
    }
    85%{
      opacity: 0.8;
      transform: scaleX(0);
    }
    90%{
      opacity: 0.9;
      transform: scaleX(1);
    }
    100%{
      opacity: 1;
      transform: scaleX(1);  
    }
  }

  @keyframes floor-enterance {
    0%{
        /*
        transform: perspective(10000px) translateY(-5%) translateX(50%) rotateX(0) translateZ(0);
        box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
        */
        opacity: 0;
      }
      90%{
        /*
        transform: perspective(10000px) translateY(-5%) translateX(50%) rotateX(0) translateZ(0);
        box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
        */
          opacity: 0;
      }
    
      100%{
          
        transform: perspective(400px) translateY(-5%) translateX(0) rotateX(45deg) translateZ(0);
        /*
        transform: perspective(400px) translateY(-5%) rotateX(45deg) scaleY(1.4);*/
        box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px; 
        opacity: 1;
      }
  }
  


  @keyframes cloud-wobble {
    0% {
        /*
        margin-top: 30%;
        margin-left: 30%;
        */
      transform: scale(1);
    }
    11%{
        /*
        margin-top: 30%;
        margin-left: 30%;
        */
        transform: scale(1.02);
    }
    22%{
        /*
        margin-top: 29.92%;
        margin-left: 30%;
        */
        transform: scale(1.04);
    }
    33%{
        /*
        margin-top: 30%;
        margin-left: 30%;
        */
        transform: scale(1.06);
    }
    44%{
        /*
        margin-top: 29.87%;
        margin-left: 29.95%;
        */
        transform: scale(1.08);
    }
    55% {
        /*
        margin-top: 29.8%;
        margin-left: 29.9%;
        */
      transform: scale(1.1);
    }
    66%{
        /*
        margin-top: 29.87%;
        margin-left: 29.95%;
        */
        transform: scale(1.08);
    }
    77%{
        /*
        margin-top: 30%;
        margin-left: 30%;
        */
        transform: scale(1.06);
    }
    88%{
        /*
        margin-top: 29.92%;
        margin-left: 30%;
        */
        transform: scale(1.04);
    }
    100% {
        /*
        margin-top: 30%;
        margin-left: 30%;
        */
      transform: scale(1.02);
    }
  }




@keyframes personal-s2-img {
    0%{
        transform: translateX(-100%) scale(1.5, 1.5);
    }
    90%{
        transform: translateX(5%) scale(0.95, 0.95);
    }
    100%{
        transform: translateX(0%) scale(1, 1);
    }
}

@keyframes personal-s6-img {
    0%{
        transform: translateX(-100%) scale(1.5, 1.5);
    }
    90%{
        transform: translateX(5%) scale(0.95, 0.95);
    }
    100%{
        transform: translateX(0%) scale(1, 1);
    }
}

@keyframes personal-s8-img {
    0%{
        transform: translateX(-100%) scale(1.5, 1.5);
    }
    90%{
        transform: translateX(5%) scale(0.95, 0.95);
    }
    100%{
        transform: translateX(0%) scale(1, 1);
    }
}


@keyframes personal-s3-birds {
    0%{
        transform: scale(0, 0);
        opacity: 0;
    }
    90%{
        transform: scale(1.1, 1.1);
        opacity: 1;
    }
    100%{
        transform: scale(1, 1);
        opacity: 1;
    }
}

@keyframes personal-s5-img {
    0%{
        transform: translateX(100%) scale(1.5, 1.5);
    }
    90%{
        transform: translateX(-5%) scale(0.95, 0.95);
    }
    100%{
        transform: translateX(-0%) scale(1, 1);
    }
}

@keyframes personal-s8-butterflies {
    0%{
        transform: scale(0, 0);
        opacity: 0;
    }
    90%{
        transform: scale(1.1, 1.1);
        opacity: 1;
    }
    100%{
        transform: scale(1, 1);
        opacity: 1;
    }
}
@keyframes personal-s9-down {
    0%{
        transform: translateY(-50%);
        opacity: 0;
    }
    100%{
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes business-product-left {
    90%{
        transform: scale(0.95, 0.95) translateX(5%) rotate(-20deg);
        opacity: 1;
    }
    100%{
        transform: scale(1.0, 1.0) translateX(0%) rotate(0deg);
        opacity: 1;
    }
}
@keyframes business-product-right {
    90%{
        transform: scale(1.0, 1.0) translateX(-5%) rotate(20deg);
        opacity: 1;
    } 
    100%{
        transform: scale(1.0, 1.0) translateX(0%) rotate(0deg);
        opacity: 1;
    }
}
@keyframes bg-compass {
    0%{
        transform: rotate(90deg) translate(500px, -1000px) scale(0,0);
    }
    100%{
        transform: rotate(0deg) translate(0,0) scale(1,1);
    }
}
@keyframes bg-chest {
    0%{
        transform: rotate(-45deg) translate(-1600px, 400px);
        opacity: 0;
    }
    100%{
        transform: rotate(0deg) translate(0,0);
        opacity: 1;
    }
}
@keyframes jigsaw-down {
    0%{
        transform: translateY(-50px) rotate(-180deg);
    }
    100%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
}
@keyframes jigsaw-up {
    0%{
        transform: translateY(100px) rotate(-180deg);
    }
    100%{
        transform: translateY(0) scale(1, 1) rotate(0deg);
        opacity: 1;
    }
}
@keyframes jigsaw-right {
    0%{
        transform: scale(1.1, 1.1) translateX(-50%) rotate(180deg);
        opacity: 0;
    }
    100%{
        transform: scale(1.0, 1.0) translateX(0) rotate(0deg);
        opacity: 1;
    }
}
@keyframes jigsaw-left {
    0%{
        transform: scale(1.1, 1.1) translateX(50%) rotate(180deg);
        opacity: 0;
    }
    100%{
        transform: scale(1.0, 1.0) translateX(0) rotate(0deg);
        opacity: 1;
    }
}
@keyframes business-s1-anim {
    90%{
        transform: translateY(0) scale(0.97, 0.97);
    }
    100%{
        transform: translateY(0) scale(1, 1);
        opacity: 1;
    }
}