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


/* ============================================================
  HTML5 Elements
============================================================ */
section, nav, article, aside, hgroup, header, footer, main,
img, figure, figcaption, details, menu {
  display: block;
}
audio, video, canvas {
  display: inline-block;
}


/* ============================================================
  Box sizing
============================================================ */
* {
  -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 */
  text-rendering: optimizeLegibility;
  margin: 0 auto;
}
h1 {
  color: #222;
  font-weight: 700;
  font-size: 2em; /* 32px */
  line-height: 1; /* 32px */
  letter-spacing: -0.03125em; /* -1px */
  margin: 0.5em 0; /* 16px 0 */
   -webkit-font-smoothing: antialiased;
}
h2,
article > h1,
section > h1,
nav > h1 {
  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,
legend,
article article > h1,
article section > h1,
section section > h1,
section article > h1 {
  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 {
  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.5em 0; /* 8px 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 {
  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;
}


/* Placheolder */
::-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;
  }
}