/*If you already have a style tag, just just add this line. If not, include a new style tag.*/
.extra-share {width:305px; margin: 20px auto;}
.fb_iframe_widget span {
    vertical-align: initial !important;
}
.visible-xsmall {
	display: none;
}
h1.franklin {font-family: "FranklinITCProBold","Helvetica","Arial",sans-serif; line-height: 1.15em;}
p.body.intro {margin:20px 100px; font-size:20px;}

.franklin-bold,
p.franklin-bold {
	font-family: "FranklinITCProBold","Helvetica","Arial",sans-serif;
}
p.uppercase {
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.slide {
	position: relative;
	margin: 5px auto;
}
.slide h2 {
	font-size: 20px;
	margin-bottom: 5px;
}
.inline-block {
	display: inline-block;
}
.diagram-key {
	list-style-type: none;
	margin-left: 0;
	position: absolute;
	top: 11%;
	left: 0;
}
.diagram-key .marker {
	position: relative;
	top: auto;
	left: auto;
	width: 10px;
	height: 10px;
	margin-right: 5px;
}
.marker-overlay {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
}
.marker {
	width: 20px;
	height: 20px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	background-color: rgb(31, 125, 192);
	position: absolute;
	top: 0%;
	left: 0%;
	cursor: pointer;
}
.marker p {
	margin: 0;
	font-size: 11px;
	line-height: 20px;
	text-align: center;
	color: white;
}
.marker:hover {
	background-color: rgb(51, 125, 192);
}
.marker.casing {
	background-color: rgb(197, 0, 0);
}
.marker.casing:hover {
	background-color: rgb(122, 0, 0);
}
.list *, .list *:after, .list *:before {
	box-sizing: border-box;
}
.list-item {
	padding: 15px;
	margin-bottom: 20px;
	border: 1px solid #ccc;
	width: 32.333%;
	float: left;
	min-height: 275px;
}
.list-item:nth-child(3n + 2){
	margin-right: 1%;
	margin-left: 1%;
}
.list-item:nth-child(3n + 1){
	clear: left;
	margin-left: 0;
}
.list-item img {
	margin-top: 10px;
}
.detail-box {
	border: 5px solid rgb(197, 0, 0);
	position: absolute;
	border: 5px solid rgb(197, 0, 0);
	position: absolute;
	top: 32.5%;
	left: 35%;
	width: 15.4%;
	height: 30%;
}
p.detail-label {
	color: white;
	position: absolute;
	top: -25px;
	left: -20px;
	right: -20px;
	text-align: center;
}
p.map-label {
	position: absolute;
	color: white;
	text-transform: uppercase;
	letter-spacing: 0.035em;
	font-size: 11px;
	margin: 0;
}
#canfield {
	top: 50.7%;
	left: 41%;
}
#canfield-north {
	top: 37%;
	left: 44%;
}
#canfield-south {
	bottom: 37%;
	left: 39.6%;
}
.wp-graphics-tooltip {
	max-width: 350px;
}
.wp-graphics-tooltip p,
.wp-graphics-tooltip p.credit {
	margin: 0;
	padding: 0;
}
.wp-graphics-tooltip img {
	margin-bottom: 4px;
}
.iframe .iframe-hide {
	display: none;
}

@media (max-width: 979px){
	p.body.intro {
		margin-left: 10px;
		margin-right: 10px;
	}
	p.detail-label {
		top: -29px;
		left: -50px;
		right: -50px;
	}
	p.map-label {
		font-size: 16px;
		letter-spacing: 0.05em;
	}
	#canfield {
		top: 43.7%;
	}
	#canfield-north {
		top: 8%;
		left: 44%;
	}
	#canfield-south {
		bottom: 25%;
		left: 29.6%;
	}
	.list-item {
		width: 49%;
	}
	.list-item:nth-child(2n){
		clear: right;
		margin-left: 0.5%;
		margin-right: 0;
	}
	.list-item:nth-child(2n + 1){
		clear: left;
		margin-left: 0;
		margin-right: 0.5%;
	}
}
@media (max-width: 767px){
	p.map-label {
		font-size: 14px;
	}
}
@media (max-width: 600px){
	h1.franklin {
		font-size: 3.1em;
	}
	.visible-xsmall {
		display: block;
	}
	.diagram-key {
		position: relative;
		top: auto;
		left: auto;
	}
	.hidden-desktop,
	.hidden-xsmall,
	p.map-label {
		display: none !important;
	}
	p.map-label {
		font-size: 12px;
	}
	.marker {
		width: 15px;
		height: 15px;
	}
	.marker p {
		display: none;
	}
	.list-item {
		width: auto;
		float: none;
		margin: 0 0 20px;
		min-height: initial;
	}
}
@media (max-width: 425px){
	.marker {
		width: 9px;
		height: 9px;
	}
}