html {
  font-family: "Lucida Sans", sans-serif;
}

* { 
	box-sizing: border-box;
}

.headercentre {
	text-align:center;
	color: #fe4f00;
	background-color:#303030;
	height:108px;
	padding:1px 0 0 0;
	margin:0 0 0 0;
}

.headerside {
	text-align: center;
	background-color:white;
	border: 10px solid white;
}


.navbar {
	background-color: #303030;
	font-size: 13px;
	text-align: center;
	padding: 1px 0 1px 0;
	text-decoration: none;
}

.navbar li {
	display:inline;
}

.navbar li a {
	padding: 25px 25px;
	text-decoration: none;
	color: #fe4f00;
}

.textblock {
	text-align: left;
	text-decoration: none;
	padding: 0.5% 0.5% 0.5% 0.5%;
}

.img {
	display: block;
	margin-left: auto;
	margin-right: auto;
} 

.responsive {
    width: 100%;
    max-width: 480px;
    height: auto;
}

.footer {
	padding: 1% 5% 1% 0;
	text-align: center;
	background-color: #303030;
	color: #fe4f00;
	height:160px;
}

.row {
  font-size: 15px;
}

.h1 {
	font-size: 22px;
}
.row::after {
  content: "";
  clear: both;
  display: table;
}

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

	/* For mobile phones: */
@media only screen and (max-width: 599px) {
	[class*="col-"] {display: block; width: 100%;}
	[class*="no-dis-"] {display: none;}
	.headercentre {height:130px;}
	.navbar li a {padding: 2px 2px;}
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .no-dis-s {display: none;}
  .col-s-1 {display: block; width: 8.33%;}
  .col-s-2 {display: block; width: 16.66%;}
  .col-s-3 {display: block; width: 24.99%;}
  .col-s-4 {display: block; width: 33.33%;}
  .col-s-5 {display: block; width: 41.66%;}
  .col-s-6 {display: block; width: 49.99%;}
  .col-s-7 {display: block; width: 58.33%;}
  .col-s-8 {display: block; width: 66.66%;}
  .col-s-9 {display: block; width: 74.99%;}
  .col-s-10 {display: block; width: 83.33%;}
  .col-s-11 {display: block; width: 91.66%;}
  .col-s-12 {display: block; width: 99.99%;}
  .textblock {padding: 1% 0% 1% 5%;}
  .footer {height:120px;}
  .row {font-size: 15px;}
  .h1 {font-size: 30px;}
}

@media only screen and (min-width: 1000px) {
  /* For desktop: */
  .no-dis {display: none;}
  .col-1 {display: block; width: 8.33%;}
  .col-2 {display: block; width: 16.66%;}
  .col-3 {display: block; width: 24.99%;}
  .col-4 {display: block; width: 33.33%;}
  .col-5 {display: block; width: 41.66%;}
  .col-6 {display: block; width: 49.99%;}
  .col-7 {display: block; width: 58.33%;}
  .col-8 {display: block; width: 66.66%;}
  .col-9 {display: block; width: 74.99%;}
  .col-10 {display: block; width: 83.33%;}
  .col-11 {display: block; width: 91.66%;}
  .col-12 {display: block; width: 99.99%;}
  .textblock {padding: 1% 0% 1% 10%;}
  .footer {height:80px;}
  .row {font-size: 18px;}
  .h1 {font-size: 38px;}
}

table.grey, th.grey, td.grey, tr.grey{
	background-color: #f1f1f1;
	border-collapse: collapse;
	border-width: 2px;
	border-color: #babdb6;
	border-style: solid;
	color: black; /* Font colour */
	padding: 5px;
	}