.background {position: absolute;width:100%;height:100%;left: 0;top: 0;z-index:1;}

.back-layer {position: absolute;left:0;top:0;height:100%;width:100%;opacity:0;transition: opacity 1s ease;}
.back-layer.active {opacity:1;animation:background 190s linear infinite}
.back-layer.layer-1 {background:url(../i/image11.webp) left 0px top repeat-x;background-size: 100% 100%;}
.back-layer.layer-2 {background:url(../i/image11.webp) left 0px top repeat-x;background-size: 100% 100%;}
.back-layer.layer-3 {background:url(../i/image2.webp) left 0px top repeat-x;background-size: 100% 100%;}
.back-layer.layer-4 {background:url(../i/image2.webp) left 0px top repeat-x;background-size: 100% 100%;}

.sky {position: absolute;left:0;top:0;height:100%;width:100%;display: flex;
opacity:1;
    z-index: 10;
}

@keyframes background {
    0%{background-position:left top;}
    50%{background-position:left -2000px top;}
    100%{background-position:left top;}
}

.p-line {}

.cube {
    margin: 0 0 0 -10px;
    position: absolute;
    height: 100%;
    top:0;
    width: 100px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: transform 2s ease;
}

.p-line {    position: absolute;height: 100%;top:0;perspective: 1500px;perspective-origin: 50% 50%;}
.p-line-1 {left:0;}
.p-line-2 {left:140px;}
.p-line-3 {left:340px;}
.p-line-4 {left:450px;}
.p-line-5 {left:600px;}
.p-line-6 {left:750px;}


.cube > div {

    position: absolute;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    color:#fff;
    font-size:40px;

}

.front {transform: translateZ(50px);}
.back {transform: translateZ(-50px) rotateY(0deg);}
.left {transform: rotateY(0deg) translateX(-50px);transform-origin: center left;}
.right {transform: rotateY(0deg) translateX(50px);transform-origin: top right;}

.side {background: left top repeat-x;background-size: auto 100%;}


.cube-1 .side.front {background-image:url(../i/image3.webp);xbackground:#fff;}
.cube-2 .side.front {background-image:url(../i/image1.webp);xbackground:#fff;}
.cube-3 .side.front {background-image:url(../i/image3.webp);xbackground:#fff;}

/*
.cube-1 .side.right {background-image:url(../i/image3.webp);xbackground:red;}
.cube-2 .side.right {background-image:url(../i/image1.webp);xbackground:red;}
.cube-3 .side.right {background-image:url(../i/image3.webp);xbackground:red;}

.cube-1 .side.left {background-image:url(../i/image3.webp);xbackground:green;}
.cube-2 .side.left {background-image:url(../i/image1.webp);xbackground:green;}
.cube-3 .side.left {background-image:url(../i/image3.webp);xbackground:green;}
*/


.cube-1 .side.back {background-image:url(../i/image2_0.webp);xbackground:orange;}
.cube-2 .side.back {background-image:url(../i/image2_0.webp);xbackground:orange;}
.cube-3 .side.back {background-image:url(../i/image2_0.webp);xbackground:orange;}



.swiper-slide-main.swiper-slide-active .position-1 .cube-1-animation .side.front {animation:cube1 500s infinite linear;}
.swiper-slide-main.swiper-slide-active .position-1 .cube-2-animation .side.front {animation:cube2 400s infinite linear;}
.swiper-slide-main.swiper-slide-active .position-1 .cube-3-animation .side.front {animation:cube3 300s infinite linear;}
.swiper-slide-main.swiper-slide-active .position-1 .cube-4-animation .side.front {animation:cube4 200s infinite linear;}
.swiper-slide-main.swiper-slide-active .position-1 .cube-5-animation .side.front {animation:cube5 200s infinite linear;}

.swiper-slide-main.swiper-slide-active .cube-1-animation .side.right {xanimation:cube1 500s infinite linear;}
.swiper-slide-main.swiper-slide-active .cube-2-animation .side.right {xanimation:cube2 300s infinite linear;}
.swiper-slide-main.swiper-slide-active .cube-3-animation .side.right {xanimation:cube3 200s infinite linear;}
.swiper-slide-main.swiper-slide-active .cube-4-animation .side.right {xanimation:cube4 200s infinite linear;}
.swiper-slide-main.swiper-slide-active .cube-5-animation .side.right {xanimation:cube5 200s infinite linear;}

.swiper-slide-main.swiper-slide-active .cube-1-animation .side.left {xanimation:cube1-v2 100s infinite linear;}
.swiper-slide-main.swiper-slide-active .cube-2-animation .side.left {xanimation:cube2-v2 120s infinite linear;}
.swiper-slide-main.swiper-slide-active .cube-3-animation .side.left {xanimation:cube3-v2 130s infinite linear;}
.swiper-slide-main.swiper-slide-active .cube-4-animation .side.left {xanimation:cube4-v2 140s infinite linear;}
.swiper-slide-main.swiper-slide-active .cube-5-animation .side.left {xanimation:cube5-v2 150s infinite linear;}

.swiper-slide-main.swiper-slide-active .position-3 .cube-1-animation .side.back {animation:cube1-v2 500s infinite linear;}
.swiper-slide-main.swiper-slide-active .position-3 .cube-2-animation .side.back {animation:cube2-v2 400s infinite linear;}
.swiper-slide-main.swiper-slide-active .position-3 .cube-3-animation .side.back {animation:cube3-v2 300s infinite linear;}
.swiper-slide-main.swiper-slide-active .position-3 .cube-4-animation .side.back {animation:cube4-v2 100s infinite linear;}
.swiper-slide-main.swiper-slide-active .position-3 .cube-5-animation .side.back {animation:cube5-v2 200s infinite linear;}

@keyframes cube1{
    0%{background-position:left top;}
    50%{background-position:left 3000px top;}
    100%{background-position:left top;}
}

@keyframes cube2{
    0%{background-position:left top;}
    50%{background-position:left -4000px top;}
    100%{background-position:left top;}
}

@keyframes cube3{
    0%{background-position:left top;}
    50%{background-position:left 2000px top;}
    100%{background-position:left top;}
}

@keyframes cube4{
    0%{background-position:left top;}
    50%{background-position:left -2000px top;}
    100%{background-position:left top;}
}

@keyframes cube5{
    0%{background-position:left top;}
    50%{background-position:left 3000px top;}
    100%{background-position:left top;}
}


@keyframes cube1-v2{
    0%{background-position:left 1000px top;}
    50%{background-position:left 3000px top;}
    100%{background-position:left 1000px top;}
}

@keyframes cube2-v2{
    0%{background-position:left -2000px top;}
    50%{background-position:left -4000px top;}
    100%{background-position:left -2000px top;}
}

@keyframes cube3-v2{
    0%{background-position:left 0px top;}
    50%{background-position:left 2000px top;}
    100%{background-position:left top;}
}

@keyframes cube4-v2{
    0%{background-position:left -500px top;}
    50%{background-position:left -2000px top;}
    100%{background-position:left top;}
}

@keyframes cube5-v2{
    0%{background-position:left 1000px top;}
    50%{background-position:left 3000px top;}
    100%{background-position:left top;}
}



.gradi {background: linear-gradient(0deg, #030606 0%, rgba(3, 6, 6, 0.00) 100%);position: absolute;left:0;bottom:0;height:150px;width:100%;z-index: 10;}
.gradi2 {display:none;background: linear-gradient(180deg, #2D1851 17.53%, rgba(56, 36, 94, 0.00) 100%);;position: absolute;left:0;top:0;height:2300px;width:100%;z-index: 510;opacity: 0.8}
.stars {background: url(../i/stars2.png) center .dots-animated imgtop no-repeat;background-size:100% auto;position: absolute;left:0;top:0;height:2350px;width:100%;z-index: 511;opacity: 0.8}
.radial {opacity:0.5;background:url(../i/radial.webp) no-repeat;background-size: 100% 100%; ;position: absolute;right:0;bottom:0;height:100%;width:100%;z-index: 501;display: none;}
.dots-animated {opacity:0;display:none;background:background-size: 100% 100%; ;position: absolute;left:-100px;bottom:100px;height:600px;width:1000px;z-index: 515;transform-origin: left bottom;transition: opacity 0.3s ease}
.swiper-slide-active.swiper-slide-cube .dots-animated {opacity: 1;display: block;}
.dots-animated.active {opacity: 1;display: block;}

.dots {opacity:0;background:url(../i/dots.png) no-repeat;background-size: 100% 100%; ;position: absolute;left:0;bottom:0;height:700px;width:100%;z-index: 515;transform-origin: left bottom;transition: all 1s ease;transform: scale(0,1);animation: dots 30s linear infinite;}
.dots.active {opacity: 1;transform: scale(1,1)}
@keyframes dots{
    0%{transform: scale(1,0.9)}
    50%{transform: scale(1.3,1);}
    100%{transform: scale(1,0.9)}
}

.dots-animated {display: none; width:1000px;}
.dots-animated.active {display: block;}
.dots-animated img {position:absolute;left:-150px;top:0;width:1000px;height:600px;opacity: 0;}
.dots-animated img.active {opacity:1;}

.dots2 {opacity:1;background:url(../i/dots2.png) no-repeat;background-size: 100% 100%; ;position: absolute;left:0;top:0;height:500px;width:100%;z-index: 515;}
.dots2.active {opacity: 1;}
@keyframes dots{
    0%{transform: scale(1,0.9);}
    50%{transform: scale(1.3,1);}
    100%{transform: scale(1,0.9);}
}

.position-1 .cube.cube-1 {width:100px;transform: rotateY(0deg)}
.position-1 .cube.cube-2 {width:200px;transform: rotateY(0deg)}
.position-1 .cube.cube-3 {;width:150px;transform: rotateY(0deg)}


.position-2 .cube.cube-1 {width:100px;transform: rotateY(-90deg)}
.position-2 .cube.cube-2 {width:200px;transform: rotateY(-90deg)}
.position-2 .cube.cube-3 {;width:150px;transform: rotateY(-90deg)}

.position-3 .cube.cube-1 {width:100px;transform: rotateY(-180deg)}
.position-3 .cube.cube-2 {width:200px;transform: rotateY(-180deg)}
.position-3 .cube.cube-3 {;width:150px;transform: rotateY(-180deg)}

.position-4 .cube.cube-1 {width:100px;transform: rotateY(-270deg)}
.position-4 .cube.cube-2 {width:200px;transform: rotateY(-270deg)}
.position-4 .cube.cube-3 {;width:150px;transform: rotateY(-270deg)}




.cube.cube-1 .front {transform: translateZ(50px);}
.cube.cube-1 .back {transform: translateZ(-50px) rotateY(180deg);}
.cube.cube-1 .left {transform: rotateY(270deg) translateX(-50px);}
.cube.cube-1 .right {transform: rotateY(-270deg) translateX(50px);}

.cube.cube-2 .front {transform: translateZ(100px);}
.cube.cube-2 .back {transform: translateZ(-100px) rotateY(180deg);}
.cube.cube-2 .left {transform: rotateY(270deg) translateX(-100px);}
.cube.cube-2 .right {transform: rotateY(-270deg) translateX(100px);}

.cube.cube-3 .front {transform: translateZ(75px);}
.cube.cube-3 .back {transform: translateZ(-75px) rotateY(180deg);}
.cube.cube-3 .left {transform: rotateY(270deg) translateX(-75px);}
.cube.cube-3 .right {transform: rotateY(-270deg) translateX(75px);}