@charset "utf-8";
/* CSS Document */

*{
	margin:0;padding:0;
	box-sizing: border-box;
	
}
sup{
	color:grey;
	font-size:10px;
}

.project_container{
	margin: 0 auto;
	margin-bottom:2em;
	width:95%;
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(360px, 1fr));
	font-size:16px;
	grid-column-gap: 60px;
}

.country_container{
	
	padding:10px;
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(45%, 1fr));
	grid-column-gap:60px;
	grid-row-gap:10px;
	align-content: flex-start;
	}

.main_header{
	min-width:100%;
	font-size:28px;
	font-weight:bold;
	color: #121212;
	text-align:center;
	grid-column:1/-1;
}

.section_header{
	margin-top:36px;
	min-width:100%;
	grid-column:1/-1;
	font-size:18px;
	font-weight:bold;
	color: #121212;
	background-color:#F9F9F9;
	border-radius: 5px;
	padding:10px;
	box-shadow: inset 1px 4px 6px  #CCC;
	}

.country_header{
	margin-top:26px;
	min-width:100%;
	grid-column:1/-1;
	font-size:16px;
	font-weight:bold;
	color:#F03B00;
	background-color:#F9F9F9;
	border-radius: 5px;
	padding:10px;
	box-shadow: inset 1px 4px 6px  #CCC;
	}

.project_item{
	display:flex;
	justify-content: space-between;
	flex-wrap: nowrap;
	align-items: center;
	padding:5px;
	column-gap: 5px;
}

.button{
	width:100%;
	font-size:16px;
	padding:10px;
	margin-top:10px;
	border-radius:5px;
	border:1px solid #DDD;
	box-shadow:1px 2px 4px #DDD;
	background-image:url(images/);
	background-color:#EDEDED;
}

.year{
	color:#CC0078;
}

.filter_container{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(100px, 1fr));
	grid-gap:10px;
	justify-content: space-between;
	padding:10px 20px;
}

.filter_container select{
	border:1px solid #DDD;
	box-shadow:1px 2px 4px #DDD;
	background-image:url(images/);
	background-color:	#FDFDFD;
}

@media screen and (max-width:700px){
	
	.filter_container{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(200px, 1fr));
	grid-gap:10px;
	justify-content: space-between;
	padding:10px 20px;
	}

}

@media screen and (max-width:280px){
	.project_container{
	margin: 0 auto;
	margin-bottom:2em;
	width:95%;
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(260px, 1fr));
	font-size:16px;
	grid-column-gap: 10px;
}
}