.key-numbers {
                text-align: center;
                .key-number {
                    margin: 60px 40px 40px;
                    position: relative;
                    display: inline-block;
                    @include laptop {
                        margin: 0 25px;
                    }
                    @include mobile {
                        &:not(:last-child) {
                            margin-bottom: 60px;
                        }
                    }
                    .circle {
                        width: 160px;
                        height: 160px;
                        @include laptop {
                            width: 140px;
                            height: 140px;
                        }
                        .halfclip {
                            width: 50%;
                            height: 100%;
                            right: 0px;
                            position: absolute;
                            overflow: hidden;
                            transform-origin: left center;
                        }
                        .halfcircle {
                            box-sizing: border-box;
                            height: 100%;
                            right: 0px;
                            position: absolute;
                            border: solid 2px transparent;
                            border-top-color: $red;
                            border-left-color: $red;
                            border-radius: 50%;
                            &.clipped {
                                width: 200%;
                                transform: rotate(-45deg);
                            }
                            &.fixed {
                                width: 100%;
                                transform: rotate(135deg);
                                opacity: 0;
                            }
                        }
                    }
                    .number {
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        margin: auto;
                        line-height: 160px;
                        color: $red;
                        transform: scale(0);
                        @include transition(transform 0s);
                        @include laptop {
                            line-height: 140px;
                        }
                        &.small {
                            font-size: 3.8rem;
                        }
                        &.medium {
                            font-size: 5.8rem;
                        }
                        &.big {
                            font-size: 8.8rem;
                        }
                    }
                    .index {
                        position: absolute;
                        top: 10px;
                        right: 0;
                        height: 40px;
                        line-height: 40px;
                        color: $red;
                        background-color: #fff;
                        border-radius: 50%;
                        transform: scale(0);
                        @include transition(transform 0s);
                        &.small {
                            font-size: 2rem;
                            right: -25px;
                        }
                        &.medium {
                            font-size: 2.6rem;
                            right: -15px;
                        }
                        &.big {
                            font-size: 3.2rem;
                            right: -5px;
                        }
                    }
                    .caption {
                        position: absolute;
                        width: 100%;
                        top: 110%;
                        font-size: 1.7rem;
                        color: $red;
                        opacity: 0;
                        @include transition(opacity 0s);
                    }
                    &.animated {
                        .circle {
                            .halfclip {
                                animation: cliprotate 1s 1;
                                transform: rotate(180deg);
                            }
                            .halfcircle {
                                &.clipped {
                                    transform: rotate(135deg);
                                    animation: rotate .5s linear 2;
                                }
                                &.fixed {
                                    opacity: 1;
                                    animation: showfixed 1s 1;
                                }
                            }
                        }
                        .number {
                            transform: scale(1);
                            @include transition(transform 1s 1s);
                        }
                        .caption {
                            opacity: 1;
                            @include transition(opacity 1s 1s);
                        }
                        .index {
                            transform: scale(1);
                            @include transition(transform 1s 1s);
                        }
                    }
                    @keyframes cliprotate {
                        0% {transform: rotate(0deg);}
                        50% {transform: rotate(0deg);}
                        50.01% {transform: rotate(180deg);}
                        100% {transform: rotate(180deg);}
                    }
                    @keyframes rotate {
                        0% {transform: rotate(-45deg);}
                        100% {transform: rotate(135deg);}
                    }
                    @keyframes showfixed {
                        0% {opacity: 0;}
                        49.99% {opacity: 0;}
                        50% {opacity: 1;}
                        100% {opacity: 1;}
                    }
                }
            }