.map-svg {
    max-width: 100%;
}

.nav-fill .nav-item {
    margin: 0 1px;
}

.nav-pills {
    background: -webkit-linear-gradient(right, #165564, #2BB69F);
    background: linear-gradient(to left, #165564, #2BB69F);
}

.nav-pills li:not(:last-child):after {
    content: '';
    left: 0;
    top: 0.625rem;
    bottom: 0.625rem;
    position: absolute;
    border-left: 2px solid #fff;
    opacity: 0.2;
}

.nav-pills li {
    position: relative;
}

.nav-pills .nav-link {
    border-radius: 0;
    background-color: none;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1.875rem;
    padding: 2.1rem .9375rem;
    position: relative;
}

.nav-pills .nav-link:after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -22px;
    margin-left: -15px;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 22px solid #165564;
    opacity: 0;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link,
.nav-pills li>.nav-link:hover {
    background-color: #165564;
    border-color: #165564;
    color: #fff;
}

.nav-pills .nav-link.active:after,
.nav-pills .show>.nav-link:after,
.nav-pills li>.nav-link:hover:after {
    opacity: 1;
}



.map-wrap {
    /* background-image: url("../images/map.jpg");*/
    position: relative;
}

.map-wrap:before,
.map-wrap:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
   /* background: -webkit-linear-gradient(top, #165564, rgba(0, 0, 0, .3), transparent);
    background: linear-gradient(to bottom, #165564, rgba(0, 0, 0, .3), transparent);*/
}

.map-wrap:after {
    /*background: -webkit-linear-gradient(top, #000, rgba(0, 0, 0, .3), transparent);
    background: linear-gradient(to bottom, #000, rgba(0, 0, 0, .3), transparent);*/
}

.entry-map-wrap {
    z-index: 2;
}

.tree-map-bg {
    content: '';
    position: absolute;
    right: -20%;
    top: -1.875rem;
    bottom: -1.875rem;
    background: #165564;
    border-radius: 0.625rem 0 0 0.625rem;
    width: 51%;
    transform: skew(-12deg);
}

.tree-map-bg:before {
    content: '';
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    width: 100%;
    background: url(../images/tree-bg.svg) right top no-repeat;
    transform: skew(12deg);
}

.map-title {
    font-size: 1.25rem;
}

.map-title p span {
    font-weight: 700;
}

.map-svg g path:hover,
.map-svg g path.active {
    fill: #165564b3;
    stroke: #2BB69F;
}

.area-info {
    position: absolute;
    color: #fff;
    top: 20px;
    text-align: right;
    display: none;
    margin: auto;
    width: 80%;
    padding: 10px;
}

.area-info.active {
    display: block;
}

.area-info span.services-total {
    font-size: 1.25rem;
    font-weight: 700;
}

.area-info h3 {
    font-size: 1.725rem;
    margin-bottom: 1.625rem;
}

.area-info h3 span {
    font-weight: 700;
    display: block;
}

.entry-area-info {
    border-radius: 0.625rem;
    padding: 1.625rem 1.75rem;
    background: rgba(0, 0, 0, .5);
    font-size: 1.1rem;
    line-height: 20px;
    /*transform: skew(-12deg);*/
}

.entry-area-info .inner-info {
   /* transform: skew(12deg);*/
}

.entry-area-info li {
    margin-bottom: .9375rem;
}

.entry-area-head {
    border-bottom: 1px solid #707070;
    margin-bottom: 20px;
    padding-bottom: .9375rem;
}

.entry-area-head span {
    font-weight: 700;
    font-size: 1.375rem;
}

.area-info li span {
    margin-left: 0.625rem;
    min-width: 3.125rem;
    display: inline-block;
    text-align: left;
}