:root { --color_highlight: #e3000f; --color_font: #212529; --color_white: white; --color_dark: #4c5458; --color_green: #e3000f; --color_gray: #f7f7f7; --color_individual: #202025; --color_black: #000; } /*html { overflow-x: hidden}*/ main header img { max-width: 100%} #mig {background: #ededed; height: 2px;} #mig .wrp {font-family: 'libre-light'; line-height: 30px; padding-left: 105px; box-sizing: border-box; z-index: 1;} #mig .wrp img { position: absolute; left: 0px; top: -8px;} form.search{float: left; margin-top: 14px; margin-left: 0px; position: relative; left: -180px;} form.search input{font-family:'regular', 'Helvetica', arial, sans-serif;font-style:italic;width:370px;border-radius:4px !important;background-color:#fff} form.search input:hover{background:none;cursor:text} form.search input[type="submit"]{position:absolute;width:50px;height:50px;border:none;background:url("../assets/loupe.png") no-repeat;right:-17px;top:12px;} form.search input[type="submit"]:hover{cursor:pointer;} @media screen and (max-width:1280px) { form.search{left: auto;} } @media screen and (max-width:1024px) { form.search{margin-left:5px; } form.search input{width:30vw} } @media screen and (max-width:905px){ form.search input{width:40vw} } @media screen and (max-width:830px) {form.search input{width:36vw} } @media screen and (max-width:767px) { form.search { width: 98%;left: 0px; position: absolute; top: 80px;} form.search input { width: 100% } } @media screen and (max-width:400px){ form.search{top:45px;} section .sidebar li a { font-size: 14px} section .sidebar { display: none} .trade-groups .content .card { width: 100%} } .counter{ width:100%; height: 500px; background-size: cover; background-position: center; -webkit-box-shadow: inset 0px 0px 20px 2px rgba(0,0,0,0.24); -moz-box-shadow: inset 0px 0px 20px 2px rgba(0,0,0,0.24); box-shadow: inset 0px 0px 20px 2px rgba(0,0,0,0.24); } #counter { width:500px; margin: 0 auto; text-align: center} /* #counter p { font-size: 24px;font-family: 'libre-regular'; margin-top: 80px; margin-bottom: 50px} #counter .counter_col {float: left; width:33.3333%;} .counter-value { text-align: center; font-size: 32px; color: #366973} #counter .counter_col img { display: inline-block; height: 27px} #counter .counter_col hr { margin: 5px 15px 10px 15px}*/ .benefits.wrp { margin-top: 25px; margin-bottom: 25px} .benefits > div { font-family: 'libre-regular'; font-size:17px; line-height: 19px; float: left; margin-right: 2%; padding: 17px 15px; box-sizing: border-box; color: #fff;; padding-left: 84px;} .benefits > div span { display: block; font-family: 'libre-bold'; font-size: 22px; line-height: 24px; text-transform: uppercase} .benefits > div br { line-height: inherit} .benefits > div:first-child { background: url("../assets/benefit_bg_rabatt.png") no-repeat 15px center; width: 49.5%; background-size: 10%} .benefits > div:nth-of-type(2) { background: url("../assets/benefit_bg_service.png") no-repeat 15px center; width: 28.5% ; background-size: 18%} .benefits > div:nth-of-type(3) { background:url("../assets/benefit_bg_faq.png") no-repeat 15px center;width: 18% ; margin-right: 0; background-size: 26%} @media screen and (max-width:1280px) { .benefits > div {padding: 10px 15px; background-size: contain !important; font-size:16px;} .benefits > div span { font-size: 18px} } @media screen and (max-width:900px) { .benefits.wrp { padding:0} .benefits > div:first-child, .benefits > div:nth-of-type(2), .benefits > div:nth-of-type(3) { width:100%; margin-bottom: 1px} } @media screen and (max-width:600px) { .benefits.wrp { margin-top: 0} main.category header img { display: none} #mig { display: none} #creatorContentWrapper > main, main#upload { margin-top: 0} } #homepage-text1 {padding: 25px 0} #homepage-text2 { text-align: center} #homepage-text2 .headline { font-size: 24px; text-transform: uppercase; margin-bottom: 15px; font-family: 'libre-regular';} #homepage-text2 .subline { text-transform: uppercase; font-size: 16px; font-family: 'libre-regular';} #homepage-text2 .col_left, #homepage-text2 .col_right { text-align: justify; padding: 15px 0} #homepage-text2{padding:0 0 38px 0; } #homepage-text4 {padding: 38px 0;} /*#homepage-text3 .wrp > div li, #homepage-text4 .wrp > div li { color: #fff} #homepage-text3 .wrp > div .headline {font-family: 'libre-light'; font-size: 18px; margin-bottom: 5px }*/ #homepage-text4 .wrp > div .headline {font-family: 'libre-light'; font-size: 28px;color: #fff; margin-bottom: 0} #modulesPrinttemplate li { width: 50%; float: left; } #modulesPrinttemplate h3 {display: none} /*main .col_right { padding-top: 55px;}*/ main#cart_second .col_right, main#cart_third .col_right { padding-top: 25px;} main#cart_third .col_right, main#cart_third .col_left { min-height: 200px} main#cart_second .col_right, main#cart_second .col_left { padding:25px} main#cart_second .col_right h3, main#cart_second .col_left h3 { font-size: 24px;} main#cart_second .col_right p,main#cart_second .col_left p { margin-bottom: 25px} main#cart_third .col_right, main#cart_third .col_left{padding: 25px 50px;} section#cart_third_payment fieldset { margin-bottom: 0} #cart .product_calculation td span.headline {color: var(--color_highlight); } #cart #sidebar section h2 { font-weight: bold; font-size: 14px; color: #212529; display: block; margin-bottom: 20px; } #cart_third .btn.edit { overflow: unset; line-height: 30px; display: block} .cc_css_reboot *::before { content: none} form:not([id=formular_reseller]) .info { float: right !important; } .customPaymentInput { height: 0; width: 0; position: fixed; left: -2000px; top: 0; z-index: -1; } .customPaymentInput + label { display: block; width: 100%!important; text-align: left !important; padding-right: 40px; margin-bottom: 15px; position: relative; } .customPaymentInput + label:hover { cursor: pointer} .customPaymentInput + label > span { display: inline-block; max-width: 75%; padding-left: 5px; box-sizing: border-box; vertical-align: middle; } .customPaymentInput + label.PayPalApi:before, .customPaymentInput + label.PayPalPlus:before{ content: ' '; width: 150px; height: 54px; display: inline-block; background-image: url("../assets/paymentCustompaypalplus.png"); background-size: 150px 54px; background-repeat: no-repeat; background-position: center; vertical-align: middle; } .customPaymentInput + label.Sofort { margin-top: 20px} .customPaymentInput + label.Sofort:before { content: ' '; width: 150px; height: 47px; display: inline-block; background-image: url("../assets/paymentCustomUeberweisung.png"); background-size: 150px 47px; background-repeat: no-repeat; background-position: center; vertical-align: middle; } #cart_third div[name~="bezahlung"] .customPaymentInput:checked + label::after, #cart_third div[name~="bezahlung"] .customPaymentInput:hover + label::after { content: "\2713"; color: #166A12; font-size: 24px; line-height: 32px; font-weight: bold; text-align: center; border: 2px solid #166A12; border-radius: 24px; width: 32px; height: 32px; background: none; position: absolute; right: 0; } section#cart_third_payment .col_left, section#cart_third_payment .col_right { min-height: 275px; } #cart_third_payment small { display: inline-block; } #cart_third form:not([id="formular_reseller"]) h2:after, #cart_third form:not([id="formular_reseller"]) h3:after, #cart_third form:not([id="formular_reseller"]) h4:after, #cart_third form:not([id="formular_reseller"]) h5:after, #cart_third form:not([id="formular_reseller"]) h6:after { display: none} #cart_third form:not([id="formular_reseller"]) h2, #cart_third form:not([id="formular_reseller"]) h3, #cart_third form:not([id="formular_reseller"]) h4, form:not([id="formular_reseller"]) h5, #cart_third #cart_third form:not([id="formular_reseller"]) h6 { width: auto; text-align: left; font-family: regular} #cart_third form:not([id="formular_reseller"]) h2 { font-size: 21px; margin-top: 0; margin-bottom: 0} #cart_third form:not([id="formular_reseller"]) h3 { font-size: 18px; margin-top: 0; margin-bottom: 0} #product-detail #detail_infobar li { padding: 0; list-style: disc; margin-left: 18px;} #product-detail #detail_infobar #modulesPrinttemplate li, #product-detail #detail_infobar #detail_infobar_gallery li {list-style: none; margin-left: 0} #visual_calculation .contentwrapper.right #comments { display: block} main#account_tracking .col_left, main#account_tracking .col_right { font-family: 'bold'} main#account_tracking .col_right .buttonWrapper { margin-top: 25px} #orders_canceled h2 {text-align: left; font-size: 21px; color: red; width: auto} #orders_canceled h2:after { border: none} #orders a, #orders_canceled a { background: none; padding-left: 0;} #orders a strong, #orders_canceled a strong { margin-left: 0} #total_block .btn.success { background: var(--color_highlight); color: white; } #total_block .btn.success:hover { background: white; color: var(--color_highlight); } .infobox { width: 32%; float: left; margin-right: 2%; background: white; min-height: 360px; padding-bottom: 10px;border: 1px solid rgba(0, 0, 0, 0.125); box-sizing: border-box} .infobox:last-of-type { margin-right: 0} .infobox img { max-width: 100%; margin-bottom: 10px; width: 100%;} .infobox strong {font-size: 18px;; margin-left: 15px} .infobox p { margin-left: 15px; font-size: 16px} .infobox a { color: black} .infobox:hover a { text-decoration: none; } .infobox:hover { box-shadow: 0 5px 20px rgb(0 0 0 / 20%);} .social-networks { margin: 15px 0; padding: 0; font-size: 0; } .social-networks li { display: inline-block;} .social-networks a { display: block; position: relative; margin: 0 15px 0 0; width: 25px; height: 25px; font-size: 0; line-height: 0; text-align: center; text-decoration: none;} .social-networks a img{filter: invert(1);} .social-networks a img:hover { opacity: .8} .social-networks a:before, .social-networks li:before { display: none} #finish .item { width: 100%; padding: 0; margin-bottom: 25px;} #finish .item hr { margin: 15px 0} #finish .item .btn { float: right} #finish .item .headline { margin-bottom: 10px; font-size: 21px;} #finish .item .label { height: auto; line-height: 1.4em} .red { color: var(--color_highlight); !important} @media screen and (max-width:1024px) { .benefits.wrp { padding: 0} #mig .wrp img {left: 10px} #mig .wrp { padding-left: 115px} } #navbar .topMenu { margin-left: 10px; display: inline-block; cursor: pointer; padding: 0 10px; eight: 39px; font-size: 16px; border-radius: 3px; transition: all 0.25s ease-out; position: relative; line-height: 38px; } #navbar .topMenu:hover { transition: all 0.25s ease-out; text-decoration: none} #creatorContentWrapper .breadcrumb { margin-top: -2px} #reseller_attributes fieldset label { margin-top: 4px; } .select2-search--dropdown { display: none; } .select2 .select2-selection--single { background: url(../assets/elements_select.png) no-repeat 98% center #f7f7f7; background-size: 25px 25px; font-family: 'bold'; border-radius: 2px !important; border: solid 1px #b6b6b6; box-sizing: border-box; padding: 10px; font-size: 14px; height: 40px; width: 350px; float: left; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0; line-height: 18px;font-family: 'bold';color: #696969; } .select2-container--default .select2-selection--single .select2-selection__arrow { display: none; } .select2-results__option[aria-selected], .select2-results__option select2-results__message { font-size: 14px;font-family: 'bold'; } input:read-only:focus { border: solid 1px #b6b6b6; color: #444; } @media screen and (max-width: 1023px) { .select2 .select2-selection--single { width: 240px; } .pw-option-disabled .pw-option { color: lightgray} } @media screen and (max-width: 500px) { .select2 .select2-selection--single { width: 100%; } #reseller_attributes h3 { border-bottom: 1px solid #cfcfcf; background: none; margin-bottom: 5px} #configurator { padding-top: 35px} #modulesPrinttemplate li { width: 100%;} } .description.col_left p, .description.col_right p { margin-bottom: 20px} .cd-dropdown-content .cd-secondary-dropdown ul { padding-bottom: 25px;} .cd-dropdown-content .cd-secondary-dropdown > li {margin: 8px 0 0 0 ;} .cd-dropdown-content .cd-secondary-dropdown > li > a { margin-bottom: 0} .cat_listing article header table td:nth-child(2), .cat_listing article header table td:nth-child(3) {display: none} .cat_listing article .content table td:nth-child(2), .cat_listing article .content table td:nth-child(3) {display: none} .cat_listing article .content table td:first-child {width: 410px;} .cat_listing article header {padding: 0px 40px 0 10px;} .cat_listing article .content figure * { font-size: 14px} .cat_listing article .content figure { padding: 5px 25px 0 10px; box-sizing: border-box} .cat_listing article .content figure img {max-width: 398px; margin: 3px 0 15px 0;} /*.cat_listing article .content table tr:nth-child(odd) td:last-child, .cat_listing article .content table tr:nth-child(even) td:last-child { background: #6eaebb} .cat_listing article .content table tr:nth-child(odd) td:last-child:hover, .cat_listing article .content table tr:nth-child(even) td:last-child:hover { background: #356973} .cat_listing article .content table tr:hover td { background: #356973} */ @media screen and (max-width: 770px) { .cat_listing article .content table td:first-child { width: 100%; } } .cd-secondary-dropdown strong { font-size: 15px} #navbar .service-menu div {display: none} header.main #service-bar { background: white} header.main #service-bar span, header.main #service-bar span.label_tel, header.main #service-bar span.label_mail, header.main #service-bar a, header.main #service-bar span.label_tel:before, header.main #service-bar span.label_mail:before, header.main #service-bar ul li, header.main #service-bar ul li a { color: #000} header.main #service-bar ul li {font-size: 12px;margin-left: 35px;} header.main #service-bar ul li.account, header.main #service-bar ul li button { position: relative; padding-right: 8px} header.main #service-bar ul li.account span:before, header.main #service-bar ul li button:before {content: url("../assets/kt-icon/user.svg"); position: absolute;left: -22px; top: 0; width: 15px;} header.main #service-bar ul li.account span:hover, header.main #service-bar ul li button:hover { cursor: pointer; color: var(--color_highlight);} header.main #service-bar span.label_tel:before { content: url("../assets/kt-icon/phone.svg"); } header.main #service-bar span.label_mail:before { content: url("../assets/kt-icon/envelope.svg"); } header.main #service-bar span.label_tel:before, header.main #service-bar span.label_mail:before {margin-right: 7px; transform: scale(1); width: 15px; height: 15px;} @media screen and (max-width: 1046px) { header.main #service-bar ul li {margin-left: 20px;} } footer.main i:before {content: url("../assets/kt-icon/phone.svg"); width: 20px; filter: invert(); margin-top: -4px;} footer.main i.mail:before {content: url("../assets/kt-icon/envelope.svg"); } header.main { height: auto; margin-bottom: 0} /*#brand-logo { position: absolute; top: -211px; margin-top: 0;} #brand-logo img { border: 15px solid white; width: 268px;-webkit-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.4);-moz-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.4);box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.4);}*/ #navbar { box-shadow: none; background: white; position: inherit; top: 0; left: 0; right: 0; position: relative; z-index: 5;height: auto; box-shadow: 0 1px 2px rgb(0 0 0 / 10%);border-bottom: 4px solid #e3000f;transition: all 0.25s ease-out} #navbar .HomeIcon { display: none} #navbar.sticky {transition: all 0.25s ease-out} #navbar.sticky #brand-logo { display: none} #navbar.sticky { height: 50px} #navbar.sticky #customer-menu { margin-top: 0} #navbar.sticky .HomeIcon { padding: 0; display: inline-block; left: -10px; position: relative} #navbar.sticky .HomeIcon img { width: 30px; top: 7px; position: relative;} .cd-dropdown-wrapper { margin-left: 2px; top: -4px;} header.main .wrp { padding: 0} #slider { background: var(--color_highlight);} #slider .slide figcaption a.btn.success { margin-top: 25px; width: fit-content; color: white; background-color: transparent; border-color: white} #slider .slide figcaption a.btn.success:hover { background-color: white; color: var(--color_highlight);} #navbar .topMenu { top: -4px} #headerImg { height: auto; position: relative} #headerImg.headerImg {background-repeat: no-repeat; background-position: center bottom; min-height: 200px; background-size: cover; background-color: var(--color_highlight);} #headerImg .wrp { position: relative; height: 400px} #headerImg .wrp .text {position: absolute; bottom: 0; color: white; padding-left: 340px;} #headerImg .wrp .text .headline { font-size: 150px; color: white; margin: 0; font-family: bold; line-height: 1em; } #headerImg .wrp .text p { color: white; font-size: 41px;} #headerImg .wrp .text p strong { font-size: 41px; color: white} #headerImg.headerImgCat .wrp .text .headline { font-size: 78px; color: white; margin: 0; font-family: bold; line-height: 1em; } #headerImg.headerImgCat .text { bottom: 38px} #headerImg.headerImgCat .wrp .text p { color: white; font-size: 27px;} #headerImg.headerImgCat .wrp .text p strong { font-size: 27px;} #upload #upload_section .btn.continue.btnAfterUpload { width: auto} #headerImg.individualForm .wrp .text { bottom: 30px} #headerImg.individualForm .wrp .text .headline {font-size: 98px; margin-bottom: 10px} #headerImg.individualForm .wrp .text p {font-size: 38px} @media screen and (max-width: 1108px) { #headerImg.individualForm.headerImg { background-position: right} #headerImg.individualForm .wrp .text .headline {font-size: 78px; margin-bottom: 5px} #headerImg.individualForm .wrp .text p, #headerImg.individualForm .wrp .text strong {font-size: 26px} } @media screen and (max-width: 824px) { #headerImg.individualForm .wrp .text .headline {font-size: 52px;} #headerImg.individualForm .wrp .text p, #headerImg.individualForm .wrp .text strong {font-size: 21px} } #customer-menu .cmButtonName { display: none;} #overlay.active { opacity: 0; cursor: inherit} .individualUSP span { min-height: 100px; position: relative} #usp-bar.individualUSP.blackBG { background: black; color: white} #usp-bar.individualUSP.blackBG span p { padding: 0 25px; box-sizing: border-box;} #usp-bar.individualUSP.blackBG span p, #usp-bar.individualUSP.blackBG strong { color: white} #usp-bar.individualUSP.blackBG img { max-width: 65px; margin-top: 25px;} .breadcrumb li a { font-size: 14px; color: black; } .trade-groups.sidebar { background: white} .trade-groups .card, .product-listing .card { border-top: none;margin: 0 0 15px 0; } .trade-groups h3, .trade-groups h2,.trade-groups .headline, .product-listing h1, .catOeko.description h2 { font-family: 'regular'; color: black; font-size: 28px; margin: 25px 0; font-weight: 400} .tradegroups_tabs h3 { font-family: regular; color: black; font-size: 28px; margin-top: 25px; margin-bottom: 10px; display: none} .trade-groups figcaption h3, .trade-groups .card figcaption h2 , .product-listing h1 figcaption { margin-top: 0; text-transform: inherit; font-size: 18px; font-family: 'regular'; font-weight: 400;} .trade-groups.sidebar aside.sidebar li { width: 20%; } .trade-groups.sidebar aside.sidebar li a { font-family: 'regular'; padding: 15px 10px; } .trade-groups.sidebar aside.sidebar li a:after { text-transform: none; font-family: 'icon'; content: 'v'; } section .sidebar li:last-child a { border-bottom: solid 1px gray; } section .sidebar li a:hover { color: var(--color_highlight); border-bottom-color: var(--color_highlight)} .trade-groups.full .card.topseller { min-height: 410px;} .trade-groups.full .card.topseller figcaption { font-size: 14px} .trade-groups.full .card.topseller figcaption b {color: var(--color_highlight); font-size: 21px; margin-top: 15px; display: block;font-family: 'semibold';} .description { padding-top: 0} #payment-bar, #register #delivery_address { display: none} #upload, #uploadcheck, #contact, #address, #summary, #order_sample, #register, #calculator, #verify_address, #cart_second, #detail_free, #form_individual, #account_tracking, #newsletter, #finish, #fotolia, #crop, #page, #pw_lost, #visual_calculation, #cart_first, #cart_third { padding: 30px 0 0 0;} #cart_first, #cart_third { padding-top: 0} .catOekoBgGrey { background: #D0D0D0 !important} .catOekoBgGreen { background: #3A463D !important} .catOekoBgGreen *,.catOekoBgGreen a, .catOekoBgGreen h3 { color: white !important;} header.main #login.modal a:hover, header.main #login.modal button:hover { color: var(--color_highlight)} main#impressum h1 , main#page h1, main#contact h1, main#account_tracking h1, main#finish h1, main#register h1, main#pw_lost h1, main#form_individual h1, main#address h1 { font-family: semibold; color: black; margin-bottom: 25px;} .description.col_left h1, .description.col_right h1 { font-size: 21px; margin-bottom: 0} .description.col_left, .description.col_right { font-size: 18px} main#finish #delayed_upload h1 { font-size: 21px} main#finish, main#register { background: white; padding-bottom: 30px} main#address #formular { width: 55%} main#address #formular article { width: 100%} main#address aside { width: 43%} main#account_tracking h1 { font-size: 28px} main#account_tracking #orders small { display: inline-block} main#account_tracking .btn { margin-top: 20px} main#account_tracking.konto_tracking button[name="cmd_calc"] { fill: white; background-image: url("../assets/kt-icon/angle-right_white.svg"); background-repeat: no-repeat; background-position: center; background-size: 30%; margin-top: 0px} main#account_tracking.konto_tracking .btn {margin-top: 0px} .privacypolicyContact > label:last-of-type { width: 290px; font-size: 14px; } #upload #upload_section, #cart form {width: 60%;} #upload #upload_info, #cart #sidebar { width: 38%} #cart_third table tbody tr th:first-child {width: 51%;} header.head { font-size: 14px} header.head hr { margin: 10px 0 2px 0; border-color: #eaeaea} #visual_calculation #product_informations .content article.tab_content.menu-item-2:nth-of-type(1) { display: none !important} a.btn.success { color: var(--color_highlight)} #homepage-text3 {margin-bottom: 50px} #homepage-text3 .wrp {padding: 50px 0; border-top: 1px solid var(--color_highlight);border-bottom: 1px solid var(--color_highlight); } footer.main>.wrp>nav { float: left; } header.main #customer-menu #search.modal { padding: 20px; border: none; -webkit-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.4);-moz-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.4);box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.4);top: 30px;right: 81px;width: 310px;font-size: 12px;margin-top: 15px; font-size: 14px; z-index: 6;} header.main #login.modal { border: none; -webkit-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.4);-moz-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.4);box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.4); z-index: 6} header.main #customer-menu #search.modal a { display: inline-block;height: auto;float: none;margin: 0;text-align: inherit;position: inherit;width: inherit; } header.main #customer-menu #search.modal a strong { color: var(--color_highlight)} header.main #customer-menu #search.modal fieldset { margin-bottom: 7px} header.main #customer-menu #search.modal fieldset label, header.main #login.modal fieldset label { display: none} header.main #customer-menu #search.modal fieldset input, header.main #login.modal fieldset input { width: 100%; position: relative; height: 40px; font-size: 16px; margin-bottom: 10px;} header.main #login.modal fieldset input { left: 10px; margin-top: 0} header.main #login.modal a.pwLost { border: none; font-size: 12px; top: -15px; height: 15px;text-align: right;} #modalTemplates {z-index: 28} #modulesPrinttemplate li:before { content: none !important} header.main #navbar.sticky #customer-menu #login.modal { top: 45px} header.main #customer-menu .menu-item-login { display: none} header.main #navbar.sticky #customer-menu .menu-item-login { display: block} .hint { margin-top: 15px} .slide ul, .slide li > div { max-height: inherit !important} header.main #customer-menu{ margin-top: 45px; height: auto} #navbar.sticky ul.submenu li a { color: black; } #offcanvas ul { margin: 30px 0; } #offcanvas > ul { margin: 30px 10px; } main#account_tracking .col_left, main#account_tracking .col_right { margin-top: 25px; } /*main#account_tracking .col_left .btn, main#account_tracking .col_right .btn { margin-top: 25px; }*/ main#account_tracking.account_tracking_detail button.btn.cancel, main#account_tracking.account_tracking_detail a.btn { margin-top: 25px; margin-bottom: 0;} main#account_tracking.account_tracking_detail button.btn.cancel, main#account_tracking.account_tracking_detail a.btn{ width: 100%} #visual_calculation .contentwrapper.right #printTemplates #showTemplates { background-color: grey} #visual_calculation .contentwrapper.right #comments .remark input { border-color: var(--color_highlight)} @media screen and (max-width: 1366px) { .wrp {width: 92vw;} #navbar .wrp>ul>li a {font-size: 18px; padding: 10px 30px 10px 10px;} .trade-groups .content .card, .product-listing .content .card {height: 270px;} #navbar .wrp>ul { width: 100%} } @media screen and (max-width:1280px) { #cart form { width: 100%; } } @media screen and (max-width:1200px) { .trade-groups.sidebar aside.sidebar li { width: 33%; } section .sidebar li a { border-bottom: solid 1px gray; } #navbar .wrp>ul>li a {font-size: 16px;} } @media screen and (max-width: 1024px) { #navbar .wrp>ul>li:first-child { padding-top: 0} #navbar .wrp>ul>li a {font-size: 14px; padding: 10px 30px 10px 10px;} #headerImg.headerImg, #headerImg .wrp {height: 27vw;} #brand-logo {top: -210px;} #headerImg .wrp .text .headline{font-size:12vw;} #headerImg.headerImgCat .wrp .text .headline{font-size:6vw;} #headerImg .wrp .text p, #headerImg .wrp .text p strong {font-size: 28px;} .trade-groups .card img, .product-listing .card img { max-width: 100%;} .infobox { min-height: 295px} #slider .slide figcaption strong { font-size: 28px; margin-top: -10px;} #slider .slide figcaption p { font-size: 16px} .product-listing h1 { margin-top: 60px} .product-listing .content .card strong {font-size: 21px;} .product-listing .content .card .link { display: none} main#upload { padding-top: 60px} #upload #upload_info, #cart #sidebar { width: 37%; } #cart { padding-top: 30px; } #cart form { width: 100%; } #cart_second { padding: 0} #cart_second #formular h3 { font-size: 21px; font-family: 'bold';} .cart_breadcrumb li { font-size: 18px;} #cart_third_agb { padding-top: 30px; } .cart_breadcrumb { min-height: 50px; margin-bottom: 0; width: 100%; padding: 0 25px; } main#address aside, main#address #formular { width: 100%; } main#address form:not([id="formular_reseller"]) article { width: 100%} } @media screen and (max-width: 958px) { #navbar .wrp>ul>li { width: auto; box-shadow: none} #navbar .wrp>ul>li a { padding-right: 20px; padding-left: 0} #headerImg .wrp .text { bottom: 10px;} } @media screen and (max-width: 835px) { #navbar .wrp>ul>li:last-of-type { display: none} } .mobile-only { display: none} @media screen and (max-width: 800px) { .mobile-only { display: block} .trade-groups .content .card, .product-listing .content .card {height: 320px;} #upload #upload_section, #cart form, #upload #upload_info, #cart #sidebar { width: 100%; } .infobox strong { font-size: 18px; margin-bottom: 10px; display: block; } .infobox p { font-size: 16px; } .cart_breadcrumb {padding: 0 25px !important; margin-bottom: 25px} #cart_second .wrp { padding: 0} footer.main>.wrp { padding-right: 0; padding-left: 0; } footer.main>.wrp>nav { width: 31.3%; } form:not([id="formular_reseller"]) label {width: 30%;} #cart_second form fieldset input:not([type="checkbox"]), #cart_second form fieldset select, #cart_second form fieldset textarea, #cart_second form fieldset .btn:not([name="cmd_calc"]), #contact form fieldset input:not([type="checkbox"]), #contact form fieldset select, #contact form fieldset textarea, #contact form fieldset .btn:not([name="cmd_calc"]), #address form fieldset input:not([type="checkbox"]), #address form fieldset select, #address form fieldset textarea, #address form fieldset .btn:not([name="cmd_calc"]), #detail_free form fieldset input:not([type="checkbox"]), #detail_free form fieldset select, #detail_free form fieldset textarea, #detail_free form fieldset .btn:not([name="cmd_calc"]), #form_individual form fieldset input:not([type="checkbox"]), #form_individual form fieldset select, #form_individual form fieldset textarea, #form_individual form fieldset .btn:not([name="cmd_calc"]), #account_tracking form fieldset input:not([type="checkbox"]), #account_tracking form fieldset select, #account_tracking form fieldset textarea, #account_tracking form fieldset .btn:not([name="cmd_calc"]), #finish form fieldset input:not([type="checkbox"]), #finish form fieldset select, #finish form fieldset textarea, #finish form fieldset .btn:not([name="cmd_calc"]), #crop form fieldset input:not([type="checkbox"]), #crop form fieldset select, #crop form fieldset textarea, #crop form fieldset .btn:not([name="cmd_calc"]) { width: 67%; } #cart_second form fieldset.col-2 input, #contact form fieldset.col-2 input, #address form fieldset.col-2 input, #detail_free form fieldset.col-2 input, #form_individual form fieldset.col-2 input, #account_tracking form fieldset.col-2 input, #finish form fieldset.col-2 input, #crop form fieldset.col-2 input { width: 32.8%; } .cart_breadcrumb li { font-size: 16px; } main#account_tracking h1 { font-size: 21px; } } @media screen and (max-width: 786px) { .trade-groups.full .card.topseller { min-height: 420px; } } @media screen and (max-width: 720px) { header.main { height: 200px; } #cart_first, #cart_third { padding-top: 0; margin-top: 25px; } #cart_second { margin-top: 25px } } @media screen and (max-width: 768px) { .trade-groups h3, .product-listing h1 { margin-top: 10px} #headerImg .wrp .text .headline {font-size: 16vw;} #headerImg .wrp .text p, #headerImg .wrp .text p strong { font-size: 21px} #headerImg.headerImg { background: none; height: 23vw;} #headerImg.headerImg, #headerImg .wrp { height: 185px; } #headerImg .wrp .text { padding-left: 255px; } main.category { margin-top: 30px; } .breadcrumb li a { font-size: 18px; } #navbar .wrp>ul>li a { font-size: 18px; } #navbar .wrp>ul { margin-top: 65px; } header.main #customer-menu { margin-top: -135px; } .infobox { width: 100%; min-height: inherit; margin-bottom: 25px; padding-bottom: 0; } .infobox img { max-width: 41%; float: left; margin-right: 20px; margin-bottom: 0; } .infobox strong { font-size: 21px; margin-left: 0; margin-top: 25px; display: block;} footer.main>.wrp>nav { width: 49%; margin-top: 50px; float: left;} #slider { display: none} #offcanvas_open { background: white; color: var(--color_highlight)} #navbar.sticky { display: none} #upload #upload_section, #cart form {width: 100%;} #upload #upload_info, #cart #sidebar {width: 100%;} .cart_breadcrumb li { font-size: 16px; } .cart_breadcrumb { margin-bottom: 0; } #cart { padding-top: 0; } #cart_second form fieldset input:not([type="checkbox"]), #cart_second form fieldset select, #cart_second form fieldset textarea, #cart_second form fieldset .btn:not([name="cmd_calc"]), #contact form fieldset input:not([type="checkbox"]), #contact form fieldset select, #contact form fieldset textarea, #contact form fieldset .btn:not([name="cmd_calc"]), #address form fieldset input:not([type="checkbox"]), #address form fieldset select, #address form fieldset textarea, #address form fieldset .btn:not([name="cmd_calc"]), #detail_free form fieldset input:not([type="checkbox"]), #detail_free form fieldset select, #detail_free form fieldset textarea, #detail_free form fieldset .btn:not([name="cmd_calc"]), #form_individual form fieldset input:not([type="checkbox"]), #form_individual form fieldset select, #form_individual form fieldset textarea, #form_individual form fieldset .btn:not([name="cmd_calc"]), #account_tracking form fieldset input:not([type="checkbox"]), #account_tracking form fieldset select, #account_tracking form fieldset textarea, #account_tracking form fieldset .btn:not([name="cmd_calc"]), #finish form fieldset input:not([type="checkbox"]), #finish form fieldset select, #finish form fieldset textarea, #finish form fieldset .btn:not([name="cmd_calc"]), #crop form fieldset input:not([type="checkbox"]), #crop form fieldset select, #crop form fieldset textarea, #crop form fieldset .btn:not([name="cmd_calc"]) { width: 60%; } #cart_second form fieldset.col-2 input, #contact form fieldset.col-2 input, #address form fieldset.col-2 input, #detail_free form fieldset.col-2 input, #form_individual form fieldset.col-2 input, #account_tracking form fieldset.col-2 input, #finish form fieldset.col-2 input, #crop form fieldset.col-2 input { width: 29.3%; } section#cart_third_payment .col_left, section#cart_third_payment .col_right { min-height: 185px; } section#cart_third_payment .col_left img { height: 50px} main#contact, main#impressum, main#page, main#account_tracking, main#finish, main#register, main#pw_lost, main#address { margin-top: 0; } .accordion-body { width: 100%; box-sizing: border-box;padding-left: 17px;} #register form article label { width: 25%; } #register form article select, #register form article input:not(.btn):not([type="checkbox"]) { width: 70%; } #register form article .col-2 input:not(.btn):not([type="checkbox"]) { width: 34.3%; } .hint.wrp, .hint .wrp { width: 100%; padding: 10px; } #navbar .wrp > ul > li a { padding-left: 2px; } #navbar .wrp > ul > li > ul > li a { padding-left: 10px} .trade-groups.sidebar aside.sidebar li { width: 50%; } } @media screen and (max-width: 766px) { #brand-logo { top: 20px; z-index: 20; position: fixed; } header.main { min-height: auto; } footer.main>.wrp>nav:nth-of-type(2), footer.main>.wrp>nav:nth-of-type(4) { padding: 0; } #headerImg .wrp .text { padding-left: 190px; } .breadcrumb { padding-left: 20px !important; margin-top: 140px;} .product-listing .content .card { height: 320px; } nav.breadcrumb { margin-top: 0; } .category nav.breadcrumb { margin-left: 25px;} main.category { margin-top: 0; } } @media screen and (max-width: 540px) { .category nav.breadcrumb { margin-left: 0;} footer.main>.wrp>nav { width: 48%; } #visual_calculation #detail_infobar { max-width: 100%; } #visual_calculation .contentwrapper.left .head .text { margin-left: 0; max-width: 100%; } .contentwrapper.left .head .text h1 { font-size: 26px !important; } #headerImg .wrp .text .headline { font-size: 13vw; } .trade-groups .card img, .product-listing .card img { max-width: 65%; } .product-listing .content .card { height: 275px; } .trade-groups .card strong, .trade-groups .card h2, .trade-groups .card h3,.product-listing .card strong, .product-listing .card h2 { font-size: 21px; } .trade-groups.full .card, .product-listing.full .card { width: 49%; } nav.breadcrumb { margin-left: -5px; } .breadcrumb li a { font-size: 16px; padding: 2px 0; } .infobox strong { margin-top: 15px; } .infobox p { font-size: 16px; } footer.main>.wrp>nav { width: 49%; float: left; } footer.main>.wrp>nav h3 { font-size: 14px; margin-bottom: 0; } main { margin-top: 0; } main header { margin-top: 0px; } main#upload { padding-top: 25px; } main#upload form:not([id="formular_reseller"])>section:not(#total_block)>.btn:not([name="cmd_calc"]) { width: 100%} div#contentWrapper, #upload .wrp { padding: 0; } #visual_calculation .contentwrapper.left .optionGroup .optionWrapper #priceTable #priceOverview tbody tr td{width: 33%; float: left;} footer.main>.wrp { padding-right: 0; padding-left: 0; } main#account_tracking { margin-top: 30px} .actionbar p { float: left; margin-bottom: 15px; } } @media screen and (max-width: 500px) { form h2, form h3, form h4, form h5, form h6 { background: none} #visual_calculation .contentwrapper.right #delivery .content h3 { margin: 0; } .trade-groups.sidebar aside.sidebar li { width: 100%; } .trade-groups .content .card { height: auto; width: 50%; height: 235px; } } @media screen and (max-width: 420px) { .trade-groups h3, .trade-groups h2, .product-listing h1, .catOeko.description h2 { font-size: 28px; } #headerImg.headerImg, #headerImg .wrp { height: 196px; } #headerImg .wrp .text { padding-left: 180px; } #offcanvas_open { right: 20px} #headerImg .wrp .text .headline { font-size: 48px; } #headerImg.headerImgCat .wrp .text .headline {overflow-wrap: break-word; hyphens: auto; } #headerImg .wrp .text p, #headerImg .wrp .text p strong { font-size: 16px; } #homepage-text3 { padding: 20px 10px; } #homepage-text3 .wrp { width: 100%} .infobox { text-align: center; padding-bottom: 10px} .infobox img { margin-right: 0;max-width: 100%; margin-bottom: 10px} .infobox strong { margin-top: 5px; margin-bottom: 0; font-size: 21px; } .infobox p { font-size: 14px; padding-right: 20px; } footer.main>.wrp>nav h3 { font-size: 18px; } h3.rte_container, .rte_container h3 { font-size: 26px} .description.col_left, .description.col_right { font-size: 16px; } footer.main>.wrp>nav { width: 100%; text-align: center} footer.main img { display: inline-block; float: none; } .product-listing .content .card { height: 200px; } .product-listing .content .card strong, .trade-groups .card strong, .trade-groups .card h2, .trade-groups .card h3, .product-listing .card strong, .product-listing .card h2 { font-size: 18px; } form:not([id="formular_reseller"]) .requirement, form:not([id="formular_reseller"]) .suffix { float: right} form:not([id="formular_reseller"]) label { width: 100%; } #cart_second form fieldset input:not([type="checkbox"]), #cart_second form fieldset select, #cart_second form fieldset textarea, #cart_second form fieldset .btn:not([name="cmd_calc"]), #contact form fieldset input:not([type="checkbox"]), #contact form fieldset select, #contact form fieldset textarea, #contact form fieldset .btn:not([name="cmd_calc"]), #address form fieldset input:not([type="checkbox"]), #address form fieldset select, #address form fieldset textarea, #address form fieldset .btn:not([name="cmd_calc"]), #detail_free form fieldset input:not([type="checkbox"]), #detail_free form fieldset select, #detail_free form fieldset textarea, #detail_free form fieldset .btn:not([name="cmd_calc"]), #form_individual form fieldset input:not([type="checkbox"]), #form_individual form fieldset select, #form_individual form fieldset textarea, #form_individual form fieldset .btn:not([name="cmd_calc"]), #account_tracking form fieldset input:not([type="checkbox"]), #account_tracking form fieldset select, #account_tracking form fieldset textarea, #account_tracking form fieldset .btn:not([name="cmd_calc"]), #finish form fieldset input:not([type="checkbox"]), #finish form fieldset select, #finish form fieldset textarea, #finish form fieldset .btn:not([name="cmd_calc"]), #crop form fieldset input:not([type="checkbox"]), #crop form fieldset select, #crop form fieldset textarea, #crop form fieldset .btn:not([name="cmd_calc"]) { width: 94%; } #cart_second form fieldset.col-2 input, #contact form fieldset.col-2 input, #address form fieldset.col-2 input, #detail_free form fieldset.col-2 input, #form_individual form fieldset.col-2 input, #account_tracking form fieldset.col-2 input, #finish form fieldset.col-2 input, #crop form fieldset.col-2 input { width: 45.3%; } form:not([id="formular_reseller"])>.btn:not([name="cmd_calc"]), form:not([id="formular_reseller"]) article .btn:not([name="cmd_calc"]), form:not([id="formular_reseller"])>section:not(#total_block)>.btn:not([name="cmd_calc"]) { width: 100%;} form #cart table tr td:first-child { color: #333; font-family: regular; max-width: 71%; } #cart_third tbody tr { background: #F7F7F7} #cart_third strong { margin-top: 5px; margin-left: 0px; } #cart_third a.btn.edit { top: 3px; } #cart #total_price { font-family: 'bold'} #cart #total_price td, #cart #total_netto td { padding-right: 15px; font-family: 'bold'} #cart tr:nth-last-child(2) td { padding-bottom: 0; } main#account_tracking a.btn { margin-top: 15px; } main#account_tracking .col_left{ margin-top: 20px; } #username hr { margin-top: 0; margin-bottom: 5px;} form#tracking_search button[name="cmd_calc"] { margin-bottom: 0px; position: relative; right: 0px; float: right; top: -40px; } [name="accordion-group"] ~ .accordion-h .accordion-toggle, [name="accordion-group"] ~ h4 .accordion-dismiss { font-size: 14px; font-family: 'bold'; } .accordion-body { padding-left: 13px; font-size: 14px; } #cart_first tbody tr>td:first-child { font-family: 'regular'} } @media screen and (max-width: 390px) { #headerImg.headerImg, #headerImg .wrp { height: 165px; } #brand-logo { top: 22px; } #headerImg .wrp .text .headline { font-size: 41px; } #headerImg .wrp .text p, #headerImg .wrp .text p strong { font-size: 14px; } #visual_calculation { padding: 0 } #cart_second form fieldset.col-2 input, #contact form fieldset.col-2 input, #address form fieldset.col-2 input, #detail_free form fieldset.col-2 input, #form_individual form fieldset.col-2 input, #account_tracking form fieldset.col-2 input, #finish form fieldset.col-2 input, #crop form fieldset.col-2 input { width: 44.7%; } #cart .product_calculation td h3 { font-size: 18px; width: 185px; } #cart_second form fieldset.col-2 input, #contact form fieldset.col-2 input, #address form fieldset.col-2 input, #detail_free form fieldset.col-2 input, #form_individual form fieldset.col-2 input, #account_tracking form fieldset.col-2 input, #finish form fieldset.col-2 input, #crop form fieldset.col-2 input { width: 44.5%; } #register form article select, #register form article input:not(.btn):not([type="checkbox"]) { width: 93%; } #register form article label { width: 100%; } #cart_second form fieldset input:not([type="checkbox"]), #cart_second form fieldset select, #cart_second form fieldset textarea, #cart_second form fieldset .btn:not([name="cmd_calc"]), #contact form fieldset input:not([type="checkbox"]), #contact form fieldset select, #contact form fieldset textarea, #contact form fieldset .btn:not([name="cmd_calc"]), #address form fieldset input:not([type="checkbox"]), #address form fieldset select, #address form fieldset textarea, #address form fieldset .btn:not([name="cmd_calc"]), #detail_free form fieldset input:not([type="checkbox"]), #detail_free form fieldset select, #detail_free form fieldset textarea, #detail_free form fieldset .btn:not([name="cmd_calc"]), #form_individual form fieldset input:not([type="checkbox"]), #form_individual form fieldset select, #form_individual form fieldset textarea, #form_individual form fieldset .btn:not([name="cmd_calc"]), #account_tracking form fieldset input:not([type="checkbox"]), #account_tracking form fieldset select, #account_tracking form fieldset textarea, #account_tracking form fieldset .btn:not([name="cmd_calc"]), #finish form fieldset input:not([type="checkbox"]), #finish form fieldset select, #finish form fieldset textarea, #finish form fieldset .btn:not([name="cmd_calc"]), #crop form fieldset input:not([type="checkbox"]), #crop form fieldset select, #crop form fieldset textarea, #crop form fieldset .btn:not([name="cmd_calc"]) { width: 93%; } #cart_second form fieldset.col-2 input, #contact form fieldset.col-2 input, #address form fieldset.col-2 input, #detail_free form fieldset.col-2 input, #form_individual form fieldset.col-2 input, #account_tracking form fieldset.col-2 input, #finish form fieldset.col-2 input, #crop form fieldset.col-2 input { width: 44.2%; } #register form article .col-2 input:not(.btn):not([type="checkbox"]) { width: 44.3%; } form:not([id="formular_reseller"])>.btn:not([name="cmd_calc"]), form:not([id="formular_reseller"]) article .btn:not([name="cmd_calc"]), form:not([id="formular_reseller"])>section:not(#total_block)>.btn:not([name="cmd_calc"]) { width: 100%; margin-left: 0; } } @media screen and (max-width: 320px){ #brand-logo img { width: 95px; } #headerImg .wrp .text { padding-left: 140px; } #headerImg .wrp .text .headline, #headerImg.headerImgCat .wrp .text .headline { font-size: 28px; } #headerImg.headerImg, #headerImg .wrp { height: 135px; } header.main { min-height: 135px; height: 135px; } h3.rte_container, .rte_container h3 { font-size: 21px; } .category nav.breadcrumb { margin-top: 110px; } nav.breadcrumb { margin-top: 105px; } .trade-groups h3, .trade-groups h2, .product-listing h1, .catOeko.description h2 { font-size: 21px; } .product-listing .content .card strong, .trade-groups .card strong, .trade-groups .card h2, .trade-groups .card h3, .product-listing .card strong, .product-listing .card h2 { font-size: 14px; } .trade-groups .content .card, .product-listing .content .card { height: 165px; } #cart_second form fieldset input:not([type="checkbox"]), #cart_second form fieldset select, #cart_second form fieldset textarea, #cart_second form fieldset .btn:not([name="cmd_calc"]), #contact form fieldset input:not([type="checkbox"]), #contact form fieldset select, #contact form fieldset textarea, #contact form fieldset .btn:not([name="cmd_calc"]), #address form fieldset input:not([type="checkbox"]), #address form fieldset select, #address form fieldset textarea, #address form fieldset .btn:not([name="cmd_calc"]), #detail_free form fieldset input:not([type="checkbox"]), #detail_free form fieldset select, #detail_free form fieldset textarea, #detail_free form fieldset .btn:not([name="cmd_calc"]), #form_individual form fieldset input:not([type="checkbox"]), #form_individual form fieldset select, #form_individual form fieldset textarea, #form_individual form fieldset .btn:not([name="cmd_calc"]), #account_tracking form fieldset input:not([type="checkbox"]), #account_tracking form fieldset select, #account_tracking form fieldset textarea, #account_tracking form fieldset .btn:not([name="cmd_calc"]), #finish form fieldset input:not([type="checkbox"]), #finish form fieldset select, #finish form fieldset textarea, #finish form fieldset .btn:not([name="cmd_calc"]), #crop form fieldset input:not([type="checkbox"]), #crop form fieldset select, #crop form fieldset textarea, #crop form fieldset .btn:not([name="cmd_calc"]) { width: 92%; } #cart_second form fieldset.col-2 input, #contact form fieldset.col-2 input, #address form fieldset.col-2 input, #detail_free form fieldset.col-2 input, #form_individual form fieldset.col-2 input, #account_tracking form fieldset.col-2 input, #finish form fieldset.col-2 input, #crop form fieldset.col-2 input { width: 43.7%; } .cc_dialog .cc_dialog_headline { font-size: 18px; } .cc_dialog .cc_dialog_text { font-size: 14px; } } .rte_container .row {display: -ms-flex;display: -webkit-flex;display: flex;margin-bottom: 25px;} .rte_container .row > div {width: 90%;padding: 10px;} .rte_container .row > div:first-child {width: 10%;} .rte_container .row.row-2 > div {width: 50%;padding: 10px;} .rte_container .row.row-2 > div:first-child {width: 50%;} @media screen and (max-width: 768px) { .rte_container .row > div {width: 80%;} .rte_container .row > div:first-child {width: 20%;} header.main {height: 95px;} } @media screen and (max-width: 420px) { .rte_container .row > div {width: 100%;} .rte_container .row > div:first-child {display: none;} } section#tracking_upload li.check:before, section#tracking_upload li.error:before {margin-right: 24px;top: 0px;} #form_individual { background: none} .markerRight { border-right: 35px solid var(--color_highlight); background: #EDEDED} .markerLeft { border-left: 35px solid var(--color_highlight); background: #EDEDED} #form_individual .description.col_right, #form_individual .description.col_left {background: none} #form_individual .description.col_right { padding-left: 50px; } #form_individual .description.col_right ul { margin-left: 20px} #form_individual .description.col_right ul li:before { margin-left: -20px} .markerRight .description.col_right .headline {font-size: 35px; margin-bottom: 25px; margin-top: 20px; color: var(--color_highlight); text-transform: uppercase} .description.col_right .subline {font-size: 18px;margin: auto; text-transform: uppercase} #form_individual .description.col_left.benefitsText { margin: 0; padding: 0} #form_individual .description.col_left.benefitsText img { margin-bottom: 0} .blackBG { background: black; color: white} .individualUSP.blackBG { background: var(--color_highlight) !important; } #form_individual .blackBG .headline, #form_individual .blackBG .subline, #form_individual .blackBG p, #form_individual .blackBG strong { color: white} #form_individual .blackBG .description.col_right { padding-left: 10px} #form_individual .blackBG .description.col_right, #form_individual .blackBG .description.col_left { margin: 0} #form_individual .blackBG .description.col_right img, #form_individual .blackBG .description.col_left img { max-width: 80%; margin: 0} @media screen and (max-width: 1368px) { #form_individual .blackBG .individualUSP span {height: 235px;} } @media screen and (max-width: 1024px) { #form_individual .blackBG .individualUSP span { width: 50%; height: 205px} } #form_individual label { width: 30%; } #form_individual form:not([id="formular_reseller"]) select, #form_individual form:not([id="formular_reseller"]) input:not(.btn), #form_individual form:not([id="formular_reseller"]) textarea { width: 59%} #form_individual form:not([id="formular_reseller"]) input[type="checkbox"] { width: 15px} #form_individual .btn { width: 59%} @media screen and (max-width: 800px) { #form_individual .description.col_right, #form_individual .description.col_left { width: 100%; padding: 0} #form_individual .blackBG .description.col_left, #form_individual .blackBG .description.col_right { padding-top: 25px} #form_individual .blackBG .description.col_left.centerMobile, #form_individual .blackBG .description.col_right.centerMobile { text-align: center; display: none} #form_individual .blackBG .description.col_right img, #form_individual .blackBG .description.col_left img { display: inline-block} #form_individual form fieldset { width: 100%} #form_individual .blackBG .individualUSP span { width: 100%; height: 190px; } } @media screen and (max-width: 530px) { .markerRight { border-right: 15px solid var(--color_highlight); } } .trade-groups .content, .product-listing .content { width: 102%;} .trade-groups.sidebar { background: white; margin-top: 0} .trade-groups .card, .product-listing .card { border: 1px solid rgba(0, 0, 0, 0.125); -webkit-transition: all .25s ease-out;-moz-transition: all .25s ease-out;transition: all .25s ease-out;} .trade-groups .card figcaption, .product-listing .card figcaption, .trade-groups .card:hover figcaption, .product-listing .card:hover figcaption, #related .item:hover a span { bottom: 0; display: inline-block; width: 100%} .rte_container .card figcaption, .rte_container .card:hover figcaption { background: none; display: block;} .trade-groups .card:hover figcaption {} .trade-groups .card figcaption .link, .product-listing .card figcaption .link { display: none} .trade-groups .card h2, .trade-groups .card h3, .product-listing .card strong { color: var(--color_font); font-size: 16px; text-align: center} .trade-groups.full .card, .product-listing.full .card, .trade-groups .card {width: 23%;margin: 0 2% 2% 0;} .trade-groups.full .card.cardBig, .product-listing.full .card.cardBig, .trade-groups .card.cardBig {width: 48%;} .trade-groups .card, .product-listing .card, .trade-groups .card:hover, .product-listing .card:hover { text-align: center} .trade-groups .card figcaption, .product-listing .card figcaption, #related span {overflow: hidden;position: absolute;z-index: 4;left: 0;bottom: 0;padding: 10px; box-sizing: border-box} .trade-groups .card figcaption:hover, .product-listing .card figcaption:hover { cursor: pointer} .trade-groups .card figcaption:after, .product-listing .card figcaption:after, #related .item span:after {background: #fff;content: "";height: 155px;left: -75px;opacity: 0.2;position: absolute;top: -50px;transform: rotate(35deg);transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);width: 50px;z-index: -10;} .trade-groups .card:hover figcaption:after, .product-listing .card:hover figcaption:after, #related .item:hover span:after {left: 120%;transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);} .trade-groups .card img, .product-listing .card img {width: 80%;display: inline-block;margin-top: 15px;} #trade-blocks{padding:30px 0 30px 0;var(--color_black);} #trade-blocks .card{float:left;width:33.333%;box-sizing:border-box;position:relative;z-index:0; background:var(--color_gray); margin: 0;height: 400px;} #trade-blocks .card.last-item{margin-right:0} #trade-blocks .card img{z-index:0;width:100%;height:auto; top: 0; left: 0; position: relative;} #trade-blocks .card figcaption{padding:30px;box-sizing:border-box;z-index:1;height:auto !important} #trade-blocks .card:hover img{right:0;top:0;bottom:0;left:0; width: 100%} #trade-blocks .card:hover figcaption, #trade-blocks .card:hover figcaption, #trade-blocks .card:nth-child(1) figcaption{bottom:15px;} #trade-blocks .card:hover img { opacity: .5;} #trade-blocks .card h3{position:relative; z-index:2; width:70%; margin:-17px 15%;background-color:var(--color_black);color:var(--color_white);text-align:center;box-sizing:border-box; font-size: 21px; font-weight: bold; text-align: center; padding: 10px 10px; text-transform: inherit;} #trade-blocks .card:nth-child(1) h3 { color:var(--color_white); background-color:var(--color_black); } #trade-blocks .card p{font-size:18px;color: var(--color_black);} #trade-blocks .card a{position:absolute;top:0;left:0;right:0;bottom:0;z-index:3;display:block} #trade-blocks .card a:hover{text-decoration:none} #trade-blocks .card:nth-child(2n){background:var(--color_highlight);} #trade-blocks .card:nth-child(2n) p{color:var(--color_white);} #trade-blocks .card:nth-child(2n) h3{color:var(--color_black);background:var(--color_white);} #trade-blocks .card:nth-child(2n) figcaption, #trade-blocks .card figcaption{bottom:15px;background: transparent} #trade-blocks .card.double{width:66.666%} footer.main>.wrp>nav.right { float: right} @media screen and (max-width:1200px) { .trade-groups.full .card, .product-listing.full .card, .trade-groups .card { width: 48%} .trade-groups.full .card:nth-child(2n+2), .product-listing.full .card:nth-child(2n+2) { margin-right: 2%} } @media screen and (max-width:800px) { .trade-groups.full .card, .product-listing.full .card, .trade-groups .card { width: 48%} .trade-groups.full .card.topseller {min-height: 410px;} .trade-groups .content .card, .product-listing .content .card { margin-right: 1%; width: 48%; height: 250px;} .trade-groups .content .card:nth-child(3n+3) { margin-right: 1%} .product-listing .content .card strong { font-size: 16px; } } @media screen and (max-width:450px){ .trade-groups.full .card, .product-listing.full .card, .trade-groups .card, .trade-groups .content .card, .product-listing .content .card { width: 100%; } } #trade-blocks .col img { display: inline-block; max-width: 95%; margin-top: 35px} #trade-blocks .col:nth-of-type(2n):not(.col-r) { text-align: right;padding: 0;} #trade-blocks .col {float: left; box-sizing: border-box} #trade-blocks .col-l { float: left} #trade-blocks .col-r { float: right} #trade-blocks .col-1 { width: 33%;} #trade-blocks .col-2 { width: 67%; } #trade-blocks .col-1, #trade-blocks .col-2 {margin-bottom: 25px; } @media screen and (max-width:800px) { #trade-blocks .col-1, #trade-blocks .col-2 { width: 100%;} #trade-blocks .col img { margin-top: 0} #trade-blocks .col:nth-of-type(2n):not(.col-r) { text-align: left;} #trade-blocks .col:nth-of-type(2n), #trade-blocks .col:nth-of-type(2n):not(.col-r) {border-bottom: 1px solid lightgrey; padding-bottom: 25px } } @media screen and (max-width: 767px) { body { padding-top: 95px; } #headerImg.headerImg { display: none;} } header.main #service-bar ul li.login_status_green {margin-right: 10px} header.main #service-bar ul li.login_status_green:after { content: '\00bb'; background-color: #69ca00; position: absolute; width: 16px; height: 16px; border-radius: 50%; color: #fff; top: 5px; right: -5px; text-align: center; line-height: 14px; } .menu-item-login.login_status_green:after { display: none} .payments { background: #111111; padding: 25px 0} .payments .col_left, .payments .col_right { width: 49%; display: inline-block; box-sizing: border-box; padding: 0; margin: 0} .payments .col_right { text-align: right; float: right} .payments .col_right img { max-height: 40px; display: inline-block; vertical-align: text-bottom;margin-left: 25px; display: inline-block} .payments .col_left img { max-width: 100%; display: inline-block} #offcanvas_open { display: none} @media screen and (max-width: 800px) { #offcanvas_open { display: block; position: fixed; } } @media screen and (max-width: 940px) { .payments .col_left, .payments .col_right { width: 100%; float: none; text-align: center; padding: 15px 0} } .fileinput label { color: var(--color_highlight) !important; text-align: center !important; padding-right: 0 !important} .fileinput label:hover { color: white !important; cursor: pointer} @media screen and (max-width: 1105px) { header.main #service-bar ul li.service-bar-dsk { display: none;} } /****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: #ff6873; } #flipIn h1 { text-transform: uppercase; font-size: 36px; line-height: 42px; letter-spacing: 3px; font-weight: 100; } #flipIn h2 { font-size: 21px; line-height: 34px; font-weight: 300; letter-spacing: 1px; display: block; margin: 0; cursor: pointer; } #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; margin-bottom: 50px; } #flipIn ul li { position: relative; padding: 0; margin: 0; padding-bottom: 4px; padding-top: 15px; border-bottom: 1px dotted #dce7eb; } #flipIn ul li:last-of-type { padding-bottom: 0; } #flipIn ul li i { position: absolute; transform: translate(-6px, 0); margin-top: 16px; right: 0; } #flipIn ul li:before { display: none; } #flipIn ul li i:before, #flipIn ul li i:after { content: ""; position: absolute; background-color: #ff6873; width: 3px; height: 9px; display: block !important; } #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); } } #contactlist>form { padding: 10px 0 !important}