@import "http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic";

body {
  padding-top: 40px;
  padding-bottom: 40px;
  background: url('../images/bg.jpg') center center;
  background-size: cover;
  color: #FFF;
  font-size: 16px;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 400;
}

h1{
  font-size: 2em;
  font-weight: 300;
}
a:link, a:visited{
  color: #FFF;
  text-decoration: underline;
}
a:active, a:hover{
  color: #FFF;
  text-decoration: none;
}
.logo {
  position: relative;
  max-width: 300px;
  height: 323px;
  margin: 10% auto 0 auto;
 /* background: url('../images/logo_marca.png') no-repeat;*/
}
.strellas_izq,
.strellas_der,
.humito,
.letra_1,
.letra_2,
.olla{
  position: absolute;
}
.strellas_izq{
  background: url('../images/sprite.png') no-repeat 0 0;
  width: 65px;
  height: 50px;
  left: 57px;
  top: 53px;
  -webkit-animation-name: strellas_izq;
  animation-name: strellas_izq;
}
.strellas_der{
  background: url('../images/sprite.png') no-repeat 0 -53px;
  width: 65px;
  height: 61px;
  left: 190px;
  top: 47px;
  -webkit-animation-name: strellas_der;
  animation-name: strellas_der;
}
.humito{
  background: url('../images/sprite.png') no-repeat -80px 0;
  width: 83px;
  height: 116px;
  left: 104px;
  top: -9px;
  -webkit-animation-name: humito;
  animation-name: humito;
}
.olla{
  background: url('../images/sprite.png') no-repeat 0 -346px;
  width: 300px;
  height: 165px;
  left: 0;
  top: 162px;
  z-index: 1;
  -webkit-animation-name: olla;
  animation-name: olla;
}
.letra_1{
  background: url('../images/sprite.png') no-repeat 0 -141px;
  width: 243px;
  height: 88px;
  left: 33px;
  top: 89px;
  -webkit-animation-name: letra_uno;
  animation-name: letra_uno;
}
.letra_2{
  background: url('../images/sprite.png') no-repeat 0 -243px;
  width: 235px;
  height: 105px;
  left: 33px;
  top: 197px;
  z-index: 2;
  -webkit-animation-name: letra_dos;
  animation-name: letra_dos;
}


.anime_1{
  position: absolute;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
}
.anime_15{
  position: absolute;
    -webkit-animation-duration: 0.7s;
    animation-duration: 0.7s;
}
.anime_2{
  position: absolute;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-iteration-count: infinite;
    animation-duration: 1.5s;
}
.anime_3{
  position: absolute;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-duration: 2s;
}
.anime_4{
  position: absolute;
    -webkit-animation-duration: 2.5s;
    -webkit-animation-iteration-count: infinite;
    animation-duration: 2.5s;
}
.loop{
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: reverse;
  animation-iteration-count: infinite;
    animation-direction: reverse;
}
.unavez{
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: reverse;
  animation-iteration-count: 1;
    animation-direction: reverse;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes strellas_izq {
    0%   {opacity: 100;}
    2%  {opacity: 0;}
    4%  {opacity: 100;}
}
@-webkit-keyframes strellas_der {
    0%   {opacity: 100;}
    4%  {opacity: 0;}
    5%  {opacity: 100;}
}
@-webkit-keyframes humito {
    0%   {left: 104px; top: -9px;}
    50%  {left: 104px; top: -15px;}
    100% {left: 104px; top: -9px;}
}
@-webkit-keyframes letra_uno {
    0%   {left: 33px; top: 89px; opacity: 100;}
    50%  {left: 33px; top: 85px; opacity: 50;}
    100% {left: 33px; top: 80px; opacity: 0;}
}
@-webkit-keyframes letra_dos {
    0%   {opacity: 100;}
    50%  {opacity: 100;}
    100% {opacity: 0;}
}

/* Standard syntax */
@keyframes strellas_izq {
    0%   {opacity: 100;}
    2%  {opacity: 0;}
    4%  {opacity: 100;}
}
@keyframes strellas_der {
    0%   {opacity: 100;}
    4%  {opacity: 0;}
    5%  {opacity: 100;}
}
@keyframes humito {
    0%   {left: 104px; top: -9px;}
    50%  {left: 104px; top: -15px;}
    100% {left: 104px; top: -9px;}
}
@keyframes letra_uno {
    0%   {left: 33px; top: 89px; opacity: 100;}
    50%  {left: 33px; top: 85px; opacity: 50;}
    100% {left: 33px; top: 80px; opacity: 0;}
}
@keyframes letra_dos {
    0%   {opacity: 100;}
    50%  {opacity: 100;}
    100% {opacity: 0;}
}