@charset "utf-8";

.block_rates_quad {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    padding: 10px 0;
    margin: 0 0 40px 0;
}
.block_rates_quad_single {
    position: relative;
}
.block_rates_quad_single_circle {
    padding: 100% 0 0 0;
    position: relative;
}

.block_rates_quad_single_circle:after {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    border: 20px solid #eee;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
}
.block_rates_quad_single:nth-child(4n + 1) .block_rates_quad_single_circle:after {
    border-color: #cfe2e2;
}
.block_rates_quad_single:nth-child(4n + 2) .block_rates_quad_single_circle:after {
    border-color: #f8d0ad;
}
.block_rates_quad_single:nth-child(4n + 3) .block_rates_quad_single_circle:after {
    border-color: #ffecab;
}
.block_rates_quad_single:nth-child(4n + 4) .block_rates_quad_single_circle:after {
    border-color: #b2b6c7;
}

.thepage .block_rates_quad_single h3 {
    position: absolute;
    margin: 0;
    top: 50%;
    left: 50%;
    width: 75%;
    transform: translate(-50%, -50%);
    text-align: center;
    display: flex;
    flex-direction: column;
    text-align: center;
    user-select: none;
}
.block_rates_product_title {
    font-size: 0.8em;
    text-transform: uppercase;
    color: #666;
    margin: 0 0 7px 0;
    font-weight: 500;
}
.block_rates_product_qualifier {
    font-size: 0.6em;
    color: var(--blue);
    margin: 0 0 5px 0;
    font-weight: 500;
}
.block_rates_product_rate {
    font-size: 1.5em;
    color: var(--blue);
    font-weight: 700;
}
.block_rates_product_rate sup {
    font-size: 14px;
    top: -16px;
}
.block_rates_quad_single .button_wrap {
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 10px);
    position: absolute;
    z-index: 500;
}

@media (max-width: 1400px) {
    .block_rates_quad {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 1100px) {
    .block_rates_quad_single.has_button {
        margin-bottom: 15px;
    }
    .block_rates_quad {
        gap: 3vw 4vw;
        padding: 10px 0vw;
        grid-template-columns: repeat(1, 1fr);
    }
    .block_rates_product_rate {
        font-size: 1em;
    }
    .block_rates_product_rate sup {
        top: -0.8em;
    }
    .thepage .block_rates_quad_single h3 {
        z-index: 2;
        width: 100%;
        padding: 40px;
        position: relative;
        top: 0;
        left: 0;
        transform: translate(0, 0);
    }
    .block_rates_quad_single:nth-child(4) .block_rates_quad_single_circle::after {
        border-color: #d2d5e2;
    }
    .block_rates_quad_single_circle {
        padding: 0;
    }
    .block_rates_quad_single_circle::after {
        opacity: 0.4;
        z-index: 0;
        border-radius: 200px;
    }
    .block_rates_quad_single .button {
        padding: 10px 15px;
    }
}
@media (max-width: 1000px) {
    .block_rates_quad_single h3 {
        width: 78%;
    }
    .block_rates_product_rate {
        font-size: 1.2em;
    }
}