townsquare/css/circle.css

.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 */