/*Presentacion*/
.landing .logo {
    position: relative;
    opacity: 0;
    animation-name: logofadein;
    animation-duration: 3s;
    animation-delay: 4s;
    animation-fill-mode: forwards;
    }
    
  @keyframes logofadein {
    from {
    opacity: 0;
    bottom: -40px;
  
    }
    to {
    opacity: 1;
    bottom: 0px;
    }
  }

.landing a:nth-child(1){
    position: relative;
    opacity: 0;
    animation-name: linksfadein;
    animation-duration: 2s;
    animation-delay: 4s;
    animation-fill-mode: forwards;
}

.landing a:nth-child(2){
    position: relative;
    opacity: 0;
    animation-name: linksfadein;
    animation-duration: 3s;
    animation-delay: 4s;
    animation-fill-mode: forwards;
}

.landing a:nth-child(3){
    position: relative;
    opacity: 0;
    animation-name: linksfadein;
    animation-duration: 4s;
    animation-delay: 4s;
    animation-fill-mode: forwards;
}

.landing a:nth-child(4){
    position: relative;
    opacity: 0;
    animation-name: linksfadein;
    animation-duration: 4s;
    animation-delay: 4s;
    animation-fill-mode: forwards;
}

  @keyframes linksfadein {
    from {
    opacity: 0;
    top: -80px;
  
    }
    to {
    opacity: 1;
    top: 0px;
    }
  }

#contenedor_presentacion p {
    position: relative;
    opacity: 0;
    animation-name: hojas;
    animation-duration: 2s;
    animation-delay: 5s;
    animation-fill-mode: forwards;
    }
    
    @keyframes fadeinp {
    from {
    opacity: 0;
  
    }
    to {
    opacity: 1;
    }
}

#contenedor_presentacion h1 {
    position: relative;
    opacity: 0;
    animation-name: fadeinh1;
    animation-duration: 2s;
    animation-delay: 4s;
    animation-fill-mode: forwards;
    }
    
  @keyframes fadeinh1 {
    from {
    opacity: 0;
    left: -40px;
  
    }
    to {
    opacity: 1;
    left: 0px;
    }
  }

  #contenedor_presentacion span {
    position: relative;
    opacity: 0;
    animation-name: fadeinspan;
    animation-duration: 2s;
    animation-delay: 4s;
    animation-fill-mode: forwards;    }
    
  @keyframes fadeinspan {
    from {
    opacity: 0;
    left: 40px;
  
    }
    to {
    opacity: 1;
    left: 0px;
    }
  }

  #contenedor_presentacion a {
    position: relative;
    opacity: 0;
    animation-name: fadeina;
    animation-duration: 2s;
    animation-delay: 4s;
    animation-fill-mode: forwards;      }
    
  @keyframes fadeina {
    from {
    opacity: 0;
    bottom: -40px;
  
    }
    to {
    opacity: 1;
    bottom: 0px;
    }
  }

/*Animacion*/
#trazo_izquierdo{
  fill:none;
  stroke: var(--beige-arena);
  stroke-width:.5;
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  animation: trazo 10s ease-in forwards;
}


.position1{
  position: absolute;
  left: 0px;
  top: 160px;
}

.position2{
  position: absolute;
  left: 2px;
  top: 40px;
}

.position3{
  position: absolute;
  left: 80px;
  top: 26px;
}

.position4{
  position: absolute;
  left: 34px;
  top: 76px;
  transform: scale(200%);
  opacity: 0;
  animation-name: hojas;
  animation-duration: 2s;
  animation-delay: 4s;
  animation-fill-mode: forwards;
  z-index: 1001;
}
  
@keyframes hojas {
      0%   {opacity: 0}
    100% {opacity: 1}
}

#trazo_central{
  fill:none;
  stroke: var(--beige-arena);
  stroke-width:.5;
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  animation: trazo 10s ease-in forwards;
}

#trazo_derecho{
  fill:none;
  stroke: var(--beige-arena);
  stroke-width:.5;
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  animation: trazo 10s ease-in forwards;
}

@keyframes trazo{
    0%   {stroke-dashoffset: 1500}
    95%  {stroke-dashoffset: 0}
    100% {stroke-opacity: 0}
}