body {padding:0;margin:0;}

/*Class Nav*/
#nav {z-index:100;background-color:#1b1b1b;width:100%;font-family:pt-sans,sans-serif;position:fixed;top:0px;font-weight:normal;font-size:1em;padding: 10px 20px 10px;overflow:auto;}
#nav:after{clear:both;}
#centered{padding: 0 10%;}
#navigation{list-style-type:none;}
#nav ul{float:left;margin:0;padding:0;}
#nav ul li {display:inline; padding:10px;color:#999;}
#nav a.title{font-size:1.25em;margin:3px 20px 0 0;}
#nav a{text-decoration:none;color:rgba(155,155,155,1);line-height:1.25em;}
#nav a:hover {color:rgba(255,255,255,1);}
#nav a,#nav ul li {float:left;display:block;width:auto;font-size:0.875em;}

#spacer {width:100%; height:1px;margin-top:60px;}
@media all and (max-width:1024px) {
	#spacer {margin-top:80px;}
}
@media all and (max-width:769px) {
	#spacer {margin-top:120px;}
}
#titlered{
	text-align:left;
	font-size: 8.25em;
	color:white;
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: #8C1717;
	margin-left:2%;
	margin-top: 0px;
}
#subheaddiv{
	width:800px;
	margin-top:-100px;
	margin-left: 4%;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: white;
}
#subhead{
	font-family: Cubano;
	font-size: 2.5em;
	color:#8C1717;
}
#page_wrap {
	width:100%;
	margin:0 auto;
}
body{
	font-family: pt-sans,sans-serif;
	background:black;
}
.bigvid{
	width:100%;
	margin:-10px;
	position: fixed;
	z-index: -1;
}
#lakefillVid3, #lakefillVid6, #lakefillVid9, #lakefillVid12{
	width: 1920px;
	position:fixed;
	z-index: -1;
}
.lakefillPicture{
	background-image: url("splashimagefinal.png");
	background-repeat:no-repeat;
	background-size: cover;
	background-position: top right;
	width:100%;
	position: fixed;
	z-index: -1;
}
#homepage{
	width:100%;
}
h1 {
	font-family:Cubano;
}
#featureTitle {
	margin-left: 5%;
}
/*introtext is for the blurb right under the main title on splash page*/
#transparentIntro, #introtext {
	position:relative;
}
span#byline{
	position: relative;
	font-size: .8em;
	font-weight: bold;
	padding: 0 15px;
}
#featureHome {
	text-align:left;
	font-size: 1.25em;
	color:black;
	margin-left:2%;
	margin-top: 10px;
	position: absolute;
	cursor: pointer;
	-webkit-text-stroke: 1px white;
	font-weight: bold;
}
#transparentIntro {
	width:35.57%;
	height:60.85%;
	background-color:rgba(255,255,255,.8);
	padding:15px;
	margin-left: 3%;
}
#introtext {
	width:90%;
	height:90%;
	font-size:1.7em;
	text-align: left;
}
.button {
	cursor: pointer;
	border-top: 1px solid #a7f797;
background: #a90329; /* Old browsers */
	background: -moz-linear-gradient(top,  #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
   padding: 12.5px 25px;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 18pt;
   font-family: pt-Sans, sans-serif;
   text-decoration: none;
   vertical-align: middle;
   }
.button:hover {
	background: #800220; /* Old browsers */
	background: -moz-linear-gradient(top,  #800220 0%, #6c021a 44%, #520013 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#800220), color-stop(44%,#6c021a), color-stop(100%,#520013)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #800220 0%,#6c021a 44%,#520013 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #800220 0%,#6c021a 44%,#520013 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #800220 0%,#6c021a 44%,#520013 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #800220 0%,#6c021a 44%,#520013 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#800220', endColorstr='#520013',GradientType=0 ); /* IE6-9 */
   color: #ccc;
}
.button:active {
background: #5a0216; /* Old browsers */
background: -moz-linear-gradient(top,  #5a0216 0%, #4d0113 44%, #3a000e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5a0216), color-stop(44%,#4d0113), color-stop(100%,#3a000e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #5a0216 0%,#4d0113 44%,#3a000e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #5a0216 0%,#4d0113 44%,#3a000e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #5a0216 0%,#4d0113 44%,#3a000e 100%); /* IE10+ */
background: linear-gradient(to bottom,  #5a0216 0%,#4d0113 44%,#3a000e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5a0216', endColorstr='#3a000e',GradientType=0 ); /* IE6-9 */

}
#startbutton{
	position: absolute;
	left:83%;
	top:180px;
}
#toAppsButton, #toConclusion{
	width:50px;
	margin-left:85%;
	margin-bottom:10px;
}
#toAppsButton{
	clear:both;
}
#toGamification {
	width:50px;
	margin-left: 5%;
	margin-top: -70px;
}

/*Begin the CSS for the navigation bar*/
/*.bubbletop{
	position:relative;
	top:-25px;
	left:-35px;
}
.bubblebottom{
	position: relative;
	top:20px;
	left:-25px;
}
.bubble 
{
position: relative;
width: 140px;
height: 50px;
padding: 10px;
background: rgba(255,255,255,.75);
border: #7F7F7F solid 4px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.bubble:after 
{
content: "";
position: absolute;
bottom: -15px;
left: 24px;
border-style: solid;
border-width: 15px 15px 0;
border-color: rgba(255,255,255,.75) transparent;
display: block;
width: 0;
z-index: 1;
}

.bubble:before 
{
content: "";
position: absolute;
top: 74px;
left: 21px;
border-style: solid;
border-width: 18px 18px 0;
border-color: #7F7F7F transparent;
display: block;
width: 0;
z-index: 0;
}
.bubblebelow
{
position: relative;
width: 140px;
height: 50px;
padding: 10px;
background: rgba(255,255,255,.75);
border: #7F7F7F solid 4px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.bubblebelow:after 
{
content: "";
position: absolute;
top: -15px;
left: 24px;
border-style: solid;
border-width: 0 15px 15px;
border-color: rgba(255,255,255,.75) transparent;
display: block;
width: 0;
z-index: 1;
}

.bubblebelow:before 
{
content: "";
position: absolute;
top: -22px;
left: 21px;
border-style: solid;
border-width: 0 18px 18px;
border-color: #7F7F7F transparent;
display: block;
width: 0;
z-index: 0;
}*/
#allmarkers{
	width:705x;
	height: 140px;
	margin: 0px 0 0 0;
	padding-top: 10px;
	padding-left: 20%;
	background-color:rgba(205,205,205,.8);
}
.markers{
	float:left;
	margin-right: 15%;}
#navi {
	position: absolute;
	width:53%;
	height:130px;
	position:relative;
	bottom:140px;
	margin-left:45%;
}
.navword{
	text-align: center;
	margin: 20px 0 0 -60px;
	cursor: pointer;
	font-weight: bold;
}
#word4{
	margin-top: 59px;
}
.flag{
	width:55px;
	position: relative;
	cursor: pointer;
}
.flag:hover{
	cursor: pointer;
}
/*#flagone{
	right:12%;
	top:35%;
}
#flagtwo{
	right:38%;
	top:25%;
}
#flagthree{
	right:28%;
	top:32%;
	margin-bottom: 10%;
}
#flagfour{
	right:5%;
	top:43%;
}*/
.flag {
	width:50px;
	cursor: pointer;
}
/*#flagnav {
	width:775px;
	margin: -20px auto;
}
#flagone {
	position:relative;
	top:30px;
	left:0px;
}
#flagtwo {
	position:relative;
	top:30px;
	left:200px;
}
#flagthree {
	position:relative;
	top:30px;
	left:400px;
}
#flagfour {
	position:relative;
	top:30px;
	left:600px;
}*/
/*#wordnav {
	width:775px;
	margin:20px auto;
	cursor: pointer;
}
#wordone, #wordtwo, #wordthree, #wordfour {
	float:left;
	font-weight:bold;
	text-align: center;
	font-size:1.15em;
}
#wordone {
	position:relative;
	top:30px;
	left:-45px;
}
#wordtwo {
	position:relative;
	top:30px;
	left:145px;
}
#wordthree {
	position:relative;
	top:30px;
	left:335px;
}
#wordfour {
	position:relative;
	top:30px;
	left:510px;
}*/

/*Begin CSS for FeatureBox*/
.feature {
	clear:left;
	width:85.857142857143%;
	height:700px;
	overflow:scroll;
	margin-top:10%;
	margin-left: 12%;
	background-color: rgba(255,255,255,.8);
	z-index: 1;
}
.featuretext {
	width:57.142857142857%;
	margin-top:1.428571428571%;
	margin-left:10.714285714286%;
	font-size:1.1em;
}

/*sidenav css*/
.sidenav{
	position: absolute;
	margin-top: 8%;
	margin-left: .3%;
	width:10%;
	height:56.14%;
	background:rgba(255,255,255,.75);
	padding: 9.7px;
}
.sideflagclass img{
	width:90%;
	margin-bottom:10%;
	cursor: pointer;
}
/*.navcircle{
	width:60px;
	height: 60px;
	border-radius: 60px;
	position: relative;
	float:left;
	clear:both;
	left:6%;
	color:white;
	text-align: center;
	cursor: pointer;
	border:2px solid white;
	background: #a90329; /* Old browsers
	background: -moz-linear-gradient(top,  #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+
	background: -webkit-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ 
	background: -o-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ 
	background: -ms-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ 
	background: linear-gradient(to bottom,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 
}
#circlehome{
	top:2%;
}
#circleone{
	top:6%;
}
#circletwo{
	top:10%;
}
#circlethree{
	top:14%;
}
#circlefour{
	top:18%;
}
span.name{
	position: absolute;
	text-align: center;
	top:20px;
	left:24px;
}
#circlehome span.name{
	left:12px;
}*/
/*End CSS for FeatureBox*/

/*Begin CSS for Wearable Tech*/

#rachelschwab {
	width:87.714285714286%;
	margin:0 auto;
	position: relative;
}
#rachelschwab img {
	width:100%;
}
.rollover {
	background-color:#f5ed30;
	width: 15%;
	display: none;
	padding: 5px;
}
.shoes {
	position: absolute;
	left: 5%;
	top: 50%;
	z-index: 2;
}
.shuffle {
	position: absolute;
	left: 35%;
	top: 20%;
	z-index: 2;
}
.shirt {
	position: absolute;
	left: 47%;
	top: 10%;
	z-index: 2;
}
.watch {
	position: absolute;
	left: 75%;
	top: 10%;
	z-index: 2;
}
h5 {
	font-family: PT-Sans, sans-serif;
	font-size: .75em;
}
#rolloverText {
	font-size: .75em;
}
#inlinePhoto{
	float: right;
	padding:5px;
	right: 20px;
	width:42.857142857143%;
	margin-right: -17.857142857143%;
	margin-left: 2.857142857143%;
}
#fuelbandsCaption{
	clear: right;
	float:right;
	font-weight: bold;
	width: 100%;
	margin: 0 auto;

}
#fuelbandPic {
	float: right;
	width:100%;
}
#wearableText{
	float:left;
}
/*End CSS for Wearable Tech*/

/*Begin CSS for Apps*/
#appcredits{
	position:absolute;
	right:3%;
	margin-top: 500px;
	font-size: .75em;
	transform:rotate(270deg);
	-ms-transform:rotate(270deg); /* IE 9 */
	-webkit-transform:rotate(270deg); /* Safari and Chrome */
}
#appsIntroText {
	float:left;
	width:40%;
	margin-left:5%;
}
#directions{
	margin-top: 20px;
}
#appdirections{
	font-weight: bold;
}
#apps {
}
#iPhone {
	background-image:url("iphoneshell.png");
	background-repeat:no-repeat;
	width:340px;
	height:664px;
	margin-left:65%;
	margin-top:-65px;
}
#appScreen {
	width:287px;
	height:320px;
	position: absolute;
	margin: 120px 0 0 24px;
}
.appIcon img {
	cursor: pointer;
	border-radius:9.5px;
	width:52px;
	margin-left:17px;
	margin-top:35px;
	float:left;
}
#homeButton {
	width:70px;
	height:70px;
	border-radius: 70px;
	position: absolute;
	margin: 570px 0 0 140px;
	cursor: pointer;
}
/*Begin CSS for iPhone home screen*/
.iconName {
	font-family: Helvetica, sans-serif;
	color: white;
	text-align: center;
	font-size: .4em;
	position:absolute;
	text-shadow: 1px 1px 1px black;
}
#couchto5kappname{
	top: 90px;
	left: 18px;
}
#fitocracyappname{
	top: 90px;
	left: 93px;
}
#fullfitnessappname{
	top: 90px;
	left: 157px;
}
#gorillaappname {
	top: 90px;
	left: 232px;
}
#loseitappname {
	top: 178px;
	left: 27px;
}
#fuelbandappname {
	top: 178px;
	left: 94px;
}
#nikerunningappname{
	top: 178px;
	left: 164px;
}
#trainingappname{
	top: 178px;
	left: 233px;
}
#p90xappname{
	top: 266px;
	left: 29px;
}
#teemoappname{
	top: 266px;
	left: 97px;
}
#zombiesappname{
	top: 266px;
	left: 164px;
}
.allAppText {
	position:absolute;
	margin:109px 0 0 28px;
}
.appText {
	width:287px;
	height:413px;
	clear:left;
	background-image: linear-gradient(bottom, rgb(25,76,101) 0%, rgb(118,159,177) 77%, rgb(154,191,213) 100%);
	background-image: -o-linear-gradient(bottom, rgb(25,76,101) 0%, rgb(118,159,177) 77%, rgb(154,191,213) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(25,76,101) 0%, rgb(118,159,177) 77%, rgb(154,191,213) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(25,76,101) 0%, rgb(118,159,177) 77%, rgb(154,191,213) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(25,76,101) 0%, rgb(118,159,177) 77%, rgb(154,191,213) 100%);
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, rgb(25,76,101)),
		color-stop(0.77, rgb(118,159,177)),
		color-stop(1, rgb(154,191,213))
);	/*display:none;*/
}
#appName{
	font-weight:bold;
	font-size:1.25em;
	text-align:center;
	padding-top: 20px;
}
.rating{
	width:150px;
	text-align: center;
	margin: -10px auto 20px auto;	
}
.summary{
	margin-top:-20px;
	padding:20px;
	font-size: .8em;	
}
.star {
	width:20px;
}
.price {
	position:relative;
	padding-left: 20px;
}
/*End CSS for Apps*/

/*Begin CSS for Gamification*/
#gallery-display{
	margin-left: 10%;
	float:left;
}
#captionbar{
	clear:left;
	width:800px;
	margin: 0 0 10px 180px;
}
.gamcaption{
	margin: 0 auto;
	width: 800px
}
#thumb-nav{
	margin-left: 10%;
	width:800px;
}
#centerthumbnav{
	margin: 0 auto;
	width:368px;
}
.thumb{
	cursor: pointer;
	opacity: .5;
}
.thumbactive,.thumb:hover{
	opacity:1;
}
/*Begin CSS for Conclusion*/
#concVideos {
	margin: 0 auto;
}
.conclusionVid {
	float:left;
	margin-left:5%;
}
.captions{
	clear: left;
}
.captionSpacing{
	width:320px;
	float:left;
	margin-left: 5%;
}
#concNameOne, #concNameTwo, #concNameThree {
	float:left;
	text-align: center;
	font-weight:bold;
}
#lastpagetext {
	clear:left;
	margin-top:30px;
}

/*Begin Media Queries*/
@media all and (max-width:1332px) {
.vidSize {
	float:left;
	margin-left:5%;
	height:195px;
	width: 260px;
}
.captions{
	clear: left;
}
.captionSpacing{
	width:260px;
	float:left;
	margin-left: 6%;
}
#lastpagetext {
	clear:left;
	margin-top:30px;
}
@media all and (min-device-width : 320px) and (max-device-width : 480px) {
	.feature{
	clear:left;
	width:85.857142857143%;
	height:700px;
	overflow:scroll;
	margin:auto;
	background-color: rgba(255,255,255,.8);
	z-index: 1;
	}
	#appsIntroText {
	width:40%;
	margin-left:5%;
	}
}
@media all and (max-width: 1100px) {
#gamvideo{
	width:400px;
	height:225px;
}
#captionbar{
	clear:left;
	width:400px;
	margin: 0 0 10px 90px;
}
.gamcaption{
	margin: 0 auto;
	width: 400px;
}
#thumb-nav{
	clear:both;
	margin-left: 10%;
	width:400px;
}
@media all and (max-width:1124px) {
.vidSize {
	float:left;
	margin-left:5%;
	height:150px;
	width: 200px;
}
.captions{
	clear: left;
}
.captionSpacing{
	width:200px;
	float:left;
	margin-left: 6%;
}
#lastpagetext {
	clear:left;
	margin-top:30px;
}
}
@media all and (max-width:1170px) {
#title{
	text-align:left;
	font-size: 5.25em;
	color:white;
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: #8C1717;
	margin-left:2%;
	margin-top: 0px;
	position: absolute;
	top:65px;
}
#subheaddiv{
	width:800px;
	margin-top:-100px;
	margin-left: 4%;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: white;
	position: absolute;
	top:240px;
}
#subhead{
	font-family: Cubano;
	font-size: 1.5em;
	color:#8C1717;
}
#transparentIntro {
	width:35.57%;
	height:60.85%;
	background-color:rgba(255,255,255,.8);
	padding:15px;
	margin-top: 0px;
	margin-left: 3%;
}
#introtext {
	width:90%;
	height:90%;
	font-size:1.1em;
	text-align: left;
}