.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;}
}