/* mobile first */

main {
	width:100%;
	overflow:hidden;
}

section {
	position:relative;
}
section.padded {
	padding:48px 0;
}
@media (max-width: 767px) and (orientation: portrait) {
	section.padded {
		padding:32px 0;
	}
}
section.centred {
	text-align:center;
}
	div.inner {
		margin:0 auto;
		padding-left:10px;
		padding-right:10px;
		position:relative;
	}
	/*clearfix*/
	div.inner:after {
		content: "";
		display: table;
		clear: both;
	}

section.spacebelow + section.spaceabove {
	margin-top:48px;
}

.box {
	margin:2%;
	box-sizing:border-box;
	position:relative;
	display:block;
}

	.box img {
		max-width:100%;
	}

.avoidbreaking, .avoidbreaking > * {
    -webkit-column-break-inside: avoid; /* Chrome, Safari */
    page-break-inside: avoid;           /* Theoretically FF 20+ */
    break-inside: avoid-column;         /* IE 11 */
    display:table;
}

@media (min-width: 768px) {

	div.inner {
		padding-left:0;
		padding-right:0;
	}

	.box {
		margin:0;
	}

	.box.one-half,
	.box.one-third,
	.box.one-quarter {
		float:left;
		width:49%;
		margin-right:2%;
		margin-top:1%;
		margin-bottom:1%;
	}
		.box.one-half:nth-of-type(even),
		.box.one-third:nth-of-type(even),
		.box.one-quarter:nth-of-type(even) {
			margin-right:0;
		}

}


@media (min-width: 1024px) {

	div.inner {
		max-width:1202px;
	}

	.box.one-half {
		float:left;
		width:48.5%;
		margin-right:3%;
		margin-top:1.5%;
		margin-bottom:1.5%;
	}
		.box.one-half:nth-of-type(even) {
			margin-right:0;
		}

	.box.one-third {
		float:left;
		width:32%;
		margin-right:2%;
		margin-top:1%;
		margin-bottom:1%;
	}

		/* overwrite tablet rule */
		.box.one-third:nth-of-type(even) {
			margin-right:2%;
		}
		.box.one-third:nth-of-type(3n) {
			margin-right:0;
		}

	.box.two-thirds {
		float:left;
		width:66%;
		margin-right:3%;
	}
		.box.two-thirds + .box.one-third {
			margin-right:0;
		}

		.box.one-third + .box.two-thirds {
			margin-right:0;
		}

	.box.one-quarter {
		float:left;
		width:22%;
		margin-right:4%;
		margin-top:2%;
		margin-bottom:2%;
	}
		.box.one-quarter:nth-of-type(even) {
			margin-right:4%;
		}
		.box.one-quarter:nth-of-type(4n) {
			margin-right:0;
		}

	.box.three-quarters {
		float:left;
		width:75%;
		margin-right:3%;
	}
		.box.three-quarters + .box.one-quarter {
			margin-right:0;
		}

		.box.one-quarter + .box.three-quarters {
			margin-right:0;
			width:74%;
		}

}