._1pi0n0x0 {
    z-index: 0;
    color: var(--_1krm5z726);
    transition: opacity .2s, background-color .2s
}

._1pi0n0x1 {
    opacity: 0
}

._1pi0n0x2 {
    opacity: 1
}

._1pi0n0x3 {
    background-color: transparent
}

._1pi0n0x4 {
    background-color: var(--_1krm5z72b)
}

._1pi0n0x5 {
    width: 100%
}

._1pi0n0x6 {
    display: flex;
    align-items: center
}

._1pi0n0x7,
._1pi0n0x7:active,
._1pi0n0x7:focus,
._1pi0n0x7:hover {
    color: var(--_1krm5z726);
    line-height: 0
}

._1pi0n0x8 {
    width: 6.875rem;
    height: 1.25rem
}

._1pi0n0x9 {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--_194tgwh97)
}

._1pi0n0xa {
    display: none
}

._1pi0n0xb {
    display: flex;
    height: 3.5rem;
    align-items: center
}

._1pi0n0xc {
    width: var(--_194tgwh97);
    height: var(--_194tgwh97)
}

._1pi0n0xd {
    display: none
}

._1pi0n0xe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: var(--_1krm5z726);
    background: var(--_1krm5z72b)
}

@media screen and (min-width:0px) {
    ._1pi0n0x0 {
        height: 5.5rem;
        padding-top: var(--_194tgwh94);
        padding-bottom: var(--_194tgwh94)
    }
}

@media screen and (min-width:640px) {
    ._1pi0n0x0 {
        height: 6.5rem;
        padding-top: var(--_194tgwh96);
        padding-bottom: var(--_194tgwh96)
    }
    ._1pi0n0x8 {
        width: 8.25rem;
        height: 1.5rem
    }
    ._1pi0n0xa {
        height: 3.5rem;
        flex: 1 1;
        gap: var(--_194tgwh97);
        flex-wrap: wrap;
        justify-content: flex-end;
        overflow: hidden
    }
    ._1pi0n0xa,
    ._1pi0n0xd {
        display: flex
    }
}