/* Write your CSS! */

/* ============================================================
	Viewport
============================================================ */
@-ms-viewport {
	width: device-width;
}
@viewport {
	width: device-width;
}

section, nav, article, aside, hgroup, header, footer, main,
img, figure, figcaption, details, menu {
	display: block;
}

* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}


/* ============================================================
	Sectioning
============================================================ */
body {
	color: #444;
	font-family: sans-serif;
	font-weight: 400;
	font-size: 1em; /* 16px */
	line-height: 1; /* 16px */
	background-color: #fff;
	text-rendering: optimizeLegibility;
	margin: 0 auto;
}
h1 {
	color: #222;
	font-weight: 700;
	font-size: 3em;
	line-height: 1; /* 32px */
	letter-spacing: -0.03125em; /* -1px */
	margin: 0.25em 0 0.5em; /* 8px 0 16px */
   -webkit-font-smoothing: antialiased;
}
h2 {
	color: #333;
	font-weight: 700;
	font-size: 1.5em; /* 24px */
	line-height: 1; /* 24px */
	margin: 1.3334em 0 0.3334em; /* 32px 0 8px */
   -webkit-font-smoothing: antialiased;
}
h3 {
	color: #333;
	font-weight: 400;
	font-size: 1.3125em; /* 21px */
	line-height: 1.1429; /* 24px */
	margin: 1.1429em 0 0.3810em; /* 24px 0 8px */
   -webkit-font-smoothing: antialiased;
}
h4 {
	color: #444;
	font-weight: 400;
	font-size: 1.125em; /* 18px */
	line-height: 1.3334; /* 24px */
	margin: 1.3334em 0 0.4444em; /* 24px 0 8px */
   -webkit-font-smoothing: antialiased;
}
h5, legend {
	color: #555;
	font-weight: 700;
	font-size: 1em; /* 16px */
	line-height: 1; /* 16px */
	margin: 1.5em 0 0.5em; /* 24px 0 8px */
   -webkit-font-smoothing: antialiased;
}
h6 {
	color: #666;
	font-weight: 700;
	font-size: 0.875em; /* 14px */
	line-height: 1.1429; /* 16px */
	text-transform: uppercase;
	letter-spacing: 0.1429em; /* 2px */
	margin: 1.7143em 0 0.5714em; /* 24px 0 8px */
   -webkit-font-smoothing: antialiased;
}
header {
	margin-bottom: 1em;
	border-bottom: 1px solid #e9e9e9;
}
footer {
	margin-top: 1em;
	border-top: 1px solid #e9e9e9;
	padding-top: 0.5em;
}
nav ul {
	margin: 0;
	list-style: none;
}


/* ============================================================
	Grouping
============================================================ */
p, pre, blockquote, ul, ol, dl, figure, figcaption, table, fieldset, details {
	font-size: 1em; /* 16px */
	line-height: 1.5; /* 24px */
	margin: 0 0 1em 0; /* 0 0 16px 0 */
}
hr {
	font-weight: 700;
	font-size: 2em; /* 32px */
	line-height: 1; /* 32px */
	text-align: center;
	margin: 1em 0 2em; /* 0 0 32px */
	border: 0;
	padding: 0;
	height: 0;
	clear: both;
	display: block;
	}
	hr::after {
		content: "···";
		color: #bbb;
		letter-spacing: 1em;
		padding-left: 1em;
		height: 0;
	}
pre {
	margin-left: 1.5em; /* 24px */
	white-space:  pre-wrap;
	}
	pre code,
	pre samp {
		line-height: 1.5;
	}
blockquote {
	color: #666;
	font-size: 1em; /* 16px */
	line-height: 1.5; /* 32px */
	border-left: 0.25em solid #e9e9e9;
	padding: 0 1.5em 0 1em; /* 0 24px 0 16px */
	}
	blockquote p {
		line-height: 1.5; /* 24px */
		margin: 0.5em 0; /* 8px 0 */
	}

/* Grouping > Lists */
ol {
	list-style-type: decimal;
	padding: 0;
}
ul {
	list-style-type: square;
	padding: 0;
	}
	ul li li {
		list-style-type: circle;
	}
dt {
	font-size: 1em; /* 16px */
	font-weight: 700;
	line-height: 1.5; /* 24px */
}
dd, li {
	margin-left: 1.5em; /* 24px */
	}
	dd > *, li > * {
		margin-top: 0;
	}

/* Grouping > Figures */
figcaption {
	color: #999;
	font-size: 0.75em; /* 12px */
	line-height: 1.3334; /* 16px */
	padding: 0.6667em 0; /* 8px 0 */
	clear: left;
}
blockquote + figcaption: before {
	content: "\2014";
}


/* ============================================================
	Text-level semantics
============================================================ */
a {
	color: #25d;
	text-decoration: none;
	border-bottom: 1px solid rgba(34,85,221,0.1);
	}
	a:focus {
		outline: 1px solid rgba(34,85,221,0.3);
	}
	a:hover {
		color: #52d;
		border-bottom-color: rgba(85,34,221,0.2);
	}
	a:link, a:visited, a:hover {
		transition: all 0.2s ease;
	}
	a:active {
		color: #d25;
		border-bottom: 1px solid rgba(221,34,85,0.25);
		transition: none;
	}
em, i, cite, var {
	font-family: Georgia,serif;
	font-style: italic;
	line-height: 90%;
}
strong, b {
	color: #333;
	font-weight: 700;
	line-height: 90%;
}
: lang(en-gb)>q {
	quotes: "\201C" "\201D" "\2018" "\2019";
	}
	q::before { content: open-quote; }
	q::after { content: close-quote;
	}
small,
.small {
	color: #666;
	font-size: 0.75em; /* 12px */
	line-height: 1.3334; /* 16px */
	display: inline-block;
}
abbr {
	color: #666;
	font-size: 0.875em; /* 14px */
	line-height: 90%;
	letter-spacing: 0.0357em; /* 0.5px */
}
abbr[title],
dfn[title] {
	border-bottom: 1px dotted rgba(0,0,0,0.3);
	cursor: help;
}
code, samp {
	font-family: 'DejaVu Sans Mono',Inconsolata,Consolas,'Lucida Console',monospace;
	font-size: 1em; /* 16px */
	line-height: 90%;
	}
	code {
		color: #b03;
	}
	code .comment {
		color: #999;
	}
samp {
	background-color: #f9f9f9;
	padding: 0.25em;
}
kbd {
	color: #666;
	font-family: inherit;
	font-size: 87.5%;
	line-height: 90%;
	background-color: #f9f9f9;
	margin: 0 0.25em; /* 0 4px */
	border: 1px solid #e9e9e9;
	border-radius: 4px;
	padding: 0.3334em 0.5em;
	box-shadow: inset 0 1px 0 #fff;
}
sub {
	font-size: smaller;
	line-height: 90%;
	vertical-align: sub;
}
sup {
	font-size: smaller;
	line-height: 90%;
	vertical-align: super;
}


/* ============================================================
	Edits
============================================================ */
mark, ins {
	background-color: #fff9d9;
	line-height: 90%;
	padding: 0 0.125em; /* 0 2px */
	}
	ins {
		background-color: #e9e9e9;
	}
del, s {
	line-height: 90%;
	text-decoration: line-through;
}


/* ============================================================
	Embedded content
============================================================ */
img {
	border: 0;
	max-width: 100%;
}


/* ============================================================
	Tabular data
============================================================ */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption {
	caption-side: bottom;
	color: #999;
	font-size: 0.75em; /* 12px */
	line-height: 1.3334; /* 16px */
	text-align: left;
	margin: 1em 0; /* 12px 0 */
}
td, th {
	text-align: left;
	border-bottom: 1px solid #e9e9e9;
	padding: 0.375em 2em 0.375em 0; /* 6px 32px 6px 0 */
	vertical-align: top;
}
th {
	font-weight: 700;
	padding-bottom: 0.5em; /* 8px */
}
thead th {
	border-bottom: 2px solid #ddd;
}


/* ============================================================
	Forms
============================================================ */
fieldset {
	border: 0;
	padding: 0;
}
legend {
	margin: 0;
}
label {
	line-height: 1.5;
	cursor: pointer;
}
button,
input,
select,
textarea {
	color: inherit;
	font-family: inherit;
	font-size: 100%;
	margin: 0;
	outline: 0;
}
select {
	-webkit-appearance: button;
	appearance: normal;
}
button,
input[type="button"],
input[type="submit"] {
	-webkit-appearance: button;
	line-height: normal;
	width: auto;
	cursor: pointer;
	}
	button::-moz-focus-inner,
	input::-moz-focus-inner {
		border: 0;
		padding: 0;
	}
input[type="radio"],
input[type="checkbox"] {
	margin-right: 0.25em;
}
input[type="search"] {
	-webkit-appearance: none;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}
[disabled] {
	cursor:  default;
}


/* Placeolder */
::-webkit-input-placeholder {
   color: #999;
	}
	:focus::-webkit-input-placeholder {
		color: #ccc;
	}
:-moz-placeholder {
   color: #999;  
	}
	:focus:-moz-placeholder {
		color: #ccc;
	}
:-ms-input-placeholder {
   color: #999;  
	}
	:focus:-ms-input-placeholder {
	   color: #ccc;  
	}


/* ============================================================
	Interactive
============================================================ */
summary {
	border: 0;
	outline: 0;
	cursor: pointer;
}


/* ============================================================
	Print styles
============================================================ */
@media print {
	@page {
		margin: 0.5cm;
	}
	* {
		background: transparent !important;
		color: #000 !important;
		text-shadow: none !important;
		box-shadow: none;
	}
	p, h1, h2, h3 {
		orphans: 3;
		widows: 3;
	}
	h1, h2, h3, h4 {
		page-break-after: avoid;
	}
	blockquote {
		border-left: 4px solid #ccc;
		padding: 0 1em;
		page-break-inside: avoid;
	}
	a, a:visited {
		color: #000 !important;
		border-bottom: 1px dotted #999;
		padding-left: 0 !important;
	}
	thead {
		display: table-header-group;
	}
	tr, img {
		page-break-inside: avoid;
	}
	input[type="text"],
	input[type="email"],
	input[type="url"],
	input[type="password"],
	input[type="search"],
	textarea {
		border-bottom: 1px solid #999;
		box-shadow: none;
	}
}

html {
	height: 100%;
	}

body {
	font: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	}

section {
	padding: 0.5em 2em;
	max-width: 800px;
	}

@charset "UTF-8";