﻿.circle-container { position: relative; width: 50em; height: 50em; border-radius: 50%; padding: 0; list-style: none; margin: 5em auto 0; z-index: 9; /*  border: solid 5px tomato;*/ }
    .circle-container > * { display: block; position: absolute; top: 50%; left: 50%; margin: -3em; width: 6em; height: 6em; }

    .circle-container .circle-container-wapper { background-color: #EB4343; width: 130px; height: 130px; display: flex; align-items: center; justify-content: center; border-radius: 50%; padding: 35px; cursor: pointer; }
        .circle-container .circle-container-wapper:hover { filter: grayscale(0); }

@media (max-width: 1000px) {
    .circle-container { display: none; }
}

.circle-container > *:nth-of-type(1) { transform: rotate(72deg) translate(20em) rotate(-72deg); }
.circle-container > *:nth-of-type(2) { transform: rotate(108deg) translate(20em) rotate(-108deg); }
.circle-container > *:nth-of-type(3) { transform: rotate(144deg) translate(20em) rotate(-144deg); }
.circle-container > *:nth-of-type(4) { transform: rotate(180deg) translate(20em) rotate(-180deg); }
.circle-container > *:nth-of-type(5) { transform: rotate(216deg) translate(20em) rotate(-216deg); }
.circle-container > *:nth-of-type(6) { transform: rotate(252deg) translate(20em) rotate(-252deg); }
.circle-container > *:nth-of-type(7) { transform: rotate(288deg) translate(20em) rotate(-288deg); }
.circle-container > *:nth-of-type(8) { transform: rotate(324deg) translate(20em) rotate(-324deg); }
.circle-container > *:nth-of-type(9) { transform: rotate(360deg) translate(20em) rotate(-360deg); }
.circle-container > *:nth-of-type(10) { transform: rotate(396deg) translate(20em) rotate(-396deg); }
.circle-container > *:nth-of-type(11) { transform: rotate(432deg) translate(20em) rotate(-432deg); }
.circle-container > *:nth-of-type(12) { transform: rotate(468deg) translate(20em) rotate(-468deg); }
.circle-container > *:nth-of-type(13) { transform: rotate(504deg) translate(20em) rotate(-504deg); }
.circle-container > *:nth-of-type(14) { transform: rotate(540deg) translate(20em) rotate(-540deg); }
.circle-container > *:nth-of-type(15) { transform: rotate(576deg) translate(20em) rotate(-576deg); }
.circle-container > *:nth-of-type(16) { transform: rotate(612deg) translate(20em) rotate(-612deg); }
.circle-container > *:nth-of-type(17) { transform: rotate(648deg) translate(20em) rotate(-648deg); }
.circle-container > *:nth-of-type(18) { transform: rotate(684deg) translate(20em) rotate(-684deg); }
.circle-container > *:nth-of-type(19) { transform: rotate(720deg) translate(20em) rotate(-720deg); }
.circle-container > *:nth-of-type(20) { transform: rotate(756deg) translate(20em) rotate(-756deg); }
.circle-container > *:nth-of-type(21) { transform: rotate(792deg) translate(20em) rotate(-792deg); }
.circle-container > *:nth-of-type(22) { transform: rotate(828deg) translate(20em) rotate(-828deg); }
.circle-container > *:nth-of-type(23) { transform: rotate(864deg) translate(20em) rotate(-864deg); }
.circle-container > *:nth-of-type(24) { transform: rotate(900deg) translate(20em) rotate(-900deg); }
.circle-container > *:nth-of-type(25) { transform: rotate(936deg) translate(20em) rotate(-936deg); }
.circle-container > *:nth-of-type(26) { transform: rotate(972deg) translate(20em) rotate(-972deg); }
.circle-container > *:nth-of-type(27) { transform: rotate(1008deg) translate(20em) rotate(-1008deg); }
.circle-container > *:nth-of-type(28) { transform: rotate(1044deg) translate(20em) rotate(-1044deg); }
.circle-container > *:nth-of-type(29) { transform: rotate(1080deg) translate(20em) rotate(-1080deg); }
.circle-container > *:nth-of-type(30) { transform: rotate(1116deg) translate(20em) rotate(-1116deg); }
.circle-container > *:nth-of-type(31) { transform: rotate(1152deg) translate(20em) rotate(-1152deg); }
.circle-container > *:nth-of-type(32) { transform: rotate(1188deg) translate(20em) rotate(-1188deg); }
.circle-container > *:nth-of-type(33) { transform: rotate(1224deg) translate(20em) rotate(-1224deg); }
.circle-container > *:nth-of-type(34) { transform: rotate(1260deg) translate(20em) rotate(-1260deg); }
.circle-container > *:nth-of-type(35) { transform: rotate(1296deg) translate(20em) rotate(-1296deg); }
.circle-container > *:nth-of-type(36) { transform: rotate(1332deg) translate(20em) rotate(-1332deg); }
.circle-container > *:nth-of-type(37) { transform: rotate(1368deg) translate(20em) rotate(-1368deg); }
.circle-container > *:nth-of-type(38) { transform: rotate(1404deg) translate(20em) rotate(-1404deg); }
.circle-container > *:nth-of-type(39) { transform: rotate(1440deg) translate(20em) rotate(-1440deg); }
.circle-container > *:nth-of-type(40) { transform: rotate(1476deg) translate(20em) rotate(-1476deg); }
.circle-container > *:nth-of-type(41) { transform: rotate(1512deg) translate(20em) rotate(-1512deg); }
.circle-container > *:nth-of-type(42) { transform: rotate(1548deg) translate(20em) rotate(-1548deg); }
.circle-container > *:nth-of-type(43) { transform: rotate(1584deg) translate(20em) rotate(-1584deg); }
.circle-container > *:nth-of-type(44) { transform: rotate(1620deg) translate(20em) rotate(-1620deg); }
.circle-container > *:nth-of-type(45) { transform: rotate(1656deg) translate(20em) rotate(-1656deg); }
.circle-container > *:nth-of-type(46) { transform: rotate(1692deg) translate(20em) rotate(-1692deg); }
.circle-container > *:nth-of-type(47) { transform: rotate(1728deg) translate(20em) rotate(-1728deg); }
