.infographic.innosup-map .map-inner-container {
  display: grid;
  grid-template-columns: repeat(100, 1fr);
}

.infographic.innosup-map .map-detail-wrapper {
  grid-column: 1 / 32;
  position: relative;
}

.infographic.innosup-map .map-image-wrapper {
  grid-column: 32 / 101;
  position: relative;
  height: 0;
  width: 100%;
  padding-top: 76.25%;
  background-image: url('../../images/infographics/innosup-map/map_base.png');
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.infographic.innosup-map .map-image-wrapper.map-marker-clipped {
  cursor: pointer;
}

.infographic.innosup-map .map-image-wrapper img.map-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  width: auto;
  opacity: 0;
  transition: opacity .2s;
}

.infographic.innosup-map .map-image-wrapper img.map-overlay.active {
  opacity: 1;
}

.infographic.innosup-map .map-detail-wrapper label {
  text-transform: uppercase;
  font-size: 8pt;
  font-weight: 400;
}

.infographic.innosup-map .map-detail-wrapper {
  width: calc(100% - 2.2em);
  margin: 1.1em;
}

.infographic.innosup-map .map-detail-wrapper .map-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.infographic.innosup-map .map-detail-wrapper .map-details-name {
  font-size: 1.635em;
  margin: .145em 0;
}

.infographic.innosup-map .map-detail-wrapper .map-details-focus {
  margin: .85em 0;
  font-size: .9em;
}

.infographic.innosup-map .map-detail-wrapper .map-details-lead {
  margin-bottom: .85em;
  font-size: .9em;
}

.infographic.innosup-map .map-detail-wrapper .map-details-partners.active {
  display: block;
  margin-bottom: .85em;
}

.infographic.innosup-map .map-detail-wrapper .map-details-partners span {
  font-size: 0.625em;
  line-height: 1.385em;
  margin: .8em 0;
  display: block;
}

.infographic.innosup-map .map-detail-wrapper .map-details-partners {
  display: none;
}

.infographic.innosup-map .map-detail-wrapper .map-details-countries-inner-wrapper {
  display: flex;
  flex-wrap: wrap;
  margin: .6em 0;
 }

 .infographic.innosup-map .map-detail-wrapper .map-details-countries-inner-wrapper img.map-country-flag:last-child {
   margin-right: 0;
 }

.infographic.innosup-map .map-detail-wrapper .map-details-countries-inner-wrapper img.map-country-flag {
  width: 1.95em;
  height: 1.3em;
  object-fit: cover;
  margin-right: .5em;
  margin-bottom: .25em;
}

.infographic.innosup-map .map-detail-wrapper .map-details-links {
  margin-top: 1.7em;
}

.infographic.innosup-map .map-detail-wrapper .map-details-links a {
  background: #FF5836;
  text-transform: uppercase;
  padding: .7em 1.4em;
  color: white;
  font-size: 0.625em;
}

.infographic.innosup-map .map-detail-wrapper .map-details-links a:hover {
  background: #00B2A2;
}

.infographic.innosup-map .map-detail-wrapper .map-controls {
  display: flex;
  justify-content: center;
}

.infographic.innosup-map .map-detail-wrapper .map-controls button {
  border: 0;
  background-color: transparent;
  text-transform: uppercase;
  font-size: 12pt;
  display: flex;
  justify-content: center;
  align-items: center;
}

.infographic.innosup-map .map-detail-wrapper .map-controls button.map-control-prev:before {
  content: '';
  border-top: .3em solid #FF5836;
  border-left: .3em solid #FF5836;
  width: .95em;
  height: .95em;
  transform: rotate(-45deg);
  display: inline-block;
  margin: 0 .3em;
}

.infographic.innosup-map .map-detail-wrapper .map-controls button.map-control-prev:hover:before {
  border-top: .3em solid #00B2A2;
  border-left: .3em solid #00B2A2;
}

.infographic.innosup-map .map-detail-wrapper .map-controls button.map-control-next:after {
  content: '';
  border-top: .3em solid #FF5836;
  border-right: .3em solid #FF5836;
  width: .95em;
  height: .95em;
  transform: rotate(45deg);
  display: inline-block;
  margin: 0 .3em;
}

.infographic.innosup-map .map-detail-wrapper .map-controls button.map-control-next:hover:after {
  border-top: .3em solid #00B2A2;
  border-right: .3em solid #00B2A2;
}

@media screen and (max-width: 1200px) {
  .infographic.innosup-map .map-detail-wrapper {
    font-size: 1.6vw;
  }

  .infographic.innosup-map .map-detail-wrapper .map-controls button {
    font-size: 10pt;
  }
}

@media screen and (max-width: 900px) {
  .infographic.innosup-map .map-detail-wrapper {
    font-size: .9em;
  }

  .infographic.innosup-map .map-inner-container {
    display: grid;
    grid-template-columns: 1fr;
  }

  .infographic.innosup-map .map-detail-wrapper {
    grid-column: auto;
    order: 2;
    padding-bottom: 2.5em;
  }

  .infographic.innosup-map .map-detail-wrapper .map-controls button {
    margin: 0 1.5em;
  }

  .infographic.innosup-map .map-image-wrapper {
    grid-column: auto;
    order: 1;
  }
}