@import url(https://fonts.googleapis.com/css?family=Palanquin+Dark:400,500); 
    
/* LAYOUT */
.bg {width:100%; margin:0; padding:50px 0px; background: rgb(206,206,206); background: -moz-radial-gradient(center, ellipse cover,  rgba(206,206,206,1) 47%, rgba(158,158,158,1) 100%); background: -webkit-radial-gradient(center, ellipse cover,  rgba(206,206,206,1) 47%,rgba(158,158,158,1) 100%); background: radial-gradient(ellipse at center,  rgba(206,206,206,1) 47%,rgba(158,158,158,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cecece', endColorstr='#9e9e9e',GradientType=1 );}
.header {width:100%; margin:0; padding:0; box-shadow: 2px 2px 3px #aaa; -webkit-border-top-left-radius: 30px; -webkit-border-top-right-radius: 30px; -moz-border-radius-topleft: 30px; -moz-border-radius-topright: 30px; border-top-left-radius: 30px; border-top-right-radius: 30px; background: rgb(255,255,255); background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(234,234,234,1) 100%); background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=1 );}
.allcontent {width:100%; background:#fff; box-shadow: 2px 2px 3px #aaa;}
.maincontent {margin-left:15px}
.topfooter {width:100%; text-align:center; margin:0; padding:1.5em; font-family: 'Palanquin Dark', sans-serif; text-shadow:1px 1px 0px #000}
.topfooter a:link, .topfooter a:visited {color:#fff!important;}
.row, .p, .container {font-size:13px} 
.container-fluid a:link, .container-fluid a:visited {color:#3caf3a; text-decoration: none}
.container-fluid a:hover {color:#454545}
.sidebar {margin:0; padding-left:0}
.sidebar p {font-family:Arial; font-size:12px; color:#555; text-align: left; margin:0; padding:5px 20px}
.rowfix {margin:0; padding:0}
img.center {display: block; margin-left: auto; margin-right: auto;}

/* HEADER */    
.logo {padding:0; margin:0; text-align: left}  
.logo img {max-width:500px; margin:35px 0; margin-left:50px}  
.logo i.fa-inverse {font-size:50px;}
.logo > span {float:left; font-size:34px; margin-right:5px; color:#454545}
.logo h1 {font-family: 'Palanquin Dark', sans-serif; font-size:42px; font-weight:400; text-align:left; text-transform: uppercase; color:#4c4b4b; margin:0; padding:0}
.logo h1 > span {float:none; font-size:42px; color:#3caf3a}
.sub {margin:0; padding:0; font-family:Arial; font-size: 12px!important; font-weight: bold; color:#777!important}

/* SUCHE */
.header-suche {margin:45px 0 0 0; width:320px; height:40px; padding:0 20px; border: 1px solid #e2e2e2; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; overflow:hidden; background: #fff;}
.suchfeld {float:left; width:200px; height:40px; margin:0; border:none; color: #999; font-family: 'Palanquin Dark', sans-serif; background:none; text-align:left; line-height:38px}
.suchbutton {width:40px; height:38px; padding:0; margin:0; border:none; color: #fff; background: #3caf3a; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; float:right; margin-right:-19px}
.suchbutton i {line-height:38px}
.suchbutton:hover {background:#454545; color:#fff}    
    
/* MENU */
.menubar {width:100%; height:60px; padding:0; margin:0; border:none; overflow:hidden; background: rgb(22,22,22); box-shadow: 2px 2px 3px #aaa; background: -moz-linear-gradient(top,  rgba(22,22,22,1) 0%, rgba(69,69,69,1) 25%); background: -webkit-linear-gradient(top,  rgba(22,22,22,1) 0%,rgba(69,69,69,1) 25%); background: linear-gradient(to bottom,  rgba(22,22,22,1) 0%,rgba(69,69,69,1) 25%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#161616', endColorstr='#454545',GradientType=0 );}
ul.menu {margin:0; padding:0; border:none; background:none;}
ul.menu li {float:left; list-style-type:none; width:228px; height:60px; text-align:center; border-left: 1px dotted #505050; border-right: 1px dotted #383838; font-size:14px; line-height:60px;}
ul.menu li a {font-family: 'Palanquin Dark', sans-serif; display:block; color:#fff!important; text-decoration: none; text-shadow: 1px 1px 0px #000;}    
    
/* RESPONSIVE MENU */
ul.resmenu {margin:0; padding:0; width:100%; background:none}
ul.resmenu li {float:left; display:block; margin:0; padding:0; width:20%; background:none; border-right:1px solid #393939;}
ul.resmenu li a {display:inline-block; text-align:center; font-size:25px; color:#fff!important; background:none; text-decoration: none; margin:0; padding:20px 0;}
ul.resmenu li a:hover {color:#3caf3a!important}
    
/* HEADER-MIDS */
.mids {width:100%; background:#fff;}
.mids-box {font-family: 'Palanquin Dark', sans-serif; font-size:14px; font-weight:400; text-align:left; line-height:14px; color:#777; margin:0; padding:25px 55px; padding-right:0}
.mids-icon {float:left; font-size:38px; margin:0 10px 0 0; padding:0;}
.mids h1 {margin:0; padding:0; font-size:18px; color:#3caf3a}
    
/* ÜBERSCHRIFT & STYLES */
.maincontent h1 {width:100%; margin:0 0 10px 0; padding:15px 20px; font-family: 'Palanquin Dark', sans-serif; font-size:14px; font-weight:400; text-transform: uppercase; text-align:left; color:#fff; -webkit-border-top-left-radius: 30px; -webkit-border-bottom-left-radius: 30px; -moz-border-radius-topleft: 30px; -moz-border-radius-bottomleft: 30px; border-top-left-radius: 30px; border-bottom-left-radius: 30px; background: rgb(22,22,22); background: -moz-linear-gradient(top,  rgba(22,22,22,1) 0%, rgba(69,69,69,1) 25%); background: -webkit-linear-gradient(top,  rgba(22,22,22,1) 0%,rgba(69,69,69,1) 25%); background: linear-gradient(to bottom,  rgba(22,22,22,1) 0%,rgba(69,69,69,1) 25%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#161616', endColorstr='#454545',GradientType=0 );}
.maincontent h1 i {color:#d1d1d1; padding-right:10px; font-weight:normal;}
.sidebar h1 {width:100%; margin:0 0 10px 0; padding:15px 20px; font-family: 'Palanquin Dark', sans-serif; font-size:14px; font-weight:400; text-transform: uppercase; text-align:left; color:#fff; -webkit-border-top-right-radius: 30px; -webkit-border-bottom-right-radius: 30px; -moz-border-radius-topright: 30px; -moz-border-radius-bottomright: 30px; border-top-right-radius: 30px; border-bottom-right-radius: 30px; background: rgb(22,22,22); background: -moz-linear-gradient(top,  rgba(22,22,22,1) 0%, rgba(69,69,69,1) 25%); background: -webkit-linear-gradient(top,  rgba(22,22,22,1) 0%,rgba(69,69,69,1) 25%); background: linear-gradient(to bottom,  rgba(22,22,22,1) 0%,rgba(69,69,69,1) 25%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#161616', endColorstr='#454545',GradientType=0 );}
.sidebar h1 i {color:#d1d1d1; padding-right:10px; font-weight:normal;}
    
/* ARTIKELBESCHREIBUNG */
.artdesc-2, .artdesc-3 {margin:0; padding:0; text-align: left}
.artdesc-3 {padding:20px 30px 20px 30px}
.artdesc-3 h2 {font-family: 'Palanquin Dark', sans-serif; font-size:24px; font-weight: 400; color:#3caf3a; padding:0; margin:0; margin-bottom:10px}
.artdesc-3 h3 {font-family: 'Palanquin Dark', sans-serif; font-size:16px; font-weight: 400; color:#3caf3a; padding:20px 0 10px 0; margin:0;}
.artdesc-3 ul {margin:0; padding:0 10px; background:#f2f2f2; border: 1px dotted #ccc; border-bottom:none}
.artdesc-3 ul li {list-style-type:none;; padding:2px 0; border-bottom: 1px dotted #ccc; padding:5px 0; margin-left: 0; padding-left: 1em; text-indent: -1.2em;}
.artdesc-3 ul li:before {font-family: 'FontAwesome'; content: '\f105'; font-size:14px; padding-right:10px; color: #3caf3a;}
.artdesc-3 h4 {font-family: 'Palanquin Dark', sans-serif; font-size:36px; font-weight: 400; color:#414141; padding:20px 0 20px 0; margin:0; text-align:center}
.mwst {font-family:Arial; font-size: 10px; color:#666}
a.buys {font-family: 'Palanquin Dark', sans-serif; display:block; font-size:18px; background:#3caf3a; margin:0; padding:10px; color:#fff!important; text-decoration: none; text-align:center; border:none; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
a.buys:hover {background:#454545;}
.buysinfo {margin:0; padding:20px 0 0 0; text-align:center; font-family: 'Palanquin Dark', sans-serif; font-size:14px;}
.buysinfo a {font-family: 'Palanquin Dark', sans-serif; display:block; font-size:12px; background:#454545; margin:0; padding:10px; color:#fff!important; text-decoration: none; text-align:center; border:none; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
.buysinfo a:hover {background:#3caf3a;}
.buysinfo i {padding-right:5px}
.buysfix {padding:0; margin:0} 
    
/* ARTIKELBILDER */
.image-gallery {margin:0; width:100%; height:500px;}
.image-gallery .big-image {width:400px; height:400px; margin:0 auto; position:relative; margin-top: 27px;}
.image-gallery .big-image img {opacity:0; position:absolute; left:0px; top:0px; max-height:400px; width:auto; margin:0; transition: opacity 350ms;}
.image-gallery .big-image img:target {opacity:1;}
.image-gallery .big-image img:target ~ img#default {opacity:0;}
.image-gallery .big-image img#default {opacity:1;}
.image-gallery .thumbs {margin:0; position: relative; top:5px;}
.image-gallery .thumbs ul {list-style-type:none; margin:0!important; padding:0!important; text-align: center}
.image-gallery .thumbs li {width:23%; list-style:none; margin:0; padding:0; display:inline-block; margin-right:3px; text-align: center}
.image-gallery .thumbs li a:hover{opacity:1;}
.image-gallery .thumbs li a {opacity:0.85; text-align: center}
.image-gallery .thumbs li a:focus{opacity:1;}
.image-gallery .thumbs li img {max-height:100px; width:auto; margin:0 auto}
    
/* TABS */
.tabs {background: none; padding:0; margin: 30px 10px 30px 0}
.tabs span {display: none; font-family: 'Palanquin Dark', sans-serif; font-size: 14px!important; font-weight:400!important}
#tbc > div span {display:inherit}
#tbc > div ul, #tbc > div ul li {background:none; border:none}
#tbc {display: block; position: relative; margin:0; padding:0}
#tbc ul {margin:0; padding:0; overflow: hidden; background:none; border-bottom:4px solid #3caf3a}
#tbc ul li {float:left; display:inline; list-style-type: none; margin:0 10px 0 0; padding:0;}
#tbc ul li a {display: inline-block; position: relative; z-index: 1; background: #454545; color:#fff; font-family: 'Palanquin Dark', sans-serif; font-size: 14px; font-weight:400; text-align: center; margin:0; padding:12px 20px 10px 20px; text-decoration: none; cursor: pointer; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; border-top-left-radius: 15px; border-top-right-radius: 15px;}
#tbc ul li a:hover {background: #555; color: #fff; text-decoration: none}
#tbc > div {position: relative; clear: both; visibility: hidden; background: #fff; margin:0; padding: 0 15px; height:0; overflow: hidden; color: #454545; text-align:left; font-family: 'Palanquin Dark', sans-serif; font-size: 14px!important; font-weight:400!important}
#tbc > div h1 {font-family: 'Palanquin Dark', sans-serif; font-size:18px; font-weight:400; border:none; margin:0 0 10px 0; padding:10px 0; background:none; color:#454545}
span:target ~ #tbc ul li:first-child a {background: #454545; color: #fff;}
span:target ~ #tbc > div:first-of-type {visibility:hidden; height:0; padding:0 10px;}
span ~ #tbc > div:first-of-type, #tbl-1:target ~ #tbc > div.tbc-1, #tbl-2:target ~ #tbc > div.tbc-2, #tbl-3:target ~ #tbc > div.tbc-3, #tbl-4:target ~ #tbc > div.tbc-4 {visibility: visible; height: auto;	padding: 15px; position: relative; z-index: 6; font-family:Arial; font-size: 13px!important; font-weight:normal!important}
span ~ #tbc > ul li:first-child a, #tbl-1:target ~ #tbc > ul li a[href$="#tbl-1"], #tbl-2:target ~ #tbc > ul li a[href$="#tbl-2"], #tbl-3:target ~ #tbc > ul li a[href$="#tbl-3"], #tbl-4:target ~ #tbc > ul li a[href$="#tbl-4"] {background: #3caf3a; color: #fff;}
    
/* CROSS-SELLING */    
.xsell {margin:0; padding:0 10px 30px 0; text-align: center}
.xsell img {border:none}
.xsell a {text-decoration:none; border:none}
.xsell h1 {font-family: 'Palanquin Dark', sans-serif; font-size: 20px; font-weight: normal; line-height:25px; margin:5px 0px; padding:0; color:#3caf3a; border-bottom: 1px dotted #3caf3a; background:none; text-align: center; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px;}
.xsell h2 {margin:0; margin-bottom:10px; padding:0; font-family: 'Palanquin Dark', sans-serif; font-size: 16px; color:#333; font-weight: normal; line-height: 20px}
.xsell h3 {padding:5px 0px; margin: 5px 0px; text-align: center; color:#fff; font-size:12px; display: block; font-family: 'Palanquin Dark', sans-serif; font-weight: normal; line-height: 20px; text-decoration: none; background: #3caf3a; text-transform: uppercase; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; background:#3caf3a}      
.xsell h3:hover {background: #454545;}    
    
/* ARTIKELKATEGORIEN */
ul.katmenu {padding:0; margin:0.5em 1.2em 1em 1.2em}
ul.katmenu li {list-style-type:none; text-align: center; padding:2px 0; padding-left:25px;}
ul.katmenu li:before {font-family: 'FontAwesome'; content: '\f105'; font-size:14px; padding-right:5px; color: #3caf3a;}
ul.katmenu li a {margin:0; padding:0 5px; text-align:left; font-family: 'Palanquin Dark', sans-serif; color:#454545!important; font-size:14px; font-weight:400}
ul.katmenu li.ukat {padding-left:40px}
ul.katmenu li:hover {background:#d8d8d8; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px;}
    
/* SERVICE */
.service {font-family: 'Palanquin Dark', sans-serif; font-weight:400; height:40px; margin:20px; padding:0; padding-left:10px; color:#3e454c; text-align: left; font-size:12px}  
.service-1 {float:left; margin:2px 8px 15px 0; padding:0; color:#bfbfbf; font-size:30px; text-align:center;}
.service-1:hover {color:#3caf3a}
.service-2 {margin:0; padding:0; color:#3caf3a; line-height: 16px; font-size:16px;} 

/* FOOTER */  
a.topfooter {display:block; line-height:28px; font-size:14px; font-family: 'Palanquin Dark', sans-serif; font-weight: 400; color:#fff!important; line-height:20px; text-transform: uppercase; letter-spacing:1px}
a.topfooter i {font-size:20px; padding-right:10px; color:#ccc}
a.topfooter:hover {background:#3caf3a} 
.footer {width:100%; margin:0; padding:10px 0 20px 0; box-shadow: 2px 2px 3px #aaa; -webkit-border-bottom-right-radius: 30px; -webkit-border-bottom-left-radius: 30px; -moz-border-radius-bottomright: 30px; -moz-border-radius-bottomleft: 30px; border-bottom-right-radius: 30px; border-bottom-left-radius: 30px; background: rgb(255,255,255); background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(234,234,234,1) 100%); background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );}    
.footer h1 {margin:10px 0; padding:5px; font-family: 'Palanquin Dark', sans-serif; font-size:16px; text-transform: uppercase; font-weight:400; color:#3caf3a; border-bottom: 1px dotted #3caf3a;}
.footer ul.katmenu li {padding:2px 15px}
.footer ul.katmenu li:before {display:none}
.footer ul.katmenu li:hover {background:#d8d8d8; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px;}    
.footer ul.katmenu li i {color:#454545; padding-right:5px}
.footer p {font-family:Arial; font-size:12px; color:#555; text-align: left; margin:0; padding:5px 20px}
.footer p i {color:#3caf3a; padding-right:3px}
a.nws i {color:#fff; font-size:16px; padding-right:15px}
a.nws {margin:10px 25px; display:block; background:#3caf3a; font-size:14px; font-family: 'Palanquin Dark', sans-serif; font-weight: 400; padding:10px; color:#fff!important; text-decoration:none; text-align:center; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
a.nws:hover {background:#454545}
    
/* HOVER */
.btt {display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; overflow: hidden; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: color, background-color; transition-property: color, background-color;}
.btt:hover, .btt:focus, .btt:active {color: white; background:#3caf3a}

/* MEDIA QUERY */  

@media (min-width:992px) and (max-width: 1200px) {
    .mids-box {padding-left:25px}
    .buysinfo a {font-size:10px}
    .logo img {max-width:400px;}
    .service {padding-left:0}
    a.nws {margin:5px 0; display:block; width:100%}
    .footer p {padding:5px 5px}
    ul.menu li {width:188px}
    .image-gallery .big-image {width:340px; height:350px; margin:0; margin-top: 27px;}
    .image-gallery .big-image img {max-height:340px; width:auto;}
    .image-gallery .thumbs {top:0; max-width:340px}
    .image-gallery .thumbs li img {max-height:80px; width:auto;}
    }    
    
@media (min-width:768px) and (max-width: 992px) {
    .logo {margin:0; padding:30px 0 20px 20px}
    .logo img {max-width:400px; display: block; margin: 0 0 auto 140;}
    .header-suche {margin-top:40px}
    .mids-box {font-size:12px; padding-left:10px}
    .mids h1 {font-size:12px}
    i.mids-icon {font-size:30px}
    .maincontent {margin:0}
    .artdesc-2 {margin:0; padding:0}
    .sidebar {padding-bottom:20px}
    }
    
@media (max-width: 768px) { 
    .bg {padding:15px 5px}
    .logo {margin:0; padding:20px 15px;}
    .logo img {max-width:240px; display: block; margin: 0 auto;}
    .logo h1, .logo h1 span {font-size:38px}
    .maincontent {padding:15px 0; margin:0}
    .sidebar {padding-left:0!important; padding-right:10px!important; margin:0}
    .dropdown {padding-left:10px}
    .artdesc-2 {margin:0; padding:0; padding-right:10px}
    .allcontent > div {margin:0; padding:0; padding-left:10px}
    .buysinfo a {margin:0 0 5px 0!important;}
    .image-gallery {height:380px}
    .image-gallery .big-image {width:260px; height:260px;}
    .image-gallery .big-image img {max-height:260px; width:auto;}
    .image-gallery .thumbs {top:10px;}
    .image-gallery .thumbs li img {max-height:65px; width:auto; margin:0 auto}
    #tbc ul li {display:block; width:100%; background:#454545}
    #tbc ul li a {display:block; width:100%;}
    .xsell img {margin:0 auto}
    }