.map {
    display: inline-block;
    width: 100%;
    margin: 0 0 30px;
    border: 1px solid #e5e5e5;
    padding: 0;
    background-color: #fff
}

.map .map-wrapper {
    position: relative;
    width:880px;
     max-width: 100%;
     margin: 0 auto;
}

@media all and (max-width: 650px) {
    .map .map-wrapper {
        height:unset
    }
}

.map svg path {
    fill: grey;
    stroke: #fff;
    stroke-miterlimit: 10;
    stroke-width: 2px;
    -ms-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease
}

.map svg path.dudly {
    transform: translateY(354px) translateX(129px) scale(1.3);
    -ms-transform: translateY(354px) translateX(129px) scale(1.3);
    fill: #e94663!important;
    stroke: #e94663
}

.map svg path.sandwell {
    transform: translateX(303px) translateY(330px) scale(1.3);
    -ms-transform: translateX(303px) translateY(330px) scale(1.3);
    fill: #735292;
    stroke: #735292
}

.map svg path.westbirm {
    transform: translateX(449px) translateY(369px) scale(1.3);
    -ms-transform: translateX(449px) translateY(369px) scale(1.3);
    stroke: #f39200;
    fill: #f39200
}

.map svg path.walsal {
    transform: translateX(363px) translateY(38px) scale(1.3);
    -ms-transform: translateX(363px) translateY(38px) scale(1.3);
    fill: #009f9e;
    stroke: #009f9e
}

.map svg path.wolves {
    transform: translateX(104px) translateY(141px) scale(1.3);
    -ms-transform: translateX(104px) translateY(141px) scale(1.3);
    fill: #81bb27;
    stroke: #81bb27
}

.map svg a {
    text-decoration: none!important;
    text-decoration-color: #fff!important;
    -ms-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    outline: 0
}

.map svg a.dudly:active path,.map svg a.dudly:focus path,.map svg a.dudly:hover path {
    fill: #ee7489!important;
    stroke: #ee7489
}

.map svg a.sandwell:active path,.map svg a.sandwell:focus path,.map svg a.sandwell:hover path {
    fill: #8d6bac!important;
    stroke: #8d6bac
}

.map svg a.westbirm:active path,.map svg a.westbirm:focus path,.map svg a.westbirm:hover path {
    fill: #ffa927!important;
    stroke: #ffa927
}

.map svg a.walsal:active path,.map svg a.walsal:focus path,.map svg a.walsal:hover path {
    fill: #00d2d1!important;
    stroke: #00d2d1
}

.map svg a.wolves:active path,.map svg a.wolves:focus path,.map svg a.wolves:hover path {
    fill: #9bd73e!important;
    stroke: #9bd73e
}

.map svg a.dudly:active,.map svg a.dudly:focus,.map svg a.dudly:hover,.map svg a.sandwell:active,.map svg a.sandwell:focus,.map svg a.sandwell:hover,.map svg a.walsal:active,.map svg a.walsal:focus,.map svg a.walsal:hover,.map svg a.westbirm:active,.map svg a.westbirm:focus,.map svg a.westbirm:hover,.map svg a.wolves:active,.map svg a.wolves:focus,.map svg a.wolves:hover {
    text-decoration: underline!important;
    text-decoration-color: #fff!important
}

.map svg .text {
    display: block;
    height: 55px;
    width: 137px;
    background-color: #4f39bb;
    font-size: 22px;
    font-size: 2.2rem;
    border-radius: 30px;
    padding-left: 31px;
    padding-top: 12px;
    font-weight: 700!important;
    color: #fff!important;
    position: relative;
    text-decoration: none!important
}

.map svg .text.wolves {
    width: 228px!important
}

.map svg .text.westbirm {
    width: 233px!important
}

.map svg .text.sandwell {
    width: 157px!important
}

@media screen and (max-width: 768px) {
    .map {
        padding: 10px 0 0;
    }
}