@charset "UTF-8";
/* CSS Document */

#logo {
	position: absolute;   /* I changed this from "fixed" on desktop and tablet. With "fixed" on mobile, the logo would break oddly after the phone was tilted to horizontal, then back to portrait. This is not an ideal fix since the logo will not stay fixed at the top. Needs more investigation. I tried changing the dic from ID to class on 4/2/22, and it did not work.  */
}

#logo a {
	margin-left: 8%;
	margin-right: 8%;
	color: black;
	font-size: 1.25em; /* make same size as "logo a:hover" 1.25em = 4.8vw   */
}

#logo a:hover  {
	font-size: 1.25em;  /* make same size as "logo a" so it doesn't increase  */
}

#banner {
	display: none;
}

#mobile_banner {
	display: block;
	float: left;
	clear: none;
	position: relative;
	margin-bottom: 0px;
	margin-top: 0px; /* was 67 for desktop. change display to block, and then I didn't need a top margin. To not cover up the logo fixed to the top. Must be equal or greater to the height of the logo bar. */
}

/* This is the large headline in the top photo banner */

#mobile_banner h2 {
	display: block;
	font-family: Arial, Helvetica;
	font-size: 3em;
	color: #0a6bee;  /* blue from other style sheets: #0a6bee */
	font-weight: bold;
	text-transform: none;
	position: absolute;
	margin-top: 40px;
	left: 8%;
	right: 8%;
	text-align: left;
	line-height: 105%;
}

#mobile_banner img {
	display: block;
	height: auto;
	width: 100%;
}


#banner2 {
	display: none;
}


/* Mobile buttons */

#mobile_buttons {
	display: block;
	margin-top: 50px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0px;
	text-align: center;
	border: 2px none #F69;	
}

#mobile_buttons a  {
	text-decoration: none;
	font-family: Arial, Helvetica;
	font-weight: bold;
	border-radius: 22px;
	font-size: 17px;
	padding-top: 12px;
	padding-bottom: 12px;
	padding-left: 18px;
	padding-right: 18px;
	color: #FFF;
	margin-top: 0px;
	letter-spacing: 0px; /* % doesn't seem to work */
	box-shadow: 3px 3px 6px #B2B2B2; /* first two numbers: right and down, third numner is amount of blur, last is color */
	}

#mobile_buttons a:link {
	/*background-color: #f28d2a; use for solid, non gradient */
	background-image: linear-gradient(to bottom right, #ffb245, #cc6601); /* for gradient, first color is left, second is right */
}

#mobile_buttons a:hover  {
	color: #FFF;
	/*background-color: #999999; use for solid, non gradient. Not revelant on mobile anyway. */
	background-image: linear-gradient(to bottom right, #CCC, #666); /* for gradient, first color is left, second is right */
}

#buttons {
	display: none;
}

/* end mobile buttons */


#fullwidthtext {
	display: block;
	}	
	
#fullwidthtext p {
	margin-left: 8%;
	margin-right: 8%;
	font-size: 1.3em;
	line-height: 150%; /* was 160% for desktop */
	}
	
#fullwidthtext h1 {
	margin-left: 8%;
	margin-right: 8%;
	font-size: 1.7em;
	margin-top: 24px;
	}
	
#fullwidthtext h2 {
	margin-left: 8%;
	margin-right: 8%;
	font-size: 1.7em;
	margin-top: 14px;
	font-weight: normal;
	}
	
#fullwidthtext h3 {
	margin-left: 8%;
	margin-right: 8%;
	font-size: 1.9em;
	line-height: 120%;
	}
	
#fullwidthtext h4 {
	margin-left: 8%;
	margin-right: 8%;
	}
	
#fullwidthtext hr {
	margin-left: 8%;
	margin-right: 8%;
	}
	
#backgroundwrapper {
	display: none;
}	

#mobile_backgroundwrapper {
	float: left;
	clear: left;
	width: 100%;
	border: 1px none #F96;
	margin-top: 30px;
	margin-bottom: 30px;
	padding-top: 15px;
	padding-bottom: 30px;
	background-color:#F2F2F2;
}


#smallphotocontainer {
	display: none;
}

/* KEEP all the specs because mobile_smallphoto is unique to mobile */

#mobile_smallphoto img {
	display: block;
	height: auto;
	margin-top: 40px;
	margin-left: 8%;
	margin-right: 8%;
	width: 84%; /* if changing left and right margins, adjust this width to equal 100% */
	/* box-shadow: 5px 5px 10px #999; first two numbers: right and down, third numner is amount of blur, last is color */
}

#mobile_smallphoto h2 {
	display: block;
	font-family: Roboto, sans-serif;
	font-size: 1.9em;
	color: #0a6bee;
	font-weight: bold;
	text-align: left;
	margin-top: 14px;
	margin-left: 8%;
	margin-right: 8%;
}

#mobile_smallphoto p {
	display: block;
	font-family: Arial, Helvetica;
	font-size: 1.2em;
	color: black;
	font-weight: bold;
	text-align: left;
	margin-top: 6px;
	line-height: 140%;
	margin-left: 8%;
	margin-right: 8%;
}
#mobile_smallphoto a:link  {
	color: blue;
}

#mobile_smallphoto a:visited  {
	color: blue;
}

#mobile_smallphoto a:hover  {
	color: #E38226;
}

#mobile_smallphoto a:active  {
	color: black;
}


/* I inserted this before headline "How Online Training Can Work for You" I couldn't easily figure out how to put space above this div. So I inserted with blank box. */

#mobile_spacer {
	display: block;
	float: left;
	clear: left;
	width: 100%;
	height: 25px;
	border: 1px none #F96;
}

/* mobile footer */

#footer {
	margin-top: 50px;
}

#footer p {
	font-size: 1em;
	margin-left: 8%;
	margin-right: 8%;
	
}

#footer a  {
	font-size: 1em;
	margin-left: 8%;
	margin-right: 8%;
	}


/* used for logo.  */

#footer h3 {
	font-size: 1.3em;
	}