@charset "utf-8";

.maxwidth {
	margin: 0 auto;
	max-width: calc(100% - 40px);
}

/* -------- Responsive Medium -------- */

@media screen and (min-width: 480px) {

	/* -------- two columns -------- */
	
	.content .twocolumns {
		display: flex;
		flex-flow: row wrap;
		margin-bottom: 1.2em;
	}
	
	.content .twocolumns .left,
	.content .twocolumns .right {
		flex: 0 0 50%;
		margin-top: 1.2em;
	}
	
	.content .twocolumns .left {
		padding-right: 12px;
	}
	
	.content .twocolumns .right {
		padding-left: 12px;
	}
	
	.content .twocolumns .left:first-child,
	.content .twocolumns .left:first-child + .right {
		margin-top: 0;
	}
	
	.content .twocolumns .left > :first-child,
	.content .twocolumns .right > :first-child {
		margin-top: 0;
	}
	
	.content .twocolumns .left > :last-child,
	.content .twocolumns .right > :last-child {
		margin-bottom: 0;
	}
	
	
	/* -------- book -------- */
	
	.content .book {
		display: flex;
		flex-flow: row wrap;
		margin-bottom: 1.2em;
	}
	
	.content .book .left,
	.content .book .right {
		margin-top: 1.2em;
	}
	
	.content .book .left {
		flex: 0 0 28%;
		padding-right: 12px;
	}
	
	.content .book .right {
		flex: 1 1 0%;
		padding-left: 12px;
	}
	
	.content .book .left:first-child,
	.content .book .left:first-child + .right {
		margin-top: 0;
	}
	
	.content .book .left > :first-child,
	.content .book .right > :first-child {
		margin-top: 0;
	}
	
	.content .book .left > :last-child,
	.content .book .right > :last-child {
		margin-bottom: 0;
	}
	
}

@media screen and (min-width: 728px) {

	.maxwidth {
		max-width: calc(728px - 40px);
	}

}

/* -------- Responsive Large -------- */

@media screen and (min-width: 978px) {
	
	.maxwidth {
		max-width: calc(978px - 40px);
	}
	
}