body { overflow-x: hidden; }
#hero, #sitenav { background-color: #eaf5fe; }
#hero { position: relative; }
#hero .image-main { position: relative }
#hero { min-height: 400px }
#hero .image-main .img-02 { position: absolute; top: 50%; transform: translateY(-50%); }
#intro .lead { max-width: 1000px; }
.numbers { max-width: 900px }
#percentages { background-color: #f6f6f6; }
.ico img { max-height: 45px }
.ico { width: 30% }
#values .elevate { margin-bottom: -6rem; }
span.medium { font-weight: 500; }

.single-chart { width: 100%; }
.circular-chart { display: block; margin: 10px auto; max-width: 55%; max-height: 250px; }
.circle-bg { fill: none; stroke: #F3F3F3; stroke-width: 5; }
.circle { fill: none; stroke-width: 5; }
.circle-animation { animation: progress 2.5s ease-out forwards; stroke: #009EFF; }
.percentage { fill: #000; font-size: 0.5em; text-anchor: middle; font-weight: 700; }
@keyframes progress {
  0% { stroke-dasharray: 0 100; }
}


@media (max-width: 1440px) {
}

@media (max-width: 767px) {
.image-main .img-01 { width: 80%; }
.image-main .img-02 { width: 50%; position: absolute; right: 0; top: 50px }
}

@media (min-width: 768px) {
#values .container { position: relative }
#values .elevate { margin-bottom: -7rem; }
.image-main .img-01 { width: 80%; top: -60px }
.image-main .img-02 { width: 50%; right: -30px }

}

@media (max-width: 991px) {
#values { overflow: hidden }
}

@media (min-width: 992px) {
#values .elevate { margin-bottom: 0; position: absolute; max-width: 700px; bottom: -4.5rem; left: 55% }
}