@keyframes point-pulse {
  0% {
    transform: scale(1.2);
  }
 
  50% {
  	    opacity: 1;
  }
}

.interactive-map, .interactive-mapp {
  position: relative;
  /*width: 100%;*/
  min-height: 1170px;
}

/*.interactive-map img {
  max-width: 100%;
}*/

.about-text {
  display: none;
}

@media (max-width: 1910px) {

  /*.interactive-map__links {
    -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
            transform: scale(0.9);
    margin-left: -200px;
  }*/

  .interactive-map {
    min-height: 1052px;
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
        margin-top: -50px;
    margin-bottom: -180px;
    margin-left: 0;
    /*right: -4%;*/
  }
}

@media (max-width: 1800px) {

  /*.interactive-map__links {
    -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
            transform: scale(0.9);
    margin-left: -200px;
  }*/

  .interactive-map {
    min-height: 1052px;
    -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
            transform: scale(0.8);
    margin-top: -100px;
    margin-bottom: -180px;
    margin-left: -103px;
  }
}

@media (max-width: 1660px) {

  /*.interactive-map__links {
    -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
            transform: scale(0.9);
    margin-left: -200px;
  }*/

  .interactive-map {
         margin-top: -150px;
            margin-bottom: -180px;
            margin-left: -125px;
    min-height: 812px;
    -webkit-transform: scale(0.7);
        -ms-transform: scale(0.7);
            transform: scale(0.7);
  }
}

@media (max-width: 1570px) {

  /*.interactive-map__links {
    -webkit-transform: scale(0.7);
        -ms-transform: scale(0.7);
            transform: scale(0.7);
    margin-left: -300px;
  }*/

  .interactive-map {
        margin-top: -150px;
            margin-bottom: -180px;
            margin-left: -125px;
    min-height: 812px;
    -webkit-transform: scale(0.7);
        -ms-transform: scale(0.7);
            transform: scale(0.7);
  }
}

@media (max-width: 1300px) {
  .interactive-map {
    margin-top: -236px;
    margin-bottom: -243px;
    margin-left: -173px;
    min-height: 812px;
    -webkit-transform: scale(0.6);
    -ms-transform: scale(0.6);
    transform: scale(0.6);
  }
}

.map-container h1 {
  margin-bottom: 30px;
}

.interactive-map__links {
    position: absolute;
    top: 0;
    left: -191px;
}

.interactive-map__links img {
  position: absolute;
}

.interactive-mapp {
  background-image: url('/include/interactive-map2.jpg');
}

.interactive-map--radio input[type="radio"] {
  display: none;
}

.interactive-map__item {
  position: absolute;

  width: 30px;
  height: 30px;

  cursor: pointer;
}

.interactive-map__item::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,  -50%);

	width: 20px;
	height: 20px;

	background-color: #878686;
	border-radius: 50%;
}

.interactive-map__item::before {
	content: '';
	position: absolute;

	width: 30px;
	height: 30px;

	background-color: #a8a8a8;
	border-radius: 50%;
	opacity: 0.5;

	animation: point-pulse 1.5s linear infinite;
}

.interactive-map__item--london {
  left: 625px;
  top: 525px; 
}

.interactive-map__item span {
    top: -30px;
    left: -20px;
    position: absolute;
    width: 150px;

    font-size: 14px;
    color: #000000;
    font-weight: 600;
}

.interactive-map__item--prague span {
  top: -3px;
  left: 43px;
}

.interactive-map__item--paris span {
    top: 0;
    left: -65px;
}

.interactive-map__item--madrid span {
    top: 30px;
    left: -15px;
}
.interactive-map__item--marseille span {
  top: 6px;
  left: 39px;
}

.interactive-map__item--amsterdam span {
  left: 40px;
  top: 0; 
}

.interactive-map__item--frankfurt span {
  left: 30px;
  top: 30px;
}

.interactive-map__item--hamburg span {
  left: -65px;
  top: 25px;
}

.interactive-map__item--bratislava span {
  left: -10px;
  top: 40px;
}

.interactive-map__item--vienna span {
  left: -10px;
  top: 30px;
}

.interactive-map__item--copenhagen span {
  left: 40px;
  top: 0;
}

.interactive-map__item--stockholm span {
  left: -100px;
  top: 0;
}

.interactive-map__item--kaliningrad span {
  left: -20px;
  top: 30px;
}

.interactive-map__item--helsinki span {
  left: -24px;
  top: -30px;
}

.interactive-map__item--minsk span {
  left: 38px;
  top: 14px;
}

.interactive-map__item--pscov span {
  left: -60px;
  top: 0;
}

.interactive-map__item--velikiy-novgorod span {
  left: -30px;
  top: 30px;
  width: 120px;
}

.interactive-map__item--tver span {
  left: -20px;
  top: 30px;
}

.interactive-map__item--moscow span {
  left: 40px;
  top: 0;
}

.interactive-map__item--voronezh span {
  left: -90px;
  top: 0;
}

.interactive-map__item--kharkiv span {
  left: -80px;
  top: -10px;
}

.interactive-map__item--hong-kong span {
  left: -50px;
  top: 20px;
}

.interactive-map__item--uzhgorod span {
  left: -20px;
  top: 30px;
}

.interactive-map__item--budcovce span {
  left: -20px;
  top: 30px;
}

.interactive-map__item--lviv span {
  left: -10px;
}

.interactive-map__item--amsterdam {
  left: 750px;
  top: 520px;
}


.interactive-map__item--frankfurt {
  left: 855px;
  top: 610px;
}

.interactive-map__item--hamburg {
  left: 915px;
  top: 460px;
}

.interactive-map__item--prague {
  left: 1010px;
  top: 590px;
}

.interactive-map__item--bratislava {
  left: 1127px;
  top: 675px;
}

.interactive-map__item--vienna {
  left: 1060px;
  top: 720px;
}

.interactive-map__item--uzhgorod {
  left: 1270px;
  top: 620px;
}

.interactive-map__item--budcovce {
  left: 1200px;
  top: 656px;
}

.interactive-map__item--kiev {
  left: 1490px;
  top: 510px;
}

.interactive-map__item--kharkiv {
  left: 1595px;
  top: 460px;
}

.interactive-map__item--moscow {
  left: 1570px;
  top: 300px;
}

.interactive-map__item--berlin {
  left: 1025px;
  top: 535px;
  width: 15px;
  height: 15px;
  border: none;
  background:#989797;
  border-radius: 50%;
}

.interactive-map__item--kalach {
  left: 1868px;
  top: 559px;
  width: 15px;
  height: 15px;
  border: none;
  background:#989797;
  border-radius: 50%;
}

.interactive-map__item--poti {
  left: 1925px;
  top: 921px;
  width: 15px;
  height: 15px;
  border: none;
  background:#989797;
  border-radius: 50%;
}

.interactive-map__item--rostov {
  left: 1821px;
  top: 704px;
  width: 15px;
  height: 15px;
  border: none;
  background:#989797;
  border-radius: 50%;
}

.interactive-map__item--tbilisi {
  left: 1987px;
  top: 913px;
}

.interactive-map__item--tbilisi span {
  top: 34px;
  left: -9px;
}

.interactive-map__item--rostov span {
  top: -16px;
  left: -128px;
}

.interactive-map__item--poti span {
  top: -3px;
  left: -51px;
}

.interactive-map__item--kalach span {
  top: 4px;
  left: -58px;
}

.interactive-map__item--makhachkala {
  left: 2067px;
  top: 885px;
}

.interactive-map__item--makhachkala .interactive-map__popup {
  left: -230px;
}

.interactive-map__item--makhachkala span {
  top: 3px;
  left: -102px;
}


.interactive-map__item--velikiy-novgorod {
  left: 1400px;
  top: 200px;
}

.interactive-map__item--saint-petersburg {
  left: 1365px;
  top: 110px;
}

.interactive-map__item--saint-petersburg span {
  left: -3px;
}

.interactive-map__item--helsinki {
  left: 1220px;
  top: 120px;
}

.interactive-map__item--stockholm {
  left: 1050px;
  top: 180px;
}

.interactive-map__item--copenhagen {
  left: 970px;
  top: 350px;
}

.interactive-map__item--paris {
  left: 690px;
  top: 640px;
}

.interactive-map__item--madrid {
  left: 430px;
  top: 1000px;
}

.interactive-map__item--marseille {
  left: 750px;
  top: 910px;
}

.interactive-map__item--warsaw {
  left: 1230px;
  top: 493px;
}

.interactive-map__item--kaliningrad {
  left: 1170px;
  top: 380px;
}

.interactive-map__item--riga {
  left: 1240px;
  top: 270px;
}

.interactive-map__item--minsk {
  left: 1320px;
  top: 410px;
}

.interactive-map__item--voronezh {
  left: 1588px;
  top: 385px;
}

.interactive-map__item--udomlya {
  left: 1535px;
  top: 180px;
}

.interactive-map__item--udomlya span {
  left: 40px;
  top: 0;
}

.interactive-map__item--bologoe {
  left: 1490px;
  top: 180px;
}

.interactive-map__item--tver {
  left: 1500px;
  top: 245px;
}

.interactive-map__item--pscov {
  left: 1330px;
  top: 220px;
}

.interactive-map__item--hong-kong {
  left: 1998px;
  top: 477px;
  width: 0;
  height: 0;
  border: none!important;
}

.interactive-map__item--new-york {
  left: 240px;
  top: 580px;
}

.interactive-map__item--lviv {
  left: 1315px;
  top: 585px;
}

.interactive-map__item--azerbajan {
  left: 1685px;
  top: 555px;
  width: 0;
  height: 0;
  border: none!important;
}

.interactive-map__item--azerbajan span {
  top: 427px;
  left: 225px;
}

.interactive-map__item--uae {
  left: 581px;
  top: 642px;
  width: 0;
  height: 0;
  border: none!important;
}

.interactive-map__item--uae span {
  top: 427px;
  left: 225px;
}

.interactive-map__popup {
  display: none;
  position: absolute;
  bottom: 20px;
  left: -55px;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  padding: 15px;

  background-color: #ffffff;
  border-radius: 10px;
  color: #000000;
  text-align: center;
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, .2);
  box-shadow: 0 0 15px rgba(0, 0, 0, .2);

  -webkit-transition: 0.8s;

  -o-transition: 0.8s;

  transition: 0.8s;
  z-index: 2;
}

/*.interactive-map__popup::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background: linear-gradient(to bottom, transparent, #fff);
}*/

.interactive-map--radio .interactive-map__popup {
  min-width: 220px;
}

.interactive-map__popup::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 55px;

  border: 10px solid #ffffff;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom: none;
}

.interactive-map__popup h4 {
  text-transform: uppercase;
  font-size: 16px;
}

.interactive-map__popup  p {
  font-size: 12px;
  text-align: left;

}

.interactive-map--radio .interactive-map__item--hong-kong .interactive-map__popup {
  left: -200px;
}

.interactive-map--radio .interactive-map__item--hong-kong .interactive-map__popup::after {
  left: 200px;
}

.interactive-map__item:hover .interactive-map__popup {
  display: block;
  max-height: 300px;
  overflow-y: scroll;
}

/* хром, сафари */
.interactive-map__popup::-webkit-scrollbar { width: 0; }

/* ie 10+ */
.interactive-map__popup { -ms-overflow-style: none; }

.interactive-map__legend {
  position: absolute;
  padding: 15px;
  padding-left: 60px;
  bottom: 0;
  width: 200px;
  max-height: 400px;
}

.interactive-map--radio .interactive-map__legend {
  /* position: static; */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  top: 0;
  left: 430px;
  min-width: 400px;
}



.interactive-map__legend-item {
  position: relative;
}

.interactive-map__legend-item::before {
  content: "";
  position: absolute;
  left: -30px;
  width: 20px;
  height: 20px;

  background-color: #ffffff;
  border-radius: 50%;
}

.interactive-map__legend-item--ethernet::before {
  background-color: #f2e965;
}

.interactive-map__legend-item--vpn::before {
  background-color: #c71e24;
}

.interactive-map__legend-item--port::before {
  background-color: #1173e2;
}

.interactive-map__legend-item--rent::before {
  background-color: #9049e5;
}

.interactive-map__legend-item--min::before {
  background-color: #3ca520;
}

.interactive-map__legend-item--bgp::before {
  background-color: #fd9d13;
}

.interactive-map__legend-item--cloud::before {
  background-color: #96d0ff;
}
.interactive-map__legend-item--colocation::before {
  background-color: #f596fb;
}

/*цвета точек при выделенных чекбоксах */

#vpn:checked ~ * .interactive-map__item--vpn::before {
  background-color: #e88686;
}

#vpn:checked ~ * .interactive-map__item--vpn::after {
  background-color: #e20a16;
}

#ethernet:checked ~ * .interactive-map__item--ethernet::before {
  background-color: #fffaaa;
}

#ethernet:checked ~ * .interactive-map__item--ethernet::after {
  background-color: #f2e965;
}

#bgp:checked ~ * .interactive-map__item--bgp::before {
  background-color: #f9c46b;
}

#bgp:checked ~ * .interactive-map__item--bgp::after {
  background-color: #fd9d13;
}

#port:checked ~ * .interactive-map__item--port::before {
  background-color: #86a1e8;
}

#port:checked ~ * .interactive-map__item--port::after {
  background-color: #1173e2;
}

#rent:checked ~ * .interactive-map__item--rent::before {
  background-color: #b88bef;
}

#rent:checked ~ * .interactive-map__item--rent::after {
  background-color: #9049e5;
}

#min:checked ~ * .interactive-map__item--min::before {
  background-color: #78bd73;
}

#min:checked ~ * .interactive-map__item--min::after {
  background-color: #3ca520;
}

#cloud:checked ~ * .interactive-map__item--cloud::before {
  background-color: #c3e2fb;
}

#cloud:checked ~ * .interactive-map__item--cloud::after {
  background-color: #96d0ff;
}

#colocation:checked ~ * .interactive-map__item--colocation::before {
  background-color: #f0d0f2;
}

#colocation:checked ~ * .interactive-map__item--colocation::after {
  background-color: #f596fb;
}

.interactive-map__item--azerbajan::before,
.interactive-map__item--uae::before,
.interactive-map__item--hong-kong::before,
.interactive-map__item--berlin::before,
.interactive-map__item--kalach::before,
.interactive-map__item--rostov::before,
.interactive-map__item--poti::before{
  content: none;
}

.interactive-map__item--azerbajan::after,
.interactive-map__item--uae::after,
.interactive-map__item--hong-kong::after,
.interactive-map__item--berlin::after,
.interactive-map__item--kalach::after,
.interactive-map__item--rostov::after,
.interactive-map__item--poti::after{
  content: none;
}

/*цвета точек при выделенных чекбоксах end */


#vpn:checked ~ * .interactive-map__legend-item--vpn::before,
#port:checked ~ * .interactive-map__legend-item--port::before,
#rent:checked ~ * .interactive-map__legend-item--rent::before,
#ethernet:checked ~ * .interactive-map__legend-item--ethernet::before,
#min:checked ~ * .interactive-map__legend-item--min::before,
#bgp:checked ~ * .interactive-map__legend-item--bgp::before,
#cloud:checked ~ * .interactive-map__legend-item--cloud::before,
#colocation:checked ~ * .interactive-map__legend-item--colocation::before {
  border: 2px solid #ffffff;
  -webkit-box-shadow: 0px 0px 0 2px #000000;
  box-shadow: 0px 0px 0 2px #000000;
}

/* INTERACTIVE-MAP END */