/*Globale variabler*/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: #F5F7ED;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 700 700' width='700' height='700' opacity='0.87'%3E%3Cdefs%3E%3Cfilter id='nnnoise-filter' x='-20%25' y='-20%25' width='140%25' height='140%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='linearRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.2' numOctaves='4' seed='15' stitchTiles='stitch' x='0%25' y='0%25' width='100%25' height='100%25' result='turbulence'%3E%3C/feTurbulence%3E%3CfeSpecularLighting surfaceScale='5' specularConstant='1.4' specularExponent='20' lighting-color='%23dbc9bd' x='0%25' y='0%25' width='100%25' height='100%25' in='turbulence' result='specularLighting'%3E%3CfeDistantLight azimuth='3' elevation='81'%3E%3C/feDistantLight%3E%3C/feSpecularLighting%3E%3C/filter%3E%3C/defs%3E%3Crect width='700' height='700' fill='%23f5f7ed'%3E%3C/rect%3E%3Crect width='700' height='700' fill='%23dbc9bd' filter='url(%23nnnoise-filter)'%3E%3C/rect%3E%3C/svg%3E");
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 5.5em;
  min-height: 100vh;
}

.active {
  border-bottom: 3px solid #DC7726;
}

p {
  font-family: "roboto", sans-serif;
  font-size: 1.3em;
  line-height: 1.5em;
  padding-bottom: 1em;
  font-weight: 300;
}

h1 {
  font-family: "nave", sans-serif;
  font-size: 4.6em;
  font-weight: 900;
  line-height: 1.2em;
  letter-spacing: 1px;
}

h2 {
  font-family: "nave", sans-serif;
  font-size: 3.4em;
  font-weight: 900;
  line-height: 1.2em;
  padding-bottom: 0.3em;
}

h3 {
  font-family: "roboto", sans-serif;
  font-size: 2em;
  font-weight: 500;
  line-height: 2.1em;
}

h4 {
  font-family: "roboto", sans-serif;
  font-size: 1.2em;
  font-weight: 400;
  line-height: 1.8em;
  text-transform: uppercase;
}

h5 {
  font-family: "roboto", sans-serif;
  font-size: 1.25em;
  font-weight: 600;
  line-height: 1.8em;
  font-style: italic;
  padding-bottom: 0.5em;
}

.quote-font {
  font-family: "smoothy", sans-serif;
  font-size: 3em;
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: 4px;
}

.bund-p {
  padding-bottom: 2em;
}

.vertical-line {
  border-left: 2px solid #08151C;
  height: 80%;
  position: absolute;
  left: 90px;
  z-index: -1;
}

.venstre-afsnit-kolonne {
  width: 60%;
  padding-left: 1.5em;
}

.fa-circle-up {
  font-size: 3.5em;
  color: #D77423;
  margin: 0.8em;
  float: right;
}
.fa-circle-up:hover {
  color: #08151C;
}

.blaablop {
  height: 14.1em;
  width: 5em;
  background-color: #42C0D2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 700 700' width='700' height='700' opacity='1'%3E%3Cdefs%3E%3Cfilter id='nnnoise-filter' x='-20%25' y='-20%25' width='140%25' height='140%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='linearRGB'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.18' numOctaves='4' seed='15' stitchTiles='stitch' x='0%25' y='0%25' width='100%25' height='100%25' result='turbulence'%3E%3C/feTurbulence%3E%3CfeSpecularLighting surfaceScale='6' specularConstant='0.8' specularExponent='20' lighting-color='%23617784' x='0%25' y='0%25' width='100%25' height='100%25' in='turbulence' result='specularLighting'%3E%3CfeDistantLight azimuth='3' elevation='61'%3E%3C/feDistantLight%3E%3C/feSpecularLighting%3E%3CfeColorMatrix type='saturate' values='0' x='0%25' y='0%25' width='100%25' height='100%25' in='specularLighting' result='colormatrix'%3E%3C/feColorMatrix%3E%3C/filter%3E%3C/defs%3E%3Crect width='700' height='700' fill='%2342c0d2'%3E%3C/rect%3E%3Crect width='700' height='700' fill='%23617784' filter='url(%23nnnoise-filter)'%3E%3C/rect%3E%3C/svg%3E");
  border-radius: 50px;
  position: absolute;
}

.lillerundblop {
  width: 2.8em;
  height: 2.8em;
  border-radius: 50px;
  background-color: #42C0D2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 700 700' width='700' height='700' opacity='1'%3E%3Cdefs%3E%3Cfilter id='nnnoise-filter' x='-20%25' y='-20%25' width='140%25' height='140%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='linearRGB'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.18' numOctaves='4' seed='15' stitchTiles='stitch' x='0%25' y='0%25' width='100%25' height='100%25' result='turbulence'%3E%3C/feTurbulence%3E%3CfeSpecularLighting surfaceScale='6' specularConstant='0.8' specularExponent='20' lighting-color='%23617784' x='0%25' y='0%25' width='100%25' height='100%25' in='turbulence' result='specularLighting'%3E%3CfeDistantLight azimuth='3' elevation='61'%3E%3C/feDistantLight%3E%3C/feSpecularLighting%3E%3CfeColorMatrix type='saturate' values='0' x='0%25' y='0%25' width='100%25' height='100%25' in='specularLighting' result='colormatrix'%3E%3C/feColorMatrix%3E%3C/filter%3E%3C/defs%3E%3Crect width='700' height='700' fill='%2342c0d2'%3E%3C/rect%3E%3Crect width='700' height='700' fill='%23617784' filter='url(%23nnnoise-filter)'%3E%3C/rect%3E%3C/svg%3E");
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.sort-baggrund {
  background-color: #08151C;
  color: #F5F7ED;
  padding: 3.4em 3.4em;
}

.hvid-baggrund {
  background-color: #F5F7ED;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 700 700' width='700' height='700' opacity='0.87'%3E%3Cdefs%3E%3Cfilter id='nnnoise-filter' x='-20%25' y='-20%25' width='140%25' height='140%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='linearRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.2' numOctaves='4' seed='15' stitchTiles='stitch' x='0%25' y='0%25' width='100%25' height='100%25' result='turbulence'%3E%3C/feTurbulence%3E%3CfeSpecularLighting surfaceScale='5' specularConstant='1.4' specularExponent='20' lighting-color='%23dbc9bd' x='0%25' y='0%25' width='100%25' height='100%25' in='turbulence' result='specularLighting'%3E%3CfeDistantLight azimuth='3' elevation='81'%3E%3C/feDistantLight%3E%3C/feSpecularLighting%3E%3C/filter%3E%3C/defs%3E%3Crect width='700' height='700' fill='%23f5f7ed'%3E%3C/rect%3E%3Crect width='700' height='700' fill='%23dbc9bd' filter='url(%23nnnoise-filter)'%3E%3C/rect%3E%3C/svg%3E");
  color: #08151C;
  padding: 3.4em 3.4em;
}

.hvid-section-spil {
  background-color: #F5F7ED;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 700 700' width='700' height='700' opacity='0.87'%3E%3Cdefs%3E%3Cfilter id='nnnoise-filter' x='-20%25' y='-20%25' width='140%25' height='140%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='linearRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.2' numOctaves='4' seed='15' stitchTiles='stitch' x='0%25' y='0%25' width='100%25' height='100%25' result='turbulence'%3E%3C/feTurbulence%3E%3CfeSpecularLighting surfaceScale='5' specularConstant='1.4' specularExponent='20' lighting-color='%23dbc9bd' x='0%25' y='0%25' width='100%25' height='100%25' in='turbulence' result='specularLighting'%3E%3CfeDistantLight azimuth='3' elevation='81'%3E%3C/feDistantLight%3E%3C/feSpecularLighting%3E%3C/filter%3E%3C/defs%3E%3Crect width='700' height='700' fill='%23f5f7ed'%3E%3C/rect%3E%3Crect width='700' height='700' fill='%23dbc9bd' filter='url(%23nnnoise-filter)'%3E%3C/rect%3E%3C/svg%3E");
  color: #08151C;
  padding: 0em 2em 3.4em 0em;
  margin-left: 9em;
  display: flex;
  gap: 2em;
}
.hvid-section-spil ul {
  padding-left: 1.5em;
}

.sort-section-spil {
  background-color: #08151C;
  color: #F5F7ED;
  padding: 0em 3.1em 3.4em 0em;
  margin-left: 9em;
  display: flex;
  gap: 4.75em;
}

.sort-hojre-text {
  padding: 0em 2em 1.5em 1em;
}

.sort-btn {
  background-color: #08151C;
  color: #F5F7ED;
  font-family: "roboto", sans-serif;
  font-size: 1.3em;
  letter-spacing: 5%;
  border: 3px solid #DC7726;
  border-radius: 50px;
  padding: 0.6em 2.5em;
  text-decoration: none;
  transition: 0.3s;
}
.sort-btn:hover {
  background-color: #F5F7ED;
  color: #08151C;
  border: 3px solid #DC7726;
}

.hvid-btn {
  background-color: #F5F7ED;
  color: #08151C;
  font-family: "roboto", sans-serif;
  font-size: 1.3em;
  letter-spacing: 5%;
  border: 3px solid #08151C;
  border-radius: 50px;
  padding: 0.6em 2.5em;
  text-decoration: none;
  transition: 0.3s;
}
.hvid-btn:hover {
  background-color: #08151C;
  color: #F5F7ED;
  border-color: #D77423;
}

.sort-box {
  background-color: #08151C;
  color: #F5F7ED;
  padding: 1.2em 2em;
  border-radius: 20px;
  border: 2px solid #D77423;
  width: 33.75em;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-left: 2em;
  margin-right: 1.5em;
}
.sort-box h3, .sort-box ul {
  grid-area: 1/1/2/2;
}
.sort-box h3 {
  font-weight: 400;
  line-height: 1em;
  padding-bottom: 1em;
}
.sort-box li {
  margin-left: 1.5em;
  font-family: "roboto", sans-serif;
  font-size: 1.25em;
  padding-bottom: 0.3em;
  font-weight: 300;
}
.sort-box img {
  grid-area: 1/2/2/3;
  padding-top: 2em;
  width: 100%;
}
.sort-box a {
  grid-area: 2/1/3/3;
  padding-top: 0.5em;
}
.sort-box p {
  grid-area: 2/1/3/2;
  align-items: baseline;
  padding-top: 0.5em;
}

section.sort-box.hidden {
  background-color: #08151C;
  color: #F5F7ED;
  padding: 1.2em 2em;
  border-radius: 20px;
  border: 2px solid #D77423;
  width: 33.75em;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-left: 2em;
  margin-right: 1.5em;
}
section.sort-box.hidden h3, section.sort-box.hidden ul {
  grid-area: 1/1/2/2;
}
section.sort-box.hidden h3 {
  font-weight: 400;
  line-height: 1em;
  padding-bottom: 1em;
}
section.sort-box.hidden li {
  margin-left: 1.5em;
  font-family: "roboto", sans-serif;
  font-size: 1.25em;
  padding-bottom: 0.3em;
  font-weight: 300;
}
section.sort-box.hidden img {
  grid-area: 1/2/2/3;
  padding-top: 2em;
  width: 100%;
}
section.sort-box.hidden a {
  grid-area: 2/1/3/3;
  padding-top: 0.5em;
}
section.sort-box.hidden p {
  grid-area: 2/1/3/2;
  align-items: baseline;
  padding-top: 0.5em;
}

.hvid-box {
  background-color: #F5F7ED;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 700 700' width='700' height='700' opacity='0.87'%3E%3Cdefs%3E%3Cfilter id='nnnoise-filter' x='-20%25' y='-20%25' width='140%25' height='140%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='linearRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.2' numOctaves='4' seed='15' stitchTiles='stitch' x='0%25' y='0%25' width='100%25' height='100%25' result='turbulence'%3E%3C/feTurbulence%3E%3CfeSpecularLighting surfaceScale='5' specularConstant='1.4' specularExponent='20' lighting-color='%23dbc9bd' x='0%25' y='0%25' width='100%25' height='100%25' in='turbulence' result='specularLighting'%3E%3CfeDistantLight azimuth='3' elevation='81'%3E%3C/feDistantLight%3E%3C/feSpecularLighting%3E%3C/filter%3E%3C/defs%3E%3Crect width='700' height='700' fill='%23f5f7ed'%3E%3C/rect%3E%3Crect width='700' height='700' fill='%23dbc9bd' filter='url(%23nnnoise-filter)'%3E%3C/rect%3E%3C/svg%3E");
  color: #08151C;
  padding: 3.4em 3.1em;
  border-radius: 20px;
  border: 2px solid #D77423;
  width: 33.75em;
}
.hvid-box h3 {
  padding-bottom: 0.1em;
}
.hvid-box li {
  margin-left: 1.5em;
}
.hvid-box li p {
  padding-bottom: 0.5em;
}
.hvid-box .box-p {
  text-transform: uppercase;
  font-size: 1.1em;
  padding-bottom: 1.5em;
}
.hvid-box .play {
  display: flex;
  justify-content: flex-end;
  padding-top: 1.5em;
  gap: 1em;
}
.hvid-box .play p {
  padding-bottom: 0;
  padding-top: 0.5em;
}
.hvid-box img {
  width: 90%;
}

.langblop {
  width: 5em;
  height: 14.1em;
  border-radius: 50px;
  background-color: #42C0D2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 700 700' width='700' height='700' opacity='1'%3E%3Cdefs%3E%3Cfilter id='nnnoise-filter' x='-20%25' y='-20%25' width='140%25' height='140%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='linearRGB'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.18' numOctaves='4' seed='15' stitchTiles='stitch' x='0%25' y='0%25' width='100%25' height='100%25' result='turbulence'%3E%3C/feTurbulence%3E%3CfeSpecularLighting surfaceScale='6' specularConstant='0.8' specularExponent='20' lighting-color='%23617784' x='0%25' y='0%25' width='100%25' height='100%25' in='turbulence' result='specularLighting'%3E%3CfeDistantLight azimuth='3' elevation='61'%3E%3C/feDistantLight%3E%3C/feSpecularLighting%3E%3CfeColorMatrix type='saturate' values='0' x='0%25' y='0%25' width='100%25' height='100%25' in='specularLighting' result='colormatrix'%3E%3C/feColorMatrix%3E%3C/filter%3E%3C/defs%3E%3Crect width='700' height='700' fill='%2342c0d2'%3E%3C/rect%3E%3Crect width='700' height='700' fill='%23617784' filter='url(%23nnnoise-filter)'%3E%3C/rect%3E%3C/svg%3E");
  position: relative;
  top: -110px;
}

.rundblop {
  width: 5em;
  height: 5em;
  border-radius: 50px;
  background-color: #42C0D2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 700 700' width='700' height='700' opacity='1'%3E%3Cdefs%3E%3Cfilter id='nnnoise-filter' x='-20%25' y='-20%25' width='140%25' height='140%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='linearRGB'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.18' numOctaves='4' seed='15' stitchTiles='stitch' x='0%25' y='0%25' width='100%25' height='100%25' result='turbulence'%3E%3C/feTurbulence%3E%3CfeSpecularLighting surfaceScale='6' specularConstant='0.8' specularExponent='20' lighting-color='%23617784' x='0%25' y='0%25' width='100%25' height='100%25' in='turbulence' result='specularLighting'%3E%3CfeDistantLight azimuth='3' elevation='61'%3E%3C/feDistantLight%3E%3C/feSpecularLighting%3E%3CfeColorMatrix type='saturate' values='0' x='0%25' y='0%25' width='100%25' height='100%25' in='specularLighting' result='colormatrix'%3E%3C/feColorMatrix%3E%3C/filter%3E%3C/defs%3E%3Crect width='700' height='700' fill='%2342c0d2'%3E%3C/rect%3E%3Crect width='700' height='700' fill='%23617784' filter='url(%23nnnoise-filter)'%3E%3C/rect%3E%3C/svg%3E");
  margin-left: 3.1em;
}

.blop-med-overskrift {
  margin-top: 3em;
  display: flex;
}
.blop-med-overskrift h2 {
  padding-left: 0.6em;
  padding-top: 0.2em;
}

figcaption {
  text-align: right;
  font-family: "roboto", sans-serif;
  font-style: italic;
  font-size: 1.2em;
  padding-right: 3em;
}

header {
  background-color: #08151C;
  opacity: 90%;
  height: 5.5em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  z-index: 9999;
  width: inherit;
  max-width: inherit;
  top: 0;
}
header nav {
  padding-right: 1.5em;
}
header nav ul {
  display: flex;
  color: #F5F7ED;
}
header nav li {
  list-style: none;
  margin: 2.6em;
}
header nav a {
  text-decoration: none;
  color: #F5F7ED;
  font-size: 1.3em;
  font-family: "nave", sans-serif;
}
header nav a:hover {
  border-bottom: 3px solid #DC7726;
}
header img:nth-of-type(1) {
  width: 10.5em;
  margin-left: 3.5em;
}
header .fa-bars {
  width: 1.8em;
  display: none;
  font-size: 1.5em;
}
header .fa-xmark {
  font-size: 1.5em;
}

.sidebar {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 250px;
  z-index: 999;
  background-color: #08151C;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  box-shadow: -10px 0 10px rgba(0, 0, 0, 0.1);
  display: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.sidebar li {
  width: 100%;
  margin-top: 1em;
}
.sidebar a {
  width: 100%;
  font-size: 1.5em;
}
.sidebar .fa-xmark {
  width: 10em;
  margin-top: 1.2em;
}

footer {
  border-top: 2px solid #D77423;
  font-family: "roboto", sans-serif;
  line-height: 1.8em;
  background-color: #08151C;
  color: #F5F7ED;
}
footer #footerwrap {
  padding: 1em 3.1em;
  display: flex;
  justify-content: space-between;
  width: 100%;
}
footer #footerwrap p {
  padding-bottom: 0.2em;
}
footer #ikon-placering {
  display: flex;
  gap: 2em;
  align-items: center;
}
footer #footermail .fa-envelope {
  font-size: 3em;
  color: #F5F7ED;
}
footer #footermail .fa-envelope:hover {
  color: #DC7726;
}
footer #footerlinkedin .fa-linkedin-in {
  font-size: 3.5em;
  color: #F5F7ED;
}
footer #footerlinkedin .fa-linkedin-in:hover {
  color: #DC7726;
}
footer #hojrefooter {
  display: flex;
  gap: 5em;
  padding-top: 1em;
}
footer #hojrefooter li {
  list-style: none;
  line-height: 2em;
}
footer #hojrefooter a {
  text-decoration: none;
  color: #F5F7ED;
  font-size: 1.2em;
  font-weight: 300;
}
footer #hojrefooter a:hover {
  color: #DC7726;
}
footer #hojrefooter p {
  font-weight: 600;
  padding-bottom: 0.2em;
}
footer #copyright {
  text-align: center;
  padding-bottom: 0.5em;
  padding-top: 0.5em;
}

main {
  position: relative;
}

.video-container {
  width: inherit;
  background-color: #08151C;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.video-container .baggrunds-video {
  position: fixed;
  top: 0;
  padding-top: 5.5em;
  max-width: 1280px;
  z-index: -1;
}

.video-indhold {
  text-align: center;
  z-index: 99;
  padding-top: 23em;
  position: relative;
  color: #F5F7ED;
}

#portfolio {
  font-size: 7.5em;
  padding-bottom: 0.3em;
}

#forside-ugle-hero {
  z-index: 999;
  padding-bottom: 2em;
}
#forside-ugle-hero p {
  color: #F5F7ED;
  margin-left: 3em;
}
#forside-ugle-hero h2 {
  color: #F5F7ED;
  font-size: 1.5em;
  padding: 0.4em 0 0em 2.8em;
  font-weight: 400;
}
#forside-ugle-hero .ugle-streg {
  border: 1px solid #F5F7ED;
  width: 100%;
  margin-top: -10px;
}

#velkommen-ugle {
  background-color: #08151C;
  display: flex;
  color: #F5F7ED;
  padding: 4em 3.1em 6em 3.1em;
  position: relative;
}
#velkommen-ugle #mig-ugle-img img {
  width: 80%;
}
#velkommen-ugle .blop1 {
  bottom: -20%;
  right: 5%;
}

#forside-quote {
  background-color: #F5F7ED;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1em 3.1em;
}
#forside-quote p {
  color: #08151C;
  width: 60%;
}
#forside-quote .quote-indent {
  text-indent: 2.4em;
  padding-bottom: 0;
}
#forside-quote .forf-quote {
  text-align: right;
  padding-right: 1em;
}
#forside-quote #anf-img {
  display: flex;
  justify-content: left;
  width: 60%;
  padding-top: 1em;
}
#forside-quote #anf-img img {
  width: 12%;
  position: relative;
  top: 1em;
}

#info {
  background-color: #08151C;
  color: #F5F7ED;
  padding: 4em 3.1em 6em 3.1em;
}
#info ul {
  padding-left: 1.5em;
}
#info li {
  font-family: "roboto", sans-serif;
  font-size: 1.3em;
  font-weight: 300;
  padding-bottom: 0.5em;
}

#animations-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  background-color: #08151C;
  color: #F5F7ED;
  position: relative;
  padding: 4em;
}
#animations-wrapper img {
  padding-right: 2em;
  width: 25%;
}
#animations-wrapper .animeret-tekst {
  min-width: 70%;
  text-align: center;
}
#animations-wrapper .animeret-tekst span {
  position: relative;
  display: inline-block;
}
#animations-wrapper .animeret-tekst span::before {
  content: "Wireframing";
  color: #DC7726;
  animation: words 25s infinite;
}
#animations-wrapper .animeret-tekst span::after {
  content: "";
  position: absolute;
  width: calc(100% - 2px);
  height: 110%;
  background-color: #08151C;
  border-left: 2px solid #DC7726;
  right: -2px;
  animation: cursor 0.8s infinite, typing 25s steps(14) infinite;
}
@keyframes cursor {
  to {
    border-left: 1px solid transparent;
  }
}
@keyframes words {
  0%, 20% {
    content: "Wireframing";
  }
  21%, 40% {
    content: "Usability test";
  }
  41%, 60% {
    content: "Frontend";
  }
  61%, 80% {
    content: "Prototyping";
  }
  81%, 100% {
    content: "UI/UX Design";
  }
}
@keyframes typing {
  10%, 15%, 30%, 35%, 50%, 55%, 70%, 75%, 90%, 95% {
    width: 0;
  }
  5%, 20%, 25%, 40%, 45%, 60%, 65%, 80%, 85% {
    width: calc(100% - 2px);
  }
}

#om-quote {
  border: 2px solid #D77423;
  margin: 3em 3.4em;
  border-radius: 30px;
  padding-bottom: 1em;
}
#om-quote .quote1-style {
  width: 80%;
}
#om-quote .quote1-style #anfo-img {
  width: 8%;
  padding-top: 1em;
}
#om-quote .quote1-style #anfo-img img {
  width: 100%;
}

.cv-knap {
  text-align: right;
  padding-right: 5em;
  padding-bottom: 4em;
}

.om-resume {
  position: relative;
}
.om-resume p {
  width: 70%;
}
.om-resume .blop2 {
  position: relative;
  float: right;
  bottom: 50px;
}
.om-resume a {
  color: #DC7726;
}
.om-resume a:hover {
  color: #F5F7ED;
}

.passer-center h2, .passer-center .p-passer {
  text-align: center;
  padding-left: 1em;
}
.passer-center .p-passer {
  padding: 0;
  padding-left: 2em;
}

#passervi-container {
  display: flex;
  justify-content: center;
  gap: 1em;
  padding-top: 2em;
}
#passervi-container .passervi {
  border: 4px solid #D77423;
  border-radius: 20px;
  width: 45%;
  padding: 1em 4em 2em 4em;
}
#passervi-container .passervi ul {
  padding-left: 1.5em;
}
#passervi-container .passervi ul li {
  font-family: "roboto", sans-serif;
  font-size: 1.3em;
  font-weight: 300;
  padding-bottom: 0.5em;
}

#om-quote2 {
  padding: 1em 0 3em 0;
}
#om-quote2 .quote2-style {
  width: 80%;
}
#om-quote2 .quote2-style #anfo-om-img {
  width: 8%;
  margin-top: 2em;
}
#om-quote2 .quote2-style #anfo-om-img img {
  position: relative;
  width: 100%;
  top: 1em;
}

.lilleblop-overskrift {
  display: flex;
  padding-top: 2em;
  align-items: center;
}
.lilleblop-overskrift h3 {
  padding-left: 0.8em;
}

#multimediekompetencer, #personlighed {
  padding-left: 3.6em;
}

#software-container {
  display: flex;
  margin-left: 2.5em;
}
#software-container .software-kolonne {
  display: flex;
  align-items: center;
  padding-left: 2em;
}
#software-container .software-kolonne li {
  list-style: none;
}
#software-container .software-kolonne p {
  font-weight: 300;
}
#software-container .software-kolonne img {
  width: 100%;
  padding-left: 1em;
  padding-bottom: 1.7em;
}
#software-container .software-kolonne .software-img {
  padding-top: 1em;
}

.vertical-line2 {
  border-left: 2px solid #08151C;
  height: 7%;
  position: absolute;
  left: 4.7em;
  z-index: 0;
  margin-top: 4em;
}

#reference {
  border: 2px solid #D77423;
  border-radius: 20px;
  padding: 2em 7em 1em 5em;
  margin: 0em 3.4em 2em 3.4em;
  text-align: left;
}
#reference p {
  font-weight: 300;
  font-size: 1.1em;
  padding-top: 0;
}
#reference h4 {
  font-weight: 400;
}
#reference .ref {
  padding-top: 1em;
}
#reference #italic-ref {
  font-style: italic;
  text-align: right;
}

#portfoliovideo {
  max-width: 1280px;
  width: 100%;
  background-image: url("../IMG/baggrundsbillede-video.png");
}

.erhverv {
  padding-right: 0;
  padding-bottom: 4em;
  border-bottom: 3px solid #D77423;
}
.erhverv #sort-erhverv {
  padding-top: 1em;
  display: flex;
}
.erhverv #sort-erhverv #erhverv-container h3:nth-child(1) {
  color: #D77423;
}
.erhverv #sort-erhverv #erhverv-container .komp {
  padding-top: 1em;
}
.erhverv #sort-erhverv #erhverv-container ul {
  padding-left: 1.5em;
}
.erhverv #sort-erhverv #erhverv-container ul li {
  font-family: "roboto", sans-serif;
  font-size: 1.3em;
  font-weight: 300;
  padding-bottom: 0.5em;
}
.erhverv #sort-erhverv .eksempler {
  margin-right: 0;
  margin-left: auto;
  width: 50%;
  background-color: #08151C;
  color: #F5F7ED;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  padding: 1em 3.6em 2em;
}
.erhverv #sort-erhverv .eksempler section:nth-child(1) {
  padding-bottom: 0.5em;
  border-bottom: 2px solid #DC7726;
}
.erhverv #sort-erhverv .eksempler h3 {
  color: #DC7726;
}
.erhverv #sort-erhverv .eksempler h4 {
  padding-top: 1.5em;
  padding-bottom: 0.5em;
}
.erhverv #sort-erhverv .eksempler ul {
  padding-left: 1.5em;
}
.erhverv #sort-erhverv .eksempler ul li {
  font-family: "roboto", sans-serif;
  font-size: 1.3em;
  font-weight: 300;
  padding-bottom: 0.5em;
  line-height: 1.51em;
}

.uddannelse {
  padding-left: 3.4em;
  padding-bottom: 0;
}

.vertical-line3 {
  border-left: 2px solid #08151C;
  height: 5.5%;
  position: absolute;
  left: 4.7em;
  z-index: 0;
  margin-top: 4em;
}

.over-udd {
  padding-bottom: 0;
}

.udd-cv {
  margin-left: 1em;
}

.fritid-container {
  margin-left: 7em;
  margin-top: 3em;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  padding-left: 7em;
}
.fritid-container h2 {
  color: #DC7726;
}
.fritid-container h3 {
  padding-bottom: 0.3em;
}
.fritid-container ul {
  padding-left: 1.5em;
}

.samarbejde-container {
  padding-top: 4em;
  display: flex;
  justify-content: center;
  margin: auto;
  position: relative;
  gap: 2em;
}
.samarbejde-container img {
  position: relative;
  padding: 2em 0;
  width: 20%;
  bottom: 50px;
}
.samarbejde-container .samarbejde-kontakt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.samarbejde-container .samarbejde-kontakt h3 {
  padding-bottom: 0.5em;
}

#oop {
  display: flex;
  padding-top: 4em;
  padding-right: 1em;
  background-color: #08151C;
  color: #F5F7ED;
}
#oop article {
  padding: 1em 3.1em;
  width: 65%;
}
#oop article p {
  padding-top: 2em;
  padding-bottom: 2em;
}
#oop #project-img {
  width: 100%;
  flex-shrink: 0.5;
  padding-top: 10em;
}
#oop .project-internlink {
  padding-top: 0;
}
#oop .project-internlink a {
  font-weight: 400;
  color: #08151C;
  background-color: #F5F7ED;
  padding: 0.1em 0.5em;
  border-radius: 20px;
  text-decoration: none;
  display: inline-block;
  margin: 0.2em;
  border: 1px solid #DC7726;
}
#oop .project-internlink a:hover {
  color: #F5F7ED;
  background-color: #08151C;
}

#oop2 {
  padding: 2em 3.1em;
}

#oop3 {
  padding: 2em 3.1em;
}

#projectContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 2em;
  padding-bottom: 6em;
}
#projectContainer .headline {
  width: 100%;
  padding: 1em;
}
#projectContainer #projectSkills {
  padding-top: 3em;
  align-content: center;
}
#projectContainer #projectPicture {
  padding-top: 3em;
}
#projectContainer #projectLink {
  display: flex;
  color: #DC7726;
  justify-content: right;
  font-size: 1.3em;
  font-family: "roboto", sans-serif;
  padding-top: 1em;
}
#projectContainer #projectLink:hover {
  color: #DC7726;
}
#projectContainer #projectDate {
  padding-top: 2.2em;
  font-size: 1.1em;
  font-style: italic;
}

#tooltip {
  display: none;
  position: absolute;
  background-color: #F5F7ED;
  color: #08151C;
  padding: 0.5em;
  font-family: "roboto", sans-serif;
  font-weight: 400;
  font-size: 1.1em;
  border-radius: 20px;
  border: 1px solid #D77423;
  width: 15em;
}

.bold-projectname {
  font-weight: 700;
}

#skills {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2em;
}

button {
  margin-right: 0.5em;
  margin-top: 0.6em;
  background-color: #F5F7ED;
  color: #08151C;
  font-family: "roboto", sans-serif;
  font-size: 1.3em;
  border: 2px solid #D77423;
  border-radius: 50px;
  padding: 0.3em 1em;
  text-decoration: none;
}
button:hover {
  background-color: #08151C;
  color: #F5F7ED;
  border-color: #D77423;
}
button .active {
  background-color: #08151C;
  color: #F5F7ED;
  border-color: #D77423;
}

.spil-hero {
  background-color: #08151C;
  padding-bottom: 6em;
  padding-top: 3em;
  position: relative;
  color: #F5F7ED;
  display: flex;
  justify-content: flex-end;
  gap: 4em;
}
.spil-hero .losning {
  text-align: center;
  padding-top: 8em;
  align-items: center;
}
.spil-hero h1 {
  padding-bottom: 0.2em;
}
.spil-hero h4 {
  margin-bottom: 3em;
  font-weight: 300;
}
.spil-hero .spil-video {
  width: 50%;
  height: auto;
  padding-right: 2em;
  padding-top: 6em;
}

.spil-hero-infostart .langblop {
  margin-left: 3.1em;
}
.spil-hero-infostart .spil-problem-container {
  display: flex;
}
.spil-hero-infostart .spil-problem-container article {
  padding: 3em 0em 1.5em 2em;
  width: 80%;
}
.spil-hero-infostart .spil-problem-container article p {
  padding-top: 1em;
}
.spil-hero-infostart .spil-hero-keywords {
  display: flex;
  gap: 2em;
  padding: 0em 10em 3em 10em;
}
.spil-hero-infostart .spil-hero-keywords h3 {
  line-height: 1em;
}
.spil-hero-infostart .spil-hero-boxe {
  display: flex;
  gap: 2em;
  padding-left: 10em;
  padding-right: 3.1em;
  padding-bottom: 4em;
}
.spil-hero-infostart .spil-hero-boxe .spil-hero-box {
  width: 18.3em;
  height: 12em;
  border-radius: 25px;
  border: 2px solid #D77423;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.spil-hero-infostart .spil-hero-boxe .spil-hero-box h4 {
  font-weight: 600;
  position: relative;
  top: -20px;
  background-color: #F5F7ED;
  line-height: 1.3em;
  text-align: center;
  width: 8em;
  padding: 0em 1em;
}
.spil-hero-infostart .spil-hero-boxe .spil-hero-box p {
  text-align: center;
  padding: 0.2em 0.8em;
}

.branding-quote1 {
  display: flex;
  justify-content: center;
}
.branding-quote1 .quote1-style {
  width: 60%;
}
.branding-quote1 .quote1-style p {
  text-indent: 2.4em;
  padding-bottom: 0.4em;
}
.branding-quote1 .quote1-style .forf-quote-branding {
  text-align: right;
  padding-right: 1em;
  font-style: italic;
}
.branding-quote1 .quote1-style #anfo-img {
  display: flex;
  justify-content: left;
  width: 60%;
  padding-top: 1em;
}
.branding-quote1 .quote1-style #anfo-img img {
  width: 20%;
  position: relative;
  top: 1em;
}

.branding-vaerktoejer {
  display: flex;
  flex-direction: column;
  margin-top: 1.5em;
  border-radius: 25px;
  border: 2px solid #D77423;
  padding: 1.5em 3em 2em 3em;
  width: 35%;
  height: 100%;
  position: relative;
}
.branding-vaerktoejer ul p {
  padding-bottom: 0.4em;
}
.branding-vaerktoejer .persona-img img {
  width: 100%;
}

.comm-ret {
  padding: 0;
  padding-top: 1em;
}
.comm-ret h4 {
  padding-left: 2em;
}

.comm-ret2 {
  padding-top: 2em;
  padding-top: 2em;
}
.comm-ret2 #comm-img img {
  width: 100%;
}
.comm-ret2 h4 {
  padding-bottom: 0.6em;
  padding-left: 0;
}
.comm-ret2 h3 {
  padding-top: 1em;
  color: #DC7726;
  line-height: 1.3em;
  padding-bottom: 0.5em;
}
.comm-ret2 #usp {
  font-weight: 500;
}

.branding-quote2 {
  display: flex;
  justify-content: center;
  border: 2px solid #D77423;
  border-radius: 30px;
  background-color: #F5F7ED;
  margin: 1em 2em;
  padding: 2em;
}
.branding-quote2 .quote2-style {
  width: 70%;
}
.branding-quote2 .quote2-style p {
  text-indent: 2.4em;
  padding-bottom: 0;
}
.branding-quote2 .quote2-style .forf-quote-branding {
  text-align: right;
  padding-right: 1em;
  font-style: italic;
}
.branding-quote2 .quote2-style #anfo2-img {
  display: flex;
  justify-content: left;
  width: 60%;
  padding-top: 1em;
}
.branding-quote2 .quote2-style #anfo2-img img {
  width: 20%;
  position: relative;
  top: 1em;
}

.ideate-respons #ideate-img {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 1em;
}
.ideate-respons #ideate-img img {
  max-width: 100%;
  height: auto;
}

.branding-beslutning {
  background-color: #08151C;
  color: #F5F7ED;
  padding: 3em 3em 4em 10em;
}
.branding-beslutning h2 {
  color: #DC7726;
  padding-bottom: 0.5em;
}
.branding-beslutning h3 {
  padding-bottom: 1em;
  color: #DC7726;
  line-height: 1.2em;
}
.branding-beslutning p {
  width: 70%;
}
.branding-beslutning #beslut-img {
  margin-bottom: 2em;
}
.branding-beslutning #beslut-img img {
  width: 70%;
}

.prototype-img {
  margin-right: 2em;
}
.prototype-img img {
  width: 100%;
}

#branding-fokus {
  border: 2px solid #D77423;
  border-radius: 20px;
  margin: 1em 2em 2em 10em;
  padding: 2em;
}
#branding-fokus h3 {
  line-height: 1.2em;
  color: #D77423;
}

.seo-ret {
  padding-left: 1.5em;
  padding-right: 2em;
}
.seo-ret #seo-overskrift {
  color: #DC7726;
}
.seo-ret .seo-transform {
  text-transform: uppercase;
}

.seo-ret2 {
  border: 2px solid #DC7726;
  border-radius: 20px;
  padding: 2.5em 2.5em 1em 2.5em;
  margin: 0 2em 0em 10em;
}

.seo-bund {
  padding-bottom: 3em;
}

.bruger-test-ret {
  flex-direction: column;
}
.bruger-test-ret section {
  width: 70%;
}
.bruger-test-ret #frame-container {
  display: flex;
  justify-content: center;
  margin-right: 2em;
  margin-left: 2em;
}
.bruger-test-ret #frame-container iframe {
  aspect-ratio: 16/9;
  width: 100%;
  height: auto;
}

.reflektion {
  padding-bottom: 1em;
}
.reflektion h2 {
  color: #DC7726;
}
.reflektion a {
  display: inline-block;
  margin-bottom: 2em;
}
.reflektion img {
  width: 100%;
}

#designsprint {
  display: flex;
}
#designsprint h2 {
  padding-left: 1em;
}
#designsprint img {
  height: 100%;
  width: 70%;
  flex-shrink: 0;
}

.spil-vaerktoejer {
  width: 40%;
  padding-left: 6em;
}
.spil-vaerktoejer ul {
  padding-left: 1.5em;
}

.designsprint-tekst {
  padding-left: 10.5em;
  width: 80%;
}

.spil-afslutning {
  padding: 0em 0em 2em 10.5em;
  width: 80%;
}

.reflektion2 {
  padding-bottom: 1em;
  margin-bottom: 4em;
  display: flex;
}
.reflektion2 #spilreflekt-img img {
  width: 100%;
}
.reflektion2 p {
  width: 85%;
}

/*Accordion - reference: https://codepen.io/nera-iba/pen/VwRmvpz*/
.accordion {
  max-width: 100%;
  padding-bottom: 4em;
}

.accordion-item {
  background-color: #F5F7ED;
  margin: 1em 2em 1em 10.5em;
  padding: 0 1em;
  cursor: pointer;
  border: 2px solid #DC7726;
  border-radius: 20px;
}
.accordion-item h4 {
  position: relative;
  padding: 0.5em 1em;
  color: #08151C;
  font-weight: 700;
  border-bottom: 2px;
}
.accordion-item h4::before {
  content: "+";
  position: absolute;
  right: 1em;
  margin-left: 0.5em;
}

.accordion-item.active h3::before {
  content: "-";
}

.accordion-content {
  max-height: 0;
  overflow-y: auto;
  transition: max-height 0.4s ease-out;
  padding: 0 1.5em;
  color: #08151C;
}
.accordion-content h5 {
  line-height: 1.3em;
}

.accordion-content.active {
  max-height: 100%;
}

.mandag, .tirsdag {
  display: flex;
}
.mandag p, .tirsdag p {
  padding-right: 1em;
}
.mandag img, .tirsdag img {
  width: 90%;
}
.mandag ul, .tirsdag ul {
  padding-left: 1.3em;
}

.onsdag img, .fredag img {
  width: 100%;
  padding-bottom: 0.5em;
}

.torsdag .to-img {
  display: flex;
  gap: 2em;
}
.torsdag .to-img img {
  width: 100%;
}

#mulighed {
  border: 2px solid #D77423;
  border-radius: 20px;
  padding: 1em;
  margin: 1em 0;
}
#mulighed .mu-ov {
  font-family: "roboto", sans-serif;
  font-size: 1.3em;
  text-transform: uppercase;
  padding-bottom: 0.5em;
}

.kontakt-bund {
  padding-bottom: 10em;
}
.kontakt-bund #kontaktmail #mobilstyle {
  color: #F5F7ED;
  text-decoration: none;
}

.kontakt-wrapper {
  display: flex;
  padding-top: 2em;
  padding-bottom: 2em;
}
.kontakt-wrapper #img-kontakt {
  width: 30%;
  padding-top: 1em;
  margin-left: auto;
  text-align: right;
}
.kontakt-wrapper #img-kontakt img {
  width: 80%;
}
.kontakt-wrapper article {
  width: 65%;
  padding-right: 1em;
}
.kontakt-wrapper article h1 {
  padding-bottom: 0.4em;
}
.kontakt-wrapper article p {
  padding-bottom: 1em;
}

.kontakt-p {
  padding-bottom: 0;
}

#kontaktmail {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
}
#kontaktmail p {
  font-weight: 700;
  padding-bottom: 0.2em;
}
#kontaktmail a {
  font-size: 1.3em;
  font-family: "roboto", sans-serif;
}
#kontaktmail .kontaktmail {
  color: #DC7726;
}

.kontakt-tekst {
  padding-top: 15em;
}

#om-quotekontakt {
  padding-bottom: 10em;
}
#om-quotekontakt .quote2-style {
  width: 80%;
}
#om-quotekontakt .quote2-style #anfo-om-img {
  width: 8%;
  margin-top: 2em;
}
#om-quotekontakt .quote2-style #anfo-om-img img {
  position: relative;
  width: 100%;
  top: 1em;
}

@media only screen and (max-width: 992px) {
  .hideOnMobile {
    display: none;
  }
  header .fa-bars {
    display: block;
  }
  p, .sort-btn, .hvid-btn, a, button {
    font-size: 1.25em;
  }
  #footerwrap #ikon-placering #footermail .fa-envelope {
    font-size: 2.5em;
  }
  #footerwrap #ikon-placering #footerlinkedin .fa-linkedin-in {
    font-size: 2.5em;
  }
  #footerwrap #hojrefooter {
    padding-bottom: 2em;
  }
  #footerwrap #hojrefooter a {
    font-size: 1.1em;
  }
  h1 {
    font-size: 3.2em;
  }
  h2 {
    font-size: 2.5em;
  }
  h3 {
    font-size: 1.6em;
  }
  h4 {
    font-size: 1.15em;
  }
  .quote-font {
    font-size: 2.2em;
  }
  .fa-arrow-up {
    font-size: 2.5em;
  }
  header img:nth-of-type(1) {
    width: 8.5em;
    margin-left: 2.5em;
  }
  #velkommen-ugle .blop1 {
    height: 10em;
    width: 4em;
    bottom: -14%;
  }
  #forside-quote #anf-img {
    width: 70%;
  }
  #forside-quote p {
    width: 70%;
  }
  .om-resume .blop2 {
    height: 10em;
    width: 4em;
    bottom: 20px;
    right: -2%;
  }
  .passer-center h2 {
    padding-left: 2em;
  }
  #passervi-container .passervi {
    width: 45%;
    padding: 1em 2em 1em 2em;
  }
  .multimedie-respons {
    padding-right: 2em;
  }
  .multimedie-respons #software-container .software-kolonne ul li p {
    font-size: 1.2em;
  }
  .multimedie-respons #software-container .software-kolonne img {
    padding-bottom: 1.5em;
    padding-left: 0.5em;
  }
  .vertical-line2 {
    height: 7.2%;
    left: 4.6em;
  }
  .erhverv #sort-erhverv {
    margin-top: 0.5em;
  }
  .erhverv #sort-erhverv .eksempler {
    width: 60%;
    padding-left: 2em;
  }
  .erhverv #sort-erhverv .eksempler ul li {
    font-size: 1.1em;
  }
  .vertical-line3 {
    height: 5.2%;
    left: 4.6em;
  }
  #reference {
    padding: 1.5em;
  }
  .fritid-container {
    padding-left: 4em;
  }
  #oop {
    padding-top: 2em;
  }
  #oop .project-internlink a {
    font-size: 1em;
  }
  .kontakt-wrapper {
    padding-top: 2em;
  }
  #projectSkills li {
    font-size: 1.25em;
  }
  .spil-hero {
    gap: 2em;
  }
  .spil-hero .losning {
    padding-top: 4em;
  }
  .spil-hero .spil-video {
    padding-top: 4em;
  }
  .langblop {
    height: 10em;
    width: 4em;
    top: -70px;
  }
  .rundblop {
    width: 4em;
    height: 4em;
  }
  .vertical-line {
    left: 80px;
  }
  .spil-herocolor .spil-hero h1 {
    padding-left: 1em;
  }
  .spil-hero-infostart .spil-hero-boxe {
    padding-left: 9em;
  }
  .spil-hero-infostart .spil-hero-boxe .spil-hero-box {
    height: 15em;
  }
  .spil-hero-infostart .spil-hero-keywords {
    padding: 0em 6em 2em 9em;
  }
  .venstre-afsnit-kolonne {
    padding-left: 0em;
    padding-left: 0em;
  }
  .seo-ret {
    padding-left: 0em;
  }
  .seo-ret2 {
    margin-left: 9em;
  }
  .bruger-test-ret #frame-container {
    margin-left: 0.5em;
  }
  .hvid-section-spil {
    padding-bottom: 1em;
  }
  .branding-beslutning {
    padding-left: 9em;
  }
  #branding-fokus {
    margin-left: 9em;
  }
  .seo-ret {
    padding-left: 0;
  }
  .seo-ret2 {
    margin-left: 9em;
  }
  .reflektion h2 {
    padding-bottom: 1em;
  }
  .comm-ret .designsprint-tekst {
    padding-left: 9em;
  }
  .accordion-item {
    margin-left: 9em;
  }
  .spil-afslutning {
    padding-left: 9em;
  }
  .spil-vaerktoejer {
    padding-left: 3em;
  }
  .branding-beslutning {
    padding-left: 9em;
  }
  .kontakt-wrapper #img-kontakt {
    width: 40%;
  }
  .kontakt-wrapper #img-kontakt img {
    width: 80%;
  }
}
@media screen and (max-width: 768px) {
  p, .sort-btn, .hvid-btn, a, button {
    font-size: 1.15em;
  }
  footer #footerwrap #ikon-placering {
    padding: 1em 0;
  }
  footer #footerwrap #ikon-placering #footermail .fa-envelope {
    font-size: 2em;
  }
  footer #footerwrap #ikon-placering #footerlinkedin .fa-linkedin-in {
    font-size: 2em;
  }
  footer #footerwrap #hojrefooter {
    padding-bottom: 1em;
  }
  footer #footerwrap #hojrefooter a {
    font-size: 1em;
  }
  h1 {
    font-size: 2.5em;
  }
  h2 {
    font-size: 2em;
  }
  h3 {
    font-size: 1.4em;
  }
  h4 {
    font-size: 1em;
  }
  .quote-font {
    font-size: 1.8em;
  }
  .sort-baggrund {
    padding: 1em 2em;
  }
  #footerwrap {
    display: flex;
    flex-direction: column-reverse;
    align-items: left;
  }
  #footerwrap #hojrefooter {
    padding-bottom: 2em;
  }
  #footerwrap #hojrefooter a {
    font-size: 1.2em;
  }
  .blop-med-overskrift h2 {
    padding-top: 0.5em;
    padding-left: 0.8em;
  }
  figcaption {
    font-size: 1em;
    padding-right: 2em;
  }
  header nav {
    padding-right: 0.5em;
  }
  header img:nth-of-type(1) {
    width: 9.5em;
    margin-left: 2.5em;
  }
  #portfolio {
    font-size: 6em;
  }
  #forside-ugle-hero {
    text-align: center;
  }
  #forside-ugle-hero p {
    margin-left: 0;
  }
  #forside-ugle-hero h2 {
    padding: 1.5em 0 0em 0;
  }
  #animations-wrapper img {
    width: 35%;
  }
  .om-resume {
    padding: 2em 3em;
  }
  .om-resume .blop2 {
    bottom: 60px;
    right: -2%;
  }
  .passer-center {
    padding-left: 3em;
    padding-right: 3em;
  }
  .passer-center #passervi-container {
    justify-content: space-between;
  }
  .passer-center #passervi-container .passervi {
    width: 100%;
    padding-right: 1em;
    padding-left: 1em;
  }
  #om-quote2 .quote2-style {
    width: 85%;
  }
  #software-container {
    flex-direction: column;
  }
  #software-container .software-kolonne .soft1 {
    padding-left: 2.8em;
  }
  #software-container .software-img {
    padding-top: 0em;
    padding-left: 2em;
  }
  #software-container .software-img img {
    padding-bottom: 1.4em;
  }
  .vertical-line2 {
    height: 9.7%;
    left: 4.4em;
  }
  .erhverv {
    padding-left: 3em;
  }
  .erhverv #sort-erhverv .eksempler {
    padding-right: 2em;
  }
  .erhverv #sort-erhverv .eksempler ul li {
    font-size: 1em;
  }
  .multimedie-respons {
    padding-left: 3em;
  }
  .vertical-line3 {
    height: 4.8%;
    left: 4.4em;
  }
  .fritid-container {
    margin: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: 2em 3em;
  }
  .samarbejde-container img {
    width: 25%;
  }
  .spil-hero-infostart .langblop {
    margin-left: 2em;
  }
  .spil-hero-infostart .spil-problem-container article {
    width: 80%;
    padding-bottom: 1em;
  }
  .spil-hero-infostart .spil-hero-keywords {
    padding: 0em 4em 2em 8em;
  }
  .spil-hero-infostart .spil-hero-boxe {
    flex-direction: column;
    padding: 0em 2em 2em 8em;
    gap: 3em;
  }
  .spil-hero-infostart .spil-hero-boxe .spil-hero-box {
    height: 8em;
    width: 100%;
  }
  .spil-hero-infostart .spil-hero-boxe .spil-hero-box h4 {
    top: -10px;
    width: 9em;
    padding-bottom: 0.2em;
  }
  .spil-hero-infostart .spil-hero-boxe .spil-hero-box p {
    width: 98%;
  }
  .vertical-line {
    left: 65px;
  }
  .blop-med-overskrift {
    padding-left: 0;
  }
  .rundblop {
    margin-left: 2em;
  }
  .research-responsiv {
    display: flex;
    flex-direction: column;
    margin-left: 8em;
    margin-right: 2em;
    padding-top: 1.5em;
    padding-right: 0;
  }
  .research-responsiv .venstre-afsnit-kolonne {
    width: 100%;
  }
  .research-responsiv .branding-vaerktoejer {
    flex-direction: row;
    width: 100%;
    padding-right: 1em;
    align-items: center;
    margin-top: 0;
  }
  .research-responsiv .branding-vaerktoejer .persona-img {
    display: flex;
    justify-content: flex-end;
    padding-left: 1em;
  }
  .research-responsiv .branding-vaerktoejer .persona-img img {
    width: 100%;
  }
  .comm-ret {
    padding-left: 0;
    padding-right: 2em;
  }
  .sort-section-spil {
    flex-direction: column;
    margin-left: 8em;
    padding-top: 1em;
    padding-right: 0;
    padding-bottom: 1.5em;
    gap: 1em;
  }
  .sort-section-spil #comm-img {
    order: 2;
  }
  .sort-section-spil #comm-img img {
    width: 60%;
  }
  .sort-section-spil .sort-hojre-text {
    order: 1;
    padding: 0;
    padding-top: 1.5em;
  }
  .hvid-section-spil {
    margin-left: 8em;
    padding-bottom: 2em;
  }
  .hvid-section-spil .venstre-afsnit-kolonne {
    padding-left: 0;
    padding-right: 0;
  }
  .ideate-respons {
    display: flex;
    flex-direction: column;
  }
  .ideate-respons .venstre-afsnit-kolonne {
    width: 100%;
    padding-right: 0em;
  }
  .ideate-respons #ideate-img {
    justify-content: flex-start;
  }
  .ideate-respons #ideate-img img {
    width: 50%;
  }
  .branding-beslutning {
    padding: 2em 2em 1em 8em;
  }
  .branding-beslutning p {
    width: 100%;
  }
  .branding-beslutning #beslut-img img {
    width: 80%;
  }
  .branding-beslutning a {
    margin-bottom: 4em;
  }
  #branding-fokus {
    margin-left: 8em;
    margin-top: 0;
  }
  .seo-ret {
    padding-left: 0;
    padding-top: 2em;
  }
  .seo-ret2 {
    margin-left: 8em;
    margin-right: 0;
  }
  .seo-bund {
    padding-bottom: 2em;
  }
  .bruger-test-ret section {
    width: 100%;
    padding-right: 2em;
  }
  .branding-streg {
    height: 90%;
  }
  .comm-ret .designsprint-tekst {
    padding-left: 8em;
    width: 100%;
    padding-right: 0;
  }
  .accordion {
    padding-bottom: 1.5em;
  }
  .accordion .mandag, .accordion .tirsdag {
    flex-direction: column;
  }
  .accordion .mandag img, .accordion .tirsdag img {
    width: 90%;
  }
  .accordion-item {
    margin-left: 8em;
    margin-right: 0;
  }
  .spil-afslutning {
    padding-left: 8em;
    width: 100%;
    padding-right: 2em;
  }
  .reflektion2 {
    display: flex;
    flex-direction: column;
  }
  .reflektion2 #spilreflekt-img {
    padding-top: 2.5em;
  }
  .reflektion2 #spilreflekt-img img {
    width: 60%;
  }
  #oop {
    display: flex;
    flex-direction: column;
  }
  #oop article {
    width: 100%;
  }
  #oop article a {
    font-size: 1.15em;
  }
  #oop #project-img {
    width: 100%;
    padding: 1em 3.1em;
  }
  #projectSkills li {
    font-size: 1.15em;
  }
  .kontakt-bund .kontakt-wrapper {
    flex-direction: column;
    padding-bottom: 2em;
  }
  .kontakt-bund .kontakt-wrapper #img-kontakt {
    padding-top: 1em;
    padding-left: 2em;
    width: 50%;
    text-align: left;
    margin-left: 0;
  }
  .kontakt-bund .kontakt-wrapper article {
    width: 100%;
    padding: 1em;
  }
  .kontakt-bund .kontakt-wrapper #kontakt2 {
    padding-left: 1em;
  }
  .kontakt-bund .kontakt-wrapper #kontaktmail a {
    font-size: 1.15em;
  }
}
@media only screen and (max-width: 600px) {
  .sort-baggrund, .hvid-baggrund, .branding-beslutning, .spil-afslutning, #velkommen-ugle {
    padding: 3em 2em;
  }
  .hvid-section-spil, .sort-section-spil {
    margin-left: 2em;
  }
  h1 {
    font-size: 2.2em;
  }
  .sidebar {
    width: 100%;
  }
  .fa-circle-up {
    font-size: 2.5em;
    margin: 0.5em;
  }
  header img:nth-of-type(1) {
    width: 8em;
    margin-left: 1.8em;
  }
  #portfolio {
    font-size: 5em;
  }
  #forside-quote #anf-img {
    width: 80%;
  }
  #forside-quote p {
    width: 80%;
  }
  #velkommen-ugle {
    flex-direction: column;
    padding-top: 2em;
  }
  #velkommen-ugle #mig-ugle-img {
    padding-bottom: 1em;
  }
  #velkommen-ugle #mig-ugle-img img {
    width: 40%;
  }
  #velkommen-ugle .blop1 {
    height: 8em;
    width: 3em;
    bottom: -9%;
  }
  #animations-wrapper {
    flex-direction: column;
    padding: 4em 2em 2em;
  }
  #animations-wrapper img {
    width: 50%;
  }
  #om-quote {
    margin: 2em;
  }
  .om-resume p {
    width: 90%;
  }
  .om-resume .blop2 {
    height: 8em;
    width: 3em;
    bottom: 15px;
    right: -2%;
  }
  #passervi-container {
    flex-direction: column;
  }
  #om-quote2 .quote2-style #anfo-om-img img {
    width: 120%;
  }
  .multimedie-respons {
    padding-right: 2em;
  }
  .multimedie-respons .lilleblop-overskrift {
    padding-top: 0.5em;
  }
  .multimedie-respons .lilleblop-overskrift h3 {
    padding-left: 0;
  }
  .multimedie-respons .lilleblop-overskrift .lillerundblop {
    display: none;
  }
  .multimedie-respons .uddannelse {
    padding-left: 0;
  }
  .multimedie-respons #multimediekompetencer, .multimedie-respons #personlighed {
    padding-left: 0em;
  }
  .multimedie-respons .vertical-line2 {
    display: none;
  }
  .multimedie-respons #software-container {
    margin-left: 0em;
  }
  .multimedie-respons #software-container .software-kolonne {
    padding-left: 0;
  }
  .multimedie-respons .udd-cv {
    margin-left: 0;
    margin-top: 1em;
  }
  #reference {
    margin: 0em 2em 2em;
  }
  .vertical-line3 {
    display: none;
  }
  .erhverv {
    padding: 0;
  }
  .erhverv h2 {
    padding: 1em 0 0 1em;
  }
  .erhverv #sort-erhverv {
    flex-direction: column;
  }
  .erhverv #sort-erhverv #erhverv-container {
    padding: 0 2em 2em;
  }
  .erhverv #sort-erhverv .eksempler {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    width: 100%;
    padding: 1em 2em;
  }
  #oop {
    padding: 0;
  }
  #oop article {
    padding: 3em 2em;
  }
  #oop .project-internlink {
    padding-bottom: 0;
  }
  #oop #project-img {
    padding-top: 0;
  }
  #oop2 {
    padding: 3em 2em 0em 2em;
  }
  .spil-hero {
    flex-direction: column;
    align-items: center;
    padding-top: 1em;
  }
  .spil-hero .losning {
    padding-top: 2em;
  }
  .spil-hero .spil-video {
    padding-right: 0;
    width: 80%;
    padding-top: 1.5em;
  }
  .langblop {
    height: 7em;
    width: 3em;
    top: -55px;
    order: 2;
    right: 20px;
  }
  .vertical-line {
    display: none;
  }
  .blop-med-overskrift {
    padding-left: 1.2em;
    margin-top: 2em;
  }
  .blop-med-overskrift .rundblop {
    display: none;
  }
  .spil-hero-infostart .spil-problem-container article {
    padding-left: 2em;
    width: 100%;
  }
  .spil-hero-infostart h2 {
    font-size: 1.8em;
  }
  .spil-hero-infostart .spil-hero-keywords {
    flex-direction: column;
    gap: 1em;
    padding: 0em 2em 2em 2em;
  }
  .spil-hero-infostart .spil-hero-boxe {
    padding-left: 2em;
  }
  .spil-hero-infostart .spil-hero-boxe .spil-hero-box {
    height: 9em;
  }
  .branding-quote1 .quote1-style {
    width: 90%;
  }
  .hvid-section-spil .branding-vaerktoejer {
    flex-direction: column;
    align-items: flex-start;
    padding-left: 2em;
  }
  .hvid-section-spil .branding-vaerktoejer .persona-img {
    padding-left: 0;
    padding-top: 0.5em;
  }
  .sort-section-spil {
    margin-left: 0em;
    gap: 1em;
  }
  .sort-section-spil .sort-hojre-text {
    padding: 0;
    padding-top: 1em;
  }
  .branding-quote2 {
    padding: 0;
    padding-bottom: 1.5em;
    margin: 1.5em 2em;
  }
  .branding-quote2 .quote2-style {
    width: 85%;
  }
  .ideate-respons #ideate-img img {
    width: 60%;
  }
  .prototype-respons {
    display: flex;
    flex-direction: column;
  }
  .prototype-respons .venstre-afsnit-kolonne {
    width: 100%;
    padding-right: 0em;
  }
  #branding-fokus {
    margin-left: 2em;
    flex-direction: column;
  }
  .seo-ret, .seo-ret2 {
    margin-left: 0;
  }
  .blop-med-overskrift {
    padding: 0;
  }
  .blop-med-overskrift h2 {
    padding-left: 1em;
    padding-right: 1em;
  }
  .spil-forb-respons {
    display: flex;
    flex-direction: column;
    margin-left: 2em;
  }
  .spil-forb-respons .forb-tekst-respons {
    width: 100%;
  }
  .spil-forb-respons .spil-vaerktoejer {
    width: 60%;
    padding: 1em 1em 1em 1.5em;
    margin-top: 0.5em;
  }
  #designsprint {
    flex-direction: column;
    align-items: center;
  }
  #designsprint h2 {
    padding-left: 0;
  }
  #designsprint img {
    width: 100%;
  }
  .comm-ret .blop-med-overskrift {
    margin-top: 0;
  }
  .comm-ret h2 {
    padding: 0;
    margin: 0;
  }
  .comm-ret .designsprint-tekst {
    padding-left: 0em;
  }
  .accordion-item {
    margin-left: 0em;
  }
  .accordion-item h4 {
    padding-left: 0.4em;
  }
  .accordion-content {
    padding: 0 0.2em;
  }
  .accordion-content h5 {
    font-size: 1.1em;
  }
  .spil-afslutning {
    padding-left: 2em;
    padding-top: 1em;
  }
  .branding-beslutning {
    padding-left: 2em;
  }
  .branding-beslutning .reflektion2 {
    margin-bottom: 2em;
  }
  .branding-beslutning .reflektion2 .spil-link {
    display: inline-block;
    margin-bottom: 1em;
  }
  .branding-beslutning .reflektion2 img {
    text-align: center;
  }
  .kontakt-bund .kontakt-wrapper {
    padding-top: 0;
  }
  .kontakt-bund .kontakt-wrapper article {
    padding: 0;
  }
  .kontakt-bund .kontakt-wrapper #img-kontakt {
    width: 60%;
  }
  .kontakt-bund #kontakt2 {
    padding-left: 0;
  }
}
@media only screen and (max-width: 400px) {
  #velkommen-ugle .blaablop {
    height: 6em;
    width: 2em;
    right: 20px;
    bottom: -50px;
  }
  .om-resume p {
    width: 100%;
  }
  .om-resume .blop2 {
    height: 6em;
    width: 2em;
    bottom: 0px;
    right: -15px;
  }
  .passer-center h2, .passer-center .p-passer {
    padding-left: 0;
  }
  #passervi-container .passervi ul li {
    font-size: 1.1em;
  }
  #om-quote2 .quote2-style #anfo-om-img img {
    width: 150%;
  }
  .multimedie-respons {
    padding-bottom: 0;
  }
  .multimedie-respons h2, .multimedie-respons h3, .multimedie-respons p {
    padding-left: 0;
  }
  .multimedie-respons #multimediekompetencer, .multimedie-respons #personlighed {
    padding-left: 0;
  }
  .multimedie-respons #software-container {
    margin: 0;
  }
  .multimedie-respons #software-container .software-kolonne {
    padding-left: 0;
  }
  .multimedie-respons #software-container .software-kolonne ul li {
    font-size: 0.9em;
  }
  .multimedie-respons #software-container .software-img {
    padding-left: 0.5em;
    padding-top: 0.5em;
  }
  .multimedie-respons #software-container .software-img img {
    padding-bottom: 1.2em;
  }
  .multimedie-respons #software-container .soft1 {
    padding-left: 1em;
  }
  .multimedie-respons .udd-cv {
    margin-bottom: 2em;
  }
  #reference {
    margin: 2em 2em;
  }
  .sort-erhverv .underoverskrift {
    padding-left: 0;
  }
  .sort-erhverv h2 {
    padding-left: 0;
  }
  .sort-erhverv #erhverv-container .om-roller {
    padding-left: 0;
  }
  .sort-erhverv #erhverv-container #om-kompetencer {
    margin-top: 2em;
    margin-left: 0;
  }
  .samarbejde-container {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .samarbejde-container img {
    align-self: center;
    padding-bottom: 0;
    width: 40%;
  }
  .langblop {
    height: 6em;
    width: 2em;
    top: -50px;
    right: 20px;
  }
  .reflektion2 #spilreflekt-img img {
    width: 80%;
  }
  .comm-ret2 #comm-img img {
    width: 80%;
  }
  .ideate-respons #ideate-img img {
    width: 80%;
  }
  #projectContainer #projectSkills {
    padding-top: 1em;
  }
  #projectContainer #projectPicture {
    padding-top: 1em;
  }
  #projectContainer #projectGroup {
    padding-top: 0;
    padding-bottom: 0;
  }
  #projectContainer #projectDate {
    padding-top: 0em;
  }
  .sort-box {
    display: flex !important;
    flex-direction: column;
  }
  .kontakt-bund .kontakt-wrapper #img-kontakt {
    padding-top: 1.5em;
  }
  .kontakt-bund #kontakt2 a {
    font-size: 1.1em;
  }
  footer #footerwrap {
    padding: 1em 2em;
  }
}/*# sourceMappingURL=style.css.map */