/* DEFAULT */
.three-circle-images {
  max-width: 92%;
  margin: 38px auto 0;
  width: 1142px;
  padding-bottom: calc(92px + 8%);
}

/* RIGHT */
.three-circle-images.alignright {
  float: right;
  max-width: 357px;
  margin: 0;
  width: 100%;
  padding-bottom: 0;
}

/* DEFAULT IMG */
.three-circle-images img {
  border-radius: 50%;
  display: inline-block;
  width: 33.33%;
  opacity: 0;
  transform: scale(0);
  position: relative;
}

/* RIGHT IMG */
.three-circle-images.alignright img {
  width: 100%;
  display: block;
}

/* CENTER IMG */
.three-circle-images img.center-circle-image {
  transform: scale(0) translate3d(0, 20%, 0);
  z-index: 2;
}

/* RIGHT CENTER IMG */
.three-circle-images.alignright img.center-circle-image {
  transform: scale(0);
  margin: -40% 0 -30% 30%;
  z-index: 1;
}

/* RIGHT LAST IMAGE */
.three-circle-images.alignright img:last-child {
  z-index: 2;
  margin: 0 0 0 5%;
}

/* LOADED */
body.loaded .three-circle-images.in-view img,
body.loaded .in-view .three-circle-images.alignright img {
  opacity: 1;
  transform: scale(1);
  transition: opacity 1s, transform 1s;
}

body.loaded .three-circle-images.in-view img.center-circle-image {
  transform: scale(1.28) translate3d(0, 20%, 0);
}

/* 960 */
@media only screen and (max-width: 960px) {
  .three-circle-images.alignright {
    max-width: 300px;
  }
}

/* 850 */
@media only screen and (max-width: 960px) {
  .three-circle-images.alignright {
    max-width: 92%;
    margin: 0 auto 0;
    width: 1142px;
    padding-bottom: calc(15px + 8%);
    float: none;
  }

  .three-circle-images.alignright img {
    border-radius: 50%;
    display: inline-block;
    width: 33.33%;
    opacity: 0;
    transform: scale(0);
    position: relative;
  }

  /* CENTER IMG */
  .three-circle-images.alignright img.center-circle-image {
    transform: scale(0) translate3d(0, 20%, 0);
    margin: auto;
    z-index: 2;
  }

  /* RIGHT LAST IMAGE */
  .three-circle-images.alignright img:last-child {
    z-index: 2;
    margin: 0;
  }

  body.loaded .three-circle-images.in-view img {
    opacity: 1;
    transform: scale(1);
    transition: opacity 1s, transform 1s;
  }

  body.loaded .in-view .three-circle-images.alignright img.center-circle-image {
    transform: scale(1.28) translate3d(0, 20%, 0);
  }
}

/* 600 */
@media only screen and (max-width: 600px) {
  .three-circle-images {
    min-width: 600px;
    position: relative;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
  }
}