/* A small pulsating circle attracting your attention.
 * Used for binding hint for it.
 */
.hint {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #2ca9cc;
  cursor: pointer;
  color: #fff;
  text-align: center;
  font-size: .8em;
  padding-top: 2px;
  box-shadow: 0 0 0 rgba(204,169,44, 0.4);
  animation: hint 2s infinite;

}

.hint:hover {
  animation: none;
}

@-webkit-keyframes hint {
  0%   { -webkit-box-shadow: 0 0 0 0 rgba(44, 169, 204, 0.5); }
  70%  { -webkit-box-shadow: 0 0 0 10px rgba(44, 169, 204, 0); }
  100% { -webkit-box-shadow: 0 0 0 0 rgba(44, 169, 204, 0); }
}

@keyframes hint {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(44, 169, 204, 0.5);
    box-shadow: 0 0 0 0 rgba(44, 169, 204, 0.5);
  }
  70% {
      -moz-box-shadow: 0 0 0 10px rgba(44, 169, 204, 0);
      box-shadow: 0 0 0 10px rgba(44, 169, 204, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(44, 169, 204, 0);
      box-shadow: 0 0 0 0 rgba(44, 169, 204, 0);
  }
}