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