* {
	box-sizing: border-box;
}

body {
    margin:0px;
    padding:0px;
    font-family: sans-serif;
}

[class*="col-"] { 
    width: 100%; 
}

@media only screen and (min-width: 30em) {
	.col-1 {width: 8.33%;}
	.col-2 {width: 16.66%;}
	.col-3 {width: 25%;}
	.col-4 {width: 33.33%;}
	.col-5 {width: 41.66%;}
	.col-6 {width: 50%;}
	.col-7 {width: 58.33%;}
	.col-8 {width: 66.66%;}
	.col-9 {width: 75%;}
	.col-10 {width: 83.33%;}
	.col-11 {width: 91.66%;}
	.col-12 {width: 100%;}
}

[class*="col-"] {
    float: left;
    padding 15px;
}

.row::after { 
    content: ""; 
    clear: both; 
    display: table; 
}

#wrapper {
    width: 100%;
    max-width: 960px;
    margin: auto;
    color: rgb(0,30, 60);
    background-color: hsl(200, 50%, 80%);
}

header{
    background-color: hsl(200, 50%, 80%);
    font-family: serif;
    padding: 10px 20px 5px 20px;
}

@media only screen and (min-width: 48em) {
	header{padding: 10px 20px 5px 25%;}
}

@media only screen and (min-width: 48em) {
  .ncol-4 {
    width: 33.33%; 
    padding: 0px 5px 0px 5px;
  } 
}


nav{
	background-color: hsl(200, 50%, 80%);
	    padding: 20px 2% 20px 2%;
}

 img {
max-width: 100%;
height: auto;
}
nav p{
	width:100%;
	background-color: #0000AC;
	color: #FFFFFF;
	font-style: bold;
	margin:5px 5px 5px 5px;
	padding: 5px;
	text-align: center;
}

main{
	padding: 20px 20px 20px 20px;
	background-color: #FFFFFF;
}




header{
    background-color: hsl(200, 50%, 80%);
    font-family: serif;
    padding: 10px 20px 5px 20px;
}


footer{
    background-color: hsl(200, 50%, 80%);
    /*width:100%;*/
    padding:5px 20px 5px 20px;
}

.coloured_heading{
    color: rgb(0, 50, 100);
}


nav a:link {color: #FFFF00;}

nav a:visited { color: #DDDDDD;}

nav a:hover {color: #FFFF00;}