@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;
    }
}



#animation-wrapper .lang-tree.lang-go {
    animation-name: tree-go;
    animation-duration: 60s;
    animation-iteration-count: infinite;
}
#animation-wrapper .lang-tree.lang-nodejs {
    animation-name: tree-nodejs;
    animation-duration: 60s;
    animation-iteration-count: infinite;
}
#animation-wrapper .lang-tree.lang-dotnet {
    animation-name: tree-dotnet;
    animation-duration: 60s;
    animation-iteration-count: infinite;
}
#animation-wrapper .lang-tree.lang-swift {
    animation-name: tree-swift;
    animation-duration: 60s;
    animation-iteration-count: infinite;
}
#animation-wrapper .lang-tree.lang-ruby {
    animation-name: tree-ruby;
    animation-duration: 60s;
    animation-iteration-count: infinite;
}

#animation-wrapper .lang-tree.lang-rust {
    animation-name: tree-rust;
    animation-duration: 60s;
    animation-iteration-count: infinite;
}


@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);
    }
}

#animation-wrapper .lang-logo.lang-go {
    animation-name: logo-go;
    animation-duration: 60s;
    animation-iteration-count: infinite;
}
#animation-wrapper .lang-logo.lang-nodejs {
    animation-name: logo-nodejs;
    animation-duration: 60s;
    animation-iteration-count: infinite;
}
#animation-wrapper .lang-logo.lang-dotnet {
    animation-name: logo-dotnet;
    animation-duration: 60s;
    animation-iteration-count: infinite;
}
#animation-wrapper .lang-logo.lang-swift {
    animation-name: logo-swift;
    animation-duration: 60s;
    animation-iteration-count: infinite;
}
#animation-wrapper .lang-logo.lang-ruby {
    animation-name: logo-ruby;
    animation-duration: 60s;
    animation-iteration-count: infinite;
}

#animation-wrapper .lang-logo.lang-rust {
    animation-name: logo-rust;
    animation-duration: 60s;
    animation-iteration-count: infinite;
}


@media (max-width: 884px){
    #animation-wrapper .lang-logo{
        animation: none!important;
    }
}