@font-face {
    font-family: 'Roboto-Regular';
    font-weight: normal;
    font-style: normal;
    src: local('Roboto-Regular'),
      url('../fonts/Roboto-Regular.eot') format('embedded-opentype'),
        url('../fonts/Roboto-Regular.ttf') format('truetype'),
        url('../fonts/Roboto-Regular.woff') format('woff'),
        url('../fonts/Roboto-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto-Medium';
    font-weight: normal;
    font-style: normal;
    src: local('Roboto-Medium'),
      url('../fonts/Roboto-Medium.eot') format('embedded-opentype'),
        url('../fonts/Roboto-Medium.ttf') format('truetype'),
        url('../fonts/Roboto-Medium.woff') format('woff'),
        url('../fonts/Roboto-Medium.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto-Bold';
    font-weight: normal;
    font-style: normal;
    src: local('Roboto-Bold'),
      url('../fonts/Roboto-Bold.eot') format('embedded-opentype'),
        url('../fonts/Roboto-Bold.ttf') format('truetype'),
        url('../fonts/Roboto-Bold.woff') format('woff'),
        url('../fonts/Roboto-Bold.woff2') format('woff2');
}
body{
  background-image:url("../img/fondo.svg");
  background-repeat: repeat-y;
  background-attachment: fixed;
  background-size: 100%;
}

#i{
  display: none;
  animation: zoomInUp 2s linear;
  -webkit-transition: zoomInUp 2s linear;
  -moz-transition: zoomInUp 2s linear;
  -o-transition: zoomInUp 2s linear;
  -ms-transition: zoomInUp 2s linear;
}
#informacion{
  /*animation: zoomOutDown 2s linear;*/
}

#discontinua{
  transition: all 6s linear;
  -webkit-transition: all 6s linear;
  -moz-transition: all 6s linear;
  -o-transition: all 6s linear;
  -ms-transition: all 6s linear;
}

.btnplay{
  display: none;
  cursor: pointer;

}
#play{
  display: none;
  cursor: pointer;
  animation: parpa 2s ease-in;
}

#playverano{
  transform: translate(-43%, -25.5%);
}
#playotono{
  transform: translate(-8%, -39.5%);
}
#playinvierno{
  transform: translate(-49%, -61%);
}
#reload{
  transform: translate(-72%, -51%);
}

.tierraP, .PrimaveraI,
.tierraV, .VeranoI,
.tierraO, .OtonoI,
.tierraI, .InviernoI{
  width: 12%;
  cursor: pointer;
}
.PrimaveraI{
  z-index: 1;
}
.VeranoI{
  z-index: 1;
  transform: translate(0%, 41.5%);
}
.OtonoI{
  z-index: 1;
  transform: translate(44.5%, 77%);
}
.InviernoI{
  transform: translate(86.5%, 42%);
}

.tierraP{
    height: auto;
    cursor: pointer;
    display: none;
    
/*    transform: translate(44%, 7%);
    -webkit-transform: translate(44%, 7%);
    -moz-transform: translate(44%, 7%);
    -o-transform: translate(44%, 7%);
    -ms-transform: translate(44%, 7%);*/

    transition: all 4s linear;
    -webkit-transition: all 4s linear;
    -moz-transition: all 4s linear;
    -o-transition: all 4s linear;
    -ms-transition: all 4s linear;
}
.tierraV{
    height: auto;
    cursor: pointer;
    display: none;
    
    transform: translate(0%, 41.5%);
    -webkit-transform: translate(0%, 41.5%);
    -moz-transform: translate(0%, 41.5%);
    -o-transform: translate(0%, 41.5%);
    -ms-transform: translate(0%, 41.5%);
}
.tierraO{
    height: auto;
    cursor: pointer;
    display: none;

/*    transition: all 4s linear;
    -webkit-transition: all 4s linear;
    -moz-transition: all 4s linear;
    -o-transition: all 4s linear;
    -ms-transition: all 4s linear;*/
    
    transform: translate(44.5%, 77%);
    -webkit-transform: translate(44.5%, 77%);
    -moz-transform: translate(44.5%, 77%);
    -o-transform: translate(44.5%, 77%);
    -ms-transform: translate(44.5%, 77%);
    
}
.tierraI{
    height: auto;
    cursor: pointer;
    display: none;
    
/*    transition: all 4s linear;
    -webkit-transition: all 4s linear;
    -moz-transition: all 4s linear;
    -o-transition: all 4s linear;
    -ms-transition: all 4s linear;*/

    transform: translate(86.5%, 42%);
    -webkit-transform: translate(86.5%, 42%);
    -moz-transform: translate(86.5%, 42%);
    -o-transform: translate(86.5%, 42%);
    -ms-transform: translate(86.5%, 42%);
}

svg{
  width: 100%;
  height: 100%;
}

.btn{
}

#flechas{
  display: none;  
}

#otono, 
#Primavera, 
#Verano, 
#Invierno, 
#i,
#informacion,
.copy{
  cursor: pointer;
}

.on,
.Primavera,.PrimaveraE,.PrimaveraI,
.Verano,.VeranoE, .VeranoI,
.Otono,.OtonoE, .OtonoI,
.Invierno,.InviernoE, .InviernoI,
#creditos{
  display: none;

}

@keyframes tierrap{
  0%{
    transform: translate(86.5%, 42%);
  }
  25%{
    transform: translate(78%, 20%);
  }
  50%{
    transform: translate(71%, 14%);
  }
  75%{
    transform: translate(61%, 9%);
  }  
  100%{
    transform: translate(44%, 7%);
  }
}

@keyframes tierrav{
  0%{
     transform: translate(44%, 7%);
  }
  25%{
     transform: translate(30%, 8.5%);
  }
  50%{
    transform: translate(19%, 11%);
  }
  75%{
    transform: translate(7%, 23.5%);
  }
  100%{
    transform: translate(0%, 41.5%);
  }
}

@keyframes tierrao{
  0%{
     transform: translate(0%, 41.5%);
  }
  25%{
     transform: translate(7.5%, 58%);
  }
  50%{
    transform: translate(15.5%, 66%);
  }
  75%{
    transform: translate(27.5%, 73%);
  }
  100%{
    transform: translate(44.5%, 77%);
  }
}

@keyframes tierrai{
  0%{
     transform: translate(44.5%, 77%);
  }
  25%{
     transform: translate(60.5%, 73%);
  }
  50%{
    transform: translate(69.5%, 69%);
  }
  75%{
    transform: translate(78.5%, 61%);
  }
  100%{
    transform: translate(86.5%, 42%);
  }
}

@keyframes zoomInUp {
  from {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(6000px, 3000px, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes parpa {
  from {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }  
  90% {
    opacity: 1;
  }        
  to% {
    opacity: 1;
  }    
}

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  to {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    transform-origin: center bottom;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes wobble {
  from {
    transform: none;
  }

  15% {
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    transform: none;
  }
}