@font-face {
font-family:bpicons;
src:url(../fonts/bpicons/bpicons.eot?#iefix) format(embedded-opentype), url(../fonts/bpicons/bpicons.woff) format(woff), url(../fonts/bpicons/bpicons.ttf) format(truetype), url(../fonts/bpicons/bpicons.svg#bpicons) format(svg);
font-weight:400;
font-style:normal;
}

*,:after,:before {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}

body,html {
font-size:100%;
margin:0;
padding:0;
}

.clearfix:before,.clearfix:after {
content:" ";
display:table;
}

.clearfix:after {
clear:both;
}

body {
font-family:Lato, Calibri, Arial, sans-serif;
color:#408cb3;
}

a {
color:#ccc;
text-decoration:none;
outline:none;
}

a:hover {
color:#000;
}

.small {
font-size:.7em;
}

.smaller {
font-size:.6em;
}

.container > header {
width:90%;
max-width:69em;
margin:0 auto;
padding:2.875em 1.875em 1.875em;
}

.container > header h1 {
font-size:2.125em;
line-height:1.3;
float:left;
font-weight:400;
margin:0 0 .6em;
}

.container > header > span {
display:block;
position:relative;
z-index:9999;
font-weight:700;
text-transform:uppercase;
letter-spacing:.5em;
padding:0 0 .6em .1em;
}

.container > header > span span:after {
width:30px;
height:30px;
left:-12px;
top:-8px;
font-size:75%;
position:relative;
}

.container > header > span span:hover:before {
content:attr(data-content);
text-transform:none;
text-indent:0;
letter-spacing:0;
font-weight:300;
font-size:110%;
line-height:1.2;
text-align:left;
left:auto;
margin-left:4px;
position:absolute;
color:#fff;
background:#408cb3;
padding:.8em 1em;
}

.container > header nav {
float:right;
text-align:center;
}

.container > header nav a {
display:inline-block;
position:relative;
text-align:left;
width:2.5em;
height:2.5em;
background:#fff;
border-radius:50%;
border:4px solid #408cb3;
margin:0 .1em;
}

.container > header nav a > span {
display:none;
}

.container > header nav a:hover:before {
content:attr(data-info);
color:#408cb3;
position:absolute;
width:600%;
top:120%;
text-align:right;
right:0;
pointer-events:none;
}

.container > header nav a:hover {
background:#408cb3;
}

.bp-icon:after {
font-family:bpicons;
speak:none;
font-style:normal;
font-weight:400;
font-variant:normal;
text-transform:none;
text-align:center;
color:#408cb3;
-webkit-font-smoothing:antialiased;
}

.container > header nav .bp-icon:after {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
line-height:2;
text-indent:0;
}

.container > header nav a:hover:after {
color:#fff;
}

.bp-icon-next:after {
content:"\e000";
}

.bp-icon-drop:after {
content:"\e001";
}

.bp-icon-archive:after {
content:"\e002";
}

.bp-icon-about:after {
content:"\e003";
}

.bp-icon-prev:after {
content:"\e004";
}

p.info {
text-align:center;
padding:20px;
}

@media screen and (max-width: 55em) {
	.container > header h1,
	.container > header nav {
		float: none;
	}
	.container > header > span,
	.container > header h1 {
		text-align: center;
	}
	.container > header nav {
		margin: 0 auto;
	}
	.container > header > span {
		text-indent: 30px;
	}
}