.path-slider {
  position: relative;
  width: 100%;
  height: 100%;
  background-position: top;
}

.path-slider:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;
  height: 220px;
  background-color: rgba(0, 0, 0, 0.1);
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-radius: 100%;
}

.path-slider__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: top;
}

svg {
  /*position: absolute;*/
  /*top: 0;*/
  left: 0;
  width: 100%;
  height: 100%;
}

svg {
  display: none;
}

.path-slider__item {
  position: absolute;
  left: -100px;
  top: -100px;
  cursor: pointer;
  z-index: 1;
}

.item__circle {
  display: inline-block;
  width: 160px;
  height: 160px;
  background-position: center;
  border-radius: 100%;
  -webkit-transform: scale(0.5);
      -ms-transform: scale(0.5);
          transform: scale(0.5);
  transition: 0.5s -webkit-transform;
  transition: 0.5s transform;
  transition: 0.5s transform, 0.5s -webkit-transform;
  border: 20px solid rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 0 30px rgba(255, 255, 255, 0.3);
}

.path-slider__current-item {
  z-index: 9;
}

.path-slider__current-item .item__circle {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}

.path-slider__item--1 .item__circle {
  background-image: url("../images/img1.jpg");
}

.path-slider__item--2 .item__circle {
  background-image: url("../images/img2.jpg");
}

.path-slider__item--3 .item__circle {
  background-image: url("../images/img3.jpg");
}

.path-slider__item--4 .item__circle {
  background-image: url("../images/img4.jpg");
}

.path-slider__item--5 .item__circle {
  background-image: url("../images/img5.jpg");
}