/*
	HTML5 Reset :: style.css
	----------------------------------------------------------
	We have learned much from/been inspired by/taken code where offered from:

	Eric Meyer					:: http://meyerweb.com
	HTML5 Doctor				:: http://html5doctor.com
	and the HTML5 Boilerplate	:: http://html5boilerplate.com

-------------------------------------------------------------------------------*/
/* Let's default this puppy out
-------------------------------------------------------------------------------*/
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: normal;
  vertical-align: baseline;
  background: transparent; }

main, article, aside, figure, footer, header, nav, section, details, summary {
  display: block; }

/* Handle box-sizing while better addressing child elements:
   http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
html {
  box-sizing: border-box; }

*,
*:before,
*:after {
  box-sizing: inherit; }

/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */
/* Responsive images and other embedded objects */
/* if you don't have full control over `img` tags (if you have to overcome attributes), consider adding height: auto */
img,
object,
embed {
  max-width: 100%; }

/*
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
	In fact, it *will* cause problems with Google Maps' controls at small size.
	If this is the case for you, try uncommenting the following:

#map img {
		max-width: none;
}
*/
/* force a vertical scrollbar to prevent a jumpy page */
html {
  overflow-y: scroll; }

/* we use a lot of ULs that aren't bulleted.
	you'll have to restore the bullets within content,
	which is fine because they're probably customized anyway */
ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none; }

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

del {
  text-decoration: line-through; }

abbr[title], dfn[title] {
  border-bottom: 1px dotted #000;
  cursor: help; }

/* tables still need cellspacing="0" in the markup */
table {
  border-collapse: separate;
  border-spacing: 0; }

th {
  font-weight: bold;
  vertical-align: bottom; }

td {
  font-weight: normal;
  vertical-align: top; }

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0; }

input, select {
  vertical-align: middle; }

pre {
  white-space: pre;
  /* CSS2 */
  white-space: pre-wrap;
  /* CSS 2.1 */
  white-space: pre-line;
  /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word;
  /* IE */ }

input[type="radio"] {
  vertical-align: text-bottom; }

input[type="checkbox"] {
  vertical-align: bottom; }

.ie7 input[type="checkbox"] {
  vertical-align: baseline; }

.ie6 input {
  vertical-align: text-bottom; }

select, input, textarea {
  font: 99% sans-serif; }

table {
  font-size: inherit;
  font: 100%; }

small {
  font-size: 85%; }

strong {
  font-weight: bold; }

td, td img {
  vertical-align: top; }

/* Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930 */
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/* standardize any monospaced elements */
pre, code, kbd, samp {
  font-family: monospace, sans-serif; }

/* hand cursor on clickable elements */
.clickable,
label,
input[type=button],
input[type=submit],
input[type=file],
button {
  cursor: pointer; }

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {
  margin: 0; }

/* make buttons play nice in IE */
button,
input[type=button] {
  width: auto;
  overflow: visible; }

/* scale images in IE7 more attractively */
.ie7 img {
  -ms-interpolation-mode: bicubic; }

/* prevent BG image flicker upon hover
   (commented out as usage is rare, and the filter syntax messes with some pre-processors)
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}
*/
/* let's clear some floats */
.clearfix:after {
  content: " ";
  display: block;
  clear: both; }

/* CUSTOM CHANGES */
main {
  display: block; }

@font-face {
  font-family: "Trebuchet MS";
  src: url("../trebuc.ttf"); }
/* Responsive Sizes */
/* iPhone 5   */
/* 720p Phone */
/* iPad       */
/* iPad Pro   */
/* Desktop    */
/* General Site */
/* Shading */
/* Color */
/* Palette */
/* Top */
/* Hamburger */
/* https://typecast.com/blog/a-more-modern-scale-for-web-typography */
body, h1, h2, h3, h4, h5, h6 {
  font-size-adjust: 0.5; }

h1, h2, h3, h4, h5, h6 {
  text-align: center;
  margin-bottom: 15px; }

body {
  font-family: "Noto Sans", "Liberation Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.25em; }

h1 {
  font-size: 2.0em;
  line-height: 1.25em; }

h2 {
  font-size: 1.625em;
  line-height: 1.15384615em; }

h3 {
  font-size: 1.375em;
  line-height: 1.13636364em; }

h4 {
  font-size: 1.125em;
  line-height: 1.11111111em; }

blockquote {
  font-size: 1.25em;
  line-height: 1.25em; }

/* iPad */
@media only screen and (min-width: 768px) {
  h1, h2, h3, h4, h5, h6 {
    margin-bottom: 30px; }

  body {
    line-height: 1.375em; }

  h1 {
    font-size: 2.5em;
    line-height: 1.125em; }

  h2 {
    font-size: 2.0em;
    line-height: 1.25em; }

  h3 {
    font-size: 1.5em;
    line-height: 1.25em; }

  h4 {
    line-height: 1.22222222em; }

  blockquote {
    font-size: 1.5em;
    line-height: 1.45833333em; } }
/* Desktop */
@media only screen and (min-width: 1200px) {
  h1 {
    font-size: 3.0em;
    line-height: 1.05em; }

  h2 {
    font-size: 2.25em;
    line-height: 1.25em; }

  h3 {
    font-size: 1.75em;
    line-height: 1.25em; } }
.svg, .svg-hamburger, #hamburger {
  background-position: center center;
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%; }

.svg-hamburger, #hamburger {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><rect y="0" width="50" height="10" fill="%23f7f7f7" /><rect y="20" width="50" height="10" fill="%23f7f7f7" /><rect y="40" width="50" height="10" fill="%23f7f7f7" /></svg>'); }

/* IE 10 & 11: SVGs need to be Base64 because reasons */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .svg-hamburger, #hamburger {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MCA1MCI+PHJlY3QgeT0iMCIgd2lkdGg9IjUwIiBoZWlnaHQ9IjEwIiBmaWxsPSIjZjdmN2Y3IiAvPjxyZWN0IHk9IjIwIiB3aWR0aD0iNTAiIGhlaWdodD0iMTAiIGZpbGw9IiNmN2Y3ZjciIC8+PHJlY3QgeT0iNDAiIHdpZHRoPSI1MCIgaGVpZ2h0PSIxMCIgZmlsbD0iI2Y3ZjdmNyIgLz48L3N2Zz4="); } }
#header {
  background-color: #222222;
  box-shadow: 0px 2px 0px #ff66ff;
  color: #ffffff;
  position: fixed;
  top: 0;
  width: 100%;
  height: 60px;
  z-index: 3; }
  #header .container {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    padding-right: 15px;
    height: 100%; }
  #header #header-logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 60px;
    text-decoration: none; }
    #header #header-logo img {
      border-radius: 999px;
      box-shadow: 0px 0px 1px 2px rgba(0, 0, 0, 0.8);
      display: none;
      margin-left: 15px;
      height: 40px; }
    #header #header-logo span {
      color: #ffffff;
      font-family: "Trebuchet MS";
      font-size: 1.15em;
      font-variant: small-caps;
      font-weight: 100;
      letter-spacing: 4px; }
  #header nav {
    display: none; }
    #header nav ul {
      display: flex;
      margin-bottom: 0;
      padding: 0;
      height: 60px; }
      #header nav ul li {
        display: flex;
        align-items: center;
        height: 60px;
        transition: 0.2s; }
        #header nav ul li:hover {
          background-color: #353535; }
        #header nav ul li a {
          color: inherit;
          text-decoration: none;
          display: flex;
          align-items: center;
          padding: 0 15px;
          height: 60px; }
          #header nav ul li a:hover {
            color: #ff66ff; }

@media only screen and (min-width: 360px) {
  #header #header-logo a {
    font-size: 1.3em; } }
@media only screen and (min-width: 768px) {
  #header #header-logo {
    flex-direction: row-reverse; }
    #header #header-logo img {
      display: inline-block; } }
@media only screen and (min-width: 1024px) {
  #header {
    padding: 0 15px; }
    #header #header-logo {
      flex-direction: row; }
      #header #header-logo img {
        margin-left: 0;
        margin-right: 15px; }
    #header .container {
      justify-content: space-between;
      padding-right: 0; }
    #header nav {
      display: block; } }
#footer {
  background-color: #222222;
  color: #ffffff;
  width: 100%; }
  #footer small {
    font-size: 0.75em;
    text-align: center;
    width: 100%; }

@media only screen and (min-width: 768px) {
  #footer {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 0; } }
#hamburger-menu {
  background-color: #222222;
  font-size: 1.2em;
  text-align: left;
  position: fixed;
  top: 0;
  left: -200px;
  width: 200px;
  height: 100%;
  z-index: 8;
  transition: all 0.5s; }
  #hamburger-menu.open {
    left: 0; }
  #hamburger-menu ul {
    color: #ffffff;
    list-style: none;
    padding: 0;
    position: relative;
    top: 60px;
    transition: all 0.5s; }
    #hamburger-menu ul li {
      list-style: none;
      padding: 15px; }
      #hamburger-menu ul li a {
        color: inherit;
        text-decoration: none; }
  #hamburger-menu .book-online {
    display: inline-block; }

#hamburger {
  cursor: pointer;
  position: fixed;
  top: 15px;
  left: 15px;
  width: 30px;
  height: 30px;
  z-index: 9;
  transition: all 0.5s; }

#content {
  position: relative;
  left: 0;
  transition: all 0.5s; }
  #content.open {
    left: 200px; }

#overlay {
  background-color: rgba(0, 0, 0, 0.5);
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 8;
  transition: all 0.5s; }
  #overlay.open {
    visibility: visible;
    opacity: 1; }

@media only screen and (max-width: 1023px) {
  body {
    overflow-x: hidden; } }
@media only screen and (min-width: 1024px) {
  #hamburger-menu,
  #hamburger {
    display: none !important; }

  #overlay {
    visibility: hidden !important;
    opacity: 0      !important; }

  #content {
    left: 0 !important; } }
body {
  background-color: #222222; }

a {
  color: #ffffff;
  text-decoration-color: #ff66ff;
  text-decoration-style: dashed;
  transition: 0.2s; }
  a:hover {
    color: #ff66ff;
    text-decoration: none; }

p {
  text-align: justify; }

ol {
  padding-left: 45px; }
  ol li {
    line-height: 1.5em; }

ul {
  padding-left: 45px; }
  ul li {
    list-style: disc;
    line-height: 1.5em; }

mark {
  background-color: #ffff33;
  border-radius: 3px;
  color: #000000;
  padding: 0 3px; }

code:not([class]) {
  background-color: #603960;
  border-radius: 3px;
  padding: 0 3px; }

pre {
  box-shadow: inset 0px -1px 0px 1px #3c3c3c, inset 0px 1px 0px 1px #090909;
  white-space: pre; }

pre:not([class]) {
  background-color: #272822;
  border-radius: 0.3em;
  margin: 0.5em 0;
  padding: 1em; }
  pre:not([class]) code {
    background-color: #272822;
    border: none; }

main {
  background-color: #130c13;
  box-shadow: 0px 2px 0px #ff66ff;
  position: relative;
  z-index: 1; }

.container {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin: 0 auto;
  width: 100%;
  max-width: 1200px; }

.nav-current {
  background-color: #353535;
  box-shadow: inset 0px -2px 0px #ff66ff;
  color: #ff66ff; }

#posts {
  background-color: #130c13;
  width: 100%; }
  #posts::before {
    content: "";
    display: block;
    width: 100%;
    height: 60px; }

#pagination {
  background-color: #130c13; }
  #pagination .container {
    color: #ffffff;
    justify-content: center;
    padding-top: 0; }
    #pagination .container .go-back {
      margin: 15px 0; }
  #pagination .grey {
    color: #777777; }

.post {
  background-color: #222222;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.4);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
  width: 100%; }
  .post:last-child {
    margin-bottom: 0; }
  .post > * {
    padding: 15px; }
  .post header {
    background-image: linear-gradient(rgba(60, 60, 60, 0.65), rgba(34, 34, 34, 0.85)), url("../images/carbon.png");
    border-top: 1px solid #3c3c3c;
    border-bottom: 2px solid #090909;
    box-shadow: 0px 1px 0px #3c3c3c;
    width: 100%; }
    .post header h1, .post header h2 {
      margin-bottom: 0; }
      .post header h1 a, .post header h2 a {
        text-decoration: none; }
    .post header div {
      text-align: center; }
  .post section {
    width: 100%; }
    .post section * {
      max-width: 100%; }
    .post section h1, .post section h2, .post section h3, .post section h4, .post section h5, .post section h6 {
      margin-top: 30px; }
    .post section img {
      display: block;
      margin: 0 auto; }
    .post section iframe {
      display: block;
      margin-right: auto;
      margin-left: auto; }
    .post section pre code {
      display: block;
      width: 100%; }
    .post section .profile-image {
      border: 2px solid #000000;
      border-radius: 999px;
      box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.4);
      margin-bottom: 15px; }
    .post section .feature-image {
      margin-bottom: 15px; }
    .post section .kg-card-markdown > * {
      margin-bottom: 15px; }
    .post section .kg-card-markdown > *:last-child {
      margin-bottom: 0; }
    .post section .read-more {
      text-align: right;
      margin-top: 15px; }
  .post footer {
    background-image: linear-gradient(rgba(34, 34, 34, 0.85), rgba(19, 12, 19, 0.9)), url("../images/carbon.png");
    border-top: 1px solid #3c3c3c;
    box-shadow: 0px -2px 0px #090909;
    text-align: center;
    padding-top: 15px;
    width: 100%; }

/* iPad */
@media only screen and (min-width: 768px) {
  main {
    margin-bottom: 82px; }

  .container {
    padding: 30px; }

  #pagination .container {
    flex-direction: row;
    justify-content: space-between; }
    #pagination .container .newer-posts, #pagination .container .go-back, #pagination .container .older-posts {
      flex-basis: 33.333333%; }
    #pagination .container .go-back {
      margin: 0;
      text-align: center; }
    #pagination .container .older-posts {
      text-align: right; }

  .post {
    border-radius: 4px;
    margin-bottom: 30px; }
    .post > * {
      padding: 30px; }
    .post header {
      border-top-left-radius: 4px;
      border-top-right-radius: 4px; }
    .post section .read-more {
      margin-top: 30px; }
    .post footer {
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      padding-top: 30px; } }

/*# sourceMappingURL=style.css.map */