.box-wrap {
	max-width: 670px;
	min-width: 332px;
	margin: 30px auto;
	overflow: auto;
	padding: 0;
}
.box {
	background: white;
	border: 1px solid #98E;
	width: 330px;
	margin: 8px 0;
	padding: 0;
}
.box ul {
	padding: 2px 15px;
}
.box ul li {
	list-style: none;
	margin: 0;
}
.box.left {
    background: #FDF6AF;
    color: #9E914F;
    border: 1px solid #9E914F;
	float: left;
}
.box.right {
    background: #F2DCE5;
    color: #525;
    border: 1px solid #CA759E;
	float: right;
}

.box h2 {
	padding: 3px 7px;
	font-size: 12pt;
}
.box img {
	float: none;
	margin: 10px auto;
}
.box.left h2 {
    background: #FEE78F;
    color: #9E914F;
}
.box.right h2 {
    background: #EB81B4;
    color: #F8F8F8;
}

body {
    background: #F7F8F9;
}
header div.subtitle, h1 {
    color: #888A8C;
}

@media screen and (max-width: 696px) {
	.box-wrap {
		overflow: visible;
	}
	.box {
		width: 100%;
	}
	.box ul {
		text-align: center;
        }
}