/* Shopping cart classes
----------------------------------------------------------------------------------------------------*/
/* Dynamic Homepage */
div.ecthomepage{
background-color:#FFF;
max-width:1140px;
margin:auto;
}
div.ecthome{
margin-bottom:5px;
}
div.homepagebrand{
display:inline-block;
text-align:center;
padding:10px;
box-sizing:border-box;
}
div.homepagebrand > img{
max-width:100%;
}
img.ecthomeaboutimg{
float:left;
margin:0 20px 20px 0;
max-width:100%;
}
div.ecthomeabout{
margin:20px;
}
div.ectfeaturedprod{
width:33.3%;
min-height:260px;
display:inline-block;
vertical-align:top;
padding:8px;
box-sizing:border-box;
}
div.ectfeaturedimg{
min-height:180px;
display:flex;
align-items:center;
justify-content:center;
padding:6px;
border:1px solid #ccc;
width:100%;
margin:0 0 3px 0;
box-sizing:border-box;
}
div.ectfeaturedimg:hover{
border:1px solid #a3a3c4;
}
img.ectfeaturedimg{
max-width:100%;
height:auto;
margin:5px;
}
div.ectfeaturedname{
padding:6px;
background-color:#606060;
text-align:center;
}
div.ectfeaturedname a:link, div.ectfeaturedname a:visited{
color:#FFF;
font-size:1.2em;
text-decoration:none;
}
div.ectfeaturedname a:hover{
color:#CF9436
}
div.ectfeaturedprice{
border:1px solid #ccc;
padding:5px;
text-align:center;
margin-bottom:3px;
}
span.ectfeaturedpricet{
font-weight:bold;
}

div.ecthome h1{
border-top:1px solid #eaeaea;
border-bottom:1px solid #eaeaea;
background-color:#f8f8f8;
font-weight:300;
font-size:24px;
color:#1f1e1e;
padding:23px 10px 21px 10px;
margin-top:0px;
text-shadow:1px 1px 0 rgba(255,255,255,.8);
}
/* Home page cross selling 
-------------------------------------*/
p.cstitle{
text-align:center;
padding:10px 6px;
border:1px solid grey;
font-size:1.2em;
}
div.csproduct {
width:32.3%;
min-height:210px;
display:inline-block;
border:1px solid #fff;
vertical-align:top;
margin:0.5%;
padding:6px;
}
div.csprodimage{
min-height:120px;
vertical-align:top;
margin:2px;
padding:6px;
border:1px solid #fff;
}
div.csproduct:hover{
border:1px solid grey;
}
div.csprodimage:hover{
border:1px solid #fff;
}
img.csprodimage{
max-width:100%;
height:auto;
}
div.csprodname{
padding-top:6px;
font-size:1.2em;
margin:4px 0px;
float:left;
width:98%
}
div.csprodinstock{
margin:4px 0px;
width:98%;
float:left;
}
.prodratinglink{
font-size:0.9em;
}
div.csprodrating{
float:left;
width:98%;
margin:4px 0px;
}
div.cslistprice{
width:98%;
float:left;
font-size:1em;
margin:2px 0px;
text-align:right;
}
div.csprodprice{
float:left;
width:98%;
margin:2px 0px;
font-size:1.1em;
}
div.csprodcurrency{
float:left;
width:98%;
font-size:0.8em;
color:#666;
margin:0px;
}
div.csdetaillink{
float:left;
width:49%;
text-align:center;
padding:0px;
margin:10px 1px 0px 0px;
}
div.csqbuybutton{
float:left;
width:49%;
text-align:center;
padding:0px;
margin:10px 0px 0px 1px;
}
input.csdetaillink{
float:left;
width:100%;
text-align:center;
padding:6px;
margin:0px;
background:#C4A973 !important;
border:0px;
color:#fff;
border:0;
border-radius:4px;
-webkit-appearance:none;
text-shadow:0 1px 1px rgba(0, 0, 0, 0.6);
font-family:FontAwesome, sans-serif; 
}
input.csdetaillink:hover{
background:#ddd !important;
color:#000 !important;
cursor:pointer;
-webkit-appearance:none;
text-shadow:0 1px 1px rgba(255, 255, 255, 0.6);
}
/*This is the third breakpoint and contains styles for screens 800px to 640px*/
@media screen and (max-width: 800px) {
div.ectfeaturedprod{
width:50%;
}
div.csproduct {
width:48.5%;
}
}
/*This is the fourth breakpoint and contains styles for screens 640px to 500px*/
@media screen and (max-width: 640px) {
div.homepagebrand{
display:block;
width:auto !important;
}
img.ecthomeaboutimg{
float:none;
}
}
/*This is the fifth breakpoint and contains styles for screens 500px to 360px*/
@media screen and (max-width: 500px) {
div.ectfeaturedprod{
display:block;
width:auto;
}
div.csproduct {
width:96%;
}
}