/* @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:#ddd;
  /* font-family:'Roboto'; */
  font-weight:300;
  font-size:32px;
  /* padding-top:40vh; */
  height:50px;
  overflow:hidden;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  -webkit-transform: translate3d(0,0,0);
}

.div {
  display:inline-block;
  overflow:hidden;
  white-space:nowrap;
}

.first-of-type {    /* For increasing performance 
                       ID/Class should've been used. 
                       For a small demo 
                       it's okaish for now */
  animation: showup1 60s ;
}

.last-of-type {
  width:0px;
  animation: reveal 7s ;
  animation-fill-mode: forwards;
  /* animation: reveal 7s ; */
}
.last-of-type1 {
  width:0px;
  animation: reveal1 7s infinite;
  /* animation: reveal 7s ; */
}
.last-of-type2 {
  width:0px;
  animation: reveal2 7s infinite;
  /* animation: reveal 7s ; */
}
.last-of-type span,.last-of-type2 span {
  margin-left:0px;
  /* animation: slidein 7s infinite; */
  animation: slidein1 7s;
}
.last-of-type1 span {
  margin-left:0px;
  /* animation: slidein 7s infinite; */
  animation: slidein1 7s;
}
@keyframes showup1 {
    0% {opacity:0;}
    20% {opacity:1;}
    100% {opacity:1;}
    /* 100% {opacity:0;} */
}

@keyframes slidein1 {
    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:150px;}
    100% {opacity:1;width:150px;}
    /* 100% {opacity:0;width:150px;} */
}
@keyframes reveal2 {
  0% {opacity:0;width:0px;}
  20% {opacity:1;width:0px;}
  30% {width:200px;}
  100% {opacity:1;width:200px;}
  /* 100% {opacity:0;width:150px;} */
}
@keyframes reveal1 {
  0% {opacity:0;width:0px;}
  20% {opacity:1;width:0px;}
  30% {width:40px;}
  100% {opacity:1;width:40px;}
  /* 100% {opacity:0;width:150px;} */
}
/* p {
  font-size:12px;
  color:#999;
  margin-top:200px;
} */