@charset "UTF-8";
/* Body */

h1 {
	text-decoration: none;
	font-size: 22px;
	color: #2E2E2E;
} 

h2, h3, h4, h5, p {
	text-decoration: none;
	color: #fff;
	font-size: 18px;
}

a:link { 
	color: #2E2E2E;
	text-decoration: none; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
	color: #2E2E2E;
	text-decoration: none;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	color: #FF0C42;
	text-decoration: none;
}
	

body {
	font-family: source-sans-pro;
	background-color: #FFFFFF;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	font-style: normal;
	font-weight: 200;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:lighter;
	text-decoration: none;
	height:100%;

}
/* Container */
.container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	height: 100px;
	background-color:transparent;
	text-decoration: none;
	font-size: 22px;
	color: #2E2E2E;
} h1 {
	text-decoration: none;
	font-size: 22px;
	color: #2E2E2E;
}

h2, h3, h4 {
	text-decoration: none;
	font-size: 14px;
	color: #2E2E2E;
}
/* Navigation */
header {
	width: 100%;
	height: 100px;
	background-color: #FFFFFF;
	border-bottom: 0px;
	text-decoration: none;
}
.logo {
	color: #2E2E2E;
	font-weight: bold;
	text-align: undefined;
	width: 10%;
	float: left;
	margin-top: 15px;
	margin-left: 5%;
	letter-spacing: 4px;
}
nav {
	colour: #2E2E2E;
	float: right;
	width: 50%;
	text-align: right;
	margin-right: 25px;
	height: 60px;
}
header nav ul {
	list-style: none;
	float: right;
}
nav ul li {
	float: left;
	color: #FFFFFF;
	font-size: 14px;
	text-align: left;
	margin-right: 25px;
	letter-spacing: 2px;
	font-weight: bold;
	transition: all 0.3s linear;
}
ul li a {
	color: #FFFFFF;
	text-decoration: none;
}
ul li:hover a {
	color: #2C9AB7;
}
.hero_header {
	color: #FFFFFF;
	text-align: center;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	letter-spacing: 0px;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 44px;
	font-weight:bold;
	height:100%;
	
}
/* Hero Section */
.hero {
	background-image: url("backdrop.jpg");
  background-position: center;
	  background-repeat: no-repeat;
	background-size: cover;
	padding-top: 150px;
	padding-bottom: 150px;
}
.light {
	font-weight: bold;
	color: #717070;
}
.tagline {
	text-align: center;
	color: #FFFFFF;
	margin-top: 4px;
	font-weight: lighter;
	letter-spacing: 1px;
	margin-left: 4%;
	margin-right: 4%;
}
/* About Section */
.text_column {
	width: 80%;
	text-align: justify;
	font-weight: lighter;
	line-height: 25px;
	float: left;
	padding-left: 10%;
	padding-right: 10%;
	color: #A3A3A3;
}
.about {
	padding-left: 25px;
	padding-right: 25px;
	padding-top: 35px;
	display: inline-block;
	background-color: #FFFFFF;
	margin-top: 0px;
}
/* Stats Gallery */
.stats {
	color: #717070;
	margin-bottom: 5px;
}
.gallery {
	clear: both;
	display: inline-block;
	width: 100%;
	background-color: #FFFFFF;
	/* [disabled]min-width: 400px;
*/
	padding-bottom: 0px;
	padding-top: 0px;
	margin-top: -5px;
	margin-bottom: 0px;
}
.thumbnail {
	width: 25%;
	text-align: center;
	float: left;
	margin-top: 35px;
	text-decoration: none;
}
.gallery .thumbnail h4 {
	margin-top: 5px;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 5px;
	color: #52BAD5;
}
.gallery .thumbnail p {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	color: #A3A3A3;
	text-decoration: none;
}
/* Parallax Section */
.banner {
	background-color: #8e1f35;
	background-image: url(../images/parallax.png);
	height: 400px;
	background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
}
.parallax {
	color: #FFFFFF;
	text-align: right;
	padding-right: 100px;
	padding-top: 110px;
	letter-spacing: 2px;
	margin-top: 0px;
}
.parallax_description {
	color: #FFFFFF;
	text-align: right;
	padding-right: 100px;
	width: 30%;
	float: right;
	font-weight: lighter;
	line-height: 23px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
/* More info */
footer {
	background-color: #FFFFFF;
	padding-bottom: 0px;
}
.footer_column {
	width: 50%;
	text-align: center;
	padding-top: 30px;
	float: left;
}
footer .footer_column h3 {
	color: #B3B3B3;
	text-align: center;
}
footer .footer_column p {
	color: #717070;
	background-color: #FFFFFF;
}
.cards {
	width: 100%;
	height: auto;
	max-width: 400px;
	max-height: 200px;
}
footer .footer_column p {
	padding-left: 30px;
	padding-right: 30px;
	text-align: justify;
	line-height: 25px;
	font-weight: lighter;
	margin-left: 20px;
	margin-right: 20px;
}
.button {
	width: 200px;
	margin-top: 40px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
	padding-top: 20px;
	padding-right: 10px;
	padding-bottom: 20px;
	padding-left: 10px;
	text-align: center;
	vertical-align: middle;
	border-radius: 0px;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 2px;
	border: 3px solid #FFFFFF;
	color: #FFFFFF;
	transition: all 0.3s linear;
}
.button:hover {
	background-color: #FEFEFE;
	color: #C4C4C4;
	cursor: pointer;
}
.copyright {
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
	background-color: #8e1f35;
	font-size: 14px;
	color: #FFFFFF;
	font-weight: lighter;
	letter-spacing: 2px;
	border-top-width: 2px;
}
.footer_banner {
	background-color: #B3B3B3;
	padding-top: 60px;
	padding-bottom: 60PX;
	margin-bottom: 0px;
	background-image: url(../images/pattern.png);
	background-repeat: repeat;
}
footer {
	display: inline-block;
}
.hidden {
	display: none;
}

/* Mobile */
@media (max-width: 320px) {
h1 {
	text-decoration: none;
	font-size: 14px;
	color: #2E2E2E;
} 
	
	
	.logo {
	color: #2E2E2E;
	width: 100%;
	text-align: center;
	margin-top: 13px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
.container header nav {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 100%;
	float: none;
	display: none;
}
header nav ul {
}
nav ul li {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 100%;
	text-align: center;
}
.text_column {
	width: 100%;
	text-align: justify;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.thumbnail {
	width: 100%;
}
.footer_column {
	width: 100%;
	margin-top: 0px;
}
.parallax {
	text-align: center;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 40%;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	width: 100%;
	font-size: 18px;
}
.parallax_description {
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	width: 90%;
	margin-top: 25px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 12px;
	float: none;
	text-align: center;
}
.banner {
	background-color: #2D9AB7;
	background-image: none;
}
.tagline {
	margin-top: 20px;
	line-height: 22px;
}
.hero_header {
	padding-left: 10px;
	padding-right: 10px;
	line-height: 22px;
	text-align: center;
}
}

/* Small Tablets */
@media (min-width: 321px)and (max-width: 767px) {
	
	h1 {
	text-decoration: none;
	font-size: 16px;
	color: #2E2E2E;
} 
.logo {
	color: #2E2E2E;
	width: 100%;
	text-align: center;
	margin-top: 13px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
.container header nav {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 100%;
	float: none;
	overflow: auto;
	display: inline-block;
	background: #52bad5;
}
header nav ul {
	padding: 0px;
	float: none;
}
nav ul li {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 100%;
	text-align: center;
	padding-top: 8px;
	padding-bottom: 8px;
}
.text_column {
	width: 100%;
	text-align: left;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.thumbnail {
	width: 100%;
}
.footer_column {
	width: 100%;
	margin-top: 0px;
}
.parallax {
	text-align: center;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 40%;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	width: 100%;
	font-size: 18px;
}
.parallax_description {
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 30%;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	float: none;
	width: 100%;
	text-align: center;
}
.thumbnail {
	width: 50%;
}
.parallax {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-top: 20%;
}
.parallax_description {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 100%;
	padding-top: 30px;
}
.banner {
	padding-left: 20px;
	padding-right: 20px;
}
.footer_column {
	width: 100%;
}
}

/* Small Desktops */
@media (min-width: 768px) and (max-width: 1096px) {
	
	h1 {
	text-decoration: none;
	font-size: 22px;
	color: #2E2E2E;
} 
.text_column {
	width: 100%;
}
.thumbnail {
	width: 50%;
}
.text_column {
	width: 100%;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.banner {
	margin-top: 0px;
	padding-top: 0px;
}
}
/* Remove red border from the 'Enter' links inside tiles */
.gallery .thumbnail h4 a{
  border: 0 !important;          /* kill the red border */
  text-decoration: underline;    /* keep it obviously clickable */
  border-radius: 0;              /* optional: remove rounded look */
  box-shadow: none;              /* ensure no residual shadow */
  padding: 0;                    /* revert to text-like link */
  background: transparent;       /* no button background */
}

/* Keep a clear keyboard focus outline for accessibility */
.gallery .thumbnail h4 a:focus-visible{
  outline: 2px solid #000;
  outline-offset: 2px;
}
/* Let the page fill the viewport */
html, body { height: 100%; }

/* Turn the main container into a vertical flex layout */
.container{
  height: auto !important;      /* override the current fixed height */
  min-height: 100dvh;           /* fill the visible viewport (mobile-safe) */
  display: flex;
  flex-direction: column;
}

/* Push the footer block to the bottom when content is short */
.copyright{ 
  margin-top: auto; 
}
/* === High-contrast deep blue theme for page chrome === */
:root{
  --deep-blue: #0b1e3a;          /* pick your preferred deep blue */
  --footer-red: #c8102e;         /* keep your existing footer/edge red */
}

/* Page background */
html, body { background: var(--deep-blue) !important; }

/* Header strip stays on deep blue; centre logo as before */
header { background: transparent !important; }

/* HERO: keep image, ensure strong white text over deep blue context */
.hero{
  background-color: var(--deep-blue) !important; /* fallback behind image */
  color: #fff !important;
}
.hero .hero_header,
.hero .tagline { color: #fff !important; }

/* GALLERY BAND: remove any white panel so deep blue shows through */
.gallery{
  background: transparent !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Optional: if you extended backdrop.jpg into .gallery earlier, keep it.
   Otherwise, keep the deep blue solid background (no change needed). */

/* TILES: remain white with red borders for contrast */
.thumbnail{
  background: #ffffff !important;
  border: 2px solid var(--footer-red) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.25); /* a touch stronger on dark bg */
}

/* "Enter" links—no button chrome, readable on white tiles */
.thumbnail h4 a{
  border: 0 !important;
  background: transparent !important;
  color: inherit;
  text-decoration: underline;
}

/* Footer: keep your existing footer styling; ensure text readable */
.copyright{
  background: transparent;    /* if it was white */
  color: #ffffff !important;  /* white text on deep blue body */
  text-align: center;
}

/* Generic text/link contrast on deep blue areas */
body a{ color: #d7e6ff; }           /* lighter link on deep blue */
body a:hover{ color: #ffffff; }

/* Ensure containers don't reintroduce white backgrounds */
.container{ background: transparent !important; }
/* Force a light header banner that sits above the hero */
header{
  background: #ffffff !important;       /* solid light band */
  box-shadow: 0 1px 8px rgba(0,0,0,.08);/* subtle separation */
  position: relative;                    /* establish stacking context */
  z-index: 2;                            /* ensure it's above the hero */
}

/* If the hero image was creeping under the logo, keep it below */
.hero{ 
  position: relative; 
  z-index: 1; 
}

/* Optional: if the header needs to be full-bleed and fixed-on-scroll */
@media (min-width: 0){
  header{ position: sticky; top: 0; }
}
/* Limit white links to the header nav only */
header nav ul li a { color: #FFFFFF !important; }

/* Everything else: revert list links to your dark body colour */
.container ul li a,
.gallery ul li a,
.thumbnail ul li a {
  color: #2E2E2E !important;
}
/* Ensure all links inside tiles read dark on white cards */
.gallery .thumbnail { color: #2E2E2E; }
.gallery .thumbnail a,
.gallery .thumbnail a:visited { 
  color: inherit !important; 
  text-decoration: underline;
}
.gallery .thumbnail a:hover,
.gallery .thumbnail a:focus { 
  color: #FF0C42 !important; 
}
/* === Centre the tiles on ALL screens (wins over floats/widths) === */
.gallery{
  display: flex !important;          /* beat inline-block */
  flex-wrap: wrap;
  justify-content: center;           /* centre rows */
  gap: 16px;
}

/* kill legacy floats + fixed widths across all breakpoints */
.gallery .thumbnail{
  float: none !important;
  width: auto !important;            /* beats 25% / 50% / 100% rules */
  box-sizing: border-box;
  flex: 1 1 300px;                   /* responsive min width */
  max-width: 360px;                  /* avoid over-stretching */
  margin: 24px 8px;                  /* nice spacing */
  text-align: center;
}

/* single-column pages: keep the card centred */
@media (max-width: 600px){
  .gallery .thumbnail{ margin-inline: auto; }
}