/***INTERACTIVE MAP***/
.map_iconWrapper { position:relative; }
.map_icon { position:absolute; }
.map_icon.button { cursor:pointer; }

#mapOuterWrapper { position: relative; padding-bottom: 70%; height: 0; overflow: hidden; }
#mapWrapper, #mapContent { width:960px; }
#mapContent { position:relative; }

#mapNav { background-color: #ffffff; }

.mapSubNav { height:30px; background:#012f3b; overflow:hidden; text-align:center; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.mapSubNav p { color:#FFFFFF; font-family: 'Open Sans', sans-serif; line-height:12px; font-size:12px; padding-top:9px; }
#mapWrapper .mapSubNav ul, #mapWrapper .mapSubNav ul li { padding:0px; margin:0px; list-style:none; height:24px; background:none; }
#mapWrapper .mapSubNav ul li { color:#FFFFFF; font-family: 'Open Sans', sans-serif; text-transform:uppercase; line-height:12px; font-size:12px; font-weight:400; padding:9px 0px 0px 5px; margin-right:20px; cursor:pointer; background: url(/images/interface/map/bkg_li.svg) no-repeat 0 3px; }
#mapWrapper .mapSubNav ul li.active { background-position:0px -20px; color:#ffffff; }
#mapWrapper .mapSubNav ul li a { padding-left:14px; color:#FFFFFF !important }

/*ADJUSTING THE NAVS TO CENTER AUTOMATICALLY*/
#mapNav ul, .mapSubNav ul { display:block; text-align:left; }
.mapSubNav ul { text-align:center; }
#mapNav li, .mapSubNav li { display:inline-block; }

#mapNav a { display:block; font:700 15px/12px Arial,sans-serif; text-decoration:none; text-transform:uppercase; color:#012f3b !important; background:#fff; padding:10px; text-align:center; }
#mapNav a.active { color:#fff !important; background:#012f3b; border-top-left-radius:8px; border-top-right-radius:8px; }

/**LAYERS**/
#gpx_view1_base, #gpx_view1_roads, #gpx_view1_radial, #gpx_view1_cities, #gpx_view1_top, #gpx_view2_base, #gpx_view2_rail, #gpx_view2_roads, #gpx_view2_cities, #gpx_view2_radial, #gpx_view2_top, #gpx_view2_ports, #gpx_view2_airports, #gpx2_view2_airports, #gpx_fiber, #gpx_electric, #gpx_gas, #gpx_wastewater, #gpx_water, #gpx_top, #gpx_view4_future, #gpx_view3_future, #gpx2_view4_future, #gpx2_view3_future { position:absolute; top:0px; width:100%; }
#mktPage01, #mktPage02, #mktPage03 { position:absolute; bottom:0px; }

#rightInfo { width:174px; top:98px; right:0px; position:absolute; }
#rightInfo span { font-family: 'Lato', Arial, Helvetica, sans-serif; font-size:12px; line-height:13px; padding-right:9px; }
#rightInfo hr { margin:0; padding:0; padding:2px; box-shadow:0px 0px 4px #000; border-top-left-radius:4px; border-bottom-left-radius:4px; margin:4px 0px; }
#gpx2_electric, #gpx2_water, #gpx2_gas, #gpx2_wastewater, #gpx2_fiber { background:#4B4E57; padding:8px 0px 8px 9px; margin-bottom:9px; color:#fff; box-shadow:0px 0px 4px #000; border-top-left-radius:6px; border-bottom-left-radius:6px; }
#gpx2_electric hr { border:#F1A2B5 solid 1px; border-right:none; background:#C00029 !important; }
#gpx2_water hr { border:#7DCDFE solid 1px; border-right:none; background:#0072BB !important; }
#gpx2_gas hr { border:#FFFFBF solid 1px; border-right:none; background:#F3DD0E !important; }
#gpx2_wastewater hr { border:#73F072 solid 1px; border-right:none; background:#008102 !important; }
#gpx2_fiber hr { border:#b053c7 solid 1px; border-right:none; background:#8b31a2 !important; }
/*MARKETING PAGES*/
.mktPageWrapper { width:1000px; height:735px; position:relative; position:absolute; z-index:99; top:-30px; left:1200px; }
.mktPageWrapper iframe { position:relative; z-index:1; border:none; }
.closeButton { text-align:right; position:absolute; top:0px; right:0px; z-index:2; -webkit-filter: brightness(160%); filter: brightness(160%); }
.closeButton a { font:900 12px/18px 'Lato',Arial,sans-serif; display:block; padding:5px 4px 5px 20px; color:#fff; cursor:pointer; }

/***TIPTIP**/
/* TipTip CSS - Version 1.2 */
.qtip { max-width:none !important; }
#tiptip_holder { display: none; position: absolute; top: 0; left: 0; z-index: 99999; }
#tiptip_holder.tip_top { padding-bottom: 5px; }
#tiptip_holder.tip_bottom { padding-top: 5px; }
#tiptip_holder.tip_right { padding-left: 5px; }
#tiptip_holder.tip_left { padding-right: 5px; }
#tiptip_content { font-size: 16px; text-align:center; color: #fff; padding: 5px 10px; border: 2px solid #fff; background-color: #012f3b; border-radius: 6px; }
#tiptip_content strong{ font-size: 21px; }
#tiptip_arrow, #tiptip_arrow_inner { position: absolute; border-color: transparent; border-style: solid; border-width: 6px; height: 0; width: 0; display:none; }
#tiptip_holder.tip_top #tiptip_arrow { border-top-color: #fff; border-top-color: rgba(255,255,255,0.35); }
#tiptip_holder.tip_bottom #tiptip_arrow { border-bottom-color: #fff; border-bottom-color: rgba(255,255,255,0.35); }
#tiptip_holder.tip_right #tiptip_arrow { border-right-color: #fff; border-right-color: rgba(255,255,255,0.35); }
#tiptip_holder.tip_left #tiptip_arrow { border-left-color: #fff; border-left-color: rgba(255,255,255,0.35); }
#tiptip_holder.tip_top #tiptip_arrow_inner { margin-top: -7px; margin-left: -6px; border-top-color: rgb(25,25,25); border-top-color: rgba(25,25,25,0.92); }
#tiptip_holder.tip_bottom #tiptip_arrow_inner { margin-top: -5px; margin-left: -6px; border-bottom-color: rgb(25,25,25); border-bottom-color: rgba(25,25,25,0.92); }
#tiptip_holder.tip_right #tiptip_arrow_inner { margin-top: -6px; margin-left: -5px; border-right-color: rgb(25,25,25); border-right-color: rgba(25,25,25,0.92); }
#tiptip_holder.tip_left #tiptip_arrow_inner { margin-top: -6px; margin-left: -7px; border-left-color: rgb(25,25,25); border-left-color: rgba(25,25,25,0.92); }

/**RESPONSIVE**/
.mapFrame { width:960px; height: 540px; margin:0 auto;
transition:.5s ease; 
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}

@media screen and (min-width: 240px) {
  .mapFrame {
  -webkit-transform: scale(.25);
  transform: scale(.25);
  }
}
@media screen and (min-width: 320px) {
  .mapFrame {
  -webkit-transform: scale(.3);
  transform: scale(.3);
  }
}
@media screen and (min-width: 375px) {
  .mapFrame {
  -webkit-transform: scale(.36);
  transform: scale(.36);
  }
}
@media screen and (min-width: 384px) {
  .mapFrame { 
  -webkit-transform: scale(.36);
  transform: scale(.36);
  }
}
@media screen and (min-width: 414px) {
  .mapFrame { 
  -webkit-transform: scale(.39);
  transform: scale(.39);
  }
}
@media screen and (min-width: 480px) {
  .mapFrame { 
  -webkit-transform: scale(.44);
  transform: scale(.44);
  }
}
@media screen and (min-width: 568px) {
  .mapFrame { 
  -webkit-transform: scale(.53);
  transform: scale(.53);
  }
}
@media screen and (min-width: 600px) {
  .mapFrame { 
  -webkit-transform: scale(.56);
  transform: scale(.56);
  }
}
@media screen and (min-width: 667px) {
  .mapFrame {
  -webkit-transform: scale(.63);
  transform: scale(.63);
  }
}
@media screen and (min-width: 736px) {
  .mapFrame { 
  -webkit-transform: scale(.7);
  transform: scale(.7);
  }
}

@media screen and (min-width: 768px) {
  .mapFrame { 
  -webkit-transform: scale(.74);
  transform: scale(.74);
  }
}
@media screen and (min-width: 960px) {
  .mapFrame { 
  -webkit-transform: scale(1);
  transform: scale(1);
  }
}
@media screen and (min-width: 992px) {
	#mapOuterWrapper { padding-bottom: 0%; height: 700px; overflow: hidden; }
}

/***END INTERACTIVE MAP***/