* { margin: 0; padding: 0; border: 0;  box-sizing: border-box; }
html { overflow: scroll; font-size:16px; height: 100%; width: 100%; max-width: 100%; }
body { height: 100%; width: 100%; font-family:Open Sans; font-size: 1rem; color:#666666; background-color: #FFFFFF; }
img { border:0px; width:100%; height:auto;}
a { cursor: pointer; text-decoration: none; color:#0587cb; }
a:hover{ }
p { font-size: 1rem; margin: 0px 0px 20px 0px; }
ul { font-size: 1rem; margin: 0px 0px 20px 0px; padding: 0px 0px 0px 20px; }
h1 { font-size: 2rem; margin: 0px 0px 20px 0px; }
h2 { font-size: 1.5rem; margin: 0px 0px 20px 0px; }
h4 { font-size: 1.2rem; margin: 0px 0px 20px 0px; }
form{ margin: 0px auto 30px auto; }
input:focus { outline: 0; }
input { border: 1px solid #CCCCCC; width:100%; max-width:200px; height:30px; margin:0px 10px 10px 0px; padding: 0px 15px 0px 15px; background-color: #FFFFFF; font-size: 0.9rem; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }
input[type='checkbox'], input[type='radio'] { width:auto; height:auto; margin: 0px 5px 0px 5px; }
input.error { border; 1px solid #CC0000; }
select { border: 1px solid #CCCCCC; width:100%; max-width:410px; height:30px; margin:0px 0px 10px 0px; padding: 0px 15px 0px 15px; background-color: #FFFFFF; font-size: 1rem; }
textarea:focus { outline: 0; }
textarea { border: 0px;width:100%; height:150px; max-width: 410px; resize: none; margin:0px 0px 10px 0px; padding: 15px 15px 15px 15px; background-color: #ffffff; font-size: 1rem; border: 1px solid #CCCCCC; }

button, .btn { background-color:#0587cb; padding: 5px 10px 5px 10px; color: #FFFFFF; font-size: 1rem; cursor: pointer; }

label { font-size: 0; line-height: 0; }
label.lblradio, label.lblchkbox { display:inline; font-size: 1rem; line-height: 1; }
label.lblshow { display:block; font-size: 1rem; line-height: 1.2; float:left; width:190px; font-weight:bold; white-space:nowrap; }
fieldset { margin:0px 0px 10px 0px; }
.error { color: #CC0000; }
nav ul { list-style-type: none; }

header { position: relative; width:100%; text-align: center; padding: 0px; margin: 0px; font-size:0px; height:150px; color:#FFFFFF; background-color: #909099; }

@media all and (min-width: 800px){
	header { position: relative; width:100%; text-align: center; padding: 0px; margin: 0px; font-size:0px; height:110px; color:#FFFFFF; background-color: #909099; }
}

#logo { position: relative; width:95%;  max-width: 1200px; margin: 0px auto 0px auto; text-align: left; font-size:1rem; }
#logo img { max-width: 300px; margin: 10px 0px 0px 0px; }

@media all and (min-width: 800px){
	#logo img { margin: 20px 0px 0px 0px; }	
}

#helements { position: relative; width:95%;  max-width: 1200px; margin: 50px auto 0px auto; text-align: right; font-size:1rem; color:#FFFFFF; }
#helements a{ color:#FFFFFF; text-transform: uppercase; margin: 0px 0px 0px 10px; }
#helements a span{ display: none; }
#helements a i{ font-size: 1.3rem; }

@media all and (min-width: 800px){
	#helements { position: relative; width:95%;  max-width: 1200px; margin: 0px auto 0px auto; text-align: right; font-size:1rem; color:#FFFFFF; }
	#helements a span{ display: inline;}	
	#helements a i{ font-size: 1rem; }
}

#mod_shp_search { font-size: 1rem; position:absolute; top:73px; right:0px;}
#mod_shp_search input{ height:30px; width:200px; text-align: left; padding: 0px 5px 0px 5px; border: 0px; }
#mod_shp_search label{ font-size: 0; line-height: 0; letter-spacing: 0; }
#mod_shp_search button{ display:none; }

@media all and (min-width: 800px){
	#mod_shp_search {  top:20px; right:0px;}
}


#mod_shp_login { display: none; position: fixed; top:0px; left: 0px; width: 100%; height: 100%; font-size: 1rem;  z-index: 1001; text-align:center; margin: 0px; }
#show-login{ display:none; -webkit-appearance:none; }
#show-login:checked ~ #mod_shp_login{ display:block; }
.show-login { float: none; text-align: right; width:auto; cursor: pointer; font-size: 1rem; }

@media all and (min-width: 800px){
	
}


.frmbg{ position: absolute; top:0px; left: 0px; width: 100%; height: 100%; background-color:#000000; opacity:0.7; }
.frmfrm{ display:inline-block; position:relative; color: #666666; background-color: #FFFFFF; margin: 20px; padding: 10px; max-height: 90%; overflow: scroll; }
.frmfrm label{ font-size: 0; }
#helements .frmfrm a{ color:#0587cb; text-transform: none; }
#helements .frmfrm a.btn{ color:#FFFFFF; }


#breadcrumb { display:none; position: relative; width:95%;  max-width: 1200px; margin: 0px auto 0px auto; font-size:0.8rem; }
#breadcrumb a{ color:#666666; line-height: 30px; }

@media all and (min-width: 800px){
	#breadcrumb { display:block; }
}

#main{ position: relative; width:95%;  max-width: 1200px; margin: 0px auto 0px auto; padding-top: 30px; font-size:0; }

.shop-menu{ position:absolute; top: 5px; left:5px; text-decoration:none; background-color:transparent;color:#0587cb; font-size: 1.2rem; display:block; z-index:200; cursor:pointer;  }
#show-menu2{ display:none; -webkit-appearance:none; }
#show-menu2:checked ~ #shopmenu{ display:block; }


#shopmenu { display: none; position: absolute; top: 30px; left: -2.5%; width: 105%; vertical-align: top; font-size: 1rem; background-color: #FFFFFF; padding-bottom: 30px; z-index: 2; }

#shopmenu ul { margin: 5px 0px 5px 5px; line-height: 30px; padding: 0px; list-style-type:none; }
#shopmenu ul a{ font-size: 1.6rem; font-weight: bold; }
#shopmenu ul ul a{ font-size: 1.1rem; font-weight: normal; }
#shopmenu ul ul li.active a{ font-weight: bold; }
#shopmenu ul ul li.active ul a{ font-weight: normal; }

#shopmenu ul ul li.active ul{ display: block; }
#shopmenu ul ul li.active ul ul{ display: none; }
#shopmenu ul ul ul li.active a{ font-weight: bold; }
#shopmenu ul ul ul li.active ul a{ font-weight: normal; }

#shopmenu ul ul ul li.active ul{ display: block; }
#shopmenu ul ul ul li.active ul ul{ display: none; }
#shopmenu ul ul ul ul li.active a{ font-weight: bold; }
#shopmenu ul ul ul ul li.active ul a{ font-weight: normal; }

#shopmenu ul ul ul ul li.active ul{ display: block; }
#shopmenu ul ul ul ul li.active ul ul{ display: none; }
#shopmenu ul ul ul ul ul li.active a{ font-weight: bold; }
#shopmenu ul ul ul ul ul li.active ul a{ font-weight: normal; }

#shopmenu ul ul ul ul ul li.active ul{ display: block; }
#shopmenu ul ul ul ul ul li.active ul ul{ display: none; }
#shopmenu ul ul ul ul ul ul li.active a{ font-weight: bold; }
#shopmenu ul ul ul ul ul ul li.active ul a{ font-weight: normal; }

#shopmenu ul ul ul ul ul ul li.active ul{ display: block; }
#shopmenu ul ul ul ul ul ul li.active ul ul{ display: none; }
#shopmenu ul ul ul ul ul ul ul li.active a{ font-weight: bold; }
#shopmenu ul ul ul ul ul ul ul li.active ul a{ font-weight: normal; }

#shopmenu ul ul ul ul ul ul ul li.active ul{ display: block; }
#shopmenu ul ul ul ul ul ul ul li.active ul ul{ display: none; }
#shopmenu ul ul ul ul ul ul ul ul li.active a{ font-weight: bold; }
#shopmenu ul ul ul ul ul ul ul ul li.active ul a{ font-weight: normal; }


/* #shopmenu ul ul li:hover ul{ display: block; } */
#shopmenu ul ul ul { display:none; }

#shopmenu .festoconf { margin-top: 20px; }
#shopmenu .festoconf a{ background-color:#0587cb; padding: 5px 10px 5px 10px; color: #FFFFFF; font-size: 1rem; cursor: pointer; }

@media all and (min-width: 800px){
	.shop-menu{ display:none; }
	#shopmenu { display: inline-block; position: relative; top: auto; left: auto;width: 40%; vertical-align: top; font-size: 1rem; }
}

#content { display: inline-block; width:100%; vertical-align: top; }
#contentshop { display: inline-block; width:100%; vertical-align: top; }

@media all and (min-width: 800px){
	#contentshop { display: inline-block; width:60%; vertical-align: top; }	
}

.col3 section{ display: inline-block; width: 100%; vertical-align: top; font-size: 1rem; text-align: left; }
.col3 section label{ width: 145px;;  }

@media all and (min-width: 800px){
	.col3 section{ width: 32%; }	
}

div.primg{ text-align: center; }
div.primg img{ width: 70%; margin: 20px 0px 20px 0px; }

.colsubcat { }
.colsubcat div{ display:inline-block; width: 100%; vertical-align: top; text-align: left; border: 2px solid #CCCCCC; margin: 0px 0px 15px 0px;  }
.colsubcat h2{ font-size: 1rem; margin: 0px;  padding: 5px; background-color: #CCCCCC; text-align: center;  }
.colsubcat  p{ margin: 10px 20px 20px 20px; padding: 5px; }
.colsubcat .primg{ text-align: center; }
.colsubcat div img{ width: 80%; }

@media all and (min-width: 600px){
	.colsubcat div{ display:inline-block; width: 32.33%; vertical-align: top; text-align: left; margin-right:1.5%;}
	.colsubcat div:nth-child(3n){ margin-right:0%; }

}



@media all and (min-width: 800px){
	.colsubcat div{ display: inline-block; width: 31.99%; margin: 1% 2% 1% 0%; vertical-align: top; text-align: left; }
	.colsubcat div:nth-child(3n){ margin: 1% 0% 1% 0%; }
}

.shopproduct { width:100%;}
.shopproduct div{ display:inline-block; width: 100%; vertical-align: top; text-align: left; border: 2px solid #CCCCCC; margin: 0px 0px 15px 0px; }
.shopproduct h2{ font-size: 1rem; margin: 0px;  padding: 5px; background-color: #CCCCCC; text-align: center; }
.shopproduct p{ margin: 0px 20px 20px 20px; padding: 5px; }

.shopproduct .primg{ text-align: center; }
.shopproduct img{ width: 60%; }
.shopproduct .a2wl { margin: 0px 20px -20px 0px; text-align: right;}



@media all and (min-width: 1000px){
		.shopproduct div{ display:inline-block; width: 32.33%; vertical-align: top; text-align: left; margin-right:1.5%; }
		.shopproduct div:nth-child(3n){ margin-right:0%; }
		
		/*#content #productlist div{ position:relative; display: inline-block; width:31.17%; vertical-align:top; margin-right:3%; margin-bottom: 2%; }
#content #productlist div:nth-child(3n){  }*/
}

b.price { font-size: 2rem;}

.quantity { width: 80px; text-align:  right; height: 30px; }
.cuttingval { width: 80px; text-align:  right; }
.qtnav, .ctnav { display: inline-block; position: relative; width: 30px; height: 30px; border: 1px solid #CCCCCC; vertical-align: middle; line-height: 30px; text-align: center; vertical-align:top; cursor:pointer; }


.tbl {   }
.tbl div{ }
.tbl div div{ font-size: 1rem; display: inline-block; margin: 1%; }

@media all and (min-width: 800px){
	.tbl { display: table; margin: 0px 20px 20px 20px;  }
	.tbl div{ display: table-row; padding:3px 5px 3px 5px; margin:2px; white-space:nowrap; min-width: 20px; }
	.tbl div div{ display: table-cell;font-size: 1rem; }
}

.tblcart div div:nth-last-child(2){ text-align:right; }
.tblcart div div:nth-last-child(3){ text-align:right; }
.tblcart img { max-width:50px; }
.tblcart input { margin:0px; height: 30px; }
.tblcart div div { vertical-align: top;  }
.tblcart div div:nth-child(1) { width: 16%; }
.tblcart div div:nth-child(2) { white-space:normal; width: 80%; }
.tblcart div div:nth-child(2) span{ font-style: italic; color: #1359a1; }
.tblcart div div:nth-child(2) p{ margin: 0px 0px 0px 0px; }
.tblcart div div:nth-last-child(1) { text-align: center; vertical-align: bottom; line-height:30px; width:8%; }
.tblcart div div:nth-last-child(2) { text-align: right; vertical-align: bottom; line-height:30px; width:23%; white-space: nowrap; }
.tblcart div div:nth-last-child(3) { text-align: right; vertical-align: bottom; line-height:30px; width:23%; }
.tblcart div div:nth-last-child(4) { text-align: right; vertical-align: bottom; line-height:30px; width:38%; }

@media all and (min-width: 800px){
	.tblcart input { margin:0px; height: 30px; }
	.tblcart div div:nth-child(1) { width:auto; }
	.tblcart div div:nth-child(2) { width:auto; }
	.tblcart div div:nth-last-child(1) { line-height:50px; width:auto; }
	.tblcart div div:nth-last-child(2) { line-height:50px; width:auto; }
	.tblcart div div:nth-last-child(3) { line-height:50px; width:auto; }
	.tblcart div div:nth-last-child(4) { line-height:50px; width:auto; }
}

.ccartmsg { position: relative; }
.ccartmsg label{ font-size: 1rem;; }
.cartmsg { display: none; position:absolute; top: 10px; left: -20px; z-index: 2; }
.savemsg { display: none; position:absolute; top: 10px; left: -40px; }


.customer { width:auto; text-align: left; font-size: 1.2rem; }
.customer span{ font-size: 1rem; color: #b4b4b4; }
.customer img{ display: inline-block; float:left; margin-right: 15px; }
.customer a{ color:#161617;}
a.logout{ font-size: 1.2rem; color:#161617; display: inline-block;margin-left: 10px; }

.frmcustomer{ font-size: 0; }
.frmcustomer input[type=text]{ width: 100%; max-width: 500px; margin:0px 0px 10px 0px; }
.frmcustomer select{ width: 100%;  max-width: 500px; }
.frmcustomer div{ display: inline-block; width: 100%; vertical-align: top; }
.frmcustomer #cu_street, .frmcustomer #sa_street{ width: 60%; margin-right: 1%;  }
.frmcustomer #cu_street~br, .frmcustomer #sa_street~br{ display:none; }
.frmcustomer #cu_streetnumber, .frmcustomer #sa_streetnumber{ width: 39%; }
.frmcustomer #cu_streetnumber~br, .frmcustomer #sa_streetnumber~br{ display:inline; }
.frmcustomer #cu_zip, .frmcustomer #sa_zip{ width: 39%; }
.frmcustomer #cu_zip~br, .frmcustomer #sa_zip~br{ display:none; }
.frmcustomer #cu_city, .frmcustomer #sa_city{ width: 60%; margin-left: 1%; }
.frmcustomer #cu_city~br, .frmcustomer #sa_city~br{ display:inline; }
.frmcustomer textarea{ max-width: 600px; }
.frmcustomer button{ margin-right: 1%; }

@media all and (min-width: 900px){
		.frmcustomer div{ display: inline-block; width: 49%; vertical-align: top; margin-right: 1%; }
}

#shippingcountry span { display: block; margin: 0px 0px 10px 100px; }
#shippingcountry legend { display: inline-block; float:left; font-weight: bold; width: 100px; font-size: 1rem; margin-top: -5px; }

@media all and (min-width: 800px){
	#shippingcountry span { display: inline; margin: 0px; }
}



#trans { display:none; position:fixed; left:0px;top:0px; width:100%; height:100%; border:0px; background-color:#000000; opacity:0.7; padding:5px; z-index:1002; }
#trans div{ position:fixed; left:50%;top:50%; width:300px; height:150px; z-index:200; margin: -75px 0px 0px -150px; text-align: center; font-size:14px; color:#ffffff; }
#trans img{ max-width:64px;}
#trans div div{ position: relative;}

#gallery { display:none; position:fixed; left:0px;top:0px; width:100%; height:100%; border:0px; z-index:1005; }
#gallery div{ position: relative; width: 100%; height: 80%; margin-top: 5%; text-align: center; }
#gallery div img{ object-fit: contain;
	width:80%;
	height:100%; background-color: #FFFFFF; }

#gallery .garrow {  position:absolute; top:50%; width: 20px; height: 20px; margin-top: -10px;  line-height: 20px; text-align: center; z-index: 2; font-size: 2rem; color: #FFFFFF; cursor:pointer; }

#gallery #gclose{  position:absolute; top:0px; right: 5%; width: 20px; height: 20px;margin-top: -10px; line-height: 20px; text-align: center; z-index: 2; font-size: 2rem; color: #FFFFFF; cursor:pointer; }

#grgt{  right:5%; }
#glft{  left:5%; }
#dialog { display:none; position: fixed; top:0px; left: 0px; width: 100%; height: 90%; z-index: 1004; text-align:center; }
#dialog div{ position: relative; background-color: #FFFFFF; font-size: 1rem; text-align: left; width: 90%; max-width: 1000px; max-height: 100%; overflow: scroll; margin: 20px auto 20px auto; }
#dialog div div{  width: 100%; overflow: scroll; }
#dialog table{ margin: 10px; font-size: 0.8rem; }
#dialog table td{ padding:2px;; }

#dialog form{ max-width: 90%; margin: 0px auto 30px auto; }
#dialog .dialogcart p{ margin: 10px 20px 10px 20px; }

#msgbox { display:none;position: fixed; top:0px; left: 50%; width: 300px; margin-left:-150px; background-color: #FFFFFF; z-index: 1002; font-size: 1rem; border: 2px solid #CC0000; }
#msgbox p{ margin: 20px; }

footer { position: relative; width:100%; text-align: center; padding: 20px 0px 20px 0px; margin: 0px; font-size:0px; color:#FFFFFF; background-color: #909099; line-height: 1.5; }
footer a{ color:#FFFFFF; font-size: 1rem; }
footer p { margin: 0px 0px 10px 0px; }
footer ul { padding: 0px; list-style-type: none; }
footer div { position: relative; width:95%;  max-width: 1200px; margin: 0px auto 0px auto; text-align: left; font-size:0px; }
footer div div { display: inline-block; width: 100%; font-size:1rem; padding: 0px 0px 10px 0px; vertical-align: top; }

@media all and (min-width: 800px){
	footer { position: relative; width:100%; text-align: center; padding: 0px; margin: 0px; font-size:0px; color:#FFFFFF; background-color: #909099; line-height: 1.5; }
	footer div div { display: inline-block; width: 33.33%; font-size:1rem; padding: 20px 0px 10px 0px; vertical-align: top; }	
}