/* RESET */
html { font-size: 100%; line-height: 1.15; box-sizing: border-box; -webkit-text-size-adjust: 100%; }
body { font-size: 1rem; margin: 0; line-height: 1.5; }
*, *::before, *::after { box-sizing: inherit; font-family: inherit; font-size: inherit; line-height: inherit; }
blockquote, dl, dd, h1, h2, h3, h4, h5, h6, figure, p, pre { margin: 0; }
button,input,optgroup,select,textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0;}
button,input { overflow: visible; }
button,select { text-transform: none; }
button,[type="button"],[type="reset"],[type="submit"] { -webkit-appearance: button; }
button { background: transparent; border: 0; padding: 0; }
button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }
button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }
fieldset { border: 0; margin: 0; padding: 0.35em 0.75em 0.625em; }
textarea { overflow: auto; }
[type="checkbox"],[type="radio"] {box-sizing: border-box; padding: 0; }
[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button { height: auto; }
[type="search"] {-webkit-appearance: textfield; outline-offset: -2px; }
[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
iframe { border: 0; }
img { border-style: none; }
ol,ul { list-style: none; margin: 0; padding: 0; }
a { text-decoration: none; background-color: transparent; }

/* Font stack */
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }

/* Helpers */

/* Sticky sticks to the parent container. Be sure to add a top: ; value. Supported by all modern browsers with prefix */
.sticky { position: -webkit-sticky; position: sticky; }

/* Grid */
.layout { display: grid; grid-template-rows: 56px auto 1fr; min-height: 100vh; }
.layout.right_sidebar { grid-template-areas:
  "header header"
  "main_content sidebar"
  "footer footer";
  grid-template-columns: 2fr 1fr; }
.layout.left_sidebar { grid-template-areas:
  "header header"
  "sidebar main_content"
  "footer footer";
  grid-template-columns: 1fr 2fr }
.layout.full { grid-template-areas:
  "header"
  "main_content"
  "footer";
  grid-template-columns: 1fr; }

  @media (max-width: 768px) {
    .layout.left_sidebar {
      grid-template-areas:
        "header"
        "sidebar"
        "main_content"
        "footer";
        grid-template-columns: 1fr;
        grid-template-rows: 56px auto auto 1fr;
    }
  }
.header { grid-area: header; }
.main_content, .sidebar, .footer { padding: 2rem; }
.main_content { grid-area: main_content; }
.sidebar { grid-area: sidebar; background: #f5f5f5; }
.layout.full .main_content { max-width: 60rem; margin: 0 auto; }

/* Typography */
/* Use ems for font spacings, rems for everything else */
h1,h2,h3,h4,h5,h6 { margin-bottom: 0.5em; }
h1 { font-size: 2.5em; }
h2 { font-size: 2em; }
h3 { font-size: 1.65em; }
p { font-feature-settings: "kern" 1; font-kerning: normal; text-rendering: optimizeLegibility; margin-top: 0; margin-bottom: 1em; }
b,strong { font-weight: bolder; }
small { font-size: 80%; }
code, pre { font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; background: #f8f9fa; }
code { font-size: 87.5%; color: #157cfa; word-break: break-word; }
pre { margin: 1.5rem; padding: 1rem; word-break: normal; color: #555; font-weight: 200; overflow: auto; white-space: pre-wrap; word-wrap: break-word; overflow: auto; }
a, a:visited { color: #000; }


/* Helpers */
.text-center { text-align: center; }

/* Content blocks */
section { margin: 3rem 0; }
section.underline { border-bottom: 1px solid #ccc; margin-bottom: 1.75rem; padding-bottom: 1.75rem; }

/* Forms */
.form { display: inline-flex; flex-direction: column; align-items: center; flex-wrap: wrap; margin: 2rem 0; }
.form.inline { flex-direction: row; }
.form .field { margin-bottom: 1rem; }
.form.inline .field, .form.inline .btn { margin-bottom: 0; margin-left: 1rem; }
.form label { margin-right: 0.5rem; }
/* Instead of trying to keep up with every single type of instance of input type, we just add the class .input to catch them all. */
.form .input { padding: 0.5rem 0.6rem; border: 1px solid #ccc; box-shadow: none; vertical-align: middle; }
.btn { border-radius: 0; margin: 0; display: flex; cursor: pointer;  -webkit-user-drag: none; user-select: none; justify-content: center; align-items: center; padding: 0.56rem 1rem; font-weight: bold; text-decoration: none; border: none; background-color: #157cfa; color: #fff !important; max-width: 15rem; border-radius: 3px; }
.btn:hover, .btn:focus, .btn:active { text-decoration: none; }
.btn.icon {}

/* Layout elements */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); grid-gap: 25px; }
.card { display: flex; flex-direction: column;}

/* Mobile menu */
#toggle_nav, .toggle { display: none; }
@media (max-width: 768px) {
  #navigation.drawer { transition: transform .3s ease-in-out; top: 0; bottom: 0; min-height: 100vh; position: fixed; width: 300px; left: -340px; z-index: 9999; }
  #navigation:target { transform: translateX(340px); }
  .close { }
}

/* Header */
.header { }
.header .container { display: flex; justify-content: space-between; align-items: center; padding: 0 4%;  border-bottom: 1px solid #ddd; height: 56px; }
.logo_wrapper { display: inline-flex; }
.header_menu { display: flex; align-items: center; }
.header_menu li { padding: 0 1em; }
.header_menu a { font-size: 0.9rem; }

h3 { font-size: 1.35rem; color: #666; font-weight: 400; font-style: italic;}
.main_content a, .main_content a:visited { color: #157cfa; }

/* Sidebar */
.sidebar .module { margin-bottom: 2rem; } 

/* Footer */
.footer { text-align: center; color: #777; font-size: 0.95rem; }