.circles {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 3px solid #1d93ce;
      margin: 0 auto;
      overflow: hidden;
      margin-top: 40px;
      position: relative;
      z-index: 3;}

    .circles img {
      position: relative;
      z-index: 1;}

    .circIcon1 {
      margin-top: 15px;
      margin-left: 7px;}

    .circle2 {
      margin-left: 10px;
      margin-top: 10px;}

    .circle2-2 {
      margin-left: 10px;
      margin-top: -23px;}

    .circle3 {}

    .diffTxt {
      text-align: center;
      padding: 20px 0px 0px 0px;
      width: 275px;
      margin: 0 auto;}

    .circleStat {
      text-align: center;
      padding-top: 10px;
      font-size: 22px;
      height: auto;
      line-height: 25px;
      font-style: italic;
      font-family: lora;}

    .circleStatNum {
      font-size: 45px;}

    @media (min-width: 992px) {
      .circleStat {
        text-align: center;
        padding-top: 20px;
        font-size: 22px;
        height: 55px;
        line-height: 25px;}
    }

    ///////animation
    .circleSlideUp {
      -webkit-animation-name: circleSlideUp;
      animation-name: circleSlideUp
    ;}

    @-webkit-keyframes circleSlideUp {
      0% {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible
      ;}

      100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
      ;}
    }

    @keyframes circleSlideUp {
      0% {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible
      ;}

      100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
      ;}
    }

    .circleSlideDown {
      -webkit-animation-name: circleSlideDown;
      animation-name: circleSlideDown
    ;}

    @-webkit-keyframes circleSlideDown {
      0% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible
      ;}

      100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
      ;}
    }

    @keyframes circleSlideDown {
      0% {
        -webkit-transform: translate3d(0, -120%, 0);
        transform: translate3d(0, -120%, 0);
        visibility: visible
      ;}

      100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
      ;}
    }

    .circleSlideLeft {
      -webkit-animation-name: circleSlideLeft;
      animation-name: circleSlideLeft
    ;}

    @-webkit-keyframes circleSlideLeft {
      0% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible
      ;}

      100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
      ;}
    }

    @keyframes circleSlideLeft {
      0% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible
      ;}

      100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
      ;}
    }

    .circleSlideRight {
      -webkit-animation-name: circleSlideRight;
      animation-name: circleSlideRight
    ;}

    @-webkit-keyframes circleSlideRight {
      0% {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible
      ;}

      100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
      ;}
    }

    @keyframes circleSlideRight {
      0% {
        -webkit-transform: translate3d(120%, 0, 0);
        transform: translate3d(120%, 0, 0);
        visibility: visible
      ;}

      100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
      ;}
    }

    .placeHolderAni {
      -webkit-animation-name: placeHolderAni;
      animation-name: placeHolderAni;
      margin: -4px 0 0 -2px;}

    @-webkit-keyframes placeHolderAni {
      0% {
        -webkit-transform: scale(0) rotate(0deg);
        visibility: visible
      ;}

      100% {
        -webkit-transform: scale(1) rotate(360deg);}
    }

    @keyframes placeHolderAni {
      0% {
        transform: scale(0) rotate(0deg);
        visibility: visible
      ;}

      100% {
        transform: scale(1) rotate(360deg);}
    }

    #earth {
      width: 100px;
      height: 100px;
      background: url("/img/globe-spin.webp");
      border-radius: 50%;
      background-size: 80px;
      animation-name: rotateGlobe;
      animation-duration: 1s;
      animation-iteration-count: 1;
      animation-timing-function: linear;
      animation-delay: 1.5s;}

    @keyframes rotateGlobe {
      from {
        background-position-x: 0px;
        opacity: 0;}

      to {
        background-position-x: 210px;
        opacity: 1;}
    }