@charset "UTF-8";
/*
Theme Name: Politikens Forlag
Theme URI: https://www.politikensforlag.dk/
Author: kodepine.dk
Author URI: https://kodepine.dk
Version: 1.0
*/
:root {
  --break-small: 620px;
  --break-medium: 768px;
  --break-large: 1024px;
  --break-xl: 1400px;
  --font-family-display: "Libre Bodoni", serif;
  --font-family-splash: "Roboto Condensed", serif;
  --font-family-content: "Roboto", serif;
  --clr-primary: hsl(0, 0%, 100%);
  --clr-primary-black: hsla(0, 0%, 0%, 0.999);
  --clr-primary-grey: hsla(0, 0%, 95%, 1);
  --clr-primary-01: hsla(157, 38%, 84%, 1);
  --clr-primary-02: hsla(357, 84%, 68%, 1);
  --clr-primary-03: hsl(60, 23%, 87%);
  --fs-300: clamp(0.84rem, calc(0.91rem + 0.08vw), 0.98rem);
  --fs-400: clamp(1.13rem, calc(1.06rem + 0.33vw), 1.31rem);
  --fs-500: clamp(1.35rem, calc(1.21rem + 0.69vw), 1.75rem);
  --fs-600: clamp(1.62rem, calc(1.37rem + 1.24vw), 2.33rem);
  --fs-700: clamp(1.94rem, calc(1.54rem + 2.03vw), 3.11rem);
  --fs-800: clamp(2.33rem, calc(1.7rem + 3.15vw), 4.14rem);
  --fs-900: clamp(2.8rem, calc(1.85rem + 4.74vw), 5.52rem);
  --padding-inline: 1rem;
  --content-max-width: 920px;
  --breakout-max-width: 1000px;
  --breakout-size: calc(
    (var(--breakout-max-width) - var(--content-max-width)) / 2
  );
  --readable-padding: calc((var(--content-max-width) - 70ch) / 2);
  --readable-total: calc(
    var(--breakout-max-width) - (var(--readable-padding) * 2)
  );
  --border-radius: 0.2em;
  --link-color: var(--clr-primary-black);
  --swiper-navigation-size: 24px !important;
  --swiper-theme-color: white !important;
}

a,
a:visited,
a:hover,
a:active {
  color: var(--link-color);
  text-decoration: none;
}

html {
  /* color-scheme: var(--color-scheme); */
  overflow-y: scroll;
}

/* Usage Example */
body {
  font-family: var(--font-family-content);
  font-weight: 300;
  font-optical-sizing: auto;
  background-color: var(--clr-primary-grey);
}

h1,
h2,
h3,
h4,
.display {
  font-family: var(--font-family-display);
  font-optical-sizing: auto;
  text-transform: uppercase;
}

h1 {
  font-size: var(--fs-600);
  font-style: italic;
  /* Largest font size */
}
h1::after {
  content: "";
  display: block;
  margin-bottom: 0.5em;
}

h2 {
  font-size: var(--fs-500);
  text-transform: uppercase;
}

h3 {
  font-size: var(--fs-500);
}
h3:after {
  content: "";
  display: block;
  margin-bottom: 1em;
}

h4 {
  font-size: var(--fs-300);
}

p {
  font-size: var(--fs-300);
  /* Smaller font size for paragraphs */
  line-height: calc(var(--fs-300) * 1.5);
}

.font-splash-info {
  font-family: var(--font-family-splash);
  color: blue;
}
.font-splash-author {
  font-family: var(--font-family-splash);
  font-size: 1em;
  display: block;
  margin-bottom: 1rem;
}
@media (max-width: 620px) {
  .font-splash-author {
    margin-top: 1.5em;
  }
}
.font-splash-header {
  font-family: var(--font-family-splash);
  color: green;
}
.font-splash-paragraph {
  font-family: var(--font-family-content);
  color: orange;
}
.font-splash-category {
  font-family: var(--font-family-splash);
  font-size: 0.9em;
  display: block;
  margin-bottom: 1rem;
}
@media (max-width: 620px) {
  .font-splash-category {
    margin-top: 1em;
  }
}

.bg-color--transparent {
  background-color: transparent;
}

.bg-color--white {
  background-color: white;
  color: black;
}

.bg-color--01 {
  background-color: var(--clr-primary-01);
}

.bg-color--02 {
  background-color: var(--clr-primary-02);
  color: white;
}
.bg-color--02 .link-base {
  color: #ffffff;
}
.bg-color--02 .link-base:after {
  -webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
          filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.bg-color--03 {
  background-color: var(--clr-primary-03);
  color: white;
}

.bg-color--04 {
  background-color: var(--clr-primary-grey);
}

.bg-gradient--01 {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(var(--color-1), var(--bg-opacity, 1))), to(rgba(var(--color-4), var(--bg-opacity, 0.6))));
  background: linear-gradient(to bottom, rgba(var(--color-1), var(--bg-opacity, 1)) 50%, rgba(var(--color-4), var(--bg-opacity, 0.6)) 100%);
}

.opacity-10 {
  --bg-opacity: 0.1;
}

.opacity-20 {
  --bg-opacity: 0.2;
}

.opacity-30 {
  --bg-opacity: 0.3;
}

.opacity-40 {
  --bg-opacity: 0.4;
}

.opacity-50 {
  --bg-opacity: 0.5;
}

.opacity-60 {
  --bg-opacity: 0.6;
}

.opacity-70 {
  --bg-opacity: 0.7;
}

.opacity-80 {
  --bg-opacity: 0.8;
}

.opacity-90 {
  --bg-opacity: 0.9;
}

.opacity-100 {
  --bg-opacity: 1;
}

/* Content Grid Layout */
.grid-template {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: [full-width-start] minmax(var(--padding-inline), 1fr) [breakout-start] minmax(0, var(--breakout-size)) [content-start] min(100% - var(--padding-inline) * 3, var(--content-max-width)) [content-end] minmax(0, var(--breakout-size)) [breakout-end] minmax(var(--padding-inline), 1fr) [full-width-end];
  grid-template-columns: [full-width-start] minmax(var(--padding-inline), 1fr) [breakout-start] minmax(0, var(--breakout-size)) [content-start] min(100% - var(--padding-inline) * 3, var(--content-max-width)) [content-end] minmax(0, var(--breakout-size)) [breakout-end] minmax(var(--padding-inline), 1fr) [full-width-end];
}

.grid-base {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: subgrid;
  grid-template-columns: subgrid;
  /* Inherit columns from parent */
  grid-column: full-width-start/full-width-end;
  /* Neutralisér alt layout, baggrund og padding */
  /* Fjern padding, også på child */
}
.grid-base.no-style {
  all: unset;
  display: contents;
  /* lad indhold flyde op uden ekstra box */
}
.grid-base .no-style .padding, .grid-base .no-style.padding {
  padding: 0 !important;
}
.grid-base p {
  margin-bottom: 1em;
  display: block;
}
.grid-subgrid-breakout {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: subgrid;
  grid-template-columns: subgrid;
  /* Inherit columns from parent */
  grid-column: breakout-start/breakout-end;
}
.grid-subgrid {
  grid-column: content-start/content-end;
  overflow: hidden;
}
[data-filter-name=dynamic-content] > .grid-subgrid {
  overflow: visible;
}
.grid-subgrid.readable {
  margin-inline: auto;
  padding-inline: var(--readable-padding, 0);
  line-height: 1.6;
  text-wrap: balance;
  /* Sørg for at billeder og headings følger med */
}
.grid-subgrid.readable > * {
  max-width: 100%;
}
@media (max-width: 620px) {
  .grid-subgrid.readable {
    padding-inline: inherit;
    margin-inline: inherit;
    max-width: inherit;
    line-height: inherit;
  }
}
.grid-subgrid figure, .grid-subgrid.readable figure {
  max-width: 100%;
  width: 100%;
  margin-inline: auto;
  display: block;
  overflow: hidden;
}
.grid-subgrid figure img, .grid-subgrid.readable figure img {
  display: block;
  max-width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
.grid-subgrid figure figcaption, .grid-subgrid.readable figure figcaption {
  font-size: 0.85em;
  line-height: 1.4;
  margin-top: 0.5em;
  text-align: center;
  color: #555;
}
.grid-full-width {
  grid-column: full-width-start/full-width-end;
}
.grid-breakout {
  grid-column: breakout-start/breakout-end;
}
.grid-expand-right {
  grid-column: content-start/full-width-end;
}

.padding {
  padding: calc(var(--padding-inline) * 2.5);
}
@media (max-width: 1024px) {
  .padding {
    padding: calc(var(--padding-inline) * 2);
  }
}
@media (max-width: 768px) {
  .padding {
    padding: calc(var(--padding-inline) * 2.5);
  }
}
@media (max-width: 620px) {
  .padding {
    padding: var(--padding-inline);
  }
}
.padding-full-width-image {
  padding: var(--padding-inline);
  /* Remove padding if an image exists inside */
  /* Apply padding only when no <img> exists */
}
.padding-full-width-image:has(div img) {
  padding: 0;
}
.padding-full-width-image > div:not(:has(img)) {
  padding: var(--padding-inline);
}
.padding-sides-only {
  padding: 0 calc(var(--padding-inline) * 2.5);
}
.padding-top-0 {
  padding-top: 0;
}
.padding-bottom-0 {
  padding-bottom: 0;
}

.subgrid-split {
  /* If .reverse-order is applied, last child comes first on small screens */
}
.subgrid-split-2 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr calc(var(--padding-inline) * 2) 1fr;
  grid-template-columns: repeat(2, 1fr);
  /* Two equal-width columns */
  -webkit-column-gap: calc(var(--padding-inline) * 2);
     -moz-column-gap: calc(var(--padding-inline) * 2);
          column-gap: calc(var(--padding-inline) * 2);
  /* Default - No Order Change */
  /* On smaller screens, switch to a single column */
}
.subgrid-split-2 > div.div-1 {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}
.subgrid-split-2 > div.div-2 {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  margin: 0 auto;
}
@media (max-width: 620px) {
  .subgrid-split-2 {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    /* Single column */
  }
}
.subgrid-split-2 > div > img {
  width: 100%;
  height: auto;
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.subgrid-split-2.reverse-order > div:first-child {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  /* Move first div below */
}
.subgrid-split-2.reverse-order > div:last-child {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  /* Move last div on top */
}
@media (max-width: 620px) {
  .subgrid-split-2.reverse-order-mobile-only > div:first-child {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    /* Move first div below */
  }
  .subgrid-split-2.reverse-order-mobile-only > div:last-child {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    /* Move last div on top */
  }
}
.subgrid-split-4 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr var(--padding-inline) 1fr var(--padding-inline) 1fr var(--padding-inline) 1fr;
  grid-template-columns: repeat(4, 1fr);
  /* Four columns */
  -webkit-column-gap: var(--padding-inline);
     -moz-column-gap: var(--padding-inline);
          column-gap: var(--padding-inline);
  row-gap: var(--padding-inline);
  /* On tablets, reduce to 2 columns */
  /* On mobile, switch to a single column */
}
.subgrid-split-4 > a img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 768px) {
  .subgrid-split-4 {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 620px) {
  .subgrid-split-4 {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
.subgrid-bento {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1rem 1fr 1rem 1fr 1rem 1fr;
  grid-template-columns: repeat(4, 1fr);
  /* 4 faste kolonner */
  gap: 1rem;
  grid-auto-rows: auto;
  /* Lad højden styres af indholdet */
  grid-auto-flow: dense;
  /* Featured */
}
.subgrid-bento .item {
  background: #eee;
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-align: center;
  padding: 1rem;
}
.subgrid-bento .wide {
  -ms-grid-column-span: 2;
  grid-column: span 2;
  aspect-ratio: auto;
  height: auto;
  margin: auto;
  background-color: transparent;
}
.subgrid-bento .featured {
  -ms-grid-column-span: 2;
  grid-column: span 2;
  -ms-grid-row-span: 1;
  grid-row: span 1;
  background-color: #ddd;
}
.subgrid-bento .article-item h3 {
  font-size: 1rem;
  margin: 0 0 0.5rem;
}
.subgrid-bento .read-more {
  background: none;
  border: 1px solid red;
  padding: 0.25rem 0.5rem;
  font-size: 0.9rem;
  cursor: pointer;
}
.subgrid-bento .text-block p {
  margin: 0;
  font-size: 0.9rem;
  text-align: left;
}

.flex-space-between {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.image-align-top {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.link-base {
  font-family: var(--font-family-splash);
  font-size: 1em;
  text-decoration: none !important;
  color: var(--clr-primary-black);
}
.link-base::after {
  content: "";
  display: inline-block;
  width: 2em;
  height: 2em;
  margin-left: 0.5em;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'%3E%3Cpath style='fill:%23000000' d='m17.5 5.999-.707.707 5.293 5.293H1v1h21.086l-5.294 5.295.707.707L24 12.499l-6.5-6.5z' data-name='Right'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}
.link-button {
  font-family: var(--font-family-splash);
  font-size: 1.1em;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 0.3rem;
  display: inline-block;
  color: white;
}
.link-button.navigation {
  background-color: var(--clr-primary-black);
  margin: 0 2em;
}
.link-button.navigation > a,
.link-button.navigation a:link,
.link-button.navigation a:visited {
  color: var(--clr-primary) !important;
  padding: 0 !important;
}
.link-button.wide {
  background-color: var(--clr-primary-black);
  color: var(--clr-primary);
  padding: 0.4rem 2rem;
}
.link-button.black {
  background-color: var(--clr-primary-black);
  color: var(--clr-primary);
}
.link-button.red {
  background-color: var(--clr-primary-02);
  color: var(--clr-primary);
}
.link-button.product {
  font-size: 0.8em;
  background-color: var(--clr-primary-black);
  color: var(--clr-primary);
}
.link-button.product:link {
  color: hsl(0, 0%, 100%);
}
.link-button.product:hover {
  background-color: #0056b3;
}
.link-button.small {
  font-family: var(--font-family-splash);
  font-size: 0.8em;
  text-decoration: none;
  display: inline-block;
  width: auto;
  background-color: var(--clr-primary-02);
}
.link-button.download-cover {
  font-family: var(--font-family-splash);
  font-size: 0.8em;
  text-decoration: none;
  display: inline-block;
  width: auto;
  color: #999;
  margin-top: 0.5rem;
  padding: 0;
  float: right;
}
@media (max-width: 620px) {
  .link-button.download-cover {
    float: none;
  }
}
.link-button.download-cover::before {
  content: "";
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.5;
  width: 0.8em;
  height: 0.8em;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgaWQ9IkRvd24iPjxwYXRoIGQ9Ik0xOC43NywxNS4zNmExLDEsMCwwLDAtMS40MS0uMTNMMTMsMTguODZWM2ExLDEsMCwwLDAtMiwwVjE4Ljg2TDYuNjQsMTUuMjNhMSwxLDAsMCwwLTEuMjgsMS41NGw2LDVhLjgzLjgzLDAsMCwwLC4xNi4wOWwuMTIuMDdhMSwxLDAsMCwwLC43MiwwbC4xMi0uMDdhLjgzLjgzLDAsMCwwLC4xNi0uMDlsNi01QTEsMSwwLDAsMCwxOC43NywxNS4zNloiLz48L2c+PC9zdmc+");
}
p > .link-button {
  margin: 1em 0;
}

.bg-gradient {
  height: 400px;
}
.bg-gradient--01 {
  background: radial-gradient(circle at 30% 10%, var(--clr-primary-01) 10%, hsla(357, 84%, 68%, 0.496) 50%, transparent 80%), radial-gradient(circle at 80% 80%, var(--clr-primary-01) 25%, transparent 100%), radial-gradient(circle at 20% 80%, var(--clr-primary-03) 20%, transparent 100%);
}

.book-details dl {
  font-size: 0.8rem;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto 1fr;
  grid-template-columns: auto 1fr;
  margin: 0;
  padding: 0;
}
.book-details dl dt:nth-of-type(odd),
.book-details dl dd:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.062745098);
  padding: 1em 1.5em;
}
.book-details dl dt:nth-of-type(even),
.book-details dl dd:nth-of-type(even) {
  background-color: rgba(255, 255, 255, 0.8823529412);
  padding: 1em 1.5em;
}
.book-details dl dt {
  margin: 0;
}
.book-details dl dd {
  margin: 0;
  text-align: right;
}

audio {
  width: 100%;
  /* Fuld bredde */
  border-radius: 2px;
  /* Afrundede hjørner */
  background-color: #f5f5f5;
  /* Lys baggrund */
  margin-top: 0.5em;
  font-weight: bold;
}

figure {
  display: block;
  padding-bottom: 1em;
  font-size: 0.9em;
}

/* Indholdstyper */
.youtube-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  cursor: pointer;
  overflow: hidden;
}
.youtube-wrapper img,
.youtube-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.youtube-wrapper .play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 2rem;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  cursor: pointer;
  z-index: 2;
}

.pagebuilder-video {
  position: relative;
  width: 100%;
}
.pagebuilder-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  max-width: 100%;
}
.pagebuilder-video.aspect-16-9 {
  aspect-ratio: 16/9;
}
.pagebuilder-video.aspect-4-3 {
  aspect-ratio: 4/3;
}
.pagebuilder-video.aspect-1-1 {
  aspect-ratio: 1/1;
}
.pagebuilder-video.aspect-16-9 iframe, .pagebuilder-video.aspect-4-3 iframe, .pagebuilder-video.aspect-1-1 iframe {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

/* =========================================
   ASYNC SECTIONS & TABS – stabil visning
   ========================================= */
/* Standard: skjul elementer med [hidden] */
[hidden] {
  display: none !important;
}

/* Skjul sektioner korrekt — uden at bryde fade-animation */
.async-section[hidden] {
  display: none !important;
  opacity: 0;
  visibility: hidden;
}

/* Når JS fjerner [hidden], bliver den vist men stadig transparent i starten */
.async-section {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.6s ease;
  transition: opacity 0.6s ease;
  will-change: opacity, transform;
  min-height: 200px;
  /* for at undgå hop før fade-in */
}

/* Når sektionen bliver synlig */
.async-section.visible {
  opacity: 1;
  visibility: visible;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
  /* valgfrit */
}

/* Ekstra: kun for tab-sektioner (beholder samme princip) */
.async-tabs {
  min-height: 212px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.6s ease;
  transition: opacity 0.6s ease;
}

.async-tabs.visible {
  opacity: 1;
  visibility: visible;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}

/* Ekstra sikkerhed: hvis hidden stadig sidder på visible-elementer */
.async-section.visible[hidden],
.async-tabs.visible[hidden] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Formatklasser */
.aspect-no-format {
  aspect-ratio: auto;
  background-color: #0056b3;
}

.aspect-16-9 {
  aspect-ratio: 16/9;
}

.aspect-1-2 {
  aspect-ratio: 1/2;
}

.aspect-3-4 {
  aspect-ratio: 3/4;
}

/* Slide-in starttilstand */
.site-header-container {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 4em;
  width: 100%;
  z-index: 1000;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.site-header.header-hidden-while-scrolling-down {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}
.site-header.header-show-on-scroll-up {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.site-header-logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.site-header-logo img {
  width: 120px !important;
  margin-top: 3px;
}
@media (min-width: 1030px) {
  .site-header-logo img {
    margin-left: 10px;
  }
}
@media (max-width: 620px) {
  .site-header-logo {
    -webkit-box-flex: 2;
        -ms-flex-positive: 2;
            flex-grow: 2;
  }
}
.site-header-search {
  margin-right: 1em;
}
.site-header-top-navigation {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
@media (max-width: 620px) {
  .site-header-top-navigation {
    display: none !important;
  }
}
.site-header-navigation .link-button.menu-item-hamburger-only {
  border: 0;
  padding: 1em;
  margin: 0;
  background-color: inherit;
}
.site-header-navigation .link-button.menu-item-hamburger-only > a {
  color: black !important;
}

.site-header-top-navigation {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
}
.site-header-top-navigation .menu-top-navigation-container {
  width: 100%;
}
.site-header-top-navigation .menu-top-navigation-container > ul.menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.site-header-top-navigation .menu-top-navigation-container > ul.menu > li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.site-header-top-navigation .menu-top-navigation-container > ul.menu > li > a {
  font-family: var(--font-family-splash);
  font-size: 1em;
  text-decoration: none;
  color: #000;
  padding: 0 1em;
}

.top-search {
  position: relative;
  font-size: 1.3em;
  height: 1.5em;
  margin: auto auto auto 1em;
  background: transparent;
  color: white;
  border: 0;
  font-weight: 300;
  cursor: pointer;
}
.top-search::before {
  content: "|";
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 1em;
  color: #eaf700;
  -webkit-animation: blink 0.8s infinite alternate;
          animation: blink 0.8s infinite alternate;
}
.top-search::-webkit-input-placeholder {
  color: rgba(var(--primary-text-color), 1);
  letter-spacing: 1px;
}
.top-search::-moz-placeholder {
  color: rgba(var(--primary-text-color), 1);
  letter-spacing: 1px;
}
.top-search:-ms-input-placeholder {
  color: rgba(var(--primary-text-color), 1);
  letter-spacing: 1px;
}
.top-search::-ms-input-placeholder {
  color: rgba(var(--primary-text-color), 1);
  letter-spacing: 1px;
}
.top-search::placeholder {
  color: rgba(var(--primary-text-color), 1);
  letter-spacing: 1px;
}
.top-search:focus {
  outline: none;
  -webkit-transition: all;
  transition: all;
}
.top-search:focus::before {
  display: none;
}

@-webkit-keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
.search-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: rgba(11, 111, 125, 0.01);
  cursor: pointer;
}
.search-container svg {
  width: 25px;
  height: 25px;
  fill: rgb(0, 0, 0);
  stroke: rgb(0, 0, 0);
  stroke-width: 20px;
}
.search-container path {
  fill: rgba(var(--primary-text-color-inv), 1);
}

.search-overlay {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: min(100% - var(--padding-inline) * 2, var(--content-max-width));
  height: 0;
  background: #000;
  z-index: 1200;
  -webkit-transition: height 0.3s ease;
  transition: height 0.3s ease;
}
@media (max-width: 768px) {
  .search-overlay {
    grid-column: full-width-start/full-width-end;
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }
}
.search-overlay.open {
  height: 4em;
}
.search-overlay .search-field {
  padding: 1em;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
@media (max-width: 768px) {
  .search-overlay .search-field {
    padding: 1em 0;
  }
}
.search-overlay .search-field input {
  width: 90%;
}
.search-overlay.open .search-field {
  opacity: 1;
  visibility: visible;
  -webkit-transition-delay: 0.35s;
          transition-delay: 0.35s;
}
.search-response {
  display: none;
  position: absolute;
  top: 4em;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-height: 60vh;
  overflow-y: auto;
  -ms-scroll-chaining: none;
      overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: white;
  padding: 1em;
  z-index: 1201;
  -webkit-box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
          box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}
@media (max-width: 620px) {
  .search-response {
    max-height: 90vh;
  }
}
.search-response.visible {
  display: block;
  -webkit-animation: fadeDown 0.25s ease;
          animation: fadeDown 0.25s ease;
}
.search-response ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.search-response ul li {
  margin-bottom: 1em;
}
.search-response ul li span:first-child {
  font-weight: bold;
}
.search-response ul li span {
  display: block;
}
.search-divider {
  border-top: 1px solid #ddd;
  margin: 2em 0;
}

@-webkit-keyframes fadeDown {
  from {
    opacity: 0;
    -webkit-transform: translateY(-5%);
            transform: translateY(-5%);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes fadeDown {
  from {
    opacity: 0;
    -webkit-transform: translateY(-5%);
            transform: translateY(-5%);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
.button_container {
  position: relative;
  right: 0;
  height: 1.5rem;
  width: 1.6rem;
  cursor: pointer;
  z-index: 100;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}
.button_container:hover {
  opacity: 0.7;
}
.button_container.active .top {
  -webkit-transform: translateY(12px) rotate(45deg);
          transform: translateY(12px) rotate(45deg);
  background: #000;
}
.button_container.active .middle {
  opacity: 0;
  background: #000;
}
.button_container.active .bottom {
  -webkit-transform: translateY(-6px) rotate(-45deg);
          transform: translateY(-6px) rotate(-45deg);
  background: #000;
}
.button_container span {
  background: black;
  border: none;
  height: 3px;
  width: 100%;
  position: absolute;
  border-radius: 5px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  top: 0;
  left: 0;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
  cursor: pointer;
}
.button_container span:nth-of-type(2) {
  top: 9px;
}
.button_container span:nth-of-type(3) {
  top: 18px;
}

.overlay {
  position: absolute;
  top: 4em;
  right: 0;
  width: 20rem;
  background: rgba(255, 255, 255, 0.95);
  opacity: 0;
  -webkit-transform: translateY(-5%);
          transform: translateY(-5%);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  pointer-events: none;
}
.overlay.open {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  pointer-events: auto;
}

.menu-item-hamburger-only a {
  color: orange;
}

.menu-items {
  list-style: none;
  padding: 1em 4em 2em 2em;
  margin: 0;
  position: relative;
  height: 100%;
  width: 100%;
}
.menu-items li {
  font-family: var(--font-family-splash);
  display: block;
  position: relative;
  opacity: 0;
  padding: 1em;
  -webkit-animation: fadeInRight 0.5s ease forwards;
          animation: fadeInRight 0.5s ease forwards;
  -webkit-animation-delay: calc(0.15s * var(--i));
          animation-delay: calc(0.15s * var(--i));
}
.menu-items li a,
.menu-items li a:link,
.menu-items li a:visited {
  text-decoration: none;
  color: #000;
}
.menu-items li:nth-child(1) {
  --i: 1;
}
.menu-items li:nth-child(2) {
  --i: 2;
}
.menu-items li:nth-child(3) {
  --i: 3;
}
.menu-items li:nth-child(4) {
  --i: 4;
}
.menu-items li:nth-child(5) {
  --i: 5;
}
.menu-items li:nth-child(6) {
  --i: 6;
}
.menu-items li:nth-child(7) {
  --i: 7;
}
.menu-items li:nth-child(8) {
  --i: 8;
}
.menu-items li:nth-child(9) {
  --i: 9;
}
.menu-items li:nth-child(10) {
  --i: 10;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20%);
            transform: translateX(20%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20%);
            transform: translateX(20%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
.search-group {
  margin: 1em 0;
}
.search-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.search-group li {
  padding: 0.5em;
  border-left: 4px solid transparent;
  margin-bottom: 0.25em;
}
.search-group li.match-title {
  border-color: green;
}
.search-group li.match-isbn {
  border-color: blue;
}
.search-group li.match-author {
  border-color: orange;
}
.search-group.products .results-grid, .search-group.authors .results-grid {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1em;
  margin-top: 0.5em;
}
.search-group.products .results-grid .result-item a, .search-group.authors .results-grid .result-item a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: #f4f4f4;
  height: 100%;
  overflow: hidden;
  /* skjul forfatter-billeder */
}
.search-group.products .results-grid .result-item a:hover, .search-group.authors .results-grid .result-item a:hover {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
}
.search-group.products .results-grid .result-item a .author-img, .search-group.authors .results-grid .result-item a .author-img {
  display: none;
}
.search-group.products .results-grid .result-item a img, .search-group.authors .results-grid .result-item a img {
  width: 100%;
  height: 200px;
  -o-object-fit: cover;
     object-fit: cover;
  margin-bottom: 0.5em;
  border-radius: 2px;
}
.search-group.products .results-grid .result-item a .meta, .search-group.authors .results-grid .result-item a .meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: 0.9em;
  padding: 0.5em;
  min-height: 4em;
  overflow: hidden;
}
.search-group.products .results-grid .result-item a .meta .top, .search-group.authors .results-grid .result-item a .meta .top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25em;
  /* nyt felt til author-navne */
}
.search-group.products .results-grid .result-item a .meta .top strong, .search-group.authors .results-grid .result-item a .meta .top strong {
  font-weight: bold;
}
.search-group.products .results-grid .result-item a .meta .top .authors, .search-group.authors .results-grid .result-item a .meta .top .authors {
  margin-top: 0.25rem;
  font-style: italic;
  color: #555;
}
.search-group.products .results-grid .result-item a .meta .top .author-name, .search-group.authors .results-grid .result-item a .meta .top .author-name {
  display: inline-block;
  padding: 0.4em 0.8em;
  margin: 0.2em 0;
  background: #f0f0f0;
  border-radius: 999px;
  font-size: 0.9em;
  cursor: pointer;
  -webkit-transition: background 0.2s;
  transition: background 0.2s;
}
.search-group.products .results-grid .result-item a .meta .top .author-name:hover, .search-group.authors .results-grid .result-item a .meta .top .author-name:hover {
  background: #ddd;
}
.search-group.products .results-grid .result-item a .meta .bottom, .search-group.authors .results-grid .result-item a .meta .bottom {
  margin-top: auto;
}
.search-group.products .results-grid .result-item a .meta .bottom .isbn, .search-group.authors .results-grid .result-item a .meta .bottom .isbn {
  font-size: 0.8em;
  color: #999;
}

.inline-search {
  overflow: hidden;
  min-height: 3em;
  -webkit-transition: height 0.4s ease;
  transition: height 0.4s ease;
}
.inline-search-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #f4f4f4 !important;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: inherit;
}
.inline-search-input {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 0.75em 1em;
  border: none;
  background: transparent;
  font-size: 1em;
}
.inline-search-input:focus {
  outline: none;
}
.inline-search-loading {
  margin: 1em 0;
}
.inline-search-clear {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 2em;
          flex: 0 0 2em;
  height: 2em;
  display: none;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: none;
  border: none;
  font-size: 1.2em;
  cursor: pointer;
  color: #666;
}
.inline-search-clear:hover {
  color: #000;
}
.inline-search-clear.visible {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.inline-search-results {
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.inline-search-results.visible {
  opacity: 1;
}
.inline-search-results-list {
  display: -ms-grid;
  display: grid;
  gap: 0.75em;
  padding: 0.5em 1em 1em;
}

.inline-results-list {
  opacity: 1;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}
.inline-results-list > li.no-results {
  background-color: var(--clr-primary-02);
  padding: 0.8em 1em;
  color: white;
}

.inline-results-list.fading-out {
  opacity: 0.2;
}

.inline-results-list.fading-in {
  opacity: 1;
}

/* Dæmp genreknapper under søgning */
.genre-buttons {
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.genre-buttons.searching {
  opacity: 0.2;
  pointer-events: none;
}

/* ============================================================
   SWIPER – POLITIKENS FORLAG (optimeret samlet version)
   ============================================================ */
/* === Globale variabler === */
:root {
  --swiper-theme-color: #007aff;
  --swiper-navigation-size: 44px;
}

/* ============================================================
   GRUNDLÆGGENDE KONFIGURATION
   ============================================================ */
.swiper,
.swiper-container {
  width: 100%;
  margin: 0 auto;
  -webkit-transition: height 0.5s ease;
  transition: height 0.5s ease;
  position: relative;
  min-height: 260px;
}
.swiper.loading::before,
.swiper-container.loading::before {
  content: "Henter billeder...";
  position: absolute;
  inset: 0;
  background-color: #fff;
  color: #000;
  z-index: 100;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 1.5em;
  font-family: var(--font-family-splash);
  text-transform: uppercase;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  opacity: 1;
}
.swiper.loading .swiper-wrapper,
.swiper-container.loading .swiper-wrapper {
  visibility: hidden;
}
.swiper.loaded::before,
.swiper-container.loaded::before {
  opacity: 0;
}

.swiper-container-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

/* ============================================================
   WRAPPER + SLIDES
   ============================================================ */
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
          transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  margin-left: 0;
}

.swiper-slide {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 100%;
  height: auto;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
}
.swiper-slide img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: -webkit-filter 0.3s ease, -webkit-transform 0.3s ease;
  transition: -webkit-filter 0.3s ease, -webkit-transform 0.3s ease;
  transition: filter 0.3s ease, transform 0.3s ease;
  transition: filter 0.3s ease, transform 0.3s ease, -webkit-filter 0.3s ease, -webkit-transform 0.3s ease;
}
.swiper-slide:hover img {
  -webkit-filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
          filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
}

/* ============================================================
   NAVIGATION (Prev / Next – rettet retning + uden cirkelbaggrund)
   ============================================================ */
.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 30%;
  margin-top: 0 !important;
  width: var(--swiper-navigation-size);
  height: var(--swiper-navigation-size);
  z-index: 10;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
  background: none;
  /* fjern cirkel */
  -webkit-transition: color 0.3s ease, opacity 0.3s ease;
  transition: color 0.3s ease, opacity 0.3s ease;
}
.swiper-button-prev:hover,
.swiper-button-next:hover {
  color: #000;
}
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}
.swiper-button-prev.swiper-button-hidden,
.swiper-button-next.swiper-button-hidden {
  opacity: 0;
  pointer-events: none;
}
.swiper-button-prev svg,
.swiper-button-next svg {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  fill: currentColor;
  -webkit-transform-origin: center;
          transform-origin: center;
  pointer-events: none;
}

.swiper-button-prev {
  left: 8px;
  /* vend pilen horisontalt */
}
.swiper-button-prev svg {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.swiper-button-next {
  right: 8px;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.swiper-pagination {
  position: relative !important;
  text-align: left !important;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  z-index: 10;
  margin-top: 2rem;
}

.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 50%;
  background: #ccc;
  opacity: 1;
  margin: 0 4px !important;
  -webkit-transition: background 0.3s ease;
  transition: background 0.3s ease;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}
.swiper-pagination-bullet:only-child {
  display: none !important;
}

.swiper-pagination-bullet-active {
  background-color: #000 !important;
}

/* ============================================================
   GRID-VARIANT (desktop)
   ============================================================ */
@media (min-width: 769px) {
  .swiper[data-variant=grid],
  .swiper-container[data-variant=grid] {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1rem 1fr 1rem 1fr 1rem 1fr;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }
  .swiper[data-variant=grid] .swiper-wrapper,
  .swiper-container[data-variant=grid] .swiper-wrapper {
    display: contents;
  }
  .swiper[data-variant=grid] .swiper-slide,
  .swiper-container[data-variant=grid] .swiper-slide {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: auto !important;
    margin-right: 0 !important;
  }
  .swiper[data-variant=grid] .swiper-button-next,
  .swiper[data-variant=grid] .swiper-button-prev,
  .swiper[data-variant=grid] .swiper-pagination,
  .swiper-container[data-variant=grid] .swiper-button-next,
  .swiper-container[data-variant=grid] .swiper-button-prev,
  .swiper-container[data-variant=grid] .swiper-pagination {
    display: none !important;
  }
}

/* ============================================================
   COVER DESIGN
   ============================================================ */
.cover-img-wrapper {
  width: 100%;
  max-width: 400px;
  overflow: hidden;
}

.cover-img {
  display: block;
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  background: #f4f4f4;
  -webkit-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out; /* bruges kun under fade */
  will-change: opacity;
}

.cover-img,
.cover-fallback {
  width: 100%;
  height: auto;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}

.cover-img {
  -webkit-transition: -webkit-filter 0.3s ease, -webkit-transform 0.3s ease;
  transition: -webkit-filter 0.3s ease, -webkit-transform 0.3s ease;
  transition: filter 0.3s ease, transform 0.3s ease;
  transition: filter 0.3s ease, transform 0.3s ease, -webkit-filter 0.3s ease, -webkit-transform 0.3s ease;
}
@media (max-width: 620px) {
  .cover-img {
    margin-top: 0;
  }
}

.cover-img {
  opacity: 0;
  -webkit-transition: opacity 1.5s ease;
  transition: opacity 1.5s ease; /* længere fade */
  -webkit-transition-delay: 1s;
          transition-delay: 1s; /* vent 1 sekund */
  background: #f2f2f2; /* placeholder-grå */
}

.cover-img[src*=fallback] {
  opacity: 1; /* fallback vises straks */
  -webkit-transition: none;
  transition: none; /* ingen delay/fade for fallback */
}

.cover-img.loaded {
  opacity: 1; /* fade-in til 100% */
}

.cover-author {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: left;
      -ms-flex-pack: left;
          justify-content: left;
  font-size: 0.85rem;
  line-height: 1.2rem;
  color: rgba(0, 0, 0, 0.5);
  font-family: var(--font-family-splash);
  min-height: 3lh;
}

.cover-title {
  font-family: var(--font-family-splash);
  margin-top: 1.5rem;
  font-size: 1.2rem;
  background: none;
  word-break: normal;
  overflow-wrap: break-word;
  white-space: normal;
  min-height: 2lh;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.075);
  padding-bottom: 0.5rem;
  margin-bottom: 0.8rem;
}

.cover-fallback {
  aspect-ratio: 3/4;
  background: #eee;
  color: #666;
  font-size: 0.8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  padding: 0.5rem;
}

.page {
  background-color: red;
}

article {
  margin: 0 auto;
  /* Mindre SVG i editoren */
}
@media (max-width: 620px) {
  article {
    width: 100%;
    margin: 0 auto;
  }
}
article.infobox {
  clear: both;
  margin: 2rem auto;
}
article .quote {
  border-left: 3px solid rgb(231, 231, 231);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.2em;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  color: var(--clr-primary-black);
  margin: 2rem auto;
}
@media (max-width: 620px) {
  article .quote {
    margin: 1em auto;
    margin-top: 2rem;
    font-size: 70%;
  }
}
article .quote-content p:nth-child(1) {
  font-family: var(--font-family-display);
  font-size: 1.3rem;
  line-height: 2.2rem;
  margin-bottom: 0.5em;
}
article .quote-content p:nth-child(2) {
  color: #999;
}
article .quote-content > .block-editor-inner-blocks {
  width: 100%;
  padding: 0 0.2em;
  min-width: 10px;
  display: block;
  font-family: var(--font-family-display);
}
article .quote-content > .block-editor-inner-blocks p:nth-child(1) {
  margin-bottom: 1.5em;
  border-bottom: 1px solid rgb(212, 212, 212);
  display: block;
}
article .quote-content > .block-editor-inner-blocks p:nth-child(1):before {
  content: "Citat: ";
  color: #999;
}
article .quote-content > .block-editor-inner-blocks p:nth-child(2) {
  border-bottom: 1px solid rgb(212, 212, 212);
}
article .quote-content > .block-editor-inner-blocks p:nth-child(2):before {
  content: "Afsender: ";
  color: #999;
}
article .quote .quote-icon {
  padding-left: 3em;
  width: 10rem;
  height: 100px;
  color: var(--clr-primary-02);
  margin-top: -1.5em;
}
article .block-editor-block-list__block .fancy-quote .quote-icon {
  width: 40px;
  height: 40px;
  display: block;
  margin-bottom: 0.5em;
}
article.img-control-float-right, article.img-control-float-left {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  max-width: 300px;
  max-height: 300px;
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}
article.img-control-float-right {
  float: right;
  padding: 1rem 0 2rem 1rem;
}
article.img-control-float-left {
  float: left;
  padding: 1rem 2rem 1rem 0;
}

.custom-spacer-line {
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.3);
}

.custom-image-row {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 2rem 1fr 2rem 1fr;
  grid-template-columns: repeat(3, 1fr);
  -webkit-column-gap: 2rem;
     -moz-column-gap: 2rem;
          column-gap: 2rem;
  row-gap: 4rem;
  grid-column: full-width-start/full-width-end;
  margin-bottom: 2rem;
}
.custom-image-item img {
  max-width: 100%;
  height: auto;
  margin-bottom: 0.5rem;
  display: block;
}
.custom-image-item .custom-image-text {
  font-size: 0.9rem;
}
@media (max-width: 900px) {
  .custom-image-row {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .custom-image-row {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}

.custom-info-box {
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: calc(var(--padding-inline) * 1.5) calc(var(--padding-inline) * 2);
  margin: 1.5em 0;
  line-height: 1.6;
  background-clip: padding-box;
  clear: both;
  /* --- Center --- */
  /* ========================================
     LEFT VARIANTS
  ======================================== */
  /* prettier-ignore */
  /* prettier-ignore */
  /* prettier-ignore */
  /* ========================================
     RIGHT VARIANTS
  ======================================== */
  /* prettier-ignore */
  /* prettier-ignore */
  /* prettier-ignore */
}
@media (max-width: 620px) {
  .custom-info-box {
    float: none !important;
    width: auto !important;
    margin: 1em 0 !important;
    margin-inline: auto !important;
  }
}
.custom-info-box * {
  color: inherit;
}
.custom-info-box p {
  font-size: 0.9rem;
  line-height: 1.4rem;
  margin-bottom: 0.8em;
}
.custom-info-box.center {
  float: none;
  margin-inline: auto;
  max-width: 60ch;
  clear: both;
}
.custom-info-box.left-inset {
  float: left;
  margin-left: calc(var(--breakout-size) * -2);
  width: 30ch;
  margin-right: 1.5em;
}
.custom-info-box.left-aligned {
  float: left;
  width: 30ch;
  margin-left: calc((var(--breakout-max-width) - var(--readable-total)) / -2);
  margin-right: 1.5em;
}
.custom-info-box.left-breakout {
  float: left;
  margin-left: calc((var(--breakout-max-width) - var(--readable-total)) / -2 - var(--breakout-size));
  width: 30ch;
  margin-right: 1.5em;
}
.custom-info-box.right-inset {
  float: right;
  margin-right: calc(var(--breakout-size) * -2);
  width: 30ch;
  margin-left: 1.5em;
}
.custom-info-box.right-aligned {
  float: right;
  width: 30ch;
  margin-right: calc((var(--breakout-max-width) - var(--readable-total)) / -2);
  margin-left: 1.5em;
}
.custom-info-box.right-breakout {
  float: right;
  margin-right: calc((var(--breakout-max-width) - var(--readable-total)) / -2 - var(--breakout-size));
  width: 30ch;
  margin-left: 1.5em;
}

/* Product Styles */
.product-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  overflow: hidden;
  margin-top: 2rem;
}
@media (max-width: 768px) {
  .product-container {
    margin-bottom: 3rem !important;
  }
}
.product-image {
  min-height: 200px;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.product-image img {
  -o-object-fit: contain;
     object-fit: contain;
}
.product-info {
  font-family: var(--font-family-splash);
  font-weight: 100;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100px;
}
.product-author {
  font-size: 0.8em;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.product-title {
  font-size: 1em;
  line-height: 1.2em;
  padding-bottom: 1em;
  padding-right: 2em;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
.tabs-container {
  overflow: hidden;
  margin-top: 2rem;
}

.tabs-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-bottom: 1px solid color-mix(in srgb, var(--clr-primary-black) 10%, transparent);
}
.tabs-nav > button {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 15px 0;
  text-align: left;
  background: none;
  border: none;
  color: color-mix(in srgb, var(--clr-primary-black) 50%, transparent);
  cursor: pointer;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  position: relative;
  outline: none;
  font-family: var(--font-family-splash);
}
.tabs-nav > button.active {
  color: var(--clr-primary-black);
}
.tabs-nav > button.active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0%;
  width: 100%;
  height: 2px;
  background: color-mix(in srgb, var(--clr-primary-black) 100%, transparent);
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
  border-radius: 2px;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

.tabs-content {
  padding: 0rem 0 0 0;
  font-size: 0.8em;
}
.tabs-content hr {
  background-color: color-mix(in srgb, var(--clr-primary-black) 10%, transparent);
  height: 1px;
  border: 0;
}
.tabs-content div[x-show="activeTab === 1"],
.tabs-content div[x-show="activeTab === 2"],
.tabs-content div[x-show="activeTab === 3"],
.tabs-content div[x-show="activeTab === 4"] {
  display: block;
  -webkit-animation: fadeIn 0.4s ease-in-out;
          animation: fadeIn 0.4s ease-in-out;
}
.tabs-content h4 {
  margin-bottom: 10px;
  text-transform: none;
}
.tabs-content p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  font-size: calc(var(--fs-300) - 0.2rem);
  padding: 0.5rem 1rem;
}
.tabs-content p span {
  font-weight: 400;
}
.tabs-content p:nth-of-type(odd) {
  background-color: color-mix(in srgb, var(--clr-primary-01) 20%, transparent);
}
.tabs-content a {
  display: inline-block;
  margin-bottom: 1.5rem;
}

.accordion-container {
  margin-top: 2rem;
}

.accordion-button {
  font-family: var(--font-family-splash);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  color: color-mix(in srgb, var(--clr-primary-black) 60%, white);
  font-weight: 100;
  padding: 0.5rem 0;
  text-align: left;
}
.accordion-button .accordion-icon {
  display: inline-block;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  font-size: 1.4em;
  -webkit-transform-origin: center;
          transform-origin: center;
  font-family: var(--font-family-content);
}
.accordion-button .accordion-icon.open {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.accordion-content {
  overflow: hidden;
  height: 0; /* Default closed */
  -webkit-transition: height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  transition: height 0.4s ease-in-out, opacity 0.3s ease-in-out;
}
.accordion-content.open {
  opacity: 1;
}

.form {
  color: var(--primary-color);
  background-color: var(--secondary-color);
}

.site-header-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.site-header-container .logo {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 1em 0 0.5em 0;
}
.site-header-container .logo img {
  width: 200px;
}
@media screen and (max-width: 620px) {
  .site-header-container .logo img {
    width: 80px;
  }
}
.site-header-container .navigation {
  -webkit-box-flex: 4;
      -ms-flex: 4;
          flex: 4;
  font-size: 0.9em;
}
@media screen and (max-width: 620px) {
  .site-header-container .navigation {
    background-color: #efefef;
    position: absolute;
    z-index: 100000;
    top: 2em;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    visibility: visible;
  }
  .site-header-container .navigation.hide {
    visibility: hidden;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}
.site-header-container .navigation ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  list-style: none;
}
@media screen and (max-width: 620px) {
  .site-header-container .navigation ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.site-header-container .navigation ul li {
  color: var(--text-color);
  border-right: 1px solid #ddd;
  padding-right: 0.5em;
  margin-right: 0.5em;
}
@media screen and (max-width: 620px) {
  .site-header-container .navigation ul li {
    border: 0;
    line-height: 2em;
    font-size: 1.5em;
  }
}
.site-header-container .navigation ul li:last-child {
  border-right: 0px solid #ddd;
  padding-right: 0;
  margin-right: 0;
}
.site-header-container .navigation ul li a {
  color: var(--text-color);
}
.site-header-container .navigation ul li.current-menu-item a, .site-header-container .navigation ul li.current-menu-item a:link, .site-header-container .navigation ul li.current-menu-item a:visited,
.site-header-container .navigation ul li.current-page-ancestor a, .site-header-container .navigation ul li.current-page-ancestor a:link, .site-header-container .navigation ul li.current-page-ancestor a:visited {
  color: var(--main-color) !important;
}

#menubutton {
  display: none;
}
@media screen and (max-width: 620px) {
  #menubutton {
    display: contents;
    display: inline-block;
    position: absolute;
    z-index: 1000000;
    top: 3em;
    right: 1em;
  }
}

.menubutton {
  position: relative;
  height: 27px;
  width: 27px;
  overflow: hidden;
  z-index: 1000001;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}
.menubutton.active .top {
  -webkit-transform: translateY(12px) translateX(0) rotate(45deg);
          transform: translateY(12px) translateX(0) rotate(45deg);
  background: #000;
}
.menubutton.active .middle {
  opacity: 0;
  background: #000;
}
.menubutton.active .bottom {
  -webkit-transform: translateY(-6px) translateX(0) rotate(-45deg);
          transform: translateY(-6px) translateX(0) rotate(-45deg);
  background: #000;
}
.menubutton span {
  background: black;
  border: none;
  height: 3px;
  width: 100%;
  position: absolute;
  border-radius: 5px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  top: 0;
  left: 0;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
  cursor: pointer;
}
.menubutton span:nth-of-type(2) {
  top: 9px;
}
.menubutton span:nth-of-type(3) {
  top: 18px;
}

footer {
  width: 100%;
}

.footer {
  margin-top: 1em;
  font-size: 0.9em;
  line-height: 1.6em;
}
@media screen and (max-width: 768px) {
  .footer-logo {
    margin: auto;
  }
}
.footer-logo img {
  width: 120px;
}
@media screen and (max-width: 768px) {
  .footer-logo img {
    width: 160px;
    margin: 2em;
  }
}
@media screen and (max-width: 768px) {
  .footer-adress {
    margin: auto;
  }
}
.footer-adress span {
  display: block;
}
.footer-menu {
  text-align: right;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media screen and (max-width: 768px) {
  .footer-menu {
    text-align: center;
  }
}
.footer-menu a,
.footer-menu a:link,
.footer-menu a:visited {
  display: inline-block;
}
.footer-after {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 2em;
}
.footer-after--links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  font-size: 0.8em;
}

footer.fade-in {
  opacity: 0;
  -webkit-animation: fadeIn 0.6s forwards ease;
          animation: fadeIn 0.6s forwards ease;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
.footer-social-media--icons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.footer-social-media--icons-container {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 1em 0 1.5em 0;
  margin: 3em 0 1em 0;
  width: 100%;
  display: inline-block;
}
.footer-social-media--icons-container > span {
  display: block;
  width: 100%;
  font-size: 0.8em;
  font-weight: bold;
  padding-bottom: 1em;
}
.footer-social-media--icons > a {
  margin: 0 0.5em;
}

.footer-facebook {
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyBkYXRhLW5hbWU9IkxheWVyIDEiIGlkPSJMYXllcl8xIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGUvPjxwYXRoIGQ9Ik0yNTYsMEMxMTQuNjE1LDAsMCwxMTQuNjE1LDAsMjU2UzExNC42MTUsNTEyLDI1Niw1MTIsNTEyLDM5Ny4zODUsNTEyLDI1NiwzOTcuMzg1LDAsMjU2LDBabTY3LjU5LDE1My40MjhzLTI2LjE5NC0yLjA2NC0zNi41MTMsMS43NDZjLTE3LjA1Niw2LjMtMTcuNDYyLDIxLjAzNC0xNy40NjIsMzUuMDg0djI4LjY5NGg1Mi4xNDlsLTcuNjIsNTQuODg4SDI2OS42MTVWNDA5LjMzM2gtNTguOVYyNzMuODRIMTYxLjc0NFYyMTguOTUyaDQ4Ljk3NFYxNzIuNGMwLTQ5LjI5MiwzNy45NDItNjcuMTUxLDYwLjU2My02OS4yOTRzNTIuMzA5LDQuMjg2LDUyLjMwOSw0LjI4NloiLz48L3N2Zz4=");
  background-size: contain;
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
  display: block;
}

.footer-instagram {
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyBkYXRhLW5hbWU9IkxheWVyIDEiIGlkPSJMYXllcl8xIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGUvPjxwYXRoIGQ9Ik0zMTQuNzU3LDE0Ny41MjVIMTk3LjI0M2E0OS43MTcsNDkuNzE3LDAsMCwwLTQ5LjcxOCw0OS43MThWMzE0Ljc1N2E0OS43MTgsNDkuNzE4LDAsMCwwLDQ5LjcxOCw0OS43MThIMzE0Ljc1N2E0OS43MTgsNDkuNzE4LDAsMCwwLDQ5LjcxNy00OS43MThWMTk3LjI0M0E0OS43MTcsNDkuNzE3LDAsMCwwLDMxNC43NTcsMTQ3LjUyNVpNMjU2LDMyNC4zOTFBNjguMzkxLDY4LjM5MSwwLDEsMSwzMjQuMzkxLDI1Niw2OC4zOTEsNjguMzkxLDAsMCwxLDI1NiwzMjQuMzkxWk0zMjcuMjQyLDIwMS41OGExNi4yNzEsMTYuMjcxLDAsMSwxLDE2LjI3LTE2LjI3MUExNi4yNzEsMTYuMjcxLDAsMCwxLDMyNy4yNDIsMjAxLjU4WiIvPjxwYXRoIGQ9Ik0yNTYsMjExLjU0NUE0NC40NTUsNDQuNDU1LDAsMSwwLDMwMC40NTUsMjU2LDQ0LjQ1NSw0NC40NTUsMCwwLDAsMjU2LDIxMS41NDVaIi8+PHBhdGggZD0iTTI1NiwwQzExNC42MTUsMCwwLDExNC42MTUsMCwyNTZTMTE0LjYxNSw1MTIsMjU2LDUxMiw1MTIsMzk3LjM4NSw1MTIsMjU2LDM5Ny4zODUsMCwyNTYsMFpNMzg5LjMzMywzMTIuNUE3Ni44MzYsNzYuODM2LDAsMCwxLDMxMi41LDM4OS4zMzNIMTk5LjVBNzYuODM3LDc2LjgzNywwLDAsMSwxMjIuNjY2LDMxMi41VjE5OS41QTc2LjgzNiw3Ni44MzYsMCwwLDEsMTk5LjUsMTIyLjY2N0gzMTIuNUE3Ni44MzYsNzYuODM2LDAsMCwxLDM4OS4zMzMsMTk5LjVaIi8+PC9zdmc+");
  background-size: contain;
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
  display: block;
}

.footer-youtube {
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyBkYXRhLW5hbWU9IkxheWVyIDEiIGlkPSJMYXllcl8xIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGUvPjxwYXRoIGQ9Ik0yNTYsMEMxMTQuNjE1LDAsMCwxMTQuNjE1LDAsMjU2UzExNC42MTUsNTEyLDI1Niw1MTIsNTEyLDM5Ny4zODUsNTEyLDI1NiwzOTcuMzg1LDAsMjU2LDBaTTE3NC4wNjgsMzgyLjY2N1YxMjkuMzMzTDM5Ny45MzIsMjU4LjE1NVoiLz48L3N2Zz4=");
  background-size: contain;
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
  display: block;
}

/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend, textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

ul {
  list-style: none;
}

button, input, select {
  margin: 0;
}

html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

*, *::before, *::after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

video {
  height: auto;
  max-width: 100%;
}

iframe {
  border: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td, th {
  padding: 0;
}