@charset "UTF-8";

.razar {
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
  position:relative;
  width:70px;
  height:70px;
  background-size: 100% 100%;
  border-radius:35px;
  /* box-shadow:0 1px 1px 0 rgba(0,0,0,0.4), 0 0 4px 1px rgba(0,0,0,0.2), inset 0 1px 1px 0 rgba(255,255,255,0.2), inset 0 2px 4px 1px rgba(255,255,255,0.1); */
}

.pulse {
  position:absolute;
  top:0;
  left:0;
  width:70px;
  height:70px;
  border-radius:35px;
  background:#dcf48a;
  -moz-animation: pulsating 2s ease-in-out;
  -moz-animation-iteration-count: infinite;
  -webkit-animation: pulsating 2s ease-in-out;
  -webkit-animation-iteration-count: infinite;
  opacity:0.0;
  z-index:5;
}

.ringbase {
  position:absolute;
  top:0;
  left:0;
  width:70px;
  height:70px;
  border-radius:35px;
  opacity:0.0;
  z-index:10;
}

.ring1 {
      box-shadow: 0 0 2px 1px #ffffff, inset 0 0 2px 1px #ffffff;
  -moz-animation: ring 2s ease-in-out;
  -moz-animation-iteration-count: infinite;
  -webkit-animation: ring 2s ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation: ring 2s ease-in-out;
  animation-iteration-count: infinite;
}

.ring2 {
   box-shadow: 0 0 1px 0px #ffffff, inset 0 0 1px 0px #ffffff;
  -moz-animation: ring 2s ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-delay: 0.5s;
  -webkit-animation: ring 2s ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: 0.5s;
  animation: ring 2s ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0.5s;
}

@-webkit-keyframes pulsating {
  0% {opacity: 0.0;}
  50% {opacity: 0.2;}
  100% {opacity: 0.0;}
}

@-moz-keyframes pulsating {
  0% {opacity: 0.0;}
  50% {opacity: 0.2;}
  100% {opacity: 0.0;}
}

@keyframes pulsating {
  0% {opacity: 0.0;}
  50% {opacity: 0.2;}
  100% {opacity: 0.0;}
}

@-webkit-keyframes ring {
  0% {-webkit-transform: scale(0.4, 0.4); opacity: 0.0;}
  50% {opacity: 0.6;}
  100% {-webkit-transform: scale(1.1, 1.1); opacity: 0.0;}
}

@-moz-keyframes ring {
  0% {-moz-transform: scale(0.4, 0.4); opacity: 0.0;}
  50% {opacity: 0.6;}
  100% {-moz-transform: scale(1.1, 1.1); opacity: 0.0;}
}

@keyframes ring {
  0% {transform: scale(0.4, 0.4); opacity: 0.0;}
  50% {opacity: 0.6;}
  100% {transform: scale(1.1, 1.1); opacity: 0.0;}
}


.pointer {
  position: absolute;
  width: 70px;
  top: 35px;
  -webkit-animation: circling 2s linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation: circling 2s linear;
  -moz-animation-iteration-count: infinite;
  animation: circling 2s linear;
  animation-iteration-count: infinite;
  z-index: 20;
}

.pointer div {
    width: 49%;
    border-bottom: 2px solid #ffffff;
}

.dot {
  opacity: 0;
  /* border: 3px solid #e0f4a5; */
  border-radius: 100%;
  position:absolute;
  -webkit-animation: blink 2s ease-out;
  -webkit-animation-iteration-count: infinite;
  -moz-animation: blink 2s ease-out;
  -moz-animation-iteration-count: infinite;
  animation: blink 2s ease-out;
  animation-iteration-count: infinite;
  z-index: 25;
  width:10px;
  height:10px;
}

.dot.pos1 {
  left:0px;
  top:25px;
}

.dot.pos2 {
  left:30px;
  top:10px;
  -webkit-animation-delay: 0.6s;
  -moz-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

@-webkit-keyframes circling {
  0% {-webkit-transform: rotate(0deg);}
  50% {-webkit-transform: rotate(180deg);}
  100% {-webkit-transform: rotate(360deg);}
}

@-moz-keyframes circling {
  0% {-moz-transform: rotate(0deg);}
  50% {-moz-transform: rotate(180deg);}
  100% {-moz-transform: rotate(360deg);}
}

@keyframes circling {
  0% {transform: rotate(0deg);}
  50% {transform: rotate(180deg);}
  100% {transform: rotate(360deg);}
}

@-webkit-keyframes blink {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@-moz-keyframes blink {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes blink {
  0% { opacity: 1; }
  100% { opacity: 0; }
}