.imagemap_poi {
	margin: 0px 10px;

	.imagepin.imagepin-selected::after {
		background-color: var(--color-primary);
	}

	.imagepin {
		width: 20px;
		height: 20px;
		background-color: #fff;
		background-color: rgba(252, 250, 243, 0.30);
		border-width: 0px;
		border-style: solid;
		border-radius: 20px;
        backdrop-filter: blur(2px);
	}
    .imagepin::after {
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        border-radius: 35px;
        background: #fff;
        top:25%;
        left:25%;
    }

    .imagepin-widget.imagepin-selected.imagepin-overlay {
        border: none;
        width:fit-content;
        padding: 10px;

        .imagepin-widget-content {
            font-size: 20px;
            font-weight: 400;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
    }
}

@media all and (min-width:1000px) {
	.imagemap_poi {
		margin: 50px 32px;

		.imagepin.imagepin-selected::after {
			background-color: var(--color-primary);
		}

		.imagepin {
			width: 36px;
			height: 36px;
			background-color: rgba(252, 250, 243, 0.30);
			border-radius: 20px;
      cursor: pointer;
		}
        .imagepin::after {
          width: 19px;
          height: 19px;
          transition: ease all 150ms;
        }
        .imagepin:hover::after {
          scale: 1.2;
        }
	}
	.imagepin-widget.imagepin-selected.imagepin-overlay::after {
        content:"";
        width: 29px;
        height: 21px;
        position: absolute;
        background-image: url("../../images/poi/pointer.svg");
        background-repeat: no-repeat;
        background-size: contain;
        top:99%;
        left: 29px; /* alter offset in imagemap_poi.js, inside Drupal.imagepin.overlay, line 30 */
    }
}


/* disable the pop of elements below the map on mobile */
.imagepin-widgets {
	display:none !important;
}

.imagepin-widget .imagepin-widget-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.imagepin-widget .imagepin-widget-content::after {
  display: block;
  content: '';
  width: 200px;
  height: 100px;
  background-position: center;
  object-fit: cover;
  background-repeat: no-repeat;
  background-size: cover;
}
.imagepin-widget.imagepin-selected.imagepin-overlay {
  transform: translateY(-131px);
}

.imagepin-widget[data-imagepin-key="16"] .imagepin-widget-content::after {
  background-image: url(../../images/poi/IMG_0062.png);
}
.imagepin-widget[data-imagepin-key="10"] .imagepin-widget-content::after {
  background-image: url(../../images/poi/bureau3.png);
}
.imagepin-widget[data-imagepin-key="10"].imagepin-selected.imagepin-overlay {
  transform: translate(-80px, -131px );
}
.imagepin-widget[data-imagepin-key="9"] .imagepin-widget-content::after {
  background-image: url(../../images/poi/bureau4.png);
}
.imagepin-widget[data-imagepin-key="9"].imagepin-selected.imagepin-overlay {
  transform: translate(-80px, -131px );
}
.imagepin-widget[data-imagepin-key="11"] .imagepin-widget-content::after {
  background-image: url(../../images/poi/bureau2.png);
}
.imagepin-widget[data-imagepin-key="11"].imagepin-selected.imagepin-overlay {
  transform: translate(-95px, -131px );
}
.imagepin-widget[data-imagepin-key="12"] .imagepin-widget-content::after {
  background-image: url(../../images/poi/bureau1.png);
}
.imagepin-widget[data-imagepin-key="12"].imagepin-selected.imagepin-overlay {
  transform: translate(-115px, -131px );
}
.imagepin-widget[data-imagepin-key="15"] .imagepin-widget-content::after {
  background-image: url(../../images/poi/conf.png);
}

.imagepin-widget[data-imagepin-key="14"] .imagepin-widget-content::after,
.imagepin-widget[data-imagepin-key="13"] .imagepin-widget-content::after {
  content: none;
}
.imagepin-widget[data-imagepin-key="14"].imagepin-widget.imagepin-selected.imagepin-overlay,
.imagepin-widget[data-imagepin-key="13"].imagepin-widget.imagepin-selected.imagepin-overlay{
  transform: none;
}
@media all and (min-width: 550px){
  .imagepin-widget[data-imagepin-key="10"].imagepin-selected.imagepin-overlay,
  .imagepin-widget[data-imagepin-key="9"].imagepin-selected.imagepin-overlay,
  .imagepin-widget[data-imagepin-key="12"].imagepin-selected.imagepin-overlay,
  .imagepin-widget[data-imagepin-key="11"].imagepin-selected.imagepin-overlay {
     transform: translateY(-131px);
  }
}

@media all and (min-width: 1000px){
  .imagepin-widget .imagepin-widget-content::after {
    width: 250px;
    height: 130px;
  }
  .imagepin-widget.imagepin-selected.imagepin-overlay {
    transform: translateY(-130px);
  }
}
@media all and (min-width: 1300px){
  .imagepin-widget .imagepin-widget-content::after {
    width: 404px;
    height: 161px;
  }
  .imagepin-widget.imagepin-selected.imagepin-overlay,
  .imagepin-widget[data-imagepin-key="10"].imagepin-selected.imagepin-overlay,
  .imagepin-widget[data-imagepin-key="9"].imagepin-selected.imagepin-overlay,
  .imagepin-widget[data-imagepin-key="12"].imagepin-selected.imagepin-overlay,
  .imagepin-widget[data-imagepin-key="11"].imagepin-selected.imagepin-overlay {
        transform: translateY(-161px);
  }

}
/** simple css

.imagemap_poi {
	margin: 100px 32px;

	.imagepin-widget {
		width: 250px;
		border: none;

		.imagepin-widget-content {
			color: var(--color-primary);
			font-size: var(--content-size-l);
			font-weight: 400;
			letter-spacing: 1px;
			text-transform: uppercase;


			text-align: center;

		}
	}

	.imagepin.imagepin-selected {
		background-color: var(--color-primary);
	}

	.imagepin {
		width: 20px;
		height: 20px;
	}
}


.imagepin-widget.imagepin-overlay{
	transform: translateY(-16px);
}

.imagepin-widgets {
	display: flex !important;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;

	.imagepin-widget {
		float: unset;
		border: 1px solid black;
		cursor: pointer;
	}
	.imagepin-widget.imagepin-selected {
		background-color: var(--color-neutral);
	}
}

@media all and (min-width: 1000px) {
	.imagepin-widgets {
		display: none !important;
	}
}

*/