.prototype-video {
  width: 100%; }

.campaign-video {
  height: 60vh; }

*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit; }

html {
  box-sizing: border-box;
  font-size: 62.5%;
  scroll-behavior: smooth; }
  @media only screen and (max-width: 80em) {
    html {
      font-size: 50%; } }
  @media only screen and (min-width: 112.5em) {
    html {
      font-size: 75%; } }

body {
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  color: #2d2d2d;
  width: 100vw;
  overflow-x: hidden; }

.header__title {
  color: #fdfdfd;
  font-size: 7rem; }
  @media only screen and (max-width: 27.5em) {
    .header__title {
      font-size: 8rem; } }
  .header__title--modus {
    font-family: "Poppins", sans-serif;
    text-transform: uppercase;
    font-weight: 600; }
  .header__title--jeghardeg {
    font-family: "Merriweather", serif; }
    @media only screen and (max-width: 27.5em) {
      .header__title--jeghardeg {
        font-size: 6rem; } }
  .header__title--smertebert {
    font-family: "Chewy"; }
  .header__title--skattejaget {
    font-family: "Bangers", cursive; }

.heading-primary {
  font-family: "Fjalla One", sans-serif;
  font-size: 3.75rem;
  text-transform: uppercase; }
  .heading-primary--index {
    font-family: "Fjalla One", sans-serif;
    font-size: 6rem;
    color: #9280f4;
    margin-bottom: 2rem;
    text-transform: none; }
  .heading-primary--aboutme {
    color: #9280f4;
    text-align: center;
    border-bottom: 2px solid #9280f4; }
  .heading-primary--modus {
    color: #4f4cee; }
  .heading-primary--jeghardeg {
    color: #b32739; }
  .heading-primary--smertebert {
    color: #428177; }
  .heading-primary--skattejaget {
    color: #2f2f2f; }

.heading-secondary {
  font-family: "Fjalla One", sans-serif;
  font-size: 2.8rem;
  text-transform: uppercase; }
  .heading-secondary--modus {
    color: #3533a8;
    border-top: 2px solid #3533a8;
    border-bottom: 2px solid #3533a8; }
  .heading-secondary--jeghardeg {
    color: #123b77;
    border-top: 2px solid #123b77;
    border-bottom: 2px solid #123b77; }
  .heading-secondary--smertebert {
    color: #87bab2;
    border-top: 2px solid #87bab2;
    border-bottom: 2px solid #87bab2; }
  .heading-secondary--skattejaget {
    color: #12cdd4;
    border-top: 2px solid #12cdd4;
    border-bottom: 2px solid #12cdd4; }

.heading-tertiary {
  font-family: "Fjalla One", sans-serif;
  font-size: 2.2rem; }
  @media only screen and (max-width: 50em) {
    .heading-tertiary--modus {
      font-size: 1rem; } }

.heading-quaternary {
  font-family: "Fjalla One", sans-serif;
  font-size: 2rem; }
  .heading-quaternary--modus {
    color: #4f4cee; }
    .heading-quaternary--modus--usertests {
      color: #4f4cee; }
      @media only screen and (max-width: 50em) {
        .heading-quaternary--modus--usertests {
          font-size: .8rem; } }
  .heading-quaternary--jeghardeg {
    color: #b32739; }
  .heading-quaternary--smertebert {
    color: #428177; }
  .heading-quaternary--skattejaget {
    color: #12cdd4; }

.paragraph {
  font-size: 1.8rem; }
  @media only screen and (max-width: 50em) {
    .paragraph {
      font-size: 2rem; } }
  .paragraph__index {
    font-size: 2.5rem; }
  .paragraph__aboutme {
    font-weight: 600;
    color: #9280f4; }
  .paragraph__modus {
    font-size: 1.8rem; }
    @media only screen and (max-width: 50em) {
      .paragraph__modus {
        font-size: 1rem; } }
  .paragraph__smertebert {
    font-size: 1.5rem;
    font-family: "Fjalla One", sans-serif; }
  .paragraph__bold {
    font-weight: 600; }

.footer__paragraph {
  font-size: 1.8rem;
  color: white; }
  @media only screen and (max-width: 50em) {
    .footer__paragraph {
      font-size: 1.5rem; } }
  .footer__paragraph--index {
    color: #9280f4; }

.title {
  font-family: "Poppins", sans-serif;
  font-size: 7rem;
  color: #fdfdfd;
  text-transform: uppercase;
  font-weight: 600; }

a {
  color: #2d2d2d;
  text-decoration: none;
  font-size: 1.8rem;
  font-weight: 500; }

.nav__links {
  font-family: "Fjalla One", sans-serif;
  text-decoration: none;
  font-size: 1.5rem; }
  .nav__links--index {
    color: #9280f4; }
  .nav__links--projects {
    color: #fdfdfd; }

.nav__links--index:hover {
  border-bottom: 2px solid #9280f4; }

.nav__links--projects:hover {
  border-bottom: 2px solid #fdfdfd; }

.concept-name {
  font-family: 'Merriweather', sans-serif;
  color: #b32739;
  font-weight: 600; }

.color-modus {
  color: #4f4cee; }

.margin-top-xlarge {
  margin-top: 20rem; }

.margin-top-large {
  margin-top: 11.25rem; }

.margin-top-medium {
  margin-top: 6.25rem; }

.margin-top-small {
  margin-top: 3.12rem; }

.margin-bottom-large {
  margin-bottom: 4.37rem; }

.margin-bottom-medium {
  margin-bottom: 3.12rem; }
  .margin-bottom-medium--modus {
    margin-bottom: 3.12rem; }
    @media only screen and (max-width: 50em) {
      .margin-bottom-medium--modus {
        margin-bottom: 1rem; } }

.margin-bottom-small {
  margin-bottom: 1.5rem; }

.image-front {
  max-width: 20rem; }
  @media only screen and (max-width: 27.5em) {
    .image-front {
      margin-top: 10rem;
      max-width: 15rem; } }
  .image-front--large {
    max-width: 40rem; }
    @media only screen and (max-width: 27.5em) {
      .image-front--large {
        margin-top: 10rem;
        max-width: 30rem; } }

.image-fullsize {
  width: 100%; }

.image-large {
  max-width: 45rem; }
  @media only screen and (max-width: 80em) {
    .image-large {
      max-width: 40rem; } }
  @media only screen and (max-width: 50em) {
    .image-large {
      max-width: 20rem;
      min-width: 100%; } }

.image-medium {
  max-width: 30rem; }
  @media only screen and (max-width: 62.5em) {
    .image-medium {
      max-width: 25rem; } }
  @media only screen and (max-width: 50em) {
    .image-medium {
      min-width: 100%; } }

.image-small {
  max-width: 20rem; }
  @media only screen and (max-width: 62.5em) {
    .image-small {
      min-width: 100%; } }
  @media only screen and (max-width: 50em) {
    .image-small {
      max-width: 15rem; } }

.image-height {
  height: 7rem; }
  @media only screen and (max-width: 27.5em) {
    .image-height {
      height: 5rem; } }

.image-modus-medium {
  width: 30rem; }
  @media only screen and (max-width: 50em) {
    .image-modus-medium {
      max-width: 20rem; } }

.image-modus-small {
  max-width: 30rem; }
  @media only screen and (max-width: 80em) {
    .image-modus-small {
      max-width: 20rem; } }
  @media only screen and (max-width: 50em) {
    .image-modus-small {
      max-width: 15rem;
      min-width: 100%; } }

.footer {
  display: grid;
  align-items: center;
  height: 40vh;
  text-align: center;
  padding: 5rem 20rem 5rem 20rem; }
  @media only screen and (max-width: 50em) {
    .footer {
      height: 35vh;
      padding: 2rem 5rem 2rem 5rem; } }
  .footer__index {
    background-color: #fdfdfd; }
  .footer__aboutme {
    background-color: #9280f4; }
  .footer__modus {
    background-color: #4f4cee; }
  .footer__jeghardeg {
    background-color: #123b77; }
  .footer__smertebert {
    background-color: #87bab2; }
  .footer__skattejaget {
    background-color: #2f2f2f; }
  .footer__icons--image {
    width: 10rem;
    padding: 0 1rem 0 1rem; }

.image-grid-6col {
  display: grid;
  grid-template-columns: repeat(6, min-content);
  justify-content: space-between; }
  @media only screen and (max-width: 50em) {
    .image-grid-6col {
      grid-template-columns: repeat(3, min-content);
      grid-template-rows: repeat(2, min-content);
      gap: 1.5rem; } }

.image-grid-4col {
  display: grid;
  grid-template-columns: repeat(4, min-content);
  justify-content: space-between;
  gap: 1.5rem; }
  @media only screen and (max-width: 50em) {
    .image-grid-4col {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, min-content); } }

.image-grid-3col {
  display: grid;
  grid-template-columns: repeat(3, min-content);
  justify-content: space-between; }
  @media only screen and (max-width: 50em) {
    .image-grid-3col {
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: repeat(3, min-content);
      gap: 1.5rem; } }

.image-grid-2col {
  display: grid;
  grid-template-columns: repeat(2, min-content);
  justify-content: space-between; }
  @media only screen and (max-width: 50em) {
    .image-grid-2col {
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: repeat(2, 1fr);
      gap: 1.5rem; } }

.grid-2col1row {
  display: grid;
  grid-template-columns: 1fr min-content;
  gap: 2rem;
  justify-content: space-between;
  align-items: center; }
  @media only screen and (max-width: 50em) {
    .grid-2col1row {
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: repeat(2, min-content);
      align-items: inherit;
      gap: 1.5rem; } }
  .grid-2col1row--textbox {
    width: 50rem; }
    @media only screen and (max-width: 50em) {
      .grid-2col1row--textbox {
        width: auto; } }
    @media only screen and (min-width: 112.5em) {
      .grid-2col1row--textbox {
        min-width: 65rem; } }
  .grid-2col1row--modus {
    grid-template-columns: repeat(2, 1fr); }
    @media only screen and (max-width: 50em) {
      .grid-2col1row--modus {
        align-items: center; } }
    @media only screen and (max-width: 27.5em) {
      .grid-2col1row--modus {
        gap: 1.5rem; } }

.header {
  height: 100vh;
  padding: 0 20rem 0 20rem; }
  @media only screen and (max-width: 62.5em) {
    .header {
      padding: 0 10rem 0 10rem; } }
  @media only screen and (max-width: 50em) {
    .header {
      padding: 0 5rem 0 5rem; } }
  @media only screen and (max-width: 27.5em) {
    .header {
      padding: 0 2rem 0 2rem; } }
  .header__index {
    background-color: #fdfdfd;
    position: relative; }
    .header__index__container {
      display: grid; }
      @media only screen and (max-width: 62.5em) {
        .header__index__container {
          place-items: center; } }
      .header__index__container--textbox {
        margin-top: 15rem;
        max-width: 55rem; }
        @media only screen and (max-width: 62.5em) {
          .header__index__container--textbox {
            place-items: center;
            margin-top: 10rem;
            max-width: 65rem;
            text-align: center; } }
        @media only screen and (max-width: 27.5em) {
          .header__index__container--textbox {
            margin-top: 5rem; } }
        @media only screen and (min-width: 112.5em) {
          .header__index__container--textbox {
            min-width: 70rem; } }
      .header__index__container--illu {
        max-height: 65rem;
        position: absolute;
        bottom: 0;
        right: 20rem; }
        @media only screen and (max-width: 62.5em) {
          .header__index__container--illu {
            place-items: center;
            max-height: 55rem;
            right: 30rem; } }
        @media only screen and (max-width: 50em) {
          .header__index__container--illu {
            max-height: 45rem;
            right: 10rem; } }
        @media only screen and (max-width: 27.5em) {
          .header__index__container--illu {
            max-height: 40rem;
            right: 5rem; } }
  .header__aboutme {
    height: 5rem; }
  .header__modus {
    background-color: #4f4cee; }
  .header__jeghardeg {
    background-color: #123b77; }
  .header__smertebert {
    background-image: url(../assets/img/bg-smertebert.png); }
  .header__skattejaget {
    background-color: #2f2f2f; }
  .header__projects {
    display: grid;
    place-items: center;
    gap: 2rem; }
    .header__projects--modus {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 2rem; }
      .header__projects--modus--image {
        width: 20rem; }
    .header__projects--jeghardeg {
      width: 70rem; }
    .header__projects--smertebert {
      width: 40rem; }

.nav {
  padding-top: 2rem; }
  .nav__ul {
    display: flex;
    list-style: none;
    gap: 5rem;
    align-items: center; }
    @media only screen and (max-width: 50em) {
      .nav__ul {
        gap: 3rem; } }
    .nav__ul--li--logo {
      height: 5rem;
      margin-right: auto; }
      @media only screen and (max-width: 50em) {
        .nav__ul--li--logo {
          height: 4rem; } }

li:first-child {
  margin-right: auto; }

.nav-modus {
  background-color: #4f4cee; }

.nav-jeghardeg {
  background-color: #123b77; }

.ref-container {
  display: grid;
  position: relative;
  place-items: center; }
  .ref-container__slides {
    display: none; }
    .ref-container__slides--box {
      display: flex;
      min-width: 40rem;
      flex-direction: row;
      place-items: center;
      text-align: center;
      gap: 5rem;
      padding: 0 10rem 0 10rem; }
      @media only screen and (max-width: 50em) {
        .ref-container__slides--box {
          flex-direction: column;
          max-width: 60rem;
          gap: 3rem; } }
      @media only screen and (max-width: 27.5em) {
        .ref-container__slides--box {
          min-width: 20rem;
          padding: 0 5rem 0 5rem; } }
      .ref-container__slides--box--fig {
        min-width: 20rem; }
        .ref-container__slides--box--fig--image {
          max-width: 10rem; }
        .ref-container__slides--box--fig--name {
          font-size: 1.5rem; }
        .ref-container__slides--box--fig--title {
          font-size: 1.2rem; }
      .ref-container__slides--box--quote {
        font-size: 1.5rem; }
  .ref-container__arrow {
    width: 2rem; }
  .ref-container__dots {
    display: grid;
    grid-auto-flow: column;
    max-width: 10rem;
    gap: 3rem;
    place-items: center; }
    .ref-container__dots--refdot {
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
      background-color: #C7BEF9; }

.slideshow-container__dots--dot:hover {
  background-color: #9280f4; }
  @media only screen and (max-width: 62.5em) {
    .slideshow-container__dots--dot:hover {
      background-color: none; } }

.ref-active {
  background-color: #9280f4; }

.slideshow-container {
  display: grid;
  position: relative;
  margin: 0 auto;
  place-items: center; }
  .slideshow-container__slides {
    display: none; }
    .slideshow-container__slides--box {
      display: grid;
      grid-template-columns: min-content 1fr;
      grid-template-rows: min-content min-content;
      gap: 5rem;
      place-items: center;
      margin: 0 auto; }
      @media only screen and (max-width: 50em) {
        .slideshow-container__slides--box {
          grid-template-columns: min-content;
          justify-content: center; } }
      .slideshow-container__slides--box--media--modus {
        max-width: 30rem; }
        @media only screen and (max-width: 50em) {
          .slideshow-container__slides--box--media--modus {
            max-width: 20rem; } }
      .slideshow-container__slides--box--text {
        max-width: 45rem;
        padding: 3rem; }
        @media only screen and (max-width: 50em) {
          .slideshow-container__slides--box--text {
            min-width: 35rem;
            text-align: center;
            padding: 0; } }
  .slideshow-container__arrow {
    width: 2rem; }
  .slideshow-container__dots {
    display: grid;
    grid-auto-flow: column;
    width: 15rem;
    place-items: center; }
    .slideshow-container__dots--dot {
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
      background-color: #3533a8; }

.slideshow-container__dots--dot:hover {
  background-color: #4f4cee; }
  @media only screen and (max-width: 50em) {
    .slideshow-container__dots--dot:hover {
      background-color: none; } }

.active {
  background-color: #4f4cee; }

.prev,
.next {
  cursor: pointer;
  position: absolute;
  width: auto; }

.prev {
  position: absolute;
  left: 0; }

.next {
  position: absolute;
  right: 0; }

.ads-container {
  display: grid;
  position: relative;
  margin: 0 auto;
  place-items: center; }
  .ads-container__ads {
    display: none; }
    .ads-container__ads--box {
      display: grid;
      grid-template-columns: min-content min-content;
      grid-template-rows: min-content min-content;
      place-items: center;
      margin: 0 auto; }
      @media only screen and (max-width: 50em) {
        .ads-container__ads--box {
          grid-template-columns: min-content;
          justify-content: center; } }
      .ads-container__ads--box--media--jeghardeg {
        max-width: 60rem; }
        @media only screen and (max-width: 50em) {
          .ads-container__ads--box--media--jeghardeg {
            width: 40rem; } }
        @media only screen and (max-width: 27.5em) {
          .ads-container__ads--box--media--jeghardeg {
            width: 25rem; } }
  .ads-container__arrow {
    width: 2rem; }
  .ads-container__dots {
    display: grid;
    grid-auto-flow: column;
    width: 15rem;
    place-items: center; }
    .ads-container__dots--jeghardeg-dot {
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
      background-color: #123b77; }

.ads-container__dots--jeghardeg-dot:hover {
  background-color: #b32739; }

.jeghardeg-active {
  background-color: #b32739; }

.prev,
.next {
  cursor: pointer;
  position: absolute;
  width: auto; }

.prev {
  position: absolute;
  left: 0; }

.next {
  position: absolute;
  right: 0; }

.aboutme {
  padding: 0 20rem 0 20rem; }
  @media only screen and (max-width: 62.5em) {
    .aboutme {
      padding: 0 10rem 0 10rem; } }
  @media only screen and (max-width: 50em) {
    .aboutme {
      padding: 0 5rem 0 5rem; } }
  @media only screen and (max-width: 27.5em) {
    .aboutme {
      padding: 0 2rem 0 2rem; } }

.projects-container {
  background-color: #9280f4;
  padding: 5rem 20rem 5rem 20rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-content: space-between;
  gap: 2rem;
  font-family: "Fjalla One", sans-serif;
  text-align: center; }
  @media only screen and (max-width: 62.5em) {
    .projects-container {
      padding: 5rem 10rem 5rem 10rem; } }
  @media only screen and (max-width: 50em) {
    .projects-container {
      padding: 5rem;
      grid-template-columns: repeat(1, 1fr); } }
  @media only screen and (max-width: 27.5em) {
    .projects-container {
      padding: 2rem; } }
  .projects-container__projectbox {
    max-width: 100rem;
    padding: 2rem;
    background-color: rgba(253, 253, 253, 0.5);
    border-radius: 1rem; }
    @media only screen and (max-width: 50em) {
      .projects-container__projectbox {
        min-width: 100%; } }
    .projects-container__projectbox--link {
      color: #fdfdfd;
      text-decoration: none; }
    .projects-container__projectbox--name {
      font-size: 2rem; }
    .projects-container__projectbox--image {
      max-height: 20rem; }
      @media only screen and (max-width: 27.5em) {
        .projects-container__projectbox--image {
          max-height: 15rem; } }
    .projects-container__projectbox--theme {
      font-size: 1.5rem; }

.projects-layout {
  display: grid;
  place-items: center;
  padding: 0 20rem 0 20rem; }
  @media only screen and (max-width: 62.5em) {
    .projects-layout {
      padding: 0 10rem 0 10rem; } }
  @media only screen and (max-width: 50em) {
    .projects-layout {
      padding: 0 5rem 0 5rem; } }
  @media only screen and (max-width: 27.5em) {
    .projects-layout {
      padding: 0 2rem 0 2rem; } }
  .projects-layout__intro--program {
    display: grid;
    align-items: flex-end;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 2rem; }
    .projects-layout__intro--program--icon {
      max-width: 5rem; }
      @media only screen and (max-width: 27.5em) {
        .projects-layout__intro--program--icon {
          gap: 0;
          max-width: 4rem; } }
  .projects-layout__process--iconbox {
    display: grid;
    grid-auto-flow: column;
    justify-content: space-between; }
    .projects-layout__process--iconbox--icon {
      max-width: 13rem; }
      @media only screen and (max-width: 62.5em) {
        .projects-layout__process--iconbox--icon {
          max-width: 10rem; } }
      @media only screen and (max-width: 50em) {
        .projects-layout__process--iconbox--icon {
          max-width: 8rem; } }
      @media only screen and (max-width: 27.5em) {
        .projects-layout__process--iconbox--icon {
          max-width: 6rem; } }
  .projects-layout__process--marketing--some {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    place-items: center; }
    .projects-layout__process--marketing--some--image {
      max-width: 20rem; }
      @media only screen and (max-width: 27.5em) {
        .projects-layout__process--marketing--some--image {
          max-width: 15rem; } }
  .projects-layout__process--programming--app {
    display: grid;
    place-items: center; }

.ads-document {
  display: grid;
  place-items: center; }

.learning__list--text {
  list-style: none; }