#lineas-ani{
    animation-name: lineas;
    animation-duration: 4s;
    animation-delay: 0;
    animation-timing-function: ease-in;
}
#ventana-ani{
    animation-name: lineas;
    animation-duration: 1s;
    animation-delay: 0;
    animation-timing-function: ease-in;
    fill: #1b566f;
    mix-blend-mode: multiply;
}
#ladrillos-ani{
    animation-name: ladrillos;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-delay: 3s;
    animation-timing-function: ease-in;
    opacity: 0;
}
#anahuacalli path{
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
    opacity: 0;
}
/*#n1,#n2,#n3,#n4,#n3_1,#n4_1,#n5{
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
    opacity: 0;
}*/
#anahuacalli path:nth-child(1){
    animation-name: an1;
}
#anahuacalli path:nth-child(2){
    animation-name: an2;
}
#anahuacalli path:nth-child(3){
    animation-name: an3;
}
#anahuacalli path:nth-child(4){
    animation-name: an4;
}
#anahuacalli path:nth-child(5){
    animation-name: an5;
}
#anahuacalli path:nth-child(6){
    animation-name: an6;
}
#anahuacalli path:nth-child(7){
    animation-name: an7;
}
#anahuacalli path:nth-child(8){
    animation-name: an8;
}
#anahuacalli path:nth-child(9){
    animation-name: an9;
}
#anahuacalli path:nth-child(10){
    animation-name: an10;
}
#anahuacalli path:nth-child(11){
    animation-name: an11;
}
#anahuacalli path:nth-child(12){
    animation-name: an12;
}
#anahuacalli path:nth-child(13){
    animation-name: an13;
}
#anahuacalli path:nth-child(14){
    animation-name: an14;
}
#anahuacalli path:nth-child(15){
    animation-name: an15;
}
#anahuacalli path:nth-child(16){
    animation-name: an16;
}
/*
#n1{
    animation-name: ni1;
}
#n2{
    animation-name: ni2;
}
#n3,#n3_1{
    animation-name: ni3;
}
#n4,#n4_1{
    animation-name: ni4;
}
#n5{
    animation-name: ni5;
}
*/

@keyframes lineas {
  from {
      opacity: 0;
  }

  to {
      opacity: 1;
  }
}

@keyframes ladrillos {
  from {
     clip-path: inset(0 100% 0  0 );
      opacity: 0;
  }

  to {
      clip-path: inset(0 0 0 0);
      opacity: 1;
  }
}
@keyframes an1 {
  from {
      transform: translate(60%, 40%);
      opacity: 0;
  }

  to {
      transform: translate(0, 0);
      opacity: 1;
  }
}
@keyframes an2 {
  from {
      transform: translate(50%, -40%);
      opacity: 0;
  }

  to {
      transform: translate(0, 0);
      opacity: 1;
  }
}
@keyframes an3 {
  from {
      transform: translate(40%, 50%);
      opacity: 0;
  }

  to {
      transform: translate(0, 0);
      opacity: 1;
  }
}
@keyframes an4 {
  from {
      transform: translate(30%, -50%);
      opacity: 0;
  }

  to {
      transform: translate(0, 0);
      opacity: 1;
  }
}
@keyframes an5 {
  from {
      transform: translate(20%, -60%);
      opacity: 0;
  }

  to {
      transform: translate(0, 0);
      opacity: 1;
  }
}
@keyframes an6 {
  from {
      transform: translate(0%, -70%);
      opacity: 0;
  }

  to {
      transform: translate(0, 0);
      opacity: 1;
  }
}
@keyframes an7 {
  from {
      transform: translate(-20%, 60%);
      opacity: 0;
  }

  to {
      transform: translate(0, 0);
      opacity: 1;
  }
}
@keyframes an8 {
  from {
      transform: translate(-30%, -60%);
      opacity: 0;
  }

  to {
      transform: translate(0, 0);
      opacity: 1;
  }
}
@keyframes an9 {
  from {
      transform: translate(-40%, 50%);
      opacity: 0;
  }

  to {
      transform: translate(0, 0);
      opacity: 1;
  }
}
@keyframes an10 {
  from {
      transform: translate(-50%, -50%);
      opacity: 0;
  }

  to {
      transform: translate(0, 0);
      opacity: 1;
  }
}
@keyframes an11 {
  from {
      transform: translate(-60%, -40%);
      opacity: 0;
  }

  to {
      transform: translate(0, 0);
      opacity: 1;
  }
}
@keyframes an12 {
  from {
      transform: translate(-60%, -40%);
      opacity: 0;
  }

  to {
      transform: translate(0, 0);
      opacity: 1;
  }
}
@keyframes an13 {
  from {
      transform: translate(-20%, 60%);
      opacity: 0;
  }

  to {
      transform: translate(0, 0);
      opacity: 1;
  }
}
@keyframes an14 {
  from {
      transform: translate(30%, -50%);
      opacity: 0;
  }

  to {
      transform: translate(0, 0);
      opacity: 1;
  }
}
@keyframes an15 {
  from {
      transform: translate(0%, -70%);
      opacity: 0;
  }

  to {
      transform: translate(0, 0);
      opacity: 1;
  }
}
@keyframes an16 {
  from {
      transform: translate(40%, 50%);
      opacity: 0;
  }

  to {
      transform: translate(0, 0);
      opacity: 1;
  }
}

@keyframes ni1 {
  from {
      transform: translate(30%, 50%);
      opacity: 0;
  }

  to {
      transform: translate(0, 0);
      opacity: 1;
  }
}
@keyframes ni2 {
  from {
      transform: translate(20%, -50%);
      opacity: 0;
  }

  to {
      transform: translate(0, 0);
      opacity: 1;
  }
}
@keyframes ni3 {
  from {
      transform: translate(0%, 60%);
      opacity: 0;
  }

  to {
      transform: translate(0, 0);
      opacity: 1;
  }
}
@keyframes ni4 {
  from {
      transform: translate(-20%, -50%);
      opacity: 0;
  }

  to {
      transform: translate(0, 0);
      opacity: 1;
  }
}
@keyframes ni5 {
  from {
      transform: translate(-30%, 50%);
      opacity: 0;
  }

  to {
      transform: translate(0, 0);
      opacity: 1;
  }
}



#n1,#n2,#n33,#n44,#n5{
    transition: all 1.5s ease;
}
#n1.pl,#n2.pl,#n33.pl,#n44.pl,#n5.pl{
    transform: translate(0%, 0%);
    opacity: 1;
}
#n1 {
      transform: translate(30%, 50%);
          opacity: 0;
}
#n2 {
      transform: translate(20%, -50%);
      opacity: 0;
}
#n33 {
      transform: translate(0%, 60%);
      opacity: 0;
}
#n44 {
      transform: translate(-20%, -50%);
      opacity: 0;
}
#n5 {
      transform: translate(-30%, 50%);
      opacity: 0;
}
#globo_1_{
    opacity: 0;
    transition: opacity 1s ease;
}
#globo_1_.active{
    opacity: 1;
}
/* Animación Olas */
.waveAnimation section {
  width: 100%;
  overflow: hidden;
}
.waveAnimation section .wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: url(wave.png);
  background-size: 1000px 100px;
}
.waveAnimation section .wave.wave1 {
  animation: animate 30s linear infinite;
  z-index: 5;
  opacity: 1;
  animation-delay: 0s;
  bottom: 0;
}
.waveAnimation section .wave.wave2 {
  animation: animate2 15s linear infinite;
  z-index: 4;
  opacity: 0.5;
  animation-delay: -5s;
  bottom: 10px;
}
.waveAnimation section .wave.wave3 {
  animation: animate 15s linear infinite;
  z-index: 3;
  opacity: 0.2;
  animation-delay: -2s;
  bottom: 20px;
}
.waveAnimation section .wave.wave4 {
  animation: animate2 15s linear infinite;
  z-index: 2;
  opacity: 0.7;
  animation-delay: -2s;
  bottom: 30px;
}
@keyframes animate {
  0%
  {
    background-position-x: 0;
  }
  100%{
    background-position-x: 1000px;
  }
}
@keyframes animate2 {
  0%
  {
    background-position-x: 0;
  }
  100%{
    background-position-x: -1000px;
  }
}