body {
    background-color: #f1f1f1;
    padding-top: 0px;
}

.purple-gradient {
    background: linear-gradient(40deg, #ff6ec4, #7873f5);
}

.young-passion-gradient {
    background: linear-gradient(40deg, #b12a5b, #ff8177);
}

.title h1 {
    text-align: left;
    color: #202020;
}

.hero {
    color: white;
    padding: 15px;
    h3 {
        color: white;
    }
}

.description {
    margin-top: 15px;
    p {
        font-weight: 700;
    }
}

.simple-examples {
    @extend .description;
    .countdown {
        display: none;
        &.simple-bar {
            background-color: #af0b0b;
            margin: 20px;
            padding: 3px 21px;
            border-radius: 10px;
            text-align: center;
            font-weight: 700;
            color: white;
        }
        &.fix {
            font-size: 14px;
        }
    }
}

.countdown {
    &.show {
        text-align: center;
        background-color: #e4e4e4;
        margin: 22px;
        padding: 20px;
        border-radius: 30px;
        h2 {
            font-size: 60px;
        }
        .running {
            display: flex;
            flex-flow: wrap;
            justify-content: center;
            timer {
                font-size: 55px;
                font-weight: 600;
                display: flex;
                line-height: 1;
                color: #8c0734;
                .days,
                .hours,
                .minutes,
                .seconds {
                    width: 70px;
                    text-align: left;
                    margin: 0 7px;
                }
                @media (max-width: 480px) {
                    font-size: 40px;
                    .days,
                    .hours,
                    .minutes,
                    .seconds {
                        width: 49px;
                    }
                }
            }
            .labels {
                display: flex;
                //width: 296px;
                font-size: 14px;
                span {
                    width: 97px;
                    text-align: center;
                    margin: 0px 2px;
                }
                @media (max-width: 480px) {
                    span {
                        width: 69px;
                    }
                }
            }
            .text {
                font-size: 20px;
                margin-top: 12px;
                font-weight: 600;
            }
            button {
                border: none;
                background-color: black;
                color: white;
                border-radius: 25px;
                padding: 10px 20px;
                margin: 10px;
            }
            .break {
                flex-basis: 100%;
                height: 0;
            }
        }
        .ended {
            display: none;
            flex-flow: wrap;
            justify-content: center;
            .text {
                font-size: 20px;
            }
            button {
                border: none;
                background-color: #5a0000;
                color: white;
                border-radius: 25px;
                padding: 10px 20px;
                margin: 10px;
            }
            .break {
                flex-basis: 100%;
                height: 0;
            }
        }
    }
    &.hero_count {
        @extend .show;
        background-color: rgb(109, 3, 3);
        margin: 0 10px;
        h2 {
            font-size: 40px;
            color: #b3b3b3;
            font-size: 33px;
        }
        .running {
            timer {
                color: #e2e2e2;
            }
            button {
                background-color: #af0b0b;
                a {
                    color: white;
                }
            }
            .labels {
                span {
                    width: 95px;
                    margin: 0px 3px 0px 0px;
                    @media (max-width: 480px) {
                        width: 69px;
                    }
                }
            }
        }
    }
}