/* GRID VIEW */
#container .grid li { 
float: left; 
width: 30%; 
min-height:390px;
height: 390px; 
margin:2% 0% 0% 2%; 
background:#fff; 
border:1px solid #ccc; /*888888888888888 need ccc  margin between images */
}



#container .grid li .image_container{
	float:left;
	width:100%;
	height:59%;
	margin:0 0 10px 0px;
	border-bottom:1px solid #ccc; /**** working code  require #ccc bl */	
	}

 #container .grid li .image_container img{
	float:left;
	width:100%;
	height:100%;
	ppppadding:5% 0 0 0;
	ooobject-fit:contain;	
	bbborder:2px solid #F00; /**** working code  rd */	
	} 


/*#container .grid li img{ /* not required */
/*float: left;  
wwwidth:auto;
max-width:100%;
min-width:28%;
hhheight:auto;
max-height:98%;
margin-right:10px;
padding-bottom: 0;
top:0;
bottom:0;
margin:auto;
object-fit:contain;
	bbborder:1px solid #ccc; /*888888888888888 bl  need a border ccc ************************/
/*	}*/
	
#container .grid li p{
	display:none;
	bbbborder:2px solid #00F; /*888888888888888 bl */
	}

#container .grid li .list-left .icon-group-btn	{
	position:relative; 
	
	margin:-3% 0 0 0px; /*------------------- purple  buttons on grid view not hovered position etc    important                 */
	
	}
	
######container .grid li .list-left{ /* not required */
	text-align:left;
	font-size:20px; /*new was 20 */
	line-height:20px;
	text-align:center;
	margin-left: 0px;
	margin-top:50px;
	width:100%;
	pppposition:absolute;
	padding-left:20%; /*remove */
	bbbborder:2px solid #FF0; /*------------------------------ yl  box header text */
	}
	

#container .grid li .icon-group-btn{
	font-size:14px;
	display:inline-block;
	
	bbborder:2px solid #F00; /*-------------------   buttons on grid view not hovered container rd    important                 */
	}
	
#container .grid li .list-right{
	ddddisplay:inline-block; /* display:inline block modfied line */
	ddfloat:left;
	wwwidth:40%;
	ppposition:absolute;
	hhheight:40px;
	mmmargin:-6% 0 0 60%;
	bbborder:2px solid #F00; /*888888888888888 rd  details box                                                        8888888888888888888*/
	}
#container .grid li .list-right .detail{
	display:inline-block;
	height:50px;
	fffloat:left;
	margin:0;
	bbbborder:2px solid #9F0; /*888888888888888 gn  details text 8888888888888888888*/
	}

#container .grid{
width: 100%;
margin:0 0 0 0;
position:relative;
bbborder:2px solid #FF0; /*888888888888888 yl         position the images 3 or 4 in a row  important container width and left assemblty*/
}

/* SWITCH CONTROLS */
.view-controls-list{
width: 800px; /* was 800 */
text-align: right;
margin:-5% 0% 0% -30%;
/* margin-right: 15%;  was 15% */
/* margin-left: 30%; */
bbborder:2px solid #0FC; /*888888888888888 lt bl */
} 

/*#container h1{
	font-size:30px;
	margin:0px 0 0 0;
	width:30%;
	bbbborder:2px solid #F00; /*888888888888888 rd */
/*	}

/*.view-controls-list{
width: 10%;
text-align: right;
margin:-3% 10% 5% 80%;
border:2px solid #0F0; /*888888888888888 gn */

/*}*/

.view-controls-grid{
width: 50%;
margin:-5% 0 0 8%;
fffloat:right;
text-align: right;
bbbborder:2px solid #F00; /*888888888888888 rd */
}
#viewcontrols a{
padding:10px;
color:black;
cursor:pointer;
bbbborder:2px solid #FF0; /*888888888888888 yl */
}
#viewcontrols a:hover{
color:palevioletred;
bbbborder:2px solid #0FF; /*888888888888888 magenta */
}
#viewcontrols .active{
color:palevioletred;
bbbborder:2px solid #F0F; /*888888888888888 cyan */
}

/* CART WISHLIST ICON BUTTONS*/
.icon-group-btn a{ /* buttons when not hovered  important---------------------------------------on */ 
	mmmargin: 10px 0; 
	float: left; 
	width: 44px; 
	margin:7px 0px 0 7px;	
	text-decoration: none;
	transition:all 0.4s ease-in-out 0s;
	-webkit-transition: all 0.4s ease-in-out 0s;
	-moz-transition: all 0.4s ease-in-out 0s;
	-o-transition: all 0.4s ease-in-out 0s;
	-ms-transition: all 0.4s ease-in-out 0s;
	bbborder:2px solid #00F; /*888888888888888 bl */
}


.icon-group-btn a.btn-compare{ 
margin-right: 0;
}

.icon-group-btn a span{ 
float: left; 
line-height: 32px; 
text-decoration: none;
}

.icon-group-btn .icon-cart,.icon-group-btn .icon-wishlist,.icon-group-btn .icon-compare{ 
	width: 40px; /* was 40px */
	height: 32px; /* was 32px */
		
}
.icon-group-btn .icon-cart{
	background: url('icon-a-w-c.png') #777777 no-repeat  8px 8px; /* 8px 8px; */
}
.icon-group-btn .icon-wishlist{
	background: url('icon-a-w-c.png') #777777 no-repeat 8px -66px; /* 8px -66px; */
}

.icon-group-btn .icon-compare{
	background: url(icon-a-w-c.png) #777777 no-repeat 7px center; /* 7px center */
}
.icon-group-btn .icon-cart-text{
	text-indent: -40px; width: 0; height: 32px;
	font-size:100%; overflow: hidden;
	color: #fff; background:#4FAFC2;
	transition:all 0.4s ease-in-out 0s;
	-o-transition:all 0.4s ease-in-out 0s;
	-webkit-transition: all 0.4s ease-in-out 0s;
	-moz-transition: all 0.4s ease-in-out 0s;
	-ms-transition: all 0.4s ease-in-out 0s;
}
.icon-group-btn .icon-wishlist-text{
	text-indent: -40px; width: 0; height: 32px;
	color: #fff; font-size:100%;
	overflow: hidden; background:#4FAFC2;
	transition:all 0.4s ease-in-out 0s;
	-o-transition:all 0.4s ease-in-out 0s;
	-webkit-transition: all 0.4s ease-in-out 0s;
	-moz-transition: all 0.4s ease-in-out 0s;
	-ms-transition: all 0.4s ease-in-out 0s;
}
.icon-group-btn .compare-text{
	text-indent: -40px; width: 0; height: 32px;
	color: #fff; background:#4FAFC2; font-size:100%;
	overflow: hidden;
	transition:all 0.4s ease-in-out 0s;
	-webkit-transition: all 0.4s ease-in-out 0s;
	-moz-transition: all 0.4s ease-in-out 0s;
	-o-transition: all 0.4s ease-in-out 0s;
	-ms-transition: all 0.4s ease-in-out 0s;
}
.icon-group-btn a:hover .icon-cart{
	background: url(icon-a-w-c.png) #4FAFC2 no-repeat  8px 8px;
}
.icon-group-btn a:hover .icon-cart-text{	
	width: 90px;		
	text-indent: 0;
	bbborder:2px solid #000; /*888888888888888 blk */
}
.icon-group-btn a:hover{ 
width: 130px;
bbborder:2px solid #F00; /*888888888888888 rd important when hovering width on compare/wishlist button and was 140  makes no diff to text fit*/
} /* was 130ox */

.icon-group-btn a.btn-wishlist:hover{ 
width: 165px;
} /* was 151px  buttons whistlist new makes whishlist open correctly but not full text new 165*/

.icon-group-btn a.btn-compare:hover{
	 width: 170px; 
	 } 
	 /* was 160 button compare new 170 no effect */
	 
.icon-group-btn a:hover .icon-wishlist-text
{	
	width: 120px; /* was 111px  important 120 wishlist button width after hover check for button important fills the text in the button */		
	text-indent: 0;
	}
.icon-group-btn a:hover .compare-text{	
	width: 125px;	/* was 120px important  125 compare button width after hover */	
	text-indent: 0;
	}
.icon-group-btn a:hover .icon-wishlist{
	background: url(icon-a-w-c.png) #4FAFC2 no-repeat 8px -66px; /* no-repeat 8px -66px; */
}
.icon-group-btn a:hover .icon-compare{
	background: url(icon-a-w-c.png) #4FAFC2 no-repeat 7px center; /* no-repeat 7px center; */
}

/* MISCELLANEOUS */
.button {
background-color: white;
background-image: -webkit-linear-gradient(top, white, white);
background-image: -moz-linear-gradient(top,white,white);
border:#4FAFC2 solid 2px;
display: inline-block;
font-size: 16px;
font-family: 'Meiryo UI';
color: #4FAFC2;
text-decoration: none !important;
padding: 5px 20px;
line-height: inherit;
overflow: hidden;
position: relative;
border-radius: 2px;
margin-top: 13px;
margin-bottom: 10px;
}

.button:hover {
	opacity: 0.9;
	background:#4FAFC2;
	color:white;
}	

.button.red{
background-color:palevioletred;
background-image: -webkit-linear-gradient(top, palevioletred, palevioletred);
background-image: -moz-linear-gradient(top,palevioletred,palevioletred);
color:white;
box-shadow:0 0 5px palevioletred inset, 0 1px 1px palevioletred;
border:0px;
}
.button.red:hover{
	opacity: 0.9;
}

/*--------------------------------------------------------- new data ------------------------------------------*/

#container .grid li .list-left .title{
width:100%!important;
fffloat:left!important; /* remove */
overflow:hidden;
text-align:center;
display:block!important;
pposition:relative!important;
margin:0% 0 0px 0%!important;
word-wrap:break-word;
font-size:18px;
line-height:16px;
font-weight:500;
bborder:2px solid #00F!important; /****   bl box  main title in the product box  font etc  */	
	
	}

.grid li .list-left #prod_title { /* div with all blue boxes with dia, item number etc div */
	width:100%;
	height:48px; /* was 54px */
	display:block;
	line-height:1.5;
	word-spacing:8px!important;
	font-family:"Source Sans Pro", sans-serif;
	font-weight:normal!important;
	text-align:center;
	font-size: 12px;
	pppadding-left:12px;
	padding-top:20px!important;
	color:#fff;	
	fffffloat:left;
	margin:0px 0px 10px 0px; /*was 15px 0 10px 0 */
	bborder:2px solid #0F0; /* bbbbbbbbbb gn div around the measurment container div  */	
	}
	
.grid li .list-left #prod_title .prod_title{ /* individal ble boxes with diamter, item number etc  */
	float:left;
	height:45px; /* was 50px */
	width:24%; /* was 23% */
	margin:0 0 0 1%;
	padding-top:4px;
	border-right:2px solid #FFF;
	-webkit-border-radius: 8px 8px 8px 8px;
	-moz-border-radius:  8px 8px 8px 8px;
	-ms-border-radius:  8px 8px 8px 8px;
	border-radius:  8px 8px 8px 8px;
	bbborder:1px solid #00C; /* -----   the blue box with diameter item number etc container bl  */	
	}	

.grid li .list-left #prod_title span.meta{ /* individual measurments details  */
	margin:8px 0px 20px 2px;
	width:24.2%; /* was 23 */
	height:20px;
	float:left;
	text-align:center;
	font-family:"Source Sans Pro", sans-serif;
	font-weight:200;
	font-size: 1em; /* .8em works */
	bbborder:1px solid #F30; /* bbbbbbbbbb or  */
	}		

/*.grid li .list-left #prod_title span.meta{ /* measurement details */
/*	margin:8px 0px 20px 0px;/* was 8 0 20 4 */
/*	width:25%;
	height:20px;
	ddddisplay:block;
	text-align:center;
	float:left;
	font-family:"Source Sans Pro", sans-serif;
	font-weight:100;
	text-align:center;
	font-size: 12px;
	bbborder:1px solid #F30; /* bbbbbbbbbb or  */	
/*	}	*/

/* -------------------------------- addition to special round css ----------------------- */

	
	#container .grid h3 .title{ /* Sircle Elito, CittyCups heading etc */
	width:94%;
	float:left;
	margin:2% 0 0 2%;
	height:100%;
	line-height:35px;
	font-family:"Source Sans Pro", sans-serif;
	font-size:22px;
	font-weight:400;
	color:#fff;
	text-decoration: none;
	-webkit-border-radius: 80px 80px 8px 8px;
	-moz-border-radius:  80px 80px 8px 8px;
	-ms-border-radius:  80px 80px 8px 8px;
	border-radius:  80px 80px 8px 8px;
	-webkit-box-shadow: 4px 4px 4px #999;
    -moz-box-shadow: 4px 4px 4px #999;
	-ms-box-shadow: 4px 4px 4px #999;
	box-shadow:4px 4px 4px #999; 
	text-align:center;
	bbborder-bottom:1px solid #ccc; /* -----   the blue box with diameter item number etc container wt  */	
	}