/// LESS version of https://codepen.io/KittyGiraudel/pen/vEJXGm
/// Mixin to place items on a circle
/// @author Hugo Giraudel
/// @author Ana Tudor
/// @author Ilko Kacharov
/// @param {Integer} $item-count - Number of items on the circle
/// @param {Length} $circle-size - Large circle size
/// @param {Length} $item-size - Single item size
.on-circle(@item-count, @circle-size, @item-size) {
  position: relative;
  width: @circle-size;
  height: @circle-size;
  border-radius: 50%;
  padding: 0;
  list-style: none;

  img {
    width: @item-size;
    height: @item-size;
  }

  > * {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -(@item-size / 2);
    width: @item-size;
    height: @item-size;

    .loop( @i, @a ) when ( @i >= 0 ) {
      .loop( @i - 1, @a );

      @rot: @i * @a;
      &:nth-of-type(@{i}) {
        transform: rotate(@rot * 1deg) translate(unit((@circle-size / 2), rem))
          rotate(@rot * -1deg);
      }
    }

    @angle: (360 / @item-count);
    .loop(@item-count, @angle);
  }
}

.circle-container {
	background-repeat: no-repeat;
	background-size: 100%;
	background-color: transparent;
	top:-150px;
	left:-10px;
	z-index: 100;

  .on-circle(@item-count: 8, @circle-size: 9rem, @item-size: 4rem);
	

  margin: 0;
  border: none;

  img {
    border-radius: 50%;
    border: none;
    display: block;
    max-width: 100%;
    max-height: 100%;
    transition: 0.15s;
    &:hover {
      border: none;
    }
  }
}