.wrapper {
   padding-top: 30px;
   /*margin-left: -300px;*/
}
 .outside-circle {
   margin: 0 auto;
   width: 100px;
   height: 100px;
   border-radius: 80px;
   overflow: hidden;
}
 .outside-circle.is-active {
   box-shadow: 0 0 0 20px rgba(0, 159, 223, 0.3);
}
 .inside-circle {
   position: relative;
   margin: 10px auto;
   border-radius: 80px;
   width: 80px;
   height: 80px;
   text-align: center;
   overflow: hidden;
   box-shadow: 0px 0px 0px 150px #ccc;
}
 .animate .inside-circle {
   animation: eclipse 2s linear forwards;
}
 @keyframes eclipse {
   0% {
     box-shadow: 0px -240px 0px 150px #009fdf, 0px 0px 0px 150px #ccc;
  }
   100% {
     box-shadow: 0px 0px 0px 150px #009fdf, 0px 0px 0px 150px #ccc;
  }
}
 .vertical-line {
   background: #ccc;
   width: 10px;
   height: 150px;
   margin: 0 auto;
}
 .vertical-line::before {
   content: "";
   display: block;
   background: #009fdf;
   width: 100%;
   height: 0;
   margin: auto;
}
 .animate .vertical-line::before {
   transition: height 1s linear;
   height: 150px;
}
 .horizontal-line {
   background: #ccc;
   height: 10px;
   width: 290px;
   margin: 80px auto;
   position: relative;
   left: 225px;
}
 .horizontal-line::before {
   content: "";
   position: absolute;
   background: #009fdf;
   width: 0;
   height: 10px;
   margin: auto;
   left: 5px;
}
 .animate .horizontal-line::before {
   transition: width 0.5s linear;
   width: 290px;
}
 .corner {
   position: absolute;
   width: 90px;
   height: 90px;
}
 .corner__left {
   top: -80px;
   left: -85px;
}
 .corner__right {
   bottom: -80px;
   right: -85px;
}
 .corner path {
   stroke-width: 11px;
   fill: none;
}
 .corner .grey-path {
   stroke: #ccc;
}
 .corner .blue-path {
   stroke: #009fdf;
   stroke-dasharray: 200;
   stroke-dashoffset: 200;
}
 .animate .corner .blue-path {
   animation: corner-fill linear 0.5s forwards;
}
 @keyframes corner-fill {
   to {
     stroke-dashoffset: 0;
  }
}
 .animate .anim-first {
   animation-delay: 0s;
}
 .animate .anim-first .icon {
   transition-delay: 0s;
}
 .animate .anim-second::before {
   transition-delay: 1s !important;
}
 .animate .anim-third {
   animation-delay: 2s;
}
 .animate .anim-third .icon {
   transition-delay: 2s;
}
 .animate .anim-fourth::before {
   transition-delay: 3s !important;
}
 .animate .anim-fifth {
   animation-delay: 4s !important;
}
.animate .anim-fifth .icon {
   transition-delay: 4s !important;
}
 .animate .anim-6th::before {
   transition-delay: 4.8s !important;
}
 .animate .anim-7th {
   animation-delay: 5.8s !important;
}
.animate .anim-7th .icon {
   transition-delay: 6s !important;
}
.animate .anim-8th::before {
   transition-delay: 6.6s !important;
}
 .icon {
   display: block;
   width: 100%;
   height: 0%;
   overflow: hidden;
   color: #009fdf;
    font-size: 44px;
    font-weight: 700;
}
 .animate .icon {
   transition: height 1s linear;
   height: 100%;
}
 .icon::before {
   content: "";
   display: inline-block;
   position: relative;
   font-size: 40px;
   top: 40px;
   margin-top: -25px;
   color: #009fdf;
   overflow: hidden;
}
 .icon_checkmark::before {
   content: "\2714";
}
 .icon_whistle::before {
   display: block;
   height: 40px;
   background-repeat: no-repeat;
   background-position: center center;
   background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9Ijc1IiBoZWlnaHQ9Ijc1IiB2aWV3Qm94PSIwIDAgMzIgMzIiIGZpbGw9IiMwMDlGREYiPiAgPHRpdGxlPndoaXN0bGU8L3RpdGxlPiAgPHBhdGggZD0iTTguMjEzIDE3LjQxYzAuNjk3LTIuNTQyIDMuMDI0LTQuNDEgNS43ODctNC40MWgxdjJoM3YtMmgxMHYzbC04LjEzMiAxLjc0M2MwLjA4NiAwLjQwNSAwLjEzMiAwLjgyNiAwLjEzMiAxLjI1NyAwIDMuMzE0LTIuNjg2IDYtNiA2LTIuNzYzIDAtNS4wOTAtMS44NjgtNS43ODctNC40MS0wLjMzNiAwLjI1Ny0wLjc1NyAwLjQxLTEuMjEzIDAuNDEtMS4xMDUgMC0yLTAuODk1LTItMnMwLjg5NS0yIDItMmMwLjQ1NiAwIDAuODc3IDAuMTUzIDEuMjEzIDAuNDF2MCAwek03IDE4Yy0wLjU1MiAwLTEgMC40NDQtMSAxIDAgMC41NTIgMC40NDQgMSAxIDEgMC41NTIgMCAxLTAuNDQ0IDEtMSAwLTAuNTUyLTAuNDQ0LTEtMS0xdjB6TTE2IDd2NGgxdi00aC0xek0yMS4xMiA4LjAyMWwtMi4xMiAzLjM5MiAwLjg0OCAwLjUzIDIuMTItMy4zOTItMC44NDgtMC41M3pNMTEuODQ4IDguMDIxbDIuMTIgMy4zOTItMC44NDggMC41My0yLjEyLTMuMzkyIDAuODQ4LTAuNTN6Ij48L3BhdGg+PC9zdmc+);
}