/*EFEITO CARREGAMENTO LENTO*/

@keyframes square-animation {
    0% {
      left: 0;
      top: 0;
    }
  
    10.5% {
      left: 0;
      top: 0;
    }
  
    12.5% {
      left: 32px;
      top: 0;
    }
  
    23% {
      left: 32px;
      top: 0;
    }
  
    25% {
      left: 64px;
      top: 0;
    }
  
    35.5% {
      left: 64px;
      top: 0;
    }
  
    37.5% {
      left: 64px;
      top: 32px;
    }
  
    48% {
      left: 64px;
      top: 32px;
    }
  
    50% {
      left: 32px;
      top: 32px;
    }
  
    60.5% {
      left: 32px;
      top: 32px;
    }
  
    62.5% {
      left: 32px;
      top: 64px;
    }
  
    73% {
      left: 32px;
      top: 64px;
    }
  
    75% {
      left: 0;
      top: 64px;
    }
  
    85.5% {
      left: 0;
      top: 64px;
    }
  
    87.5% {
      left: 0;
      top: 32px;
    }
  
    98% {
      left: 0;
      top: 32px;
    }
  
    100% {
      left: 0;
      top: 0;
    }
  }
  
  .fade-in {
    animation: fadeIn 1s ease-in-out;
  }
  
  .fade-out {
    animation: fadeOut 1s ease-in-out;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }
  
  @keyframes fadeOut {
    from {
      opacity: 1;
    }
  
    to {
      opacity: 0;
    }
  }
  
  @keyframes slideInLeft {
    from {
      opacity: 0;
      transform: translateX(-100px);
    }
  
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes slideOutLeft {
    from {
      opacity: 1;
      transform: translateX(0);
    }
  
    to {
      opacity: 0;
      transform: translateX(-100px);
    }
  }
  
  @keyframes slideInRight {
    from {
      opacity: 0;
      transform: translateX(100px);
    }
  
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes slideOutRight {
    from {
      opacity: 1;
      transform: translateX(0);
    }
  
    to {
      opacity: 0;
      transform: translateX(100px);
    }
  }
  
  @keyframes slideInTop {
    from {
      opacity: 0;
      transform: translateY(-100px);
    }
  
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes slideInBottom {
    from {
      opacity: 0;
      transform: translateY(100px);
    }
  
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .animacao {
    opacity: 0;
    transition: opacity var(--tempo-animacao) ease-out, transform var(--tempo-animacao) ease-out;
  }
  
  .in-view-left,
  .in-view-right,
  .in-view-top,
  .in-view-bottom {
    animation-duration: var(--tempo-animacao);
    animation-fill-mode: forwards;
  }
  
  .out-view-left,
  .out-view-right,
  .out-view-top,
  .out-view-bottom {
    animation-duration: var(--tempo-animacao);
    animation-fill-mode: forwards;
  }
  
  .in-view-left {
    animation-name: slideInLeft;
  }
  
  .out-view-left {
    animation-name: slideOutLeft;
  }
  
  .in-view-right {
    animation-name: slideInRight;
  }
  
  .out-view-right {
    animation-name: slideOutRight;
  }
  
  .in-view-top {
    animation-name: slideInTop;
  }
  
  .in-view-bottom {
    animation-name: slideInBottom;
  }