/* @import url(http://weloveiconfonts.com/api/?family=entypo); */
/* [class*="entypo-"]:before {font-family: 'entypo', sans-serif;font-size:50px;color:#555;} */

/* html, body {height: 100%;} */
/* body {align-items: center;display: flex;font-family: sans-serif;justify-content: center;} */

/* .container{position:relative;-webkit-perspective: 1000;-webkit-backface-visibility: hidden;} */
.container{position:relative;-webkit-perspective: 1000;-webkit-backface-visibility: hidden; }
.badge-num {
  box-sizing:border-box;
  /* padding-left: 0.1em; */
  /* padding-right: 0.1em; */
  font-family: 'Trebuchet MS', sans-serif;
  background: #ff0000;
  cursor:default;
  border-radius: 50%;
  color: #fff;
  font-weight:bold;
  font-size: 16px;
  height: 40px;
  margin-top: 50%;
  line-height:2.1em;
  top: 50%;
  /* top:-4px; */
  /* right:-32px; */
  border:3px solid #fff;
  /* position: absolute; */
  text-align: center;
  width: 40px;
  box-shadow: 1px 1px 5px rgba(255,255,255, .2);
  animation: pulse 1.5s 1;
}

.badge-num:after {
  content: '';
  position: absolute;
  top:-2px;
  left:-2px;
  /* border:2px solid rgba(255,0,0, .5); */
  border:2px solid rgba(255,0,0, 1);
  opacity:0;
  border-radius: 50%;
  width:100%;
  height:100%;
  animation: sonar 1.5s 1;
}

.badge-num-zero {
  box-sizing:border-box;
  /* padding-left: 0.1em; */
  /* padding-right: 0.1em; */
  font-family: 'Trebuchet MS', sans-serif;
  background: rgb(25, 125, 194);
  cursor:default;
  border-radius: 50%;
  color: #fff;
  font-weight:bold;
  font-size: 16px;
  height: 40px;
  margin-top: 50%;
  line-height:2.1em;
  top: 50%;
  /* top:-4px; */
  /* right:-32px; */
  border:3px solid #fff;
  /* position: absolute; */
  text-align: center;
  width: 40px;
  box-shadow: 1px 1px 5px rgba(255,255,255, .2);
  animation: pulse 1.5s 1;
}

.badge-num-zero:after {
  content: '';
  position: absolute;
  top:-2px;
  left:-2px;
  /* border:2px solid rgba(255,0,0, .5); */
  border:2px solid rgba(25, 125, 194, 1);
  opacity:0;
  border-radius: 50%;
  width:100%;
  height:100%;
  animation: sonar 1.5s 1;
}

@keyframes sonar { 
  0% {transform: scale(1); opacity: 1;}
  100% {transform: scale(1.8);opacity: 0.1;}
}

@keyframes pulse {
  0% {transform: scale(1);}
  20% {transform: scale(1.4); } 
  50% {transform: scale(.9);} 
  80% {transform: scale(1.2);} 
  100% {transform: scale(1);}
}