.circle { padding: 0; width: 100%; height: 100%; list-style: none; overflow: hidden; position: relative; margin: 0; box-sizing: border-box; } .circle li { position: absolute; top: 0; left: 50%; height: 50%; transform-origin: 0 100%; text-align: center; } .circle li > * { margin-left: -100px; width: 200px; } .circle.size-5 li:nth-child(1) { transform: rotate(0deg); z-index: 5; } .circle.size-5 li:nth-child(1) > * { transform: rotate(0deg); } .circle.size-5 li:nth-child(2) { transform: rotate(72deg); z-index: 4; } .circle.size-5 li:nth-child(2) > * { transform: rotate(-72deg); } .circle.size-5 li:nth-child(3) { transform: rotate(144deg); z-index: 3; } .circle.size-5 li:nth-child(3) > * { transform: rotate(-144deg); } .circle.size-5 li:nth-child(4) { transform: rotate(216deg); z-index: 3; } .circle.size-5 li:nth-child(4) > * { transform: rotate(-216deg); } .circle.size-5 li:nth-child(5) { transform: rotate(288deg); z-index: 4; } .circle.size-5 li:nth-child(5) > * { transform: rotate(-288deg); } .circle.size-6 li:nth-child(1) { transform: rotate(0deg); z-index: 6; } .circle.size-6 li:nth-child(1) > * { transform: rotate(0deg); } .circle.size-6 li:nth-child(2) { transform: rotate(60deg); z-index: 5; } .circle.size-6 li:nth-child(2) > * { transform: rotate(-60deg); } .circle.size-6 li:nth-child(3) { transform: rotate(120deg); z-index: 4; } .circle.size-6 li:nth-child(3) > * { transform: rotate(-120deg); } .circle.size-6 li:nth-child(4) { transform: rotate(180deg); z-index: 3; } .circle.size-6 li:nth-child(4) > * { transform: rotate(-180deg); } .circle.size-6 li:nth-child(5) { transform: rotate(240deg); z-index: 4; } .circle.size-6 li:nth-child(5) > * { transform: rotate(-240deg); } .circle.size-6 li:nth-child(6) { transform: rotate(300deg); z-index: 5; } .circle.size-6 li:nth-child(6) > * { transform: rotate(-300deg); } .circle.size-7 li:nth-child(1) { transform: rotate(0deg); z-index: 7; } .circle.size-7 li:nth-child(1) > * { transform: rotate(0deg); } .circle.size-7 li:nth-child(2) { transform: rotate(51.4285714286deg); z-index: 6; } .circle.size-7 li:nth-child(2) > * { transform: rotate(-51.4285714286deg); } .circle.size-7 li:nth-child(3) { transform: rotate(102.8571428571deg); z-index: 5; } .circle.size-7 li:nth-child(3) > * { transform: rotate(-102.8571428571deg); } .circle.size-7 li:nth-child(4) { transform: rotate(154.2857142857deg); z-index: 4; } .circle.size-7 li:nth-child(4) > * { transform: rotate(-154.2857142857deg); } .circle.size-7 li:nth-child(5) { transform: rotate(205.7142857143deg); z-index: 4; } .circle.size-7 li:nth-child(5) > * { transform: rotate(-205.7142857143deg); } .circle.size-7 li:nth-child(6) { transform: rotate(257.1428571429deg); z-index: 5; } .circle.size-7 li:nth-child(6) > * { transform: rotate(-257.1428571429deg); } .circle.size-7 li:nth-child(7) { transform: rotate(308.5714285714deg); z-index: 6; } .circle.size-7 li:nth-child(7) > * { transform: rotate(-308.5714285714deg); } .circle.size-8 li:nth-child(1) { transform: rotate(0deg); z-index: 8; } .circle.size-8 li:nth-child(1) > * { transform: rotate(0deg); } .circle.size-8 li:nth-child(2) { transform: rotate(45deg); z-index: 7; } .circle.size-8 li:nth-child(2) > * { transform: rotate(-45deg); } .circle.size-8 li:nth-child(3) { transform: rotate(90deg); z-index: 6; } .circle.size-8 li:nth-child(3) > * { transform: rotate(-90deg); } .circle.size-8 li:nth-child(4) { transform: rotate(135deg); z-index: 5; } .circle.size-8 li:nth-child(4) > * { transform: rotate(-135deg); } .circle.size-8 li:nth-child(5) { transform: rotate(180deg); z-index: 4; } .circle.size-8 li:nth-child(5) > * { transform: rotate(-180deg); } .circle.size-8 li:nth-child(6) { transform: rotate(225deg); z-index: 5; } .circle.size-8 li:nth-child(6) > * { transform: rotate(-225deg); } .circle.size-8 li:nth-child(7) { transform: rotate(270deg); z-index: 6; } .circle.size-8 li:nth-child(7) > * { transform: rotate(-270deg); } .circle.size-8 li:nth-child(8) { transform: rotate(315deg); z-index: 7; } .circle.size-8 li:nth-child(8) > * { transform: rotate(-315deg); } .circle.size-9 li:nth-child(1) { transform: rotate(0deg); z-index: 9; } .circle.size-9 li:nth-child(1) > * { transform: rotate(0deg); } .circle.size-9 li:nth-child(2) { transform: rotate(40deg); z-index: 8; } .circle.size-9 li:nth-child(2) > * { transform: rotate(-40deg); } .circle.size-9 li:nth-child(3) { transform: rotate(80deg); z-index: 7; } .circle.size-9 li:nth-child(3) > * { transform: rotate(-80deg); } .circle.size-9 li:nth-child(4) { transform: rotate(120deg); z-index: 6; } .circle.size-9 li:nth-child(4) > * { transform: rotate(-120deg); } .circle.size-9 li:nth-child(5) { transform: rotate(160deg); z-index: 5; } .circle.size-9 li:nth-child(5) > * { transform: rotate(-160deg); } .circle.size-9 li:nth-child(6) { transform: rotate(200deg); z-index: 5; } .circle.size-9 li:nth-child(6) > * { transform: rotate(-200deg); } .circle.size-9 li:nth-child(7) { transform: rotate(240deg); z-index: 6; } .circle.size-9 li:nth-child(7) > * { transform: rotate(-240deg); } .circle.size-9 li:nth-child(8) { transform: rotate(280deg); z-index: 7; } .circle.size-9 li:nth-child(8) > * { transform: rotate(-280deg); } .circle.size-9 li:nth-child(9) { transform: rotate(320deg); z-index: 8; } .circle.size-9 li:nth-child(9) > * { transform: rotate(-320deg); } .circle.size-10 li:nth-child(1) { transform: rotate(0deg); z-index: 10; } .circle.size-10 li:nth-child(1) > * { transform: rotate(0deg); } .circle.size-10 li:nth-child(2) { transform: rotate(36deg); z-index: 9; } .circle.size-10 li:nth-child(2) > * { transform: rotate(-36deg); } .circle.size-10 li:nth-child(3) { transform: rotate(72deg); z-index: 8; } .circle.size-10 li:nth-child(3) > * { transform: rotate(-72deg); } .circle.size-10 li:nth-child(4) { transform: rotate(108deg); z-index: 7; } .circle.size-10 li:nth-child(4) > * { transform: rotate(-108deg); } .circle.size-10 li:nth-child(5) { transform: rotate(144deg); z-index: 6; } .circle.size-10 li:nth-child(5) > * { transform: rotate(-144deg); } .circle.size-10 li:nth-child(6) { transform: rotate(180deg); z-index: 5; } .circle.size-10 li:nth-child(6) > * { transform: rotate(-180deg); } .circle.size-10 li:nth-child(7) { transform: rotate(216deg); z-index: 6; } .circle.size-10 li:nth-child(7) > * { transform: rotate(-216deg); } .circle.size-10 li:nth-child(8) { transform: rotate(252deg); z-index: 7; } .circle.size-10 li:nth-child(8) > * { transform: rotate(-252deg); } .circle.size-10 li:nth-child(9) { transform: rotate(288deg); z-index: 8; } .circle.size-10 li:nth-child(9) > * { transform: rotate(-288deg); } .circle.size-10 li:nth-child(10) { transform: rotate(324deg); z-index: 9; } .circle.size-10 li:nth-child(10) > * { transform: rotate(-324deg); } .circle.size-11 li:nth-child(1) { transform: rotate(0deg); z-index: 11; } .circle.size-11 li:nth-child(1) > * { transform: rotate(0deg); } .circle.size-11 li:nth-child(2) { transform: rotate(32.7272727273deg); z-index: 10; } .circle.size-11 li:nth-child(2) > * { transform: rotate(-32.7272727273deg); } .circle.size-11 li:nth-child(3) { transform: rotate(65.4545454545deg); z-index: 9; } .circle.size-11 li:nth-child(3) > * { transform: rotate(-65.4545454545deg); } .circle.size-11 li:nth-child(4) { transform: rotate(98.1818181818deg); z-index: 8; } .circle.size-11 li:nth-child(4) > * { transform: rotate(-98.1818181818deg); } .circle.size-11 li:nth-child(5) { transform: rotate(130.9090909091deg); z-index: 7; } .circle.size-11 li:nth-child(5) > * { transform: rotate(-130.9090909091deg); } .circle.size-11 li:nth-child(6) { transform: rotate(163.6363636364deg); z-index: 6; } .circle.size-11 li:nth-child(6) > * { transform: rotate(-163.6363636364deg); } .circle.size-11 li:nth-child(7) { transform: rotate(196.3636363636deg); z-index: 6; } .circle.size-11 li:nth-child(7) > * { transform: rotate(-196.3636363636deg); } .circle.size-11 li:nth-child(8) { transform: rotate(229.0909090909deg); z-index: 7; } .circle.size-11 li:nth-child(8) > * { transform: rotate(-229.0909090909deg); } .circle.size-11 li:nth-child(9) { transform: rotate(261.8181818182deg); z-index: 8; } .circle.size-11 li:nth-child(9) > * { transform: rotate(-261.8181818182deg); } .circle.size-11 li:nth-child(10) { transform: rotate(294.5454545455deg); z-index: 9; } .circle.size-11 li:nth-child(10) > * { transform: rotate(-294.5454545455deg); } .circle.size-11 li:nth-child(11) { transform: rotate(327.2727272727deg); z-index: 10; } .circle.size-11 li:nth-child(11) > * { transform: rotate(-327.2727272727deg); } .circle.size-12 li:nth-child(1) { transform: rotate(0deg); z-index: 12; } .circle.size-12 li:nth-child(1) > * { transform: rotate(0deg); } .circle.size-12 li:nth-child(2) { transform: rotate(30deg); z-index: 11; } .circle.size-12 li:nth-child(2) > * { transform: rotate(-30deg); } .circle.size-12 li:nth-child(3) { transform: rotate(60deg); z-index: 10; } .circle.size-12 li:nth-child(3) > * { transform: rotate(-60deg); } .circle.size-12 li:nth-child(4) { transform: rotate(90deg); z-index: 9; } .circle.size-12 li:nth-child(4) > * { transform: rotate(-90deg); } .circle.size-12 li:nth-child(5) { transform: rotate(120deg); z-index: 8; } .circle.size-12 li:nth-child(5) > * { transform: rotate(-120deg); } .circle.size-12 li:nth-child(6) { transform: rotate(150deg); z-index: 7; } .circle.size-12 li:nth-child(6) > * { transform: rotate(-150deg); } .circle.size-12 li:nth-child(7) { transform: rotate(180deg); z-index: 6; } .circle.size-12 li:nth-child(7) > * { transform: rotate(-180deg); } .circle.size-12 li:nth-child(8) { transform: rotate(210deg); z-index: 7; } .circle.size-12 li:nth-child(8) > * { transform: rotate(-210deg); } .circle.size-12 li:nth-child(9) { transform: rotate(240deg); z-index: 8; } .circle.size-12 li:nth-child(9) > * { transform: rotate(-240deg); } .circle.size-12 li:nth-child(10) { transform: rotate(270deg); z-index: 9; } .circle.size-12 li:nth-child(10) > * { transform: rotate(-270deg); } .circle.size-12 li:nth-child(11) { transform: rotate(300deg); z-index: 10; } .circle.size-12 li:nth-child(11) > * { transform: rotate(-300deg); } .circle.size-12 li:nth-child(12) { transform: rotate(330deg); z-index: 11; } .circle.size-12 li:nth-child(12) > * { transform: rotate(-330deg); } .circle.size-13 li:nth-child(1) { transform: rotate(0deg); z-index: 13; } .circle.size-13 li:nth-child(1) > * { transform: rotate(0deg); } .circle.size-13 li:nth-child(2) { transform: rotate(27.6923076923deg); z-index: 12; } .circle.size-13 li:nth-child(2) > * { transform: rotate(-27.6923076923deg); } .circle.size-13 li:nth-child(3) { transform: rotate(55.3846153846deg); z-index: 11; } .circle.size-13 li:nth-child(3) > * { transform: rotate(-55.3846153846deg); } .circle.size-13 li:nth-child(4) { transform: rotate(83.0769230769deg); z-index: 10; } .circle.size-13 li:nth-child(4) > * { transform: rotate(-83.0769230769deg); } .circle.size-13 li:nth-child(5) { transform: rotate(110.7692307692deg); z-index: 9; } .circle.size-13 li:nth-child(5) > * { transform: rotate(-110.7692307692deg); } .circle.size-13 li:nth-child(6) { transform: rotate(138.4615384615deg); z-index: 8; } .circle.size-13 li:nth-child(6) > * { transform: rotate(-138.4615384615deg); } .circle.size-13 li:nth-child(7) { transform: rotate(166.1538461538deg); z-index: 7; } .circle.size-13 li:nth-child(7) > * { transform: rotate(-166.1538461538deg); } .circle.size-13 li:nth-child(8) { transform: rotate(193.8461538462deg); z-index: 7; } .circle.size-13 li:nth-child(8) > * { transform: rotate(-193.8461538462deg); } .circle.size-13 li:nth-child(9) { transform: rotate(221.5384615385deg); z-index: 8; } .circle.size-13 li:nth-child(9) > * { transform: rotate(-221.5384615385deg); } .circle.size-13 li:nth-child(10) { transform: rotate(249.2307692308deg); z-index: 9; } .circle.size-13 li:nth-child(10) > * { transform: rotate(-249.2307692308deg); } .circle.size-13 li:nth-child(11) { transform: rotate(276.9230769231deg); z-index: 10; } .circle.size-13 li:nth-child(11) > * { transform: rotate(-276.9230769231deg); } .circle.size-13 li:nth-child(12) { transform: rotate(304.6153846154deg); z-index: 11; } .circle.size-13 li:nth-child(12) > * { transform: rotate(-304.6153846154deg); } .circle.size-13 li:nth-child(13) { transform: rotate(332.3076923077deg); z-index: 12; } .circle.size-13 li:nth-child(13) > * { transform: rotate(-332.3076923077deg); } .circle.size-14 li:nth-child(1) { transform: rotate(0deg); z-index: 14; } .circle.size-14 li:nth-child(1) > * { transform: rotate(0deg); } .circle.size-14 li:nth-child(2) { transform: rotate(25.7142857143deg); z-index: 13; } .circle.size-14 li:nth-child(2) > * { transform: rotate(-25.7142857143deg); } .circle.size-14 li:nth-child(3) { transform: rotate(51.4285714286deg); z-index: 12; } .circle.size-14 li:nth-child(3) > * { transform: rotate(-51.4285714286deg); } .circle.size-14 li:nth-child(4) { transform: rotate(77.1428571429deg); z-index: 11; } .circle.size-14 li:nth-child(4) > * { transform: rotate(-77.1428571429deg); } .circle.size-14 li:nth-child(5) { transform: rotate(102.8571428571deg); z-index: 10; } .circle.size-14 li:nth-child(5) > * { transform: rotate(-102.8571428571deg); } .circle.size-14 li:nth-child(6) { transform: rotate(128.5714285714deg); z-index: 9; } .circle.size-14 li:nth-child(6) > * { transform: rotate(-128.5714285714deg); } .circle.size-14 li:nth-child(7) { transform: rotate(154.2857142857deg); z-index: 8; } .circle.size-14 li:nth-child(7) > * { transform: rotate(-154.2857142857deg); } .circle.size-14 li:nth-child(8) { transform: rotate(180deg); z-index: 7; } .circle.size-14 li:nth-child(8) > * { transform: rotate(-180deg); } .circle.size-14 li:nth-child(9) { transform: rotate(205.7142857143deg); z-index: 8; } .circle.size-14 li:nth-child(9) > * { transform: rotate(-205.7142857143deg); } .circle.size-14 li:nth-child(10) { transform: rotate(231.4285714286deg); z-index: 9; } .circle.size-14 li:nth-child(10) > * { transform: rotate(-231.4285714286deg); } .circle.size-14 li:nth-child(11) { transform: rotate(257.1428571429deg); z-index: 10; } .circle.size-14 li:nth-child(11) > * { transform: rotate(-257.1428571429deg); } .circle.size-14 li:nth-child(12) { transform: rotate(282.8571428571deg); z-index: 11; } .circle.size-14 li:nth-child(12) > * { transform: rotate(-282.8571428571deg); } .circle.size-14 li:nth-child(13) { transform: rotate(308.5714285714deg); z-index: 12; } .circle.size-14 li:nth-child(13) > * { transform: rotate(-308.5714285714deg); } .circle.size-14 li:nth-child(14) { transform: rotate(334.2857142857deg); z-index: 13; } .circle.size-14 li:nth-child(14) > * { transform: rotate(-334.2857142857deg); } .circle.size-15 li:nth-child(1) { transform: rotate(0deg); z-index: 15; } .circle.size-15 li:nth-child(1) > * { transform: rotate(0deg); } .circle.size-15 li:nth-child(2) { transform: rotate(24deg); z-index: 14; } .circle.size-15 li:nth-child(2) > * { transform: rotate(-24deg); } .circle.size-15 li:nth-child(3) { transform: rotate(48deg); z-index: 13; } .circle.size-15 li:nth-child(3) > * { transform: rotate(-48deg); } .circle.size-15 li:nth-child(4) { transform: rotate(72deg); z-index: 12; } .circle.size-15 li:nth-child(4) > * { transform: rotate(-72deg); } .circle.size-15 li:nth-child(5) { transform: rotate(96deg); z-index: 11; } .circle.size-15 li:nth-child(5) > * { transform: rotate(-96deg); } .circle.size-15 li:nth-child(6) { transform: rotate(120deg); z-index: 10; } .circle.size-15 li:nth-child(6) > * { transform: rotate(-120deg); } .circle.size-15 li:nth-child(7) { transform: rotate(144deg); z-index: 9; } .circle.size-15 li:nth-child(7) > * { transform: rotate(-144deg); } .circle.size-15 li:nth-child(8) { transform: rotate(168deg); z-index: 8; } .circle.size-15 li:nth-child(8) > * { transform: rotate(-168deg); } .circle.size-15 li:nth-child(9) { transform: rotate(192deg); z-index: 8; } .circle.size-15 li:nth-child(9) > * { transform: rotate(-192deg); } .circle.size-15 li:nth-child(10) { transform: rotate(216deg); z-index: 9; } .circle.size-15 li:nth-child(10) > * { transform: rotate(-216deg); } .circle.size-15 li:nth-child(11) { transform: rotate(240deg); z-index: 10; } .circle.size-15 li:nth-child(11) > * { transform: rotate(-240deg); } .circle.size-15 li:nth-child(12) { transform: rotate(264deg); z-index: 11; } .circle.size-15 li:nth-child(12) > * { transform: rotate(-264deg); } .circle.size-15 li:nth-child(13) { transform: rotate(288deg); z-index: 12; } .circle.size-15 li:nth-child(13) > * { transform: rotate(-288deg); } .circle.size-15 li:nth-child(14) { transform: rotate(312deg); z-index: 13; } .circle.size-15 li:nth-child(14) > * { transform: rotate(-312deg); } .circle.size-15 li:nth-child(15) { transform: rotate(336deg); z-index: 14; } .circle.size-15 li:nth-child(15) > * { transform: rotate(-336deg); } .circle.size-16 li:nth-child(1) { transform: rotate(0deg); z-index: 16; } .circle.size-16 li:nth-child(1) > * { transform: rotate(0deg); } .circle.size-16 li:nth-child(2) { transform: rotate(22.5deg); z-index: 15; } .circle.size-16 li:nth-child(2) > * { transform: rotate(-22.5deg); } .circle.size-16 li:nth-child(3) { transform: rotate(45deg); z-index: 14; } .circle.size-16 li:nth-child(3) > * { transform: rotate(-45deg); } .circle.size-16 li:nth-child(4) { transform: rotate(67.5deg); z-index: 13; } .circle.size-16 li:nth-child(4) > * { transform: rotate(-67.5deg); } .circle.size-16 li:nth-child(5) { transform: rotate(90deg); z-index: 12; } .circle.size-16 li:nth-child(5) > * { transform: rotate(-90deg); } .circle.size-16 li:nth-child(6) { transform: rotate(112.5deg); z-index: 11; } .circle.size-16 li:nth-child(6) > * { transform: rotate(-112.5deg); } .circle.size-16 li:nth-child(7) { transform: rotate(135deg); z-index: 10; } .circle.size-16 li:nth-child(7) > * { transform: rotate(-135deg); } .circle.size-16 li:nth-child(8) { transform: rotate(157.5deg); z-index: 9; } .circle.size-16 li:nth-child(8) > * { transform: rotate(-157.5deg); } .circle.size-16 li:nth-child(9) { transform: rotate(180deg); z-index: 8; } .circle.size-16 li:nth-child(9) > * { transform: rotate(-180deg); } .circle.size-16 li:nth-child(10) { transform: rotate(202.5deg); z-index: 9; } .circle.size-16 li:nth-child(10) > * { transform: rotate(-202.5deg); } .circle.size-16 li:nth-child(11) { transform: rotate(225deg); z-index: 10; } .circle.size-16 li:nth-child(11) > * { transform: rotate(-225deg); } .circle.size-16 li:nth-child(12) { transform: rotate(247.5deg); z-index: 11; } .circle.size-16 li:nth-child(12) > * { transform: rotate(-247.5deg); } .circle.size-16 li:nth-child(13) { transform: rotate(270deg); z-index: 12; } .circle.size-16 li:nth-child(13) > * { transform: rotate(-270deg); } .circle.size-16 li:nth-child(14) { transform: rotate(292.5deg); z-index: 13; } .circle.size-16 li:nth-child(14) > * { transform: rotate(-292.5deg); } .circle.size-16 li:nth-child(15) { transform: rotate(315deg); z-index: 14; } .circle.size-16 li:nth-child(15) > * { transform: rotate(-315deg); } .circle.size-16 li:nth-child(16) { transform: rotate(337.5deg); z-index: 15; } .circle.size-16 li:nth-child(16) > * { transform: rotate(-337.5deg); } .circle.size-17 li:nth-child(1) { transform: rotate(0deg); z-index: 17; } .circle.size-17 li:nth-child(1) > * { transform: rotate(0deg); } .circle.size-17 li:nth-child(2) { transform: rotate(21.1764705882deg); z-index: 16; } .circle.size-17 li:nth-child(2) > * { transform: rotate(-21.1764705882deg); } .circle.size-17 li:nth-child(3) { transform: rotate(42.3529411765deg); z-index: 15; } .circle.size-17 li:nth-child(3) > * { transform: rotate(-42.3529411765deg); } .circle.size-17 li:nth-child(4) { transform: rotate(63.5294117647deg); z-index: 14; } .circle.size-17 li:nth-child(4) > * { transform: rotate(-63.5294117647deg); } .circle.size-17 li:nth-child(5) { transform: rotate(84.7058823529deg); z-index: 13; } .circle.size-17 li:nth-child(5) > * { transform: rotate(-84.7058823529deg); } .circle.size-17 li:nth-child(6) { transform: rotate(105.8823529412deg); z-index: 12; } .circle.size-17 li:nth-child(6) > * { transform: rotate(-105.8823529412deg); } .circle.size-17 li:nth-child(7) { transform: rotate(127.0588235294deg); z-index: 11; } .circle.size-17 li:nth-child(7) > * { transform: rotate(-127.0588235294deg); } .circle.size-17 li:nth-child(8) { transform: rotate(148.2352941176deg); z-index: 10; } .circle.size-17 li:nth-child(8) > * { transform: rotate(-148.2352941176deg); } .circle.size-17 li:nth-child(9) { transform: rotate(169.4117647059deg); z-index: 9; } .circle.size-17 li:nth-child(9) > * { transform: rotate(-169.4117647059deg); } .circle.size-17 li:nth-child(10) { transform: rotate(190.5882352941deg); z-index: 9; } .circle.size-17 li:nth-child(10) > * { transform: rotate(-190.5882352941deg); } .circle.size-17 li:nth-child(11) { transform: rotate(211.7647058824deg); z-index: 10; } .circle.size-17 li:nth-child(11) > * { transform: rotate(-211.7647058824deg); } .circle.size-17 li:nth-child(12) { transform: rotate(232.9411764706deg); z-index: 11; } .circle.size-17 li:nth-child(12) > * { transform: rotate(-232.9411764706deg); } .circle.size-17 li:nth-child(13) { transform: rotate(254.1176470588deg); z-index: 12; } .circle.size-17 li:nth-child(13) > * { transform: rotate(-254.1176470588deg); } .circle.size-17 li:nth-child(14) { transform: rotate(275.2941176471deg); z-index: 13; } .circle.size-17 li:nth-child(14) > * { transform: rotate(-275.2941176471deg); } .circle.size-17 li:nth-child(15) { transform: rotate(296.4705882353deg); z-index: 14; } .circle.size-17 li:nth-child(15) > * { transform: rotate(-296.4705882353deg); } .circle.size-17 li:nth-child(16) { transform: rotate(317.6470588235deg); z-index: 15; } .circle.size-17 li:nth-child(16) > * { transform: rotate(-317.6470588235deg); } .circle.size-17 li:nth-child(17) { transform: rotate(338.8235294118deg); z-index: 16; } .circle.size-17 li:nth-child(17) > * { transform: rotate(-338.8235294118deg); } .circle.size-18 li:nth-child(1) { transform: rotate(0deg); z-index: 18; } .circle.size-18 li:nth-child(1) > * { transform: rotate(0deg); } .circle.size-18 li:nth-child(2) { transform: rotate(20deg); z-index: 17; } .circle.size-18 li:nth-child(2) > * { transform: rotate(-20deg); } .circle.size-18 li:nth-child(3) { transform: rotate(40deg); z-index: 16; } .circle.size-18 li:nth-child(3) > * { transform: rotate(-40deg); } .circle.size-18 li:nth-child(4) { transform: rotate(60deg); z-index: 15; } .circle.size-18 li:nth-child(4) > * { transform: rotate(-60deg); } .circle.size-18 li:nth-child(5) { transform: rotate(80deg); z-index: 14; } .circle.size-18 li:nth-child(5) > * { transform: rotate(-80deg); } .circle.size-18 li:nth-child(6) { transform: rotate(100deg); z-index: 13; } .circle.size-18 li:nth-child(6) > * { transform: rotate(-100deg); } .circle.size-18 li:nth-child(7) { transform: rotate(120deg); z-index: 12; } .circle.size-18 li:nth-child(7) > * { transform: rotate(-120deg); } .circle.size-18 li:nth-child(8) { transform: rotate(140deg); z-index: 11; } .circle.size-18 li:nth-child(8) > * { transform: rotate(-140deg); } .circle.size-18 li:nth-child(9) { transform: rotate(160deg); z-index: 10; } .circle.size-18 li:nth-child(9) > * { transform: rotate(-160deg); } .circle.size-18 li:nth-child(10) { transform: rotate(180deg); z-index: 9; } .circle.size-18 li:nth-child(10) > * { transform: rotate(-180deg); } .circle.size-18 li:nth-child(11) { transform: rotate(200deg); z-index: 10; } .circle.size-18 li:nth-child(11) > * { transform: rotate(-200deg); } .circle.size-18 li:nth-child(12) { transform: rotate(220deg); z-index: 11; } .circle.size-18 li:nth-child(12) > * { transform: rotate(-220deg); } .circle.size-18 li:nth-child(13) { transform: rotate(240deg); z-index: 12; } .circle.size-18 li:nth-child(13) > * { transform: rotate(-240deg); } .circle.size-18 li:nth-child(14) { transform: rotate(260deg); z-index: 13; } .circle.size-18 li:nth-child(14) > * { transform: rotate(-260deg); } .circle.size-18 li:nth-child(15) { transform: rotate(280deg); z-index: 14; } .circle.size-18 li:nth-child(15) > * { transform: rotate(-280deg); } .circle.size-18 li:nth-child(16) { transform: rotate(300deg); z-index: 15; } .circle.size-18 li:nth-child(16) > * { transform: rotate(-300deg); } .circle.size-18 li:nth-child(17) { transform: rotate(320deg); z-index: 16; } .circle.size-18 li:nth-child(17) > * { transform: rotate(-320deg); } .circle.size-18 li:nth-child(18) { transform: rotate(340deg); z-index: 17; } .circle.size-18 li:nth-child(18) > * { transform: rotate(-340deg); } .circle.size-19 li:nth-child(1) { transform: rotate(0deg); z-index: 19; } .circle.size-19 li:nth-child(1) > * { transform: rotate(0deg); } .circle.size-19 li:nth-child(2) { transform: rotate(18.9473684211deg); z-index: 18; } .circle.size-19 li:nth-child(2) > * { transform: rotate(-18.9473684211deg); } .circle.size-19 li:nth-child(3) { transform: rotate(37.8947368421deg); z-index: 17; } .circle.size-19 li:nth-child(3) > * { transform: rotate(-37.8947368421deg); } .circle.size-19 li:nth-child(4) { transform: rotate(56.8421052632deg); z-index: 16; } .circle.size-19 li:nth-child(4) > * { transform: rotate(-56.8421052632deg); } .circle.size-19 li:nth-child(5) { transform: rotate(75.7894736842deg); z-index: 15; } .circle.size-19 li:nth-child(5) > * { transform: rotate(-75.7894736842deg); } .circle.size-19 li:nth-child(6) { transform: rotate(94.7368421053deg); z-index: 14; } .circle.size-19 li:nth-child(6) > * { transform: rotate(-94.7368421053deg); } .circle.size-19 li:nth-child(7) { transform: rotate(113.6842105263deg); z-index: 13; } .circle.size-19 li:nth-child(7) > * { transform: rotate(-113.6842105263deg); } .circle.size-19 li:nth-child(8) { transform: rotate(132.6315789474deg); z-index: 12; } .circle.size-19 li:nth-child(8) > * { transform: rotate(-132.6315789474deg); } .circle.size-19 li:nth-child(9) { transform: rotate(151.5789473684deg); z-index: 11; } .circle.size-19 li:nth-child(9) > * { transform: rotate(-151.5789473684deg); } .circle.size-19 li:nth-child(10) { transform: rotate(170.5263157895deg); z-index: 10; } .circle.size-19 li:nth-child(10) > * { transform: rotate(-170.5263157895deg); } .circle.size-19 li:nth-child(11) { transform: rotate(189.4736842105deg); z-index: 10; } .circle.size-19 li:nth-child(11) > * { transform: rotate(-189.4736842105deg); } .circle.size-19 li:nth-child(12) { transform: rotate(208.4210526316deg); z-index: 11; } .circle.size-19 li:nth-child(12) > * { transform: rotate(-208.4210526316deg); } .circle.size-19 li:nth-child(13) { transform: rotate(227.3684210526deg); z-index: 12; } .circle.size-19 li:nth-child(13) > * { transform: rotate(-227.3684210526deg); } .circle.size-19 li:nth-child(14) { transform: rotate(246.3157894737deg); z-index: 13; } .circle.size-19 li:nth-child(14) > * { transform: rotate(-246.3157894737deg); } .circle.size-19 li:nth-child(15) { transform: rotate(265.2631578947deg); z-index: 14; } .circle.size-19 li:nth-child(15) > * { transform: rotate(-265.2631578947deg); } .circle.size-19 li:nth-child(16) { transform: rotate(284.2105263158deg); z-index: 15; } .circle.size-19 li:nth-child(16) > * { transform: rotate(-284.2105263158deg); } .circle.size-19 li:nth-child(17) { transform: rotate(303.1578947368deg); z-index: 16; } .circle.size-19 li:nth-child(17) > * { transform: rotate(-303.1578947368deg); } .circle.size-19 li:nth-child(18) { transform: rotate(322.1052631579deg); z-index: 17; } .circle.size-19 li:nth-child(18) > * { transform: rotate(-322.1052631579deg); } .circle.size-19 li:nth-child(19) { transform: rotate(341.0526315789deg); z-index: 18; } .circle.size-19 li:nth-child(19) > * { transform: rotate(-341.0526315789deg); } .circle.size-20 li:nth-child(1) { transform: rotate(0deg); z-index: 20; } .circle.size-20 li:nth-child(1) > * { transform: rotate(0deg); } .circle.size-20 li:nth-child(2) { transform: rotate(18deg); z-index: 19; } .circle.size-20 li:nth-child(2) > * { transform: rotate(-18deg); } .circle.size-20 li:nth-child(3) { transform: rotate(36deg); z-index: 18; } .circle.size-20 li:nth-child(3) > * { transform: rotate(-36deg); } .circle.size-20 li:nth-child(4) { transform: rotate(54deg); z-index: 17; } .circle.size-20 li:nth-child(4) > * { transform: rotate(-54deg); } .circle.size-20 li:nth-child(5) { transform: rotate(72deg); z-index: 16; } .circle.size-20 li:nth-child(5) > * { transform: rotate(-72deg); } .circle.size-20 li:nth-child(6) { transform: rotate(90deg); z-index: 15; } .circle.size-20 li:nth-child(6) > * { transform: rotate(-90deg); } .circle.size-20 li:nth-child(7) { transform: rotate(108deg); z-index: 14; } .circle.size-20 li:nth-child(7) > * { transform: rotate(-108deg); } .circle.size-20 li:nth-child(8) { transform: rotate(126deg); z-index: 13; } .circle.size-20 li:nth-child(8) > * { transform: rotate(-126deg); } .circle.size-20 li:nth-child(9) { transform: rotate(144deg); z-index: 12; } .circle.size-20 li:nth-child(9) > * { transform: rotate(-144deg); } .circle.size-20 li:nth-child(10) { transform: rotate(162deg); z-index: 11; } .circle.size-20 li:nth-child(10) > * { transform: rotate(-162deg); } .circle.size-20 li:nth-child(11) { transform: rotate(180deg); z-index: 10; } .circle.size-20 li:nth-child(11) > * { transform: rotate(-180deg); } .circle.size-20 li:nth-child(12) { transform: rotate(198deg); z-index: 11; } .circle.size-20 li:nth-child(12) > * { transform: rotate(-198deg); } .circle.size-20 li:nth-child(13) { transform: rotate(216deg); z-index: 12; } .circle.size-20 li:nth-child(13) > * { transform: rotate(-216deg); } .circle.size-20 li:nth-child(14) { transform: rotate(234deg); z-index: 13; } .circle.size-20 li:nth-child(14) > * { transform: rotate(-234deg); } .circle.size-20 li:nth-child(15) { transform: rotate(252deg); z-index: 14; } .circle.size-20 li:nth-child(15) > * { transform: rotate(-252deg); } .circle.size-20 li:nth-child(16) { transform: rotate(270deg); z-index: 15; } .circle.size-20 li:nth-child(16) > * { transform: rotate(-270deg); } .circle.size-20 li:nth-child(17) { transform: rotate(288deg); z-index: 16; } .circle.size-20 li:nth-child(17) > * { transform: rotate(-288deg); } .circle.size-20 li:nth-child(18) { transform: rotate(306deg); z-index: 17; } .circle.size-20 li:nth-child(18) > * { transform: rotate(-306deg); } .circle.size-20 li:nth-child(19) { transform: rotate(324deg); z-index: 18; } .circle.size-20 li:nth-child(19) > * { transform: rotate(-324deg); } .circle.size-20 li:nth-child(20) { transform: rotate(342deg); z-index: 19; } .circle.size-20 li:nth-child(20) > * { transform: rotate(-342deg); } /*# sourceMappingURL=circle.css.map */