@import url('https://fonts.googleapis.com/css?family=Roboto:300');

body {
 text-align:center;
/*   background:linear-gradient(141deg, #ccc 25%, #eee 40%, #ddd 55%);
  color:#555;
  font-family:'Roboto';
  font-weight:300;
  font-size:32px;
  padding-top:40vh;
  height:100vh;
  overflow:hidden;*/
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  -webkit-transform: translate3d(0,0,0);
}

.letras {
  display:inline-block;
  overflow:hidden;
  white-space:nowrap;
  font-size:18px;
  font-weight:bold;
}

.letras2 {
  font-size:12px;
  font-weight: 100;
}
.letras:first-of-type {    /* For increasing performance 
                       ID/Class should've been used. 
                       For a small demo 
                       it's okaish for now */
  animation: showup 7s infinite;
}
.letras:last-of-type {
  width:0px;
  animation: reveal 7s infinite;
}
.letras:last-of-type span {
  margin-left:-355px;
  animation: slidein 7s infinite;
}
/*************************************/

.letras3 {
  display:inline-block;
  overflow:hidden;
  white-space:nowrap;
  font-size:18px;
  font-weight:bold;opacity:0;
}

.letras4 {
  font-size:12px;
  font-weight: 100;
}
.letras3:first-of-type {    /* For increasing performance 
                       ID/Class should've been used. 
                       For a small demo 
                       it's okaish for now */
  animation: showup 7s infinite;
  animation-delay: 1s;
}

.letras3:last-of-type {
  width:0px;
  animation: reveal 7s infinite;
  animation-delay: 1s;
}

.letras3:last-of-type span {
  margin-left:-355px;
  animation: slidein 7s infinite;
  animation-delay: 1s;
}


@keyframes showup {
    0% {opacity:0;}
    20% {opacity:1;}
    80% {opacity:1;}
    100% {opacity:0;}
}

@keyframes slidein {
    0% { margin-left:-800px; }
    20% { margin-left:-800px; }
    35% { margin-left:0px; }
    100% { margin-left:0px; }
}

@keyframes reveal {
    0% {opacity:0;width:0px;}
    20% {opacity:1;width:0px;}
    30% {width:155px;}
    80% {opacity:1;}
    100% {opacity:0;width:155px;}
}



@media screen and (min-width: 580px){
.letras { font-size:28px;}
.letras2 { font-size:20px;}
.letras3 { font-size:28px;}
.letras4 { font-size:20px;}
@keyframes reveal {
    0% {opacity:0;width:0px;}
    20% {opacity:1;width:0px;}
    30% {width:255px;}
    80% {opacity:1;}
    100% {opacity:0;width:255px;}
}

}

@media screen and (min-width: 780px){
.letras { font-size:38px;}
.letras2 { font-size:30px;}
.letras3 { font-size:38px;}
.letras4 { font-size:30px;}
@keyframes reveal {
    0% {opacity:0;width:0px;}
    20% {opacity:1;width:0px;}
    30% {width:355px;}
    80% {opacity:1;}
    100% {opacity:0;width:355px;}
}


}