@charset "utf-8";

* {
    margin: 0px;
    padding: 0px;
    outline: none;
}

.main-container {
    min-height: 100vh;
    min-height: 95vh;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    height: 560px;
    overflow: hidden;
    /*
    background-image: url(../images/bg-animation-v-4.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    */
}

.main {
    margin: 0px auto;
    width: 600px;
    width: 450px;
    height: 600px;
    height: 450px;
    position: relative;
}

.big-circle {
    height: 100%;
    width: 100%;
    position: relative;
    border: 3px solid #6495f2;
    border-radius: 50%;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    animation: Rotate 20s linear infinite;
    -webkit-animation: Rotate 0s linear infinite;
}

.icon-block {
    width: 104px;
    width: 90px;
    height: 104px;
    height: 90px;
    position: absolute;
    border-radius: 50%;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    background-image: linear-gradient(180deg, #fff 0%, #fff 100%);
    -webkit-background-image: linear-gradient(180deg, #fff 0%, #ededed 100%);
    border: 3px solid #6495f2;
    box-shadow: 0 2px 4px 0 #c6c6c6;
    -webkit-box-shadow: 0 2px 4px 0 #c6c6c6;
    cursor: pointer;
}

.circle .icon-block {
    border: 3px solid #ffed00 !important;
    /*animation: img-rotate-new 20s linear infinite;
    -webkit-animation: img-rotate-new 30s linear infinite;*/
}

.icon-block img {
    margin: 0px auto;
    width: 86%;
    /*animation: Rotate-reverse 20s linear infinite;
    -webkit-animation: Rotate-reverse 20s linear infinite;*/
}

.big-circle .icon-block
{
    width: 125px;
    height: 125px;
}

.big-circle .icon-test-block-big-kw{
  width: 100%;
  height: 100%;
  position: absolute;
  border: 3px solid red;
}

.big-circle .icon-test-block-small-kw{
  width: 72%;
  height: 72%;
  position: absolute;
  border: 3px solid green;
}

.big-circle .icon-block img
{
    width: 100%;
}

/* .big-circle .icon-block:first-child {*/
.big-circle .icon-block.block-1 {
    /*
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    */
    transform: translate(-120%, -120%);
    -webkit-transform: translate(-120%, -120%);
}

/*.big-circle .icon-block:nth-child(2) {*/
.big-circle .icon-block.block-2 {
    /*
    top: 30%;
    left: -15%;    
    top: 33%;
    left: -25%;
    transform: translate(50%, -50%);
    -webkit-transform: translate(50%, -50%);
    */
    
    transform: translate(120%, -120%);
    -webkit-transform: translate(120%, -120%);
}

/*.big-circle .icon-block:nth-child(3) {*/
.big-circle .icon-block.block-3 {
    /*top: 16%;
    right: -15%;
    right: -28%;*/
    /*
    top: 3%;
    right: -25%;
    transform: translate(-50%, 50%);
    -webkit-transform: translate(-50%, 50%);
    */
    
    transform: translate(-120%, 120%);
    -webkit-transform: translate(-120%, 120%);
}

/*.big-circle .icon-block:nth-child(4) {*/
.big-circle .icon-block.block-4 {
    /*
    top: 85%;
    top: 80%;
    top: 90%;
    left: 13%;
    left: 20%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    */
    
    transform: translate(120%, 120%);
    -webkit-transform: translate(120%, 120%);
}

/*.big-circle .icon-block:nth-child(5) {*/
.big-circle .icon-block.block-5 {
    top: 85%;
    top: 90%;
    /*right: -5%;*/
    left: 80%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

.circle .icon-block:first-child {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    /*transform: translate(-50%, -50%) rotate(-45deg);*/
    -webkit-transform: translate(-50%, -50%);
    /*-webkit-transform: translate(-50%, -50%) rotate(-45deg);*/
    animation: img-rotate-new 20s linear infinite;
    -webkit-animation: img-rotate-new 30s linear infinite;
}

.circle .icon-block:nth-child(2) {
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    /*transform: translate(-50%, 50%) rotate(-45deg);*/
    -webkit-transform: translate(-50%, 50%);
    /*-webkit-transform: translate(-50%, 50%) rotate(-45deg);*/
    animation: img-rotate-new-second 20s linear infinite;
    -webkit-animation: img-rotate-new-second 30s linear infinite;
}

.circle:hover {
    animation-play-state: paused;
}

.circle:hover .icon-block{
    animation-play-state: paused;
}

.circle {
    animation: circle-rotate 20s linear infinite;
    -webkit-animation: circle-rotate 30s linear infinite;
    position: absolute;
    /*
    transform: translate(-50%, -50%) rotate(45deg);
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%);    
    -webkit-transform: translate(-50%, -50%);
    */
    width: 45%;
    height: 45%;
    /*border: 3px solid #ffed00;
    border-radius: 50%;*/
    /*background-color: red;
    opacity: 0.5;*/
    /*background: rgba(0, 0, 0, .4); */
}

.circle1 {
    /*
    top: 30%;
    top: 12%;
    left: 4%;
    left: 7%;
    left: -18%;
    
    top: 33%;
    left: 5%;
    */
    /*
    transform: translate(-120%, -120%);
    -webkit-transform: translate(-120%, -120%);
    */
    
    top: 18%;
    left: 15%;
}

.circle2 {
    /*top: 34%;
    right: -42%;
    top: 37%;
    right: -39%;
    top: 11%;
    right: -19%;
    
    top: 33%;
    right: -42%;
    */
    /*
    transform: translate(120%, -120%);
    -webkit-transform: translate(120%, -120%);
    */
    top: 15%;
    right: -25%;
    
    top: 18%;
    right: -28%;
}

.circle3 {
    /*
    top: 85%;
    left: 13%;
    top: 68%;
    left: -3%;
    
    top: 91%;
    left: 20%;
    */
    /*
    transform: translate(-120%, 120%);
    -webkit-transform: translate(-120%, 120%);
    */
    bottom: -30%;
    left: 18%;
}

.circle4 {
    /*
    top: 0;
    left: 50%;
    top: -22%;
    left: 28%;
    top: 2%;
    left: 50%;
    */
    /*
    transform: translate(120%, 120%);
    -webkit-transform: translate(120%, 120%);
    */
    bottom: -30%;
    right: -28%;
}

.circle5 {
    top: 85%;
    right: -32%;
    right: -29%;
    top: 68%;
    right: -3%;
    top: 91%;
    right: -26%;
}

/* center logo */
.center-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    
    background-image: linear-gradient(180deg, #fff 0%, #fff 100%);
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    padding: 10px;
    border: 3px solid #03419B;
}

.center-logo img {
    width: 250px;
    width: 150px;
    max-width: 300px;
}

/* keyframe animation */

@keyframes Rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes Rotate {
    from {
        -webkit-transform: rotate(0deg);
    }

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

@keyframes Rotate-reverse {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

@-webkit-keyframes Rotate-reverse {
    from {
        -webkit-transform: rotate(360deg);
    }

    to {
        -webkit-transform: rotate(0deg);
    }
}

@keyframes circle-rotate {
    from {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(405deg);
    }
}

@-webkit-keyframes circle-rotate {
    from {
        -webkit-transform: translate(-50%, -50%) rotate(45deg);
    }

    to {
        -webkit-transform: translate(-50%, -50%) rotate(405deg);
    }
}

@keyframes img-rotate {
    from {
        transform: rotate(-45deg);
    }

    to {
        transform: rotate(-405deg);
    }
}

@-webkit-keyframes img-rotate {
    from {
        -webkit-transform: rotate(-45deg);
    }

    to {
        -webkit-transform: rotate(-405deg);
    }
}

@keyframes img-rotate-new {
    from {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(-405deg);
    }
}

@-webkit-keyframes img-rotate-new {
    from {
        -webkit-transform: translate(-50%, -50%) rotate(-45deg);
    }

    to {
        -webkit-transform: translate(-50%, -50%) rotate(-405deg);
    }
}

@keyframes img-rotate-new-second {
    from {
        transform: translate(-50%, 50%) rotate(-45deg);
    }

    to {
        transform: translate(-50%, 50%) rotate(-405deg);
    }
}

@-webkit-keyframes img-rotate-new-second {
    from {
        -webkit-transform: translate(-50%, 50%) rotate(-45deg);
    }

    to {
        -webkit-transform: translate(-50%, 50%) rotate(-405deg);
    }
}