:root{
	--hpHero2colour: rgba(0, 152, 152, 0.4);
	--hpHero2fade: rgba(255, 255, 255, 0.4);
	
	--heroTitleColour: #fff;
	--heroTitleColourHover: #ddd;
	--hpContentColour: #fff;
	--hpHeadingColour: #fff;
	
	--hpHeroColour: #006666;
	--hpHeroColourGrad: -webkit-linear-gradient(to right, #009999 0%, #006666 100%);
	--hpHeroColourGradMoz: -moz-linear-gradient(to right, #009999 0%, #006666 100%);
	--hpHeroColourGradLinear: linear-gradient(to right, #999999 10%, #444444 90%);
	
	--h2-color: #ccc;
	--whiteHighlight: #fff;

	--pageContentListContainerBG: #222;
	
	--contentBoxBorder: #ccc;
	--contentBoxGradientWebkit: -webkit-linear-gradient(to bottom right, #666 60%, #444 100%);
	--contentBoxGradientMoz: -moz-linear-gradient(to bottom right, #666 60%, #444 100%);
	--contentBoxGradient: linear-gradient(to bottom right, #666 60%, #444 100%);
	--captionBulletColour: #ccc;
	--hpTopLeftBorders: linear-gradient(45deg,#fff,transparent) 1;
	--hpTopLeftBordersHover: linear-gradient(45deg,#099,transparent) 1;
	
	--pageContentlinks: #ccc;
	
	transition: 0.5s all ease;
}

[data-theme="dark"] {
	--hpHero2colour: rgba(0, 152, 152, 0.8);
	--hpHero2fade: rgba(255, 255, 255, 0.8);
	
	--heroTitleColour: #fff;
	--heroTitleColourHover: #fff;
	--hpContentColour: #fff;
	--hpHeadingColour: #fff;
	--hpHeroColour: #fff;
	--hpHeroColourGrad: -webkit-linear-gradient(to right, #fff 10%, #fff 100%);
	--hpHeroColourGradMoz: -moz-linear-gradient(to right, #fff 10%, #fff 100%);
	--hpHeroColourGradLinear: linear-gradient(to right, #fff 10%, #fff 100%);
	
	--h2-color: #066;
	--whiteHighlight: #000;
	--pageContentListContainerBG: #777;
	
	--content-box-color: #eee;
	--content-box-border: solid rgba(0,51,51,.9);
	--contentBlockBGColour: #eee;
	--contentBlockBGGradient:linear-gradient(to bottom right,rgba(85,85,85,.5),rgba(85,85,85,.1));
	--contentBoxBorder: #333;
	--contentBoxGradientWebkit: -webkit-linear-gradient(to bottom right, #ccc 60%, #aaa 100%);
	--contentBoxGradientMoz: -moz-linear-gradient(to bottom right, #ccc 60%, #aaa 100%);
	--contentBoxGradient: linear-gradient(to bottom right, #ccc 60%, #aaa 100%);
	--captionBulletColour: #ccc;
	--hpTopLeftBorders: linear-gradient(45deg,#fff,transparent) 1;
	--hpTopLeftBordersHover: linear-gradient(45deg,#066,transparent) 1;

	--pageContentlinks: #ccc;
	
	transition: 0.5s all ease;
}



html {
  scroll-padding-top: 0px;
  scroll-behavior: smooth;
}

.header { grid-area: header; }
.spLft1 { grid-area: spLft1; } /* spacer L1 */
.spLft2 { grid-area: spLft2; } /* spacer L2 */
.spLft3 { grid-area: spLft3; } /* spacer L3 */
.spRgt1 { grid-area: spRgt1; } /* spacer R1 */
.spRgt2 { grid-area: spRgt2; } /* spacer R2 */
.spRgt3 { grid-area: spRgt3; } /* spacer R3 */
.conR1a { grid-area: conR1a; } /* row1 con1 */
.conR1b { grid-area: conR1b; } /* row1 con2 */
.conR2a { grid-area: conR2a; } /* row2 con1 */
.conR2b { grid-area: conR2b; } /* row2 con2 */
.conR3a { grid-area: conR3a; } /* row3 con1 */
.conR3b { grid-area: conR3b; } /* row3 con2 */
.conR4a { grid-area: conR4a; } /* row4 con */
.footer { grid-area: footer; }

/* GENERIC */
.grid-container {
  display: grid;
	  
	grid-template-areas:
	'header header header header header header header header'
	'conR1a conR1a conR1a conR1b conR1b conR1b spRgt1 spRgt1'
	'spLft1 conR2a conR2a conR2a conR2b conR2b conR2b spRgt2'
	'spLft2 spLft2 conR3a conR3a conR3a conR3b conR3b conR3b'
	'spLft3 conR4a conR4a conR4a conR4a conR4a conR4a spRgt3'
	'footer footer footer footer footer footer footer footer';
  
	grid-template-columns: 
	[col-1] 1fr 
	[col-2] 1fr 
	[col-3] 1fr 
	[col-4] 1fr  
	[col-5] 1fr
	[col-6] 2fr 
	[col-7] 1fr
	[col-8] 1fr;
 
	grid-template-rows: 
	4vw /* Hero */
	auto  /* Row 1 Web Design */
	auto  /* Row 2 WS for sml bus */
	auto  /* Row 3 Personal serv */
	auto  /* main content */
	auto; /* footer */

	grid-row-gap: 80px;
	grid-column-gap: 1px;
	margin: 0;
}

/* TABLET */
@media (max-width: 820px) {
	
	.spLft5, .spLft6, .spLft7 {display: none}
		
	.grid-container {
	  display: grid;
		grid-template-areas:
		'header header header header header header header header'
		'conR1a conR1a conR1a conR1b conR1b conR1b spRgt1 spRgt1'
		'spLft1 conR2a conR2a conR2a conR2b conR2b conR2b spRgt2'
		'spLft2 spLft2 conR3a conR3a conR3a conR3b conR3b conR3b'
		'conR4a conR4a conR4a conR4a conR4a conR4a conR4a conR4a'
		'footer footer footer footer footer footer footer footer';
	  
		grid-template-columns: 
		[col-1] 1fr 
		[col-2] 1fr 
		[col-3] 1fr 
		[col-4] 1fr  
		[col-5] 1fr
		[col-6] 2fr 
		[col-7] 1fr
		[col-8] 1fr;
	 
		grid-template-rows: 
		4vw /* Hero */
		auto  /* Row 1 Web Design */
		auto  /* Row 2 WS for sml bus */
		auto  /* Row 3 Personal serv */
		auto  /* main content */
		auto; /* footer */

		grid-row-gap: 80px;
		grid-column-gap: 1px;
		margin: 0;
	}
}

/* MOBILE */
@media (max-width: 640px) {
	.conR5a { grid-area: conR5a; } /* row5 con1 mobile only*/
	.conR5b { grid-area: conR5b; } /* row5 con2 mobile only*/
	.conR6a { grid-area: conR6a; } /* row6 con1 mobile only*/
	.conR6b { grid-area: conR6b; border:solid 1px green;} /* row6 con2 mobile only*/
	.conR7a { grid-area: conR7a; } /* row7 con1 mobile only*/
	.conR7b { grid-area: conR7b;  border:solid 1px blue;} /* row7 con2 mobile only*/
	.spLft5 { grid-area: spLft5; } /* spacer R3 mobile only*/
	.spLft6 { grid-area: spLft6; border:solid 1px red;} /* spacer R3 mobile only*/
	.spLft7 { grid-area: spLft7; background-color: yellow; } /* spacer R3 mobile only*/
	
	.spRgt1, .spRgt2, .spRgt3, .conR4a {display: none}
	.grid-container {
	  display: grid;
	  
		grid-template-areas:
		'header header header header header header'
		'conR1a conR1a conR1a conR1a conR1a conR1a'
		'spLft1 conR1b conR1b conR1b conR1b conR1b'
		'conR2a conR2a conR2a conR2a conR2a conR2a'
		'spLft2 conR2b conR2b conR2b conR2b conR2b'
		'conR3a conR3a conR3a conR3a conR3a conR3a'
		'spLft3 conR3b conR3b conR3b conR3b conR3b'
		'conR5a conR5a conR5a conR5a conR5a conR5a'
		'spLft5 conR5b conR5b conR5b conR5b conR5b'
		'conR6a conR6a conR6a conR6a conR6a conR6a'
		'spLft6 conR6b conR6b conR6b conR6b conR6b'
		'conR7a conR7a conR7a conR7a conR7a conR7a'
		'spLft7 conR7b conR7b conR7b conR7b conR7b'
		/*'footer footer footer footer footer footer'*/;
	  
		grid-template-columns: 
		[col-1] 12vw 
		[col-2] 12vw 
		[col-3] 12vw 
		[col-4] 12vw  
		[col-5] 12vw
		[col-6] auto;
	 
		grid-template-rows: 
		2vw /* Hero */
		auto  /* Row 1a Web Design TARGA WEB DESIGN */
		auto  /* Row 1b content We pride ourselves */
		auto  /* Row 2a Web Design WEBSITES FOR BUSINESS */
		auto  /* Row 2b content We have some great */
		auto  /* Row 3a Web Design WEB DESIGN FOR MOTORSPORTS */
		auto  /* Row 3b content */
		auto  /* main content 8 SEARCH ENGINE OPTIMISATION */
		
		auto /* We offer an ongoing SEO  */
		auto /* 25 YEARS WEB EXPERIENCE */
		auto /* With more than 25 years */
		auto /* LATEST POSTS */
		auto; /* bullets */
		
		/* auto;  footer */

		grid-row-gap: 10px;
		grid-column-gap: 1px;
		margin: 0;
	}
}


/* GENERIC */
.conR1a, .conR2a, .conR3a, .conR5a, .conR6a, .conR7a { 
	text-align: right;
	padding: 0px 15px 2px 10px
}

.conR1b, .conR2b, .conR3b { 
	border-top: solid white;
	border-left: solid white;
	border-image: var(--hpTopLeftBorders) 1;
	padding: 10px 15px 0 15px;
	color: rgba(255, 255, 255, 0.5)
	}


.conR1b:hover, .conR2b:hover, .conR3b:hover { 
	border-image: var(--hpTopLeftBordersHover) 1;
	transition: .3s;
	color: rgba(255, 255, 255, 0.7);
	}		

.footer {
	margin: 0px;
}


.hpHeroContainer {
	width: 96vw;
	height: 100vh;
	animation: fadeIn ease 8s;
	-webkit-animation: fadeIn ease 4s;
	-moz-animation: fadeIn ease 4s;
	-o-animation: fadeIn ease 4s;
	-ms-animation: fadeIn ease 4s
}

@media screen AND (max-width: 820px) {
.hpHeroContainer {
	all:unset;
	display: none
	}
}


@keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
}
}

@keyframes mymove2 {
  from {top: 0px;}
  to {top: 0px; color: rgba(255, 255, 255, 0.4);}
}

.hpSplash {
	font-family: arial,helvetica,sans-serif;
	padding: 60vh 60px 0 0;
	font-size: 7vw;
	letter-spacing: 2px;
	line-height: 130%;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.3);
	margin: 0;
	text-align: right;
}
.hpSplash2 {
	line-height: 130%;
	margin: 0;
	text-align: right;
}
a.hpSplash2 {
	padding: 0px 90px 0 0;
	font-size: 2.5vw;
	line-height: 130%;
	color: rgba(255, 255, 255, 0.4);
	text-decoration:none;
	margin: 0;
	text-align: right;
}
a.hpSplash2:hover {
	color: rgba(255, 255, 255, 0.4);
}

@media screen AND (max-width: 820px) {
	p.hpSplash {padding: 20vh 0 10vh 20px;text-align: left;margin: 0 auto}
}

p.hpHero1, p.hpHero1Small {
	position: relative;
	font-family: Copperplate,Copperplate Gothic Light,fantasy; 
	font-size: 16vw;
	padding: 120px 0 0 0;
	line-height: 100%;
	color: rgba(255, 255, 255, 0);
	
	background: var(--hpHeroColour);
	background: var(--hpHeroColourGrad);
	background: var(--hpHeroColourGradMoz);
	background: var(--hpHeroColourGradLinear);
	
		
	
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.0);
	margin: 0 auto;
	text-align:center;
	animation: heroPulse 5s;
	transition-timing-function: ease-in-out;
	animation-fill-mode: forwards;
	z-index:100;
}

.hpHero1Small {font-size: 13vw}
		
@keyframes DGHmymove {
  from {top: 140px}
  to {top: 140px; color: rgba(255, 255, 255,0.8);
  text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.8);}
}


@keyframes DGHheroPulse {
	100% {text-shadow: 3px 3px 1px rgba(204, 204, 204, 0.7)}
}


@keyframes mymove {
  from {top: 140px}
  to {top: 140px; color: rgba(255, 255, 255,0.8);text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.8);}
}


@keyframes heroPulse {
	100% {text-shadow: 1px 1px 10px rgba(0, 152, 152, 0.4)};
}

.hpHero2, .hpHero2b {
	position: relative;
	font-family: Copperplate,Copperplate Gothic Light,fantasy;
	font-weight:400;
	font-size: 5vw;
	padding: 25px 0 5px 0;
	line-height: 120%;
	
	color: var(--hpHero2colour);
	
	margin: 0 auto;
	text-align:center;
	animation: mymove2 4s;
	animation-delay: 2s;
	animation-fill-mode: forwards;
	z-index:50;
}

.hpHero2b {
	padding: 10px 0 10px 0;
	animation-delay: 3s;
}

@keyframes mymove2 {
	from {top: 0px;}
	to {top: 0px; color: var(--hpHero2fade)}
}

.hpHero3 {text-align:center;}

a.hpHero3:link,a.hpHero3:visited {
	font-family: Garamond, serif;
	position: relative;
	font-size: 4vw;
	padding: 20px 0 0 0;
	line-height: 150%;
	font-weight: 400;
	text-shadow: 0px 0px 0px rgba(255, 255, 255, 0);
	color: rgba(255, 255, 255, 0);
	margin: 50px auto 0 auto;
	text-align:center;
	text-decoration: none;
	animation-delay: 4s;
	animation: pulse 2s infinite;
	z-index:200;
}

@keyframes pulse {
	0% {
		color: rgba(255, 255, 255, 0);
		text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.3);
	}

	50% {
		color: rgba(255, 255, 255, 0.5);
		text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
	}

	0% {
		color: rgba(255, 255, 255, 0);
		text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.3);
	}
}

@keyframes mymove3 {
 /*  from {top: 0px;}
  to {top: 0px; color: rgba(255, 255, 255, 0.8); */
  transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
}

@keyframes mymove4 {
  from {top: 0px;}
  to {top: 0px; color: rgba(0, 255, 255, 0.3);}
}

h1.hpHeroTitle, h2.hpHeroTitle {
	font-family: Copperplate, "Copperplate Gothic Light", Garamond, serif;
	text-transform: uppercase;
	font-size: 22pt;
	letter-spacing: 2px;
	line-height: 130%;
	font-weight: 400;
	color: var(--heroTitleColour);
	margin: 0;
	text-align: left;
}

a.hpHeroLink {
	color: var(--heroTitleColour);
	text-decoration: none;
}


a.hpHeroLink:hover {
	color: var(--heroTitleColourHover);
}

p.hpHeroContent, p.hpContent, p.hpContentTitle {
	font-size: 14pt;
	line-height: 150%;
	font-weight: 400;
	margin: 0 15px 20px 20px;
}

@media (max-width: 640px) {p.hpHeroContent{font-size: 13pt}}

p.hpContent {
	font-size: 13pt;
	color: rgba(255, 255, 255, 0.7);
	color: var(--hpContentColour);
}

p.hpHeroContent {
	margin: 0;
	color: var(--hpContentColour);
}

p.hpContentTitle {
	color: #fff;
	font-size: 16pt;
	margin: 2pt 0 5pt 0;
}


.hpHeadingColour{color:var(--hpHeadingColour)}



.homepageBullets {
	color: #fff;
	margin: 0 0 0 25px;
}

/* TABLET */
@media screen AND (max-width: 820px) {
	h1.hpHeroTitle, h2.hpHeroTitle {
	font-size: 28pt;
	}
	
	p.hpContentTitle {
	color: #fff;
	font-size: 18pt;
	margin: 15pt 0 5pt 15pt;
	}
	
	p.hpContent {
	padding: 0 15px 0 0;
	}
}

/* MOBILE */
@media (max-width: 640px) {
	h1.hpHeroTitle, h2.hpHeroTitle {
	font-size: 16pt;
	padding: 0 0 5px 0;
	}
	
	p.hpContentTitle {
	font-size: 18px;
	color: #066;
	margin: 10pt 0 6pt 15pt;
	font-weight: 700;
	}
	
	p.hpContent {
	color: rgba(0, 0, 0, 0.8);
	font-size: 17px;
	padding: 0;
	}
	
	.homepageBullets {
	color: #fff;
	margin: 0 0 0 5px;
	}
	
	.conR1b, .conR2b, .conR3b, .conR5b, .conR6b, .conR7b { 
	border-top: solid white;
	border-bottom: solid white;
	border-left: solid white;
	border-image: linear-gradient(45deg,#fff,transparent) 1;
	border-image: linear-gradient(90deg,#fff,transparent) 1;
	padding: 12px 15px 7px 15px;
	margin-bottom: 20px;
	color: rgba(255, 255, 255, 0.8);
	background-color: rgba(0, 185, 185, 0.2)
	}
		
	.conR1b:hover, .conR2b:hover, .conR3b:hover, .conR5b:hover, .conR6b:hover, .conR7b:hover { 
	border-image:linear-gradient(45deg,#099,transparent) 1;
	transition: .3s;
	color: rgba(255, 255, 255, 0.7);
	}
}