.xtexto {
  font-size:24px;
  font-family:helvetica;
  font-weight:bold;
  color:#fff;
}

.xtextorojo {
  font-size:24px;
  font-family:helvetica;
  font-weight:bold;
  color:#f00;
  /* text-transform:uppercase; */
}
.xtextoverde {
  font-size:24px;
  font-family:helvetica;
  font-weight:bold;
  color:#0f0;
  /* text-transform:uppercase; */
}
.xtextoamarillo {
  font-size:24px;
  font-family:helvetica;
  font-weight:bold;
  color:#ff0;
  /* text-transform:uppercase; */
}
.xtextoceleste {
  font-size:24px;
  font-family:helvetica;
  font-weight:bold;
  color:#0ff;
  /* text-transform:uppercase; */
}

.parpadea {
  animation-name: parpadeo;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-name:parpadeo;
  -webkit-animation-duration: 5s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name:parpadeo;
  -moz-animation-duration: 5s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  -o-animation-name:parpadeo;
  -o-animation-duration: 5s;
  -o-animation-timing-function: linear;
  -o-animation-iteration-count: infinite;
}

@-moz-keyframes parpadeo{  
  0% { opacity: 1.0; }
 50% { opacity: 0.4; color:#fff;}
100% { opacity: 1.0; }
}
@-webkit-keyframes parpadeo {  
  0% { opacity: 1.0; }
 50% { opacity: 0.4; color:#fff;}
100% { opacity: 1.0; }
}
@keyframes parpadeo {  
  0% { opacity: 1.0; }
 50% { opacity: 0.4; color:#fff;}
100% { opacity: 1.0; }
}

/* .. otro .. */
.colores {
  animation-name: colorea;
  animation-duration: 25s;
  animation-direction: alternate;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
animation-direction: alternate;
  -webkit-animation-name:colorea;
  -webkit-animation-duration: 25s;
  -webkit-animation-direction: alternate;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name:colorea;
  -moz-animation-duration: 25s;
  -moz-animation-direction: alternate;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  -o-animation-name:colorea;
  -o-animation-duration: 25s;
  -o-animation-direction: alternate;
  -o-animation-timing-function: linear;
  -o-animation-iteration-count: infinite;
}

@-o-keyframes colorea{  
  0% {color:#f00;}
 25% {color:#fc0;}
 50% {color:#ff0;}
 75% {color:#0f0;}
100% {color:#0ff;}
}
@-moz-keyframes colorea{  
  0% {color:#f00;}
 25% {color:#fc0;}
 50% {color:#ff0;}
 75% {color:#0f0;}
100% {color:#0ff;}
}
@-webkit-keyframes colorea{  
  0% {color:#f00;}
 25% {color:#fc0;}
 50% {color:#ff0;}
 75% {color:#0f0;}
100% {color:#0ff;}
}
@keyframes colorea{  
  0% {color:#f00;}
 25% {color:#fc0;}
 50% {color:#ff0;}
 75% {color:#0f0;}
100% {color:#0ff;}
}

/*  ... */

.colores2 {
  animation-name: colorea2;
  animation-duration: 25s;
  animation-direction: alternate;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
animation-direction: alternate;
  -webkit-animation-name:colorea2;
  -webkit-animation-duration: 25s;
  -webkit-animation-direction: alternate;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name:colorea2;
  -moz-animation-duration: 25s;
  -moz-animation-direction: alternate;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  -o-animation-name:colorea2;
  -o-animation-duration: 25s;
  -o-animation-direction: alternate;
  -o-animation-timing-function: linear;
  -o-animation-iteration-count: infinite;
}

@-o-keyframes colorea2{
  0% {color:#93f;}
 25% {color:#f00;}
 50% {color:#900;}
 75% {color:#630;}
100% {color:#93f;}
}
@-moz-keyframes colorea2{
  0% {color:#93f;}
 25% {color:#f00;}
 50% {color:#900;}
 75% {color:#630;}
100% {color:#93f;}
}
@-webkit-keyframes colorea2{
  0% {color:#93f;}
 25% {color:#f00;}
 50% {color:#900;}
 75% {color:#630;}
100% {color:#93f;}
}
@keyframes colorea2{
  0% {color:#93f;}
 25% {color:#f00;}
 50% {color:#900;}
 75% {color:#630;}
100% {color:#93f;}
}
/*   ..........  */
.colores3 {
  animation-name: colorea3;
  animation-duration: 25s;
  animation-direction: alternate;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  -webkit-animation-name:colorea3;
  -webkit-animation-duration: 25s;
  -webkit-animation-direction: alternate;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name:colorea3;
  -moz-animation-duration: 25s;
  -moz-animation-direction: alternate;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  -o-animation-name:colorea3;
  -o-animation-duration: 25s;
  -o-animation-direction: alternate;
  -o-animation-timing-function: linear;
  -o-animation-iteration-count: infinite;
}

@-o-keyframes colorea3{  
  0% {color:#fff;}
 25% {color:#f00;}
 50% {color:#fc0;}
 75% {color:#0f0;}
100% {color:#93f;}
}
@-moz-keyframes colorea3{  
  0% {color:#fff;}
 25% {color:#f00;}
 50% {color:#fc0;}
 75% {color:#0f0;}
100% {color:#93f;}
}
@-webkit-keyframes colorea3{  
  0% {color:#fff;}
 25% {color:#f00;}
 50% {color:#fc0;}
 75% {color:#0f0;}
100% {color:#93f;}
}
@keyframes colorea3{  
  0% {color:#fff;}
 25% {color:#f00;}
 50% {color:#fc0;}
 75% {color:#0f0;}
100% {color:#93f;}
}
/*   ..........  */

/* lobo */

.xthor {
  animation-name: xfade;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-name:xfade;
  -webkit-animation-duration: 5s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name:xfade;
  -moz-animation-duration: 5s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  -o-animation-name:xfade;
  -o-animation-duration: 5s;
  -o-animation-timing-function: linear;
  -o-animation-iteration-count: infinite;
}

@-moz-keyframes xfade{  
  0% { transform: scale(1); }
 50% { transform: scale(1.4); }
100% { transform: scale(1); }
}
@-webkit-keyframes xfade {  
  0% { transform: scale(1); }
 50% { transform: scale(1.4); }
100% { transform: scale(1); }
}
@keyframes xfade {  
  0% { transform: scale(1); }
 50% { transform: scale(1.4); }
100% { transform: scale(1); }
}
@-o-keyframes xfade {  
  0% { transform: scale(1); }
 50% { transform: scale(1.4); }
100% { transform: scale(1); }
}