h1.categoryTitle{font-weight:600; color:#200451; font-size:22px; }
  h1.categoryTitle{ float:left; width:50%; line-height:36px;}
		.mobile h1.categoryTitle{  font-size:18px;width:calc(100% - 130px); overflow:hidden; text-overflow:ellipsis; white-space: nowrap }

#listingOptions{
text-align:right; 
float:right;
margin:0px 0 10px 0;
max-width:150px;
z-index:100;
height:40px;   
}

.mobile #listingOptions{ margin-bottom:20px;}
 
 
.mobile #listingOptions #listingTitle h3 { display:none} 
.screen #listingOptions #listingTitle h3 { display:none} 

#listingOptions li { display: block; margin:0; float:left; height:30px; line-height:30px; }

 
#listingOptions  li span{ 
background-color:#fff;	 
display:block;	 
text-decoration:none;
text-align:left;	
height:30px; 
width:30px;
padding:0; 
margin: 0px 0 0px 4px;
background-repeat:no-repeat;
background-image:url(../images/icons/listingOptions.png);
text-indent:-2000px;	font-size:1px; cursor:pointer
}


#listingOptions  li span{ 
opacity: 0.4;
}

.screen #listingOptions  li span:hover{ 
opacity: 0.7;
}

#listingOptions  li span.gridActive{ 
-khtml-opacity: 1.0;
opacity:1.0;
}

#gridList_changer { background-position: left  0px }	
#grid1_changer { background-position: left   -30px;   }	
#grid2_changer {background-position: left   -60px;}	
#grid3_changer {background-position: left -90px; }	 	
#grid4_changer { background-position: left -120px; }
 
  
  

 
/* grids */
.grid { clear:both; display:block;  margin:5px 0 0 0; padding:0;overflow:hidden;   }

.grid li hr{ display:block; clear:both; height:0; border:0; background:none}
.grid li {
display:block; 
position:relative;
-webkit-transition: height , width 100ms ease-in-out  0s; 
-moz-transition: height , width 100ms ease-in-out  0s; 
transition: height , width 100ms ease-in-out  0s;

}  

.grid li a.thumbs{background-color:#FFFFFF;border-radius:4px;}

.grid li a.thumbsVideo{  background-size:  90% auto; background-position:50% 50%; background-color:#fff; } 
.grid li a.thumbsVideo img{ height:50px;   opacity:0.4;
-webkit-transition: height  100ms ease-in-out  0s; 
-moz-transition: height 100ms ease-in-out  0s; 
transition: height  100ms ease-in-out  0s;
}

.grid li a.thumbsVideo:hover img{ height:68px;}
.mobile .grid li a.thumbsVideo img{ display:none} 

/* grid list*/
.gridList li{ width:100%; clear:both; margin: 0 auto 10px auto; }
.gridList li:last-child{ border-bottom:0}
.gridList a.thumbs{ width:20%; position:relative; display:block; float:left;   text-align:center; overflow:hidden;   }   
.gridList .textWrap {width:80%; display:block;float:left; padding:20px; text-align:left;  font-size:14px; }
 .mobile .gridList a.thumbs{ width:40%;}
 .mobile .textWrap{ width:60%; padding:20px}
	
.gridList li hr{ background: none; border:none; padding-top:10px;}


/* grid list*/

.grid1 li{ width:100%; margin:15px 0; text-align:center; } 
.grid1 li *{ text-align:center} 

.grid3 {width: 101%;}
.grid2 li,
.grid3 li ,  
.grid4 li { display:block; float:left;position:relative; }
.grid2 li {width:48%;margin-bottom:5%;  }
.grid2 li:nth-child(2n + 1)   { clear:both; margin-right:2%;  }
.grid2 li:nth-child(2n){ margin-right:0}

.grid3 li {width:32.3333%; margin-bottom:5%;   margin-right:1%;  }
.grid3 li:nth-child(3n + 1) { clear:both}
.grid3 li:nth-child(3n){ margin-right:0;  }

.grid4 li {width:22%; margin-bottom:5%;  margin-right:4%;  	}
.grid4 li:nth-child(4n + 1) { clear:both; }
.grid4 li:nth-child(4n){ margin-right:0;}


.gridList a.thumbs{ padding:5px 10px;border:1px solid #e1e1e1;}
.grid2 a.thumbs,
.grid3 a.thumbs , 
.grid4 a.thumbs { width:100%;   display:block; padding:8px; border:1px solid #e1e1e1; position: relative}
 
.gridList a.thumbs span ,
.grid2 a.thumbs span ,
.grid3 a.thumbs span ,
.grid4 a.thumbs span{  
 display:block;  width:100%;    background-position:50% 50%; background-size:contain; background-repeat:no-repeat;

}

 .numMatches{
 display: block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    background: #3F5E35; 
    color: #fff;
    text-align: center;
    font-size: 11px;
    font-weight: bold;
    border-radius: 99px;
}

#contentList .numMatches{
    position: absolute;
    right: 10px;
    bottom: 10px;}

.gridList a.thumbs span,.grid2 a.thumbs span , .grid3 a.thumbs span , .grid4 a.thumbs span{  padding-bottom:100%; }

a.thumbs span.rotate{  transform: rotate(90deg) ;    } 

.grid2 .textWrap,
.grid3 .textWrap ,
.grid4 .textWrap {width:100%; display:block; padding:6px 10px 6px 12px ; text-align:left; position:relative;font-size:13.8px; }

.grid2 .textWrap * ,
.grid3 .textWrap * ,
.grid4 .textWrap *{ text-align:left; }
 

em.barcodeIcon{ display: block; margin:6px auto  }
.gridList  em.barcodeIcon{  margin:6px 0  } 
.screen .grid a.thumbs:hover{ border-color:#999999; opacity:0.95}/* a as images are already opacitied from JQ LL*/

.grid li .textWrap a.readMore{display:none;} 
 
/*description*/
.grid2 .description ,  .grid3 .description , .grid4  .description { display:block}
.gridList li .description{ display:block}

.mobile .grid *{   }
.mobile .grid .textWrap a, .mobile .grid .textWrap p, .mobile .grid .textWrap span {   } 
 
.title{ display:block;   font-weight:600; color:#200451;}
.brand{ display:block; text-transform:uppercase; font-weight:400; color:#555; font-size:0.9em}
.location{ color:#F60 }