.callback,
.simple,
.offset-countdown {
  font-size: 17px;
  background: #27ae60;
  padding: 0.3em 0.7em;
  color: #ecf0f1;
  -webkit-transition: background 0.5s ease-out;
  transition: background 0.5s ease-out;
  text-align: center;
}
.offset-countdown {
  margin-bottom: 10px;
}
.ended {
  background: #c0392b;
}
.styled{
  margin-bottom: 50px;
}
.styled div {
  display: inline-block;
  margin-left: 10px;
  font-size: 30px;
  font-weight: 100;
  line-height: 1;
  text-align: right;
}
/* IE7 inline-block hack */
*+html .styled div{
  display: inline;
  zoom: 1;
}
.styled div:first-child {
  margin-left: 0;
}
.styled div span {
  display: block;
  border-top: 1px solid #cecece;
  padding-top: 3px;
  font-size: 12px;
  font-weight: normal;
  text-transform: uppercase;
  text-align: left;
}


/* ESTA PARTE ES EL EFECTO DE TRANSICION DEL TEXTO QUE APARECE CUANDO SE TERMINA EL TIEMPO */
.cd-intro-content,
.cd-intro-content h1,
.cd-intro-content p,
.cd-intro-content .cd-btn {
  opacity: 0;
  animation-delay: 0.3s;
  animation-fill-mode: forwards;
}
 
.bouncy.cd-intro-content, .bouncy.cd-intro-content h1 {
  animation-name: cd-bounce-right;
}
 
.bouncy.cd-intro-content p {
  animation-name: cd-bounce-left;
}

.bouncy.cd-intro-content,
.bouncy.cd-intro-content h1,
.bouncy.cd-intro-content p {
  animation-duration: 0.6s;
}
 
.bouncy.cd-intro-content .cd-btn {
  animation-name: cd-bounce-rotate;
  animation-duration: 0.5s;
}
 
.bouncy.cd-intro-content .cd-btn.main-action {
  animation-delay: 0.4s;
}
 
@keyframes cd-bounce-right {
  0% {
    opacity: .2;
    transform: translateX(-200px);
  }
  60% {
    opacity: .7;
    transform: translateX(15px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
 
@keyframes cd-bounce-left {
  0% {
    opacity: .2;
    transform: translateX(200px);
  }
  60% {
    opacity: .7;
    transform: translateX(-15px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
 
@keyframes cd-bounce-rotate {
  0% {
    opacity: .2;
    transform: perspective(800px) rotateX(-80deg);
  }
  20% {
    opacity: 1;
  }
  60% {
    transform: perspective(800px) rotateX(20deg);
  }
  100% {
    opacity: 1;
    transform: perspective(800px) rotateX(0);
  }
}