body {
	top: 0px;
	padding: 0px;
	margin: 0px;
	text-align: center;
	background-color:#005a00;
}

@font-face {
	font-family:darwin;
	src:url(fonts/darwinpro-regular.otf)}
@font-face {
	font-family:darwinsemibold;
	src:url(fonts/darwinpro-semibold.otf)}
@font-face {
	font-family:darwinsemiboldital;
	src:url(fonts/darwinpro-semiboldital.otf)}
@font-face {
	font-family:dense;
	src:url(fonts/dense-regular.otf)}
@font-face {
	font-family:densebold;
	src:url(fonts/densebold.otf)}
@font-face {
	font-family:percentfont;
	src:url(fonts/densebold.otf)}
@font-face {
	font-family:eamescentury;
	src:url(fonts/eamescenturymodern-medium.otf)}




p {
	font-family: darwin, sans-serif;
	font-size: 15px;
	line-height: 20px;
	margin-top: 7px;
	color:#000000;}
a.textlink {
	font-family: darwin, sans-serif;
	color:#005a00;
	font-weight: bold;
	text-decoration: none;
	font-size: 15px;}
	@media all and (max-width:1023px) {
p {
	font-size: 14px;
	line-height: 18px;}
a.textlink {
	font-size: 14px;}
	}

h1 {font-family: densebold, sans-serif;
	font-size: 48px;
	line-height: 48px;
	letter-spacing: 4px;
	text-transform: uppercase;
	margin: 0px 0px 10px;
	color:#ffffff;}
h2 {
	font-family: dense, sans-serif;
	font-size: 36px;
	line-height: 36px;
	text-transform: uppercase;
	letter-spacing: 3px;
	margin: 0px 0px 6px;
	color:#ffffff;}
.and {
	font-family: dense, sans-serif;
	font-size: 21px;
	line-height: 21px;
	letter-spacing: 2px;
	vertical-align: 25%;
	color:#ffffff;}
h3 {
	font-family: dense, sans-serif;
	font-size: 21px;
	line-height: 21px;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin: 0px 0px 6px;
	color:#ffffff;}
@media all and (min-width:701px) {
	.and br {display: none}
}
@media all and (min-width:433px) and (max-width:700px) {
	h1 {font-size: 36px; line-height: 36px;}
	.and {font-size: 18px; line-height: 18px; vertical-align: 3%;}
	.and br {display: none}
	h2 {font-size: 21px; line-height: 21px;}
}
@media all and (max-width:432px) {
	h1 {font-size: 33px; line-height: 33px;}
	.and {font-size: 18px; line-height: 18px; vertical-align: 3%;}
	.and br {}
	h2 {font-size: 21px; line-height: 21px;}
}
h1.insideheader {font-family: densebold, sans-serif;
	letter-spacing: 4px;
	text-transform: uppercase;
	margin: 0px 0px 2px;
	color:#ffffff;}
	@media all and (min-width: 1366px) {
		h1.insideheader {font-size: 72px; line-height: 72px;}
	}
	@media all and (min-width: 1024px) and (max-width:1365px) {
		h1.insideheader {font-size: 60px; line-height: 60px;}
	}
	@media all and (max-width:1023px) {
		h1.insideheader {font-size: 54px; line-height: 54px;}
	}

h4 {
	font-family: dense, sans-serif;
	text-transform: uppercase;
	letter-spacing: 3px;
	margin: 0px 0px 13px;
	color:#005a00;}
	@media all and (min-width: 800px) {
		h4 {font-size: 42px; line-height: 42px;}
	}
	@media all and (max-width:799px) {
		h4 {font-size: 36px; line-height: 36px;}
	}
h5 {
	font-family: dense, sans-serif;
	font-size: 33px;
	line-height: 33px;
	margin: 0px 0px 13px;
	text-transform: uppercase;
	letter-spacing: 3px;
	color:#005a00;}
h5.roman {
	font-family: eamescentury, serif;
	font-size: 24px;
	line-height: 24px;
	margin: 0px;
	color:#005a00;}
h5.romanbottomnav {
	font-family: eamescentury, serif;
	font-size: 16px;
	line-height: 16px;
	letter-spacing: 2px;
	padding: 3px 0px 0px 0px;
	margin: 0px;
	color:#ffffff;}
	@media all and (max-width:1023px) {
		h5.romanbottomnav {font-size: 14px; line-height: 14px;}
	}

h6 {
	font-family: darwin, sans-serif;
	font-size: 13px;
	line-height: 15px;
	margin: 5px 0px;
	color:#82c120;}


#container {
	width: 100%;
	top: 0px;
	left: 0px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	z-index: 1;}

#muscles {
	top: 0px;
	width: 100%;
	height: 100vh;
	background: url(images/muscles.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;}
	@media all and (max-width:600px) {
		#muscles{
			background: url(images/muscles-mobile.jpg);
			background-position: top left;
			background-repeat: no-repeat;
			background-size: cover;}
	}
	#missionstatement{
		top: 38%;
		width: 100%;
		margin: auto;
		position: absolute;
		z-index: 4;
		text-align: center;}
	@media all and (min-width: 433px) and (max-width:700px) {
		#missionstatement{top: 33%;}
	}
	@media all and (max-width:432px) {
		#missionstatement{top: 25%;}
	}
	
#polevault {
	top: 0px;
	width: 100%;
	height: 100vh;
	background: url(images/polevault.jpg);
	background-position: top left;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;}
	@media all and (max-width:600px) {
		#polevault{
			background: url(images/polevault-mobile.jpg);
			background-position: top left;
			background-repeat: no-repeat;
			background-size: cover;}
	}
	#corevalues{
		margin: auto;
		position: absolute;
		z-index: 4;
		text-align: left;}
	@media all and (min-width: 1366px) {
		#corevalues{top: 34%; left: 21%;}
	}
	@media all and (min-width: 1024px) and (max-width:1365px) {
		#corevalues{top: 32%; left: 15%;}
	}
	@media all and (min-width: 701px) and (max-width:1023px) {
		#corevalues{top: 30%; left: 12%;}
	}
	@media all and (min-width: 433px) and (max-width:700px) {
		#corevalues{top: 27%; left: 10%;}
	}
	@media all and (max-width:432px) {
		#corevalues{top: 27%; left: 8%;}
	}

#videocontainer {
	width: 100%;
	min-height: 100vh;
	padding-top: 60px;
	margin: auto;
	background-color: #003300;
	background-position: top left;
	background-repeat: no-repeat;
	background-size: cover;
	border-bottom: 8px solid #82c120;
	position: relative;
	text-align: center;}
	.videowrapper {
		position: relative;
		padding-bottom: 56.25%; /* 16:9 Aspect Ratio */ 
		height: 0;
		width: 58%;
		margin: auto;}
	@media all and (min-width: 1366px) {
		.videowrapper {width: 63%;}
	}
	@media all and (min-width: 1024px) and (max-width:1365px) {
		.videowrapper {width: 80%;}
	}
	@media all and (max-width:1023px) {
		.videowrapper {width: 98%;}
	}

#areas{
	box-sizing: border-box;
	width: 100%;
	min-height: 100vh;
	margin: auto;
	position: relative;
	padding-top: 60px;
	padding-bottom: 40px;
	background: #005a00; /* For browsers that do not support gradients */
   background: -webkit-linear-gradient(#005a00, #001e00); /* For Safari 5.1 to 6.0 */
   background: -o-linear-gradient(#005a00, #001e00); /* For Opera 11.1 to 12.0 */
   background: -moz-linear-gradient(#005a00, #001e00); /* For Firefox 3.6 to 15 */
   background: linear-gradient(#005a00, #001e00); /* Standard syntax */
			border-bottom: 8px solid #82c120;
	z-index: 3;
	text-align: center;}
	.areasrow{
		display: flex;
		position: relative;
		z-index: 4;
		flex-direction: row;
		justify-content: space-around;
		align-items: stretch;
		flex-wrap:wrap;}
		.area1 {
			box-sizing: border-box;
			order: 1;
			flex: 1 1 320px;
			max-width: 350px;
			margin: 20px 10px 20px 10px;
			padding: 7px 10px 0px;
			background: #ffffff;
			border-top: 8px solid #82c120;
			border-bottom: 8px solid #82c120;
			text-align: center;
			position: relative;
			z-index: 1;}
		.area2 {
			box-sizing: border-box;
			order: 2;
			flex: 1 1 320px;
			max-width: 350px;
			margin: 20px 10px 20px 10px;
			padding: 7px 10px 0px;
			background: #ffffff;
			border-top: 8px solid #82c120;
			border-bottom: 8px solid #82c120;
			text-align: center;
			position: relative;
			z-index: 1;}
		.area3 {
			box-sizing: border-box;
			order: 3;
			flex: 1 1 320px;
			max-width: 350px;
			margin: 20px 10px 20px 10px;
			padding: 7px 10px 0px;
			background: #ffffff;
			border-top: 8px solid #82c120;
			border-bottom: 8px solid #82c120;
			text-align: center;
			position: relative;
			z-index: 1;}
		.area4 {
			box-sizing: border-box;
			order: 4;
			flex: 1 1 320px;
			max-width: 350px;
			margin: 20px 10px 20px 10px;
			padding: 7px 10px 0px;
			background: #ffffff;
			border-top: 8px solid #82c120;
			border-bottom: 8px solid #82c120;
			text-align: center;
			position: relative;
			z-index: 1;}

.romannumeral {
	width: 100%;
	border-bottom: 1px solid #005a00;
	position: relative;
	text-align: center;}
.learnmore {
	bottom: 0px;
	box-sizing: border-box;
	width: 100%;
	position: absolute;
	padding: 10px 20px 6px 10px;
	text-align: right;
	z-index: 12;}

a.learnmore:hover {
	color:#82c120;}
a.learnmorelink {
	font-family: darwinsemiboldital, sans-serif;
	color:#005a00;
	text-decoration: none;
	font-size: 16px;}
a.learnmore:hover {
	color:#82c120;}

a.sublinks {
	font-family:darwin, sans-serif;
	color: #82c120;
	font-size: 13px;
	line-height: 18px;
	text-align: center;
	margin: 0px 8px;
	text-decoration: underline;}
a.sublinks:hover {
	color: #ffffff;}


#spirit {
	top: 0px;
	width: 100%;
	height: 100vh;
	background: url(images/spirit.jpg);
	background-position: top right;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;}
	#close{
		box-sizing: border-box;
		bottom: 0%;
		width: 100%;
		margin: auto;
		padding: 10px 0px 10px 0px;
		border-top: 1px solid #82c120;
	   background-color: rgba(1, 70, 18, 0.85);
		position: absolute;
		text-align: center;
		z-index: 4;}


#processheader {
	top: 0px;
	width: 100%;
	height: 100vh;
	background: url(images/swimmer.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;}
#planheader {
	top: 0px;
	width: 100%;
	height: 100vh;
	background: url(images/athleticcenter.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;}
#progressheader {
	top: 0px;
	width: 100%;
	height: 100vh;
	border-bottom: 8px solid #82c120;
	background: url(images/trophy.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;}

#introcontainer {
	width: 100%;
		margin: auto;
		position: relative;
		z-index: 4;
	background: #ffffff;
		text-align: left;}
#intro {
		margin: auto;
		position: relative;
		padding: 40px 0px 10px;
		z-index: 4;
	background: #ffffff;
		text-align: left;}
@media all and (min-width: 1601px) {
	#intro {width: 70%;}
}
@media all and (min-width: 1366px) and (max-width:1600px) {
	#intro {width: 80%;}
}
@media all and (min-width: 1024px) and (max-width:1365px) {
	#intro {width: 90%;}
}
@media all and (max-width:1023px) {
	#intro {width: 98%;}
}
p.rightjustify {
	font-family: darwinsemibold, sans-serif;
	font-size: 15px;
	line-height: 20px;
	color:#000000;
	text-align: right;}

p.goaldescrip {
	font-family: darwinsemibold, sans-serif;
	font-size: 16px;
	line-height: 20px;
	letter-spacing: .5px;
	text-shadow: 1px 1px 1px #000000;
	margin: 20px 0px 0px;
	color:#ffffff;}
p.goaldescrip-interior {
	font-family: darwinsemibold, sans-serif;
	font-size: 16px;
	letter-spacing: .5px;
	line-height: 20px;
	text-shadow: 1px 1px 1px #000000;
	margin: 0px;
	color:#ffffff;}

h2.focussubhead {
	font-family: eamescentury, serif;
	text-transform: uppercase;
	text-shadow: 2px 2px 0px #000000;
	color:#ffffff;}
h4.goalsubheadtopper {
	font-family: densebold, sans-serif;
	text-transform: uppercase;
	letter-spacing: 5px;
	margin: 0px 0px 2px;
	color:#000000;}
h5.goalsubhead {
	font-family: dense, sans-serif;
	margin: 0px 0px 13px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color:#000000;}
	@media all and (min-width: 1366px) {
		h2.focussubhead {font-size: 33px; line-height: 33px; letter-spacing: 2px;}
		h4.goalsubheadtopper {font-size: 24px; line-height: 24px;}
		h5.goalsubhead {font-size: 33px; line-height: 33px;}
	}
	@media all and (min-width: 1024px) and (max-width:1365px) {
		h2.focussubhead {font-size: 30px; line-height: 30px; letter-spacing: 2px;}
		h4.goalsubheadtopper {font-size: 24px; line-height: 24px;}
		h5.goalsubhead {font-size: 30px; line-height: 30px;}
	}
	@media all and (max-width:1023px) {
		h2.focussubhead {font-size: 24px; line-height: 24px; letter-spacing: 1px;}
		h4.goalsubheadtopper {font-size: 21px; line-height: 21px;}
		h5.goalsubhead {font-size: 24px; line-height: 24px;}
	}



.insidepageheader {
		width: 100%;
		margin: auto;
		position: absolute;
		z-index: 4;
		text-align: center;}
	@media all and (min-width: 701px) {
		.insidepageheader{top: 41%;}
	}
	@media all and (min-width: 433px) and (max-width:700px) {
		.insidepageheader{top: 36%;}
	}
	@media all and (max-width:432px) {
		.insidepageheader{top: 28%;}
	}

.areaoffocusheader {
	box-sizing: border-box;
	width: 100%;
	padding: 55px 0px 40px;
	background: url(images/areaoffocusheaderbg.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-color: #000000;
	border-top: 8px solid #82c120;
	position: relative;}
	@media all and (max-width:1023px) {
		.areaoffocusheader {padding: 45px 0px 30px;}
	}
	.areaoffocus{
			width: 100%;
			margin: auto;
			position: relative;
			z-index: 4;
			text-align: center;}
.goalheaderbg {
	box-sizing: border-box;
	width: 100%;
	padding: 10px 0px 0px;
	margin: 0px 0px 0px 0px;
	border-top: 2px solid #82c120;
	border-bottom: 1px solid #82c120;
	background-color: #82c120;
	position: relative;}
	.goalname{
			width: 100%;
			margin: auto;
			position: relative;
			z-index: 4;
			text-align: center;}
	.goaltext {
			margin: auto;
			position: relative;
			z-index: 4;
			text-align: center;}
	@media all and (min-width: 1601px) {
		.goaltext {width: 70%;}
	}
	@media all and (min-width: 1366px) and (max-width:1600px) {
		.goaltext {width: 80%;}
	}
	@media all and (min-width: 1024px) and (max-width:1365px) {
		.goaltext {width: 90%;}
	}
	@media all and (max-width:1023px) {
		.goaltext {width: 100%;}
	}

.goalparent{
	display: flex;
	position: relative;
	z-index: 4;
	text-align: left;
	padding: 10px 0px 15px;
	flex-direction: row;
	justify-content: space-around;
	align-items: stretch;
	flex-wrap:wrap;}
	.goalchild {
		box-sizing: border-box;
		flex: 1 1 350px;
		max-width: 340px;
		margin: 15px 5px;
		background: #ffffff;
		border-top: 8px solid #82c120;
		border-bottom: 8px solid #82c120;
		position: relative;
		text-align: center;
		z-index: 1;}
	.goalsubparttext {
		padding: 0px 10px 0px;
		background: #ffffff;
		position: relative;
		text-align: center;
		z-index: 1;}
	.status-pending {
		bottom: 0px;
		margin: 0px;
		width: 100%;
		background: url(images/statuspendingbg.png);
		background-position: top right;
		background-repeat: no-repeat;
		background-color: #bebebe;
		z-index: 10;
		position: absolute;}
	.status-inprogress {
		bottom: 0px;
		margin: 0px;
		width: 100%;
		background: url(images/statusinprogressbg.png);
		background-position: top right;
		background-repeat: no-repeat;
		background-color: #ffff00;
		z-index: 10;
		position: absolute;}
	.status-complete {
		bottom: 0px;
		margin: 0px;
		width: 100%;
		background: url(images/statuscompletebg.png);
		background-position: top right;
		background-repeat: no-repeat;
		background-color: #00ff00;
		z-index: 10;
		position: absolute;}
		h4.statusheader {
			font-family: eamescentury, serif;
			font-size: 16px;
			line-height: 16px;
			text-transform: uppercase;
			letter-spacing: 1px;
			margin: 8px 0px 2px;
			color:#000000;}
		p.statusreport {
			font-family: darwinsemibold, sans-serif;
			font-size: 16px;
			line-height: 16px;
			margin: 9px 0px;
			color:#000000;}


#focusgroups{
	box-sizing: border-box;
	width: 100%;
	min-height: 100vh;
	margin: auto;
	position: relative;
	padding-top: 60px;
	padding-bottom: 40px;
	background: #005a00; /* For browsers that do not support gradients */
   background: -webkit-linear-gradient(#005a00, #001e00); /* For Safari 5.1 to 6.0 */
   background: -o-linear-gradient(#005a00, #001e00); /* For Opera 11.1 to 12.0 */
   background: -moz-linear-gradient(#005a00, #001e00); /* For Firefox 3.6 to 15 */
   background: linear-gradient(#005a00, #001e00); /* Standard syntax */
	border-top: 8px solid #82c120;
	border-bottom: 8px solid #82c120;
	z-index: 3;
	text-align: center;}

.description {
	margin: auto;
	position: relative;
	text-align: center;}
	@media all and (min-width: 1366px) {
		.description {width: 63%;}
	}
	@media all and (min-width: 1024px) and (max-width:1365px) {
		.description {width: 80%;}
	}
	@media all and (max-width:1023px) {
		.description {width: 98%;}
	}

.attendees {
	margin: auto;
	max-width: 330px;
	box-sizing: border-box;
	padding: 0px 10px 0px;
	background: #ffffff;
	border-top: 8px solid #82c120;
	border-bottom: 8px solid #82c120;
	text-align: center;
	position: relative;}
	@media all and (max-width:330px) {
		.attendees {width: 96%;}
	}

.processsections{
	box-sizing: border-box;
	width: 100%;
	margin: auto;
	position: relative;
	padding-top: 50px;
	padding-bottom: 20px;
	z-index: 3;
	text-align: center;}


h2.percentage {font-family: percentfont, sans-serif;
	font-size: 54px;
	line-height: 54px;
	letter-spacing: 1px;
	margin: 0px 0px -2px 0px;
	text-transform: uppercase;
	color:#005a00;}
h6.completed {
	font-family: darwin, sans-serif;
	font-size: 12px;
	line-height: 12px;
	margin: -2px 0px 2px 0px;
	text-transform: uppercase;
	color:#005a00;}
.percentbackground {
	margin: auto;
	padding: 10px 0px 33px;
	width: 230px;
	height: 230px;
	position: relative;
	text-align: center;
	z-index: 8;}
.percentheader {
	top: 0px;
	left: 0px;
	width: 230px;
	height: 230px;
	padding: 95px 0px 0px;
	position: absolute;
	z-index: 10;}
h4.progresssubhead {
	font-family: densebold, sans-serif;
	font-size: 21px;
	line-height: 21px;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin: 0px;
	color:#ffffff;}

#goals {
	box-sizing: border-box;
	width: 100%;
	margin: auto;
	position: relative;
	padding-top: 50px;
	padding-bottom: 0px;
	z-index: 3;
	text-align: center;}
.areagoals {
	box-sizing: border-box;
	width: 100%;
	margin: auto;
	position: relative;
	padding-top: 40px;
	padding-bottom: 10px;
	z-index: 3;
	text-align: center;}
	
.goalprogressparent-gray {
	display: flex;
	position: relative;
	z-index: 4;
	text-align: left;
	margin: 12px 0px 12px 0px;
	flex-direction: row;
	align-items: center;
	border-top: 8px solid #a0a0a0;
	border-bottom: 8px solid #a0a0a0;
	background-color: #e6e6e6;
	flex-wrap:nowrap;}
.goalprogressparent-yellow {
	display: flex;
	position: relative;
	z-index: 4;
	text-align: left;
	margin: 12px 0px 12px 0px;
	flex-direction: row;
	align-items: center;
	border-top: 8px solid #ffc800;
	border-bottom: 8px solid #ffc800;
	background: #ffffb4;
	flex-wrap:nowrap;}
.goalprogressparent-green {
	display: flex;
	position: relative;
	z-index: 4;
	text-align: left;
	margin: 12px 0px 12px 0px;
	flex-direction: row;
	align-items: center;
	background: #b4ffb4;
	border-top: 8px solid #00dc00;
	border-bottom: 8px solid #00dc00;
	flex-wrap:nowrap;}
	.goalprogresschild-title {
		box-sizing: border-box;
		flex: 1 1 50px;
		max-width: 50px;
		padding: 5px 2px 5px 2px;
		position: relative;
		text-align: center;
		justify-content: center;
		z-index: 1;}
	.goalprogresschild-description {
		box-sizing: border-box;
		flex: 1 1 400px;
		max-width: 400px;
		padding: 5px 4px 5px 4px;
		position: relative;
		text-align: left;
		justify-content: center;
		z-index: 1;}
	.goalprogresschild-status {
		box-sizing: border-box;
		flex: 1 1 60px;
		max-width: 100px;
		position: relative;
		text-align: left;
		justify-content: center;
		z-index: 1;}
	.goalprogresschild-notes {
		box-sizing: border-box;
		flex: 1 1 400px;
		padding: 5px 0px 5px 4px;
		position: relative;
		text-align: left;
		justify-content: center;
		z-index: 1;}
	h4.progressnumber {
		font-family: eamescentury, serif;
		font-size: 16px;
		line-height: 16px;
		text-transform: uppercase;
		letter-spacing: 1px;
		margin: 0px;
		color:#000000;}
	p.progresschart {
		font-family: darwin, sans-serif;
		font-size: 15px;
		line-height: 18px;
		margin: 0px;
		color:#000000;}
		@media all and (max-width:1023px) {
	p.progresschart {
		font-size: 14px;}
}