/* ..................................................................................................  
   DS FRAME
   .................................................................................................. */   

.DS-Frame h1 { font-weight:100; font-size: 200%; color: #152541; margin: 25px 0 0 0; padding-bottom: 10px }
.DS-Frame h3 { font-weight:400; font-size: 100%; color: #152541 !important }
.DS-Frame h2 { font-weight:400; font-size: 150%; color: #152541 !important }
.DS-Frame input[type=text], .DS-Frame input[type=password], textarea { border: 1px solid silver; border-radius: 3px; padding: 8px 8px; margin-bottom: 10px; font-size: 110% }
.DS-Frame input.items-count { background: none; border: none;width: 50px; text-align: center }
.DS-Frame div.box-1-3 { width: 31%; margin: 1% 2% 1% 0; float: left }
.DS-Frame div.box-1-3 h2, div.box-1-2 h2 { font-size: 140%; margin: 0 0 10px 0; color: #616161 }
.DS-Frame div.box-1-2 { width: 48%; margin: 1% 2% 1% 0; float: left }
.DS-Frame div.box-1-2 h1, div.box-1-3 h1 { margin-left: 0px }
.DS-Frame .user-dialog label { display: block;   }
.DS-Frame .user-dialog label em { color: red}
.DS-Frame .incorrect { background: #ff8e8e; border-color:red }
.DS-Frame .correct { background: #a8f2a8 }
.DS-Frame .button { width: auto;  float: none; position: relative; display: inline-block; padding: 8px 10px; font-size: 13px; font-weight: bold; color: #333; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9); white-space: nowrap; background-color: #EAEAEA; background-image: -moz-linear-gradient(#FAFAFA, #EAEAEA); background-image: -webkit-linear-gradient(#FAFAFA, #EAEAEA); background-image: linear-gradient(#FAFAFA, #EAEAEA); background-repeat: repeat-x; border-radius: 3px; border: 1px solid #DDD; border-bottom-color: #C5C5C5; /*box-shadow: 0 1px 3px rgba(0, 0, 0, 0.075);*/ vertical-align: middle; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-appearance: none; margin: 0 5px 5px 0px; }
.button.faw { font-family: FontAwesome; }
.w10 { width: 10% }
.w30 { width: 30% }
.w50 { width: 50% }
.w80 { width: 80% }


v.hover { height: 5px; width:0px; margin: 15px auto 0 auto; transition:width .3s ease }

div.cart-status { display:inline; margin-right:15px; border-radius:15px; padding:4px 15px; border:none; color:#fff; background:#52AE3A }
div.cart-status:hover { background: #41cb1f }
div.cart-status .count { background: #fff; font-weight: bold; color: #52AE3A; height: 25px; width: auto; height: 1.5em; border-radius: 1em; line-height: 1.5; min-width: 1.5em; padding: 1px; text-align: center; font-size: 80%; margin: -2px 0 0px; }




/* CATEGORY TREE LIST */
.sub-cats-container { width: 20%; }
nav.sub-cats { max-width: 90%; transition:margin-top .3s ease }
nav.sub-cats a { display: block; padding: 6px 8px; border-bottom: 1px solid #fff }
nav.sub-cats a.root-cat { background:#fff; color: #52AE3A; text-decoration: none; font-size: 130% }
nav.sub-cats a.category { background:#52AE3A; color: #fff; text-decoration: none; transition:all .2s ease; font-weight: 400 !important }
nav.sub-cats a.category.current { font-weight: 500 !important}

nav.sub-cats a.category.red { background:#E1001A }
nav.sub-cats a.category.cyan { background:#1C9581 }
nav.sub-cats a.category.blue { background:#0D4490 }
nav.sub-cats a.category.green { background:#30A631 }
nav.sub-cats a.category.brown { background:#3E0705 }
nav.sub-cats a.category:hover { padding-left: 10px }
nav.sub-cats a.root-cat:hover { font-weight: 500 }


/* SUB CAT BOXES */
.sub-cat-box { width: 31% !important; float: left; margin: 0 1% 25px 1%; /*background:#f8f8f8;*/ box-sizing: border-box  }
.sub-cat-box div.cont { padding:18px 10px; height: 120px; overflow: hidden }
.sub-cat-box div.cont h2 { font-size: 170%}
.sub-cat-box div.cont figure { width: 25%; float: left; overflow: hidden; text-align: center;}
.sub-cat-box div.cont figure i.fa { font-size: 600% }
.sub-cat-box div.cont article { width: 70%; float: right }
.sub-cat-box div.cont:hover { border-color: #53B036 }
.sub-cat-box .hover { background:#53B036 }
.sub-cat-box:hover .hover { width: 100% }
.sub-cat-box.red h2 { color:#E1001A }
.sub-cat-box.cyan h2 { color:#1C9581 }
.sub-cat-box.blue h2 { color:#0D4490 }
.sub-cat-box.green h2 { color:#30A631 }
.sub-cat-box.brown h2 { color:#3E0705 }
.sub-cat-box.red .hover { background:#E1001A }
.sub-cat-box.cyan .hover { background:#1C9581 }
.sub-cat-box.blue .hover { background:#0D4490 }
.sub-cat-box.green .hover { background:#30A631 }
.sub-cat-box.brown .hover { background:#3E0705 }


/* NUTRIN colors */

.colEquine   { color:#5c2511 !important}
.colComplete { color:#009a9c !important}
.colNature   { color:#11913e !important}
.colAquarium { color:#009FE3 !important}
.colSnack    { color:#7b2a80 !important}
.colPond     { color:#e40613 !important}
.colSticks   { color:#d20059 !important}
.colZOO      { color:#687236 !important}
.colDarwins  { color:#e11f1c !important}
.colClassic  { color:#36167b !important} /*53B036*/
.bgEquine    { background:#5c2511 }
.bgComplete  { background:#009a9c }
.bgNature    { background:#11913e }
.bgAquarium  { background:#7b2a80 }
.bgSnack     { background:#7b2a80 }
.bgDarwins   { background:#e11f1c }
.bgPond      { background:#e40613 }
.bgSticks    { background:#d20059 }
.bgZOO       { background:#687236 }
.bgClassic   { background:#36167b }


/* ITEMS LIST BOX */
span.category-master { display: inline-block; padding: 4px 8px; background:#52AE3A; margin-right: 15px  }
span.category-master a { color: #fff; text-decoration: none }
span.category-links a { padding: 16px 15px 0px 0; font-size: 120%; font-weight: 400; white-space: nowrap; display: inline-block }

.item a.root-cat { white-space: nowrap }

.item-box { float: left; box-sizing: border-box; height: 370px; margin: 0 1% 20px 1%; border-top: 3px solid #fff; padding: 5px; background:#fff; position: relative; overflow: hidden }
.item-box.per3 { width: 31%; }
.item-box.per4 { width: 23%; }

.item-box .hover { height: 4px; width:0px; margin: 15px auto 0 auto; transition:width .3s ease; border-radius: 3px }
.item-box:hover .hover { width: 100% }

.item-box .top-notes { position: absolute; top:0px; left: 0px; width: 100% }
.item-box .top-notes.sale { border-top:3px solid #ff5700 }
.item-box .top-notes.new { border-top:3px solid #ffca00 }
.item-box .top-notes span { display: inline-block; float: right; margin-right: 8px; padding:3px 10px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px }
.item-box .top-notes span.sale { background: #ff5700; color: #fff }
.item-box .top-notes span.new { background: #ffca00; color: #055478 }


.item-box .image { height: 150px; padding: 10px; text-align: center; overflow: hidden }
.item-box .image img { max-width: 100%; max-height: 150px }
.item-box .image .dyna-image { opacity: .2; transition:opacity .5s ease-out }
.item-box .text { padding: 5px; overflow: hidden; position: relative; text-align: center }
.item-box .text em { font-weight: 500; font-style: normal; font-size: 110% }
.item-box .text em img {  vertical-align: middle; margin-right: 6px; display: inline-block; margin-bottom: 10px }
.item-box .text h3 a { text-decoration: none; color: #4a4a4a }
.item-box .text .item-description { border: 1px solid #f3f3f3; color: #5d5d5d; border-bottom: none; border-left: none; border-right: none; padding: 8px 0; line-height: 140%;}
a p.item-description { text-decoration: none !important}

.descrpt-box { position: relative }
.descrpt-box .variant-bar { position: absolute; left: 0; top:0; width: 100%; height: 80px; opacity:0; overflow: hidden; background: #fff; transition:all .3s ease }
.item-box:hover .descrpt-box .variant-bar {  opacity: 1 }


.bar-row {  }
.bar-row div { background:#52AE3A; color: #fff; border-radius: 3px; padding: 5px 10px; width: 50%; margin: 0 auto; cursor: pointer }
.bar-row div.added { background:#52AE3A }
.bar-row div input { width: 25px; border: none; border-radius: 2px; padding: 3px 0; margin-right: 8px; text-align: center; background: #fff }
.bar-row div span { text-align: center; font-weight: 500; font-size: 110% }



/* ITEM PAGE */
.item {  }
.item h1.product-title { padding: 0px !important; margin: 8px 0 0 0; line-height: 130% }
.item h1.product-title img { max-height: 40px; margin-right: 10px; margin-bottom: 7px; vertical-align: middle}
.item em { font-style: normal; display: inline-block; padding-left: 53px; padding-bottom: 20px; font-weight: 400; font-size: 130% }
.item .image-side { width: 30%; float:left; text-align: center; padding-top: 25px }
.item .image-side img.big-image { max-height: 400px; max-width: 100% }

.item .content-side { width: 65%; float:right; padding-top: 15px; box-sizing: border-box; }
.item .content-side ul li { padding: 0 !important; margin: 0 !important }
.item .price { font-size: 180%; display: inline-block; padding: 8px 5px 8px 0; letter-spacing: 1px }
.item strike { color: silver }
.item .real-price { color: #000; font-weight: 500 }
.item .real-price .vat-excluded { font-size: 60%; font-weight: 100; color: gray }
.item .MOC { font-size: 120%; font-weight: 100; color: #000 }
.item .sale { color:#fff; background: #ff5700; display: inline-block; border-radius: 15px; font-weight: 500; padding: 5px 16px 3px 16px; font-size: 130%; margin-right: 20px }
.item .new { color:#055478; background: #ffca00; display: inline-block; border-radius: 15px; font-weight: 500; padding: 5px 16px 3px 16px; font-size: 130%; margin-right: 20px }
.item .onstock{ display: inline-block; color: #41c100; font-size: 110%  }
.item .delivery-info { display: inline-block; color: #000; background:#f7f7f7; padding: 4px 6px 1px 6px; font-size: 110%  }
.item .text .delivery-info i { color: gray; font-size: 120% }

.item .add-to-cart { width: 100%; max-width: 220px; float: left; margin: 15px 0; cursor: pointer; overflow: hidden}
.item .add-to-cart div { background:#52AE3A; color: #fff; border-radius: 3px; padding: 15px 8px; height: inherit; text-align: center }
.item .add-to-cart div.added { color: #52AE3A; border: 1px solid #52AE3A; background: #fff }
/*background:#ffca00; color: #002541;*/
.item .add-to-cart div input { width: 45px; font-size:120%; border: none; border-radius: 2px; border:none; padding: 3px 0; margin-right: 8px; text-align: center; background: #ebf1e8 }
.item .add-to-cart div span { text-align: center; font-weight: 500; font-size: 110% }
.item button.watchdog { background:#c7c7c7; color: #fff; border-radius: 3px; padding: 5px; font-size: 110%; border: none; margin: 15px 0 0 0; padding: 10px 25px }

.item .quest { width: 45%; float: right; margin: 15px 0; padding: 20px 0 0 0; cursor: pointer; text-align: center; color:#52AE3A  }
.item .quest:hover { font-weight: 500 }

a.downloadfile { text-decoration: none !important}

h3.releated { text-align: center; font-weight: 200 !important; font-size: 160%; padding: 25px 0 }

.item-box.releated { max-height: 250px; text-align: center; background: none; border: 1px solid #fff; position: relative; }
.item-box.releated a.no-decore * { text-decoration: none}
.item-box.releated:hover .hover { width: 100% }
.item-box.releated a h3 { display:  inline-block; line-height: 120%; height: 50px }
.item-box.releated p.img { text-align: center; overflow: hidden }
.item-box.releated p.img img { max-height: 130px }

.text-product-content h2, .text-product-howto h2 { margin: 0; padding: 0 0 8px 0; font-size: 120% }
.text-product-content, .text-product-howto { box-sizing: border-box; color: #3c3c3c; line-height: 150%; padding:25px; margin: 15px 0; background: #f6f6f6; border-radius: 6px;}

.item img.nnx-img { vertical-align: middle; margin: 8px 15px 8px 0; float: left }
.item .nnx-col h3 { margin-top: 15px; font-size: 150%; margin-bottom: 0; padding-bottom: 0}

.variant-box { border: 1px solid #f3f3f3; border-radius: 5px; float: left; min-width: 100px; text-align: center; padding: 0 15px; margin-right: 10px; cursor: pointer}
.variant-box small { font-size: 80% }
.variant-box:hover { border-color: gray;}
.variant-box img { height: 60px}


#pop_preview { background: #fff !important; box-shadow: 1px 1px 8px 2px gray }
#dsk_pop .pop-inside .item-preview { margin: -25px 15px 15px 15px }
#dsk_pop .pop-inside .item-preview * { color: black; text-align: left; }
#dsk_pop .pop-inside .item-preview h1 { font-weight: 500; font-size: 120%; margin-bottom: 12px }
#dsk_pop .pop-inside .item-preview .image { width: 100%; float: left; text-align: center }
#dsk_pop .pop-inside .item-preview .image img { max-width: 100% }
#dsk_pop .pop-inside .item-preview .text { width: 100%; float: right }

/* POP */
#dsk_pop  { display: none; position: fixed; left: 0; top:0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.4); font-size: 100%; z-index: 100 }
#dsk_pop .pop-inside { max-width: 600px; margin: 100px auto 0 auto; background: #279741; color:#fff; border-radius: 5px; padding: 50px 15px 25px 15px ; text-align: center }
#dsk_pop .pop-inside h1 { font-size: 160%; color: #fff  }
#dsk_pop .pop-inside .selector { width: 50%; float: left }
#dsk_pop .pop-inside .selector p, #dsk_pop .pop-inside .button { width: 96%; margin: 0 3%; padding: 15px 0; border:1px solid rgba(255, 255, 255, 0.5); border-radius: 3px; text-align: center; transition:all .2s ease; font-weight: 500 }
#dsk_pop .pop-inside .selector p:hover { background:#fff; color:#279741; cursor: pointer }
#dsk_pop .pop-inside button { font-size: 100%; color: black; cursor: pointer  }

.pinquiry input[type=text], .pinquiry textarea { width: 90%; margin: 0 4% 10px 4%; padding: 6px 5px; font-size: 110%; color: #000; border-radius: 2px }



/* ..................................................................................................  
   CART	
   .................................................................................................. */   
.cart-table { width: 100% }
.cart-table th { font-weight: 100; color: gray; border-bottom: 1px solid silver; vertical-align:bottom; text-align: left }
.cart-table td input.items-count { }
.cart-table tr.item-line td { border-bottom: 1px solid #ededed; vertical-align: middle; padding: 8px 0 }
.cart-table tr.item-line:hover td { background:#f6f6f6 }
.cart-table small { color: silver; font-size: 90% }
.cart-table td.total { font-size: 150%; color: #000 }
.cart-table .right-pad { text-align: right}

/* ..................................................................................................  
/* SHIPPING 
 .................................................................................................. */   
#PostMethodsList { min-height: 50px }

.post-method-box { cursor: pointer; width: 15.6%; float: left; margin: 0 .5% 15px 0.5%; box-sizing: border-box; border: 1px solid silver; background: #f4f4f4; border-radius: 4px; padding: 8px }
.post-method-box:hover { background: silver }

table.postage-selection { width: 100%  }
table.postage-selection th { background: #fff; text-align: left; font-weight: normal; color: #000; padding: 8px 8px 0 8px; }
table.postage-selection td { padding: 8px; background:#f4f4f4; border-bottom: 3px solid #fff; cursor: pointer }
table.postage-selection tr:hover td { background:silver }

/* ..................................................................................................  
/* CLIENT ZONE */
/* ..................................................................................................  */
.listing-table { width: 100% }
.listing-table th { text-align: left; font-weight: 400; border-bottom: 1px dotted black; padding:0 8px 4px 8px }
.listing-table td { padding: 8px; cursor: pointer; background:#f7f7f7; border-bottom: 1px solid #fff  }
.listing-table tr:hover td { background: #279741; color: #fff }




/* ..................................................................................................
   ..................................................................................................
   ..................................................................................................
   ..................................................................................................
   ..................................................................................................
   .................................................................................................. */


   

@media screen and (max-width: 820px) { 
	
	header .top-navi { display: none }
	
    nav a .dept { font-size: 80%; line-height: 125% }	
    nav a .dept img { display: none }
    nav .dept.right { border-right: none }
	
	main article.nnx-cms.container { margin: 25px auto; padding: 0 10px }		
	
	.param-search { width: 100%; margin: 25px 0 }	
	
    .sub-cat-box img { max-width: 100%}	
	.sub-cats-container { width: 100%; background: yellow; padding: 0; margin: 0;  }
	nav.sub-cats { width: 100%; max-width: 100% }	
	
    .nnx-cms h1.product-title { margin: 50px 0 10px 10px; padding: 0}	
    .CatDescription { padding: 10px }
	
	.item-box.per3 { width: 48%; }
	.item-box.per4 { width: 31%; }
	
	nav.navi-bottom {  }
	nav.navi-bottom .dept { height: 80px; padding: 10px }	
	
	footer { padding: 25px 15px; box-sizing: border-box }
	footer .logo { text-align: left}	
	
}

@media screen and (max-width: 680px) {
	
    header .top-strip .container{ background: none }    
    header .top-strip { background:#152541; color: #ffca00; height: 170px }    
    
	.logo { width: 100%; padding: 8px; text-align: center; padding-bottom: 0 }
	.logo img { max-width: 100%; max-height: 45px }
	.search { width: 90%; margin-left: 8%; float: left; text-align: center;}	
	.cart { width: 100%; float: right; text-align: center; position: relative; margin-top: 10px }	
	
	
	.sub-cat-box { width: 100%; float: left; margin: 0 0 25px 0; background:#f8f8f8; box-sizing: border-box  }   
	.item-box.per3 { width: 48%; }
	.item-box.per4 { width: 48%; }
	
	.ico-preview { visibility: hidden }	
	
	h3.releated { text-align: center}
	
	.item .image-side { width: 100%; float:left; text-align: center; padding-top: 15px }
	.item .content-side { width: 100%; float:right; padding-top: 5px }
}


@media screen and (max-width: 520px) {
	
   .slider-container { display: none }	
   
   div.cart-status { display: block; width: 90%; margin-bottom: 10px }
   
   nav .dept { width: 33%; height: 80px; float: left; box-sizing: border-box; border-left: 1px solid #dbdcdb; border-bottom: 1px solid #dbdcdb; padding: 8px; text-align: center; font-size: 90%; line-height: 115% }

   nav a .dept { color:#152541; cursor: pointer; transition:all .2s ease }
   nav a .dept img { margin-bottom: 5px }
   nav a:hover .dept { background: rgba(20, 36, 64, 0.6); color: #fff }
   
   .item em  { padding: 10px }
   
   nav.navi-bottom { width: 100%; background: #f5f5f5; border-top: 1px solid #dbdcdb; border-bottom: none; margin-top: 60px }
   nav.navi-bottom .dept { height: 5em; }   
   
   .item-box { height: auto; margin: 0 0 20px 0; border-bottom: 15px solid #fff; border-top: 3px solid #fff; padding: 5px; background:#f8f8f8; position: relative }
   .item-box.per3 { width: 100%; margin: 0px  }
   .item-box.per4 { width: 100%; margin: 0px }
	
   footer { padding: 25px 15px; box-sizing: border-box; text-align: center }
   footer .logo { text-align: center}			
   footer .impressum { width: 100%; text-align: center }
   footer .author {  width: 100%; text-align: center }
}