.swatches-container {}
.swatches-container .swatch-img,
.swatches-container .swatch-span { margin:0 1px 1px 0; }
.swatches-container .swatch-img { border:2px solid transparent; cursor: pointer; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease 0s;  }
.swatches-container .swatch-img:hover { transform:scale(1.2); box-shadow: 0 0 16px rgba(0, 0, 0, 0.11);}
.swatches-container .swatch-img.current { transform:scale(1); border:2px solid #000 !important; background:#fff; opacity:1;}
.swatches-container .swatch-span { }

/*Hack to disable particular swatch with name 'niet-leverbaar.png'. To disable swatch go to backend and change image name associated with unavailable color to 'niet-leverbaar.png'*/
img[src*="niet-leverbaar.png"] {display:none}

/*To control KP swatches */
img[src*="swatches/lettertype/"] {border-radius:10px !important; margin:0px 40px 5px 0px !important; border-right: 2px solid #e3e3e3 !important; border-left: 2px solid #e3e3e3 !important; opacity: 0.75;}
img[src*="swatches/lettertype/"]:hover {background:#fff; opacity:1;}