<div class="component-colorBox"><div style="background:#ed1c2b"></div><strong>Brand Primary</strong><br>#ed1c2b<br>rgba(237, 28, 43, 1)<br>$brand</div>
	<div class="component-colorBox"><div style="background:#f14955"></div><strong>Brand Light</strong><br>#f14955<br>rgba(241, 73, 85, 1)<br>$brandLight</div>
	<div class="component-colorBox"><div style="background:#f14955"></div><strong>Brand Lighter</strong><br>#f47780<br>rgba(244, 119, 128, 1)<br>$brandLighter</div>
	<br>
	<div class="component-colorBox"><div style="background:#2a313f"></div><strong>Blue Dark</strong><br>#2a313f<br>rgba(42, 49, 63, 1)<br>$blueDark</div>
	<div class="component-colorBox"><div style="background:#28abe2"></div><strong>Blue</strong><br>#28abe2<br>rgba(40, 171, 226, 1)<br>$blue</div>
	<div class="component-colorBox"><div style="background:#555a65"></div><strong>Blue Light</strong><br>#555a65<br>rgba(85, 90, 101, 1)<br>$blueLight</div>
	<div class="component-colorBox isLightColored"><div style="background:#dfedf0"></div><strong>Blue Lighter</strong><br>#dfedf0<br>rgba(223, 237, 240, 1)<br>$blueLighter</div>
	<br>
	<div class="component-colorBox"><div style="background:#22b573"></div><strong>Green</strong><br>#22b573<br>rgba(34, 181, 115, 1)<br>$green</div>
	<div class="component-colorBox"><div style="background:#1d965c"></div><strong>Green Dark</strong><br>#1d965c<br>rgba(29, 150, 92, 1)<br>$greenDark</div>
	<br>
	<div class="component-colorBox"><div style="background:#5a5d5d"></div><strong>Grey</strong><br>#5a5d5d<br>rgba(90, 93, 93, 1)<br>$grey</div>
	<div class="component-colorBox"><div style="background:#999999"></div><strong>Grey Medium</strong><br>#999999<br>rgba(153, 153, 153, 1)<br>$greyMedium</div>
	<div class="component-colorBox"><div style="background:#afb7bb"></div><strong>Grey Light</strong><br>#afb7bb<br>rgba(175, 183, 187, 1)<br>$greyLight</div>
	<div class="component-colorBox isLightColored"><div style="background:#eff1f0"></div><strong>Grey Lighter</strong><br>#eff1f0<br>rgba(239, 241, 240, 1)<br>$greyLighter</div>
	<div class="component-colorBox"><div style="background:#313435"></div><strong>Grey Dark</strong><br>#313435<br>rgba(49, 52, 53, 1)<br>$greyDark</div>
	<br>
	<div class="component-colorBox"><div style="background:#111"></div><strong>Black</strong><br>#111<br>rgba(17, 17, 17, 1)<br>$black</div>
	<div class="component-colorBox isLightColored"><div style="background:#ffffff"></div><strong>White</strong><br>#ffffff<br>rgba(255, 255, 255, 1)<br>$white</div>
	

					
				

					
						

	<!-- 

	All h1-h3 headings use Trajan Pro by default. Override this with u-sansSerif class.

	All h4-h6 headings use Proxima Nova by default. Override this with the u-serif class.

	Add a class of u-standardCase or u-upperCase in order to change the capitalization of heading items. The default are shown below.

	-->

	<div class="row">
		<div class="col-md-6 u-textCenter">
			<h1>Heading 1</h1>
			<h2>Heading 2</h2>
			<h3>Heading 3</h3>
		</div>
		<div class="col-md-6 u-textCenter">
			<h4>Heading 4</h4>			
			<h5>Heading 5</h5>
			<h6>Heading 6</h6>
		</div>
	</div>

					
				

					
						

<!--

17px (1.0625rem) font size. 1.6 line height multiplier. Proxima Nova font served from Typekit.

-->

<p>Eros odio penatibus ut integer amet tincidunt magnis. Cras elementum dis dolor, non dis! Augue proin elit, sed! Sociis nunc, amet penatibus, pulvinar mid et, ultrices! Dis turpis? Augue hac ac risus. Vut etiam non nisi penatibus auctor massa pulvinar, porttitor placerat, sagittis scelerisque proin? Porta ac nunc? Odio adipiscing turpis, sagittis! Eros odio penatibus ut integer amet tincidunt magnis. Cras elementum dis dolor, non dis! Augue proin elit, sed! Sociis nunc, amet penatibus, <strong>pulvinar mid et</strong>, ultrices! Dis turpis? Augue hac ac risus. Vut etiam non nisi penatibus auctor massa pulvinar, porttitor placerat, sagittis scelerisque proin? Porta ac nunc? Odio adipiscing turpis, sagittis! Eros odio penatibus ut integer amet tincidunt magnis. Cras elementum dis dolor, non dis! <em>Augue proin elit, sed!</em> Sociis nunc, amet penatibus, pulvinar mid et, ultrices! Dis turpis? Augue hac ac risus. Vut etiam non nisi penatibus auctor massa pulvinar, porttitor placerat, sagittis scelerisque proin? Porta ac nunc? Odio adipiscing turpis, sagittis! </p>
<p>Eros odio penatibus ut integer amet tincidunt magnis. Cras elementum dis dolor, non dis! Augue proin elit, sed! Sociis nunc, amet penatibus, pulvinar mid et, ultrices! Dis turpis? Augue hac ac risus. Vut etiam non nisi penatibus auctor massa pulvinar, porttitor placerat, sagittis scelerisque proin? Porta ac nunc? Odio adipiscing turpis, sagittis! </p>
<p>Eros odio penatibus <a href="#">ut integer amet tincidunt magnis</a>. Cras elementum dis dolor, non dis! Augue proin elit, sed! Sociis nunc, amet penatibus, pulvinar mid et, ultrices! Dis turpis? Augue hac ac risus. Vut etiam non nisi penatibus auctor massa pulvinar, porttitor placerat, sagittis scelerisque proin? Porta ac nunc? Odio adipiscing turpis, sagittis! </p>


					
				

					
						

	<ul>
		<li>Unordered List item 1</li>
		<li>Unordered List item 2</li>
		<li>Unordered List item 3
			<ul>
				<li>Sub-list item 1</li>
				<li>Sub-list item 2</li>
				<li>Sub-list item 3</li>
			</ul>
		</li>
	</ul>

	<hr>

	<ol>
		<li>Ordered List item 1</li>
		<li>Ordered List item 2</li>
		<li>Ordered List item 3</li>
	</ol>


					
				

					
						

	<!--

	There are three types of buttons:

	1. Standard, these all have white backgrounds with various colored type, borders and hover states. Their naming is based on color btn-colorName, etc.
	2. Transparent, these have a transparent background in either red or white text and borders, for use on darker backgrounds.
	3. Solid, these buttons all have a solid colored background.

	By default, any element with the .btn class extend to the width of their text. To span a button width across the width of its parent element, add btn-block to the CSS classes, as shown in the last example.

	-->
	
	<div class="row">
		<div class="col-md-4 u-textCenter">
			<h3>Standard Buttons</h3>
			<a class="btn">Button</a><br>
			<a class="btn btn-black">Black Button</a><br>
			<a class="btn btn-blue">Blue Button</a><br>
			<a class="btn btn-grey">Grey Button</a><br>
			<a class="btn btn-red">Red Button</a><br>
		</div>
		<div class="col-md-4 u-textCenter">
			<h3>Transparent Buttons</h3>
			<div class="u-block u-blueDarkBg padding-md padding-top-xl padding-bottom-xl">
				<a class="btn btn-transparent">Transparent Brand</a><br>
				<a class="btn btn-inverse">Transparent White</a>
			</div>
		</div>
		<div class="col-md-4 u-textCenter">
			<h3>Solid Buttons</h3>
			<a class="btn btn-solid btn-red">Solid Red Button</a><br>
			<a class="btn btn-solid btn-black">Solid Black Button</a><br>
			<a class="btn btn-solid btn-blue">Solid Blue Button</a><br>
			<a class="btn btn-solid btn-grey">Solid Grey Button</a><br>
			<a class="btn btn-solid btn-greyLighter">Solid Light Grey Button</a><br>
			<a class="btn btn-solid btn-red btn-block">Solid Red Full-Width Button</a>
		</div>
	</div>

					
				

					
						

	<!-- 

	Symphony utilizes the excellent bootstrap grid from v3.3.6. It does not use anything else from the bootstrap framework as the other modules are custom.

	The grid allows you to build rows of content by defining a wrapper div with a class of "row". Child divs beneath that make up the columns for that row.

	Each column is referenced by with css classes that begin with .col-, followed by the minimum targeted general browser width, then the number of columns that the div should span.

	The browser width values are:

		- xs for extra small devices (some phones), below 768px
		- sm for small devices (some tablets), greater than or equal to 768px
		- md for medium devices (some desktops), greater than or equal to 992px
		- lg for large devices, greater than or equal to 1200px

		The width allows you to specify different column configurations for different device widths, such as with a layout that could span 6 columns on desktop and drop to 2 columns on phone:

			<div class="col-md-6 col-xs-2">
				content
			</div>

		"Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs."


	There are a total of 12 columns available at any given width. Your divs must add up to 12, or use -offset classes to add space to the left or right. So creating a centered, 8 column container for devices equal to or greater than 992px, looks like this:

		<div class="col-md-8 col-md-offset-8">
			content
		</div>

		Or a layout of 3 columns with one column extra inbetween each:

		<div class="col-md-3">content</div>
		<div class="col-md-3 col-md-offset-1">content</div>
		<div class="col-md-4 col-md-offset-1">content</div>

		Add the offset plus the column count number for each size and ensure that it adds up to 12 columns.

	-->

	<div class="row">
		<div class="col-md-12">

	<div class="section component-columns">

		<p class="no-margin-top"><em>The following</em> documentation is repurposed from: https://getbootstrap.com/examples/grid/</p>

		<hr>

		<h3>Three equal columns</h3>

		<p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile devices, tablets and below, the columns will automatically stack.</p>
		<div class="row">
			<div class="col-md-4">.col-md-4</div>
			<div class="col-md-4">.col-md-4</div>
			<div class="col-md-4">.col-md-4</div>
		</div>

		<h3>Three unequal columns</h3>
		<p>Get three columns <strong>starting at desktops and scaling to large desktops</strong> of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.</p>
		<div class="row">
			<div class="col-md-3">.col-md-3</div>
			<div class="col-md-6">.col-md-6</div>
			<div class="col-md-3">.col-md-3</div>
		</div>

		<h3>Two columns</h3>
		<p>Get two columns <strong>starting at desktops and scaling to large desktops</strong>.</p>
		<div class="row">
			<div class="col-md-8">.col-md-8</div>
			<div class="col-md-4">.col-md-4</div>
		</div>

		<h3>Full width, single column</h3>
		<p class="text-warning">No grid classes are necessary for full-width elements.</p>

		<hr>

		<h3>Two columns with two nested columns</h3>
		<p>Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns <strong>starting at desktops and scaling to large desktops</strong>, with another two (equal widths) within the larger column.</p>
		<p>At mobile device sizes, tablets and down, these columns and their nested columns will stack.</p>
		<div class="row">
			<div class="col-md-8 col-md-offset-2">
			.col-md-8.col-md-offset-2
				<div class="row">
					<div class="col-md-6">.col-md-6</div>
					<div class="col-md-6">.col-md-6</div>
				</div>
			</div>
		</div>

		<hr>

		<h3>Mixed: mobile and desktop</h3>
		<p>The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
		<p>Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.</p>
		<div class="row">
			<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
			<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
		</div>
		<div class="row">
			<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
			<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
			<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
		</div>
		<div class="row">
			<div class="col-xs-6">.col-xs-6</div>
			<div class="col-xs-6">.col-xs-6</div>
		</div>

		<hr>

		<h3>Mixed: mobile, tablet, and desktop</h3>
		<div class="row">
			<div class="col-xs-12 col-sm-6 col-lg-8">.col-xs-12 .col-sm-6 .col-lg-8</div>
			<div class="col-xs-6 col-lg-4">.col-xs-6 .col-lg-4</div>
		</div>
		<div class="row">
			<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
			<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
			<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
		</div>

		<hr>

		<h3>Column clearing</h3>
			<p><a href="http://getbootstrap.com/css/#grid-responsive-resets">Clear floats</a> at specific breakpoints to prevent awkward wrapping with uneven content.</p>
		<div class="row">
			<div class="col-xs-6 col-sm-3">
			.col-xs-6 .col-sm-3
			<br>
			Resize your viewport or check it out on your phone for an example.
			</div>
			<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

			<!-- Add the extra clearfix for only the required viewport -->
			<div class="clearfix visible-xs"></div>

			<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
			<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
		</div>

		<hr>

		<h3>Offset, push, and pull resets</h3>
		<p>Reset offsets, pushes, and pulls at specific breakpoints.</p>
		<div class="row">
			<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
			<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
		</div>
		<div class="row">
			<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
			<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
		</div>

	</div>

	</div>

	</div>
	

					
				

					
						

	<div class="row greyBoxes">
		<div class="greyBoxes-box">
			<div class="greyBoxes-title"><i class="icon icon-globe"></i> Headline with Icon</div>
			<p>Rhoncus mid a vel egestas turpis massa auctor parturient facilisis? Adipiscing, et. Sit pulvinar hac! Mauris, sociis odio integer egestas aliquam in lectus amet amet sociis!</p>
			<p>Rhoncus mid a vel egestas turpis massa auctor parturient facilisis? Adipiscing, et. Sit pulvinar hac! Mauris, sociis odio integer egestas aliquam in lectus amet amet sociis!</p>
		</div>
		<div class="greyBoxes-box">
			<div class="greyBoxes-title">Headline No Icon</div>
			<p>Rhoncus mid a vel egestas turpis massa auctor parturient facilisis? Adipiscing, et. Sit pulvinar hac! Mauris, sociis odio integer egestas aliquam in lectus amet amet sociis!</p>
			<p>Rhoncus mid a vel egestas turpis massa auctor parturient facilisis? Adipiscing, et. Sit pulvinar hac! Mauris, sociis odio integer egestas aliquam in lectus amet amet sociis!</p>
		</div>
	</div>

	<div class="row greyBoxes">
		<div class="greyBoxes-box">
			<div class="greyBoxes-title">Headline with No Icon</div>
			<p>Rhoncus mid a vel egestas turpis massa auctor parturient facilisis? Adipiscing, et. Sit pulvinar hac! Mauris, sociis odio integer egestas aliquam in lectus amet amet sociis!</p>
		</div>
		<div class="greyBoxes-box">
			<div class="greyBoxes-title">Headline No Icon</div>
			<p>Rhoncus mid a vel egestas turpis massa auctor parturient facilisis? Adipiscing, et. Sit pulvinar hac! Mauris, sociis odio integer egestas aliquam in lectus amet amet sociis!</p>
		</div>
		<div class="greyBoxes-box">
			<div class="greyBoxes-title">Headline with No Icon</div>
			<p>Rhoncus mid a vel egestas turpis massa auctor parturient facilisis? Adipiscing, et. Sit pulvinar hac! Mauris, sociis odio integer egestas aliquam in lectus amet amet sociis!</p>
		</div>
		<div class="greyBoxes-box">
			<div class="greyBoxes-title">Headline with No Icon</div>
			<p>Rhoncus mid a vel egestas turpis massa auctor parturient facilisis? Adipiscing, et. Sit pulvinar hac! Mauris, sociis odio integer egestas aliquam in lectus amet amet sociis!</p>
		</div>
	</div>

	<div class="row">
		<div class="col-md-8 col-md-offset-2">
			<div class="greyBoxes">
				<div class="greyBoxes-box">
					<div class="greyBoxes-title">Headline with No Icon</div>
					<p>Rhoncus mid a vel egestas turpis massa auctor parturient facilisis? Adipiscing, et. Sit pulvinar hac! Mauris, sociis odio integer egestas aliquam in lectus amet amet sociis!</p>
				</div>
				<div class="greyBoxes-box">
					<div class="greyBoxes-title">Headline with No Icon</div>
					<p>Rhoncus mid a vel egestas turpis massa auctor parturient facilisis? Adipiscing, et. Sit pulvinar hac! Mauris, sociis odio integer egestas aliquam in lectus amet amet sociis!</p>
				</div>
			</div>
			<div class="greyBoxes">
				<div class="greyBoxes-box">
					<div class="greyBoxes-title">Headline with No Icon</div>
					<p>Rhoncus mid a vel egestas turpis massa auctor parturient facilisis? Adipiscing, et. Sit pulvinar hac! Mauris, sociis odio integer egestas aliquam in lectus amet amet sociis!</p>
				</div>
				<div class="greyBoxes-box">
					<div class="greyBoxes-title">Headline with No Icon</div>
					<p>Rhoncus mid a vel egestas turpis massa auctor parturient facilisis? Adipiscing, et. Sit pulvinar hac! Mauris, sociis odio integer egestas aliquam in lectus amet amet sociis!</p>
				</div>
			</div>
		</div>
	</div>

	<div class="documentation">
		<p>Each <code>row</code> div should have an added class name of <code>greyBoxes</code>. Within this div, you can add as many child divs with the class name of <code>greyBoxes-box</code> and they will size accordingly in equal widths, to fit.</p>
	</div>


					
				

					
						
	<form class="seeWhatsHappening-form" action="/usw_thq/location_search" method="GET">
		<input type="text" name="zip" required="" value="" pattern="\d*" maxlength="5" min="0" placeholder="Enter Zip Here" class="seeWhatsHappening-input">
		<input type="submit" value="See what's happening" class="seeWhatsHappening-submit">
	</form>
	<div class="documentation">
		<p>This <code>form</code> block requires an action and a method in order to submit correctly. This must point to a page called "Location Search" in WebManager, with a url alias of "location_search".</p>
	</div>

					
				

					
						

	<!-- 

	This module makes use of the FontAwesome icons as well as a call to a JavaScript onClick function. This function passes in either a Pinterest, Facebook or Twitter parameter in order to determine how each button should function.

	Note that within the main container (in this case a 10 column bootstrap div, offset by 1), we surround all of the individual cards in a shareCard-container div. 

	Be sure to replicate the other classes on elements within that card such as shareCart-stat for displaying the color borders on the left. Add shareCard-cta to the line that you wish to use as a call to action.

	-->

	<div class="section">

		<div class="row">
			<div class="col-md-10 col-md-offset-1">

				<div class="shareCard-container">
					<div class="shareCard">
						<p><strong>Platea dolor in massa a enim porta et</strong></p>
						<p class="shareCard-stat">
							Porta mattis ultricies dis sociis! Et sociis turpis proin a integer proin dis ultricies, massa a massa.
						</p>
						<p class="shareCard-stat">
							Porta mattis ultricies dis sociis! Et sociis turpis proin a integer proin dis ultricies, massa a massa.
						</p>
						<p class="shareCard-cta">Porta mattis ultricies dis sociis! Et sociis turpis proin a integer proin dis ultricies, massa a massa. <a href="#">CTA</a></p>
						<div class="shareCard-share">
							Share 
							<a onclick="symphony.sharePopup('Pinterest', this)" class="shareCard-icon"><i class="fab fa-pinterest"></i></a> 
							<a onclick="symphony.sharePopup('Facebook', this)" class="shareCard-icon"><i class="fab fa-facebook-f"></i></a> 
							<a onclick="symphony.sharePopup('Twitter', this)" class="shareCard-icon"><i class="fab icon-x-twitter"></i></a>
						</div>
					</div>
					<div class="shareCard">
						<p><strong>Platea dolor in massa a enim porta et</strong></p>
						<p class="shareCard-stat">
							Porta mattis ultricies dis sociis! Et sociis turpis proin a integer proin dis ultricies, massa a massa.
						</p>
						<p class="shareCard-stat">
							Porta mattis ultricies dis sociis! Et sociis turpis proin a integer proin dis ultricies, massa a massa.
						</p>
						<p class="shareCard-cta">Porta mattis ultricies dis sociis! Et sociis turpis proin a integer proin dis ultricies, massa a massa. <a href="#">CTA</a></p>
						<div class="shareCard-share">
							Share 
							<a onclick="symphony.sharePopup('Pinterest', this)" class="shareCard-icon"><i class="fab fa-pinterest"></i></a> 
							<a onclick="symphony.sharePopup('Facebook', this)" class="shareCard-icon"><i class="fab fa-facebook-f"></i></a> 
							<a onclick="symphony.sharePopup('Twitter', this)" class="shareCard-icon"><i class="fab icon-x-twitter"></i></a>
						</div>
					</div>
					<div class="shareCard">
						<p><strong>Platea dolor in massa a enim porta et</strong></p>
						<p class="shareCard-stat">
							Porta mattis ultricies dis sociis! Et sociis turpis proin a integer proin dis ultricies, massa a massa.
						</p>
						<p class="shareCard-cta">Porta mattis ultricies dis sociis! Et sociis turpis proin a integer proin dis ultricies, massa a massa. <a href="#">CTA</a></p>
						<div class="shareCard-share">
							Share 
							<a onclick="symphony.sharePopup('Pinterest', this)" class="shareCard-icon"><i class="fab fa-pinterest"></i></a> 
							<a onclick="symphony.sharePopup('Facebook', this)" class="shareCard-icon"><i class="fab fa-facebook-f"></i></a> 
							<a onclick="symphony.sharePopup('Twitter', this)" class="shareCard-icon"><i class="fab icon-x-twitter"></i></a>
						</div>
					</div>
				</div>

			</div>
		</div>

	</div>


					
				

					
						

	<!-- 

	This module uses a parent rowDonate class name, rowDonate-title for the title and the buttons are inside of a rowDonate-buttons container.

	When using this module, note that the data-provides content for each dollar amount option includes text that appears when the option is clicked. This value is inserted into the empty rowDonate-provides div. Additionally, the text of the button itself, the dollar amount (with dollar sign!), is inserted into the rowDonate-amount empty div to create a full sentence like "$500 helps provide musical instruments.." etc when clicked.

	Lastly, note that the URL in the Donate Now link has an empty ?amt= field appended to the end of the URL. This is required in that it pulls the dollar amount (with dollar sign!) from the selected option's text and appends it to this URL.

	-->

	<div class="rowDonate">

		<h2 class="section-title rowDonate-title">Platea dolor in massa a enim porta et</h2>

			<div class="rowDonate-buttons">

				<a class="rowDonate-btn" data-provides="helps provide musical instruments for five kids." href="#">$500</a>
				<a class="rowDonate-btn" data-provides="helps rovide one month of after-school music programing for 3 kids." href="#">$200</a>
				<a class="rowDonate-btn" data-provides="helps provide one week of summer music camp for a child in need." href="#">$100</a>
				<a class="rowDonate-btn" data-provides="helps buy 20 music books for kids." href="#">$50</a>

			</div>

			<p class="rowDonate-caption"><strong class="rowDonate-amount"></strong> <span class="rowDonate-provides"></span></p>

			<a class="rowDonate-submit" href="https://give.salvationarmyusa.org/give/164006/#!/donation/checkout?amount=">Donate Now</a>

	</div>


					
				

					
						

	<!--
	
	You can add utility classes such as u-blueLightBg and u-redBg in order to defined the background color of each stripe.

	The section class is used as a general indicator that a new section of the page is beginning. For symphony, we utilize stripes or rows of content. Regardless of what modules, rows or columns live inside of this wrapper, every new section of the page should have a div with a class of "section" as the outermoust parent.

	Using the classname of section also ensures that at least some padding is added to the top and bottom of the row.

	Within each stripe you can feel free to create a container, rows and columns using the bootstrap grid framework.
	
	Utility classes are also available for aligning text: u-textCenter, u-textLeft, u-textRight.
	
	You can add additional padding by assigning helper classes to the inner containers, such as: padding-bottom-xl and padding-top-xl.

	-->

	<div class="section u-blueDarkBg u-textCenter">
		<h5 class="u-standardCase">Lorem Ipsum Headline</h5>
		<p>Lorem Ipsum Text</p>
	</div>

	<div class="section u-blueLightBg u-textCenter">
		<h5 class="u-standardCase">Lorem Ipsum Headline</h5>
		<p>Lorem Ipsum Text</p>
	</div>

	<div class="section u-blueLighterBg u-textCenter">
		<h5 class="u-standardCase">Lorem Ipsum Headline</h5>
		<p>Lorem Ipsum Text</p>
	</div>

	<div class="section u-greyDarkBg u-textCenter">
		<h5 class="u-standardCase">Lorem Ipsum Headline</h5>
		<p>Lorem Ipsum Text</p>
	</div>

	<div class="section u-greyLightBg u-textCenter">
		<h5 class="u-standardCase">Lorem Ipsum Headline</h5>
		<p>Lorem Ipsum Text</p>
	</div>

	<div class="section u-redBg u-textCenter">	
		<h5 class="u-standardCase">Lorem Ipsum Headline</h5>
		<p>Lorem Ipsum Text</p>
	</div>

	<div class="section u-redLightBg u-textCenter">	
		<h5 class="u-standardCase">Lorem Ipsum Headline</h5>
		<p>Lorem Ipsum Text</p>
	</div>


					
				

					
						

	<!--


	-->

	<div class="section u-halfHeight u-hasBgImage lazyload" data-bgset="http://placehold.it/600x240" data-sizes="auto">
		<div class="u-verticalAlign">
			<div class="row">
				<div class="col-md-8  col-md-offset-2 u-textCenter">
					<h2>Quote or Headline</h2>
					<p>Subheadline</p>
					<p><a class="btn btn-white">Button Text</a></p>
				</div>
			</div>
		</div>
	</div>

					
				

					
						

	<!-- 

	These rows are defined as a module that begins with rowStory. They are customizable in that the photo can align to the left or the right, depending on if the rowStory-photo div is before or after the rowStory-caption div. The content will automatically center alongside the image, on the left or right.

	Assign a background color by adding a u- utility class for the color you'd like to use along with the class of "section", on the parent div.

	-->

	<div class="section u-blueLightBg">
		<div class="rowStory">

			<div class="rowStory-caption u-textRight">
				<h5 class="u-standardCase">Headline text</h5>
				<p>Dolor vut, porta a porttitor adipiscing elementum. Tortor aliquam amet platea et dapibus, dapibus eu. Mid in magnis, odio! Nisi adipiscing urna nisi! Tristique risus pulvinar mattis in, quis, habitasse, sed, penatibus, turpis proin in sed vel porttitor turpis!</p>

			</div>

			<div class="rowStory-photo">
				<img class="lazyload" src="http://placehold.it/450x350" width="650" height="350">
			</div>

		</div>
	</div>

	<div class="section u-greyDarkBg">
		<div class="rowStory">

			<div class="rowStory-photo">
				<img class="lazyload" src="http://placehold.it/450x350" width="650" height="350">
			</div>

			<div class="rowStory-caption u-textRight">
				<h5 class="u-standardCase">Headline text</h5>
				<p>Dolor vut, porta a porttitor adipiscing elementum. Tortor aliquam amet platea et dapibus, dapibus eu. Mid in magnis, odio! Nisi adipiscing urna nisi! Tristique risus pulvinar mattis in, quis, habitasse, sed, penatibus, turpis proin in sed vel porttitor turpis!</p>

			</div>

			

		</div>
	</div>


					
				

					
						

	<!-- 

	The teamMember-container wrapper can hold as many divs with the class name of teamMember as you would like to use. Each teamMember item is sized to fit on one row, regardless of if you have 3, 5, 8, etc items. The height will also adjust automatically.

	Recommmended base size for the photo is 320x350 pixels, but as long is it is in the ballpark, it will size to fit.

	Note that the teamMember-hoverCard is the content that appears on hover and should be a small line of text. It is optional and this div and its child elements can be removed if not used. Does not show on touch devices.

	Also note that the image has an added class of "teamMembe-image" which applies styling that fills the available space with the full image.

	-->

	<div class="teamMember-container">

				<div class="teamMember">

			<img src="http://placehold.it/320x350" class="teamMember-image">

			<div class="teamMember-caption">
				<p><strong>Title</strong></p>
				<p><em>Subtitle</em></p>
			</div>

			<div class="teamMember-hoverCard">
				<div class="u-verticalAlign">
					“Optional quote can go here. Shows on hover.”
				</div>
			</div>

		</div>
		<div class="teamMember">

			<img src="http://placehold.it/320x350" class="teamMember-image">

			<div class="teamMember-caption">
				<p><strong>Title</strong></p>
				<p><em>Subtitle</em></p>
			</div>

			<div class="teamMember-hoverCard">
				<div class="u-verticalAlign">
					“Optional quote can go here. Shows on hover.”
				</div>
			</div>

		</div>
		<div class="teamMember">

			<img src="http://placehold.it/320x350" class="teamMember-image">

			<div class="teamMember-caption">
				<p><strong>Title</strong></p>
				<p><em>Subtitle</em></p>
			</div>

			<div class="teamMember-hoverCard">
				<div class="u-verticalAlign">
					“Optional quote can go here. Shows on hover.”
				</div>
			</div>

		</div>
		<div class="teamMember">

			<img src="http://placehold.it/320x350" class="teamMember-image">

			<div class="teamMember-caption">
				<p><strong>Title</strong></p>
				<p><em>Subtitle</em></p>
			</div>

			<div class="teamMember-hoverCard">
				<div class="u-verticalAlign">
					“Optional quote can go here. Shows on hover.”
				</div>
			</div>

		</div>

	</div>


					
				

					
						

	<!--
		
	These are immensely helpful classes in that they can be used to align elements by themselves, within a container or within an entire section. Add one of these classes to a parent <div> and affect all of the inline or inline-block based elements inside of it, such as text or images. Or, surround an element with a div containing one of these classes and align that element by itself.

	-->

	<p class="u-textLeft">Left Aligned Text</p>

	<p class="u-textCenter">Center Aligned Text</p>

	<p class="u-textRight">Right Aligned Text</p>


					
				

					
						

	<!--
	
	These CSS properties allow for aligning elements to build layouts.

	As a general rule of thumb, HTML elements like <span>, <a> and <img> are display:inline by default. "An inline element does not start on a new line and only takes up as much width as necessary."

	Next there is display:inline-block, which "are like inline elements but they can have a width and a height." Note that there is automatically a 4px margin added to the right of inline-block elements.

	Block elements fill their entire container, whether it be 2, 7 or 12 columns. We use bootstrap grid classes to define containers.

	*References from w3schools.com

	-->

	<div class="row margin-bottom-md u-textCenter">
		<div class="col-md-12">
			<p class="u-inlineBlock u-blueDarkBg padding-xl">Inline-Block Element</p>
			<p class="u-inlineBlock u-redBg padding-xl">Inline-Block Element</p>
			<p class="u-inlineBlock u-blueLightBg padding-xl">Inline-Block Element</p>
		</div>
	</div>

	<span class="u-block u-redLightBg padding-xl u-textCenter">Block Element</span>

	<p class="u-floatRight u-redBg padding-xl">Element Floated Right</p>
	<p class="u-floatLeft u-blueDarkBg padding-xl">Element Floated Left</p>
	<p class="u-clear u-greyLightBg padding-xl">Element that clears floats</p>

	<p class="u-floatRight u-redBg padding-xl margin-left-lg">Element Floated Right</p>
	<p><strong>Text wrapping around a floated element. <br>Prevent this wrapping by using the <code>u-clear</code> tag as shown above.</strong> Parturient ac cursus, eros magna a massa non. Dolor adipiscing montes, in, dictumst risus ac elit? Dolor dignissim rhoncus dictumst ac tristique, magna turpis, ut elit dapibus scelerisque duis sit porta eu? Odio nunc porttitor a aliquet ac amet tempor, et sociis, ac pellentesque platea, a porttitor quis, diam tincidunt tincidunt, platea ac duis vut dolor, magna habitasse! Integer lundium?</p>

	<p class="u-floatLeft u-redBg padding-xl margin-right-lg">Element Floated Left</p>
	<p><strong>Another example of floating</strong> Parturient ac cursus, eros magna a massa non. Dolor adipiscing montes, in, dictumst risus ac elit? Dolor dignissim rhoncus dictumst ac tristique, magna turpis, ut elit dapibus scelerisque duis sit porta eu? Odio nunc porttitor a aliquet ac amet tempor, et sociis, ac pellentesque platea, a porttitor quis, diam tincidunt tincidunt, platea ac duis vut dolor, magna habitasse! Integer lundium?</p>