/********************* Region Map *********************/
.regionMap .row {max-width: 67.5rem;}
.regionMap { position: relative; margin-bottom: 85px !important; }
.regionMap .mapHead {}
.regionMap .mapHead .logo {
	background-image: url(/includes/public/assets/images/regionmap/sprite-map.png);
	background-repeat: no-repeat;
	position: relative;
	z-index: 10;
}
.regionMap .mapCont{
	background: #f8f5f1 url(/includes/public/assets/images/regionmap/map-bg-pattern.png) repeat 0 0;
	height: 373px;
	position: relative;
	border: 1px solid #e1d9ce;
}
.regionMap .landCont {
	background-image: url(/includes/public/assets/images/regionmap/mapoverlay-mobile.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 640px 373px;
	height: 373px;
	width: auto;
	position: relative;
}
.regionMap .landCont .row {position: relative; height: 373px;}
.regionMap .btnHolder {
	position: relative;
	width: 320px;
	height: 373px;
	margin: auto;
}
.regionMap .regionArea.active { cursor: default;}

/* 
	"Speech Bubble" tails from: https://codepen.io/MarkBoots/pen/RwLPXgJ
*/
.regionMap .regionButton {
	--bbColor: #e4b53a;
	--bbArrowSize: 1.5rem;
	--bbBorderRadius: 0.25rem;
	--bbPadding: 1rem;
	background-color: #e4b53a;
	height: 25px;
	line-height: 1.563rem;
	width: auto;
	padding: 0 0.625rem;
	display: inline-block;
	min-width: 80px;
	font-family: 'open-sans', sans-serif;
	text-align: center;
	font-size: 0.750rem;
	color: #fff;
	text-transform: uppercase;
	position: absolute;
	cursor: pointer;
}

.regionMap .regionButton, .regionMap .regionButton * { box-sizing: border-box }

.regionMap .regionButton::before{
  content: ''; 
  position: absolute;
  background: var(--bbColor);
}

.regionMap .regionButton[pbottom]{ margin-bottom: var(--bbArrowSize) }
.regionMap .regionButton[ptop]   { margin-top: var(--bbArrowSize); }
.regionMap .regionButton[pleft]  { margin-left: var(--bbArrowSize); }
.regionMap .regionButton[pright] { margin-right: var(--bbArrowSize); }

/*
	ptop: 4,6,7,12,15
	pbottom: 9,10,13,14,16
	aleft: 4,6
	aright:
	flip: 4
	
	pright: 5,8,11
	atop: 8 
*/

/* bottom and top  */
.regionMap .regionButton[pbottom]::before,
.regionMap .regionButton[ptop]::before {
  --width: calc(var(--bbArrowSize) / 2 * 3);
  height: var(--bbArrowSize);
  width: var(--width);
}

/* bottom */
.regionMap .regionButton[pbottom]::before {
  top: calc(100% - 2px);
}
.regionMap .regionButton[pbottom][aleft]::before {
  left: 1rem;
  clip-path: polygon(25% 0, 100% 0, 0% 100%)
}
.regionMap .regionButton[pbottom][acenter]::before {
  left: calc(50% - var(--width) / 2);
  clip-path: polygon(12.5% 0, 87.5% 0, 50% 100%)
}
.regionMap .regionButton[pbottom][aright]::before{
  right: 1rem;
  clip-path: polygon(0 0, 75% 0, 100% 100%)
}

/* top */
.regionMap .regionButton[ptop]::before{
  bottom: calc(100% - 2px);
}
.regionMap .regionButton[ptop][aleft]::before{
  left: var(--bbPadding);
  clip-path: polygon(0 0, 100% 100%, 25% 100%)
}
.regionMap .regionButton[ptop][acenter]::before{
  left: calc(50% - var(--width) / 2);
  clip-path: polygon(12.5% 100%, 50% 0, 87.5% 100%)
}
.regionMap .regionButton[ptop][aright]::before{
  right: var(--bbPadding);
  clip-path: polygon(0 100%, 100% 0, 75% 100%)
}

/* left and right  */
.regionMap .regionButton[pleft]::before,
.regionMap .regionButton[pright]::before{
  --height: calc(var(--bbArrowSize) / 2 * 3);
  width: var(--bbArrowSize);
  height: var(--height);
}

/* right */
.regionMap .regionButton[pright]::before{
  left: calc(100% - 2px);
}
.regionMap .regionButton[pright][atop]::before{
  top: var(--bbPadding);
  clip-path: polygon(100% 0, 0 100%, 0 25%)
}
.regionMap .regionButton[pright][acenter]::before{
  top: calc(50% - var(--height) / 2);
  clip-path: polygon(0 12.5%, 100% 50%, 0 87.5%)
}
.regionMap .regionButton[pright][abottom]::before{
  bottom: -7px;
  clip-path: polygon(0 0, 100% 100%, 0 75%)
}

/* left */
.regionMap .regionButton[pleft]::before{
  right: calc(100% - 2px);
}
.regionMap .regionButton[pleft][atop]::before{
  top: var(--bbPadding);
  clip-path: polygon(0 0, 100% 25%, 100% 100%)
}
.regionMap .regionButton[pleft][acenter]::before{
  top: calc(50% - var(--height) / 2);
  clip-path: polygon(0 50%, 100% 12.5%, 100% 87.5%);
}
.regionMap .regionButton[pleft][abottom]::before{
  bottom: var(--bbPadding);
  clip-path: polygon(0 100%, 100% 0, 100% 75%)
}

/* flip */
.regionMap .regionButton[pbottom][flip]::before,
.regionMap .regionButton[ptop][flip]::before{
  transform: scaleX(-1)
}
.regionMap .regionButton[pleft][flip]::before,
.regionMap .regionButton[pright][flip]::before{
  transform: scaleY(-1)
}

.regionMap .regionButton .btnTail {
	display: block;
	position: absolute;
	background-image: url(/includes/public/assets/images/regionmap/sprite-map.png);
	background-repeat: no-repeat;
	top: 24px;
}

.regionMap .regionCircle {
	position: absolute;
	background-color: #e4b53a;
	height: 20px;
	width: 20px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	cursor: pointer;
}

.regionMap .regionArea.active .regionButton,  
.regionMap .regionArea.active .regionCircle { 
	cursor: default;
}

/* POPUP/INFO WINDOW */
.regionMap .popupHolder {
	width: 100%;
	height: auto;
	z-index: 11;
}

.regionMap .regionPopup {   
	height: auto;   
	text-align: left;
	position: relative;
	display: none;

}
.regionMap .regionPopup.active { 
	display: inline-block; 
}
.regionMap .regionPopup .regionCont {
	background-color: #fff;
	border: 1px solid #e1d9cf;
}
.regionMap .regionPopup img { 
	border: 1px solid #baaea0;
}
.regionMap .regionPopup .contentArea h3 {
	color: #ff0000;
	font-size: 24px;
	font-family: 'montserrat', sans-serif;
	font-weight: 600;
	line-height: 27px;
	margin-bottom: 5px;
	text-transform: uppercase;
}
.regionMap .regionPopup .contentArea p, 
.regionMap .regionPopup .contentArea a { 
	font-size: 0.875rem; 
	line-height: 1.125rem; 
	color: #7f8085;
}
.regionMap .regionPopup .contentArea a { color: #de1d29; }
.regionMap .regionPopup .closeButton {
	background-color: #de1d29;  
	width: 31px;
	height: 30px;
	position: absolute;
	top: 0;
	right: 0;
	cursor: pointer;
}
.regionMap .regionPopup .closeButton:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%; 
	margin-left: -7px;
	margin-top: -7px;
	width: 14px;
	height: 14px;
	background-image: url(/includes/public/assets/images/regionmap/sprite-map.png);
	background-repeat: no-repeat;
	background-position: -191px -93px;
}
.regionMap .regionPopup .btmDeco { height: 10px; width: auto;}

/*Position One is About Ft Worth and Not shown*/
.regionMap .regionArea.pos1  { display: none;}
.regionMap .regionPopup .btmDeco { background-color: #e4b53a;}

/* TMS / Alliance -- Position 2; no 'tail' */
.regionMap .regionArea.pos2 .regionButton { 
	top: 29px; 
	right: 72px;
}

.regionMap .regionArea.pos2 .btnTail { display: none;}
.regionMap .regionArea.pos2 .regionCircle {
	width: 24px;
	height: 24px;
	-webkit-border-radius: 12px;
	border-radius: 12px;
	top: 4px;
	right: 109px;
}
.regionMap .regionArea.pos2 .regionCircle:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%; 
	margin-left: -7px;
	margin-top: -6.5px;
	width: 14px;
	height: 13px;
	background-image: url(/includes/public/assets/images/regionmap/sprite-map.png);
	background-repeat: no-repeat;
	background-position: -526px -93px;
}
.regionMap .regionArea.pos2:hover > div,
.regionMap .regionArea.pos2.active > div,
.regionMap .regionPopup.pos2 .btmDeco  {background-color: #45555e;}

/* DFW Intl. Airport -- Position 3; no 'tail' */
.regionMap .regionArea.pos3 .regionButton { 
	top: 72px; 
	right: -34px;
}
.regionMap .regionArea.pos3 .btnTail { display: none; }
.regionMap .regionArea.pos3 .regionCircle {
	width: 24px;
	height: 24px;
	-webkit-border-radius: 12px;
	border-radius: 12px;
	top: 43px;
	right: 37px;
}
.regionMap .regionArea.pos3 .regionCircle:after {
	content: "";
	position: absolute;
	top: 48%;
	left: 50%; 
	margin-left: -6px;
	margin-top: -6px;
	width: 12px;
	height: 12px;
	background-image: url(/includes/public/assets/images/regionmap/sprite-map.png);
	background-repeat: no-repeat;
	background-position: -418px -93px;
}
.regionMap .regionArea.pos3:hover > div,
.regionMap .regionArea.pos3.active > div,
.regionMap .regionPopup.pos3 .btmDeco {background-color: #737373;}

/* Downtown  -- Position 4 */
.regionMap .regionArea.pos4 .regionButton { 
	top: 195px; 
	right: -8px; 
	height: 29px; 
	max-width: 127px; 
	line-height: 0.775rem; 
	padding-top: 3px;
}

.regionMap .regionArea.pos4 .regionCircle {
	width: 33px;
	height: 33px;
	-webkit-border-radius: 16.5px;
	border-radius: 16.5px;
	top: 169px;
	right: 107px;
}
.regionMap .regionArea.pos4 .regionCircle:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%; 
	margin-left: -12px;
	margin-top: -11px;
	width: 23px;
	height: 21px;
	background-image: url(/includes/public/assets/images/regionmap/sprite-map.png);
	background-repeat: no-repeat;
	background-position: -132px -93px;
}
.regionMap .regionArea.pos4:hover > div,
.regionMap .regionArea.pos4.active > div,
.regionMap .regionPopup.pos4 .btmDeco,
.regionMap .pos4:hover .regionButton::before, 
.regionMap .pos4:hover .regionButton::after {
	background-color: #c99e37;
}

/* Near Southside -- Position 5 */
.regionMap .regionArea.pos5 .regionButton { 
	top: 249px; 
	right: 73px;
}
.regionMap .regionArea.pos5 .regionButton .btnTail {
	background-position: 0px -60px;
	width: 15px;
	height: 10px;
	left: -12px;
	top: -2px;
	transform: rotateZ(90deg);
}
.regionMap .regionArea.pos5 .regionCircle {  bottom: 116px; right: 120px;}

.regionMap .regionArea.pos5:hover > div,
.regionMap .regionArea.pos5.active > div,
.regionMap .regionArea.pos5:hover .regionButton::before,
.regionMap .regionArea.pos5.active .regionButton::before,
.regionMap .regionPopup.pos5 .btmDeco { background-color: #8bbf67;}

.regionMap .regionArea.pos5:hover .regionButton .btnTail, 
.regionMap .regionArea.pos5.active .regionButton .btnTail { background-position: -435px -93px;}

/* TCU / Zoo -- Position 6 */
.regionMap .regionArea.pos6 .regionButton {
	bottom: 7px;
	left: 75px;
}
.regionMap .regionArea.pos6 .regionButton .btnTail {
	background-position: -210px -93px;
	width: 10px;
	height: 14px;
	right: 20px;
	top: -14px;
}
.regionMap .regionArea.pos6 .regionCircle { 
	bottom: 52px; 
	left: 132px;
}
.regionMap .regionArea.pos6:hover > div,
.regionMap .regionArea.pos6.active > div,
.regionMap .regionArea.pos6:hover .regionButton::before,
.regionMap .regionArea.pos6.active .regionButton::before,
.regionMap .regionPopup.pos6 .btmDeco { 
	background-color: #524f85;
}
.regionMap .regionArea.pos6:hover .regionButton .btnTail, 
.regionMap .regionArea.pos6.active .regionButton .btnTail { 
	background-position: -358px -117px;
}

/* Camp Bowie -- Position 7 */
.regionMap .regionArea.pos7 .regionButton {
	bottom: 89px;
	left: 3px;
}
.regionMap .regionArea.pos7 .regionButton .btnTail {
	background-position: -479px -119px;
	width: 14px;
	height: 11px;
	top: -10px;
	left: 18px;
}
.regionMap .regionArea.pos7 .regionCircle { 
	bottom: 126px; 
	left: 74px;
}
.regionMap .regionArea.pos7:hover > div,
.regionMap .regionArea.pos7.active > div,
.regionMap .regionArea.pos7:hover .regionButton::before,
.regionMap .regionArea.pos7.active .regionButton::before,
.regionMap .regionPopup.pos7 .btmDeco { 
	background-color: #922d22;
}
.regionMap .regionArea.pos7:hover .regionButton .btnTail, 
.regionMap .regionArea.pos7.active .regionButton .btnTail { 
	background-position: -498px -119px;
}

/* Cultural District -- Position 8 */
.regionMap .regionArea.pos8 .regionButton { 
	top: 198px; 
	left: -22px;
}
.regionMap .regionArea.pos8 .regionButton .btnTail {
	background-position: -308px -93px;
	width: 12px;
	height: 13px;
	right: -6px;
	top: 6px;
	transform: rotate(45deg);
}
.regionMap .regionArea.pos8 .regionCircle { 
	bottom: 150px; 
	left: 124px;
}
.regionMap .regionArea.pos8:hover > div,
.regionMap .regionArea.pos8.active > div,
.regionMap .regionArea.pos8:hover .regionButton::before,
.regionMap .regionArea.pos8.active .regionButton::before,
.regionMap .regionPopup.pos8 .btmDeco { 
	background-color: #68c3c0;
}
.regionMap .regionArea.pos8:hover .regionButton .btnTail, 
.regionMap .regionArea.pos8.active .regionButton .btnTail { 
	background-position: -399px -93px;
}

/* West 7th -- Position 9 */
.regionMap .regionArea.pos9 .regionButton { 
	top: 171px; 
	left: 44px;
}

.regionMap .regionArea.pos9 .regionButton .btnTail {
	background-position: 0 -29px;
	width: 11px;
	height: 9px;
	right: -6px;
	top: 8px;
	transform: rotate(45deg);
}
.regionMap .regionArea.pos9 .regionCircle { 
	bottom: 175px; 
	left: 145px;
}
.regionMap .regionArea.pos9:hover > div,
.regionMap .regionArea.pos9.active > div,
.regionMap .regionArea.pos9:hover .regionButton::before,
.regionMap .regionArea.pos9.active .regionButton::before,
.regionMap .regionPopup.pos9 .btmDeco { 
	background-color: #98cbf5;
}
.regionMap .regionArea.pos9:hover .regionButton .btnTail, 
.regionMap .regionArea.pos9.active .regionButton .btnTail { 
	background-position: -463px -93px; 
}

/* Stockyards -- Position 10 */
.regionMap .regionArea.pos10 .regionButton { 
	margin-bottom: var(--bbArrowSize);
	top: 56px;
	left: 90px;
}

.regionMap .regionArea.pos10 .regionCircle { 
	top: 88px; 
	left: 163px;
}
.regionMap .regionArea.pos10:hover > div,
.regionMap .regionArea.pos10.active > div,
.regionMap .regionArea.pos10:hover .regionButton::before,
.regionMap .regionArea.pos10.active .regionButton::before,
.regionMap .regionPopup.pos10 .btmDeco { 
	background-color: #de1d29;
}
.regionMap .regionArea.pos10:hover .regionButton .btnTail,
.regionMap .regionArea.pos10.active .regionButton .btnTail { 
	background-position: 0 -121px;
}

/* Panther Island -- Position 11 */
.regionMap .regionArea.pos11 .regionButton { 
	top: 135px; 
	left: 38px;
}
.regionMap .regionArea.pos11 .regionButton .btnTail {
	background-position: -526px -111px;
	width: 12px;
	height: 17px;
	right: -5px;
	top: 5px;
	transform: rotate(45deg);
}
.regionMap .regionArea.pos11 .regionCircle { 
	top: 139px; 
	right: 130px;
}
.regionMap .regionArea.pos11:hover > div,
.regionMap .regionArea.pos11.active > div,
.regionMap .regionArea.pos11:hover .regionButton::before,
.regionMap .regionArea.pos11.active .regionButton::before,
.regionMap .regionPopup.pos11 .btmDeco { 
	background-color: #f15a29; 
}
.regionMap .regionArea.pos11:hover .regionButton .btnTail, 
.regionMap .regionArea.pos11.active .regionButton .btnTail { 
	background-position: -308px -93px;
}

/* Clearkfork -- Position 12 */
.regionMap .regionArea.pos12 .regionButton { bottom: 30px; left: -10px; }
.regionMap .regionArea.pos12 .regionButton .btnTail {
	background-position: -479px -119px;
	width: 14px;
	height: 11px;
	top: -10px;
	left: 60px;
	transform: rotateY(0deg);
}
.regionMap .regionArea.pos12 .regionCircle { bottom: 65px; left: 59px; }
.regionMap .regionArea.pos12:hover > div,
.regionMap .regionArea.pos12.active > div,
.regionMap .regionArea.pos12:hover .regionButton::before,
.regionMap .regionArea.pos12.active .regionButton::before,
.regionMap .regionPopup.pos12 .btmDeco { background-color: #922d22;}
.regionMap .regionArea.pos12:hover .regionButton .btnTail, .regionMap .regionArea.pos12.active .regionButton .btnTail { background-position: -498px -119px; }

/* Riverside District -- Position 13 */
.regionMap .regionArea.pos13 .regionButton { 
	top: 101px; 
	right: -8px;
}
.regionMap .regionArea.pos13 .regionButton .btnTail {
	background-position: -479px -119px;
	width: 14px;
	height: 11px;
	top: 23px;
	left: 12px;
	transform: rotateZ(258deg);
}
.regionMap .regionArea.pos13 .regionCircle { 
	top: 138px; 
	right: 50px;
}
.regionMap .regionArea.pos13:hover > div,
.regionMap .regionArea.pos13.active > div,
.regionMap .regionArea.pos13:hover .regionButton::before,
.regionMap .regionArea.pos13.active .regionButton::before,
.regionMap .regionPopup.pos13 .btmDeco { 
	background-color: #922d22;
}
.regionMap .regionArea.pos13:hover .regionButton .btnTail, 
.regionMap .regionArea.pos13.active .regionButton .btnTail { 
	background-position: -498px -119px; 
}

/* East Fort Worth -- Position 14 */
.regionMap .regionArea.pos14 .regionButton { 
	top: 160px; 
	right: -32px;
}
.regionMap .regionArea.pos14 .regionButton .btnTail {
	background-position: -479px -119px;
	width: 14px;
	height: 11px;
	top: 20px;
	left: 34px;
	transform: rotate(38deg);
}
.regionMap .regionArea.pos14 .regionCircle { 
	top: 188px; 
	right: 17px;
}
.regionMap .regionArea.pos14:hover > div,
.regionMap .regionArea.pos14.active > div,
.regionMap .regionArea.pos14:hover .regionButton::before,
.regionMap .regionArea.pos14.active .regionButton::before,
.regionMap .regionPopup.pos14 .btmDeco { 
	background-color: #922d22;
}
.regionMap .regionArea.pos14:hover .regionButton .btnTail, 
.regionMap .regionArea.pos14.active .regionButton .btnTail { 
	background-position: -498px -119px; 
}

/* Southside Fort Worth & Historic District -- Position 15 */
.regionMap .regionArea.pos15 .regionButton { 
	top: 305px; 
	right: -4px;
	max-width: 160px;
	height: 38px;
	line-height: 1.125rem;
}
.regionMap .regionArea.pos15 .regionButton .btnTail {
	background-position: -479px -119px;
	width: 14px;
	height: 11px;
	top: -11px;
	right: 60px;
	transform: rotateY(180deg);
}
.regionMap .regionArea.pos15 .regionCircle { 
	top: 291px; 
	right: 44px;
}
.regionMap .regionArea.pos15:hover > div,
.regionMap .regionArea.pos15.active > div,
.regionMap .regionArea.pos15:hover .regionButton::before,
.regionMap .regionArea.pos15.active .regionButton::before,
.regionMap .regionPopup.pos15 .btmDeco { 
	background-color: #922d22;
}
.regionMap .regionArea.pos15:hover .regionButton .btnTail, 
.regionMap .regionArea.pos15.active .regionButton .btnTail { 
	background-position: -498px -119px; 
}

/* Northside -- Position 16 */
.regionMap .regionArea.pos16 .regionButton { 
	top: 102px; 
	left: 30px;
}
.regionMap .regionArea.pos16 .regionButton .btnTail {
	background-position: -479px -119px;
	width: 14px;
	height: 11px;
	top: 1px;
	left: 77px;
	transform: rotateZ(60deg);
}
.regionMap .regionArea.pos16 .regionCircle { 
	top: 105px; 
	left: 136px;
}
.regionMap .regionArea.pos16:hover > div,
.regionMap .regionArea.pos16.active > div,
.regionMap .regionArea.pos16:hover .regionButton::before,
.regionMap .regionArea.pos16.active .regionButton::before,
.regionMap .regionPopup.pos16 .btmDeco { 
	background-color: #922d22;
}
.regionMap .regionArea.pos16:hover .regionButton .btnTail, 
.regionMap .regionArea.pos16.active .regionButton .btnTail { 
	background-position: -498px -119px; 
}

/*** Mobile ***/
@media only screen and (max-width: 40em) {
	.regionMap .regionButton {
		font-size: 11px;
	}
	.regionMap .mapHead .logo {
		background-position: -602px -7px;
		width: 280px;
		height: 140px;
		margin: auto;
		top: 19px;
	}
	/* POPUP/INFO WINDOW */
	.regionMap .popupHolder {
		position: absolute;
		top: 140px;
		text-align: center;
	}
	.regionMap .regionPopup {
		background-color: #5f5e5d;
		width: 280px;
		-webkit-box-shadow: 0 0 600px 600px rgba(0,0,0,.6);
		box-shadow: 0 0 600px 600px rgba(0,0,0,.6);
	}
	.regionMap .regionPopup .row .columns.contentArea { padding: 1.25rem 0.625rem 1.625rem;}
	.regionMap .regionPopup .btmDeco { margin-top: 1px;}
	.regionMap .regionPopup.pos1.active {display: none;}
} 

/*** Tablet & Desktop ***/
@media only screen and (min-width: 40.063em) {
	.regionMap .mapHead .logo {
		background-position: -21px 0;
		width: 518px;
		height: 88px;
		top: 25px;
	}
	.regionMap .mapCont { height: 487px;}
	.regionMap .landCont {
		background-image: url(/includes/public/assets/images/regionmap/mapoverlay-desk.png);
		background-size: 1327px 487px;
		height: 487px;
		width: auto;
	}
	.regionMap .landCont .row { height: 487px;}
	.regionMap .btnHolder {
		height: 487px;
		width: 768px;
	}
	.regionMap .regionButton {
		height: 30px;
		line-height: 1.875rem;
		padding: 0 0.813rem;
		font-size: 0.875rem;
	}
	.regionMap .regionButton .btnTail { top: 29px;}
	.regionMap .regionCircle {
		height: 24px;
		width: 24px;
		-webkit-border-radius: 12px;
		border-radius: 12px;
	}

	/* TMS / Alliance -- Position 2 */
	.regionMap .regionArea.pos2 .regionButton {top: 48px; right: 268px;}
	.regionMap .regionArea.pos2 .regionCircle {
		width: 30px;
		height: 30px;
		-webkit-border-radius: 15px;
		border-radius: 15px;
		top:10px;
		right: 317px;
	}
	.regionMap .regionArea.pos2 .regionCircle:after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%; 
		margin-left: -8px;
		margin-top: -8px;
		width: 16px;
		height: 16px;
		background-image: url(/includes/public/assets/images/regionmap/sprite-map.png);
		background-repeat: no-repeat;
		background-position: -442px -108px;
	}

	/* DFW Intl. Airport -- Position 3 */
	.regionMap .regionArea.pos3 .regionButton {top:100px; right: 193px;}
	.regionMap .regionArea.pos3 .regionCircle {
		width: 30px;
		height: 30px;
		-webkit-border-radius: 15px;
		border-radius: 15px;
		top: 64px;
		right: 218px;
	}
	.regionMap .regionArea.pos3 .regionCircle:after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%; 
		margin-left: -7px;
		margin-top: -7px;
		width: 14px;
		height: 14px;
		background-image: url(/includes/public/assets/images/regionmap/sprite-map.png);
		background-repeat: no-repeat;
		background-position: -113px -113px;
	}

	/* Downtown  -- Position 4 */
	.regionMap .regionArea.pos4 .regionButton { 
		top: 253px; 
		right: 232px; 
		height:40px; 
		line-height: 1.125rem; 
		padding-top: 3px; 
		max-width: 160px;
	}
	
	.regionMap .regionArea.pos4 .regionCircle {
		width: 40px;
		height: 40px;
		-webkit-border-radius: 20px;
		border-radius: 20px;
		top: 220px;
		right: 372px; 
	}
	.regionMap .regionArea.pos4 .regionCircle:after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%; 
		margin-left: -14px;
		margin-top: -14px;
		width: 29px;
		height: 27px;
		background-image: url(/includes/public/assets/images/regionmap/sprite-map.png);
		background-repeat: no-repeat;
		background-position: -253px -93px;
	}
	.regionMap .regionArea.pos4:hover .regionButton .btnTail, .regionMap .regionArea.pos4.active .regionButton .btnTail { 
		background-image: url(/includes/public/assets/images/regionmap/sprite-map.png);
		width: 18px;
		height: 14px;
		background-position: -419px -111px;
	}

	/* Near Southside -- Position 5 */
	.regionMap .regionArea.pos5 .regionButton { 
		top: 317px; 
		right: 335px; 
	}
	.regionMap .regionArea.pos5 .regionButton .btnTail {
		display: block;
		background-position: 0px -60px;
		width: 15px;
		height: 10px;
		left: 84px;
		top: -9px;
		transform: rotateZ(-115deg);
	}
	.regionMap .regionArea.pos5 .regionCircle { bottom: 155px; right: 395px;}
	.regionMap .regionArea.pos5:hover .regionButton .btnTail, .regionMap .regionArea.pos5.active .regionButton .btnTail { background-position: -435px -93px; }

	/* TCU / Zoo -- Position 6 */
	.regionMap .regionArea.pos6 .regionButton {
		bottom: 37px;
		left: 220px;
	}
	
	.regionMap .regionArea.pos6 .regionButton .btnTail {
		background-position: -160px -112px;
		width: 14px;
		height: 19px;
		top: -18px;
	}
	.regionMap .regionArea.pos6 .regionCircle { bottom: 88px; left: 293px;}
	.regionMap .regionArea.pos6:hover .regionButton .btnTail, .regionMap .regionArea.pos6.active .regionButton .btnTail { background-position: -308px -112px;}

	/* Camp Bowie -- Position 7 */
	.regionMap .regionArea.pos7 .regionButton {
		bottom: 122px; 
		left: 132px;
	}
	
	.regionMap .regionArea.pos7 .regionButton .btnTail {
		background-position: 0 0;
		width: 16px;
		height: 24px;
		top: -23px;
		left: 73px;
	}
	.regionMap .regionArea.pos7 .regionCircle { 
		bottom: 170px; 
		left: 226px; 
	}
	.regionMap .regionArea.pos7:hover .regionButton .btnTail, .regionMap .regionArea.pos7.active .regionButton .btnTail { background-position: -21px -93px;}

	/* Cultural District -- Position 8 */
	.regionMap .regionArea.pos8 .regionButton { 
		top: 257px; 
		left: 104px; 
	}
	.regionMap .regionArea.pos8 .regionButton .btnTail {
		background-position: -327px -93px;
		width: 31px;
		height: 19px;
		right: -30px;
		top: 7px;
	}
	.regionMap .regionArea.pos8 .regionCircle { top: 262px; left: 285px;}
	.regionMap .regionArea.pos8:hover .regionButton .btnTail, .regionMap .regionArea.pos8.active .regionButton .btnTail { background-position: -363px -93px;}

	/* West 7th -- Position 9 */
	.regionMap .regionArea.pos9 .regionButton { 
		top: 224px; 
		left: 191px;
	}
	.regionMap .regionArea.pos9 .regionButton .btnTail {
		background-position: -68px -93px;
		width: 13px;
		height: 17px;
		right: 4px;
	}
	.regionMap .regionArea.pos9 .regionCircle { top: 233px; left: 300px;}
	.regionMap .regionArea.pos9:hover .regionButton .btnTail, .regionMap .regionArea.pos9.active .regionButton .btnTail { background-position: -225px -93px;}

	/* Stockyards -- Position 10 */
	.regionMap .regionArea.pos10 .regionButton { 
		top: 72px; 
		left: 242px;
	}
	.regionMap .regionArea.pos10 .regionButton .btnTail {
		background-position: -42px -93px;
		width: 21px;
		height: 21px;
		top: 29px;
		right: 14px;
	}
	.regionMap .regionArea.pos10 .regionCircle { 
		top: 122px; 
		left: 331px;
	}
	.regionMap .regionArea.pos10:hover .regionButton .btnTail, 
	.regionMap .regionArea.pos10.active .regionButton .btnTail { 
		background-position: -479px -93px;
	}

	/* Panther Island -- Position 11 */
	.regionMap .regionArea.pos11 .regionButton { 
		top: 178px; 
		right: 424px;
		left: unset;
	}
	.regionMap .regionArea.pos11 .regionButton .btnTail {
		background-position: -42px -93px;
		width: 21px;
		height: 21px;
		top: 13px;
		left: 132px;
		transform: scaleY(1.5) rotate(-20deg);
	}
	.regionMap .regionArea.pos11 .regionCircle { 
		top: 183px; 
		right: 405px;
	}
	.regionMap .regionArea.pos11:hover .regionButton .btnTail, 
	.regionMap .regionArea.pos11.active .regionButton .btnTail { 
		background-position: -42px -93px;
	}

	/* Clearfork -- Position 12 */
	.regionMap .regionArea.pos12 .regionButton {
		bottom: 45px; 
		left: 114px; 
	}
	.regionMap .regionArea.pos12 .regionButton .btnTail {
		background-position: -479px -119px;
		width: 14px;
		height: 11px;
		top: -10px;
		left: 85px;
		transform: rotateY(0);
	}
	.regionMap .regionArea.pos12 .regionCircle { bottom: 88px; left: 200px; }
	.regionMap .regionArea.pos12:hover .regionButton .btnTail, .regionMap .regionArea.pos12.active .regionButton .btnTail { background-position: -498px -119px; }
	
	/* Riverside District -- Position 13 */
	.regionMap .regionArea.pos13 .regionButton { 
		top: 146px; 
		right: 224px;
	}
	.regionMap .regionArea.pos13 .regionButton .btnTail {
		background-position: -479px -119px;
		width: 14px;
		height: 14px;
		top: 24px;
		left: 29px;
		-webkit-transform: rotate(40deg);
				transform: rotate(40deg);
	}
	.regionMap .regionArea.pos13 .regionCircle { 
		top: 184px; 
		right: 305px;
	}
	.regionMap .regionArea.pos13:hover .regionButton .btnTail, 
	.regionMap .regionArea.pos13.active .regionButton .btnTail { 
		background-position: -498px -119px; 
	}
	
	/* East Fort Worth -- Position 14 */
	.regionMap .regionArea.pos14 .regionButton { 
		top: 211px; 
		right: 200px;
	}
	.regionMap .regionArea.pos14 .regionButton .btnTail {
		background-position: -479px -119px;
		width: 14px;
		height: 11px;
		top: 24px;
		left: 74px;
		-webkit-transform: rotate(40deg);
				transform: rotate(40deg);
	}
	.regionMap .regionArea.pos14 .regionCircle { 
		top: 249px; 
		right: 260px;
	}
	.regionMap .regionArea.pos14:hover .regionButton .btnTail, 
	.regionMap .regionArea.pos14.active .regionButton .btnTail { 
		background-position: -498px -119px; 
	}
	
	/* SouthEast Fort Worth & Historic Southside -- Position 14 */
	.regionMap .regionArea.pos15 .regionButton { 
		top: 358px; 
		right: 242px;
		max-width: 160px;
		height: 54px;
		line-height: 1.125rem;
	}
	.regionMap .regionArea.pos15 .regionButton .btnTail {
		background-position: -479px -119px;
		width: 21px;
		height: 21px;
		top: -9px;
		left: 37px;
		-webkit-transform: rotateY(40deg);
				transform: rotateY(40deg);
	}
	.regionMap .regionArea.pos15 .regionCircle { 
		top: 343px; 
		right: 293px;
	}
	.regionMap .regionArea.pos15:hover .regionButton .btnTail, 
	.regionMap .regionArea.pos15.active .regionButton .btnTail { 
		background-position: -498px -119px; 
	}
	
	/* Northside -- Position 16 */
	.regionMap .regionArea.pos16 .regionButton { 
		top: 118px; 
		left: 163px;
	}
	.regionMap .regionArea.pos16 .regionButton .btnTail {
		background-position: -479px -119px;
		width: 14px;
		height: 11px;
		top: 10px;
		left: 99px;
		-webkit-transform: rotate(70deg);
				transform: rotate(70deg);
	}
	.regionMap .regionArea.pos16 .regionCircle { 
		top: 126px; 
		left: 286px;
	}
	.regionMap .regionArea.pos16:hover .regionButton .btnTail, 
	.regionMap .regionArea.pos16.active .regionButton .btnTail { 
		background-position: -498px -119px; 
	}
	
	/* POPUP/INFO WINDOW */
	.regionMap .regionPopup .closeButton { display: none;}
	

}

/*** Tablet ***/
@media only screen and (min-width: 40.063em) and (max-width: 64em) {
	.regionMap .popupHolder {}
	.regionMap .regionPopup .regionCont { padding: 1.250rem;}
	.regionMap .regionPopup .row .columns.contentArea { padding-left: 1.250rem;}
	.regionMap .regionPopup .btmDeco {margin: -0.750rem 1.250rem 0 1.250rem;}   
}

/*** Desktop  ***/
@media only screen and (min-width: 64.063em) {
	.regionMap .mapHead .logo {}
	.regionMap .landCont {}
	.regionMap .btnHolder {}
	.regionMap .popupHolder {
		max-width: 67.5rem;
		position: absolute;
		top: 88px;
	}
	.regionMap .regionPopup {
		width: 340px;
		height: auto;
		position: absolute;
		right: 0;
		top: 20px;
	}
	.regionMap .regionPopup .regionCont {
		width: 340px;
		height: 436px;
		padding: 1.188rem;
	}
	.regionMap .popupHolder .row .imageArea.columns { margin-bottom: 10px;}
	.regionMap .regionPopup .row .columns.contentArea {}
	.regionMap .regionPopup .btmDeco {}
}

.homepage .regionMap .regionCircle,
.homepage .regionMap .regionButton,
.homepage .regionMap .regionButton::before {
	background-color: #7f8182;
}


.homepage .regionMap .mapHead .logo,
.homepage .regionMap .regionButton .btnTail {
	background-image: url(/includes/public/assets/images/regionmap/sprite-map-homepage.png);
}
@media only screen and (min-width: 40.063em){
	.homepage .regionMap .mapHead .logo {
		background-position: -22px 0;
		width: 573px;
		height: 77px;
		top: 14px;
	}
}