.png-slider .main-promotion-image {
    top: 75%;
    height: 100%;
    max-height: 120%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    width: 100%;
}
@media (min-width: 768px) {
    .png-slider .main-promotion-image {
        top: 50%;
    }
}

.png-slider .main-promotion-image-framed{
    max-width: 480px;
}
@media (min-width: 480px) {
    .png-slider .main-promotion-image-framed{
        max-width: 100%;
    }
}
@media (min-width: 1200px) {
    .png-slider .main-promotion-image-framed {
    }
}
.animation-wrp{
    position: relative;
    text-align: center;
}

.animation-wrp .shape-1,
.animation-wrp .shape-2,
.animation-wrp .shape-3{
    position: absolute;
    zoom: 0.6;
    max-width: 15%;
}

@media(min-width: 992px) {
    .animation-wrp .shape-1,
    .animation-wrp .shape-2,
    .animation-wrp .shape-3{
        zoom: 1;
        max-width: none;
    }
}


.position-1 .shape-1{
    right: 15%;
    top: 15%;
}
.position-1 .shape-2{
    right: 28%;
    bottom: 15%;
}
.position-1 .shape-3{
    bottom: 40%;
    left: 10%;
    z-index: -1;
}

.position-2 .shape-1{
    right: 15%;
    top: 40%;
}
.position-2 .shape-2{
    left: 15%;
    bottom: 12%;
    z-index: -1;
}
.position-2 .shape-3{
    top: 15%;
    left: 27%;
}

.position-3 .shape-1{
    right: 15%;
    top: 55%;
}
.position-3 .shape-2{
    left: 10%;
    bottom: 40%;
}
.position-3 .shape-3{
    top: 0;
    left: 60%;
}

/*rockit-f*/
.animation-1 .shape-1,
.animation-1 .shape-2,
.animation-1 .shape-3 {
    animation: rockit-f 2s ease infinite alternate;
}
.animation-1 .shape-2 {
    animation: rockit-f-2 2.5s ease infinite alternate;
}
.animation-1 .shape-3 {
    animation: rockit-f-3 3s ease infinite alternate;
}

.animation-2 .shape-1,
.animation-2 .shape-2,
.animation-2 .shape-3 {
    animation: rotation-back 5s ease infinite alternate;
}
.animation-2 .shape-2 {
    animation: rotation 9s ease infinite alternate;
}
.animation-2 .shape-3 {
    animation: rotation 7s ease infinite alternate;
}

.animation-3 .shape-1,
.animation-3 .shape-2,
.animation-3 .shape-3 {
    animation: side-to-side 5s ease infinite alternate;
}
.animation-3 .shape-2 {
    animation: side-to-side-2 4s ease infinite alternate;
}
.animation-3 .shape-3 {
    animation: side-to-side-3 7s ease infinite alternate;
}

.animation-3.position-3 .shape-1 {
    animation: side-to-side-2 7s ease infinite alternate;
}
.animation-3.position-3 .shape-2 {
    animation: side-to-side-3 5s ease infinite alternate;
}
.animation-3.position-3 .shape-3 {
    animation: side-to-side 4s ease infinite alternate;
}