* {
	margin:	0;
	padding:	0;
	border:	0;
}

a { color: inherit; }
a.button {
	display:			inline-block;
	padding:			.7em 2.9em;
	font-size:			1em;
	text-align:		center;
	font-weight:	bold;
	color:					#fff;
	text-decoration:	none;
	background:			#ff9d11;
}
a.button:hover {
	background:			#ffc12b;
}
a.button.redbutton {
	background:			#cb4b4b;
}
a.button.redbutton:hover {
	background:			#ff4848;
}
a.button.brownbutton {
	background:			#c77a2a;
}
a.button.brownbutton:hover {
	background:			#ee9539;
}
a.button.bluebutton {
	background:			#4183c4;
}
a.button.bluebutton:hover {
	background:			#599ee2;
}

li { list-style:	none; }
h1, h2, h3, h4, h5, h6 {
	font-weight:	normal;
	text-transform:	uppercase;
}
.gecko h1, .gecko h2, .gecko h3, .gecko h4, .gecko h5, .gecko h6 {
	font-weight:	200;
}
h4 {	font-size:	1.5em; 	line-height:		1em; }
h5 {	font-size:	1.4em; }
h6 {	font-size:	1.2em; }

body {
	font-family:	'PT Sans', Helvetica, Arial, sans-serif;
	color: 				#333;
	font-size:			62.5%;
	background:	#fff;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: none;
}

#header, #menu, #topbar, #content, #footer {
	display:	block;
	width:		100%;
	overflow:	hidden;
}

#header, #footer {
	color:		#fff;
	background:	#cb4b4b;
}
#header {
	position:	relative;	
}
#main {
	display:	inline-block;
	width:		100%;
}

/******************* HEADER *******************/
#header h2 {
	width:		96%;
	margin:	0 2%;
	font-weight:	normal;
}
#header h2 a {
	color:				#fff;
	font-size:		2.4em;
}
#header a {
	color:				#f5caca;
	text-transform:		uppercase;
	text-decoration:	none;
	-webkit-tap-highlight-color:	rgba(0,0,0,0);
}
#header ul {
	width:		96%;
	margin:	0 2% .5em 2%;
}
#header #menu.hide {
	display:	 	none;
}
#header ul a {
	font-size:			1.6em;
	line-height:		1.8em;
	-webkit-transition:	color	150ms ease-in-out, border-color	250ms ease-in-out;
	-moz-transition:		color	150ms ease-in-out, border-color	250ms ease-in-out;
	transition:					color	150ms ease-in-out, border-color	250ms ease-in-out;
}
#header ul a.active, #header ul a:hover {
	color:	#fff;
}
#header #menuBtn {
	display:		none;
	position:		absolute;
	top:				0;
	right:				0;
	width:			2.8em;
	height:			2.5em;
	z-index:		2;
	color:				#fff;
	font-size:		2em;
	padding:		.4em 1.7em .4em .7em;
	margin:			0;
	text-indent:	-99em;
	background:	#b42b2b url(../images/menu-stripes.png) no-repeat center;
	-webkit-tap-highlight-color:	rgba(0,0,0,0);
	background-size:	 80% 40%;
}
.svg #header #menuBtn {
	background-image:	url(../images/menu-stripes.svg);
}

/******************* TOPBAR *******************/
#topbar {
	color:		#fff;
	background:	#355163;
}
#topbar > div {
	width:		96%;
	margin:	0 auto;
	padding:	.5em 2%;
}
#topbar h1, #topbar h3 {
	font-weight:	normal;
	text-transform:	uppercase;
}
#topbar h1 {
	font-size:	2.6em;
	color:		#fff;
}
#topbar h3 {
	display:	none;
	font-size:	1.3em;
	color:		#aeb9c1;
}

/******************* ARTICLE *******************/
#content {
	font-size:	1.3em;
	width:		100%;
	background:	#fff;
}
#article > div {
	width:		96%;
	margin:	1em 0;
	padding:	0 2%;
	overflow:	hidden;
}
#article a:not(.button) {
	color:			#4183c4;
}
#article p {
	padding:	.5em 0;
	line-height:	1.4em;
}
#article li {
	list-style:				none;
	padding-left:		.5em;
	padding-bottom:	.5em;
}

/******************* ASIDE *******************/
#aside {
	width:		96%;
	padding:	1em 2%;
	background:	#eff1f3;
}
#aside > div {
	padding-bottom:	2em;
}
#aside > div:last-child {
	padding-bottom:	0;
}
#aside p {
	position:			relative;
}

/******************* FOOTER *******************/
#footer {
	color:		#f9d7d7;
}
#footer a {
	-webkit-tap-highlight-color:	rgba(0,0,0,0);
}
#footer > div {
	position:	relative;
	width:		96%;
	margin:	.5em 2%;
	overflow:	hidden;
}
#footer p {
	font-size:	1.2em;
}
#footer ul {
	padding:	.5em 0;
}
#footer ul li {
	display:	inline;
}
#footer ul a {
	display:	inline-block;
	width:		2.4em;
	height:		2.4em;
	white-space:		nowrap;
	text-overflow:	hidden;
	text-indent:		-999em;
	background:		url(../images/social-icons-8bit.png) no-repeat 0 0;
	background-size:		auto 200%;
}
#footer ul a.tw {	background-position:	25% 0;	}
#footer ul a.gh {	background-position:	50% 0;	}
#footer ul a.so {	background-position:	75% 0;	}
#footer ul a.gg {	background-position:	100% 0;	}
#footer ul a:hover {	background-position:	0 100%;	}
#footer ul a.tw:hover {	background-position:	25% 100%;	}
#footer ul a.gh:hover {	background-position:	50% 100%;	}
#footer ul a.so:hover {	background-position:	75% 100%;	}
#footer ul a.gg:hover {	background-position:	100% 100%;	}


@media only screen and (min-width: 1px) {
	* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
	body {
		background:	#2a4556;
	}
	#header h2, #header ul, #topbar > div, #article div, #aside, #footer > div {
		padding-left:		1em;
		padding-right:	1em;
	}
	#header #menuBtn {
		display:	block;
	}
	#menu {
		position:	fixed;
	}
	#article div div {
		padding:	0;
		width:		100%;
	}
	#header h2, #header ul, #footer > div {
		margin-left:		0;
		margin-right:		0;
	}
	#header {
		min-height:	5em;
	}
	#header h2 {
		padding-left:	0.6em;
	}
	#header h2, #header ul, 
	#topbar > div, 
	#article, 
	#article > div, 
	#aside, 
	#footer, #footer > div {
		width:	100%;
	}
	#topbar {
		background-image:		url(../images/topbar-icons.png);
		background-repeat:		no-repeat;
		background-position:	right -3em;
		background-size:				70em auto;
	}
	#topbar h3 {
		display:	block;
	}
	#topbar > div {
		padding:	1em;
	}
	#topbar > div > div {
		display:	inline-block;
		position:	relative;
	}

	#article p, #article li {
		font-size:		1.2em;
	}

	#footer ul a {
		background-image:	url(../images/social-icons.png);
		background-size:			auto 100%;
		opacity:	.5;
	}
	#footer ul a:hover {
		opacity:	.9;
	}
	.svg #footer ul a {
		background-image:	url(../images/social-icons.svg);
	}

	#offcanvasmenu {
		display:	none;
		position:	absolute;
		top:			0;
		right:			0;
		z-index:	0;
		width:		27em;
		-webkit-tap-highlight-color: rgba(0,0,0,0);
	}
	#offcanvasmenu li {
		display:	list-item;
		list-style:	none;
		border-bottom:	1px solid #3d5a6c;
	}
	#offcanvasmenu a {
		display:	block;
		width:	100%;
		color:		#fff;
		font-size:	2em;
		padding:	.5em 1em;
		text-decoration:	none;
	}

}

@media only screen and (min-width: 1px) and (max-width: 799px) {
	#main {
		position:	absolute;
		z-index:	1;
		-webkit-backface-visibility: hidden;
		-webkit-transform:	translateX(0);
		-moz-transform:		translateX(0);
		transform:					translateX(0);
		background-color:	#fff;
		-webkit-transition:	-webkit-transform 350ms ease-in-out;
		-moz-transition:	-moz-transform 350ms ease-in-out;
		transition:			transform 350ms ease-in-out;
	}
	#main.offmenu {
		max-height:			100%;
		overflow:			hidden;
		-webkit-transform:	translateX(-27em);
		-moz-transform:		translateX(-27em);
		transform:			translateX(-27em);
	}
	#offcanvasmenu {
		display:	block;
	}
	#main #menu {
		display:	none;
	}
}

@media only screen and (min-width: 400px) {
	#topbar {
		padding:	.6em 0;
		background-size:				80em auto;
	}
	#article > div {
		margin-top:			1.5em;
		padding-bottom:	.5em;
	}
	#article h4 {
		font-size:			1.6em;
	}
}


/****** COOKIE LAW ************************************/
#cookielaw {
    position:   fixed;
    z-index:    9999;
    bottom:     0;
    left:       0;
    width:      100%;
    padding:    1em;
    font-size:  1.4em;
    text-align: center;
    color:      #fff;
    background: #000;
}
#cookielaw a {
    text-decoration: underline;
}
#cookielaw a.close {
    display:    inline-block;
}