.isotope-item {  z-index: 2;}

.isotope-hidden.isotope-item {  pointer-events: none;  z-index: 1;}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {  -webkit-transition-duration: 0.8s;     -moz-transition-duration: 0.8s;      -ms-transition-duration: 0.8s;       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;}

.isotope {  -webkit-transition-property: height, width;     -moz-transition-property: height, width;      -ms-transition-property: height, width;       -o-transition-property: height, width;          transition-property: height, width;}

.isotope .isotope-item {  -webkit-transition-property: -webkit-transform, opacity;     -moz-transition-property:    -moz-transform, opacity;      -ms-transition-property:     -ms-transform, opacity;       -o-transition-property:      -o-transform, opacity;          transition-property:         transform, opacity;}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {  -webkit-transition-duration: 0s;     -moz-transition-duration: 0s;      -ms-transition-duration: 0s;       -o-transition-duration: 0s;
          transition-duration: 0s;}

/* ================End: Recommended Isotope styles ==============*/




#container {text-align:center;margin:0 auto;background:white;  border: 0px solid #666;  margin-bottom: 1px;padding:0;}

.elementy{border-radius:3px;border:2px solid silver;  color: #222;margin-right:10px; margin-bottom:20px;padding:0;}



.elementcarty{min-height:90px;text-align:center;background:transparent;border-radius:0px;padding:0 5px 3px 5px;min-width:240px;}




.thepic{padding:0; background:transparent;} 
.thedetails{padding:0em;background:transparent;} 
.thebuttons{padding:0px;margin:0;background: transparent;min-height:100px; border:0px solid blue; } 

/* ------------------------------------------------- */
/* ------------------------------------------------- */



.prodname{height:2.1em;overflow:hidden;} /*-- background:red;height = 4 x h5 height defined in productsinc.asp -----*/



.prodname{height:1em;} /* not used any kmore ? */





	 /*--  optional .thedetails{display:none;}	- does not show bullets in grid layout -----*/

.thedetails{font-size:1em;display:none; /* min-height:130px; */}




/* ----- starts as grid view - grid view = 4 across pic above details-----min-width:280px;-----FOR 3 ACROSS ADD trio to elementy class or change here */

.elementy{width:20%;min-width:270px;min-height:420px;}   /* 355px with radios based on 1200 max widthallow for rrp price + if ratings add 20px*/




	/* -----  -- for 1600 max width --.elementy{width:19%;} */


.elementy{width:23%;padding:0;border:0px solid red;}



/* ---------- FOR grid pic next details must be 3 wide better 2 wide
.thepic{float: left;width:20%;   }
.thedetails{display:block;float: left;width:33%;   }
.thebuttons{float: left;width:30%;   }
.elementy{width:32%;min-width:280px;}
.elementy{width:49%;min-width:280px;height:180px;overflow:hidden;}

 ---uncomment this ------- */





/* --- other grid widths
.elementy{width:45%;min-width:280px;}

.trio{width:32%;min-width:300px;}
.elementy{width:32%;min-width:280px;min-height:330px;}

.elementy{width:20%;min-width:280px;}
.thebuttons{background:cyan;   }
---*/











/* ------------------------------------------------- */
.listviewy { width:98%;min-height:180px;			border:1px solid silver;}

.listviewy .thepic{float: left;width:18%;   	}
.listviewy .thepic img{	max-height:180px;}

.listviewy .thepic2{float: left;width:22%;   	}
.listviewy .thepic2 img{	max-height:210px;}



.listviewy .thedetails{display:block;float: left;width:40%;  text-align:middle;background:white;margin-left:5px;					margin-top:40px;}
.listviewy .thebuttons{float: left;width:30%;  							margin-top:40px;background:white; }
.listviewy .elementcarty{margin-top:20px;}

.listviewy .prodname{height:2.2em;					height:0px;} 
/* ---.listviewy .thedetails{font-size:1em;}-- */



/* ---------- FOR grid pic next details must be 3 wide better 2 wide
.listviewy {height:120px;}
 ---uncomment this ------- */










/* ------------------------------------------------- */
/* ---- sort buttons --- */
#sorts{margin:0px auto;text-align:center;margin-bottom:10px;background:#fff;    }

.sortbutton, .sortbutton2 {border:0;  background:transparent;  font-size: 0.8em;
  display: inline-block;
  padding: 0.5em 0.75em ;

  border: none;
  border-radius: 0px;
  color: #222;
  font-family: sans-serif;

border:0;outline:0;
  cursor: pointer;
}

.sortbutton:hover,.sortbutton:active,.sortbutton.is-checked  {  background-color: #ccc; border:0;outline:0;background-color:#DEDEDE;}
.sortbutton-group:after {  content: '';  display: block;  clear: both;border:0;}
.sortbutton-group .sortbutton { /*float: left;*/  border-radius: 0;  margin-left: 0;  margin-right: 1px;border:0;}
.sortbutton-group .sortbutton:first-child { border-radius: 0; }
.sortbutton-group .sortbutton:last-child { border-radius: 0; }


.sortbutton2:hover,.sortbutton2:active,.sortbutton2.is-checked  {  background-color: #D3DDEB; border:0;outline:0;}
.sortbutton2 {width:160px;margin:5px 0;}






#foptions{padding:10px;display:inline-block;vertical-align:top;margin:0px;text-align:left;font-size:1em;background:#eee;width:100%;min-width:120px;
/*border:silver solid 0px;
border-radius:5px;*/
}





.foptionspan{min-width:90px;display:inline-block;}

.foptionitem{display:inline-block;padding:0 5px;margin-right:10px}
.option-set{padding:0px ;}

#foptions label{margin-right: 20px;}










/**** filter and sort Options

#options {  padding-bottom: 1.0em; font-size: 0.9em; }



#options h4 {   font-size: 1em;  font-weight: normal;}

#options ul {  margin: 0;  list-style: none;}

#options ul ul {  margin-left: 1.5em;}

#options li {  float: left;  margin-bottom: 0.2em;}

#options li a {
  display: block;
  padding: 0.4em 0.5em;
  background-color: #D3DDEB;
  color: #222;
  font-weight: normal;

  text-shadow: 0 1px hsla( 0, 0%, 100%, 0.5 );
  background-image: -webkit-linear-gradient( top, hsla( 0, 0%, 100%, 0.5 ), hsla( 0, 0%, 100%, 0.0 ) );
  background-image:    -moz-linear-gradient( top, hsla( 0, 0%, 100%, 0.5 ), hsla( 0, 0%, 100%, 0.0 ) );
  background-image:     -ms-linear-gradient( top, hsla( 0, 0%, 100%, 0.5 ), hsla( 0, 0%, 100%, 0.0 ) );
  background-image:      -o-linear-gradient( top, hsla( 0, 0%, 100%, 0.5 ), hsla( 0, 0%, 100%, 0.0 ) );
  background-image:         linear-gradient( top, hsla( 0, 0%, 100%, 0.5 ), hsla( 0, 0%, 100%, 0.0 ) );

}

#options li:first-child a {  border-radius: 7px 0 0 7px;  border-left: none;}

#options li:last-child a {  border-radius: 0 7px 7px 0;}

#options li a {  border-left:  1px solid hsla( 0, 0%, 100%, 0.3 );  border-right: 1px solid hsla( 0, 0%,   0%, 0.2 );}

#options li a:hover {  background-color: #5BF;}






#options li a.selected {  background-color: #13F;  text-shadow: none;  color: white;}


#options .option-combo {  display: inline-block;  margin-right: 10px;

}

#options .option-combo ul {  margin-right: 20px;  display: inline-block;}

#options .option-combo h2,
#options .option-combo h4 {
  line-height: 34px;
  margin-bottom: 0;
  margin-right: 5px;
  display: inline-block;
  vertical-align: top;
}


 ****/





.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }