/**
 * Hero badge
 *
 * Pôvodne WPCode snippet #507 (STYLE).
 */

.asp-badge-chain{
    width:100% !important;
    display:block !important;
    background:transparent !important;
    padding:18px 0 28px !important;
    margin:0 auto !important;
    overflow:visible !important;
    position:relative !important;
    z-index:2 !important;
}

.asp-badge-chain__inner{
    width:100% !important;
    max-width:100% !important;
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    align-items:center !important;
    gap:18px !important;
    margin:0 auto !important;
    padding:0 12px !important;
    overflow:visible !important;
}

.asp-badge-chain__item{
    position:relative !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:64px !important;
    padding:16px 28px !important;
    border-radius:999px !important;
    color:#fff !important;
    font-size: 28px !important;
    font-weight:600 !important;
    line-height:1 !important;
    letter-spacing:-0.02em !important;
    white-space:nowrap !important;
    text-align:center !important;
    text-decoration:none !important;
    overflow:visible !important;
    transform-origin:center center !important;
    transition:
        transform .3s cubic-bezier(.22,1,.36,1),
        box-shadow .3s cubic-bezier(.22,1,.36,1),
        filter .3s cubic-bezier(.22,1,.36,1) !important;
    box-shadow:
        0 12px 34px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.12) !important;
    z-index:1 !important;
}

.asp-badge-chain__item--1{
    background:#ff3600 !important;
    transform:rotate(-6deg) !important;
}

.asp-badge-chain__item--2{
    background:#136c40 !important;
    transform:rotate(4deg) !important;
}

.asp-badge-chain__item--3{
    background:#ffbccb !important;
    color:#ffffff !important;
    transform:rotate(-3deg) !important;
}

.asp-badge-chain__item--4{
    background:#13496c !important;
    transform:rotate(5deg) !important;
}

.asp-badge-chain__item::before{
    content:"" !important;
    position:absolute !important;
    inset:1px !important;
    border-radius:inherit !important;
    background:linear-gradient(
        180deg,
        rgba(255,255,255,.16) 0%,
        rgba(255,255,255,.06) 38%,
        rgba(255,255,255,0) 100%
    ) !important;
    pointer-events:none !important;
    z-index:0 !important;
}

.asp-badge-chain__shine{
    position:absolute !important;
    top:-18% !important;
    left:-20% !important;
    width:42% !important;
    height:140% !important;
    background:rgba(255,255,255,.16) !important;
    filter:blur(14px) !important;
    transform:rotate(18deg) !important;
    pointer-events:none !important;
    z-index:0 !important;
    transition:left .35s cubic-bezier(.22,1,.36,1), opacity .3s ease, transform .35s cubic-bezier(.22,1,.36,1) !important;
    opacity:.65 !important;
}

.asp-badge-chain__label{
    position:relative !important;
    z-index:1 !important;
    display:inline-block !important;
    color:inherit !important;
    font-size:inherit !important;
    font-weight:inherit !important;
    line-height:inherit !important;
}

.asp-badge-chain__item:hover{
    transform:translateY(-6px) scale(1.06) rotate(0deg) !important;
    box-shadow:
        0 20px 44px rgba(0,0,0,.24),
        0 0 24px rgba(255,255,255,.05),
        inset 0 1px 0 rgba(255,255,255,.12) !important;
    filter:saturate(1.08) brightness(1.03) !important;
    z-index:3 !important;
}

.asp-badge-chain__item:hover .asp-badge-chain__shine{
    left:66% !important;
    transform:rotate(18deg) scale(1.05) !important;
    opacity:.8 !important;
}

.asp-badge-chain__item:active{
    transform:translateY(-2px) scale(1.02) rotate(0deg) !important;
}

@media (max-width: 991px){
    .asp-badge-chain{
        padding:16px 0 24px !important;
    }

    .asp-badge-chain__inner{
        gap:14px !important;
    }

    .asp-badge-chain__item{
        min-height:58px !important;
        padding:14px 24px !important;
        font-size:15px !important;
    }
}

@media (max-width: 767px){
    .asp-badge-chain{
        padding:14px 0 20px !important;
    }

    .asp-badge-chain__inner{
        gap:12px !important;
        justify-content:center !important;
    }

    .asp-badge-chain__item{
        min-height:52px !important;
        padding:12px 20px !important;
        font-size:10px !important;
    }
}

@media (max-width: 520px){
    .asp-badge-chain__inner{
        gap:10px !important;
        padding:0 8px !important;
    }

    .asp-badge-chain__item{
        min-height:48px !important;
        padding:11px 16px !important;
        font-size:13px !important;
    }
}