.map-wrapper { margin-top:120px }

.no-port      { color:rgba(0, 46, 109, 1); }
.no-port p    { font-size:60px;display:inline-block;  }
.no-port span { font-size:30px; display:inline-block; text-transform:uppercase; }

#body.ports a { overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-all; word-break: break-word; }

.dd-items.dd-items-btn 				{  cursor:pointer; color:#fff; transition: all 0.3s ease-out;}
.dd-items.dd-items-btn:hover 		{ color:rgba(0, 155, 222, 1); }
.dd-items-btn .dd-btn-wrapper::before 	{ display:inline-block; width:35px; height:34px; margin-right:10px; top: 0px; position:absolute; content: ""; 
											   background: url(images/icon-download-white.svg) no-repeat 0 0;
										  background-size: contain;
									  background-position: bottom;
									   transition: all 0.3s ease-out; }

.dd-items.dd-items-btn:hover .dd-btn-wrapper::before 	{ display:inline-block; width:35px; height:34px; margin-right:10px; top: 0px; position:absolute; content: ""; 
											   background: url(images/icon-download-skyblue.svg) no-repeat 0 0;
										  background-size: contain;
									  background-position: bottom; }

.dd-items-btn .dd-btn-wrapper .dd-btn-txt 		{ margin-left:42px; line-height:1; }
.dd-items-btn .dd-btn-wrapper .dd-btn-txt span  { font-size:70%; display:block } 
.dd-items-btn .dd-btn-wrapper .dd-btn-txt p 	{ font-size:150%; display:block }

.map-wrapper .pin-img{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	padding-bottom: calc(100% / 39 * 51);
	display: block;
	background-image: url('images/hph_map_marker.png');
	background-size: 100% 100%;
	z-index: 100;
}

	
.map-wrapper      { width:100%; padding: 0; }
.map-wrapper .bg{
	width: 100%; 
	height: auto; 
	background-color: #fff; 
	display: block;
}
.map-wrapper .map-wrp{
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
    position: absolute;
	padding: 7px;
    box-sizing: border-box;
}
.map-wrapper .pin-bb {
    position: absolute;
}
.map-wrapper .pin-img-wrp{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 14px;
	height: 14px;
}
.map-wrapper .pin-img-wrp .cir{
	pointer-events: none;
	position: absolute;
	bottom: -20px;
	left: -20px;
	right: -20px;
	top: -20px;
	-moz-border-radius: 50% / 50%;
	-webkit-border-radius: 50%;
	border-radius: 50% / 50%;
/* 	border: 2px solid transparent;
    border-color: rgba(0, 46, 109, 1); */
	background-color: #fff;
    -webkit-animation: cirbounce 5s infinite;
    -moz-animation: cirbounce 5s infinite;
    -o-animation: cirbounce 5s infinite;
    animation: cirbounce 5s infinite;
	z-index: 1;
}
.map-wrapper.notready{
	opacity: 0;
}

#googlemap{
	height: calc(100vw / 1583 * 500); 
	min-height: 400px;
}


ul.legend      { width:100%; text-align:center; margin:50px 0 0;  padding:0 }
ul.legend li   { margin:0; padding:0; display:inline-block; }
ul.legend .dot           { width:30px; height:30px; display:inline-block; vertical-align:middle; overflow:hidden;
				 -webkit-border-radius: 15px;
					-moz-border-radius: 15px;
					   border-radius: 15px; }
.dot.d1       { background-color:rgba(229, 210, 231, 0.7)   }
.dot.d2       { background-color:rgba(204, 226, 224, 0.7)   }
.dot.d3         { background-color:rgba(238, 211, 212, 0.7) }
.dot.d4     { background-color:rgba(203, 229, 247, 0.7) }
.spot.spot-d1    { color: rgba(53, 27, 104	, 1)   }
.spot.spot-d2    { color: rgba(49, 70, 69, 1)   }
.spot.spot-d3      { color: rgba(198, 50, 32, 1) }
.spot.spot-d4  { color: rgba(0, 155, 222, 1); }
.spot          { display:inline-block; margin:0 50px 0 10px; text-align:left; text-transform:uppercase;vertical-align: middle;}
.map-wrapper .dot-pos { position: absolute; left:0; top: 0; width: 100%; height: 100%; }
.map-ct { margin-top: 50px; }
.ar .map-ct { direction: rtl; }
.dot-pos .dt{
	position: absolute;
}
.dot-pos .dt.d1{
    left: 28.5%;
    top: 33%;
}
.dot-pos .dt.d2{
    left: 31%;
    top: 59%;
}.dot-pos .dt.d3{
    left: 45%;
    top: 57%;
}.dot-pos .dt.d4{
    left: 70%;
    top: 59%;
}
.dot-pos .dot{
	position: absolute;
    border-radius: 50%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.dot-pos .dot.d1{
    width: 8vw;
    padding-bottom: 8vw;
}
.dot-pos .dot.d2{
    width: 7vw;
    padding-bottom: 7vw;
}
.dot-pos .dot.d3{
    width: 14vw;
    padding-bottom: 14vw;
}
.dot-pos .dot.d4{
    width: 7vw;
    padding-bottom: 7vw;
}
.dot-pos .dot .dot-txt{
	font-size: 4em;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-family: 'Montserrat Light';
}
.dot-pos .dot.d1 .dot-txt{
	color: rgba(53, 27, 104	, 1);
}
.dot-pos .dot.d2 .dot-txt{
	color: rgba(49, 70, 69, 1);
}
.dot-pos .dot.d3 .dot-txt{
	color: rgba(198, 50, 32, 1);
}
.dot-pos .dot.d4 .dot-txt{
	color: rgba(0, 155, 222, 1);
}
#googlemap,
#map     { margin-bottom:50px; }

.portstb-wrp { margin-bottom: 100px; }

[onclick]{
	cursor: pointer;
}

@keyframes cirbounce{
	0%,50%,100%{
		border-width:3px;
	}
	0%{
		bottom: -0px;
		left: -0px;
		right: -0px;
		top: -0px;
		filter:alpha(enabled=false);
		opacity:.2
	}
	50%{
		bottom: -15px;
		left: -15px;
		right: -15px;
		top: -15px;
		filter:alpha(Opacity=40);
		opacity:.4
	}
	100%{
		bottom: -0px;
		left: -0px;
		right: -0px;
		top: -0px;
		filter:alpha(enabled=false);
		opacity:.2
	}
}

	/* ==========================================================================
		Media
	============================================================================= */
	@media only screen and (max-width:1400px) {
	}
	@media only screen and (max-width: 1100px) {
		.map-wrapper { margin-top:70px; }
	}

	@media only screen and (max-width:1024px) {
		.dot-pos .dot .dot-txt {
			font-size: 2.5em;
		}
	}
	@media only screen and (max-width: 767px) {
		.map-wrapper { margin-top:60px; }
		.dot-pos .dot .dot-txt {
			font-size: 1.5em;
		}
		.spot {
			margin-right : 20px;
		}
	}