.map-wrapper {
	position: relative;
    margin: 0 auto;	
}
.map-wrapper > .map-container {
    position: relative;
}

.map-container > svg a {
	display: block;
	pointer-events: all;
	transform: none;
}

.map-caption {
    /* position: absolute; */
    width: 100%;
    height: 100%;
    float: right;
    background: white;
}
.map-caption.active {
    display: block;
}

/* CAPTION POPUP STYLES */
.map-wrapper .slideWrapper {
    position: absolute;
    border: 1px solid #aebfc3;
    background: white;
    max-height: 525px;
    top: 50%;
    transform: translateY(-50%);
}
.map-wrapper .slideWrapper .slide .img-cont {
    aspect-ratio: 438 / 176;
}
.map-wrapper .slideWrapper .slides .slick-arrow:before {
	content: '';
}
.map-wrapper .slideWrapper .slides .slick-arrow {
	content: "";
    display: block;
    height: 58px;
	width: 37px;
	top: 13%;
    z-index: 9;
}
.map-wrapper .slideWrapper .slides .slick-prev {
    left: 15px;
    background: url(/includes/public/assets/arrows-slider-map-compressed.svg) no-repeat;
    transform: scaleX(-1);
}
.map-wrapper .slideWrapper .slides .slick-next {
    right: 15px;
    background: url(/includes/public/assets/arrows-slider-map-compressed.svg) no-repeat;
    transform: scaleX(1);
}
.map-wrapper .map-caption {
    background-color: #fff;
    max-width: 440px;
}
.map-wrapper .map-caption.active {
	display: block;
}
.map-wrapper .map-caption img {
    width: 100%;
}
.map-wrapper .map-caption .content {
	padding: 10px 50px;
}
.map-wrapper .map-caption .content h5 {
    display: block;
    color: #68717a;
    font-size: 40px;
    line-height: 40px;
    font-family: kepler-std,serif;
    font-style: italic;
    font-weight: 900;
}
.map-wrapper .map-caption .content p {
	font-size: 16px;
    line-height: 24px;
    color: #68717a;
	margin: 0;
}
.map-wrapper .map-caption .content p .arrow {
    display: inline-block;
    width: auto;
    margin-left: 10px;
}
.map-wrapper .map-caption .content .links {
	padding-top: 25px;
	padding-bottom: 15px;
}
.map-wrapper .map-caption .content .links a {
	display: block;
	font-size: 18px;
	line-height: 24px;
	letter-spacing: .01em;
	color: #338dbd;
	font-weight: bold;
}

.map-wrapper .map-caption a.more-link {
    display: flex;
    width: 165px;
    height: 50px;
    background: #1dcad3;
    border-radius: 5px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    text-transform: uppercase;
    color: white;
    font-size: 16px;
    font-family: Montserrat;
    font-weight: 700;
    margin-left: 28%;

}
.map-wrapper .map-caption button {
    position: absolute;
    top: -13px;
    right: -13px;
    background: transparent;
    border: 0;
}
.map-wrapper .map-caption button i.fas {
    font-family: FontAwesome;
    color: #13384c;
    font-size: 36px;
    font-style: normal;
}
.map-wrapper .map-caption .more-link i.fas {
    font-family: FontAwesome;
    color: #e0e622;
    font-weight: 900;
    margin-left: 8px;
    font-style: normal;
    font-size: 22px;
    margin-top: -3px;
}


.map-wrapper .pagerWrapper {
    display: flex;
    flex-direction: row;
}
.map-wrapper .pagerWrapper .page {
    display: flex;
    flex-basis: 25%;
    flex-grow: 0;
    flex-shrink: 0;
}

.map-wrapper .pagerWrapper .page button {
    border-radius: 20px;
    background-color: #EF5296;
    border: none;
    color: white;
    padding: 5px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 15px;
    margin: 2px 9px;
}
.map-wrapper .pagerWrapper .page button.disabled {
    pointer-events: none;;
}
.map-wrapper .pagerWrapper .page button i {
    font-family: FontAwesome;
    font-style: normal;
    font-size: 30px;
    font-weight: bold;
}


.map-wrapper .pagerWrapper .pager {
    display: flex;
    flex-basis: 64%;
    flex-grow: 0;
    flex-shrink: 0;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 16px;
    margin-right: 11px; 
}
.map-wrapper .pagerWrapper .pager .hozAccent {
    height: 10px;
    width: 70px;
    background: #c2c2c2;
    display: flex;
}
.map-wrapper .pagerWrapper .pager .hozAccent.active {
    background: #185a7d;
}



@media screen and (max-width: 1100px) {
	#crystal-coast-map {
		display: block;
	}
	#crystal-coast-map_1_ {
		display: none;
	}
	.mapSpacer {
		display: block;
		background: #c2e5ef;
		width: 100%;
		height: 540px;
	}
	.map-wrapper .slideWrapper {
		bottom: 1%;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		max-width: 440px;
        width: 100%;
        top: auto;	
	}
	.map-wrapper .map-caption .content {
		padding: 10px 15px;
    }
    .map-wrapper .map-caption .content h5 {
        font-size: 25px;
    }
    .map-wrapper .map-caption .content p {
        font-size: 14px;
        line-height: 22px;
    }
    .map-wrapper .map-caption .content .links {
        padding-top: 15px;
    }
    .map-wrapper .map-caption .content .links a {
        line-height: 30px;
    }
}
@media screen and (max-width: 440px) {
	.map-wrapper .slideWrapper {
		width: 90%;
		left: 55%;
		-webkit-transform: translateX(-55%);
		transform: translateX(-55%);
	}	
	.map-wrapper .slideWrapper .slides .slick-prev,
	.map-wrapper .slideWrapper .slides .slick-next {
		top: 9%;
	}
}
@media screen and (min-width: 1100px) {
    .map-wrapper .pagerWrapper {
        display: none;
	}
	.map-container {
		display: inline-flex;
		width: 100%;
		padding-bottom: 25px;
		background: #C2E5EF;
	}
	#crystal-coast-map {
		display: none;
	}
	#crystal-coast-map_1_ {
		display: inline-block;
		width: 80%;
        height: 100%;
		background: #c2e5ef;
	}
	.mapSpacer {
		display: inline-block;
		background: #c2e5ef;
		width: 20%;
		float: right;
		height: inherit;
	}
	.map-wrapper .slideWrapper {
        left: 62%;
        top: 50%;
        height: 93%;
	}
	.map-wrapper .slideWrapper .slides {
		background-color: #fff;
		max-width: 440px;
		border: 1px solid #aebfc3;
        height: 100%;
        max-height: 640px;;
	}
	.map-wrapper .map-caption .content {
		padding: 10px 15px;
	}
	.map-wrapper .map-caption .content h5 {
        font-size: 30px;
        margin: 0;
	}
	.map-wrapper .map-caption .content p {
		line-height: 20px;
	}
	.map-wrapper .map-caption .content .links {
		padding-top: 0;
	}
	@media screen and (min-width: 1300px) {
		.map-wrapper .map-caption .content {
			padding: 10px 50px;
		}
		.map-wrapper .map-caption .content h5 {
            font-size: 40px;
            margin-top: 5px;
            margin-bottom: 10px;
		}
		.map-wrapper .map-caption .content p {
			line-height: 24px;
		}
		.map-wrapper .map-caption .content .links {
			padding-top: 25px;
		}
	}
}
.slick-list {
    height: 100%;
}
.slick-track {
    height: 100%;
}

/* small map */
/* #crystal-coast .st0{clip-path:url(#SVGID_2_);} */
/* #crystal-coast-map .st1{fill:#F9F3EA;stroke:#EADFD0;stroke-miterlimit:10;}
#crystal-coast-map .st2{fill-rule:evenodd;clip-rule:evenodd;fill:#E0E1E0;}
#crystal-coast-map .st3{fill-rule:evenodd;clip-rule:evenodd;fill:#C2E5EF;}
#crystal-coast-map .st4{fill:none;stroke:#7FC5FF;stroke-width:0.75;stroke-linejoin:round;stroke-miterlimit:10;}
#crystal-coast-map .st5{fill:none;stroke:#D0D6D8;stroke-width:0.75;stroke-linejoin:round;stroke-miterlimit:10;}
#crystal-coast-map .st6{fill:none;stroke:#FFD37F;stroke-width:1.5;stroke-miterlimit:10;}
#crystal-coast-map .st7{fill:none;stroke:#FF9A42;stroke-width:3.75;stroke-miterlimit:10;}
#crystal-coast-map .st8{fill:#FFFFFF;}
#crystal-coast-map .st9{fill:none;stroke:#68717A;stroke-miterlimit:10;}
#crystal-coast-map .st10{fill:#68717A;}
#crystal-coast-map .st11{fill:none;stroke:#68717A;stroke-width:0.6;stroke-miterlimit:10;}
#crystal-coast-map .st12{fill:#4E4E4E;}
#crystal-coast-map .st13{fill:#343434;}
#crystal-coast-map .st14{opacity:0.5;}
#crystal-coast-map .st15{fill:#918681;}
#crystal-coast-map .st16{fill:#776D69;}
#crystal-coast-map .st17{fill:#338DBD;}
#crystal-coast-map .st18{fill:none;stroke:#4D4D4D;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
#crystal-coast-map .st19{fill:#C2E5EF;}
#crystal-coast-map .st20{fill:#4D4D4D;}
#crystal-coast-map .st21{fill:#3F79A7;}
#crystal-coast-map .st22{opacity:0.6;}
#crystal-coast-map .st23{opacity:0.8;}
#crystal-coast-map .st24{display:none;}
#crystal-coast-map .st25{display:inline;}
#crystal-coast-map .st26{display:inline;fill:#FFFFFF;}
#crystal-coast-map .st27{display:inline;fill:#F48678;stroke:#C96E67;stroke-miterlimit:10;}
#crystal-coast-map .st28{fill:#F48678;stroke:#C96E67;stroke-miterlimit:10;} */

/* large map */
/* #crystal-coast-map_1_ .st0{clip-path:url(#mask_1_);} */
/* #crystal-coast-map_1_ .st1{fill:#F9F3EA;stroke:#EADFD0;stroke-miterlimit:10;}
#crystal-coast-map_1_ .st2{fill-rule:evenodd;clip-rule:evenodd;fill:#E0E1E0;}
#crystal-coast-map_1_ .st3{fill-rule:evenodd;clip-rule:evenodd;fill:#C2E5EF;}
#crystal-coast-map_1_ .st4{fill:none;stroke:#7FC5FF;stroke-width:0.75;stroke-linejoin:round;stroke-miterlimit:10;}
#crystal-coast-map_1_ .st5{fill:none;stroke:#D0D6D8;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:10;}
#crystal-coast-map_1_ .st6{fill:none;stroke:#FFD37F;stroke-width:2.5;stroke-miterlimit:10;}
#crystal-coast-map_1_ .st7{fill:none;stroke:#FF9A42;stroke-width:3.75;stroke-miterlimit:10;}
#crystal-coast-map_1_ .st8{fill:#FFFFFF;stroke:#68717A;stroke-width:1.5;stroke-miterlimit:10;}
#crystal-coast-map_1_ .st9{fill:#68717A;}
#crystal-coast-map_1_ .st10{opacity:0.5;}
#crystal-coast-map_1_ .st11{fill:none;stroke:#4D4D4D;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
#crystal-coast-map_1_ .st12{fill:#338DBD;}
#crystal-coast-map_1_ .st13{fill:#C2E5EF;}
#crystal-coast-map_1_ .st14{display:none;}
#crystal-coast-map_1_ .st15{display:inline;fill:#4D4D4D;}
#crystal-coast-map_1_ .st16{display:inline;fill:#3F79A7;}
#crystal-coast-map_1_ .st17{fill:#FFFFFF;}
#crystal-coast-map_1_ .st18{fill:#3F79A7;}
#crystal-coast-map_1_ .st19{opacity:0.6;fill:#524949;}
#crystal-coast-map_1_ .st20{fill:#FFFFFF;}
#crystal-coast-map_1_ .st21{fill:#524949;}
#crystal-coast-map_1_ .st22{fill:none;stroke:#68717A;stroke-miterlimit:10;}
#crystal-coast-map_1_ .st23{fill:#4E4E4E;}
#crystal-coast-map_1_ .st24{fill:#343434;}
#crystal-coast-map_1_ .st25{opacity:0.8;}
#crystal-coast-map_1_ .st26{fill:#776D69;}
#crystal-coast-map_1_ .st27{display:inline;}
#crystal-coast-map_1_ .st28{fill:#F48678;stroke:#C96E67;stroke-width:2;stroke-miterlimit:10;}
#crystal-coast-map_1_ .st29{display:inline;fill:#FFFFFF;}
#crystal-coast-map_1_ .st30{display:inline;fill:#F48678;stroke:#C96E67;stroke-width:2;stroke-miterlimit:10;}
#crystal-coast-map_1_ .st31{display:none;opacity:0.8;}
#crystal-coast-map_1_ .st32{display:inline;fill:#918681;} */

#crystal-coast-map_1_1 .CrystalCoastLogo .st17 {fill: #08493E; }

.poi {
    cursor: pointer;
}

/* mobile active */
#cape-carteret.active #cape-carteret-default {
	display: none;
}
#cape-carteret.active #cape-carteret-active {
	display: inline;
}

#emerald-isle.active #emerald-isle-default {
	display: none;
}
#emerald-isle.active #emerald-isle-active {
	display: inline;
}

#indian-beach.active #indian-beach-default {
	display: none;
}
#indian-beach.active #indian-beach-active {
	display: inline;
}

#salter-path.active #salter-path-default {
	display: none;
}
#salter-path.active #salter-path-active {
	display: inline;
}

#newport.active #newport-default {
	display: none;
}
#newport.active #newport-default_1_ {
	display: inline;
}

#atlantic-beach.active #atlantic-beach-default {
	display: none;
}
#atlantic-beach.active #atlantic-beach-active {
	display: inline;
}

#pine-knoll-shores.active #pine-knoll-shores-default {
	display: none;
}
#pine-knoll-shores.active #pine-knoll-shores-active {
	display: inline;
}

#morehead-city.active #morehead-city-default {
	display: none;
}
#morehead-city.active #morehead-city-active {
	display: inline;
}

#beaufort.active #beaufort-default {
	display: none;
}
#beaufort.active #beaufort-active {
	display: inline;
}

#down-east.active #down-east-default {
	display: none;
}
#down-east.active #down-east-active {
	display: inline;
}

#harkers-island.active #harkers-island-default {
	display: none;
}
#harkers-island.active #harkers-island-active {
	display: inline;
}

#cape-lookout.active #cape-lookout-default {
	display: none;
}
#cape-lookout.active #cape-lookout-active {
	display: inline;
}

/* desktop hover */

#cape-carteret.active #cape-carteret-default {
	display: none;
}

#cape-carteret.active #cape-carteret-active {
    display: inline;
}


#emerald-isle.active #emerald-isle-default {
	display: none;
}

#emerald-isle.active #emerald-isle-active {
	display: inline;
}


#indian-beach.active #indian-beach-default {
	display: none;
}

#indian-beach.active #indian-beach-active {
	display: inline;
}


#salter-path.active #salter-path-default {
	display: none;
}

#salter-path.active #salter-path-active {
	display: inline;
}


#newport.active #newport-default {
	display: none;
}

#newport.active #newport-active {
	display: inline;
}


#atlantic-beach.active #atlantic-beach-default {
	display: none;
}

#atlantic-beach.active #atlantic-beach-active {
	display: inline;
}


#pine-knoll-shores.active #pine-knoll-shores-default {
	display: none;
}

#pine-knoll-shores.active #pine-knoll-shores-active {
	display: inline;
}


#morehead-city.active #morehead-city-default {
	display: none;
}

#morehead-city.active #morehead-city-active {
	display: inline;
}


#beaufort.active #beaufort-default {
	display: none;
}

#beaufort.active #beaufort-active {
	display: inline;
}


#down-east.active #down-east-default {
	display: none;
}

#down-east.active #down-east-active {
	display: inline;
}


#harkers-island.active #harkers-island-default {
	display: none;
}

#harkers-island.active #harkers-island-active {
	display: inline;
}


#cape-lookout.active #cape-lookout-default {
	display: none;
}

#cape-lookout.active #cape-lookout-active {
	display: inline;
}



#cape-carteret rect.hitbox {
    fill: transparent;
    x: 92;
    y: 253;
    height: 88px;
    width: 86px;	
}
#emerald-isle rect.hitbox {
    fill: transparent;
	x: 209;
    y: 253;
    height: 106px;
    width: 69px;	
}
#salter-path rect.hitbox {
    fill: transparent;
	x: 345;
    y: 228;
    height: 66px;
    width: 52px;	
}
#indian-beach rect.hitbox {
    fill: transparent;
    x: 307;
    y: 276;
    height: 67px;
    width: 40px;
}
#indian-beach rect.hitbox2 {
	fill: transparent;
    x: 346;
    y: 311;
    height: 32px;
    width: 15px;
}
#salter-path rect.hitbox {
    fill: transparent;
    x: 345;
    y: 227;
    height: 67px;
    width: 49px;
}
#newport rect.hitbox {
    fill: transparent;
	x: 349;
    y: 107;
    height: 46px;
    width: 73px;
}
#pine-knoll-shores rect.hitbox {
    fill: transparent;
    x: 420;
    y: 253;
    height: 71px;
    width: 86px;
}
#morehead-city rect.hitbox {
    fill: transparent;
    x: 532;
    y: 170;
    height: 67px;
    width: 87px;
}
#atlantic-beach rect.hitbox {
    fill: transparent;
	x: 540;
    y: 237;
    height: 85px;
    width: 71px;
}
#beaufort rect.hitbox {
    fill: transparent;
	x: 645;
    y: 226;
    height: 46px;
    width: 73px;
}
#down-east rect.hitbox {
    fill: transparent;
	x: 744;
    y: 157;
    height: 43px;
    width: 91px;
}
#harkers-island rect.hitbox {
	fill: transparent;
    x: 746;
    y: 252;
    height: 65px;
    width: 66px;
}
#cape-lookout rect.hitbox {
	fill: transparent;
    x: 667;
    y: 399;
    height: 27px;
    width: 169px;
}


@media (min-width: 64em) {

    #cape-carteret:hover #cape-carteret-default,
    #emerald-isle:hover #emerald-isle-default,
    #indian-beach:hover #indian-beach-default,
    #salter-path:hover #salter-path-default,
    #newport:hover #newport-default,
    #atlantic-beach:hover #atlantic-beach-default,
    #pine-knoll-shores:hover #pine-knoll-shores-default,
    #morehead-city:hover #morehead-city-default,
    #beaufort:hover #beaufort-default,
    #down-east:hover #down-east-default,
    #harkers-island:hover #harkers-island-default,
    #cape-lookout:hover #cape-lookout-default {
        display: none;
    }

    #cape-carteret:hover #cape-carteret-active,
    #emerald-isle:hover #emerald-isle-active,
    #indian-beach:hover #indian-beach-active,
    #salter-path:hover #salter-path-active,
    #newport:hover #newport-active,
    #atlantic-beach:hover #atlantic-beach-active,
    #pine-knoll-shores:hover #pine-knoll-shores-active,
    #morehead-city:hover #morehead-city-active,
    #beaufort:hover #beaufort-active,
    #down-east:hover #down-east-active,
    #harkers-island:hover #harkers-island-active,
    #cape-lookout:hover #cape-lookout-active {
        display: inline;
    }
}

.map-container .maps {
    position: relative;
    width: 100%;
    height: 100%;
}

#logo {
    position: absolute;
    bottom: 25px;
    left: 107px;
    max-width: 25%;
}