.square-split {
  position: relative;
  width: 75px;
  height: 75px; }
  .square-split .split {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 0;
    background-color: #41adef;
    display: block;
    background-color: #41adef; }
  .square-split .split:nth-child(1) {
    left: 0px;
    top: 0;
    animation: a-split 2s infinite linear; }

@keyframes a-split {
  0% {
    left: 0px;
    top: 0; }
  50% {
    left: 25px;
    top: 25px; }
  100% {
    left: 0px;
    top: 0; } }
  .square-split .split:nth-child(2) {
    left: 25px;
    top: 0;
    animation: b-split 2s infinite linear; }

@keyframes b-split {
  0% {
    left: 25px;
    top: 0; }
  50% {
    left: 25px;
    top: 25px; }
  100% {
    left: 25px;
    top: 0; } }
  .square-split .split:nth-child(3) {
    left: 50px;
    top: 0;
    animation: c-split 2s infinite linear; }

@keyframes c-split {
  0% {
    left: 50px;
    top: 0; }
  50% {
    left: 25px;
    top: 25px; }
  100% {
    left: 50px;
    top: 0; } }
  .square-split .split:nth-child(4) {
    left: 0px;
    top: 25px;
    animation: d-split 2s infinite linear; }

@keyframes d-split {
  0% {
    left: 0px;
    top: 25px; }
  50% {
    left: 25px;
    top: 25px; }
  100% {
    left: 0px;
    top: 25px; } }
  .square-split .split:nth-child(5) {
    left: 25px;
    top: 25px;
    animation: e-split 2s infinite linear; }

@keyframes e-split {
  0% {
    left: 25px;
    top: 25px; }
  50% {
    left: 25px;
    top: 25px; }
  100% {
    left: 25px;
    top: 25px; } }
  .square-split .split:nth-child(6) {
    left: 50px;
    top: 25px;
    animation: f-split 2s infinite linear; }

@keyframes f-split {
  0% {
    left: 50px;
    top: 25px; }
  50% {
    left: 25px;
    top: 25px; }
  100% {
    left: 50px;
    top: 25px; } }
  .square-split .split:nth-child(7) {
    left: 0px;
    top: 50px;
    animation: g-split 2s infinite linear; }

@keyframes g-split {
  0% {
    left: 0px;
    top: 50px; }
  50% {
    left: 25px;
    top: 25px; }
  100% {
    left: 0px;
    top: 50px; } }
  .square-split .split:nth-child(8) {
    left: 25px;
    top: 50px;
    animation: h-split 2s infinite linear; }

@keyframes h-split {
  0% {
    left: 25px;
    top: 50px; }
  50% {
    left: 25px;
    top: 25px; }
  100% {
    left: 25px;
    top: 50px; } }
  .square-split .split:nth-child(9) {
    left: 50px;
    top: 50px;
    animation: i-split 2s infinite linear; }

@keyframes i-split {
  0% {
    left: 50px;
    top: 50px; }
  50% {
    left: 25px;
    top: 25px; }
  100% {
    left: 50px;
    top: 50px; } }
  .square-split .split:nth-child(10) {
    left: 75px;
    top: 50px;
    animation: j-split 2s infinite linear; }

@keyframes j-split {
  0% {
    left: 75px;
    top: 50px; }
  50% {
    left: 25px;
    top: 25px; }
  100% {
    left: 75px;
    top: 50px; } }

.square-rotating {
  position: relative;
  width: 75px;
  height: 75px; }
  .square-rotating .rotate {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 0;
    background-color: #41adef;
    display: block;
    background-color: #41adef;
    animation: rotating 2s infinite linear; }
  .square-rotating .rotate:nth-child(1) {
    left: 0px;
    top: 0; }
  .square-rotating .rotate:nth-child(2) {
    left: 25px;
    top: 0; }
  .square-rotating .rotate:nth-child(3) {
    left: 50px;
    top: 0; }
  .square-rotating .rotate:nth-child(4) {
    left: 0px;
    top: 25px; }
  .square-rotating .rotate:nth-child(5) {
    left: 25px;
    top: 25px; }
  .square-rotating .rotate:nth-child(6) {
    left: 50px;
    top: 25px; }
  .square-rotating .rotate:nth-child(7) {
    left: 0px;
    top: 50px; }
  .square-rotating .rotate:nth-child(8) {
    left: 25px;
    top: 50px; }
  .square-rotating .rotate:nth-child(9) {
    left: 50px;
    top: 50px; }
  .square-rotating .rotate:nth-child(10) {
    left: 75px;
    top: 50px; }

@keyframes rotating {
  0% {
    transform: rotate(0); }
  50% {
    transform: rotate(180deg); }
  100% {
    transform: rotate(360deg); } }

.square-gradient {
  position: relative;
  width: 60px;
  height: 75px; }
  .square-gradient .gradient {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 0;
    background-color: #41adef;
    display: block;
    background-color: #41adef; }
  .square-gradient .gradient:nth-child(1) {
    left: 0px;
    top: 0; }
  .square-gradient .gradient:nth-child(1) {
    animation: a-gradient 1s infinite linear; }

@keyframes a-gradient {
  0% {
    transform: scale(1); }
  20% {
    transform: scale(0.6); }
  40% {
    transform: scale(0.4); }
  60% {
    transform: scale(0.2); }
  80% {
    transform: scale(0.6); }
  100% {
    transform: scale(1); } }
  .square-gradient .gradient:nth-child(2) {
    left: 20px;
    top: 0; }
  .square-gradient .gradient:nth-child(2) {
    animation: b-gradient 1s infinite linear; }

@keyframes b-gradient {
  0% {
    transform: scale(1); }
  20% {
    transform: scale(1); }
  40% {
    transform: scale(0.6); }
  60% {
    transform: scale(0.2); }
  80% {
    transform: scale(0.8); }
  100% {
    transform: scale(1); } }
  .square-gradient .gradient:nth-child(3) {
    left: 40px;
    top: 0; }
  .square-gradient .gradient:nth-child(3) {
    animation: c-gradient 1s infinite linear; }

@keyframes c-gradient {
  0% {
    transform: scale(1); }
  20% {
    transform: scale(1); }
  40% {
    transform: scale(1); }
  60% {
    transform: scale(0.6); }
  80% {
    transform: scale(0.2); }
  100% {
    transform: scale(1); } }
  .square-gradient .gradient:nth-child(4) {
    left: 0px;
    top: 20px; }
  .square-gradient .gradient:nth-child(4) {
    animation: d-gradient 1s infinite linear; }

@keyframes d-gradient {
  0% {
    transform: scale(1); }
  20% {
    transform: scale(1); }
  40% {
    transform: scale(0.6); }
  60% {
    transform: scale(0.2); }
  80% {
    transform: scale(0.8); }
  100% {
    transform: scale(1); } }
  .square-gradient .gradient:nth-child(5) {
    left: 20px;
    top: 20px; }
  .square-gradient .gradient:nth-child(5) {
    animation: e-gradient 1s infinite linear; }

@keyframes e-gradient {
  0% {
    transform: scale(1); }
  20% {
    transform: scale(1); }
  40% {
    transform: scale(1); }
  60% {
    transform: scale(0.6); }
  80% {
    transform: scale(0.2); }
  100% {
    transform: scale(1); } }
  .square-gradient .gradient:nth-child(6) {
    left: 40px;
    top: 20px; }
  .square-gradient .gradient:nth-child(6) {
    animation: f-gradient 1s infinite linear; }

@keyframes f-gradient {
  0% {
    transform: scale(1); }
  20% {
    transform: scale(1); }
  40% {
    transform: scale(1); }
  60% {
    transform: scale(1); }
  80% {
    transform: scale(0.2); }
  100% {
    transform: scale(1); } }
  .square-gradient .gradient:nth-child(7) {
    left: 0px;
    top: 40px; }
  .square-gradient .gradient:nth-child(7) {
    animation: g-gradient 1s infinite linear; }

@keyframes g-gradient {
  0% {
    transform: scale(1); }
  20% {
    transform: scale(1); }
  40% {
    transform: scale(1); }
  60% {
    transform: scale(0.6); }
  80% {
    transform: scale(0.2); }
  100% {
    transform: scale(1); } }
  .square-gradient .gradient:nth-child(8) {
    left: 20px;
    top: 40px; }
  .square-gradient .gradient:nth-child(8) {
    animation: h-gradient 1s infinite linear; }

@keyframes h-gradient {
  0% {
    transform: scale(1); }
  20% {
    transform: scale(1); }
  40% {
    transform: scale(1); }
  60% {
    transform: scale(1); }
  80% {
    transform: scale(0.2); }
  100% {
    transform: scale(1); } }
  .square-gradient .gradient:nth-child(9) {
    left: 40px;
    top: 40px; }
  .square-gradient .gradient:nth-child(9) {
    animation: i-gradient 1s infinite linear; }

@keyframes i-gradient {
  0% {
    transform: scale(1); }
  20% {
    transform: scale(1); }
  40% {
    transform: scale(1); }
  50% {
    transform: scale(1); }
  60% {
    transform: scale(1); }
  70% {
    transform: scale(1); }
  80% {
    transform: scale(1); }
  90% {
    transform: scale(0.5); }
  100% {
    transform: scale(1); } }
  .square-gradient .gradient:nth-child(10) {
    left: 60px;
    top: 40px; }
  .square-gradient .gradient:nth-child(10) {
    animation: j-gradient 1s infinite linear; }

@keyframes j-gradient {
  0% {
    transform: scale(1); }
  20% {
    transform: scale(1); }
  40% {
    transform: scale(1); }
  60% {
    transform: scale(1); }
  80% {
    transform: scale(0.2); }
  100% {
    transform: scale(1); } }

.square-face {
  position: relative;
  width: 75px;
  height: 75px;
  overflow: visible; }
  .square-face .face {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 0;
    background-color: #41adef;
    display: block;
    background-color: #41adef; }
  .square-face .face:nth-child(1) {
    left: 0px;
    top: 0; }
  .square-face .face:nth-child(1) {
    animation: a-face 1s infinite linear; }

@keyframes a-face {
  0% {
    transform: scale(1); }
  20% {
    transform: scale(1.4); }
  40% {
    transform: scale(1.3); }
  60% {
    transform: scale(1.2); }
  80% {
    transform: scale(1.1); }
  100% {
    transform: scale(1); } }
  .square-face .face:nth-child(2) {
    left: 25px;
    top: 0; }
  .square-face .face:nth-child(2) {
    animation: b-face 1s infinite linear; }

@keyframes b-face {
  0% {
    transform: scale(1); }
  20% {
    transform: scale(1); }
  40% {
    transform: scale(1.4); }
  60% {
    transform: scale(1.3); }
  80% {
    transform: scale(1.1); }
  100% {
    transform: scale(1); } }
  .square-face .face:nth-child(3) {
    left: 50px;
    top: 0; }
  .square-face .face:nth-child(3) {
    left: 0px;
    top: 25px; }
  .square-face .face:nth-child(3) {
    animation: c-face 1s infinite linear; }

@keyframes c-face {
  0% {
    transform: scale(1); }
  20% {
    transform: scale(1); }
  40% {
    transform: scale(1); }
  60% {
    transform: scale(1.4); }
  80% {
    transform: scale(1.1); }
  100% {
    transform: scale(1); } }
  .square-face .face:nth-child(4) {
    left: 75px;
    top: 0; }
  .square-face .face:nth-child(4) {
    left: 25px;
    top: 25px; }
  .square-face .face:nth-child(4) {
    animation: d-face 1s infinite linear; }

@keyframes d-face {
  0% {
    transform: scale(1); }
  20% {
    transform: scale(1); }
  40% {
    transform: scale(1); }
  60% {
    transform: scale(1); }
  80% {
    transform: scale(1.4); }
  100% {
    transform: scale(1); } }
  .square-face .face:nth-child(5) {
    left: 100px;
    top: 0; }
  .square-face .face:nth-child(5) {
    left: 50px;
    top: 25px; }

.square-move {
  position: relative;
  width: 75px;
  height: 75px;
  overflow: visible; }
  .square-move .move {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 0;
    background-color: #41adef;
    display: block;
    background-color: #41adef;
    border-radius: 3px; }
  .square-move .move:nth-child(1) {
    left: 0px;
    top: 0; }
  .square-move .move:nth-child(1) {
    animation: a-move 2s infinite linear; }

@keyframes a-move {
  0% {
    left: 0px;
    top: 0; }
  8% {
    left: 0px;
    top: 0; }
  16% {
    left: 25px;
    top: 0; }
  24% {
    left: 25px;
    top: 0; }
  32% {
    left: 25px;
    top: 0; }
  40% {
    left: 25px;
    top: 25px; }
  48% {
    left: 25px;
    top: 25px; }
  56% {
    left: 25px;
    top: 25px; }
  64% {
    left: 0px;
    top: 25px; }
  72% {
    left: 0px;
    top: 25px; }
  80% {
    left: 0px;
    top: 25px; }
  88% {
    left: 0px;
    top: 0; }
  100% {
    left: 0px;
    top: 0; } }
  .square-move .move:nth-child(2) {
    left: 25px;
    top: 0; }
  .square-move .move:nth-child(2) {
    animation: b-move 2s infinite linear; }

@keyframes b-move {
  0% {
    left: 25px;
    top: 0; }
  8% {
    left: 25px;
    top: 25px; }
  16% {
    left: 25px;
    top: 25px; }
  24% {
    left: 25px;
    top: 25px; }
  32% {
    left: 0px;
    top: 25px; }
  40% {
    left: 0px;
    top: 25px; }
  48% {
    left: 0px;
    top: 25px; }
  56% {
    left: 0px;
    top: 0; }
  64% {
    left: 0px;
    top: 0; }
  72% {
    left: 0px;
    top: 0; }
  80% {
    left: 25px;
    top: 0; }
  88% {
    left: 25px;
    top: 0; }
  100% {
    left: 25px;
    top: 0; } }
  .square-move .move:nth-child(3) {
    left: 50px;
    top: 0; }
  .square-move .move:nth-child(3) {
    left: 0px;
    top: 25px; }
  .square-move .move:nth-child(3) {
    animation: c-move 2s infinite linear; }

@keyframes c-move {
  0% {
    left: 0px;
    top: 25px; }
  8% {
    left: 0px;
    top: 25px; }
  16% {
    left: 0px;
    top: 25px; }
  24% {
    left: 0px;
    top: 0; }
  32% {
    left: 0px;
    top: 0; }
  40% {
    left: 0px;
    top: 0; }
  48% {
    left: 25px;
    top: 0; }
  56% {
    left: 25px;
    top: 0; }
  64% {
    left: 25px;
    top: 0; }
  72% {
    left: 25px;
    top: 25px; }
  80% {
    left: 25px;
    top: 25px; }
  88% {
    left: 25px;
    top: 25px; }
  100% {
    left: 0px;
    top: 25px; } }

.square-flip {
  position: relative;
  width: 75px;
  height: 75px;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center; }
  .square-flip .flip {
    position: absolute;
    display: block;
    height: 60px;
    width: 60px;
    background-color: #41adef;
    animation: rotateplane 1.5s infinite linear; }

@keyframes rotateplane {
  0% {
    transform: rotateX(0); }
  25% {
    transform: rotateX(90deg); }
  50% {
    transform: rotateY(0deg); }
  75% {
    transform: rotateY(90deg); }
  100% {
    transform: rotate3d(0, 0, 0, 0); } }

.square-flash {
  position: relative;
  width: 75px;
  height: 75px;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center; }
  .square-flash .flash {
    position: relative;
    display: block;
    height: 60px;
    width: 60px;
    background-color: transparent;
    overflow: hidden; }
  .square-flash .flash:after {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    content: ' ';
    height: 0;
    width: 12px;
    background-color: #41adef;
    animation: rotateFlash 3s infinite linear;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff; }
  .square-flash .flash-line {
    width: 2px;
    height: 2px;
    position: absolute;
    background-color: #41adef; }
  .square-flash .flash-line:nth-child(1) {
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    animation: a-flash 3s infinite linear; }

@keyframes a-flash {
  0% {
    height: 0; }
  50% {
    height: 100%; }
  70% {
    height: 100%; }
  100% {
    opacity: 0; } }
  .square-flash .flash-line:nth-child(2) {
    left: 50%;
    transform: translate(-50%, 0);
    top: 58px;
    animation: b-flash 3s infinite linear; }

@keyframes b-flash {
  0% {
    width: 0; }
  50% {
    width: 100%; }
  70% {
    width: 100%; }
  100% {
    opacity: 0; } }
  .square-flash .flash-line:nth-child(3) {
    left: 58px;
    top: 50%;
    transform: translate(0, -50%);
    animation: c-flash 3s infinite linear; }

@keyframes c-flash {
  0% {
    height: 0; }
  50% {
    height: 100%; }
  70% {
    height: 100%; }
  100% {
    opacity: 0; } }
  .square-flash .flash-line:nth-child(4) {
    left: 50%;
    transform: translate(-50%, 0);
    top: 0px;
    width: 0;
    animation: d-flash 3s infinite linear; }

@keyframes d-flash {
  0% {
    width: 0; }
  50% {
    width: 60px; }
  70% {
    width: 60px; }
  100% {
    opacity: 0; } }

@keyframes rotateFlash {
  0% {
    width: 0;
    height: 0; }
  50% {
    height: 60px;
    width: 60px; }
  70% {
    height: 60px;
    width: 60px;
    content: 'success'; }
  100% {
    content: 'success';
    opacity: 0;
    height: 60px;
    width: 60px; } }

.square-rolling {
  position: relative;
  width: 75px;
  height: 75px;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center; }
  .square-rolling .rolling {
    position: absolute;
    display: block;
    height: 60px;
    width: 60px;
    transform: rotateZ(0deg);
    background-color: #41adef;
    border-radius: 5%;
    animation: rotateRolling 2s infinite linear; }

@keyframes rotateRolling {
  0% { }
  20% {
    transform: rotateZ(40deg);
    border-radius: 50%;
    background-color: #f13b09;
    height: 60px;
    width: 60px; }
  30% {
    transform: rotateZ(80deg);
    border-radius: 50%;
    height: 40px;
    width: 40px;
    background-color: #f13b09; }
  40% {
    transform: rotateZ(100deg);
    border-radius: 50%;
    height: 36px;
    width: 36px;
    background-color: #f13b09; }
  50% {
    transform: rotateZ(100deg);
    border-radius: 50%;
    height: 30px;
    width: 30px;
    background-color: #f13b09; }
  60% {
    transform: rotateZ(50deg);
    border-radius: 30%;
    height: 40px;
    width: 40px;
    background-color: #f13b09; }
  70% {
    transform: rotateZ(30deg);
    border-radius: 10%;
    height: 60px;
    width: 60px;
    background-color: #f13b09; }
  80% {
    transform: rotateZ(0deg);
    border-radius: 5%; }
  100% {
    transform: rotateZ(0deg);
    border-radius: 5%; } }

.square-wind {
  position: relative;
  width: 75px;
  height: 75px;
  overflow: visible; }
  .square-wind .wind {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 0;
    background-color: #41adef;
    display: block;
    background-color: #41adef; }
  .square-wind .wind:nth-child(1) {
    left: 0px;
    top: 0; }
  .square-wind .wind:nth-child(1) {
    animation: a-wind 2s infinite linear; }

@keyframes a-wind {
  0% {
    opacity: 1; }
  40% {
    opacity: 0.52; }
  50% {
    opacity: 0.32; }
  60% {
    opacity: 0; }
  70% {
    opacity: 0.32; }
  80% {
    opacity: 0.52; }
  90% {
    opacity: 0.72; }
  100% {
    opacity: 1; } }
  .square-wind .wind:nth-child(2) {
    left: 25px;
    top: 0; }
  .square-wind .wind:nth-child(2) {
    animation: b-wind 2s infinite linear; }

@keyframes b-wind {
  0% {
    opacity: 1; }
  40% {
    opacity: 0.54; }
  50% {
    opacity: 0.34; }
  60% {
    opacity: 0; }
  70% {
    opacity: 0.34; }
  80% {
    opacity: 0.54; }
  90% {
    opacity: 0.74; }
  100% {
    opacity: 1; } }
  .square-wind .wind:nth-child(3) {
    left: 50px;
    top: 0; }
  .square-wind .wind:nth-child(3) {
    animation: c-wind 2s infinite linear; }

@keyframes c-wind {
  0% {
    opacity: 1; }
  40% {
    opacity: 0.56; }
  50% {
    opacity: 0.36; }
  60% {
    opacity: 0; }
  70% {
    opacity: 0.36; }
  80% {
    opacity: 0.56; }
  90% {
    opacity: 0.76; }
  100% {
    opacity: 1; } }
  .square-wind .wind:nth-child(4) {
    left: 0px;
    top: 25px; }
  .square-wind .wind:nth-child(4) {
    animation: d-wind 2s infinite linear; }

@keyframes d-wind {
  0% {
    opacity: 1; }
  40% {
    opacity: 0.58; }
  50% {
    opacity: 0.38; }
  60% {
    opacity: 0; }
  70% {
    opacity: 0.38; }
  80% {
    opacity: 0.58; }
  90% {
    opacity: 0.78; }
  100% {
    opacity: 1; } }
  .square-wind .wind:nth-child(5) {
    left: 25px;
    top: 25px; }
  .square-wind .wind:nth-child(5) {
    animation: e-wind 2s infinite linear; }

@keyframes e-wind {
  0% {
    opacity: 1; }
  40% {
    opacity: 0.6; }
  50% {
    opacity: 0.4; }
  60% {
    opacity: 0; }
  70% {
    opacity: 0.4; }
  80% {
    opacity: 0.6; }
  90% {
    opacity: 0.8; }
  100% {
    opacity: 1; } }
  .square-wind .wind:nth-child(6) {
    left: 50px;
    top: 25px; }
  .square-wind .wind:nth-child(6) {
    animation: f-wind 2s infinite linear; }

@keyframes f-wind {
  0% {
    opacity: 1; }
  40% {
    opacity: 0.62; }
  50% {
    opacity: 0.42; }
  60% {
    opacity: 0; }
  70% {
    opacity: 0.42; }
  80% {
    opacity: 0.62; }
  90% {
    opacity: 0.82; }
  100% {
    opacity: 1; } }
  .square-wind .wind:nth-child(7) {
    left: 0px;
    top: 50px; }
  .square-wind .wind:nth-child(7) {
    animation: g-wind 2s infinite linear; }

@keyframes g-wind {
  0% {
    opacity: 1; }
  40% {
    opacity: 0.64; }
  50% {
    opacity: 0.44; }
  60% {
    opacity: 0; }
  70% {
    opacity: 0.44; }
  80% {
    opacity: 0.64; }
  90% {
    opacity: 0.84; }
  100% {
    opacity: 1; } }
  .square-wind .wind:nth-child(8) {
    left: 25px;
    top: 50px; }
  .square-wind .wind:nth-child(8) {
    animation: h-wind 2s infinite linear; }

@keyframes h-wind {
  0% {
    opacity: 1; }
  40% {
    opacity: 0.66; }
  50% {
    opacity: 0.46; }
  60% {
    opacity: 0; }
  70% {
    opacity: 0.46; }
  80% {
    opacity: 0.66; }
  90% {
    opacity: 0.86; }
  100% {
    opacity: 1; } }
  .square-wind .wind:nth-child(9) {
    left: 50px;
    top: 50px; }
  .square-wind .wind:nth-child(9) {
    animation: i-wind 2s infinite linear; }

@keyframes i-wind {
  0% {
    opacity: 1; }
  40% {
    opacity: 0.68; }
  50% {
    opacity: 0.48; }
  60% {
    opacity: 0; }
  70% {
    opacity: 0.48; }
  80% {
    opacity: 0.68; }
  90% {
    opacity: 0.88; }
  100% {
    opacity: 1; } }
  .square-wind .wind:nth-child(10) {
    left: 75px;
    top: 50px; }
  .square-wind .wind:nth-child(10) {
    animation: j-wind 2s infinite linear; }

@keyframes j-wind {
  0% {
    opacity: 1; }
  40% {
    opacity: 0.7; }
  50% {
    opacity: 0.5; }
  60% {
    opacity: 0; }
  70% {
    opacity: 0.5; }
  80% {
    opacity: 0.7; }
  90% {
    opacity: 0.9; }
  100% {
    opacity: 1; } }

.square-imprisoned {
  position: relative;
  width: 75px;
  height: 75px;
  overflow: visible; }
  .square-imprisoned .imprisoned {
    position: absolute;
    z-index: 1;
    height: 100%;
    width: 100%;
    display: block;
    background-color: #41adef;
    border-radius: 3px; }
  .square-imprisoned .imprisoned-ball {
    left: 0;
    top: 0;
    position: absolute;
    z-index: 11;
    width: 20px;
    height: 20px;
    border-radius: 0;
    background-color: #41adef;
    display: block;
    background-color: #4c49e5;
    border-radius: 50%;
    animation: imprisoned 3s infinite linear;
    box-shadow: 0 0.4rem 0.8rem -0.1rem rgba(0, 32, 128, 0.1), 0 0 0 1px #f0f2f7; }

@keyframes imprisoned {
  6% {
    left: 49.20033px;
    top: 26.88564px; }
  12% {
    left: 10.9609px;
    top: 31.97571px; }
  18% {
    left: 22.0117px;
    top: 47.77735px; }
  24% {
    left: 1.52899px;
    top: 13.81662px; }
  30% {
    left: 11.55041px;
    top: 26.4275px; }
  36% {
    left: 0.88936px;
    top: 50.41007px; }
  42% {
    left: 29.99936px;
    top: 4.57054px; }
  48% {
    left: 27.08351px;
    top: 15.37294px; }
  54% {
    left: 18.71183px;
    top: 51.21781px; }
  60% {
    left: 0.13817px;
    top: 18.18776px; }
  66% {
    left: 11.08336px;
    top: 9.76079px; }
  72% {
    left: 23.74981px;
    top: 6.12711px; }
  78% {
    left: 59.21404px;
    top: 49.92352px; }
  84% {
    left: 21.93126px;
    top: 54.22602px; }
  90% {
    left: 35.99032px;
    top: 10.3615px; }
  96% {
    left: 15.42127px;
    top: 55.19885px; }
  100% {
    left: 0;
    top: 0; } }

.square-corrugated {
  position: relative;
  width: 75px;
  height: 75px;
  overflow: visible; }
  .square-corrugated .corrugated {
    z-index: 1;
    position: absolute;
    display: block;
    background-color: #41adef;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0; }
  .square-corrugated .corrugated:nth-child(1) {
    height: 12.5px;
    width: 12.5px;
    animation: a-corrugated 1.5s infinite linear; }

@keyframes a-corrugated {
  0% {
    opacity: 0; }
  5% {
    opacity: 1; }
  100% {
    opacity: 0; } }
  .square-corrugated .corrugated:nth-child(2) {
    height: 25px;
    width: 25px;
    animation: b-corrugated 1.5s infinite linear; }

@keyframes b-corrugated {
  0% {
    opacity: 0; }
  10% {
    opacity: 1; }
  100% {
    opacity: 0; } }
  .square-corrugated .corrugated:nth-child(3) {
    height: 37.5px;
    width: 37.5px;
    animation: c-corrugated 1.5s infinite linear; }

@keyframes c-corrugated {
  0% {
    opacity: 0; }
  15% {
    opacity: 1; }
  100% {
    opacity: 0; } }
  .square-corrugated .corrugated:nth-child(4) {
    height: 50px;
    width: 50px;
    animation: d-corrugated 1.5s infinite linear; }

@keyframes d-corrugated {
  0% {
    opacity: 0; }
  20% {
    opacity: 1; }
  100% {
    opacity: 0; } }
  .square-corrugated .corrugated:nth-child(5) {
    height: 62.5px;
    width: 62.5px;
    animation: e-corrugated 1.5s infinite linear; }

@keyframes e-corrugated {
  0% {
    opacity: 0; }
  25% {
    opacity: 1; }
  100% {
    opacity: 0; } }
  .square-corrugated .corrugated:nth-child(6) {
    height: 75px;
    width: 75px;
    animation: f-corrugated 1.5s infinite linear; }

@keyframes f-corrugated {
  0% {
    opacity: 0; }
  30% {
    opacity: 1; }
  100% {
    opacity: 0; } }

.square-waves {
  position: relative;
  width: 75px;
  height: 75px;
  overflow: visible; }
  .square-waves .waves {
    position: relative;
    display: block;
    width: 75px;
    height: 75px;
    background-color: #41adef;
    overflow: hidden; }
  .square-waves .waves:before,
  .square-waves .waves:after {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    top: 0;
    left: 50%;
    background-color: white;
    border-radius: 40%;
    transform: translate(-50%, -70%) rotate(0);
    animation: waves 6s linear infinite;
    z-index: 10; }
  .square-waves .waves:after {
    border-radius: 47%;
    background-color: white;
    transform: translate(-50%, -70%) rotate(0);
    animation: waves 10s linear -5s infinite;
    z-index: 20; }

@keyframes waves {
  10% {
    transform: translate(-50%, -70%) rotate(36deg); }
  100% {
    transform: translate(-50%, -70%) rotate(360deg); }
  20% {
    transform: translate(-50%, -70%) rotate(72deg); }
  100% {
    transform: translate(-50%, -70%) rotate(360deg); }
  30% {
    transform: translate(-50%, -70%) rotate(108deg); }
  100% {
    transform: translate(-50%, -70%) rotate(360deg); }
  40% {
    transform: translate(-50%, -70%) rotate(144deg); }
  100% {
    transform: translate(-50%, -70%) rotate(360deg); }
  50% {
    transform: translate(-50%, -70%) rotate(180deg); }
  100% {
    transform: translate(-50%, -70%) rotate(360deg); }
  60% {
    transform: translate(-50%, -70%) rotate(216deg); }
  100% {
    transform: translate(-50%, -70%) rotate(360deg); }
  70% {
    transform: translate(-50%, -70%) rotate(252deg); }
  100% {
    transform: translate(-50%, -70%) rotate(360deg); }
  80% {
    transform: translate(-50%, -70%) rotate(288deg); }
  100% {
    transform: translate(-50%, -70%) rotate(360deg); }
  90% {
    transform: translate(-50%, -70%) rotate(324deg); }
  100% {
    transform: translate(-50%, -70%) rotate(360deg); }
  100% {
    transform: translate(-50%, -70%) rotate(360deg); }
  100% {
    transform: translate(-50%, -70%) rotate(360deg); } }