body {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #24678d
}

#gridContainerDT {
width: 100%;
height: auto;
margin: 0;
padding: 0;
display: grid;
grid-row-gap: 0;
grid-template-rows: 25vh 15vh 10vh 3px auto auto 0px auto 13.3vw 100px auto auto;
grid-template-columns: [col-start] 10% [col-2] 20% [col-3] 20% [col-4] 20% [col-5] 20% [col-end] 10%;
grid-template-areas: 
	'spA1 spA1 spA1 spA1 spA1 spA1'	/* 25vh was 60vh */
	'spA2 ctA1 ctA1 ctA1 ctA1 spA3'	/* 10vh was 30vh contains H1 tag */
	'spA4 spA4 spA4 spA4 spA4 spA4' /* 10vh */
	'spA5 spA5 spA5 spA5 spA5 spA5' /* 3px */
	'spA8 spA7 spA7 spA7 spA7 spA9' /* auto spA7 contains body content */
	/* 'spA8 imB1 imB2 imB3 imB4 spA9' 14vw contains first row of images */
	'spA8 spA0 spA0 spA0 spA0 spA9' /* auto was 60px */
	'spAB spAA spAA spAA spAA spAC' /* 200px */
	'spAB tiTC tiTC tiTC tiTC spAC' /* auto tiTC contains body content*/
	'spAB imC1 imC2 imC3 imC4 spAC' /* 13.3vw contains 2nd row of images */
	'spAB spAD spAD spAD spAD spAC' /* 100px */
	'spAG spAE spAE spAE spAE spAH' /* auto */
	'foot foot foot foot foot foot' /* auto */
}

@media (max-width: 840px) {
#gridContainerDT {
	/* 
	grid-template-rows: 60vh 30vh 10vh 3px auto 14vw 60px 200px auto 13.3vw 100px 350px auto; */
	grid-template-rows: 40vh 40vh 30vh 3px auto auto 200px auto 13.3vw 100px 350px auto;
	}
}

@media (max-width: 700px) {
	#gridContainerDT {
	width:100%;
	height: auto;
	margin: 0;
	padding: 0;
	display: grid;
	grid-row-gap: 0;
	grid-template-rows: 50vh auto auto 3px auto auto 2px auto 33vw auto auto;
	grid-template-columns: [col-start] 25% [col-2] 25% [col-3] 25% [col-end] 25%;
	grid-template-areas: 
		'ctA1 ctA1 ctA1 ctA1'  /* 50vh was 100vh */
		'ctB1 ctB1 ctB2 ctB2'  /* auto */
		'ctB3 ctB3 ctB4 ctB4'  /* auto */
		'spA5 spA5 spA5 spA5'  /* 3px */
		'spA7 spA7 spA7 spA7'  /* auto */
		/* 'imB2 imB2 imB3 imB3'  34vw */
		'spA0 spA0 spA0 spA0'  /* auto */
		'spAA spAA spAA spAA'  /* 2px */
		'tiTC tiTC tiTC tiTC'  /* auto */
		'imC2 imC2 imC3 imC3'  /* 33vw  images  */
		'spAE spAE spAE spAE'  /* auto */
		'foot foot foot foot'  /* auto */
	}

	.ctA1 {
	text-align: center;
	background-color: transparent;	
	height: auto;
	padding: 70px 10px 10px 10px
	}

	.doNotDisplay {
	display: none
	}
}

.blockItem {	
dislay: flex;
justify-content: center;
align-items: center;
text-align: left;
background-color: #fff
}

.spA1,.spA2,.spA3,.spA4,.spAA,.spAB,.spAC,.spAD {background: 0 0}

.spA0,.spA7,.spA8,.spA9 {
background-color: #24678d;
text-align: center
}

.spA0 {padding: 5px 0 15px 0; text-align: left}

@media (max-width: 640px) {
	.spA0 {padding: 5px 10px 15px 15px; border: solid 1px grey; text-align: left}
}

.spA7 {text-align: left;padding: 15px 0}

.tiTC {
color: #000;
padding: 0 15px;
margin: 0
}

.ctA1 {
text-align: left;
background-color: transparent;
height: auto
}

.imB1,.imB2,.imB3,.imB4 {
width: 100%;
background-color: #24678d
}

.imC1,.imC2,.imC3,.imC4 {
width: 100%;
background-color: #fff
}

.gridImg {
width: 100%;
border: solid 1px #fff;
background-color: #fff
}

.spA1 {grid-area: spA1}

.spA2 {grid-area: spA2}

.spA3 {grid-area: spA3}

.spA4 {grid-area: spA4}

.spA5 {grid-area: spA5}

.spA6 {grid-area: spA6}

.spA7 {grid-area: spA7}

.spA8 {grid-area: spA8}

.spA9 {grid-area: spA9}

.spA0 {grid-area: spA0}

.spAA {grid-area: spAA}

.spAB {grid-area: spAB}

.spAC {grid-area: spAC}

.spAD {grid-area: spAD}

.spAE {grid-area: spAE}

.spAG {grid-area: spAG}

.spAH {grid-area: spAH}

.tiTC {grid-area: tiTC}

.ctA1 {grid-area: ctA1}

.foot {grid-area: foot}

.imB1 {grid-area: imB1}

.imB2 {grid-area: imB2}

.imB3 {grid-area: imB3}

.imB4 {grid-area: imB4}

.imC1 {grid-area: imC1}

.imC2 {grid-area: imC2}

.imC3 {grid-area: imC3}

.imC4 {grid-area: imC4}

.bgimg-0,.bgimg-1,.bgimg-2,.bgimg-3,.bgimg-4 {
position: relative;
opacity: 1;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover
}

@media (max-width: 700px) {
	.spA7,.spAE {
	text-align:left;
	padding: 0 15px;
	}

	.foot {
	grid-area: foot;
	background-color: #005f73
	}
	}

	@media only screen and (max-device-width: 1024px) {
	.bgimg-1,.bgimg-2,.bgimg-3,.bgimg-4 {
	background-attachment:scroll
	}
}