/* Mappenmeister Relaunch 2018 */
/* Content: */
/* basics */
/* service bar */
/* navigation */
/* offcanvas */
/* breadcrumb */
/* footer */
/* slider */
/* intro / topseller */
/* trade-groups */
/* parallax */
/* shopinfos */
/* ourproducts */
/* kontakt */
/* product-detail */
/* cart */
/* forms */
/* etc */
/* RELAUNCH 2020 */
/* Warengruppe Relaunch 2020 */

/* basics */
@media screen {
    * { font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif; }

    .noScroll { overflow: hidden; }

    #offcanvas_open { display: none; }

    .sticky {
        position: fixed!important;
        top: 0!important;
        z-index: 5!important;
    }

    h1, h2, h3, h4, h5 { font-family: 'Roboto Slab', serif; }
}

/* header */
@media screen {
    header.main .wrp{ padding: 0; }
    header.main.sticky > #service-bar { display: none; }
}

/* service bar */
@media screen {
    header.main #service-bar { background: #f0f0f0; }
    header.main #service-bar span { color: #353535; }


    header.main #service-bar .label_tel,
    header.main #service-bar .label_mail,
    header.main #service-bar .label_claim {
        margin-right: 0;
        font-family: 'regular'!important;
    }

    header.main #service-bar .label_tel:after,
    header.main #service-bar .label_mail:after{
        content: ' | ';
        padding: 0 4px;
        color: #353535;
    }

    header.main #service-bar span.label_tel:before {
        content: 'Servicehotline';
        font-size: 12px;
        font-family: 'regular', 'Helvetica', arial, sans-serif;
    }

    header.main #service-bar span.label_mail:before {
        content: 'E-Mail';
        font-size: 12px;
        font-family: 'regular', 'Helvetica', arial, sans-serif;;
    }

    header.main #service-bar ul li a { color: #e2001a; }
}

/* navigation */
@media screen {
    header.main {
        width: 100%; margin-bottom: 0;
        background: #fff;
        height: auto;
    }

    #customNav { height: 80px; }

    #customNav #brand-logo { height: 100%; width: auto; max-width: 150px; margin: 0; }

    #customNav #brand-logo img { width: 150px; height: 80px; }

    #customNav #navbar {
        position: relative; top: inherit; left: inherit; right: inherit;
        float: left;
        background: none;
        margin-left: 25px;
        height: 80px;
    }

    #customNav #navbar > ul,
    #customNav #navbar > .service-menu { display: inline-block; }

    #customNav #navbar > ul { margin: 0; }

    #customNav #navbar > ul > li {
        position: relative;
        float: left;
        color: #353535;
        font-size: 16px; line-height: 16px;
    }

    #customNav #navbar > ul > li:hover,
    #customNav #navbar > ul > li:active,
    #customNav #navbar > ul > li:focus { background: #e2001a; color: #fff; }

    #customNav #navbar > ul > li:first-child { padding: 32px 15px 31px 15px; cursor: default; }

    #customNav #navbar > ul > li:first-child:after {
        float: right;
        margin-left: 3px;
        margin-top: 1px;
        font-family: 'icon';
        content: 'v';
        color: #e2001a;
    }

    #customNav #navbar > ul > li:first-child:hover:after { color: #fff; }

    #customNav #navbar > ul > li > a {
        color: #353535;
        font-size: 16px; line-height: 16px;
        padding: 32px 15px;
        display: block;
        text-decoration: none;
    }

    #customNav #navbar > ul > li > a:hover,
    #customNav #navbar > ul > li > a:focus,
    #customNav #navbar > ul > li > a:active {color: #fff;}

    #customNav #navbar > ul > li > ul { display: none; position: absolute; top: 80px; left: 0; }

    #customNav #navbar .service-menu ul { position: absolute; top: 80px; right: 0; }

    #customNav #navbar > ul > li:hover > ul,
    #customNav #navbar > ul > li:focus > ul,
    #customNav #navbar > ul > li:active > ul,
    #customNav #navbar .service-menu:hover ul,
    #customNav #navbar .service-menu:focus ul,
    #customNav #navbar .service-menu:active ul { display: block; }

    #customNav #navbar > ul > li:hover > ul > li.has-children > ul { width: 300px;}
    #customNav #navbar > ul > li:hover > ul > li.has-children > ul > li > a > img { width: 39%;}
    #customNav #navbar > ul > li > ul > li.has-children:not:nth-child(3) > ul > li{position: relative; }
    #customNav #navbar > ul > li:hover > ul > li.has-children:nth-child(3) > ul { width: 1100px; }
    #customNav #navbar > ul > li:hover > ul > li.has-children:nth-child(3) > ul > li { width: 25%; float: left; }

    #customNav #navbar > ul > li:hover > ul > li img { width: 35%; display: inline-block; vertical-align: middle; }
    #customNav #navbar > ul > li:hover > ul > li span { width: 60%; display: inline-block; vertical-align: middle; color: #fff; padding: 0 5px; box-sizing: border-box; }

    #customNav #navbar > ul > li:hover > ul > li.has-children > ul { display: none; background: #fff; }

    #customNav #navbar > ul > li > ul > li.has-children > ul > li > a { width: 100%; }
    #customNav #navbar > ul > li:hover > ul > li.has-children > ul > li > a {
        display: block;
        padding: 10px 15px 10px 15px;
        box-sizing: border-box;
        text-decoration: none;
        -webkit-transition: all 0.25s ease-out;
        -moz-transition: all 0.25s ease-out;
        transition: all 0.25s ease-out;
    }

    #customNav #navbar > ul > li:hover > ul > li.has-children > ul > li > a span {
        color: #e2001a;
        padding: 0 5px 0 10px;
        box-sizing: border-box;
        font-size: 12px;
    }

    #customNav #navbar > ul > li:hover > ul > li.has-children > ul > li > a:hover,
    #customNav #navbar > ul > li:hover > ul > li.has-children > ul > li > a:focus,
    #customNav #navbar > ul > li:hover > ul > li.has-children > ul > li > a:active {
        background: #e2001a;
        color: #fff;
    }

    #customNav #navbar > ul > li:hover > ul > li.has-children > ul > li > a:hover span,
    #customNav #navbar > ul > li:hover > ul > li.has-children > ul > li > a:focus span,
    #customNav #navbar > ul > li:hover > ul > li.has-children > ul > li > a:active span {
        color: #fff;
    }

    #customNav #navbar > ul > li:hover > ul > li.has-children:hover > ul,
    #customNav #navbar > ul > li:hover > ul > li.has-children:focus > ul,
    #customNav #navbar > ul > li:hover > ul > li.has-children:active > ul {
        display: block;
        position: absolute; top: 0; left: 100%;
    }

    #customNav #navbar .service-menu { cursor: default; }

    #customNav #navbar .service-menu div {
        position: relative;
        cursor: default;
        height: auto;
        padding: 32px 15px; margin: 0;
        border-radius: 0;
        font-size: 16px; line-height: 16px;
        transition: none;
        color: #353535;
    }

    #customNav #navbar .service-menu:hover div,
    #customNav #navbar .service-menu:focus div,
    #customNav #navbar .service-menu:active div,
    #navbar .service-menu div:hover,
    #customNav #navbar .service-menu:hover div:after,
    #customNav #navbar .service-menu:focus div:after,
    #customNav #navbar .service-menu:active div:after { color: #fff!important; }

    #customNav #navbar .service-menu div:after { margin-top: 1px; margin-left: 3px; color: #e2001a; }

    #customNav #navbar .service-menu:hover div,
    #customNav #navbar .service-menu:focus div,
    #customNav #navbar .service-menu:active div {
        background: #e2001a;
        color: #353535;
    }

    #customNav #navbar > ul > li > ul,
    #customNav #navbar .service-menu div > ul {
        background: #e2001a;
        width: 280px;
    }

    #customNav #navbar > ul > li > ul > li > a,
    #customNav #navbar > ul > li > ul > li > .navElement,
    #customNav #navbar .service-menu div > ul > li > a {
        color: #fff;
        box-sizing: border-box;
        width: 100%;
        font-size: 16px;
        display: block;
        border: solid 1px #cfcfcf;
        border-top: none;
        padding: 10px;
        -webkit-transition: all 0.25s ease-out;
        -moz-transition: all 0.25s ease-out;
        transition: all 0.25s ease-out;
    }

    #customNav #navbar > ul > li > ul > li > a > strong,
    #customNav #navbar .service-menu div > ul > li > a > strong { color: #fff; font-size: 16px; }

    #customNav #navbar > ul > li > ul > li > a > em,
    #customNav #navbar .service-menu div > ul > li > a > em {
        color: #fff;
        font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif!important;
        font-size: 16px;
    }

    #customNav #navbar > ul > li > ul > li:hover > a,
    #customNav #navbar > ul > li > ul > li:active > a,
    #customNav #navbar > ul > li > ul > li:focus > a,
    #customNav #navbar .service-menu div > ul > li:hover > a,
    #customNav #navbar .service-menu div > ul > li:active > a,
    #customNav #navbar .service-menu div > ul > li:focus > a {
        text-decoration: none;
        color: #e2001a;
        background: #fff;
    }

    #customNav #navbar > ul > li > ul > li:hover > a span,
    #customNav #navbar > ul > li > ul > li:active > a span,
    #customNav #navbar > ul > li > ul > li:focus > a span {
        color: #e2001a;
    }

    #customNav #navbar > ul > li > ul > li:hover > a > strong,
    #customNav #navbar .service-menu div > ul > li:hover > a > strong { color: #e2001a; }

    #customNav #navbar > ul > li > ul > li:hover > a > em,
    #customNav #navbar > ul > li > ul > li:focus > a > em,
    #customNav #navbar > ul > li > ul > li:active > a > em,
    #customNav #navbar .service-menu div > ul > li:hover > a > em,
    #customNav #navbar .service-menu div > ul > li:focus > a > em,
    #customNav #navbar .service-menu div > ul > li:active > a > em {
        color: #e2001a;
    }

    header.main #customer-menu {
        margin-top: 5px;
        height: 70px;
    }

    header.main #customer-menu > a,
    header.main #customer-menu > button {
        background: none;
        height: 70px; width: auto;
        padding: 0 5px; margin: 0 0 0 15px;
        position: relative;
        background: #f3f3f3;
    }

    header.main #customer-menu a > span ,
    header.main #customer-menu > button > span {
        height: auto; width: 100%;
        display: block;
        font-size: 10px; line-height: 10px; color: #353535;
        text-align: center;
        position: absolute; bottom: 10px; left: 0;

    }

    #customNav .contactPhone:before {
        content: 'y';
        display: block;
        height: 80px; width: 65px;
        line-height: 60px;
        text-align: center;
        font-family: 'icon';
        color: #fff;
        font-size: 30px;
    }

    header.main #customer-menu a.menu-item-login:before,
    header.main #customer-menu a.menu-item-cart:before,
    header.main #customer-menu a.menu-item-search:before,
    header.main #customer-menu > button.menu-item-login:before,
    header.main #customer-menu > button.menu-item-cart:before,
    header.main #customer-menu > button.menu-item-search:before{
        background-size: 25px 25px;
        background-repeat: no-repeat;
        background-position: 18px 18px;
        height: 70px; width: 65px;
        color: #757575;
    }

    .menu-item-login.login_status_green:after { background: rgba(255,255,255,0); }

    header.main #customer-menu > button.menu-item-search:before {
        content: '';
        background-image: url("../assets/icon/magnifier_gray.png");
        background-size: 25px 25px;
        background-repeat: no-repeat;
        background-position: 18px 18px;
        height: 70px; width: 65px;
        display: block;
    }

    header.main #customer-menu a .count,
    header.main #customer-menu > button .count {
        position: absolute;
        top: 10px; left: 50px;
        background: none;
        color: #353535;
    }
    header.main #customer-menu a.active,
    header.main #customer-menu > button.active,
    header.main #customer-menu a:hover,
    header.main #customer-menu a:focus,
    header.main #customer-menu a:active,
    header.main #customer-menu > button:hover,
    header.main #customer-menu > button:focus,
    header.main #customer-menu > button:active {
        background: #e2001a;
    }

    header.main #customer-menu a.active span,
    header.main #customer-menu > button.active span,
    header.main #customer-menu a.active.menu-item-cart:before {
        color: #fff;
    }

    header.main #customer-menu a.active .count,
    header.main #customer-menu > button.active .count { color: #fff; background: #e2001a;}

    header.main #customer-menu a:hover span,
    header.main #customer-menu a:focus span,
    header.main #customer-menu a:active span,
    header.main #customer-menu > button:hover span,
    header.main #customer-menu > button:focus span,
    header.main #customer-menu > button:active span,
    header.main #customer-menu a:hover.menu-item-login:before,
    header.main #customer-menu a:focus.menu-item-login:before,
    header.main #customer-menu a:active.menu-item-login:before,
    header.main #customer-menu a:hover.menu-item-cart:before,
    header.main #customer-menu a:focus.menu-item-cart:before,
    header.main #customer-menu a:active.menu-item-cart:before,
    header.main #customer-menu a:hover.menu-item-search:before,
    header.main #customer-menu a:focus.menu-item-search:before,
    header.main #customer-menu a:active.menu-item-search:before,
    header.main #customer-menu > button:hover.menu-item-login:before,
    header.main #customer-menu > button:focus.menu-item-login:before,
    header.main #customer-menu > button:active.menu-item-login:before,
    header.main #customer-menu > button:hover.menu-item-cart:before,
    header.main #customer-menu > button:focus.menu-item-cart:before,
    header.main #customer-menu > button:active.menu-item-cart:before,
    header.main #customer-menu > button:hover.menu-item-search:before,
    header.main #customer-menu > button:active.menu-item-search:before,
    header.main #customer-menu > button:focus.menu-item-search:before { color: #fff; }

    header.main #customer-menu > button:hover.menu-item-search:before,
    header.main #customer-menu > button:focus.menu-item-search:before,
    header.main #customer-menu > button:active.menu-item-search:before {
        background-image: url("../assets/icon/magnifier_white.png");
    }

    header.main #customer-menu #login.modal,
    header.main #customer-menu #search.modal {
        top: 75px; right:0;
        width: 320px;
    }

    header.main #customer-menu #search.modal form label {
        text-align: left;
        float: none;
    }

    header.main #customer-menu #search.modal form input {
        width: 60%;
        margin-right: 0;
    }

    header.main #customer-menu #search.modal form button {
        background: #e2001a; color: #fff;
        height: 40px; width: 100%;
        padding: 10px; box-sizing: border-box;
        font-size: 16px; line-height: 16px;
    }

    #header_usp {
        float: right;
        padding: 15px 50px 0 0;
    }

}

@media screen and (max-width: 1920px) {
    #customNav #navbar > ul > li:hover > ul > li.has-children:nth-child(3) > ul {
        width: 1080px;
    }
}

@media screen and (max-width: 1680px) {
    #customNav #navbar > ul > li:hover > ul > li.has-children:nth-child(3) > ul { width: 875px; }
    #customNav #navbar > ul > li:hover > ul > li.has-children:nth-child(3) > ul > li { width: 33%; }
}

@media screen and (max-width: 1580px) {
    #header_usp { display: none; }
}

@media screen and (min-width: 1281px) {

    #customNav #navbar.wrp {
        width: auto!important;
        padding: inherit!important;
    }

}

@media screen and (max-width: 1280px) {

    #customNav #brand-logo img {
        width: auto;
        height: 60px;
        padding: 12px 0 0 10px;
    }

    header.main.sticky:after { top: 65px; }

    #customNav { height: 80px; }

    #customNav #navbar {
        height: 36px;
        padding: 0 0 0 0; box-sizing: border-box;
        margin: 0;
        z-index: 3;
    }
    #customNav #navbar > ul,
    #customNav #navbar .service-menu { float: left; }

    #customNav #navbar > ul > li:first-child,
    #customNav #navbar .service-menu div { padding: 10px 10px 9px 10px; }

    #customNav #navbar > ul > li > a { padding: 10px; }

    #customNav #navbar > ul > li > ul,
    #customNav #navbar .service-menu ul { top: 36px; }

    #customNav #navbar > ul > li:hover > ul > li img { display: none; }
    #customNav #navbar > ul > li:hover > ul > li.has-children:nth-child(3) > ul { width: 600px; }
    #customNav #navbar > ul > li:hover > ul > li.has-children > ul > li > a { min-height: 58px; }
    #customNav #navbar > ul > li:hover > ul > li.has-children > ul > li > a span { padding: 0; width: 100%; }

    header.main #customer-menu {
        position: absolute; top: 0; right: 10px;
    }

    header.main #customer-menu > a,
    header.main #customer-menu > button,
    header.main #customer-menu > button.menu-item-search:before,
    header.main #customer-menu a.menu-item-login:before,
    header.main #customer-menu a.menu-item-cart:before,
    header.main #customer-menu a.menu-item-search:before,
    header.main #customer-menu > button.menu-item-login:before,
    header.main #customer-menu > button.menu-item-cart:before,
    header.main #customer-menu > button.menu-item-search:before,
    #customNav .contactPhone:before { height: 65px; }

    header.main #customer-menu a > span,
    header.main #customer-menu > button > span { display: none; }

    header.main #customer-menu #login.modal,
    header.main #customer-menu #search.modal { top: 65px; }

}

@media screen and (max-width: 1023px) {

    header.main .wrp

    header.main:after { top: 65px; }

    header.main { position: fixed; top: 0; left: 0; z-index: 10}
    #customNav #navbar { padding: 0 0 0 0; }

}

@media screen and (max-width: 767px) {

    header.main:after { display: none; }

    #offcanvas_open {
        display: block;
        top: 20px; right: 10px;
        height: 50px; width: 50px;
    }

    #offcanvas_open:before { font-size: 50px; line-height: 50px; }

    #offcanvas strong {
        font-size: 18px; display: block; margin: 15px 0 10px 0;
    }

}

@media screen and (max-width: 400px) {

    #customNav #brand-logo img {
        width: auto;
        height: 35px;
        padding-top: 5px;
    }

    #customNav #brand-logo {
        margin-top: 10px;
        width: auto;
        max-width: 150px;
        height: auto;
        max-height: 40px;
    }

}

/* offcanvas */
@media screen {

    #offcanvas { overflow-y: auto; }

    #offcanvas #offcanvas_productmenu ul { margin: 0; }

    #offcanvas header #offcanvas_close {
        position: absolute; top: 13px; right: 10px;
        margin-right: 0;
    }

    #offcanvas header #offcanvas_close:after {
        content: 'Schlie\00df en';
        position: absolute; top: 10px; left: -80px;
        color: #575757;
    }

    #offcanvas header {
        margin-bottom: 35px;
        background: #fff;
    }

    #offcanvas form {
        padding: 0px 10px;
        box-sizing: border-box;
        position: relative;
    }

    #offcanvas form label {
        position: absolute; top: -999px; left: -999px;
        opacity: 0;
    }

    #offcanvas form input {
        width: 100%;
        border-radius: 0px!important;
        border: 1px solid #c2c2c2;
        color: #575757;
        background: #fff;
    }

    #offcanvas form button:not(#kundenholensubmit2) {
        position: absolute;
        right: 0px;
        top: 0px;
        width: 40px;
        height: 40px;
        background-color: #575757;
    }

    #offcanvas form button:not(#kundenholensubmit2):before {
        content: '';
        background-size: 20px 20px;
        background-repeat: no-repeat;
        background-image: url(../assets/icon/magnifier_white.png);
        height: 20px;
        width: 20px;
        background-repeat: no-repeat;
        position: absolute;
        top: 10px;
        left: 10px;
    }

    #offcanvas .btn:not(#kundenholensubmit2):before { line-height: 60px; }

    #offcanvas .btn .count {
        color: #fff;
        background-color: rgba(0,0,0,0);
    }

    #offcanvas .btn .title {
        width: 100%;
        position: absolute; bottom: 5px; left: 0;
        color: #fff; font-size: 12px; text-align: center;
    }
}

/* breadcrumb */
@media screen {
    .breadcrumb > ul > li:last-child { font-weight: 700; }
    .breadcrumb li:last-child a:after { display: none; }
}

/* footer */
@media screen {
    footer.main { background: #3c3c3c; }
    footer.main address,
    footer.main .advantages,
    footer.main > .wrp > nav { width: 25%; float: left; margin-left: 0; padding-right: 3%; box-sizing: border-box; }

    footer.main h3,
    footer.main > .wrp > nav h3,
    footer.main .headline { margin-bottom: 10px; color: #fff; text-transform: uppercase; font-family: 'Roboto Slab', serif; }

    footer.main address .col_left,
    footer.main address .col_right,
    footer.main > .wrp > nav li a,
    footer.main .advantages ul li { color: #fff; font-size: 14px; }

    footer.main address .col_left,
    footer.main address .col_right { margin-bottom: 20px; width: 100%; }

    footer.main address .linkarea a {
        width: 241px;
        padding: 5px 10px; box-sizing: border-box;
        border: 1px solid #fff;
        font-size: 16px;
        color: #fff;
        font-weight: 300;
        font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
        display: block;
        vertical-align: middle;
        transition: all ease-in-out 200ms;
    }

    footer.main address .linkarea a:hover,
    footer.main address .linkarea a:focus,
    footer.main address .linkarea a:active {
        background-color: #e2001a;
        border: 1px solid #e2001a;
    }

    footer.main address .linkarea a:not(:last-of-type) { margin-bottom: 10px; }

    footer.main address .linkarea a:before {
        content: '';
        background-size: 15px 15px;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        display: inline-block;
        vertical-align: middle;
        width: 15px; height: 15px;
        margin-right: 10px;
    }

    footer.main address .linkarea a.phone:before { background-image: url("../assets/icon/phone_white.svg"); }
    footer.main address .linkarea a.email:before { background-image: url("../assets/icon/mail_white.svg"); }
    footer.main address .linkarea a.facebook:before { background-image: url("../assets/icon/facebook_white.svg"); }


    footer.main .advantages ul li {
        width: 75%;
        padding: 5px 0 5px 25px; box-sizing: border-box;
        position: relative;
        line-height: 18px;
    }

    footer.main .advantages ul li:before {
        content: '';
        background-image: url("../assets/icon/checkmark_white.svg");
        background-size: 15px 15px;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        display: inline-block;
        width: 15px; height: 15px;
        position: absolute; top: calc(50% - 7px); left: 0;
    }

    footer.main > .wrp > nav li a { border-bottom: 0; box-sizing: border-box; padding: 5px 0 5px 15px; }

    footer.main > .wrp > nav li a:after { right: inherit; left: 0; }


    #footer-bar { background: #575757; }
    #totop a:before {
        content: '';
        background: url("../assets/icon/arrow_top_white.svg") #e2001a;
        background-size: 25px 25px;
        background-repeat: no-repeat;
        background-position: 50% 50%;
    }

    #totop a:hover:before,
    #totop a:focus:before,
    #totop a:active:before {
        background: url("../assets/icon/arrow_top_white.svg") #af0014;
        background-size: 25px 25px;
        background-repeat: no-repeat;
        background-position: 50% 50%;
    }

    .leadprint-brand:hover { color: #fff; }

    #footer-product-nav_toggle {
        padding: 5px 14px;
        box-sizing: border-box;
        border: 1px solid #fff;
        border-radius: 0;
        font-size: 16px;
        color: #fff;
        font-weight: 300;
        font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
        background: none;
        transition: all ease-in-out 200ms;
        height: auto;
    }

    #footer-product-nav_toggle:hover,
    #footer-product-nav_toggle:focus,
    #footer-product-nav_toggle:active { background: #e2001a; }


}

@media screen and (max-width: 1280px){
    footer.main > .wrp address,
    footer.main .advantages,
    footer.main > .wrp > nav { width: 33.333%; }
}

@media screen and (max-width: 1023px){
    footer.main .advantages { display: none; }
    footer.main > .wrp address,
    footer.main > .wrp > nav {width: 50%;}
}

@media screen and (max-width: 767px){
    footer.main > .wrp address { margin-bottom: 20px; }
    footer.main>.wrp>nav:nth-of-type(2) { padding-left: 0; }
}

@media screen and (max-width: 520px) {
    footer.main > .wrp > nav { width: 100%; }
}

/* slider */
@media screen {

    #slider { margin-bottom: 50px; }

    #slider .slide figcaption { text-align: center; top: 15%; }

    #slider .slide figcaption strong {
        font-family: 'Roboto Slab', serif;
        font-size: 42px; line-height: 56px; font-weight: 700;
        background: none;
        color: #fff;
        max-width: 85%;
        text-shadow: 2px 2px 2px #2F2F2F;
        margin-bottom: 20px;
    }

    #slider .slide figcaption strong:after {
        content: '';
        display: block;
        width: 80%;
        border-bottom: 1px solid #fff;
        margin: 20px auto 0 auto;
        text-shadow: 2px 2px 2px #2F2F2F;
    }

    #slider .slide figcaption p {
        max-width: 75%;
        color: #fff;
        margin: 0 auto;
        text-shadow: 2px 2px 2px #2F2F2F;
        margin-bottom: 20px;
    }

    #slider .slide figcaption .btn.success {
        background: #e2001a;
        border-color: #e2001a;
        margin-bottom: 0;
    }

    #slider .slide figcaption .btn.success:after {
        content: '';
        display: inline-block;
        height: 23px; width: 26px;
        background-image: url("../assets/icon/arrow_right_white.svg");
        background-size: 20px 20px; background-repeat: no-repeat; background-position: 10px 0;
        vertical-align: middle;
    }

    #slider .slide figcaption .btn.success:hover:after {
        background-image: url("../assets/icon/arrow_right_red.svg");
        background-size: 20px 20px; background-repeat: no-repeat; background-position: 10px 0;
    }

    #slider .slide figcaption .btn.success:hover,
    #slider .slide figcaption .btn.success:hover,
    #slider .slide figcaption .btn.success:active {
        color: #e2001a;
        background: #fff;
    }

    #slider #controlNav { display: none; }

    #slider .side-nav { width: 40px; height: 40px; background: #fff; }

    #slider .slide-right {
        top: inherit; right: 0!important; bottom: 0;
    }

    #slider .slide-left {
        top: inherit; right: 40px!important; bottom: 0; left: inherit!important;
    }

    #slider .side-nav.slide-left:before,
    #slider .side-nav.slide-right:before{
        content: '';
        height: 40px; width: 40px;
        background-size: 20px 20px; background-repeat: no-repeat; background-position: 10px 10px;
        border-radius: 0;
    }

    #slider .side-nav.slide-left:before { background-image: url("../assets/icon/arrow_left_grey.svg"); }
    #slider .side-nav.slide-right:before { background-image: url("../assets/icon/arrow_right_grey.svg"); }

    #slider .side-nav:hover:before { background: #e2001a; }
    #slider .side-nav.slide-left:hover:before {
        background-image: url("../assets/icon/arrow_left_white.svg");
        background-size: 20px 20px; background-repeat: no-repeat; background-position: 10px 10px;
    }
    #slider .side-nav.slide-right:hover:before {
        background-image: url("../assets/icon/arrow_right_white.svg");
        background-size: 20px 20px; background-repeat: no-repeat; background-position: 10px 10px;
    }

}

@media screen and (max-width: 1280px) {
    #slider .side-nav { display: block; }

    #slider .slide figcaption strong {
        font-size: 36px; line-height: 48px;
        margin-bottom: 10px;
    }

    #slider .slide figcaption strong:after {
        margin-top: 10px;
    }
}

@media screen and (max-width: 1023px) {
    #slider { margin-top: 116px; }
    #slider .slide figcaption { display: block; top: 10%;}
    #slider .slide figcaption strong { font-size: 32px; line-height: 38px; }
    #slider .slide figcaption p { display: none; }
    #slider .slide figcaption .btn.success { display: block; width: 180px; margin: 0 auto; }
}

@media screen and (max-width: 767px) {
    #slider { margin-top: 0; }
    #slider .slide figcaption .wrp { padding: 0; }
    #slider .slide figcaption strong {
        font-size: 24px; line-height: 24px; max-width: 95%;
        text-shadow: none;
        background: #e2001a;
        margin-bottom: 0;
        padding: 10px 10px; box-sizing: border-box;
        font-weight: 400;
    }
    #slider .slide figcaption strong:after {
        content: '';
        display: inline-block;
        height: 22px; width: 18px;
        background-size: 20px 20px; background-repeat: no-repeat; background-position: 0 0;
        border-radius: 0;
        background-image: url("../assets/icon/arrow_right_white.svg");
        vertical-align: middle;
        border-bottom: 0;
        margin-top: 0;
    }
    #slider .slide figcaption .textArea { position: relative; text-align: left;}
    #slider .slide figcaption .btn.success { width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; }
}

@media screen and (max-width: 520px) {
    #slider .side-nav { display: none; }
    #slider .slide figcaption strong { font-size: 18px; line-height: 18px; }
    #slider .slide figcaption strong:after {
        height: 17px; width: 18px;
        background-size: 15px 15px;
    }
}

/* intro / topseller */
@media screen {
    .intro h1, .intro h2 { font-size: 36px; line-height: 54px; margin-bottom: 30px; text-transform: uppercase; }
    .intro h2 { margin-bottom: 0; }

    #topseller_list { margin-bottom: 15px; }

    #topseller_list li { width: 18.4%; padding: 0; box-sizing: border-box; margin-right: 2%; float: left; list-style-type: none; }
    #topseller_list li:last-of-type { margin-right: 0; }
    #topseller_list li:before { display: none; }

    #topseller_list li a { display: block; }
    #topseller_list li img { width: 100%; height: auto; max-width: 100%; margin-bottom: 0; line-height: inherit; }
    #topseller_list li span {
        display: block;
        margin-bottom: 0;
        background: #575757;
        color: #fff;
        padding: 10px 50px 10px 10px;
        box-sizing: border-box;
        position: relative;
        font-size: 12px;
    }

    #topseller_list li span:after {
        content:'';
        background: url("../assets/icon/arrow_right_white.svg"),#e2001a;
        background-size: 20px 20px; background-repeat: no-repeat; background-position: 50% 50%;
        vertical-align: middle;
        display: block;
        width: 30px; height: 100%;
        position: absolute; top: 0; right: 0;
        transition: all ease-in 150ms;
    }

    #topseller_list li strong {
        display: block;
        font-family: 'Roboto Slab', serif;
        font-size: 14px; line-height: 21px;
        color: #fff;
    }

    #topseller_list li a:hover,
    #topseller_list li a:focus,
    #topseller_list li a:active { text-decoration: none; }

    #topseller_list li a:hover span:after,
    #topseller_list li a:focus span:after,
    #topseller_list li a:active span:after {
        background: url("../assets/icon/arrow_right_red.svg"), #fff;
        background-size: 20px 20px; background-repeat: no-repeat; background-position: 50% 50%;
    }

    .intro .col_left,
    .intro .col_right { width: 48%; padding: 25px 0 0 0; }
    .intro .col_left { margin-right: 2%;}
    .intro .col_right { margin-left: 2%;}
    .intro .col_left strong,
    .intro .col_right strong { color: #e2001a; font-size: 16px; }
    .intro .col_left h3,
    .intro .col_right h3 { font-size: 16px; margin-bottom: 12px; font-weight: 600; }

    .intro .anchor {
        background: #b5b3b1;
        background-size: 20px 20px; background-repeat: no-repeat; background-position: 10px 0;
        height: 30px; width: 120px;
        display: block;
        margin: 0 auto -15px auto;
    }

    .intro .anchor > img {
        width: auto; height: 100%;
        margin: 0 auto;
    }
}

@media screen and (max-width: 1023px) {
    .intro h1, .intro h2 { font-size: 24px; line-height: 36px; }
    #topseller_list li { width: 23.5%; }
    #topseller_list li:nth-last-child(5) { display: none; }
}

@media screen and (max-width: 767px) {
    #topseller_list li { width: 49%; margin-bottom: 15px;  }
    #topseller_list li:nth-child(3n+3) { margin-right: 0;}
    .intro .col_left,
    .intro .col_right { width: 100%; padding: 0 0 0 0; margin: 0; }
    .intro .col_right { margin-bottom: 50px; }
    .intro ~ .anchor { display: none; }
}

/* trade-groups */
@media screen {

    .trade-groups,
    .product-listing { background-color: #f8f8f8; padding-bottom: 75px; }

    .trade-groups > .wrp > h2,
    .product-listing  > .wrp > h1 {text-transform: uppercase;}

    section .sidebar {
        background: none;
        padding: 0;
        width: 16.25%;
    }
    section .sidebar ul li h2 { margin-bottom: 0; }

    section .sidebar ~ .content {
        width: 83.75%;
    }

    .trade-groups .card,
    .product-listing .card {
        width: 23%; height: auto;
        border: 0;
        margin: 0 0 20px 2%;
        padding-bottom: 45px;
        background: #fff;
    }

    .trade-groups .card:hover,
    .product-listing .card:hover {
        border: 0;
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }

    .trade-groups .card figcaption,
    .product-listing .card figcaption {
        bottom: 5px;
        padding: 10px 20px 10px 20px;
        background: #575757;
    }

    .trade-groups .card figcaption:after,
    .product-listing .card figcaption:after {
        content: '';
        background: url(../assets/icon/arrow_right_white.svg),#e2001a;
        background-size: 20px 20px;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        vertical-align: middle;
        display: block;
        width: 25px;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        transition: all ease-in 150ms;
    }

    .trade-groups .card:hover figcaption,
    .product-listing .card:hover figcaption { background: #575757; bottom: 5px; }

    .trade-groups .card:hover figcaption:after,
    .product-listing .card:hover figcaption:after {
        background: url(../assets/icon/arrow_right_red.svg), #fff;
        background-size: 20px 20px;
        background-repeat: no-repeat;
        background-position: 50% 50%;
    }

    .product-listing .card strong { color: #fff; }

    .trade-groups h1,
    .product-listing h1 { font-size: 36px; line-height: 54px; margin-bottom: 30px; }

    .trade-groups h2,
    .product-listing h2 { font-size: 24px; line-height: 48px; margin-bottom: 20px; }

    .product-listing .card .card_description { padding: 10px 20px; box-sizing: border-box; font-size: 12px; }
    .product-listing .card .card_description:before { content: ''; display: block; width: 50%; border-top: 1px solid #c0c0c0; padding-bottom: 10px; }

    .trade-groups .card figcaption h2,
    .trade-groups .card figcaption h3,
    .product-listing .card figcaption h2,
    .product-listing .card figcaption h3 { margin-bottom: 0; color: #fff; font-size: 14px; font-weight: 200; }

    .trade-groups .card figcaption h2,
    .product-listing .card figcaption h2 { line-height: inherit; font-family: 'Roboto Slab', serif; text-align: left; }

    .headline.trade-groups { margin-bottom: 0; padding: 0 0 0 0;}

    .trade-groups.full .description { width: 100%; margin: 0; padding: 0; }

}

@media screen and (max-width: 1280px) {

    section .sidebar { width: 25%; }

    section .sidebar ~ .content { width: 75%; }

    .trade-groups .content .card { width: 31.56%; }

    .trade-groups .content .card figcaption { bottom: 0;}

    .trade-groups .content .card figcaption:after {
        width: 20px;
        background-size: 15px 15px;
    }

}

@media screen and (max-width: 1023px) {

    section .sidebar { width: 100%; }
    section .sidebar li { width: 33.333%; }
    section .sidebar ~ .content { width: 100%; }
    .trade-groups .content .card { width: 32.445%; }
    .trade-groups .content .card:nth-child(3n+3) { margin-right: 0; }
    .trade-groups .content .card:nth-child(4n+4) { margin: 0 1.333333% 1% 0; }
    .trade-groups .card figcaption { padding: 8px 8px 8px 8px; }
    .trade-groups .content .card figcaption:after { display: none; }

}

@media screen and (max-width: 850px) {
    .trade-groups { padding-bottom: 50px; }
}

@media screen and (max-width: 767px) {

    section .sidebar li { width: 50%; }
    .trade-groups .content .card { width: 49.334%; }
    .trade-groups .content .card,
    .trade-groups .content .card:nth-child(3n+3) { margin: 0 1.333333% 1% 0; }
    .trade-groups .content .card:nth-child(2n+2),
    .trade-groups .content .card:nth-child(4n+4) { margin-right: 0; }

    .trade-groups h1,
    .product-listing h1 { font-size: 24px; line-height: 48px; margin-bottom: 20px; }

    .trade-groups h2,
    .product-listing h2 { font-size: 18px; line-height: 36px; margin-bottom: 10px; }

}

@media screen and (max-width: 520px) {
    section .sidebar li { width: 100%; margin-bottom: 0;  }
    .trade-groups .content .card { width: 100%; margin: 0 0 10px 0; }
    .trade-groups .content .card:nth-child(3n+3),
    .trade-groups .content .card:nth-child(2n+2),
    .trade-groups .content .card:nth-child(4n+4) { margin-right: 0; }
}

@media screen and (max-width: 500px) {
    .trade-groups.full .card:nth-child(4n+1), .product-listing.full .card:nth-child(4n+1) {
        margin-left: 0;
    }
}

/* parallax */
@media screen {
    .parallax { background: #3c3c3c; margin-top: 0; overflow: visible; height: 300px; }
    .parallax .wrp { height: 100%; }
    .parallax .wrp img { height: 150%; width: auto; margin-top: -50px; z-index: 1; }
    .parallax .wrp .rte_container { display: flex;  align-items: center; height: 100%; width: 30%; float: right; }

    .parallax .wrp .rte_container h2,
    .parallax .wrp .rte_container p { color: #fff; }

    .parallax .wrp .rte_container h2 { font-size: 36px; line-height: 48px; margin-bottom: 25px; text-transform: uppercase; }
}

@media screen and (max-width: 1680px) {
    .parallax .wrp img { height: 125%; margin-left: -100px; }
    .parallax .wrp .rte_container { width: 32%; }
}

@media screen and (max-width: 1420px) {
    .parallax .wrp img { height: 115%; margin-top: -25px; }
    .parallax .wrp .rte_container { width: 40%; }
}

@media screen and (max-width: 1280px) {
    .parallax .wrp img { height: 90%; margin-top: 15px; }
}

@media screen and (max-width: 1023px){
    .parallax .wrp img {
        height: 115%;
        margin-top: -25px;
        margin-left: -250px;
    }
    .parallax .wrp .rte_container h2 { margin-bottom: 0; }
    .parallax .wrp .rte_container p { display: none; }
}

@media screen and (max-width: 850px) {
    .parallax { display: none; }
}

/* shopinfos */
@media screen {
    #shopinfos { background: #f8f8f8; overflow: hidden; }
    #shopinfos li { padding: 0; }
    #shopinfos li:before { display: none; }
    #shopinfos .wrp { display: flex; align-items: center; }

    #shopinfos .process { width: 30%; margin-bottom: 0; text-align: center; }
    #shopinfos .process li:not(:last-of-type) { margin-bottom: 50px; }
    #shopinfos .process li img { width: 60px; height: 60px; margin: 0 auto 5px auto; }
    #shopinfos .process li span { font-size: 18px; font-weight: 300; }

    #shopinfos .row_right { width: 70%; box-sizing: border-box; border-left: 2px solid #fff; }
    #shopinfos .row_right .contact,
    #shopinfos .row_right .additionalservice,
    #shopinfos .row_right .payment { padding: 50px 50px; box-sizing: border-box; }
    #shopinfos .row_right .contact,
    #shopinfos .row_right .additionalservice { border-bottom: 2px solid #fff; position: relative; }
    #shopinfos .row_right .contact:after,
    #shopinfos .row_right .additionalservice:after {
        content:'';
        display: block;
        width: 100%; height: 2px;
        background: #fff;
        position: absolute; bottom: -2px; right: -100%;
    }

    #shopinfos .row_right .text h3 { margin-bottom: 15px; text-transform: uppercase;}
    #shopinfos .row_right .text .col_left,
    #shopinfos .row_right .text .col_right { padding: 0; background: none; }
    #shopinfos .row_right .text .col_right .btn { color: #fff!important; margin-bottom: 10px; width: 75%; }
    #shopinfos .row_right .text .col_right img { width: 25%; padding: 0 3%; box-sizing: border-box; float: left; }

    #shopinfos .row_right .additionalservice ul { width: 33.333%; padding: 0; margin: 0; float: left; }
}

@media screen and (max-width: 1680px){

    #shopinfos .process { width: 20%; }
    #shopinfos .row_right { width: 80%; }
}

@media screen and (max-width: 1280px){
    #shopinfos .process { width: 30%; }
    #shopinfos .row_right { width: 70%; }
    #shopinfos .row_right .text .col_left,
    #shopinfos .row_right .text .col_right { width: 100%; }
    #shopinfos .row_right .text .col_right { margin-bottom: 0; }
    #shopinfos .row_right .text .col_right .btn:last-child { margin-bottom: 0; }
}

@media screen and (max-width: 1023px) {
    #shopinfos .process { display: none; }
    #shopinfos .row_right { width: 100%; border-left: 0; }
    #shopinfos .row_right .contact, #shopinfos .row_right .additionalservice, #shopinfos .row_right .payment { padding: 25px 0; }
    #shopinfos .row_right .text .col_right .btn { width: 420px; display: block; }
}

@media screen and (max-width: 520px) {
    #shopinfos .row_right .text .col_right .btn { width: 100%; }
    #shopinfos .row_right .additionalservice ul { width: 100%; }
}

/* ourproducts */
@media screen {
    .ourproducts { margin: 25px 0; }
    .ourproducts .productteaser { width: 19%; margin-right: 1.25%;  float: left; position: relative; display: flex; align-items: center; margin-bottom: 10px; }
    .ourproducts .productteaser:after {
        content: '';
        display:block;
        position: absolute; bottom: 0; left: 0;
        width: 100%; height: 2px;
        background-color: #575757;
        transition: all ease-in 200ms;
    }
    .ourproducts .productteaser:nth-child(5n+5) { margin-right: 0;}
    .ourproducts .productteaser a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; opacity: 0; }
    .ourproducts .productteaser .text,
    .ourproducts .productteaser img { width: 25%; margin-bottom: 0; float: left; padding-bottom: 1px; }
    .ourproducts .productteaser .text { width: 75%; padding: 5px 5px 5px 5px; box-sizing: border-box; }
    .ourproducts .productteaser .text h3 { color: #e2001a; font-size: 16px; margin-bottom: 0; }
    .ourproducts .productteaser .text h3:after {
        content: '';
        height: 10px; width: 10px;
        background-image: url("../assets/icon/arrow_right_red.svg");
        background-size: 10px 10px;
        background-repeat: no-repeat;
        margin-left: 3px;
        display: inline-block;
    }
    .ourproducts .productteaser .text p { font-size: 12px; line-height: 14px; margin-bottom: 0; }
    .ourproducts .productteaser:hover:after,
    .ourproducts .productteaser:focus:after,
    .ourproducts .productteaser:active:after { background-color: #e2001a; }

    .ourproducts .productteaser:last-child { background: #575757; transition: background ease-in-out 200ms; position: relative; }
    .ourproducts .productteaser:last-child .text h3,
    .ourproducts .productteaser:last-child .text p { color: #fff !important;}
    .ourproducts .productteaser:last-child .text h3:after { display: none;}
    .ourproducts .productteaser:last-child:hover,
    .ourproducts .productteaser:last-child:focus,
    .ourproducts .productteaser:last-child:active { background: #e2001a; }
    .ourproducts .productteaser:last-child:before {
        content: '';
        position: absolute; top: 0; right: -42px;
        height: 100%; width: 42px;
        background-image: url("../assets/dermappenmeister.png");
        background-size: 42px 100%;
        background-repeat: no-repeat;
        display: inline-block;
        cursor: pointer;
    }

    .ourproducts ~ .intro ul li:before {
        background: #e2001a;
        top: 10px; left: 5px;
        height: 4px; width: 4px;
    }
}

@media screen and (max-width: 1680px) {
    .ourproducts .productteaser .text p { font-size: 10px; }
    .ourproducts .productteaser .text h3 { font-size: 14px; }
}

@media screen and (max-width: 1480px) {
    .ourproducts .productteaser { width: 24%; }
    .ourproducts .productteaser:nth-child(4n+4) { margin-right: 0; }
    .ourproducts .productteaser:nth-child(5n+5) { margin-right: 1.25%; }
}

@media screen and (max-width: 1280px) {
    .ourproducts .productteaser { width: 32%; }
    .ourproducts .productteaser:nth-child(3n+3) { margin-right: 0; }
    .ourproducts .productteaser:nth-child(4n+4),
    .ourproducts .productteaser:nth-child(5n+5) { margin-right: 1.25%; }
    .ourproducts .productteaser:last-child:before { display: none; }
}

@media screen and (max-width: 767px) {
    .ourproducts .productteaser { width: 49%; margin-right: 2%; }
    .ourproducts .productteaser:nth-child(3n+3),
    .ourproducts .productteaser:nth-child(4n+4),
    .ourproducts .productteaser:nth-child(5n+5) { margin-right: 2%; }
    .ourproducts .productteaser:nth-child(2n+2) { margin: 0;}
}

@media screen and (max-width: 520px) {
    .ourproducts .productteaser { width: 100%; margin-right: 0; }
    .ourproducts .productteaser:nth-child(2n+2),
    .ourproducts .productteaser:nth-child(3n+3),
    .ourproducts .productteaser:nth-child(4n+4),
    .ourproducts .productteaser:nth-child(5n+5) { margin-right: 0; }
    .ourproducts .productteaser .text h3 { font-size: 16px; }
    .ourproducts .productteaser .text p { font-size: 12px; }
}

/* kontakt */
@media screen {
    #contact,
    #contact form article,
    #contact form .col_left,
    #contact form .col_right { background: #f8f8f8; }
    #contact .form_billing-address fieldset { width: 555px; }
    #contact .form_billing-address fieldset.upload_field input { float: left; margin: 0 0 0 175px;}
    #contact .privacypolicyContact { width: 555px; }
    #contact .privacypolicyContact input,
    #contact .privacypolicyContact label { float: right; }
    #contact .privacypolicyContact label { width: 370px; text-align: left; }

    #contact .parallax,
    #contact #usp-bar{ display: none; }

    #contact fieldset:nth-child(2),
    #contact fieldset:nth-child(9),
    #contact fieldset:nth-child(10),
    #contact fieldset:nth-child(12){ display: none; }

    #contact form article,
    #contact form #contactinformation { width: 50%; float: left; }
    #contact form #contactinformation {
        box-sizing: border-box;
        padding: 20px 20px 20px 60px;
        margin-bottom: 30px;
    }
    #contact form #contactinformation h2 {
        font-family: 'Roboto Slab', serif;
        font-size: 24px;
        font-weight: 100;
        line-height: 145%;
        color: #575757;
        margin: 0 0 20px 0;
        text-align: left;
        width: 100%;
        padding-right: 0;
    }
    #contact form #contactinformation h2:after { display: none; }
    #contact form #contactinformation .imageWrapper { width: 75%; margin-bottom: 25px; }
    #contact form #contactinformation .imageWrapper img { width: 100%; height: auto; }
    #contact form #contactinformation .imageWrapper a {
        background-color: #e2001a;
        border: 1px solid #e2001a;
        color: #fff;
        width: 100%;
        display: block;
        padding: 10px 15px;
        box-sizing: border-box;
        transition: 150ms ease-out;
        text-decoration: none;
    }
    #contact form #contactinformation .imageWrapper a:hover,
    #contact form #contactinformation .imageWrapper a:focus,
    #contact form #contactinformation .imageWrapper a:active {
        color: #e2001a;
        background-color: #fff;
        border: 1px solid #e2001a;
    }
    #contact form #contactinformation p strong {
        display: block;
        font-family: 'Roboto Slab', serif;
        font-size: 18px;
        font-weight: 100;
        line-height: 145%;
    }
}

@media screen and (max-width: 1400px) {
    #contact form article { width: 60%}
    #contact form #contactinformation { width: 40%}
    #contact form #contactinformation .imageWrapper { width: 100%; }
}

@media screen and (max-width: 1023px) {
    #contact { padding-top: 120px; }
    #contact form article,
    #contact form #contactinformation { width: 100%; }
    #contact form #contactinformation { padding: 20px 20px 20px 20px; }
}
@media screen and (max-width: 768px) {
    #contact { padding-top: 30px; }
}
@media screen and (max-width: 665px) {
    #contact .privacypolicyContact input { margin-top: 12px; }
}

@media screen and (max-width: 500px){
    #contact .form_billing-address fieldset { width: 100%; }
    #contact .form_billing-address fieldset.upload_field input { margin-left: 0; padding-left: 0; }
    #contact .privacypolicyContact label { width: 100%; text-align: left; padding-left: 25px; box-sizing: border-box; }
    #contact .privacypolicyContact input { position: absolute; left: 0; top: 1px; }
}

/* druckmusteranforderung */
@media screen {
    #order_sample,
    #order_sample form article { background: #f8f8f8;  }
    #order_sample form article { width: 50%; }
}


/* cart */

@media screen {
    .cart_breadcrumb li.active {
        background: url("../assets/cart_breadcrumb_active.png") no-repeat right center #e2001a;
    }

    .cart_breadcrumb li.preactive  {
        background: url("../assets/cart_breadcrumb_preactive.png") no-repeat right center #e2001a;
    }

    .cart_breadcrumb li.unactive {
        background: url(../assets/cart_breadcrumb_unactive.png) no-repeat right center #e2001a;
    }

    #cart form { width: 75%; }
    #cart #sidebar { width: 25%; }

    #cart tbody { width: 100%; display: table; }
    #cart tbody tr th:first-child,
    #cart tbody tr > td:first-child { width: 30%; }
    #cart tbody tr th:nth-child(2),
    #cart tbody tr > td:nth-child(2),
    #cart tbody tr th:nth-child(3),
    #cart tbody tr > td:nth-child(3) { width: 20%; }
    #cart tbody tr th:nth-child(4),
    #cart tbody tr > td:nth-child(4) { width: 30%; }

    #cart #total_price strong { color: #e2001a; }

    .actionbar .btn.back {
        border-color: #4a4a4a;
        background: #8a8a8a;
    }

    .actionbar .btn.back:hover,
    .actionbar .btn.back:focus,
    .actionbar .btn.back:active { background: #ababab; }

    #cart_teillieferung fieldset.saveSettings button,
    #cart_third_buy .btn.success,
    #cart_second #formular .btn,
    .actionbar .btn.success {
        background: #e2001a;
        border-color: #e2001a;
    }

    #cart_teillieferung fieldset.saveSettings button:hover,
    #cart_teillieferung fieldset.saveSettings button:focus,
    #cart_teillieferung fieldset.saveSettings button:active,
    #cart_third_buy .btn.success:hover,
    #cart_third_buy .btn.success:focus,
    #cart_third_buy .btn.success:active,
    #cart_second #formular .btn:hover,
    #cart_second #formular .btn:focus,
    #cart_second #formular .btn:active
    .actionbar .btn.success:hover,
    .actionbar .btn.success:focus,
    .actionbar .btn.success:active {background: #ff1631;}

}

@media screen and (max-width: 1280px) {
    #cart form { width: 100%; }
}

/* forms */

@media screen {
    #cart_second form fieldset,
    #contact form fieldset,
    #detail_free form fieldset,
    #account_tracking form fieldset,
    #finish form fieldset,
    #register form fieldset,
    #crop form fieldset {
        float: none;
        width: 100%;
    }

    #cart_second form > article > fieldset > label { width: 25px; }

    #register form article .form_billing-address,
    #register form article #delivery_address,
    #register form article #divergent_address { width: 50%; float: left;  }

    #registration .subline { margin-bottom: 20px; display: inline-block; }

    #register form #delivery_address,
    #register form #divergent_address { clear: none; margin-top: 0; }

    #register form #divergent_address { margin-bottom: 25px; }

    #register #customer_login input { margin-top: 5px; }

    #register form .actionbar { margin-top: 25px; }

    #pw_lost form > button.btn { margin-left: 220px!important; }
}
@media screen and (max-width: 1280px) {
    #register form article .form_billing-address,
    #register form article #delivery_address,
    #register form article #divergent_address { width: 100%; float: none;  }

    #register form #delivery_address,
    #register form #divergent_address { clear: both; margin-top: 0; }
}

@media screen and (max-width: 1024px) {
    #register form article .form_billing-address { margin-top: 80px; }
    #register form #delivery_address,
    #register form #divergent_address  { margin-top: 30px; }
}

@media screen and (max-width: 767px) {
    #register form article .form_billing-address { margin-top: 0px; }
}

@media screen and (max-width: 600px) {
    #pw_lost form > button.btn { margin-left: 0!important }
}

/* etc */
@media screen {
    .btn.success,
    form > .btn:not([name="cmd_calc"]),
    form article .btn:not([name="cmd_calc"]),
    form > section:not(#total_block) > .btn:not([name="cmd_calc"]) {
        background: #e2001a;
        border-color: #e2001a;
    }

    .btn.success:hover,
    .btn.success:focus,
    .btn.success:active,
    form > .btn:not([name="cmd_calc"]):hover,
    form > .btn:not([name="cmd_calc"]):focus,
    form > .btn:not([name="cmd_calc"]):active,
    form article .btn:not([name="cmd_calc"]):hover,
    form article .btn:not([name="cmd_calc"]):focus,
    form article .btn:not([name="cmd_calc"]):active,
    form > section:not(#total_block) > .btn:not([name="cmd_calc"]):hover,
    form > section:not(#total_block) > .btn:not([name="cmd_calc"]):focus,
    form > section:not(#total_block) > .btn:not([name="cmd_calc"]):active {background: #ff1631; border-color: #e2001a;}

    #pw_lost fieldset > .btn.pw { width: 350px; }
}

@media screen and (max-width: 600px) {
    #pw_lost fieldset > .btn.pw { width: 100%; }
}

#product_filter { margin-top: 25px}
.net { font-weight: 700}


/*

RELAUNCH 2020

*/

/*

Warengruppe Relaunch 2020

*/

@media screen {
    #category2020 .headline.trade-groups { position: relative; }

    #category2020 .headline.trade-groups > .description {
        position: absolute; top: 0; right: 0;
        width: 50%;
        text-align: center;
        padding-right: 8%;
        box-sizing: border-box;
    }

    #category2020 .headline.trade-groups > .description h1 {
        font-size: 2.25vw;
        line-height: 1.5em;
        margin: 5% 0 10% 0;
        font-weight: 700;
        padding-top: 0;
    }

    #category2020 .headline.trade-groups > .description p { font-size: 1.75vw; }

    #category2020 .headline.trade-groups > .description .btn { color: #fff!important; }

    #category2020 .textblock { margin-bottom: 50px; margin-top: 50px; }

    #category2020 .textblock .centered { text-align: center; }

    #category2020 .textblock h2 { font-size: 36px; margin-bottom: 36px; font-weight: 600; }
    #category2020 .textblock h3 { margin-bottom: 25px; }

    #category2020 .textblock .col_wrapper .col_left,
    #category2020 .textblock .col_wrapper .col_right { margin: 0 0 0 0; padding: 0 0 0 0; }

    #category2020 .textblock .col_wrapper .col_left { padding-right: 50px; }
    #category2020 .textblock .col_wrapper .col_right { padding-left: 50px; }

    #category2020 .textblock .col_wrapper .col_left.col_small,
    #category2020 .textblock .col_wrapper .col_right.col_small { width: 30%; }

    #category2020 .textblock .col_wrapper .col_left.col_large,
    #category2020 .textblock .col_wrapper .col_right.col_large { width: 70%; }

    #category2020 .textblock .col_wrapper .col_left img,
    #category2020 .textblock .col_wrapper .col_right img { width: 100%; height: auto; }

    #category2020 .textblock .col_wrapper .col_left .infoblock,
    #category2020 .textblock .col_wrapper .col_right .infoblock { background: #e2001a; padding: 25px; box-sizing: border-box; display: flex; }

    #category2020 .textblock .col_wrapper .col_left .infoblock img,
    #category2020 .textblock .col_wrapper .col_right .infoblock img { height: 30px; width: auto; display: inline-block; margin: 0 30px 0 0; align-self: center;}

    #category2020 .textblock .col_wrapper .col_left .infoblock p,
    #category2020 .textblock .col_wrapper .col_right .infoblock p { display: inline-block; margin-bottom: 0; align-self: center; color: #fff; }

    #category2020 .textblock .rte_container strong,
    #category2020 .textblock .rte_container em { font-size: 16px; }

    #category2020 .textblock .table_wrapper { padding: 20px; box-sizing: border-box; }

    #category2020 .textblock ul { padding: 0 20px 20px 50px; box-sizing: border-box; }

    #category2020 .textblock ul li { font-size: 16px; line-height: 28px; margin-bottom: 10px; padding-left: 50px; }

    #category2020 .textblock ul li:before {
        content: '';
        background: none;
        background-image: url(../assets/icon/checkmark_red.svg);
        background-size: 25px 25px;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        display: inline-block;
        width: 25px;
        height: 25px;
        position: absolute;
        top: calc(50% - 12px);
        left: 0;
    }

    #category2020 .background_grey { background: #f8f8f8; }
    #category2020 .background_red { background: #e6001d; }

    #category2020 .textblock .table_wrapper h3,
    #category2020 .textblock .table_wrapper h4 { font-size: 18px; margin-bottom: 10px; }

    #category2020 .textblock .table_wrapper table { width: 100%; border: 1px solid #636363; }

    #category2020 .textblock .table_wrapper table thead tr,
    #category2020 .textblock .table_wrapper table tbody tr { border-bottom: 1px solid #636363; }

    #category2020 .textblock .table_wrapper table thead tr td { text-align: center; font-weight: 700; }

    #category2020 .textblock .table_wrapper table thead tr td,
    #category2020 .textblock .table_wrapper table tbody tr td { border-right: 1px solid #636363; padding: 5px; }

    #category2020 .textblock .table_wrapper table td { width: 50%; }

    #category2020 .uspblock { background: #e6001d; text-align: center; margin: 50px 0 50px 0; }

    #category2020 .uspblock p { color: #fff; font-size: 24px; padding: 25px 50px 25px 50px; box-sizing: border-box; line-height: 1.25em; }

    #category2020 .uspblock ul { margin-bottom: 0;}

    #category2020 .uspblock ul li { list-style-type: none; padding-left: 0; float: left; width: 20%; text-align: center;  padding: 50px 15px 50px 15px; box-sizing: border-box;  }

    #category2020 .uspblock ul li:before { display: none; }

    #category2020 .uspblock ul li img { display: inline-block; margin-bottom: 5px; }

    #category2020 .uspblock ul li span { color: #fff; display: block; font-weight: 700; font-size: 16px;  }

    #category2020 .uspblock.small { background: #575757; padding: 25px; box-sizing: border-box; }

    #category2020 .uspblock.small h3 { color: #fff; text-align: left; }

    #category2020 .uspblock.small ul { display: flex; flex-wrap: wrap;}

    #category2020 .uspblock.small ul li { width: 25%; }

    #category2020 .uspblock.small ul li img { margin-bottom: 15px; }

    #category2020 .uspblock.small ul li span { font-weight: 300; }

    #category2020 .textblock .splide ul li { padding-left: 0; }

    #category2020 .textblock .splide ul li:before { display: none; }

    #category2020 .textblock .splide ul li .splide__content { padding: 0 25px; box-sizing: border-box; }

    #category2020 .textblock .splide ul li .splide__content img { border: 1px solid #e9e9e9; width: 100%; margin-bottom: 0;  box-sizing: border-box;}

    #category2020 .textblock .splide ul li .splide__content .textWrapper { background: #e9e9e9; text-align: center; padding: 20px; box-sizing: border-box; }

    #category2020 .textblock .splide ul li .splide__content a { color: #fff!important; margin-bottom: 0; }

    #category2020 .textblock .splide .splide__arrow { background: #e6001d; }

    #category2020 .textblock .linkwrapper { margin-top: 50px; }

    #category2020 .textblock .linkwrapper a { color: #fff!important; padding: 0 25px; box-sizing: border-box; margin-bottom: 0; }

    #category2020 .textblock .cols { display: flex; flex-wrap: wrap; }

    #category2020 .textblock .cols .col_3 {
        width: 33.333%;
        padding: 20px;
        box-sizing: border-box;
    }
    #category2020 .textblock .cols .col_3 .col_content {
        display: flex; flex-wrap: wrap;
        background: #e9e9e9;
        padding: 20px;
        box-sizing: border-box;
    }
    #category2020 .textblock .cols .col_3 .col_content img { width: 100px; align-self: baseline; margin-bottom: 0;  }

    #category2020 .textblock .cols .col_3 .col_content .textWrapper { width: calc(100% - 100px); padding-left: 20px; box-sizing: border-box; }

    #category2020 .textblock .cols .col_3 .col_content .textWrapper h3 { margin-bottom: 10px; font-size: 18px; }

    #category2020 .textblock .cols .col_3 .col_content .textWrapper p { margin-bottom: 0; }

    #category2020 .textblock .cols .col_3:last-of-type { display: flex; align-items: center;   flex-wrap: wrap;
        justify-content: space-between; }

    #category2020 .textblock .cols .col_3 .linkWrapper { width: 100%; }

    #category2020 .textblock .cols .col_3 .linkWrapper a { color: #fff!important; padding: 0 25px; margin-bottom: 0; }


}
@media screen and (max-width: 1420px) {
    #category2020 .textblock .col_wrapper .col_left.col_small,
    #category2020 .textblock .col_wrapper .col_right.col_small { width: 45%; }

    #category2020 .textblock .col_wrapper .col_left.col_large,
    #category2020 .textblock .col_wrapper .col_right.col_large { width: 55%; }
}

@media screen and (max-width: 1280px) {

    #category2020 .textblock .cols .col_3 { width: 50%; }
}

@media screen and (max-width: 1023px) {

    #category2020 header.headline img { width: 100%; left: inherit; }

    #category2020 .headline.trade-groups > .description { width: 60%; padding-right: 0; }

    #category2020 .headline.trade-groups > .description h1 { margin: 0 0 10px 0; font-size: 24px; }

    #category2020 .headline.trade-groups > .description p { font-size: 14px; }

    #category2020 .textblock .col_wrapper .col_left { padding-right: 25px; }
    #category2020 .textblock .col_wrapper .col_right { padding-left: 25px; }

    #category2020 .textblock .col_wrapper .col_left.col_small,
    #category2020 .textblock .col_wrapper .col_right.col_small { width: 50%; }

    #category2020 .textblock .col_wrapper .col_left.col_large,
    #category2020 .textblock .col_wrapper .col_right.col_large { width: 50%; }

    #category2020 .uspblock.small ul li { width: 50%; }
}

@media screen and (max-width: 800px) {

    #category2020 .headline.trade-groups > .description h1 { font-size: 18px; }

    #category2020 .headline.trade-groups > .description p { display: none; }

    #category2020 .textblock .col_wrapper .col_left { padding-right: 0; }

    #category2020 .textblock .col_wrapper .col_right { padding-left: 0; }

    #category2020 .textblock .col_wrapper .col_left.col_small,
    #category2020 .textblock .col_wrapper .col_right.col_small,
    #category2020 .textblock .col_wrapper .col_left.col_large,
    #category2020 .textblock .col_wrapper .col_right.col_large { width: 100%; }

    #category2020 .uspblock ul li { width: 50%; }
    #category2020 .uspblock ul li:last-of-type { width: 100%; }

    #category2020 .uspblock.small ul li { width: 100%; }

    #category2020 .textblock .cols .col_3 { width: 100%; }
}

@media screen and (max-width: 768px) {
    #category2020 .textblock h2 { font-size: 24px; margin-bottom: 24px;}
    #category2020 .textblock .col_wrapper .col_left { margin-bottom: 50px; }
}

@media screen and (max-width: 600px) {

    #category2020 header.headline:after {
        content: '';
        position: absolute; top: 0; left: 0;
        width: 100%; height: 100%;
        background: #636363;
        opacity: 0.6;
    }

    #category2020 .headline.trade-groups > .description { width: 100%; z-index: 1; padding: 10px 0 0 0; }

    #category2020 .headline.trade-groups > .description h1 { color: #fff; }

    #category2020 .uspblock ul li { width: 100%; }
}

/*

Individuelles Formular Relaunch 2020

*/

@media screen {
    #form_individual #usp-bar,
    #form_individual .parallax,
    #form_individual .payment-bar{ display: none; }

    #form_individual .col_right p { display: block; text-align: center; }
    #form_individual .col_right p strong { display: block; text-align: center; font-size: 36px; }

    #form_individual .col_right p strong a:hover,
    #form_individual .col_right p strong a:focus,
    #form_individual .col_right p strong a:active { text-decoration: none; }
}

/*
remark
*/

#visual_calculation .contentwrapper.right #comments .remark { position: relative}
#visual_calculation .contentwrapper.right #comments .remark input { width: 100%!important; box-sizing: border-box; }
#visual_calculation .contentwrapper.right #comments .btnCalcOptical { position: absolute!important; right: 0; bottom: 0;}
#visual_calculation .contentwrapper.right #comments .remark ~ br { display: none; }