img {
	pointer-events: none !important;
	}

@font-face {
	font-family: 'Encode';
	src: url('/fonts/encode-sans-expanded-v11-latin-regular.woff2') format('woff2');
	font-display: swap;
	}

@font-face {
	font-family: 'Oswald';
	src: url('/fonts/oswald-regular-webfont.woff2') format('woff2');
	font-display: swap;
	}
		
html {
	background-color:#FFFFFF;
	scroll-behavior: smooth;
	}

body {
	font-family:'Encode', sans-serif;
	margin:auto;
	overflow-x:hidden;
	line-height: 1.6;
	}

.section {
	width:80%;
	margin:auto;
	}

h1 {
  	font-family:Oswald;
  	font-weight:100;
  	font-size:calc(1vw + 1vh + 1vmin);
	}

h2 {
  	font-weight:100;
  	font-size:1.2vw;
	}

h3 {
	font-family:Oswald;
  	font-weight:100;
  	font-size:calc(2vw + 2vh + 1vmin);
	}

h4 {
  	font-weight:100;
  	font-size:calc(0.6vw + 0.6vh + 1vmin);
	}

h5 {
  	font-family:Oswald;
  	font-weight:100;
  	font-size:calc(1vw + 1vh + 1vmin);
  	margin-bottom:0px;
}

.contactbar {
	position: fixed;
	top: 40px;
	right: -300px; /* Start offscreen */
	background-color: #FFFFFF;
	color: #00000;
	padding: 16px 24px;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	transition: right 0.6s ease, opacity 0.6s ease;
	opacity: 0;
	z-index: 5;
}

.contactbar.show {
    right: 20px;
    opacity: 1;
}
   
.contact {
	text-decoration: none;
	color:#000000;
}

.contact:visited {
	text-decoration: none;
}

.contact:hover {
	text-decoration: underline;
	color:#BC1F00;
}

.contact:active {
	text-decoration: underline;
}

.header {
	position:relative;
	display:flex;
	width:100%;
	padding:30px 0px;
	height:100px;
	}
		
.header-img {
	}

#vert-hdr
    {
    display: none;
    }
    
#horiz-hdr 
    {
    display: block;
    }

.main-img {
	position:absolute;
	width:70%;
	top:80px;
	}

.lozenge-container {
	position:absolute;
	right:0;
	top:50px;
	}

.lozenge {
    background-color:#BC1F00;
    border:none;
    color:#FFFFFF;
    padding:10px 20px;
    font-family:Encode;
    font-size:calc(0.8vw + 0.8vh + 1vmin);;
    text-align:center;
    text-decoration:none;
    cursor:pointer;
    border-radius:50px;
	}
	
.header-container {
	position:absolute;
	width:80%;
	top:180px;
	}
	
.img-title {
	position:relative;
	display:inline-block;
	float:right;
  	top:40px;
  	width:20vw;
  	background-color:#000000;
  	color:#FFFFFF;
  	font-family:Oswald;
  	font-size: calc(2.5vw + 1vh + 1vmin);
  	line-height:1.2;
  	padding:5%;
  	border-radius:20px;
  	z-index:1;	
	}

.spacer {
	height:80px;
	}

.tiles-outer {
	display:flow-root;
	}

@supports not (display: flow-root) {
.tiles-outer::after {
    content: "";
    display: table;
    clear: both;
	}
	}

.tiles {
	float:right;
	width:70%;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
	}

.tiles-box {
    border-radius:20px;
    flex: 1 1 calc(25% - 3rem);
    padding: 1rem;
  	font-size:calc(0.6vw + 0.6vh + 1vmin);
  	box-shadow: 0 4px 0px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    background-color:#FFFFFF;
    color:#000000;
    text-align:center;
    z-index:2;
	}

.tiles-header {
	background-color:#000000;
    font-family:Oswald;
  	font-size:1.8em;
  	line-height:1.2;
  	color:#FFFFFF;
  	padding:25px;
  	border-radius:10px;
	}

.pcb-img {
	position:relative;
	margin-bottom:-100px;
	margin-left:20px;
	width:40%;
	filter: drop-shadow(0px 0px 30px rgba(189, 195, 199, 1));
	z-index:2;
	}

.footer {
	width:80%;
	margin:auto;
	padding-bottom:50px;
	display: flex;
    flex-wrap: wrap;
    gap: 1rem;
	}

.footer-box {
    flex: 1 1 calc(25% - 3rem);
    padding-top: 1rem;
  	font-size:calc(0.6vw + 0.6vh + 1vmin);
    color:#FFFFFF;
	}

.footer-box a:link {
	color:#FFFFFF;
	text-decoration:none;
	}
		
.footer-box a:visited {
	color:#FFFFFF;
	}
		
.footer-box a:hover {
	color:#FFFFFF;
	}

.errorwrapper {
  	display:flex;
  	width:100vw;
  	height:100vh;
  	text-align:center;
	}

.erroritem {
  	display:flex;
  	flex-flow:column wrap;
  	align-items:center;
  	justify-content:center;
  	height:100%;
  	width:100%;
	}
	
.modal-container {
    margin: auto;
    position: relative;
	top:50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    padding-top:30px;
	}

.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 4;
    justify-content: center;
    align-items: center;
    }

.modal-content {
	height:80vh;
	width:80vw;
    background: white;
    padding: 20px;
    border-radius: 8px;
    position: relative;
    text-align: center;
    min-height: 0;
    overflow-y: auto;
    }

.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    }

      
/*************************************  MEDIA QUERY  *************************************/

@media (max-width: 1200px) {
  .footer-box {
    flex: 1 1 calc(50% - 3rem);
    }
}  

/*************************************  MEDIA QUERY  *************************************/

@media (max-width: 900px) {

h2 {
  	font-weight:100;
  	font-size:calc(0.8vw + 0.8vh + 1vmin);
	}

.section {
	width:90%;
	}
		
.header-container {
	width:90%;
	}

.img-title {
  	top:60px;
  	width:40vw;
	}

.main-img {
	position:absolute;
	width:80%;
	top:100px;
	}

#horiz-hdr
    {
    display: none;
    }
    
#vert-hdr 
    {
    display: block;
    }
    
.spacer {
	height:calc(20vmax + 20vw);
	}

.pcb-img {
	position:relative;
	margin-bottom:-50px;
	}

.tiles {
	display:block;
	width:60%;
	float:none;
	margin:auto;
	}

.tiles-box {
	margin-bottom:10%;
	}
	
#frame-cntr {
	display:none;
	}	
}