:root {
    --scale: 0.90;
    --transformScale: 1.15;
}

#mapBox {
    width: 100%;
    height: 100%;
    max-width: 400px;
    max-height: 400px;
    min-width: 320px;
    min-height: 320px;
    margin: 0 auto;
    border-style: solid;
    border-width: 1px;
    border-color: #000;
    position: relative;
}

.mapImage {
    width: 100%;
    height: 100%;
    max-width: 400px;
    max-height: 400px;
    min-width: 320px;
    min-height: 320px;
    z-index: 0;
}

.mapRegion {
    transition: all .2s ease-in-out;
    float: left;
    transform: scale(var(--scale));
    position: absolute;
    background-color: transparent;   
}

.mapRegion:active {
    background-color: transparent;    
}

.mapRegion:focus {
    background-color: transparent;
}

.mapHotspot {
    float:left;
    position:absolute;
    opacity:0;
}

.wirralHotspot {
    left:15%;
    top:70%;
    width:50px;
    height:50px;
    z-index:5;
}

.knowsleyHotspot {
    left: 50%;
    top: 52%;
    width: 28px;
    height: 50px;
    z-index:5;
}

.sefton {
    left: 18%;
   /* top: 12.2%;*/
}

.liverpool {
    left: 31%;
    top: 48.5%;
}

.knowsley {
    left: 41.5%;
    top: 42.2%;
    z-index: 1;
}

.sthelens {
    left: 52.5%;
    top: 37%;
}

.wirral {
    left: 3.5%;
    top: 57%;
}

/*.sefton {*/
    /* left: 30%;*/
    /*top: 17%;*/
    /*left: 25%;
    top: 8%;
}

.liverpool {
    left: 36%;
    top: 53.3%;
}

.knowsley {
    left: 46.5%;
    top: 47.75%;
    z-index: 1;
}

.sthelens {
    left: 55.9%;
    top: 43.1%;
}

.wirral {
    left: 12.2%;
    top: 59%;
}*/

.sefton:hover, .liverpool:hover, .sthelens:hover {
        transition: all .2s ease-in-out;
        transform: scale(var(--transformScale));
        filter: drop-shadow(2px 2px 2px #000);
        z-index: 3;
}

.liverpool:hover {
    transform: scale(var(--transformScale)) rotate(-56deg);
    filter: drop-shadow(-2px 2px 2px #000);    
}

/*.knowsley:hover {
    transform: scale(var(--transformScale)) rotate(-62deg);
    filter: drop-shadow(-2px 2px 2px #000);
}*/

.sthelens:hover {
    filter: drop-shadow(-2px 2px 2px #000);
}

.exploded {
    transition: all .2s ease-in-out;
    transform: scale(var(--transformScale));
    filter: drop-shadow(2px 2px 2px #000);
    /*z-index:7;*/
}

.explodedTwist {
    transition: all .2s ease-in-out;
    transform: scale(var(--transformScale)) rotate(-62deg);
    filter: drop-shadow(-2px 2px 2px #000);
   /* *//*z-index:7;*/
}