@media all and (max-width: 1279px) {

    main {
        padding: 25px 20px;
    }

    .container {
        width: 100%;
    }
    header .header-top .user {
        width: auto;
    }
    header .logo {
        padding: 25px 120px 20px 20px;
    }

    header::after {
        display: none;
    }
    header .header-top .user {
        justify-content: start;
    }
    header .header-top .user div {
        padding-right: 15px;
    }

    header .header-bottom {
        margin-top: 24px;
        padding-left: 20px;
    }

    footer .footerbox .footer-info {
        padding-left: 60px;
        background-position: 20px 0;
        width: 40%;
    }

    footer .footerbox .footer-info a .text {
        width: 180px;
    }

    footer .footerbox .footer-info a .icon {
        width: auto;
    }

    footer .footerbox .footer-links {
        width: 30%;
    }
}

@media all and (max-width: 1000px) {
    footer .footerbox {
        justify-content: center;
        padding-bottom: 25px;
    }

    footer .footerbox .footer-info,
    footer .footerbox .footer-contact {
        width: 300px;
    }

    footer .footerbox .footer-links {
        width: 450px;
        margin-top: 25px;
        padding-right: 0;
        text-align: center;
    }

}

@media all and (max-width: 900px) {

#slideshow {
  display: none;
}

header nav div#nav_items {
    position: absolute;
    left: 0;
    top: 40px;
    width: 100%;
    z-index: 999;
    background-color: var(--clr-primary-header);
    padding-bottom: 20px;
}

header nav div.nav_items_close {
    display: none; 
}

header nav div.nav_items_open {
    display: block;
}

header nav div#nav_items div {
    margin-left: 15px;
    margin-top: 15px;
}

.hidden_if_mobile {
    display: none;
}
.visible_if_mobile {
    display: inline;
}

main .container .login_container {
    width: unset;
}

header {
    height: 20px;
    background-image: unset;
}
header nav {
    top: 0px;
}
header .header-top .user {
    display: none;
}

main .container .header_line {
    flex-direction: column;
}
.container .filter .searchinput {
    width: 100% !important;
}

main .container .mainform .side_filter {
    display: none;
}
main .container .hide_filter_button {
    display: none;
}

main .info-table .content .infobez,
main .artcle-table .content .artbez {
    position: relative;
    padding-left: 20px;
}

main .info-table .content .infobez i,
main .artcle-table .content .artbez i {
    display: initial;
    position: absolute;
    left: 5px;
    top: 7px;
    cursor: pointer;
}

main .info-table .content div span,
main .artcle-table .content div span {
    display: initial;
    font-weight: bold;
}

main .info-table .head .infobez,
main .info-table .content .infobez,
main .artcle-table .head .artbez,
main .artcle-table .content .artbez {
    min-width: 150px;
    flex: 3;
}
main .artcle-table .head .menge,
main .artcle-table .content .menge {
    min-width: 80px;
    flex: 1;
}
main .info-table .head .dokumente,
main .info-table .content .dokumente,
main .artcle-table .head .in_warenkorb,
main .artcle-table .content .in_warenkorb {
    min-width: 10px;
    flex: 1;
}

main .info-table .content .infofeld1,
main .info-table .content .infofeld2,
main .info-table .content .infofeld3,
main .info-table .content .infofeld4,
main .artcle-table .content .artinfo,
main .artcle-table .content .preis,
main .artcle-table .content .verfuegbar, 
main .artcle-table .content .positionswert {
    flex: 0 1 100%;
    text-align: left;
    order: 29;
    border-right: none;
    padding: 5px 10px;
}

main .container .filter .forms .searchinput {
    width: 100%;
    margin-bottom: 10px;
}

footer .footerbox .footer-info,
footer .footerbox .footer-contact,
footer .footerbox .footer-links {
    width: 100%;
    margin-right: 0;
    margin-left: 20px;
    text-align: left;
}

footer .footerbox .footer-info {
    padding-left: 40px;
    background-position: initial;
    margin-bottom: 20px;
}

footer .footerbox .footer-links a {
    padding-left: 0;
}

footer .footerbox .footer-links a:nth-child(2) {
    padding-left: 25px;
}

}

@media all and (max-width: 560px) {

    header .logo {
        padding: 15px 120px 15px 20px;
        height: auto;
    }

    header .header-bottom {
        width: 30%;
    }

}

@media all and (max-width: 450px) {

    header .header-bottom {
        width: 40%;
    }
}