* { margin: 0; padding: 0; -webkit-tap-highlight-color: rgba(0,0,0,0); }
*::-webkit-media-controls-panel { display: none !important; -webkit-appearance: none; }
/* *::--webkit-media-controls-play-button { display: none !important; -webkit-appearance: none; } */
/* *::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; } */

html { overflow: hidden; }
html *, html *:before, html *:after { box-sizing: inherit; }
body { width: 100%; height: 550px; box-sizing: border-box; font-size: 16px; font-family: 'Roboto', sans-serif; color: #000; background: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-touch-callout: none !important; }
a { -webkit-user-select: none !important; }
.hidden { display: none !important; opacity: 0; }
.container { position: relative; width: 100%; max-width: 660px; height: 100%; margin: 0 auto; background: #fff; overflow: hidden; }

.header { position: absolute; display:none; top: 30px; left: 0; width: 100%; font-size: 14pt; text-align: left; text-shadow:none; z-index: 5; }


.title { position: absolute; top: 0; left: 4px; max-width: 100%;font-size: 20px; font-family: 'Merriweather', serif; color:#000; font-weight: 600; line-height: 1.4; text-shadow: none; z-index: 5; }



/*------------------------CONTROLS-----------------------*/

.controls { position: absolute; bottom: 20px; width: 93.8%; z-index: 300; text-shadow:none; cursor: pointer;}

.controls .control { display: block; position: absolute; box-sizing: border-box; width: 40px; font-size: 1.7em; text-align: center; line-height: 38px; background: rgba(251,251,251,0.2); cursor: pointer;     
		  border: solid #757170;
    border-width:1px;      
	}
	
	
.controls:hover { color: #000; }

.controls .left.carousel-control { border-left:2px; border-color:#000;}
.controls .control.prev-button { color:#000;  }


.controls .control.next-button { color:#000; }

#control-next {
	left:100%;
	bottom:0;
}
#control-prev {
	bottom:0;
	    left: 0;
}

.control-progress {
	text-align:center;
	position: absolute;
    left: 40%;
    bottom: 6%;
	z-index: 200;
}


/*----------------------SLIDES INDICATORS--------------------*/
/* The dots/bullets/indicators */
.dot {
	cursor: pointer;
    height: 12px;
    width: 12px;
    margin: 0 4px;
	background-color: #fff;
    border-radius: 50%;
    border: 1px solid #000;
	display: inline-block;
	transition: background-color 0.6s ease;
}

.dot.active, .dot:hover {
  background-color: #000;
   border: 1px solid #000;
}



svg{
		background:rgba(255,255,255,0.5);
	transition: background-color 0.3s ease;
	transform:translateZ(0);

}




.maps { position: absolute; top: 50px; left: 0; width: 100%; height: 80%; z-index: 0; }
.maps .map { opacity:0;position: absolute; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; z-index: 0; }
.maps .map.active { opacity:1; z-index: 1;  }


.maps .map-4 {
	background-image:url("../images/crossborder.svg");
}



.map-overlays { position: absolute; left: 0; height: 100%; z-index: 2; }
.map-overlays .map-overlay-labels { position: absolute; top:51px; left: 0; width: 100%; height: 80%; transition: opacity 1s ease; }
.map-overlays .map-overlay-labels .map-overlay-label { position: absolute; font-size: 15px; text-align: center; line-height: 1.1; }
.map-overlays .map-overlay-labels .map-overlay-label .small { font-size: .85em; font-style: italic; }
.map-overlays .map-overlay-labels .map-overlay-label .label-title { margin-bottom: 5px; font-size: 1.2em; font-style: italic; }
.map-overlays .map-overlay-labels.hidden { display: block !important; opacity: 0; z-index: -1 !important; transition: none; }

.map-overlays .map-overlay-labels.map-overlay-cities { z-index: 5; }
.map-overlays .map-overlay-labels.map-overlay-cities .map-overlay-label { font-size: 1.1em; font-weight: 600; text-shadow: none; }
.map-overlays .map-overlay-labels.map-overlay-cities .map-overlay-label.map-overlay-label-hk { top: 55%; left: 74%; width: 5em; margin-left: -2.5em; }
.map-overlays .map-overlay-labels.map-overlay-cities .map-overlay-label.map-overlay-label-mo { top: 72%; left: 24%; width: 3em; margin-left: -1.5em; }
.map-overlays .map-overlay-labels.map-overlay-cities .map-overlay-label.map-overlay-label-zh { top: 41%; left: 24%; width: 3.2em; margin-left: -1.6em; }
.map-overlays .map-overlay-labels.map-overlay-length .map-overlay-label { top: 61%; left: 38%; width: 6.4em; margin-top: -1.1em; margin-left: -3.2em; }
.map-overlays .map-overlay-labels.map-overlay-length.infra .map-overlay-label { top: 58%; left: 44%; }
.map-overlays .map-overlay-labels.map-overlay-tunnel .map-overlay-label { top: 42%; left: 57%; width: 6em; margin-top: -1.1em; margin-left: -3em; }
.map-overlays .map-overlay-labels.map-overlay-yellow .map-overlay-label { top: 28%; left: 20%; padding-left: 18px; font-size: .85em; font-style: italic; text-align: left; line-height: 1.2; color: #FFFFAD; }
.map-overlays .map-overlay-labels.map-overlay-yellow .map-overlay-label:before { content: ''; position: absolute; bottom: 2px; left: 0; width: 12px; height: 12px; background: #FFFF00; }

.map-overlays .map-overlay-label-projections02 {
	    top: -10px;
    position: absolute;
	font-size: 14px;
	line-height: 1.1;
	width: 97%;
    left: 6px;
	text-shadow: none;
    background: rgba(255,255,255,0.4);
}



.map-overlays .map-overlay-label-bridgecross {
	top: -10px;
    position: absolute;
	font-size: 14px;
	line-height: 1.1;
	width: 97%;
    left: 6px;
	text-shadow: none;
    background: rgba(255,255,255,0.4);
}

.map-overlays .map-overlay-labels.map-overlay-bridgecities .map-overlay-label { font-size: 16px; color:#000; font-weight: 600; text-transform: uppercase; opacity: 1; }
.map-overlays .map-overlay-labels.map-overlay-bridgecities .map-overlay-label.map-overlay-hk-bridge { top: 15%; left: 10%; margin-left: -3em; }
.map-overlays .map-overlay-labels.map-overlay-bridgecities .map-overlay-label.map-overlay-mo-bridge { top: 15%; left: 59%; width: 6em; margin-left: -3em; }
.map-overlays .map-overlay-labels.map-overlay-bridgecities .map-overlay-label.map-overlay-zh-bridge { top: 15%; left: 86%; width: 6em; margin-left: -3em; }




.map-overlays .map-overlay-labels.map-overlay-bus .map-overlay-label { font-size: 9px; color:#000; font-weight: 600; opacity: 1; }
.map-overlays .map-overlay-labels.map-overlay-bus .map-overlay-label.bus01 { top: 31%;  left: 14%; width: 9%; margin-top: -1.1em; margin-left: -5em;  }
.map-overlays .map-overlay-labels.map-overlay-bus .map-overlay-label.bus02 { top: 28%; left: 69%; width: 13%; margin-top: -1.1em; margin-left: -5em;  }
.map-overlays .map-overlay-labels.map-overlay-bus .map-overlay-label.bus03 { top: 31%;  left: 96%; width: 9%; margin-top: -1.1em; margin-left: -5em;  }



.map-overlays .map-overlay-labels.map-overlay-coach .map-overlay-label {  color:#000; font-weight: 600; opacity: 1; }
.map-overlays .map-overlay-labels.map-overlay-coach .map-overlay-label.coach01 {     left: 3%;
    top: 47%;
    width: 100%;
    font-size: 16px; margin-top: -1.1em; margin-left: -5em;  }





.map-overlays .map-overlay-labels.map-overlay-shuttle .map-overlay-label { font-size: 13px; color:#000; font-weight: 600; opacity: 1; 
top: 34%;  left: 40%; margin-top: -1.1em; margin-left: -5em; }




.map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label { font-size: 14px; font-weight: 600; text-transform: uppercase; opacity: 1; }
.map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label.map-overlay-label-hk { top: 85%; left: 70%; width: 6em; margin-left: -3em; }
.map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label.map-overlay-label-mo { top: 90%; left: 36%; width: 4em; margin-left: -2em; }
.map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label.map-overlay-label-zh { top: 76%; left: 22%; width: 4em; margin-left: -2em; }
.map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label.map-overlay-label-sz { top: 39%; left: 61%; width: 5em; margin-left: -2.5em; }
.map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label.map-overlay-label-gz { top: 11%; left: 47%; width: 6em; margin-left: -3em; }
.map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label.map-overlay-label-gz:before { content: ''; position: absolute; top: -27px; right: 95%; width: 10em; height: 2px; background: rgba(255, 255, 255, .6); transform: rotate(25deg); }
.map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label.map-overlay-label-zs { top: 34%; left: 18%; width: 7em; margin-left: -3.5em; }
.map-overlays .map-overlay-labels.map-overlay-time { z-index: 5; }
.map-overlays .map-overlay-labels.map-overlay-time .map-overlay-label { font-size: 1.1em; font-weight: 600; text-shadow:none;}
.map-overlays .map-overlay-labels.map-overlay-time .map-overlay-label .small { font-weight: 600; }
.map-overlays .map-overlay-labels.map-overlay-time-bridge { background: rgba(0, 0, 0, 0);  }
.map-overlays .map-overlay-labels.map-overlay-time-bridge .map-overlay-label { top: 65%; left: 45%; width: 10em; margin-top: -1.1em; margin-left: -5em;  }
.map-overlays .map-overlay-labels.map-overlay-time-ferry .map-overlay-label { top: 89%; left: 52%; width: 7em; margin-top: -1.1em; margin-left: -3.5em;  }
.map-overlays .map-overlay-labels.map-overlay-time-ferry .map-overlay-label .small { color: #000; }
.map-overlays .map-overlay-labels.map-overlay-time-road .map-overlay-label { top: 10%; left: 25%; width: 10em; margin-top: -1.1em; margin-left: -5em; }
.map-overlays .map-overlay-labels.map-overlay-time-road .map-overlay-label .small { color: #000;  }

.map-overlays .map-overlay-labels.map-overlay-cities-infra .map-overlay-label { font-size: 16px; font-weight: 600; text-transform: uppercase; opacity: 1; }
.map-overlays .map-overlay-labels.map-overlay-cities-infra .map-overlay-label.map-overlay-label-hk { top: 73%; left: 78%; width: 6em; margin-left: 0; }
.map-overlays .map-overlay-labels.map-overlay-cities-infra .map-overlay-label.map-overlay-label-mo { top: 72%; left: 24%; width: 3em; margin-left: -1.5em; }
.map-overlays .map-overlay-labels.map-overlay-cities-infra .map-overlay-label.map-overlay-label-zh { top: 41%; left: 24%; width: 3.2em; margin-left: -1.6em; }
.map-overlays .map-overlay-labels.map-overlay-cities-infra .map-overlay-label.map-overlay-label-clk { top: 25%; left: 60%; width: 8em; font-size: 14px; font-weight: 400; text-transform: none; opacity: 1; }

.map-overlays .map-overlay-labels.map-overlay-orange .map-overlay-label { top: 10%; left: 5%; font-size: 14px; background:rgba(0,0,0,0.4); text-align: left; line-height: 1.4; width: 28%; }
.map-overlays .map-overlay-labels.map-overlay-orange .map-overlay-label p { position: relative; padding-left: 30px; }
.map-overlays .map-overlay-labels.map-overlay-orange .map-overlay-label p:before { content: ''; position: absolute; bottom: 2px; left: 5px; width: 12px; height: 12px; }
.map-overlays .map-overlay-labels.map-overlay-orange .map-overlay-label .yellow { color: #FFF; }
.map-overlays .map-overlay-labels.map-overlay-orange .map-overlay-label .yellow:before { background: #FFFF00; }
.map-overlays .map-overlay-labels.map-overlay-orange .map-overlay-label .orange { color: #FFF; }
.map-overlays .map-overlay-labels.map-overlay-orange .map-overlay-label .orange:before { background: #FFA12D; }
.map-overlays .map-overlay-labels.map-overlay-island {  z-index: 5; }
.map-overlays .map-overlay-labels.map-overlay-island .map-overlay-label { top: -55px; left: 5px; width: 95%; margin-left: 0; font-size: 14px; font-weight: 400; text-align: left; line-height: 1.15; text-shadow:none;
 }

.map-overlays .map-overlay-labels.map-overlay-cost { z-index: 5; }
.map-overlays .map-overlay-labels.map-overlay-cost .map-overlay-label { top: 19%; left: 18%; width: 15em; font-size: 1.05em; text-align: left; line-height: 1.15; text-shadow: none;}
.map-overlays .map-overlay-labels.map-overlay-cost .map-overlay-label strong { font-size: 1.05em; color: #FFFFAD; }
.map-overlays .map-overlay-labels.map-overlay-cost .map-overlay-label p { margin-bottom: 5px; }
.map-overlays .map-overlay-labels.map-overlay-benefit { z-index: 5; }
.map-overlays .map-overlay-labels.map-overlay-benefit .map-overlay-label { top: -60px; left: 5px; width: 98%; font-size: 14px; text-align: left; line-height: 1.25; text-shadow: none; background:rgba(255,255,255,0.4); }
.map-overlays .map-overlay-labels.map-overlay-benefit .map-overlay-label p { margin-bottom: 5px; }
.map-overlays .map-overlay-labels.map-overlay-benefit .map-overlay-label strong { font-size: 1.05em; color: #FFD29B; }

.map-overlays .map-overlay-svgs { position: absolute; top: 20px; left: 0; width: 100%; height: 94%; }
.map-overlays .map-overlay-svgs .map-overlay-svg { position: absolute; left: 0; transition: opacity 1s ease; }
.map-overlays .map-overlay-svgs .map-overlay-svg.hidden { display: block !important; opacity: 0; z-index: -1; transition: none; }
.map-overlays .map-overlay-svgs .map-overlay-svg.map-overlay-svg-1 path { stroke-width: 5px; stroke-dasharray: none; }
.map-overlays .map-overlay-svgs .map-overlay-svg.map-overlay-svg-1 line { stroke-width: 4px; stroke-dasharray: 4, 4; }
.map-overlays .map-overlay-svgs .map-overlay-svg.map-overlay-svg-1 circle { fill: #fff; stroke-width: 3px; stroke-dasharray: none;     display: none; }
.map-overlays .map-overlay-svgs .map-overlay-svg.map-overlay-svg-1.infra #hk-island { stroke: #FFA12D; }
.map-overlays .map-overlay-svgs .map-overlay-svg.map-overlay-svg-1.infra #ma-island { stroke: #FFA12D; }
.map-overlays .map-overlay-svgs .map-overlay-svg.map-overlay-svg-2 path { stroke-width: 6px; }
.map-overlays .map-overlay-svgs .map-overlay-svg.map-overlay-svg-2 #Humenzhen path { stroke: #F3941E; }
.map-overlays .map-overlay-svgs .map-overlay-svg.map-overlay-svg-2 #Humenzhen circle { fill: #F3941E;     display: none;}
.map-overlays .map-overlay-svgs .map-overlay-svg.map-overlay-svg-2 #bridge circle { fill: #fff;     display: none;}



.map-overlays .map-overlay-svgs .map-overlay-svg.map-overlay-svg-2 #bridge #tunneling g .st3 { stroke-width:4px;}




.map-sources .map-source { position: absolute; bottom: 3px; left: 0; width: 100%; font-size: 13px; color:#757170; text-align: left; line-height: 1.2; z-index: 4; transition: all .5s ease; }
.map-sources .map-source a { color: rgba(117, 113, 112, .7); transition: all .5s ease; }
.map-sources .map-source a:hover { color: #757170; }
.map-sources .map-source.hidden { display: block !important; opacity: 0; z-index: -1; transition: none; }

.videos .video .mobileVid {
background-size:fit;
object-fill:fit;
background-repeat:no repeat;
}
.videos .video { position: absolute; z-index: 2; transition: all .5s ease;  }
.videos .video.hidden { background: url(../images/frame1.png) no-repeat center center;
    background-size: cover; display: block !important; opacity: 0; z-index: -1; transition: none; }
.videos .video-button { position: absolute; top: calc(50% - 40px); left: calc(50% - 40px); width: 80px; height: 80px; border-radius: 50%; font-size: 2.5em; text-align: center; line-height: 80px; color:#fff; background: rgba(0, 0, 0, .5); cursor: pointer; z-index: 5; transition: all .5s ease; }
.videos .video-button:hover { background: rgba(0, 0, 0, .7); }
.videos .video-button.hidden { display: block !important; opacity: 0; z-index: -1; transition: none; }




/*---------------------------------KEY FRAMES-------------------------*/
.bounce {
  -moz-animation: bounce 5s;
  -webkit-animation: bounce 5s;
  animation: bounce 5s;
   animation-iteration-count: 3;
}
@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateX(0);
    transform: translateX(0);
  }
  40% {
    -moz-transform: translateX(-8px);
    transform: translateX(-8px);
  }
  60% {
    -moz-transform: translateX(-5px);
    transform: translateX(-5px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  40% {
    -webkit-transform: translateX(-8px);
    transform: translateX(-8px);
  }
  60% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  40% {
    -moz-transform: translateX(-8px);
    -ms-transform: translateX(-8px);
    -webkit-transform: translateX(-8px);
    transform: translateX(-8px);
  }
  60% {
    -moz-transform: translateX(-5px);
    -ms-transform: translateX(-5px);
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
}









/*---------------------------------MEDIA DEVICES, MOBILE, TABLETS-------------------------*/








@media screen and (max-width: 1400px) {
	.map-overlays .map-overlay-labels.map-overlay-coach .map-overlay-label.coach01{
		left: 3%;
		top: 61%;
		font-size: 18px;
	}
	
	.map-overlays .map-overlay-labels.map-overlay-shuttle .map-overlay-label {
		top: 41%;
		left: 40%;
		font-size: 13px;
	}
	
	.map-overlays .map-overlay-labels.map-overlay-bus .map-overlay-label.bus01{
		top: 36%;
		left: 14%;
		width: 9%;
		font-size: 12px;
	}
	
	.map-overlays .map-overlay-labels.map-overlay-bus .map-overlay-label.bus02{
		top: 26%;
		left: 69%;
		width: 12%;
		font-size: 12px;
	}
	
	.map-overlays .map-overlay-labels.map-overlay-bus .map-overlay-label.bus03{
		width: 9%;
		left: 96%;
		top: 36%;
		font-size: 12px;
	}
	
	
	
	
	
}









@media screen and (max-width: 1100px) {
	.map-overlays .map-overlay-labels.map-overlay-coach .map-overlay-label.coach01{
		left: 3%;
		top: 61%;
		font-size: 18px;
	}
	
	.map-overlays .map-overlay-labels.map-overlay-shuttle .map-overlay-label {
		top: 41%;
		left: 40%;
		font-size: 15px;
	}
	
	.map-overlays .map-overlay-labels.map-overlay-bus .map-overlay-label.bus01{
		top: 38%;
		left: 14%;
		width: 9%;
		font-size: 12px;
	}
	
	.map-overlays .map-overlay-labels.map-overlay-bus .map-overlay-label.bus02{
		top: 26%;
		left: 69%;
		width: 12%;
		font-size: 12px;
	}
	
	.map-overlays .map-overlay-labels.map-overlay-bus .map-overlay-label.bus03{
		width: 9%;
		left: 96%;
		top: 38%;
		font-size: 12px;
	}
	
	
	
	
	
}














@media screen and (max-width: 800px) {
	.map-overlays .map-overlay-labels.map-overlay-coach .map-overlay-label.coach01{
		left: 3%;
		top: 62%;
		font-size: 18px;
	}
	
	.map-overlays .map-overlay-labels.map-overlay-shuttle .map-overlay-label {
		top: 41%;
		left: 40%;
		font-size: 15px;
	}
	
	.map-overlays .map-overlay-labels.map-overlay-bus .map-overlay-label.bus01{
		top: 38%;
		left: 14%;
		width: 9%;
		font-size: 12px;
	}
	
	.map-overlays .map-overlay-labels.map-overlay-bus .map-overlay-label.bus02{
		top: 26%;
		left: 69%;
		width: 12%;
		font-size: 12px;
	}
	
	.map-overlays .map-overlay-labels.map-overlay-bus .map-overlay-label.bus03{
		width: 9%;
		left: 96%;
		top: 38%;
		font-size: 12px;
	}
	
	
	
	
	
}













@media screen and (max-width: 540px) {
  .title { 
	  max-width: 100%; 
	  font-size:16px; 
  }
  .controls {
	  width: 90.2%; 
	}
	.map-overlays .map-overlay-labels {
		height:100%;
	}
}




@media screen and (max-width: 500px) {
.map-overlays .map-overlay-labels.map-overlay-island .map-overlay-label {
	    top: -69px;
    font-size: 10.3pt
}
	
.map-overlays .map-overlay-labels.map-overlay-orange .map-overlay-label {
	width: 35%;
	font-size: 13px;
}
	.map-overlays .map-overlay-labels.map-overlay-cities-infra .map-overlay-label.map-overlay-label-hk {
		top:56%;
	}
	
	.map-overlays .map-overlay-labels.map-overlay-length.infra .map-overlay-label {
		top: 44%;
		left: 47%;
	}
	.map-overlays .map-overlay-labels.map-overlay-time-bridge .map-overlay-label {
		top: 67%;
		left: 47%;
	}
	.map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label.map-overlay-label-hk {
		top: 62%;
		left: 73%;
	}
	.map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label.map-overlay-label-mo {
		top: 70%;
		left: 30%;
	}
	.map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label.map-overlay-label-sz {
		top: 26%;
		left: 65%;
	}
	.map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label.map-overlay-label-zs {
		top: 23%;
		left: 18%;
	}
	.map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label.map-overlay-label-zh {
		top: 56%;
		left: 21%;
	}
	.map-overlays .map-overlay-labels.map-overlay-time-bridge .map-overlay-label {
		top: 50%;
		left: 47%;
		font-size: 14px;
	}
	.map-overlays .map-overlay-labels.map-overlay-benefit .map-overlay-label {
		top: -63px;
		left: 5px;
		font-size: 13.8px;
		line-height: 1.1;
	}
	
	
	.map-overlays .map-overlay-labels.map-overlay-time-ferry .map-overlay-label {
		    top: 66%;
	}
	
	.map-overlays .map-overlay-label-projections02 {
		top: -17px;
		font-size:13.8px;
	}
	
	.map-overlays .map-overlay-labels.map-overlay-cities-infra .map-overlay-label.map-overlay-label-mo {
    top: 56%;
	}
	.map-overlays .map-overlay-labels.map-overlay-shuttle .map-overlay-label {
		top:35%;
	}
	
	
	

.map-overlays .map-overlay-labels.map-overlay-bridgecities .map-overlay-label.map-overlay-hk-bridge { top: 12%; left: 13%; }
.map-overlays .map-overlay-labels.map-overlay-bridgecities .map-overlay-label.map-overlay-mo-bridge { top: 12%; left: 59%;  }
.map-overlays .map-overlay-labels.map-overlay-bridgecities .map-overlay-label.map-overlay-zh-bridge { top: 12%; left: 86%;  }




.map-overlays .map-overlay-labels.map-overlay-bus .map-overlay-label.bus01 {
	top: 26%;
    left: 15%;
    width: 9%; }
.map-overlays .map-overlay-labels.map-overlay-bus .map-overlay-label.bus02 {    
	    top: 23.5%;
    left: 71.5%;
    width: 15%;  
	}
.map-overlays .map-overlay-labels.map-overlay-bus .map-overlay-label.bus03 { top: 26%;  left: 101%; width: 9%;  }



.map-overlays .map-overlay-labels.map-overlay-coach .map-overlay-label {  color:#000; font-weight: 600; opacity: 1; }
.map-overlays .map-overlay-labels.map-overlay-coach .map-overlay-label.coach01 {     
	left: 3%;
    top: 47%;
    width: 100%;
    font-size: 12px; margin-top: -1.1em; margin-left: -5em;  }





.map-overlays .map-overlay-labels.map-overlay-shuttle .map-overlay-label { 
	font-size: 10px;
    top: 35%;
    left: 39%;

}


	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
}

@media screen and (max-width: 475px) {

#control-next {
	left:99%;
}


.map-overlays .map-overlay-labels.map-overlay-island .map-overlay-label {
	font-size:10.5pt;
	top:-68px;
}
.map-overlays .map-overlay-labels.map-overlay-orange .map-overlay-label {
	font-size:11px;
	width:50%;
}

.map-overlays .map-overlay-labels.map-overlay-cities-infra .map-overlay-label.map-overlay-label-clk {
	top: 25%;
    left: 51%;
}

.map-overlays .map-overlay-labels.map-overlay-cities-infra .map-overlay-label.map-overlay-label-hk {
	top: 58%;
    left: 74%;
}

.map-overlays .map-overlay-labels.map-overlay-cities-infra .map-overlay-label.map-overlay-label-zh {
	top: 36%;
    left: 7%;
}
.map-overlays .map-overlay-labels.map-overlay-cities-infra .map-overlay-label.map-overlay-label-mo {
	top: 55%;
    left: 16%;
}

.map-overlays .map-overlay-labels.map-overlay-length.infra .map-overlay-label{
	top: 45%;
    left: 46%;
}

.map-overlays .map-overlay-labels.map-overlay-orange .map-overlay-label {
	top:3%;
}

.map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label.map-overlay-label-hk {
	top: 62%;
    left: 78%;
}

.map-overlays .map-overlay-labels.map-overlay-time-ferry .map-overlay-label {
	top: 67%;
    left: 49%;
}

.map-overlays .map-overlay-labels.map-overlay-time-bridge .map-overlay-label {
	top: 49%;
    left: 46%;
    font-size: 13px;
}

.map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label.map-overlay-label-mo {
	top: 70%;
    left: 28%;
}

.map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label.map-overlay-label-zh {
	top: 55%;
    left: 18%;
}

.map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label.map-overlay-label-zs {
	    top: 18%;
    left: 12%;
}
.map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label.map-overlay-label-sz {
	top: 29%;
    left: 63%;
}

.map-overlays .map-overlay-labels.map-overlay-time-road .map-overlay-label {
	top: 5%;
    left: 28%;
}

.map-overlays .map-overlay-labels.map-overlay-benefit .map-overlay-label {
    top: -68px;
    left: 5px;
	font-size:14px;
}

.map-overlays .map-overlay-label-projections02 {
	top:-17px;
}
.control-progress {
		left:36%;
	}
	
	
	.maps {
		top: 54px;
    left: 0;
    width: 100%;
    height: 79%;
	}

}



@media screen and (max-width: 430px) {
	
	
	
	
	.map-overlays .map-overlay-label-bridgecross {
		top: -8%;
	}
	
	
	
	

#control-next {
	left:98%;
}


.map-overlays .map-overlay-labels.map-overlay-island .map-overlay-label {
	font-size:10.5pt;
	top:-85px;
}
.map-overlays .map-overlay-labels.map-overlay-orange .map-overlay-label {
	font-size:11px;
	width:50%;
}

.map-overlays .map-overlay-labels.map-overlay-cities-infra .map-overlay-label.map-overlay-label-clk {
	top: 25%;
    left: 51%;
}

.map-overlays .map-overlay-labels.map-overlay-cities-infra .map-overlay-label.map-overlay-label-hk {
	top: 58%;
    left: 74%;
}

.map-overlays .map-overlay-labels.map-overlay-cities-infra .map-overlay-label.map-overlay-label-zh {
	top: 36%;
    left: 7%;
}
.map-overlays .map-overlay-labels.map-overlay-cities-infra .map-overlay-label.map-overlay-label-mo {
	top: 55%;
    left: 16%;
}

.map-overlays .map-overlay-labels.map-overlay-length.infra .map-overlay-label{
	top: 45%;
    left: 46%;
}

.map-overlays .map-overlay-labels.map-overlay-orange .map-overlay-label {
	top:3%;
}

.map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label.map-overlay-label-hk {
	top: 62%;
    left: 78%;
}

.map-overlays .map-overlay-labels.map-overlay-time-ferry .map-overlay-label {
	top: 69%;
    left: 49%;
}

.map-overlays .map-overlay-labels.map-overlay-time-bridge .map-overlay-label {
	top: 49%;
    left: 46%;
    font-size: 13px;
}

.map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label.map-overlay-label-mo {
	top: 70%;
    left: 28%;
}

.map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label.map-overlay-label-zh {
	top: 55%;
    left: 18%;
}

.map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label.map-overlay-label-zs {
	    top: 18%;
    left: 12%;
}
.map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label.map-overlay-label-sz {
	top: 29%;
    left: 63%;
}

.map-overlays .map-overlay-labels.map-overlay-time-road .map-overlay-label {
	top: 5%;
    left: 28%;
}

.map-overlays .map-overlay-labels.map-overlay-benefit .map-overlay-label {
    top: -85px;
    left: 5px;
	font-size:14px;
}

.map-overlays .map-overlay-label-projections02 {
	top:-30px;
}
.control-progress {
		left:36%;
	}
	
	
	.maps {
		top: 54px;
    left: 0;
    width: 100%;
    height: 79%;
	}

}


@media screen and (max-width: 385px) {
	
	
	.map-overlays .map-overlay-labels.map-overlay-bridgecities .map-overlay-label { font-size: 15px;}
.map-overlays .map-overlay-labels.map-overlay-bridgecities .map-overlay-label.map-overlay-hk-bridge { top: 15%; left: 13%;  }
.map-overlays .map-overlay-labels.map-overlay-bridgecities .map-overlay-label.map-overlay-mo-bridge { top: 15%; left: 59%;  }
.map-overlays .map-overlay-labels.map-overlay-bridgecities .map-overlay-label.map-overlay-zh-bridge { top: 15%; left: 86%;  }


	
	.map-overlays .map-overlay-labels.map-overlay-coach .map-overlay-label.coach01{
	left: 1.8%;
    top: 209px;
    font-size: 11.5px;
	}
	
	.map-overlays .map-overlay-labels.map-overlay-shuttle .map-overlay-label {
		top: 35.5%;
    font-size: 11px;
    left: 40%;
	}
	
	
	
	.map-overlays .map-overlay-labels.map-overlay-bus .map-overlay-label.bus01 {
		top: 25%;
		left: 17%;
		font-size: 10px;
	}
	
	.map-overlays .map-overlay-labels.map-overlay-bus .map-overlay-label.bus02 {
		    top: 25%;
			left: 72%;
			font-size: 10px;
	}
	.map-overlays .map-overlay-labels.map-overlay-bus .map-overlay-label.bus03 {
		    top: 25%;
			left: 99.5%;
			font-size: 10px;
	}
	
}




@media screen and (max-width: 375px) {
	
	
	.map-overlays .map-overlay-labels.map-overlay-bridgecities .map-overlay-label { font-size: 15px;}
.map-overlays .map-overlay-labels.map-overlay-bridgecities .map-overlay-label.map-overlay-hk-bridge { top: 14%; left: 13%;  }
.map-overlays .map-overlay-labels.map-overlay-bridgecities .map-overlay-label.map-overlay-mo-bridge { top: 14%; left: 59%;  }
.map-overlays .map-overlay-labels.map-overlay-bridgecities .map-overlay-label.map-overlay-zh-bridge { top: 14%; left: 86%;  }


	
	
	.map-overlays .map-overlay-labels.map-overlay-coach .map-overlay-label.coach01{
	left: 7%;
    top: 209px;
    font-size: 13.5px;
	}
	
	.map-overlays .map-overlay-labels.map-overlay-shuttle .map-overlay-label {
		top: 35%;
		font-size: 10px;
		left: 38%;
	}
	
	
	
	.map-overlays .map-overlay-labels.map-overlay-bus .map-overlay-label.bus01 {
		top: 25%;
		left: 17%;
		font-size: 10px;
	}
	
	.map-overlays .map-overlay-labels.map-overlay-bus .map-overlay-label.bus02 {
		    top: 25%;
			left: 74%;
			font-size: 10px;
	}
	.map-overlays .map-overlay-labels.map-overlay-bus .map-overlay-label.bus03 {
		    top: 23%;
			left: 99.5%;
			font-size: 10px;
	}
	
	
	
	.control-progress {
		left:30%;
	}
	
	.maps {
		top:58px;
	}
	.map-overlays .map-overlay-labels  {
		top:58px;
	}


.map-overlays .map-overlay-label-projections02 {
    top: -28px;
	font-size:13px;
}


.map-overlays .map-overlay-labels.map-overlay-benefit .map-overlay-label p {
	font-size:9.5pt;
}


.map-overlays .map-overlay-labels.map-overlay-island .map-overlay-label {
	font-size:9.5pt;
	top:-72px;
}
.map-overlays .map-overlay-labels.map-overlay-orange .map-overlay-label {
	font-size:12px;
	width:50%;
}

.map-overlays .map-overlay-labels.map-overlay-cities-infra .map-overlay-label.map-overlay-label-clk {
	top:31%;
	left:53%;
}

.map-overlays .map-overlay-labels.map-overlay-cities-infra .map-overlay-label.map-overlay-label-hk {
	top: 68%;
    left: 70%;
}

.map-overlays .map-overlay-labels.map-overlay-cities-infra .map-overlay-label.map-overlay-label-zh {
	top: 41%;
    left: 13%;
}
.map-overlays .map-overlay-labels.map-overlay-cities-infra .map-overlay-label.map-overlay-label-mo {
	top: 72%;
    left: 15%;
}

.map-overlays .map-overlay-labels.map-overlay-length.infra .map-overlay-label{
	top: 60%;
    left: 46%;
}

.map-overlays .map-overlay-labels.map-overlay-orange .map-overlay-label {
	top:3%;
}

.map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label.map-overlay-label-hk {
	top: 65%;
    left: 78%;
}

.map-overlays .map-overlay-labels.map-overlay-time-ferry .map-overlay-label {
	top: 67%;
    left: 43%;
}

.map-overlays .map-overlay-labels.map-overlay-time-bridge .map-overlay-label {
	top: 46%;
    left: 46%;
}

.map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label.map-overlay-label-mo {
	top: 63%;
    left: 22%;
}

.map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label.map-overlay-label-zh {
	top:50%;
	left:13%;
}

.map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label.map-overlay-label-zs {
	    top: 18%;
    left: 14%;
}
.map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label.map-overlay-label-sz {
	top: 26%;
    left: 61%;
}



}
















@media screen and (max-width: 372px) {
	
	
	.map-overlays .map-overlay-labels.map-overlay-bridgecities .map-overlay-label { font-size: 15px;}
.map-overlays .map-overlay-labels.map-overlay-bridgecities .map-overlay-label.map-overlay-hk-bridge { top: 10%; left: 13%;  }
.map-overlays .map-overlay-labels.map-overlay-bridgecities .map-overlay-label.map-overlay-mo-bridge { top: 10%; left: 59%;  }
.map-overlays .map-overlay-labels.map-overlay-bridgecities .map-overlay-label.map-overlay-zh-bridge { top: 10%; left: 86%;  }


	
	
	.map-overlays .map-overlay-labels.map-overlay-coach .map-overlay-label.coach01{
	left: 7%;
    top: 196px;
    font-size: 13.5px;
	}
	
	.map-overlays .map-overlay-labels.map-overlay-shuttle .map-overlay-label {
		top: 35%;
		font-size: 10px;
		left: 38%;
	}
	
	
	
	.map-overlays .map-overlay-labels.map-overlay-bus .map-overlay-label.bus01 {
		top: 23%;
		left: 17%;
		font-size: 10px;
	}
	
	.map-overlays .map-overlay-labels.map-overlay-bus .map-overlay-label.bus02 {
		    top: 23%;
			left: 74%;
			font-size: 10px;
	}
	.map-overlays .map-overlay-labels.map-overlay-bus .map-overlay-label.bus03 {
		    top: 23.5%;
			left: 100%;
			font-size: 10px;
	}
	
	
	
	.control-progress {
		left:30%;
	}
	
	.maps {
		top:58px;
	}
	.map-overlays .map-overlay-labels  {
		top:58px;
	}


.map-overlays .map-overlay-label-projections02 {
    top: -28px;
	font-size:13px;
}


.map-overlays .map-overlay-labels.map-overlay-benefit .map-overlay-label p {
	font-size:9.5pt;
}


.map-overlays .map-overlay-labels.map-overlay-island .map-overlay-label {
	font-size:9.5pt;
	top:-72px;
}
.map-overlays .map-overlay-labels.map-overlay-orange .map-overlay-label {
	font-size:12px;
	width:50%;
}

.map-overlays .map-overlay-labels.map-overlay-cities-infra .map-overlay-label.map-overlay-label-clk {
	top:20%;
	left:53%;
}

.map-overlays .map-overlay-labels.map-overlay-cities-infra .map-overlay-label.map-overlay-label-hk {
	top: 58%;
    left: 70%;
}

.map-overlays .map-overlay-labels.map-overlay-cities-infra .map-overlay-label.map-overlay-label-zh {
	top: 34%;
    left: 13%;
}
.map-overlays .map-overlay-labels.map-overlay-cities-infra .map-overlay-label.map-overlay-label-mo {
	top: 55%;
    left: 15%;
}

.map-overlays .map-overlay-labels.map-overlay-length.infra .map-overlay-label{
	top: 50%;
    left: 46%;
}

.map-overlays .map-overlay-labels.map-overlay-orange .map-overlay-label {
	top:3%;
}

.map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label.map-overlay-label-hk {
	top: 63%;
    left: 78%;
}

.map-overlays .map-overlay-labels.map-overlay-time-ferry .map-overlay-label {
	top: 69%;
    left: 43%;
}

.map-overlays .map-overlay-labels.map-overlay-time-bridge .map-overlay-label {
	top: 46%;
    left: 46%;
}

.map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label.map-overlay-label-mo {
	top: 68%;
    left: 22%;
}

.map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label.map-overlay-label-zh {
	top:49%;
	left:13%;
}

.map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label.map-overlay-label-zs {
	    top: 18%;
    left: 14%;
}
.map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label.map-overlay-label-sz {
	top: 29%;
    left: 66%;
}



}
@media screen and (max-width: 360px) {
  .title { font-size: 18px; }
  /* .map-overlays .map-overlay-labels { font-size: .9em; } */
  .map-overlays .map-overlay-labels.map-overlay-yellow .map-overlay-label:before { width: 10px; height: 10px; }
  .map-overlays .map-overlay-labels.map-overlay-orange .map-overlay-label p:before { width: 10px; height: 10px; }
  .map-sources .map-source {font-size:11px;}
  .controls { width: 88.8%;}
  
  
  
  .map-overlays .map-overlay-labels.map-overlay-island .map-overlay-label {
	 top:-85px;
  }
  
  
  .map-overlays .map-overlay-labels.map-overlay-cities-infra .map-overlay-label.map-overlay-label-hk {
	  top:54%;
	  left:70%;
  }
  
  .map-overlays .map-overlay-labels.map-overlay-cities-infra .map-overlay-label.map-overlay-label-clk {
		top:26%;
		left:53%;
  }
  
  
  .map-overlays .map-overlay-labels.map-overlay-cities-infra .map-overlay-label.map-overlay-label-mo {
	  top: 64%;
    left: 15%;

  }
  .map-overlays .map-overlay-labels.map-overlay-cities-infra .map-overlay-label.map-overlay-label-zh {
	  top: 34%;
    left: 13%;
  }
  
  .map-overlays .map-overlay-labels.map-overlay-time-ferry .map-overlay-label {
	      top: 68%;
    left: 43%;
  }
  .map-overlays .map-overlay-labels.map-overlay-time-bridge .map-overlay-label {
	  top: 47%;
    left: 46%;
  }
  
  .map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label.map-overlay-label-hk {
	      top: 64%;
    left: 78%;
	width:6.2em;
  }
  
  .map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label.map-overlay-label-sz {
	  top: 32%;
    left: 69%;
  }
  
  .map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label.map-overlay-label-zs {
	      top: 20%;
    left: 14%;
  }
  
  .map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label.map-overlay-label-zh {
	      top: 55%;
    left: 13%;
  }
  
  .map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label.map-overlay-label-mo {
	  top: 72%;
    left: 22%;
  }
  
  
  
  
  
  	
	.map-overlays .map-overlay-labels.map-overlay-bridgecities .map-overlay-label { font-size: 15px;}
.map-overlays .map-overlay-labels.map-overlay-bridgecities .map-overlay-label.map-overlay-hk-bridge { top: 14%; left: 13%;  }
.map-overlays .map-overlay-labels.map-overlay-bridgecities .map-overlay-label.map-overlay-mo-bridge { top: 14%; left: 59%;  }
.map-overlays .map-overlay-labels.map-overlay-bridgecities .map-overlay-label.map-overlay-zh-bridge { top: 14%; left: 86%;  }


	
	
	.map-overlays .map-overlay-labels.map-overlay-coach .map-overlay-label.coach01{
	left: 2.5%;
    top: 46%;
    font-size: 11.5px;
	}
	
	.map-overlays .map-overlay-labels.map-overlay-shuttle .map-overlay-label {
		top: 35%;
		font-size: 10px;
		left: 38%;
	}
	
	
	
	.map-overlays .map-overlay-labels.map-overlay-bus .map-overlay-label.bus01 {
		top: 25%;
		left: 17%;
		font-size: 10px;
	}
	
	.map-overlays .map-overlay-labels.map-overlay-bus .map-overlay-label.bus02 {
		    top: 25%;
			left: 72%;
			font-size: 10px;
	}
	.map-overlays .map-overlay-labels.map-overlay-bus .map-overlay-label.bus03 {
		    top: 25%;
			left: 99.5%;
			font-size: 10px;
	}
	
	
	
	
	
	
	.map-overlays .map-overlay-label-bridgecross {
            top: -25px;
    font-size: 13px;
}
	
	
	
	
	
	
  
}

@media screen and (max-width: 345px) {
  .title { font-size: 17px; }
  .map-overlays .map-overlay-labels { font-size: 14px; }
    .map-sources .map-source {font-size:10px;}
  .controls {
    width: 87.2%;
}
  
  .map-overlays .map-overlay-labels.map-overlay-island .map-overlay-label {
    font-size: 9.5pt;
    top: -87px;
}
  .map-overlays .map-overlay-labels.map-overlay-cities-infra .map-overlay-label.map-overlay-label-mo {
	  top:68%;
	  left:15%;
  }
  .map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label.map-overlay-label-hk{
	  top: 85%;
    left: 78%;
  }
  
.map-overlays .map-overlay-labels.map-overlay-cities-infra .map-overlay-label.map-overlay-label-hk{
	top: 60%;
    left: 69%;
	
}

.map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label.map-overlay-label-zh {
	top: 52%;
    left: 11%;
}
.map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label.map-overlay-label-mo {
	    top: 80%;
    left: 22%;
}

.map-overlays .map-overlay-labels.map-overlay-time-bridge .map-overlay-label {
	    top: 60%;
    left: 46%;
}

.map-overlays .map-overlay-labels.map-overlay-time-ferry .map-overlay-label {
	    top: 83%;
    left: 48%;
}


  
  .map-overlays .map-overlay-labels.map-overlay-cities-infra .map-overlay-label.map-overlay-label-clk {
    top: 31%;
    left: 50%;
    font-size: 13px;
}
  
  
  
  .map-overlays .map-overlay-labels.map-overlay-benefit .map-overlay-label {
	  top: -82px;
	  line-height:1.1;
  }
  
  
  
  
  .map-overlays .map-overlay-labels.map-overlay-bridgecities .map-overlay-label.map-overlay-hk-bridge {
	  left:16%;
  }
  
	.map-overlays .map-overlay-labels.map-overlay-bus .map-overlay-label.bus01 { font-size:9px; top: 31%;}
  
    .map-overlays .map-overlay-labels.map-overlay-bus .map-overlay-label.bus02 { font-size:9px; top: 31%; left: 74%;}
	
	.map-overlays .map-overlay-labels.map-overlay-bus .map-overlay-label.bus03 { font-size:9px; top: 31%;    left: 99.5%;
}
  
.map-overlays .map-overlay-labels.map-overlay-shuttle .map-overlay-label{font-size:9.5px;top:45%; left:40%;}

.map-overlays .map-overlay-labels.map-overlay-coach .map-overlay-label.coach01 {font-size:10px;top:203px; left: 2%;}



.map-overlays .map-overlay-label-bridgecross {
        top: -30px;
    font-size: 13px;
}
}

@media screen and (max-width: 335px) {
	.map-overlays .map-overlay-labels.map-overlay-coach .map-overlay-label.coach01 {
		top:58%;
		left: 3%;
		font-size: 10px;
	}
	
	.map-overlays .map-overlay-labels.map-overlay-shuttle .map-overlay-label {
		left:40%;
	}
	.map-overlays .map-overlay-label-bridgecross {
        top: -30px;
    font-size: 13px;
}
}

@media screen and (max-width: 328px) {
	.map-overlays .map-overlay-labels.map-overlay-coach .map-overlay-label.coach01 {
		top:58%;
		left: 5%;
		font-size: 10px;
	}
	
	.map-overlays .map-overlay-labels.map-overlay-shuttle .map-overlay-label {
		left:40%;
	}
	
	.map-overlays .map-overlay-label-bridgecross {
        top: -45px;
    font-size: 13px;
}
	
}





@media screen and (max-width: 300px) {
  .title { font-size: 15px; }
  .map-overlays .map-overlay-labels { font-size: 14px; }
    .map-sources .map-source {font-size:10px;}
  .controls {
    width: 86.2%;
}
  
  .map-overlays .map-overlay-labels.map-overlay-island .map-overlay-label {
    font-size: 9.5pt;
    top: -100px;
}
  
  
  
.map-overlays .map-overlay-labels.map-overlay-cities-infra .map-overlay-label.map-overlay-label-hk{
	top: 70%;
    left: 69%;
	
}
  
  .map-overlays .map-overlay-labels.map-overlay-cities-infra .map-overlay-label.map-overlay-label-clk {
    top: 31%;
    left: 50%;
    font-size: 13px;
}
  
  
  
  .map-overlays .map-overlay-labels.map-overlay-benefit .map-overlay-label {
	  top: -105px;
	  line-height:1.1;
  }

  
  
  map-overlay-labels map-overlay-cities-zoom, .map-overlays .map-overlay-labels.map-overlay-cities-infra .map-overlay-label.map-overlay-label-hk, .map-overlays .map-overlay-labels.map-overlay-cities-infra .map-overlay-label.map-overlay-label-mo, .map-overlays .map-overlay-labels.map-overlay-cities-infra .map-overlay-label.map-overlay-label-zh, .map-overlays .map-overlay-labels.map-overlay-cities-infra .map-overlay-label.map-overlay-label-clk,
  .map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label.map-overlay-label-hk, .map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label.map-overlay-label-mo, .map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label.map-overlay-label-zh, .map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label.map-overlay-label-sz, .map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label.map-overlay-label-zs{
	  font-size:11px;
  }
  
  
  .map-overlays .map-overlay-svgs {
    top: 28px;
  }
  
  
  .map-overlays .map-overlay-labels.map-overlay-island .map-overlay-label {
	  top:-87px;
  }
  
  
  .map-overlays .map-overlay-label-projections02 {
	  top:-50px;
  }
  
  .map-overlays .map-overlay-labels.map-overlay-island .map-overlay-label {
	  top:-105px;
  }
  
  .map-overlays .map-overlay-labels.map-overlay-orange .map-overlay-label {
	  width:55%;
  }
  
  
  .map-overlays .map-overlay-labels.map-overlay-cities-zoom .map-overlay-label.map-overlay-label-zs {
	  left: 15%;
  }
  .control-progress {
    left: 30%;
}
}