/*  NAVBAR  */

.mod-nb {
    position: absolute;
    height: 3.3rem;
    width: 16.875rem;
    top: 5rem;
    left: calc(50% - 8.4375rem);
    border-radius: 2rem;
    z-index: 1;
}

.mod-nb.no-cam .btt-cam,
.mod-nb.no-cam .btt-nb-dummy {
    display: none;
}

.btt-nb-dummy {
    display: none;
    vertical-align: top;
    background-color: var(--az-color);
    float: left;
}

.mod-nb.openFav .mnb-favDropMenu {
    display: block;
}

.mnb-favDropMenu .btt-texfav {
    margin-top: 2.625rem;
}

.mnb-favDropMenu {
    display: none;
    position: absolute;
    height: 8.9375rem;
    width: 100%;
    border-radius: 0rem 0rem 1.5rem 1.5rem;
    background-color: #fff;
    top: 1.625rem;
    box-shadow: 0rem 0.1875rem 0.375rem #00000029;
}

.mod-nb.openShare .mnb-shareDropMenu {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

.mnb-shareDropMenu {
    display: none;
    position: absolute;
    height: 13.375rem;
    width: 100%;
    border-radius: 0rem 0rem 1.5rem 1.5rem;
    background-color: #fff;
    top: 1.625rem;
    box-shadow: 0rem 0.1875rem 0.375rem #00000029;
}

.ndsh-btt.btt-print,
.ndsh-btt.btt-save {
    cursor: pointer;
}

.ndsh-btt.btt-print:hover,
.ndsh-btt.btt-save:hover {
    color: var(--az-color);
}

.mnbsh-btt {
    height: 2rem;
    width: 2rem;
    margin: 0 0.875rem;
    cursor: pointer;
    text-align: center;
    line-height: 2rem;
    color: #fff;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.ndsh-btt.btt-save {
    margin-top: 1.5rem;
}

.ndsh-hold {
    height: 5.25rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.mnb-shareDropMenu {
    display: none;
}

.mnb-dbtt.txt:hover {
    color: var(--az-color);
}

.mnb-dbtt.txt {
    height: 2.5rem;
    text-align: center;
    font: normal normal normal 1.125rem/2.5rem Verdana;
    letter-spacing: 0rem;
    color: #505050;
    cursor: pointer;
    display: flex;
    justify-content: center;
}

.mnb-dbtt.txt .count {
    color: var(--az-color);
    font-size: 0.75rem;
    line-height: 2rem;
    width: 0;
}

.mnb-wrap {
    position: absolute;
    height: 3.3rem;
    width: 100%;
    border-radius: 2rem;
    overflow: hidden;
    box-shadow: 0rem 0.1875rem 0.375rem #00000040;
    top: 0;
}

.btt-cam,
.btt-tex {
    display: none;
}

.mod-nb .btt {
    width: 20%;
    height: 100%;
    vertical-align: top;
    background-color: var(--az-color);
    float: left;
}

.mod-nb .btt.act,
.mod-nb .btt.blink {
    background-color: #fff;
}

.mod-nb .btt {
    transition: background-color 0.3s;
}

.mod-nb .btt .ico {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    background-size: 46%;
    background-repeat: no-repeat;
    background-position: center;
}

.mod-nb .btt.act .ico {
    background-size: 32%;
}

.mod-nb .nbb svg {
    width: 46%;
}

.btt-cam {
    position: absolute;
    bottom: 0rem;
    left: 42%;
    box-shadow: 0rem 0rem 0.375rem #00000040;
}

.btt-tex .ico {
    background-size: 46%;
    background-repeat: no-repeat;
    background-position: center;
}


@media (min-width: 992px) {
    /* DESKTOP ONLY */

    .btt-wa {
        display: none;
    }
}

@media (min-width: 768px) {
    /* DESKTOP AND TABLET */
}

@media (min-width: 768px) and (max-width: 991px) and (min-height: 481px) {
    /* TABLET ONLY */

    .btt-wa {
        display: none;
    }

}

@media (orientation: portrait) and (max-width: 768px) and (max-height: 1280px) {
    /* PHONE HOCH */

    .btt-nb-dummy {
        width: 16%;
        height: 100%;
        display: inline-block;
    }

    .mod-nb {
        width: 100%;
        height: 3rem;
        bottom: 0rem;
        top: inherit;
        left: initial;
        border-radius: 0rem;
        overflow: initial;
        z-index: 24;
    }

    .mnb-wrap {
        width: 100%;
        overflow: initial;
        height: 3rem;
        border-radius: 0rem;
    }

    .mnb-favDropMenu {
        position: absolute;
        height: 7.25rem;
        width: 100%;
        border-radius: 0;
        background-color: #fff;
        top: initial;
        box-shadow: none;
        bottom: 3rem;
    }

    .mnb-favDropMenu .btt-texfav {
        margin-top: 1rem;
    }

    .mod-nb .btt {
        background-color: var(--az-color);
        width: 14%;
        height: 100%;
        display: inline-block;
        vertical-align: top;
        float: left;
    }

    .mod-nb.no-cam .btt {
        width: calc(100%/6);
    }

    .mod-nb .btt.nbbc {
        width: 16%;
        background-color: #fff;
        height: 4.125rem;
        border-radius: 1rem 1rem 0rem 0rem;
    }

    .mod-nb .btt.nbbc svg {
        width: 48%;
    }

    .mod-nb .btt .ico {
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;

        background-size: 46%;
        background-repeat: no-repeat;
        background-position: center;
    }

    .mod-nb .nbb svg {
        width: 46%;
    }

    /*
    .btt-wa {
        display: none;
    }*/

    .btt-cam {
        position: absolute;
        bottom: 0rem;
        left: 42%;
        box-shadow: 0rem 0rem 0.375rem #00000040;
    }

    .mod-nb .btt.act .ico {
        background-size: 24%;
    }

    .btt-arf {
        right: 0.625rem;
        top: 4rem;
    }

    .mnb-shareDropMenu {
        width: 100%;
        height: 11.6875rem;
        top: initial;
        bottom: 3rem;
        border-radius: 0rem;
    }

}

@media (orientation: landscape) and (max-width: 915px) and (max-height: 480px) {
    /* PHONE QUER */

    .btt-nb-dummy {
        width: 100%;
        height: 16%;
        display: block;
    }

    .mod-nb {
        width: 3.375rem;
        height: 100%;
        bottom: 0rem;
        top: 0rem;
        left: initial;
        right: 0rem;
        border-radius: 0rem;
        overflow: initial;
        z-index: 24;
    }

    .mnb-wrap {
        width: 3.375rem;
        height: 100%;
        bottom: 0rem;
        top: 0rem;
        left: initial;
        right: 0rem;
        border-radius: 0rem;
        overflow: initial;
        z-index: 24;
    }

    .mnb-favDropMenu {
        position: absolute;
        height: 7.25rem;
        width: 16.5rem;
        border-radius: 0;
        background-color: #fff;
        top: initial;
        box-shadow: 0rem 0.1875rem 0.375rem #00000029;
        right: 3.375rem;
        bottom: 28%;
    }

    .mnb-favDropMenu .btt-texfav {
        margin-top: 1rem;
    }

    .mod-nb .btt {
        background-color: var(--az-color);
        width: 100%;
        height: 14%;
        display: block;

    }

    .mod-nb.no-cam .btt {
        height: calc(100%/6);
    }

    .mod-nb .btt.act,
    .mod-nb .btt.blink {
        background-color: #fff;
    }

    .mod-nb .btt.nbbc {
        width: 4.125rem;
        background-color: #fff;
        border-radius: 1rem 0rem 0rem 1rem;
        height: 16%;
    }

    .mod-nb .btt.nbbc svg {
        width: 48%;
    }

    .mod-nb .btt .ico {
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        background-size: 46%;
        background-repeat: no-repeat;
        background-position: center;
    }

    .mod-nb .nbb svg {
        width: 46%;
    }

    /*
    .btt-wa {
        display: none;
    }*/

    .btt-cam {
        position: absolute;
        top: 42%;
        left: initial;
        box-shadow: 0rem 0rem 0.375rem #00000040;
        right: 0;
    }

    .btt-fav {
        margin-left: 0;
    }

    .mod-nb .btt.act .ico {
        background-size: 24%;
    }

    #comp_bar .comp-btt {
        top: 4rem;
    }

    .btt-arf {
        left: 0.5rem;
        right: initial;
        top: 4rem;
    }

    .mnb-shareDropMenu {
        width: 18.75rem;
        height: 11.6875rem;
        top: initial;
        bottom: 0rem;
        right: 3.375rem;
        border-radius: 0rem;
    }
}