:root {
  --fore-color: #111;
  --secondary-fore-color: #444;
  --back-color: #f8f8f8;
  --secondary-back-color: #f0f0f0;
  --blockquote-color: #f57c00;
  --pre-color: #1565c0;
  --border-color: #aaa;
  --secondary-border-color: #ddd;
  --heading-ratio: 1.19;
  --universal-margin: .5rem;
  --universal-padding: .5rem;
  --universal-border-radius: .125rem;
  --a-link-color: #0277bd;
  --a-visited-color: #01579b
}

html {
  font-size: 14px
}

a,
b,
del,
em,
i,
ins,
q,
span,
strong,
u {
  font-size: 1em
}

html,
* {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%
}

* {
  font-size: 1rem
}

body {
  margin: 0;
  color: var(--fore-color);
  background: var(--back-color)
}

details {
  display: block
}

summary {
  display: list-item
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline dotted
}

img {
  max-width: 100%;
  height: auto
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.2;
  margin: calc(1.5 * var(--universal-margin)) var(--universal-margin);
  font-weight: 500
}

h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small {
  color: var(--secondary-fore-color);
  display: block;
  margin-top: -.25rem
}

h1 {
  font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))
}

h2 {
  font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))
}

h3 {
  font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio))
}

h4 {
  font-size: calc(1rem * var(--heading-ratio))
}

h5 {
  font-size: 1rem
}

h6 {
  font-size: calc(1rem / var(--heading-ratio))
}

p {
  margin: var(--universal-margin)
}

ol,
ul {
  margin: var(--universal-margin);
  padding-left: calc(2 * var(--universal-margin))
}

b,
strong {
  font-weight: 700
}

hr {
  box-sizing: content-box;
  border: 0;
  line-height: 1.25em;
  margin: var(--universal-margin);
  height: .0625rem;
  background: linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent)
}

blockquote {
  display: block;
  position: relative;
  font-style: italic;
  color: var(--secondary-fore-color);
  margin: var(--universal-margin);
  padding: calc(3 * var(--universal-padding));
  border: .0625rem solid var(--secondary-border-color);
  border-left: .375rem solid var(--blockquote-color);
  border-radius: 0 var(--universal-border-radius) var(--universal-border-radius) 0
}

blockquote:before {
  position: absolute;
  top: calc(0rem - var(--universal-padding));
  left: 0;
  font-family: sans-serif;
  font-size: 3rem;
  font-weight: 700;
  content: "\201c";
  color: var(--blockquote-color)
}

blockquote[cite]:after {
  font-style: normal;
  font-size: .75em;
  font-weight: 700;
  content: "\a—  "attr(cite);
  white-space: pre
}

code,
kbd,
pre,
samp {
  font-family: Menlo, Consolas, monospace;
  font-size: .85em
}

code {
  background: var(--secondary-back-color);
  border-radius: var(--universal-border-radius);
  padding: calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)
}

kbd {
  background: var(--fore-color);
  color: var(--back-color);
  border-radius: var(--universal-border-radius);
  padding: calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)
}

pre {
  overflow: auto;
  background: var(--secondary-back-color);
  padding: calc(1.5 * var(--universal-padding));
  margin: var(--universal-margin);
  border: .0625rem solid var(--secondary-border-color);
  border-left: .25rem solid var(--pre-color);
  border-radius: 0 var(--universal-border-radius) var(--universal-border-radius) 0
}

sup,
sub,
code,
kbd {
  line-height: 0;
  position: relative;
  vertical-align: baseline
}

small,
sup,
sub,
figcaption {
  font-size: .75em
}

sup {
  top: -.5em
}

sub {
  bottom: -.25em
}

figure {
  margin: var(--universal-margin)
}

figcaption {
  color: var(--secondary-fore-color)
}

a {
  text-decoration: none
}

a:link {
  color: var(--a-link-color)
}

a:visited {
  color: var(--a-visited-color)
}

a:hover,
a:focus {
  text-decoration: underline
}

.container {
  margin: 0 auto;
  padding: 0 calc(1.5 * var(--universal-padding))
}

.row {
  box-sizing: border-box;
  display: flex;
  flex: 0 1 auto;
  flex-flow: row wrap
}

.col-sm,
[class^='col-sm-'],
[class^='col-sm-offset-'],
.row[class*='cols-sm-']>* {
  box-sizing: border-box;
  flex: 0 0 auto;
  padding: 0 calc(var(--universal-padding) / 2)
}

.col-sm,
.row.cols-sm>* {
  max-width: 100%;
  flex-grow: 1;
  flex-basis: 0
}

.col-sm-1,
.row.cols-sm-1>* {
  max-width: 8.33333%;
  flex-basis: 8.33333%
}

.col-sm-offset-0 {
  margin-left: 0
}

.col-sm-2,
.row.cols-sm-2>* {
  max-width: 16.66667%;
  flex-basis: 16.66667%
}

.col-sm-offset-1 {
  margin-left: 8.33333%
}

.col-sm-3,
.row.cols-sm-3>* {
  max-width: 25%;
  flex-basis: 25%
}

.col-sm-offset-2 {
  margin-left: 16.66667%
}

.col-sm-4,
.row.cols-sm-4>* {
  max-width: 33.33333%;
  flex-basis: 33.33333%
}

.col-sm-offset-3 {
  margin-left: 25%
}

.col-sm-5,
.row.cols-sm-5>* {
  max-width: 41.66667%;
  flex-basis: 41.66667%
}

.col-sm-offset-4 {
  margin-left: 33.33333%
}

.col-sm-6,
.row.cols-sm-6>* {
  max-width: 50%;
  flex-basis: 50%
}

.col-sm-offset-5 {
  margin-left: 41.66667%
}

.col-sm-7,
.row.cols-sm-7>* {
  max-width: 58.33333%;
  flex-basis: 58.33333%
}

.col-sm-offset-6 {
  margin-left: 50%
}

.col-sm-8,
.row.cols-sm-8>* {
  max-width: 66.66667%;
  flex-basis: 66.66667%
}

.col-sm-offset-7 {
  margin-left: 58.33333%
}

.col-sm-9,
.row.cols-sm-9>* {
  max-width: 75%;
  flex-basis: 75%
}

.col-sm-offset-8 {
  margin-left: 66.66667%
}

.col-sm-10,
.row.cols-sm-10>* {
  max-width: 83.33333%;
  flex-basis: 83.33333%
}

.col-sm-offset-9 {
  margin-left: 75%
}

.col-sm-11,
.row.cols-sm-11>* {
  max-width: 91.66667%;
  flex-basis: 91.66667%
}

.col-sm-offset-10 {
  margin-left: 83.33333%
}

.col-sm-12,
.row.cols-sm-12>* {
  max-width: 100%;
  flex-basis: 100%
}

.col-sm-offset-11 {
  margin-left: 91.66667%
}

.col-sm-normal {
  order: initial
}

.col-sm-first {
  order: -999
}

.col-sm-last {
  order: 999
}

@media screen and (min-width: 768px) {

  .col-md,
  [class^='col-md-'],
  [class^='col-md-offset-'],
  .row[class*='cols-md-']>* {
    box-sizing: border-box;
    flex: 0 0 auto;
    padding: 0 calc(var(--universal-padding) / 2)
  }

  .col-md,
  .row.cols-md>* {
    max-width: 100%;
    flex-grow: 1;
    flex-basis: 0
  }

  .col-md-1,
  .row.cols-md-1>* {
    max-width: 8.33333%;
    flex-basis: 8.33333%
  }

  .col-md-offset-0 {
    margin-left: 0
  }

  .col-md-2,
  .row.cols-md-2>* {
    max-width: 16.66667%;
    flex-basis: 16.66667%
  }

  .col-md-offset-1 {
    margin-left: 8.33333%
  }

  .col-md-3,
  .row.cols-md-3>* {
    max-width: 25%;
    flex-basis: 25%
  }

  .col-md-offset-2 {
    margin-left: 16.66667%
  }

  .col-md-4,
  .row.cols-md-4>* {
    max-width: 33.33333%;
    flex-basis: 33.33333%
  }

  .col-md-offset-3 {
    margin-left: 25%
  }

  .col-md-5,
  .row.cols-md-5>* {
    max-width: 41.66667%;
    flex-basis: 41.66667%
  }

  .col-md-offset-4 {
    margin-left: 33.33333%
  }

  .col-md-6,
  .row.cols-md-6>* {
    max-width: 50%;
    flex-basis: 50%
  }

  .col-md-offset-5 {
    margin-left: 41.66667%
  }

  .col-md-7,
  .row.cols-md-7>* {
    max-width: 58.33333%;
    flex-basis: 58.33333%
  }

  .col-md-offset-6 {
    margin-left: 50%
  }

  .col-md-8,
  .row.cols-md-8>* {
    max-width: 66.66667%;
    flex-basis: 66.66667%
  }

  .col-md-offset-7 {
    margin-left: 58.33333%
  }

  .col-md-9,
  .row.cols-md-9>* {
    max-width: 75%;
    flex-basis: 75%
  }

  .col-md-offset-8 {
    margin-left: 66.66667%
  }

  .col-md-10,
  .row.cols-md-10>* {
    max-width: 83.33333%;
    flex-basis: 83.33333%
  }

  .col-md-offset-9 {
    margin-left: 75%
  }

  .col-md-11,
  .row.cols-md-11>* {
    max-width: 91.66667%;
    flex-basis: 91.66667%
  }

  .col-md-offset-10 {
    margin-left: 83.33333%
  }

  .col-md-12,
  .row.cols-md-12>* {
    max-width: 100%;
    flex-basis: 100%
  }

  .col-md-offset-11 {
    margin-left: 91.66667%
  }

  .col-md-normal {
    order: initial
  }

  .col-md-first {
    order: -999
  }

  .col-md-last {
    order: 999
  }
}

@media screen and (min-width: 1280px) {

  .col-lg,
  [class^='col-lg-'],
  [class^='col-lg-offset-'],
  .row[class*='cols-lg-']>* {
    box-sizing: border-box;
    flex: 0 0 auto;
    padding: 0 calc(var(--universal-padding) / 2)
  }

  .col-lg,
  .row.cols-lg>* {
    max-width: 100%;
    flex-grow: 1;
    flex-basis: 0
  }

  .col-lg-1,
  .row.cols-lg-1>* {
    max-width: 8.33333%;
    flex-basis: 8.33333%
  }

  .col-lg-offset-0 {
    margin-left: 0
  }

  .col-lg-2,
  .row.cols-lg-2>* {
    max-width: 16.66667%;
    flex-basis: 16.66667%
  }

  .col-lg-offset-1 {
    margin-left: 8.33333%
  }

  .col-lg-3,
  .row.cols-lg-3>* {
    max-width: 25%;
    flex-basis: 25%
  }

  .col-lg-offset-2 {
    margin-left: 16.66667%
  }

  .col-lg-4,
  .row.cols-lg-4>* {
    max-width: 33.33333%;
    flex-basis: 33.33333%
  }

  .col-lg-offset-3 {
    margin-left: 25%
  }

  .col-lg-5,
  .row.cols-lg-5>* {
    max-width: 41.66667%;
    flex-basis: 41.66667%
  }

  .col-lg-offset-4 {
    margin-left: 33.33333%
  }

  .col-lg-6,
  .row.cols-lg-6>* {
    max-width: 50%;
    flex-basis: 50%
  }

  .col-lg-offset-5 {
    margin-left: 41.66667%
  }

  .col-lg-7,
  .row.cols-lg-7>* {
    max-width: 58.33333%;
    flex-basis: 58.33333%
  }

  .col-lg-offset-6 {
    margin-left: 50%
  }

  .col-lg-8,
  .row.cols-lg-8>* {
    max-width: 66.66667%;
    flex-basis: 66.66667%
  }

  .col-lg-offset-7 {
    margin-left: 58.33333%
  }

  .col-lg-9,
  .row.cols-lg-9>* {
    max-width: 75%;
    flex-basis: 75%
  }

  .col-lg-offset-8 {
    margin-left: 66.66667%
  }

  .col-lg-10,
  .row.cols-lg-10>* {
    max-width: 83.33333%;
    flex-basis: 83.33333%
  }

  .col-lg-offset-9 {
    margin-left: 75%
  }

  .col-lg-11,
  .row.cols-lg-11>* {
    max-width: 91.66667%;
    flex-basis: 91.66667%
  }

  .col-lg-offset-10 {
    margin-left: 83.33333%
  }

  .col-lg-12,
  .row.cols-lg-12>* {
    max-width: 100%;
    flex-basis: 100%
  }

  .col-lg-offset-11 {
    margin-left: 91.66667%
  }

  .col-lg-normal {
    order: initial
  }

  .col-lg-first {
    order: -999
  }

  .col-lg-last {
    order: 999
  }
}

:root {
  --card-back-color: #f8f8f8;
  --card-fore-color: #111;
  --card-border-color: #ddd
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: center;
  position: relative;
  width: 100%;
  background: var(--card-back-color);
  color: var(--card-fore-color);
  border: .0625rem solid var(--card-border-color);
  border-radius: var(--universal-border-radius);
  margin: var(--universal-margin);
  overflow: hidden
}

@media screen and (min-width: 320px) {
  .card {
    max-width: 320px
  }
}

.card>.section {
  background: var(--card-back-color);
  color: var(--card-fore-color);
  box-sizing: border-box;
  margin: 0;
  border: 0;
  border-radius: 0;
  border-bottom: .0625rem solid var(--card-border-color);
  padding: var(--universal-padding);
  width: 100%
}

.card>.section.media {
  height: 200px;
  padding: 0;
  -o-object-fit: cover;
  object-fit: cover
}

.card>.section:last-child {
  border-bottom: 0
}

@media screen and (min-width: 240px) {
  .card.small {
    max-width: 240px
  }
}

@media screen and (min-width: 480px) {
  .card.large {
    max-width: 480px
  }
}

.card.fluid {
  max-width: 100%;
  width: auto
}

.card.warning {
  --card-back-color: #ffca28;
  --card-border-color: #e8b825
}

.card.error {
  --card-back-color: #b71c1c;
  --card-fore-color: #f8f8f8;
  --card-border-color: #a71a1a
}

.card>.section.dark {
  --card-back-color: #e0e0e0
}

.card>.section.double-padded {
  padding: calc(1.5 * var(--universal-padding))
}

legend {
  box-sizing: border-box;
  display: table;
  max-width: 100%;
  white-space: normal;
  font-weight: 700;
  padding: calc(var(--universal-padding) / 2)
}

label {
  padding: calc(var(--universal-padding) / 2) var(--universal-padding)
}

button {
  overflow: visible;
  text-transform: none
}

:root {
  --header-back-color: #f8f8f8;
  --header-hover-back-color: #f0f0f0;
  --header-fore-color: #444;
  --header-border-color: #ddd;
  --footer-fore-color: #444;
  --footer-back-color: #f8f8f8;
  --footer-border-color: #ddd;
  --footer-link-color: #0277bd;
}

header {
  height: 2rem;
  background: var(--header-back-color);
  color: var(--header-fore-color);
  border-bottom: .0625rem solid var(--header-border-color);
  padding: calc(var(--universal-padding) / 4) 0;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden
}

header.row {
  box-sizing: content-box
}

header .logo {
  color: var(--header-fore-color);
  font-size: 1.75rem;
  padding: var(--universal-padding) calc(2 * var(--universal-padding));
  text-decoration: none
}

header button,
header [type="button"],
header .button,
header [role="button"] {
  box-sizing: border-box;
  position: relative;
  top: calc(0rem - var(--universal-padding) / 4);
  height: calc(3.1875rem + var(--universal-padding) / 2);
  background: var(--header-back-color);
  line-height: calc(3.1875rem - var(--universal-padding) * 1.5);
  text-align: center;
  color: var(--header-fore-color);
  border: 0;
  border-radius: 0;
  margin: 0;
  text-transform: uppercase
}

header button:hover,
header button:focus,
header [type="button"]:hover,
header [type="button"]:focus,
header .button:hover,
header .button:focus,
header [role="button"]:hover,
header [role="button"]:focus {
  background: var(--header-hover-back-color)
}


footer {
  background: var(--footer-back-color);
  color: var(--footer-fore-color);
  border-top: .0625rem solid var(--footer-border-color);
  padding: calc(2 * var(--universal-padding)) var(--universal-padding);
  font-size: .875rem
}

footer a,
footer a:visited {
  color: var(--footer-link-color)
}

header.sticky {
  position: -webkit-sticky;
  position: sticky;
  z-index: 1101;
  top: 0
}

footer.sticky {
  position: -webkit-sticky;
  position: sticky;
  z-index: 1101;
  bottom: 0
}

.hidden {
  display: none !important
}

.bordered {
  border: .0625rem solid var(--generic-border-color) !important
}

.rounded {
  border-radius: var(--universal-border-radius) !important
}

.circular {
  border-radius: 50% !important
}

.shadowed {
  box-shadow: var(--generic-box-shadow) !important
}

.responsive-margin {
  margin: calc(var(--universal-margin) / 4) !important
}

@media screen and (min-width: 768px) {
  .responsive-margin {
    margin: calc(var(--universal-margin) / 2) !important
  }
}

@media screen and (min-width: 1280px) {
  .responsive-margin {
    margin: var(--universal-margin) !important
  }
}

.responsive-padding {
  padding: calc(var(--universal-padding) / 4) !important
}

@media screen and (min-width: 768px) {
  .responsive-padding {
    padding: calc(var(--universal-padding) / 2) !important
  }
}

@media screen and (min-width: 1280px) {
  .responsive-padding {
    padding: var(--universal-padding) !important
  }
}

@media screen and (max-width: 767px) {
  .hidden-sm {
    display: none !important
  }
}

@media screen and (min-width: 768px) and (max-width: 1279px) {
  .hidden-md {
    display: none !important
  }
}

@media screen and (min-width: 1280px) {
  .hidden-lg {
    display: none !important
  }
}