/* ============================================================
   Google Fonts
   ============================================================ */
@import url('https://fonts.googleapis.com/css?family=Rubik:400,500');

/* ============================================================
   Font rendering
   ============================================================ */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -o-font-smoothing: antialiased;
}

/* ============================================================
   Color schemes
   ============================================================ */
.color-scheme-1 {}

.color-scheme-2 {
  --color-scheme-1--text: var(--color-scheme-2--text);
  --color-scheme-1--background: var(--color-scheme-2--background);
  --color-scheme-1--foreground: var(--color-scheme-2--foreground);
  --color-scheme-1--border: var(--color-scheme-2--border);
  --color-scheme-1--accent: var(--color-scheme-2--accent);
}

.color-scheme-3 {
  --color-scheme-1--text: var(--color-scheme-3--text);
  --color-scheme-1--background: var(--color-scheme-3--background);
  --color-scheme-1--foreground: var(--color-scheme-3--foreground);
  --color-scheme-1--border: var(--color-scheme-3--border);
  --color-scheme-1--accent: var(--color-scheme-3--accent);
}

.color-scheme-4 {
  --color-scheme-1--text: var(--color-scheme-4--text);
  --color-scheme-1--background: var(--color-scheme-4--background);
  --color-scheme-1--foreground: var(--color-scheme-4--foreground);
  --color-scheme-1--border: var(--color-scheme-4--border);
  --color-scheme-1--accent: var(--color-scheme-4--accent);
}

/* ============================================================
   Base utilities
   ============================================================ */
a {
  color: inherit;
  text-decoration: inherit;
  font-size: inherit;
}

*[tabindex]:focus-visible,
input[type="file"]:focus-visible {
  outline: 0.125rem solid #4d65ff;
  outline-offset: 0.125rem;
}

.container-medium,
.container-small,
.container-large {
  margin-right: auto !important;
  margin-left: auto !important;
}

select { -webkit-appearance: none; }

/* ============================================================
   Spacing utilities
   ============================================================ */

.margin-top { margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; }

.margin-bottom { margin-top: 0 !important; margin-right: 0 !important; margin-left: 0 !important; }
.padding-bottom { padding-top: 0 !important; padding-right: 0 !important; padding-left: 0 !important; }

.padding-vertical { padding-right: 0 !important; padding-left: 0 !important; }

/* ============================================================
   Responsive visibility
   ============================================================ */

/* ============================================================
   Embeds
   ============================================================ */
iframe { border: 0; }

/* ============================================================
   Lightbox
   ============================================================ */
.lightbox {
  cursor: auto;
  color: #fff;
  text-align: center;
  z-index: 2000;
  background: #000000e6;
  outline: 0;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.2;
  position: fixed;
  inset: 0;
}

.lightbox.is-hidden { display: none; }

.is-noscroll { overflow: hidden; }

.lightbox_container,
.lightbox_content {
  -webkit-overflow-scrolling: touch;
  height: 100%;
  overflow: auto;
}

.lightbox_content {
  height: 96vh;
  margin-top: 2vh;
  position: relative;
  overflow: hidden;
}

.lightbox_view {
  width: 100vw;
  height: 96vh;
  position: absolute;
}

.lightbox_view:before {
  content: "";
  height: 96vh;
  vertical-align: middle;
  display: inline-block;
}

.lightbox_frame {
  vertical-align: middle;
  display: inline-block;
}

.lightbox_figure { margin: 0; position: relative; }

.lightbox_image {
  float: none;
  max-width: 96vw;
  max-height: 96vh;
  display: block;
}

.lightbox_btn {
  cursor: pointer;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px;
  width: 4em;
  transition: opacity .3s;
  position: absolute;
  top: 0;
  bottom: 0;
  opacity: .5;
}

.lightbox_btn:hover { opacity: 1; }

.lightbox_prev {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yMCAwIDI0IDQwIiB3aWR0aD0iMjQiIGhlaWdodD0iNDAiPjxnIHRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHBhdGggZD0ibTAgMGg1djIzaDIzdjVoLTI4eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDN2MjNoMjN2M2gtMjZ6IiBmaWxsPSIjZmZmIi8+PC9nPjwvc3ZnPg==");
  left: 0;
}

.lightbox_next {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMjQgNDAiIHdpZHRoPSIyNCIgaGVpZ2h0PSI0MCI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMC0waDI4djI4aC01di0yM2gtMjN6IiBvcGFjaXR5PSIuNCIvPjxwYXRoIGQ9Im0xIDFoMjZ2MjZoLTN2LTIzaC0yM3oiIGZpbGw9IiNmZmYiLz48L2c+PC9zdmc+");
  right: 0;
}

.lightbox_close {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMTggMTciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxNyI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMCAwaDd2LTdoNXY3aDd2NWgtN3Y3aC01di03aC03eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDd2LTdoM3Y3aDd2M2gtN3Y3aC0zdi03aC03eiIgZmlsbD0iI2ZmZiIvPjwvZz48L3N2Zz4=");
  background-size: 18px;
  height: 2.6em;
  top: 0;
  right: 0;
  bottom: auto;
  z-index: 1;
}
