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

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

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

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

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

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

label + p, input + p {

}

p > input {
    padding: 0;
    margin: 0;
    height: 16px;
    width: 16px;
    float: left;
    position: absolute;
    left: 0;
    opacity: 0;
}
p > label {
    float: left;
    text-indent: 22px;
    line-height: 16px;
    padding-top: 2px;
}
p:not(#foo) > input:hover + label, p:not(#foo) > input:focus + label,
p:not(#foo) > input + label:hover, p:not(#foo) > input:focus + label {
    cursor: pointer;
}

p:not(#foo) > input + label {
    background: url('../images/icons/gr_custom-inputs.png') 0 0 no-repeat;
    height: 16px;
}
p:not(#foo) > input[type=radio] + label	{ background-position: 0 -160px; }

/* Checked styles */
p:not(#foo) > input[type=radio]:checked + label { background-position: 0 -240px; }
p:not(#foo) > input[type=checkbox]:checked + label { background-position: 0 -80px; }
p:not(#foo) > input[type=checkbox]:hover:checked + label,
p:not(#foo) > input[type=checkbox]:focus:checked + label,
p:not(#foo) > input[type=checkbox]:checked + label:hover,
p:not(#foo) > input[type=checkbox]:focus:checked + label { background-position: 0 -100px; }
p:not(#foo) > input[type=radio]:hover:checked + label,
p:not(#foo) > input[type=radio]:focus:checked + label,
p:not(#foo) > input[type=radio]:checked + label:hover,
p:not(#foo) > input[type=radio]:focus:checked + label { background-position: 0 -260px; }

/* Hover & Focus styles */
p:not(#foo) > input[type=checkbox]:hover + label,
p:not(#foo) > input[type=checkbox]:focus + label,
p:not(#foo) > input[type=checkbox] + label:hover { background-position: 0 -20px; }
p:not(#foo) > input[type=radio]:hover + label,
p:not(#foo) > input[type=radio]:focus + label,
p:not(#foo) > input[type=radio] + label:hover { background-position: 0 -180px; }

/* Active styles */
p:not(#foo) > input[type=checkbox]:active + label,
p:not(#foo) > input[type=checkbox] + label:hover:active	{ background-position: 0 -40px; }
p:not(#foo) > input[type=radio]:active + label,
p:not(#foo) > input[type=radio] + label:hover:active { background-position: 0 -200px; }
p:not(#foo) > input[type=checkbox]:active:checked + label,
p:not(#foo) > input[type=checkbox]:checked + label:hover:active	{ background-position: 0 -120px; }
p:not(#foo) > input[type=radio]:active:checked + label,
p:not(#foo) > input[type=radio]:checked + label:hover:active { background-position: 0 -280px; }

/* Disabled styles */
p:not(#foo) > input[type=checkbox]:disabled + label,
p:not(#foo) > input[type=checkbox]:hover:disabled + label,
p:not(#foo) > input[type=checkbox]:focus:disabled + label,
p:not(#foo) > input[type=checkbox]:disabled + label:hover,
p:not(#foo) > input[type=checkbox]:disabled + label:hover:active { background-position: 0 -60px; }
p:not(#foo) > input[type=radio]:disabled + label,
p:not(#foo) > input[type=radio]:hover:disabled + label,
p:not(#foo) > input[type=radio]:focus:disabled + label,
p:not(#foo) > input[type=radio]:disabled + label:hover,
p:not(#foo) > input[type=radio]:disabled + label:hover:active { background-position: 0 -220px; }
p:not(#foo) > input[type=checkbox]:disabled:checked + label,
p:not(#foo) > input[type=checkbox]:hover:disabled:checked + label,
p:not(#foo) > input[type=checkbox]:focus:disabled:checked + label,
p:not(#foo) > input[type=checkbox]:disabled:checked + label:hover,
p:not(#foo) > input[type=checkbox]:disabled:checked + label:hover:active { background-position: 0 -140px; }
p:not(#foo) > input[type=radio]:disabled:checked + label,
p:not(#foo) > input[type=radio]:hover:disabled:checked + label,
p:not(#foo) > input[type=radio]:focus:disabled:checked + label,
p:not(#foo) > input[type=radio]:disabled:checked + label:hover,
p:not(#foo) > input[type=radio]:disabled:checked + label:hover:active { background-position: 0 -300px; }