/* WESOLOWSKI */

/* animation -------------------------------------------------- */

.animation {
    z-index: 0!important;
    position: absolute;
    top: 300px;
    left: calc(50% - 400px);
    transform-style: preserve-3d;
    perspective: px;
    }

.square1 {
    opacity: 0.4;
    width: 800px;
    height: 800px;
    border: 1px solid #fff;
    background: rgba(150,160,180,0.2);
    transform: rotate(45deg);
    transform-style: preserve-3d;
    animation: square1 40s infinite linear;
    }

@keyframes square1 {
      0% {
        transform: rotateX(10deg) rotateY(0deg) rotate(45deg);
      }
      100% {
        transform: rotateX(10deg) rotateY(360deg) rotate(45deg);
      }
    }

.square2 {
    position: relative; top:-800px;
    opacity: 0.4;
    width: 800px;
    height: 800px;
    border: 1px solid #fff;
    background: rgba(150,160,180,0.2);
    transform: rotate(45deg);
    transform-style: preserve-3d;
    animation: square2 40s infinite linear;
    }

@keyframes square2 {
      0% {
        transform: rotateX(10deg) rotateY(90deg) rotate(45deg);
      }
      100% {
        transform: rotateX(10deg) rotateY(450deg) rotate(45deg);
      }
    }

.square3 {
    position: relative; top:-1603px;
    opacity: 0.4;
    width: 800px;
    height: 800px;
    border: 1.2px solid #fff;
    background: rgba(150,160,180,0.2);
    /* transform: rotateX(80deg); */
    transform-style: preserve-3d;
    animation: square3 40s infinite linear;
    }

@keyframes square3 {
    0% { transform: rotateX(80deg) rotateY(0deg) rotateZ(45deg);}
    100% { transform: rotateX(80deg) rotateY(0deg) rotateZ(405deg);}
    }


.line1 {
    position: absolute; top: 400px; left: calc(50% - 2000px);
    opacity: 0.2;
    width: 4000px;
    height: 0.5px;
    border: 0px solid #fff;
    background: #fff;
    animation: line1 40s infinite linear;
    }

@keyframes line1 {
    0% { transform: rotateZ(0deg); }
    100% { transform: rotateZ(360deg); }
    }

.line2 {
    position: absolute; top: 400px; left: calc(50% - 2000px);
    opacity: 0.2;
    width: 4000px;
    height: 0.5px;
    border: 0px solid #fff;
    background: #fff;
    animation: line2 40s infinite linear;
    }

@keyframes line2 {
    0% { transform: rotateZ(90deg); }
    100% { transform: rotateZ(450deg); }
    }

.line3 {
    position: absolute; top: 400px; left: calc(50% - 2000px);
    opacity: 0.2;
    width: 4000px;
    height: 0.5px;
    border: 0px solid #fff;
    background: #fff;
    animation: line3 40s infinite linear;
    }

@keyframes line3 {
    0% { transform: rotateZ(45deg); }
    100% { transform: rotateZ(405deg); }
    }

.line4 {
    position: absolute; top: 400px; left: calc(50% - 2000px);
    opacity: 0.2;
    width: 4000px;
    height: 0.5px;
    border: 0px solid #fff;
    background: #fff;
    animation: line4 40s infinite linear;
    }

@keyframes line4 {
    0% { transform: rotateZ(-45deg); }
    100% { transform: rotateZ(315deg); }
    }

/* end -------------------------------------------------- */