.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.hp_api_step {
  opacity: 0;
  transition-timing-function: ease-out;
  -webkit-transition: opacity 1000ms; /* Safari */
  transition: opacity 1000ms;
  -webkit-transition-delay: 200ms;
  transition-delay: 200ms;
}

.theme{
  -webkit-transition: all 800ms;
  transition: all 800ms;
  -webkit-transition-delay: 400ms;
  transition-delay: 400ms;
}

.blue_circle{
  position:absolute;
  z-index: 15;
  width:150px;
  height:150px;
  background-color: #002542;
  border-radius: 75px;
  pointer-events: none;
}

  .blue_circle div.number{
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width:auto;
    height:auto;
    color: #fff;
    font-size: 50px;
    font-weight: bold;
  }

  .vertical_line{
    position:absolute;
    z-index: 10;
    width: 2px;
    height: 1%;
    top: -50%;
    opacity:0;
    background-color: #002542;
    -webkit-transition: all 1000ms;
    transition: all 1000ms;
    -webkit-transition-delay: 600ms;
    transition-delay: 600ms;
  }

.blue_circle_center{
  left: 50%;
  transform: translateX(-50%) scale(0.7);
}

    .blue_circle_center_scaled{
      left: 50%;
      transform: translateX(-50%) scale(1);
      -webkit-transition: all 300ms;
      transition: all 300ms;
      -webkit-transition-delay: 600ms;
      transition-delay: 600ms;
    }

.blue_circle_left{
  left: 5%;
  transform: scale(0.7);
}

    .blue_circle_left_scaled{
      left: 5%;
      transform: scale(1);
      -webkit-transition: all 300ms;
      transition: all 300ms;
      -webkit-transition-delay: 600ms;
      transition-delay: 600ms;
    }

.blue_circle_left_outside{
  transform: translateX(-50%) scale(0.5);
}

    .blue_circle_left_outside_scaled{
      transform: translateX(-50%) scale(0.7);
      -webkit-transition: all 300ms;
      transition: all 300ms;
      -webkit-transition-delay: 600ms;
      transition-delay: 600ms;
    }

.blue_circle_left_outside_scaled div.number{
   top: 50%;
   left: 60%;
   transform:  translateY(-50%);
   font-size: 30px;
}

.desc{
  opacity: 0;
  -webkit-transition: opacity 400ms;
  transition: opacity 400ms;
  -webkit-transition-delay: 600ms;
  transition-delay: 600ms;
}

.mobile-desc{
  opacity: 0;
  -webkit-transition: opacity 400ms;
  transition: opacity 400ms;
  -webkit-transition-delay: 600ms;
  transition-delay: 600ms;
}