.-bg-container {
    display: block;
    overflow: hidden;
    width: calc(100% - 200px);
    position: absolute;
    top: 0;
    height: 100%;
}
@media (max-width:767px){
  .-bg-container {
        width: calc(100% - 110px);

}
}
.-bg-container img{
    height: auto;
}
.-bg-container img:nth-child(1) {
    position: absolute;
    -webkit-animation: x-bg-1 4s ease infinite;
    animation: x-bg-1 4s ease infinite;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    opacity: 0;
    width: 22%;
    left: 25%;
    top: 0%;
    }

.-bg-container img:nth-child(2) {
    position: absolute;
-webkit-animation: x-bg-2 8s ease infinite;
    animation: x-bg-2 8s ease infinite;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    width: 252px;
    left: unset;
    right: 18%;
    top: 55%;}

.-bg-container img:nth-child(3) {
    position: absolute;
-webkit-animation: x-bg-3 8s ease infinite;
    animation: x-bg-3 8s ease infinite;
    width: 50%;
    left: 15%;
    top: 15%
}

.-bg-container img:nth-child(4) {
    position: absolute;
    right: 20%;
    top: 30%;
    z-index: 0;
    width: 50%;
    -webkit-animation: x-bg-3 8s ease infinite;
    animation: x-bg-3 8s ease infinite;
}

@media (max-width:1199.98px) {
    .-bg-container img:nth-child(2) {
        right: 5%
    }
}

@media (max-width:991.98px) {
    .-bg-container img:nth-child(1) {
        width: 29%;
        left: 20%
    }
    .-bg-container img:nth-child(2) {
        width: 151px;
        right: 3%;
        top: 62%
    }
    .-bg-container img:nth-child(3) {
        width: 60%;
        left: 35%;
        top: 12%
    }
    .-bg-container img:nth-child(4) {
        right: 24%;
        top: 15%;
        width: 500px
    }
}

@media (max-width:767.98px) {

.-bg-container img:nth-child(1) {
    -webkit-animation-delay: 1s;
    animation-delay: 1s
}

.-bg-container img:nth-child(2) {
    -webkit-animation: x-bg-2 8s ease infinite;
    animation: x-bg-2 8s ease infinite;
    -webkit-animation-delay: 2s;
    animation-delay: 2s
}

.-bg-container img:nth-child(3) {
    -webkit-animation: x-bg-3 8s ease infinite;
    animation: x-bg-3 8s ease infinite
}

    .-bg-container img:nth-child(1) {
        top: 0;
        left: 15%;
        width: 50%;
    }
    .-bg-container img:nth-child(4) {
        right: 5%;
        top: 18%
    }
}


@media (max-width:575.98px) {
    .-bg-container img:nth-child(1),
    .-bg-container img:nth-child(3) {
        width: 202px;}
}


@-webkit-keyframes x-bg-1 {
    0% {
        -webkit-transform: translate(0) rotate(0);
        transform: translate(0) rotate(0);
        opacity: 0;
    }
    10% {
        opacity: 0;
    }
    12% {
        opacity: 1;
    }
    14% {
        opacity: 0;
    }
    16% {
        opacity: 1;
    }
    18% {
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    50% {
        -webkit-transform: translate(-30px, 15px) rotate(-1deg);
        transform: translate(-30px, 15px) rotate(-1deg);
        opacity: 0;
    }
    to {
        -webkit-transform: translate(0) rotate(0);
        transform: translate(0) rotate(0);
        opacity: 0;
    }
}

@keyframes x-bg-1 {
    0% {
        -webkit-transform: translate(0) rotate(0);
        transform: translate(0) rotate(0);
        opacity: 0;
    }
    10% {
        opacity: 0;
    }
    12% {
        opacity: 1;
    }
    14% {
        opacity: 0;
    }
    16% {
        opacity: 1;
    }
    18% {
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    50% {
        -webkit-transform: translate(-30px, 15px) rotate(-1deg);
        transform: translate(-30px, 15px) rotate(-1deg);
        opacity: 0;
    }
    to {
        -webkit-transform: translate(0) rotate(0);
        transform: translate(0) rotate(0);
        opacity: 0;
    }
}

@-webkit-keyframes x-bg-2 {
    0% {
        -webkit-transform: translate(0) rotate(0);
        transform: translate(0) rotate(0);
    }
    50% {
        -webkit-transform: translate(30px, -5px) rotate(-5deg);
        transform: translate(30px, -5px) rotate(-5deg);
    }
    to {
        -webkit-transform: translate(0) rotate(0);
        transform: translate(0) rotate(0);
    }
}

@keyframes x-bg-2 {
    0% {
        -webkit-transform: translate(0) rotate(0);
        transform: translate(0) rotate(0);
    }
    50% {
        -webkit-transform: translate(30px, -5px) rotate(-5deg);
        transform: translate(30px, -5px) rotate(-5deg);
    }
    to {
        -webkit-transform: translate(0) rotate(0);
        transform: translate(0) rotate(0);
    }
}

@-webkit-keyframes x-bg-3 {
    0% {
        -webkit-transform: translate(0) rotate(0);
        transform: translate(0) rotate(0);
    }
    50% {
        -webkit-transform: translate(-30px, -15px) rotate(-1deg);
        transform: translate(-30px, -15px) rotate(-1deg);
    }
    to {
        -webkit-transform: translate(0) rotate(0);
        transform: translate(0) rotate(0);
    }
}

@keyframes x-bg-3 {
    0% {
        -webkit-transform: translate(0) rotate(0);
        transform: translate(0) rotate(0);
    }
    50% {
        -webkit-transform: translate(-30px, -15px) rotate(-1deg);
        transform: translate(-30px, -15px) rotate(-1deg);
    }
    to {
        -webkit-transform: translate(0) rotate(0);
        transform: translate(0) rotate(0);
    }
}