#wrapper { margin: 0 auto; padding: 10px 20px 0 20px; max-width: 1390px; font-family: 'Lato', sans-serif; } /** CLEARER DISABLES FLOAT FOR THE FOLLOWING ELEMENTS **/ .clearer { clear: both; } /** HEADER CONTAINS LOGO & NAVIGATION **/ .header { margin-bottom: 50px; } .header a { color: #fff; text-decoration: none; } .logoContainer { margin-left: 20px; } .logoContainer img { max-width: 240px; max-height: 140px; margin-top: 8px; } .navigationContainer { display: block; height: 50px; border-top: 2px solid #912300; border-bottom: 2px solid #912300; background-color: #912300; } .navigationContainer ul { margin: 0; padding: 0 0 0 20px; line-height: 50px; } .navigationContainer ul li { display: inline-block; margin-left: 40px; color: #fff; text-transform: uppercase; font-weight: 400; font-size: 16px; } .navigationContainer ul li:hover, .navigationContainer ul li a:hover { cursor: pointer; text-decoration: underline; } .navigationContainer ul li.navSa:hover, .navigationContainer ul li.navSa a:hover { cursor: pointer; text-decoration: underline; color: #ffffff; } /**Gallery CSS**/ .gallery .control-operator:target ~ .controls .control-button { color: #ccc; color: rgba(255, 255, 255, 0.4); } .gallery .control-button:first-of-type, .gallery .control-operator:nth-of-type(1):target ~ .controls .control-button:nth-of-type(1), .gallery .control-operator:nth-of-type(2):target ~ .controls .control-button:nth-of-type(2), .gallery .control-operator:nth-of-type(3):target ~ .controls .control-button:nth-of-type(3), .gallery .control-operator:nth-of-type(4):target ~ .controls .control-button:nth-of-type(4), .gallery .control-operator:nth-of-type(5):target ~ .controls .control-button:nth-of-type(5), .gallery .control-operator:nth-of-type(6):target ~ .controls .control-button:nth-of-type(6), .gallery .control-operator:nth-of-type(7):target ~ .controls .control-button:nth-of-type(7), .gallery .control-operator:nth-of-type(8):target ~ .controls .control-button:nth-of-type(8), .gallery .control-operator:nth-of-type(9):target ~ .controls .control-button:nth-of-type(9), .gallery .control-operator:nth-of-type(10):target ~ .controls .control-button:nth-of-type(10), .gallery .control-operator:nth-of-type(11):target ~ .controls .control-button:nth-of-type(11), .gallery .control-operator:nth-of-type(12):target ~ .controls .control-button:nth-of-type(12) { color: white; color: rgba(255, 255, 255, 0.8); } .gallery .item { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; opacity: 0; -webkit-transition: opacity .5s; -o-transition: opacity .5s; transition: opacity .5s; } .gallery .control-operator { display: none; } .gallery .control-operator:target ~ .item { pointer-events: none; opacity: 0; -webkit-animation: none; -o-animation: none; animation: none; } .gallery .control-operator:target ~ .controls .control-button { -webkit-animation: none; -o-animation: none; animation: none; } @-webkit-keyframes controlAnimation-2 { 0% { color: #ccc; color: rgba(255, 255, 255, 0.4); } 14.3%, 50% { color: white; color: rgba(255, 255, 255, 0.8); } 64.3%, 100% { color: #ccc; color: rgba(255, 255, 255, 0.4); } } @-o-keyframes controlAnimation-2 { 0% { color: #ccc; color: rgba(255, 255, 255, 0.4); } 14.3%, 50% { color: white; color: rgba(255, 255, 255, 0.8); } 64.3%, 100% { color: #ccc; color: rgba(255, 255, 255, 0.4); } } @keyframes controlAnimation-2 { 0% { color: #ccc; color: rgba(255, 255, 255, 0.4); } 14.3%, 50% { color: white; color: rgba(255, 255, 255, 0.8); } 64.3%, 100% { color: #ccc; color: rgba(255, 255, 255, 0.4); } } @-webkit-keyframes galleryAnimation-2 { 0% { opacity: 0; } 14.3%, 50% { opacity: 1; } 64.3%, 100% { opacity: 0; } } @-o-keyframes galleryAnimation-2 { 0% { opacity: 0; } 14.3%, 50% { opacity: 1; } 64.3%, 100% { opacity: 0; } } @keyframes galleryAnimation-2 { 0% { opacity: 0; } 14.3%, 50% { opacity: 1; } 64.3%, 100% { opacity: 0; } } .gallery .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) { pointer-events: auto; opacity: 1; } .gallery .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) { pointer-events: auto; opacity: 1; } .items-2.autoplay .control-button { -webkit-animation: controlAnimation-2 14s infinite; -o-animation: controlAnimation-2 14s infinite; animation: controlAnimation-2 14s infinite; } .items-2.autoplay .item { -webkit-animation: galleryAnimation-2 14s infinite; -o-animation: galleryAnimation-2 14s infinite; animation: galleryAnimation-2 14s infinite; } .items-2 .control-button:nth-of-type(1), .items-2 .item:nth-of-type(1) { -webkit-animation-delay: -2s; -o-animation-delay: -2s; animation-delay: -2s; } .items-2 .control-button:nth-of-type(2), .items-2 .item:nth-of-type(2) { -webkit-animation-delay: 5s; -o-animation-delay: 5s; animation-delay: 5s; } @-webkit-keyframes controlAnimation-3 { 0% { color: #ccc; color: rgba(255, 255, 255, 0.4); } 9.5%, 33.3% { color: white; color: rgba(255, 255, 255, 0.8); } 42.9%, 100% { color: #ccc; color: rgba(255, 255, 255, 0.4); } } @-o-keyframes controlAnimation-3 { 0% { color: #ccc; color: rgba(255, 255, 255, 0.4); } 9.5%, 33.3% { color: white; color: rgba(255, 255, 255, 0.8); } 42.9%, 100% { color: #ccc; color: rgba(255, 255, 255, 0.4); } } @keyframes controlAnimation-3 { 0% { color: #ccc; color: rgba(255, 255, 255, 0.4); } 9.5%, 33.3% { color: white; color: rgba(255, 255, 255, 0.8); } 42.9%, 100% { color: #ccc; color: rgba(255, 255, 255, 0.4); } } @-webkit-keyframes galleryAnimation-3 { 0% { opacity: 0; } 9.5%, 33.3% { opacity: 1; } 42.9%, 100% { opacity: 0; } } @-o-keyframes galleryAnimation-3 { 0% { opacity: 0; } 9.5%, 33.3% { opacity: 1; } 42.9%, 100% { opacity: 0; } } @keyframes galleryAnimation-3 { 0% { opacity: 0; } 9.5%, 33.3% { opacity: 1; } 42.9%, 100% { opacity: 0; } } .gallery .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) { pointer-events: auto; opacity: 1; } .gallery .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) { pointer-events: auto; opacity: 1; } .gallery .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) { pointer-events: auto; opacity: 1; } .items-3.autoplay .control-button { -webkit-animation: controlAnimation-3 21s infinite; -o-animation: controlAnimation-3 21s infinite; animation: controlAnimation-3 21s infinite; } .items-3.autoplay .item { -webkit-animation: galleryAnimation-3 21s infinite; -o-animation: galleryAnimation-3 21s infinite; animation: galleryAnimation-3 21s infinite; } .items-3 .control-button:nth-of-type(1), .items-3 .item:nth-of-type(1) { -webkit-animation-delay: -2s; -o-animation-delay: -2s; animation-delay: -2s; } .items-3 .control-button:nth-of-type(2), .items-3 .item:nth-of-type(2) { -webkit-animation-delay: 5s; -o-animation-delay: 5s; animation-delay: 5s; } .items-3 .control-button:nth-of-type(3), .items-3 .item:nth-of-type(3) { -webkit-animation-delay: 12s; -o-animation-delay: 12s; animation-delay: 12s; } @-webkit-keyframes controlAnimation-4 { 0% { color: #ccc; color: rgba(255, 255, 255, 0.4); } 7.1%, 25% { color: white; color: rgba(255, 255, 255, 0.8); } 32.1%, 100% { color: #ccc; color: rgba(255, 255, 255, 0.4); } } @-o-keyframes controlAnimation-4 { 0% { color: #ccc; color: rgba(255, 255, 255, 0.4); } 7.1%, 25% { color: white; color: rgba(255, 255, 255, 0.8); } 32.1%, 100% { color: #ccc; color: rgba(255, 255, 255, 0.4); } } @keyframes controlAnimation-4 { 0% { color: #ccc; color: rgba(255, 255, 255, 0.4); } 7.1%, 25% { color: white; color: rgba(255, 255, 255, 0.8); } 32.1%, 100% { color: #ccc; color: rgba(255, 255, 255, 0.4); } } @-webkit-keyframes galleryAnimation-4 { 0% { opacity: 0; } 7.1%, 25% { opacity: 1; } 32.1%, 100% { opacity: 0; } } @-o-keyframes galleryAnimation-4 { 0% { opacity: 0; } 7.1%, 25% { opacity: 1; } 32.1%, 100% { opacity: 0; } } @keyframes galleryAnimation-4 { 0% { opacity: 0; } 7.1%, 25% { opacity: 1; } 32.1%, 100% { opacity: 0; } } .gallery .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) { pointer-events: auto; opacity: 1; } .gallery .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) { pointer-events: auto; opacity: 1; } .gallery .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) { pointer-events: auto; opacity: 1; } .gallery .control-operator:nth-of-type(4):target ~ .item:nth-of-type(4) { pointer-events: auto; opacity: 1; } .gallery .control-operator:nth-of-type(5):target ~ .item:nth-of-type(5) { pointer-events: auto; opacity: 1; } .gallery .control-operator:nth-of-type(6):target ~ .item:nth-of-type(6) { pointer-events: auto; opacity: 1; } .gallery .control-operator:nth-of-type(7):target ~ .item:nth-of-type(7) { pointer-events: auto; opacity: 1; } .gallery .control-operator:nth-of-type(8):target ~ .item:nth-of-type(8) { pointer-events: auto; opacity: 1; } .gallery .control-operator:nth-of-type(9):target ~ .item:nth-of-type(9) { pointer-events: auto; opacity: 1; } .gallery .control-operator:nth-of-type(10):target ~ .item:nth-of-type(10) { pointer-events: auto; opacity: 1; } .gallery .control-operator:nth-of-type(11):target ~ .item:nth-of-type(11) { pointer-events: auto; opacity: 1; } .gallery .control-operator:nth-of-type(12):target ~ .item:nth-of-type(12) { pointer-events: auto; opacity: 1; } .items-4.autoplay .control-button { -webkit-animation: controlAnimation-4 28s infinite; -o-animation: controlAnimation-4 28s infinite; animation: controlAnimation-4 28s infinite; } .items-4.autoplay .item { -webkit-animation: galleryAnimation-4 28s infinite; -o-animation: galleryAnimation-4 28s infinite; animation: galleryAnimation-4 28s infinite; } .items-4 .control-button:nth-of-type(1), .items-4 .item:nth-of-type(1) { -webkit-animation-delay: -2s; -o-animation-delay: -2s; animation-delay: -2s; } .items-4 .control-button:nth-of-type(2), .items-4 .item:nth-of-type(2) { -webkit-animation-delay: 5s; -o-animation-delay: 5s; animation-delay: 5s; } .items-4 .control-button:nth-of-type(3), .items-4 .item:nth-of-type(3) { -webkit-animation-delay: 12s; -o-animation-delay: 12s; animation-delay: 12s; } .items-4 .control-button:nth-of-type(4), .items-4 .item:nth-of-type(4) { -webkit-animation-delay: 19s; -o-animation-delay: 19s; animation-delay: 19s; } .items-4 .control-button:nth-of-type(5), .items-4 .item:nth-of-type(5) { -webkit-animation-delay: 19s; -o-animation-delay: 19s; animation-delay: 19s; } @-webkit-keyframes controlAnimation-5 { 0% { color: #ccc; color: rgba(255, 255, 255, 0.4); } 5.7%, 20% { color: white; color: rgba(255, 255, 255, 0.8); } 25.7%, 100% { color: #ccc; color: rgba(255, 255, 255, 0.4); } } @-o-keyframes controlAnimation-5 { 0% { color: #ccc; color: rgba(255, 255, 255, 0.4); } 5.7%, 20% { color: white; color: rgba(255, 255, 255, 0.8); } 25.7%, 100% { color: #ccc; color: rgba(255, 255, 255, 0.4); } } @keyframes controlAnimation-5 { 0% { color: #ccc; color: rgba(255, 255, 255, 0.4); } 5.7%, 20% { color: white; color: rgba(255, 255, 255, 0.8); } 25.7%, 100% { color: #ccc; color: rgba(255, 255, 255, 0.4); } } @-webkit-keyframes galleryAnimation-5 { 0% { opacity: 0; } 5.7%, 20% { opacity: 1; } 25.7%, 100% { opacity: 0; } } @-o-keyframes galleryAnimation-5 { 0% { opacity: 0; } 5.7%, 20% { opacity: 1; } 25.7%, 100% { opacity: 0; } } @keyframes galleryAnimation-5 { 0% { opacity: 0; } 5.7%, 20% { opacity: 1; } 25.7%, 100% { opacity: 0; } } .gallery .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) { pointer-events: auto; opacity: 1; } .gallery .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) { pointer-events: auto; opacity: 1; } .gallery .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) { pointer-events: auto; opacity: 1; } .gallery .control-operator:nth-of-type(4):target ~ .item:nth-of-type(4) { pointer-events: auto; opacity: 1; } .gallery .control-operator:nth-of-type(5):target ~ .item:nth-of-type(5) { pointer-events: auto; opacity: 1; } .items-5.autoplay .control-button { -webkit-animation: controlAnimation-5 35s infinite; -o-animation: controlAnimation-5 35s infinite; animation: controlAnimation-5 35s infinite; } .items-5.autoplay .item { -webkit-animation: galleryAnimation-5 35s infinite; -o-animation: galleryAnimation-5 35s infinite; animation: galleryAnimation-5 35s infinite; } .items-5 .control-button:nth-of-type(1), .items-5 .item:nth-of-type(1) { -webkit-animation-delay: -2s; -o-animation-delay: -2s; animation-delay: -2s; } .items-5 .control-button:nth-of-type(2), .items-5 .item:nth-of-type(2) { -webkit-animation-delay: 5s; -o-animation-delay: 5s; animation-delay: 5s; } .items-5 .control-button:nth-of-type(3), .items-5 .item:nth-of-type(3) { -webkit-animation-delay: 12s; -o-animation-delay: 12s; animation-delay: 12s; } .items-5 .control-button:nth-of-type(4), .items-5 .item:nth-of-type(4) { -webkit-animation-delay: 19s; -o-animation-delay: 19s; animation-delay: 19s; } .items-5 .control-button:nth-of-type(5), .items-5 .item:nth-of-type(5) { -webkit-animation-delay: 26s; -o-animation-delay: 26s; animation-delay: 26s; } .gallery .control-button { color: #ccc; color: rgba(255, 255, 255, 0.4); } .gallery .control-button:hover { color: white; color: rgba(255, 255, 255, 0.8); } .gallery { position: relative; } .gallery .item { overflow: hidden; text-align: center; } .gallery .controls { width: 100%; } .gallery .control-button { display: inline-block; margin: 0 .02em; font-size: 3em; text-align: center; text-decoration: none; -webkit-transition: color .1s; -o-transition: color .1s; transition: color .1s; } .gallery .item:first-of-type { position: relative; pointer-events: auto; opacity: 1; } .gallery { width: 43%; margin-right: 2%; float: left; } .bigPic { position: relative; width: 100%; height: 598px; text-align: center; margin: 0; background-color: #fff; border: 1px solid #cccccc; } .bigPic img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; max-width: 100%; max-height: 100%; } .galleryNav { padding-top: 15px; padding-left: 0; text-align: left; } .galleryThumb { position: relative; display: inline-block; margin-right: 1%; margin-left: -4px; width: 15.23%; height: 100px; text-align: center; margin-bottom: 5px; } .galleryThumb:hover, .galleryThumb:visited, .galleryThumb:link{ text-decoration: none; } .galleryThumb:nth-child(1), .galleryThumb:nth-child(5) { margin-left: 0; } .galleryThumb:nth-child(4n) { margin-right: 0; } .galleryThumb:last-child { margin-right: 0; } .galleryThumb:hover { opacity: 0.7; cursor: pointer; transition: all 0.2s; } .galleryThumb img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; max-width: 100%; max-height: 100%; } .midColumn { float: left; max-width: 400px; } .midColumn h1 { color: #333; font-weight: 400; font-size: 26px; margin-bottom: 0; } .underline { margin: 15px 0; width: 100%; height: 1px; background-color: #333; } .shortdescription { float: left; margin: 18px 0; } .shortdescription p, .shortdescription ul, .shortdescription li { color: #000; font-size: 16px; line-height: 1.5; margin: 0; } #askNowButton { display: inline-block; margin-top: 12px; width: 192px; height: 35px; border-radius: 3px; background-color: #912300; text-decoration: none; cursor: pointer; transition: all 0.1s; } #askNowButton p { position: relative; margin: 0; line-height: 35px; color: #fff; text-transform: uppercase; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); font-size: 14px; left: -4px; } #askNowButton i { position: relative; top: 8px; left: -30px; float: left; color: #ffffff; font-size: 22px; } #askNowButton .innerbox { height: 35px; } #askNowButton.first { margin-right: 12px; } #askNowButtons { display: block; width: 100%; text-align: center; } .innerbox { float: left; width: 40px; height: 37px; border-radius: 3px 0px 0px 3px; background-color: #fff; opacity: 0.2; } #askNowButton i { position: relative; top: 5px; left: -32px; font-size: 24px; } .rightColumn { float: right; padding-left: 20px; width: 215px; border-left: 1px solid #ebebeb; } .rightColumn ul { padding-left: 0; } .rightColumn .circle { float: left; margin-right: 10px; width: 40px; height: 40px; border-radius: 100%; background-color: #912300; text-align: center; } .rightColumn .circle i { color: #ffffff; font-size: 18px; line-height: 40px; } .brandContainer { margin: 2px 0 16px 0; padding-bottom: 18px; border-bottom: 1px solid #ebebeb; font-size: 14px; } .brandContainer img { max-width: 150px; max-height: 74px; } .brandContainer span { margin-top: 12px; font-size: 14px; } .trustViewDescription { clear: both; margin-bottom: 15px; font-size: 14px; /** height & overflow only allow two lines **/ height: 40px; overflow: hidden; } .trustViewDescription a { color: #912300; text-decoration: none; transition: all 0.1s; } .trustViewDescription p { margin: 0; padding: 0; line-height: 20px; } .trustViewDescription p.midH { line-height: 35px; } .tabBar { padding-bottom: 80px; margin-top: 30px; } #tab2, #tab3, #tab4, #tab5, #tab6 { display: none; } .tabBar input[type=radio] { visibility: hidden; margin: 0; padding: 0; height: 0; width: 0; position: absolute; } .tablinks { display: inline-block; margin-left: -4px; margin-right: 1%; padding-top: 0; width: 19%; height: 45px; line-height: 45px; background-color: #EFF0EB; color: #666666; text-align: center; font-size: 18px; transition: all 0.1s; margin-bottom: 10px; } .tabBar label:last-of-type { margin-right: 0; } .tablinks:hover { background-color: #912300; color: #fff; text-decoration: none; cursor: pointer; transition: all 0.1s; } #tab1-btn:checked + .tablinks, #tab2-btn:checked + .tablinks, #tab3-btn:checked + .tablinks, #tab4-btn:checked + .tablinks, #tab5-btn:checked + .tablinks, #tab6-btn:checked + .tablinks { background-color: #912300; color: #fff; text-decoration: none; cursor: pointer; transition: all 0.1s; } #tab1-btn:checked ~ #tab1 { display: block; } #tab1-btn:checked ~ #tab2, #tab1-btn:checked ~ #tab3, #tab1-btn:checked ~ #tab4, #tab1-btn:checked ~ #tab5, #tab1-btn:checked ~ #tab6 { display: none; } #tab2-btn:checked ~ #tab2 { display: block; } #tab2-btn:checked ~ #tab1, #tab2-btn:checked ~ #tab3, #tab2-btn:checked ~ #tab4, #tab2-btn:checked ~ #tab5, #tab2-btn:checked ~ #tab6 { display: none; } #tab3-btn:checked ~ #tab3 { display: block; } #tab3-btn:checked ~ #tab1, #tab3-btn:checked ~ #tab2, #tab3-btn:checked ~ #tab4, #tab3-btn:checked ~ #tab5, #tab3-btn:checked ~ #tab6 { display: none; } #tab4-btn:checked ~ #tab4 { display: block; } #tab4-btn:checked ~ #tab1, #tab4-btn:checked ~ #tab2, #tab4-btn:checked ~ #tab3, #tab4-btn:checked ~ #tab5, #tab4-btn:checked ~ #tab6 { display: none; } #tab5-btn:checked ~ #tab5 { display: block; } #tab5-btn:checked ~ #tab1, #tab5-btn:checked ~ #tab2, #tab5-btn:checked ~ #tab3, #tab5-btn:checked ~ #tab4, #tab5-btn:checked ~ #tab6 { display: none; } #tab6-btn:checked ~ #tab6 { display: block; } #tab6-btn:checked ~ #tab1, #tab6-btn:checked ~ #tab2, #tab6-btn:checked ~ #tab3, #tab6-btn:checked ~ #tab4, #tab6-btn:checked ~ #tab5 { display: none; } .tabContent { clear: both; color: #222; text-align: left; overflow: auto; font-size: 16px; line-height: 1.5; padding-top: 10px; } .tabContent img { max-width: 100%; } .tabContent a, .tabContent a:visited { color: #912300; text-decoration: none; } .tabContent a:hover { text-decoration: underline; font-weight: 700; } .tabContent h1, .tabBar h1, .tabContent h2, .tabBar h2 { font-weight: 300; font-size: 28px; transition: all 0.1s; } .tabContent ul, .tabContent ol { display: block; text-align: left; position: relative; line-height: 1.8; } .tabContent li { font-size: 16px; color: #323232; } .crossSellerContainer { clear: both; margin-top: 0; margin-bottom: 40px; width: 100%; text-align: center; /* vorher left; */ } .crossSellerItem:hover h3, .crossSellerItem:hover p, .crossSellerItem:hover a { color: #912300; transition: all 0.1s; } .crossSellerItem:hover img { /* max-width: 200%; zum Testen hinzugefuegt*/ /* max-height: 200%; zum Testen hinzugefuegt*/ opacity: 0.7; } .crossSellerContainer a:hover, .crossSellerContainer a:visited, .crossSellerContainer a { color: inherit; text-decoration: none; } .crossSellerContainerHeading { padding: 0; border-bottom: 3px solid #333; } .crossSellerContainer h2 { position: relative; top: 3px; display: inline-block; margin: 0; padding: 0 0 8px 0; border-bottom: 3px solid #912300; color: #333; text-transform: uppercase; font-weight: 400; font-size: 24px; } .crossSellerItem { display: inline-block; overflow: hidden; margin-top: 6px; margin-right: 3%; padding: 0; width: 22.2%; margin: auto; /*NEU HInZUGEFUEGT*/ vertical-align: top; cursor: pointer; transition: all 0.2s; } .crossSellerItem:last-child { margin-right: 0; } .crossSellerItemImgContainer { position: relative; width: 100%; height: 190px; /* vorher 230px; */ text-align: center; cursor: pointer; } .crossSellerItem img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; max-width: 100%; max-height: 100%; transition: all 0.5s; } .crossSellerItem a { color: #000; text-decoration: none; } .crossSellerItem span { float: left; margin-top: 9px; width: 100%; text-align: center; } .crossSellerItem h3 { margin: 0; padding: 0; color: inherit; font-size: 14px; /* vorher 16px; */ transition: all 0.2s; } .crossSellerItem p { margin-top: 7px; padding: 0; color: inherit; font-size: 15px; transition: all 0.2s; } .crossSellerContainerSmall { clear: both; margin-top: 4px; margin-bottom: 20px; width: 100%; text-align: left; border: 1px solid #ebebeb; padding-bottom: 6px; } .crossSellerItemSmall:hover h3, .crossSellerItemSmall:hover p, .crossSellerItemSmall:hover a { color: #003366; transition: all 0.1s; } .crossSellerItemSmall:hover img { opacity: 0.7; } .crossSellerContainerSmall a:hover, .crossSellerContainerSmall a:visited, .crossSellerContainerSmall a { color: inherit; text-decoration: none; } .crossSellerItemSmall { display: inline-block; overflow: hidden; margin-top: 6px; margin-right: 2.5%; padding: 0; width: 22%; vertical-align: top; cursor: pointer; transition: all 0.2s; } .crossSellerItemSmall:last-child { margin-right: 0; } .crossSellerItemImgContainerSmall { position: relative; width: 100%; height: 100px; text-align: center; cursor: pointer; } .crossSellerItemSmall img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; max-width: 100%; max-height: 100%; transition: all 0.5s; } .crossSellerItemSmall a { color: #000; text-decoration: none; } .crossSellerItemSmall span { float: left; margin-top: 6px; width: 100%; text-align: center; } .crossSellerItemSmall h3 { margin: 0; padding: 0; color: inherit; font-size: 12px; transition: all 0.2s; } .crossSellerItemSmall p { margin-top: 6px; padding: 0; color: inherit; font-size: 14px; transition: all 0.2s; } .furtherCategoriesContainer { clear: both; margin-top: 10px; margin-bottom: 25px; width: 100%; text-align: left; } .furtherCategoriesItem:hover h3, .furtherCategoriesItem:hover p, .furtherCategoriesItem:hover a { color: #912300; transition: all 0.1s; } .furtherCategoriesItem:hover img { opacity: 0.7; } .furtherCategoriesContainer a:hover, .furtherCategoriesContainer a:visited, .furtherCategoriesContainer a { color: inherit; text-decoration: none; } .furtherCategoriesContainerHeading { padding: 0; border-bottom: 2px solid #ccc; } .furtherCategoriesContainer h2 { text-align: center; position: relative; top: 3px; margin: 0; padding: 0 0 8px 0; color: #912300; font-weight: 400; font-size: 24px; } .furtherCategoriesItem { display: inline-block; overflow: hidden; margin-top: 16px; margin-right: 3%; padding: 0; width: 22.2%; vertical-align: top; cursor: pointer; transition: all 0.2s; } .furtherCategoriesItem:last-child { margin-right: 0; } .furtherCategoriesItemImgContainer { position: relative; width: 100%; height: 230px; text-align: center; cursor: pointer; } .furtherCategoriesItem img { /* position: absolute; top: 0; right: 0; bottom: 0; left: 0; */ margin: auto; max-width: 100%; max-height: 100%; transition: all 0.5s; } .furtherCategoriesItem a { color: #000; text-decoration: none; } .furtherCategoriesItem span { /* float: left; */ margin-top: 9px; width: 100%; text-align: center; } .furtherCategoriesItem h3 { text-align: center; margin: 0 0 8px 0; padding: 0; color: inherit; font-size: 16px; transition: all 0.2s; } .furtherCategoriesItem p { margin-top: 7px; padding: 0; color: inherit; font-size: 15px; transition: all 0.2s; } #footerContainer { margin: 26px 0 0 0; padding: 26px 0 0 0; width: 100%; height: 220px; background-color: #22313F; } #footerContainer h2 { margin: 0 0 26px 0; padding: 0 0 8px 0; border-bottom: 2px solid #912300; color: #f0f0f0; text-transform: uppercase; font-weight: 400; font-size: 17px; font-family: 'montserrat'; } #footerContainer i { float: left; color: #ffffff; font-size: 18px; line-height: 30px; } #footerContainer a { color: #D6D6D6; text-decoration: none; } #footerColumn2, #footerColumn3 { float: left; margin-left: 55px; width: 205px; height: 180px; } .footerRow { margin-bottom: 20px; height: 28px; } #footerColumn2 p { float: left; margin: 5px 0 0 15px; color: #D6D6D6; font-weight: 400; font-size: 14px; } #footerColumn3 p { clear: both; color: #D6D6D6; font-weight: 400; font-size: 12px; } #footerColumn3 span { margin-top: 5px; font-weight: 400; } #footerRow ul,li { font-size: 12px; color: #D6D6D6; margin-left: -24px; } #copyright { float: right; margin: 85px 40px 0 0; color: #D6D6D6; font-size: 9px; } #copyright a { color: #ffffff; text-decoration: none; } img[src=""] { display: none; } #bg-image { background-image: none; padding-bottom: 25px; } .rightColumnTop { float: right; padding-left: 20px; width: 215px; border-left: 1px solid #ebebeb; } .rightColumnTop ul { padding-left: 0; } .rightColumnTop .circle { float: left; margin-right: 10px; width: 40px; height: 40px; border-radius: 100%; background-color: #912300; text-align: center; } .rightColumnTop .circle i { color: #ffffff; font-size: 18px; line-height: 40px; } @media only screen and (max-width: 1215px) { .gallery { width: 40%; } } @media only screen and (max-width: 1135px) { .rightColumn { padding-left: 10px; width: 160px; } .rightColumnTop { padding-left: 10px; width: 160px; } } /*****************/ /* TABLET 1024px */ /*****************/ @media only screen and (max-width: 1024px) { .header, #askNowButtons, .rightColumn, .furtherCategoriesContainer, .crossSellerContainerSmall, span.text-highlightcolor { display: none !important; } /* "Weitere Produkte"-Tab wird auf mobilen Geräten nicht angezeigt */ .hide-mobile { display: none !important; } .logoContainer { display: block; margin-left: 12px; /* margin: 0 auto; */ width: 100%; text-align: left; } .navigationContainer { display: block; margin: 25px auto 0 auto; padding: 0; width: 100%; height: auto; background-color: #fff; } .navigationContainer ul { padding: 0; } .navigationContainer ul li { display: block; margin: 0 auto; padding: 0; height: auto; border-bottom: 1px solid #ddd; color: #912300; text-align: center; } .galleryAndShortdescriptionContainer { float: none; margin: 0 auto; width: 100%; } .gallery { display: block; float: none; margin: 0 auto; width: 70%; } .galleryThumb { height: 60px; } .bigPic { height: 530px; } .bigPic img { max-height: 530px; } .midColumn { float: none; margin: 0 auto; width: 100%; } .midColumn h1 { text-align: center; } .midColumn h2 { margin: 0 auto 0 auto; text-align: center; } .underline { margin: 15px auto 15px auto; } .shortdescription { margin: 0 auto; width: 410px; float: none; } .shortdescription p { text-align: center; } .rightColumn { float: none; clear: both; margin: 40px auto 0 auto; padding-top: 20px; max-width: 100%; border: none; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; text-align: center; width: auto; } .brandContainer { display: none; } .trustViewDescription { display: inline-block; clear: both; margin-right: 20px; width: auto; width: 40%; vertical-align: middle; text-align: left; } .trustViewDescription p { margin: 0; vertical-align: middle; line-height: 35px; } .tabBar { margin: 10px auto 0 auto; max-width: 100%; text-align: left; } .crossSellerContainer { margin: 0 auto; padding-top: 0; padding-right: 30px; width: 90%; } .crossSellerContainer { width: 100%; } .crossSellerItem { width: 21%; } .furtherCategoriesContainer { margin: 0 auto; padding-top: 0; padding-right: 30px; width: 90%; } .furtherCategoriesContainer { width: 100%; } .furtherCategoriesItem { width: 21%; } .hidden-tablet { display: none; } .ratingContainer { display: none; } .rightColumnTop { float: none; clear: both; margin: 20px auto 0 auto; padding-top: 4px; max-width: 100%; border: none; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; text-align: center; width: auto; } } @media only screen and (max-width: 830px) { .header, #askNowButtons, .rightColumn, .furtherCategoriesContainer, .crossSellerContainerSmall, span.text-highlightcolor { display: none !important; } /* "Weitere Produkte"-Tab wird auf mobilen Geräten nicht angezeigt */ .hide-mobile { display: none !important; } .tabBar { margin-top: 5px; } .bigPic { width: auto; height: 290px; } .bigPic img { max-width: 95%; max-height: 300px; width: auto; vertical-align: middle; } .bigPic { display: inline-block; width: 100%; vertical-align: middle; text-align: center; } .galleryThumb { height: 50px; } #footerContainer { height: 930px; } #footerColumn2, #footerColumn3 { float: none; margin-bottom: 50px; margin-left: 50px; } .hidden-tablet { display: block; } #bg-image { background-image: none; padding-bottom: 25px; } } /* SMARTPHONE 660px*/ @media only screen and (max-width: 660px) { #wrapper { padding: 20px 20px 0 20px; } .header, #askNowButtons, .rightColumn, .furtherCategoriesContainer, .crossSellerContainerSmall, span.text-highlightcolor { display: none !important; } /* "Weitere Produkte"-Tab wird auf mobilen Geräten nicht angezeigt */ .hide-mobile { display: none !important; } .tabBar { margin-top: 5px; } .logoContainer { display: block; margin: 0 auto; width: 100%; text-align: center; } .tablinks { margin-bottom: 10px; } .tabBar label { width: 47%; margin-right: 1%; margin-left: 1%; } .crossSellerContainer { width: 100%; padding-right: 0px; text-align: center; } .crossSellerItem { display: block; margin: 0 auto; padding-top: 25px; width: 80%; text-align: center; } .crossSellerItem:last-child { margin-right: auto; } .furtherCategoriesContainer { width: 100%; padding-right: 0px; text-align: center; } .furtherCategoriesItem { display: block; margin: 0 auto; padding-top: 25px; width: 80%; text-align: center; } .furtherCategoriesItem:last-child { margin-right: auto; } #footerContainer { height: 1035px; } #footerColumn2, #footerColumn3 { display: block; float: none; clear: both; margin: 0 auto; margin-bottom: 40px; padding: 0; width: 80%; text-align: left; height: 225px; } .galleryThumb { height: 50px; } } /* SMARTPHONE 480px*/ @media only screen and (max-width: 480px) { .header, #askNowButtons, .rightColumn, .furtherCategoriesContainer, .crossSellerContainerSmall, span.text-highlightcolor { display: none !important; } /* "Weitere Produkte"-Tab wird auf mobilen Geräten nicht angezeigt */ .hide-mobile { display: none !important; } .logoContainer { display: block; margin: 0 auto; width: 100%; text-align: center; } .gallery { display: block; float: none; margin: 0 auto; width: 100%; } .galleryThumb { height: 50px; } .bigPic { height: 230px; } .bigPic img { max-width: 95%; max-height: 230px; width: auto; vertical-align: middle; } .midColumn { display: block; margin: 0 auto; width: 100%; } .midColumn h2 { margin: 0 auto; text-align: center; } .shortdescription { clear: both; padding-left: 0px; width: 100%; } .trustViewDescription { display: block; margin: 0 auto 15px auto; width: 90%; height: auto; } .tabBar { display: block; margin-top: 5px; } .tablinks li { height: 40px; line-height: 40px; } } @media only screen and (max-width: 350px) { .header, #askNowButtons, .rightColumn, .furtherCategoriesContainer, .crossSellerContainerSmall, span.text-highlightcolor { display: none !important; } /* "Weitere Produkte"-Tab wird auf mobilen Geräten nicht angezeigt */ .hide-mobile { display: none !important; } .tabBar { margin-top: 5px; } .bigPic img { max-height: 200px; } .galleryThumb { height: 50px; } } .animated { -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(10px) } 100% { opacity: 1; -webkit-transform: translateX(0) } } @-moz-keyframes fadeInRight { 0% { opacity: 0; -moz-transform: translateX(10px) } 100% { opacity: 1; -moz-transform: translateX(0) } } @-o-keyframes fadeInRight { 0% { opacity: 0; -o-transform: translateX(10px) } 100% { opacity: 1; -o-transform: translateX(0) } } @keyframes fadeInRight { 0% { opacity: 0; transform: translateX(10px) } 100% { opacity: 1; transform: translateX(0) } } .fadeInRight { -webkit-animation-name: fadeInRight; -moz-animation-name: fadeInRight; -o-animation-name: fadeInRight; animation-name: fadeInRight } .text-brandcolor { color: #912300; } .text-light { color: #999999; } .text-light-dker { color: #777777; } .separator { margin: 15px 0; height: 1px; background-color: #eeeeee; } .text-yellow { font-size: 4px; color: yellow; } .text-navsales { color: #ffffff; } .text-highlightcolor { color: #912300; } .ratingPlusSign { color: #0db500; font-size: 12px; } p.thin { margin: 5px 0 6px 0; } .ratingContainer { border: 1px solid #ebebeb; font-size: 14px; margin-top: 30px; padding: 18px; } .ratingContainer p { font-size: 14px; color: #777777; } span.small { font-size: 12px; }