.slidercircle {
    margin-left: 100px;
    margin-top: 100px;
    width: 540px;
    height: 540px; margin: 0 auto; position: relative;
}

.circle-middle {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 130px;
    margin-top: 140px;
    width: 270px;
    height: 270px; 
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    transition: 1s;
} 

.circle-one {
    /* margin-left: 145px;
    margin-top: 145px;
    width: 310px;
    height: 310px;
    border: 2px solid #6b6b6b;
    position: absolute;
    border-radius: 50%; */
}

.circle-two {
    width: 540px;
    height: 540px;
    border: 2px solid #6b6b6b;
    position: absolute;
    border-radius: 50%; top:10px
}

.circle-arround-two-1 img,
.circle-arround-two-2 img,
.circle-arround-two-3 img,
.circle-arround-two-4 img,
.circle-arround-two-5 img
{
    width: 150px;
    height: 150px; 
}

.circle-arround-two-1,
.circle-arround-two-2,
.circle-arround-two-3,
.circle-arround-two-4,
.circle-arround-two-5 {
    cursor: pointer;
    position: absolute;
    width: 120px;
    height: 120px; 
    top: 200px;
    left: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.circle-arround-two-1 {
    transform: rotate(0deg) translateX(270px) rotate(0deg);
    animation: orbit1 100s linear infinite ; 
}

.circle-arround-two-2 {
    transform: rotate(72deg) translateX(270px) rotate(-72deg);
    animation: orbit2 100s linear infinite; 
}

.circle-arround-two-3 {
    transform: rotate(144deg) translateX(270px) rotate(-144deg);
    animation: orbit3 100s linear infinite; 
}

.circle-arround-two-4 {
    transform: rotate(216deg) translateX(270px) rotate(-216deg);
    animation: orbit4 100s linear infinite; 
}

.circle-arround-two-5 {
    transform: rotate(288deg) translateX(270px) rotate(-288deg);
    animation: orbit5 100s linear infinite; 
}
 
@-webkit-keyframes rotate-center {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotate-center {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes orbit1 {
    0% {
        transform: rotate(0deg) translateX(270px) rotate(0deg);
    }
    100% {
        transform: rotate(360deg) translateX(270px) rotate(-360deg);
    }
}

@keyframes orbit2 {
    0% {
        transform: rotate(72deg) translateX(270px) rotate(-72deg);
    }
    100% {
        transform: rotate(432deg) translateX(270px) rotate(-432deg);
    }
}

@keyframes orbit3 {
    0% {
        transform: rotate(144deg) translateX(270px) rotate(-144deg);
    }
    100% {
        transform: rotate(504deg) translateX(270px) rotate(-504deg);
    }
}

@keyframes orbit4 {
    0% {
        transform: rotate(216deg) translateX(270px) rotate(-216deg);
    }
    100% {
        transform: rotate(576deg) translateX(270px) rotate(-576deg);
    }
}

@keyframes orbit5 {
    0% {
        transform: rotate(288deg) translateX(270px) rotate(-288deg);
    }
    100% {
        transform: rotate(648deg) translateX(270px) rotate(-648deg);
    }
}
 

.stopanima {
    animation-play-state: paused !important;
}


/******************************/
.creator {
  position: fixed;
  right: 5px;
  top: 5px;
  font-size: 13px;
  font-family: sans-serif;
  text-decoration: none;
  color: #f1f1f1;
}

.creator:hover {
  color: pink;
}

.creator i {
  font-size: 12px;
}



@media (min-width: 320px) and (max-width: 769px) {
    .slidercircle {
        margin-left: auto;
        margin-top: 70px;
        width: 270px; position: relative;
        height: 270px; margin: 0 auto;
    }
    
    .circle-middle {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: -30px;
        margin-top: -30px;
        width: 60px;
        height: 60px; position: absolute!important; 
        border-radius: 50%;
        cursor: pointer; 
        transition: 1s; left:50%; top:43%;
    } 
 
    
    .circle-one {
        /* margin-left: 60px;
        margin-top: 60px;
        width: 140px;
        height: 140px;
        border: 2px solid #6b6b6b;
        position: absolute;
        border-radius: 50%;
        left: 50%;
        margin-left: -70px; */
    }
    
    .circle-two {
        width: 260px;
        height: 260px;
        border: 2px solid #6b6b6b;
        position: absolute;
        border-radius: 50%;
        left: 50%;
        margin-left: -130px;
    }

    .circle-arround-two-1 img, .circle-arround-two-2 img, .circle-arround-two-3 img, .circle-arround-two-4 img, .circle-arround-two-5 img {
        width: 80px;
        height: 80px;
    }

    @keyframes orbit1 {
        0% {
            transform: rotate(0deg) translateX(140px) rotate(0deg);
        }
        100% {
            transform: rotate(360deg) translateX(140px) rotate(-360deg);
        }
    }
    
    @keyframes orbit2 {
        0% {
            transform: rotate(72deg) translateX(140px) rotate(-72deg);
        }
        100% {
            transform: rotate(432deg) translateX(140px) rotate(-432deg);
        }
    }
    
    @keyframes orbit3 {
        0% {
            transform: rotate(144deg) translateX(140px) rotate(-144deg);
        }
        100% {
            transform: rotate(504deg) translateX(140px) rotate(-504deg);
        }
    }
    
    @keyframes orbit4 {
        0% {
            transform: rotate(216deg) translateX(140px) rotate(-216deg);
        }
        100% {
            transform: rotate(576deg) translateX(140px) rotate(-576deg);
        }
    }
    
    @keyframes orbit5 {
        0% {
            transform: rotate(288deg) translateX(140px) rotate(-288deg);
        }
        100% {
            transform: rotate(648deg) translateX(140px) rotate(-648deg);
        }
    }

    .circle-arround-two-1, .circle-arround-two-2, .circle-arround-two-3, .circle-arround-two-4, .circle-arround-two-5 {
        cursor: pointer;
        position: absolute;
        width: 90px;
        height: 90px;
        top: 80px;
        left: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .slidercircle { 
        margin-top:40px;
        width: 270px;
        height: 270px; 
    }
    
    
}