.map-block {
    padding-bottom: 40px;
    position: relative;
	display: flex;
    align-items: flex-start;
	height: 910px;
	min-height: 67vh;
	overflow-x: unset;
}
.map-block .map {
    width: 100%;
    height: auto;
    display: flex;
}
.map-block .map svg,
.map-block .map img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}
.map-block path {
	fill: #76BEEC;
}
.map-block .actives {
	position: sticky;
    top: 120px;
    right: 0;
    height: fit-content;
	z-index: 2;
	width: 40%;
	margin-left: auto;
}
.svg-main-wrapper {
	position: absolute;
	width: 100%;
	height: calc(100% - 40px);
	top: 0px;
	left: 0px;
	z-index: 1;
}
.map-block .active-region,
.map-block .active-region>*{
    transition: 0.3s;
}
.map-block .active-region:hover,
.map-block .active-region:hover>*{
    fill: #012664 !important;
}
.map-block .active-content {
/*     position: fixed; */
    top: 120px;
    right: 0;
	width: 100%;
    padding: 10px;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary-main);
    -webkit-box-shadow: 0px 0px 7px 0px rgba(34, 60, 80, 0.1);
    -moz-box-shadow: 0px 0px 7px 0px rgba(34, 60, 80, 0.1);
    box-shadow: 0px 0px 7px 0px rgba(34, 60, 80, 0.1);
    opacity: 0;
}
.map-block .active-item {
	position: absolute;
	top: 0;
	right: 0px;
	width: 100%;
	height: fit-content;
}
.map-block .active-item.hovered .active-content {
    opacity: 1;
}
.map-block .active-name {
    font-size: 16px;
    font-weight: 600;
    line-height: 130%;
    margin-bottom: 10px;
}


@media (max-width: 1200px) {
	.map-block .actives {
		top: 116px;
	}
}

@media (max-width: 996px) {
	.map-block .actives {
		top: 77px;
	}
}

@media (max-width: 768px) {
	.svg-main-wrapper {
		position: relative;
	}
	.map-block {
		height: fit-content;
		min-height: unset;
	}
	.map-block .actives {
		position: unset;
		width: unset;
	}
	.map-block .active-item {
		position: unset;
	}
    .map-block .active-content {
        top: unset;
		position: absolute;
        bottom: 10px;
        max-width: 60%;
		height: fit-content;
    }
    .map-block .active-desc {
        max-height: 140px;
        overflow-y: scroll;
        padding-right: 10px;
    }
}

@media (max-width: 600px) { 
    .map-block {
        overflow: hidden;
        margin-bottom: 20px;
    }
    .map-block .svg-main-wrapper {
        padding-bottom: 120px;
        position: relative;
        z-index: 1;
        width: 850px;
    }
    .map-block .active-content {
        z-index: 2;
        max-width: unset;
        width: 100%;
    }
}

@media (max-width: 498px) { 
    .map-block .svg-main-wrapper {
        width: 700px;
    }
    .map-block .text-holder ul li strong em, .map-block .text-holder p strong, .map-block .text-holder ul li strong, .map-block .text-holder, .map-block .text-holder p, .map-block .text-holder li {
        font-size: 12px;
    }
    .map-block .active-name {
        font-size: 14px;
    }
    .map-block .text-holder ul li:before {
        width: 6px;
        height: 6px;
        top: 5px;
    }
    .map-block .text-holder ul li {
        padding-left: 10px;
    }
    .map-block .active-desc {
        max-height: 130px;
    }
}