@charset "UTF-8";

body{
	font-family:Arial, sans-serif;
	-webkit-font-smoothing:antialiased;
	color:#333;
	background-color:gainsboro;
}

header h1{
	padding:28px 30px;
	color:#FFF;
	background: radial-gradient(circle,rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 54%, rgba(237, 221, 83, 1) 100%);
	font-weight:bolder;
	text-align: center;
	font-size: 35px;
}

main{
	display:block;
	width:1000px;
	margin:0 auto;
	padding:70px 30px;
}

@media only screen and (max-width: 768px) {
	main {
		width: 100%;
	}
}
main li{
	position:relative;
	float:left;
	width:320px;
	margin:0 20px 50px 0;
	color:#FFF;
	line-height:2em;
}

main li:nth-child(3n){
	margin-right:0;
}

main li img{
	vertical-align:bottom;
}

main div{
	position:absolute;
	display:none;
	width:100%;
	height:100%;
	padding:20px;
	background: rgba(0,128,0,.7);
	top:0;
	left:0;
	box-sizing:border-box;
}

main p{
	position:relative;
	top:10px;
}