.hide-radio {
  display: none;
}

.wheel-sdg {
  max-width: 100%;
}

.company-banner-full-width article h1 {
  font-size: 40px;
  line-height: 120%;
}

.company-banner-full-width article {
  padding-top: 100px;
  padding-bottom: 130px;
}

.spinny-wheel-sdg {
  width: 1070px;
  max-width: 100%;
  height: 1070px;
  max-height: calc(100vw - 100px);
  background-image: url("https://www.locinox.com/content/files/images/sdg/all-icons.png");
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  margin: 50px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 300px;
  transition: transform ease .3s;
}

.selected-sdg-icon {
  background-color: #ededed;
  border-radius: 1000px;
  width: 70%;
  height: 70%;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
}

.sdg-icons-flex {
  width: 70%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10%;
}

.arrow-sdg {
  width: 60px;
  height: 60px;
}

.arrow:hover, .arrow-sdg:hover {
  cursor: pointer;
}

.goal-icon {
  width: 200px;
  height: 200px;
  border-radius: 1000px;
  filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.25));
  margin-top: -30px;
}

.selected-sdg-icon h2 {
  width: 70%;
  line-height: 150%;
}

.sdg-detail-text {
  width: 73%;
  height: 35%;
  overflow-y: auto;
  padding: 0 25px;
}

/* Navigation-images */
.trigger-nav-label img {
  width: 55px;
  height: 55px;
  margin-bottom: 40px;
  margin-left: 3px;
  margin-right: 3px;
  transition:
    width ease .2s,
    height ease .2s,
    margin ease .2s,
    margin-left ease .2s,
    margin-right ease .2s;
}

.trigger-nav-label img:hover {
  width: 61px;
  height: 61px;
  margin-bottom: 33px;
  margin-top: -33px;
  margin-left: 0;
  margin-right: 0;
  cursor: pointer;
}

.trigger-nav-label-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

/* hide not-selected sdgs */
.spinny-wheel-sdg .selected-sdg-icon {
  display: flex;
  position: absolute;
  left: center;
  top: center;
  opacity: 0;
  z-index: -99
}

.trigger-sdg-1:checked~.spinny-wheel-sdg .selected-sdg-icon-1,
.trigger-sdg-2:checked~.spinny-wheel-sdg .selected-sdg-icon-2,
.trigger-sdg-3:checked~.spinny-wheel-sdg .selected-sdg-icon-3,
.trigger-sdg-4:checked~.spinny-wheel-sdg .selected-sdg-icon-4,
.trigger-sdg-5:checked~.spinny-wheel-sdg .selected-sdg-icon-5,
.trigger-sdg-6:checked~.spinny-wheel-sdg .selected-sdg-icon-6,
.trigger-sdg-7:checked~.spinny-wheel-sdg .selected-sdg-icon-7,
.trigger-sdg-8:checked~.spinny-wheel-sdg .selected-sdg-icon-8,
.trigger-sdg-9:checked~.spinny-wheel-sdg .selected-sdg-icon-9,
.trigger-sdg-10:checked~.spinny-wheel-sdg .selected-sdg-icon-10,
.trigger-sdg-11:checked~.spinny-wheel-sdg .selected-sdg-icon-11,
.trigger-sdg-12:checked~.spinny-wheel-sdg .selected-sdg-icon-12,
.trigger-sdg-13:checked~.spinny-wheel-sdg .selected-sdg-icon-13,
.trigger-sdg-14:checked~.spinny-wheel-sdg .selected-sdg-icon-14,
.trigger-sdg-15:checked~.spinny-wheel-sdg .selected-sdg-icon-15,
.trigger-sdg-16:checked~.spinny-wheel-sdg .selected-sdg-icon-16,
.trigger-sdg-17:checked~.spinny-wheel-sdg .selected-sdg-icon-17 {
  display: flex;
  opacity: 1;
  z-index: 99;
}

/* Rotate the spinny weel */
.trigger-sdg-1:checked~.spinny-wheel-sdg {
  transform: rotate(0deg);
}

.trigger-sdg-1:checked~.spinny-wheel-sdg .selected-sdg-icon {
  transform: rotate(0deg);
  transition: transform ease .3s;
}

/* .trigger-sdg-2:checked~.spinny-wheel-sdg {
  transform: rotate(-21.18deg);
}

.trigger-sdg-2:checked~.spinny-wheel-sdg .selected-sdg-icon {
  transform: rotate(21.18deg);
  transition: transform ease .3s;
} */
.trigger-sdg-3:checked~.spinny-wheel-sdg {
  transform: rotate(-40deg);
}

.trigger-sdg-3:checked~.spinny-wheel-sdg .selected-sdg-icon {
  transform: rotate(40deg);
  transition: transform ease .3s;
}

.trigger-sdg-4:checked~.spinny-wheel-sdg {
  transform: rotate(-80deg);
}

.trigger-sdg-4:checked~.spinny-wheel-sdg .selected-sdg-icon {
  transform: rotate(80deg);
  transition: transform ease .3s;
}

.trigger-sdg-5:checked~.spinny-wheel-sdg {
  transform: rotate(-120deg);
}

.trigger-sdg-5:checked~.spinny-wheel-sdg .selected-sdg-icon {
  transform: rotate(120deg);
  transition: transform ease .3s;
}

/* .trigger-sdg-6:checked~.spinny-wheel-sdg {
  transform: rotate(-105.9deg);
}

.trigger-sdg-6:checked~.spinny-wheel-sdg .selected-sdg-icon {
  transform: rotate(105.9deg);
  transition: transform ease .3s;
} */
.trigger-sdg-7:checked~.spinny-wheel-sdg {
  transform: rotate(-160deg);
}

.trigger-sdg-7:checked~.spinny-wheel-sdg .selected-sdg-icon {
  transform: rotate(160deg);
  transition: transform ease .3s;
}

.trigger-sdg-8:checked~.spinny-wheel-sdg {
  transform: rotate(-200deg);
}

.trigger-sdg-8:checked~.spinny-wheel-sdg .selected-sdg-icon {
  transform: rotate(200deg);
  transition: transform ease .3s;
}

.trigger-sdg-9:checked~.spinny-wheel-sdg {
  transform: rotate(-240deg);
}

.trigger-sdg-9:checked~.spinny-wheel-sdg .selected-sdg-icon {
  transform: rotate(240deg);
  transition: transform ease .3s;
}

/* .trigger-sdg-10:checked~.spinny-wheel-sdg {
  transform: rotate(-190.62deg);
}

.trigger-sdg-10:checked~.spinny-wheel-sdg .selected-sdg-icon {
  transform: rotate(190.62deg);
  transition: transform ease .3s;
} */
/* .trigger-sdg-11:checked~.spinny-wheel-sdg {
  transform: rotate(-211.8deg);
}

.trigger-sdg-11:checked~.spinny-wheel-sdg .selected-sdg-icon {
  transform: rotate(211.8deg);
  transition: transform ease .3s;
} */
.trigger-sdg-12:checked~.spinny-wheel-sdg {
  transform: rotate(-280deg);
}

.trigger-sdg-12:checked~.spinny-wheel-sdg .selected-sdg-icon {
  transform: rotate(280deg);
  transition: transform ease .3s;
}

/* .trigger-sdg-13:checked~.spinny-wheel-sdg {
  transform: rotate(-254.16deg);
}

.trigger-sdg-13:checked~.spinny-wheel-sdg .selected-sdg-icon {
  transform: rotate(254.16deg);
  transition: transform ease .3s;
} */
/* .trigger-sdg-14:checked~.spinny-wheel-sdg {
  transform: rotate(-275.34deg);
}

.trigger-sdg-14:checked~.spinny-wheel-sdg .selected-sdg-icon {
  transform: rotate(275.34deg);
  transition: transform ease .3s;
} */
.trigger-sdg-15:checked~.spinny-wheel-sdg {
  transform: rotate(-320deg);
}

.trigger-sdg-15:checked~.spinny-wheel-sdg .selected-sdg-icon {
  transform: rotate(320deg);
  transition: transform ease .3s;
}

/* .trigger-sdg-16:checked~.spinny-wheel-sdg {
  transform: rotate(-317.7deg);
}

.trigger-sdg-16:checked~.spinny-wheel-sdg .selected-sdg-icon {
  transform: rotate(317.7deg);
  transition: transform ease .3s;
} */
/* .trigger-sdg-17:checked~.spinny-wheel-sdg {
  transform: rotate(-338.88deg);
}

.trigger-sdg-17:checked~.spinny-wheel-sdg .selected-sdg-icon {
  transform: rotate(338.88deg);
  transition: transform ease .3s;
} */
@media screen and (max-width: 1055px) {
  .trigger-nav-label img {
    margin: 10px 10px;
  }
}

@media screen and (max-width: 850px) {
  .spinny-wheel-sdg {
    background-image: none;
    height: auto;
    max-height: none;
  }

  .spinny-wheel-sdg .selected-sdg-icon {
    background-color: rgba(0, 0, 0, 0);
    width: 100%;
    height: auto;
    display: none;
    position: relative;
  }

  .sdg-icons-flex {
    width: 100%;
    margin-bottom: 20px;
    margin-top: 50px;
  }

  .selected-sdg-icon h2,
  .selected-sdg-icon p {
    width: 75%;
  }

  .selected-sdg-icon h2,
  .selected-sdg-icon p {
    width: 100%;
  }

  .trigger-nav-label-flex {
    margin-top: 15px;
  }

  .trigger-nav-label img {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
  }

  .trigger-nav-label img:hover {
    width: 60px;
    height: 60px;
    margin-bottom: 5px;
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 5px;
  }

  .trigger-sdg-1:checked~.spinny-wheel-sdg,
  .trigger-sdg-1:checked~.spinny-wheel-sdg .selected-sdg-icon,
  .trigger-sdg-2:checked~.spinny-wheel-sdg,
  .trigger-sdg-2:checked~.spinny-wheel-sdg .selected-sdg-icon,
  .trigger-sdg-3:checked~.spinny-wheel-sdg,
  .trigger-sdg-3:checked~.spinny-wheel-sdg .selected-sdg-icon,
  .trigger-sdg-4:checked~.spinny-wheel-sdg,
  .trigger-sdg-4:checked~.spinny-wheel-sdg .selected-sdg-icon,
  .trigger-sdg-5:checked~.spinny-wheel-sdg,
  .trigger-sdg-5:checked~.spinny-wheel-sdg .selected-sdg-icon,
  .trigger-sdg-6:checked~.spinny-wheel-sdg,
  .trigger-sdg-6:checked~.spinny-wheel-sdg .selected-sdg-icon,
  .trigger-sdg-7:checked~.spinny-wheel-sdg,
  .trigger-sdg-7:checked~.spinny-wheel-sdg .selected-sdg-icon,
  .trigger-sdg-8:checked~.spinny-wheel-sdg,
  .trigger-sdg-8:checked~.spinny-wheel-sdg .selected-sdg-icon,
  .trigger-sdg-9:checked~.spinny-wheel-sdg,
  .trigger-sdg-9:checked~.spinny-wheel-sdg .selected-sdg-icon,
  .trigger-sdg-10:checked~.spinny-wheel-sdg,
  .trigger-sdg-10:checked~.spinny-wheel-sdg .selected-sdg-icon,
  .trigger-sdg-11:checked~.spinny-wheel-sdg,
  .trigger-sdg-11:checked~.spinny-wheel-sdg .selected-sdg-icon,
  .trigger-sdg-12:checked~.spinny-wheel-sdg,
  .trigger-sdg-12:checked~.spinny-wheel-sdg .selected-sdg-icon,
  .trigger-sdg-13:checked~.spinny-wheel-sdg,
  .trigger-sdg-13:checked~.spinny-wheel-sdg .selected-sdg-icon,
  .trigger-sdg-14:checked~.spinny-wheel-sdg,
  .trigger-sdg-14:checked~.spinny-wheel-sdg .selected-sdg-icon,
  .trigger-sdg-15:checked~.spinny-wheel-sdg,
  .trigger-sdg-15:checked~.spinny-wheel-sdg .selected-sdg-icon,
  .trigger-sdg-16:checked~.spinny-wheel-sdg,
  .trigger-sdg-16:checked~.spinny-wheel-sdg .selected-sdg-icon,
  .trigger-sdg-17:checked~.spinny-wheel-sdg,
  .trigger-sdg-17:checked~.spinny-wheel-sdg .selected-sdg-icon {
    transform: rotate(0deg);
  }
}