.logo-left {
    position: relative;
    animation-name: left-split;
    animation-duration: 2.5s;
    animation-iteration-count: 1;
    opacity: 0;
}

.logo-right {
    position: relative;
    animation-name: right-split;
    animation-duration: 2.5s;
    animation-iteration-count: 1;
    opacity: 0;
}

.logo-dot {
    position: relative;
    animation-name: dot-split;
    animation-duration: 2.5s;
    animation-iteration-count: 1;
    opacity: 0;
}

.white-screen {
    position: absolute;
    height: 0;
    width: 100vw;
    background-color: white;
    z-index: 10;
    animation-name: fade-out;
    animation-duration: 3s;
    animation-iteration-count: 1;
    opacity: 0;
}


@keyframes left-split {
    0%    {left:0%; top:0%; opacity: 1;}
    30%   {left:0%; top:0%; opacity: 1;}
    100%   {left:-50%; top:0%; opacity: 0;}
}

@keyframes right-split {
    0%    {left:0%; top:0%; opacity: 1;}
    30%   {left:0%; top:0%; opacity: 1;}
    100%  {left:50%; top:0%; opacity: 0;}
}

@keyframes dot-split {
    0%   {opacity: 1;}
    30%  {opacity: 1;}
    40%  {opacity: 0;}
}

@keyframes fade-out {
    0%    {opacity: 1; height: 100vh;}
    66%   {opacity: 1; height: 100vh;}
    99%   {opacity: 0; height: 100vh;}
    100%  {opacity: 0; height: 0;}
}