*{
    box-sizing:border-box;
}

body{
    margin:0;
    padding:0;
    font-family: 'Montserrat', sans-serif;
}

img {
    max-width: 100%;
    height: auto;
}
.myheader{
	width: 100%;
	height: 45px;
	background: #0f0f0f;
	font-family: Arial,Helvetica,sans-serif;
	padding: 1px;
}
.myheader a {
	color: #fff; /* Цвет ссылок */
}
.wrapper {
    /*width: 100%;*/
    /*height: 110vh; /*высота 100% от view-port*/
    display: flex;
    align-items: center;
    justify-content: center;
}
.map__wrapper{
	max-width: 1200px;
	position: relative
}
.map__wrapper svg{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.continent{/*для класса континент*/
	fill: #aeb5ff5f;/*без заливки поля континента внутри*/
	stroke: #2b2266ae;/*граница черная*/
	stroke-width: 2px;/*ширина границы*/
	cursor: pointer;/*изменение курсора мыши при попадании в контур*/
	pointer-events: all;/*изменение курсора мыши при попадании в контур*/
}
.continent:hover{
	animation: highlightContinent 2s linear infinite;
}
.project{
	fill: #2f9b04;/*без заливки поля континента внутри*/
	stroke: rgb(255, 255, 255);/*граница черная*/
	stroke-width: 2px;/*ширина границы*/
	cursor: pointer;/*изменение курсора мыши при попадании в контур*/
	pointer-events: all;/*изменение курсора мыши при попадании в контур*/
}
.project:hover{
	fill: #fff;/*без заливки поля континента внутри*/
	stroke: #2f9b04;/*граница черная*/
	stroke-width: 2px;/*ширина границы*/
	cursor: pointer;/*изменение курсора мыши при попадании в контур*/
	pointer-events: all;/*изменение курсора мыши при попадании в контур*/
}
.project2{
	fill: #f5e028;/*без заливки поля континента внутри*/
	stroke: #fff;/*граница черная*/
	stroke-width: 2px;/*ширина границы*/
	cursor: pointer;/*изменение курсора мыши при попадании в контур*/
	pointer-events: all;/*изменение курсора мыши при попадании в контур*/
}
.project2:hover{
	fill: #fff;/*без заливки поля континента внутри*/
	stroke: #f5e028;/*граница черная*/
	stroke-width: 2px;/*ширина границы*/
	cursor: pointer;/*изменение курсора мыши при попадании в контур*/
	pointer-events: all;/*изменение курсора мыши при попадании в контур*/
}
@keyframes highlightContinent {
    0% {
        stroke:#2130fa; 
        fill: #7c8cff;
        fill-opacity: 0.25;
    }
    50% {
        stroke:#2130fa;
        fill: #2442ff;
        fill-opacity: 0.6 ;
    }
	100% {
        stroke:#2130fa;
        fill: #7c8cff;
        fill-opacity: 0.25 ;
    }
}
.tooltip{
	position: absolute;
	left: 0;
	top: 0;
	padding: 5px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0,0,0,0.3); 		/*всплывающая при наведение подсказка с названием объекта около мыши */
	display: none; 		/*тень около подсказки*/
}

.info__bg{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: rgba(0,0,0,0.5);
	opacity: 0;
	transition: 0.3s all;
	pointer-events: none;
	z-index: 10;
	
}
.info__bg.active{
	pointer-events: all;
	opacity: 1;
	transition: 0.3s all;
}
.info{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #fff;
	border-radius: 20px;
	padding: 25px;
	width: 500px;
}