body,
html {
  margin: 0;
  padding: 0;
  font-family: "Rubik", sans-serif;
}

html {
  box-sizing: border-box;
  font-size: 100%;
}

body {
  position: relative;
  font-size: 1em;
  line-height: 1.33;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto minmax(3em, 10vh) auto auto auto;
  grid-template-areas: "h h h h h h h h h h h h" "n n n n n n n n n n n n" "m m m m m m m m m m m m" "a a a a a a a a a a a a" "f f f f f f f f f f f f";
  background-color: #f8f9fa;
  align-items: flex-start;
}
@media screen and (min-width: 36.0912255639rem) {
  body {
    font-size: 1.33em;
    line-height: 1.33;
  }
}
body > header {
  grid-area: h;
}
body > main {
  grid-area: m;
}
body > aside {
  grid-area: a;
}
body > footer {
  grid-area: f;
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  align-content: center;
  padding: 2.352637em 1em;
  text-align: center;
  background-color: #ffffff;
  height: 100%;
  box-shadow: 0 1em 5em -2em rgba(5, 4, 46, 0.25);
}
body > footer p:last-child {
  margin-top: 2em;
}

::-moz-selection {
  background-color: #ff9514;
  color: #321d04;
  text-shadow: none;
}

::selection {
  background-color: #ff9514;
  color: #321d04;
  text-shadow: none;
}

a {
  transition-property: color;
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  color: #393f47;
  text-decoration: none;
}
@media screen and (min-width: 57.7453609023rem) {
  a:after {
    transition-property: width;
    transition-duration: 500ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    content: " ";
    z-index: 1;
    position: absolute;
    bottom: -0.1em;
    right: 0;
    width: 0;
    height: 2px;
    background-color: #393f47;
  }
  a:focus, a:hover {
    color: #ff9514;
  }
  a:focus:after, a:hover:after {
    left: 0;
    right: auto;
    width: 100%;
  }
  a.button:after, a.link:after {
    content: none;
    display: none;
  }
}

/* -------------------- Utility klasser - start -------------------- */
.clearfix:before, .clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}

.layout-xs, .layout-s, .layout-m,
.layout-l, .layout-xl, .layout-xxl {
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.layout-xs {
  max-width: 18.045112782rem;
}

.layout-s {
  max-width: 36.0902255639rem;
}

.layout-m {
  max-width: 57.7443609023rem;
}

.layout-l {
  max-width: 76.992481203rem;
}

.layout-xl {
  max-width: 102.7067669173rem;
}

.layout-xxl {
  max-width: 144.3609022556rem;
}

/* -------------------- Utility klasser - slutt -------------------- */
/* -------------------- Typography - start -------------------- */
h1, h2,
h3, h4,
h5 {
  font-weight: 700;
  font-family: "Butler", "Playfair Display", serif;
  color: #17191d;
  word-wrap: break-word;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

h1 {
  font-size: 3.12900721em;
  line-height: 1;
  margin-top: 0.7518796992em;
  margin-bottom: 0.5653230821em;
}

h2 {
  font-size: 2.352637em;
  line-height: 1;
  margin-top: 0.7518796992em;
  margin-bottom: 0.5653230821em;
}

h3 {
  font-size: 1.7689em;
  line-height: 1;
  margin-top: 0.7518796992em;
  margin-bottom: 0.5653230821em;
}

h4 {
  font-size: 1.33em;
  line-height: 1;
  margin-top: 0.7518796992em;
  margin-bottom: 0.5653230821em;
}

h5 {
  font-size: 1em;
  line-height: 1;
  margin-top: 0.7518796992em;
  margin-bottom: 0.5653230821em;
}

h6 {
  font-size: 1em;
  line-height: 1;
  margin-top: 0.7518796992em;
  margin-bottom: 0.5653230821em;
}

h1 + h2,
h2 + h3,
h3 + h4,
h4 + h5 {
  margin-top: 0;
}

h5 + p, h6 + p {
  margin-top: 0.7518796992em;
}

h6 {
  font-family: "Butler", "Playfair Display", serif;
  font-weight: 300;
  color: #17191d;
}

p {
  margin-top: 0;
  margin-bottom: 1em;
}

pre,
code {
  font-family: "Roboto Mono", monospace;
  font-size: 0.9em;
}

pre {
  max-width: 100%;
  overflow: auto;
  padding: 1em;
  white-space: pre-wrap;
  color: #14ff95;
  background-color: #17191d;
}

code {
  transition-property: color, background-color;
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0.1em 0.2em;
  background-color: #abb3bd;
}
code:hover {
  color: #14ff95;
  background-color: #17191d;
}

.read-wide {
  max-width: 55.3490085377em;
}

.read, body.article-page main > article > section .wrapper figure,
body.article-page main > article > section .wrapper > img, body.article-page main > article > section p {
  max-width: 31.2900721em;
}

.read-narrow {
  max-width: 17.689em;
}

.icon {
  vertical-align: middle;
  width: 1em;
  height: 1em;
  line-height: 1em;
}
.icon + span {
  vertical-align: middle;
}
.icon:first-child {
  margin: 0 0.5653230821em 0 0;
}
.icon:last-child {
  margin: 0 0 0 0.5653230821em;
}
.icon:first-child:last-child {
  margin: 0;
}

/* -------------------- Typography - slutt -------------------- */
/* -------------------- Media - start -------------------- */
img.round {
  border-radius: 100%;
}

/* -------------------- Media - slutt -------------------- */
/* -------------------- Buttons - start -------------------- */
button,
[type=button],
[type=reset],
[type=submit],
.button {
  display: inline-block;
  margin: 0;
  padding: 0.5653230821em 0.7518796992em;
  width: auto;
  text-decoration: none;
  color: #393f47;
  background-color: #f8f9fa;
  border: 2px solid #393f47;
  transition-property: color, background-color, transform;
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transform: scale(1);
}
button:focus, button:hover,
[type=button]:focus,
[type=button]:hover,
[type=reset]:focus,
[type=reset]:hover,
[type=submit]:focus,
[type=submit]:hover,
.button:focus,
.button:hover {
  outline: none;
  color: #f8f9fa;
  background-color: #393f47;
  transform: scale(1.1);
}
button:active,
[type=button]:active,
[type=reset]:active,
[type=submit]:active,
.button:active {
  transition-property: transform;
  transition-duration: 50ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transform: scale(1);
}
button.button-filled,
[type=button].button-filled,
[type=reset].button-filled,
[type=submit].button-filled,
.button.button-filled {
  color: #f8f9fa;
  background-color: #393f47;
}
button.button-filled:focus, button.button-filled:hover,
[type=button].button-filled:focus,
[type=button].button-filled:hover,
[type=reset].button-filled:focus,
[type=reset].button-filled:hover,
[type=submit].button-filled:focus,
[type=submit].button-filled:hover,
.button.button-filled:focus,
.button.button-filled:hover {
  color: #f8f9fa;
  background-color: #393f47;
}

/* -------------------- Buttons - slutt -------------------- */
/* -------------------- Navigation - start -------------------- */
body > nav {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 4;
  grid-area: n;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  background-color: #ffffff;
  padding: 0 1em;
}
body > nav .brand,
body > nav .links,
body > nav .menu-trigger {
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
  align-items: center;
}
body > nav .brand a {
  width: 2em;
  height: 2em;
}
body > nav .brand img {
  height: 100%;
  width: auto;
}
body > nav .links {
  flex-grow: 1;
}
body > nav .links a {
  padding: 0 0.7518796992em;
  text-decoration: none;
}
body > nav .links a:first-child {
  margin-left: auto;
}
@media screen and (max-width: 36.0902255639rem) {
  body > nav .links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    background-color: #ffffff;
    z-index: 5;
    padding: 1em;
    height: auto;
    max-height: 90vh;
    overflow-y: auto;
    width: 100%;
    box-shadow: 0 2em 4em -2em rgba(5, 4, 46, 0.25);
  }
  body > nav .links a {
    padding: 0.7518796992em 1em;
    margin: 0;
  }
  body > nav .links a:first-child {
    margin: 0;
  }
  body > nav .links.menu-show {
    display: flex;
  }
}
@media screen and (min-width: 36.0912255639rem) {
  body > nav .menu-trigger {
    display: none;
  }
}
body > nav .menu-trigger button {
  border: none;
  background-color: transparent;
  padding: 0;
  width: 2em;
  height: 2em;
}
body > nav .menu-trigger button .icon {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
}
body > nav .menu-trigger button .icon.close {
  display: none;
}
body > nav .menu-trigger.active button img.open {
  display: none;
}
body > nav .menu-trigger.active button img.close {
  display: block;
}

/* -------------------- Navigation - slutt -------------------- */
/* -------------------- Frontpage - start -------------------- */
@media screen and (min-width: 57.7453609023rem) {
  #fp {
    grid-template-areas: "h h h h h h h h h h h h" "n n n n n n n n n n n n" "m m m m m m m m m a a a" "f f f f f f f f f f f f";
    grid-template-rows: 80vh minmax(3em, 10vh) auto 50vh;
  }
}
#fp > header {
  display: flex;
  height: 100%;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  align-content: flex-start;
  color: #3d4d5a;
  padding: 1.33em 0 0 0;
  background-color: #93a7b6;
}
@media screen and (min-width: 57.7453609023rem) {
  #fp > header {
    padding: 1.33em 0;
  }
}
#fp > header > figure,
#fp > header > section {
  width: 100%;
  flex-grow: 1;
  padding: 1em;
}
@media screen and (min-width: 57.7453609023rem) {
  #fp > header > figure,
  #fp > header > section {
    width: 50%;
  }
}
#fp > header > figure {
  height: 50vw;
  overflow: hidden;
  padding: 0 1.33em;
}
@media screen and (max-width: 57.7443609023rem) {
  #fp > header > figure {
    max-height: 50vh;
  }
}
@media screen and (min-width: 57.7453609023rem) {
  #fp > header > figure {
    height: 100%;
  }
}
@media screen and (min-width: 57.7453609023rem) {
  #fp > header > section {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    padding: 0 0 20vh;
    align-self: center;
  }
}
#fp > header > section h1 {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
  color: #32404b;
}
#fp > header > section .button {
  color: #eef1f4;
  border-color: #475a69;
  background-color: #475a69;
}
@media screen and (min-width: 57.7453609023rem) {
  #fp > nav {
    width: 75%;
  }
}
#fp > main {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 1em 0 2.352637em;
}
#fp > main > article {
  transition-property: all;
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
  padding: 1em;
  margin: 0 0 1em 0;
  background-color: #f8f9fa;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
}
@media screen and (min-width: 36.0912255639rem) and (max-width: 57.7443609023rem) {
  #fp > main > article {
    width: 50%;
  }
}
@media screen and (min-width: 57.7453609023rem) {
  #fp > main > article {
    width: 33.3333333333%;
  }
}
#fp > main > article img {
  border: 1px solid rgba(171, 179, 189, 0.25);
}
#fp > main > article h2 {
  transition-property: all;
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 0.5653230821em;
}
#fp > main > article p {
  margin: 0;
  padding: 0 0 1em 0;
}
#fp > main > article .button {
  transition-property: all;
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  margin: 0;
}
#fp > main > article:hover {
  color: #f8f9fa;
  background-color: #393f47;
}
#fp > main > article:hover h2 {
  color: #f8f9fa;
}
#fp > main > article:hover .button {
  color: #f8f9fa;
  border-color: #f8f9fa;
  background-color: #393f47;
}
#fp > main > article:hover .button:focus, #fp > main > article:hover .button:hover {
  color: #393f47;
  background-color: #f8f9fa;
}
#fp > aside {
  position: relative;
  padding: 1.33em 1.33em;
  background-color: #ffffff;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  align-content: center;
}
#fp > aside .links, #fp > aside .buttons {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  align-content: center;
}
#fp > aside .links h3 {
  margin-top: 0;
}
#fp > aside .links ul {
  list-style-type: disc;
  list-style-position: outside;
  padding-left: 1em;
  margin: 0;
}
#fp > aside .links ul li {
  margin-top: 0.425054949em;
}
#fp > aside .buttons {
  align-items: center;
}
#fp > aside .buttons p {
  margin-top: 1em;
  margin-bottom: 0.2em;
}
@media screen and (min-width: 57.7453609023rem) {
  #fp > aside {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    margin-top: -30vh;
    margin-bottom: 50vh;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
  }
}

#button-youtube,
#button-google {
  border: none;
  border-radius: 5px;
  padding: 0.25em 1em 0.25em 0.25em;
  box-shadow: 0 0.2em 0.5em -0.25em rgba(5, 4, 46, 0.25);
}
#button-youtube span,
#button-google span {
  padding: 0.425054949em 0 0.425054949em;
}
#button-youtube img,
#button-google img {
  border-radius: 5px;
  width: 1.5em;
  height: 1.5em;
  background-color: #fff;
}

#button-google {
  transition-property: all;
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  color: #fff;
  background-color: #4485F2;
  box-shadow: 0 0.5em 1em -0.5em rgba(68, 133, 242, 0.5);
}
#button-google:focus, #button-google:hover {
  box-shadow: 0 0.5em 1.5em -0.5em rgba(68, 133, 242, 0.75);
}
#button-google:active {
  box-shadow: 0 0.5em 1em -0.5em rgba(68, 133, 242, 0.5);
}
#button-google img {
  padding: 0.25em;
}

#button-youtube {
  transition-property: all;
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  color: #fff;
  background-color: #FF0000;
  box-shadow: 0 0.5em 1em -0.5em rgba(255, 0, 0, 0.5);
}
#button-youtube:focus, #button-youtube:hover {
  box-shadow: 0 0.5em 1.5em -0.5em rgba(255, 0, 0, 0.75);
}
#button-youtube:active {
  box-shadow: 0 0.5em 1em -0.5em rgba(255, 0, 0, 0.5);
}
#button-youtube img {
  padding: 0;
}

#modal-yt-video {
  display: none;
  position: fixed;
  cursor: pointer;
  transform: translateY(-50%);
  top: 50%;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 10;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  justify-content: space-between;
  align-content: center;
  align-items: center;
  text-align: center;
}
#modal-yt-video iframe {
  display: block;
  margin: auto;
  min-width: 80vw;
  min-height: 40vh;
}
@media screen and (min-width: 57.7453609023rem) {
  #modal-yt-video iframe {
    min-width: 65vw;
    min-height: 75vh;
  }
}

/* -------------------- Frontpage - slutt -------------------- */
/* -------------------- Articles - start -------------------- */
body.article-page {
  overflow-x: hidden;
}
body.article-page main > article > header > section,
body.article-page main > article > section {
  margin-left: auto;
  margin-right: auto;
}
body.article-page main > article > header figcaption {
  margin-left: auto;
  margin-right: auto;
  max-width: 57.7443609023rem;
}
body.article-page main > article > header > section {
  padding: 2.352637em 0.7518796992em;
  width: 100%;
  max-width: 57.7443609023rem;
}
body.article-page main > article > header > section h1 {
  margin-top: 0;
}
body.article-page main > article > header > section .author {
  display: flex;
  justify-content: flex-start;
  align-content: center;
  align-items: center;
  color: #7d8a99;
  margin-top: 1.33em;
}
body.article-page main > article > header > section .author a,
body.article-page main > article > header > section .author span,
body.article-page main > article > header > section .author img {
  margin-right: 0.5653230821em;
}
body.article-page main > article > header > section .author img {
  width: 2.352637em;
  height: 2.352637em;
  border-radius: 100%;
  border: 1px solid #7d8a99;
}
body.article-page main > article figure img,
body.article-page main > article figure figcaption {
  width: 100%;
}
body.article-page main > article figure figcaption {
  color: #7d8a99;
  padding: 0.7518796992em 0.7518796992em 1em;
}
@media screen and (min-width: 57.7453609023rem) {
  body.article-page main > article figure figcaption {
    padding: 0.7518796992em 0 1em;
  }
}
body.article-page main > article table,
body.article-page main > article .split {
  margin-top: 1.7689em;
  margin-left: auto;
  margin-right: auto;
  max-width: 76.992481203rem;
}
body.article-page main > article table + .wrapper,
body.article-page main > article .split + .wrapper {
  margin-top: 1.7689em;
}
body.article-page main > article a {
  border-bottom: 2px solid #ff9514;
}
body.article-page main > article table {
  width: 100%;
}
body.article-page main > article table thead,
body.article-page main > article table tbody {
  width: 100%;
}
body.article-page main > article table thead th,
body.article-page main > article table tbody td {
  text-align: left;
  padding: 0.5653230821em;
  border-right: 3px solid #ced3d9;
}
body.article-page main > article table thead th:last-child,
body.article-page main > article table tbody td:last-child {
  border-right: 0;
}
body.article-page main > article table thead tr {
  background-color: #dde1e5;
  border-bottom: 3px solid #ced3d9;
}
body.article-page main > article table tbody tr:nth-child(odd) {
  background-color: #ebedef;
}
body.article-page main > article table tbody tr:nth-child(even) {
  background-color: #dde1e5;
}
body.article-page main > article > section {
  padding: 0 0.7518796992em;
}
body.article-page main > article > section h1, body.article-page main > article > section h2, body.article-page main > article > section h3 h4,
body.article-page main > article > section h5, body.article-page main > article > section h6,
body.article-page main > article > section .wrapper {
  margin-left: auto;
  margin-right: auto;
  max-width: 57.7443609023rem;
}
body.article-page main > article > section h1 p:last-child, body.article-page main > article > section h2 p:last-child, body.article-page main > article > section h3 h4 p:last-child,
body.article-page main > article > section h5 p:last-child, body.article-page main > article > section h6 p:last-child,
body.article-page main > article > section .wrapper p:last-child {
  margin-bottom: 0;
}
body.article-page main > article > section .wrapper figure.full-width,
body.article-page main > article > section .wrapper > img.full-width {
  max-width: 100%;
}
body.article-page main > article .split {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}
body.article-page main > article .split figure,
body.article-page main > article .split > img {
  width: 100%;
  margin-bottom: 1em;
}
@media screen and (min-width: 57.7453609023rem) {
  body.article-page main > article .split figure,
  body.article-page main > article .split > img {
    width: 55%;
    margin-bottom: 0;
  }
}
body.article-page main > article .split > p,
body.article-page main > article .split .text {
  width: 100%;
}
@media screen and (min-width: 57.7453609023rem) {
  body.article-page main > article .split > p,
  body.article-page main > article .split .text {
    padding-left: 1.7689em;
    width: 45%;
  }
}
body.article-page main > article .split.reverse {
  flex-direction: row-reverse;
}
body.article-page main > article .split.reverse > p,
body.article-page main > article .split.reverse .text {
  padding-left: 0;
  padding-right: 1.7689em;
}
body.article-page > footer {
  margin-top: 2.352637em;
}

/* -------------------- Articles - slutt -------------------- */
/* -------------------- About - start -------------------- */
#about article > section:last-child {
  padding-top: 1.7689em;
}
#about article img, #about article p, #about article h1, #about article h2 {
  max-width: 57.7443609023rem;
  margin-left: auto;
  margin-right: auto;
}
#about article h2 {
  margin-top: 0.5em;
}
#about article img {
  margin-top: 1.7689em;
  display: block;
  width: 20em;
}
#about article .split {
  align-items: center;
  align-content: center;
}

/* -------------------- About - slutt -------------------- */
/* -------------------- Error pages - start -------------------- */
body.error-page main {
  text-align: center;
}

/* -------------------- Error pages - slutt -------------------- */