@charset "utf-8";
/* CSS Document */

html body {
 font-family: 'Nunito', sans-serif;
 font-size: 2vw;
 margin: 0;	
}

.bolderator {
	font-weight: bold;
}	
.light { font-family: 'Nunito ExtraLight', sans-serif;}

.underlay {background: hsla(0,100%,1%,0.50); 
}

.italiciser { font-style: italic;
color: #767488}

.reference{font-size:1.2vw}

.splash {
	color: #BD0D6A;
	}
a {
	text-decoration: none;
}
#container {
	position: relative;
	width: 100%;
}

 

#top-band {
	position:absolute;
	top:0;
	left:0;
	width: 100%;
	padding: 0 0 10 0;
}

#top-band img {
	width: 100%;
	height: auto;
}

#splash-image {
	position: absolute;
	top:5vw;
	left: 0;
	width:100%;
	z-index: 1;
}

#splash-image img {
	width: 100%;
	height: auto;
}

#splash-overlay {
	position: absolute;
	top:26vw;
	left: 0;
	width:78%;
	z-index: 2;
	color:#ffffff;
}

#splash-overlay h1 {
	padding: 0 0 1% 4%;
}

#splash-overlay p {
	padding: 0 0 0 4%;
}

#content {
	position: absolute;
	top: 60vw;
	width: 100%;
	padding: 0 2% 0 2%;
}

#tiles {
	position: absolute;
	top: 96vw;
	width: 100%;
	padding: 2% 2% 4% 2%;
	z-index: 1;
	background: #CCD4D9;
}

#tiles-overlay {
	position: absolute;
	top: 96vw;
	width: 100%;
	padding: 0 2% 0 3%;
	z-index: 2;
}

#tiles-overlay .tile-instance{
		padding-bottom: 8.7%;
	}

.tile-box {
	width: 100%;
}

.tile-instance {
	width:24%;
	float: left;
}

.tile-instance img {
	width: 100%;
}


 
@media screen and (max-width: 600px) {
	
	.tile-instance {
	width:100%;
}
		h3 {
		font-size: 5vw;
	}
	
	#tiles-overlay .tile-instance{
		padding-bottom: 50%;
	}

	
}

@media screen and (max-width: 900px) and (min-width: 601px) {
	
	.tile-instance {
	width:49%;
}
	
	h3 {
		font-size: 3vw;
	}
	
	#tiles-overlay .tile-instance{
		padding-bottom: 23.5%;
	}
}

@media screen and (max-width: 1200px) and (min-width: 901px)  {
	
	.tile-instance {
	width:33.33%;
}
	#tiles-overlay .tile-instance{
		padding-bottom: 15%;
	}
}