/* animaciones */

@keyframes bounceIn {
    from {
      opacity: 0;
      transform: scale(0.5);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  .wallpaper,
  .picture-shadow,
  .picture-image,
  .name,
  .job,
  .hr,
  .description,
  .contact,
  .social li {
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0, 0.5, 0, 1);
    animation-fill-mode: both;
  }
  .contact {
    animation-name: bounceIn;
  }
  @keyframes fillUp {
    from {
      transform: scaleX(0);
    }
    to {
      transform: scaleX(1);
    }
  }
  @keyframes picImage {
    from {
      opacity: 0;
      transform: scale(1.2) translateY(-1rem);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }
  @keyframes picShadow {
    from {
      opacity: 0;
      transform: scale(1.2) translateY(4rem);
    }
    to {
      opacity: 1;
      transform: scale(1.1) translateY(0);
    }
  }
  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-1rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(1rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes zoomOut {
    from {
      opacity: 0;
      transform: scale(1.05);
    }
    to {
      opacity: 0.2;
      transform: scale(1);
    }
  }
  .picture-shadow,
  .picture-image {
    animation-duration: 750ms;
    animation-timing-function: cubic-bezier(0, 0.5, 0.25, 1.25);
  }
  .wallpaper {
    animation-name: zoomOut;
    animation-timing-function: ease-out;
  }
  .picture-shadow {
    animation-name: picShadow;
  }
  .picture-image {
    animation-name: picImage;
  }
  .name {
    animation-name: slideDown;
  }
  .job {
    animation-name: slideUp;
  }
  .hr {
    animation-name: fillUp;
  }
  .description {
    animation-name: slideUp;
  }
  .social li {
    animation-duration: 500ms;
    animation-name: slideUp;
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1.5);
  }
  .name {
    animation-delay: 100ms;
  }
  .job {
    animation-delay: 200ms;
  }
  .hr {
    animation-delay: 300ms;
  }
  .description {
    animation-delay: 400ms;
  }
  .picture-image {
    animation-delay: 500ms;
  }
  .picture-shadow {
    animation-delay: 500ms;
  }
  .contact {
    animation-delay: 600ms;
  }
  .social li:nth-child(1) {
    animation-delay: 800ms;
  }
  .social li:nth-child(2) {
    animation-delay: 900ms;
  }
  .social li:nth-child(3) {
    animation-delay: 1s;
  }
  .social li:nth-child(4) {
    animation-delay: 1.1s;
  }
  .social li:nth-child(5) {
    animation-delay: 1.2s;
  }
  
  .wallpaper {
    animation-name: zoomOut;
    animation-timing-function: ease-out;
    }
    .picture-shadow {
    animation-name: picShadow;
    }
    .picture-image {
    animation-name: picImage;
    }
    .wallpaper {
      animation-timing-function: ease-out;
      }
      .wallpaper.is-loaded {
      animation-delay: 1s;
      animation-name: zoomOut;
      }
      .picture.is-loaded .picture-shadow {
      animation-name: picShadow;
      }
      .picture.is-loaded .picture-image {
      animation-name: picImage;
      }
      wallpaper,
  .picture-shadow,
  .picture-image {
  opacity: 0;
  }