:root {
  /* sizes scaled to HD */
  --HD3px: calc(0.1vw + 0.1vh);
  --HD6px: calc(0.2vw + 0.2vh);
  --HD9px: calc(0.3vw + 0.3vh);
  --HD12px: calc(0.4vw + 0.4vh);
  --HD15px: calc(0.5vw + 0.5vh);
  --HD18px: calc(0.6vw + 0.6vh);
  --HD21px: calc(0.7vw + 0.7vh);
  --HD24px: calc(0.8vw + 0.8vh);
  --HD30px: calc(1vw + 1vh);
  --HD36px: calc(1.2vw + 1.2vh);
  --HD45px: calc(1.5vw + 1.5vh);
  --HD60px: calc(2vw + 2vh);
  --HD75px: calc(2.5vw + 2.5vh);
  --HD90px: calc(3vw + 3vh);
  --HD120px: calc(4vw + 4vh);
  --HD150px: calc(5vw + 5vh);
  --HD180px: calc(6vw + 6vh);
  --HD210px: calc(7vw + 7vh);
  --HD240px: calc(8vw + 8vh);
  --HD300px: calc(10vw + 10vh);
  --HD360px: calc(12vw + 12vh);

  /* custom colors (FALLBACK) */
  --background-text-color:#fff;
  --element-background-color:#000;
  --element-text-color:#fff;
  --element-text-color-secondary:#f00;
  --element-background-color-transp:rgba(0, 0, 0, 0.8);
  --element-text-color-transp:rgba(255, 255, 255, 0.8);
  --element-text-color-secondary-transp:rgba(255, 0, 0, 0.8);
  --image-overlay-color-transp:rgba(0, 0, 0, 0.6);
  --image-overlay-text-color:#fff;
  --locationcolor: #df5a34;
  --touchadvice-bg-color: rgba(102, 153, 0, 0.6);
  --article-bg-color: #fff;
  --article-text-color: #000;
  --article-scrollpane-color: rgba(0, 0, 0, 0.07);
  --article-ruler-color: rgba(0, 0, 0, 0.3);
/* static colors */
  --yes: #519700;
  --no: #c00;
  --maybe: rgb(128, 150, 0);
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: transparent;
}

html {
  margin: 0;
  padding: 0;
  border: none;
  overflow: -moz-scrollbars-none;
}

html,
body {
  padding: 0px;
  margin: 0px;
  font-family: "Source Sans Pro", "Futura", sans-serif;
  font-size: 12px;
  /*font-size %-vis udgangspunkt*/
  height: 100%;
  overflow: hidden;
  touch-action: none;
  background-color: #000;
}

::-webkit-scrollbar {
  display: none;
}


p {
  margin-bottom: 1em;
}

p:last-child {
  margin-bottom: 0;
}

input:focus,
audio:focus {
  outline: none;
}

.internal {
  font-size: 16px;
  color: #f66;
}

li {
  list-style-position: outside;
  margin-left: 25px;
  padding: 0.3em 0;
}

.noselect {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently */
}

/******************************/

/***** User Color Classes *****/

.default-el {
  background-color: var(--element-background-color);
  color: var(--element-text-color);
}
.default-el.transp {
  background-color: var(--element-background-color-transp);
}
.default-el.border {
  border-color: var(--element-background-color)!important;
}


.inverted-el {
  background-color: var(--element-text-color);
  color: var(--element-background-color);
}
.inverted-el.transp {
  background-color: var(--element-text-color-transp);
}
.inverted-el.border {
  border-color: var(--element-text-color)!important;
}


.inverted-secondary-el {
  background-color: var(--element-text-color-secondary);
  color: var(--element-background-color);
}
.inverted-secondary-el.transp {
  background-color: var(--element-text-color-secondary-transp);
}
.inverted-secondary-el.border {
  border-color: var(--element-text-color-secondary)!important;
}


/* secondary children (text color) */
.default-el .secondary-color, .inverted-el .secondary-color{
  color: var(--element-text-color-secondary);
}
.inverted-secondary-el .secondary-color{
  color: var(--element-text-color);
}

/* secondary children (background color) */
.default-el .secondary-bg, .inverted-el .secondary-bg{
  background-color: var(--element-text-color-secondary);
}
.inverted-secondary-el .secondary-bg{
  background-color: var(--element-text-color);
}


/* inverted children (background color) */
.default-el .inverted-bg {
    background-color: var(--element-text-color);
  }
  .inverted-secondary-el .inverted-bg, .inverted-el .inverted-bg{
    background-color: var(--element-background-color);
  }


.article-colors {
  background: var(--article-bg-color);
  color: var(--article-text-color);
}

/**************************/

/***** FIXED FONTSIZES ****/

.f-xsmall {
  font-size: 1rem;
}

.f-small {
  font-size: 1.4rem;
}

.f-medium {
  font-size: 1.9rem;
}

.f-large {
  font-size: 2.5rem;
}

/*******************************/

/******** Shared elements ******/

.play-icon {
  position: absolute;
  width: var(--HD60px);
  height: var(--HD60px);
  border-radius: 50%;
  border: rgba(255, 255, 255, 0.6) 2px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.2);
}

.play-icon img {
  width: 30% !important;
  height: 30% !important;
  background: none !important;
}

#env {
  z-index: 998;
  position: absolute;
  font-size: var(--HD24px);
  color: white;
  background: rgba(0, 0, 0, 0.6);
  width: 500px;
  text-align: center;
  top: var(--HD90px);
  right: var(--HD90px);
  padding: var(--HD15px);
  transform: translateX(50%) translateY(-50%) rotate(45deg);
  display: flex;
  justify-content: center;
  align-items: center;
}

#env.dev {
  background: rgba(0, 75, 150, 0.6);
}

#env.qa {
  background: rgba(240, 120, 0, 0.6);
}

#env span {
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--HD24px);
  margin-right: 0.4em;
}

#expiredLabel {
  pointer-events: none;
  z-index: 999;
  position: absolute;
  font-size: var(--HD36px);
  text-transform: uppercase;
  color: rgb(252, 0, 0);
  background: rgba(120, 0, 0, 0.9);
  width: 1500px;
  text-align: center;
  top: var(--HD300px);
  right: var(--HD300px);
  padding: var(--HD60px);
  transform: translateX(50%) translateY(-50%) rotate(45deg);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 6px 6px 10px 0px rgba(50, 0, 0, 0.5);
}

#expiredLabel span {
  color: rgb(252, 0, 0);
  font-size: var(--HD60px);
  margin-right: 0.4em;
}

/****************************/

/******** BACKGROUND ********/

/* #background {
    z-index: 0;
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    overflow: hidden;
}

#background #overlay, #background #vignette, #background #colorizer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
} */

/* #background #overlay { */
/* default - bliver overskrevet i background */
/* opacity: 0.5;
} */

/* #background #colorizer {
    mix-blend-mode: color;
}

#background #vignette {
    -webkit-transition: background 1s;
    -moz-transition: background 1s;
    -ms-transition: background 1s;
    -o-transition: background 1s;
    transition: background 1s;
}

#background #vignette.dark {
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, .8) 100%);
}

#background #vignette.light {
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, .6) 100%);
}

#background #vignette.none {
    background: none;
} */

/***********************/

/****** PRELOADER ******/

#preloader,
#splashloader {
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  background: rgba(0, 0, 0, 1);
  z-index: 300;
  height: 100%;
}

#preloader .text {
  position: absolute;
  width: 100%;
  color: #666;
  /* font-size: 1.6rem; */
  text-align: center;
  left: 50%;
  top: 40%;
  margin: 70px 0 0 -50%;
}

#preloader .image-preloader {
  position: absolute;
  text-align: center;
  left: 50%;
  top: 50%;
  margin: 70px 0 0 -25px;
}

#preloader .image-preloader img {
  width: 50px;
  position: absolute;
}

#preloader .spinner {
  left: 50%;
  top: 40%;
}

#preloader .error {
  position: absolute;
  font-size: var(--HD60px);
  transform: translate(-50%, -50%);
  left: 50%;
  top: 40%;
  color: #fff;
  display: none;
}

#preloader .uid {
  font-family: "Times New Roman", Times, serif;
  font-size: 1.6em;
  margin-top: 0.4em;
  color: white;
  user-select: text;
}

.spinner {
  display: block;
  position: absolute;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  border-radius: 50%;
  border: 3px solid #fff;
  border-top-color: transparent;
  -webkit-animation: spin 2s linear infinite;
  /* Chrome, Opera 15+, Safari 5+ */
  animation: spin 2s linear infinite;
  /* Chrome, Firefox 16+, IE 10+, Opera */
  z-index: 100;
}

.spinner:before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  border-radius: 50%;
  border: 3px solid #fff;
  border-left-color: transparent;
  -webkit-animation: spin 3s linear infinite;
  /* Chrome, Opera 15+, Safari 5+ */
  animation: spin 3s linear infinite;
  /* Chrome, Firefox 16+, IE 10+, Opera */
}

.spinner:after {
  content: "";
  position: absolute;
  top: 7px;
  left: 7px;
  right: 7px;
  bottom: 7px;
  border-radius: 50%;
  border: 3px solid #fff;
  border-bottom-color: transparent;
  -webkit-animation: spin 1s linear infinite;
  /* Chrome, Opera 15+, Safari 5+ */
  animation: spin 1s linear infinite;
  /* Chrome, Firefox 16+, IE 10+, Opera */
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(0deg);
    /* IE 9 */
    transform: rotate(0deg);
    /* Firefox 16+, IE 10+, Opera */
  }
  100% {
    -webkit-transform: rotate(360deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(360deg);
    /* IE 9 */
    transform: rotate(360deg);
    /* Firefox 16+, IE 10+, Opera */
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(0deg);
    /* IE 9 */
    transform: rotate(0deg);
    /* Firefox 16+, IE 10+, Opera */
  }
  100% {
    -webkit-transform: rotate(360deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(360deg);
    /* IE 9 */
    transform: rotate(360deg);
    /* Firefox 16+, IE 10+, Opera */
  }
}

/**********************/

/******* NAVBAR *******/

#navbar {
  z-index: 80;
  position: fixed;
  top: 0;
  background: #000;
  width: 100%;
  height: 50px;
  /*** hide as default***/
  display: none;
}

#navbar .title {
  color: #fff;
  line-height: 50px;
  width: 100%;
  text-align: center;
}

#navbar .btn {
  background: #000;
  float: left;
  display: flex;
  width: 40px;
  align-items: center;
  justify-content: center;
  height: 40px;
  margin: 5px;
  border: 0px solid #333;
  border-radius: 5px;
}

#navbar .btn-home {
  float: left;
}

#navbar .btn-menu {
  float: right;
}

#navbar .btn img {
  width: 18px;
}

#navbar .title img {
  height: 20px;
  margin-top: 18px;
}

.menu-burger {
  position: relative;
  width: 18px;
  height: 10px;
  cursor: pointer;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
}

.menu-burger span {
  display: block;
  position: absolute;
  width: 100%;
  height: 3px;
  top: 40%;
  left: 0;
  background: #fff;
  transition: background-color 0.3s;
}

.menu-burger span:before,
.menu-burger span:after {
  content: "";
  position: absolute;
  background: #fff;
  width: 100%;
  height: 100%;
  left: 0;
  transition: transform 0.3s;
}

.menu-burger span:after {
  transform: translateY(6px);
}

.menu-burger span:before {
  transform: translateY(-6px);
}

.menu-burger.menu-burger-transformed {
  transform: rotate(180deg);
}

.menu-burger.menu-burger-transformed span:after {
  transform: translateY(3px) translateX(-6px) rotate(45deg) scaleX(0.6);
}

.menu-burger.menu-burger-transformed span:before {
  transform: translateY(-3px) translateX(-6px) rotate(-45deg) scaleX(0.6);
}

/**********************/

/******** MENU ********/

#menu {
  position: fixed;
  top: 1px;
  left: 40px;
  bottom: 0px;
  right: 0px;
  background: rgba(0, 0, 0, 0.8);
  z-index: 60;
  height: 100%;
  border-left: 1px solid #fff;
  border-top: 1px solid #fff;
}

#menu a {
  display: block;
  background: #fff;
  font-size: 2rem;
  padding: 20px;
  border-bottom: 1px solid #fff;
  text-decoration: none;
  margin-bottom: 1px;
  color: #000;
  font-weight: bold;
}

#menu a:active {
  background: #fff;
}

/*******************************/

/****** HOME AND SIBLINGS ******/

#home-sibl-nav {
  position: fixed;
  bottom: 0px;
  left: 0px;
  z-index: 100;
  display: block;
  height: var(--HD90px);
  transform-origin: bottom;
  transform: scale(1);
}

#home-sibl-nav a {
  position: absolute;
  display: block;
  width: var(--HD90px);
  height: var(--HD90px);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  display: flex;
  justify-content: center;
}

#home-sibl-nav a .eyecatch {
  position: absolute;
  font-size: var(--HD6px);
  color: var(--element-background-color);
  opacity: 0;
  background: var(--element-text-color);
  padding: var(--HD6px);
  text-align: center;
  white-space: nowrap;
}

#home-sibl-nav a .eyecatch::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  background: var(--element-text-color);
  bottom: -2px;
  left: 50%;
  transform: rotate(45deg);
}

#home-sibl-nav.shaded a {
  background-color: rgba(0, 0, 0, 0.6);
}

#home-sibl-nav a:active {
  background-color: rgba(255, 255, 255, 0.3);
}

#home-sibl-nav .btn-back {
  background-image: url("../images/back.png");
  background-size: 50%;
  border-right: 1px solid rgba(255, 255, 255, 0.3);
}

#home-sibl-nav .btn-home {
  background-image: url("../images/nav_home.png");
  background-size: 50%;
  left: 0;
}

#home-sibl-nav .btn-more {
  background-image: url("../images/nav_siblings.png");
  background-size: 50%;
  left: var(--HD90px);
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}

#home-sibl-nav.shaded .btn-back,
#home-sibl-nav.shaded .btn-more {
  border-left: 1px solid #000;
}

/**********************/

/****** TIMELINE ******/

#timeline {
  z-index: 20;
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  overflow: hidden;
}

#timeline .content {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#timeline h2 {
  margin-bottom: 40px;
  position: absolute;
}

/**********************/

/****** MAP ******/

#map {
  z-index: 20;
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  /* background: #fefefe;
    background-image: url("../images/bg.jpg"); */
  overflow: auto;
}

#map .map-controls {
  position: fixed;
  bottom: 0;
  right: 0;
}

#map .zoomlabel {
  height: 40px;
  width: 100px;
  z-index: 40;
  background: #000;
  color: #fff;
  font-size: 1.2rem;
  line-height: 40px;
  text-align: center;
}

#map .map-title {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 40;
  color: #fff;
  text-align: left;
}

/**********************/

/****** LIST MENU ******/

#listmenu {
  z-index: 90;
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  padding: 1px 0px;
  overflow: auto;
}

#listmenu .content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap: wrap;
  min-height: 100%;
}

#listmenu .btn {
  width: 50vw;
  height: 10vw;
  margin-bottom: var(--HD21px);
  display: flex;
  z-index: 100;
}

#listmenu .btn.btn-theme {
  color: #fff;
}

/***********************/

/***** FULLSCREEN  *****/

#fullscreen {
  z-index: 90;
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  background: rgba(0, 0, 0, 0.767);
  color: #fff;
  overflow: auto;
}

#fullscreen .text {
  z-index: 500;
  position: fixed;
  width: 100%;
  bottom: 0;
  /* font-size: 1.6rem; */
  padding: 20px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  text-align: center;
}

#fullscreen .image {
  z-index: 400;
  max-width: 100vw;
  max-height: 100vh;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#fullscreen video {
  z-index: 500;
  width: 100%;
  height: 100vh;
}

#msg {
  display: none;
  z-index: 300;
  position: fixed;
  width: 320px;
  bottom: 0;
  right: 0;
  /* transform: translate(-50%, -50%); */
  background: #360;
  color: #9f0;
  padding: 30px;
  border-left: 2px #9f0 solid;
  border-top: 2px #9f0 solid;
  border-radius: 10px 0 0 0;
  /* margin:20px; */
}

/**********************/

/****** EFFECTS  ******/

/* Flash effekt på knapper */

.flash {
  position: absolute;
  z-index: 990;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 var(--HD30px) #fff;
  /* display: none; */
  opacity: 0;
}

/* .halo udbygger .flash med kun border */

.flash.halo {
  background: none;
  border: inherit;
  border-color: #fff;
}

/* Test modes in action */

#btn-showmodemenu {
  font-size: 1rem;
  position: absolute;
  width: 120px;
  line-height: 30px;
  text-align: center;
  background: #000;
  border: rgba(255, 255, 255, 0.5);
  color: #9f0;
  z-index: 500;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  border-radius: 10px 10px 0 0;
}

#modemenu {
  position: absolute;
  width: 350px;
  text-align: center;
  background: #ccc;
  z-index: 500;
  bottom: 40%;
  left: 50%;
  transform: translate(-155px, 50%);
  padding: 5px;
  border-radius: 5px;
  color: #bbb;
  -webkit-box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 20px 20px 20px 0px rgba(0, 0, 0, 0.7);
}

#modemenu span {
  display: block;
  margin: 20px 0 20px;
  font-size: 1.6rem;
  font-weight: bold;
}

#modemenu .btn-close {
  position: absolute;
  right: -15px;
  top: -15px;
  color: #9f0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #000;
  border-radius: 50%;
  border: 3px solid #ccc;
}

#modemenu .btn-close:active {
  background: #fff;
}

#modemenu .btn-mode {
  font-size: 1.6rem;
  background: #000;
  color: #9f0;
  margin-top: 2px;
  padding: 10px;
}

#modemenu .btn-mode:active,
#modemenu .btn-mode.active {
  background: #fff;
  color: #360;
}

.radial-gradient {
  background: radial-gradient(
    ellipse at center,
    rgba(100, 100, 100, 0.2) 0%,
    rgba(0, 0, 0, 0.8) 85%
  );
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.radial-gradient-dark {
  /* background: radial-gradient(ellipse at center, rgba(50, 50, 50, 0.6) 0%, rgba(0, 0, 0, 1) 100%); */
  background: radial-gradient(
    ellipse at center,
    rgba(40, 40, 40, 0.6) 0%,
    rgba(0, 0, 0, 1) 75%
  );
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

/* CONTROLPANEL */

#controlpanel {
  z-index: 600;
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: rgba(38, 77, 0, 0.9);
  border: rgb(85, 170, 0) 3px solid;
  top: 50%;
  left: 50%;
  transform: translate(-30vw, -30vh);
  padding: var(--HD45px);
  border-radius: 5px;
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-gap: var(--HD45px);
  opacity: 0;
  grid-template-areas: "log func";
}

.portraitmode #controlpanel {
  grid-template-columns: 1fr;
  grid-template-rows: 3fr 2fr;
  grid-template-areas: "log log" "func func";
}

#controlpanel > div {
  border: rgb(85, 170, 0) 1px solid;
  border-radius: 5px;
  padding: var(--HD18px);
  overflow: scroll;
  color: #9f0;
}

#controlpanel #log {
  grid-area: log;
  overflow: scroll;
  user-select: text;
}

#controlpanel #jsonbuttons {
  grid-area: json;
}

#controlpanel #functionbuttons {
  grid-area: func;
}

#controlpanel h3 {
  position: absolute;
  color: #9f0;
  font-size: var(--HD18px);
  margin-top: calc(0px - var(--HD45px));
}

#controlpanel #version {
  position: absolute;
  color: #9f0;
  font-size: var(--HD12px);
  bottom: 0;
  right: 0;
  border: none;
  padding: var(--HD12px);
}

#controlpanel #data-identity {
  position: absolute;
  color: #9f0;
  font-size: var(--HD18px);
  bottom: 0;
  left: 0;
  border: none;
  padding: var(--HD12px);
}

#controlpanel .subhead {
  font-size: var(--HD12px);
  margin-bottom: 1em;
}

#controlpanel .subhead.ruler {
  padding-top: 1em;
  margin-top: 1.5em;
  border-top: rgb(85, 170, 0) 1px solid;
}

#controlpanel a,
#controlpanel .btn {
  display: block;
  background: #000;
  text-align: center;
  font-size: 15px;
  padding: 1em;
  color: #9f0;
  margin-bottom: 10px;
  text-decoration: none;
}

#controlpanel a:active,
#controlpanel .btn:active {
  background: #030;
}

/**********************/

/**** TOUCH ADVIDE ****/

#tw-touchadvice {
  z-index: 200;
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  display: none;
  background-color: var(--touchadvice-bg-color);
}

/* FPS VIEW */

#fps {
  display: none;
  padding: 20px;
  position: absolute;
  bottom: 5px;
  right: 5px;
  border-radius: 5px;
  z-index: 1999;
  color: #9f0;
  border: rgb(85, 170, 0) 3px solid;
  /* border-right: none; */
  /* border-bottom: none; */
  text-align: center;
  background: rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
#fps .info {
  display: flex;
  justify-content: space-between;
}

/* Animations */

/* (kun opacity på mobile) */

.blur-in {
  animation: blur-in 0.3s;
}

@keyframes blur-in {
  100% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}

.blur-out {
  animation: blur-out 0.3s;
}

@keyframes blur-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/**************************************************/

/************ EXPLICIT MOBILE & TABLET ************/

@media (max-width: 900px) {
  #home,
  #main,
  #timeline,
  #basic,
  #map,
  #menu,
  #search,
  #textinput,
  #writer {
    /*nav bar height fix*/
    top: 50px !important;
  }
  #home-sibl-nav {
    /* hide desktop nav */
    display: none;
  }
  #navbar {
    /*** show  mobile nav***/
    display: initial;
  }
}

/**************************************************/

/************ PRINTING FROM PREVIEWER *************/

@media print {
  #controlpanel {
    display: none !important;
  }
  #modemenu {
    display: none !important;
  }
  #home-sibl-nav {
    display: none !important;
  }
  #language-selector {
    display: none !important;
  }
  /* infowarningll billeder */
  .inner-container img {
    transform: initial !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  /* background fit */
  #background canvas {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

@media (orientation: portrait) {
  @page {
    size: portrait A4;
  }
}

@media (orientation: landscape) {
  @page {
    size: landscape A4;
  }
}