#starting-overlay {
    top:0px;
    left:0px;
}
@keyframes bouncing {
    0%, 100% {
        top: 25%;
        transform: scale(1);
    }
    25% {
        top: 50%;
        transform: scale(1.1, 0.9);
    }
    50% {
        top: 35%;
        transform: scale(0.9, 1.1);
    }
    75% {
        top: 50%;
        transform: scale(1.05, 0.95);
    }
}
@keyframes circle-started {
    0%{
        transform: scale(1);
    }
    100% {
        transform: scale(300);
    }
}
.starting-circle-container {
    position:relative;
    top: 0%;
    left:50%;
    overflow: visible;
    width: 1px;
    height:1px;
    animation: bouncing 1.5s ease-in-out infinite;
    transition: top 0.6s linear;
}
.starting-circle-container.started {
    top:50%;
    animation: none;

}
.starting-circle-container.started {
    animation-delay: 100ms;
    animation: circle-started 2s ease 0s 1 normal forwards;
}
.starting-circle {
    position: absolute;
    width:50px;
    height: 50px; 
    top: -25px;
    left: -25px;
}
.starting-logo {
    transition: all 0.5s ease;
    opacity: 0;
}
.starting-logo.started {
    opacity: 1;
} 
.starting-logo .logo-text {
    display: block;
    transition-delay: 250ms;
    position: relative;
    margin-left: 51vw;
    transition: margin-left 0.5s ease;
}
.starting-logo.started-2 .logo-text {
    display: block;
    margin-left:0px;
}
.starting-logo .logo-text-div {
    overflow:visible;
    width: 0px;
    transition: width 0.6s ease;
}
.starting-logo.started-2 .logo-text-div{
    width:141px;
}
.starting-logo .logo {
    transform: scale(0);
    transition: transform 0.6s ease;
}
.starting-logo.started .logo { 
    transform: scale(1.2);
}
.starting-logo.started-2 .logo {
    transform: scale(1);

}