#map path{
transition: .5s ease all
}
#map path.cls-4:hover{
fill:#7b102c!important;
transition: 1s ease all;
} 
#map path.cls-4.russia{
/fill:#c6c6c6!important
}
#map #armenia, 
#map #belgium, 
#map #czech, 
#map #bosnia, 
#map #estonia,
#map #finland,
#map #georgia,
#map #germany,
#map #greece,
#map #hungary,
#map #kosovo,
#map #latvia,
#map #path302,
#map #saaremaa,
#map #lithuania,
#map #luxembourg,
#map #macedonia,
#map #moldova,
#map #romania,
#map #russia,
#map #serbia,
#map #slovakia,
#map #tunisia,
#map #turkey,
#map #ukraine,
#map #croatia
{
fill: #b71745;
opacity: 1;
}
.justify-content-center{
justify-content: center!important;
}
.screenshort-area .container{
max-width: 1140px
}
.maparea{
position: relative;
padding-bottom: 40px;
}
.maparea svg{
margin: -220px auto 0 auto;
}
.maparea .point{
position: absolute;
width: 7px;
height: 7px; 
background: #fff;
border-radius: 100%;
top: 40%;
left: 50%;
cursor:pointer;
transition: .5s ease all;
box-shadow: 0 0 10px #333
}
.maparea .point:hover{ 
/transform: scale(2.5);
transition: .5s ease all;
/background: yellow
}
.maparea .point span{
display: block; 
position: absolute;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
font-size: 11px; 
padding: 5px 15px;
display: none;
color: #000;
background:#fff;
border-radius: 3px;
z-index: 999;
transition: 1s ease all;
box-shadow: 0 0 10px #333
}
.maparea .point span::after{
content:"";
position: absolute;
width: 7px;
height: 7px;
background: #fff;
bottom:-1px;
left: 50%;
margin-left: -1px;
transform: rotate(45deg) translateY(50%);
}
.maparea .point:hover{
background: #000;
box-shadow: 0 0 10px #333
}
.maparea .point:hover span{
display:block;
}
.maparea .point.Natolin{ 
top: 45%;
left: 54%;  
width: 10px;
height: 10px;
border: 2px #fff solid;
background: #b71745;
}
.maparea .point::before{
opacity: 0;
animation-duration: 5s;
animation-iteration-count: infinite;
/animation-fill-mode: forwards;
content:"";
position: absolute;
width: 26px; 
height: 26px;  
border: 2px #fff dashed;
border-radius: 100%;
top: -10px; 
left: -10px; 
}
.maparea .point:hover::before{
opacity: 1;
animation-name: spin;
animation-fill-mode: forwards;
}
.maparea .point.Natolin::before{
opacity: 1;
animation-duration: 5s;
animation-iteration-count: infinite;
/animation-fill-mode: forwards;
content:"";
position: absolute;
width: 26px; 
height: 26px;  
border: 2px #fff dashed;
border-radius: 100%;
top: -10px; 
left: -10px; 
animation-name: example;
}
.maparea .point.Natolin:hover::before{
}
.maparea{
/overflow:hidden
}
@keyframes example {
from {
}
45%{
transform:rotate(360deg) scale(33);
opacity:.2	  
}
to {
/background-color: yellow;
transform:rotate(-360deg);  
opacity:0
}
}
@keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
.maparea .point.Natolin span{ 
display: block;
top: 12px;
left: 50%;
transform: translateX(-50%);
background: none;
box-shadow: none;
font-size: 10px;
}
.maparea .point.Natolin span::after{
content: none
}
.maparea .point.Natolin::after{
/content: "";
display:block;
width: 20px;
height: 20px;
transform: translate(-50%,-50%);
position: absolute;
border: 1px #000 dotted;
border-radius: 100%;
top: 50%;
left: 50%;
animation-name: examples;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
animation-delay:1s;
}
keyframes examples {
from {
}
50%{
transform:rotate(360deg) scale(15);
opacity:.2	  
}
to {
/background-color: yellow;
transform:rotate(720deg);  
opacity:0
}
}
.maparea .point.Bruges{
top: 47%;
left: 30%; 
}
.maparea .point.Brussels{
top: 48%;
left: 32.5%;  
}
.maparea .point.Helsinki{
top: 27%;
left: 60.5%;  
}
.maparea .point.Kaliningrad{
top: 39.4%;
left: 55%;  
}
.maparea .point.Yerevan{
top: 68%;
left: 88%;  
}
.maparea .point.Sarajevo{
top: 61.4%;
left: 51.3%;    
}
.maparea .point.Mostar{
top: 62.4%;
left: 50.5%;    
}
.maparea .point.BanjaLuka{
top: 60%;
left: 50%;    
}
.maparea .point.Prague{
top: 49%;
left: 46%;    
}
.maparea .point.Tallinn{
top: 29%;
left: 60%;    
}
.maparea .point.Tartu{
top: 31%;
left: 63%;     
}
.maparea .point.Tbilisi{
top: 65.5%;
left: 89%;     
}
.maparea .point.Frankfurt{
top: 49.5%;
left: 38%;     
}
.maparea .point.Athens{
top: 72.4%;
left: 58.5%;     
}
.maparea .point.Budapest{
top: 54.2%;
left: 53%;     
}
.maparea .point.Pristina{
top: 63.5%;
left: 54.5%;      
}
.maparea .point.Riga{
top: 34.4%;
left: 59.3%;      
}
.maparea .point.Vilnius{
top: 38.6%;
left: 61%;      
}
.maparea .point.Kaunas{
top: 38.4%;
left:59%;      
}
.maparea .point.Luxembourg{
top: 50.1%;
left: 34.3%;      
}
.maparea .point.Skopje{
top: 65.3%;
left: 55.7%;      
}
.maparea .point.Chisinau{
top: 55.2%;
left: 66%;      
}
.maparea .point.Bucharest{
top: 60.2%;
left: 62%;      
}
.maparea .point.Tiraspol{
top: 56%;
left: 67%;      
}
.maparea .point.Belgrade{
top: 59.5%;
left: 54%;      
}
.maparea .point.Bratislava{
top: 52.9%;
left: 50.2%;      
}
.maparea .point.Tunis{
top: 74.7%;
left: 40.5%;      
}
.maparea .point.Istanbul{
top: 66.8%;
left: 66.1%;      
}
.maparea .point.Kyiv{
top: 48.2%;
left: 69%;      
}
.maparea .point.Lviv{
top: 50.2%;
left: 59%;      
}
.maparea .point.Uzhhorod{
top: 52.2%;
left: 57%;      
}
.maparea .point.Odesa{
top: 57%;
left: 68%;      
}
.maparea .point.Zagreb{
top: 58%;
left: 48.3%;      
}
.maparea .point.Dubrovnik{
top: 62.4%;
left: 48.7%;      
}
.arrow {
background: #fff;
height: 2px;
width: 30px;
margin: 0 auto;
position: absolute;
cursor: pointer;
}
.arrow::before, .arrow::after{
content: "";
background: #fff;
position: absolute;
height: 2px;
width: 15px;
}
.arrow-right{
right: 0;
top: 50%
}
.arrow-right::before{
right: -3px;
bottom: -5px;
transform: rotate(-45deg);
}
.arrow-right::after{
right: -3px; 
top: -5px;
transform: rotate(45deg);
}
.arrow-left{
left: 0;
top: 50%;
}
.arrow-left::before{
left: -3px;
bottom: -5px;
transform: rotate(45deg);
}
.arrow-left::after{
left: -3px; 
top: -5px;
transform: rotate(-45deg);
}
.arrow-top{
top: 0;
left: 50%;
height: 30px;
width: 2px
}
.arrow-top::before{
left: -2px;
top: 3px;
transform: rotate(45deg);
}
.arrow-top::after{
right: -2px; 
top: 3px;
transform: rotate(-45deg);
}
.arrow-bottom{
bottom: 0;
left: 50%;	
height: 30px;
width: 2px
}
.arrow-bottom::before{
left: -2px;
bottom: 3px;
transform: rotate(-45deg);
}
.arrow-bottom::after{
right: -2px; 
bottom: 3px;
transform: rotate(45deg);
}
.arrows{
transform: rotate(-45deg); 
/background: black;
position: relative;
top:0;
left: 0;
margin: -58px 0 0 -58px;
width: 120px;
height: 120px;
opacity: .6;
animation-name: arrows;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
/animation-delay:1s;
}
@keyframes arrows {
from {
transform: rotate(-45deg) scale(.1);
opacity:.6
}
to {
transform: rotate(-45deg) scale(4);
opacity: 0
}
}
.study-trips-mobile{
display:none;
}
@media (max-width: 1150px) {
.maparea svg{
margin-top: -178px
}
}
@media (max-width: 1024px) {
.screenshort-area {
display:none
}
.study-trips-mobile{
display:block;
}
}