body, html, div, span, h1, h2, h3, h4, h5, h6, p, a, img, strong, ul, ol, li, form, input, textarea, label {position: relative; margin: 0; padding: 0; font-size: 100%; vertical-align: top;}

* {box-sizing: border-box; position: relative;}

html {min-height: 100%; background: #333;}

body {background: #ECEFF1; font-family: "Trebuchet MS", arial, sans-serif; min-height: 100%; font-size: 18px; color: #333; -webkit-text-size-adjust: none;}



h1 {text-align: center; font-size: 36px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; padding-bottom: 30px;}

h1:after {content: ""; background: #009688; width: 50px; height: 4px; display: block; margin: 8px auto 0;}

h2 {font-size: 30px; margin: 20px 0 10px;}

h3 {font-size: 24px; margin: 20px 0 10px;}

h4 {font-size: 18px; text-transform: uppercase; padding-bottom: 20px; font-weight: normal;}

h4:after {content: ""; background: #009688; width: 50px; height: 4px; display: block; margin-top: 8px;}

img {border: none; max-width: 100%; height: auto;}

hr {background: none; border: none; border-bottom: 1px solid rgba(255,255,255,0.2); outline: none; width: 100%; margin: 5px 0;}

a {color: #607D8B; text-decoration: none;}

a:hover {color: #009688;}

a img {border: none;}

sup {position: relative; font-size: 75%; line-height: 0; top: -0.5em; vertical-align: baseline;}



.clear {clear: both;}

.centred {text-align: center !important; margin: auto;}

.inline {display: inline-block !important;}

.floatLeft {float: left;}

.floatRight {float: right;}

.block {display: block;}

.lefty {text-align: left !important;}

.righty {text-align: right !important;}

.imgL {float: left; margin: 0 10px 10px 0 !important;}

.imgR {float: right; margin: 0 0 10px 10px !important;}

.fx {display: table; display: -webkit-flex; -webkit-flex-wrap: wrap; display: flex; flex-wrap: wrap;}

.sr-only {position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;}



/* HEADER AND FOOTER */

.inner {max-width: 1200px; padding: 10px; margin: auto;}

#header {background: #FFF; position: sticky; top: 0; z-index: 9; border-bottom: 1px solid #CCC;}

#header .inner {padding: 10px 10px 0;}

#logo {display: block; height: 40px; padding: 10px 16px; font-size: 20px; line-height: 20px; text-transform: uppercase; text-decoration: none; font-weight: 700; color: #333;}

#site-header {background: url("/images/header-optimised.jpg") no-repeat center; background-size: cover; width: 100%; height: 300px; margin-bottom: 16px;}

#nav {width: 100%; font-size: 14px;}

#nav li {list-style-type: none; display: inline-block;}

#nav > li.hasSub {padding-right: 10px;}

#nav > li.hasSub li {display: block;}

#nav > li a {background: #FFF; display: block; text-transform: uppercase; text-decoration: none; padding: 15px 16px; line-height: 20px; color: #333;}

#nav > li > a:hover, #nav > li.hasSub:hover > a {color: #009688;}

#nav .sub-menu {position: absolute; top: 50px; left: 0; box-shadow: rgba(0,0,0,0.2) 0 10px 20px; width: 160px; display: none; z-index: 9;}

#nav .sub-menu li.hasSub > .sub-menu {left: 160px; top: 0;}

#nav li.hasSub:hover > .sub-menu {display: block;}

#nav .sub-menu a:hover {background: #009688; color: #FFF;}

#nav li .sub-menu a {padding: 10px 16px;}

#nav > li.hasSub > a:after, #nav .sub-menu li.hasSub > a:after {content: "\25BE"; font-family: arial; position: absolute; display: block; right: 0; top: 14px;}

#nav .sub-menu li.hasSub > a:after {transform: rotate(-90deg); -webkit-transform: rotate(-90deg); right: 15px; top: 10px;}

#menu-toggle {display: none;}

#footer {background: #333; color: #FFF; padding: 20px; text-align: center; margin-top: 20px;}



/* CONTENT */

#content {background: #FFF; width: 75%; float: left; padding: 40px 50px;}

#content.wide {width: 100%;}

#content p {margin-bottom: 1.5em; line-height: 1.7em; font-size: 18px; text-align: justify;}

#content ul, #content ol {margin: 0 60px 20px;}

#content ul li, #content ol li {line-height: 1.5em;}

#content .date {text-align: center; font-weight: 700; letter-spacing: 2px; color: #777; font-size: 0.8em; top: -20px;}

#content table {border-collapse: collapse;}

#content table td {border: 1px solid #CCC; padding: 15px 8px;}

#content table tr:nth-child(odd) td {background: #EEE;}

.figure {display: block; margin: auto; text-align: center; margin-bottom: 20px;}

.figure.half {width: 49%; float: left; margin-bottom: 8px; top: -12px; margin-right: 1%;}

.figure.full {width: 99%; float: left; margin-bottom: 8px; top: -12px;}

.figure.third {width: 32.3%; float: left; margin-right: 1%;}

.figure .caption {color: #888; padding: 10px; font-size: 14px;}

.figure.half .caption, .figure.full .caption, .figure.third .caption {

	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%); position: absolute; 

	bottom: 0; left: 0; display: block; color: #FFF; width: 100%; padding: 40px 20px 20px; text-shadow: rgba(0,0,0,0.6) 0 1px 1px;

}

.figure.half img, .figure.full img, .figure.third img {width: 100%;}

#sidebar {float: right; width: 23%;}

.sideBlock {background: #FFF; padding: 26px; margin-bottom: 24px;}

.sideBlock ul li {list-style-type: none; display: block; border-bottom: 1px solid #DDD; font-size: 16px; padding: 6px 0; line-height: 20px;}

.sideBlock ul li:last-child {border-bottom: none;}

.sideBlock ul li a {text-decoration: none;}

.sideSocial {padding-bottom: 10px; font-size: 16px;}

.sideSocial a {line-height: 30px;}

.sideSocial img {filter: invert(1); border-radius: 30px;}

.sideSocial img.instagram {background: #22D675;}

.sideSocial img.youtube {background: #0FF;}



@media (max-width: 991px) {

	body {font-size: 16px;}

	h1 {font-size: 26px;}

	h2 {font-size: 23px;}

	h3 {font-size: 20px;}

	h4 {font-size: 17px;}

	.wrapSM {flex-wrap: wrap;}

	#header .inner {padding: 10px 0 0;}

	#logo {padding: 5px 16px 10px;}

	#site-header {height: 150px; margin-bottom: 0;}

	#menu-toggle {background: #FFF; border: none; border-radius: 6px; -webkit-appearance: none; position: absolute; top: 8px; right: 15px; display: block; padding: 5px 10px 8px; cursor: pointer;}

	#menu-toggle.open {background: #555;}

	.icon-bar {width: 20px; height: 2px; background: #555; display: block; margin-top: 4px;}

	#menu-toggle.open .icon-bar {background: #FFF;}

	#nav {background: #FFF; position: absolute; top: 0; left: 0; max-height: 0; z-index: 9; transition: .4s all ease-out; overflow: hidden;}

	#nav.open {display: block !important; max-height: 95vh; overflow-y: auto; border-bottom: 1px solid #CCC;}

	#nav li {display: block; padding-right: 50px !important; cursor: pointer;}

	#nav .sub-menu {

		position: relative; display: block; max-height: 0; overflow-x: hidden; overflow-y: hidden; transition: .4s all ease-out;

		border: none !important; box-shadow: none !important; width: calc(100% + 50px); border-radius: 0; top: 0 !important; left: 0 !important;

	}

	#nav > li > a {padding-right: 0;}

	#nav > li.hasSub > a:after, #nav .sub-menu li.hasSub > a:after {display: none;}

	#nav li.hasSub:after {content: "+"; font-family: arial; position: absolute; display: block; right: 25px; top: 12px; font-size: 20px; text-align: center; width: 12px;}

	#nav li.hasSub.open:after {content: "-";}

	#nav li.hasSub.open > .sub-menu {max-height: 1200px;}

	#nav .sub-menu li {padding-left: 20px;}

	#nav .sub-menu li.hasSub:after {top: 6px;}

	#footer {margin-top: 0;}

	.footerClear {display: none;}

	

	#content, #sidebar {float: none; width: auto;}

	#content {padding: 30px; margin-bottom: 20px;}

	#content p {font-size: 15px;}

	.sideBlock {margin-bottom: 20px;}

}



@media (max-width: 767px) {

	#content ul, #content ol {margin: 0 30px 20px;}

	#content table td {display: block;}

	.figure.half, .figure.full, .figure.third {float: none; width: auto;}

}



@media (max-width: 499px) {

	#logo {font-size: 18px;}

	#menu-toggle {padding: 4px 6px 6px;}

}