@import url(http://fonts.googleapis.com/css?family=Quicksand:700); 

* {
margin: 0;
padding: 0;
border: 0 none;
position: relative;
}

*, ::after, ::before {
-moz-box-sizing: border-box;
box-sizing: border-box;
}

#galeria {
background: #fff ;
display: inline-block;
max-width: 900px;
margin: 1rem auto;
padding: 0 10px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), 0 15px 15px -12px rgba(0, 0, 0, 0.35);
text-align: center;
border-radius: 3px;
}
 
figure#filtro {
margin: 0 0 15px;
padding: 0;
text-align: center;
letter-spacing: 10px;
}
 
figure#filtro img {
width: 250px;
margin: 10px 0 0 0;
border-radius: 5px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), 0 15px 15px -12px rgba(0, 0, 0, 0.55);
border-top: 1px solid #e0e0e0;
-webkit-transition: 1s;
transition: 1s;
}

    input#aulaa:checked ~ figure img.aulaa {
	width: 250px;
	}
	
    input#aulaa:checked ~ figure img:not(.aulaa) {
	opacity:0;
	position: absolute;
	top: 0; left: 50%;
	} 
	
    input#aulab:checked ~ figure img.aulab {
	width: 250px;
	}
	
    input#aulab:checked ~ figure img:not(.aulab) {
	opacity:0;
	position: absolute; 
	top: 0;
	left: 50%;
	} 
	
    input#aulac:checked ~ figure img.aulac {
	width: 250px;
	}
	
    input#aulac:checked ~ figure img:not(.aulac) {
	opacity:0;
	position: absolute;
	top: 0; 
	left: 50%;
	}  
	
    input#aulad:checked ~ figure img.aulad {
	width: 250px;
	}
	
    input#aulad:checked ~ figure img:not(.aulad) {
	opacity:0; 
	position: absolute;
	top: 0;
	left: 50%;
	} 
	
    input#secret:checked ~ figure img.secret {
	width: 250px;
	}
	
    input#secret:checked ~ figure img:not(.secret) {
	opacity:0; 
	position: absolute;
	top: 0;
	left: 50%;
	}
	
    input#despatx:checked ~ figure img.despatx {
	width: 250px;
	}
	
    input#despatx:checked ~ figure img:not(.despatx) {
	opacity:0; 
	position: absolute;
	top: 0;
	left: 50%;
	}
	
    input#varis:checked ~ figure img.varis {
	width: 250px;
	}
	
    input#varis:checked ~ figure img:not(.varis) {
	opacity:0; 
	position: absolute;
	top: 0;
	left: 50%;
	}
	
    input#x:checked ~ figure img {
	width:0;
	opacity:0;
	transition: .5s;
	webkit-transition: .5s;
	}

    input#todo:checked ~ figure img {
	width: 250px;
	display: inline-block;
	margin: 15px 0 0 0;
	border-radius: 3px;
	0 0 4px rgba(0, 0, 0, 0.2), 0 15px 15px -12px rgba(0, 0, 0, 0.45);
	border-top: 1px solid #e0e0e0;
	}  

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

label {
position: relative;
padding:.5rem;
border-radius: 3px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(0,0,0,.1);
display: inline-block;
margin: 15px 1px 0 0;
background: #eee;
}

label:hover {
cursor: pointer;
background: #e5e5e5;
color: tomato;
transition: .4s;
}

input#x + label {
padding:5px;
border-radius: 50%;
background: #eee;
color: #999;
font-size: 1.5rem;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5), 0 5px 8px -4px rgba(0, 0, 0, 0.45) inset;
}

input#x + label:hover, input#x:checked + label {
background: tomato;
color: #fff;
transition: .4s;
}

input:checked + label {
background: rgba(0, 0, 0, 0.25); 
ext-shadow: 0 0 1px #222222;
color: #fff;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5), 0 5px 8px -4px rgba(0, 0, 0, 0.45);
border-color: #fff;
}