@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;1,300&display=swap');

html {overflow-y:scroll;}

body {
	margin:0;
	padding:0;
	border:0;			/* This removes the border around the viewport in old versions of IE */
	width:100%;
	font-family:Roboto,Verdana,sans-serif;
	font-size:16px;
    font-weight: 300;
	background:url('../images/bg_content3.jpg') top left repeat;
	background-attachment:fixed;
    overflow-x:hidden;
}

a {color:#8a981e; text-decoration:none;}

a:hover {color:#fff;}

h1, h2  {margin:.3em 0 .15em 0; padding:0;}

h3 {margin:1.5em 0 0 0; padding:0;}

h4 {
	font-size:85%;
	font-weight:300;
	font-style:italic;
	color:#999999;
	margin:5px 0 0 0;
	padding:0;
}

h5 {
	color:red;
	margin-bottom:.2em;
	padding-top:.4em;
	font-weight:300;
	border-top:1px solid #E5E6E7;
}

hr {color:#c1c1c1;}

.small {
	font-style:italic;
	color:#768601;
	font-size:80%;
}

p {
	margin:.4em 0 .8em 0;
	padding:0;
	line-height:1.5em;
}

.col3 p {margin-top:0 !important;}

.col1 p.fazit {font-style:italic; color:#768601;}

img {margin:5px 0; border:none;}

.os_right {float:right;}

.col2 img, .col3 img {margin:0;}

.col3 img {padding:0 0 0 1px;}

/* Header styles */

#header {
	clear:both;
	float:left;
	width:100%;
	background:url('../images/bg_header_2.jpg') top left no-repeat;
}

#header p, #header h1 {
    font-size:1.8em;
    font-weight:400;
	color:#333;
	padding:0.45em 15px 0 15px;
	margin:0;
	line-height:0.7em;
}

#header a {color:#fff;}

.menu_top {
	clear:both;
	float:left;
	width:calc(100% - 16px);
	overflow:hidden;
	height:auto;
	min-height:35px;
    padding: 0 8px;
}

.menu_top_placeholder {
	width:calc(100% - 16px);
	height:50px;
	display:none;
}

#header ul {
	float:left;
	position:relative;
	left:50%;
	margin:0 auto;
	padding:0;
	list-style-type:none;
	font-size:96%;
}

#header ul li {
	float:left;
	position:relative;
	right:50%;
    margin:2px;
}

#header ul li a {
	display:block;
	width:auto;
	margin:0 1px;
	padding:6px;
	text-align:center;
    background-color: rgba(201,228,0,0.8);
	color:#404801;
	text-decoration:none;
	line-height:1.3em;
    font-weight: 400;
    letter-spacing:0.06em;
}

#header ul li:nth-child(2) a {
	background:#FF33A6;
	font-weight:400;
	color:#fff;
}
#header ul li a:hover {
	background:#768601;
	/*text-shadow:2px 2px 2px #000;*/
	color:#fff;
}

#header ul li.active a, #header ul li.active a:hover {
	color:#fff;
	background:#768601;
	/*text-shadow:2px 2px 2px #333;*/
}

#header ul li a span {display:block; font-weight:300; font-size: 84%}

#header .logo {float:left; margin:10px;}
/* neues logo von icon-works */
#header div.logo {
    width: 35px;
    height: 35px;
    padding: 3px 5px 7px 5px;
    font-family: 'icon-worksregular';
    font-size: 35px;
    color: #444;
    background-color: #cae400; 
    transform: rotate(90deg);
}

#layoutdims {
	clear:both;
	background:#e5e6e7;
	border-top:1px solid #333;
	border-bottom:1px solid #c5c5c5;
	margin:0;
	padding:5px 10px 3px 10px !important;
	text-align:left;
}

/* column container */

.colmask {
	position:relative;
	clear:both;
	margin:0px auto 30px auto;
	width:1150px;		/* width of whole page (geändert von 1050 am 27.4.17) */
	overflow:hidden;	/* This chops off any overhanging divs */
}

/* common column settings */

.colright, .colmid, .colleft {
	float:left;
	width:100%;
	position:relative;
}

.col1, .col2, .col3 {
	float:left;
	position:relative;
	padding:0 0 1em 0;	/* no left and right padding on columns */
	overflow:hidden;
}

.col2 p, .col3 p {font-size:76%; color:#444;}

.col1 h1 {
	font-size:86%;
	font-weight:300;
	color:#c5c5c5;
	text-shadow:1px 1px 2px #ddd;
	margin:0;
	padding:.9em 0 0.3em 0;
	border-bottom: 1px solid #c1c1c1;
}	

.col1 h3 {
	color:#666;
	font-size:130%;
}

.col1 h2 {color:#768601;}

.col3 h3 {
	font-size:100%;
	margin:.5em 10px 0 10px;
	color:#576301;
	
}

.col2 h3 {
	color:#768601;
	font-size:86%;
	font-weight:300;
	line-height:1.5em;
	padding:7px 10px;
	margin:0;
	display:block;
	border-bottom:1px solid #e5e6e7;
}

.col2 h3 br,
#home .col1 h2 br {display:block; margin-bottom:0.5em;}

.col2 h3.news-list:hover {background:#c9e400;}

.col2 h3.detail {font-size:90%; color:#555a5e}
.col2 h3.detail strong {color:#768601}

.col1 p {line-height:1.7em; color:#444}

.col1 ul {
	margin:0 0 15px 0;
	padding:0 0 0 26px;
	line-height:1.6em;
	color:#222;
    /*list-style:none outside url('../images/list_icon.jpg');*/
    list-style: none; /* Remove default bullets */
    
}

.col1 ul li::before {
  content: "\2688";  /* Unicode for BLACK CIRCLE WITH WHITE DOT RIGHT */
  color: #444; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1.5em; /* Also needed for space (tweak if needed) */
  margin-left: -1.5em; /* Also needed for space (tweak if needed) */
}

.col1 ul li ul {list-style:disc outside; margin:5px 0;}

.col1 strong, .col1 b {
	font-weight:400;
	color:#666;
	border-bottom:2px solid #555;
	
}

.col1 em {font-weight:400;}

.col1 strong.home {
	border:none;
}

.col1 strong.red {
	font-weight:400;
	color:red;
	border:none;
}

.col1 a strong.red {text-decoration:underline;}

.col1 a:hover strong.red {text-decoration:none; color:#fff;}

.col1 a {
	padding:0px 2px;
	text-decoration:underline;
	font-weight:400;
}

.col1 a:hover {
	padding:2px 2px 3px 2px;
	background-color:#c9e400;
	text-decoration:none;
}
a#amazon:hover {
    background-color: transparent;
}

.col1 a.scs {
	border:none;
	padding:0;
	text-decoration:none;
}

.col1 a.scs:hover, .col1 h3 a:hover {
	color:#768601;
	padding-left:0;
	text-decoration:underline;
	background-color:transparent;
}

.col1 a.scs:hover {
	cursor:zoom-in;
}

.col1 h3 a {
	padding-left:0;
	text-decoration:none;
}

.col1 a.logo {
	padding:0;
	margin:5px 15px 10px 0;
	float:left;
	text-decoration:none;
}
.col1 a.logo:hover, a.ditto_page:hover {background-color:transparent;}

/* 3 Column settings */

.threecol {
	background:#e5e6e7;	     		/* right column background colour */
}

.threecol .colmid {
	right:180px;						/* width of the right column */
	background:#fff;				/* center column background colour */
	border-right:1px solid #666;
}

.threecol .colleft {
	right:790px;					/* width of the middle column (geändert von 690 am 27.4.17) */
    background:#fff;	     		/* left column background colour */
	border-right:1px solid #666;
}

.threecol .col1 {
	width:770px;						/* width of center column content (column width minus padding on either side, geändert von 670 am 27.4.17) */
	left:1160px;						/* 100% plus left padding of center column (geändert von 1060 am 27.4.17) */
}

.threecol .col2 {
	width:180px;						/* Width of left column content (column width minus padding on either side) */
	left:200px;						/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}

.threecol .col3 {
	width:180px;						/* Width of right column content (column width minus padding on either side) */
	left:990px;						/* Please make note of the brackets here: (100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) (geändert von 890 am 27.4.17) */
}

/* News prev next */
#prevnext {
    display: flex;
    justify-content: space-between;
}


/* For devices from 640 to 1150 px */
@media screen and (max-width:1055px){
    .colmask{width: auto;}
    .threecol .colmid{right:0;border:none}
    .threecol .col3{width:0;left:100%;display:none;}
    .threecol .col2{left:20px}
    .threecol .col1{left:980px}
}
@media screen and (max-width:959px){.threecol .col2{width:0;left:0;display:none}.threecol .col1{left:790px}}

/* Footer styles */

#footer {
	clear:both;
	position:fixed;
	bottom:0px;
	width:100%;
	border-top:1px solid #222;
	background:#444;
}

#footer p {
	font-size:76%;
	padding:10px;
	margin:0;
	color:#fff;
}

#footer .right {float:right;}

#footer .left {float:left;}

#footer a {color:#fff;}

/* Submenu left column */

.menu-left ul {
	margin:0px;
	padding:0px;
	list-style:none;
	line-height:normal;
}

.menu-left li {
	height:21px;
	margin-bottom:1px;
	padding:8px 0px 2px 10px;
	background:#e5e6e7;
	color:#555a5e;
	font-size:86%;
}

.menu-left li:first-child {
	height:29px;
	padding:14px 0px 4px 10px;
	background:#FF33A6;
}

.menu-left li:first-child a {
	color:#fff;
	font-size: 14px !important;
}

.menu-left li:first-child.active a,
.menu-left li:first-child:hover a {
	color:#555a5e;
}
.menu-left a {text-decoration:none; color:#555a5e;}

.menu-left li:hover, .menu-left li.active  {
	background:#c9e400;
}

.menu-left h3 a {color:#777;}

/* Submenu right column */

.col3 ul {
	list-style:none;
	line-height:normal;
	margin:10px 10px 15px 10px;
	padding:0px;
	font-size:86%;
	color:#444;
}

.col3 li {padding-bottom:0.6em;}

.col3 li.active a, .col3 li a:hover {
	text-decoration:none;
	color:#576301;
}

/* Kontaktformular */

form {width:auto; padding: 0;}

fieldset {border:1px solid #999; background:#f1f1f1;}

label {
	float:left;
	width:130px;
	text-align:right;
	line-height:170%;
	padding:4px;
	margin-bottom:5px;
}

input[type=text], textarea {float:left; margin:0 0 15px 0;}

input, textarea {
    font-size: 0.9rem;
	padding:5px;
	background:#f5f5f5;
	color:#333;
	border:1px solid #999;
	width:390px;
	overflow:auto;
}

textarea {height:180px;font-family:Verdana, Helvetica, sans-serif;}

input:focus, textarea:focus {background:#c9e400; outline: none;}

input[type=submit] {
	float:left;
	width:auto;
	padding:4px;
	background-color:#f5f5f5;
	color:#333;
	border-color:#999;
	cursor:pointer;
}

legend {
	margin-left:1em; 
 	padding:0 1em;
 	color:#222; 
 	font-weight:300;
}

.errors {color:red;}

.errors strong {border:none; font-weight:300;}

table tr td {font-size:76%;}
table.formfeedback tr td {font-size:0.9rem;color:#768601}

.clearer {
	clear:both;
	margin:0;
	padding:0;
	font-size:.2em;
}
.clearleft {
	clear:left;
	border-bottom:1px solid #c1c1c1;
}
.clearright {
	clear:right;
}

/* Ditto Pagination */

.ditto_currentpage {
	padding:0 4px;
	border:1px solid #666;
	margin-right:4px;
	background:#c9e400;
}

a.ditto_page {
	padding:0 4px;
	border:1px solid #666;
	margin-right:4px;
	text-decoration:none;
}

a.ditto_page:hover {background:#c9e400; padding:0 4px;}

.clearleft + a.ditto_page {
	font-size:100%;
	line-height:normal;
}

/* Google Ads */

.col1 iframe {margin:-6px 0 -4px -5px;}

/* Alle Ads neben Screenshot */

a.ads, a.ads:hover {
    border:none;
	padding:0;
	text-decoration:none;
    background-color:transparent;
    cursor: alias;
}

/* Breadcrumbs */

p.breads {font-size:80%; color:#666;}

p.breads a, p.breads a strong {
	text-decoration:none;
	color:#666;
	padding:0;
	border:none;
}

p.breads a:hover, p.breads a:hover strong {
	text-decoration:underline;
	background-color:transparent;
	color:#768601;
	padding:0;
	border:none;
}

.pluseins {margin-bottom:10px;}

.clearleft + a {
	padding:0;
}

/* Sticky Header */

.sticky {
	background-color:#c6c6c6;
	border-top: 2px solid #c6c6c6;
	border-bottom: 2px solid #c6c6c6;
	position:fixed;
	/*width:100%;*/
	left:0;
	top:0;
	z-index:100;
	-webkit-box-shadow:0 10px 6px -6px #777;
	-moz-box-shadow:0 10px 6px -6px #777;
	box-shadow:0 10px 6px -6px #777;
}

/* Layoutänderungen 27.6.2014 */

.bg_grey {background-color:#e5e6e7;}

.bg_white {
	background-color:#ffffff;
	margin-bottom:10px;
	padding:10px 10px 20px 10px;
}

body.overview .bg_white {
	min-height:150px;
}
body.overview .no-min-height {min-height:0;}

.bg_white.start {
	margin-bottom:0px;
	padding:10px 10px 1px 10px;
}

.menu-left {background-color:#ffffff;}

.threecol .colmid {margin-top:10px;}

.threecol, .threecol .colleft, .threecol .colmid {
	background:transparent !important;
	border:none !important;
}

.col1, .col2, .col3 {padding-bottom:0em !important;}

.clearleft, #layoutdims {border-bottom:none !important;}

.col3 img {padding:0px !important;}

.col1 a.up {padding:0; float:right;}
.col1 a.up img {margin:0;}
.col1 a.up:hover {background-color:transparent;}

/* Cookie Hinweis */
.cc_container {
    background:#ccc !important;
    font-size:12px !important;
    font-family:Verdana, Helvetica, sans-serif !important;
    padding:8px 140px 9px 180px !important;
}
.cc_container .cc_btn {
    padding:6px !important;
    background-color:#666 !important;
    width:auto !important;
}

/* BESTSELLER */
div.flex img {
    display: block;
    width:300px;
    min-width:300px;
    flex-basis:300px;
    margin:12px 20px 20px 0;
    flex-shrink:0;
}
div.flex {
    display:flex;
    justify-content:space-between;
}
@media screen and (max-width:640px) {
    div.flex {
        display:block;
    }
}
.col1 div.start h1 {
    font-size:130%;
	font-weight:400;
	color:#768601;
	text-shadow:none;
	margin:.3em 0 .2em 0;
	padding:0 0 .2em 0;
}

/* Amazon-Links */
.col1 a.btn {
    display:block;
    width:140px;
    margin:20px auto;
    padding:10px 20px;
    color: #fff;
    background-color:#8a981e;
    outline:none;
    text-align:center;
    text-decoration:none;
    text-transform:uppercase;
    letter-spacing: 0.1em;
    box-shadow:0 4px 10px rgba(0,0,0,.3);
    border:1px solid #fff;
    font-weight:300;
}
.col1 a.btn:hover {
    background-color:#c9e400;
    color:#8a981e;
}