body,html,h1,h2,p, div,a,img,header,footer,span,section,nav,aside,article,figure,figcaption{
	margin: 0;
	padding: 0;
}
html{
	font-size: 15;
}	



#bin-menu{
	display: none;
}

header label{
	display: none;
	width: 30px;
	height: 30px;
	padding: 10px;
}

header label:hover{
	cursor: pointer;
	background: rgba(0,0,0,0.3);
}
.menu ul {
	margin: 0;
	list-style: none;
	padding: 0;
	display: flex;
	/*padding-right: 10%;*/
	justify-content: flex-end;
}

.menu li:hover{
	background: rgba(0,0,0,0.3);

}

.menu li a {
	font-size: 20px;
	font-weight: bold;
	display: block;
	padding: 15px 20px;
	color: #fff;
	text-decoration: none;
}

@media (max-width: 840px){
 		header label{
 			display: block;
 		}
 		.menu{
 			position: absolute;
 			
 			margin-left:-70%; 
 			width: 50%;
 			transition: all 0.5s;
 		}
 		.menu ul{
 			flex-direction: column;
 		}
 		.menu li{
 			border-top: 1px solid #fff;
 		}

 		#bin-menu:checked ~ .menu{
 			margin: 0;
 		}
 	} 	


main{
	width: 80%;
	margin: 2rem auto;
}
section{
	width: 100%;
	box-shadow: 0 0 5px 2px #ccc;
	padding: 1rem;
}

figure{
	width: calc(100% / 5);
	float: left;
	margin-bottom: 1rem;
	/*position: relative;*/
}

figure a{
	display: inline-block;
	height: 100%;
	margin-left: 1rem;
	width: calc(100% - 2rem);

}

figure img{
	width: 100%;
	vertical-align: middle;
	margin-bottom: 0;

}

figure figcaption{
	background: #C60B46;
	color: #fff;
	text-align: center;
	padding: .4rem;
	margin: 0 1rem;
}

section::after, section:before{
	content: "";
	display: block;
}
section::after{

	clear: both;
}

 @media only screen and (max-width: 1024px){
 	html{
 		font-size: 14px;
 	}
 	figure{
 		width: calc(100% / 4);
 	}
 }

  @media only screen and (max-width: 840px){
 	html{
 		font-size: 12px;
 	}
 	figure{
 		width: calc(100% / 3);
 	}
 }

  @media only screen and (max-width: 640px){
 	html{
 		font-size: 11px;
 	}
 	figure{
 		width: calc(100% / 2);
 	}
 }

  @media only screen and (max-width: 400px){
 	html{font-size: 10.5px;
 	}
 		 	
 	figure{
 		width: 100%;
 	}
 }