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

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	
	vertical-align: baseline;
	background: transparent;
	
}

html {
	overflow-y: scroll;
	overflow-x: hidden;
	height: 100%;
	background-color: #414141;
}

body {
	min-height: 100%;
}

h1 {
	font-size: 65px;
	line-height: 65px;
	margin: 0 0 0 0;
	color: #FFF;
	font-family: 'Oswald', sans-serif;
	text-shadow: 0 0 15px #000;
}

h2 {
	font-size: 24px;
	margin: 16px 0 8px 0;
	color: #1fb5ff;
	font-family: 'Oswald', sans-serif;
}

h3 {
	font-size: 45px;
	margin: 0;
	color: #00C759;
	font-family: 'Oswald', sans-serif;
	font-weight: 100;
	text-shadow: 0 0 15px #000;
}

h4 {
	font-size: 18px;
	margin: 16px 0 8px 0;
	color: #1fb5ff;
	font-family: 'Oswald', sans-serif;
}

p, li {
	margin-bottom: 10px;
	line-height: 24px;
	font-size: 16px;
	color: #414141;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

li { margin-left: 20px; }

label { padding: 0 10px; display: inline-block; line-height: 50px; background-color: #1fb5ff; color: white; font-weight: bold; border: 2px outset; cursor: pointer; }

input[type="submit"] { width: 100%; max-width: 200px; padding: 10px; font-weight: bold; font-size: 18px; }

#debug {position: fixed; top: 0; right: 0;}

#hero {	
		width: 100%;
		height: 200px; 
		background: #314E60; 
}

	#section-home #hero {
			height: 300px; 
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center center;
			background-image: url("../images/phatbraces-hero.jpg");
	}
	
	#headline_wrapper { position: relative; width: 100%; width: calc(100% - 15px); padding-right: 15px; max-width: 900px; margin: auto; height: 100%; }
	#headline { position: absolute; bottom: 20px; left: 0; }

.announcement {
	display: inline-block;
	margin: 0 0 15px 15px;
	width: 180px;
	padding: 15px;
	float: right;
	background-color: #00C759;
	background-position: -20px 50%;
	background-repeat: no-repeat;
}

.announcement * {
	font-family: 'Oswald', sans-serif;
	text-shadow: none;
	color: white;
}

.announcement a:link, .announcement a:visited {
	text-decoration: none;
	color: #b6f3d1;
	font-family: 'Oswald', sans-serif;margin-bottom: 5px;
	line-height: 18px;
	text-transform: uppercase;
	font-size: 110%;
}

.announcement a:hover, .announcement a:active, .announcement a:focus {
	text-decoration: underline;
	color: #FFF;
}

.announcement a {
	font-family: 'Oswald', sans-serif;
	color: #fff !important;
	font-size: 16px !important;
	line-height: 20px !important;
}

.announcement h3 {
	font-size: 25px !important;
	line-height: 25px;
	padding: 0;
	margin: 0 0 10px 0;
	color: #fff;
}

.announcement p {
	font-family: 'Oswald', sans-serif;
	font-size: 16px !important;
	line-height: 20px !important;
}

.main_content { min-height: 600px; background-color: #FFF; padding: 20px 0 50px 0;}

.full_width_wrapper {position: relative; width: 100%; width: calc(100% - 15px); padding: 0 15px; max-width: 900px; margin: auto; }
	.page_header { height: 85px; }
	.page_header p { padding-top: 15px; color: #9C9C9C; font-weight: bold; float: right; } 
	
.green_box { background-color: #d1ffe6; padding: 10px 0 30px 0; margin: 20px 0; }
	.green_box h2 { color: #00C759; }
	.white_box { background-color: #FFF; }
	
	#nav_links_wrapper {
		position: relative;
		height: 90px;
		margin: auto;
	}
	
	#nav { width: 100%; height: 30px; padding: 5px; background-color: #414141; text-align: center; } 
	.nav_links { color: white; }
	
	.green_link { position: relative; color: #00C759 !important; height: auto; padding-top: 1px; }
	
	.nav_link_container {
		position: relative;
		width: 100px !important;
		height: auto;
		padding: 5px 12px;
		display: inline;
		z-index: 10000 !important;
	}
	
	.sub_nav_links_container {
		position: absolute;
		left: 0;
		top: 28px;
		padding: 5px 12px;
		background-color: #414141;
		text-align: left;
		display: none;
	}
	
	.nav_link_container a {
		width: 100%;
		width: calc(100% - 24px);
		font-size: 20px;
		font-family: 'Oswald', sans-serif;
		line-height: 30px;
		padding: 0 3px 3px 3px;
		white-space: nowrap;
		color: white;
		text-decoration: none;
	}
	
	.nav_link_container a:link, .nav_link_container a:visited {
		text-decoration: none;
		color: #FFF;
	}
					
	.nav_link_container a:hover, .nav_link_container a:active, .nav_link_container a:focus {
		text-decoration: none;
		background: #1fb5ff;
		color: white !important;
	}

#bmc-logo { position: absolute; left: 0; top: 0; }

.button { 
	font-size: 24px;
	color: white;
	font-family: 'Oswald', sans-serif;
	margin: 10px 0;
	padding: 5px 14px 8px 8px; 
	background-color: #00C759; 
	display: inline-block;
	text-decoration: none;
}
	.button:hover, .button:active, .button:focus {
		background: #1fb5ff;
	}

#footer { width: 100%; background-color: #414141; padding: 15px 0; }
	#footer .full_width_wrapper { text-align: right; }
	#footer .full_width_wrapper p { color: white; }

.location_column {
	height: 100%;
}

.location {
	display: none;
	margin: 20px 10px 0 0;
	width: 350px;
	float: left;
}

	.location p, .location h4 {
		padding: 0;
		margin: 0;	
	}

#locations_map {
	position: relative;
	height: auto;
	width: 800px;	
}
	
#other_locations {
	position: absolute;
	top: 390px;
	right: 20px;
	background: white;
	color: black;
	padding: 5px;
	border: 1px solid black;
	text-align: center;	
}

	#other_locations .map_state, #other_locations strong {
		display: block;
		color: black;	
		cursor: pointer;
	}

#no_locations {
	display: none;
	page-break-inside:avoid;
	-webkit-column-break-inside: avoid;	
}

.image_right { float: right; margin: 0 0 15px 15px; }	

.rule { border-top: 1px solid #FFF; margin: 10px 0; }
.rule_gray { border-top: 1px solid #CCC; margin: 30px 0; }

.blank { position: relative; }
.clear { clear: both; }

@media screen and (max-width: 950px) {
	#questions { font-size: 11px; }
	#headline { left: 15px; width: calc(100% - 200px);}
	#headline h1 { font-size: 65px; }
	#headline h3 { font-size: 30px; line-height: 30px; margin-top: 20px; }
	#home_nav_link { display: none; }
}

@media screen and (max-width: 600px) {
	#questions { display: none; }
	#brace-illustration { width: 100px; height: 178px; }
	#my_brace { width: 100px; }
	#height-label { top: 67px; left: 0; font-size: 10px !important; }
	#length-label { top: 162px; left: 44px; font-size: 10px !important; }
	.nav_links a { font-size: 14px; padding: 2; line-height: 16px;}
	p { font-size: 14px; line-height: 18px;}
	#headline h1 { font-size: 50px; line-height: 50px; }
	h2 { font-size: 18px; }
	.page_header { height: 50px; }
	#bmc-logo-image { height: 50px; width: 126px; }
	.nav_link_container { padding: 5px; }
	.nav_link_container a { font-size: 16px; }
}

@media screen and (max-width: 400px) {
	.nav_link_container { padding: 0; }
	.nav_link_container a { font-size: 14px; }
	h2 { font-size: 18px; }
	#headline h1 { font-size: 30px; }
	#headline h3 { font-size: 20px; line-height: 30px; margin-top: 20px; }
}