@charset "utf-8";


@import url("font-awesome.min.css");
@import url("framework.css");

/* Rows
--------------------------------------------------------------------------------------------------------------- */
.row0, .row0 a{}
.row1, .row1 a{}
.row2, .row2 a{}
.row3, .row3 a{}
.row4, .row4 a{}
.row5, .row5 a{}


/* Top Bar
--------------------------------------------------------------------------------------------------------------- */
#topbar{padding:15px 0; font-size:.8rem; text-transform:uppercase;}

#topbar *{margin:0;}
#topbar ul li{display:inline-block; margin-right:15px;}
#topbar ul li:last-child{margin-right:0; padding-right:0; border-right:none;}
#topbar i{line-height:normal;}
#topbar > div:first-of-type ul li i{margin-right:5px;}


/* Header
--------------------------------------------------------------------------------------------------------------- */
#header{}

#header #logo{margin:30px 0 0 0;}
#header #logo h1{margin:0; padding:0; font-size:22px;}


/* Page Intro
--------------------------------------------------------------------------------------------------------------- */
#pageintro{padding:140px 0;margin-top:-20px}

#pageintro article{display:block; max-width:75%;}
#pageintro .heading{margin-bottom:50px; font-size:3rem;}
#pageintro p{font-size:1.1rem; line-height:2;}
#pageintro footer{margin-top:50px;}



/* Colours
--------------------------------------------------------------------------------------------------------------- */


a:active, a:focus{background:transparent;}/* IE10 + 11 Bugfix - prevents grey background */


.overlay{color:#FFFFFF; background-color:inherit;}
.overlay::after{color:inherit; background-color:rgba(0,0,0,.8);}
.overlay.light::after{background-color:rgba(0,0,0,.55);}

.btn, .btn.inverse:hover{color:#FFFFFF; background-color:#090821; border-color:#04DEE0;}
.btn:hover, .btn.inverse{color:inherit; background-color:transparent; border-color:inherit;}



/* Top Bar */
#topbar ul li:first-child a{color:#04DEE0;}

/* Media Queries
--------------------------------------------------------------------------------------------------------------- */
@-ms-viewport{width:device-width;}


/* Max Wrapper Width - Laptop, Desktop etc.
--------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width:978px){
	.hoc{max-width:978px;}
}


/* Mobile Devices
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:900px){
	.hoc{max-width:90%;}

	#topbar{}

	#header{padding:30px 0;}
	#header #logo{margin-top:3px;}
@media screen and (max-width:750px){
	
	#topbar{padding-top:15px; text-align:center;}
	#topbar > div:first-of-type ul{margin:0 0 15px 0;}

	#header{text-align:center;}
	#header #logo{margin:0 0 15px 0;}
}
@media screen and (max-width:450px){
	#topbar > div:first-of-type ul li{display:block; margin:0 0 2px 0;}
}