*{
	font-family: 'PT Sans', sans-serif;
	margin: 0; 
	padding: 0; 
}

/* Resets */
h1, h2, h3, h4, h5{ margin: 0; padding: 0; }
h1{ font-size: 2.5em; }
h2{ font-size: 2em; }
h3{ font-size: 1.75em; }
h4{ font-size: 1.5em; }
h5{ font-size: 1.25em; }

p{ margin: 0; padding: 0; font-size: 1em; }
p.font2{ font-size: 1.2em; }
p.font3{ font-size: 1.5em; }

button{ padding: 4px 12px 4px 12px; border-radius: 4px; border: none; text-transform: uppercase; cursor: pointer; }

/* Clears & alignments */
	.clearsLeft{ clear: left; }
	.clearsRight{ clear: right; }
	.clearsBoth{ clear: both; }
	.clearNone{ clear: none; }
	.justLeft{ text-align: left; }
	.justRight{ text-align: right; }
	.justCenter{ text-align: center; }
	
	.minHeight{ height: 8px; }
	.avgHeight{ height: 12px; }
	.maxHeight{ height: 24px; }
	

/* Containers */
	.fullScreen{ clear: both; margin: auto; text-align: center; width: 100%; }

	.shadowBox{ position: absolute; z-index: 3; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.8; --moz-opaicty: 80%; }
	.shadowContent{ position: relative; z-index: 10; top: 10%; width: 100%; clear: both; margin: auto; text-align: center; background: #fff; padding: 12px 0 12px 0; }
	.shadowHeading{ width: 90%; clear: both; margin: auto; text-align: center; font-size: 1.5em; }
	.shadowText{ width: 90%; clear: both; margin: auto; text-align: center; font-size: 1em; }

/* Background Elements */
	.bg-dark{ background: #2b2b2b; color: #fff; }
		.bg-dark a{ color: inherit; }
	.white{ color: #fff; }
	.charcoal{ color: #2b2b2b; }
	
	.bg-orange{ color: #fff; font-weight: bold; background: #f26322; }
		
	.bg-orange-charcoal{ color: #fff; background: linear-gradient(180deg, #2b2b2b 58%, #f26322 42%);  }
	
	.bg-light-gray{ background: #f2f2f2; }
		
/* Default is smaller than 576 */
	.col-sm{ width: 100%; }
	.row{ width: 100%; padding: 3px 0 3px 0; overflow: hidden; }
	.pcOnly{ display: none; }
	.logo{ clear: left; float: left; width: auto; margin-left: 3px; }
	.mobileNav{ margin-top: 6px; margin-right: 3px; }
	
	.col-med{ width: 100%; }
	
	.magentoLogo{ margin-left: 48px; margin-right: -48px; }
	.pageFeature{ margin-top: 8px; }
	.featureImage{ margin-top: 36px; }
	.pageFeature .subHeading{ font-size: 1.4em; margin-bottom: 8px; text-align: center; }
	
	.pageText{ width: auto; margin: 0px 12px 12px 12px; text-align: center; padding-top: 12px; }
	.pageText h3{ margin-bottom: 8px; text-align: center; }
	.pageText h4{ margin-bottom: 8px; text-align: center; }
	
	.pageText .bulls, .fifty50 .bulls{ clear: none; float: left; max-width: 100%; text-align: center; margin: 0px 0px 12px 0px; padding: 4px 0 4px 0; }
	.pageText .li, .fifty50 .li{ max-width: 48%; text-align: center; border: none; color: #2d2d2d; background: none; font-weight: bold; line-height: 14px; margin: 0px 0px 0px 0px; font-size: 0.85em; width: 100%; }
	.pageText .bulls h4, .fifty50 .bulls h4{ color: #2b2b2b; margin-top: 0px; text-align: center; margin-bottom: 0; padding-bottom: 0;  }
	
	.threeBoxes{ width: auto; text-align: center; }
	.threeBoxes .boxes{ margin-bottom: 18px; }
	.threeBoxes .boxes p{ margin-top: -3px; font-size: 0.9em;}
	
	.pageImageL, .pageImageR{ width: 100%; }
	.pageTextR{ position: relative; width: 100%; clear: none; float: left; }
	.pageTextL{ position: relative; width: 100%; clear: none; float: left; }
	
	.fifty50 .textCell{ padding-top: 10%; max-width: 100%;  }
	
	.footer{ padding-top: 18px; padding-left: 8px; }
	.fc_content p{ font-size: 0.75em; max-width: 300px; }
	.fc_content a{ font-size: inherit; }
	.footer h5{ font-size: 1.0em; margin-bottom: 8px; }
	
	#navbar ul { list-style-type: none; }
	#navbar ul li{ font-size: 1.2em; margin-right: 12px; line-height: 32px; }
	.magentoLogo{ display: none; }
	
/* Landscape phones */
@media (min-width: 576px){ 
	.col-sm{ width: 100%; }
	
	.logo{ clear: left; float: left; width: auto; margin-bottom: 8px; margin-left: 8px; }
	.mobileNav{ margin-right: 8px; }
	
	.magentoLogo{ margin-left: 48px; margin-right: -48px; }
}

/* Tablets */
@media (min-width: 768px){
	.col-sm{ width: 32%; }
	.col-med{ width: 100%; clear: none; float: left; }
	.pcOnly{ display: none; }

	.shadowContent{ width: 480px; }
	.shadowHeading{ width: 360px; }
	.shadowText{ width: 360px; }
	
	#navbar ul li{ font-size: 1.0em; margin-right: 0; }
	
	.logo{ clear: left; float: left; width: auto; margin-bottom: 8px; margin-left: 8px; }
	.mobileNav{ margin-right: 8px; }
	
	.magentoLogo{ margin-left: 120px; margin-right: -120px; display: inline; }
	
	.pageFeature{ margin-top: 36px; margin-left: 36px; margin-right: -36px; overflow: hidden; }
	.pageFeature h1{ margin-bottom: 8px; }
	.pageFeature p{ max-width: 400px; text-align: center; margin-left: 22%; }
	.pageFeature .subHeading{ font-size: 1.4em; margin-bottom: 8px; text-align: center; margin-right: 60px; }
	.pageFeature .font2{ line-height: 36px; }
	
	.pageText{ text-align: left; }
	.pageText h3{ margin-bottom: 8px; text-align: left; }
	.pageText h4{ margin-bottom: 8px; text-align: left; }
	
	.pageText .bulls, .fifty50 .bulls{ margin: 6px 12px 12px 0px; max-width: 360px; }
	
	.fifty50 { text-align: left !important; }
	.fifty50 .textCell{ padding-top: 10%; max-width: 100%; margin-left: 5%; }
	.fifty50 .li{ text-align: left; }
	.pageImageL, .pageImageR{ width: 50%; }
	.pageImageR{ float: right; }
	.pageTextR{ clear: none; float: left; width: 50%; text-align: left; }
	.pageTextL{ clear: none; float: left; width: 50%; text-align: left; }
	.pageTextR h4, .pageTextL h4{ clear: both; margin-top: 10% !important; text-align: left !important; }
	.pageTextR p, .pageTextL p{ max-width: 80%; margin: auto; margin-top: 12px; }
	
	.featureImage{ margin-top: 24px; margin-bottom: 12px; }
	
	.threeBoxes{ width: 99%; margin-left: 1%; }
	.threeBoxes .boxes{ clear: none; float: left; width: 33%; text-align: center; margin-bottom: 0px; }
	.threeBoxes .boxes img{ width: 95%; }
	.threeBoxes .boxes h4{ font-size: 1.2em; }
	
}

/* large devices */
@media (min-width: 992px){ 
	.col-sm{ width: 32%; clear: none; float: left; }
	.row{ width: 960px; margin: auto; text-align: left; }
	.pcOnly{ display: block; }
	.mobile{ display: none; }
	
	.logo{ clear: left; float: left; width: 15%; }
	.logo img{ width: 100%; }
	.col-med{ width: 50%; clear: none; float: left; }
	
	#navbar ul{ margin: 8px 0 0 0; padding: 0; list-style-type: none; float: right; }
		#navbar ul li{ padding-left: 12px; clear: none; float: left; }
			#navbar ul li a{ text-transform: uppercase; color: #2d2d2d; text-decoration: none; font-weight: normal; }
			#navbar ul li button{ margin-top: -12px; }
	
	.bg-orange-charcoal{ color: #fff; background: linear-gradient(90deg, #2b2b2b 70%, #f26322 30%);  }
	.magentoLogo{ margin-left: 0; margin-right: 8px; }
	.pageFeature p{ max-width: 400px; text-align: left; margin-left: 0px; }
	.pageText{ padding-top: 12px !important; }
	.pageText .bulls, .fifty50 .bulls{ margin: 6px 12px 12px 0px; }
	
	/*.pageTextR h4, .pageTextL h4{ clear: both; margin-top: 15% !important; margin-left: 10%; }
	.pageTextR p, .pageTextR p{ max-width: 80%; margin: auto; margin-top: 12px; text-align: left !important; }
	*/
	.threeBoxes .boxes img{ width: auto; }
	.threeBoxes .boxes h4{ font-size: 1.5em; }
	
	.footer{ padding-top: 18px; padding-left: 0px; }
}

/* extra large devices */
@media (min-width: 1200px){
	h1{ font-size: 3em; }
	h2{ font-size: 2.75em; }
	h3{ font-size: 1.75em; }
	h4{ font-size: 1.5em; }
	h5{ font-size: 1.25em; }
	.row{ width: 1200px; margin: auto; text-align: left; }
	.col-sm{ width: 30% !important; clear: none; float: left; }
	.col-med{ width: 50%; text-align: left; }
	.pageFeature p{ max-width: 400px; text-align: center; margin-left: 60px; }
	.pcOnly{ display: block; }
	.mobile{ display: none; }
	.logo{ clear: left; float: left; width: 15%; }
	
	.fifty50 .textCell{ padding-top: 10%; max-width: 85%; margin-left: 10%;  }
	
	#navbar ul{ margin: 18px 0 0 0; padding: 0; list-style-type: none; float: right; }
		#navbar ul li{ padding-left: 18px; clear: none; float: left; }
			#navbar ul li a{ text-transform: uppercase; color: #2d2d2d; text-decoration: none; font-weight: bold; }
			#navbar ul li button{ margin-top: -12px; }
			
	.bg-orange-charcoal{ color: #fff; background: linear-gradient(90deg, #2b2b2b 70%, #f26322 30%);  }
	.magentoLogo{ margin-left: 0; margin-right: 8px; }
}