.efeito img{
 opacity: 1.0; /*esta linha é a que escurece a imagem*/
 } 
.efeito img:hover{
 opacity: 0.2; /*esta linha é a que clareia a imagem*/
 }


h2 {
	font-family:"Monaco", Helvetica, Arial, Trebuchet MS;
	color: #91918C;
	font-size: 12px;
	font-weight: bold;
	width: 300px;
	height: 300px;
}
a {
	font-family:"Monaco",Helvetica, Arial, Trebuchet MS;
	color: #91918C;
	font-size: 12px;
	font-weight: bold;
	width: 20px;
	height: 20px;
	font-size: 0.65em;	
    color: #999;
    text-decoration: none;
	
	}


.menu-on {
	background-color: #000;
	color: #e84700;
	position: fixed;
	right: 900;
	top: 500;
	z-index: 1000;
	padding: 5px;
	font-family:"Monaco",Helvetica, Arial, Trebuchet MS;
	font-weight: bold;
	font-size: 0.65em;
}

.menu-off {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	display: none;
}

nav.primary-nav {
	background-color: #000;
	position: fixed;
	right: 900;
	top: 500;
	min-width: 275px;
	z-index: 1002;
	display: none;
	background-color: #000;
	background-repeat:no-repeat;
	background-position: 70px 20px;
	background-size: 100px 100px;
}


 
 nav.primary-nav a {
	 color: #91918C;
	 display: block;
	 padding: 5px 10px;
	 font-family:"Monaco",Helvetica, Arial, Trebuchet MS;
	 font-size: 0.65em;
 }
 
 
 
#toggle-menu {
	display: none;
} 
 
 #toggle-menu:checked ~ nav.primary-nav {
	 display: block;
 }
 
 #toggle-menu:checked ~ .menu-off {
	 display: block
 }

 
 
 @midia screen and (min-width: 500px) {
	 
	 .menu-on, .menu-off {
		 display: none;
	 }
	 
	 nav.primary-nav {
		 display: block;
		 position: static;
	 }
	 
	 nav.primary-nav a {
		display: inline-block;
	}