:root{--tempo-animacao:1s}@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}