@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;1,300&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap");
:root {
  --bg1: #b0d2bf;
  --bg2: #bfe9d1;
  --bg3: #a2c3b1;
  --bg-contrast: #f97825;
  --max-content-width: 60em;
  --x-padding: 1em;
}
:root .theme2 {
  --bg1: #d2b0b0;
  --bg2: #f1c6c6;
  --bg3: #bda0a0;
}
:root .theme3 {
  --bg1: #cbd0b0;
  --bg2: #e7e8c0;
  --bg3: #bbc0a1;
}
:root .theme4 {
  --bg1: #b0cad2;
  --bg2: #c5deea;
  --bg3: #a8b7c5;
}
@media all and (min-width: 46em) {
  :root {
    --x-padding: 2em;
  }
}
@media all and (min-width: 62em) {
  :root {
    --x-padding: 3em;
  }
}

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

html {
  font-size: 100%;
}

body {
  font-family: "Open Sans", sans-serif;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
}

figcaption {
  font-size: 0.8em;
  font-style: normal;
  font-weight: 400;
  margin-top: 0.25em;
}
.nof-leksjon__intro figcaption, .nof-leksjon__leksjonsdel figcaption, .nof-side__innhold figcaption {
  font-size: 1em;
  margin-top: 0;
}
.nof-vis-bilde__bilde--kompositt figcaption {
  margin-top: -0.5em;
  width: 100%;
}

.caption-text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
}

/* ---- Language Switcher -------------------- */
.nof-language-switcher {
  border-bottom: 2px solid #333;
  border-radius: 4px;
}

.nof-language-switcher__dropdown.open {
  display: block !important;
}

.nof-language-switcher.dropdown-open {
  border-bottom: none;
  border-radius: 4px 4px 0 0;
}

.nof-language-switcher.dropdown-open .nof-language-switcher__button {
  border-bottom: none;
  border-radius: 4px 4px 0 0;
}

.nof-language-switcher__label {
  display: none;
}
@media all and (min-width: 46em) {
  .nof-language-switcher__label {
    display: inline;
  }
}

.nof__header {
  align-items: center;
  background-color: var(--bg1);
  display: flex;
  gap: 1em;
  padding: 1em var(--x-padding);
  position: relative;
}
.nof__header img {
  max-height: 70px;
  max-width: 100%;
}

.nof--header__inner--frontpage {
  align-items: center;
  display: flex;
  justify-content: space-between;
  max-width: calc(var(--max-content-width) + 9em);
  margin: 0 auto;
  padding-right: 0.5em;
  position: relative;
  width: 100%;
  gap: 0.5em;
}

.nof-frontpage__header-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-left: auto;
}

.nof-header__slogan {
  display: none;
}
@media all and (min-width: 32em) {
  .nof-header__slogan {
    display: block;
    margin: 0 0.5em;
  }
}
.nof-header__slogan p {
  font-size: 1.5em;
  font-weight: 600;
  line-height: 1.1;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
}

footer {
  margin-top: auto;
  min-height: 10em;
  text-decoration: none;
  line-height: 2em;
}

.nof-footer-container {
  background-color: #000;
  color: #fff;
  padding: 2em var(--x-padding);
}

.nof-footer-madeby {
  background-color: #454545;
  color: #fff;
  padding: 0.5em 1em;
  text-align: center;
}
.nof-footer-madeby p {
  margin: 0;
}

.nof-footer__inner {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: var(--max-content-width);
}
@media all and (min-width: 32em) {
  .nof-footer__inner {
    align-items: center;
    flex-direction: row;
  }
}
.nof-footer__inner a {
  color: inherit;
  text-decoration: none;
}
.nof-footer__inner a:hover {
  text-decoration: underline;
}
.nof-footer-container .nof-footer__inner {
  justify-content: space-between;
}
.nof-footer-madeby .nof-footer__inner {
  justify-content: center;
}

p {
  margin: 0 0 1em;
  min-height: 1.3em;
}
.nof-leksjon__intro p, .nof-leksjon__leksjonsdel p, .nof-side__innhold p {
  font-size: 1.25em;
  font-weight: 300;
}

.nof-leksjon__intro li, .nof-leksjon__leksjonsdel li, .nof-side__innhold li {
  font-size: 1.25em;
  font-weight: 300;
}

figure {
  margin: 0 0 1em;
}
figure img {
  border: 1px solid #000;
  display: block;
  width: 100%;
}

.nof-button {
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 4px;
  color: #000;
}
.nof-button:hover, .nof-button:focus-visible {
  background-color: var(--bg2);
  background-image: none;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5);
}
.nof-button:focus-visible {
  outline: 2px solid royalblue;
}

.nof-button--leksjon {
  position: relative;
  z-index: 1;
}
.nof-button--leksjon::before {
  border-bottom: 1.25em solid rgba(253, 121, 0, 0.6);
  border-right: 3.5em solid transparent;
  border-left: 3.5em solid rgba(253, 121, 0, 0.6);
  border-top: 1.2em solid transparent;
  border-radius: 4px;
  bottom: 0;
  content: "";
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

.nof-button--meny {
  background-color: #000;
  color: #fff;
  padding: 0.5em;
  border: 1px solid #000;
  border-radius: 4px;
}
.nof-button--meny:hover, .nof-button--meny:focus-visible {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5);
  color: var(--bg2);
}
.nof-button--meny svg {
  stroke: currentColor;
}

.nof-frontpage-medaljer {
  display: none;
  background-color: var(--bg1);
  padding: 0.5em var(--x-padding) 0.75em;
  position: relative;
  z-index: 1;
  background-color: #ACCAB8;
  padding-bottom: 0;
  padding-top: 0;
}
.nof-frontpage-medaljer.open {
  display: block;
}
.nof-frontpage-medaljer .nof-leksjon__medaljer {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1em 0;
}

.nof-frontpage-medaljer__inner {
  align-items: center;
  display: flex;
  justify-content: space-between;
  max-width: calc(var(--max-content-width) + 9em);
  margin: 0 auto;
  padding-right: 0.5em;
  position: relative;
  width: 100%;
  gap: 0.5em;
}

.nof-container--hamburgermeny {
  display: none;
  position: absolute;
  top: 3em;
  right: 1em;
  box-shadow: 0px 4px 4px 2px rgba(0, 0, 0, 0.25);
  background-color: var(--bg1);
  width: 20em;
  padding: 2em;
  z-index: 2;
}
.nof--header__inner--frontpage .nof-container--hamburgermeny {
  top: 4em;
}
.nof-container--hamburgermeny.open {
  display: block;
}
.nof-container--hamburgermeny ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.nof-menypunkt {
  margin: 0.5em 0;
  padding: 0.1em 0;
  width: 100%;
}
.nof-menypunkt.nof-menypunkt--active {
  background-color: #000;
  border-radius: 2em;
  color: #fff;
  padding: 0.1em 0.75em;
  margin-left: -0.75em;
  margin-right: -0.75em;
  width: calc(100% + 1.5em);
}
.nof-menypunkt a {
  color: inherit;
  text-decoration: none;
}
.nof-menypunkt a:hover {
  text-decoration: underline;
}

.nof-frontpage {
  background-color: var(--bg1);
}

.nof-frontpage__head {
  background-image: url("/assets/frontpage-header-bg.png");
  background-position: center center;
  padding: 2em var(--x-padding);
  position: relative;
}
.nof-frontpage__head::before {
  background-color: rgba(255, 255, 255, 0.7);
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.nof-frontpage-head__inner {
  background-color: #fff;
  border-radius: 15px;
  padding: 1.5em 1em;
  word-break: break-word;
}
@media all and (min-width: 32em) {
  .nof-frontpage-head__inner {
    margin-left: 7em;
  }
}
.nof-frontpage-head__inner h1 {
  line-height: 1.1;
  margin: 0 0 0.25em;
}
.nof-frontpage-head__inner p {
  margin: 0;
}

.nof-frontpage__level {
  background-color: var(--bg1);
  padding: 1em var(--x-padding);
}
@media all and (min-width: 32em) {
  .nof-frontpage__level .nof-content-container {
    align-items: center;
    display: flex;
    gap: 1em;
  }
}
.nof-frontpage__level .nof-frontpage__lessonlist {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  overflow-x: hidden;
}
@media all and (min-width: 32em) {
  .nof-frontpage__level .nof-frontpage__lessonlist {
    overflow-x: unset;
  }
}

@media all and (min-width: 32em) {
  .nof-level__heading {
    align-items: center;
    display: flex;
    flex: 0 0 6em;
  }
}
.nof-level__heading a {
  background-color: #000;
  border-radius: 15px;
  color: #fff;
  display: block;
  font-size: 1em;
  font-weight: 600;
  height: 1.5em;
  line-height: 1;
  margin: 0 0 1em 0;
  padding: 0.25em 0.5em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  width: 5em;
}
.nof-level__heading a:hover, .nof-level__heading a:focus-visible {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  color: var(--bg2);
}
.nof-level__heading a h2 {
  font-size: inherit;
  margin: 0;
}

.nof-frontpage__mapsymbols {
  display: flex;
  gap: 1em;
  padding: 1em 0;
}

.nof-frontpage__mapfinish, .nof-frontpage__mapstart, .nof-frontpage__mapcircle {
  background-color: transparent;
  height: 4em;
  margin-left: 2em;
  margin-right: 2em;
  position: relative;
  width: 4em;
}

.nof-frontpage__mapcircle {
  border: 3px solid #fb0000;
  border-radius: 2em;
}
.nof-frontpage__mapcircle.bigscreen {
  display: none;
}
@media all and (min-width: 46em) {
  .nof-frontpage__mapcircle.bigscreen {
    display: block;
  }
}
.nof-frontpage__mapcircle::before {
  background-color: #fb0000;
  content: "";
  display: block;
  height: 3px;
  position: absolute;
  top: calc(2em - 3px);
  width: 3.5em;
}
.nof-frontpage__start .nof-frontpage__mapcircle::before {
  left: -4.5em;
}
.nof-frontpage__finish .nof-frontpage__mapcircle::before {
  right: -4.5em;
}

.nof-frontpage__mapstart svg {
  max-width: 100%;
  max-height: 100%;
}

.nof-frontpage__mapfinish {
  border: 3px solid #fb0000;
  align-items: center;
  border-radius: 2em;
  display: flex;
  justify-content: center;
}
.nof-frontpage__mapfinish > div {
  background-color: transparent;
  border: 3px solid #fb0000;
  border-radius: 2em;
  height: 3em;
  width: 3em;
}

.nof-content-container {
  display: block;
  margin: 0 auto;
  max-width: var(--max-content-width);
  position: relative;
  width: 100%;
}
.nof-content-container h2,
.nof-content-container h3,
.nof-content-container h4,
.nof-content-container h5,
.nof-content-container h6 {
  font-weight: 400;
  margin: 2em 0 0.3em;
}
.nof-content-container h2:first-child,
.nof-content-container h3:first-child,
.nof-content-container h4:first-child,
.nof-content-container h5:first-child,
.nof-content-container h6:first-child {
  margin-top: 0;
}
.nof-leksjon__header .nof-content-container {
  margin: 0;
}
@media all and (min-width: 32em) {
  .nof-leksjonsdel--aktivitetstips .nof-content-container, .nof-leksjonsdel--tips .nof-content-container {
    padding-left: 12em;
    position: relative;
  }
}
.nof-content-container .nof-leksjonsdel--animasjon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.nof-content-container .nof-leksjonsdel--animasjon iframe {
  display: inline-block;
}
.nof-ildprove__heading .nof-content-container {
  align-items: baseline;
  display: flex;
  flex-direction: row-reverse;
  gap: 1em;
  justify-content: flex-end;
}
@media all and (min-width: 32em) {
  .nof-ildprove__heading .nof-content-container {
    display: block;
    position: relative;
  }
}

.nof-leksjon__intro h2,
.nof-leksjon__leksjonsdel h2,
.nof-side__innhold h2 {
  font-size: 2em;
}
.nof-leksjon__intro h3,
.nof-leksjon__leksjonsdel h3,
.nof-side__innhold h3 {
  font-size: 1.5em;
}

.nof-content-container__space {
  display: flex;
  gap: 1em;
  justify-content: space-between;
}

.nof-leksjon__header {
  align-items: center;
  background-color: var(--bg1);
  display: flex;
  gap: 1em;
  margin-bottom: 2em;
  padding: 1em var(--x-padding);
  position: relative;
}
.nof-leksjon__header h1 {
  margin: 0.3em 0;
}

.nof-leksjon__logo {
  margin-left: auto;
}
.nof-leksjon__logo img {
  height: 3.5em;
  width: 3.5em;
}

.nof-leksjon__menu {
  margin-right: auto;
  width: 3.5em;
  position: relative;
}

.nof-leksjon__header-nav {
  bottom: -1.9em;
  display: none;
  font-size: 0.8em;
  gap: 0.25em;
  position: absolute;
}
@media all and (min-width: 32em) {
  .nof-leksjon__header-nav {
    display: flex;
  }
}
@media all and (min-width: 46em) {
  .nof-leksjon__header-nav {
    bottom: -1.5em;
    font-size: 1em;
  }
}
@media all and (min-width: 62em) {
  .nof-leksjon__header-nav {
    gap: 0.5em;
  }
}

.nof-header-nav__link {
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 1em;
  color: #000;
  display: flex;
  font-size: 0.8em;
  justify-content: center;
  width: 2.5em;
  padding: 0 0.5em;
  text-align: center;
  text-decoration: none;
}
.nof-header-nav__link--active {
  background-color: #000;
  color: #fff;
}
@media all and (min-width: 46em) {
  .nof-header-nav__link--active {
    width: auto;
  }
}
.nof-header-nav__link--active .link-text {
  display: none;
}
@media all and (min-width: 46em) {
  .nof-header-nav__link--active .link-text {
    display: inline;
  }
}
.nof-header-nav__link:not(.nof-header-nav__link--active):hover, .nof-header-nav__link:not(.nof-header-nav__link--active):focus-visible {
  background-color: var(--bg2);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5);
  color: #000;
}

.nof-header-nav__title {
  margin-left: 1em;
}

.nof-nav-link__dots {
  align-items: center;
  display: flex;
  gap: 0.5em;
}

.nof-nav-link__dot {
  background-color: #000;
  border: 1px solid #000;
  border-radius: 50%;
  height: 0.5em;
  width: 0.5em;
}

.nof-leksjon-container {
  list-style: none;
  padding: 0 0 6em;
  position: relative;
}
.nof-leksjon-container li {
  display: contents;
}

.nof-leksjon-link {
  align-items: center;
  background-color: var(--bg3);
  border-radius: 15px;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 8em;
  list-style: none;
  padding: 1em 0.5em;
  position: relative;
  text-align: center;
  text-decoration: none;
  width: 8em;
}
.nof-leksjon-link:hover, .nof-leksjon-link:focus-visible {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.nof-leksjon-link.nof-leksjon-link--img {
  padding: 0.5em;
}
.nof-leksjon-link img {
  max-width: 100%;
  max-height: 5.5em;
}

.background-svg-1 {
  display: none;
  height: 13em;
  left: 2.5em;
  position: absolute;
  width: calc(100% - 5em);
}
@media all and (min-width: 46em) {
  .background-svg-1 {
    display: block;
  }
}

.nof-leksjon__nummer {
  align-items: center;
  background-color: #fff;
  border: 2px solid #000;
  display: flex;
  font-size: 1.5em;
  flex: 0 0 2em;
  height: 2em;
  justify-content: center;
  margin-bottom: 6px;
  position: relative;
  width: 2em;
  z-index: 1;
}
.nof-leksjon__nummer::before {
  border-bottom: calc(1em - 2px) solid rgba(253, 121, 0, 0.75);
  border-right: calc(1em - 2px) solid transparent;
  border-left: calc(1em - 2px) solid rgba(253, 121, 0, 0.75);
  border-top: calc(1em - 2px) solid transparent;
  bottom: 0;
  content: "";
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}
.nof-leksjon__intro .nof-leksjon__nummer {
  font-size: 3em;
}

.nof-leksjon-link__tittel {
  padding: 2px;
  line-height: 1.25;
}

.nof-leksjonsdel--aktivitetstips {
  background-color: var(--bg1);
}

@media all and (min-width: 32em) {
  .nof-leksjonsdel--tips,
  .nof-leksjonsdel--aktivitetstips {
    min-height: 14em;
  }
}
@media all and (min-width: 32em) {
  .nof-leksjonsdel--tips.bg1, .nof-leksjonsdel--tips.bg2, .nof-leksjonsdel--tips.bg3, .nof-leksjonsdel--tips.bg4, .nof-leksjonsdel--tips.bg5,
  .nof-leksjonsdel--aktivitetstips.bg1,
  .nof-leksjonsdel--aktivitetstips.bg2,
  .nof-leksjonsdel--aktivitetstips.bg3,
  .nof-leksjonsdel--aktivitetstips.bg4,
  .nof-leksjonsdel--aktivitetstips.bg5 {
    min-height: 18em;
  }
}
@media all and (min-width: 46em) {
  .nof-leksjonsdel--tips.bg1, .nof-leksjonsdel--tips.bg2, .nof-leksjonsdel--tips.bg3, .nof-leksjonsdel--tips.bg4, .nof-leksjonsdel--tips.bg5,
  .nof-leksjonsdel--aktivitetstips.bg1,
  .nof-leksjonsdel--aktivitetstips.bg2,
  .nof-leksjonsdel--aktivitetstips.bg3,
  .nof-leksjonsdel--aktivitetstips.bg4,
  .nof-leksjonsdel--aktivitetstips.bg5 {
    min-height: 21em;
  }
}

.nof-aktivitetstips__illustrasjon,
.nof-tips__illustrasjon {
  align-items: center;
  background-color: #000;
  border-radius: 50%;
  display: flex;
  height: 3em;
  justify-content: center;
  width: 3em;
}
@media all and (min-width: 32em) {
  .nof-aktivitetstips__illustrasjon,
  .nof-tips__illustrasjon {
    height: 10em;
    left: 0;
    position: absolute;
    top: 0;
    width: 10em;
  }
}
.nof-aktivitetstips__illustrasjon img,
.nof-tips__illustrasjon img {
  max-width: 90%;
  max-height: 90%;
}

.nof-aktivitetstips__heading,
.nof-tips__heading {
  align-items: center;
  display: flex;
  gap: 1em;
  margin-bottom: 0.5em;
}
@media all and (min-width: 32em) {
  .nof-aktivitetstips__heading,
  .nof-tips__heading {
    display: block;
  }
}
.nof-aktivitetstips__heading h2,
.nof-tips__heading h2 {
  font-size: 1.5em;
  font-weight: 300;
  margin: 0;
  text-transform: uppercase;
}
@media all and (min-width: 32em) {
  .nof-aktivitetstips__heading h2,
  .nof-tips__heading h2 {
    font-size: 2em;
  }
}

.nof-leksjon__leksjonsdel.nof-leksjon__ildprove {
  padding-top: 0;
  padding-bottom: 0;
}

.nof-ildprove__heading {
  background-color: var(--bg-contrast);
  margin-left: calc(var(--x-padding) * -1);
  margin-right: calc(var(--x-padding) * -1);
  padding: 1em var(--x-padding);
}
.nof-ildprove__heading h2 {
  font-size: 1.5em;
  font-weight: 300;
  margin: 0;
  text-transform: uppercase;
}
@media all and (min-width: 32em) {
  .nof-ildprove__heading h2 {
    font-size: 2em;
  }
}
.nof-ildprove__heading p {
  font-size: 1.125em;
  margin: 0 0 0.25em;
}

.nof-ildprove__telleverk {
  align-items: center;
  border: 2px solid #000;
  border-radius: 50%;
  display: flex;
  flex: 0 0 3em;
  height: 3em;
  justify-content: center;
  width: 3em;
}
@media all and (min-width: 32em) {
  .nof-ildprove__telleverk {
    background-color: var(--bg-contrast);
    border-color: var(--bg-contrast);
    height: 10em;
    left: 0;
    position: absolute;
    top: 8.25em;
    width: 10em;
  }
  .nof-ildprove__telleverk span {
    font-size: 3em;
  }
}

.nof-ildprove__oppgaver {
  padding: 3em 0;
}
@media all and (min-width: 32em) {
  .nof-ildprove__oppgaver {
    padding-left: 12em;
  }
}

.nof-ildprove__oppsummering {
  display: block;
  margin-bottom: 1em;
}
.nof-ildprove__oppsummering h3 {
  margin-top: 0;
  margin-bottom: 0.5em;
}
.nof-ildprove__oppsummering p {
  margin: 0;
}

.nof-ildprove__knapper {
  display: flex;
  gap: 1em;
  min-height: 2.5em;
}

.nof-side__innhold {
  padding: 2em var(--x-padding);
  width: 100%;
}

.nof-leksjon__intro {
  padding: 4em var(--x-padding) 2em;
}
.nof-leksjon__intro .nof-leksjonintro__inner {
  border: 1px solid #000;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 1em;
  margin: 0 auto;
  padding: 1.5em;
}
@media all and (min-width: 32em) {
  .nof-leksjon__intro .nof-leksjonintro__inner {
    align-items: center;
    flex-direction: row;
    gap: 2em;
  }
}
@media all and (min-width: 46em) {
  .nof-leksjon__intro .nof-leksjonintro__inner {
    max-width: 66.66667%;
  }
}
.nof-leksjon__intro h2,
.nof-leksjon__intro p {
  margin: 0;
}

.nof-leksjonintro-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.nof-leksjonintro-liste li {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

.nof-leksjonintro-liste .nof-leksjon__intro {
  padding: 1em var(--x-padding);
}

.nof-leksjon__leksjonsdel {
  padding: 6em var(--x-padding);
  position: relative;
  width: 100%;
  z-index: 1;
}
.nof-leksjon__leksjonsdel.noBg {
  background-color: #fff;
}
.nof-leksjon__leksjonsdel.noBg + .noBg {
  padding-top: 0;
}
.nof-leksjon__leksjonsdel.bg1, .nof-leksjon__leksjonsdel.bg2, .nof-leksjon__leksjonsdel.bg3, .nof-leksjon__leksjonsdel.bg4, .nof-leksjon__leksjonsdel.bg5 {
  background-color: var(--bg1);
  padding-top: 4em;
  padding-bottom: 2em;
}
@media all and (min-width: 32em) {
  .nof-leksjon__leksjonsdel.bg1, .nof-leksjon__leksjonsdel.bg2, .nof-leksjon__leksjonsdel.bg3, .nof-leksjon__leksjonsdel.bg4, .nof-leksjon__leksjonsdel.bg5 {
    padding-top: 6em;
  }
}
@media all and (min-width: 62em) {
  .nof-leksjon__leksjonsdel.bg1, .nof-leksjon__leksjonsdel.bg2, .nof-leksjon__leksjonsdel.bg3, .nof-leksjon__leksjonsdel.bg4, .nof-leksjon__leksjonsdel.bg5 {
    padding-top: 9em;
  }
}
.nof-leksjon__leksjonsdel.nof-leksjonsdel--aktivitetstips {
  padding-top: 2.5em;
  padding-bottom: 2.5em;
}
.nof-leksjon__leksjonsdel:first-of-type {
  padding-top: 3em;
}
.nof-leksjon__leksjonsdel:after {
  clear: both;
  content: "";
  display: table;
}

.nof-leksjonsdel__svg {
  position: absolute;
  overflow-x: hidden;
  left: 0;
  right: 0;
  top: -1px;
}

.nof-leksjonsdel__bildegruppe {
  align-items: flex-start;
  clear: both;
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  margin-bottom: 1em;
}
.nof-leksjonsdel__bildegruppe figure {
  margin: 0;
}

.nof-leksjonsdel__bilde--full {
  width: 100%;
}

@media all and (min-width: 32em) {
  .nof-leksjonsdel__bilde--halv {
    width: calc(50% - 0.5em);
  }
}

@media all and (min-width: 32em) {
  .nof-leksjonsdel__bilde--tredel {
    width: calc(33.33333% - 0.66666667em);
  }
}

@media all and (min-width: 32em) {
  .nof-leksjonsdel__bilde--venstre {
    float: left;
    margin-right: 1em;
  }
}

@media all and (min-width: 32em) {
  .nof-leksjonsdel__bilde--hoyre {
    float: right;
    margin-left: 1em;
  }
}

.nof-svg--section-bg {
  pointer-events: none;
  position: relative;
  left: calc((100vw - 44em) / 2);
  top: 0;
  z-index: -1;
  max-height: 100%;
  width: 44em;
}
@media all and (min-width: 32em) {
  .nof-svg--section-bg {
    left: calc((100vw - 90em) / 2);
    width: 90em;
  }
}
@media all and (min-width: 80em) {
  .nof-svg--section-bg {
    left: 0;
    width: 100%;
  }
}

/* ---- Ekspanderbar tekst ----------------------- */
.nof-ei {
  border: 2px solid var(--bg1);
  border-radius: 4px;
  clear: both;
  margin: 1em 0 2em;
  padding: 0;
}

.nof-ei__tekst {
  padding: 1.5em 1.5em 0;
}

.nof-ei__ekspander {
  position: relative;
  clear: both;
}

.nof-ei__tittel {
  appearance: none;
  cursor: pointer;
  list-style: none;
  position: relative;
  bottom: -1em;
  text-align: center;
}
.nof-ei__tittel > span {
  display: inline-block;
  background-color: #000;
  border-radius: 2em;
  color: #fff;
  line-height: 1;
  padding: 0.5em 0.75em;
}
.nof-ei__tittel .skjul {
  display: none;
}
[open] .nof-ei__tittel {
  position: absolute;
  bottom: -1em;
  left: 0;
  right: 0;
}
[open] .nof-ei__tittel .vis {
  display: none;
}
[open] .nof-ei__tittel .skjul {
  display: inline;
}
.nof-ei__tittel::-webkit-details-marker {
  display: none;
}
.nof-ei__tittel:hover > span, .nof-ei__tittel:focus-visible > span {
  color: var(--bg2);
  box-shadow: 0 2px 8px 2px rgba(0, 0, 0, 0.5);
}

.nof-ei__ekspanderbar-tekst {
  padding: 1.5em;
}
.nof-ei__ekspanderbar-tekst:after {
  content: "";
  display: table;
  clear: both;
}

/* ---- Bildeslider ----------------------- */
.nof-slider {
  position: relative;
  --position: 50%;
  box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.2);
  clear: both;
  margin: 1em 0;
}
@media (max-width: 768px) {
  .nof-slider {
    box-shadow: none;
  }
}

.nof-slider__bilder {
  aspect-ratio: var(--aspect-ratio, 3.07/1);
  overflow: hidden;
  border: 1px solid black;
}

.nof-slider__bilde {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left;
}

.nof-slider__bilde--1 {
  position: absolute;
  inset: 0;
  width: var(--position);
  border: 1px solid black;
}

.nof-slider__slider {
  position: absolute;
  inset: 0;
  cursor: pointer;
  opacity: 0;
  width: 100%;
  height: 100%;
}

.nof-slider__slider:focus-visible ~ .nof-slider__knapp {
  outline: 2px solid darkblue;
  outline-offset: 3px;
}

.nof-slider__slider:hover ~ .nof-slider__knapp {
  box-shadow: 0 1px 8px 2px rgba(0, 0, 0, 0.5);
  color: var(--bg2);
}

.nof-slider__linje {
  position: absolute;
  inset: 0;
  width: 0.2rem;
  height: 100%;
  background-color: black;
  left: var(--position);
  transform: translateX(-50%);
  pointer-events: none;
}

.nof-slider__knapp {
  position: absolute;
  background-color: black;
  color: white;
  padding: 0.5rem;
  border-radius: 100vw;
  display: grid;
  place-items: center;
  top: 50%;
  left: var(--position);
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-shadow: 1px 1px 1px rgba(8, 3, 3, 0.5);
  width: 3rem;
  height: 3rem;
}

/* ---- Fargeforklaring og Karttegn ------------ */
.nof-vis-bilde {
  display: flex;
  flex-flow: column;
  gap: 1em;
  clear: both;
  padding: 1em 0;
}
@media all and (min-width: 46em) {
  .nof-vis-bilde {
    flex-flow: row;
    height: auto;
    margin: 1em 0;
  }
  .nof-vis-bilde.singel {
    flex-flow: column;
  }
}

.nof-vis-bilde-teller {
  flex: 0 0 3em;
  height: 3em;
  border-radius: 50%;
  border: 1px solid black;
  line-height: 3em;
  text-align: center;
}

.nof-vis-bilde__knapper {
  align-content: flex-start;
  display: flex;
  flex-flow: row wrap;
  flex: 0 0 0;
  gap: 1em;
}
@media all and (min-width: 46em) {
  .nof-vis-bilde--karttegn .nof-vis-bilde__knapper {
    flex-basis: 7em;
  }
  .nof-vis-bilde--farger .nof-vis-bilde__knapper {
    flex-basis: 16em;
  }
}

.nof-vis-bilde__knapp {
  align-items: center;
  border: 1px solid gray;
  border-radius: 4px;
  background-color: #fff;
  color: #000;
  display: flex;
  height: 3em;
  justify-content: center;
  padding: 0.25em;
  width: 3em;
}
.nof-vis-bilde__knapp.knapp--active {
  border: 2px solid #000;
}
.nof-vis-bilde__knapp.knapp--tekst {
  width: 100%;
}
.nof-vis-bilde__knapp.knapp--singel {
  background-color: #000;
  color: #fff;
  width: 5em;
}
.nof-vis-bilde__knapp.knapp--black {
  background-color: #000;
  color: #fff;
}
.nof-vis-bilde__knapp.knapp--blue {
  background-color: #00a3e0;
}
.nof-vis-bilde__knapp.knapp--yellow {
  background-color: #ffbf3f;
}
.nof-vis-bilde__knapp.knapp--green {
  background-color: #43b02a;
}
.nof-vis-bilde__knapp.knapp--brown {
  background-color: #b86125;
}
.nof-vis-bilde__knapp:hover, .nof-vis-bilde__knapp:focus-visible {
  background-color: var(--bg2);
  color: #000;
}
.nof-vis-bilde__knapp img {
  height: auto;
  max-height: 100%;
  max-width: 100%;
  width: auto;
}

.nof-vis-bilde__bilder {
  flex: 0 1 auto;
}
.nof-vis-bilde__bilder .nof-vis-bilde__bilde--kompositt {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 1em;
}
.nof-vis-bilde__bilder .nof-vis-bilde__bilde {
  max-width: 100%;
  max-height: 100%;
  margin: 0;
}
.nof-vis-bilde__bilder .nof-vis-bilde__bilde.hidden {
  display: none;
}
@media all and (min-width: 32em) {
  .nof-vis-bilde__bilder .nof-vis-bilde__parbilde {
    max-width: calc(50% - 0.5em);
  }
}

.nof-leksjon__footer {
  background-color: #000;
  padding: 1em;
}

.nof-leksjon__medaljer {
  align-items: center;
  display: flex;
  gap: 0.25em;
}
@media all and (min-width: 62em) {
  .nof-leksjon__medaljer {
    gap: 0.5em;
  }
}

.nof-leksjon__medaljer--panel .nof-medalje {
  display: block;
}

.nof-medalje {
  display: none;
  position: relative;
  text-decoration: none;
  z-index: 1;
}
.nof-medalje.nof-medalje--aktiv {
  display: block;
}
.nof-medalje.nof-medalje--aktiv:not(.gull, .fullfort) .nof-medalje__medaljong {
  background-color: #000;
  color: #fff;
}
.nof-medalje.nof-medalje--aktiv.gull .nof-medalje__medaljong, .nof-medalje.nof-medalje--aktiv.fullfort .nof-medalje__medaljong {
  border-width: 3px;
}
@media all and (min-width: 46em) {
  .nof-medalje {
    display: block;
  }
}

.nof-medalje--toggle {
  appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  display: block;
  position: relative;
}
.nof-medalje--toggle:hover .nof-medalje__medaljong, .nof-medalje--toggle:focus-visible .nof-medalje__medaljong {
  background-color: var(--bg2);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5);
  color: #000;
}
.nof-medalje--toggle:focus-visible {
  outline: 2px solid royalblue;
  outline-offset: 2px;
  border-radius: 4px;
}
.nof-medalje--toggle {
  display: block;
}
.nof-medalje--toggle .nof-medalje__flagg {
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -35px;
  width: 42px;
  height: 40px;
  border-bottom: none;
  z-index: -1;
}
.nof-medalje--toggle .nof-medalje__medaljong {
  background-color: #cdac00;
  border: 2px solid #000;
  color: #000;
  font-weight: 500;
  font-size: 0.75em;
  height: 3.5em;
  width: 3.5em;
  position: relative;
  z-index: 1;
}
@media all and (min-width: 62em) {
  .nof-medalje--toggle .nof-medalje__medaljong {
    height: 3.5em;
    width: 3.5em;
  }
}

.nof-medalje__flagg {
  display: none;
  height: 2em;
  position: absolute;
  top: -1.25em;
  width: 2em;
  z-index: -1;
}
.gull .nof-medalje__flagg {
  display: block;
}
@media all and (min-width: 62em) {
  .nof-medalje__flagg {
    height: auto;
    top: -1em;
    width: auto;
  }
}

.nof-medalje__medaljong {
  align-items: center;
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 50%;
  display: flex;
  height: 2em;
  justify-content: center;
  width: 2em;
}
.gull .nof-medalje__medaljong {
  background-color: #cdac00;
}
.fullfort .nof-medalje__medaljong {
  background-color: #fb0000;
}
@media all and (min-width: 62em) {
  .nof-medalje__medaljong {
    height: 2.5em;
    width: 2.5em;
  }
}
a:hover .nof-medalje__medaljong, a:focus-visible .nof-medalje__medaljong {
  background-color: var(--bg2);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5);
  color: #000;
}

.nof-leksjon__footerknapper {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: 1em;
  height: 2.5em;
}

/* ---- Oppgaver -------------------- */
.nof-flervalg-tekst {
  display: flex;
  flex-direction: column;
  gap: 1em;
}
@media all and (min-width: 46em) {
  .nof-flervalg-tekst {
    flex-direction: row;
  }
}
.nof-flervalg-tekst h3 {
  margin: 1 0 1em;
}

.nof-flervalg-tekst__oppgavebilde {
  flex: 0 1 55%;
}

.nof-leksjon .pure-radio {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: 1.25em;
  font-weight: 300;
  gap: 0.5em;
}
.nof-leksjon .pure-radio input[type=radio] {
  flex: 0 0 1em;
  height: 1em;
  width: 1em;
  accent-color: #000;
}

.nof-flervalg-bilde__intro {
  display: flex;
  flex-direction: column;
  gap: 1em;
}
@media all and (min-width: 46em) {
  .nof-flervalg-bilde__intro {
    flex-direction: row;
  }
}

@media all and (min-width: 46em) {
  .nof-flervalg-bilde__oppgavebilde {
    max-width: 55%;
  }
}
.nof-flervalg-bilde__oppgavebilde img {
  max-height: 70vh;
  width: auto;
}

.nof-flervalg-bilde__svaralternativer {
  display: flex;
  flex-direction: column;
  gap: 1em;
}
@media all and (min-width: 46em) {
  .nof-flervalg-bilde__svaralternativer {
    flex-direction: row;
  }
}
.nof-flervalg-bilde__svaralternativer > div {
  flex: 1 1 calc(25% - 1em);
}

.nof-flervalg-bilde__svar {
  display: block;
  position: relative;
}
.nof-flervalg-bilde__svar figure {
  border: 4px solid transparent;
  margin: 0;
  border-radius: 4px;
  cursor: pointer;
}
.nof-flervalg-bilde__svar figure img {
  border-radius: inherit;
}
.nof-flervalg-bilde__svar input[type=radio] {
  accent-color: #000;
  cursor: pointer;
  height: 1em;
  left: 0.5em;
  position: absolute;
  top: 0.5em;
  width: 1em;
}
.nof-flervalg-bilde__svar input[type=radio]:checked + figure {
  border-color: #000;
}
.nof-flervalg-bilde__svar input[type=radio]:checked + figure img {
  border-radius: 0;
}

.nof-flervalg-tekst .nof-valg--feil, .nof-flervalg-tekst .nof-valg--riktig {
  background-color: #fff;
  background-position: center right 0.2em;
  background-repeat: no-repeat;
  background-size: 0.75em;
  border: 2px solid #000;
  border-radius: 4px;
  padding-right: 1.5em;
  padding-left: 0.5em;
  margin-left: calc(-0.5em - 2px);
}

.nof-flervalg-bilde .nof-valg--feil:after, .nof-flervalg-bilde .nof-valg--riktig:after {
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0.75em;
  border-radius: 50%;
  content: "";
  display: block;
  height: 1.5em;
  position: absolute;
  right: 1em;
  top: 1em;
  width: 1.5em;
}

.nof-flervalg-tekst .nof-valg--riktig {
  border-color: #5aa606;
  background-image: url(/assets/icon-correct.svg);
}
.nof-flervalg-bilde .nof-valg--riktig {
  border: 4px solid #5aa606;
  border-radius: 4px;
  position: relative;
  background-image: url(/assets/icon-correct.svg);
}
.nof-flervalg-bilde .nof-valg--riktig figure {
  border: none;
}
.nof-flervalg-bilde .nof-valg--riktig:after {
  background-image: url(/assets/icon-correct.svg);
}

.nof-flervalg-tekst .nof-valg--feil {
  border-color: #fb0000;
  background-image: url(/assets/icon-wrong.svg);
}
.nof-flervalg-bilde .nof-valg--feil {
  border: 4px solid #fb0000;
  border-radius: 4px;
  position: relative;
}
.nof-flervalg-bilde .nof-valg--feil figure {
  border: none;
}
.nof-flervalg-bilde .nof-valg--feil:after {
  background-image: url(/assets/icon-wrong.svg);
}

.nof-leksjonsdel__animasjon {
  position: relative;
}
.nof-leksjonsdel__animasjon iframe {
  height: 100%;
  position: absolute;
  top: 0;
}

.nof-animasjon--default {
  padding-top: 850px;
}

.nof-animasjon--kapplop {
  padding-top: calc(67% + 4em);
}

.nof-animasjon--kompass {
  padding-top: calc(67% + 25em);
}
@media all and (min-width: 32em) {
  .nof-animasjon--kompass {
    padding-top: calc(67% + 20em);
  }
}
@media all and (min-width: 46em) {
  .nof-animasjon--kompass {
    padding-top: calc(67% + 16em);
  }
}

.nof-animasjon--kart {
  padding-top: calc(67% + 12em);
}

.nof-medaljeoversikt {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  padding: 2em 0;
}

.medaljeoversikt .nof-medaljeoversikt {
  row-gap: 2em;
}
.medaljeoversikt .nof-medalje {
  display: block;
}

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