* {
  margin: 0;
  padding: 0;
}

.circle-with-text {
  display: flex;
  align-items: center;
}

.circle-list {
  position: relative;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  list-style: none;
  background: radial-gradient(circle, #303943 30%, #2E2C29 100%);
}
.circle-list_copy {
  position: absolute;
  top: 50%;
  margin-top: -300px;
  left: 50%;
  margin-left: -750px;
  z-index: -1;
  display: none;
}
.circle-list::before {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  top: 175px;
  border-radius: 50%;
  display: block;
  background-color: white;
  z-index: 2;
  right: 176px;
}
.circle-list::after {
  content: "";
  position: absolute;
  width: 270px;
  height: 270px;
  border: 30px solid #000000;
  border-radius: 50%;
  top: 50%;
  margin-top: -135px;
  background-color: #000000;
  left: 50%;
  margin-left: -135px;
}
.circle-list-wrapper {
  padding: 60px;
    transform: scale(0.7);
}
.circle-list-wrapper_copy {
  position: absolute;
  top: -5px;
  left: 0;
  z-index: -1;
}
.circle-list-wrapper_copy .circle-list {
  animation: 180s linear 0s infinite rotating;
  background-color: blue;
}
.circle-list-wrapper_copy .circle-list::before {
  border-color: blue;
}
.circle-list-wrapper_copy .circle-list::after {
  display: none;
}
.circle-list-wrapper_copy .circle-list__item {
  background: #000000;
}
.circle-list__content {
  transition: 0.3s all ease-in-out;
}
.circle-list__content:hover {
  transform: scale(1.2);
}
.circle-list__text {
  position: absolute;
  z-index: 5;
  font-weight: 500;
  letter-spacing: -1px;
  font-family: "Roboto", sans-serif;
  font-size: 22px;
}
.circle-list__text:nth-child(1) {
  left: 125px;
  top: 96px;
  transform: rotate(-38deg);
  color: white;
}
.circle-list__text:nth-child(2) {
  right: 138px;
  top: 101px;
  transform: rotate(38deg);
  color: white;
}
.circle-list__text:nth-child(3) {
  right: 72px;
  top: 281px;
  transform: rotate(90deg);
  color: white;
}
.circle-list__text:nth-child(4) {
  right: 139px;
  bottom: 109px;
  transform: rotate(144deg);
  color: white;
}
.circle-list__text:nth-child(5) {
  left: 134px;
  bottom: 84px;
  transform: rotate(-145deg);
  color: white;
}
.circle-list__text:nth-child(6) {
  left: 54px;
  top: 287px;
  transform: rotate(-91deg);
  color: white;
}
.circle-list__item {
  position: absolute;
  width: 200px;
  height: 150px;
  background: linear-gradient(to bottom, #2E2C29, #303133);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  z-index: 0;
  overflow: hidden;
  clip-path: polygon(50% 0%, 100% 41%, 100% 100%, 0 100%, 0% 41%);
  transition: 0.5s all ease-in-out;
  filter: grayscale(1);
}
.circle-list__item:hover {
  filter: grayscale(0);
  transform: scale(1.05);
  background-color: black;
  cursor: pointer;
}
.circle-list__item img {
  margin-top: 15px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 5px solid white;
}
.circle-list__item::before, .circle-list__item::after {
  content: "";
  position: absolute;
  background-color: white;
  opacity: 0;
  width: 100%;
  height: 50%;
  transform: rotate(40deg);
  top: -30px;
}
.circle-list__item::before {
  left: -50px;
  transform: rotate(-40deg);
}
.circle-list__item::after {
  right: -50px;
}
.circle-list__item:nth-child(1) {
  top: -70px;
  left: 0;
  transform: rotate(-35deg);
}
.circle-list__item:nth-child(2) {
  top: -70px;
  right: 0;
  transform: rotate(35deg);
}
.circle-list__item:nth-child(3) {
  top: 50%;
  margin-top: -75px;
  left: -130px;
  transform: rotate(-90deg);
}
.circle-list__item:nth-child(4) {
  top: 50%;
  margin-top: -75px;
  right: -130px;
  transform: rotate(90deg);
}
.circle-list__item:nth-child(5) {
  bottom: -70px;
  left: 0;
  transform: rotate(-145deg);
}
.circle-list__item:nth-child(6) {
  bottom: -70px;
  right: 0;
  transform: rotate(145deg);
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@media screen and (max-width: 1024px) {
  .circle-wrapper {
    padding: 0;
    transform: scale(0.6);
  }

  .circle-list-wrapper {
    padding: 0;
  }
}
@media screen and (max-width: 768px) {
  .circle-with-text {
    flex-direction: column;
    align-items: center;
  }
  .circle-with-text .circle-text {
    text-align: center;
    padding: 0 15px;
  }
}
@media screen and (max-width: 600px) {
  .circle-wrapper {
    transform: scale(0.4);
  }
}
@media screen and (max-width: 475px) {
  .circle-with-text {
    align-items: center;
    margin-top: -90px;
    overflow: hidden;
  }
  .circle-with-text .circle-text {
    margin-top: -90px;
  }
}

/*# sourceMappingURL=index.css.map */

.disk {
  width: 30%;
  padding: 15% 0; border-radius: 50%;  /* адаптивный круг */
  font: 2.0vmin monospace; 
}
.disk b {
  position: absolute;
  left: 50%; /* все буквы ставим в одну точку*/
  width: 0; /* убираем отступ */
}

.disk b:nth-of-type(-n+14) {
  bottom: 50%; /* отступ от центра по радиусу */
  -ms-transform-origin: 0% 100%; 
  -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%;
  padding-bottom: 50%; /* отступ от центра круга */
}

.disk b:nth-of-type(1) {-ms-transform: rotate(345deg); -webkit-transform: rotate(345deg); transform: rotate(345deg);} /*Укажем расположение для буквы П*/
.disk b:nth-of-type(2) {-ms-transform: rotate(351deg); -webkit-transform: rotate(351deg); transform: rotate(351deg);} /*Укажем расположение для буквы Р*/
.disk b:nth-of-type(3) {-ms-transform: rotate(357deg); -webkit-transform: rotate(357deg); transform: rotate(357deg);} /*Укажем расположение для буквы И*/
.disk b:nth-of-type(4) {-ms-transform: rotate(3deg); -webkit-transform: rotate(3deg); transform: rotate(3deg);} /*Укажем расположение для буквы В*/
.disk b:nth-of-type(5) {-ms-transform: rotate(9deg); -webkit-transform: rotate(9deg); transform: rotate(9deg);} /*Укажем расположение для буквы Е*/
.disk b:nth-of-type(6) {-ms-transform: rotate(15deg); -webkit-transform: rotate(15deg); transform: rotate(15deg);} /*Укажем расположение для буквы Т*/
.disk b:nth-of-type(7) {-ms-transform: rotate(19deg); -webkit-transform: rotate(19deg); transform: rotate(19deg);} /*Укажем расположение для буквы П*/
.disk b:nth-of-type(8) {-ms-transform: rotate(23deg); -webkit-transform: rotate(23deg); transform: rotate(23deg);} /*Укажем расположение для буквы Р*/
.disk b:nth-of-type(9) {-ms-transform: rotate(27deg); -webkit-transform: rotate(27deg); transform: rotate(27deg);} /*Укажем расположение для буквы И*/
.disk b:nth-of-type(10) {-ms-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg);} /*Укажем расположение для буквы В*/
.disk b:nth-of-type(11) {-ms-transform: rotate(33deg); -webkit-transform: rotate(33deg); transform: rotate(33deg);} /*Укажем расположение для буквы Е*/
.disk b:nth-of-type(12) {-ms-transform: rotate(35deg); -webkit-transform: rotate(35deg); transform: rotate(35deg);} /*Укажем расположение для буквы Т*/
.disk b:nth-of-type(13) {-ms-transform: rotate(39deg); -webkit-transform: rotate(39deg); transform: rotate(39deg);} /*Укажем расположение для буквы Е*/
.disk b:nth-of-type(14) {-ms-transform: rotate(43deg); -webkit-transform: rotate(43deg); transform: rotate(43deg);} /*Укажем расположение для буквы Т*/