/* ----------------------------------------------------------------------------------------- $Id: stylesheet.css 9098 2015-12-02 11:22:33Z Tomcraft $ modified eCommerce Shopsoftware http://www.modified-shop.org Copyright (c) 2009 - 2013 [www.modified-shop.org] ----------------------------------------------------------------------------------------- Released under the GNU General Public License ---------------------------------------------------------------------------------------*/ /* ----------------------------------------------------------------------------------------- 01. Fonts 02. Globals (body, tables, p, etc. ) 03. Header 04. Headlines 05. Links 06. Inputs, Selects, Textarea 07. Footer, Copyright, Parse Time 08. Content 09. HR pseudos 10. Breadcrumbs 11. New Boxes 12. Categories box 13. Highlightbox 14. Product-Navigator 15. Error, info & success messages 16. Checkout 17. Color Defination from language-Files, main.php, ot-Module 18. Listing globals 19. Productlist boxes 20. Productlist rows 21. Categories listing & subcats 22. Pagination 23. Filter manufacturer 24. Content sites (AGB, Datenschutz, etc.) 25. Products table for order_details, account_history_info, checkout_confirmation 26. Product details 27. Graduated prices 28. Addtobasket 29. Product_details reviews 30. Product_options 31. Product_details media 32. Popup content 33. print content (popup print_product_info, popup print_order.html) 34. Reviews 35. Upcoming_products 36. Coupon box - error message 37. Downloads 38. Offline & Admin-login 39. Toggle shopping cart box 40. Carousel Bestseller box 41. Janolaw.de (BASIC Template for AGB Hosting Content) 42. Sitemap 43. Product_reviews_info 44. Last viewed in account 45. Account cart and click buttons 46. Miscellaneous 47. CSS Buttons 48. CSS Write reviews 49. Custom checkbox & radio 50. New address book handling ---------------------------------------------------------------------------------------*/ /* 1. START fonts */ /* font-family: 'Encode Sans Condensed', sans-serif; font-weights: 400,500,600,700,800 Color 1 - magenta color: #de0a66; Color 1 - magenta color: #b0377e; Color 2 - magenta dunkel color: #7c2759; Color 3 - magenta hell color: #eee5ea; Color 4 - rot color: #e74c3c; */ /* Fonts */ /* encode-sans-regular - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Encode Sans'; font-style: normal; font-weight: 400; src: url('css/fonts/encode-sans-v22-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('css/fonts/encode-sans-v22-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* encode-sans-500 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Encode Sans'; font-style: normal; font-weight: 500; src: url('css/fonts/encode-sans-v22-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('css/fonts/encode-sans-v22-latin-500.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* encode-sans-600 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Encode Sans'; font-style: normal; font-weight: 600; src: url('css/fonts/encode-sans-v22-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('css/fonts/encode-sans-v22-latin-600.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* encode-sans-700 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Encode Sans'; font-style: normal; font-weight: 700; src: url('css/fonts/encode-sans-v22-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('css/fonts/encode-sans-v22-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* encode-sans-800 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Encode Sans'; font-style: normal; font-weight: 800; src: url('css/fonts/encode-sans-v22-latin-800.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('css/fonts/encode-sans-v22-latin-800.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* encode-sans-condensed-regular - latin */ @font-face { font-display: swap; font-family: 'Encode Sans Condensed'; font-style: normal; font-weight: 400; src: url('css/fonts/encode-sans-condensed-v10-latin-regular.woff2') format('woff2'), url('css/fonts/encode-sans-condensed-v10-latin-regular.ttf') format('truetype'); } /* encode-sans-condensed-500 - latin */ @font-face { font-display: swap; font-family: 'Encode Sans Condensed'; font-style: normal; font-weight: 500; src: url('css/fonts/encode-sans-condensed-v10-latin-500.woff2') format('woff2'), url('css/fonts/encode-sans-condensed-v10-latin-500.ttf') format('truetype'); } /* encode-sans-condensed-600 - latin */ @font-face { font-display: swap; font-family: 'Encode Sans Condensed'; font-style: normal; font-weight: 600; src: url('css/fonts/encode-sans-condensed-v10-latin-600.woff2') format('woff2'), url('css/fonts/encode-sans-condensed-v10-latin-600.ttf') format('truetype'); } /* encode-sans-condensed-700 - latin */ @font-face { font-display: swap; font-family: 'Encode Sans Condensed'; font-style: normal; font-weight: 700; src: url('css/fonts/encode-sans-condensed-v10-latin-700.woff2') format('woff2'), url('css/fonts/encode-sans-condensed-v10-latin-700.ttf') format('truetype'); } /* encode-sans-condensed-800 - latin */ @font-face { font-display: swap; font-family: 'Encode Sans Condensed'; font-style: normal; font-weight: 800; src: url('css/fonts/encode-sans-condensed-v10-latin-800.woff2') format('woff2'), url('css/fonts/encode-sans-condensed-v10-latin-800.ttf') format('truetype'); } /* END fonts */ /* 2. START globals */ * { margin:0; padding:0; box-sizing:border-box; } /* prevent flicker of mobile menu */ #mobilemenu > ul { display:none; } #menuclose { display:none; } /* prevent flicker in responsive tabs */ #horizontalAccordion { display:none; } #horizontalAccordion ul.resp-tabs-list { display:none !important; } #horizontalTab ul.resp-tabs-list { list-style-type:none; } #horizontalTab ul.resp-tabs-list li { display: inline-block; } /* prevent zoom of fields on iphone */ @supports (-webkit-overflow-scrolling: touch) { input[type=text], input[type=password], input[type=email], input[type=tel] { font-size: 16px; } select { font-size: 16px; } textarea { font-size: 16px; } .SumoSelect > .CaptionCont { font-size:16px; } } /* scrollbars */ * { scrollbar-width: thin; scrollbar-color: #ccc #eee; } *::-webkit-scrollbar { width: 9px; } *::-webkit-scrollbar-track { background: #eee; } *::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 0px; border: 1px solid #eee; } .no_scroll, .viewer-open { overflow:hidden; } /* srollbars prevent layout swift when open toggle menus */ html { scrollbar-gutter: stable; } /* scrollbars safari */ @media not all and (min-resolution: 0.001dpcm) { .no_scroll, .viewer-open { padding-right: calc(9px - (100vw - 100%)); } } /* Disable font boosting on mobile browsers */ body * { -moz-text-size-adjust: none; /* Firefox Mobile */ -webkit-text-size-adjust: 100%; /* Safari */ -ms-text-size-adjust: 100%; /* Windows Mobile */ max-height: 1000000px; /* Chrome for Android */ } /* helper padding, margin, border, etc. */ .border_0 { border: 0px !important; } .mt_0 { margin-top: 0px !important; } .mt_5 { margin-top: 5px !important; } .mt_10 { margin-top: 10px !important; } .mt_15 { margin-top: 15px !important; } .mt_20 { margin-top: 20px !important; } .mt_25 { margin-top: 25px !important; } .mt_30 { margin-top: 30px !important; } .mt_40 { margin-top: 40px !important; } .mt_50 { margin-top: 50px !important; } .mb_0 { margin-bottom: 0px !important; } .mb_5 { margin-bottom: 5px !important; } .mb_10 { margin-bottom: 10px !important; } .mb_15 { margin-bottom: 15px !important; } .mb_20 { margin-bottom: 20px !important; } .mb_25 { margin-bottom: 25px !important; } .mb_30 { margin-bottom: 30px !important; } .mb_40 { margin-bottom: 40px !important; } .mb_50 { margin-bottom: 50px !important; } .my_0 { margin-top: 0px !important; margin-bottom: 0px !important; } .my_5 { margin-top: 5px !important; margin-bottom: 5px !important; } .my_10 { margin-top: 10px !important; margin-bottom: 10px !important; } .my_15 { margin-top: 15px !important; margin-bottom: 15px !important; } .my_20 { margin-top: 20px !important; margin-bottom: 20px !important; } .my_25 { margin-top: 25px !important; margin-bottom: 25px !important; } .my_30 { margin-top: 30px !important; margin-bottom: 30px !important; } .my_40 { margin-top: 40px !important; margin-bottom: 40px !important; } .my_50 { margin-top: 50px !important; margin-bottom: 50px !important; } .mr_5 { margin-right:5px !important; } .ml_5 { margin-left: 5px !important; } .mr_2 { margin-right:2px !important; } .ml_2 { margin-left: 2px !important; } .pt_0 { padding-top: 0px !important; } .pb_0 { padding-bottom: 0px !important; } .pb_50 { padding-bottom: 50px !important; } .py_0 { padding-top: 0px !important; padding-bottom: 0px !important; } .py_5 { padding-top: 5px !important; padding-bottom: 5px !important; } .py_10 { padding-top: 10px !important; padding-bottom: 10px !important; } .py_15 { padding-top: 15px !important; padding-bottom: 15px !important; } .py_20 { padding-top: 20px !important; padding-bottom: 20px !important; } .py_25 { padding-top: 25px !important; padding-bottom: 25px !important; } .py_30 { padding-top: 30px !important; padding-bottom: 30px !important; } .py_40 { padding-top: 40px !important; padding-bottom: 40px !important; } .py_50 { padding-top: 50px !important; padding-bottom: 50px !important; } .nowrap {white-space:nowrap; } /* 02. END Globals (body, tables, margin, padding, etc.) */ /* global products image handling */ .prod_image { display:block; text-align: center; width: 100%; position:relative; } .prod_image > a { position:absolute; top:0px; bottom:0px; left:0px; right:0px; display:block; width:100%; height:100%; } .prod_image:before { content: ""; display:block; padding-top: 100%; } .prod_image img { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; object-fit:contain; } img { max-width:100%; height:auto; vertical-align:top; } /* smaller font sizes */ .font_midi { font-size:14px !important; line-height:20px !important; } .font_midi input[type="radio"] ~ label:before { line-height:18px !important; } .font_midi input[type="radio"] ~ label:after { line-height:18px !important; } .font_midi input[type="checkbox"] ~ label:before { line-height:19px !important; } .font_midi input[type="checkbox"] ~ label:after { line-height:19px !important; } .font_small { font-size:12px !important; line-height:18px !important; } .font_small input[type="radio"] ~ label:before { line-height:17px !important; } .font_small input[type="radio"] ~ label:after { line-height:17px !important; } .font_small input[type="checkbox"] ~ label:before { line-height:18px !important; } .font_small input[type="checkbox"] ~ label:after { line-height:18px !important; } body { position: relative; font-family: 'Encode Sans', sans-serif; font-weight: 400; font-size:16px; background-color:#fff; color:#222; line-height:24px; } strong, b { font-weight:700; } .clearfix, .clear, .clearer { line-height:0px; height:0px; clear:both; } .cf:before, .cf:after { content: ""; display: table; } .cf:after { clear: both; } .cf { zoom: 1; } .ampel_green { color:#5a811d; } .ampel_orange { color:#fd8900; } .ampel_red { color:#e31c66; } .ampel_green_icon { display:inline-block; width: 8px; height: 8px; border-radius: 50%; background: #5a811d; box-shadow: 0 0 0 rgba(90,129,29, 0.4); animation: green_pulse 2s infinite; margin: 0 4px 0 2px; vertical-align:1px; } @keyframes green_pulse { 0% { -moz-box-shadow: 0 0 0 0 rgba(90,129,29, 0.6); box-shadow: 0 0 0 0 rgba(90,129,29, 0.6); } 70% { -moz-box-shadow: 0 0 0 8px rgba(90,129,29, 0); box-shadow: 0 0 0 8px rgba(90,129,29, 0); } 100% { -moz-box-shadow: 0 0 0 0 rgba(90,129,29, 0); box-shadow: 0 0 0 0 rgba(90,129,29, 0); } } .ampel_orange_icon { display:inline-block; width: 8px; height: 8px; border-radius: 50%; background: #fd8900; box-shadow: 0 0 0 rgba(253,137,0, 0.4); animation: orange_pulse 2s infinite; margin: 0 4px 0 2px; vertical-align:1px; } @keyframes orange_pulse { 0% { -moz-box-shadow: 0 0 0 0 rgba(253,137,0, 0.6); box-shadow: 0 0 0 0 rgba(253,137,0, 0.6); } 70% { -moz-box-shadow: 0 0 0 8px rgba(253,137,0, 0); box-shadow: 0 0 0 8px rgba(253,137,0, 0); } 100% { -moz-box-shadow: 0 0 0 0 rgba(253,137,0, 0); box-shadow: 0 0 0 0 rgba(253,137,0, 0); } } .ampel_red_icon { display:inline-block; width: 8px; height: 8px; border-radius: 50%; background: #e31c66; box-shadow: 0 0 0 rgba(227,28,102, 0.4); animation: red_pulse 2s infinite; margin: 0 4px 0 2px; vertical-align:1px; } @keyframes red_pulse { 0% { -moz-box-shadow: 0 0 0 0 rgba(227,28,102, 0.6); box-shadow: 0 0 0 0 rgba(227,28,102, 0.6); } 70% { -moz-box-shadow: 0 0 0 8px rgba(227,28,102, 0); box-shadow: 0 0 0 8px rgba(227,28,102, 0); } 100% { -moz-box-shadow: 0 0 0 0 rgba(227,28,102, 0); box-shadow: 0 0 0 0 rgba(227,28,102, 0); } } .mini { font-size:11px;font-weight:normal;} .midi { font-size:12px;font-weight:normal;} .lineheight16 { line-height:16px;} .lineheight18 { line-height:18px;} a.black { color:#333 !important; } a.black:hover { color:#b0377e !important; text-decoration:none !important; } .twoColums { float:left; width:100%; margin: 0 0 20px 0; } .twoColums.last { margin: 0 0 20px 0; } .twoColums.stickyright { float:right; } .twoColumsInner { float:left; width:100%; margin: 0 0 20px 0; } .twoColumsInner.last { margin: 0 0 20px 0; } @media only screen and (min-width: 759px) { .twoColums { width:48%; margin: 0px 4% 20px 0px; } .twoColums.last { margin: 0px 0px 20px 0px; } .twoColumsInner { width:48%; margin: 0px 4% 20px 0px; } .twoColumsInner.last { margin: 0px 0px 20px 0px; } } .twoColums_small { float:left; width:47%; margin: 0 6% 0px 0; } .twoColums_small.last { margin: 0 0 0 0; } .button_left, .button_left_cart { float:left; display:inline-block; max-width: 48%; margin: 10px 0px 0px 0px; min-height:32px; line-height:32px; } .button_left_cart { max-width:130px; } @media only screen and (min-width: 759px) { .button_left_cart { max-width: 48%; } } .button_right, .button_right_cart { float:right; display:inline-block; max-width: 48%; margin: 10px 0px 0px 0px; text-align: right; min-height:32px; line-height:32px; } .button_right_cart { max-width:170px; } @media only screen and (min-width: 759px) { .button_right_cart { max-width: 48%; } } .button_left_error { float:left; display:inline-block; max-width: 48%; margin: -10px 0 0 0; min-height:32px; line-height:32px; } @media only screen and (min-width: 759px) { .button_left_error { margin: 28px 0 0 0; } } .button_right_checkout { float:right; text-align:right; display:inline-block; margin: 10px 0px 0px 0px; min-width:200px; width:100%; } @media only screen and (min-width: 500px) { .button_right_checkout { width:auto; } } .button_right_checkout_small { float:right; margin: 4px 0px 0px 20px; } .button_left img, .button_left input, .button_left_error input, .button_right img, .button_right input, .button_left_cart img, .button_left_cart input, .button_right_cart img, .button_right_cart input, .button_right_checkout input { vertical-align:bottom; } .button_left_cart img { margin: 0px 5px 5px 0px; } @media only screen and (min-width: 759px) { .button_left_cart img { margin: 0px 5px 0px 0px; } } .paypal_button { margin: 0 0 5px 0; display:inline-block; } @media only screen and (min-width: 759px) { .paypal_button { margin:0px 2px 0px 0px; } } .paypal_button img { height:32px; } .paypal_button2 { margin:5px 0px 0px 0px; display:block; } .paypal_button2 img { height:32px; } .express_button { margin: 0 0 5px 0; display:inline-block; } @media only screen and (min-width: 759px) { .express_button { margin:0 0 0 0; } } .paypal_button img { height:32px; } .button_row_checkout { box-sizing: border-box; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column-reverse; flex-direction: column-reverse; } @media only screen and (min-width: 500px) { .button_row_checkout { -webkit-flex-direction: row; flex-direction: row; } } .button_row_checkout_left { margin: 10px 0px 0px 0px; -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; box-sizing:border-box; } .button_row_checkout_right { margin: 10px 0px 0px 0px; -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; box-sizing:border-box; text-align:right; } .text_left { float:left; width: 48%; margin: 10px 0px 0px 0px; min-height:28px; font-size:10px; line-height:14px; } p { margin:8px 0 8px 0; } p.onlytop { margin:8px 0 0 0; } p.nomargin { margin:0 0 0 0; } p.textright { text-align:right; } table { width:100%; border-spacing: 0; border-collapse:collapse; } table td { padding:4px 0px; } .td_full { width:100%; } /* 3. START header */ .layout_wrap { width:100%; padding: 0px 0px; margin: 0px 0px; } .layout_navigation_checkout { position:relative; background:#fff; padding: 0px 0px 0px 0px; } .layout_navigation_checkout_inner { width:100%; max-width:1240px; margin: 0px auto; padding: 25px 10px 25px 10px; background:transparent; } @media only screen and (min-width: 985px) { .layout_navigation_checkout_inner { padding: 35px 20px 35px 20px; } } .layout_logo { padding: 20px 0px 10px 0px; background:rgba(0,0,0,0.0); position:relative; z-index:10; text-align:center; } .col_logo { display:inline-block; margin: 0 auto; } .col_logo img { width:auto; height:50px; vertical-align:top; } @media only screen and (min-width: 985px) { .col_logo img { height:70px; } } .col_logo a { border-radius:12px; background:#111 !important; padding: 10px 10px; width:100%; position:relative; margin: 0px 0 0 0; /* box-shadow: 0px 0px 0px 3px rgba(255,255,255,1.0); */ box-shadow: 0px 0px 0px 3px rgba(207, 205, 207, 1.0); display:block; } .col_logo svg { width:auto; height:50px; vertical-align:top; } @media only screen and (min-width: 985px) { .col_logo svg { height:70px; } } .col_logo svg path { fill:#cfcdcf; } .layout_navigation { background:rgba(0,0,0,0.0); position:sticky; width:100%; z-index:10; top:0px; } .admin_mode .layout_navigation { top:36px; } @media only screen and (min-width: 985px) { .layout_navigation { } .admin_mode .layout_navigation { } } .layout_navigation_inner { width:100%; max-width:1440px; margin: 0px auto; padding: 10px 10px 0px 10px; background:transparent; } @media only screen and (min-width: 985px) { .layout_navigation_inner { padding: 10px 20px 0px 20px; } } .layout_header { background-repeat:no-repeat; background-size:cover; background-position:bottom center; position:relative; } @media only screen and (min-width: 600px) { } @media only screen and (min-width: 985px) { } .lh_cat_bg { margin: -160px 0 0 0; padding: 0 0 260px 0; } .lh_no_bg { margin: -135px 0 0 0; padding: 0 0 160px 0; } .lh_home { margin: -160px 0 0 0; padding: 0 0 0px 0; } .lh_content_bg { margin: -160px 0 0 0; padding: 0 0 260px 0; } @media only screen and (min-width: 985px) { .lh_cat_bg { padding: 0 0 300px 0; margin: -180px 0 0 0; } .lh_no_bg { padding: 0 0 180px 0; margin: -155px 0 0 0; } .lh_home { padding: 0 0 0px 0; margin: -180px 0 0 0; } .lh_content_bg { padding: 0 0 300px 0; margin: -180px 0 0 0; } } /* .lh_cat_bg:before { display:block; content:''; position:absolute; width:100%; height:100%; left: 0; bottom: 0; right: 0; margin: auto; background:rgba(0,0,0,0.4); } .lh_cat_bg:after { display:block; content:''; position:absolute; width:100%; height:30px; left: 0; bottom: 0; right: 0; margin: auto; background-image: url(img/icons/bg_video_overblend_bottom.png); background-size: 100% 30px; } @media only screen and (min-width: 985px) { .lh_cat_bg:after { height:70px; background-size: 100% 70px; } } */ .lh_cat_default { background-image: url(img/banner_head/HGM-Header-Pralinen_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_default { background-image: url(img/banner_head/HGM-Header-Pralinen.webp); } } .lh_cat_89 { background-image: url(img/banner_head/HGM-Header-XMS_Sets_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_89 { background-image: url(img/banner_head/HGM-Header-XMS_Sets.webp); } } .lh_cat_89_121 { background-image: url(img/banner_head/HGM-Header-XMS_Adventskalender_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_89_121 { background-image: url(img/banner_head/HGM-Header-XMS_Adventskalender.webp); } } .lh_cat_89_122 { background-image: url(img/banner_head/HGM-Header-XMS_Schokogenuesse_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_89_122 { background-image: url(img/banner_head/HGM-Header-XMS_Schokogenuesse.webp); } } .lh_cat_89_124 { background-image: url(img/banner_head/HGM-Header-XMS_Tee_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_89_124 { background-image: url(img/banner_head/HGM-Header-XMS_Tee.webp); } } .lh_cat_89_150 { background-image: url(img/banner_head/HGM-Header-XMS_Tafeln_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_89_150 { background-image: url(img/banner_head/HGM-Header-XMS_Tafeln.webp); } } .lh_cat_89_151 { background-image: url(img/banner_head/HGM-Header-XMS_Sets_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_89_151 { background-image: url(img/banner_head/HGM-Header-XMS_Sets.webp); } } .lh_cat_89_152 { background-image: url(img/banner_head/HGM-Header-XMS_Kochen_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_89_152 { background-image: url(img/banner_head/HGM-Header-XMS_Kochen.webp); } } .lh_cat_89_163 { background-image: url(img/banner_head/HGM-Header-XMS_Lebkuchen_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_89_163 { background-image: url(img/banner_head/HGM-Header-XMS_Lebkuchen.webp); } } .lh_cat_89_164 { background-image: url(img/banner_head/HGM-Header-XMS_Tafeln_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_89_164 { background-image: url(img/banner_head/HGM-Header-XMS_Tafeln.webp); } } .lh_cat_89_165 { background-image: url(img/banner_head/HGM-Header-XMS_Pralinen_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_89_165 { background-image: url(img/banner_head/HGM-Header-XMS_Pralinen.webp); } } .lh_cat_89_166 { background-image: url(img/banner_head/HGM-Header-XMS_Likoer_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_89_166 { background-image: url(img/banner_head/HGM-Header-XMS_Likoer.webp); } } .lh_cat_89_167 { background-image: url(img/banner_head/HGM-Header-Gutschein_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_89_167 { background-image: url(img/banner_head/HGM-Header-Gutschein.webp); } } .lh_cat_95 { background-image: url(img/banner_head/HGM-Header-OST_Eier_Pralinen_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_95 { background-image: url(img/banner_head/HGM-Header-OST_Eier_Pralinen.webp); } } .lh_cat_95_130 { background-image: url(img/banner_head/HGM-Header-OST_Eier_Pralinen_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_95_130 { background-image: url(img/banner_head/HGM-Header-OST_Eier_Pralinen.webp); } } .lh_cat_95_132 { background-image: url(img/banner_head/HGM-Header-OST_Schokogenuesse_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_95_132 { background-image: url(img/banner_head/HGM-Header-OST_Schokogenuesse.webp); } } .lh_cat_95_133 { background-image: url(img/banner_head/HGM-Header-Osternester_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_95_133 { background-image: url(img/banner_head/HGM-Header-Osternester.webp); } } .lh_cat_95_172 { background-image: url(img/banner_head/HGM-Header-OST_Trinken_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_95_172 { background-image: url(img/banner_head/HGM-Header-OST_Trinken.webp); } } .lh_cat_95_173 { background-image: url(img/banner_head/HGM-Header-OST_Kochen_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_95_173 { background-image: url(img/banner_head/HGM-Header-OST_Kochen.webp); } } .lh_cat_99 { background-image: url(img/banner_head/HGM-Header-Kontakt_FK_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_99 { background-image: url(img/banner_head/HGM-Header-Kontakt_FK.webp); } } .lh_cat_116 { background-image: url(img/banner_head/HGM-Header-SOM_Eistee_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_116 { background-image: url(img/banner_head/HGM-Header-SOM_Eistee.webp); } } .lh_cat_116_174 { background-image: url(img/banner_head/HGM-Header-SOM_Grillen_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_116_174 { background-image: url(img/banner_head/HGM-Header-SOM_Grillen.webp); } } .lh_cat_116_175 { background-image: url(img/banner_head/HGM-Header-SOM_Eistee_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_116_175 { background-image: url(img/banner_head/HGM-Header-SOM_Eistee.webp); } } .lh_cat_116_176 { background-image: url(img/banner_head/HGM-Header-SOM_Likoer_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_116_176 { background-image: url(img/banner_head/HGM-Header-SOM_Likoer.webp); } } .lh_cat_116_177 { background-image: url(img/banner_head/HGM-Header-SOM_Genuesse_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_116_177 { background-image: url(img/banner_head/HGM-Header-SOM_Genuesse.webp); } } .lh_cat_145 { background-image: url(img/banner_head/HGM-Header-Mutter_Vatertag_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_145 { background-image: url(img/banner_head/HGM-Header-Mutter_Vatertag.webp); } } .lh_cat_146 { background-image: url(img/banner_head/HGM-Header-kleineAufmerksamkeit_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_146 { background-image: url(img/banner_head/HGM-Header-kleineAufmerksamkeit.webp); } } .lh_cat_146_117 { background-image: url(img/banner_head/HGM-Header-Liebe_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_146_117 { background-image: url(img/banner_head/HGM-Header-Liebe.webp); } } .lh_cat_146_118 { background-image: url(img/banner_head/HGM-Header-Danke_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_146_118 { background-image: url(img/banner_head/HGM-Header-Danke.webp); } } .lh_cat_146_119 { background-image: url(img/banner_head/HGM-Header-Geburtstag_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_146_119 { background-image: url(img/banner_head/HGM-Header-Geburtstag.webp); } } .lh_cat_146_120 { background-image: url(img/banner_head/HGM-Header-Bayern_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_146_120 { background-image: url(img/banner_head/HGM-Header-Bayern.webp); } } .lh_cat_146_170 { background-image: url(img/banner_head/HGM-Header-Mutter_Vatertag_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_146_170 { background-image: url(img/banner_head/HGM-Header-Mutter_Vatertag.webp); } } .lh_cat_146_171 { background-image: url(img/banner_head/HGM-Header-kleineAufmerksamkeit_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_146_171 { background-image: url(img/banner_head/HGM-Header-kleineAufmerksamkeit.webp); } } .lh_cat_146_179 { background-image: url(img/banner_head/HGM-Header-Liebe_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_146_179 { background-image: url(img/banner_head/HGM-Header-Liebe.webp); } } .lh_cat_146_181 { background-image: url(img/banner_head/HGM-Header-OST_Eier_Pralinen_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_146_181 { background-image: url(img/banner_head/HGM-Header-OST_Eier_Pralinen.webp); } } .lh_cat_146_182 { background-image: url(img/banner_head/HGM-Header-SOM_Eistee_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_146_182 { background-image: url(img/banner_head/HGM-Header-SOM_Eistee.webp); } } .lh_cat_146_183 { background-image: url(img/banner_head/HGM-Header-Valentinstag_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_146_183 { background-image: url(img/banner_head/HGM-Header-Valentinstag.webp); } } .lh_cat_146_184 { background-image: url(img/banner_head/HGM-Header-XMS_Sets_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_146_184 { background-image: url(img/banner_head/HGM-Header-XMS_Sets.webp); } } .lh_cat_147 { background-image: url(img/banner_head/HGM-Header-Kochen_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_147 { background-image: url(img/banner_head/HGM-Header-Kochen.webp); } } .lh_cat_147_139 { background-image: url(img/banner_head/HGM-Header-Essig-Oel_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_147_139 { background-image: url(img/banner_head/HGM-Header-Essig-Oel.webp); } } .lh_cat_147_154 { background-image: url(img/banner_head/HGM-Header-Einzelgewuerze_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_147_154 { background-image: url(img/banner_head/HGM-Header-Einzelgewuerze.webp); } } .lh_cat_147_157 { background-image: url(img/banner_head/HGM-Header-Brot_Pasta_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_147_157 { background-image: url(img/banner_head/HGM-Header-Brot_Pasta.webp); } } .lh_cat_147_162 { background-image: url(img/banner_head/HGM-Header-Kuechenhelfer_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_147_162 { background-image: url(img/banner_head/HGM-Header-Kuechenhelfer.webp); } } .lh_cat_147_168 { background-image: url(img/banner_head/HGM-Header-Sets_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_147_168 { background-image: url(img/banner_head/HGM-Header-Sets.webp); } } .lh_cat_148 { background-image: url(img/banner_head/HGM-Header-Tee_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_148 { background-image: url(img/banner_head/HGM-Header-Tee.webp); } } .lh_cat_148_3 { background-image: url(img/banner_head/HGM-Header-Tee_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_148_3 { background-image: url(img/banner_head/HGM-Header-Tee.webp); } } .lh_cat_148_4 { background-image: url(img/banner_head/HGM-Header-Kaffee_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_148_4 { background-image: url(img/banner_head/HGM-Header-Kaffee.webp); } } .lh_cat_148_114 { background-image: url(img/banner_head/HGM-Header-Likoere_Gin_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_148_114 { background-image: url(img/banner_head/HGM-Header-Likoere_Gin.webp); } } .lh_cat_149 { background-image: url(img/banner_head/HGM-Header-Pralinen_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_149 { background-image: url(img/banner_head/HGM-Header-Pralinen.webp); } } .lh_cat_149_100 { background-image: url(img/banner_head/HGM-Header-Schokolade_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_149_100 { background-image: url(img/banner_head/HGM-Header-Schokolade.webp); } } .lh_cat_149_101 { background-image: url(img/banner_head/HGM-Header-Pralinen_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_149_101 { background-image: url(img/banner_head/HGM-Header-Pralinen.webp); } } .lh_cat_149_102 { background-image: url(img/banner_head/HGM-Header-Genuesse_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_149_102 { background-image: url(img/banner_head/HGM-Header-Genuesse.webp); } } .lh_cat_149_159 { background-image: url(img/banner_head/HGM-Header-Honig_Konfituere_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_149_159 { background-image: url(img/banner_head/HGM-Header-Honig_Konfituere.webp); } } .lh_cat_149_161 { background-image: url(img/banner_head/HGM-Header-Muesli_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_149_161 { background-image: url(img/banner_head/HGM-Header-Muesli.webp); } } .lh_cat_156 { background-image: url(img/banner_head/HGM-Header-Valentinstag_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_156 { background-image: url(img/banner_head/HGM-Header-Valentinstag.webp); } } .lh_cat_178 { background-image: url(img/banner_head/HGM-Header-Gutschein_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_178 { background-image: url(img/banner_head/HGM-Header-Gutschein.webp); } } .lh_cat_185 { background-image: url(img/banner_head/HGM-Header-Wellness_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_185 { background-image: url(img/banner_head/HGM-Header-Wellness.webp); } } .lh_cat_186 { background-image: url(img/banner_head/HGM-Header-Spirituals_mobile.webp); } @media only screen and (min-width: 600px) { .lh_cat_186 { background-image: url(img/banner_head/HGM-Header-Spirituals.webp); } } /* .lh_content_bg:before { display:block; content:''; position:absolute; width:100%; height:100%; left: 0; bottom: 0; right: 0; margin: auto; background:rgba(0,0,0,0.2); } .lh_content_bg:after { display:block; content:''; position:absolute; width:100%; height:30px; left: 0; bottom: 0; right: 0; margin: auto; background-image: url(img/icons/bg_video_overblend_bottom.png); background-size: 100% 30px; } @media only screen and (min-width: 985px) { .lh_content_bg:after { height:70px; background-size: 100% 70px; } } */ .lh_content_70 { background-image: url(img/banner_head/HGM-Header-Auszeichnungen_mobile.webp); } @media only screen and (min-width: 600px) { .lh_content_70 { background-image: url(img/banner_head/HGM-Header-Auszeichnungen.webp); } } .lh_content_50 { background-image: url(img/banner_head/HGM-Header-Kontakt_FK_mobile.webp); } @media only screen and (min-width: 600px) { .lh_content_50 { background-image: url(img/banner_head/HGM-Header-Kontakt_FK.webp); } } .lh_content_7 { background-image: url(img/banner_head/HGM-Header-Kontakt_FK_mobile.webp); } @media only screen and (min-width: 600px) { .lh_content_7 { background-image: url(img/banner_head/HGM-Header-Kontakt_FK.webp); } } .lh_content_40 { background-image: url(img/banner_head/HGM-Header-Filialen_mobile.webp); } @media only screen and (min-width: 600px) { .lh_content_40 { background-image: url(img/banner_head/HGM-Header-Filialen.webp); } } .lh_content_110 { background-image: url(img/banner_head/HGM-Header-Nachhaltigkeit_mobile.webp); } @media only screen and (min-width: 600px) { .lh_content_110 { background-image: url(img/banner_head/HGM-Header-Nachhaltigkeit.webp); } } .lh_content_300 { background-image: url(img/banner_head/HGM-Header-Rezepte_mobile.webp); } @media only screen and (min-width: 600px) { .lh_content_300 { background-image: url(img/banner_head/HGM-Header-Rezepte.webp); } } .lh_content_33 { background-image: url(img/banner_head/HGM-Header-Pralinen_mobile.webp); } @media only screen and (min-width: 600px) { .lh_content_300 { background-image: url(img/banner_head/HGM-Header-Pralinen.webp); } } .layout_content_header { position:absolute; left:0px; right:0px; bottom: 80px; text-align:center; } .layout_content_header .headline h1 { font-size:32px; line-height:34px; letter-spacing:5px; text-transform: uppercase; font-weight: 800; color: #eee; padding: 10px 0; margin: 0px; } @media only screen and (min-width: 790px) { .layout_content_header .headline h1 { font-size:40px; line-height:42px; letter-spacing:6px; } } .layout_content_header .text { font-size:18px; line-height:26px; letter-spacing:2px; font-weight: 400; color: #eee; padding:10px 0px; margin: 0px; } .layout_content_header .text a, .layout_content_header .text a:hover { color:#eee; text-decoration:none; border-bottom: 1px solid #eee; } .layout_content_header .icon { padding:10px 0 0 0; } .layout_content_header .icon img { width:auto; height:36px; vertical-align:top; } .headerbar_row { display:flex; margin: 0px 0px; color:#333; align-items:center; background:#fff; padding: 0px 5px; border-radius:12px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); position:relative; justify-content:space-around; height:50px; } @media only screen and (min-width: 985px) { .headerbar_row { padding: 0px 10px; } } .col_filler { flex:1; } .col_back { flex:1; display:flex; height:40px; align-items:center; justify-content:flex-end; padding: 0 5px 0 20px; font-size:14px; line-height:18px; text-align:right; } .col_categories { flex:1; padding: 0px 0px; display:none; } @media only screen and (min-width: 800px) { .col_categories { display:initial;} } .col_cart, .col_wishlist, .col_account, .col_menu, .col_search { text-align:center; /* flex:1; width:auto; */ padding: 0 0 0 0; flex:initial; width:40px; } @media only screen and (min-width: 600px) { .col_cart, .col_wishlist, .col_account, .col_menu, .col_search { flex:initial; width:40px; padding: 0 0 0 0px; } } #cart_short, #wishlist_short, #account_short, #menu_short, #search_short { z-index:1000; height:40px; width:40px; margin: 0px auto; } #cart_short > a, #wishlist_short > a, #account_short > a, #search_short > button { position:relative; display:block; background: transparent; color: #333; border: 2px solid transparent; height:40px; width:40px; border-radius:12px; text-align:center; transition: all 0.3s ease-in-out; cursor:pointer; } #menu_short > button { position:relative; display:block; background: transparent; color: #333; border: 2px solid transparent; height:40px; width:40px; border-radius:12px; text-align:center; transition: all 0.3s ease-in-out; cursor:pointer; } #cart_short > a:hover, #wishlist_short > a:hover, #account_short > a:hover, #menu_short > button:hover, #search_short > button:hover { background: #de0a66; color: #fff; border: 2px solid transparent; } #cart_short .fa-solid, #cart_short .fa-regular, #wishlist_short .fa-solid, #wishlist_short .fa-regular, #account_short .fa-solid, #account_short .fa-regular, #menu_short .fa-solid, #menu_short .fa-regular, #search_short .fa-solid, #search_short .fa-regular { font-size:18px; line-height:38px; width:38px; vertical-align:top; } #cart_short .fa-solid, #cart_short .fa-regular { } #account_short .fa-solid, #account_short .fa-regular { font-size:16px; line-height:36px; } #search_short .fa-solid, #search_short .fa-regular { line-height:36px; } #cart_short .count, #wishlist_short .count { position:absolute; right:-4px; top:-4px; background: #de0a66; color: var(--count_cart_wishlist_color, #fff); display:inline-block; padding: 3px; font-size:12px; line-height:12px; text-align:center; font-weight:700; min-width:20px; border-radius: 5px; } #search { position: absolute; width: auto; height: 40px; margin: auto; top: 0px; bottom: 0px; left: 10px; right: 10px; max-width:600px; } @media only screen and (min-width: 600px) { } @media only screen and (min-width: 985px) { } .toggle_search { display: none; z-index: 1301; position: absolute; top: 0px; left: 0; bottom: 0px; right: 0; margin: auto; width: 100%; height: 100%; background-color:rgba(222,10,102,0.9); border-radius:12px; padding:20px; } @media only screen and (min-width: 985px) { .toggle_search { padding:40px; } } .search_inner { position:relative; display: flex; } .search_inner .search_closer { display:block; width:40px; height:40px; text-align:center; font-size:20px; line-height:40px; cursor:pointer; color: #555; background-color: #f2f2f2; border-color: #ccc; border-radius:8px; margin: 0 0 0 10px; border:none; } .search_inner .search_input { flex: 1; } .search_inner input[type=text], .search_inner input[type=text]:hover, .search_inner input[type=text]:focus { border-width: 1px 0px 1px 1px; border-style: solid; border-radius: 8px 0 0 8px; border-color: #ccc; } .search_inner .search_button { width:40px; } .search_inner .search_button .cssButton { min-height: 40px; height:40px; padding: 7px 5px; border-radius: 0 8px 8px 0; color: #555; background-color: #f2f2f2; border-color: #ccc; border-style: solid; border-width:1px 1px 1px 1px; } .search_inner .search_button .cssButton .cssButtonIcon { font-size:18px; } .menu_items { list-style-type:none; display: none; align-items: flex-end; margin: 0px auto; padding: 0px 0px; height:100%; } @media only screen and (min-width: 800px) { .menu_items { display: flex; } } .menu_items > li { padding: 0px 5px; height:100%; } @media only screen and (min-width: 1300px) { .menu_items > li { padding: 0px 10px; } } .menu_items > li > a { display:flex; align-items:center; height:100%; padding: 8px 5px; font-size:14px; line-height:18px; text-transform:none; font-weight:700; transition: all 0.3s ease-in-out; border-radius:8px; color:#444; border:none; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } .menu_items > li > span.nolink { display:flex; align-items:center; height:100%; padding: 8px 5px; font-size:14px; line-height:18px; text-transform:uppercase; font-weight:700; transition: all 0.3s ease-in-out; border-radius:8px; color:#444; border:none; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } @media only screen and (min-width: 920px) { .menu_items > li > a { font-size:16px; } .menu_items > li > span.nolink { font-size:16px; } } @media only screen and (min-width: 1260px) { .menu_items > li > a { font-size:18px; } .menu_items > li > span.nolink { font-size:18px; } } .menu_items > li > a > .counts { display:inline; font-weight:400; font-size:10px; line-height:10px; padding: 0 0 0 3px; } .menu_items > li.has_sub_cats > a, .menu_items > li.has_sub_cats > .nolink { position:relative; padding: 8px 20px 8px 5px; } .menu_items > li.has_sub_cats > a .sub_cats_arrow, .menu_items > li.has_sub_cats > .nolink .sub_cats_arrow { position:absolute; top:0px; bottom:0px; right:5px; margin: auto; width: 10px; height:20px; } .menu_items > li.has_sub_cats > a .sub_cats_arrow::after, .menu_items > li.has_sub_cats > .nolink .sub_cats_arrow::after { font-family: 'Font Awesome 6 Free'; content: '\f078'; font-size:12px; line-height:20px; font-weight: 900; } .menu_items > li > a:hover { color:#de0a66; background:rgba(0,0,0,0.0); } .menu_items > li > .nolink { display:block; padding: 8px 5px; font-size:12px; line-height:20px; text-transform:uppercase; font-weight:700; transition: all 0.3s ease-in-out; color:#444; border-radius:8px; border:none; } .menu_items > li > .nolink:hover { color:#de0a66; background:rgba(0,0,0,0.0); } .menu_items ul { list-style-type:none; margin: 0px; } .menu_items a:hover { text-decoration:none; } .mega_menu { position: absolute; left: 0; width: 100%; top: calc(100% - 8px); opacity: 0; visibility: hidden; transition: all 0.3s ease-in-out; transition-delay: 400ms; background:#f5f5f5; padding: 50px 30px 20px 30px; z-index:-1; box-shadow: 0 10px 15px -15px #333; border-radius: 0 0 12px 12px; } .mega_menu:before { content:''; width:100%; height:1px; border-top:1px solid var(--categoriesmenu_border, #f5f5f5); position:absolute; left:0px; right:0px; top:0px; } .menu_items li:hover .mega_menu { opacity: 1; visibility: visible; transition-delay: 400ms; } .mega_menu a { color:#444; } .mega_menu a:hover { color:#de0a66; } .mega_menu a .counts { display:inline; font-weight:400; font-size:10px; color:#666; padding: 0 0 0 3px; vertical-align:top; } /* .mega_menu > ul { list-style-type:none; margin: 0px auto; padding: 5px 5px 20px 5px; display: flex; flex-wrap: wrap; width:100%; max-width: 1400px; } */ .mega_menu > ul { -moz-column-count: 3; -moz-column-gap: 60px; -moz-column-rule: 1px solid #ddd; -webkit-column-count: 3; -webkit-column-gap: 60px; -webkit-column-rule: 4px solid #ddd; column-count: 3; column-gap: 60px; column-rule: 1px solid #ddd; } .mega_menu > ul > li.overview { width: calc(100% + 10px); margin: -5px -5px 5px -5px; padding: 0px; } .mega_menu > ul > li.overview > a { padding: 10px 20px 10px 18px; display:block; font-size:13px; line-height:15px; text-transform:none; font-weight:400; border-bottom: 1px solid #e1e1e1; } .mega_menu > ul > li.overview.Selected > a { color: #222; } .mega_menu > ul > li.overview .fa-solid, .mega_menu > ul > li.overview .fa-regular { margin: 0 5px 0 0; } /* .mega_menu > ul > li { width:calc(25% - 20px); margin: 5px 10px; padding: 0px 0px; } */ .mega_menu > ul > li { overflow: hidden; -webkit-column-break-inside: avoid; page-break-inside: avoid; -moz-column-break-inside:avoid; column-break-inside:avoid; break-inside: avoid; break-inside: avoid-column; margin-left:0px; margin-bottom:10px; list-style-type:none; display:inline-block; width:100%; } .mega_menu > ul > li > a { padding: 10px 5px; display:block; font-size:16px; line-height:18px; text-transform:uppercase; font-weight:700; border-bottom: 0px solid #e1e1e1; } .mega_menu > ul ul { margin: 0px 0 0 0; } .mega_menu > ul ul > li.overview { display:none; } /* only 3 level */ .mega_menu > ul ul ul { display:none; } .mega_menu > ul ul > li > a { position:relative; padding: 7px 0px 7px 20px; display:block; font-size:16px; line-height:18px; text-transform:none; font-weight:400; border-bottom: 0px solid #e1e1e1; } .mega_menu > ul ul > li > a::after { font-family: 'Font Awesome 6 Free'; content: '\f054'; font-size:9px; font-weight: 900; margin: 0 0 0 0px; position:absolute; top:8px; left:6px; } .menu_items .active1 > a, .menu_items .activeparent1 > a, .menu_items .active1 > .nolink, .menu_items .activeparent1 > .nolink { font-weight:700; color:var(--categoriesitems_level1_color_selected, #222); } .menu_items .active2 > a, .menu_items .activeparent2 > a { font-weight:700; color:#de0a66; } .menu_items .active3 > a, .menu_items .activeparent3 > a { font-weight:700; color:#de0a66; } .mega_menu > ul > li.level_manu { width:calc(20% - 20px); margin: 0px 10px; padding: 0px 0px; } .mega_menu > ul > li.level_manu > a { position:relative; padding: 10px 10px 10px 20px; display:block; font-size:13px; line-height:15px; text-transform:none; font-weight:400; border-bottom: 1px solid #e1e1e1; } .mega_menu > ul > li.level_manu.Selected > a { font-weight:700; color:var(--categoriesitems_level2_selected, #222); } .mega_menu > ul > li.level_manu > a::after { font-family: 'Font Awesome 6 Free'; content: '\f054'; font-size:9px; font-weight: 900; margin: 0 0 0 0px; position:absolute; top:10px; left:6px; } .mega_menu > ul > li.level_manu > a > strong { font-weight:400; color:#ff3535; } /* End Megamen� case 1*/ /* .menu_items > li > a { color:#333; } .menu_items > li > a:hover { color:#666; } .menu_items > li > span.nolink { color:#333; } .menu_items > li > span.nolink:hover { color:#333; } .menu_items .active1 > a, .menu_items .activeparent1 > a, .menu_items .active1 > .nolink, .menu_items .activeparent1 > .nolink { font-weight:700; color:#de0a66; } .lh_no_bg .menu_items > li > a { color:#000; } .lh_no_bg .menu_items > li > a:hover { color:#666; } .lh_no_bg .menu_items > li > span.nolink { color:#000; } .lh_no_bg .menu_items > li > span.nolink:hover { color:#000; } .lh_no_bg .menu_items .active1 > a, .lh_no_bg .menu_items .activeparent1 > a, .lh_no_bg .menu_items .active1 > .nolink, .lh_no_bg .menu_items .activeparent1 > .nolink { font-weight:700; color:#de0a66; } .menu_items ul { list-style-type:none; margin: 0px; } .menu_items a:hover { text-decoration:none; } .menu_items .active2 > a, .menu_items .activeparent2 > a { font-weight:700; color:#333; } .menu_items .active3 > a, .menu_items .activeparent3 > a { font-weight:700; color:#333; } .menu_items.case_2 li.level1 { position:relative; } .menu_items.case_2 li.level2 { position:relative; } .menu_items.case_2 li.level3 { position:relative; } .menu_items.case_2 a:hover { text-decoration:none; } .menu_items.case_2 .dropdown_menu { position: absolute; transition: all 0.3s ease-in-out; background:#f5f5f5; padding: 10px 0px 20px 0px; z-index:101; box-shadow: 0 10px 15px -15px #333; opacity: 0; visibility: hidden; } .menu_items.case_2 li .dropdown_menu li { padding: 0px 20px; } .menu_items.case_2 li .dropdown_menu a { position:relative; padding: 9px 15px 9px 0px; display:block; font-size:14px; line-height:16px; text-transform:none; font-weight:400; border-bottom: 1px solid #e1e1e1; } .menu_items.case_2 li.level2.has_sub_cats > a::after { position:absolute; top:9px; bottom:9px; right:0px; margin: auto; width: 10px; height:16px; font-family: 'Font Awesome 6 Free'; content: '\f054'; font-size:11px; line-height:15px; font-weight: 900; } .menu_items.case_2 li .dropdown_menu a > .counts { display:inline; font-weight:400; font-size:10px; color:#666; padding: 0 0 0 3px; } .menu_items.case_2 li.level_manu > a > strong { font-weight:400; color:#222; } .menu_items.case_2 li .dropdown_menu .fa-solid { margin: 0 5px 0 0; } .menu_items.case_2 li .dropdown_menu .overview { display:none; } .menu_items.case_2 li .dropdown_menu .overview a { font-size:14px; line-height:16px; font-weight:400; } .menu_items.case_2 li.level1 > .dropdown_menu { left: 0; width: 240px; top: 100%; } .menu_items.case_2 li.level1:hover > .dropdown_menu { opacity: 1; visibility: visible; } .menu_items.case_2 li.level2 > .dropdown_menu { border-top:none; left: 100%; width: 240px; top: calc(100% - 45px); } .menu_items.case_2 li.level2:hover > .dropdown_menu { opacity: 1; visibility: visible; } .menu_items.case_2 li.level3 > .dropdown_menu { display:none; } */ /* 07. END Categories Top Menu */ /* END header */ /* 4. START headlines */ h1 { font-size: 26px; line-height: 28px; letter-spacing: 4px; text-transform: uppercase; font-weight: 800; color:#de0a66; text-align:center; padding: 0; margin: 30px 0 20px 0; hyphens:auto; } h1.green { color:#75C9D5; } .headline_right { display: block; float: right; padding: 5px 0 0; width: 100%; font-size:14px; } @media only screen and (min-width: 690px) { .headline_right { width:initial; padding: 0 } } .headline_big { color:#555; font-weight:300; font-size:24px; line-height:28px; margin:25px 0 15px 0; padding:0 0 5px; border-bottom: 0px solid transparent; } h2 { font-weight:bold; color:#333; font-size:16px; margin:20px 0px 8px 0px; padding:0px; width:auto; border-bottom: 1px solid #ddd; padding-bottom:5px; } h3 { color:#707070; font-weight:bold; font-size:16px; } h4 { color:#de0a66; font-weight:500; text-transform:uppercase; font-size:16px; line-height: 20px; margin:0px 0px 14px 0px; padding:0px 0px 5px 0px; border-bottom: 1px solid #ddd; } /* same format as h4 */ .subline { color:#de0a66; font-weight:500; text-transform:uppercase; font-size:16px; line-height: 20px; margin:0px 0px 14px 0px; padding:0px 0px 5px 0px; border-bottom: 1px solid #ddd; } .subline.green { color:#75C9D5; } h4.detailbox { color:#222; font-size:14px; margin:40px 0px 10px 0px; } /* END headlines */ /* 5. START Links global */ a, a:link, a:visited, a:active, a:hover { background:transparent; text-decoration:none; outline:none; cursor:pointer; } a:link { color:#333; outline:none; } a:visited { color:#333; outline:none; } a:hover, a:active { color:#333; outline:none; } a:hover { color:#de0a66; text-decoration:underline; outline:none; } a img { border:none; outline:none; } .lazyload, .lazyloading { opacity: 0; } .lazyloaded { opacity: 1; -webkit-transition: opacity 1s ease; -moz-transition: opacity 1s ease; -o-transition: opacity 1s ease; transition: opacity 1s ease; } a.arrow { color:#707070; position:relative; padding: 0; } a.arrow:before { font-family: 'Font Awesome 6 Free'; content: '\f178'; font-weight: 900; margin:0 5px 0 0; } a.arrow:hover { color:#333; text-decoration:none; } .external_links a:after { font-family: 'Font Awesome 6 Free'; content: '\f35d'; font-weight: 900; font-size: 10px; line-height:10px; vertical-align:1px; margin: 0 0 0 5px; } .external_links a:hover { text-decoration:none; } /* END Links global */ /* 09. START inputs & input layout */ label { display:block; } .field_item_row { padding: 0px 0; margin: 0px -10px; display: flex; flex-wrap: wrap; } .field_item_1 { position:relative; width:100%; padding: 5px 0; } .field_item_2 { position:relative; width:50%; padding: 5px 10px; } .field_item_3 { position:relative; width:120px; padding: 5px 10px; } .field_item_4 { position:relative; flex: 1; padding: 5px 10px; } .field_item_5 { position:relative; width:25%; padding: 5px 10px; } .field_item_6 { position:relative; width:200px; padding: 5px 10px; } .field_item_7 { position:relative; width:60px; padding: 5px 10px 5px 0px; } .field_item_7 .cssButtonIcon { font-size: 18px; } .field_password { display:flex; align-items:center; background-color:#f2f2f2; border-color: #d9d9d9; border-style: solid; border-width: 1px; transition: all 0.3s ease-in-out; color: #555; border-radius: 8px; height:40px; } .field_password:hover { background-color:#f2f2f2; border-color: #999; color: #555; } .field_password:focus-within { background-color:#fff; border-color: #999; color: #333; outline: 0 none; } .field_password input[type=text], .field_password input[type=password] { height:40px; padding: 10px 8px; background:transparent; border:none; } .field_password input[type=text]:hover, .field_password input[type=password]:hover { background:transparent; border:none; } .field_password input[type=text]:focus, .field_password input[type=password]:focus { background:transparent; border:none; } .field_input { flex:1; } .field_eye { position:absolute; bottom: 5px; right:0px; width:40px; height:40px; line-height:42px; text-align:center; cursor:pointer; display:block; font-size:20px; border:none; background:transparent; border-radius:8px !important; } .field_eye .fa-eye { color:#ccc; cursor:pointer; } .field_eye .fa-eye-slash { color:#555; cursor:pointer; } .field_text { display:block; font-size:12px; line-height:16px; padding: 0 1px 2px 1px; font-weight:700; white-space:nowrap; transition: all 0.3s ease-in-out; color:#555; } .field_item_1:focus-within .field_text, .field_item_2:focus-within .field_text, .field_item_3:focus-within .field_text, .field_item_4:focus-within .field_text { color:#333; } .inputRequirement, .inputRequirement_textarea { position:absolute; right:2px; top:5px; font-size:12px; line-height:16px; padding: 0 0 2px 0; color:#d82626; font-weight:400; } .inputRequirement .fa-solid, .inputRequirement_textarea .fa-solid { vertical-align:top; font-size:8px; line-height:16px; margin-left:6px; } .field_item_row .inputRequirement, .field_item_row .inputRequirement_textarea { right:12px; } .fields_required { margin-left:2px; font-size:11px; line-height:11px; vertical-align:baseline; color:#666; font-weight:400; text-transform:none; white-space:nowrap; } .fields_required .fa-solid { font-size:8px; line-height:8px; vertical-align:1px; margin: 0px 0px 0px 2px; } .inputNote { display:block; font-size:12px; line-height:16px; padding: 4px 0 0 0; font-weight:400; } input { font-family: 'Encode Sans', sans-serif; font-size:16px; line-height:20px; font-weight:400; } textarea { font-family: 'Encode Sans', sans-serif; font-size:16px; line-height:20px; font-weight:400; color: #555; background-color:#f2f2f2; border-color: #d9d9d9; border-style: solid; border-width: 1px; vertical-align: middle; padding: 10px 8px; border-radius: 8px; width:100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; transition: all 0.3s ease-in-out; } textarea#message { height:120px; } textarea#message_body { resize: vertical; height:140px; } textarea#review { height:90px; } textarea#comments { height:110px; } select { font-family: 'Encode Sans', sans-serif; font-size:16px; font-weight:400; line-height:20px; color: #555; background-color:#f2f2f2; border-color: #d9d9d9; border-style: solid; border-width: 1px; vertical-align: middle; padding: 10px 8px; border-radius: 8px; width:100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; transition: all 0.3s ease-in-out; height:40px; opacity:0; } input[type=text], input[type=password], input[type=email], input[type=tel] { color: #555; background-color:#f2f2f2; border-color: #d9d9d9; border-style: solid; border-width: 1px; vertical-align: middle; padding: 10px 8px; border-radius: 8px; width:100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; transition: all 0.3s ease-in-out; height:40px; } input[type=password] { letter-spacing:1px; } input[type=text]:hover, input[type=password]:hover, input[type=email]:hover, input[type=tel]:hover, select:hover, textarea:hover { background-color:#f2f2f2; border-color: #999; color: #555; } input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=tel]:focus, select:focus, textarea:focus { background-color:#fff; border-color: #de0a66; color: #333; outline: 0 none; } .search_input ::-webkit-input-placeholder, .search_input ::-moz-placeholder, .search_input :-ms-input-placeholder, .search_input :-moz-placeholder, .sf_newsletter_input ::-webkit-input-placeholder, .sf_newsletter_input ::-moz-placeholder, .sf_newsletter_input :-ms-input-placeholder, .sf_newsletter_input :-moz-placeholder, .addquickie_input ::-webkit-input-placeholder, .addquickie_input ::-moz-placeholder, .addquickie_input :-ms-input-placeholder, .addquickie_input :-moz-placeholder { color: #666; font-style:italic; line-height:28px; } /* 10. START Custom checkbox & radio */ /* custom checkbox */ .cus_check { font-size:14px; line-height:20px; width:100%; } .cus_check input[type="checkbox"] { position: absolute; width:18px; height:18px; /* visibility:hidden; */ opacity: 0; } .cus_check input[type="checkbox"] ~ label { padding-left: 26px; position: relative; cursor: pointer; display: block; margin: 0 0 0px 0; } .cus_check input[type="checkbox"] ~ label:before { font-family: 'Font Awesome 6 Free'; content: "\f0c8"; font-weight:400; font-size: 18px; line-height:16px; position: absolute; top: 2px; left: 0px; color:#666; transition: background .15s; } .cus_check input[type="checkbox"]:disabled ~ label { color: #ccc; } .cus_check input[type="checkbox"]:disabled ~ label, .cus_check input[type="checkbox"]:disabled ~ label:before, .cus_check input[type="checkbox"]:disabled ~ label:after { cursor: not-allowed; } .cus_check input[type="checkbox"]:disabled, .cus_check input[type="checkbox"]:disabled ~ label:before, .cus_check input[type="checkbox"]:disabled:checked ~ label:before { opacity:0.5; } .cus_check input[type="checkbox"] ~ label:after { font-family: 'Font Awesome 6 Free'; content: '\f14a'; font-weight:900; font-size: 18px; line-height:18px; position: absolute; top: 1px; left: 0px; color: #333; transition: transform .15s; transform: scale(0) rotate(90deg); text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .cus_check input[type="checkbox"]:checked ~ label:after { transform: scale(1) rotate(0deg); } /* custom radios */ .cus_radio { font-size:14px; line-height:20px; width:100%; } .cus_radio input[type="radio"] { position: absolute; width:16px; height:16px; /* visibility:hidden; */ opacity: 0; } .cus_radio input[type="radio"] ~ label { padding-left: 26px; position: relative; cursor: pointer; display: block; margin: 0 0 0px 0; } .cus_radio input[type="radio"] ~ label:before { font-family: 'Font Awesome 6 Free'; content: "\f111"; font-weight:400; font-size: 16px; line-height:16px; position: absolute; top: 2px; left:0px; color:#666; transition: background .15s; } .cus_radio input[type="radio"]:disabled ~ label { color: #ccc; } .cus_radio input[type="radio"]:disabled ~ label, .cus_radio input[type="radio"]:disabled ~ label:before, .cus_radio input[type="radio"]:disabled ~ label:after { cursor: not-allowed; } .cus_radio input[type="radio"]:disabled, .cus_radio input[type="radio"]:disabled ~ label:before, .cus_radio input[type="radio"]:disabled:checked ~ label:before { opacity:0.5; } .cus_radio input[type="radio"] ~ label:after { font-family: 'Font Awesome 6 Free'; content: '\f192'; font-weight:900; font-size: 16px; line-height:16px; position: absolute; top: 2px; left: 0; color: #333; transition: transform .15s; transform: scale(0) rotate(90deg); text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .cus_radio input[type="radio"]:checked ~ label:after { transform: scale(1) rotate(0deg); } /* 10. END Custom checkbox & radio */ /* END inputs */ /* 7. START Footer */ .layout_subfooter { background:#de0a66; padding: 0px 20px; } .layout_subfooter_inner { overflow:hidden; width:100%; max-width: 1000px; margin: 0px auto; } .subfooter_row { display:flex; justify-content:space-between; } .subfooter_item { padding: 12px 10px; display:flex; flex-direction:column; width:33.3333%; } .subfooter_item .image { display:inline-block; width:30px; height:30px; margin: 0px auto; } .subfooter_item .image img { width:100%; height:auto; vertical-align:top; } .subfooter_item .icon { display:block; text-align:center; color:#fff; font-size:20px; line-height:20px; padding: 0 0 4px 0; margin: 0px auto; } .subfooter_item .text { display:block; width:100%; text-align:center; margin: 4px 0 0 0; color:#fff; font-size:14px; line-height:20px; } .subfooter_item .text a { color:#fff; border-bottom: 1px solid #f2f2f2; text-decoration:none; } .subfooter_item_full { padding: 20px 10px; text-align:center; color:#fff; font-size:16px; line-height:24px; width:100%; } .subfooter_item_full a { color:#fff; border-bottom: 1px solid #f2f2f2; text-decoration:none; } .layout_subfooter_always_love { padding: 40px 20px; } .layout_subfooter_always_love_inner { overflow:hidden; width:100%; max-width: 1000px; margin: 0px auto; text-align:center; } .layout_subfooter_always_love img { width:100%; max-width:600px; height:auto; vertical-align:top; } .layout_footer { padding: 30px 0px; background: #444; color:#f2f2f2; } .footer_slogan { text-transform:uppercase; text-align:center; font-size:18px; line-height:22px; letter-spacing:2px; padding: 0px 10px; } .footer_claim { margin: 20px auto 0 auto; width:100%; max-width:300px; } .footer_claim img { width:100%; height:auto; vertical-align:top; } .footer_content { margin: 20px 0 0 0; display:flex; height:auto; } @media only screen and (min-width: 600px) { .footer_content { height:70px; margin: 0 0 0 0; } } .footer_content_center { display:flex; align-items:flex-end; padding: 0px 20px; } .footer_content_left { flex:1; /* background-image: url(img/icons/HGM-heartline_left-white.png); background-repeat:no-repeat; background-position:bottom right; background-size:auto 70px; */ } .footer_content_right { flex:1; /* background-image: url(img/icons/HGM-heartline_right-white.png); background-repeat:no-repeat; background-position:bottom left; background-size:auto 70px; */ } ul.footer_list { list-style-type:none; margin: 0px; padding: 0px; text-align:center; } ul.footer_list > li { display:inline-block; padding: 5px 10px; } ul.footer_list > li > a { display:block; padding: 0px 0px; color:#f2f2f2; text-transform:uppercase; font-size:14px; line-height:18px; text-decoration:none; border-bottom: 1px solid transparent; } ul.footer_list > li > a:hover { color:#f2f2f2; text-decoration:none; border-bottom: 1px solid #f2f2f2; } ul.footer_list ul { display:none !important; } ul.footer_list li.withdraw_link a { color:#fff; font-size: 14px; font-weight: 700; line-height: 18px; } .footer_social { margin: 10px 0 0 0; text-align:center; } .footer_social a { margin: 0px 0px; display:inline-block; padding: 6px 6px; font-size:26px; line-height:26px; color:#f2f2f2; } .footer_social a:hover { color:#f2f2f2; text-decoration:none; } .footer_payment { margin: 30px 0 0 0; text-align:center; } .footer_payment > span { display:inline-block; vertical-align:top; width:64px; border-radius:4px; padding: 4px; background: rgba(255,255,255,0.3); margin: 5px 5px 5px 5px; } .footer_payment > span img { width:56px; height:37px; vertical-align:top; opacity:0.8; filter: grayscale(100%); } .footer_payment > span:hover img { opacity:1.0; filter: grayscale(0%); } .footer_copyright { margin: 20px 0 0 0; text-align:center; font-size:12px; line-height:18px; color:#ddd; } .footer_copyright a { color:#ddd; border-bottom: 1px solid #ddd; text-decoration:none; } .footer_copyright a:hover { color:#ddd; border-bottom: 1px solid #ddd; text-decoration:none; } .copyright { display:none; visibility:hidden; height:0px; } .copyright a { text-decoration:none; } /* ParseTime */ .parseTime { margin:0 auto; text-align:center; color:#ccc; font-size:10px; padding:0 0 0px 0; margin: -10px 0 0 0; } /* END Footer */ /* 8. START content*/ .layout_content { width:100%; margin: 0px auto; padding: 0 0px; } .bg_grey { background:#e4e4e4; } .layout_content_full { width:100%; margin: 0px auto; padding: 0 0 0 0; } .layout_content_small { width:100%; max-width:1240px; margin: 0px auto; padding: 0 10px; } .layout_content_medium { width:100%; max-width:1440px; margin: 0px auto; padding: 0 10px; } @media only screen and (min-width: 985px) { .layout_content_small { padding: 0 20px; } .layout_content_medium { padding: 0 20px; } } .layout_content_full.colored { width:100%; margin: 50px auto; padding: 30px 0 10px 0; background:#f5f5f5; } .flex_column_row { margin: 0px -10px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .flex_2column_item { padding: 0px 10px; margin: 20px 0 20px 0; width:100%; } .flex_2column_item:nth-child(odd) { padding: 0px 10px 0px 10px; } .flex_2column_item:nth-child(even) { padding: 0px 10px 0px 10px; border-left:none; } @media only screen and (min-width: 759px) { .flex_2column_item { width:50%; } .flex_2column_item:nth-child(odd) { padding: 0px 30px 0px 10px; } .flex_2column_item:nth-child(even) { padding: 0px 10px 0px 30px; border-left:1px solid #ddd; } } .flex_column_row.reverse { flex-direction:row-reverse; } @media only screen and (min-width: 759px) { .flex_column_row.reverse .flex_2column_item:nth-child(even) { padding: 0 30px 0 10px; border-left:none; } .flex_column_row.reverse .flex_2column_item:nth-child(odd) { padding: 0 10px 0 30px; border-left:1px solid #ddd; } } .flex_3column_item { padding: 0px 10px 0px 10px; margin: 20px 0 20px 0; -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .flex_1column_item { padding: 0px 10px 0 10px; margin: 20px 0 20px 0; width:100%; border-left:none; } @media only screen and (min-width: 759px) { .flex_3column_item { padding: 0px 30px 0px 10px; } .flex_1column_item { width:300px; padding: 0px 10px 0 30px; border-left:1px solid #ddd; } } .content_navigation .flex_3column_item { padding: 0px 10px 0px 10px; } .content_navigation .flex_1column_item { display:none; } @media only screen and (min-width: 985px) { .content_navigation .flex_3column_item { padding: 0px 30px 0px 10px; } .content_navigation .flex_1column_item { display:block; } } .contentbox { padding:0 0 0 0; margin: 0 0 0 0; } /* Start Fallback */ .highlightbox { padding:15px 0; } /* End Fallback */ .flex_column_row.bordered { margin: 30px -10px 20px -10px; } .flex_column_row.bordered .flex_2column_item { margin: 0px 0px 0px 0px; } .flex_column_row.bordered .contentbox { padding: 20px 0px 20px 0; margin: 0 0 0 0; border-top: 1px solid #ccc; } ul.account { list-style-type:none; padding: 0 0 0 0; margin: 0px 0px 0px 0px; } ul.account li { padding: 15px 0px; border-top: 1px solid #ddd; } ul.account li.botttomborder { border-top: none; border-bottom: 1px solid #ddd; } ul.account li.noborder { padding: 6px 0px; border-top: none; } ul.account a:hover { text-decoration:none; } .account_inner { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .account_image { width:70px; padding: 5px; background:#fff; border: 1px solid #ddd; } .account_text { -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; padding: 0 0 0 30px; } .account_icons { float:right; display:block; margin: 0 -4px 0 0 } .account_icons .cssButton { float:left; width:40px; margin: 0px 4px; padding: 7px 0px 7px 0px !important; } ul.arrownav { list-style-type:none; padding: 0 0 0 0; margin: 0px 0px 0px 0px; } ul.arrownav li { padding: 12px 0px 12px 0px; border-bottom: 1px solid #ddd; } ul.arrownav li a { display:block; padding: 0 0 0 30px; position:relative; font-weight:600; } ul.arrownav li a:hover { text-decoration:none !important; } ul.arrownav li a:before { font-family: 'Font Awesome 6 Free'; content: "\f178"; font-weight:900; position: absolute; top: 0px; left: 0px; } /* END content */ /* 9. START pseudo hr's */ div.hr_1 { height:1px; line-height:1px; margin:0; padding:0; display:block; border-bottom:solid 1px #ddd; background-color:transparent; } div.hr_5 { height:1px; line-height:1px; margin:5px 0px; padding:0; display:block; border-bottom:solid 1px #ddd; background-color:transparent; } div.hr_10 { height:1px; line-height:1px; margin:10px 0px; padding:0; display:block; border-bottom:solid 1px #ddd; background-color:transparent; } div.hr_15 { height:1px; line-height:1px; margin:15px 0px; padding:0; display:block; border-bottom:solid 1px #ddd; background-color:transparent; } /* 9. END pseudo hr's */ /* 10. START breadcrumbs */ /* 08. START breadcrumbs */ .breadcrumb { padding:15px 2px 15px 2px; font-size:13px; line-height:17px; color:#666; border-top: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1; } .breadcrumb.details { padding:15px 70px 15px 2px; font-size:13px; line-height:17px; color:#666; border-top: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1; } .breadcrumb.hidden { display:none; margin:0px; padding:0px; } .breadcrumb span { vertical-align:top; margin: 2px 0px; } .breadcrumb span.limit { display:inline-block; max-width:160px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; } .breadcrumb a, .breadcrumb a:link, .breadcrumb a:visited, .breadcrumb a:active { display:inline-block; cursor:pointer; color:#666; border-bottom: 1px solid #707070; } .breadcrumb a:hover { text-decoration:none; color:#666; border-bottom: 1px solid #707070; } .breadcrumb span.current { font-weight:400; } .breadcrumb .fa-solid { margin: 2px 0px; vertical-align:top; font-size:12px; line-height:16px; display:inline-block; width:24px; text-align:center; } /* 08. END breadcrumbs */ /* 14. START product_navigator */ .productnavigator { margin: 0px 0px 0px 0px; position: absolute; right: 0; top: -51px; display: flex; align-items: center; height: 51px; } .productnavigator a, .productnavigator .inactive { display:inline-block; border: 1px solid #555; width:26px; height:26px; line-height:26px; text-align:center; font-size: 14px; color:#333; border-radius:26px; margin: 0 0 0 10px; box-sizing:border-box; } .productnavigator .inactive { opacity:0.3; } .productnavigator a:hover { color:#de0a66; border: 1px solid #de0a66; } .productnavigator .fa-solid { line-height:24px; text-align:center; font-size: 14px; vertical-align:top; } /* 14. END product_navigator */ /* 11. START error, info & success messages */ /* errormessage */ .errormessage { position:relative; border: none; padding: 10px 10px 10px 50px; font-size:14px; line-height:20px; font-weight:400; color:#d82626; background: #fff3f3; margin:5px 0 20px 0; border-radius:10px; } .errormessage.small { font-size:13px; line-height:18px; } .errormessage::before { font-family: 'Font Awesome 6 Free'; font-weight:900; content: '\f071'; position:absolute; width:40px; top:0px; left:0px; bottom: 0px; font-size:20px; line-height:20px; padding: 0px 0px; color:#d82626; background:rgba(227,40,40,0.1); align-items: center; justify-content: center; display: flex; border-radius:10px 0px 0px 10px; } .errormessage.small::before { line-height:18px; } .errormessage a { color:#d82626; text-decoration:none; border-bottom: 1px solid #d82626; } .errormessage p { margin: 0px 0px; padding: 0px 0px; } .errormessage.shopsystem { margin-top:36px; margin-bottom:-36px; } .errormessage ul li { margin:40px; } .errormessage span { color:#d82626 !important; } /* info message */ .infomessage { position:relative; border: none; padding: 10px 10px 10px 50px; font-size:14px; line-height:20px; font-weight:400; color:#555; background: #fff7dd; margin: 5px 0 20px 0; border-radius:10px; } .infomessage.small { font-size:13px; line-height:18px; } .infomessage p { margin: 0px 0px; padding: 0px 0px; } .infomessage a { color:#555; text-decoration:none; border-bottom: 1px solid #555; } .infomessage::before { font-family: 'Font Awesome 6 Free'; font-weight:900; content: '\f05a'; position:absolute; width:40px; top:0px; left:0px; bottom: 0px; font-size:20px; line-height:20px; padding: 0px 0px; color:#555; background:rgba(0,0,0,0.05); align-items: center; justify-content: center; display: flex; border-radius:10px 0px 0px 10px; } .infomessage.small::before { line-height:18px; } .infomessage .color_error_message { color:inherit; } /* success message */ .successmessage { position:relative; border: none; padding: 10px 10px 10px 50px; font-size:14px; line-height:20px; font-weight:400; color:#43c875; background: #e1f6e9; margin: 5px 0 20px 0; border-radius:10px; } .successmessage.small { font-size:13px; line-height:18px; } .successmessage p { margin: 0px 0px; padding: 0px 0px; } .successmessage a { color:#43c875; text-decoration:none; border-bottom: 1px solid #43c875; } .successmessage::before { font-family: 'Font Awesome 6 Free'; font-weight:400; content: '\f058'; position:absolute; width:40px; top:0px; left:0px; bottom: 0px; font-size:20px; line-height:20px; padding: 0px 0px; color:#43c875; background:rgba(67,200,117,0.1); align-items: center; justify-content: center; display: flex; border-radius:10px 0px 0px 10px; } .successmessage.small::before { line-height:18px; } .successmessage.freeshipping { font-size:13px; line-height:17px; } .successmessage.freeshipping::before { font-family: 'Font Awesome 6 Free'; font-weight:900; content: '\f48b'; } /* 11. END error, info & success messages */ /* 39. START checkout */ /* checkoutnavigation */ ul#checkoutnavigation { margin: 0px 0px 30px 0px; padding: 5px 0px; display:flex; flex-wrap:wrap; justify-content:space-evenly; border-bottom: 1px solid #bbb; } ul#checkoutnavigation li { list-style-type:none; float:none; padding: 5px 0px; width:50%; } @media only screen and (min-width: 985px) { ul#checkoutnavigation li { width:initial;} } ul#checkoutnavigation li .active, ul#checkoutnavigation li .selected, ul#checkoutnavigation li .inactive { padding: 5px 0px; display:flex; align-items:center; } ul#checkoutnavigation li .number { width:32px; line-height:32px; height:32px; font-size:18px; font-weight:700; text-align:center; border-radius:4px; } ul#checkoutnavigation li .content { flex:1; padding: 0 10px 0 10px; } ul#checkoutnavigation li .title { display:block; font-size:14px; line-height:18px; font-weight:700; padding: 1px 0 1px 0; text-transform:uppercase; } ul#checkoutnavigation li .description { display:none; font-size:12px; line-height:14px; } @media only screen and (min-width: 600px) { ul#checkoutnavigation li .description { display:block; } } ul#checkoutnavigation li .active { color: #c80c5e; } ul#checkoutnavigation li .inactive { color: #666; } ul#checkoutnavigation li .selected { color: #111; } ul#checkoutnavigation li .active .number { border: 1px solid #c80c5e; color:#c80c5e; } ul#checkoutnavigation li .inactive .number { border: 1px solid #666; color:#666; } ul#checkoutnavigation li .selected .number { border: 1px solid #111; color:#111; } /* checkout row */ .checkout_row { margin: 0px 0px 30px 0px; } .checkout_info { float:left; width: 100%; font-size:14px; line-height:20px; font-weight:400; margin: 0 0 20px 0; padding: 10px 10px 10px 10px; background:#fff; border-radius:10px; } @media only screen and (min-width: 985px) { .checkout_info { width: 292px; margin: 0; padding: 14px 20px 20px 20px; } } .checkout_action { padding: 0px 0 0 0; width:100%; float:right; margin: 0 0 20px 0; } @media only screen and (min-width: 985px) { .checkout_action { padding: 0px 0 0 20px; width:calc(100% - 292px); margin: 0; } } .checkout_action_inner { padding: 10px 10px 10px 10px; background:#fff; border-radius:10px; } @media only screen and (min-width: 985px) { .checkout_action_inner { padding: 14px 20px 20px 20px; } } .checkout_accept { padding: 0px 0 0 0px; width:100%; float:right; } @media only screen and (min-width: 985px) { .checkout_accept { padding: 0px 0 0 20px; width:calc(100% - 292px); } } .checkout_info .subline { font-size: 14px; line-height: 20px; margin: 0px 0px 8px 0px; padding: 6px 0; } .checkout_action .subline { font-size: 14px; line-height: 20px; margin: 0px 0px 8px 0px; padding: 8px 0 6px 0; } .checkout_accordion .errormessage { margin: 10px 0 0 0; } .checkout_accordion .infomessage { margin: 10px 0 0 0; } .checkout_accordion { margin: 0 0 10px 0 !important; } .checkout_accordion h2 { font-weight:600; } .checkout_accordion .cus_radio input[type="radio"] ~ label { display: flex; padding: 0px 30px 0px 30px; font-weight:600; } .checkout_accordion .shipping_name, .checkout_accordion .payment_name { flex: 1; padding: 0px 10px 0 0; } .checkout_accordion .shipping_name.no_radio { padding: 0px 10px 0 30px; position:relative; } .checkout_accordion .shipping_name.no_radio:before { font-family: 'Font Awesome 6 Free'; content: "\f05e"; font-weight: 900; font-size: 16px; line-height: 19px; position: absolute; top: 0px; left: 0px; color: #666; opacity:0.3; } .checkout_accordion .shipping_costs, .checkout_accordion .payment_costs { white-space:nowrap; padding: 0 0 0 0; } .checkout_accordion img { max-width:100%; height:auto; vertical-align:-2px; margin: 0 10px 0 0; } .checkout_comment { margin: 0 0 0 0; } .checkoutconditions { padding: 10px; text-align: left; background:#fff7dd; margin: 10px 0 0 0; font-weight:400; border-radius:10px; } .checkoutconditions strong { font-weight:400; } .checkout_box { margin: 0px 0px 15px 0px; } .checkout_box #customers_express span.cssButtonText { display:none; } .checkout_box a.inline { color:#de0a66; } .checkout_box_products { background:#fff; border-radius:10px; padding: 20px 0px 20px 0px; margin: 0 0 0 0; } .checkout_box_products .subline { font-size: 14px; line-height: 20px; margin: 0px 0px 8px 0px; padding: 0px 20px; } .checkout_box_row { display: flex; flex-wrap: wrap; } .checkout_box_row .checkout_box { margin: 0px 0px 15px 0px; width:100%; } @media only screen and (min-width: 500px) { .checkout_box_row .checkout_box { width:50%; } } @media only screen and (min-width: 985px) { .checkout_box_row .checkout_box { width:100%; } } .checkout_row_confirmation .ordertotal_row { padding: 12px 0px; } .checkout_shipping_address .contentbox, .checkout_payment_address .contentbox { background:#fff; border-radius:10px; padding: 20px; } .checkout_new_address .contentbox, .checkout_success .contentbox { background:#fff; border-radius:10px; padding: 0px 20px; } .dutyinfo { font-size:12px; padding:5px; margin-top:8px; } .color_edit_info { color:#333; } /* payment module */ table.paymentmoduledata { font-size:13px; line-height:16px; } table.paymentmoduledata tr { display:flex; align-items:center; } table.paymentmoduledata tr td.title { width:40%; padding: 2px 10px 2px 0px; } table.paymentmoduledata tr td.field { flex:1; vertical-align:top; padding-left:12px; } table.paymentmoduledata tr td.field br { display:none; } table.paymentinfotable tr td { width:130px; padding: 2px 20px 2px 0px; } table.paymentinfotable.paypallink span.cssButton, table.paymentinfotable.paypalpluslink span.cssButton { max-width: 165px; margin: 10px 0 0 0; } /* checkout_payment gift box */ .checkout_payment_gift { margin: 10px 0 20px 0; padding: 10px 10px 10px 50px; position:relative; border: none; font-size:14px; line-height:18px; font-weight:400; color:#333; background: #fff; border: 1px solid #e1e1e1; } .checkout_payment_gift:before { font-family: 'Font Awesome 6 Free'; font-weight:900; content: '\f06b'; position:absolute; width:38px; top:0px; left:0px; bottom: 0px; font-size:22px; line-height:22px; padding: 9px 0px; color:#333; background:#eee; align-items: flex-start; justify-content: center; display: flex; } .checkout_payment_gift .cus_check_gift { font-size:14px; line-height:20px; } .checkout_payment_gift .gift_title { position: relative; font-size:14px; line-height:20px; font-weight:600; border-bottom: 1px solid #d9d9d9; margin: 0 0 5px 0; padding: 0 0 8px 0; } .checkout_payment_gift .gift_costs { position: absolute; top: 0px; right: 30px; font-size:14px; line-height:20px; } .checkout_payment_gift .gift_desc { margin: 10px 0 0px 0; } .checkout_payment_gift .infomessage, .checkout_payment_gift .errormessage { margin: 10px 0 0px 0; padding: 8px 8px; font-style:italic; } .checkout_payment_gift .infomessage:before, .checkout_payment_gift .errormessage:before { display:none; } /* checkout_confirmation box */ .checkout_confirmation_gift { color:#333; border-bottom: 1px solid #c6c6c6; } .checkout_confirmation_gift .successmessage, .checkout_confirmation_gift .errormessage { margin: 10px 0 10px 0; } .checkout_confirmation_gift .ordertotal_row { background: #f5f5f5; border: 0px; align-items: center; font-size: 14px; line-height: 20px; flex-direction: column; padding: 12px 10px; } @media only screen and (min-width: 600px) { .checkout_confirmation_gift .ordertotal_row { flex-direction: row; } } .checkout_confirmation_gift .ordertotal_row input[type=text] { background:#fff; } .checkout_confirmation_gift .ot_width_gift_1 { display:none; flex: 1; padding: 0 0 8px 1px; width:100%; font-weight:700; font-size:12px; line-height:16px; } @media only screen and (min-width: 600px) { .checkout_confirmation_gift .ot_width_gift_1 { padding: 0 20px 0 0; width:100%; } } .checkout_confirmation_gift .ot_width_gift_2 { width:100%; padding: 0 0 0 0; } .checkout_confirmation_gift .fa-circle-info { color: #296aab; } .checkout_confirmation_gift .gift_item_row { padding: 0px; } .checkout_confirmation_gift .gift_item_row > div { padding-top: 0px; padding-bottom: 0px; } /* 39. END checkout */ /* 40. START account_history_info */ .account_history_box_row { display: flex; flex-wrap: wrap; margin: 0px -10px; } .account_history_box_row .account_history_box { margin: 0px 0px 15px 0px; padding: 0px 10px; width:100%; } @media only screen and (min-width: 600px) { .account_history_box_row .account_history_box { width:50%; } } .account_history_info .of_col_flex { padding: 0px 5% 0px 0px; } .account_history_info .of_header_col_flex { padding: 0px 0px 0px 0px; } .account_history_info .ordertotal_row { padding: 12px 0px; } .account_history_info .of_col_qty_inner { align-items:center; } .account_history_info .of_quantity_update { margin: 0 0 0 10px; display:flex; width:100%; } .account_history_info .of_quantity_update > a { width:44px; margin: 0 0 0 10px; } .account_history_info .of_quantity_update .cssButtonIcon { font-size: 18px; } /* 40. END account_history_info */ /* action row for account history, account checkout express */ .action_row { display: flex; flex-wrap: wrap; list-style-type:none; margin: 20px -10px 0 -10px; padding: 0px; } .action_item { order:2; width:100%; padding: 0px 10px; margin: 0px; color:#707070; } @media only screen and (min-width: 759px) { .action_item { width:50%; } } .action_item_full { order:2; width:100%; padding: 0px 10px; margin: 0px; } .action_item.selected, .action_item_full.selected { order:1; } .action_item_inner { border-bottom: 1px solid #e1e1e1; padding: 15px 10px; height:100%; width:100%; display:flex; } .action_item_inner > form { height:100%; width:100%; display:flex; } .action_item.selected .action_item_inner, .action_item_full.selected .action_item_inner { border-top: 1px solid #e1e1e1; background:#fff7dd; } .action_item_inner_plain { padding: 5px 2px; display:flex; } .action_item_inner_plain.bordered { padding: 10px 2px; border-bottom: 1px solid #e1e1e1; } .action_item_full:first-child .action_item_inner_plain.bordered { border-top: 1px solid #e1e1e1; } .action_item_full:first-child .action_item_inner_plain.no_top_border { border-top: none !important; } .action_row label { flex:1; } .action_row label .title { display:block; font-weight: 700; } .action_row label .content { display: block; padding: 5px 0px 0px 0px; font-weight: 400; } .action_row .actions { display:flex; padding: 0 0 0 10px; } .action_row .actions .icon { display:inline-block; vertical-align:top; margin: 0 0 0 10px; width:44px; } .action_row .actions .icon .cssButtonIcon { font-size:16px; } /* action row for adress book */ .action_row.address .header { display:flex; flex-wrap:wrap; } .action_row.address .title { padding: 3px 0 0 0; font-weight: 700; line-height:18px; flex:1; } .action_row.address .actions { display:flex; padding: 2px 0 0 0; width: 100%; } @media only screen and (min-width: 500px) { .action_row.address .actions { padding: 0 0 0 10px; width:auto; } } .action_row.address .actions .icon { width:auto; display:inline-block; vertical-align:top; margin: 0 10px 0 0; } @media only screen and (min-width: 500px) { .action_row.address .actions .icon { margin: 0 0 0 10px; } } .action_row.address .actions .icon a, .action_row.address .actions .icon a:hover { text-decoration:none; } .action_row.address .actions .icon .cssButton { height:24px; min-height:24px; } .action_row.address .actions .icon .cssButtonIcon { font-size:12px; line-height:16px; padding: 0 4px 0 0; } .action_row.address .actions .icon .cssButtonText { padding: 0 0 0 0; } .action_row.address .content { display: block; padding: 10px 0px 0px 0px; font-weight: 400; } /* account history list */ .action_row .image { display:block; width:60px; } .action_row .entry { flex:1; padding: 0 0 0 30px; } .action_row .entry_item { display:block; margin: 0px 0px 0px 0px; } .action_row .entry_item:first-child { margin: 0px 0px 10px 0px; } .action_row .entry_item a { display:inline-block; line-height:18px; } /* 28. END account and account_navigation */ /* 17. START Color Defination from language-Files, main.php, ot-Module */ /* END Color Defination from language-Files, main.php, ot-Module */ /* 16. START product listing */ .flex_listing_cols { margin: 50px 0 0 0; display: flex; flex-wrap:wrap; } .flex_listing_categories { width:100%; padding: 0px 0 20px 0; } @media only screen and (min-width: 985px) { .flex_listing_categories { width:300px; padding: 0px 50px 0 0; } } .flex_listing_products { flex: 1; } /* 18. START Listing globals */ .listingcontainer, .listingcontainer_full, .listingcontainer_details { margin: 0px -5px 0px -5px; display:flex; flex-wrap:wrap; } /* END Listing globals */ /* 19. START productlist boxes */ .listingbox { width:100%; height:auto; padding: 0px 5px; margin: 0px 0px 40px 0px; } .listingcontainer_full .listingbox { width:100%; } @media only screen and (min-width: 500px) { .listingcontainer, .listingcontainer_full, .listingcontainer_details { margin: 0px -10px 0px -10px; } .listingbox { padding: 0px 10px; margin: 0px 0px 60px 0px; } } @media only screen and (min-width: 370px) { .listingcontainer .listingbox { width:50%;} .listingcontainer_full .listingbox { width:50%;} } @media only screen and (min-width: 620px) { .listingcontainer .listingbox { width:33.3333%;} .listingcontainer_full .listingbox { width:33.3333%;} } @media only screen and (min-width: 920px) { .listingcontainer .listingbox { width:25%;} .listingcontainer_full .listingbox { width:25%;} } @media only screen and (min-width: 985px) { .listingcontainer .listingbox { width:33.3333%;} .listingcontainer_full .listingbox { width:33.3333%;} } @media only screen and (min-width: 1200px) { .listingcontainer .listingbox { width:25%;} .listingcontainer_full .listingbox { width:25%;} } .lb_inner { padding: 0px 0px 0px 0px; position:relative; } .lb_image { display:block; vertical-align:middle; text-align:center; position:relative; overflow:hidden; margin: 0 0 10px 0; } .lb_image a { display:block; position:absolute; top:0px; left:0px; right:0px; bottom:0px; } .lb_image:before { content: ""; display:block; padding-top: 80%; } .lb_image img { margin: auto; position: absolute; font-size:0px; top: 0; left: 0; bottom: 0; right: 0; width: 96%; height: 96%; object-fit:contain; } .lb_image .lb_img_main { visibility:visible; opacity:1; transition: all 0.5s ease-in-out;} .lb_image .lb_img_hover { visibility:hidden; opacity:0; transition: all 0.5s ease-in-out; } .lb_image:hover .lb_img_main { visibility:hidden; opacity:0; } .lb_image:hover .lb_img_hover { visibility:visible; opacity:1; } .content_site .lb_image img { height:100% !important; } .lb_title { padding: 10px 0px 10px 0px; } .lb_title h2 { margin: 0px; padding:0px; border:none !important; line-height:20px; font-size:16px; font-weight:500; height:60px; color:#000; text-transform:uppercase; text-align:center -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } .lb_title h2 a { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color:#000; } .lb_title h2 a:hover { color:#de0a66; text-decoration:none; } .lb_action { margin: 10px 0 0 0; display:flex; } .lb_action_col_1 { flex:1; padding: 0 10px 0 0; } .lb_action_col_2 { display:flex; justify-content:space-between; } .lb_shipping { padding: 3px 0px 0px 0px; font-size:12px; text-align:left; } .lb_attributes { margin: 0px 0 0 0; padding: 0px 0px 5px 0; font-size:12px; line-height:16px; font-weight:600; text-align:left; } .lb_price { display:flex; align-items:center; justify-content:flex-start; position:relative; margin: 0px 0 0 0; font-size: 20px; line-height:20px; color:#000; font-weight:400; } .lb_price .no_price { font-size:10px; line-height:12px; font-weight:normal; display:block; padding:0 0 0 0px; color:#999; } .lb_price .standard_price { display:block; padding: 0px 5px 0px 0px; color:#000; } .lb_price .standard_price .sup { margin: -1px 0 0 1px; display: inline-block; position: relative; vertical-align: top; font-size: 14px; line-height: 14px; } .lb_price .new_price { padding: 0px 5px; display:block; color:#de0a66; white-space:nowrap; } .lb_price .new_price .sup { margin: -1px 0 0 1px; display: inline-block; position: relative; vertical-align: top; font-size: 14px; line-height: 14px; } .lb_price .old_price { padding: 0px 5px; position:relative; display:block; font-size:16px; color:#707070; white-space:nowrap; } .lb_price .old_price .sup { margin: 0px 0 0 1px; display: inline-block; position: relative; vertical-align: top; font-size: 14px; line-height: 14px; } .lb_price .old_price:before { content:''; position:absolute; left: 3px; right: 3px; height: 1px; background: #999; -moz-transform: rotate(162deg); -ms-transform: rotate(162deg); -o-transform: rotate(162deg); -webkit-transform: rotate(162deg); transform: rotate(162deg); bottom: 0px; top:0px; margin:auto; } .lb_price .small_price { font-size:10px; font-weight:400; line-height:10px; } .lb_price .save_price { font-size:9px; font-weight:normal; line-height:15px; } .lb_price .item_price { position:absolute; bottom: 5px; left:0px; font-weight:400; font-size:9px !important; line-height:11px; display:block; font-weight:400 !important; color:#666; } .lb_price .uvp_price { display:block; } .lb_price .graduated_price { display:block; } .lb_buy_button { padding: 0px 0px; } .lb_buy_button a { display:inline-block; box-shadow:none !important; } .lb_buy_button .cssButton { padding: 1px 0px 0px 0px; min-height: initial; width:38px; height:38px; border-radius:8px; } .lb_buy_button span.cssButtonText { display:none; } .lb_buy_button span.cssButtonIcon { font-size:16px; } .lb_infos { margin: 2px 0 0 0; display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:center; font-size: 10px; line-height: 14px; text-align: left; } .lb_vpe { position:relative; display:block; width:100%; font-weight: normal; padding: 0px 0px 0 0px; color:#666; } .lb_vpe:after { content:''; display:none; position:absolute; width:1px; height:10px; border-left:1px solid #999; top:0px; bottom:0px; right:-1px; margin:auto; } .lb_tax { display:block; width:100%; padding: 0px 0px 0 0px; color:#666; font-size: 10px; line-height: 14px; } .lb_tax a { color:#666; text-decoration:underline; } .lb_tax a:hover { color:#666; text-decoration:underline; } .lb_attributes, .lb_title, .lb_action { padding-left:6%; padding-right:6%; } /* END productlist boxes */ /* 20. START productlist rows */ .listingrow { margin: 10px 10px 10px 10px; position:relative; display:flex; flex-wrap:wrap; width:100%; } .listingrow:first-child { margin: 0px 10px 10px 10px; } .listingrow:nth-child(odd) { flex-direction:row; } .listingrow:nth-child(even) { flex-direction:row-reverse; } .lr_image_emotion { width:100%; } .listingrow:nth-child(odd) .lr_image_emotion { padding: 0 0px 0 0; } .listingrow:nth-child(even) .lr_image_emotion { padding: 0 0 0 0px; } @media only screen and (min-width: 690px) { .lr_image_emotion { width:50%; } .listingrow:nth-child(odd) .lr_image_emotion { padding: 0 5px 0 0; } .listingrow:nth-child(even) .lr_image_emotion { padding: 0 0 0 5px; } } .lr_image_emotion_inner { display:block; position:relative; overflow:hidden; height:100%; } .lr_image_emotion_inner:before { content: ""; display:block; padding-top: 45%; } .lr_image_emotion_inner img { margin: auto; position: absolute; font-size:0px; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; object-fit:cover; } .lr_content { flex:1; display:flex; flex-wrap:wrap; } .listingrow:nth-child(odd) .lr_content { padding: 20px 0px 10px 0px; } .listingrow:nth-child(even) .lr_content { padding: 20px 0px 10px 0px; } @media only screen and (min-width: 690px) { .listingrow:nth-child(odd) .lr_content { padding: 20px 0px 10px 40px; } .listingrow:nth-child(even) .lr_content { padding: 20px 40px 10px 0px; } } .lr_product { width:60%; padding: 0 10px 0 0; } .lr_image { width:40%; } @media only screen and (min-width: 690px) { .lr_product { width:65%; padding: 0 20px 0 0; } .lr_image { width:35%; } } .lr_image_inner { display:block; position:relative; overflow:hidden; } .lr_image_inner:before { content: ""; display:block; padding-top: 100%; } .lr_image_inner img { margin: auto; position: absolute; font-size:0px; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; object-fit:contain; } .lr_title { padding: 0px 0px 10px 0px; } .lr_title h2 { margin: 0px; padding:0px; border:none !important; line-height:20px; font-size:16px; font-weight:400; color:#707070; text-transform:uppercase; } .lr_title h2 a { color:#707070; } .lr_title h2 a:hover { color:#de0a66; text-decoration:none; } .lr_shipping { padding: 5px 0px; font-size:14px; } .lr_price { display:flex; align-items:center; position:relative; margin: 10px 0 0 0; font-size: 20px; line-height:20px; color:#707070; font-weight:400; } .lr_price .no_price { font-size:10px; line-height:12px; font-weight:normal; display:block; padding:0 0 0 0px; color:#999; } .lr_price .standard_price { display:block; padding: 0px 0px; color:#707070; font-weight:400; } .lr_price .standard_price .sup { margin: -1px 0 0 1px; display: inline-block; position: relative; vertical-align: top; font-size: 14px; line-height: 14px; } .lr_price .new_price { padding: 0px 0px; display:block; font-weight:400; color:#de0a66; } .lr_price .new_price .sup { margin: -1px 0 0 1px; display: inline-block; position: relative; vertical-align: top; font-size: 14px; line-height: 14px; } .lr_price .old_price { padding: 0px 10px 0 0; position:relative; display:block; font-size:16px; font-weight:400; color:#707070; } .lr_price .old_price .sup { margin: 0px 0 0 1px; display: inline-block; position: relative; vertical-align: top; font-size: 14px; line-height: 14px; } .lr_price .old_price:before { content:''; position:absolute; left: 3px; right: 3px; height: 1px; background: #999; -moz-transform: rotate(162deg); -ms-transform: rotate(162deg); -o-transform: rotate(162deg); -webkit-transform: rotate(162deg); transform: rotate(162deg); bottom: 0px; top:0px; margin:auto; } .lr_price .small_price { font-size:10px; font-weight:400; line-height:10px; } .lr_price .save_price { font-size:9px; font-weight:normal; line-height:15px; } .lr_price .item_price { position:absolute; bottom: 5px; left:0px; font-weight:400; font-size:9px !important; line-height:11px; display:block; font-weight:400 !important; color:#666; } .lr_price .uvp_price { display:block; } .lr_price .graduated_price { display:block; } .lr_infos { margin: 5px -4px 5px -4px; display:flex; align-items:center; font-size: 10px; line-height: 14px; text-align: center; white-space: nowrap; } .lr_vpe { position:relative; display:inline-block; font-weight: normal; padding: 0px 4px 0 4px; color:#666; } .lr_vpe:after { content:''; display:block; position:absolute; width:1px; height:10px; border-left:1px solid #999; top:0px; bottom:0px; right:-1px; margin:auto; } .lr_tax { display:inline-block; padding: 0px 4px 0 4px; color:#666; } .lr_tax a { color:#666; text-decoration:underline; } .lr_tax a:hover { color:#666; text-decoration:underline; } .lr_buy_button { margin: 15px 0 0 0; padding: 0 0 0 0; display:inline-block; } .lr_buy_button .cssButton { padding: 3px 8px 2px 8px; min-height: initial; width:auto; height:30px; border-radius:8px; } .lr_buy_button span.cssButtonText { font-size:14px; } .lr_buy_button span.cssButtonIcon { font-size:14px; } .lr_buy_button a:hover { text-decoration:none; } @media only screen and (min-width: 500px) { } /* END productlist rows */ /* 21. START categories listing & subcats */ .cat_description { font-size:16px; line-height:24px; text-align:center; width:100%; max-width:1000px; margin: 0 auto; } .cat_description ul { margin-left:18px; } .cat_description ol { margin-left:28px; } .cat_description img { display:none; visibility:hidden; } /* END categories listing & subcats */ /* 14. START left categories menu */ .subcats_menu_box { position:static; top: 170px; margin: 0 0 25px 0; } @media only screen and (min-width: 985px) { .subcats_menu_box { position: -webkit-sticky; position: sticky; } } .subcats_categories { display:none; } @media only screen and (min-width: 985px) { .subcats_categories { display:block; } } ul.subcats_menu { margin: 0px 0 50px 0; list-style-type:none; } ul.subcats_menu ul { margin: 0px 0 0 0; list-style-type:none; } ul.subcats_menu li { padding: 0 0 0 0; } ul.subcats_menu li.overview { display:none !important; } ul.subcats_menu li.level2 { display:none; } ul.subcats_menu li > a { position:relative; display:block; border-bottom: 0px solid #e1e1e1; } ul.subcats_menu li.level2.Selected, ul.subcats_menu li.level2.activeparent2 { display:block; } ul.subcats_menu > li.level2 > a { display:none; } ul.subcats_menu ul li > a { position:relative; font-size:16px; line-height:20px; color: #707070; padding: 8px 5px 8px 25px; } ul.subcats_menu ul li > a::before { font-family: 'Font Awesome 6 Free'; content: '\f0c8'; font-size:16px; line-height:20px; font-weight: 400; position:absolute; top: 8px; left: 1px; } ul.subcats_menu ul li.Selected > a { color:#de0a66; } ul.subcats_menu ul li.Selected > a::before { content: '\f14a'; } ul.subcats_menu ul li > a:hover { color:#de0a66; text-decoration:none; } ul.subcats_menu li > a > .counts { display:inline-block; font-weight:400; font-size:10px; line-height:12px; padding: 0 0 0 3px; vertical-align:0px; } ul.subcats_menu li.has_sub_cats > a .sub_cats_arrow { position:absolute; top:10px; right:0px; text-align:center; margin: auto; width: 12px; height:18px; } ul.subcats_menu li.has_sub_cats > a .sub_cats_arrow::after { font-family: 'Font Awesome 6 Free'; content: '\f078'; font-size:12px; line-height:18px; font-weight: 900; } /* 14. END left categories menu */ /* 22. START pagination */ .pagination_bar { padding: 0px 0px 0px 0px; margin: 30px 0 30px 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: space-between; color:#707070; } .pagination_text { width:100%; font-size:14px; line-height:34px; text-align:center; } @media only screen and (min-width: 759px) { .pagination_text { width:auto; } } .pagination_list { width:100%; font-size:14px; line-height:34px; text-align:center; } @media only screen and (min-width: 759px) { .pagination_list { width:auto; } } .pagination_list ul { display:inline-block; vertical-align:top; list-style-type:none; margin: 0px auto; } .pagination_list ul li { float:left; text-align: center; padding: 0; width:34px; border: 1px solid #ccc; border-width: 1px 1px 1px 0px; background:transparent; color:#707070; margin: 0px 0px; transition: all 0.3s ease-in-out; } .pagination_list ul li:first-child { border-width: 1px 1px 1px 1px; border-top-left-radius: 8px; border-bottom-left-radius: 8px; } .pagination_list ul li:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; } .pagination_list ul li:hover { background-color:#f9f9f9; color:#555; } .pagination_list ul li a, .pagination_list ul li a:hover { display:block; text-decoration:none; } .pagination_list ul li.current, .pagination_list ul li.current:hover { font-weight:700; background-color:#f9f9f9; color:#de0a66; } .pagination_list ul li.inactive { color:#ccc; cursor:none !important; pointer-events:none; } .topscroll { cursor:pointer; } .pagination_products .pagination_text { display:none; } .pagination_products .pagination_bar { justify-content:center; } .pagination_products .listing_topscroll { display:none; } .pagination_products .pagination_list { width:auto; } .pagination_products .pagination_list ul { display:flex; align-items:center; } .pagination_products .pagination_list ul li { border-width: 0px 0px 0px 0px; border-radius:50%; } .pagination_products .pagination_list ul li:first-child { border-width: 1px 1px 1px 1px; border-radius:50%; background:#f5f5f5; width:40px; height:40px; line-height:39px; } .pagination_products .pagination_list ul li:nth-last-child(-n+2) { border-width: 1px 1px 1px 1px; border-radius:50%; background:#f5f5f5 !important; width:40px; height:40px; line-height:39px; } .pagination_products .pagination_list ul li:hover:first-child, .pagination_products .pagination_list ul li:hover:nth-last-child(-n+2) { background:#ddd !important; } .pagination_products .pagination_list ul li .current, .pagination_products .pagination_list ul li .current:hover { font-weight:700; background-color:#fff; color:#de0a66; } /* END pagination */ /* 23. START listing filter bar */ .filter_bar { position:relative; margin: 35px 0; } .sort_bar { margin: 0px 0 0 0; padding: 0px 0px; border: 0px solid #eee; } .sort_bar_row { margin: 0px 0px 0px 0px; display: flex; align-items: center; flex-wrap: wrap; } .sort_bar_item { width:calc(50% - 5px); padding:0px 0px; } @media only screen and (min-width: 690px) { .sort_bar_item { width:180px; } } .sort_bar_item .view_tags { display:flex; align-items:center; justify-content: space-between; color:#555; background-color: #f2f2f2; border: 1px solid #d9d9d9; font-size:16px; line-height:20px; padding:9px 8px 9px 8px; font-weight:400; border-radius:8px; height:40px; cursor:pointer; width:100%; } .sort_bar_item .view_tags:hover { background-color: #f2f2f2; border-color: #999; color: #555; text-decoration:none; } .sort_bar_filler { min-width:10px; flex:1; } @media only screen and (min-width: 690px) { } .sort_bar_view_filler { position:relative; width:0px; height:16px; border-left:1px solid #ccc; } .sort_bar_view { display: flex; align-items: center; padding:0px 10px; margin-left:auto; background:#f5f5f5; order: 2; } .sort_bar_filter { } @media only screen and (min-width: 690px) { .sort_bar_view { order: initial; } .sort_bar_filter { order: initial; } } .sort_bar_view a { display: block; padding: 5px 10px; line-height: 36px; font-size: 18px; color:#ccc; } .sort_bar_view .fa-solid { } .sort_bar_view a:hover { color:#555; } .sort_bar_view a.active { color:#555 !important; } .sort_bar_item .SelectClass, .sort_bar_item .SumoUnder { opacity:0; height:40px; } .tags_bar_toogle { display:none; margin: 35px 0 30px 0; } .tags_bar { position:relative; margin-top:-30px; padding: 10px; background: #f5f5f5; border: solid #eee; border-width: 0px 1px 1px 1px; border-radius:8px; } .tags_bar_headline { font-size:13px; line-height:19px; font-weight:400; padding: 5px 0px 5px 2px; text-transform:uppercase; } a.tags_bar_reset { float:right; font-size:13px; line-height:19px; font-weight:400; text-transform:uppercase; border-bottom: 1px solid transparent; } a.tags_bar_reset:hover { text-decoration: none; border-bottom: 1px solid #ccc; } .tags_bar_row { margin: 0px -5px 0px -5px; display: flex; align-items: center; flex-wrap: wrap; } .tags_bar_item { width:50%; padding:5px 5px; } @media only screen and (min-width: 600px) { .tags_bar_item { width:33.3333%; } } @media only screen and (min-width: 759px) { .tags_bar_item { width:25%; } } .tags_bar_item .SumoSelect > .CaptionCont { border: 1px solid #eee; background: #fff; display: block; font-size:14px; font-weight:400; padding: 9px 10px 7px 10px; height: 40px !important; } .tags_bar_item .SumoSelect:focus > .CaptionCont,.SumoSelect:hover > .CaptionCont { background: #fff; border: 1px solid #eee; } .tags_bar_item .SumoSelect:focus > .CaptionCont,.SumoSelect:focus > .CaptionCont { background: #fff; border: 1px solid #eee; } .tags_bar_item .SumoSelect > .optWrapper.open { min-width: 240px; font-size:14px; line-height:20px; } .tags_bar_item .SumoSelect > .optWrapper > .options > li { padding: 5px 5px; border-bottom: 1px solid #e0e0e0; font-size:14px; line-height:20px; } .tags_bar_item .CaptionCont.SelectBox.Selected { color: #de0a66 !important; background: #fff !important; } /* END listing filter bar */ /* 24. START content sites (AGB, Datenschutz, etc.) */ .shopcontent { } .shopcontent h1 { color:#333; } .content_subline { text-align:center; margin: 0 0 30px 0; } .content_subline a { text-decoration:underline; text-underline-offset:1px; } .content_site { padding: 0 0 50px 0; } .content_site ul { margin-left:20px; } .content_site ol { margin-left:30px; } .content_site img { vertical-align:top; max-width:100% !important; height:auto !important; } .content_advanced { font-size:18px; line-height:26px; padding: 0px 0%; } @media only screen and (min-width: 790px) { .content_advanced { padding: 0px 5%; } } .content_advanced_px_5 { padding-left:5% !important; padding-right: 5% !important; } .cs50_headline { font-size: 26px; line-height: 28px; letter-spacing: 4px; text-transform: uppercase; font-weight: 800; text-align:center; padding: 0; margin: 0 0 0 0; } .cs50_headline.orange { color:#f4812c; } .cs50_headline.green { color:#0a9a44; } .cs50_headline.darcorange { color:#f37820; } .cs50_headline.magenta { color:#d82040; } .cs50_headline.lila { color:#96429c; } .cs50_headline.blue { color:#034694; } .cs50_text_center { font-size:22px; line-height:28px; text-align:center; letter-spacing:2px; } .cs50_flex_column_row { display:flex; flex-wrap:wrap; margin: 0px -5px; } .cs50_flex_column { width:100%; padding: 5px; } @media only screen and (min-width: 790px) { .cs50_flex_column { width:50%; } } .red_box { color:#fff; background: rgb(222,11,103); background: linear-gradient(90deg, rgba(222,11,103,1) 0%, rgba(209,0,38,1) 100%); padding: 40px 20px; text-align:center; margin-right:-10px; } .red_box .headline { font-size:24px; line-height:28px; font-weight:700; text-transform:uppercase; letter-spacing:4px; margin: 0 0 30px 0; } .red_box a, .red_box a:hover { color:#fff; border-bottom: 1px solid #fff; text-decoration:none; } .gradient_box_blue_magenta { color:#fff; background: rgb(119,201,214); background: linear-gradient(90deg, rgba(119,201,214,1) 0%, rgba(220,82,147,1) 100%); padding: 60px 20px; text-align:center; margin-right:-10px; } .gradient_box_blue_magenta .headline { font-size:28px; line-height:34px; font-weight:400; text-transform:uppercase; letter-spacing:4px; } .uppercase { text-transform:uppercase; } .cs_icon_row { display:flex; flex-wrap:wrap; } .cs_icon_item { padding: 10px 0px; width:100%; text-align:left; display:flex; flex-direction:row; border-right: none; } .cs_icon_item:last-child { border-right: none; } @media only screen and (min-width: 790px) { .cs_icon_item { width:33.3333%; flex-direction:column; text-align:center; border-right: 1px solid #aaa; padding: 30px 20px; } } .cs_icon_item .icon { text-align:center; padding: 0px 10px; width:80px; } @media only screen and (min-width: 790px) { .cs_icon_item .icon { width:initial; } } .cs_icon_item .icon img { width:70px; height:70px; vertical-align:top; } .cs_icon_item .content { flex:1; display:flex; flex-direction:column; margin: 10px 0px 10px 0px; padding: 0px 0 0px 20px; border-left: 1px solid #aaa; } @media only screen and (min-width: 790px) { .cs_icon_item .content { padding: 0px; border-left: none; } } .cs_icon_item .head { font-size:18px; line-height:22px; font-weight:800; text-transform:uppercase; letter-spacing:2px; } .cs_icon_item .text { padding: 10px 0 0 0; } .cs_icon_item .text a, .cs_icon_item .text a:hover { color:#222; text-decoration:none; border-bottom: 1px solid #222; } .cs_example_row { margin: 0px 0px; } .cs_example_item { margin:40px -10px; display:flex; flex-direction:row; align-items:center; justify-content:center; flex-wrap:wrap; } .cs_example_item:nth-child(odd) { flex-direction:row; } .cs_example_item:nth-child(even) { flex-direction:row-reverse; } .cs_example_item_image { padding: 10px; width:50%; min-width:300px; } @media only screen and (min-width: 790px) { .cs_example_item_image { width:40%; min-width:initial;} } .cs_example_item_image img { width:100%; height:auto; vertical-align:top; } .cs_example_item_text { width:100%; padding: 10px; text-align:center; } @media only screen and (min-width: 790px) { .cs_example_item_text { width:60%; } } .cs_button_background { margin: 0px 0 0 0; display:flex; height:50px; } .cs_bb_center { display:flex; align-items:flex-end; padding: 0px 0px; } .cs_bb_center .inner { padding: 8px 10px; background:#222; color:#fff; border-radius:10px; text-transform: uppercase; font-weight: 800; font-size: 16px; line-height: 18px; letter-spacing: 3px; } .cs_bb_left { flex:1; background-image: url(img/icons/HGM-heartline_left-black.png); background-repeat:no-repeat; background-position:bottom right; background-size:auto 50px; } .cs_bb_right { flex:1; background-image: url(img/icons/HGM-heartline_right-black.png); background-repeat:no-repeat; background-position:bottom left; background-size:auto 50px; } .cs_button_background.green .cs_bb_center .inner { background: rgb(163,205,57); background: linear-gradient(90deg, rgba(163,205,57,1) 0%, rgba(10,154,68,1) 100%); color:#fff; } .cs_button_background.green .cs_bb_left { background-image: url(img/icons/HGM-heartline_left-green.png); } .cs_button_background.green .cs_bb_right { background-image: url(img/icons/HGM-heartline_right-green.png); } .cs_button_background.orange .cs_bb_center .inner { background: rgb(238,218,0); background: linear-gradient(90deg, rgba(238,218,0,1) 0%, rgba(244,129,44,1) 100%); color:#fff; } .cs_button_background.orange .cs_bb_left { background-image: url(img/icons/HGM-heartline_left-orange.png); } .cs_button_background.orange .cs_bb_right { background-image: url(img/icons/HGM-heartline_right-orange.png); } .cs_button_background.darcorange .cs_bb_center .inner { background: rgb(243,120,32); background: linear-gradient(90deg, rgba(243,120,32,1) 0%, rgba(216,38,32,1) 100%); color:#fff; } .cs_button_background.darcorange .cs_bb_left { background-image: url(img/icons/HGM-heartline_left-darcorange.png); } .cs_button_background.darcorange .cs_bb_right { background-image: url(img/icons/HGM-heartline_right-darcorange.png); } .cs_button_background.magenta .cs_bb_center .inner { background: rgb(238,41,126); background: linear-gradient(90deg, rgba(238,41,126,1) 0%, rgba(216,32,64,1) 100%); color:#fff; } .cs_button_background.magenta .cs_bb_left { background-image: url(img/icons/HGM-heartline_left-magenta.png); } .cs_button_background.magenta .cs_bb_right { background-image: url(img/icons/HGM-heartline_right-magenta.png); } .cs_button_background.lila .cs_bb_center .inner { background: rgb(239,42,128); background: linear-gradient(90deg, rgba(239,42,128,1) 0%, rgba(150,66,156,1) 100%); color:#fff; } .cs_button_background.lila .cs_bb_left { background-image: url(img/icons/HGM-heartline_left-lila.png); } .cs_button_background.lila .cs_bb_right { background-image: url(img/icons/HGM-heartline_right-lila.png); } .cs_button_background.blue .cs_bb_center .inner { background: rgb(86,197,208); background: linear-gradient(90deg, rgba(86,197,208,1) 0%, rgba(3,70,148,1) 100%); color:#fff; } .cs_button_background.blue .cs_bb_left { background-image: url(img/icons/HGM-heartline_left-blue.png); } .cs_button_background.blue .cs_bb_right { background-image: url(img/icons/HGM-heartline_right-blue.png); } .cs_extra_large { padding: 20px 20px; font-size:18px; line-height:30px; color:#8C8184; } .cs_signature { text-align:right; padding: 0px 15% 0 0; } .cs_signature img { width:100%; max-width:280px !important; vertical-align:top; } .cs_slogan { font-size:22px; line-height:26px; text-align:center; font-weight:400; text-transform:uppercase; padding: 0px 10%; letter-spacing:4px; } .cs_slogan .icon { margin: 10px 0 0 0; display:block; text-align:center; } .cs_slogan .icon img { width:40px; height:40px; vertical-align:top; } .cs40_flex_row { display:flex; flex-wrap:wrap; } .cs40_flex_item { padding: 20px 0px; width:100%; text-align:center; display:flex; flex-direction:column; border-right: none; } @media only screen and (min-width: 790px) { .cs40_flex_item { padding: 30px 20px; width:50%; border-right: 1px solid #aaa; } } .cs40_flex_item:last-child { border-right: none; } .cs40_flex_item .headline { text-align:center; padding: 0px 10px; } .cs40_flex_item .headline .button { display:inline-block; background: rgb(238,220,0); background: linear-gradient(90deg, rgba(238,220,0,1) 0%, rgba(244,121,32,1) 100%); text-align:center; padding: 8px 20px; min-width:200px; color: #fff; border-radius: 10px; text-transform: uppercase; font-weight: 800; font-size: 16px; line-height: 18px; letter-spacing: 3px; } .cs40_flex_item .text { padding: 20px 0 0 0; } .cs40_flex_item .text a, .cs40_flex_item .text a:hover { color:#222; text-decoration:none; border-bottom: 1px solid #222; } .cs40_wave_container { position:relative; overflow:hidden; } .cs40_wave_container_inner { background: rgb(238,220,0); background: linear-gradient(90deg, rgba(238,220,0,1) 0%, rgba(244,121,32,1) 100%); padding: 50px 20px; } .cs40_wave_container_inner .headline { display:block; text-align:center; color:#fff; text-transform: uppercase; font-weight: 800; font-size: 24px; line-height: 24px; letter-spacing: 4px; } .cs40_wave_container_inner .content { padding: 30px 0 0 0; display:block; text-align:center; color:#fff; } .cs40_button_background { margin: 0px 0 0 0; display:flex; height:60px; } .cs40_bb_center { display:flex; align-items:flex-end; padding: 0px 0px; } .cs40_bb_center .inner { padding: 8px 20px; color:#f29716; text-transform: uppercase; font-weight: 800; font-size: 22px; line-height: 22px; letter-spacing: 4px; } .cs40_bb_center .inner.gelb { color:#f2dc00; } .cs40_bb_center .inner.magenta { color:#d20a10; } .cs40_bb_left { flex:1; background-image: url(img/icons/HGM-heartline_left-orange.png); background-repeat:no-repeat; background-position:bottom right; background-size:auto 60px; } .cs40_bb_right { flex:1; background-image: url(img/icons/HGM-heartline_right-orange.png); background-repeat:no-repeat; background-position:bottom left; background-size:auto 60px; } .cs40_bb_left.gelb { background-image: url(img/icons/HGM-heartline_left-gelb.png); } .cs40_bb_right.gelb { background-image: url(img/icons/HGM-heartline_right-gelb.png); } .cs40_bb_left.magenta { background-image: url(img/icons/HGM-heartline_left-magenta.png); } .cs40_bb_right.magenta { background-image: url(img/icons/HGM-heartline_right-magenta.png); } .cs40_wave_image { position:relative; overflow:hidden; } .cs40_wave_image_inner { padding: 0px 0px; } .cs40_wave_image_inner img { width:100%; height:auto; vertical-align:top; } .cs40_icon_row_outer { padding: 0px; background:#fff; position:relative; z-index:1; margin: 0 0; width: auto; max-width:860px; } @media only screen and (min-width: 790px) { .cs40_icon_row_outer { padding: 10px; margin: -15% auto 0px auto; width: 100%; } } .cs40_icon_row_outer .note { display:block; padding: 4px 0 0 0; font-size:12px; line-height:18px; } .cs_filial_row { margin: 0px 0px; } .cs_filial_item { margin:40px -10px; display:flex; flex-wrap:wrap; flex-direction:row; align-items:center; justify-content:center; } .cs_filial_item_image { padding: 10px; width:100%; } @media only screen and (min-width: 790px) { .cs_filial_item_image { width:50%; } } .cs_example_item_image img { width:100%; height:auto; vertical-align:top; } .cs_filial_item_text { width:100%; padding: 10px 5px 0px 5px; font-size: 18px; line-height: 30px; text-align:center; } @media only screen and (min-width: 790px) { .cs_filial_item_text { width:50%; text-align:left; padding: 20px 20px; } } .cs40_wave_image_bottom { position:relative; overflow:hidden; } .cs40_wave_image_bottom_inner { padding: 0px 0px; } .cs40_wave_image_bottom_inner img { width:100%; height:auto; vertical-align:top; } .cs40_wave_image_bottom_text { background: rgb(238,220,0); background: linear-gradient(90deg, rgba(238,220,0,1) 0%, rgba(244,121,32,1) 100%); padding: 20px 20px; } .cs40_wave_image_bottom_text .headline { display:block; text-align:center; color:#fff; text-transform: uppercase; font-weight: 800; font-size: 24px; line-height: 24px; letter-spacing: 4px; } .cs40_wave_image_bottom_text .content { padding: 10px 0 0 0; display:block; text-align:center; color:#fff; } .cs_preise_row { margin: 0px 0px; } .cs_preise_item { margin:5px -5px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; } .cs_preise_item:nth-child(odd) { flex-direction:row; } .cs_preise_item:nth-child(even) { flex-direction:row-reverse; } .cs_preise_item_image { padding: 5px; width:100%; } @media only screen and (min-width: 790px) { .cs_preise_item_image { width:50%; } } .cs_preise_item_image img { width:100%; height:auto; vertical-align:top; } .cs_preise_item_text { position:relative; width:100%; padding: 30px 5px 30px 90px; font-size: 24px; line-height: 30px; display:flex; align-items:flex-end; min-height:120px; } @media only screen and (min-width: 790px) { .cs_preise_item_text { width:50%; padding: 20px 20px; min-height:initial; display:initial; } } .cs_arrow_to_left { position:absolute; padding: 0; text-align:left; bottom: 35px; left: 10px; transform: rotate(90deg); width: 70px; } @media only screen and (min-width: 790px) { .cs_arrow_to_left { position: static; padding: 10px 0 0 5%; transform:none; width:auto; } } .cs_arrow_to_right { position:absolute; padding: 0; text-align:right; bottom: 35px; left: 10px; transform: scaleX(-1) rotate(270deg); width: 70px; } @media only screen and (min-width: 790px) { .cs_arrow_to_right { position: static; padding: 10px 30% 0 0; transform:none; width:auto; } } .cs_arrow_to_left img, .cs_arrow_to_right img { width:100px; height:100px; vertical-align:top; } .cs_yellow_container { position:relative; overflow:hidden; } .cs_yellow_container_inner { background: rgb(238,220,0); background: linear-gradient(90deg, rgba(238,220,0,1) 0%, rgba(244,121,32,1) 100%); padding: 60px 20px; } .cs_yellow_container_inner .headline { display:block; text-align:center; color:#fff; text-transform: uppercase; font-weight: 800; font-size: 24px; line-height: 24px; letter-spacing: 4px; } .cs_yellow_container_inner .content { padding: 30px 0 0 0; display:block; text-align:center; color:#fff; } .cs_yellow_container_inner .content a, .cs_yellow_container_inner .content a:hover { color:#fff; text-decoration:none; border-bottom: 1px solid #fff; } .cs33_wave_container { position:relative; overflow:hidden; } .cs33_wave_container_inner { background: rgb(222,10,102); background: linear-gradient(90deg, rgba(222,10,102,1) 0%, rgba(215,31,63,1) 100%); padding: 50px 20px; } .cs33_wave_container_inner .headline { display:block; text-align:center; color:#fff; text-transform: uppercase; font-weight: 800; font-size: 24px; line-height: 24px; letter-spacing: 4px; } .cs33_wave_container_inner .content { padding: 30px 0 0 0; display:block; text-align:center; color:#fff; } .cs33_headline { display: inline-block; background: rgb(222,10,102); background: linear-gradient(90deg, rgba(222,10,102,1) 0%, rgba(215,31,63,1) 100%); padding: 8px 20px; color: #fff; border-radius: 10px; text-transform: uppercase; font-weight: 400; font-size: 16px; line-height: 18px; letter-spacing: 3px; margin: 0 0 20px 0; } .cs33_text { } .cs33_text a, .cs33_text a:hover { color:#222; text-decoration:none; border-bottom: 1px solid #222; } .cs_rezepte_headline { font-size: 20px; line-height: 28px; letter-spacing: 3px; text-transform: uppercase; font-weight: 800; text-align: center; padding: 0; margin: 0 0 0 0; } .cs_rezepte_headline.green { color:#0a9a44; } .cs_rezepte_headline.orange { color:#f4812c; } .cs_rezepte_headline.darcorange { color:#f37820; } .cs_rezepte_headline.magenta { color:#d82040; } .cs_rezepte_headline.lila { color:#96429c; } .cs_rezepte_headline.blue { color:#034694; } .cs_rezepte_button { margin: 0 0 0 0; } .cs_rb_center { text-align:center; } .cs_rb_center > a, .cs_rb_center > a:hover { display:inline-block; text-decoration:none; } .cs_rb_center .inner { display:inline-block; padding: 8px 15px; background: #222; color: #fff; border-radius: 10px; text-transform: uppercase; font-weight: 400; font-size: 16px; line-height: 18px; letter-spacing: 3px; } .cs_rezepte_button.green .cs_rb_center .inner { background: rgb(163,205,57); background: linear-gradient(90deg, rgba(163,205,57,1) 0%, rgba(10,154,68,1) 100%); color:#fff; } .cs_rezepte_button.orange .cs_rb_center .inner { background: rgb(238,218,0); background: linear-gradient(90deg, rgba(238,218,0,1) 0%, rgba(244,129,44,1) 100%); color:#fff; } .cs_rezepte_button.darcorange .cs_rb_center .inner { background: rgb(243,120,32); background: linear-gradient(90deg, rgba(243,120,32,1) 0%, rgba(216,38,32,1) 100%); color:#fff; } .cs_rezepte_button.magenta .cs_rb_center .inner { background: rgb(238,41,126); background: linear-gradient(90deg, rgba(238,41,126,1) 0%, rgba(216,32,64,1) 100%); color:#fff; } .cs_rezepte_button.lila .cs_rb_center .inner { background: rgb(239,42,128); background: linear-gradient(90deg, rgba(239,42,128,1) 0%, rgba(150,66,156,1) 100%); color:#fff; } .cs_rezepte_button.blue .cs_rb_center .inner { background: rgb(86,197,208); background: linear-gradient(90deg, rgba(86,197,208,1) 0%, rgba(3,70,148,1) 100%); color:#fff; } .rezept_detail { } .rd_headline { font-size: 24px; line-height: 28px; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; margin: 0 0 0 0; } .rd_subline { color:#999; font-size: 14px; line-height: 20px; font-weight: 400; margin: 5px 0 0 0; } .rd_zutaten_outer_row { display:flex; flex-wrap:wrap; align-items:center; } .rd_zutaten_outer_content { width:100%; padding: 0 0% 0 0 } @media only screen and (min-width: 790px) { .rd_zutaten_outer_content { width:65%; padding: 0 5% 0 0 } } .rd_zutaten_outer_image { display:none; width:35%; padding: 0 0 0 0 } @media only screen and (min-width: 790px) { .rd_zutaten_outer_image { display:block;} } .rd_zutaten_outer_image img { width:100%; height:auto; vertical-align:top; } .rd_zutaten_row { } .rd_zutaten_row .item { display:flex; font-size:18px; line-height:22px; padding: 4px 0px; } .rd_zutaten_row .quantity { font-weight:700; width:100px; } .rd_zutaten_row .text { flex:1; } .rd_zutaten_row .text a, .rd_zutaten_row .text a:hover { text-decoration:none; border-bottom: 1px solid #555; } .rd_zutaten_row .text.green a, .rd_zutaten_row .text.green a:hover { color:#0a9a44; border-bottom: 1px solid #0a9a44; } .rd_zutaten_row .text.orange a, .rd_zutaten_row .text.orange a:hover { color:#f4812c; border-bottom: 1px solid #f4812c; } .rd_zutaten_row .text.darcorange a, .rd_zutaten_row .text.darcorange a:hover { color:#f37820; border-bottom: 1px solid #f37820; } .rd_zutaten_row .text.magenta a, .rd_zutaten_row .text.magenta a:hover { color:#d82040; border-bottom: 1px solid #d82040; } .rd_zutaten_row .text.lila a, .rd_zutaten_row .text.lila a:hover { color:#96429c; border-bottom: 1px solid #96429c; } .rd_zutaten_row .text.blue a, .rd_zutaten_row .text.blue a:hover { color:#034694; border-bottom: 1px solid #034694; } .rd_col_row { display:flex; flex-wrap:wrap; } .rd_col_content { width:100%; padding: 20px 0% 0 0; order:1; } @media only screen and (min-width: 790px) { .rd_col_content { width:65%; padding: 0 5% 0 0; order:initial; } } .rd_col_image { width:100%; padding: 0 0 0 0 } @media only screen and (min-width: 790px) { .rd_col_image { width:35%; padding: 0 0 0 0; } } .rd_col_image img { width:100%; height:auto; vertical-align:top; max-width:400px !important; } @media only screen and (min-width: 790px) { .rd_col_image img { max-width:initial !important; } } .rd_zubereitung_row { } .rd_zubereitung_row .item { display:flex; font-size:18px; line-height:26px; padding: 10px 0px; } .rd_zubereitung_row .steps { font-weight:800; width:100px; font-size:36px; line-height:52px; } .rd_zubereitung_row .steps.green { color:#0a9a44; } .rd_zubereitung_row .steps.orange { color:#f4812c; } .rd_zubereitung_row .steps.darcorange { color:#f37820; } .rd_zubereitung_row .steps.magenta { color:#d82040; } .rd_zubereitung_row .steps.lila { color:#96429c; } .rd_zubereitung_row .steps.blue { color:#034694; } .rd_zubereitung_row .text { flex:1; } /* END content sites (AGB, Datenschutz, etc.) */ /* 25. START shopping_cart and checkout */ .ordercontainer_row { display: flex; flex-wrap:wrap; justify-content: flex-end; } .ordercontainer_details { width:100%; } .ordercontainer_total { width:100%; padding: 0 0 0 0; margin-bottom: 0px; } @media only screen and (min-width: 700px) { .ordercontainer_total { width:60%; padding: 0 0 0 0; } } @media only screen and (min-width: 985px) { .ordercontainer_details { width:70%;} .ordercontainer_total { width:30%; padding: 0 0 0 20px; } } .ordercontainer_total_inner { position: -webkit-sticky; position: sticky; top:150px; } .ordersum { background:#fff; padding:10px; border-radius:10px; margin: 20px 0 20px 0; font-weight:400; border: solid #c6c6c6; border-width: 0px 0px 0px 0px } @media only screen and (min-width: 985px) { .ordersum { padding:20px; margin: 0px 0 20px 0; border-width: 1px 1px 0px 1px } } .ordersum_heading { display:none; padding: 10px 0px 10px 0px; font-size: 12px; line-height: 20px; text-transform:none; font-weight: 700; border-bottom:1px solid #c6c6c6; } @media only screen and (min-width: 985px) { .ordersum_heading { display:block; } } .ordertotal_block { font-size:14px; line-height:18px; } .ordersum_nocart { padding: 0 0 0 0; margin: 0 0 20px 0; font-weight:400; } .ordersum_nocart .ordertotal_block { width:100%; } .ordertotal_row { display: flex; padding: 12px 0px; border-bottom: 1px solid #c6c6c6; } .ordertotal_row .ot_width_1 { flex: 1; } .ordertotal_row .ot_width_2 { text-align:right; white-space:nowrap; padding: 0 0 0 15px; } .ordertotal_row .ot_width_3 { width:110px; } .ot_select { align-items: center; } .ot_select select { height:36px; opacity:0; } .ot_select .SumoSelect > .CaptionCont { background-color: #fff; font-size:13px; line-height:17px; height: 36px; max-width:180px; } .ot_select .SumoSelect .SelectBox { padding: 9px 9px 9px 9px; } .ot_select .SumoSelect .search-txt { background-color: #fff; font-size:13px; line-height:17px; height: 34px; padding: 9px 9px 9px 9px; } .ot_shipping { background:#fff; font-size:13px; line-height:17px; position:relative; } .ot_shipping .SumoSelect { position: static; } .ot_weight { background:#fff; font-size:12px; line-height:16px; } .ot_total { padding: 12px 0px; } .ot_total strong { font-weight:700; } .ot_red { color:#de0a66 !important; } .color_ot_total { color:#de0a66; } .color_error_message { color:#d82626; } /* 25. END shopping_cart and checkout */ /* 26. START order_details */ .orderflex { padding: 10px; background:#fff; border-radius:10px; color:#707070; } @media only screen and (min-width: 985px) { .orderflex { padding:20px; } } .orderflex_row { display: flex; padding: 20px 0px; border-bottom:1px solid #c6c6c6; font-size:14px; line-height:20px; flex-wrap: wrap; align-items:flex-start; } .orderflex_row_header { padding: 10px 0px ; text-transform:none; font-size:12px; line-height:20px; font-weight:700; } .of_header_col_img { width:80px; } @media (min-width: 760px){ .of_header_col_img { width:110px; } } .of_header_col_flex { flex:1; padding: 0px 0px 0px 20px; } .of_header_col_summary { display:flex; width:120px; } @media (min-width: 760px){ .of_header_col_summary { width:280px; } } .of_header_col_qty { display:none; width: 160px; justify-content: center; } @media (min-width: 760px){ .of_header_col_qty { display: flex; } } .of_header_col_total { display:flex; width: 120px; justify-content: flex-end; } .of_col_img { width:80px; position:relative; } @media (min-width: 760px){ .of_col_img { width:100px; } } .of_col_flex { flex: 1; padding: 0px 0px 15px 20px; } @media (min-width: 760px){ .of_col_flex { padding: 0px 5% 0px 20px; } } .of_col_summary { overflow:hidden; display: flex; width:100%; border-top: 1px solid #c6c6c6; padding: 10px 0 0 0; } @media (min-width: 760px){ .of_col_summary { border-top: none; width: initial; padding: 0 0 0 0; } } .of_col_qty { display:flex; width:initial; align-items:center; justify-content:center; } .of_col_qty.top { align-items:flex-start; } @media only screen and (min-width: 760px) { .of_col_qty { width:160px; } } .of_col_qty_label { display:flex; align-items:center; flex:1; width: 100px; text-transform:none; font-size:12px; line-height:20px; font-weight:700; } @media only screen and (min-width: 760px) { .of_col_qty_label { display:none; } } .of_col_qty_inner { display:flex; } .of_quantity_field { width:60px; text-align:center; flex:1; display:flex; justify-content:center; align-items:center; } .of_quantity_field input { width:60px; text-align:center; } .of_quantity_update { margin: 0 0 0 10px; width:44px; } .of_quantity_update .cssButtonIcon { font-size: 18px; } .of_quantity_update button { height:44px; opacity:0; } .of_col_total { display:flex; flex:1; width:auto; align-items:center; justify-content:flex-end; } @media only screen and (min-width: 760px) { .of_col_total { width:120px; } } .of_col_total_inner { display:flex; flex-direction:column; align-items: flex-end; white-space:nowrap; padding: 0 0 0 10px; } .of_col_total_singleprice { display:block; text-align:right; font-size:11px; line-height:15px; color:#666; } .markProductOutOfStock { font-size: 14px; line-height: 14px; display: inline-block; font-weight: 700; margin: 0 0 0 5px; vertical-align: -1px; } .markProductOutOfStock > span { color:#d82626 !important; } .of_productname { margin: 0 0 10px 0; color:#707070; text-transform:uppercase; font-weight:400; } .of_productname a { display:block; color:#707070; text-transform:uppercase; } .of_productname a.iframe { display:inline-block; font-weight:400; text-transform:none; color:#555; font-size:13px; line-height:15px; } .of_productname a:hover { text-decoration:none; } .of_description { margin: 12px 0 0 0; padding: 0px 0px; font-size:13px; line-height:19px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .of_description p { margin: 0px 0px; padding: 0px 0px; } .of_attributes { list-style-type:none; margin: 12px 0 0 0; } .of_attributes li { font-size:13px; line-height:19px; padding: 1px 0px; } .of_inforows { margin: 12px 0 0 0; } .of_infoline { font-size:13px; line-height:19px; padding: 1px 0px; } .of_action { border-top: 0px solid #c6c6c6; width:100%; padding: 12px 0 12px 0px; } @media only screen and (min-width: 760px) { .of_action { padding: 12px 0 0 0px; } } .of_action > span { display:inline-block; vertical-align:top; padding: 0px 0px; margin: 0 20px 0 0; } .of_action > span.of_wishlist a { font-size:12px; line-height:16px; font-weight:600; padding: 5px 0px; display:block; color:#666; } .of_action > span.of_wishlist .fa-solid, .of_action > span.of_wishlist .fa-regular { margin-right:5px; } .of_action > span.of_wishlist a:hover { color:#333; text-decoration:none; } .of_action > span.of_delete .cssButton { padding: 0px 0px; font-size:12px; line-height:16px; font-weight:600; text-transform: none; height: 26px; } .of_action > span.of_delete .cssButtonIcon { font-size: 12px; line-height: 24px; } .of_action > span.of_delete .cssButtonText { font-size: 12px; line-height: 26px; text-transform:none; font-weight:600; } .of_action > span.of_delete a:hover { text-decoration:none; } .of_action > span.of_delete .cssButtonColor5 { background:transparent; color:#666; } .of_action > span.of_delete .cssButtonColor5:hover { background:transparent; color:#333; opacity:1; } /* 26. END order_details */ /* 27. START gift box shopping cart */ .giftbox { padding: 10px; margin: 0 0 0 0; background:#fff; border-radius:10px; color:#707070; } @media only screen and (min-width: 985px) { .giftbox { padding:20px; } } .giftbox input[type=text] { background-color: #fff; } .giftbox_heading { display:none; padding: 10px 0px 10px 0px; font-size: 12px; line-height: 20px; text-transform: none; font-weight: 700; border-bottom: 1px solid #c6c6c6; } .gift_item_row { padding: 5px 0px; margin: 0px -10px; display: flex; flex-wrap: wrap; } .gift_text_row { border:solid #c6c6c6; border-width: 1px 0px 0px 0px; padding: 10px 0px; font-size:12px; line-height:18px; } .gift_text_row .fa-solid { color: #296aab; } .giftbox .errormessage, .giftbox .infomessage, .giftbox .successmessage { margin: 0px; border-bottom: 1px solid #c6c6c6; font-size:13px; line-height:17px; } .giftbox a.arrow { display:inline-block; margin: 5px 0 0 0; color:#555; font-weight:700; } .giftbox a.arrow:hover { color:#555; text-decoration:none; } /* 27. END gift box shopping cart */ /* 26. START Product details */ #product_info { position:relative; padding: 20px 0 0 0; } @media only screen and (min-width: 890px) { #product_info { padding: 30px 0 0 0; } } .pd_info_row { display:flex; flex-wrap:wrap; } .pd_info_left { width:100%; max-width:500px; margin: 0px auto; padding: 0; } .pd_info_right { width:100%; max-width:500px; margin: 0px auto; padding: 20px 0 0 0; } @media only screen and (min-width: 660px) { .pd_info_left { width:50%; max-width:initial; padding: 0 20px 0 0;} .pd_info_right { width:50%; max-width:initial; padding: 0 0 0 20px; } } @media only screen and (min-width: 890px) { .pd_info_left { width:50%; padding: 0 30px 0 0; } .pd_info_right { width:50%; padding: 0 0 0 30px; } } .pd_titlebox_desktop { display:none; } .pd_titlebox_mobile { display:block; margin: 0px 0 30px 0; } @media only screen and (min-width: 890px) { .pd_titlebox_desktop { display:block; } .pd_titlebox_mobile { display:none; } } .pd_titlebox_desktop h1, .pd_titlebox_mobile h1 { font-family: 'Encode Sans', sans-serif; text-align:left; border: none; padding: 0; margin: 0; font-weight:700; color:#333; text-transform:uppercase; letter-spacing:0px; } .pd_titlebox_desktop h1 { font-size:24px; line-height:28px; } .pd_titlebox_mobile h1 { font-size:20px; line-height:24px; } .pd_titlebox_desktop h3, .pd_titlebox_mobile h3 { border: none; margin: 12px 0 0 0; padding: 0; font-size:14px; line-height:20px; font-weight:400; color: #666; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height:40px; hyphens:auto; } .pd_image_container_outer { float:left; display:block; position:relative; width:100%; margin: 0 0 0 0px; } .pd_image_container_outer:before { content: ""; display:block; padding-top: 118%; } .pd_image_container { position:absolute; top:0px; left:0px; width:100%; display: flex; margin: 0 0 0 0px; flex-direction: column; } .pd_image_small_container { float:left; display: flex !important; flex-direction: row; margin: 10px -3px 0 -3px; } .pd_image_big_container { float:right; width:100%; overflow:hidden; } .pd_image_small { display:block; font-size:20px; height:100%; color:#fff; padding: 3px 3px; display: flex !important; } .pd_image_small_inner { width:100%; border: 1px solid #e1e1e1; position:relative; font-size:1px; } .pd_image_small_inner:before { content: ""; display:block; padding-top: 100%; } .pd_image_small_inner img { margin: auto; font-size:1px; position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; width: 90%; height: 90%; object-fit:contain; cursor: pointer; } .pd_image_small_video a:before { font-family: 'Font Awesome 6 Brands'; content: '\f167'; font-weight: 400; font-size: 20px; line-height: 20px; position: absolute; top: 0px; left: 0px; bottom: 0; right: 0; margin: auto; width: 20px; height: 20px; z-index:10; } .pd_image_small_video a { color:#ff0000; } .pd_image_small_video a:hover { color:#333 !important; } .pd_image_big { vertical-align:top; display:block; position:relative; padding: 0px 0px 0px 0; } .pd_image_big_inner { overflow:hidden; position:relative; width:100%; border: 0px solid #eee; } .pd_image_big_inner:before { content: ""; display:block; padding-top: 100%; } .pd_image_big_inner a { display:block; position:absolute; width:100%; height:100%; top:0px; left:0px; bottom: 0px; right:0px; margin: auto; } .pd_image_big img { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; object-fit:contain; cursor: zoom-in; } .pd_image_small_container .slick-slide { border: 0px solid transparent !important; opacity:1.0; } .pd_image_small_container .slick-slide.slick-current { opacity:0.5; } .pd_image_small_container .slick-slide > div { height:100% !important; } .pd_image_small_container .slick-list.draggable { height:100% !important; right:0px; width:100%; } .pd_image_small_container .slick-track { height:100% !important; } .pd_image_small_container .slick-next { right: 10px; margin: auto; } .pd_image_small_container .slick-prev { left: 10px; margin: auto; } .pd_image_small_container .slick-prev, .pd_image_small_container .slick-next, .pd_image_small_container .slick-prev:focus, .pd_image_small_container .slick-next:focus { width: 42px; height: 42px; background: #fff; z-index: 2; color: #333; opacity: 0.4; border-radius: 2px; } .pd_image_small_container .slick-prev:before, .pd_image_small_container .slick-next:before { font-size:30px; color:#333; } .pd_image_small_container .slick-prev:hover, .pd_image_small_container .slick-next:hover { outline: none; background: #fff; opacity:0.8; } .pd_image_small_container .slick-prev:hover:before, .pd_image_small_container .slick-prev:focus:before, .pd_image_small_container .slick-next:hover:before, .pd_image_small_container .slick-next:focus:before { color: #333; } .pd_image_big_container .slick-next { right: 10px; top: 0px; bottom: 0px; margin: auto; } .pd_image_big_container .slick-prev { left: 10px; top: 0px; bottom: 0px; margin: auto; } .pd_image_big_container .slick-prev, .pd_image_big_container .slick-next, .pd_image_big_container .slick-prev:focus, .pd_image_big_container .slick-next:focus { width: 42px; height: 42px; background: #fff; z-index: 2; color: #333; opacity: 0.4; border-radius: 2px; } .pd_image_big_container .slick-prev:before, .pd_image_big_container .slick-next:before { font-size:30px; color:#333; } .pd_image_big_container .slick-prev:hover, .pd_image_big_container .slick-next:hover { outline: none; background: #fff; opacity:0.8; } .pd_image_big_container .slick-prev:hover:before, .pd_image_big_container .slick-prev:focus:before, .pd_image_big_container .slick-next:hover:before, .pd_image_big_container .slick-next:focus:before { color: #333; } .pd_action_row { margin: 30px 0 0 0; display:flex; flex-wrap:wrap; } .pd_price_box { width:100%; } .pd_action_box { padding: 20px 0 0 0px; width:100%; display:flex; flex-direction:column; justify-content:flex-end; } .pd_price { position:relative; font-size: 30px; line-height:40px; margin: 0 0 0px 0; } #pd_puprice { display:flex; align-items:center; } .pd_price .no_price { font-size:10px; line-height:14px; font-weight:normal; display:block; padding:4px 0 4px 0; color:#999; } .pd_price .standard_price { display:inline-block; color:#333; font-weight:400; } .pd_price .standard_price .sup { margin: -1px 0 0 1px; display: inline-block; position: relative; vertical-align: top; font-size: 20px; line-height: 20px; } .pd_price .new_price { padding: 0px 15px 0 0; display:inline-block; font-weight:400; color:#de0a66; } .pd_price .new_price .sup { margin: -1px 0 0 1px; display: inline-block; position: relative; vertical-align: top; font-size: 20px; line-height: 20px; } .pd_price .old_price { display:block; font-size:22px; line-height:22px; font-weight:400; color:#707070; position:relative; padding: 0 0 0 0; } .pd_price .old_price .sup { margin: 0px 0 0 1px; display: inline-block; position: relative; vertical-align: top; font-size: 16px; line-height: 16px; } .pd_price .old_price:before { content:''; position:absolute; left: 0px; right: 0px; height: 1px; background: #999; -moz-transform: rotate(162deg); -ms-transform: rotate(162deg); -o-transform: rotate(162deg); -webkit-transform: rotate(162deg); transform: rotate(162deg); bottom: 0px; top:0px; margin:auto; } .pd_price .small_price { font-size:12px; font-weight:400; line-height:12px; } .pd_price .save_price { margin: -1px 0 6px 0; display:block; font-size:10px; font-weight:500; line-height:14px; color:#e74c3c; } .pd_price .item_price { padding: 0 0 4px 0; display:block; font-size:10px; line-height:12px; font-weight:500; color:#666; } .pd_price .uvp_price { display:block; font-size: 22px; line-height:28px; color:#434343; } .pd_price .graduated_price { display:block; font-size: 22px; line-height:28px; font-weight:700; color:#e74c3c; } .pd_vpe { text-align:left; padding: 2px 0 2px 0; font-size:12px; line-height:14px; color:#666; } .pd_tax { text-align:left; padding: 2px 0 2px 0; font-size:12px; color:#666; line-height:14px; } .pd_tax a { color:#666; text-decoration:underline; } .pd_tax a:hover { color:#666; text-decoration:underline; } .pd_roundicons { font-size: 12px; line-height:40px; padding: 0 0 0 0; margin: 0 0 26px 0; display:flex; height:40px; display:none; } .pd_roundicons .icon { display:inline-block; width:34px; height:34px; margin: 0 10px 0 0; } .pd_roundicons .icon img { width:100%; height:auto; vertical-align:top; } .pd_shipping { padding: 2px 0px; font-size:14px; line-height:16px; color:#333; display:flex; justify-content:space-between; } .pd_alkohol { margin: 30px 0 0 0; padding: 8px; font-size:12px; line-height:16px; border: 2px dotted #de0a66; border-radius:8px; width:100%; } .pd_freeshipping { margin: 10px 0 0 0; display:flex; align-items:center; } .pd_freeshipping_icon { margin: 0 0 0 0; width:36px; } .pd_freeshipping_icon_inner { display:flex; align-items:center; justify-content:center; background:#eee; color:#de0a66; width:36px; height:36px; font-size:14px; line-height:14px; border-radius:50%; } .pd_freeshipping_text { flex:1; padding: 0 0 0 10px; font-size:14px; line-height:18px; font-weight:500; } .pd_formbox { display:block; margin: 30px 0 0 0; } .productoptions { margin: 0px 0px 30px 0px; width:100%; padding: 0 0 0px 0; } .options_row_multi { margin: 10px 0 10px 0; } .options_row_multi .options_name { font-size:13px; line-height:19px; font-weight:700; padding: 0 0 5px 0; color:#333; } .options_row_multi .options_select { } /* product_options_button */ .po_row_button { display: block; margin: 10px 0 10px 0; } .po_row_button_name { padding: 0 0 5px 0; font-size: 13px; line-height: 19px; font-weight: 700; color:#333; } .po_row_button_values { display:flex; flex-wrap:wrap; margin: 0px -5px; } .po_row_button_item { position:relative; margin: 5px; } .po_row_button_item input[type="radio"] { position: absolute; opacity: 0; } .po_row_button_item label { display:flex; height:100%; padding: 10px 10px; min-width:60px; max-width:160px; background:#e8e8e8; border: 1px solid #e8e8e8; color:#666; border-radius:8px; cursor:pointer; } .po_row_button_item label:hover { background:#ddd; border: 1px solid #ddd; } .po_row_button_item_name { width:100%; text-align:center; font-weight:700; font-size: 13px; line-height: 15px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .po_row_button_item_price { width:100%; text-align:center; font-weight:400; font-size: 10px; line-height: 10px; display:block; padding: 3px 0 0 0; } .po_row_button_item_vpe { width:100%; text-align:center; font-weight:400; font-size: 10px; line-height: 10px; display:block; padding: 3px 0 0 0; } .po_row_button_item input[type="radio"]:checked ~ label { background:#333; border: 1px solid #333; color:#fff; opacity:1.0; } .po_row_button_item input[type="radio"]:checked ~ label .po_row_button_item_name { font-weight:700; } .pd_addtobasket { display:flex; flex-wrap:wrap; align-items:center; } .pd_addtobasket.no_basket { height: 1px; visibility:hidden; } .pd_addtobasket_quantity { width:140px; } .addtobasket_input { display:block; width: 140px; padding: 0px 38px 0px 38px; position:relative; } .addtobasket_input input { text-align:center; font-size: 18px; border-width: 2px; padding: 9px 5px; } .pd_btn_plus, .pd_btn_minus { position:absolute; top:0px; bottom:0px; margin: auto; display:block; width: 30px; height: 30px; cursor:pointer; text-align:center; background: #e8e8e8; border-radius: 8px; color:#707070; } .pd_btn_plus:before, .pd_btn_minus:before { font-family: 'Font Awesome 6 Free'; content: '\f067'; font-weight: 900; font-size: 14px; line-height: 30px; } .pd_btn_plus:before { content: '\f067'; } .pd_btn_minus:before { content: '\f068'; } .pd_btn_plus { right: 0px; } .pd_btn_minus { left: 0px; } .pd_btn_plus:hover, .pd_btn_minus:hover { color:#de0a66; text-decoration:none; } .shopmodule-gift-voucher-designer .pd_btn_plus, .shopmodule-gift-voucher-designer .pd_btn_minus { display:none !important; } .pd_addtobasket_buttons { flex:initial; width:100%; padding: 10px 0 0 0px; display:flex; flex-wrap:nowrap; justify-content:flex-start; } @media only screen and (min-width: 500px) { .pd_addtobasket_buttons { flex:1; padding: 0 0 0 10px; justify-content:flex-end; } } @media only screen and (min-width: 660px) { .pd_addtobasket_buttons { flex:initial; padding: 10px 0 0 0px; justify-content:flex-start; } } @media only screen and (min-width: 890px) { .pd_addtobasket_buttons { flex:1; padding: 0 0 0 10px; } } .pd_addtobasket_buttons .pd_card { width:100%; max-width:initial; flex:1; margin: 0 10px 0 0; } @media only screen and (min-width: 500px) { } .pd_addtobasket_buttons .pd_wish { width:42px; overflow:hidden; } .pd_addtobasket_buttons .pd_wish span.cssButtonText { display:none; } .pd_ambiente_image_row { display:flex; flex-wrap:wrap; margin: 50px -10px 0px -10px; } .pd_ambiente_image_item { width:33.3333%; padding: 10px; } .pd_ambiente_image_item .image { display:block; vertical-align:middle; text-align:center; position:relative; overflow:hidden; margin: 0 0 10px 0; } .pd_ambiente_image_item .image:before { content: ""; display:block; padding-top: 100%; } .pd_ambiente_image_item .image img { margin: auto; position: absolute; font-size:0px; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; object-fit:contain; } .pd_ambiente_image_item .text { padding: 20px 2px 0 2px; font-size:16px; line-height:20px; color:#707070; } .pd_headline_background { margin: 40px 0 0 0; display:flex; height:70px; text-transform: uppercase; font-weight: 800; color: #000; font-size: 22px; line-height: 24px; letter-spacing: 4px; } .pd_hb_center { display:flex; align-items:flex-end; padding: 0px 20px; } .pd_hb_left { flex:1; background-image: url(img/icons/HGM-heartline_left-black.png); background-repeat:no-repeat; background-position:bottom right; background-size:auto 70px; } .pd_hb_right { flex:1; background-image: url(img/icons/HGM-heartline_right-black.png); background-repeat:no-repeat; background-position:bottom left; background-size:auto 70px; } .pd_highlights_list { margin: 30px 0 0 0px; padding: 0 0 0 30px; list-style-type:none; } .pd_highlights_list li { margin: 8px 0px; font-size:16px; line-height:22px; position:relative; } .pd_highlights_list li:before { content:''; width:18px; height:18px; position:absolute; left:-30px; top:3px; display:block; background-image: url(img/icons/HGM-heart_outline-black.png); background-repeat:no-repeat; background-size:cover; } .pd_highlights_row { display:flex; flex-wrap:wrap; margin: 40px -10px 0 -10px; } .pd_highlights_item { display:flex; flex-direction:row; width:100%; padding: 5px 10px; color:#707070; } @media only screen and (min-width: 985px) { .pd_highlights_item { flex-direction:column; width:20%; padding: 10px 10px; } } .pd_highlights_item .image { display:inline-block; width:20px; margin: 0px auto; } .pd_highlights_item .image img { width:100%; height:auto; vertical-align:top; } .pd_highlights_item .text { display:block; padding: 0px 10px 0px 10px; text-align:left; font-size:14px; line-height:20px; color:#707070; flex:1; } @media only screen and (min-width: 985px) { .pd_highlights_item .text { padding: 25px 10px 10px 10px; text-align:center; } } .pd_information_row { display:flex; flex-wrap:wrap; margin: 0px -10px 0 -10px; } .pd_information_item { width:100%; padding: 10px 10px 10px 10px; color:#707070; } @media only screen and (min-width: 985px) { .pd_information_item { width:33.3333%; } } .pd_information_item .heading { font-size:14px; line-height:20px; font-weight:700; text-transform:uppercase; margin: 0 0 0 0; } .pd_information_item .content { font-size:14px; line-height:24px; padding: 8px 0 20px 0; } .pd_naehrwerte_item { display:flex; flex-wrap:wrap; margin: 0px -5px 0 -5px; } .pd_naehrwerte_item .title { padding: 0px 5px; flex:1; } .pd_naehrwerte_item .value { padding: 0px 5px; text-align:right; white-space:nowrap; } .pd_video_container { position:relative; overflow:hidden; margin: 40px 0px; } .pd_video_container:before { content: ''; display:block; padding-top: 45%; } .pd_video_container_inner { position:absolute; width:100%; height:100%; top: 0; left: 0; bottom: 0; right: 0; } .pd_video_container_inner:before, .pd_video_container_inner:after { content:''; display:block; position:absolute; width:100%; height:100%; top: 0; left: 0; bottom: 0; right: 0; z-index:1; background-repeat:no-repeat; background-size:100%; } .pd_video_container_inner:before { background-image:url(img/icons/bg_video_overblend_top.png); background-position:top center; } .pd_video_container_inner:after { background-image:url(img/icons/bg_video_overblend_bottom.png); background-position:bottom center; } .pd_video_container video { position:absolute; width:100%; height:100%; top: 0; left: 0; bottom: 0; right: 0; object-fit:cover; } /* ---------------------- */ .product_headline { margin: 25px 0 15px 0; border: #ddd solid; border-width: 0 0 0 0; padding: 0 0 5px 0; } .product_headline h1 { margin: 0px 0 0px 0; padding: 0 0 0px; border-width: 0 0 0 0; } .pd_manu_image { float:right; display:inline-block; height:30px; margin: 0px 0 3px 20px; } .pd_manu_image img { max-height:30px; width:auto; } #product_details { position:relative; padding: 0 0 20px 0; } .pd_imagebox { float: none; margin: 0 auto 20px auto; width: 100%; max-width:240px; } .pd_content { float:right; width:100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: column; flex-direction: column; } .pd_infobox { order:1; width:100%; box-sizing: border-box; padding: 0 0 0 0; margin-bottom:20px; } .pd_summarybox { order:2; box-sizing: border-box; width:100%; margin-bottom:20px; } @media screen and (min-width: 500px) { .pd_infobox { width: 47%; padding: 0 20px 0 0; } .pd_summarybox { width: 53%; } .pd_content {-webkit-flex-direction: row; flex-direction: row; } } @media screen and (min-width: 600px) { .pd_infobox { width: 54%; } .pd_summarybox { width: 46%; } } @media screen and (min-width: 690px) { .pd_imagebox { float:left; width:30%; margin: 0; } .pd_content { width: 66%; } .pd_infobox { width: 44%; } .pd_summarybox { width: 56%; } } .pd_summarybox_inner { background-color: #F2F2F2; border: 1px solid #E6E6E6; box-sizing: border-box; padding:5px; } .pd_big_image { position:relative; width:100%; margin: 0px 0px 0px 0px; border:1px solid #eee; box-sizing: border-box; text-align:center; } .pd_big_image:before { content: ''; padding-top: 100%; display: block; overflow:hidden; } .pd_big_image img { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; max-width: 25%; max-height: 25%; font-size: 0; -webkit-transform: scale(4.0); -moz-transform: scale(4.0); -ms-transform: scale(4.0); -o-transform: scale(4.0); transform: scale(4.0); } .pd_fsk18 { background: transparent url(img/fsk18.png) no-repeat top center; height: 44px; position: absolute; width: 44px; top:0px; left:0px; } .zoomtext { line-height:14px; font-size:10px; padding:10px 0px; } .pd_small_image_row { margin: 0px -5px 0px -5px; } .pd_small_image { float:left; position:relative; width:33.3333%; padding: 0px 5px; margin: 0px 0px 10px 0px; box-sizing: border-box; } .pd_small_image_inner { border:1px solid #eee; text-align: center; position:relative; width:100%; box-sizing: border-box; } .pd_small_image_inner:before { content: ""; display:block; padding-top: 100%; overflow:hidden; } .pd_small_image_inner img { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; max-width: 20%; max-height: 20%; -webkit-transform: scale(4.4); -moz-transform: scale(4.4); -ms-transform: scale(4.4); -o-transform: scale(4.4); transform: scale(4.4); } .pd_small_image_tab_row { margin: 0px -5px 0px -5px; } .pd_small_image_tab { float:left; position:relative; width:33.3333%; padding: 0px 5px; margin: 0px 0px 10px 0px; box-sizing: border-box; } @media screen and (min-width: 400px) { .pd_small_image_tab { width:25%; } } @media screen and (min-width: 500px) { .pd_small_image_tab { width:20%; } } .pd_small_image_tab_inner { border:1px solid #eee; text-align: center; position:relative; width:100%; box-sizing: border-box; } .pd_small_image_tab_inner:before { content: ""; display:block; padding-top: 100%; overflow:hidden; } .pd_small_image_tab img { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; max-width: 20%; max-height: 20%; -webkit-transform: scale(4.8); -moz-transform: scale(4.8); -ms-transform: scale(4.8); -o-transform: scale(4.8); transform: scale(4.8); } .pd_inforow_first { margin: 0px; border-bottom: 1px solid #eee; } .pd_inforow { font-weight:400; padding: 7px 0px 7px 0px; font-size:10px; line-height:14px; text-align:left; border-bottom: 1px solid #eee; } .pd_inforow strong { font-weight:600; } .pd_inforow.red { color:#e74c3c; } .pd_inforow_message { margin: 10px 0 0 0; color:#e74c3c; padding: 7px 0px 7px 0px; font-size:10px; line-height:14px; text-align:left; border-top: 1px solid #eee; } .pd_inforow .pd_shipping_image { display:inline-block; padding: 0 5px 0 0; } .pd_fsk_padding { padding-left:50px; } ul.pd_iconlist { margin: 20px 0 0px 0px !important; list-style-type:none; border: solid #eee; border-width: 1px 0px 0px 0px; background:#fff; overflow:hidden; font-weight:400; } ul.pd_iconlist li { font-size:10px; line-height:14px; } ul.pd_iconlist li a { display:block; color:#555; border-bottom:1px solid #eee; padding: 7px 0px 7px 25px; } ul.pd_iconlist li a:hover { color:#b0377e; text-decoration:none; } ul.pd_iconlist li.wishlist { cursor:pointer; border-bottom:1px solid #eee; padding: 0px 0px 0px 2px; } ul.pd_iconlist li.wishlist .wishlist_submit_link { margin-left:23px; color:#555; background:none; border: none; font-size:10px; line-height:14px; padding:7px 0px; cursor:pointer; width:100%; text-align:left; outline:none; } ul.pd_iconlist li.wishlist .wishlist_submit_link:hover { color:#b0377e; text-decoration:none; } ul.pd_iconlist li.print { position:relative; } ul.pd_iconlist li.print:before { font-family: 'Font Awesome 6 Free'; content: '\f02f'; font-weight: 900; font-size: 13px; position:absolute; top:7px; left:3px; color:#858585; } ul.pd_iconlist li.vote { position:relative; } ul.pd_iconlist li.vote:before { font-family: 'Font Awesome 6 Free'; content: '\f164'; font-weight: 900; font-size: 13px; position:absolute; top:6px; left:3px; color:#858585; } ul.pd_iconlist li.express { position:relative; } ul.pd_iconlist li.express:before { font-family: 'Font Awesome 6 Free'; content: '\f218'; font-weight: 900; font-size: 13px; position:absolute; top:6px; left:2px; color:#858585; } ul.pd_iconlist li.wishlist { cursor:pointer; border-bottom:1px solid #eee; position:relative; } ul.pd_iconlist li.wishlist:before { font-family: 'Font Awesome 6 Free'; content: '\f005'; font-weight: 900; font-size: 13px; position:absolute; top:6px; left:3px; color:#858585; } .dateadded { font-size:10px; } .dateadded_border { margin-top:20px; font-size:10px; border-top: none; } .pd_description ul{ margin: 8px 0px 8px 15px; } .pd_description ol{ margin: 8px 0px 8px 15px; } .pd_description img{ width: auto; max-width: 100%; height: auto; } .pd_description iframe{ max-width: 100%; } .pd_inforow .pd_rating_icons { display:inline-block; font-size:11px; line-height:15px; color:#ccc; padding: 0px 3px 0 0; } .pd_inforow .pd_rating_icons .fa-solid { padding: 0 1px 0 0; } .pd_inforow .pd_rating_icons .full { color:#f1c40f; } .pd_tabs { background:#ddd; } .pd_tabs .resp-tabs-container { border-top: 1px solid #ddd; } .pd_tabs h2.resp-accordion { display: block; background:#eee; } .pd_tabs ul.resp-tabs-list { display: none; } @media only screen and (min-width: 690px) { .pd_tabs { background:#fff; } .pd_tabs .resp-tabs-container { border-top: none; } .pd_tabs h2.resp-accordion { display: none; } .pd_tabs ul.resp-tabs-list { display: block; } } /* END Product details */ /* 27. START graduated prices */ .graduated_prices { margin: 15px 0px 0px 0px; } .gp_headline { font-size:10px; line-height:12px; font-weight:700; padding: 0 0 4px 0; } .gp_box { float:left; width:33.3333%; margin: 0px 0px -1px 0px; border: solid #ddd; border-width: 1px 0px 1px 1px; box-sizing: border-box; } .gp_box.vpe { width:50%; } .gp_box.last { border-right: 1px solid #ddd; } .gp_title { display:block; background:#fafafa; font-size:10px; font-weight:600; text-align:left; padding:1px 3px; white-space:nowrap; border-bottom: 1px solid #ddd; } .gp_price { display:block; background:#fff; font-size:10px; font-weight:normal; text-align:left; padding:1px 3px; } .gp_vpe { display: block; background:#fff; font-size: 10px; font-weight: normal; text-align: left; padding: 1px 3px; border-top: 1px solid #ddd; } /* END graduated prices */ /* 29. START product_details reviews */ .reviewrow { border-bottom: 1px solid #ddd; padding:10px 0px 4px 0px; } .reviewrow_title { line-height:18px; } .reviewrow_title .rating_icons { display:inline-block; font-size:13px; line-height:15px; color:#ccc; padding: 0px 3px 0 5px; } .reviewrow_title .rating_icons .fa-solid { padding: 0 1px 0 0; } .reviewrow_title .rating_icons .full { color:#f1c40f; } /* END product_details reviews */ /* 31. START product_details media */ .mediarow { border-bottom: 1px solid #ddd; padding:10px 5px 10px 5px; } .media_bg1 { background:#fafafa; } .media_bg2 { background:#ffffff; } .mediarow_headline { line-height:32px; } .mediarow_title { font-weight:bold; display:inline-block; } .mediarow_button { float:right; text-align:right; display:inline-block; height:32px; min-width:120px; } .mediarow_filesize { float:right; text-align:right; display:inline-block; padding: 0px 30px 0px 0px; font-style:italic; } .mediarow_desc { padding: 0px; } /* END product_details media */ /* 32. START popup content (popup print_product_info, popup print_order.html) */ body.popupcontent { min-width:100%; background:#fff none; box-sizing:border-box; padding: 0 10px 0 0; } body.popupcontent h1 { margin-top:0px !important; } body.popupcontent img { max-width:100%; width:auto; height:auto; } body.popupcontent ul { margin: 0 0 0 16px; } /* 32. END popup content */ /* 33. START print content (popup print_product_info, popup print_order.html) */ body.popupprint { min-width:100%; background:#fff none; } .printwrap { width:700px; margin: 0px auto; } .printlogo { padding:10px 0px; text-align:center; border-bottom: 1px solid #ccc; margin-bottom:10px; } /* print order */ .printColumsLeft { float:left; width:48%; } .printColumsRight { float:right; width:48%; } /* print info */ .printColumsInfoLeft { float:left; width:500px; padding: 0px; } .printColumsInfoLeft ul{ margin: 8px 0px 8px 15px; } .printColumsInfoLeft ol{ margin: 8px 0px 8px 15px; } .printColumsInfoRight { float:right; width:164px; text-align:center; } .printColumsInfoRight img { max-width:160px; height:auto; margin: 10px auto 0px auto; border: 1px solid #ddd; padding:1px; } ul.printinfolist { margin-left:15px; } ul.printinfolist li.active { font-weight:bold; } .moimages { float:left; width:126px; height:126px; border: 1px solid #ddd; padding:2px; margin: 0px 10px 10px 0px; position:relative; } .moimages:nth-child(5n+1) { margin-right:0px; } .moimages img { position:absolute; margin: auto; top:0px; bottom:0px; left:0px; right:0px; background-color: #FFFFFF; max-height:126px; max-width:126px; } /* admin print-order */ .printwrap_admin { padding-top:40px; width:700px; margin: 0px auto; } p.underline { margin:105px 0px 3px 15px; font-size:10px; text-decoration:underline; } .printlogo_admin { padding:0px 0px; text-align:right; margin:0px 0 20px 0; } .printlogo_admin img { max-width:336px; } .print_small { font-size:12px; line-height:18px; } .print_big { font-size:26px; font-weight:bold; text-transform:uppercase; padding:30px 0 0 0; } .printwrap table.order_table, .printwrap_admin table.order_table { margin-top:0px; font-size:13px; line-height:19px; width:100%; } .printwrap .ord_table_left, .printwrap_admin .ord_table_left { text-align:left; } .printwrap .ord_table_right, .printwrap_admin .ord_table_right { text-align:right; } .printwrap .ord_width40, .printwrap_admin .ord_width40 { width:40px; } .printwrap .ord_width110, .printwrap_admin .ord_width110 { width:110px; } .printwrap .ord_width120, .printwrap_admin .ord_width120 { width:120px; } .printwrap table.order_table tr.headerrow, .printwrap_admin table.order_table tr.headerrow { font-size:11px; line-height:19px; font-weight:bold; background:transparent; } .printwrap table.order_table tr.headerrow td, .printwrap_admin table.order_table tr.headerrow td { padding:5px 5px; vertical-align:top; } .printwrap table.order_table tr.mainrow td, .printwrap_admin table.order_table tr.mainrow td { border-top: 1px solid #ddd; padding:10px 5px; vertical-align:top; } .printwrap table.order_table ul.attributes_list, .printwrap_admin table.order_table ul.attributes_list { list-style-type:none; margin: 7px 0px 0px 0px !important; } .printwrap table.order_table ul.attributes_list li, .printwrap_admin table.order_table ul.attributes_list li { font-size:12px; line-height:20px; } .printwrap .total_table_right, .printwrap_admin .total_table_right { float:right; } .printwrap table.total_table, .printwrap_admin table.total_table { font-size:13px; line-height:19px; } .printwrap table.total_table tr td, .printwrap_admin table.total_table tr td { padding:2px 5px; width:120px; white-space:nowrap; } /* END print content (popup print_product_info, popup print_order.html) */ /* 34. START reviews */ .reviewsbox { background:#fff; border:solid #ddd 1px; width:100%; height:auto; overflow:hidden; margin: 0 0 20px 0; } @media only screen and (min-width: 759px) { .reviewsbox { height: 185px; width: 49%; } } .rb_left { float:left; } .rb_right { float:right; } .reviewsbox_inner { padding:15px; } .rb_headline { font-size:13px; color:#555; line-height:17px; border-bottom: 1px solid #eee; padding: 0 0 5px 0; margin: 0px 0px 6px 0px; } .rb_headline a { text-decoration:none; } .rb_headline a:hover { text-decoration:none; } .rb_autor { float:left; display:inline-block; font-size:12px; height:18px; line-height:18px; } .rb_rating { float:right; display:block; font-size:12px; height:18px; line-height:18px; width: 100%; padding: 5px 0 10px 0; } @media screen and (min-width: 400px) { .rb_rating { display: inline-block; padding: 0 0 0 0; width: auto; } } .rb_rating img { vertical-align:-2px; } .rb_rating .rb_rating_icons { display:inline-block; font-size:13px; line-height:15px; color:#ccc; padding: 0px 0px 0 0; } .rb_rating .rb_rating_icons .fa-solid { padding: 0 1px 0 0; } .rb_rating .rb_rating_icons .full { color:#f1c40f; } .rb_image { float:left; width:54px; height:54px; overflow:hidden; text-align:center; position:relative; margin:10px 0 0 0; } .rb_image img { position:absolute; margin: auto; top: 0; left: 0; bottom: 0; right: 0; padding: 1px; border: 1px solid #eee; max-width:50px; max-height:50px; } @media screen and (min-width: 400px) { .rb_image { width:84px; height:84px; } .rb_image img { max-width:80px; max-height:80px; } } .rb_rezension { float:right; width:70%; } .rb_rezension p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-height:63px; } .rb_rezension_small { float:right; width: calc(100% - 80px); } @media screen and (min-width: 400px) { .rb_rezension_small { width: calc(100% - 120px); } } /* END reviews */ /* 35. START upcoming_products */ ul.upcoming_list { margin: 0px; } ul.upcoming_list li { list-style-type:none; border-bottom: 1px solid #eee; padding: 5px 0px; } /* END upcoming_products */ /* 36. START coupon box - error message */ .hb_box_text { float:left; display:inline-block; line-height:30px; font-size:12px; height:32px; padding: 0 30px 0 0; font-weight:bold; } .hb_box_input { float:left; display:block; width: 320px; height:32px; } .hb_box_button { float:left; display:inline-block; height:32px; padding: 0 0 0 20px; } /* END coupon box - error message */ /* 37. START downloads */ .downloadrow { border: 1px solid #ddd; background:#fafafa; padding:5px; margin-bottom:10px; } .dl_icon { float:left; width:61px; height:50px; } .dl_icon a { display:block; width:61px; height:50px; } .dl_icon a:hover { text-decoration:none; } .dl_content { float:left; display:inline-block; margin: 0 0 0 30px; line-height:21px; font-size:13px; padding: 3px 0 0 0; } /* END downloads */ /* 38. START offline & admin-login */ #layout_offline { max-width:700px; margin:40px auto; padding:30px; border: 1px solid #ddd; } #layout_adminlogin { position:relative; margin: 50px auto; padding:15px; background:#fff; border:solid #eee 1px; -webkit-box-shadow: 0px 0px 15px #3d3d3d; -moz-box-shadow: 0px 0px 15px #3d3d3d; box-shadow: 0px 0px 15px #3d3d3d; width:400px; } #layout_adminlogin a.help_adminlogin { position:absolute; width:32px; height:32px; outline:none; top:10px; right:10px; display:block; } #layout_adminlogin .login { float:right; margin: 10px 0 0 0; outline: none; cursor: pointer; text-align: center; text-decoration: none; font-size: 16px; padding: 2px 20px; border-radius: 2px; color: #fff; border: solid 1px #101010; background: #3a3a3a; background: -webkit-gradient(linear, left top, left bottom, from(#494949), to(#242424)); background: -moz-linear-gradient(top, #494949, #242424); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#494949', endColorstr='#242424'); } #layout_adminlogin .login:hover { text-decoration: none; background: #3a3a3a; background: -webkit-gradient(linear, left top, left bottom, from(#242424), to(#494949)); background: -moz-linear-gradient(top, #242424, #494949); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#242424', endColorstr='#494949'); } /* END offline & admin-login */ /* 12. START toggle shopping cart, wishlist, settings, account, filter */ .toggle_overlay { display:none; position:fixed; top:0; left:0; background:rgba(0,0,0,0.3); width:100%; height:100%; z-index:1300; } .toggle_cart, .toggle_wishlist, .toggle_account, .toggle_settings { text-align:left; position:fixed; top:0px; bottom: 0px; margin: auto; z-index:1301; overflow: auto; -webkit-overflow-scrolling: touch; max-width:100%; padding:50px 20px 70px 20px; background:#fafafa; color:#333; right:-440px; width:440px; display:none; transition: all 0.3s ease-in-out; opacity:0; } .admin_mode .toggle_cart, .admin_mode .toggle_wishlist, .admin_mode .toggle_account, .admin_mode .toggle_settings { padding-top:76px; } .toggle_cart.active, .toggle_wishlist.active, .toggle_account.active, .toggle_settings.active { display:block; opacity:1; right:0px; } .toggle_cart > .toggle_closer, .toggle_wishlist > .toggle_closer, .toggle_account > .toggle_closer, .toggle_settings > .toggle_closer { cursor:pointer; width:30px; height:30px; background: var(--toggle_menu_closer_bg, #eee); color: var(--toggle_menu_closer_color, #555); border-radius:4px; border:none; position:absolute; top:15px; right:20px; font-size:20px; line-height:30px; text-align:center; } .admin_mode .toggle_cart > .toggle_closer, .admin_mode .toggle_wishlist > .toggle_closer, .admin_mode .toggle_account > .toggle_closer, .admin_mode .toggle_settings > .toggle_closer { top:46px; } .toggle_closer { cursor:pointer; } .toggle_cart .infomessage, .toggle_wishlist .infomessage { margin: 10px 0 10px 0; } .toggle_cart .giftmessage { margin: 10px 0 10px 0; padding: 10px 10px 10px 50px; position:relative; border: none; font-size:14px; line-height:18px; font-weight:400; color:#296aab; background: #eaf2fa; } .toggle_cart .giftmessage::before { font-family: 'Font Awesome 6 Free'; font-weight:900; content: '\f06b'; position:absolute; width:40px; top:0px; left:0px; bottom: 0px; font-size:14px; line-height:20px; padding: 0px 0px; color:#eaf2fa; background:#296aab; align-items: center; justify-content: center; display: flex; } .toggle_headline { margin: 10px 0px; padding: 10px 10px; font-size:12px; line-height:20px; font-weight:700; color:#444; background:#eee; text-align:center; text-transform:uppercase; border-radius:4px; } .toggle_products { margin: 10px 0px; border-top: 1px solid #d9d9d9; } .toggle_products_item { display: flex; padding: 10px 0px; border-bottom: 1px solid #d9d9d9; } .toggle_products_image { width:50px; } .toggle_products_image_inner { position:relative; background:#fff; border: 1px solid #eee; padding: 5px; } .toggle_products_content { flex: 1; padding: 0px 15px; } .tpc_title { font-size: 14px; line-height: 18px; text-transform:uppercase; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } .tpc_title a { display:block; } .tpc_title a:hover { text-decoration:none; } .tpc_quantity { margin: 4px 0 0 0; font-size: 12px; line-height: 14px; font-weight:700; } .toggle_products_icon { width:30px; } .toggle_products_icon .cssButton { padding: 3px; height:30px; } .toggle_products_icon .cssButton .cssButtonText { display:none; } .toggle_products_icon .cssButton .cssButtonIcon { font-size:14px; } .toggle_action_1, .toggle_action_2 { margin: 10px 0px; } .toggle_action_1 a, .toggle_action_2 a { text-decoration:none; } .toggle_account #loginbox { border-top: 1px solid #ddd; padding: 10px 0 10px 0; } .toggle_account #loginbox input[type=text], .toggle_account #loginbox input[type=password], .toggle_account #loginbox input[type=email] { background-color: #fff; } .toggle_account ul.arrownav { border-top: 1px solid #d9d9d9; } .toggle_account ul.arrownav li { padding: 0px 0px; border-bottom: 1px solid #d9d9d9; } .toggle_account ul.arrownav li a { display: flex; align-items: center; padding: 0px 0px; font-size: 14px; line-height: 18px; color:#555; -webkit-tap-highlight-color: transparent; -webkit-overflow-scrolling: touch; } .toggle_account ul.arrownav li a::before { display:none; } .toggle_account ul.arrownav li a .icon { padding: 10px 0px 10px 0px; width:24px; text-align:center; } .toggle_account ul.arrownav li a .title { padding: 10px 10px; flex:1; font-weight:400; } .toggle_settings .settingsbox { border-top: 1px solid #d9d9d9; padding: 10px 0 10px 0; margin: 0 0 10px 0; } .toggle_settings .settingsbox .SumoSelect > .CaptionCont { background:#fff; } ul.arrownav { list-style-type:none; padding: 0 0 0 0; margin: 0px 0px 0px 0px; } ul.arrownav li { padding: 12px 0px 12px 0px; border-bottom: 1px solid #d9d9d9; } ul.arrownav li a { display:block; padding: 0 0 0 20px; position:relative; font-weight:400; } ul.arrownav li a:hover { text-decoration:none; } ul.arrownav li a::before { font-family: 'Font Awesome 6 Free'; content: "\f178"; font-weight:900; font-size:12px; position: absolute; top: 0px; left: 0px; } .menu_contact { } .menu_contact:before, .menu_contact:after { display:none !important; } .menu_contact_inner { padding: 50px 0 0 0; } .menu_contact_item { display:flex; margin: 0px 0px 0px 0px; padding: 10px 0px 10px 0px; border-bottom: 1px solid #d9d9d9; } .menu_contact_item .icon { width:40px; text-align:center; padding:0 !important; } .menu_contact_item .icon img { width:40px; height:40px; vertical-align:top; } .menu_contact_item .text { display:block; flex:1; padding: 0 0 0 15px; font-size:14px; line-height:22px; } .menu_contact_item .text strong { font-weight:700; } .menu_contact_item .text a { display:inline-block; padding: 0px; margin: 0px; font-size:14px; line-height:22px; text-decoration:none; border-bottom: 1px solid #999; } /* 12. END toggle shopping cart, wishlist, settings, account, filter */ /* 40. START carousel Bestseller box */ /* END carousel Bestseller box */ /* 41. START Janolaw.de (BASIC Template for AGB Hosting Content) */ .janolaw-absatz { font-size: 12px; margin: 8px 4px 4px 8px; } .janolaw-paragraph { font-size: 14px; font-weight: bold; text-align: center; margin: 16px 4px 4px 8px; } #janolaw-paragraph { font-size: 14px; font-weight: bold; text-align: center; margin: 16px 4px 4px 8px; } .janolaw-text { font-size: 12px; margin: 8px 4px 4px 8px; } .janolaw-adress { font-size: 12px; margin: 8px 4px 4px 8px; } .janolaw-block { font-size: 12px; margin: 8px 4px 4px 8px; } #janolaw-footer{ } #janolaw-body{ } /* END Janolaw.de */ /* 42. START sitemap */ .sitemap { -moz-column-count: 1; -moz-column-gap: 0px; -moz-column-rule: 1px solid #eee; -webkit-column-count: 1; -webkit-column-gap: 0px; -webkit-column-rule: 1px solid #eee; column-count: 1; column-gap: 0px; column-rule: 1px solid #eee; } @media screen and (min-width: 500px) { .sitemap { -moz-column-count: 2;-moz-column-gap: 60px; -webkit-column-count: 2; -webkit-column-gap: 60px; column-count: 2; column-gap: 60px; } } @media only screen and (min-width: 759px) { .sitemap { -moz-column-count: 3;-moz-column-gap: 60px; -webkit-column-count: 3; -webkit-column-gap: 60px; column-count: 3; column-gap: 60px; } } .sitemap > ul.nocolumnbreak { overflow: hidden; -webkit-column-break-inside: avoid; page-break-inside: avoid; -moz-column-break-inside:avoid; column-break-inside:avoid; break-inside: avoid; break-inside: avoid-column; margin-left:0px; margin-bottom:30px; list-style-type:none; display:inline-block; width:100%; } .nocolumnbreak { margin-bottom: 30px !important; } .sitemap > ul > li { float:left; width:100%; } .sitemap ul { list-style-type:none; margin-left:0px; } .sitemap ul > li.sitemap_header { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; font-size:13px; font-weight:600; line-height:31px; } .sitemap ul > li.sitemap_header > a { background:#f5f5f5; color:#7c2759; display:block; padding: 0px 5px; } .sitemap ul > li.sitemap_header a:hover { color:#333 !important; text-decoration:none !important; background: #f5f5f5 !important; } .sitemap ul li li { border-top: 1px solid #ddd; font-size:13px; font-weight:normal; line-height:31px; } .sitemap ul li li > a { background:#fff !important; color:#333; display:block; padding: 0px 5px; } .sitemap a:hover { color:#7c2759 !important; text-decoration:none !important; background: #f5f5f5 !important; } /* END sitemap */ /* 43. START product_reviews_info */ .pri_imagebox { float:left; width:100%; } .pri_big_image { position:relative; width:180px; min-height:180px; margin: 0px auto 0px auto; border:1px solid #eee; } .pri_big_image img { position:absolute; margin: auto; left:0px; right:0px; bottom:0px; top:0px; max-width:180px; height:auto; } @media only screen and (min-width: 500px) { .pri_imagebox { width: 180px; } } @media only screen and (min-width: 759px) { .pri_imagebox { width: 262px; } .pri_big_image { width:240px; min-height:240px; } .pri_big_image img { max-width:240px; } } .pri_zoomtext { line-height:13px; font-size:9px; padding:10px 0px; } .pri_content { float:right; width:100%; } @media screen and (min-width: 500px) { .pri_content { width: calc(100% - 220px);} } @media only screen and (min-width: 759px) { .pri_content { width: calc(100% - 300px);} } .pri_rating_text { float:left; display:inline-block; padding-right:5px; } .pri_rating_stars { float:left; display:inline-block; } .pri_rating_stars img { float:left; } .pri_rating_icons { display:inline-block; font-size:13px; line-height:17px; color:#ccc; padding: 0px 0px 0 0; } .pri_rating_icons .fas { padding: 0 1px 0 0; } .pri_rating_icons .full { color:#f1c40f; } /* END product_reviews_info */ /* 44. START Last viewed in account */ ul.historylist { list-style-type:none !important; margin-left: 0px !important; } ul.historylist li { border-bottom: 1px solid #ddd; padding: 15px 0px; } ul.historylist li.first { padding: 0px 0px 15px 0px; } .hl_image { float:left; width: 50px; height:50px; overflow:hidden; padding: 2px; border: 1px solid #ddd; position:relative; display:none; margin: 0px 20px 0px 0px; } @media only screen and (min-width: 400px) { .hl_image { display:block; } } .hl_image img { max-width: 50px; max-height:50px; position:absolute; margin: auto; left:0px; right:0px; top:0px; bottom:0px; } .hl_text { float:left; display:block; width:70%; } @media only screen and (min-width: 400px) { .hl_text { width: 49%; } } .hl_text_entry { display:block; padding: 0px 0px 8px 0px; } .hl_price { display:block; float:right; width:28%; text-align:right; font-weight:bold; } .hl_price .no_price { font-size:9px; line-height:11px; font-weight:normal; display:block; padding:0px 0 0 0; color:#666; } .hl_price .special_price { display:block; font-size:13px; line-height:19px; color:#e74c3c; } .hl_price .small_price { font-size:9px; font-weight:normal; line-height:11px; } .hl_price .graduated_price { display:block; } .hl_price .item_price { display:block; font-size:11px; } .hl_price .value_price { white-space:nowrap; } /* END Last viewed in account */ /* 45. START account cart and click buttons */ .account_row_payment, .account_row_shipping { padding:3px 0px; } .account_row_payment span, .account_row_shipping span { display:inline-block; width:23px; float:left; } ul.address_block { margin: 15px 0px 0px 0px !important; list-style-type:none !important; } ul.address_block li { border-top: 1px solid #ddd; margin-top:10px; padding-top: 10px; } ul.address_block li .address_check { float:left; display:inline-block; width:23px; } ul.address_block li .address_head { display:inline-block; font-weight:bold; } ul.address_block li .address { display:block; padding:5px 0px 0px 0px; } .account_edit_buttons { display:block; float:right; width:100px; margin: 10px 0px 10px 10px; text-align:right; } .accountbutton_row { margin: 5px 0px 5px 0px; } .accountbutton_history_row { margin: 5px 0px 0px 0px; } .accountbutton_historyinfo_row { margin: 10px 0px 0px 0px; } .account_actions_right { float:right; display:inline-block; text-align:right; } .accounthistory_actions { text-align:center; display:inline-block; padding-top:4px; } /* END account cart and click buttons */ /* 46. START miscellaneous */ /* START Subcontent navigation in content */ .subcontent { background: #f2f2f2; border: 1px solid #ccc; padding: 10px; width:100%; box-sizing: border-box; float: none; margin: 0px 0 20px 0px; max-width: 100%; } @media only screen and (min-width: 690px) { .subcontent { float:right; margin: 4px 0px 40px 40px; max-width:260px; } } .subcontent h4 a:hover { text-decoration:none; } .subcontent ul { margin: 0px 0px 0px 15px; list-style-type:square; } .subcontent ul li { } .subcontent ul li a { display:block; padding: 4px 0px; border-bottom: 1px solid #ccc; } .subcontent ul li a:hover { text-decoration:none; } /* END Subcontent navigation in content */ /* START tags */ .tags_block { margin: 0 0 15px 0; border-top: 1px solid #eee; } .tags_row { font-size:12px; line-height:20px; border-bottom: 1px solid #eee; } .tags_bg1 { background:#fafafa; } .tags_bg2 { background:#ffffff; } .tags_row .tags_options { float:left; width:25%; display:block; font-weight:bold; padding: 5px 10px 5px 0; box-sizing: border-box; } .tags_row .tags_options img { vertical-align: -3px; padding-left:4px; } .tags_options_tooltip { position:relative; z-index: 1; display:inline-block; } .tags_options_tooltip img { vertical-align:-3px; } .tags_options_tooltip .tags_options_tooltip_hover { position:absolute; bottom:20px; left:-95px; width:200px; background:#eee; border: 1px solid #ddd; display:none; font-size:12px; line-height:16px; font-weight:normal; padding:10px; } .tags_options_tooltip:hover .tags_options_tooltip_hover { display:block; } .tags_row .tags_values { float:left; width:75%; display:block; box-sizing: border-box; font-size:0px; } .tags_values_icon_row { font-size:12px; line-height:20px; float:left; padding:5px 0px 0px 0px; } .tags_values_icon { float:left; display:inline-block; height:20px; width:auto; margin:0 10px 5px 0; } .tags_values_icon img { float:left; height:20px; } .tags_values_icon a { display:block; } .tags_values_icon a:hover { text-decoration:none; } .tags_icons_tooltip { position:relative; display:block; } .tags_icons_tooltip img { vertical-align:-3px; } .tags_icons_tooltip .tags_icons_tooltip_hover { position:absolute; bottom:24px; left:-95px; width:200px; background:#eee; border: 1px solid #ddd; display:none; font-size:12px; line-height:16px; font-weight:normal; padding:10px; } .tags_icons_tooltip:hover .tags_icons_tooltip_hover { display:block; } .tags_values_text_row { font-size:12px; line-height:20px; float:left; padding:5px 0px 5px 0px; } .tags_values_name { position:relative; cursor:default; float:left; clear:left; } .tags_values_name_tooltip { border-bottom: 1px dashed #999; } .tags_values_desc_hover { position:absolute; bottom:20px; left:-95px; width:200px; background:#eee; border: 1px solid #ddd; display:none; font-size:12px; line-height:16px; font-weight:normal; padding:10px; } .tags_values_name:hover .tags_values_desc_hover { display:block; } .tags_values_info { position:relative; } .tags_values_info img { vertical-align:-3px; padding-left:4px; } .tags_values_diff { font-size:12px; line-height:20px; padding-left:1px; padding-right:4px; } /* END tags */ /* START Bannermanager */ .layout_banner_full { margin: 0px auto; overflow:hidden; width:100%; max-width:100%; } .layout_banner_small { margin: 0px auto; overflow:hidden; width:100%; max-width:1200px; } .layout_banner_row { display:flex; flex-wrap:wrap; margin: 0px -10px; } .layout_banner_row_50 { display:flex; flex-wrap:wrap; margin: 0px 0px; } .banner_item_100 { padding: 10px; width:100%; display:block; } .banner_item_100_inner { width:100%; display:block; position:relative; margin: 0; } .banner_item_100_inner:before { content: ""; display:block; padding-top: 27.272727%; /* height:40vw; max-height:680px; */ } @media only screen and (max-width: 600px) { .banner_item_100_inner:before { height:initial; max-height:initial; padding-top: 66.6666%; } } .banner_item_100_inner.small { width:100%; display:block; position:relative; margin: 0; } .banner_item_100_inner.small:before { content: ""; display:block; padding-top: 17.142857%; } .banner_item_100 a { position:absolute; top:0px; left:0px; width:100%; height:100%; display:block; } .banner_item_100 img { margin: auto; position: absolute; font-size:0px; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; object-fit:cover; z-index:1; } .banner_item_100 a .banner_overlay { transition: all 0.3s ease-in-out; display:block; position:absolute; background:rgba(0,0,0,0.0); width:100%; height:100%; z-index:2; } .banner_item_100 a:hover .banner_overlay { background:rgba(0,0,0,0.4); } .banner_item_100 a .banner_action { transition: all 0.3s ease-in-out; position:absolute; left:20px; bottom:20px; background:#000; color:#fff; text-transform:uppercase; padding: 10px 15px; border-radius:10px; font-size:16px; line-height:18px; z-index:3; opacity:1; } .banner_item_100 a:hover .banner_action { transition: all 0.3s ease-in-out; position:absolute; left:20px; bottom:20px; background:#de0a66; color:#fff; text-transform:uppercase; padding: 10px 15px; border-radius:10px; font-size:18px; line-height:20px; z-index:3; opacity:1; } .banner_item_50 { padding: 10px 10px; width:50%; display:block; } @media only screen and (min-width: 480px) { .banner_item_50 { width:33.3333%; } } @media only screen and (min-width: 680px) { .banner_item_50 { width:25%; } } @media only screen and (min-width: 985px) { .banner_item_50 { width:20%; } } .banner_item_50_inner { width:100%; display:block; position:relative; margin: 0; border-radius:50%; overflow:hidden; border: 2px solid #de0a66; } .banner_item_50_inner:before { content: ""; display:block; padding-top: 100%; } .banner_item_50 a { position:absolute; top:0px; left:0px; width:100%; height:100%; display:block; border-radius:50%; } .banner_item_50 img { margin: auto; position: absolute; font-size:0px; top: 0; left: 0; bottom: 0; right: 0; width: 90%; height: 90%; object-fit:cover; z-index:1; border-radius:50%; opacity:0.7; transition: all 0.3s ease-in-out; } .banner_item_50 a:hover img { filter: grayscale(0%); opacity:1.0; transform: scale(1.2); } .banner_item_50 a .banner_overlay { top: 0; left: 0; bottom: 0; right: 0; transition: all 0.3s ease-in-out; display:block; position:absolute; background:rgba(0,0,0,0.0); width:100%; height:100%; z-index:2; } .banner_item_50 a:hover .banner_overlay { background:rgba(0,0,0,0.0); } .banner_item_50 a .banner_action { transition: all 0.3s ease-in-out; position:absolute; left:20px; bottom:20px; background:#000; color:#fff; text-transform:uppercase; padding: 10px 15px; border-radius:10px; font-size:14px; line-height:16px; z-index:3; opacity:1; } .banner_item_50 a:hover .banner_action { transition: all 0.3s ease-in-out; position:absolute; left:20px; bottom:20px; background:#de0a66; color:#fff; text-transform:uppercase; padding: 10px 15px; border-radius:10px; font-size:16px; line-height:18px; z-index:3; opacity:1; } @media only screen and (min-width: 985px) { .banner_item_50 a .banner_action { font-size:16px; line-height:18px; } .banner_item_50 a:hover .banner_action { font-size:18px; line-height:20px; } } .layout_banner_row .banner_focus { position:absolute; display:block; width:100%; height:100%; top: 0; left: 0; bottom: 0; right: 0; z-index:1; } .layout_banner_row a:focus-visible .banner_focus { box-shadow: inset 0px 0px 0px var(--isfocus_width_global, 3px) var(--isfocus_color_global, rgba(0,187,255,1)); } .layout_slider { display:block; vertical-align:middle; text-align:center; position:relative; overflow:hidden; } .layout_slider:before { content: ""; display:block; padding-top: 31.818181%; /* height:40vw; max-height:680px; */ } @media only screen and (max-width: 600px) { .layout_slider:before { height:initial; max-height:initial; padding-top: 66.6666%; } } .layout_slider_inner { margin: auto; position: absolute; font-size:0px; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; } .layout_slider .slick-dotted { margin-bottom: 20px; } .layout_slider .slider_home { display:none; margin: auto; position: absolute; font-size:0px; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; } .layout_slider .slider_home div { margin: auto; position: absolute; font-size:0px; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; } .layout_slider a .slider_focus { position:absolute; display:block; width:100%; height:100%; top: 0; left: 0; bottom: 0; right: 0; } .layout_slider a:focus-visible .slider_focus { box-shadow: inset 0px 0px 0px var(--isfocus_width_global, 3px) var(--isfocus_color_global, rgba(0,187,255,1)); } .layout_slider img { height:100%; width:100%; object-fit:cover; } .layout_slider .slick-prev, .layout_slider .slick-next { display: block; top:0; bottom: 0px; margin:auto; font-size: 0; line-height: 0; position: absolute; width: 50px; height: 60px; cursor: pointer; color: transparent; border: none; outline: none; background-color: transparent; z-index: 2; transform:none; background-size:contain; background-repeat:no-repeat; background-position:center center; transition: all 0.3s ease-in-out; } .layout_slider .slick-prev, .layout_slider .slick-prev:hover { left:20px; background-image: url(img/icons/HGM-arrow_carousel-left-60K.png); background-size:18px 40px; border-radius:10px; opacity:1; } .layout_slider .slick-next, .layout_slider .slick-next:hover { right:20px; background-image: url(img/icons/HGM-arrow_carousel-right-60K.png); background-size:18px 40px; border-radius:10px; opacity:1; } .layout_slider .slick-prev, .layout_slider .slick-next { background-color: rgba(255,255,255,0.0); } .layout_slider:hover .slick-next, .layout_slider:hover .slick-prev { background-color: rgba(255,255,255,0.7); } .layout_slider .slick-next:hover, .layout_slider .slick-prev:hover { background-color: rgba(255,255,255,0.7); } .layout_slider .slick-prev:hover, .layout_slider .slick-next:hover { } .layout_slider .slick-prev:before, .layout_slider .slick-next:before { display:none; } .content_banner { margin: 20px 0 20px 0; } .content_banner img { float:left; width:100%; height:auto; } /* END Bannermanager */ /* START autocomplete */ .suggestionsBox { position:absolute; top:50px; right:0; margin:0px; left:0px; background:#fafafa; color:#333; z-index:1100; box-sizing: border-box; padding: 10px 10px 10px 10px; border-radius:8px; text-align:left; } .suggestionList { margin:0px; padding:0px; max-height:calc(100vh - 100px); overflow:auto; padding-right:0px; box-sizing: border-box; } .suggestionList li { border-bottom:1px solid #ccc; list-style:none; font-size:13px; line-height:17px; } .suggestionList li:hover { text-decoration:none; } .suggestionList li a.autocomplete { display:flex; padding:5px 0px; text-decoration: none; box-sizing: border-box; width:100%; } .suggestionList li a.autocomplete .autocomplete_image { float:left; display:block; width:50px; height:50px; overflow:hidden; box-sizing: border-box; border: 1px solid #ddd; position:relative; } .suggestionList li a.autocomplete .autocomplete_image img { position:absolute; top:0px; left:0px; right:0px; bottom: 0px; margin: auto; height:80%; width:80%; object-fit:contain; } .autocompletecloser { cursor:pointer; } #autocomplete_pagination { margin: 5px 0 0 0; position:relative; } #autocomplete_pagination li { float:left; border: 0; } #autocomplete_prev { cursor:pointer; padding:5px; box-sizing: border-box; width:15%; text-align:left; font-size:15px; } #autocomplete_next { cursor: pointer; padding: 5px; box-sizing: border-box; width: 15%; float: right !important; text-align: right; font-size:15px; } #autocomplete_count { padding: 5px; width: 70%; box-sizing: border-box; text-align: center; font-size:11px; font-weight:bold; } .autocomplete_error { padding:6px 0px 11px; display:inline-block; text-align:center; width:100%; } .ac_text { flex:1; padding: 0px 0px 0px 15px; color:#555; font-weight:400; text-transform:uppercase; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .suggestionList li:hover .ac_text { color:#de0a66; } .ac_price { display:block; color:#707070; float:right; width:70px; text-align:right; font-weight:bold; padding: 2px 0px; font-size:14px; line-height:14px; } .ac_price_inner { display:flex; } .ac_price .standard_price { display:block; padding: 0px 0px; color:#707070; font-weight:400; } .ac_price .standard_price .sup { margin: -2px 0 0 1px; display: inline-block; position: relative; vertical-align: top; font-size: 14px; line-height: 14px; } .ac_price .new_price { padding: 0px 0px; display:block; font-weight:400; color:#de0a66; white-space:nowrap; margin: 3px 0 0 0; } .ac_price .new_price .sup { margin: -2px 0 0 1px; display: inline-block; position: relative; vertical-align: top; font-size: 12px; line-height: 12px; } .ac_price .old_price { padding: 0px 0px; position:relative; font-size:14px; font-weight:400; color:#707070; white-space:nowrap; } .ac_price .old_price .sup { margin: 0px 0 0 1px; display: inline-block; position: relative; vertical-align: top; font-size: 12px; line-height: 12px; } .ac_price .old_price:before { content:''; position:absolute; left: 3px; right: 3px; height: 1px; background: #999; -moz-transform: rotate(162deg); -ms-transform: rotate(162deg); -o-transform: rotate(162deg); -webkit-transform: rotate(162deg); transform: rotate(162deg); bottom: 0px; top:0px; margin:auto; } .ac_price .small_price { font-size:10px; font-weight:400; line-height:10px; } .ac_vpe { margin: 3px 0 0 0; text-align:right; padding: 0px 0px 0 0; font-size:10px; line-height:12px; color:#666; font-weight:normal; display:block; } @media only screen and (min-width: 400px) { } @media only screen and (min-width: 600px) { } /* END autocomplete */ .external_links a:after { font-family: 'Font Awesome 6 Free'; content: '\f35d'; font-weight: 900; font-size: 9px; line-height:9px; margin: 0 0 0 5px; vertical-align:2px; } a.color_more { text-transform:none; color:#333; text-decoration:none; font-weight:600; font-size:12px; } a.color_more:hover { color:#333; text-decoration:none; } /* END miscellaneous */ /* 47. START CSS Buttons */ /* 23. START postions for CSS Buttons */ .button_row { margin: 15px -5px 0px -5px; display: flex; flex-wrap: wrap; flex-direction:column; } @media only screen and (min-width: 520px) { .button_row { flex-direction:row; } } .button_row > .br_left { display: flex; flex: 1; flex-wrap: wrap; justify-content: flex-start; } .button_row > .br_right { display: flex; flex: 1; flex-wrap: wrap; justify-content: flex-end; } .button_row a:hover { text-decoration:none; } .br_btn_0 { padding:5px; width:100%; } .br_btn_1 { padding:5px; min-width:100%; } @media only screen and (min-width: 520px) { .br_btn_1 { min-width:250px; } } .br_btn_checkout { padding:5px; width:100%; max-width:480px; } .br_btn_checkout .apms_form_inner { max-width:480px; width:100% !important; } .br_btn_checkout .apms_form_button { min-width: 100% !important; max-width:480px !important; } .br_btn_checkout .apms_form_button_inner { min-height: 44px !important; } .br_btn_alternate { display:block; width:100%; text-align:center; height:20px; position:relative; } .br_btn_alternate:before { content: ''; display:block; height:1px; border-top:1px solid #707070; position:absolute; top:1px; left:10%; right:10%; bottom: 0px; margin: auto; } .br_btn_alternate span { position:relative; z-index:1; display:inline-block; vertical-align:top; background:#e4e4e4; font-size:10px; line-height:20px; font-weight:400; color:#707070; padding: 0px 10px; text-transform:uppercase; } /* 23. END postions for CSS Buttons */ /* Globals for CSS Buttons */ .cssButton { position:relative; font-family: 'Encode Sans', sans-serif; display:flex; align-items:center; justify-content:center; width:100%; padding: 8px 5px; font-weight:400; text-transform:none; white-space:nowrap; text-decoration:none; height:40px; border-radius:10px; transition: all 0.3s ease-in-out; } .cssButtonText { font-size:16px; line-height:24px; text-transform:uppercase; vertical-align:top; padding: 0px 3px; text-decoration:none; } .cssButtonIcon { font-size:16px; line-height:24px; vertical-align:top; padding: 0px 3px; } .cssButtonIcon .fa-regular, .cssButtonIcon .fa-solid { vertical-align:top; line-height:24px; } .cssButton button { position:absolute; left:0px; top:0px; width:100%; height:100%; color:transparent; background:transparent; border: none; cursor:pointer; transition: all 0.3s ease-in-out; opacity: 1; background:transparent; border:none !important; border-radius:4px; transition: all 0.3s ease-in-out; outline:none; } .cssButton:hover { opacity:0.8; text-decoration:none; } /* Globals for CSS Buttons */ /* Colors for CSS Buttons */ /* Black Buttons */ .cssButtonColor1 { text-decoration:none; border:1px solid #333; background-color:#333; color:#ffffff; } .cssButtonColor1:hover { border:1px solid #707070; background-color:#707070; text-decoration:none !important; } /* Magenta Buttons */ .cssButtonColor2 { text-decoration:none; border:1px solid #de0a66; background-color:#de0a66; color:#ffffff; } .cssButtonColor2:hover { border:1px solid #707070; background-color:#707070; text-decoration:none !important; } /* Transparent Buttons with Border */ .cssButtonColor3 { background:#fafafa; border: 1px solid #c6c6c6; color:#555; } .cssButtonColor3:hover { background:#fafafa; color:#222; text-decoration:none !important; } /* Green Buttons */ .cssButtonColor4 { border-radius:2px; border:1px solid #528a50; text-decoration:none; background-color:#528a50; color:#ffffff; } .cssButtonColor4:hover { opacity:0.8; text-decoration:none !important; } /* Transparent Icons no Border */ .cssButtonColor5 { background:#ccc; color:#333; } .cssButtonColor5:hover { opacity:0.8; text-decoration:none !important; } /* Yellow Paypal Express Buttons */ .cssButtonColor6 { border-radius:2px; border:1px solid #d19c20; text-decoration:none; background:-moz-linear-gradient( center top, #ffc848 15%, #fbba22 90% ); background:-ms-linear-gradient( top, #ffc848 15%, #fbba22 90% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc848', endColorstr='#fbba22'); background:-webkit-gradient( linear, left top, left bottom, color-stop(15%, #ffc848), color-stop(90%, #fbba22) ); background-color:#ffc848; color:#222; display:inline-block; text-shadow:1px 1px 0px #ffd97e; -webkit-box-shadow:inset 1px 1px 0px 0px #ffe3a1; -moz-box-shadow:inset 1px 1px 0px 0px #ffe3a1; box-shadow:inset 1px 1px 0px 0px #ffe3a1; height:32px; } .cssButtonColor6:hover { background:-moz-linear-gradient( center top, #fbba22 15%, #ffc848 90% ); background:-ms-linear-gradient( top, #fbba22 15%, #ffc848 90% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbba22', endColorstr='#ffc848'); background:-webkit-gradient( linear, left top, left bottom, color-stop(15%, #fbba22), color-stop(90%, #ffc848) ); background-color:#fbba22; color:#222; text-decoration:none !important; } .cssButtonColor6 .color-paypal0 { font-size:10px; line-height:16px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; color:#013088; padding: 0 5px 0 0; vertical-align:middle; } .cssButtonColor6 .color-paypal1 { font-size:18px; line-height:16px; font-family: 'Encode Sans', sans-serif; font-style:italic; font-weight:700; color:#013088; } .cssButtonColor6 .color-paypal2 { font-size:18px; line-height:16px; font-family: 'Encode Sans', sans-serif; font-style:italic; font-weight:700; color:#019CDE; } .cssButtonColor7 { background:transparent; color:#fff; } .cssButtonColor7:hover { color:#fff; text-decoration:none !important; } /* Small account action text-buttons */ .cssButtonColor8 { text-transform:none; font-weight:600; padding: 0px; margin: 0px; height:auto; text-decoration:none; border: none;; color: #333; } .cssButtonColor8 .cssButtonText { font-size: 12px; line-height: 16px; text-transform: none; vertical-align: top; padding: 0px 3px; text-decoration:none; border-bottom: 1px solid #555; } .cssButtonColor8 .cssButtonIcon { font-size: 12px; line-height: 16px; vertical-align: top; padding: 0px 0px; } .cssButtonColor8:hover { opacity:0.8; text-decoration:none !important; border:none; background:none; } .cssButtonColor9 { text-decoration:none; border:1px solid #75C9D5; background-color:#75C9D5; color:#ffffff; } .cssButtonColor9:hover { border:1px solid #707070; background-color:#707070; text-decoration:none !important; } /* 24. END CSS Buttons */ /* Positions for CSS Buttons */ /* Box add_a_quickie & newsletter */ .cssButtonPos1 { position:absolute; right:0px; top:0px; width:50px; } .cssButtonPos1 .fa-solid { font-size:16px; vertical-align:bottom; } .cssButtonPos1 .cssButton { height:32px; } /* Box search */ .cssButtonPos2 { width:80px; height:35px; } /* Box login */ .cssButtonPos3 { float:right; width:100px; } /* Single Button 130 */ .cssButtonPos4 { min-width: 130px; } /* Edit Buttons adress_book */ .cssButtonPos5 { display:inline-block; margin: 0 0 0 10px; width:35px; } .cssButtonPos5 .fa-solid, .cssButtonPos5 .fa-regular { font-size:16px; vertical-align:middle; } /* Small Cart Buttons account, account_history, account_history_info */ .cssButtonPos6 { float:left; width:44px; display:block; margin: 0 0 5px 5px; } .cssButtonPos6 .fa-solid, .cssButtonPos6 .fa-regular { font-size:16px; vertical-align:bottom; } /* More than one Button in one line account_history_info & shopping_cart */ .cssButtonPos7 { float:left; margin: 0px 5px 5px 0px; min-width: 130px; } .cssButtonPos8 { float:right; margin: 0px 0px 5px 5px; min-width: 165px; } .cssButtonPos9 { float:left; margin: 0px 5px 5px 0px; min-width: 150px; } /* Add to basket Button product_info */ .cssButtonPos10 { display:block; width:100%; margin: 0 0 5px 0; } /* Small Buttons wishlist */ .cssButtonPos11 { width:50px; display:inline-block; margin: 0 2px 0 2px; } .cssButtonPos11 .fa-solid { font-size:16px; vertical-align:-2px; } /* Big Buttons checkout */ .cssButtonPos12 { } .cssButtonPos12 .cssButtonText { font-size: 20px; } .cssButtonPos12 .cssButtonIcon { font-size: 18px; } /* Small Cart Buttons delete */ .cssButtonPos13 { display:block; margin: 0 0 0px 0px; } .cssButtonPos13 .cssButton { padding: 5px 5px; } .cssButtonPos13 .fa-solid { font-size:15px; vertical-align:bottom; } /* Checkout Buttons Shipping & Payment */ .cssButtonPos14, .cssButtonPos15 { max-width:initial; display:inline-block; width:100%; } @media only screen and (min-width: 500px) { .cssButtonPos14 { max-width:220px; } .cssButtonPos15 { max-width:220px; } } .cssButtonPos14 .cssButton, .cssButtonPos15 .cssButton { font-size: 16px; line-height: 20px; padding: 10px 5px; } /* END CSS Buttons */ /* 48. START CSS Write reviews */ .show_rating { unicode-bidi: bidi-override; direction: rtl; display:inline-block; padding: 0px 15px; position:relative; bottom:-1px; } .show_rating input { position: absolute; left: -999999px; } .show_rating label { display: inline-block; font-size: 0; padding: 0px 1px; } .show_rating > label:before { font-family: 'Font Awesome 6 Free'; font-size:20px; line-height:20px; position: relative; display: block; content: "\f005"; font-weight: 900; color: #ccc; background: #ccc; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .show_rating > label:hover:before, .show_rating > label:hover ~ label:before, .show_rating > label.selected:before, .show_rating > label.selected ~ label:before { color: #f1c40f; background: #f1c40f; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* END CSS Write reviews */ /* 49. START Custom checkbox & radio */ /* 50. START New address book handling */ #address_block_new { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; list-style-type:none; margin: 15px -10px 0 -10px; padding: 0px; } #address_block_new > li { order:2; float:left; width:100%; box-sizing:border-box; padding: 0px 10px; margin: 0px; } @media only screen and (min-width: 759px) { #address_block_new > li { width:50%; } } #address_block_new > li.selected { order:1; } #address_block_new > li.selected .address_inner { background:#eee; padding: 15px 10px; } #address_block_new > li .address_inner { border-top: 1px solid #ddd; padding: 15px 10px; box-sizing:border-box; height:100%; } ol#address_block_new li label { font-weight: 700; } ol#address_block_new li label .address { display: block !important; padding: 5px 0px 0px 0px !important; font-weight: 400 !important; } #address_block_new form { position:relative; padding: 0px 120px 0px 0px; } #address_block_new .address_actions { overflow:hidden; position:absolute; top:0px; right:0px; width:100px; text-align:right; } #address_block_new .address_inner_block { position:relative; padding: 0px 120px 0px 0px; } /* END New address book handling */ /* START reviews_note */ .box_reviews_note { font-size:9px; line-height:13px; font-weight:400; margin: 0 0 10px 0; } .headline_reviews_note { float:none; display:block; font-size:10px; line-height:12px; margin: 12px 0 0 0; font-weight:400; } @media only screen and (min-width: 850px) { .headline_reviews_note { float:right; display:inline-block; } } .reviews_note_full { display:block; font-size:10px; line-height:12px; margin: -10px 0 20px 0; font-weight:400; } .reviews_note_detail { display:block; font-size:10px; line-height:12px; margin: 0px 0 10px 0; font-weight:400; } /* END reviews_note */ /* Startseite */ .banner_triptychon { overflow:hidden; } .banner_triptychon_row { margin: 0px -20px; display:flex; flex-wrap:wrap; } .banner_triptychon_item { width:50%; padding: 20px 20px; } @media only screen and (min-width: 850px) { .banner_triptychon_item { width:25%; padding: 0px 20px; } } .banner_triptychon_item_inner { display:flex; flex-direction:column; height:100%; } .banner_triptychon_item_inner .image { width:100%; text-align:center; } .banner_triptychon_item_inner .image img { width:100%; max-width: 180px; height:auto; vertical-align:top; } @media only screen and (min-width: 850px) { .banner_triptychon_item_inner .image img { max-width: 240px; } } .banner_triptychon_item_inner .text { display:flex; text-align:center; align-items:center; height:100%; width:100%; color:#000; font-size:14px; line-height:22px; } .banner_bekannt { overflow:hidden; } .banner_bekannt_row { margin: 0px -20px; display:flex; flex-wrap:wrap; } .banner_bekannt_item { width:100%; padding: 0px 20px; } .banner_bekannt_item_inner { display:block; } .banner_bekannt_item_inner .image { width:100%; } .banner_bekannt_item_inner .image img { width:100%; height:auto; vertical-align:top; } .home_chevalier_headline { text-transform:uppercase; font-weight:800; text-align:center; color:#000; font-size:18px; line-height:22px; letter-spacing:4px; margin: 0 0 20px 0; } @media only screen and (min-width: 850px) { .home_chevalier_headline { font-size:24px; line-height:28px; margin: 0 0 30px 0; } } .home_chevalier_headline > span { display:inline-block; padding: 0px 30px; position:relative; } @media only screen and (min-width: 850px) { .home_chevalier_headline > span { padding: 0px 35px; } } .home_chevalier_headline > span:before, .home_chevalier_headline > span:after { content:''; position:absolute; top:1px; width:20px; height:20px; background-image: url(img/icons/HGM-heart_full-pink.png); background-repeat:no-repeat; background-size:cover; background-color:transparent; } @media only screen and (min-width: 850px) { .home_chevalier_headline > span:before, .home_chevalier_headline > span:after { width:24px; height:24px; top:2px; } } .home_chevalier_headline > span.yellow:before, .home_chevalier_headline > span.yellow:after { background-image: url(img/icons/HGM-heart_full-yellow.png); } .home_chevalier_headline > span:before { left:0px; } .home_chevalier_headline > span:after { right:0px; } .home_chevalier_subline { text-align:center; font-size:16px; line-height:20px; margin: -10px 0 30px 0; color:#707070; } .carousel_auszeichnungen { padding: 0px 60px; } .slider_auszeichnungen { } .sa_item { width:100%; display:inline-block; padding: 0px 5%; vertical-align:top; } .sa_item_inner { text-align:center; text-align:center; position:relative; } .sa_item_inner img { width:100%; max-height:200px; height:100%; object-fit:contain; } .carousel_reviews { padding: 0px 60px; } .slider_reviews { } .slider_reviews .slick-track { display: flex; align-items: center; } .sr_item { width:100%; display:inline-block; padding: 0px 20px; } .sr_item_inner { text-align:center; position:relative; display:flex; align-items:center; justify-content:center; flex-direction:column; } .sr_stars { display:flex; justify-content:center; } .sr_stars img { width:28px; height:28px; margin: 0px 4px; vertical-align:top; opacity:0.5; } .slick-center .sr_stars img { opacity:1; } .sr_text { padding: 10px 0px 20px 0px; font-size:14px; line-height:20px; color:#666; transition: all 0.3s ease-in-out; } .slick-center .sr_text { padding: 20px 0px 30px 0px; font-size:16px; line-height:24px; color:#000; } .sr_author { font-size:14px; line-height:20px; color:#666; transition: all 0.3s ease-in-out; opacity:0.5; } .slick-center .sr_author { opacity:1; } .carousel_bestseller, .carousel_enhancer { /* overflow:hidden; */ padding: 0px 60px; } .carousel_advantages { padding: 0px 60px; } .slider_bestseller { } .slider_enhancer { } .slider_bestseller .listingbox, .slider_enhancer .listingbox { margin: 0px; } .slider_advantages .slick-prev, .slider_advantages .slick-next, .slider_bestseller .slick-prev, .slider_bestseller .slick-next, .slider_enhancer .slick-prev, .slider_enhancer .slick-next, .slider_auszeichnungen .slick-prev, .slider_auszeichnungen .slick-next, .slider_reviews .slick-prev, .slider_reviews .slick-next { display: block; top:0; bottom: 0px; margin:auto; font-size: 0; line-height: 0; position: absolute; width: 40px; height: 60px; cursor: pointer; color: transparent; border: none; outline: none; background-color: transparent; z-index: 2; transform:none; background-size:18px 40px; background-repeat:no-repeat; background-position:center center; } .slider_advantages .slick-prev, .slider_advantages .slick-prev:hover, .slider_bestseller .slick-prev, .slider_bestseller .slick-prev:hover, .slider_enhancer .slick-prev, .slider_enhancer .slick-prev:hover, .slider_auszeichnungen .slick-prev, .slider_auszeichnungen .slick-prev:hover, .slider_reviews .slick-prev, .slider_reviews .slick-prev:hover { left:-65px; background-image: url(img/icons/HGM-arrow_carousel-left-60K.png); } .slider_advantages .slick-next, .slider_advantages .slick-next:hover, .slider_bestseller .slick-next, .slider_bestseller .slick-next:hover, .slider_enhancer .slick-next, .slider_enhancer .slick-next:hover, .slider_auszeichnungen .slick-next, .slider_auszeichnungen .slick-next:hover, .slider_reviews .slick-next, .slider_reviews .slick-next:hover { right:-65px; background-image: url(img/icons/HGM-arrow_carousel-right-60K.png); } .slider_advantages .slick-prev:hover, .slider_advantages .slick-next:hover, .slider_bestseller .slick-prev:hover, .slider_bestseller .slick-next:hover, .slider_enhancer .slick-prev:hover, .slider_enhancer .slick-next:hover, .slider_auszeichnungen .slick-prev:hover, .slider_auszeichnungen .slick-next:hover, .slider_reviews .slick-prev:hover, .slider_reviews .slick-next:hover { opacity:0.7; } .slider_advantages .slick-prev:before, .slider_advantages .slick-next:before, .slider_bestseller .slick-prev:before, .slider_bestseller .slick-next:before, .slider_enhancer .slick-prev:before, .slider_enhancer .slick-next:before, .slider_auszeichnungen .slick-prev:before, .slider_auszeichnungen .slick-next:before, .slider_reviews .slick-prev:before, .slider_reviews .slick-next:before { display:none; } .ordercontainer_freeshipping { margin: 10px 0 5px 0; } .ocf_text { font-size:14px; line-height:20px; } .ocf_text_free { color:#de0a66; font-weight:700; font-size:14px; line-height:20px; } .ocf_bar { overflow:hidden; margin: 8px 0 0 0; background:#ccc; border-radius:4px; height:10px; position:relative; width:100%; } .ocf_bar_inner { display:inline-block; background:#de0a66; border-radius:4px; height:10px; position:absolute; width:auto; } .tbl_versand { margin: 0 0 20px 0; } .tbl_versand_prioe { text-align:right; } #session_layer { display:none; position:fixed; background:rgba(0,0,0,0.3); height:100vh; width:100vw; z-index:9100; padding: 30px 0px; top:0px; } .session_layer_outer { position: fixed; top: 20%; left: 50%; transform: translate(-50%, 0%); z-index:9101; box-sizing:border-box; margin: 0px auto; color:#333; background:#fff; padding: 0px; width:86%; max-width:1000px; font-size:16px; line-height:22px; max-height: 80vh !important; overflow:hidden; border: 5px solid #fff; border-radius:8px; } .session_layer_inner { position:relative; width:100%; height:100%; max-height: 480px !important; } #session_layer_closer { position:absolute; top:5px; right:21px; width:26px; height:26px; font-size:26px; line-height:26px; text-align:center; cursor:pointer; color:#fff; } .session_layer_content { display:block; width:100%; } .session_layer_content img { width:100%; max-width:100%; vertical-align:top; border-radius:8px; } .shopmodule-gift-description { margin: 20px auto; width:100%; text-align:center; max-width:985px; } .gallery_headline { font-weight:700; margin: 15px 0px 5px 0px; } .gallery { } .gallery_row { display:flex; flex-wrap:wrap; margin: 0px -5px; } .gallery_item { padding: 5px; width:33.3333%; } .gallery_item_inner { } .gallery_item_inner a { display:block; } .gallery_item_inner img { width:100%; height:auto; vertical-align:top; } #session_layer_gift { display:none; position:fixed; background:rgba(0,0,0,0.3); height:100vh; width:100vw; z-index:9100; padding: 30px 0px; top:0px; } .session_layer_gift_outer { position: fixed; top: 20%; left: 50%; transform: translate(-50%, 0%); z-index:9101; box-sizing:border-box; margin: 0px auto; color:#333; background:#fff; padding: 0px; width:86%; max-width:1000px; font-size:16px; line-height:22px; max-height: 80vh !important; overflow:hidden; border: 5px solid #fff; border-radius:8px; } .session_layer_gift_inner { position:relative; width:100%; height:100%; max-height: 480px !important; } #session_layer_gift_closer { position:absolute; top:5px; right:21px; width:26px; height:26px; font-size:26px; line-height:26px; text-align:center; cursor:pointer; color:#fff; } .session_layer_gift_content { display:block; width:100%; } .session_layer_gift_content img { width:100%; max-width:100%; vertical-align:top; border-radius:8px; } .carousel_advantages { height:60px; position:relative; } .slider_advantages {display:none; } .slider_advantages { position:absolute !important; top:0px; bottom:0px; left:60px; right:60px; margin: auto; width:calc(100% - 120px); height:100%; } .advantagebox { padding: 10px 10px; display:flex; align-items:center; justify-content:center; text-align:center; } .ab_inner { display:flex; align-items:center; } @media only screen and (max-width: 500px) { .ab_inner { display:inline-flex; } } .ab_inner_icon { width:40px; height:40px; display:flex; align-items:center; justify-content:center; } .ab_inner_icon img { vertical-align:top; width:100%; height:auto; } .ab_inner_text { flex:1; padding: 0 0 0 10px; font-size:14px; line-height:16px; text-align:left; } /* Slider Startseite */ .carousel_slider { margin: 0px 0px 0px 0px; position:relative; display:block; vertical-align:middle; position:relative; max-height:680px; } .carousel_slider:before { content: ""; display:block; padding-top: calc(33.3333% + 90px); } @media only screen and (max-width: 760px) { .carousel_slider:before { padding-top: 96.3%; } } .slider_home {display:none; } .slider_home { position:absolute !important; top:0px; bottom:0px; left:0px; right:0px; margin: auto; width:100%; height:100%; } .carousel_slider div { height:100%; } .carousel_slider .slick-dotted { margin: 0 0 40px 0; } .carousel_slider img { position:absolute; top:0px; left:0px; right:0px; bottom:0px; width:100%; height:100%; object-fit:cover; z-index:1; } .slider_item a { display:block; width: 100%; height:100%; } .slider_item a:hover { text-decoration:none !important; } .slider_item a .slider_focus { position:absolute; display:block; width:100%; height:100%; top: 0; left: 0; bottom: 0; right: 0; } .slider_item a:focus-visible .slider_focus { box-shadow: inset 0px 0px 0px var(--isfocus_width_global, 3px) var(--isfocus_color_global, rgba(0,187,255,1)); } .slider_item_flex { display:flex; flex-direction:column-reverse; background:#fff; width:100%; height:100%; overflow:hidden; } @media only screen and (min-width: 760px) { .slider_item_flex { flex-direction:row; } } .slider_item_text { width:100%; display:flex; align-items:flex-end; justify-content:flex-end; background:#ccc; } @media only screen and (min-width: 760px) { .slider_item_text { width:50%; } } .slider_item_image { flex:1; position:relative; z-index:0; } .slider_item_image:before { box-sizing:border-box; content: ""; display:block; padding-top: 66.6666%; } @media only screen and (min-width: 760px) { .slider_item_image:before { padding-top: 66.6666%; } } .slider_content { display:block; padding: 20px 20px 20px 20px; flex-direction:column; width:100%; max-width:100%; } @media only screen and (min-width: 760px) { .slider_content { padding: 20px 20px 3vw 90px; max-width:790px; } } @media only screen and (min-width: 1300px) { .slider_content { padding: 20px 20px 60px 90px; max-width:790px; } } .slider_title { display:block; font-family: 'Encode Sans Condensed', sans-serif; font-size:5.6vw; line-height:6.0vw; font-weight:500; color:#333; } @media only screen and (min-width: 760px) { .slider_title { font-size:3.6vw; line-height:4.0vw; } } @media only screen and (min-width: 1300px) { .slider_title { font-size:54px; line-height:60px; } } .slider_text { font-family: 'Encode Sans', sans-serif; display:block; padding: 1.8vw 0 4.2vw 0; font-size:4.1vw; line-height:4.1vw; font-weight:400; color:#333; } @media only screen and (min-width: 760px) { .slider_text { padding: 0.8vw 0 3.2vw 0; font-size:2.1vw; line-height:2.1vw; } } @media only screen and (min-width: 1300px) { .slider_text { padding: 10px 0 40px 0; font-size:30px; line-height:30px; } } .slider_action { font-family: 'Encode Sans Condensed', sans-serif; display:inline-block; padding:2.0vw 3.1vw; border-radius:12px; font-size:4.1vw; line-height:4.1vw; font-weight:500; text-transform:uppercase; background:#333; color:#ccc; transition: all 0.3s ease-in-out; } @media only screen and (min-width: 760px) { .slider_action { padding:1.0vw 2.1vw; font-size:2.1vw; line-height:2.1vw; } } @media only screen and (min-width: 1300px) { .slider_action { padding:15px 30px; font-size:30px; line-height:30px; } } .carousel_slider:hover .slider_action { opacity:0.7; } .carousel_slider .slick-prev, .carousel_slider .slick-next { display: block; top:0; bottom: 0px; margin:auto; font-size: 0; line-height: 0; position: absolute; width: 50px; height: 60px; cursor: pointer; color: transparent; border: none; outline: none; background-color: transparent; z-index: 2; transform:none; background-size:contain; background-repeat:no-repeat; background-position:center center; transition: all 0.3s ease-in-out; } .carousel_slider .slick-prev, .carousel_slider .slick-prev:hover { left:20px; background-image: url(img/icons/HGM-arrow_carousel-left-60K.png); background-size:18px 40px; border-radius:10px; opacity:1; } .carousel_slider .slick-next, .carousel_slider .slick-next:hover { right:20px; background-image: url(img/icons/HGM-arrow_carousel-right-60K.png); background-size:18px 40px; border-radius:10px; opacity:1; } .carousel_slider .slick-prev, .carousel_slider .slick-next { background-color: rgba(255,255,255,0.0); } .carousel_slider:hover .slick-next, .carousel_slider:hover .slick-prev { background-color: rgba(255,255,255,0.7); } .carousel_slider .slick-next:hover, .carousel_slider .slick-prev:hover { background-color: rgba(255,255,255,0.7); } .carousel_slider .slick-prev:hover, .carousel_slider .slick-next:hover { } .carousel_slider .slick-prev:before, .carousel_slider .slick-next:before { display:none; } /* helper */ /* *:focus { border: 5px solid red !important; background:blue !important; color: green !important; box-shadow: 2px 1px 0px 6px rgba(79,84,239,1) inset !important; box-shadow: 2px 1px 0px 6px rgba(79,84,239,1) !important; } *:focus-visible { border: 5px solid red !important; background:blue !important; color: green !important; box-shadow: 2px 1px 0px 6px rgba(79,84,239,1) inset !important; box-shadow: 2px 1px 0px 6px rgba(79,84,239,1) !important; } */ /* helper */ *:focus-visible { box-shadow: inset 0px 0px 0px var(--isfocus_width_global, 3px) var(--isfocus_color_global, rgba(0,187,255,1)); outline:none; border-radius:4px; opacity:1 !important; } .menu_items > li.level1 > a:focus-visible { box-shadow: inset 0px 0px 0px var(--isfocus_width_mainmenu_level1, 3px) var(--isfocus_color_mainmenu_level1, rgba(0,187,255,1)); } .gallery_item_inner *:focus-visible, .col_logo *:focus-visible, .content_text *:focus-visible, .pd_heading *:focus-visible, .pd_shippingrow *:focus-visible, .pd_offer *:focus-visible, .pd_description *:focus-visible, .tags_bar_headline *:focus-visible, .col_logo_back *:focus-visible, .gift_text_row *:focus-visible, .of_productname *:focus-visible, .mod_copyright *:focus-visible, .copyright *:focus-visible, .content_box_social *:focus-visible, .rb_content *:focus-visible, .breadcrumb *:focus-visible, .infomessage *:focus-visible, .errormessage *:focus-visible, .successmessage *:focus-visible, .box_greeting *:focus-visible, .listingbox *:focus-visible, .listingrow *:focus-visible, .cat_description *:focus-visible, a.color_more:focus-visible, a.arrow:focus-visible { box-shadow: 0px 0px 0px var(--isfocus_width_global, 3px) var(--isfocus_color_global, rgba(0,187,255,1)); } .SumoSelect:focus-visible { box-shadow: none; outline:none; border:none; } .SumoSelect:focus-visible .CaptionCont { box-shadow: inset 0px 0px 0px var(--isfocus_width_global, 3px) var(--isfocus_color_global, rgba(0,187,255,1)); outline:none; } .cus_radio input[type="radio"]:focus-visible { box-shadow: none; } .cus_radio input[type="radio"]:focus-visible ~ label:before, .cus_radio input[type="radio"]:focus-visible:checked ~ label:before { box-shadow: 0px 0px 0px var(--isfocus_width_global, 3px) var(--isfocus_color_global, rgba(0,187,255,1)); border-radius:50%; } .cus_check input[type="checkbox"]:focus-visible { box-shadow: none; } .cus_check input[type="checkbox"]:focus-visible ~ label:before, .cus_check input[type="checkbox"]:focus-visible:checked ~ label:before { box-shadow: 0px 0px 0px var(--isfocus_width_global, 3px) var(--isfocus_color_global, rgba(0,187,255,1)); border-radius:3px; } .po_row_button_item input[type="radio"]:focus-visible { opacity: 0 !important; } .po_row_button_item input[type="radio"]:focus-visible ~ label { box-shadow: 0px 0px 0px var(--isfocus_width_global, 3px) var(--isfocus_color_global, rgba(0,187,255,1)); } #colorbox:focus-visible { box-shadow: none; } a:focus-visible > .cssButton { box-shadow: inset 0px 0px 0px var(--isfocus_width_global, 3px) var(--isfocus_color_global, rgba(0,187,255,1)); border-radius:10px; } .cssButton button:focus-visible { box-shadow: inset 0px 0px 0px var(--isfocus_width_global, 3px) var(--isfocus_color_global, rgba(0,187,255,1)); border-radius:10px; } .lb_image a:focus-visible { box-shadow: inset 0px 0px 0px var(--isfocus_width_global, 3px) var(--isfocus_color_global, rgba(0,187,255,1)); } .lb_image a:focus-visible img { box-shadow: none; } .prod_image a:focus-visible { box-shadow: 0px 0px 0px var(--isfocus_width_global, 3px) var(--isfocus_color_global, rgba(0,187,255,1)); } .prod_image a:focus-visible img { box-shadow: none; } .splide__pagination__page:focus-visible { box-shadow: 0px -3px 0px 0px var(--isfocus_color_global, rgba(0,187,255,1)); } .subcats_menu_hover > li > a:focus-visible { padding-left:10px; box-shadow: inset 0px 0px 0px var(--isfocus_width_global, 3px) var(--isfocus_color_global, rgba(0,187,255,1)); } .subcats_menu_hover ul li a:focus-visible { box-shadow: none; } .subcats_menu > li > a:focus-visible { padding-left:10px; box-shadow: inset 0px 0px 0px var(--isfocus_width_global, 3px) var(--isfocus_color_global, rgba(0,187,255,1)); } .subcats_menu ul li a:focus-visible { padding-left:25px; box-shadow: inset 0px 0px 0px var(--isfocus_width_global, 3px) var(--isfocus_color_global, rgba(0,187,255,1)); } .subcats_menu ul li a:focus-visible .icon { left:10px; }