/*	lower_header
============================== */
div.lower_header h1 span {
	background-image: url(../img/extra_h2.png);
}
@media all and (min-width: 768px) {
	div.lower_header h1 span {
		width: 400px;
	}
}
/*	content
============================== */
@media all and (min-width: 768px) {
div.content {
	padding: 40px 60px 40px;
}
}
/*	box
============================== */
div.box {
	background-color: #fff;
	box-sizing: border-box;
}
div.box p.pic span {
	background-size: cover;
}
div.box p.pic span,
div.box p.pic span a {
	display: block;
}
div.box p.date,
div.box p.caption {
	text-align: center;
}
div.box p.date {
	background: linear-gradient(transparent 40%, #ffff66 40%);
}
@media all and (min-width: 768px) {
	div.box {
		width: 400px;
		padding: 20px;
		float: left;
		box-shadow:2px 2px 15px 0px hsla(201, 86%, 51%, 0.4);
	}
	li:not(:last-child, :nth-child(odd)) div.box {
		margin-bottom: 40px;
	}
	li:nth-child(odd) div.box {
		margin-right: 40px;
		margin-bottom:  40px;
	}
	div.box p.pic span,
	div.box p.pic span a {
		width: 360px;
		height: 270px;
	}
	div.box p.date,
	div.box p.caption {
		font-size: 17px;
		line-height: 1.8;
	}
	div.box p.date {
		margin-bottom: 0.5em;
	}
	p.lines {
		font-size: 15px;
	}
}
@media screen and (max-width: 767px) {
	div.box {
		padding: 10px;
		box-shadow:2px 2px 7px 0px hsla(201, 86%, 51%, 0.4);
	}
	li:not(:last-child) div.box {
		margin-bottom: 15px;
	}
	div.box p.pic span a {
		margin-bottom: 5px;
		background-size:cover;
		height:0;
		padding-top: 75%;
		position: relative;
	}
	div.box p.pic span a img {
		height:100%;
		position:absolute;
		left:0;
		top:0;
		width:100%;
		text-indent: 110%;
		overflow: hidden;
		white-space: nowrap;
	}

	div.box p.date,
	div.box p.caption {
		font-size: 14px;
		line-height: 1.8;
	}
}