.circles-container {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.circles-item {
    position: absolute;
}

.circles-container .circles-item:nth-child(1) {
    width: 400px;
    height: 400px;
    left: -114px;
    top: -59px;
    transform: rotate(63.524deg);
    animation: rotateClockwise 10s linear infinite;
}
.circles-container .circles-item:nth-child(2) {
    width: 500px;
    height: 500px;
    left: 683px;
    top: -213px;
    transform: rotate(60deg);
    animation: rotateClockwise 10s linear infinite;
}
.circles-container .circles-item:nth-child(3) {
    width: 400px; 
    height: 400px; 
    left: -83px; 
    top: 210px; 
    transform: rotate(120deg);
    animation: rotateCounterClockwise 10s linear infinite;
}
.circles-container .circles-item:nth-child(4) {
    width: 550px;
    height: 550px;
    left: 457px;
    top: 770px;
    transform: rotate(120deg);
    animation: rotateCounterClockwise 9s linear infinite;
}
.circles-container .circles-item:nth-child(5) {
    width: 500px; 
    height: 500px; 
    left: 81px; 
    top: 540px;
    transform: rotate(150deg);
    animation: rotateCounterClockwise 9s linear infinite;
}
.circles-container .circles-item:nth-child(6) { 
    width: 350px;
    height: 350px;
    left: 143px;
    bottom: -260px;
    transform: rotate(186deg);
    animation: rotateCounterClockwise 10s linear infinite;
}
.circles-container .circles-item:nth-child(7) {
    width: 550px;
    height: 550px;
    left: -127px;
    top: 510px;
    transform: rotate(106deg);
    animation: rotateClockwise 10s linear infinite;
}
.circles-container .circles-item:nth-child(8) {
    width: 500px; 
    height: 500px; 
    right: -231px; 
    bottom: -198px;
    transform: rotate(155deg);
    animation: rotateCounterClockwise 9s linear infinite;
}
.circles-container .circles-item:nth-child(9) {        
    width: 550px;
    height: 550px;
    right: 161px;
    bottom: -194px;
    transform: rotate(4deg);
    animation: rotateClockwise 9s linear infinite;
}
.circles-container .circles-item:nth-child(10) {    
    width: 450px;
    height: 450px;
    right: 22px;
    top: -97px;
    transform: rotate(55deg);
    animation: rotateCounterClockwise 10s linear infinite;
}
.circles-container .circles-item:nth-child(11) { 
    width: 550px; 
    height: 550px; 
    right: -300px; 
    top: -55px;
    transform: rotate(143.524deg);
    animation: rotateClockwise 10s linear infinite;
}
.circles-container .circles-item:nth-child(12) {
    width: 500px;
    height: 500px;
    right: -367px;
    bottom: 112px;
    transform: rotate(150deg);
    animation: rotateCounterClockwise 9s linear infinite;
}
.circles-container .circles-item:nth-child(13) {
    width: 350px;
    height: 350px;
    left: 520px;
    top: 61px;
    transform: rotate(169deg);
    animation: rotateCounterClockwise 10s linear infinite;
}
.circles-container .circles-item:nth-child(14) {
    width: 550px;
    height: 550px;
    left: 188px;
    top: -262px;
    transform: rotate(163deg);
    animation: rotateCounterClockwise 9s linear infinite;
}
.circles-container .circles-item:nth-child(15) {
    width: 350px;
    height: 350px;
    left: 753px;
    top: 101px;
    transform: rotate(223deg);
    animation: rotateClockwise 10s linear infinite;
}
.circles-container .circles-item:nth-child(16) {
    width: 350px;
    height: 350px;
    right: 0px;
    top: 272px;
    transform: rotate(223deg);
    animation: rotateClockwise 10s linear infinite;
}
.circles-container .circles-item:nth-child(17) {        
    width: 550px;
    height: 550px;
    right: 261px;
    top: -194px;
    transform: rotate(4deg);
    animation: rotateClockwise 10s linear infinite;
    z-index: -1;
}
.circles-container .circles-item:nth-child(18) {        
    width: 550px;
    height: 550px;
    right: 461px;
    bottom: -194px;
    transform: rotate(90deg);
    animation: rotateCounterClockwise 8s linear infinite;
    z-index: -1;
}
.circles-container .circles-item:nth-child(19) {        
    width: 550px;
    height: 550px;
    right: 0px;
    bottom: 194px;
    transform: rotate(90deg);
    animation: rotateCounterClockwise 10s linear infinite;
    z-index: -1;
}

@keyframes rotateClockwise {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes rotateCounterClockwise {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}


@media (max-width: 767px)
{
    .circles-container .circles-item:nth-child(16) {
        right: -53px;
    }

    .circles-container {
        height: 150%;
    }
}