.description {

  max-width: 600px;

  margin: 0 auto;

  color: rgba(229, 229, 229, 0.7);

}



.distribution-map div{

  position: relative;

  box-sizing: border-box;

}

.distribution-map h2 {

  font-size: 24pt;

}

.centered {

  position: absolute;

  top: 50%;

  left: 50%;

  -ms-transform: translate(-50%, -50%);

  -webkit-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

}



.centered-y {

  position: absolute;

  width: 100%;

  top: 50%;

  transform: translateY(-50%);

}



.distribution-map {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0;
  background: #283040;
  border-radius: 8px;
}

.distribution-map > img {

  width: 100%;

  position: relative;

  margin: 0;

  padding: 0;

}

.distribution-map .map-point {

  cursor: pointer;

  outline: none;

  z-index: 0;

  position: absolute;

  width: 16px;

  height: 16px;

  border-radius: 50%;

  transform: translate(-50%, -50%);

  transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;

  background: rgba(255, 255, 255, 0.9);

  border: 2px solid #03A9F4;

  /* overflow: hidden; */

}

.distribution-map li {

  z-index: 0;

  position: absolute;

}

.distribution-map h3 {

  font-size: 12px;

  font-weight: normal;

  padding-left: 20px;

  color: #57bbf6;

}

.map-pointa{

  border-color: #FF5722 !important;

}

.map-pointb{

  border-color: #FFC107 !important;

}

.distribution-map .map-point .content {

  opacity: 0;

  transition: opacity 0.25s ease-in-out;

  width: 100%;

  height: 100%;

  left: 50%;

  transform: translateX(-50%);

  overflow: overlay;

}

.distribution-map .map-point:active, .distribution-map .map-point:focus {

  margin: 0;

  opacity: 1;

  width: 220px;

  height: 220px;

  color: #333;

  z-index: 1;

  padding: 10px;

  transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;

}

.distribution-map .map-point:active span, .distribution-map .map-point:focus span{

  display:none;

}

.distribution-map .map-point:active .content, .distribution-map .map-point:focus .content {

  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);

  opacity: 1;

  -webkit-transition: opacity 0.25s ease-in-out, height 0 ease-in-out, overflow 0 ease-in-out;

  -webkit-transition-delay: 0.25s, 0.25s, 0.25s;

          transition: opacity 0.25s ease-in-out 0.25s, height 0 ease-in-out 0.25s, overflow 0 ease-in-out 0.25s;

  overflow: hidden;

}

.distribution-map .map-point:active .content a:hover, .distribution-map .map-point:active .content a:active, .distribution-map .map-point:focus .content a:hover, .distribution-map .map-point:focus .content a:active {

  color: #afe1fa;

}

.map-point span{

	position: absolute;

    color: #fff;

    padding: 4px 8px;

    margin-top: -8px;

    line-height: 20px;

    font-size: 14px;

    white-space: nowrap;

    font-family: Montserrat,sans-serif;

    background-color: #03A9F4;

    border-radius: 4px;

    -webkit-transition: color .2s;

    transition: 0.5s;

}

.map-point span::before{

	content: "";

    position: absolute;

    width: 24px;

    height: 1px;

    background-color: #03A9F4;

}

span.label-top-left {

    top: -32px;

    right: 24px;

}

span.label-top-left::before{

    top: 32px;

    right: -17px;

	-webkit-transform: rotate(45deg);

    transform: rotate(45deg);

}

span.label-top-right {

    top: -32px;

    left: 24px;

}

span.label-top-right::before {

    top: 34px;

    left: -18px;

	-webkit-transform: rotate(135deg);

    transform: rotate(135deg);

}

span.label-bottom-left {

    bottom: -40px;

    right: 24px;

}

span.label-bottom-left::before {

    top: -6px;

    right: -18px;

	-webkit-transform: rotate(135deg);

    transform: rotate(135deg);

}

span.label-bottom-right {

    bottom: -40px;

    left: 24px;

}

span.label-bottom-right::before {

    top: -6px;

    left: -18px;

	-webkit-transform: rotate(45deg);

    transform: rotate(45deg);

}
span.label-m-left {

    top: 0px;

    left: -64px;

}
span.label-m-left::before {
    top: 12px;
    right: -18px;
}