body {
    font-family: sans-serif;
    background: #e6e6e6;
    margin: 0
}

pre {
    margin: 0
}

a {
    color: #06c;
    font-weight: bold;
    text-decoration: none;
    transition: .25s
}

a:hover,
a:focus {
    color: #106
}

.example::before,
.example::after {
    content: " ";
    display: table
}

.example::after {
    clear: both
}

.container {
    max-width: 60rem;
    margin: auto
}

.site-footer {
    background: #fff;
    padding: 25px;
    border-radius: 3px 3px 0 0
}

.check {
    display: inline-block;
    margin-right: .5em;
    color: #14b850;
    animation: check .1s .7s backwards
}

@keyframes check {
    from {
        opacity: 0;
        transform: scale(0)
    }

    80% {
        opacity: 1;
        transform: scale(1.3)
    }

    to {
        transform: none
    }
}

.intro-heading {
    animation: bounce-in .4s ease-in-out
}

@keyframes bounce-in {
    0% {
        transform: translateY(-2.7em);
        animation-timing-function: ease-out
    }

    50% {
        transform: translateY(10px) scaleY(1.4)
    }

    75% {
        transform: translateY(-6px) scaleY(1.2)
    }

    90% {
        transform: translateY(2.5px)
    }

    100% {
        transform: none
    }
}

.intro {
    color: #4d4d4d
}

.intro .example {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    min-height: calc(300px + 25px * 2)
}

.intro .progress {
    padding: 20px 50px 0 20px;
    width: 300px
}

.intro .progress>svg {
    width: 100%
}

.intro .progress>svg * {
    transform-box: fill-box;
    transform-origin: center
}

.intro .progress .circle-progress-value {
    stroke-width: 6px;
    stroke: #ffa600
}

.intro .progress .circle-progress-circle {
    stroke-width: 6px;
    stroke: #ffe4b3
}

.intro .progress .circle-progress-text {
    fill: #ffa600
}

.intro .progress .circle-progress-text-value {
    fill: inherit
}

.intro .progress[data-style="1"] .circle-progress-value {
    transition: .4s .3s;
    stroke-linecap: round;
    stroke-width: 12;
    stroke: #ed5aed
}

.intro .progress[data-style="1"] .circle-progress-circle {
    transition: .4s;
    stroke: #f7baf7;
    stroke-width: 3
}

.intro .progress[data-style="1"] .circle-progress-text {
    fill: #4d4d4d;
    font-size: 22px;
    transition: .4s
}

.intro .progress[data-style="2"] .circle-progress-value {
    animation: .4s dots both;
    stroke-width: 12;
    stroke-linecap: round
}

@keyframes dots {
    from {
        stroke-dasharray: 14 2;
        stroke: #ed5aed
    }

    to {
        stroke-dasharray: 0 17.7;
        stroke: #ff0073
    }
}

.intro .progress[data-style="2"] .circle-progress-circle {
    transition: .4s .4s;
    stroke-width: 0;
    stroke: #d9d9d9
}

.intro .progress[data-style="2"] .circle-progress-text {
    fill: #4d4d4d;
    font-size: 22px;
    transform: scale(0);
    opacity: 0;
    transition: .4s
}

.intro .progress[data-style="3"] .circle-progress-value {
    animation: grow-value .5s both;
    stroke-width: 12;
    stroke-linecap: round;
    stroke: #ff0073
}

@keyframes grow-value {
    0% {
        stroke-dasharray: 0 17.7
    }

    99.99% {
        stroke-dasharray: 14 2
    }

    100% {
        stroke-dasharray: none
    }
}

.intro .progress[data-style="3"] .circle-progress-circle {
    stroke-width: 0;
    stroke: #d9d9d9
}

.intro .progress[data-style="3"] .circle-progress-text {
    fill: #ff0073;
    font-size: 16px;
    transition: transform .4s
}

.intro .progress[data-style="4"] .circle-progress-value {
    animation: value-4 .5s both;
    stroke-width: 12;
    stroke-linecap: round;
    stroke: #ff0073
}

@keyframes value-4 {
    30% {
        stroke-width: 12
    }

    80% {
        stroke-width: 2
    }

    100% {
        stroke: #fff;
        stroke-width: 4
    }
}

.intro .progress[data-style="4"] .circle-progress-circle {
    animation: grow-circle .5s both;
    stroke-width: 0;
    stroke: #d9d9d9
}

@keyframes grow-circle {
    0% {
        stroke-width: 0
    }

    37% {
        stroke-width: 6
    }

    100% {
        stroke-width: 6
    }
}

.intro .progress[data-style="4"] .circle-progress-text {
    fill: #d9d9d9;
    font-size: 16px;
    transition: transform .4s
}

.intro .progress[data-style="5"] .circle-progress-value {
    animation: .4s grow-xxl-value both
}

.intro .progress[data-style="5"] .circle-progress-circle {
    animation: .4s grow-xxl-circle both;
    stroke: #d9d9d9
}

@keyframes grow-xxl-value {
    from {
        stroke: #fff
    }

    to {
        stroke-width: 50;
        stroke: #39f;
        stroke-linecap: butt
    }
}

@keyframes grow-xxl-circle {
    from {
        stroke-width: 6
    }

    to {
        stroke-width: 50
    }
}

.intro .progress[data-style="5"] .circle-progress-text {
    fill: #fff;
    transition: .4s;
    transform: translate(23.7px, 7.7px)
}

.intro .progress[data-style="5"] .circle-progress-text-max {
    display: none
}

.intro .progress[data-style="5"] .circle-progress-text-value {
    font-size: 16px
}

.intro:not([data-demo]) .progress {
    animation: check .2s .6s backwards
}

.intro:not([data-demo]) .quality {
    visibility: hidden;
    animation: none
}

.intro[data-demo=responsive] .progress {
    animation: demo-responsive 1.6s .7s
}

@keyframes demo-responsive {
    0% {
        transform: none
    }

    12% {
        transform: scale(0.3)
    }

    40% {
        transform: scale(0.3)
    }

    55% {
        transform: scale(1.3)
    }

    92% {
        transform: scale(1.3)
    }

    100% {
        transform: none
    }
}

.intro[data-demo=responsive] .quality.responsive~.quality {
    visibility: hidden;
    animation: none
}

.intro[data-demo=animated] .quality.animated~.quality {
    visibility: hidden;
    animation: none
}

.intro[data-demo=stylable] .quality.stylable~.quality {
    visibility: hidden;
    animation: none
}

.intro[data-demo=finished] .quality-last,
.intro[data-demo=finished] .quality-lastest,
.intro[data-demo=finished] .intro-footer {
    visibility: visible;
    opacity: 1
}

.intro-text {
    display: flex;
    flex-direction: column
}

.intro-text-body {
    flex: auto
}

.qualities {
    list-style: none
}

.quality {
    opacity: 0;
    font-weight: bold;
    animation: pop-in .4s cubic-bezier(0.74, 0.92, 0.71, 1) forwards;
    transform-origin: left
}

.quality.last {
    visibility: hidden;
    animation: none
}

.quality-inner {
    animation: skidding .4s cubic-bezier(0.74, 0.92, 0.71, 1) forwards;
    transform-origin: bottom left
}

@keyframes pop-in {
    0% {
        transform: translateX(100%)
    }

    80% {
        transform: translateX(-10px);
        opacity: 1
    }

    92% {
        transform: none;
        opacity: 1
    }

    100% {
        transform: none;
        opacity: 1
    }
}

@keyframes skidding {
    0% {
        transform: none
    }

    50% {
        transform: none;
        animation-timing-function: ease-in
    }

    80% {
        transform: skewX(30deg) scaleX(0.9);
        animation-timing-function: ease-in
    }

    92% {
        transform: none
    }
}

.quality-last,
.quality-lastest,
.intro-footer {
    visibility: hidden;
    opacity: 0;
    transition: .3s
}

.intro-footer,
.quality-lastest {
    transition: 3s 1.5s ease-out
}

.intro-footer {
    font-size: .9rem
}

.about {
    padding: 25px;
    background: #383838;
    color: #ebebeb;
    border-radius: 0 0 3px 3px
}

.about a {
    color: #39f
}

.about a:hover,
.about a:focus {
    color: #9e9efa
}

.about h1 {
    text-align: center
}

.example {
    clear: both;
    margin: 30px 0;
    padding: 10px 5px;
    background: #fff;
    border-radius: 3px
}

@media screen and (min-width: 50rem) {
    .example {
        padding: 25px
    }
}

.example-figure {
    width: -moz-min-content;
    width: min-content;
    margin: auto
}

@media screen and (min-width: 50rem) {
    .example-figure {
        float: left;
        padding-top: 2.4rem;
        padding-right: 80px
    }
}

[class^=progress]>svg,
[class*=" progress"]>svg {
    width: 300px;
    height: 300px
}

.controls {
    display: flex;
    justify-content: space-between;
    margin-top: 20px
}

.controls input {
    display: block;
    width: 4em;
    padding: .3em .6em;
    text-align: left;
    background: #d9d9d9;
    border: 0;
    font-size: .85em
}

.controls input:focus {
    background: #b3b3b3;
    outline: none
}

.controls label {
    font-weight: bold;
    color: #666
}

.controls label:nth-child(2) {
    text-align: center
}

.controls label:last-child {
    text-align: right
}

.example h3 {
    font-size: 1.1rem;
    line-height: 1.4rem;
    margin: 1rem 0 0;
    color: #e6491a
}

.slash {
    color: gray
}

.select-variant {
    text-decoration: none;
    color: inherit
}

.select-variant[data-variant=jquery] {
    color: gray
}

.variant-jquery {
    display: none
}

body.show-variant-jquery .select-variant[data-variant=vanilla] {
    color: gray
}

body.show-variant-jquery .select-variant[data-variant=jquery] {
    color: inherit
}

body.show-variant-jquery .variant-jquery {
    display: block
}

body.show-variant-jquery .variant-vanilla {
    display: none
}

.code {
    background: #383838;
    -moz-tab-size: 4;
    tab-size: 4
}

.progress-1 .circle-progress-value {
    stroke-width: 6px;
    stroke: #ffa600
}

.progress-1 .circle-progress-circle {
    stroke-width: 6px;
    stroke: #ffe4b3
}

.progress-1 .circle-progress-text {
    fill: #ffa600
}

.progress-2 .circle-progress-value {
    stroke-width: 6px;
    stroke: #eb47b4;
    stroke-dasharray: 4 1
}

.progress-2 .circle-progress-circle {
    stroke-width: 6px;
    stroke: #eee
}

.progress-2 .circle-progress-text {
    font-weight: bold;
    fill: #18d8d8
}

.progress-3 .circle-progress-value {
    stroke-width: 6px;
    stroke: #a60df2;
    stroke-linecap: round
}

.progress-3 .circle-progress-circle {
    stroke-width: 2px
}

.progress-4 .circle-progress-value {
    stroke-width: 50px;
    stroke: #44d5a4
}

.progress-4 .circle-progress-circle {
    stroke-width: 50px;
    stroke: #999
}

.progress-4 .circle-progress-text {
    fill: #fff
}

.progress-5 .circle-progress-value {
    stroke-width: 6px;
    stroke: #fff;
    stroke-linecap: round
}

.progress-5 .circle-progress-circle {
    stroke-width: 8px;
    stroke: #888
}

.progress-5 .circle-progress-text {
    fill: #888
}

.progress-6 .circle-progress-value {
    stroke-width: 50px;
    stroke: #9cf76e
}

.progress-6 .circle-progress-circle {
    stroke-width: 40px;
    stroke: #94a88a;
    fill: #94a88a
}

.progress-6 .circle-progress-text {
    fill: #fff;
    font-weight: bold
}

.progress-7 .circle-progress-value {
    stroke-width: 11px;
    stroke: aqua;
    stroke-dasharray: 0 23.3;
    stroke-linecap: round
}

.progress-7[aria-valuenow="0"] .circle-progress-value {
    display: none
}

.progress-7 .circle-progress-circle {
    stroke: transparent
}

.progress-7 .circle-progress-text {
    font-family: "Varela Round", "Gotham rounded", sans-serif;
    font-size: 13px;
    font-weight: bold;
    fill: #f0f
}

.progress-9 .circle-progress-value {
    stroke-width: 12px;
    stroke: #0073e6
}

.progress-9 .circle-progress-circle {
    stroke: #fff;
    stroke-width: 22px;
    fill: #666
}

.progress-9 .circle-progress-text {
    font-family: "Georgia", serif;
    font-size: 13px;
    fill: #fff
}

.progress-10 .circle-progress-value {
    stroke-width: 2px;
    stroke: #7fffd4
}

.progress-10 .circle-progress-circle {
    stroke: #ddd;
    stroke-width: 2px
}

.progress-10 .circle-progress-text {
    font-family: "Georgia", serif;
    font-size: 13px
}

.progress-11 .circle-progress-value {
    stroke-width: 6px;
    stroke: #7f3;
    stroke-dasharray: .6 3
}

.progress-11 .circle-progress-circle {
    stroke-width: 6px;
    stroke: #ddd;
    stroke-dasharray: .6 3;
    stroke-dashoffset: 1.6
}

.progress-11 .circle-progress-text {
    font-family: "Dosis", "Varela Round", "Gotham Rounded Light", sans-serif;
    fill: #6de92f;
    font-size: 26px
}

.progress-12 .circle-progress-value {
    stroke-width: 12px;
    stroke: #8b008b
}

.progress-12 .circle-progress-circle {
    stroke: #fff;
    stroke-width: 11px;
    fill: #666
}

.progress-12 .circle-progress-text {
    font-family: "Georgia", serif;
    font-size: 13px;
    fill: #fff
}

.progress-13 .circle-progress-value {
    stroke-width: 25px;
    stroke: #0073e6;
    stroke-dasharray: 58 1
}

.progress-13 .circle-progress-circle {
    stroke: #b3d9ff;
    stroke-width: 25px;
    fill: #b3d9ff
}

.progress-13 .circle-progress-text {
    font-family: "Montserrat", "Gotham", sans-serif;
    font-size: 16px;
    fill: #0073e6
}

/*# sourceMappingURL=style.css.map */