/* Homepage Map Info */
.homepage-map { background-position: 50% 100%; background-repeat: no-repeat; padding-bottom: 270px; margin-bottom: 90px; margin-top: 120px;}
.homepage-map-info-cover { float: left; height: 240px; width: 60%; background-size: cover; background-repeat: no-repeat; background-position: center center; }
.homepage-map-info-more { background-color: #0c5d36;border-radius:5px; color:#ffffff;text-decoration: none; font-family: 'Acrylic Hand Sans',sans-serif;  padding: 4px 10px; display: inline-block; text-transform: uppercase; }
.homepage-map-info-more:focus,
.homepage-map-info-more:hover { text-decoration: none; color: #3b3b3a; background-color: transparent; }
.homepage-map-info-right { float: left; width: 40%; padding-left: 25px; }
.homepage-map-info .box-item { display: none; }
.homepage-map-info .box-item h2 { font-family: 'Acrylic Hand Sans',sans-serif; color: #0c5d36; font-size: 50px; display: inline-block; position: relative; }
.homepage-map-info .box-item.active { display: block; }
.homepage-map-info .box-item.default h2:after { content:""; position: absolute; width: 197px; height: 111px; display: block; right: 0; top: 0; margin-right: -109px; margin-top: -16px; background: url(map-arrow.png) no-repeat; }
.homepage-map-info-description { font-size: 16px; }

/* Interactive Map Section */
.interactive-map-section { position: absolute; right: 15px; top: 0; z-index: 1; max-width: 215px; }
.interactive-map-section-logo { margin-bottom: 30px; }
.interactive-map-section a { width: 100%; text-align: center; }
.homepage-map-interactive-button { margin-bottom: 10px; }
.map-getting-around-btn { padding-left: 15px; padding-right: 15px; }

/* Hover Map Regions */
.homepage-map-region-wrapper { float: right; position: relative; }
.homepage-map-region-text { color: #3b3b3a; font-weight:400;text-decoration: none; position: absolute; left: 0; top: 0; }
.homepage-map-region-text:hover { text-decoration: none; color: #0c5d36; }
.homepage-map-region-text.torres { margin-left: 45px; margin-top: 9px; }
.homepage-map-region-text.banks { margin-left: 2px; margin-top: 110px; }
.homepage-map-region-text.aneityum { margin-left: 309px; margin-top: 885px; }
.homepage-map-region-text.tanna { margin-left: 277px; margin-top: 802px; }
.homepage-map-region-text.erromango { margin-left: 205px; margin-top: 714px; }
.homepage-map-region-text.efate { margin-left: 67px; margin-top: 567px; }
.homepage-map-region-text.epi { margin-left: 255px; margin-top: 447px; }
.homepage-map-region-text.ambrym { margin-left: 230px; margin-top: 383px; }
.homepage-map-region-text.malekula { margin-left: 28px; margin-top: 399px; }
.homepage-map-region-text.espiritu { margin-left: 52px; margin-top: 206px; line-height: 1.3; }
.homepage-map-region-text.espiritu span { display: inline-block; padding-left: 30px; }
.homepage-map-region-text.maewo { margin-left: 220px; margin-top: 253px; }
.homepage-map-region-text.ambae { margin-left: 127px; margin-top: 308px; }
.homepage-map-region-text.pentecost { margin-left: 229px; margin-top: 320px; }

.homepage-map-region-wrapper .region-active { position: absolute; top: 0; left: 0; display: none; pointer-events: none; }
.homepage-map-region-wrapper .region-active.torres { margin-left: 17px; margin-top: 16px; }
.homepage-map-region-wrapper .region-active.banks { margin-left: 104px; margin-top: 69px; }
.homepage-map-region-wrapper .region-active.aneityum { margin-left: 395px; margin-top: 891px; }
.homepage-map-region-wrapper .region-active.tanna { margin-left: 334px; margin-top: 787px; }
.homepage-map-region-wrapper .region-active.erromango { margin-left: 306px; margin-top: 701px; }
.homepage-map-region-wrapper .region-active.efate { margin-left: 209px; margin-top: 551px; }
.homepage-map-region-wrapper .region-active.epi { margin-left: 204px; margin-top: 446px; }
.homepage-map-region-wrapper .region-active.ambrym { margin-left: 178px; margin-top: 388px; }
.homepage-map-region-wrapper .region-active.malekula { margin-left: 90px; margin-top: 360px; }
.homepage-map-region-wrapper .region-active.espiritu { margin-left: 14px; margin-top: 207px; }
.homepage-map-region-wrapper .region-active.maewo { margin-left: 195px; margin-top: 238px; }
.homepage-map-region-wrapper .region-active.ambae { margin-left: 151px; margin-top: 285px; }
.homepage-map-region-wrapper .region-active.pentecost { margin-left: 204px; margin-top: 308px; }

.mobile-map-markers { display: none; }
.mobile-map-markers ul { list-style: none; }
.mobile-map-markers li { display: inline-block; border: none;background:#0c5d36;color:#ffffff;border-radius:5px;font-family: 'Acrylic Hand Sans',sans-serif; text-transform: uppercase; margin-bottom: 10px; margin-right: 10px; padding: 2px 5px; cursor: pointer; }
.mobile-map-markers li.active { color: #3b3b3a; background-color: transparent; }
.map-region-mobile { display:none; text-align: center; }

/* Hover States */
.homepage-map-element a:hover + area + img { display: block; }
.homepage-map-element area:hover + img { display: block; }
.homepage-map-element img.active { display: block; }
.homepage-map-region-text.active { color: #0c5d36; }

/* Mobile States */
.mobile-travel-map { display: none; }

@media (max-width:1200px) and (min-width: 992px) {
	.region-info {max-width:70%;}
}

@media (max-width: 992px) {
	.homepage-map-info { margin-bottom: 30px; }
	.homepage-map-info .box-item.default h2:after { display: none; }
	.homepage-map-info-cover { width: 33.33333333%; }
	.homepage-map-info-right { width: 33.33333333%; }
	.interactive-map-section { max-width: 33.33333333%; }
}
@media (max-width: 991px) {
	.homepage-map { background-image: none !important; padding-bottom: 0; }
	.mobile-travel-map { display: block; }
	.homepage-map-info-cover { width: 50%; }
	.homepage-map-info-right { width: 50%; }
	.interactive-map-section { max-width: 215px; left: 15px; right: auto; margin-top: 970px; }
}
@media (max-width: 768px) {
	.interactive-map-section { margin: 30px auto; position: static; max-width: 330px; padding-left: 15px; padding-right: 15px; }
	.mobile-map-markers { display: block; }
	.map-region-mobile { display: block; }
	.homepage-map-region-wrapper { display: none; }
}
@media (max-width: 500px) {
	.homepage-map-info-cover { width: 100%; margin-bottom: 10px; }
	.homepage-map-info-right { width: 100%; padding-left: 0; }
}



/* Map as Component */
.article-map .homepage-map-info { padding-right: 20px; }
.article-map .homepage-map-info-cover { width: 100%; margin-bottom: 30px; }
.article-map .homepage-map-info-right { width: 100%; padding-left: 0; }
.article-map .homepage-map-info .box-item.default h2:after { display: none; }
.article-map .box_1_box_class .homepage-map-info-right { padding-right: 200px; background: url(map-arrow-20190813.png) no-repeat 100% 0; }

.map-legend { margin-top: 24px; }
.interactive-map-section.content { margin-top: 70px; }
.article-map-right .homepage-map-region-text { font-size: 19px; }
.article-map-right .homepage-map-region-wrapper { float: none; width: 677px; }

.article-map-right .homepage-map-region-text.torres { margin-left: -23px; margin-top: 57px; }
.article-map-right .homepage-map-region-text.banks { margin-left: 41px; margin-top: 146px; }
.article-map-right .homepage-map-region-text.espiritu { margin-left: -11px; margin-top: 451px; }
.article-map-right .homepage-map-region-text.maewo { margin-left: 298px; margin-top: 351px; }
.article-map-right .homepage-map-region-text.ambae { margin-left: 190px; margin-top: 376px; }
.article-map-right .homepage-map-region-text.pentecost { margin-left: 317px; margin-top: 470px; }
.article-map-right .homepage-map-region-text.malekula { margin-left: 127px; margin-top: 642px; }
.article-map-right .homepage-map-region-text.ambrym { margin-left: 332px; margin-top: 575px; }
.article-map-right .homepage-map-region-text.epi { margin-left: 360px; margin-top: 658px; }
.article-map-right .homepage-map-region-text.efate { margin-left: 224px; margin-top: 844px; font-size: 26px; }
.article-map-right .homepage-map-region-text.efate span { font-size: 19px; margin-left: 56px; position: relative; top: -34px; }
.article-map-right .homepage-map-region-text.erromango { margin-left: 511px; margin-top: 1036px; }
.article-map-right .homepage-map-region-text.tanna { margin-left: 414px; margin-top: 1155px; }
.article-map-right .homepage-map-region-text.aneityum { margin-left: 518px; margin-top: 1297px; }

.article-map-right .homepage-map-region-wrapper .region-active.torres { margin-left: 23px; margin-top: 22px; }
.article-map-right .homepage-map-region-wrapper .region-active.banks { margin-left: 149px; margin-top: 99px; }
.article-map-right .homepage-map-region-wrapper .region-active.espiritu { margin-left: 21px; margin-top: 297px; }
.article-map-right .homepage-map-region-wrapper .region-active.maewo { margin-left: 278px; margin-top: 340px; }
.article-map-right .homepage-map-region-wrapper .region-active.ambae { margin-left: 215px; margin-top: 407px; }
.article-map-right .homepage-map-region-wrapper .region-active.pentecost { margin-left: 291px; margin-top: 440px; }
.article-map-right .homepage-map-region-wrapper .region-active.malekula { margin-left: 128px; margin-top: 515px; }
.article-map-right .homepage-map-region-wrapper .region-active.ambrym { margin-left: 254px; margin-top: 555px; }
.article-map-right .homepage-map-region-wrapper .region-active.epi { margin-left: 291px; margin-top: 638px; }
.article-map-right .homepage-map-region-wrapper .region-active.efate { margin-left: 298px; margin-top: 788px; }
.article-map-right .homepage-map-region-wrapper .region-active.erromango { margin-left: 437px; margin-top: 1002px; }
.article-map-right .homepage-map-region-wrapper .region-active.tanna { margin-left: 477px; margin-top: 1126px; }
.article-map-right .homepage-map-region-wrapper .region-active.aneityum { margin-left: 565px; margin-top: 1274px; }

@media (max-width: 1199px) {
	.article-map .homepage-map-info { max-width: 460px; padding-right: 0; }
	.interactive-map-section.content { max-width: 215px; position: static; }
}
@media (max-width: 991px) {
	.article-map-right { margin-top: 50px; }
}
@media (max-width: 768px) {
	.article-map-right .homepage-map-region-wrapper { display: block; }
	.article-map-right .homepage-map-region-text.torres { margin-left: 47px; margin-top: 17px; }
}