@font-face {
		
		font-family: Jost; 
		src: url(/periodelectricals/lib/fonts/Jost-VariableFont_wght.ttf);
	
	}

	html, body {
		
		margin: 0;
		background-color: black;
		height: 100%;
		width: 100%;
		
		--margin: 16px;
		--margin-grid-half: 0.3vw;
		--margin-grid-full: 0.6vw;
		
		--colour-1: #C54B27;
		--colour-2: #D97F2A;
		--colour-3: #D5C555;
		--colour-4: #563D19;
		--colour-5: #CCC7A1;
		--colour-6: #FAFBE1;
		--colour-7: #15789C;
		--colour-8: #1EB1E6;
		--colour-9: black;
		--colour-10: rgb(48, 48, 48);
		--colour-11: #C0E7F9;
		
		--text-colour-main: white;
		
		font-family: "Jost", sans-serif;
		font-size: 1.4vw;
		color: var(--text-colour-main);
	}
	
	h1 {
		
		font-weight: 400;
		
	}
	
	a { 
		
		text-decoration: none;
		color: var(--text-colour-main);
		
	}
	
	.grid {
		
		--cols: 16;
		--rows: 9;
		
		display: grid;
		grid-template-columns: repeat(var(--cols), 1fr);
		grid-template-rows: repeat(var(--rows), 1fr);
		
		position: absolute;
		top: 0;
		left: 0;
		
		/* Each cell stays square based on full width */
		width: calc(100vw - ( 2 * var(--margin)) );
		height: calc(100vw * (var(--rows) / var(--cols)));
		
		background-size: calc(100% / var(--cols)) calc(100% / var(--rows));
		background-repeat: repeat;
		
		margin: 1%;
		width: 98%;
		box-sizing: border-box;
		
	}
	
	.nav {
		
		grid-column: 1 / span 3;
		grid-row: 1 / span 3;		
		
		display: grid; 
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(3, 1fr);
		
	}
	
	.nav .menu {
		
		cursor: pointer;
		transition: margin 0.5s;
		
	}
	
	.nav .menu:hover {
		
		margin: 8px; 
		
	}
	
	.nav .logo_1 {
		
		grid-column: 1 / span 1;
		grid-row: 1 / span 1;
		background: var(--colour-1);
		margin-bottom: var(--margin-grid-half);
		margin-right: var(--margin-grid-half);
		
	}
	
	.nav .logo_2 {
		
		grid-column: 2 / span 1;
		grid-row: 1 / span 1;
		background: var(--colour-2);
		margin-bottom: var(--margin-grid-half);
		margin-left: var(--margin-grid-half);
		margin-right: var(--margin-grid-half);
		
	}
	
	.nav .logo_3 {
		
		grid-column: 3 / span 1;
		grid-row: 1 / span 1;
		background: var(--colour-3);
		margin-bottom: var(--margin-grid-half);
		margin-left: var(--margin-grid-half);		
	}
	
	.nav .logo_4 {
		
		grid-column: 1 / span 1;
		grid-row: 2 / span 1;
		background: var(--colour-4);
		margin-top: var(--margin-grid-half);
		margin-bottom: var(--margin-grid-half);
		margin-right: var(--margin-grid-half);
		
	}
	
	.nav .logo_5 {
		
		grid-column: 2 / span 1;
		grid-row: 2 / span 1;
		background: var(--colour-5);
		margin-top: var(--margin-grid-half);
		margin-bottom: var(--margin-grid-half);
		margin-left: var(--margin-grid-half);
		margin-right: var(--margin-grid-half);
		
	}
	
	.nav .logo_6 {
		
		grid-column: 3 / span 1;
		grid-row: 2 / span 1;
		background: var(--colour-6);
		margin-top: var(--margin-grid-half);
		margin-bottom: var(--margin-grid-half);
		margin-left: var(--margin-grid-half);
		
	}

	.nav .logo_7 {
		
		grid-column: 1 / span 1;
		grid-row: 3 / span 1;
		background: var(--colour-7);
		margin-top: var(--margin-grid-half);
		margin-right: var(--margin-grid-half);
		
	}
	
	.nav .logo_8 {
		
		grid-column: 2 / span 1;
		grid-row: 3 / span 1;
		background: var(--colour-8);
		margin-top: var(--margin-grid-half);
		margin-left: var(--margin-grid-half);
		margin-right: var(--margin-grid-half);
		
	}
	
	.nav .logo_9 {
		
		grid-column: 3 / span 1;
		grid-row: 3 / span 1;
		background: var(--colour-9);
		margin-top: var(--margin-grid-half);
		margin-left: var(--margin-grid-half);
		background-image: url('/periodelectricals/lib/img/branding/logo_icon_blue.svg');
		background-size: cover;
		
	}
	
	.logo img {
		
		width: 100%;
		height: 100%;
		
	}
	
	.title-page {
		
		grid-column: 4 / span 4;
		grid-row: 1 / span 1;
		margin-bottom: var(--margin-grid-half);
		margin-left: var(--margin-grid-full);
			  
		background: var(--colour-1);
		display: flex;
		align-items: center;
		justify-content: center;
		
		font-size: 3.5vw;
		font-weight: 500;
		letter-spacing: 6px;
		text-transform: uppercase;
	  
	}
	
	.title-home {
		
		letter-spacing: 14px;
		background-color: var(--colour-11) !important;
		color: black !important;
	}	
	
	.title-sub {
		
		z-index: 100;
		
		display: none;
		
		grid-column: 4 / span 4;
		grid-row: 2 / span 1;
		
		margin-top: var(--margin-grid-half);
		margin-bottom: var(--margin-grid-half);
		margin-left: var(--margin-grid-full);

		align-items: center;
		justify-content: center;
		font-size: 1.9vw;
		font-weight: 500;
		letter-spacing: 6px;

		color: white;
		background-color: var(--colour-10);		
	}
	
	.title-sub-highlight {
	
		background-color: rgb(50, 50, 50);
		color: white;
	
	}
	
	.footer {
		
		grid-column: 10 / span 7;
		grid-row: 9 / span 1;
		
		display: grid; 
		grid-template-columns: repeat(7, 1fr);
		grid-template-rows: repeat(1, 1fr);
			  
		background: var(--colour-10);
		padding: var(--margin-grid-full);	
		
		font-size: 1vw;
	  
	}
	
	.footer, .footer a {
		
		color: white;
			
	}	
		.footer .info {
			
			grid-column: 1 / span 6;
			grid-row: 1 / span 1;
			
			display: grid; 
			grid-template-columns: repeat(1, 1fr);
			grid-template-rows: repeat(3, 1fr);

			
		}
		
			.footer .info .links {
				
				grid-column: 1 / span 1;
				grid-row: 1 / span 1;
				margin-right: var(--margin-grid-full);
				
			}
			
			.footer .info .links a {
				
				margin-right: var(--margin-grid-half);
			
			}
			
			.footer .info .links a:hover {
				
				text-decoration: underline;
				
			}
			
			.footer .info .copyright {
				
				grid-column: 1 / span 1;
				grid-row: 3 / span 1;
				font-weight: 500;
				
			}
		
		.footer .logo {
			
			grid-column: 7 / span 1;
			grid-row: 1 / span 1;
			background-image: url('/periodelectricals/lib/img/branding/logo_icon_white.svg');
			background-size: cover;
			background-position: center;
			
		}

		#interstitial-overlay {
		    position: fixed;
		    top: 0;
		    left: 0;
		    width: 100vw;
		    height: 100vh;
		    background: rgba(0,0,0,0.5);
		    display: none; /* hidden by default */
		    justify-content: center;
		    align-items: center;
		    z-index: 9999;
		}
		
		#interstitial-box {
		    background: #212121;
		    width: 50vw;
		    height: 90vh;
		    border-radius: 8px;
		    position: relative;
		    overflow: hidden;
		    box-shadow: 0 0 25px rgba(0,0,0,0.4);
		    padding: 1vw;
			border: solid grey 5px;
		}
		
		#interstitial-box iframe {
		    width: 100%;
		    height: 100%;
		    border: none;
		}
		
		#interstitial-close {
			background: rgb(60, 59, 59);
			border: none;
			font-size: 26px;
			cursor: pointer;
			color: white;
			line-height: 23px;
		}


/*CONTENT ITEMS*/
	
	.testimonial {
		
		padding: 0.2em 0.3em;
		
	}
	
	.testimonial p:first-of-type {
		
		margin-top: 0;
		
	}
	
	.quote {
		
		color: var(--colour-5);
		font-size: 0.72em;
		line-height: 1.3em;
		
	}
	
	.person {
		
		color: var(--colour-1);
		font-size: 0.7em;
		
	}
	
	.quote_mark {
		
		width: 0.4em;
		padding: 0.3em 0.6em;
		
	}

	.box {
	
		z-index: 99;		
		position: relative;
		overflow: hidden;
		
		display: flex;
		align-items: center;
		justify-content: center;
		
		padding: 1vw;
		box-sizing: border-box;		
		
		font-size: 2.6vw;
		font-weight: 400;
		letter-spacing: 4px;
		text-transform: uppercase;
		
		transition: transform 0.5s;
		
		color: black;
				
	}
	
		.box img {
		
			position: absolute;
			inset: 0;             
			width: 100%;
			height: 100%;
			z-index: 98;
			padding: var(--margin-grid-half);
			box-sizing: border-box;
			border: 1px solid rgb(70, 70, 70);
			
		}
	
	.box.container {
	
		padding:  var(--margin-grid-full);
		background-color: black;
		border: 1px solid var(--colour-8);
		align-items: flex-start;
		
	}
	
		.box.container.submit {
			
			grid-column: 1 / span 3;
			grid-row: 8 / span 1;
			
			display: grid;
			grid-template-rows: 1fr; 
			grid-template-columns: 1fr;
			
			top: 1vw;
			
			font-size: 0.5vw;
			background: var(--colour-8);
			
		}
		
		.box.container.submit .title {

			height: 100%;
			
		}
		
		.box.container.submit .title a {
			
			font-size: 1.5vw;
			color: black;
			
		}	
		
		.box.container.submit .title a:hover {
			
			color: white;
			
		}