FILTER CSS @CLAMAM

.ph-container{
/* ENCONTRADO EM @PASSO-HTML POR @CLAMAM. SE USAR CREDITE A TODOS OS ENVOLVIDOS. RESPEITE! NÃO REMOVA OS CRÉDITOS. */
width:90%;
margin:0 auto;}

input[type="radio"]{
display:none;}

label{
width:23%;
float:left;
text-align:center;
background:#ffffff;
box-shadow:0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.1);
color:#222222;
padding:0.5%;
margin:0.5%;
margin-bottom:30px;
cursor:pointer;}

input[type="radio"][id="ph-orange"]:checked + label{
background:orange;}
input[type="radio"][id="ph-orange"]:checked ~ .ph-red, input[type="radio"][id="ph-orange"]:checked ~ .ph-yellow {
width:0;
height:0;
padding:0;
margin:0;
opacity:0;}

input[type="radio"][id="ph-red"]:checked + label{
background:red;}
input[type="radio"][id="ph-red"]:checked ~ .ph-orange, input[type="radio"][id="ph-red"]:checked ~ .ph-yellow {
width:0;
height:0;
padding:0;
margin:0;
opacity:0;}
input[type="radio"][id="ph-yellow"]:checked + label {
background:yellow;}

input[type="radio"][id="ph-yellow"]:checked ~ .ph-orange, input[type="radio"][id="ph-yellow"]:checked ~ .ph-red {
width:0;
height:0;
padding:0;
margin:0;
opacity:0;}

.ph-title{
width:23%;
height:100px;
float:left;
transition:all 1s;
margin:0.5%;
padding:0.5%;}
.ph-yellow{
background:yellow;}
.ph-orange{
background:orange;}
.ph-red{
background:red;}