@keyframes buttonleft {
  from {left: -500px; opacity: 0;}
  to {left: 0px;opacity: 1;}
 
}
.slidefromtop{
animation: fromtop;
animation-duration: 2s;
}
@keyframes fromtop{
  from {top: -500px; opacity: 0;}
  to{top:0px; opacity: 1;}
}
.awardeffect {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.awardeffect:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  transform: scale(1.03);
}

.fade-in-element{
  animation: frombott;
  animation-duration: 1s;
}
@keyframes frombott{
  from { bottom: -2000px; opacity: 0;}
  to {top: 0; opacity: 1;}
}
/* Gauge1.

.circular{
  position: relative;


  height: 100px;
  width: 100px;
text-align: center;
  
  transform: scale(2);
}
.circular .inner{
 
  position: absolute;
  z-index: 6;
  top: 50%;
  left: 50%;
  height: 80px;
  width: 80px;
  margin: -40px 0 0 -40px;
  background: #dde6f0;
  border-radius: 100%;
  box-shadow: 0 1px 0 rgba(0,0,0,0.2);

}
.circular .numb{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  font-size: 18px;
  font-weight: 500;
  color: #4158d0;
}
.circular .bar {
position: absolute;
height: 100%;
width: 100%;
background:#fff ;
border-radius: 100%;
clip: rect(0px, 100px, 100px, 50px);
}
.circle .bar .progress {
  position: absolute;
  height: 100%;
  width: 100%;

  border-radius: 100%;
  clip: rect(0px, 50px, 100px, 0px);
  background: #4158d0;
}
.circle .left .progress {
z-index: 1;
animation: left 4s linear both;
}
@keyframes left {
  100%{
    transform: rotate(180deg)
  }
}
.circle .right  {
    z-index: 3;
    transform: rotate(180deg);
    
    
}
.circle .right .progress{
    animation: right 4s linear both;
    animation-delay:4s ;
}
@keyframes right {
    100%{
      transform: rotate(180deg)
    }
}
 */