/* ~~ This the css file for the Responsive Design of Virtual Monochrome from Ecommerce Templates.
The first section correponds to the maximum width version of 1280 pixels ~~ */
@charset "utf-8";
/*	THESE INCLUDES PREVENT CSS OVERWRITTEN BY UPDATERS	
div.addtocart button.configbutton, div.qbuybutton input[type=button].qbuybutton, div.csaddtocart button.configbutton, div.proddetaillink input[type=button].detaillink, input[type=button].csdetaillink, input[type=button].csqbuybutton {
    vertical-align: middle;
    padding: 0 0 0 0; 
    border: 1px solid transparent;
    -webkit-transition: background-color 0.25s ease-out, color 0.25s ease-out;
    transition: background-color 0.25s ease-out, color 0.25s ease-out;
    /* font-family: "FontAwesome", "Lexend", "Helvetica Neue", Helvetica, Arial, sans-serif; */
    /* font-size: 0.9rem; */
    -webkit-appearance: none;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    display: block;
    width: 100%;
    font-size: inherit;
    border-radius: 0;
    margin: 0;
}
a.smarty-choice-override:link {
    float: right;
    color: #FFF;
}

div.savepricedisp{
	color:#DA6A1E;
}

div.cdformmailingd{
	color:blue;
}

div.cdformterms{
	color:red;
}

div.moreattributes {
background-color: rgba(184,184,184, .8) !important;
color: #000;
font-size: 12px;
font-weight: bold;
padding: 1px;
border: 1px solid #999 !important;
}

div.ectpacount {
font-size: 0.9em;
color: #666;
}

div.prodname {
	background: #FFF;
	color: #000;
	min-height: 100px;
}
div.pagenumbers {
	color: #fff;
	float: left;
	width: 100%;
	margin: 15px auto;
	padding: 10px 0;
	text-align: center;
	clear: none;
}
div.pagenumbers a.ectlink {
	margin: 35px 0;
	padding: 3px 5px;
	line-height: 40px;
	white-space: nowrap;
	color: #FFF;
	background-color:#000;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 14px;
	-webkit-box-shadow: 0 2px 4px #c0c0c0;
	-moz-box-shadow: 0 2px 4px #c0c0c0;
	box-shadow: 0 2px 4px #c0c0c0;
}
div.pagenumbers a.ectlink:hover {
	color: #FFF;
	background-color:#D10000;
	border: 1px solid #ccc;
	-webkit-box-shadow: inset 0 2px 4px #ccc;
	-moz-box-shadow: inset 0 2px 4px #ccc;
	box-shadow: inset 0 2px 4px #ccc;
}
div.pagenumbers .currpage {
	color: #FFF;
	margin: 5px;
	padding: 5px 10px;
	border: 1px solid #ccc;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-ms-border-radius: 6px;
	-o-border-radius: 6px;
	border-radius: 6px;
	background-color: #D10000;
	cursor: no-drop;
}
/* ~~ Main settings and resets ~~*/
body {
	margin: 0px;
	font: 100%/1.5 Arial, serif;
	color: #333;
	line-height: 1.6;
/* background: url(../images/bg.gif) #fff repeat-x; */
}
div.slidercaption {
	bottom: 10px;
	top: auto;
	color: #FFF;
}
img.csprodimage {
	max-height: 160px;
}
div.store {
	padding: 10px;
	/*width:78%;*/
}

p.menuhead {
	font-size: 16px;
	text-align: right;
}





/* This is the first breakpoint and is for screen sizes between 980 and 1280 pixels. 
If there is no difference in the classes above, you would use the classes above or if you need to make changes at this resolution, add them below
-------------------------------------*/
@media screen and (max-width: 1280px){
#maincontainer {
	width: auto;
}
.lefthand {
	margin-left: -100%;
}
#footer {
	width: 100%;
}
div.bottomlinks1, div.bottomlinks2, div.bottomlinks3, div.bottomlinks4 {
	width: 209px;
}
div.bottomlinks1, div.bottomlinks2, div.bottomlinks3, div.bottomlinks4 {
    /*float: left;*/
    width: 100%;
    background: #000;
    /* border-right: 1px solid #ccc; */
    /* padding: 15px; */
    text-align: center;
}
}
/* This is the second breakpoint and is for screen sizes between 800  and 1024 pixels. 
If there is no difference in the classes above, you would use the classes above or if you need to make changes at this resolution, add them below
-------------------------------------*/
@media screen and (max-width: 1152px){
body {
	background: none;
}
#footer {
	width: 100%;
}
div.bottomlinks1, div.bottomlinks2, div.bottomlinks3, div.bottomlinks4 {
	width: 209px;
}
div.bottomlinks1, div.bottomlinks2, div.bottomlinks3, div.bottomlinks4 {
    /*float: left;*/
    width: 100%;
    background: #000;
    /* border-right: 1px solid #ccc; */
    /* padding: 15px; */
    text-align: center;
}
div.store {
    padding: 10px;
    width: 100%;
}
div.righthand {
	display:none;
}
}
@media screen and (max-width:800px){
/* ~~ Move header elements ~~*/
.logo {
	width: 98%;
	text-align: center;
}
#header .hdrR {
	float: none;
	text-align: center;
	width: auto;
	margin-right: 0;
}
.hdrR .toptextlinks {
	float: none;
	text-align: center;
	width: auto;
	display: block;
}
div.searchbox {
	width: auto;
	text-align: left;
	height: 46px;
	float: none;
	display: block;
}
div.store {
    padding: 10px;
    width: 100%;
}
div.righthand {
	display:none;
}
}
/* This is the third breakpoint and is for screen sizes between 468 and 690 pixels. 
If there is no difference in the classes above, you would use the classes above or if you need to make changes at this resolution, add them below
*/
@media screen and (max-width:690px){
#maincontent {
	margin-left: 0px;
	border: 0px;
}
#maincontainer {
	width: 94%;
}
/* ~~ Remove left hand menu ~~*/
.lefthand {
	float: right;
	width: 98%;
	clear: both;
}
/* ~~ Reset footer ~~*/
#footer {
	width: 100%;
	clear: both;
}
div.bottomlinks1, div.bottomlinks2 {
	width: 40%;
	float: left;
}
div.bottomlinks3, div.bottomlinks4 {
	float: left;
}
div.righthand {
	display:none;
}
}
/* This is the fourth breakpoint and is for smartphones. 
If there is no difference in the classes above, you would use the classes above or if you need to make changes at this resolution, add them below */
@media screen and (max-width:400px){
#maincontainer {
}
#footer {
	width: 100%;
}
div.bottomlinks1, div.bottomlinks2, div.bottomlinks3, div.bottomlinks4 {
	width: 100%;
	margin-right: 0px;
	text-align: center;
}
p.menuhead {
	text-align: left;
}
}
@media print, screen and (min-width: 40em) {
div.categories > div.category, div.products > div.product, div.csproducts > div.csproduct {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 20%;
	/* flex: 0 0 20%; */
	-webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
	margin: 0.5rem 0;
}
}
@media screen and (min-width: 75em) {
div.categories > div.category, div.products > div.product, div.csproducts > div.csproduct {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 20%;
	flex: 0 0 31%;
	margin: 0.75rem 0;
}
}
@media screen and (min-width: 90em) {
    div.categories > div.category, div.products > div.product, div.csproducts > div.csproduct {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 23%;
        /* flex: 0 0 23%; */
        -webkit-box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.4);
        box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.4);
    }
}