/*PRODUCTS*/
#products{position:relative}
.noresults{font-size:21px;text-align:center;margin:80px 0;display:none}
.prod{width:33.3%;display:inline-block;position:relative;border:1px solid #eee;border-top:0;padding:20px;text-align:center;margin:-0.5px;border-radius:3px;overflow:hidden;vertical-align:bottom;transition:0.3s}
.prod:hover{box-shadow:1px 1px 50px #eee;z-index:10}
.prod a{text-decoration:none}
.prodname{font-size:19px;cursor:pointer;display:block}
.prodprice{font-size:17px;font-weight:400;border-radius:3px;color:#444;margin:0 6px;display:inline-block}
.prodprice .hprice, .hprice{font-size:17px;color:#b50000;text-shadow:0 0 10px #fff}
.prodid{font-size:11px;font-style:italic;color:#888}
.manufacturer{font-size:13px;color:gray;text-decoration:italic}

.prod .prodpic img{max-width:90%;max-height:140px}
.prod .prodpic{margin:30px 0;height:140px;position:relative;display:flex;align-items:center;justify-content: center;}

.prod .mask{position:absolute;width:100%;height:100%;top:0px;cursor:pointer}

.prod .pic,.prodview .pic{outline:0}
.pic.extra{display:none}

.prod .button{background:transparent;color:var(--main-color)}
.prod:hover .button{background:var(--main-color);color:#fff}

.prodcurrency{color:#888}
.prodoldprice{color:#999;text-decoration:line-through;font-size:13px}
.prodinfo{color:#444}
.instock,.outofstock{width:30px;height:60px;background:#9acd32;transform:rotate(45deg);position:absolute;right:-34px;bottom:-40px}
.outofstock{background:transparent}

.prodvariations{position:absolute;background:#fff;color:#666;padding:0;z-index:10;width:100%;bottom:50px;text-align:center;overflow:hidden;border-radius:3px;display:none;box-shadow:0 0 10px rgba(0,0,0,0.1)}
.prodvariations div{padding:10px;border-bottom:1px solid #eee}
.prodvariations div:hover{color:#222;background:#eee}

.new{position:absolute;background:#c00;color:#fff;padding:7px;border-radius:0 0 3px 0;text-transform:uppercase;font-size:14px;left:0;top:0;z-index:1}
.reduced{position:absolute;color:#c00;padding:7px 10px;font-size:17px;right:0;top:0px;z-index:1;background:#eee;border-radius: 0 0 0 5px}
.facts{color:#555;font-size:12px;display:block}
.connected .facts{display:none}

.hotproducts{margin:auto;position:absolute;white-space:nowrap;overflow-y:hidden;overflow-x:auto;padding-top:40px;height:440px;clear:both;left:0px;right:0px}
.hotproducts .prod{box-shadow:none;margin-top:0;box-shadow:none;display:inline-block; float:none;border:0;vertical-align:top}
.hotproducts .prod:hover{box-shadow:0px 0px 50px #eee}
.hotprodspacer{margin-top:430px}
.usescroll{background:url('/images/usescroll.png') center no-repeat;background-size:180px;height:20px;width:100%;padding-top:70px}
.bodycontainer .hotproducts{padding-top:10px}
.bodycontainer .usescroll{position:absolute;padding:0}
.scrollleft{background:url(/images/hor_scroll_left.png) center no-repeat;left:1%}
.scrollright{background:url(/images/hor_scroll_right.png) center no-repeat;right:1%}
.scrollleft,.scrollright{background-size:80%;width:30px;height:50px;top:220px;z-index:1}

.filter{width:auto;float:right;font-size:13px;background:#fff;margin:4px;border-radius:3px;margin-top:15px;border:1px solid #eee}
.filters,.rentfilters{color:#111;background:#f5f5f5;margin:2px;border-radius:3px;display:block;position:relative;text-transform:capitalize;padding:8px 10px;display:hidden;transition:0.3s}
.filters:hover,.rentfilters:hover{background-color:var(--light-gray2)}
.filters{padding:4px 9px;border-radius:20px}
.filters.active:hover{background:var(--main-color);opacity:0.8}
.filters.active{padding-left:32px}
.filters .close{position:absolute;left:7px;top:7px;width:18px;padding:1px;background:rgba(255,255,255,0.9)}
.filtergroup{padding:5px 0;margin:3px 10px;border-radius:3px;border-bottom:1px solid #eee}
.filtergroup h4,.pricerange h4{padding:5px;margin:4px;margin-bottom:0}
.pricerange{padding:0;margin:0 10px;padding-bottom:10px;border-bottom:1px solid #eee}
.rentfilters.active{background:var(--main-color);color:#fff}
.filterbar a,.rentfilterbar a{text-decoration:none}
.filterbar,.rentfilterbar{margin-bottom:10px;margin-top:10px;display:block}
.resetfilter{display:none;clear:both;white-space:nowrap;text-decoration:none;padding:0 10px 5px 5px;border-radius:20px;position:absolute;right:5px;top:5px;transition:0.3s}
.resetfilter .close{width:22px;position:relative;display:inline-block;top:5px;right:auto;padding:3px;margin-right:5px}

.hidehotproducts{position:absolute;left:50%;margin-left:-20px;top:-1px;width:40px;height:15px;background:#eee;padding-bottom:3px;border-radius:0 0 3px 3px;text-align:center;color:#fff;font-size:34px;padding-right:3px;line-height:16px;letter-spacing:-3px}
.hidehotproducts:hover{background:#ccc;color:#fff}

.connectedproducts{margin-top:20px;padding-top:40px;border-top:2px solid #eee}
.connectedproducts .prod .prodinfo,.connectedproducts .prod .pic.extra{display:none}
.connectedproducts .prod .prodname{font-size:15px}
.connectedproducts .prod .addtocart{margin-right:10px}
.prodview,.connected{width:100%;margin:auto;position:relative}
.connected hr{height:1px;background:#eee;border:0px;margin-bottom:10px}

.groups{display:inline-block;float:left;text-align:center;color:#555;text-decoration:none;position:relative;width:25%;overflow:hidden;background-color:#fff;font-size:16px;padding-bottom:20px}
.groups span,.filters span{font-size:11px;color:#999}
.groups .gimg{max-width:80%;max-height:100%;margin:20px auto}
.groups .img{margin-top:45%}
.prodgroups.nopics a{padding:10px;border-radius:3px;font-size:15px}
.prodgroups.nopics a:not(.active){background-color:var(--light-gray)}
.prodgroups.nopics{border-radius:3px;display:inline-block}
.prodgroups.nopics .groups{width:auto;margin:2px}
.prodgroups.nopics .groups .gimg{display:none}
.groupsfilters{padding:20px}

#sortbuttons{float:right;padding:0;margin-bottom:0;position:relative;white-space:nowrap}
#sortbuttons div{border:1px solid #eee;text-align:center;padding:6px 10px;display:inline-block;margin:0 -2px;position:relative;cursor:hand}
#sortbuttons div:hover{border:1px solid #eee;background:#eee;color:#555}
#sortbuttons input{width:87%;margin-top:0;padding:5px;font-size:18px;background:#fff;border:0;border-bottom:1px dashed #999;text-align:center;border-radius:0}
#sortbuttons .searchfields{height:60px;position:absolute;width:100%;border-radius:3px;background:#fff;z-index:10;left:1px;top:-4px;white-space:nowrap;padding:0;border:0;display:none }
#sortbuttons .searchfields:hover{background:#fff;border:0}
#sortbuttons .searchicon,#sortbuttons .searchclose{width:20px;margin:4px 10px;opacity:.5;margin-bottom:-6px;font-size:19px}
#sortbuttons .searchclose{width:26px;opacity:.8}
#sortbuttons .searchicon:hover,#sortbuttons .searchclose:hover{opacity:1}
#sortbuttons .pricebox{width:55px;margin:1px 6px}
#sortbuttons .active{color:#fff}
.priceslider{margin:20px;margin-bottom:0}
#pricestartinfo,#priceendinfo,#searchingforinfo{float:left;margin:20px 10px;margin-bottom:0}
.priceinfo,.searchinfo{font-size:18px;color:#000}
#numresults{font-size:18px;margin:22px 10px;float:left}
#direction{display:inline-block;cursor:pointer;color:#777}

.smaller .prod{width:25%}
.bigger .prod{width:33%}

#sortbuttons .prodlistview,#sortbuttons .prodlistview:hover{float:right;border:none;background:none;margin-top:-2px}
.prodlistview img{width:26px;border:2px solid #fff;margin:0 3px;opacity:0.4;transition:0.3s}
.prodlistview img:hover{box-shadow:0px 0px 5px #ddd;opacity:1}
.prodlistview img.active{padding:0;background:transparent;box-shadow:0px 0px 2px #ccc;opacity:1}
.prodbuttons input{padding:2px;text-align:center;border:0;background:#f5f5f5;width:40px;border-radius:3px}

.prod{
	display:inline-grid;
	grid-template-columns: 100%;
	grid-template-rows: 180px auto auto 50px;
	grid-template-areas: 
    "prodimage"
    "prodname"
    "specification"
    "shop";
}

.list .prod{
	display:block;
	grid-template-columns: 180px auto;
	grid-template-rows: 100%;
	grid-template-areas: 
    "prodimage prodname"
    "prodimage specification"
    "prodimage shop";
}

.prodview{
	background:#fff;
	border-radius:5px;
	box-shadow: 0 0 40px rgba(0,0,0,0.5);
	margin:7vw;
	width:auto;
	padding:6vw;
	text-align:left;
	display:grid;
	grid-template-columns: 1fr 1.5fr;
	grid-template-rows: 30px 80px auto auto auto;
	grid-template-areas:
	"prodimage shop"
    "prodimage prodname"
    "prodimage specification"
    "prodinfo prodinfo"
    "connected connected";
}

.prodpic{grid-area:prodimage}
.prodname{grid-area:prodname}
.prodinfo{grid-area:prodinfo}
.specification{grid-area:specification}
.connectedproducts{grid-area:connected}
.prodbuttons{grid-area:shop;position:relative;padding-top:15px}
.prodview .prodbuttons{text-align:right;margin:-40px;padding:0}
.prodview .prod .prodbuttons{text-align:center;margin:0;padding:0}

.prodview .reduced{top:0px;left:55px;padding:10px;background:transparent;right:auto;background:#eee;border-radius:0 0 3px 3px}
.prodview .new{border-radius:5px 0 3px 0;padding:10px;font-size:18px}
.prodview .prodpic{height:auto;margin:20px;padding-right:40px}
.prodview .prodpic .pic:not(.extra){margin:auto;margin-bottom:20px}
.prodview .prodname{font-size:23px}
.prodview .pic.extra{max-width:25%;height:80px;display:inline-flex;align-items:center;justify-content: center;outline:1px solid #eee;vertical-align:top;}
.prodpic .extra img{max-width:90%;max-height:70px;margin:auto}
.prodview .prod .prodpic{height:auto;margin:0;padding:0}
.prodview .instock{top:8px;right:-20px;width:10px;height:10px;border-radius:10px;}

.list .prod{width:100%;height:auto;text-align:left;margin:0.5%}
.list .prod .prodpic{float:left;width:140px;height:120px;margin:0 20px}
.list .prod .prodpic img{margin:auto;max-height:100px}
.list .prod .prodprice{margin-right:10px}
.list .prod .prodbuttons{width:auto;float:right;margin-top:10px}
/*PRODUCTS END*/

.prodview iframe{clear:both;float:right;display:block;margin:30px 10px;max-width:50%;box-shadow:0 0 20px rgba(0,0,0,0.1)}

@media screen and (max-width:820px){
	
#sortbuttons .prodlistview{display:none}
#sortbuttons{display:block;float:none;text-align:center;clear:both}
.prodgroups .groups,.filters{display:inline-block;float:none;padding:2% 4%;text-align:center}
.groups:not(nopics){width:100%}

#products .prod{width:100%;margin:0}
.prodview{
	position:absolute;
	padding:0;
	margin:0;
	width:100%;
	text-align:center;
	display:grid;
	grid-template-columns: auto;
	grid-template-rows: 70px 100px auto;
	grid-template-areas: 
	"shop"
	"prodname"
    "prodimage"
    "specification"
    "prodinfo"
    "connected";
}
.prodinfo{text-align:left}
.prodview .new{border-radius: 0 0 5px 0;z-index:2;top:0;padding:10px;font-size:18px}
.prodview .reduced{left:0;margin:0;top:40px;padding:7px;z-index:1;border-radius:0 5px 5px 0}
.prodview .prodbuttons{margin:0;text-align:center;padding:25px;top:0;position:sticky;position:-webkit-sticky;background:rgba(255,255,255,0.7);z-index:0}
.prodview .addtocart{margin-left:10px;background:#fff;border-radius:3px;padding:5px;width:40px;margin-bottom:-12px}
.prodview .prodname{margin:auto;overflow:hidden}
.prodview .specification,.prodview .prodinfo{padding:20px}
.connectedproducts .prod{margin:5%;width:auto;display:block;float:none}
.prodview .prodpic{padding:0 10vw;width:80vw;margin:auto}
.prodview .prodpic .pic:not(.extra) img{width:100%}
.prodview .prodpic .pic.extra{width:33%}
.prodview .prod .prodpic .pic img{width:auto}

/* .prodview .prodvariations{display:block;position:relative;min-width:260px;bottom:none;float:none} */
.groupsfilters{height:50px;overflow:hidden;background:#fff;}
.opened{height:auto}
.filters .close{top:8px}
.filters.active{}
.filtergroup{padding:5px 0}
.filtergroup h4,.pricerange h4{font-size:13px;margin-top:-5px}
.pricerange h4{margin:0;margin-top:-5px}
.filterbar{width:100%;text-align:left;height:0;overflow:hidden;padding:0;margin:0}
.filterbar.autoheight{height:auto;overflow:visible}
.filterbar.show{display:block}
.resetfilter{margin-top:-44px}
.groupsfilters{padding:0;border:0}

.discountcode{position:relative;right:auto;top:auto;margin:0}
#numresults{display:none}

.prodview iframe{clear:both;float:none;display:block;max-width:none;width:96%;margin:2%}

}