.mapactivitycircle 
{
	width: 210px;
	-webkit-transition: width .5s; /* Safari */
	transition: width .5s;
}

.mapactivitycontainer:hover .mapactivitycircle
{
	width: 290px;
}

.mapactivitycirclehover {
	opacity: 0;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 210px;
    -webkit-transition: opacity .5s, width .5s; /* Safari */
	transition: opacity .5s, width .5s;
	/*-webkit-transition-delay: .5s;*/ /* Safari */
	    /*transition-delay: .5s;*/
}

.mapactivitycontainer:hover .mapactivitycirclehover
{
	opacity: 1.0;
	width: 290px;
}

.mapactivitycontainer
{
	margin-left:-105px;
	margin-top: -105px;
	-webkit-transition: margin-left .5s, margin-top .5s; /* Safari */
	transition: margin-left .5s, margin-top .5s;
	position:relative;
}

.mapactivitycontainer:hover
{
	margin-left: -145px;
	margin-top: -145px;
	z-index: 3000;
}

.mapactivitytext {
	position: absolute;
	top:0px;
	left: 0px; 
	font-family: proxima-nova, sans-serif;
letter-spacing: 2px;
	font-size: 24px;
	color:#fff;
	text-align: center;
	width:100%;
	opacity: 0;
    -webkit-transition: opacity .5s, width .5s; /* Safari */
	transition: opacity .5s, width .5s;
}

.mapactivitycontainer:hover .mapactivitytext
{
	opacity: 1.0;
}

.pillaritemdiv {
	float: left;
	width: 25%;
	position: relative;
	overflow:hidden;
}

.pillarimagewrapper {
	overflow: hidden;			
	position: relative;
}

.pillarimage {
	width: 101%; 
	position: absolute;
	top: 0px;
	left:0px;
	-webkit-transition: width .5s, top .5s, left .5s; /* Safari */
	transition: width .5s, top .5s, left .5s;
}

.pillaritemdiv:hover .pillarimage {
	width: 110%; 
	top: -5%;
	left:-5%;
}

.pillaricon {
	position: absolute;
	top: -40px;
	left: 50%;
	margin-left: -40px;
}

.pillarhoveroverlay {
	position: absolute;
	top: 0px;
	opacity: 0;
	-webkit-transition: opacity .5s; /* Safari */
	transition: opacity .5s;
	width: 100%
}

.pillaritemdiv:hover .pillarhoveroverlay {
	opacity: 1.0;
}

.pillartitle {
	font-family: vortice-concept, sans-serif;
	font-size: 20px;
	color: #fff;
	position: absolute; 
	top:85px;
	width: 100%;
	text-align: center;
	text-shadow: 1px 1px 3px #777;
	font-weight: bold;
}

.pillarbodytext {
	font-family: proxima-nova, sans-serif;
	letter-spacing: 2px;
	font-size: 14px;
	color: #fff;
	position: absolute;
	top: 160px;
	left: 12.5%;
	width: 75%;
	text-align: center;
	opacity: 0;
	-webkit-transition: opacity .5s; /* Safari */
	transition: opacity .5s;
}

.pillaritemdiv:hover .pillarbodytext {
	opacity: 1.0;
}

.pillarseemoretext {
	font-family: proxima-nova, sans-serif;
	letter-spacing: 2px;
	font-weight: 700;
	font-family: 22px;
	color: #f34741;
	position: absolute;
	top: 280px;
	width: 100%;
	text-align: center;
	opacity: 0;
	-webkit-transition: opacity .5s; /* Safari */
	transition: opacity .5s;
}

.pillaritemdiv:hover .pillarseemoretext {
	opacity: 1.0;
}

.imgmaphover {
	display: none;
}

.imgmapdiv:hover .imgmaphover {
	display: block;
}

.mapactivitiesbutton {
	width: 210px;
	font-family: proxima-nova, sans-serif;
	letter-spacing: 2px;
	font-size: 22px;
	line-height: 50px;
	background-color: #f24842;
	color:#fff;
	text-align: center;
	margin-top: 7%;
	margin-left: 104px;
	border-radius:25px;
	font-weight: bold;
}

.mapareacontainer {
	position: absolute;
	top:0px;
	width: 100%;
	text-align: left;
}

.mapareatitle {
	font-family: proxima-nova, sans-serif;
	letter-spacing: 2px;
	/*font-size: 66px;*/
	font-size: 40px;
	line-height: 45px;
	color:#2fc0b4;
	width: 85%;
	margin-left: 104px;
	font-weight: 700;
}

.mapareatext {
	font-family: proxima-nova, sans-serif;
	letter-spacing: 2px;
	font-weight: 700;
	font-size:25px;
	color: #273444;
	line-height: 40px;
	width: 85%;
	margin-left: 104px;
	margin-top: 40px; 
	font-size:19px; 
	line-height: 25px;
}

.mapareapretitle {
	font-family: proxima-nova, sans-serif;
	letter-spacing: 2px;
	font-size: 26px;
}

.mapcolumn {
	float:left; 
	width: 50%;
}

.territoryheadingimage {
	max-width: 90%;
}

.mapactivitysupercontainer {
	display: none; 
	width: 50%; 
	position: absolute; 
	bottom: 0px; 
	right:0px; 
}

.mapareacommunities {
	margin-top: 75px;
}

.mapareacommunitytext {
	font-size: 17px; 
	line-height: 30px;
}


@media screen and (max-width: 1400px) {
	
	.mapareatitle {
	    margin-left: 65px;
		/*font-size: 45px;*/
		/*font-size: 45px;*/
	}

	.mapareatext {
		margin-left: 65px;
	    margin-top: 10px;
	    font-size: 16px;
	}

	.mapactivitiesbutton {
		margin-left: 65px;
		margin-top:4%;
	}

	.mapareacommunities {
		margin-top: 35px;
	}
}

@media screen and (max-width: 1250px) {

	.mapareatitle {
		font-size: 30px;
		line-height: 35px;
	}
}

@media screen and (max-width: 1250px) {

	.mapareacommunitytext {
		font-size: 14px; 
		line-height: 20px;
	}
}



@media screen and (max-width: 1100px) {
	
	.mapareatitle {
	    margin-left: 45px;
		/*font-size: 40px;*/
	}

	.mapareatext {
		margin-left: 45px;
	    margin-top: 10px;
	    font-size: 16px;
	    line-height: inherit;
	}

	.mapactivitiesbutton {
		margin-left: 45px;
		margin-top:4%;
	}

	.mapareacommunities {
		margin-top: 25px;
	}

}

/*@media screen and (max-width: 1100px) {
	
	.mapareatitle {
	    margin-left: 45px;
		font-size: 40px;
	}

	.mapareatext {
		margin-left: 45px;
	    margin-top: 10px;
	    font-size: 16px;
	    line-height: inherit;
	}

	.mapactivitiesbutton {
		margin-left: 45px;
		margin-top:4%;
	}
}
*/
@media screen and (max-width: 1000px) {

	#mapareabackground {
		display: none;
	}
}

@media screen and (max-width: 900px) {
	
	.mapcolumn {
	    float:none;
	    width: 100%;
	}

	.mapactivitysupercontainer {
		width: 100%;
	}

	.territoryheadingimage {
		width: 90%;
	}

}

@media screen and (max-width: 500px) {
	
	.mapareatitle {
		top: 18%
	    margin-left: 45px;
		font-size: 30px;
	}

	.mapareatext {
		margin-left: 45px;
	    margin-top: 5px;
	    font-size: 11px;
	    line-height: inherit;
	}

	.mapactivitiesbutton {
		margin-left: 45px;
		font-size: 18px;
		margin-top: 3%;
		line-height: 30px;
	}

	.territoryheadingimage {
		top: 8%;
	}
}


