.high-performance {
    display: flex;
    flex-grow: 1;
    justify-content: center;
}

@media (max-width: 992px) {
    .high-performance {
        width: 100%;
        margin-top: 20px;
    } 
}

.high-performance-steps {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    max-width: 220px;
    text-align: center;
    line-height: 1.2;
    font-weight: bold;
}

.high-performance-steps-title {
    min-height: 50px;
    margin-bottom: 10px;
}

.high-performance-timing {
    width: 18%;
    text-align: center;
}
.high-performance-timing-value {
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    margin: 8px;
}
.high-performance-timing-value:first-of-type {
    margin-top: 100px;
}

.high-performance-browser {
    background-color: #F2F2F2;
    border: 1px solid #BEC5C9;
    border-radius: 6px;
    width: 125px;
    height: 84px;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
    border-top-width: 10px;
    color: #BEC5C9;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 480px) {
    .high-performance-browser {
        width: 110px;
        height: 72px;
    }
}

.custom-image-hero .high-performance img.high-performance-spinner {
    height: auto;
    width: 50px;
}

.custom-image-hero .high-performance img.high-performance-spinner--small {
    height: 22px;
    width: 22px;
    margin-top: -7px;
    display: block;
}


.high-performance-browser-content-column {
    margin: 5px;
}
.high-performance-browser-arrow {
    margin: 10px 0;
    /* opacity: 0; */
}
.high-performance-checkmark,
.high-performance-sad {
    margin-top: 20px;
}
.browser-content--red {
    background-color: #E57C38;
}
.browser-content--blue {
    background-color: #316CD4;
}
.browser-content--gray {
    background-color: #93999C;
}
.browser-content--gray-dark {
    background-color: #616B70;
}
.browser-content--green {
    background-color: #08905B;
}
.browser-content-block--vertical {
    width: 26px;
    height: 50px;
    border-radius: 2px;
}
.browser-content-block--title {
    width: 50px;
    height: 4px;
    margin-bottom: 5px;
}
.browser-content-block--list {
    width: 35px;
    height: 4px;
    margin-bottom: 4px;
    position: relative;
    margin-left: 9px;
}
.browser-content-block--list:before {
    background-color: #08905B;
    content: "";
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    left: -7px;
}

/*------------ Animations ------------*/

.faded {
    opacity: 0;
}
.animated-dash path,
.animated-dash polyline {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation-name: dash;
    animation-timing-function: linear;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}
/* Disables animation on Edge to show the chekmark as the animation is not supported */
@supports (-ms-ime-align: auto) {
    .animated-dash path,
    .animated-dash polyline {
        animation: unset;
        stroke-dasharray: none;
        stroke-dashoffset: unset;
    }
}
  
/* Disables animation on IE to show the chekmark as the animation is not supported */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .animated-dash path,
    .animated-dash polyline {
        animation: unset;
        stroke-dasharray: none;
        stroke-dashoffset: unset;
    }
}


/* .animated-arrow-2
.animated-arrow-3,
.browser-line-1,
.browser-line-2,
.browser-line-3,
.browser-line-4,
.browser-arrow-long {
    opacity: 1;
} */

/* Start */
.animated-start {
    animation-delay: 0.5s;
}
.animated-arrow-1 {
    animation-delay: 1s;
}
.animated-arrow-1 path {
    animation-duration: 10s;
    animation-delay: 1.2s;
}
.animated-line-1 {
    animation-delay: 1.2s;
}
.animated-line-1 path {
    animation-duration: 20s;
    animation-delay: 1s;
}

/* Step 1: Loading page */
.animated-browser-1 {
    animation-delay: 1.5s;
}
.animated-box-1 {
    animation-delay: 1.7s;
}
.animated-box-2 {
    animation-delay: 2s;
}
.animated-box-3 {
    animation-delay: 2.4s;
}
.animated-box-4 {
    animation-delay: 2.7s;
}
.animated-box-5 {
    animation-delay: 3s;
}
.animated-box-6 {
    animation-delay: 3.4s;
}
.animated-box-7 {
    animation-delay: 3.7s;
}
.animated-60 {
    animation-delay: 3.5s;
}

/* Step 3: Long load */
.animated-line-2 {
    animation-delay: 4.1s;
}
.animated-line-2 path {
    animation-duration: 20s;
    animation-delay: 4.1s;
}
.animated-arrow-long {
    animation-delay: 4.1s;
}
.animated-arrow-long path {
    animation-duration: 20s;
    animation-delay: 4.2s;
}
.animated-120 {
    animation-delay: 6s;
}
.animated-arrow-2 {
    animation-delay: 4.3s;
}
.animated-arrow-2 path {
    animation-duration: 10s;
    animation-delay: 4.4s;
}
.animated-browser-2 {
    animation-delay: 5s;
}
.animated-checkmark {
    animation-delay: 9s;
    opacity: 1;
}
.animated-line-3 {
    animation-delay: 6.2s;
}
.animated-line-3 polyline {
    animation-duration: 30s;
    animation-delay: 6.3s;
}

/* Step 4: Still Loading */
.animated-browser-3 {
    animation-delay: 9.5s;
}
.animated-box-8 {
    animation-delay: 10s;
}
.animated-box-9 {
    animation-delay: 10.5s;
}
.animated-box-10 {
    animation-delay: 11s;
}
.animated-box-11 {
    animation-delay: 11.5s;
}
.animated-box-12 {
    animation-delay: 12s;
}
.animated-arrow-3 {
    animation-delay: 12.8s
}
.animated-arrow-3 path {
    animation-duration: 10s;
    animation-delay: 13s;
}
.animated-line-4 {
    animation-delay: 9.8s;
}
.animated-line-4 polyline {
    animation-duration: 30s;
    animation-delay: 10s;
}

/* Step 5: Finally Loaded */
.animated-browser-4 {
    animation-delay: 13.5s;
}
.animated-box-13 {
    animation-delay: 14s;
}
.animated-box-14 {
    animation-delay: 14.5s;
}
.animated-box-15 {
    animation-delay: 15s;
}
.animated-box-16 {
    animation-delay: 15.5s;
}
.animated-240 {
    animation-delay: 15.8s;
}
.animated-sad {
    opacity: 1;
    animation-delay: 16s;
}

@keyframes dash {
    from {
      stroke-dashoffset: 1000;
    }
    to {
      stroke-dashoffset: 0;
    }
}