@keyframes spin{
    0% {
        transform: rotateZ(0deg)
    }
    
    100% {
        transform: rotateZ(720deg)
    }
}

@keyframes spin-reverse {
    from {
        transform:rotate(360deg);
    }
    to {
        transform:rotate(0deg);
    }
}

@keyframes gear-rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}







@keyframes tree-go {
    0%{
        top: -10%;
        left: -50%;
        opacity: .0;
        display: none;
    }
    1%{
        left: 3%;
        opacity: .5;
        display: block; 
    }
    14%{
        left: 3%;
        opacity: .5;
        display: block; 
    }
    16%{
        top: -10%;
        left: 25%;
        opacity: 0;
        display: block;
    }
    17%{
        display: none;
        opacity: 0;
    }
    100%{
        display: none;
        opacity: 0;
    }
}

@keyframes tree-nodejs {
    0%{
        top: -10%;
        left: -50%;
        opacity: 0;
        display: none;
    }
    18%{
        top: -10%;
        left: -50%;
        opacity: 0;
        display: none;
    }
    19%{
        left: 3%;
        opacity: .5;
        display: block; 
    }
    32%{
        left: 3%;
        opacity: .5;
        display: block; 
    }
    34%{
        top: -10%;
        left: 25%;
        opacity: 0;
        display: block;
    }
    35%{
        display: none;
        opacity: 0;
    }
    100%{
        display: none;
        opacity: 0;
    }
}

@keyframes tree-dotnet {
    0%{
        top: -10%;
        left: -50%;
        opacity: 0;
        display: none;
    }
    35%{
        top: -10%;
        left: -50%;
        opacity: 0;
        display: block;
    }
    36%{
        left: 3%;
        opacity: .5;
        display: block; 
    }
    48%{
        left: 3%;
        opacity: .5;
        display: block;
    }
    50%{
        top: -10%;
        left: 25%;
        opacity: 0;
        display: block;
    }
    52%{
        display: none;
        opacity: 0;
    }
    100%{
        display: none;
        opacity: 0;
    }
}

@keyframes tree-swift {
    0%{
        top: -10%;
        left: -50%;
        opacity: 0;
        display: none;
    }
    52%{
        top: -10%;
        left: -50%;
        opacity: 0;
        display: block;
    }
    53%{
        left: 3%;
        opacity: .5;
        display: block;
    }
    65%{
        left: 3%;
        opacity: .5;
        display: block;
    }
    67%{
        top: -10%;
        left: 25%;
        opacity: 0;
        display: block;
    }
    69%{
        display: none;
        opacity: 0;
    }
    100%{
        display: none;
        opacity: 0;
    }
}


@keyframes tree-ruby {
    0%{
        top: -10%;
        left: -50%;
        opacity: 0;
        display: none;
    }
    69%{
        top: -10%;
        left: -50%;
        opacity: 0;
        display: block;
    }
    70%{
        left: 3%;
        opacity: .5;
        display: block;
    }
    82%{
        left: 3%;
        opacity: .5;
        display: block;
    }
    84%{
        top: -10%;
        left: 25%;
        opacity: 0;
        display: block;
    }
    86%{
        display: none;
        opacity: 0;
    }
    100%{
        display: none;
        opacity: 0;
    }
}

@keyframes tree-rust {
    0%{
        top: -10%;
        left: -50%;
        opacity: 0;
        display: none;
    }
    86%{
        top: -10%;
        left: -50%;
        opacity: 0;
        display: block;
    }
    87%{
        left: 3%;
        opacity: .5;
        display: block;
    }
    95%{
        left: 3%;
        opacity: .5;
        display: block;
    }
    97%{
        top: -10%;
        left: 25%;
        opacity: 0;
        display: block;
    }
    99%{
        display: none;
        opacity: 0;
    }
    100%{
        display: none;
        opacity: 0;
    }
}


@keyframes logo-go {
    0%{
        opacity: .2;
        transform: scale(1);
        display: none;
    }
    2%{
        opacity: .8;
    }
    8%{
        transform: scale(1.5);
        display: block; 
    }
    14%{
        opacity: .8;
    }
    16%{
        opacity: .2;
        transform: scale(1);
        display: block;
    }
    17%{
        display: none;
        opacity: .2;
        transform: scale(1);
    }
    100%{
        display: none;
        opacity: .2;
        transform: scale(1);
    }
}

@keyframes logo-nodejs {
    0%{
        opacity: .2;
        transform: scale(1);
        display: none;
    }
    18%{
        opacity: .2;
        transform: scale(1);
        display: none;
    }
    20%{
        opacity: .8;
    }
    26%{
        opacity: .8;
        transform: scale(1.5);
        display: block; 
    }
    32%{
        opacity: .8;
    }
    34%{
        opacity: .2;
        transform: scale(1);
        display: block;
    }
    35%{
        display: none;
        opacity: .2;
        transform: scale(1);
    }
    100%{
        display: none;
        opacity: .2;
        transform: scale(1);
    }
}

@keyframes logo-dotnet {
    0%{
        opacity: .2;
        transform: scale(1);
        display: none;
    }
    35%{
        opacity: .2;
        transform: scale(1);
        display: block;
    }
    37%{
        opacity: .8;
    }
    43%{
        opacity: .8;
        transform: scale(1.5);
        display: block; 
    }
    48%{
        opacity: .8;
    }
    50%{
        opacity: .2;
        transform: scale(1);
        display: block;
    }
    52%{
        display: none;
        opacity: .2;
        transform: scale(1);
    }
    100%{
        display: none;
        opacity: .2;
        transform: scale(1);
    }
}

@keyframes logo-swift {
    0%{
        opacity: .2;
        transform: scale(1);
        display: none;
    }
    52%{
        opacity: .2;
        transform: scale(1);
        display: block;
    }
    54%{
        opacity: .8;
    }
    60%{
        opacity: .8;
        transform: scale(1.5);
        display: block; 
    }
    65%{
        opacity: .8;
    }
    67%{
        opacity: .2;
        transform: scale(1);
        display: block;
    }
    69%{
        display: none;
        opacity: .2;
        transform: scale(1);
    }
    100%{
        display: none;
        opacity: .2;
        transform: scale(1);
    }
}


@keyframes logo-ruby {
    0%{
        opacity: .2;
        transform: scale(1);
        display: none;
    }
    69%{
        opacity: .2;
        transform: scale(1);
        display: block;
    }
    71%{
        opacity: .8;
    }
    77%{
        opacity: .8;
        transform: scale(1.5);
        display: block; 
    }
    82%{
        opacity: .8;
    }
    84%{
        opacity: .2;
        transform: scale(1);
        display: block;
    }
    86%{
        display: none;
        opacity: .2;
        transform: scale(1);
    }
    100%{
        display: none;
        opacity: .2;
        transform: scale(1);
    }
}

@keyframes logo-rust {
    0%{
        opacity: .2;
        transform: scale(1);
        display: none;
    }
    86%{
        opacity: .2;
        transform: scale(1);
        display: block;
    }
    88%{
        opacity: .8;
    }
    92%{
        opacity: .8;
        transform: scale(1.5);
        display: block; 
    }
    95%{
        opacity: .8;
    }
    97%{
        opacity: .2;
        transform: scale(1);
        display: block;
    }
    99%{
        display: none;
        opacity: .2;
        transform: scale(1);
    }
    100%{
        display: none;
        opacity: .2;
        transform: scale(1);
    }
}


@keyframes lds-roller {
    0%{
        transform: rotate(0deg)
    }
    80%{
        transform: rotate(350deg);
    }
    85%{
        transform: rotate(352deg);
    }
    90%{
        transform: rotate(355deg);
    }
    95%{
        transform: rotate(358deg)
    }
    100%{
        transform: rotate(360deg)
    }
  }
  


  @keyframes hammer-animation{
    0%{
        margin-left: 80px;
        margin-top: -40px;
        opacity:0;
        transform: rotateY(270deg) rotateX(90deg) rotateZ(0deg);
    }
    5%{
        opacity:1;
        margin-left: 60px;
        margin-top: -30px;
        transform: rotateY(180deg) rotateX(0deg) rotateZ(0deg);
    }
    15%{
        opacity:1;
        margin-left: 70px;
        margin-top: -40px;
        transform: rotateY(180deg) rotateX(0deg) rotateZ(-55deg);
    }
    23%{
        opacity:1;
        margin-left: 60px;
        margin-top: -30px;
        transform: rotateY(180deg) rotateX(0deg) rotateZ(10deg);
    }
    30%{
        opacity:1;
        margin-left: 60px;
        margin-top: -30px;
        transform: rotateY(180deg) rotateX(0deg) rotateZ(-20deg);
    }
    35%{
        opacity:1;
        margin-left: 60px;
        margin-top: -30px;
        transform: rotateY(180deg) rotateX(0deg) rotateZ(0deg);
    }
    40%{
        transform: rotateY(270deg) rotateX(90deg) rotateZ(0deg);
        margin-left: 80px;
        margin-top: -40px;
        opacity: 0
    }
    100%{
        transform: rotateY(270deg) rotateX(90deg) rotateZ(0deg);
        margin-left: 80px;
        margin-top: -40px;
        opacity: 0
    }
    
}

@keyframes wrench-animation{
    0%{
        margin-left: -150px;
        margin-top: 60px;
        transform: rotateX(90deg) rotateZ(0deg);
        opacity:0;
    }
    50%{
        margin-left: -150px;
        margin-top: 60px;
        transform: rotateX(90deg) rotateZ(0deg);
        opacity:0;
    }
    55%{
        margin-left: -150px;
        margin-top: 60px;
        transform: rotateX(0deg) rotateZ(0deg);
        opacity:1;
    }
    59%{
        margin-left: -130px;
        margin-top: 50px;
        transform: rotateX(0deg) rotateZ(0deg);
        opacity:1;
    }
    65%{
        margin-left: -120px;
        margin-top: 18px;
        transform: rotateX(0deg) rotateZ(20deg);
        opacity:1;
    }
    67%{
        margin-left: -103px;
        margin-top: 35px;
        transform: rotateX(0deg) rotateZ(-10deg);
        opacity:1;
    }
    72%{
        margin-left: -120px;
        margin-top: 18px;
        transform: rotateX(0deg) rotateZ(20deg);
        opacity:1;
    }
    75%{
        margin-left: -103px;
        margin-top: 35px;
        transform: rotateX(0deg) rotateZ(-10deg);
        opacity:1;
    }
    80%{
        margin-left: -120px;
        margin-top: 18px;
        transform: rotateX(0deg) rotateZ(20deg);
        opacity:1;
    }
    83%{
        margin-left: -150px;
        margin-top: 60px;
        transform: rotateX(0deg) rotateZ(0deg);
        opacity:1;
    }
    88%{
        margin-left: -150px;
        margin-top: 60px;
        transform: rotateX(90deg) rotateZ(0deg);
        opacity:0;
    }
    100%{
        margin-left: -150px;
        margin-top: 60px;
        transform: rotateX(90deg) rotateZ(0deg);
        opacity:0;
    }

}








@-webkit-keyframes fadeInDown {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }
  
  @keyframes fadeInDown {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }
  
  /* Simple CSS3 Fade-in Animation */
  @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }




  @keyframes recompute-glow-animation{
    0% {
        transform: scale(1);
        box-shadow: 0px 0px 0px var(--color-whites-1);
    }
    50% {
        transform: scale(1.03);
        box-shadow: 0px 0px 10px 3px var(--color-high);
    }
    100% {
        transform: scale(1);
        box-shadow: 0px 0px 0px var(--color-whites-1);
    }
}




@keyframes loading-animation{
    0%{
        opacity: .8;
    }

    50%{
        opacity: 1;
    }

    100%{
        opacity: .8;
    }
}