/* Color #2c6ee5
-------------------------- */
/*  */
/*  */
/*  */
.content[data-v-20d12f78] {
  max-width: 600px;
  margin: auto;
  padding: 5px;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: flex-start;
}
.content .column[data-v-20d12f78] {
  width: calc(33.33% - 10px);
  height: 170px;
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container[data-v-20d12f78] {
  width: 30px;
  height: 30px;
  position: relative;
}
.container.animation-5[data-v-20d12f78] {
  transform: rotate(45deg);
}
.container.animation-5 .shape[data-v-20d12f78] {
  width: 15px;
  height: 15px;
}
.container .shape[data-v-20d12f78] {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 1px;
}
.container .shape.shape1[data-v-20d12f78] {
  left: 0;
  background-color: #5C6BC0;
}
.container .shape.shape2[data-v-20d12f78] {
  right: 0;
  background-color: #8BC34A;
}
.container .shape.shape3[data-v-20d12f78] {
  bottom: 0;
  background-color: #FFB74D;
}
.container .shape.shape4[data-v-20d12f78] {
  bottom: 0;
  right: 0;
  background-color: #F44336;
}
@keyframes rotation-20d12f78 {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
.animation-5 .shape1[data-v-20d12f78] {
  animation: animation5shape1-20d12f78 2s ease 0s infinite reverse;
}
@keyframes animation5shape1-20d12f78 {
0% {
    transform: translate(0, 0);
}
25% {
    transform: translate(0, 15px);
}
50% {
    transform: translate(15px, 15px);
}
75% {
    transform: translate(15px, 0);
}
}
.animation-5 .shape2[data-v-20d12f78] {
  animation: animation5shape2-20d12f78 2s ease 0s infinite reverse;
}
@keyframes animation5shape2-20d12f78 {
0% {
    transform: translate(0, 0);
}
25% {
    transform: translate(-15px, 0);
}
50% {
    transform: translate(-15px, 15px);
}
75% {
    transform: translate(0, 15px);
}
}
.animation-5 .shape3[data-v-20d12f78] {
  animation: animation5shape3-20d12f78 2s ease 0s infinite reverse;
}
@keyframes animation5shape3-20d12f78 {
0% {
    transform: translate(0, 0);
}
25% {
    transform: translate(15px, 0);
}
50% {
    transform: translate(15px, -15px);
}
75% {
    transform: translate(0, -15px);
}
}
.animation-5 .shape4[data-v-20d12f78] {
  animation: animation5shape4-20d12f78 2s ease 0s infinite reverse;
}
@keyframes animation5shape4-20d12f78 {
0% {
    transform: translate(0, 0);
}
25% {
    transform: translate(0, -15px);
}
50% {
    transform: translate(-15px, -15px);
}
75% {
    transform: translate(-15px, 0);
}
}
@media screen and (max-width: 600px) {
.content[data-v-20d12f78] {
    align-content: flex-start;
}
.content .column[data-v-20d12f78] {
    width: calc(50% - 30px);
}
}
@media screen and (max-width: 400px) {
.content[data-v-20d12f78] {
    align-content: flex-start;
}
.content .column[data-v-20d12f78] {
    width: calc(100% - 30px);
}
}