/* NAVIGATION */
.mcol{ width: 140px; float: left; margin-right: 10px;  margin-bottom: 30px;}
.mcol2{ width: 300px; float: left;}
.mcolbig{ width: 380px; height: 210px; float: left;}
.mcol li{font-size: 14px; height: 26px; padding: 10px 0; line-height: 16px;}
.mcol li a{ text-decoration: none; color: #171a21;}
.mcol li a:hover{ text-decoration: none; color: #7291b8;}
.mcol h3 a, .mcol2 h3 a{ text-decoration: none; font-size: 16px; color: #7291b8;}
.mcol h3 a:hover, .mcol2 h3 a:hover{ text-decoration: none; color: #7291b8;}
.mcol h3.sale a, .mcol h3.sale a:hover, .mcol2 h3.sale a, .mcol2 h3.sale a:hover{ color: #bd1f1f;}
.mt-28{ margin-top: 30px;}
.micon{ width: 16px; height: 16px; background-image: url('../nav/icon-sprite9.png'); background-repeat: none; display: inline-block; margin-bottom: -2px; margin-right: 5px;}
.micon.kiko{	background-position: 0 0;}
.micon.umode{	background-position: 0 -16px;}
.micon.baby{	background-position: 0 -32px;}
.micon.living{	background-position: 0 -48px;}
.micon.pflege{	background-position: 0 -64px;}
.micon.toys{	background-position: 0 -80px;}
.micon.diy{		background-position: 0 -96px;}
.micon.pets{	background-position: 0 -112px;}
.micon.ontour{	background-position: 0 -128px;}
.micon.kiwa{	background-position: 0 -144px;}
.micon.sale{	background-position: 0 -160px;}
ul.brandcol{  width: 575px; float: left; border-right: 1px solid #aaa; margin: 20px 20px 20px 0;}
@media (max-width: 800px){ ul.brandcol{  width: 400px; } }
ul.brandcol li, ul.brandcol li a{ width: 185px; height: 70px; display: block; float: left;}
ul.brandinfo{   float: left; width: 230px; margin-top: 20px;}
ul.brandinfo li{ display: none;}
ul.brandinfo li[data-brand="none"]{  text-align: center; padding: 25px 10px; display: block;}
ul.brandinfo li[data-brand="none"] h3{ color: #7291b8;}
ul.brandcol li { background-image: url('../nav/brand-sprite9.png'); background-repeat: none; }
ul.brandcol li[data-brand='steiff']{ 		background-position: -185px	0;}
ul.brandcol li[data-brand='ticket']{ 		background-position: -185px	-70px;}
ul.brandcol li[data-brand='kanz']{ 			background-position: -185px	-140px;}
ul.brandcol li[data-brand='belly']{ 		background-position: -185px	-210px;}
ul.brandcol li[data-brand='mop']{ 			background-position: -185px	-280px;}
ul.brandcol li[data-brand='lemmi']{ 		background-position: -185px	-350px;}
ul.brandcol li[data-brand='doell']{ 		background-position: -185px	-420px;}
ul.brandcol li[data-brand='pampolina']{ 	background-position: -185px	-490px;}
ul.brandcol li[data-brand='koenigsmuehle']{	background-position: -185px	-560px;}
ul.brandcol li[data-brand='steiff']:hover{ 			background-position: 0	0;}
ul.brandcol li[data-brand='ticket']:hover{ 			background-position: 0	-70px;}
ul.brandcol li[data-brand='kanz']:hover{ 			background-position: 0	-140px;}
ul.brandcol li[data-brand='belly']:hover{ 			background-position: 0	-210px;}
ul.brandcol li[data-brand='mop']:hover{ 			background-position: 0	-280px;}
ul.brandcol li[data-brand='lemmi']:hover{ 			background-position: 0	-350px;}
ul.brandcol li[data-brand='doell']:hover{ 			background-position: 0	-420px;}
ul.brandcol li[data-brand='pampolina']:hover{ 		background-position: 0	-490px;}
ul.brandcol li[data-brand='koenigsmuehle']:hover{ 	background-position: 0	-560px;}
/* main CSS cheats */
.sub-navigation{ background-color: #f9f9f9;}
.sub-navigation .inner{ min-height: 300px; }
nav ul.nav li.level0 > a:hover, nav ul.nav li.level0.active > a{ color: #7291b8;}
nav ul.nav li.level0 > a:hover{ background: #f9f9f9;}
.header-container, .main-container, body .offcanvas-left {   top: 0;}
nav .account{ top: 10px;}
nav .searchform{ top: 55px;}
nav .navigation{top: 45px;}
nav ul.nav li.level0.nav-4 > a:hover, nav ul.nav li.level0.nav-4.active > a{ color: #df4211;}
nav ul.nav li.level0.nav-4 > a:hover{ background: #f9f9f9;}

/* CATEGORY */
#catteaser { list-style: outside none none; margin: 0; padding: 0;}
.t1 a, .t2 a, .t3 a{background-position: center; background-repeat: no-repeat; overflow: hidden;}
#catteaser li { height: 240px; float: left;}
.t1, .t2, .t3{ margin: 1%;}
.t1{width: 31.3%;}
.t2{width: 64.6%;}
.t3{width: 98%;}
@media (max-width: 725px) { 
.t1, .t2, .t3{ margin: 1%;}
.t1{width: 48%;}
.t2{width: 98%;}
.t3{width: 98%;}
}
/*
.t1 { width: 240px; margin: 0 14px 14px 0;}
.t2 { width: 494px; margin: 0 14px 14px 0;}
.t3 { width: 748px; margin: 0 14px 14px 0;}
*/
.large { height: 350px !important;}
.last { margin-right: 0 !important;}
.wleft { left: 23px !important;}
.wlayer h3 {	font-size: 20px; line-height: 24px; margin: 0; text-transform: none;}
.wlayer p {	font-size: 12px; line-height: 12px; margin: 2px 0 0; padding: 0; text-transform: uppercase;}

#catteaser{ float: left;}

#catteaser li a {
	display: block; overflow: hidden;
	height: 100%; width: 100%;
	text-decoration: none;
}
#catteaser li a .wlayer {
	border-top-left-radius: 5px; border-top-right-radius: 5px;
	color: #525252; text-align: center;
	margin: 0 auto; padding: 5px; 
	position: relative;
	width: 195px; height: 70px;
}
#catteaser li a .wlayer {		top: 190px; background-color: rgba(254, 254, 254, 0.80);}
#catteaser li a:hover .wlayer {	top: 187px; background-color: rgba(254, 254, 254, 0.95);}
#catteaser li a:hover .wlayer p {color: #5e7898;}
#catteaser.belly	li a:hover .wlayer p {color: #930045;}
#catteaser.komu		li a:hover .wlayer p {color: #2e6794;}
#catteaser.lemmi	li a:hover .wlayer p {color: #e30613;}
#catteaser.pampo	li a:hover .wlayer p {color: #df0066;}
#catteaser.ticket	li a:hover .wlayer p {color: #e30613;}
/* noch nicht definiert */
#catteaser.mop		li a:hover .wlayer p {}
#catteaser.kanz		li a:hover .wlayer p {}
#catteaser.doell	li a:hover .wlayer p {}
#catteaser.steiff	li a:hover .wlayer p {}


/* HOME */
.header-container .inner{ max-width: 1098px;}
#homewrapper{ width: 100%; max-width: 1200px; margin: 30px auto;}
#hometeaser{ width: 100%; list-style: none outside none; margin: 10px auto; padding: 0;}
.col, .slider{ float: left;}
.col ul, .col-wide ul{ width: 100%; list-style: none outside none; margin: 0; padding: 0;}
.col ul li, .col-wide ul li{ display: block; float: left; padding: 0;}
.t1, .t2, .t3{background-position: center; background-repeat: no-repeat; overflow: hidden;}
.t1{ height: 300px;}
.t2{ height: 200px;}
.t3{ height: 400px;}
.t-opt{ display: none; visibility: hidden; position: absolute; }
.t1 a, .t2 a, .t3 a{ display: block; height: 100%; text-decoration: none; margin: 0; padding: 0;}

.tlabel{
	height: 80px; width: 220px; position: relative; 
	margin: 0 auto; background: rgba(254, 254, 254, 0.8); border-top-left-radius: 5px; border-top-right-radius: 5px;
	text-align: center;}
.tlabel h2{font-size: 20px; line-height: 24px; color: #171a21; margin: 0; padding: 10px 0 0;}
.tlabel p{font-size: 16px; color: #171a21; margin: 0; padding: 0;}
a:hover .tlabel p{color: #7291b8;}
.t1 .tlabel{	top: 240px;}
.t1 a:hover .tlabel{	top: 230px; background:rgba(254, 254, 254, 0.90);}
.t2 .tlabel{	top: 140px; }
.t2 a:hover .tlabel{	top: 130px; background:rgba(254, 254, 254, 0.90);}
.t3 .tlabel{	top: 340px; }
.t3 a:hover .tlabel{	top: 330px; background:rgba(254, 254, 254, 0.90);}

.slider{ width: 100%; list-style: none outside none; margin:0 auto; padding: 0; height: 365px; overflow: hidden; position: relative;} 
.slide{ width: 97.9%; margin: 0 1.05%; height: 365px; padding: 0; overflow: hidden; position: absolute; background: #f3f3f5; background-position: center; background-repeat: no-repeat; overflow: hidden;}
.slide a{display: block; height: 100%; text-decoration: none; margin: 0; padding: 0;}
.slidenav{position: absolute; zindex: 999; bottom: 0; left: 45%; height: 30px; width: 10%; min-width: 100px; background: rgba(254, 254, 254, 0.8); border-top-right-radius: 5px; border-top-left-radius: 5px; padding: 5px; text-align: center;}
.slidenav button.active{ background: red;}
.slidenav button:hover{ background: blue;}

.slidenav  div {background: transparent url("bullet.png") no-repeat scroll 0 0; display: inline-block; font-size: 0; height: 11px; margin: 0 4px; overflow: hidden; width: 11px;}
.slidenav  div.active, .slidenav div.active:hover {background-position: 0 -11px; cursor: auto;}
.slidenav  div:hover{background-position: 0 -22px; cursor: pointer;}
	
/* 4spaltig */
.col{ width: 25%;}
.col ul li, .col-wide ul li{ width: 91.6%; margin: 4.2%;}

/* 3spaltig */
@media (max-width: 1200px) { 
	.col{          width: 33.333%;} 
	.col.col-wide{ width: 100%} 
	.col ul li{     width: 93.6%;  margin: 3.15%;}
	.col-wide ul li{width: 31.23%; margin: 1.05%;} 
	.t-opt{display: block; visibility: visible; position: static;} 
}	
	
/* 2spaltig */
@media (max-width: 895px){ 
	#homewrapper{ max-width: 895px;}
	.col, .col.col-wide{width: 50%;} 
	.col ul li, .col-wide ul li{ width: 95.9%; margin: 2.1%;}
	.t-opt{ display: none; visibility: hidden; position: absolute;}
	.brand{ margin: 3px;}
	ul.slide  ul{ text-align: center; list-style: none outside none;  padding: 0; margin: 20px 5% 0;}
}

/* 1spaltig */
@media (max-width: 600px){ 
	.col, .col.col-wide{ width: 100%;} 
	.col ul li, .col-wide ul li{  width: 97.9%; margin: 1.05%;}
	.slider, .slide{ height: 280px;}
	.slide{ background-size: auto 280px;}
}

.little-info{ margin-top: 20px; padding: 20px;}
.little-info, .little-info h1, .little-info h2, .little-info p{ color: #666; font-family: "corehumanistsansregular", "gudea-regular", arial, sans-serif;} 
.little-info h1{  font-size: 20px; line-height: 24px; font-weight: bolder; margin-bottom: 10px;}
.little-info h2{ font-size: 16px; font-weight: bolder; }
.little-info p{ font-size: 14px;  padding: 0; margin-bottom: 12px;}

/* FOOTER */
a#marg-ship:before { background-image: url('../footer/shipping2.png');}
a#marg-support:before { background-image: url('../footer/support2.png');}
a#marg-return:before { background-image: url('../footer/return2.png');}

/* MOBILE Buttons*/
#mobileLinks{ display: none;}
@media (max-width: 1020px){
	#mobileLinks .button{ margin: 5px; font-size: 18px; line-height: 24px; padding: 5px 40px;}
	#mobileLinks{ text-align: center; clear: left; display: block;}
}

/* VK frei Banner*/
.vkbanner{ position: absolute; z-index: 999;}
@media (min-width: 640px){
	.vkbanner{ top: 20px; left: 170px; width: 250px; height: 40px;}
	.vkcontent span::before {content: ' '; display: block;}
	.vkcontent span{ font-size: 14px; font-weight: normal;}
	.vkbanner img{ height: 40px; margin-right: 10px; float: left;}
	.vkcontent{ display: inline-block; font-weight: bolder; color: #bd1f1f; font-size: 16px; line-height: 18px;}
}
@media (max-width: 1020px){
	.vkbanner{ top: 40px; left: 300px;}
}
@media (max-width: 640px){
	.vkbanner{ position: absolute; z-index: 999; top: 0; left: 0; width: 100%; height: 25px; padding: 2px; background: #ffe6e6; border: 1px dotted #bd1f1f;}
	.vkbanner img{ height: 20px; margin-right: 10px; float: left;}
	.vkcontent{ display: inline-block; float: left; font-weight: bolder; color: #bd1f1f; font-size: 16px; line-height: 16px;}
	.vkbanner .inner{ width: 300px; margin: 0 auto;}
}

.sizeWarning{ font-size: 12px; background: #efbcb8; border-radius: 5px; padding: 3px; text-align: center;}