.menu-item-cart span {font-size: 10px;
    bottom: 5px;
    left: 5px;
    width: 100%;
    position: absolute;}
.menu-item-cart span.count { right: 0; left: auto}
form.search.searchOffer {
    display: none
}
#payment-bar { display: none}
.hrSignet { display: block;
    width: 80px;
    margin: -80px auto 0px auto;
    background: white; border: 10px solid white}
.center { text-align: center}


.pt100 { padding-top: 100px}
.pb100 { padding-bottom: 100px}
.pt150 { padding-top: 150px}
.pb150 { padding-bottom: 150px}

.bg {background: #f1f0ef}
/*.col-2 {column-count: 2;}*/
.msg { background: #8F004A; color: white; padding: 20px}
.color { color: #8F004A}
.upper { text-transform: uppercase}
main#page h1, main#impressum h1 {font-size: 4rem;}


.trade-groups, #trade-blocks { display: none}
#visual_calculation .contentwrapper.right h2 { color: black; font-size: 1.5rem;}
#visual_calculation .contentwrapper.right #printTemplates { margin-top: 0}
#total_block a {
    float: right;
    font-size: 12px;
    width: 100%;
    text-align: right;
}
#visual_calculation .contentwrapper.right button.success ~ hr {
    display: none;
}
#visual_calculation .contentwrapper.right button.success {     margin-bottom: 10px;
    font-size: 1.4rem;
    padding: 10px;
    box-sizing: border-box;
    height: auto;
    white-space: nowrap;
    font-family: 'bold'; line-height: 30px}
#visual_calculation .contentwrapper.right button:before { content: none}

.select option[value=d] {display: none;}
form article .upload_field progress { margin-left: 0}
#contact form article { margin-bottom: 0}
#indexUSP { background: url("../assets/usp_bg.png") top center no-repeat; background-size: cover; height: 630px; position: relative; display: flex;
    justify-content: center; gap: 20px; margin-bottom: 200px}
#indexUSP.wrp { padding: 0}
#indexUSP .colLeft, #indexUSP .colRight { background: white; text-align: center; width: 32%; height: 82%; padding: 40px; box-sizing: border-box}
#indexUSP .colLeft { padding-top: 20px}
#indexUSP .colLeft img, #indexUSP .colRight img {max-width: 20%;}
#indexUSP .colLeft h3, #indexUSP .colRight h3 { margin-bottom: 60px}
#indexUSP .colLeft h3 { margin-top: 30px}
#indexUSP .colLeft p, #indexUSP .colRight p { font-family: bold; font-size: 1.5rem;}
#indexUSP .colLeft {}
#indexUSP .colRight {align-self: flex-end;}

#cmsUSP { background: url("../assets/cms_bg.jpeg") top center no-repeat; background-size: cover; height: 604px; }
#cmsUSP .wrp, #contentWrapper.wrp { padding: 0}
#cmsUSP hr { margin: 0 0 40px;}
#cmsUSP .text { background: white; width: 70%; margin: 0 auto; height: 100%;
    padding: 40px; box-sizing: border-box}
#cmsUSP #download-bar { background: none; padding-top: 10px;}
#cmsUSP #download-bar.downloads span { width: 35%}
#cmsUSP #download-bar.downloads.downloads img {max-height: 95px; margin-bottom: 15px}

@media screen and (max-width: 1280px) {
    #indexUSP .colLeft h3, #indexUSP .colRight h3 {margin-bottom: 30px; font-size: 2.5rem;}
    #indexUSP .colLeft p, #indexUSP .colRight p { font-family: bold; font-size: 1.2rem }
}
@media screen and (max-width: 860px) {
    #indexUSP { margin-bottom: 100px}
    #indexUSP .colLeft h3, #indexUSP .colRight h3 {font-size: 2.2rem;}
    #indexUSP .colLeft, #indexUSP .colRight { width: 40%}

}
@media screen and (max-width: 667px) {
    #indexUSP { flex-wrap: wrap;}
    #indexUSP .colLeft, #indexUSP .colRight { width: 85vw; height: auto; padding: 20px}
    #indexUSP .colLeft img, #indexUSP .colRight img {max-width: 15%;}
    #indexUSP .colLeft p, #indexUSP .colRight p { font-family: bold; font-size: 1rem }
}
@media screen and (max-width: 500px) {
    #indexUSP .colLeft h3, #indexUSP .colRight h3 {margin-bottom: 15px; font-size: 2rem;}
    #indexUSP .colLeft p, #indexUSP .colRight p { line-height: 1.2rem }
}
#datasheetsBtn a.datasheetsBtn { display: block; font-family: bold; font-size: 1.5rem; display: flex;
    align-items: center; margin: 15px 0}
#datasheetsBtn a.datasheetsBtn:hover { cursor: pointer; text-decoration: none}
#datasheetsBtn .datasheetsBtn img { width: 80px; margin-right: 15px; margin-bottom: 0}

#stepsCon {background: url("../assets/steps_bg.png") top right no-repeat; background-size: contain; height: 700px; position: relative; margin-bottom: 200px}
#stepsCon .steps { font-size: 2.25rem; font-family: bold;}
#stepsCon .steps span { display: block;  margin-bottom: 20px}
#stepsCon .steps img { width: 50px; margin-right: 15px}
#stepsCon .steps  .btn { float: right; margin-top: 50px}

@media screen and (max-width: 1280px) {
    #stepsCon { background-position: right bottom;background-size: 42vw;height: 63vw; margin-bottom: 80px}
    #stepsCon .col_left { width: 100%; padding-left: 0}
    #stepsCon .col_left p{ width: 58vw; }
    #stepsCon .col_left h2 { font-size: 7vw}
    #stepsCon .steps span {font-size: clamp(16px, 3vw, 22px);}
    #stepsCon .steps img {width: 5vw;}
    footer.main>.wrp address {
        width: 20%;}
    footer.main>.wrp>nav {
        width: 30%;
    }
}
@media screen and (max-width: 1023px){
footer.main>.wrp>nav {
    width: 31.5%;}
}
@media screen and (max-width: 860px) {
    #stepsCon h2 { font-size: 7vw}
    #stepsCon {height: 72vw;}
}
@media screen and (max-width: 800px) {
    #stepsCon .steps .btn { float: none; width: 100%; margin-top: 20px}
    #cmsUSP { height: auto}
    #download-bar.downloads .individualUSP {justify-content: space-between;}
    #cmsUSP #download-bar.downloads span {
        width: 45%;
    }
    #cmsUSP .text { width: 85%}

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

}
@media screen and (max-width: 676px) {
    #download-bar.downloads span { width: 40%}
    #download-bar.downloads .individualUSP { display: block}
    #cmsUSP #download-bar.downloads span {
        width: 100%;
    }

}
@media screen and (max-width: 600px) {
    #stepsCon {height: 85vw;}
    #stepsCon .steps .btn { float: none; width: 100%; margin-top: 20px}

}

@media screen and (max-width: 500px) {
    #stepsCon { background: none; height: auto}
    #stepsCon .col_left p{ width: 100%; }
    #stepsCon .col_left, #stepsCon .steps .btn { margin-bottom: 0; padding-bottom: 0;}
    #usp-bar.individualUSP .individualUSP { flex-wrap: wrap}
    #usp-bar.individualUSP span { width: 40%}
    footer.main>.wrp>nav {
        width: 100%;}
    footer.main>.wrp>nav.payments img {
        width: 27%;}
    .col-2 {column-count: 1;}
}


#content { padding: 40px 0}
#content .col_left, #content .col_right { margin-bottom: 0; text-align: left}


.center { text-align: center}
#totop .wrp { padding: 0}

.mobile { display: none !important}
@media screen and (max-width: 767px) {
    .mobile { display: inline-block !important}
    .desktop { display: none !important}
}

#contact_person { display: flex; flex-wrap: wrap;
    justify-content: center;  margin-top: 80px; column-gap: 40px; margin-bottom: 80px}
#contact_person .contact_person { text-align: center; margin-bottom: 80px}
#contact_person h2 { margin-bottom: 40px;flex: 0 0 100%;}
#contact_person .contact_person strong { display: block; margin-top: 40px; color: #8F004A}




/****Accordion*****/.transition, ul li i:before, ul li i:after, p {
                        transition: all 0.25s ease-in-out;
                    }

#flipIn .flipIn, #flipIn ul li, #flipIn h1 {
    animation: flipdown 0.5s ease both;
}

#flipIn .no-select, #flipIn h2 {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#flipIn h1, #flipIn h2 {
    color: black;
}

#flipIn h1 {
    text-transform: uppercase;
    font-size: 36px;
    line-height: 42px;
    letter-spacing: 3px;
    font-weight: 100;
}

#flipIn h2 {
    font-size: 24px;
    display: block;
    margin: 0;
    cursor: pointer;
    font-family: bold;
}

#flipIn p {

    line-height: 26px;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
    max-height: 800px;
    opacity: 1;
    transform: translate(0, 0);
    margin-top: 14px;
    z-index: 2;
}

#flipIn ul {
    list-style: none;
    perspective: 900;
    padding: 0;
    margin: 0;
}
#flipIn ul li {
    position: relative;
    padding: 0;
    margin: 0;
    padding-bottom: 0;
    padding-top: 20px;
    border-top: 1px solid black;
}
#flipIn ul li:nth-of-type(1) { animation-delay: 0.5s;}
#flipIn ul li:nth-of-type(2) { animation-delay: 0.75s;}
#flipIn ul li:nth-of-type(3) {animation-delay: 1s;}
#flipIn ul li:nth-of-type(4) {animation-delay: 1.25s;}
#flipIn ul li:nth-of-type(5) {animation-delay: 1.5s;}
#flipIn ul li:nth-of-type(6) {animation-delay: 1.75s;}
#flipIn ul li:nth-of-type(7) {animation-delay: 2s;}
#flipIn ul li:nth-of-type(8) {animation-delay: 2.25s;}
#flipIn ul li:nth-of-type(9) {animation-delay: 2.5s;}
#flipIn ul li:nth-of-type(10) {animation-delay: 2.75s;}
#flipIn ul li:nth-of-type(11) {animation-delay: 3s;}
#flipIn ul li:nth-of-type(12) {animation-delay: 3.25s;}


#flipIn ul li:last-of-type {padding-bottom: 0;}
#flipIn ul li i {
    position: absolute;
    transform: translate(-6px, 0);
    margin-top: 25px;
    right: 0;
}
#flipIn ul li:before {
    display: none;
}
#flipIn ul li i:before, #flipIn ul li i:after {
    content: "";
    position: absolute;
    background-color: #8F004A;
    width: 3px;
    height: 9px;
    display: block !important;
    top: -20px;
}
#flipIn ul li i:before {
    transform: translate(-2px, 0) rotate(45deg);
    display: block !important;
}
#flipIn ul li i:after {
    transform: translate(2px, 0) rotate(-45deg);
    display: block !important;
}
#flipIn ul li input[type=checkbox] {
    position: absolute;
    cursor: pointer;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
}

#flipIn ul li input[type=checkbox] { display: block !important}
#flipIn ul li input[type=checkbox]:checked ~ p {
    margin-top: 0;
    max-height: 0;
    opacity: 0;
    transform: translate(0, 50%);
}
#flipIn ul li input[type=checkbox]:checked ~ i:before {
    transform: translate(2px, 0) rotate(45deg);
}
#flipIn ul li input[type=checkbox]:checked ~ i:after {
    transform: translate(-2px, 0) rotate(-45deg);
}

@keyframes flipdown {
    0% {
        opacity: 0;
        transform-origin: top center;
        transform: rotateX(-90deg);
    }
    5% {
        opacity: 1;
    }
    80% {
        transform: rotateX(8deg);
    }
    83% {
        transform: rotateX(6deg);
    }
    92% {
        transform: rotateX(-3deg);
    }
    100% {
        transform-origin: top center;
        transform: rotateX(0deg);
    }
}

#cart_second input.btn.success, #cart_third_buy .btn.success {
                  margin-left: 0;
                  width: 100%;
              }

#cart_third .col_left .icon, #cart_third .col_right .icon { top: 0; left: 0;}
#cart_third section strong { margin-left: 35px}
#cart_third section .btn.edit {
    top: 0;}

form#tracking_search button[name=cmd_calc] { padding: revert}
main#account_tracking.sidebar_content .col_left, main#account_tracking.sidebar_content .col_right { margin-bottom: 100px}
main#account_tracking .col_left h1, main#account_tracking .col_right h1 {

    font-size: 1.75rem;
}
#cart_third #special button { height: 40px}
#contact .btn.success {
    margin-left: 0; width: 100%}
#contact .privacypolicyContact>label:last-of-type {
    width: 90%;
    font-size: 14px;
    text-align: left;
}
#contact fieldset.privacypolicyContact {
    width: 100%;
}


@media screen and (max-width: 800px) {
    main#page h1, main#impressum h1, h1, h3 {font-size: clamp(31px, 8vw, 82px)}
    #datasheetsBtn a.datasheetsBtn, #flipIn h2 {font-size: clamp(18px, 4vw, 1.5rem)}
    #datasheetsBtn .datasheetsBtn img {
        width: 10vw;}
    #contact form article .btn:not([name="cmd_calc"]) { margin-left: 0}

}
@media screen and (max-width: 715px) {
    form:not([id=formular_reseller]) label {
        width: 100%;
    }
}
#pw_lost form:not([id=formular_reseller])>.btn:not([name=cmd_calc]), #register form:not([id="formular_reseller"])>section:not(#total_block)>.btn:not([name="cmd_calc"]), #address form:not([id="formular_reseller"]) article .btn:not([name="cmd_calc"]), #address form:not([id="formular_reseller"])>.btn:not([name="cmd_calc"]), #register .actionbar .btn.success{
    margin-left: 0;
    width: 100%;
}
#pw_lost form:not([id="formular_reseller"]) input:not(.btn) { width: 97% }

#register .saveSettings .actionbar .btn.back {
    background: #c4c4c4;
    color: #fff;
    border-color: #b7b7b7;
    width: 100%;
}
#contactlist>form table tbody tr td {
    padding: 20px 10px;
}
#upload #upload_section .btn.continue {

     width: auto;
}
.fileinput label { line-height: 60px !important}

.parallax .rte_container .wrp .parallaxText .col_left a { color: white !important}

#orders.cms a {
    padding: 15px 0;
}
#orders.cms article img { max-width: 50%}
#orders.cms a strong { font-size: 19px}
#orders a .btn { margin-top: 10px}