@charset "UTF-8";
/*! HTML5 Boilerplate v9.0.1 | MIT License | https://html5boilerplate.com/ */
/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */
/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Geologica:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
@font-face {
  font-family: "Aptos Bold";
  src: url("../local-fonts/Aptos/Aptos-ExtraBold.ttf");
}
@font-face {
  font-family: "Aptos Black";
  src: url("../local-fonts/Aptos/Aptos-Black.ttf");
}
* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-weight: normal;
  background: transparent;
}

html,
body {
  width: 100%;
}

a,
p,
li,
.paragraph {
  font-size: 1.1em;
}

b {
  font-weight: bold;
}

h1,
h2,
a.headerButton,
.h2 {
  font-weight: 250;
}

.striped-card h2 {
  color: var(--fb_secondary);
}

h1 {
  font-size: 2.4em;
}

.fullScreenTitles {
  font-weight: bolder;
  font-family: "Geologica", sans-serif;
}

.outlineText {
  font-family: "Aptos Black", sans-serif;
  letter-spacing: 0.2rem;
  color: var(--fb_on_primary) !important;
}

h2,
a.headerButton {
  font-size: 1.6em;
}

h3 {
  font-size: 1.2em;
}

html {
  color: var(--fb_text);
  font-family: var(--fb_default-font), sans-serif;
  font-size: 1.2em;
  line-height: 1.4;
  /*Colors*/
  --fb_drop-shadow: 20px 20px 70px 0px rgba(0, 0, 0, 0.25);
  --fb_text: rgb(3, 16, 9);
  --fb_background: rgb(254, 255, 254);
  --fb_reverse-background: rgb(0, 0, 0);
  --fb_background_rgb: 254, 255, 254;
  --fb_primary: rgb(16, 54, 30);
  --fb_primary_rgb: 16, 54, 30;
  --fb_secondary: rgb(139, 172, 154);
  --fb_secondary_rgb: 139, 172, 154;
  --fb_accent: rgb(52, 87, 68);
  --fb_accent_rgb: 52, 87, 68;
  --fb_on_primary: rgb(255, 255, 255);
  --fb_colored-background: rgb(185, 193, 188);
  --fb_colored-background_rgb: 185, 193, 188;
  --fb_input-field-background: rgb(226, 226, 226);
  /*Text*/
  --fb_default-font: Inter;
  --fb_normal_text_size: 1.1em;
  /*Misc.*/
  --fb_horizontal-margin: 15vw;
  --footer_header_size: 0px;
  --footer_height: 0px;
  --header_height: 0px;
  --is_phone: false;
  --vertical-text-section-gap: 1.5vw;
  --fb_item-gap: 24px;
  --fb_border-radius: 6px;
  --mobileDropdownHeight: 0px;
}

@media only screen and (max-width: 1440px) {
  html.desktop {
    --fb_horizontal-margin: 5vw;
  }
  html.desktop html {
    font-size: 1em;
  }
  html.desktop .row-\>column:has(text-section) {
    flex-direction: column !important;
    gap: 32px !important;
    align-items: center !important;
  }
  html.desktop text-section {
    flex-basis: auto !important;
    max-width: none !important;
  }
  html.desktop .textSection {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    max-width: none !important;
    gap: calc(var(--fb_item-gap)) !important;
  }
  html.desktop .textSection .textHolder {
    width: 100%;
  }
  html.desktop text-section p {
    float: left;
  }
  html.desktop text-section .image {
    flex-basis: 45% !important;
  }
  html.desktop text-section .image h2 {
    font-size: 2.4vw;
  }
  html.desktop #rightBigHeaderContentContainer {
    padding: 16px !important;
  }
  html.desktop #headerContactHolder {
    display: none;
  }
  html.desktop #headerSeparator {
    display: none;
  }
}
/*General*/
.centerContent {
  align-items: center;
  justify-content: center;
}

.row {
  flex-direction: row;
  flex-wrap: nowrap;
  display: flex;
  gap: var(--fb_item-gap);
}

#prices-complete-package h1 {
  text-wrap: wrap;
  text-overflow: ellipsis;
}

#prices-complete-package ul,
#prices-misc *.alph-list {
  width: 100%;
  font-weight: 600;
  list-style-type: none;
  list-style-position: inside;
  display: flex;
  flex-direction: column;
}

#prices-complete-package li,
#prices-misc li {
  display: flex;
  flex-basis: 100%;
  flex-direction: row;
  padding: 8px 0;
  align-items: center;
}

#prices-misc li {
  border-top: solid var(--fb_on_primary) 2px;
}

#prices-misc li:nth-child(1) {
  border-top: none;
}

#prices-complete-package li p {
  flex-grow: 1;
}

#prices-complete-package li span {
  font-size: 48px;
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
  padding-right: 16px;
}

#prices-misc p {
  min-width: 0;
  flex-basis: 50%;
  text-wrap: wrap;
}

#prices-misc li span {
  text-align: center;
}

#prices-misc li span + p {
  text-align: right;
}

#prices-misc li p.listTooltip {
  display: none;
}

html.desktop #prices-misc li {
  position: relative;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
html.desktop #prices-misc li:hover p.listTooltip {
  display: block;
  position: absolute;
  font-size: 0.9em;
  padding: 6px;
  bottom: 5px;
  border-radius: 6px;
  background-color: rgba(var(--fb_primary_rgb));
  border: solid var(--fb_background) 2px;
  pointer-events: none;
  color: var(--fb_background);
  left: 15%;
  max-width: 70%;
  z-index: 2000;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 20px;
}
html.desktop #prices-misc {
  clip-path: none !important;
}

body {
  background-color: var(--fb_background);
  overflow-x: clip;
}

.content {
  padding-left: var(--fb_horizontal-margin);
  padding-right: var(--fb_horizontal-margin);
}

#main-content {
  gap: 0;
  min-height: calc(100vh - var(--footer_header_size));
}

/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
  visibility: hidden; /* Hidden by default. Visible on click */
  min-width: 250px; /* Set a default minimum width */
  background-color: var(--fb_primary); /* Background color */
  color: var(--fb_on_primary); /* Text color */
  text-align: center; /* Centered text */
  border-radius: var(--fb_border-radius); /* Rounded borders */
  box-shadow: 0 0 10px var(--fb_secondary);
  font-size: 1.4em;
  padding: 16px; /* Padding */
  position: fixed; /* Sit on top of the screen */
  z-index: 2147483648 !important; /* Add a z-index if needed */
  left: 20%; /* Center the snackbar */
  right: 20%; /* Center the snackbar */
  bottom: 100px; /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
   However, delay the fade out process for 2.5 seconds */
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }
  to {
    bottom: 100px;
    opacity: 1;
  }
}
@keyframes fadeout {
  from {
    bottom: 100px;
    opacity: 1;
  }
  to {
    bottom: 0;
    opacity: 0;
  }
}
#progressBar {
  height: 20px;
  width: 100%;
  border-radius: 100px;
  display: none;
  position: relative;
  background: var(--fb_colored-background);
  clip-path: inset(0 round 100px);
}
#progressBar .fill {
  height: 100%;
  background: rgba(var(--fb_primary_rgb), 0.8);
}

.card {
  background-color: var(--fb_background);
  border-radius: var(--fb_border-radius);
  padding: 30px;
  box-shadow: var(--fb_drop-shadow);
  color: var(--fb_primary);
}

#koeberpakke-card {
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  --current_padding: 2.5%;
  padding: var(--current_padding) 0;
  text-align: center;
  background: var(--fb_secondary);
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  position: relative;
  clip-path: inset(0 0 round var(--fb_border-radius));
}

#koeberpakke-card div.column {
  gap: var(--fb_item-gap);
  height: 100%;
  align-content: center;
  justify-content: center;
  border-radius: var(--fb_border-radius);
}

.striped-card {
  clip-path: inset(0 0 round var(--fb_border-radius)) !important;
  background-image: url(../img/background-pattern_transparent.svg), linear-gradient(to bottom, rgb(var(--fb_accent_rgb)), rgb(var(--fb_primary_rgb))) !important;
  color: var(--fb_on_primary) !important;
  box-shadow: inset 0 -10px 30px rgba(0, 0, 0, 0.2);
}

.striped-card > div.striped_background {
  opacity: 0.1 !important;
  background-image: url(../img/background-pattern.svg) !important;
  background-blend-mode: difference !important;
}

#koeberpakke-card h1.fullScreenTitles {
  line-height: 2.8vw;
  width: 100%;
  text-align: center;
  z-index: 1000;
}

#koeberpakke-card h1.outlineText, #koeberpakke-card h2 {
  color: var(--fb_primary) !important;
}

#koeberpakke-card h1,
#koeberpakke-card h2 {
  z-index: 2000;
}

#mobileDropdownContentContainer {
  position: absolute;
  text-align: center;
  overflow: clip;
  width: 100%;
  left: 0;
  background-color: var(--fb_primary);
  text-transform: uppercase;
  font-size: 1.4em;
  color: var(--fb_on_primary);
  text-decoration: none;
  gap: 0;
}
#mobileDropdownContentContainer > #mobileHeaderButtonHolder {
  width: 100%;
  gap: 0;
  text-transform: inherit;
}

#mobileDropdown {
  display: none;
}

#mobileDropdownButton {
  height: 100%;
  width: 30px;
  z-index: 1000;
  background: none;
  padding: 0;
  border-radius: 0;
}

#header {
  padding: 16px var(--fb_horizontal-margin);
}

#headerLogo {
  height: 70px;
}

#headerLogoText {
  height: 40px;
}

#header a {
  color: var(--fb_on_primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.8em;
}

#headerContactHolder {
  text-transform: none;
  font-weight: 500;
  text-decoration-color: var(--fb_on_primary);
  align-items: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  gap: 6px;
}

#header a:active {
  text-decoration: underline;
}

html.desktop #header a:hover {
  color: var(--fb_secondary);
  text-decoration: none;
}

#guide-button-holder {
  gap: var(--fb_item-gap);
  align-items: center;
  height: 40px;
}

.guideButton {
  width: 100%;
  height: 100%;
  opacity: 0.2;
  display: flex;
  align-items: center;
}

.guideButton:hover {
  opacity: 0.7;
}

.guideButton:active {
  opacity: 1;
}

#cursorPopup {
  background: var(--fb_background);
  border-radius: var(--fb_border-radius);
  box-shadow: var(--fb_drop-shadow);
  color: var(--fb_text);
  position: fixed;
  display: none;
  z-index: 10000;
  padding-left: 5px;
  padding-right: 5px;
  font-weight: 600;
}

#cursorPopup.activeCursorPopup {
  display: block;
}

.activeGuideButton {
  width: 100%;
  height: 100%;
  opacity: 1;
  display: flex;
  align-items: center;
}

.guideArrowButton {
  height: 100%;
  aspect-ratio: 1/1;
  background: rgba(0, 0, 0, 0.2);
  clip-path: circle(50%);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.guideArrowIcon {
  height: 80%;
  transform: scaleX(-1);
  background: var(--fb_primary);
  -webkit-mask: url(../img/arrow.svg) no-repeat center;
          mask: url(../img/arrow.svg) no-repeat center;
  -webkit-mask-size: 100%;
          mask-size: 100%;
  aspect-ratio: 1/1;
}

.guideArrowButton:hover {
  background: var(--fb_primary);
}

.guideArrowButton:hover .guideArrowIcon {
  background: var(--fb_on_primary);
}

.mobileDropdownOption {
  padding-top: 24px;
  padding-bottom: 24px;
  border-top: solid 1px var(--fb_accent);
}

.textSectionLine {
  width: calc(100% + var(--fb_horizontal-margin) * 2);
  left: calc(var(--fb_horizontal-margin) * -1);
  position: relative;
  overflow: hidden;
}

.footer {
  width: 100%;
  background-color: var(--fb_primary);
  color: var(--fb_on_primary);
  align-items: center;
  padding-top: 50px;
  padding-bottom: 50px;
  font-size: 0.8em;
}

.grecaptcha-badge {
  display: none;
}

.grecaptcha-badge:hover {
  width: 256px !important;
}

.footer-list {
  flex-direction: row;
  display: flex;
  width: 80%;
  gap: calc(var(--fb_item-gap) / 2);
  justify-content: center;
}

.footer img {
  width: 15%;
}

.flipped {
  transform: scaleX(-1);
}

.show {
  display: block;
}

.formInput {
  border: solid var(--fb_accent) 1px;
  border-radius: var(--fb_border-radius);
}

.column {
  flex-direction: column;
  flex-wrap: nowrap;
  display: flex;
  gap: var(--fb_item-gap);
}

.wave {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
}

#trustPilotSection {
  flex-wrap: nowrap;
  position: relative;
  align-items: center;
  justify-content: end;
  padding: 150px 0;
  width: 100%;
}

#backgroundDenmark {
  height: 100%;
  position: relative;
  left: -12.5%;
}

#denmarkContainer {
  align-items: center;
  justify-content: start;
}

#trustPilotCard {
  flex-basis: 40%;
  text-align: center;
  display: inline-block;
  background-size: 30%;
  align-content: end;
  z-index: 1000;
  aspect-ratio: 16/9;
}

#trustPilotCard img {
  width: 80%;
}

#trustPilotSpacer {
  display: none;
}

#koeberguide-holder {
  width: 100%;
  color: var(--fb_primary);
  box-sizing: border-box;
  gap: var(--fb_item-gap);
}

#koeberguide-text {
  padding: 42px 70px;
  gap: var(--fb_item-gap);
  position: relative;
  color: var(--fb_on_primary);
  clip-path: border-box;
}

#afgiftsberegner input[type=number]::-webkit-inner-spin-button,
#afgiftsberegner input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#afgiftsberegner input[type=number] {
  -moz-appearance: textfield;
  padding: var(--fb_border-radius);
  background: var(--fb_background);
  border-radius: 6px;
}

#koeberguide-text b {
  color: var(--fb_secondary);
  background: -webkit-linear-gradient(0deg, rgba(var(--fb_secondary_rgb), 0.5), transparent) no-repeat;
  background-size: 95%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  left: 70px;
  bottom: 40px;
  display: inline-block;
  position: absolute;
  font-size: 12em !important;
  line-height: 0.7em;
}

.guiderHeaderBox {
  flex: 1;
  display: flex;
  justify-content: center;
}

#koeberguide-text > div.column {
  width: 100%;
  position: sticky;
  clip-path: inset(0 round var(--fb_border-radius));
  background: var(--fb_on_primary);
  transition: 100ms;
}

#koeberguide-text > div.column > div.row:first-child {
  padding: var(--fb_border-radius);
  padding-top: calc(var(--fb_border-radius));
  color: var(--fb_primary);
  justify-content: center;
}

#koeberguide-text > div.column > div.row:last-child {
  padding: var(--fb_border-radius);
  padding-top: calc(var(--fb_border-radius));
  color: var(--fb_primary);
  justify-content: space-between;
}

#koeberguide-text > div.column.is-sticky {
  width: calc(100% + 140px);
  z-index: 1000;
  margin-left: -70px;
  border-radius: 0;
  clip-path: inset(0);
  transition: 100ms;
}

#koeberguide-text > div.column > div.row:first-child h3 {
  justify-content: center;
  align-content: center;
  padding-right: 18px;
}

#koeberguide-text span {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

#koeberguide-text > div.column span {
  font-size: 32px;
}

#koeberguide-text > div.row span {
  height: 100%;
  width: 70px;
  text-align: center;
  color: transparent;
  align-items: center;
  align-content: center;
  justify-content: center;
  font-weight: normal;
  font-size: 72px;
  transition: 100ms;
}

#koeberguide-text:hover > div.row span {
  color: var(--fb_on_primary);
  display: inline-block;
  cursor: pointer;
  transition: 100ms;
}

#koeberguide-text:hover > div.row span:nth-child(1) {
  background: -webkit-linear-gradient(0, rgba(0, 0, 0, 0), transparent);
  transition: 100ms;
}

#koeberguide-text:hover > div.row span:nth-child(3) {
  background: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 0), transparent);
  transition: 100ms;
}

#koeberguide-text:hover > div.row span:nth-child(1) {
  background: -webkit-linear-gradient(0, rgba(0, 0, 0, 0.6), transparent);
  transition: 100ms;
}

#koeberguide-text:hover > div.row span:nth-child(3) {
  background: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent);
  transition: 100ms;
}

#koeberguide-text:hover > div.row span:hover {
  font-size: 88px;
  transition: 100ms;
}

#koeberguide-text:hover > div.row span:first-child:hover {
  background: -webkit-linear-gradient(0, rgba(0, 0, 0, 0.9), transparent);
  transition: 100ms;
}

#koeberguide-text:hover > div.row span:nth-child(3):hover {
  background: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent);
  transition: 100ms;
}

/*Big Header*/
#bigHeader {
  /*Default*/
  flex-direction: row;
  flex-wrap: nowrap;
  display: flex;
  width: 100%;
  align-items: center;
  height: -moz-fit-content;
  height: fit-content;
  background: linear-gradient(to bottom, var(--fb_accent), var(--fb_primary));
  position: relative;
}

#logoHouse {
  left: 0;
  top: 2.5%;
  height: 95%;
  position: absolute;
}

#leftBigHeaderContainer {
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  color: var(--fb_on_primary);
  background-origin: border-box;
}

#leftBigHeaderTextContainer {
  padding-left: 25%;
  width: 100%;
  height: 100%;
  gap: 34px;
  text-align: left;
}

#logoText {
  width: 50%;
}

#bigHeaderTagline {
  width: 50%;
}

.bigHeaderPriceLinesIcon {
  font-size: 36px !important;
}

#headerButtonAndContactHolder {
  flex-direction: row;
  flex-wrap: nowrap;
  display: flex;
  align-items: center;
  font-weight: 500;
  text-transform: uppercase;
  gap: var(--fb_item-gap);
}
#headerButtonAndContactHolder #desktopHeaderButtonHolder {
  gap: inherit;
  flex-direction: inherit;
  flex-wrap: inherit;
  display: inherit;
}

.bigHeaderButton {
  color: var(--fb_primary);
  width: 100%;
  height: 100%;
  text-align: center;
  writing-mode: vertical-rl;
  display: block;
  align-content: center;
  transition: 0.1s;
  background: transparent;
  pointer-events: auto;
  z-index: 10;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
}

#rightBigHeaderContentContainer {
  width: 100%;
  flex-grow: 1;
  color: var(--fb_primary);
  z-index: 10;
  gap: var(--fb_item-gap);
  align-items: center;
}

.bigHeaderButton:hover {
  color: var(--fb_secondary);
  background: var(--fb_primary);
}

.bigHeaderButton.notLower {
  border: solid;
  border-color: var(--fb_primary);
  border-width: 0 0 3px 0;
}

.contactForm,
#upload-form {
  width: 100%;
  height: 100%;
  position: relative;
  gap: var(--fb_item-gap);
  font-family: var(--fb_default-font), serif;
  font-size: var(--fb_normal_text_size);
}

.contactForm label,
#upload-form,
label {
  width: 100%;
  text-align: left;
}

#upload-form,
label {
  color: var(--fb_accent);
}

.dark > .contactForm {
  color: var(--fb_on_primary) !important;
}
.dark > .contactForm button {
  background: var(--fb_secondary);
  color: var(--fb_primary);
}
.dark > .contactForm button:hover {
  background: var(--fb_accent);
  color: unset;
}
.dark > .contactForm > .column > p {
  color: rgba(var(--fb_background_rgb), 0.4) !important;
}
.dark > .contactForm > .column > p a {
  color: rgba(var(--fb_background_rgb), 0.4) !important;
}
.dark > .contactForm input, .dark > .contactForm textarea {
  color: var(--fb_secondary);
}
.dark > .contactForm input::-moz-placeholder, .dark > .contactForm textarea::-moz-placeholder {
  color: rgba(var(--fb_secondary_rgb), 0.6);
}
.dark > .contactForm input::placeholder, .dark > .contactForm textarea::placeholder {
  color: rgba(var(--fb_secondary_rgb), 0.6);
}

.contactForm input,
#upload-form input,
.form-box {
  text-align: left;
  border: solid var(--fb_primary) 2px;
  border-radius: var(--fb_border-radius);
  padding: 5px;
  font-family: inherit;
  font-size: inherit;
  backdrop-filter: blur(5px);
  background-color: rgba(var(--fb_background_rgb), 0.1);
}

.contactForm .row,
#upload-form .row {
  text-align: left;
  border: solid var(--fb_primary) 2px;
  border-radius: var(--fb_border-radius);
  padding: 5px;
  font-family: inherit;
  font-size: inherit;
  backdrop-filter: blur(5px);
  background-color: rgba(var(--fb_background_rgb), 0.1);
}

.contactForm textarea,
#upload-form textarea {
  text-align: left;
  border: solid var(--fb_primary) 2px;
  border-radius: var(--fb_border-radius);
  padding: 5px;
  font-family: inherit;
  font-size: inherit;
  resize: none;
  backdrop-filter: blur(5px);
  flex-grow: 1;
  background-color: rgba(var(--fb_background_rgb), 0.1);
}

.contactForm br,
#upload-form br {
  height: 5px;
}

.parallax {
  /* Create the parallax scrolling effect */
  /*background-attachment: fixed;*/
  background-position: center;
  background-repeat: repeat;
  background-size: contain;
}

#upload-form {
  width: 60%;
  align-self: center;
}

#upload-form.is-dragover .form-box {
  background: var(--fb_colored-background);
}

.form__dragndrop,
.form__uploading,
.form__success,
.form__error {
  display: none;
}

#upload-form.has-advanced-upload .form__dragndrop {
  display: inline;
}

.contactForm .has-error,
#upload-form .has-error {
  border-color: darkred;
}

.contactForm button,
#upload-form button {
  margin-top: 5px;
}

.contactFormHolder,
#upload-form_holder {
  padding: 50px calc(var(--fb_horizontal-margin) * 1.7);
}

input::-moz-placeholder, textarea::-moz-placeholder {
  color: var(--fb_accent);
}

input::placeholder,
textarea::placeholder {
  color: var(--fb_accent);
}

button {
  background: var(--fb_primary);
  border-radius: 100px;
  width: -moz-fit-content;
  width: fit-content;
  padding: 10px 20px 10px 20px;
  font-size: 0.9em;
  font-weight: 500;
  color: var(--fb_on_primary);
  font-family: inherit;
  border: none;
}

input[type=file]::file-selector-button {
  border: none;
  background: none;
  color: var(--fb_accent);
  text-decoration: underline;
}

label.button {
  background: var(--fb_primary);
  border-radius: 100px;
  width: -moz-fit-content;
  width: fit-content;
  padding: 10px 20px 10px 20px;
  font-size: 0.9em;
  font-weight: 500;
  color: var(--fb_on_primary);
  font-family: inherit;
}

label.button:hover {
  background: var(--fb_accent);
  cursor: pointer;
}

a.button {
  background: var(--fb_primary);
  border-radius: 100px;
  width: -moz-fit-content;
  width: fit-content;
  padding: 10px 20px 10px 20px;
  font-size: 0.9em;
  font-weight: 500;
  color: var(--fb_on_primary);
  font-family: inherit;
  text-decoration: none;
}

text-section *.button {
  margin-top: 16px;
}

text-section .extraImage {
  display: none;
}

button:hover {
  background: var(--fb_accent);
  cursor: pointer;
}

input[type=file]::file-selector-button:hover {
  cursor: pointer;
}

a.button:hover {
  background: var(--fb_accent);
  cursor: pointer;
}

#thanks-card {
  height: -moz-fit-content;
  height: fit-content;
  width: 100%;
  padding: 0 50px;
}

#rightBigHeaderContainer {
  flex-direction: row;
  flex-wrap: nowrap;
  display: flex;
  height: 100%;
  width: 80%;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
}

#rightBigHeaderLogo {
  display: none;
}

#rightBigHeaderContentContainer {
  padding: 50px;
}

#bigHeaderButtonContainer {
  flex-direction: column;
  flex-wrap: nowrap;
  display: flex;
  height: 100%;
  width: 60px;
}

#bigHeaderPrice {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

#bigHeaderPriceSubtitle {
  font-size: 1.4vw;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.fullScreenTitles {
  font-size: 2.8vw;
  line-height: 1em;
}

.biggerFullScreenTitles {
  font-size: 4vw !important;
  line-height: 1em;
}

.biggestFullscreenTitles {
  font-size: 10vw !important;
  line-height: 1em;
  font-family: "Aptos Black", sans-serif;
}

.pageTitle {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.bigHeaderPriceLines {
  font-size: 0.8vw;
}

text-section .textSection {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  gap: var(--fb_item-gap);
}

text-section.horizontal .textSection {
  flex-direction: row;
  flex-wrap: wrap;
  display: flex;
  width: 100%;
  max-width: none;
  gap: calc(var(--fb_item-gap) * 2.5);
}

text-section.horizontal img {
  -o-object-position: top;
     object-position: top;
}

text-section {
  flex-grow: 1;
  max-width: 762px;
}

text-section.horizontal {
  max-width: none;
}

.arrow-button {
  flex-direction: row;
  display: flex;
  gap: 5px;
  align-items: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  margin: 10px 0;
  font-size: 0.8em !important;
  transition: 100ms;
}

.post-card:hover .arrow-button,
.arrow-button:hover {
  flex-direction: row;
  cursor: pointer;
  display: flex;
  gap: 15px;
  transition: 100ms;
}

text-section .image h2 {
  font-size: 1.8vw;
  text-align: center;
  text-transform: uppercase;
  background: transparent;
  position: absolute;
  width: 90%;
  height: 90%;
  left: 5%;
  top: 5%;
  align-content: center;
  z-index: 1000;
  color: var(--fb_on_primary);
}

text-section .textHolder h2 {
  text-align: left;
}

text-section p {
  text-align: left;
}

text-section .textHolder {
  width: 100%;
  display: flex;
  flex-direction: column;
}

text-section.horizontal .textHolder {
  flex-basis: 350px;
  flex-grow: 1;
}

.textSection .image {
  width: 100%;
  clip-path: inset(0 round var(--fb_border-radius));
  background: transparent;
  border-radius: var(--fb_border-radius);
}

text-section.horizontal .image {
  max-width: 100%;
  flex-basis: 350px;
  flex-grow: 1;
}

.desktopOnly {
  display: block;
}

.desktopOnly.row,
.desktopOnly.column {
  display: flex;
}

.mobileOnly {
  display: none;
}

.pageTitle {
  align-items: center;
  justify-content: center;
  height: 350px;
  clip-path: inset(0);
  margin: 0 calc(var(--fb_horizontal-margin) * -1);
  background: linear-gradient(to bottom, var(--fb_colored-background), rgba(var(--fb_colored-background_rgb), 0));
  color: var(--fb_primary);
  overflow: hidden;
}

.pageTitle h1 {
  text-transform: uppercase;
}

.pageTitle img.wave {
  position: absolute;
  top: 0;
  left: 0;
  height: 500px;
  -webkit-mask-image: linear-gradient(to bottom, rgb(0, 0, 0), rgba(0, 0, 0, 0) 350px);
          mask-image: linear-gradient(to bottom, rgb(0, 0, 0), rgba(0, 0, 0, 0) 350px);
}

.row-\>column {
  display: flex;
  flex-direction: row;
  gap: var(--fb_item-gap);
}

#peter-section img {
  width: 200px !important;
  flex-shrink: 0;
}

#peter-section h1,
#peter-section h2 {
  width: 100%;
  text-align: center;
}

#peter-section a {
  color: var(--fb_background);
}

/*Vertical Tablet and Phone*/
html.phone {
  /*Dropdown*/
}
html.phone #mobileDropdownContentContainer.open {
  height: var(--mobileDropdownHeight);
  transition: 200ms;
}
html.phone #peter-section img {
  width: 120px !important;
}
html.phone #peter-section h1,
html.phone #peter-section h2 {
  width: 100%;
  text-align: center;
}
html.phone #mobileDropdownContentContainer {
  height: 0;
  transition: 200ms;
  z-index: -1;
  position: absolute;
}
html.phone {
  /*General*/
}
html.phone .row-\>column {
  flex-direction: column;
  gap: 32px;
}
html.phone a,
html.phone p,
html.phone li {
  font-size: 1em;
}
html.phone h1 {
  font-size: 1.8em;
}
html.phone #prices-misc li,
html.phone #prices-complete-package li {
  font-size: 1em !important;
}
html.phone h2,
html.phone .h2 {
  font-size: 1.2em;
}
html.phone #header a {
  font-size: 0.6em !important;
}
html.phone #koeberguide-holder {
  position: relative;
  width: 100%;
  padding: 0;
}
html.phone #koeberguide-text {
  padding: 20px;
  border-radius: 0 !important;
}
html.phone #koeberguide-text > div.column > div.row:first-child h3 {
  color: transparent;
}
html.phone #koeberguide-text > div.column.is-sticky {
  width: calc(100% + 40px);
  z-index: 1000;
  margin-left: -20px;
  border-radius: 0;
  clip-path: inset(0);
  transition: 100ms;
}
html.phone transition-element div {
  height: 75px !important;
}
html.phone #trustPilotSection {
  padding: 50px 0;
}
html.phone .pageTitle {
  height: 150px;
}
html.phone {
  --fb_horizontal-margin: 5vw;
  min-width: auto;
}
html.phone text-section .image h2 {
  font-size: 9vw;
}
html.phone .desktopOnly {
  display: none !important;
}
html.phone text-section *.button,
html.phone contact-form button,
html.phone #upload-form button {
  width: 100%;
  text-align: center;
  padding: 10px 0;
  font-weight: 600;
  border-radius: var(--fb_border-radius);
}
html.phone #upload-form {
  width: 100%;
  align-self: center;
}
html.phone .biggerFullScreenTitles {
  font-size: 10vw !important;
}
html.phone text-section p {
  text-align: left;
}
html.phone .footer img {
  width: 70%;
}
html.phone #koeberguide-text > div.column {
  position: static;
}
html.phone #thanks-card {
  padding: 0 16px;
}
html.phone #bigHeader *.contactForm {
  width: auto;
  height: 350px;
}
html.phone .contactFormHolder {
  padding: 50px calc(var(--fb_horizontal-margin));
}
html.phone #rightBigHeaderContentContainer {
  padding: 50px var(--fb_horizontal-margin) 0 var(--fb_horizontal-margin);
  width: auto;
}
html.phone #koeberpakke-card {
  height: -moz-fit-content;
  height: fit-content;
}
html.phone #koeberpakke-card div.column {
  padding: 20px 0;
  gap: 0;
}
html.phone #koeberpakke-card h2.fullScreenTitles {
  line-height: normal;
  width: 100%;
  text-align: center;
  z-index: 1000;
}
html.phone #rightBigHeaderContainer {
  width: 100%;
}
html.phone #prices-misc *.alph-list li p {
  flex-grow: 0;
  flex-basis: max-content;
}
html.phone #prices-misc *.alph-list li p:first-child {
  flex-grow: 1;
}
html.phone .guideButton {
  display: none;
}
html.phone .activeGuideButton {
  display: none;
}
html.phone #koeberguide-text > div.column {
  clip-path: none;
  background-color: transparent;
}
html.phone #koeberguide-text > div.column * {
  background-color: transparent !important;
}
html.phone .mobileOnly {
  display: block;
}
html.phone .mobileOnly.row,
html.phone .mobileOnly.column {
  display: flex;
}
html.phone html {
  font-size: 0.8em;
}
html.phone .wave {
  width: 100%;
  height: 100vh;
}
html.phone #trustPilotCard {
  width: 80%;
}
html.phone #headerButtonAndContactHolder {
  display: none;
}
html.phone #mobileDropdown {
  display: block;
}
html.phone #headerLogoText {
  height: 25px;
}
html.phone .show {
  display: block;
}
html.phone #backgroundDenmark {
  left: 0;
}
html.phone #denmarkContainer {
  align-items: end;
  justify-content: center;
}
html.phone #trustPilotSpacer {
  display: block;
}
html.phone {
  /*Big Header*/
}
html.phone #bigHeader {
  flex-direction: column;
  width: 100%;
  min-width: 0;
  height: -moz-fit-content;
  height: fit-content;
}
html.phone #leftBigHeaderContainer {
  height: -moz-fit-content;
  height: fit-content;
  padding: 50px 0;
  width: 100dvw;
}
html.phone #leftBigHeaderTextContainer {
  padding: 0;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  overflow-x: clip;
}
html.phone #rightBigHeaderLogo {
  display: none;
}
html.phone #logoHouse {
  top: 0;
  height: 120%;
}
html.phone #rightBigHeaderContainer {
  flex-direction: column;
  text-align: center;
  height: -moz-fit-content;
  height: fit-content;
}
html.phone #bigHeaderPrice {
  font-size: 4vw;
}
html.phone #bigHeaderPriceSubtitle {
  font-size: 3vw;
}
html.phone #logoText {
  width: 70%;
}
html.phone contact-section .contactFormHolder {
  height: 400px !important;
}
html.phone #bigHeaderButtonContainer {
  display: none;
}
html.phone .fullScreenTitles {
  font-size: 4vw;
}
html.phone .bigHeaderPriceLines {
  font-size: 2vw;
}
html.phone #headerLogo {
  height: 45px;
}
html.phone .bigHeaderPriceLinesIcon {
  font-size: 24px !important;
}
html.phone .bigHeaderKøberpakke {
  padding-left: var(--fb_horizontal-margin);
  padding-right: var(--fb_horizontal-margin);
}
html.phone .post-card:hover .arrow-button,
html.phone .arrow-button:hover {
  gap: 5px;
  transition: 100ms;
}
html.phone .footer-list {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--fb_item-gap);
}
html.phone .wideCard {
  width: calc(100% - var(--fb_horizontal-margin) * 2);
  position: relative;
  padding: var(--fb_horizontal-margin);
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Customize the background color to match your design.
 */
::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid var(--fb_accent);
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */
textarea {
  resize: vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
/* ==========================================================================
   Helper classes
   ========================================================================== */
/*
 * Hide visually and from screen readers
 */
.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */
.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .visually-hidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */
.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */
.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * The use of `table` rather than `block` is only necessary if using
 * `::before` to contain the top-margins of child elements.
 */
.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}
@media print, (min-resolution: 1.25dppx), (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}
/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */
@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]::after {
    content: " (" attr(href) ")";
  }
  abbr[title]::after {
    content: " (" attr(title) ")";
  }
  /*
    * Don't show links that are fragment identifiers,
    * or use the `javascript:` pseudo protocol
    */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }
  pre {
    white-space: pre-wrap !important;
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}/*# sourceMappingURL=style.css.map */