:root {
    --l1p:0px;
    --l2p:20px;
    --l3p:45px;
    --l4p:66px;
}

.vv-letter1 { 
    position:absolute;left:var(--l1p);top:0;
    animation-name:vv-letter1Anim; 
}
.vv-letter2 { 
    position:absolute;left:var(--l2p);top:0; 
    animation-name:vv-letter2Anim; 
}
.vv-letter3 { 
    position:absolute;left:var(--l3p);top:0; 
    animation-name:vv-letter3Anim; 
}
.vv-letter4 { 
    position:absolute;left:var(--l4p);top:0;
    animation-name:vv-letter4Anim; 
}

.vv-logoAnim { position:relative; padding-top:-25px; padding-left:200px; }
.vv-letter { font-size:1em; font-family:helvetica,arial; text-decoration:underline; }
.vv-anim {      
    animation-duration:4s; 
    animation-iteration-count: infinite;
}

@keyframes vv-letter1Anim {
    0% { left:var(--l1p); }
    20% {left:var(--l4p) }
    80% {left:var(--l4p); }
    100% { left:var(--l1p); }
}
@keyframes vv-letter2Anim {
    0% { left:var(--l2p); }
    20% {left:var(--l3p); }
    80% {left:var(--l3p); }
    100% { left:var(--l2p); }
}
@keyframes vv-letter3Anim {
    0% { left:var(--l3p); }
    20% {left:var(--l2p); }
    80% {left:var(--l2p); }
    100% { left:var(--l3p); }
}
@keyframes vv-letter4Anim {
    0% { left:var(--l4p); }
    20% {left:var(--l1p); }
    80% {left:var(--l1p); }
    100% { left:var(--l4p); }
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    :root {
        --l1p:0px;
        --l2p:12px;
        --l3p:24px;
        --l4p:36px;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

}