div {
	margin:0;
	padding:0;
}

.examples {
	display:block;
	width:100%;
	height:100%;
	padding-top:80px;
}

.examples-container {
	display: grid;
	grid:
	'item1 item2 item3 item4 item5 item6'
	'item7 item8 item9 item10 item11 item12'
	'item13 item14 item15 item16 item17 item18';
	grid-gap: 0;
	padding: 0 2%;
	height:80vh;
}

#item1 {
	grid-area: item1;
	background: url('/images/ic-samples/b-and-a-4-before.jpg') no-repeat center;
	background-size: contain;
	cursor:pointer;
}
#item2 {
	grid-area: item2;
	background: url('/images/ic-samples/b-and-a-4-after.jpg') no-repeat center;
	background-size: contain;
	cursor:pointer;
}
#item3 {
	grid-area: item3;
	background: url('/images/ic-samples/Img0003.jpg') no-repeat center;
	background-size: contain;
	cursor:pointer;
}
#item4 {
	grid-area: item4;
	background: url('/images/ic-samples/Img0003_after.jpg') no-repeat center;
	background-size: contain;
	cursor:pointer;
}
#item5 {
	grid-area: item5;
	background: url('/images/ic-samples/Jennifer_layer_before.jpg') no-repeat center;
	background-size: contain;
	cursor:pointer;
}
#item6 {
	grid-area: item6;
	background: url('/images/ic-samples/Jennifer_layer_after.jpg') no-repeat center;
	background-size: contain;
	cursor:pointer;
}
#item7 {
	grid-area: item7;
	background: url('/images/ic-samples/assembly2cape-components.jpg') no-repeat center;
	background-size: contain;
	cursor:pointer;
}
#item8 {
	grid-area: item8;
	background: url('/images/ic-samples/assembly2cape.jpg') no-repeat center;
	background-size: contain;
	cursor:pointer;
}
#item9 {
	grid-area: item9;
	background: url('/images/ic-samples/b&a2-before.jpg') no-repeat center;
	background-size: contain;
	cursor:pointer;
}
#item10 {
	grid-area: item10;
	background: url('/images/ic-samples/b&a2-after.jpg') no-repeat center;
	background-size: contain;
	cursor:pointer;
}
#item11 {
	grid-area: item11;
	background: url('/images/ic-samples/Boy3-components.jpg') no-repeat center;
	background-size: contain;
	cursor:pointer;
}
#item12 {
	grid-area: item12;
	background: url('/images/ic-samples/Boy3.jpg') no-repeat center;
	background-size: contain;
	cursor:pointer;
}
#item13 {
	grid-area: item13;
	background: url('/images/ic-samples/b&a21-before.jpg') no-repeat center;
	background-size: contain;
	cursor:pointer;
}
#item14 {
	grid-area: item14;
	background: url('/images/ic-samples/b&a21-after.jpg') no-repeat center;
	background-size: contain;
	cursor:pointer;
}
#item15 {
	grid-area: item15;
	background: url('/images/ic-samples/Img0094.jpg') no-repeat center;
	background-size: contain;
	cursor:pointer;
}
#item16 {
	grid-area: item16;
	background: url('/images/ic-samples/Img0094_after.jpg') no-repeat center;
	background-size: contain;
	cursor:pointer;
}
#item17 {
	grid-area: item17;
	background: url('/images/ic-samples/b&a11-original.jpg') no-repeat center;
	background-size: contain;
	cursor:pointer;
}
#item18 {
	grid-area: item18;
	background: url('/images/ic-samples/b&a11-after.jpg') no-repeat center;
	background-size: contain;
	cursor:pointer;
}

._odd, ._even {
	display:inline-block;
	height:27vh;
	text-align: center;
	padding: 20px 0;
	font-size: 30px;
}

._odd {
	border:1px dotted black;
}

._even {
	border:1px dotted black;
}


@media only screen and (max-width:1000px) {

	.examples-container {
		display: grid;
		grid:
		'item1 item2 item3 item4'
		'item5 item6 item7 item8'
		'item9 item10 item11 item12'
		'item13 item14 item15 item16'
		'item17 item18 ... ...';
		grid-gap: 0;
		padding: 0 2%;
		height:80vh;
	}
}

@media only screen and (max-width:850px) {

	.examples-container {
		display: grid;
		grid:
		'item1 item2'
		'item3 item4'
		'item5 item6'
		'item7 item8'
		'item9 item10'
		'item11 item12'
		'item13 item14'
		'item15 item16'
		'item17 item18';
		grid-gap: 0;
		padding: 0 2%;
		height:80vh;
	}
}