.cortinas{
    animation-name: cortinas-w;
        animation-duration: 2s;

    
}
@keyframes cortinas-w {
  from {
    width: 50%;
  }

  to {
      width: 30px;
  }
}
/*.header-top {
    animation-name: fondos-h;
    animation-duration: 1.5s;
}*/

@keyframes fondos-h {
  from {
      height: 50%;
  }

  to {
      height: 70px;
  }
}
#pir1{
    animation-name: lineas-vertical;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}
#pir2{
    animation-name: lineas-horizontal;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    animation-delay: .5s;
}
#pir4{
    animation-name: ladrillos;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-delay: 1.5s;
}
@keyframes lineas-vertical {
  from {
     clip-path: inset(0 0 100% 0);
  }

  to {
      clip-path: inset(0 0 0 0);
  }
}
@keyframes lineas-horizontal {
  from {
     clip-path: inset(0 100% 0 0);
  }

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

  to {
      clip-path: inset(0 0 0 0);
      opacity: 1;
  }
}
/*h1{
    animation-name: titulo;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-delay: 1.5s;
}
@keyframes titulo {
  from {
      opacity: 0;
      transform: translate(-50%, 20%);
  }

  to {
      clip-path: inset(0 0 0 0);
      opacity: 1;
      transform: translate(-50%, 50%);
  }
}*/