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

#gridContainerDT {
width: 100%;
height: auto;
margin: 0;
padding: 0;
display: grid;
grid-row-gap: 0;
grid-template-rows: 60vh 30vh 10vh 3px auto 14vw 60px 200px 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' 
	'spA2 ctA1 ctA1 ctA1 ctA1 spA3' 
	'spA4 spA4 spA4 spA4 spA4 spA4' 
	'spA5 spA5 spA5 spA5 spA5 spA5' 
	'spA8 spA7 spA7 spA7 spA7 spA9' 
	'spA8 imB1 imB2 imB3 imB4 spA9' 
	'spA0 spA0 spA0 spA0 spA0 spA0' 
	'spAB spAA spAA spAA spAA spAC' 
	'spAB tiTC tiTC tiTC tiTC spAC' 
	'spAB imC1 imC2 imC3 imC4 spAC' 
	'spAB spAD spAD spAD spAD spAC' 
	'spAG spAE spAE spAE spAE spAH' 
	'foot foot foot foot foot foot'
}

@media (max-width: 840px) {
#gridContainerDT {
grid-template-rows: 60vh 30vh 10vh 3px auto 14vw 60px 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: 100vh auto auto 3px auto 34vw 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'  /* 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;
background-color: #78A2BA;
background-color: #5661A9;
background-color: #56A99E;
background-color: #5E7DA1;
text-align: center
}

.spA0 {padding: 15px 0}

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

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

/*
.ctA1 {
text-align: center;
background-color: transparent;
height: auto
}
*/

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

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

.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
	}
}