html{
	font-size: 18px;
	}

.wrapper{
	background:#eee;
	max-width:1800px;
	margin:auto;
	border: 3px solid #111;
	height:auto;
}

footer{
	color:#fff;
	background-color:#003E7D;
	width: 100%;
	margin: auto;
	height: 30px;
	text-align: center;
	padding-top:5px;
}

.FooterText{
	margin-top:5px;
}



/* CSS Grid */

.grid > div{
	background:#ccc;
	padding:1em;
}

.grid > div:nth-child(odd){
	background: #ddd;
}

/* grid-column-gap:1em;grid-row-gap:1em; | Can be used as well */

.grid{
	display:grid;
	grid-template-columns: 2fr 2fr;
	grid-auto-rows: minmax(100px, auto);
	grid-gap: 1em;
	justify-items: stretch;
	align-items: stretch;
	padding: 10px;
	max-width: 1750px;
	margin-left: 15px;
}

.box1{
	grid-column:1/2;
	grid-row:1/2;
}

.box2{
	grid-column:2/2;
	grid-row:1/2;
}

.box3{
	grid-column:1/2;
	grid-row:2/2;
}

.box4{
	grid-column:2/2;
	grid-row:2/2;
}

/* CSS Grid End */



/* CSS Grid Main */

.gridmain > div{
	background:#eee;
	padding:1em;
}

/* grid-column-gap:1em;grid-row-gap:1em; | Can be used as well */

.gridmain{
	display:grid;
	grid-template-columns: 2fr 2fr;
	grid-auto-rows: minmax(100px, auto);
	grid-gap: 1em;
	justify-items: stretch;
	align-items: stretch;
	padding: 10px;
	max-width: 1600px;
	margin: auto;
}

.InfoGrid{
	display:grid;
	grid-template-columns: 1fr;
	grid-auto-rows: minmax(30px, auto);
	align-items:center;
}

.Sub-Header{
	font-family: "Roboto Condensed" , sans-serif;
	color: black;
	grid-row: 1/2;
	margin:0px;
	padding-top:10px;
	max-height: 21px;
	text-align:center;
}

.Body{
	font-family: "Roboto" , sans-serif;
	color:#000000;
	grid-row: 2/2;
	font-size: 14px;
	padding: 0px 5px 0px 5px;
	text-align:left;
}

/* Placeholder */

section {
	border: 1px solid black;
}

.image1 {
	grid-column:1/2;
	grid-row:1/2;
	max-height: 413px;
}

.image2 {
	grid-column:2/3;
	grid-row:1/2;
	max-height: 413px;
}

	/* Background colors that could be used - D9D9D9 - DFDEDF - */
	/* Text1 is the first text box to Text6 the last text box. Image1 and Image2 are to be used for Text1 and Text2. */

.text1 {
	color: white;
	grid-column:1/2;
	grid-row:2/2;
	background-color: #DFDEDF;
}

.text2 {
	color: white;
	grid-column:2/3;
	grid-row:2/2;
	background-color: #DFDEDF;
}

.text3 {
	color: white;
	grid-column:1/2;
	grid-row:3/3;
	background-color: #DFDEDF;
}

.text4 {
	color: white;
	grid-column:2/3;
	grid-row:3/3;
	background-color: #DFDEDF;
}

.text5 {
	color: white;
	grid-column:1/2;
	grid-row:4/4;
	background-color: #DFDEDF;
}

.text6 {
	color: white;
	grid-column:2/3;
	grid-row:4/4;
	background-color: #DFDEDF;
}

/* Different placements for Term 2 text due to no images */

.text1T2 {
	color: white;
	grid-column:1/2;
	grid-row:1/1;
	background-color: #DFDEDF;
}

.text2T2 {
	color: white;
	grid-column:2/3;
	grid-row:1/1;
	background-color: #DFDEDF;
}

.text3T2 {
	color: white;
	grid-column:1/2;
	grid-row:2/2;
	background-color: #DFDEDF;
}

.text4T2 {
	color: white;
	grid-column:2/3;
	grid-row:2/2;
	background-color: #DFDEDF;
}

/* PlaceHolder and CSS Grid Main End */



/* CSS Grid Top */

.gridtop{
	display:grid;
	grid-template-columns: 1fr 2fr 1fr;
	grid-auto-rows: minmax(60px, auto);
	grid-gap: 5px;
	justify-items:center;
	align-items:center;
	padding: 10px;
	background-color: #2594BC;
	/* height: 150px; */
}

.logo {
	grid-column:1/2;
	grid-row:1/3;
	width: 130px;
	height: 130px;
}

.Header{
	color: white;
	grid-column:2/3;
	grid-row:1/2;
	font-size: 36px;
	margin: 10px;
	font-family: "Lato" , sans-serif;
}



/* Style the menu icon */
.icon {
	color: #ffffff;
	font-size: 22px;
}

/* Remove the input field from the label */
.icon, [id^=drop] {
 display: none;
}


/* Nav Bar */

nav{
	grid-column:2/3;
	grid-row:2/3;
	background-color: #03254b;
	min-width:400px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #03254b;
	float:left;
}

li {
    float: left;
	width:100px;
}

a{
	display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family: Mada, sans-serif;
	width:70px;
}

li a:hover{
	background-color: #890F27;
}

 /* Because of images being different sizes I have to use separate classes to size and center them properly. Till resized. */

.ImageSwim{
	max-width:58%;
	margin-left: 21%;
	margin-top: 0.5%;
}

.ImageAL{
	max-width:58%;
	margin-left: 21%;
	margin-top: 2%;
}

.ImageQT{
	max-width:50%;
	margin-left: 25%;
	margin-top: 0.5%;
}

.ImageTGGC{
	max-width:50%;
	margin-left: 25%;
	margin-top: 5%;
}

.ImageLD{
	max-width:50%;
	margin-left: 25%;
	margin-top: 3%;
}

.Image013{
	max-width:50%;
	margin-left: 25%;
	margin-top: 1%;
}



@media screen and (max-width:980px) {
	/* Hide the menu items */
	ul, li {display: none;}

/* Display the menu icon */
	.icon {
		display: block;
		padding: 0 20px;
		color: #FFF;
		font-size: 20px;
		line-height: 60px;
		border-bottom:1px ridge gray;
	}

	/* Set background hover color when hovering over menu icon */
	.icon:hover { background-color: #890F27; }

	/* Display dropdown menu (list items) when clicked */
	[id^=drop]:checked + ul, li {display: block;}
	
		/* Set properties of list items */
	li {
		display: block;
		width: 100%;
		border-bottom: 1px ridge gray;
		
	}

	/* Set hover color for list items */
	nav li:hover{ background-color: #890F27; }
	
	a{
	width:400px;
	padding: 10px 0px 10px 0px;
	}
	
	ul{
	max-width: 400px;
	}
	
	.active{
	border-bottom:1px ridge gray;
	}
	
	/* replacements */
	
	.gridtop{
		grid-template-columns: 1fr;
		max-width:880px;
	}
	
	.logo{
		grid-column:1/1;
		grid-row:1/2;
		width: 200px;
		height: 200px;
	}
	
	.Header{
		grid-column:1/1;
		grid-row:2/2;
		font-size: 40px;
		max-height:40px
	}
	
	nav{
		grid-column:1/1;
		grid-row:3/3;
		border-bottom: 1px ridge gray;
		display: block;
		max-width:90%;
	}
	
	
	
	
	.gridmain{
		max-width:840px;
		grid-template-columns: 1fr;
	}
	
	.image1 {
		grid-column:1/1;
		grid-row:1/1;
		background-color:#C3C3C3;
	}

	.image2 {
		grid-column:1/1;
		grid-row:3/3;
		background-color:#C3C3C3;
	}

	.text1 {
		color: white;
		grid-column:1/1;
		grid-row:2/2;
		background-color: #DFDEDF;
	}

	.text2 {
		color: white;
		grid-column:1/1;
		grid-row:4/4;
		background-color: #DFDEDF;
	}
	
	.text3 {
		color: white;
		grid-column:1/1;
		grid-row:5/5;
		background-color: #DFDEDF;
	}

	.text4 {
		color: white;
		grid-column:1/1;
		grid-row:6/6;
		background-color: #DFDEDF;
	}

	.text5 {
		color: white;
		grid-column:1/1;
		grid-row:7/7;
		background-color: #DFDEDF;
	}

	.text6 {
		color: white;
		grid-column:1/1;
		grid-row:8/8;
		background-color: #DFDEDF;
	}
	
	/* Text1 is the first text box to Text6 the last text box. Image1 and Image2 are to be used for Text1 and Text2. */
	
.text1T2 {
	color: white;
	grid-column:1/1;
	grid-row:1/1;
	background-color: #DFDEDF;
}

.text2T2 {
	color: white;
	grid-column:1/1;
	grid-row:2/2;
	background-color: #DFDEDF;
}

.text3T2 {
	color: white;
	grid-column:1/1;
	grid-row:3/3;
	background-color: #DFDEDF;
}

.text4T2 {
	color: white;
	grid-column:1/1;
	grid-row:4/4;
	background-color: #DFDEDF;
}
	
	.wrapper{
		max-width:900px;
	}
	
	.Sub-Header{
		font-size: 150%;
	}
	
	.Body{
		font-size: 77%;
	}


/* Image replacement for 1 column grid */

.ImageAL{
	margin-top: 0.5%;
}

.ImageTGGC{
	margin-top: 0.5%;
}

.ImageLD{
	margin-top: 0.5%;
}

.Image013{
	margin-top: 0.5%;
}

}