@-webkit-keyframes waving {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes waving {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes waveBg {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 2560px 0;
  }
}

@keyframes waveBg {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 2560px 0;
  }
}

* {
  margin: 0;
}

.life-item {
  display: flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  padding: 0 20%;
}

.life-item .life-half {
  width: 50%;
}

.life-item .item-left {
  display: flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -webkit-align-items: center;
  justify-content: Center;
  -moz-justify-content: Center;
  -ms-justify-content: Center;
  -webkit-justify-content: Center;
}

@media screen and (max-width: 768px) {
  .life-item {
    flex-direction: column;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
  }
  .life-item .life-half {
    width: 100%;
  }
}

.svgWrap {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
}

.svgWrap #svg {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.svgWrap #circlePath {
  transform-origin: 339.75px 328.615px;
  animation: waving 13s linear infinite;
}

@media screen and (max-width: 768px) {
  .life-item-loop-1, .life-item-loop-3 {
    background-size: 350% 100%;
    padding: 0%;
  }
}

@media screen and (max-width: 768px) {
  .life-item-1, .life-item-3 {
    flex-direction: column-reverse;
    -webkit-flex-direction: column-reverse;
    -moz-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
  }
}