.interactive-content {
  background: linear-gradient(to bottom, #ecf1ef 50%, #F6F7F6 50%);
  position: relative;
  overflow-x: visible;
}

.interactive-content__intro {
  padding: 0 80px;
}
.interactive-content__intro * {
  margin: 0;
}

.interactive-content__items {
  background-image: url("images/Bakgrunn-ORG-NY-copy.webp");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
  padding-top: 58%;
  margin-top: 50px;
  position: relative;
}

.interactive-content__close {
  background-color: #fff;
  padding: 0;
  border: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: scale(1);
  transition: 0.4s transform ease;
  position: absolute;
  top: 0;
  right: 0;
  display: none;
}
@media (max-width: 900px) {
  .interactive-content__close {
    display: block;
  }
}

.interactive-content__toggle {
  background-color: #fff;
  padding: 0;
  border: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -36px;
  transform: scale(1);
  transition: 0.4s transform ease;
  position: absolute;
  top: 0;
}
.interactive-content__toggle[aria-expanded=false] .interactive-content__icon {
  transform: rotate(0);
}
.interactive-content__toggle[aria-expanded=false] + .interactive-content__content {
  display: none;
}
.interactive-content__toggle[aria-expanded=true] {
  z-index: 4;
}
.interactive-content__toggle:hover {
  transform: scale(1.1);
}

.interactive-content__icon {
  width: 22px;
  height: 22px;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.interactive-content__icon path {
  fill: #016647;
}

.interactive-content__content {
  background-color: #fff;
  color: #016647;
  padding: 40px;
  position: absolute;
  width: 400px;
  top: 0;
  right: 0;
  z-index: 3;
}
.interactive-content__content a {
  color: #016647;
}
.interactive-content__content ul {
  margin: 0;
  padding: 0;
  list-style: none;
  margin-top: 20px;
}
.interactive-content__content li {
  padding: 8px 0;
}
.interactive-content__content > *:first-child {
  margin-top: 0;
}
.interactive-content__content > *:last-child {
  margin-bottom: 0;
}

.interactive-content__heading {
  font-size: 1.35em;
  margin: 0;
}

.interactive-content__item {
  position: absolute;
}
.interactive-content__item:hover .interactive-content__illustration {
  filter: grayscale(0) !important;
}
.interactive-content__item[data-id=building] {
  left: -8vw;
  top: 0;
}
.interactive-content__item[data-id=building] .interactive-content__illustration {
  background-image: url("images/dome.webp");
  width: 50vw;
  padding-top: 50%;
}
.interactive-content__item[data-id=building] .interactive-content__content {
  right: 8vw;
  top: 3vw;
}
.interactive-content__item[data-id=building] .interactive-content__toggle {
  right: 8vw;
  top: 3vw;
  margin-right: -36px;
}
.interactive-content__item[data-id=anglerfish] {
  top: 13vw;
  left: -1vw;
}
.interactive-content__item[data-id=anglerfish] .interactive-content__illustration {
  background-image: url("images/Boat.webp");
  width: 20vw;
  padding-top: 50%;
}
.interactive-content__item[data-id=anglerfish] .interactive-content__content {
  left: 13vw;
  top: 3vw;
  right: auto;
}
.interactive-content__item[data-id=anglerfish] .interactive-content__toggle {
  position: absolute;
  left: 13vw;
  top: 3vw;
  margin-left: -36px;
}
.interactive-content__item[data-id=edda-freya] {
  left: 40vw;
  top: 5vw;
}
.interactive-content__item[data-id=edda-freya] .interactive-content__illustration {
  background-image: url("images/eddav_flipped.webp");
  filter: grayscale(1) brightness(2.5);
  width: 25vw;
  padding-top: 50%;
}
.interactive-content__item[data-id=edda-freya] .interactive-content__toggle {
  position: absolute;
  right: 3vw;
  top: 3vw;
  margin-right: -36px;
}
.interactive-content__item[data-id=edda-freya] .interactive-content__content {
  right: 3vw;
  top: 3vw;
}
.interactive-content__item[data-id=wind] {
  right: 17vw;
  top: -2vw;
}
.interactive-content__item[data-id=wind] .interactive-content__illustration {
  background-image: url("images/stang.webp");
  width: 10vw;
  height: 20vw;
  padding-top: 50%;
}
.interactive-content__item[data-id=wind] .interactive-content__illustration::after {
  content: "";
  background-image: url("images/blad.webp");
  background-size: cover;
  height: 18vw;
  width: 18vw;
  display: block;
  position: absolute;
  top: -8vw;
  left: -4vw;
  -webkit-animation-name: wind;
          animation-name: wind;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.interactive-content__item[data-id=wind] .interactive-content__illustration::after::after {
  content: "";
  background: red;
  height: 10px;
  width: 10px;
  display: block;
}
.interactive-content__item[data-id=wind] .interactive-content__content {
  width: 400px;
  right: -5vw;
}
.interactive-content__item[data-id=wind]::before {
  content: "";
  background-image: url("images/rts-midten-ny.webp");
  background-size: cover;
  height: 7.5vw;
  width: 9vw;
  position: absolute;
  right: 1vw;
  top: 16vw;
  display: inline-block;
  z-index: 2;
}
.interactive-content__item[data-id=wind] .interactive-content__toggle {
  position: absolute;
  right: -5vw;
  margin-right: -32px;
}
.interactive-content__item[data-id=wind-offshore] {
  right: 17vw;
  top: -0.5vw;
}
.interactive-content__item[data-id=wind-offshore] .interactive-content__illustration {
  content: "";
  background-image: url("images/blad.webp");
  background-size: cover;
  height: 7vw;
  width: 7vw;
  display: block;
  position: absolute;
  top: 4.9vw;
  left: 1.6vw;
  -webkit-animation-name: wind;
          animation-name: wind;
  -webkit-animation-duration: 1.8s;
          animation-duration: 1.8s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  z-index: 2;
}
.interactive-content__item[data-id=wind-offshore]::after {
  content: "";
  background-image: url("images/wind_turbine_offshore.webp");
  filter: grayscale(1);
  background-size: cover;
  height: 15vw;
  width: 8vw;
  position: absolute;
  right: -9vw;
  top: 5vw;
  display: inline-block;
  z-index: 1;
}
.interactive-content__item[data-id=wind-offshore] .interactive-content__toggle {
  display: none !important;
}
.interactive-content__item[data-id=merd] {
  left: 2vw;
  top: 23vw;
}
.interactive-content__item[data-id=merd] .interactive-content__illustration {
  background-image: url("images/merd.webp");
  width: 35vw;
  padding-top: 50%;
  filter: grayscale(1) brightness(0.6);
}
.interactive-content__item[data-id=merd] .interactive-content__toggle {
  right: 7vw;
  top: 2vw;
  margin-right: -36px;
}
.interactive-content__item[data-id=merd] .interactive-content__content {
  right: 7vw;
  top: 2vw;
}
.interactive-content__item[data-id=rov] {
  right: 39vw;
  top: 22.5vw;
}
.interactive-content__item[data-id=rov] .interactive-content__illustration {
  background-image: url("images/rov.webp");
  filter: grayscale(1) brightness(1.8);
  width: 11vw;
  padding-top: 50%;
  opacity: 0.8;
}
.interactive-content__item[data-id=rov] .interactive-content__toggle {
  position: absolute;
  right: 2vw;
  margin-right: -36px;
}
.interactive-content__item[data-id=rov] .interactive-content__content {
  top: 0;
  right: 2vw;
}
.interactive-content__item[data-id=rovbunn] {
  right: 3vw;
  top: 30vw;
}
.interactive-content__item[data-id=rovbunn] .interactive-content__illustration {
  background-image: url("images/rovbunn.webp");
  width: 25vw;
  padding-top: 50%;
  opacity: 0.7;
}
.interactive-content__item[data-id=rovbunn] .interactive-content__toggle {
  position: absolute;
  right: 5vw;
  margin-right: -36px;
}
.interactive-content__item[data-id=rovbunn] .interactive-content__content {
  right: 5vw;
}
.interactive-content__item[data-id=template] {
  left: 31.2vw;
  top: 29.25vw;
  z-index: 2;
}
.interactive-content__item[data-id=template] .interactive-content__illustration {
  background-image: url("images/Template_render_v2.webp");
  width: 26vw;
  padding-top: 50%;
}
.interactive-content__item[data-id=template] .interactive-content__toggle {
  right: 6vw;
  top: 2vw;
  margin-right: -36px;
}
.interactive-content__item[data-id=template] .interactive-content__content {
  right: 6vw;
  top: 2vw;
}
.interactive-content__item[data-id=auv] {
  right: 42vw;
  bottom: 28vw;
}
.interactive-content__item[data-id=auv] .interactive-content__illustration {
  background-image: url("images/AUV_hugin-1020x204-bw.webp");
  width: 12vw;
  padding-top: 50%;
}
.interactive-content__item[data-id=auv] .interactive-content__toggle {
  right: 3vw;
  top: 2vw;
  margin-right: -36px;
  display: none !important;
}
.interactive-content__item[data-id=auv] .interactive-content__content {
  right: 3vw;
  top: 2vw;
}
.interactive-content__item[data-id=suction-anchor] {
  right: 2vw;
  top: 18vw;
}
.interactive-content__item[data-id=suction-anchor] .interactive-content__illustration {
  background-image: url("images/anchor.webp");
  width: 20vw;
  padding-top: 50%;
}
.interactive-content__item[data-id=suction-anchor] .interactive-content__toggle {
  right: 6vw;
  top: 7vw;
  margin-right: -36px;
}
.interactive-content__item[data-id=suction-anchor] .interactive-content__content {
  right: 6vw;
  top: 7vw;
}
.interactive-content__item[data-id=tare] {
  right: 13vw;
  top: 15vw;
}
.interactive-content__item[data-id=tare] .interactive-content__illustration {
  background-image: url("images/goby.webp");
  width: 40vw;
  padding-top: 50%;
}
.interactive-content__item[data-id=tare] .interactive-content__toggle {
  right: 16vw;
  margin-right: -36px;
  top: 5vw;
  display: none !important;
}
.interactive-content__item[data-id=tare] .interactive-content__content {
  right: 16vw;
  top: 5vw;
}

.interactive-content__deco {
  pointer-events: none;
}
.interactive-content__deco img {
  position: absolute;
}
.interactive-content__deco #bottom-right {
  bottom: 0;
  right: 0;
  width: 70vw;
  overflow: hidden;
}
.interactive-content__deco #bottom-left {
  bottom: 8vw;
  left: 5vw;
  width: 12vw;
}
.interactive-content__deco #fish {
  top: 45vw;
  left: 20vw;
  width: 13vw;
}
.interactive-content__deco #squid {
  bottom: 15vw;
  left: 35vw;
  width: 17vw;
}

.interactive-content__stripes {
  z-index: 2;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  pointer-events: none;
}
.interactive-content__stripes #stripe-rovbunn {
    position: absolute;
    width: 19vw;
    height: auto;
    right: -8.5vw;
    bottom: 24vw;
    transform: rotate(15deg);
    overflow: hidden;
}
.interactive-content__stripes #stripe-rov {
  position: absolute;
  width: auto;
  height: 10vw;
  top: 14vw;
  right: 45vw;
}
.interactive-content__stripes #stripe-rov-mobile {
  display: none;
  position: absolute;
}
.interactive-content__stripes #stripe-template {
  position: absolute;
  height: 22vw;
  width: auto;
  top: 10vw;
  left: 36.4vw;
}

.interactive-content__illustration {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  filter: grayscale(1);
  transform: scale(1);
  transition: 0.5s ease;
}

@media (max-width: 800px) {
  .interactive-content__intro {
    padding: 0 40px;
  }

  .interactive-content__items {
    padding-top: 220%;
    margin-top: 100px;
    background-size: cover;
  }

  .interactive-content__toggle {
    z-index: 2 !important;
    height: 45px;
    width: 45px;
  }

  .interactive-content__icon {
    width: 18px;
    height: 18px;
  }

  .interactive-content__stripes {
    z-index: 0;
  }
  .interactive-content__stripes #stripe-rovbunn {
    width: 22vw;
    right: -1vw;
    bottom: 40vw;
  }
  .interactive-content__stripes #stripe-rov {
    height: 90vw;
    top: 37vw;
    right: 25vw;
    display: none;
  }
  .interactive-content__stripes #stripe-rov-mobile {
    display: block;
    height: 85vw;
    top: 61vw;
    right: 30vw;
    opacity: 0.3;
  }
  .interactive-content__stripes #stripe-template {
    height: 49vw;
    top: 63vw;
    right: 35vw;
  }

  .interactive-content__content {
    position: fixed;
    width: calc(100% - 80px) !important;
    height: calc(100vh - 80px);
    overflow: auto;
    left: 50% !important;
    transform: translateX(-50%);
    margin-top: 40px;
    overflow-x: hidden;
  }
  .interactive-content__content .interactive-content__toggle {
    display: block;
    transform: rotate(-45deg);
    position: fixed !important;
    top: 60px !important;
    left: auto !important;
    right: 12px !important;
    margin-right: 0 !important;
  }

  .interactive-content__item[data-id=building] {
    left: -10vw;
    top: 15vw;
  }
  .interactive-content__item[data-id=building] .interactive-content__illustration {
    width: 78vw;
  }
  .interactive-content__item[data-id=building] .interactive-content__toggle {
    right: 100px;
    width: 45px;
    height: 45px;
  }
  .interactive-content__item[data-id=anglerfish] {
    top: 37vw;
    left: 1vw;
  }
  .interactive-content__item[data-id=anglerfish] .interactive-content__illustration {
    width: 35vw;
  }
  .interactive-content__item[data-id=anglerfish] .interactive-content__toggle {
    left: 25vw;
    top: 20vw;
  }
  .interactive-content__item[data-id=edda-freya] {
    right: 9vw;
    left: auto;
    top: 46vw;
  }
  .interactive-content__item[data-id=edda-freya] .interactive-content__illustration {
    width: 45vw;
  }
  .interactive-content__item[data-id=edda-freya] .interactive-content__toggle {
    left: 30vw;
    top: 5vw;
  }
  .interactive-content__item[data-id=wind] {
    right: 20vw;
    top: 9vw;
  }
  .interactive-content__item[data-id=wind] .interactive-content__illustration {
    transform: scale(2);
  }
  .interactive-content__item[data-id=wind]::before {
    height: 10vw;
    width: 12vw;
    right: -1vw;
    top: 25vw;
  }
  .interactive-content__item[data-id=wind] .interactive-content__toggle {
    right: 15vw;
    top: 15vw;
  }
  .interactive-content__item[data-id=wind-offshore] {
    top: 10vw;
    right: 25vw;
    transform: scale(2.2);
  }
  .interactive-content__item[data-id=merd] {
    left: -10vw;
    top: 65vw;
  }
  .interactive-content__item[data-id=merd] .interactive-content__illustration {
    width: 60vw;
  }
  .interactive-content__item[data-id=merd] .interactive-content__toggle {
    left: 20vw;
    top: 25vw;
  }
  .interactive-content__item[data-id=rov] {
    right: 9vw;
    top: 140vw;
  }
  .interactive-content__item[data-id=rov] .interactive-content__illustration {
    width: 35vw;
  }
  .interactive-content__item[data-id=rov] .interactive-content__toggle {
    right: 10vw;
    top: 18vw;
  }
  .interactive-content__item[data-id=rovbunn] {
    right: -4vw;
    top: auto;
    bottom: 12vw;
  }
  .interactive-content__item[data-id=rovbunn] .interactive-content__illustration {
    width: 70vw;
  }
  .interactive-content__item[data-id=rovbunn] .interactive-content__toggle {
    left: 25vw;
    top: 3vw;
  }
  .interactive-content__item[data-id=template] {
    left: 26vw;
    top: 105vw;
  }
  .interactive-content__item[data-id=template] .interactive-content__illustration {
    width: 55vw;
  }
  .interactive-content__item[data-id=template] .interactive-content__toggle {
    left: -2vw;
    top: 20vw;
  }
  .interactive-content__item[data-id=suction-anchor] {
    right: -5vw;
    top: 100vw;
  }
  .interactive-content__item[data-id=suction-anchor] .interactive-content__illustration {
    width: 42vw;
  }
  .interactive-content__item[data-id=suction-anchor] .interactive-content__toggle {
    right: 20vw;
    top: 25vw;
  }
  .interactive-content__item[data-id=tare] {
    top: auto;
    bottom: 100vw;
    right: 50vw;
  }
  .interactive-content__item[data-id=tare] .interactive-content__illustration {
    width: 60vw;
  }
  .interactive-content__item[data-id=auv] {
    bottom: 40vw;
    right: 60vw;
  }

  .interactive-content__deco #fish {
    top: 145vw;
    left: 20vw;
    width: 25vw;
  }
  .interactive-content__deco #bottom-left {
    width: 20vw;
    left: 7vw;
    bottom: 13vw;
  }
  .interactive-content__deco #bottom-right {
    width: 100vw;
    bottom: 0;
  }
}
@-webkit-keyframes wind {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes wind {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}