/* Put real @imports above this line - Google Fonts, etc. 

@import url(http://fonts.googleapis.com/css?family=Oxygen|Source+Sans+Pro:400,300);
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700,900|Roboto:300,400,700,900|Open+Sans:300,400,700,800);
@import url(http://fonts.googleapis.com/css?family=Oswald:300,400,700|Droid+Serif:400,700italic);
@import url(http://fonts.googleapis.com/css?family=Archivo+Narrow:400,700,400italic,700italic|Great+Vibes);
Philosopher, Muli, Ovo
Adelle Sans, Kostic Serif
Open Sans Condensed, Lora
Open Sans, Gentium Basic
Playfair Display, Fauna One
Museo, Source Sans Pro

*/

/**
* @version 0.0.0
* @link https://github.com/logsdon/redlove
* @link http://redlove.org
*/

/* ============================================================
	Table of Contents
============================================================
	(Prepend file with @import and @charset as necessary)
	# Reset
	# Foundation
	## Document
	## Typography
	## Lists
	## Tables
	## Forms
	## Layout
	# Components
	# Color Glossary
	# Site Styles
	## Body and Liner
	## Band, Wrap, and Liner
	## Navigation
	## Header
	## Footer
	## Content
	# Page Styles
	# Utility Helpers
	# Responsive / Media Queries / Target Devices
	# Fonts
	# Print
*/

/* ============================================================
	# Foundation
============================================================ */

/* --------------------------------------------------------------------------------
	## Typography
-------------------------------------------------------------------------------- */

/* ------------------------------------------------------------
	Text elements
------------------------------------------------------------ */

/* 
	Text elements - Headings
---------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: normal;
	margin-bottom: 0.4167em;
	margin-bottom: 1.0rem;
}
	h1 a,
	h2 a,
	h3 a,
	h4 a,
	h5 a,
	h6 a {
		color: inherit;
		font-weight: inherit;
	}
	h1 small,
	h2 small,
	h3 small,
	h4 small,
	h5 small,
	h6 small {
		font-size: 60%;
	}
	h4 small {
		font-size: 70%;
	}
	h5 small {
		font-size: 80%;
	}
	h6 small {
		font-size: 100%;
	}
h1 {
	font-size: 70px;
	font-size: 7.2rem;
	font-size: 50px;
	font-size: 5.0rem;
	/*letter-spacing: -0.1rem;*/
	line-height: 1.2;
}
h2 {
	font-size: 54px;
	font-size: 5.4rem;
	font-size: 40px;
	font-size: 4.0rem;
	/*letter-spacing: -0.1rem;*/
	line-height: 1.3;
}
h3 {
	font-size: 40px;
	font-size: 4.0rem;
	font-size: 32px;
	font-size: 3.2rem;
	/*letter-spacing: -0.1rem;*/
	line-height: 1.4;
}
h4 {
	font-size: 30px;
	font-size: 3.0rem;
	font-size: 26px;
	font-size: 2.6rem;
	/*letter-spacing: -0.08rem;*/
	line-height: 1.5;
}
h5 {
	font-size: 22px;
	font-size: 2.2rem;
	font-size: 20px;
	font-size: 2.0rem;
	/*letter-spacing: -0.05rem;*/
	line-height: 1.7;
}
h6 {
	font-size: 16px;
	font-size: 1.6rem;
	/*letter-spacing: 0.0rem;*/
	line-height: 1.8;
}
/* Mobile (Landscape) : Design for a width of 480px (0px - 767px); 47.99em if 1em=16px */
@media only screen and (max-width: 767.99px) {
	h1 {
		font-size: 46px;
		font-size: 4.6rem;
	}
	h2 {
		font-size: 38px;
		font-size: 3.8rem;
	}
	h3 {
		font-size: 32px;
		font-size: 3.2rem;
	}
	h4 {
		font-size: 26px;
		font-size: 2.6rem;
	}
	h5 {
		font-size: 20px;
		font-size: 2.0rem;
	}
	
	body {
		font-size: 14px;
		font-size: 1.4rem;
	}
}
/* Mobile (Portrait) : Design for a width of 320px (0px - 479px); 29.99em if 1em=16px */
@media only screen and (max-width: 479.99px) {
	h1 {
		font-size: 42px;
		font-size: 4.2rem;
	}
	h2 {
		font-size: 34px;
		font-size: 3.4rem;
	}
	h3 {
		font-size: 28px;
		font-size: 2.8rem;
	}
	h4 {
		font-size: 22px;
		font-size: 2.2rem;
	}
	h5 {
		font-size: 18px;
		font-size: 1.8rem;
	}
	
	body {
		font-size: 12px;
		font-size: 1.2rem;
	}
}

/* 
	Text elements - Paragraphs
---------------------------------------- */

/* 
	Text elements - Marks
---------------------------------------- */

abbr.initialism {
	font-size: 90%;
	text-transform: uppercase;
}

hr.default {
	border: 0;
	border-top: 1px solid #ddd;
	display: block;
	height: 1px;
	margin: 1.0em 0;
	padding: 0;
}
hr.center {
	margin-left: auto;
	margin-right: auto;
}
hr.section {
	border-width: 0.5em 0 0;
}
hr.section:after {
	background: #ccc;
	content: "";
	display: block;
	height: 0.25em;
	margin: 0 auto;
	width: 40%;
}

/* 
	Text elements - Code
---------------------------------------- */
.code {
	background: #F1F1F1;
	border: solid 1px #E3E3E3;
	display: block;
	font-family: 'Courier New', Courier, 'Lucida Console', Monaco, monospace, serif;
	font-size: 90%;
	margin: 0 1.0rem;
	overflow: auto;
	padding: 1.0rem 1.5rem;
	white-space: nowrap;
	white-space: pre;
}

/* Improve readability of pre-formatted text in all browsers. */
pre > code {
	background-color: #f5f5f5;
	border: 1px solid #CCCCCC;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	color: #333333;
	display: block;
	font-size: 90%;
	line-height: 1.42857;
	padding: 1.0rem 1.5rem;
	white-space: pre;
	white-space: pre-wrap;
	word-break: break-all;
	word-wrap: break-word;
}

/* 
	Text elements - Blockquotes
	https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/

	<blockquote>
		<p>The quote</p>
		<cite>The citation</cite>
	</blockquote>
---------------------------------------- */
blockquote.default {
	/* Trigger hasLayout for inline-block */
	display: inline-block;*display: inline;*zoom: 1;/*ie6/7*/
	vertical-align: bottom;
	width: 100%;
	
	background: #f9f9f9;
	border-left: 10px solid #ccc;
	line-height: 2.0;
	padding: 2.5em 2.5em 1.0em;
	quotes: "\201C""\201D""\2018""\2019";
}
blockquote.default,
blockquote.default p {
	color: #777;
	font-style: italic;
}
blockquote.default:before,
blockquote.default:after {
	color: #ccc;
	content: open-quote;
	font-size: 4em;
	line-height: 0.1em;
	margin-right: 0.25em;
	vertical-align: -0.4em;
}
blockquote.default:after {
	content: close-quote;
	margin-left: -0.1em;
}
	blockquote.default p {
		display: inline;
		font-style: normal;
		padding-top: 1.0em;
	}
	blockquote.default footer {
		color: #999;
		display: block;
		float: right;
	}
	blockquote.default cite {
		display: block;
		float: right;
		
		color: #999;
		font: inherit;
		margin-top: 0.5em;
	}
	blockquote.default footer cite {
		display: inline-block;*display: inline;*zoom: 1;/*ie6/7*/
		float: none;
		margin-left: 1.0em;
	}
	blockquote.default cite:before {
		content: "\2014 \0020";
		float: left;
		padding-right: 5px;
	}
	blockquote.default cite a,
	blockquote.default cite a:visited,
	blockquote.default cite a:visited {
		color: #555;
	}
	blockquote.default .newline {
		display: block;
		line-height: 1;
	}

/* 
	Text elements - Links
---------------------------------------- */

/*a {
	color: blue;
}*/

/* 
	Text elements - Spacing
---------------------------------------- */
iframe,
p,
pre,
table {
	margin-bottom: 1.0em;
}

p + h1,
p + h2,
p + h3,
p + h4,
p + h5,
p + h6 {
	margin-top: 0.8334em;
	margin-top: 0.4167em;
	margin-top: 1.0rem;
}


/* --------------------------------------------------------------------------------
	## Lists

	<ul>
		<li>List item</li>
		<li>List item</li>
		<li>List item</li>
	</ul>
-------------------------------------------------------------------------------- */


/* 
	Lists - Styles
---------------------------------------- */
.list-style-square {
	list-style: square outside; 
}
.list-style-circle {
	list-style: circle outside;
}
.list-style-disc {
	list-style: disc outside;
}

/* 
	Lists - No Style
---------------------------------------- */
.list-style-none,
.list-style-none li {
	list-style: none;
}

.list-style-no-margin,
.list-style-no-margin > li {
	margin-left: 0;
}

/* 
	Lists - Inline
---------------------------------------- */
.list-inline,
.list-inline li {
	list-style: none;
	margin: 0;
	padding: 0;
}
.list-inline {
	/* Trigger hasLayout for inline-block, contain floats */
	display: inline-block;*display: inline;*zoom: 1;/*ie6/7*/
	vertical-align: middle;
}
.list-inline li {
	/* Trigger hasLayout for inline-block, contain floats */
	display: inline-block;*display: inline;*zoom: 1;/*ie6/7*/
	padding-right: 0.5em;
}

/* 
	Lists - Horizontal
---------------------------------------- */
.list-horizontal,
.list-horizontal li {
	list-style: none;
	margin: 0;
	padding: 0;
}
.list-horizontal {
	/* Trigger hasLayout for inline-block, contain floats */
	display: inline-block;*display: inline;*zoom: 1;/*ie6/7*/
	vertical-align: middle;
}
.list-horizontal li {
	/* Trigger hasLayout for inline-block, contain floats */
	display: inline-block;*display: inline;*zoom: 1;/*ie6/7*/
	float: left;
}

/* 
	Lists - Vertical
---------------------------------------- */
.list-vertical,
.list-vertical li {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* --------------------------------------------------------------------------------
	## Tables

	<div class="responsive-wrap">
		<table border="0" cellpadding="0" cellspacing="0" class="default">
			<caption>Table Caption</caption>
			<thead>
				<tr>
					<th colspan="2" >Table heading</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Table cell</td>
					<td>Table cell</td>
				</tr>
			</tbody>
			<tfoot></tfoot>
		</table>
	</div>
-------------------------------------------------------------------------------- */

.responsive-wrap,
.responsive-wrapper,
.table-container {
	overflow: auto;
	width: 100%;
}

.default-table {
	margin-bottom: 1.0em;
	max-width: 100%;
	width: 100%;
}

.default-table th,
.default-table td {
	padding: 0.8em 1.0em;
	vertical-align: top;
}
.default-table th {
	font-weight: bold;
}
.default-table thead th {
	vertical-align: bottom;
}

.table-borders > thead > tr > th,
.table-borders > thead > tr > td,
.table-borders > tbody > tr > th,
.table-borders > tbody > tr > td,
.table-borders > tfoot > tr > th,
.table-borders > tfoot > tr > td {
	border-top: 1px solid #eeeeee;
}
.table-borders > thead > tr > th {
	border-bottom: 2px solid #eeeeee;
	vertical-align: bottom;
}
.table-bordered {
	border: 1px solid #e3e3e3;
}
.table-bordered th,
.table-bordered td {
	border-left: 1px solid #eeeeee;
}
.table-bordered td:first-of-type {
	border-left: 0 none;
}

.table-striped tbody tr:nth-child(2n+0) {
	background: #fcfcfc;
}

.table-hover tbody tr:hover {
	background-color: #fafafa;
}

.border-cell,
.border-row {
	border-bottom: 1px solid #eeeeee;
}
.normal-cell {
	font-weight: normal;
}
.numeric-cell {
	text-align: right;
}
.total-cell {
	border-top: 1px solid #cccccc;
}

/* Break table layout for responsive views
------------------------------ */
/* Mobile (Portrait) : Design for a width of 320px (0px - 479px); 29.99em if 1em=16px */
@media only screen and (max-width: 479.99px) {
	
	.break-table--block td {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		
		display: block !important;
		height: auto !important;
		width: 100% !important;
	}
		.break-table--block tr td:last-child {
			margin-bottom: 1.0em;
		}
	.break-table--inline-block td {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		
		display: inline-block !important;
		height: auto !important;
	}
	
}


/* --------------------------------------------------------------------------------
	## Forms
-------------------------------------------------------------------------------- */

/* 
	Forms - <form> <fieldset> <legend>
---------------------------------------- */
legend {
	font-size: 1.6em;
	font-weight: normal;
}
legend,
label,
.label {
	margin-bottom: 0.5rem;
}

/* 
	Forms - <label> and nested <input> radio and checkbox
---------------------------------------- */
label,
.label {
	min-height: 1px;/* helps empty floating columns have layout */
}
label em {
	color: red;
	padding-left: 0.2em;
	vertical-align: top;
}

.label-radio,
.label-checkbox {
	font-weight: inherit;
	width: auto;
}
.label-radio input[type="radio"],
.label-checkbox input[type="checkbox"] {
	vertical-align: middle;
}

/* 
	Forms - <button> <input> <textarea> <select>
---------------------------------------- */
button,
input,
textarea,
select {
	border: 1px solid #bbb;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	color: #555;
	line-height: 1.42857;
	line-height: 1.2;
	line-height: 1.4;
	padding: 0.5em;/* Vertical padding centers text on FF, ignored by Webkit */
}
button,
input,
.input,
textarea,
select {
	margin-bottom: 1.5rem;
}
.input label,
.input .label,
.input button,
.input input,
.input .input,
.input textarea,
.input select {
	margin-bottom: 0;
}
input[type="checkbox"],
input[type="radio"] {
	margin-bottom: 0;
}

/* Hover state */
button:hover,
input:hover,
textarea:hover,
select:hover {
	border-color: #888;
	color: #333;
	outline: 0;
}
/* Focus state */
button:focus,
input:focus,
textarea:focus,
select:focus {
	border-color: #33c3f0;
	color: #333;
	outline: 0;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	padding-left: 1.5em;
	padding-right: 1.5em;
}

/*::-webkit-input-placeholder { color:rgba(0,0,0,0.80);}
::-moz-placeholder { color:rgba(0,0,0,0.80) ;}
:-ms-input-placeholder { color:rgba(0,0,0,0.80) ;}
input:-moz-placeholder { color:rgba(0,0,0,0.80) ;}*/

/* 
	Forms - Rows

	<form action="" method="post"><!-- enctype="multipart/form-data"-->
		<fieldset>
			<div class="form-row">
				<div class="label"><label for="">Name<em>*</em></label></div>
				<div class="input"><input type="text" id="" name="" value="" autocomplete="off" /></div>
			</div>
			<div class="form-row">
				<div class="label">&nbsp;</div>
				<label class="checkbox"><input type="checkbox" name="agree_to_terms" value="1" id="" /> I agree to terms<em>*</em></label>
			</div>
			<div class="form-row">
				<div class="label">&nbsp;</div>
				<input type="submit" value="Submit" class="input_button" /><span class="ajax-loading hide"></span>
			</div>
			<div class="form-row">
				<label>Cardholder Name</label>
				<input type="text" size="20" class="card_name" />
			</div>
			<div class="form-row stack">
				<label>Cardholder Name</label>
				<input type="text" size="20" class="card_name" />
			</div>
			<div class="form-row">
				<div class="label"><label for="">Name<em>*</em></label></div>
				<div class="input"><input type="text" id="" name="" value="" /></div>
			</div>
			<div class="form-row stack">
				<div class="label"><label for="">Name<em>*</em></label></div>
				<div class="input"><input type="text" id="" name="" value="" /></div>
			</div>
		</fieldset>
	</form>
---------------------------------------- */
.form-row {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	/* Trigger hasLayout for inline-block, contain floats */
	display: inline-block;*display: inline;*zoom: 1;/*ie6/7*/
	vertical-align: top;
	width: 100%;
}
.form-row.block {
	display: block;
	overflow: hidden;
	width: auto;
}
.form-row.divider {
	border-top: 1px solid #EBEBEB;
	padding-top: 1em;
}
.form-row.spacer {
	height: 2.0em;
	/* hide text */
	color: transparent;
	font: 0/0 a;
	text-shadow: none;
}

/* 
	Forms - Inline fields
---------------------------------------- */
.form-fields-inline label,
.form-fields-inline .label,
.fields-inline label,
.fields-inline .label {
	/*float: left;*/
	display: inline-block;*display: inline;*zoom: 1;/*ie6/7*/
	margin-right: -4px;
	padding: 0 1.0em;
	vertical-align: middle;
	width: auto;
}
.form-fields-inline label:first-child,
.form-fields-inline .label:first-child,
.fields-inline label:first-child,
.fields-inline .label:first-child {
	padding-left: 0;
}
.form-fields-inline label,
.form-fields-inline .label,
.form-fields-inline button,
.form-fields-inline input,
.form-fields-inline .input,
.form-fields-inline textarea,
.form-fields-inline select,
.form-fields-inline .select-wrapper,
.fields-inline label,
.fields-inline .label,
.fields-inline button,
.fields-inline input,
.fields-inline .input,
.fields-inline textarea,
.fields-inline select,
.fields-inline .select-wrapper {
	display: inline-block;*display: inline;*zoom: 1;/*ie6/7*/
	margin-bottom: 0;
}

/* 
	Forms - Float fields
---------------------------------------- */
.form-float .form-row > label,
.form-float .form-row > .label {
	padding-right: 1.0em;
	width: 200px;
}
.form-float .form-row > label,
.form-float .form-row > .label,
.form-float .form-row > button,
.form-float .form-row > input,
.form-float .form-row > .input,
.form-float .form-row > textarea,
.form-float .form-row > select,
.form-float .form-row > .select-wrapper {
	float: left;
}
.form-float label,
.form-float .label,
.form-float button,
.form-float input,
.form-float .input,
.form-float textarea,
.form-float select,
.form-float .select-wrapper {
	margin-bottom: 0;
}

/* 
	Forms - Table fields
---------------------------------------- */
.form-table label,
.form-table .label,
.form-table button,
.form-table input,
.form-table .input,
.form-table textarea,
.form-table select,
.form-table .select-wrapper {
	margin-bottom: 0;
}
.form-table tr > td:first-child {
	padding-right: 1.0em;
}
.form-table tr > td {
	padding-bottom: 1.5rem;
}

/* 
	Forms - Row spacing
---------------------------------------- */
.form-row.fields-inline,
.fields-inline .form-row,
.form-float .form-row {
	margin-bottom: 1.5rem;
}

/* 
	Forms - Field spacing
---------------------------------------- */
.field_space-left {
	margin-left: 1.0em;
}
.field_space-top {
	margin-top: 1.0em;
}
.field_space-top-half {
	margin-top: 0.5em;
}

/* 
	Forms - Pill formatting
---------------------------------------- */
.form-row-pill select,
.form-row-pill .select-wrapper,
.form-row-pill input[type="email"],
.form-row-pill input[type="text"] {
	-khtml-bottom-right-border-radius: 0;
	-khtml-top-right-border-radius: 0;
	-moz-border-radius-bottomright: 0;
	-moz-border-radius-topright: 0;
	-webkit-bottom-right-border-radius: 0;
	-webkit-top-right-border-radius: 0;
	border-bottom-right-radius: 0;
	border-top-right-radius: 0;
}
.form-row-pill * + button:not(:last-child),
.form-row-pill * + input:not(:last-child),
.form-row-pill * + select:not(:last-child),
.form-row-pill * + .select-wrapper:not(:last-child) {
	-khtml-border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
}
.form-row-pill .form-submit,
.form-row-pill button[type="submit"],
.form-row-pill input[type="submit"] {
	background: #e6e6e6;
	-khtml-bottom-left-border-radius: 0;
	-khtml-top-left-border-radius: 0;
	-moz-border-radius-bottomleft: 0;
	-moz-border-radius-topleft: 0;
	-webkit-bottom-left-border-radius: 0;
	-webkit-top-left-border-radius: 0;
	border-bottom-left-radius: 0;
	border-top-left-radius: 0;
	
	border-left: 0;
	padding-left: 0.8em;
	padding-right: 0.8em;
}
.form-row-pill .form-submit:hover,
.form-row-pill .form-submit:focus,
.form-row-pill button[type="submit"]:hover,
.form-row-pill button[type="submit"]:focus,
.form-row-pill input[type="submit"]:hover,
.form-row-pill input[type="submit"]:focus {
	background: #d6d6d6;
}

/* 
	Forms - <select> wrap; Styled select and form replacement
	
	http://stackoverflow.com/questions/3532649/problem-with-select-and-after-with-css-in-webkit
	https://andywalpole.me/#!/blog/141056/using-css-style-notoriously-tricky-form-elements-checkboxes-select-dropdowns
	https://trykickoff.github.io/demos/forms.html
---------------------------------------- */
/* Support <select> styling on IE by styling the wrap instead */
.select-wrapper {
	display: inline-block;
	margin-bottom: 1.5rem;
	/*overflow: hidden;*//* Used when width of <select> was greater than container, but using appearance:none instead now */
	position: relative;
	vertical-align: middle;
}
.select-wrapper:before {
	content: "\f0d7";
	display: inline-block;
	font-family: FontAwesome;
	left: auto;
	line-height: 1.0;
	pointer-events: none;
	position: absolute;
	right: 1.0em;
	top: 50%;
	
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}
.select-wrapper select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	margin-bottom: 0;
	padding-right: 1.5em;
	/*max-width: 120%;
	min-width: 120%;
	width: 120%;*/
	width: 100%;
}
.select-wrapper select::-ms-expand {
	display: none;
}

/*
<label class="checkbox-replacement">
	<input type="checkbox" value="">
	<span></span>
	This is a custom checkbox
</label>
*/
.checkbox-replacement,
.radio-replacement {
	/*
	display: inline-block;
	margin-bottom: 1.5rem;
	overflow: hidden;
	position: relative;
	vertical-align: middle;
	
	cursor: pointer;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	*/
}
/* Hide the default input but allow tabbing, which display:none prevents */
.checkbox-replacement input[type="checkbox"],
.radio-replacement input[type="radio"] {
	opacity: 0.0;
	position: absolute;
	z-index: -1;
}
.checkbox-replacement input[type="checkbox"] + span:before,
.radio-replacement input[type="radio"] + span:before {
	display: inline-block;
	font-family: FontAwesome;
	margin-top: -0.1em;
	text-align: center;
	vertical-align: middle;
	width: 1.28571em;
}
.checkbox-replacement input[type="checkbox"] + span:before {
	content: "\f096";
}
.checkbox-replacement input[type="checkbox"]:checked + span:before {
	content: "\f046";
}
.radio-replacement input[type="radio"] + span:before {
	content: "\f10c";
}
.radio-replacement input[type="radio"]:checked + span:before {
	content: "\f192";
}

.file-replacement {
	display: inline-block;
	margin-bottom: 1.5rem;
	overflow: hidden;
	padding-right: 4.0em;
	position: relative;
	vertical-align: middle;
}
.file-replacement input[type="file"] {
	opacity: 0.0;
	position: absolute;
	z-index: -1;
}
.file-replacement span {
	display: inline-block;
	font-weight: 400;
	vertical-align: middle;
}
.file-replacement:after {
	content: "Browse";
	cursor: pointer;
	display: inline-block;
	vertical-align: middle;
}

/* 
	Forms - Faux file upload styling

	http://www.quirksmode.org/dom/inputfile.html
	<div class="input_file-hide_wrap">
		<input type="file" name="directory_image" id="directory_image" class="input_file input_file-hide_file" onchange="$(this).next().find('input[type=text]').val(this.value.substring(this.value.lastIndexOf('\\')+1));" />
		<div class="input_file-hide_fake">
			<input type="text" name="directory_image-text" value="" class="input_text" />
			<input type="button" value="Browse" class="input_button" />
		</div>
	</div>

	<script>
	jQuery(document).ready(function($)
	{
		// http://stackoverflow.com/questions/793014/jquery-trigger-file-input
		$('.file-opener').on('click', function(event)
		{
			event.preventDefault();
			$('#photo').trigger('click').get(0).focus();
		});
		
		// Help single click browse dialogue
		$('.input_file-hide_file', '.ie').on('focus', function(event)
		{
			event.preventDefault();
			$(this).trigger('click');
			this.blur();
		});
		
		// Put text in text field under file input
		$('.input_file-hide_file').on('change', function(event)
		{
			event.preventDefault();
			$(this)
				.next()
				.find('input[type=text]')
				.val(this.value.substring(this.value.lastIndexOf('\\')+1));
			this.blur();
		});
	});
	</script>
	<?php
	$id = 'photo';
	$name = $id;
	$value = set_value($name);
	?>
	<div class="form-row">
		<div class="input_file-hide_wrap">
			<input type="file" name="<?php echo $name; ?>" id="<?php echo $id; ?>" class="input_file-hide_file" />
			<div class="input_file-hide_fake">
				<input type="text" name="photo-text" value="" title="Photo" class="toggle_val" />
			</div>
		</div>
	</div>
---------------------------------------- */
.input_file-hide_wrap {
	position: relative;
}
.input_file-hide {
	height: auto;
	left: 0;
	-moz-opacity: 0.0;
	opacity: 0.0;
	filter: alpha(opacity: 0);
	position: absolute;
	text-align: right;
	top: 0;
	width: 100%;
	z-index: 2;
	*zoom: 1;
}

.input_file-hide_file {
	height: auto;
	-moz-opacity: 0.0;
	opacity: 0.0;
	filter:alpha(opacity: 0);
	position: relative;
	text-align: right;
	width: 100%;
	z-index: 2;
	*zoom: 1;
}
.input_file-hide_fake {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
}

.input_file_hide {
	height: 0;
	left: 0;
	-moz-opacity: 0s;
	opacity: 0.0;
	filter: alpha(opacity: 0);
	position: absolute;
	top: 0;
	width: 0;
}

/* 
	AJAX loading
---------------------------------------- */
.ajax-loader {
	background: transparent url('images/icons/ajax-loader.gif') scroll no-repeat 0 0;
	display: inline-block;
	margin-left: 10px;
	width: 16px;
	height: 16px;
	vertical-align: middle;
}

/* ------------------------------------------------------------
	Form validation
------------------------------------------------------------ */

/* 
	Form validation - <label>
---------------------------------------- */
label.error,
label.success {
	color: #E25F53;
}

label.success {
	background-color: transparent;
	color: #0060BF;
}

/* 
	Form validation - <label> <input> <textarea> <select>
---------------------------------------- */
input.error,
textarea.error,
select.error,
input.error:focus,
textarea.error:focus,
select.error:focus {
	border: 1px solid #E25F53;
}

/* 
	Form validation - jQuery validate plugin
---------------------------------------- */
.invalid label {
	color: #B94A48;
}
.invalid input,
.invalid textarea,
.invalid select {
	border-color: #B94A48;
}


/* --------------------------------------------------------------------------------
	## Layout
-------------------------------------------------------------------------------- */

/* ------------------------------------------------------------
	Columns and Grid
	
	<div class="columns">
		<div class="column w50">
			<p>Column 50%</p>
		</div>
		<div class="column w50">
			<p>Column 50%</p>
		</div>
	</div>
	
	<div class="columns grid">
		<h4>Two Thirds</h4>
		<div class="column-row">
			<div class="column w2-3">
				<p>Column 2/3</p>
			</div>
			<div class="column w1-3">
				<p>Column 1/3</p>
			</div>
		</div>
	</div>
------------------------------------------------------------ */

.columns,
.column {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: block;
	vertical-align: top;
	width: 100%;
}
.columns:after,
.column:after,
.column-row:after {
	clear: both;
	content: "";
	display: table;
}
.column {
	float: left;
	min-height: 1px;/* Helps empty floating columns have layout */
	width: auto;
}

/* Switch to a table layout without widths */
.columns-table {
	display: table;
	table-layout: auto;
	width: 100%;
}
.columns-table .column-row {
	display: table-row;
	width: 100%;
}
.columns-table > .column,
.columns-table .column-row > .column {
	display: table-cell;
	float: none;
}
.columns-table.valign-middle > .column,
.columns-table.valign-middle .column-row > .column,
.columns-table .column-row.valign-middle > .column {
	vertical-align: middle;
}

/* 
	Columns and Grid - Grid and gutter spacing
---------------------------------------- */
/* Wrap columns in a row and counter gutter with negative margin to keep flush outside gutters */
.grid .column-row {
	margin-left: -1.0em;
	margin-right: -1.0em;
}

.grid.columns-table {
	border-left: 0;
	border-right: 0;
}
.grid.columns-table .column-row {
	margin-left: 0;
	margin-right: 0;
}

.grid-flush > .column-row {
	margin-left: -2.0em;
	margin-right: -2.0em;
}
.grid-undo .column-row {
	margin-left: 0.0em;
	margin-right: 0.0em;
}
/* Add padding to create gutters between columns */
.grid,
.grid .column,
.grid-gutter {
	border-left: 1.0em solid transparent;
	border-right: 1.0em solid transparent;
}

/* Prevent nested gutters from compounding space */
.grid .columns,
/* Reset nested gutters */
.grid-undo,
.grid-undo .column:not(.grid-gutter) {
	border-left: 0;
	border-right: 0;
}
/* Prevent first/last column gutters */
/* Prevent edge gutters on first columns, making the grid flush against the layout */
.grid .column.alpha {
	border-left: 0;
}
.grid .column.omega {
	border-right: 0;
}

/* 
	Columns and Grid - Responsive formatting
---------------------------------------- */
/* Tablet : Design for a width of 768px (0px - 959px); 59.99em if 1em=16px */
@media only screen and (max-width: 959.99px) {
	.responsive-gutter {
		padding-left: 1.0rem !important;
		padding-right: 1.0rem !important;
	}
	.responsive-gutter--left {
		padding-left: 1.0rem !important;
	}
	.responsive-gutter--right {
		padding-right: 1.0rem !important;
	}
}
/* Mobile (Landscape) : Design for a width of 480px (0px - 767px); 47.99em if 1em=16px */
@media only screen and (max-width: 767.99px) {
}
/* Mobile (Portrait) : Design for a width of 320px (0px - 479px); 29.99em if 1em=16px */
@media only screen and (max-width: 479.99px) {
	/* Turn columns into rows */
	.columns-table > .column:not(.column--no-break),
	.columns-table .column-row > .column:not(.column--no-break),
	.column:not(.column--no-break) {
		/*border-left: 0;
		border-right: 0;*/
		display: inline-block;*display: inline;*zoom: 1;/*ie6/7*/
		float: none;
		margin-left: 0;
		margin-right: 0;
		vertical-align: bottom;
		width: 100% !important;
	}
	
	/* Modifiers: When columns pass breakpoint, set a margin beneath them */
	.column--break-margin-b1 {
		margin-bottom: 1.0em;
	}
	.column--break-margin-b2 {
		margin-bottom: 2.0em;
	}
	.column--break-margin-b3 {
		margin-bottom: 3.0em;
	}
	.column--break-margin-b4 {
		margin-bottom: 4.0em;
	}
	
	.columns--break-margin-b1 .column:not(:last-child) {
		margin-bottom: 1.0em;
	}
	.columns--break-margin-b2 .column:not(:last-child) {
		margin-bottom: 2.0em;
	}
	.columns--break-margin-b3 .column:not(:last-child) {
		margin-bottom: 3.0em;
	}
	.columns--break-margin-b4 .column:not(:last-child) {
		margin-bottom: 4.0em;
	}
}

/* ------------------------------------------------------------
	Flexbox Grid
	https://css-tricks.com/snippets/css/a-guide-to-flexbox/
	https://css-tricks.com/using-flexbox/
	http://flexboxgrid.com/
	https://philipwalton.github.io/solved-by-flexbox/demos/grids/
	
	<div class="flex-row">
		<div class="flex-cell w50">
			<p>Column 50%</p>
		</div>
		<div class="flex-cell w50">
			<p>Column 50%</p>
		</div>
	</div>
	
	<div class="flex-grid">
		<div class="flex-row">
			<h4>Two Thirds</h4>
			<div class="flex-cell">
				<div class="flex-cell w2-3">
					<p>Column 2/3</p>
				</div>
				<div class="flex-cell w1-3">
					<p>Column 1/3</p>
				</div>
			</div>
		</div>
	</div>
------------------------------------------------------------ */

.flex-grid,
.flex-row,
.flex-cell {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* Flexbox container */
.flex-row {
	/* Modern Flexbox only */
	-webkit-align-content: stretch;
	align-content: stretch;
	
	-ms-flex-align: stretch;
	-webkit-align-items: stretch;
	align-items: stretch;
	
	/* Vertical centering for legacy, horizontal centering for modern */
	-webkit-box-pack: space-around;
	-moz-box-pack: space-around;
	-ms-flex-pack: space-around;
	-webkit-justify-content: space-around;
	justify-content: space-around;
	
	/* Legacy Flexbox only */
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	-webkit-box-direction: normal;
	-moz-box-direction: normal;
	
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
}
/* Flexbox item */
.flex-cell {
	-webkit-box-flex: 0 1 auto;
	-moz-box-flex: 0 1 auto;
	-webkit-flex: 0 1 auto;
	-ms-flex: 0 1 auto;
	flex: 0 1 auto;
	-webkit-box-ordinal-group: 1;
	-moz-box-ordinal-group: 1;
	-ms-flex-order: 1;
	-webkit-order: 1;
	order: 1;
}

.demo .flex-cell {
	background: #F6F6F6;
}
.demo .flex-cell p {
	background: #EEEEEE;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	margin: 0.25em;
	padding: 0.25em;
	text-align: center;
}

/* Justification per row */
.flex-row--justify-flex-start {
	/* Vertical centering for legacy, horizontal centering for modern */
	-webkit-box-pack: flex-start;
	-moz-box-pack: flex-start;
	-ms-flex-pack: flex-start;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
}

/* Alignment per row */
.flex-row--bottom {
	-ms-flex-align: flex-end;
	-webkit-align-items: flex-end;
	align-items: flex-end;
}
.flex-row--center {
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}
.flex-row--top {
	-ms-flex-align: flex-start;
	-webkit-align-items: flex-start;
	align-items: flex-start;
}

/* Alignment per cell */
.flex-cell--bottom {
	-webkit-align-self: flex-end;
	align-self: flex-end;
}
.flex-cell--center {
	-webkit-align-self: center;
	align-self: center;
}
.flex-cell--top {
	-webkit-align-self: flex-start;
	align-self: flex-start;
}

/* 
	Flexbox Grid - Grid and gutter spacing
---------------------------------------- */

.flex-grid .flex-row {
	margin-left: -1.0em;
	margin-right: -1.0em;
}
.flex-grid .flex-cell {
	border: 0 solid transparent;
	border-width: 0 1.0em;
}

/* 
	Flexbox Grid - Responsive formatting
---------------------------------------- */
/* Mobile (Portrait) : Design for a width of 320px (0px - 479px); 29.99em if 1em=16px */
@media only screen and (max-width: 479.99px) {
	/* Turn columns into rows */
	.flex-row {
		-webkit-flex-flow: column wrap;
		flex-flow: column wrap;
	}
	.flex-cell {
		width: 100% !important;
	}
}


/* ============================================================
	# Components
============================================================ */

/* ------------------------------------------------------------
	Buttons
------------------------------------------------------------ */

.button {
	background-color: transparent;
	border: 1px solid currentColor;
	
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	
	color: #a5a5a5;
	cursor: pointer;
	display: inline-block;*display: inline;zoom: 1;/*ie6/7*/
	font: inherit;
	letter-spacing: 0.1rem;
	line-height: 1.42857;
	line-height: 1.4;
	margin-bottom: 0;
	padding: 0.5em 1.5em;
	text-align: center;
	text-decoration: none;
	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	
	vertical-align: middle;
	white-space: nowrap;
}
.button:hover,
.button:focus,
.button:active,
.button.active {
	color: #7e7e7e;
	outline: 0;
}
.button.disabled,
.button[disabled],
fieldset[disabled] .button {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	
	cursor: not-allowed;
	
	-moz-opacity: 0.65;
	opacity: 0.65;
	filter: alpha(opacity: 65);
	
	pointer-events: none;
}

/* 
	Pill Button
---------------------------------------- */
.button-pill {
	-webkit-border-radius: 1.5em;
	-khtml-border-radius: 1.5em;
	-moz-border-radius: 1.5em;
	border-radius: 1.5em;
}

/* 
	Button Group
---------------------------------------- */
.button-group .button {
	-webkit-border-radius: 0px;
	-khtml-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	display: table-cell;
}
.button-group .button:first-child {
	-webkit-bottom-left-border-radius: 4px;
	-webkit-top-left-border-radius: 4px;
	-khtml-bottom-left-border-radius: 4px;
	-khtml-top-left-border-radius: 4px;
	-moz-border-radius-bottomleft: 4px;
	-moz-border-radius-topleft: 4px;
	border-bottom-left-radius: 4px;
	border-top-left-radius: 4px;
}
.button-group .button:last-child {
	-webkit-bottom-right-border-radius: 4px;
	-webkit-top-right-border-radius: 4px;
	-khtml-bottom-right-border-radius: 4px;
	-khtml-top-right-border-radius: 4px;
	-moz-border-radius-bottomright: 4px;
	-moz-border-radius-topright: 4px;
	border-bottom-right-radius: 4px;
	border-top-right-radius: 4px;
}
.button-group .button-pill:first-child {
	-webkit-bottom-left-border-radius: 1.5em;
	-webkit-top-left-border-radius: 1.5em;
	-khtml-bottom-left-border-radius: 1.5em;
	-khtml-top-left-border-radius: 1.5em;
	-moz-border-radius-bottomleft: 1.5em;
	-moz-border-radius-topleft: 1.5em;
	border-bottom-left-radius: 1.5em;
	border-top-left-radius: 1.5em;
}
.button-group .button-pill:last-child {
	-webkit-bottom-right-border-radius: 1.5em;
	-webkit-top-right-border-radius: 1.5em;
	-khtml-bottom-right-border-radius: 1.5em;
	-khtml-top-right-border-radius: 1.5em;
	-moz-border-radius-bottomright: 1.5em;
	-moz-border-radius-topright: 1.5em;
	border-bottom-right-radius: 1.5em;
	border-top-right-radius: 1.5em;
}

/* 
	Button Sizes
---------------------------------------- */
.button-xl {
	font-size: 1.8em;
	text-transform: uppercase;
}
.button-l {
	font-size: 1.4em;
	text-transform: uppercase;
}
.button-s {
	font-size: 0.8em;
	text-transform: uppercase;
}
.button-xs {
	font-size: 0.6em;
	padding: 0.5em 0.8em;
	text-transform: uppercase;
}

/* 
	Inverse Buttons
---------------------------------------- */
.button-inverse {
	background-color: #555;
	border-color: #555;
	color: #fff;
}
.button-inverse:hover,
.button-inverse:focus,
.button-default:active,
.button-default.active {
	background-color: #666;
	color: #fff;
}

/* 
	Button Styles
---------------------------------------- */

/* Default */
.button-default {
	background-color: #ffffff;
	border-color: currentColor;
	color: #a5a5a5;
}
.button-default:hover,
.button-default:focus,
.button-default:active,
.button-default.active {
	color: #7e7e7e;
}

/* Default Inverse */
.button-default--inverse {
	background-color: #a5a5a5;
	border-color: #a5a5a5;
	color: #ffffff;
}
.button-default--inverse:hover,
.button-default--inverse:focus,
.button-default--inverse:active,
.button-default--inverse.active {
	background-color: #7e7e7e;
	border-color: #7e7e7e;
	color: #ffffff;
}

/* Primary */
.button-primary {
	background-color: #ffffff;
	border-color: currentColor;
	color: #03a9f4;
}
.button-primary:hover,
.button-primary:focus,
.button-primary:active,
.button-primary.active {
	color: #0295d9;
}

/* Primary Inverse */
.button-primary--inverse {
	background-color: #03a9f4;
	border-color: #03a9f4;
	color: #ffffff;
}
.button-primary--inverse:hover,
.button-primary--inverse:focus,
.button-primary--inverse:active,
.button-primary--inverse.active {
	background-color: #0295d9;
	border-color: #0295d9;
	color: #ffffff;
}

/* Success */
.button-success {
	background-color: #ffffff;
	border-color: currentColor;
	color: #8bc34a;
}
.button-success:hover,
.button-success:focus,
.button-success:active,
.button-success.active {
	color: #7cb342;
}

/* Success Inverse */
.button-success--inverse {
	background-color: #8bc34a;
	border-color: #8bc34a;
	color: #ffffff;
}
.button-success--inverse:hover,
.button-success--inverse:focus,
.button-success--inverse:active,
.button-success--inverse.active {
	background-color: #7cb342;
	border-color: #7cb342;
	color: #ffffff;
}

/* Error */
.button-error {
	background-color: #ffffff;
	border-color: currentColor;
	color: #eb5339;
}
.button-error:hover,
.button-error:focus,
.button-error:active,
.button-error.active {
	color: #e64529;
}

/* Error Inverse */
.button-error--inverse {
	background-color: #eb5339;
	border-color: #eb5339;
	color: #ffffff;
}
.button-error--inverse:hover,
.button-error--inverse:focus,
.button-error--inverse:active,
.button-error--inverse.active {
	background-color: #e64529;
	border-color: #e64529;
	color: #ffffff;
}

/* Warning */
.button-warning {
	background-color: #ffffff;
	border-color: currentColor;
	color: #ffc107;
}
.button-warning:hover,
.button-warning:focus,
.button-warning:active,
.button-warning.active {
	color: #ffb300;
}

/* Warning Inverse */
.button-warning--inverse {
	background-color: #ffc107;
	border-color: #ffc107;
	color: #ffffff;
}
.button-warning--inverse:hover,
.button-warning--inverse:focus,
.button-warning--inverse:active,
.button-warning--inverse.active {
	background-color: #ffb300;
	border-color: #ffb300;
	color: #ffffff;
}

/* Info */
.button-info {
	background-color: #ffffff;
	border-color: currentColor;
	color: #00bcd4;
}
.button-info:hover,
.button-info:focus,
.button-info:active,
.button-info.active {
	color: #00acc1;
}

/* Info Inverse */
.button-info--inverse {
	background-color: #00bcd4;
	border-color: #00bcd4;
	color: #ffffff;
}
.button-info--inverse:hover,
.button-info--inverse:focus,
.button-info--inverse:active,
.button-info--inverse.active {
	background-color: #00acc1;
	border-color: #00acc1;
	color: #ffffff;
}

/* Danger */
.button-danger {
	background-color: #ffffff;
	border-color: currentColor;
	color: #e51c23;
}
.button-danger:hover,
.button-danger:focus,
.button-danger:active,
.button-danger.active {
	color: #dd191d;
}

/* Danger Inverse */
.button-danger--inverse {
	background-color: #e51c23;
	border-color: #e51c23;
	color: #ffffff;
}
.button-danger--inverse:hover,
.button-danger--inverse:focus,
.button-danger--inverse:active,
.button-danger--inverse.active {
	background-color: #dd191d;
	border-color: #dd191d;
	color: #ffffff;
}

/* Message */
.button-message {
	background-color: #ffffff;
	border-color: currentColor;
	color: #357ebd;
}
.button-message:hover,
.button-message:focus,
.button-message:active,
.button-message.active {
	color: #3071a9;
}

/* Message Inverse */
.button-message--inverse {
	background-color: #357ebd;
	border-color: #357ebd;
	color: #ffffff;
}
.button-message--inverse:hover,
.button-message--inverse:focus,
.button-message--inverse:active,
.button-message--inverse.active {
	background-color: #3071a9;
	border-color: #3071a9;
	color: #ffffff;
}

/* 
	Turn button back into a link
---------------------------------------- */
.button-link {
}
.button-link:hover,
.button-link:focus,
.button-link:active,
.button-link.active {
	text-decoration: underline;
}
.button-link.disabled,
.button-link[disabled],
fieldset[disabled] .button-link {
	text-decoration: none;
}

/* 
	Options Button
	
	<div class="options-button options-button--on">
		<span>Filter is on</span>
		<a href="?filter=off"></a>
	</div>
	<div class="options-button options-button--off">
		<span>Filter is off</span>
	</div>
---------------------------------------- */
.options-button {
	background-color: #a5a5a5;
	
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	
	color: #ffffff;
	display: inline-block;
	
	-webkit-transition: all 0.4s ease-out 0.0s;
	-moz-transition: all 0.4s ease-out 0.0s;
	-ms-transition: all 0.4s ease-out 0.0s;
	-o-transition: all 0.4s ease-out 0.0s;
	transition: all 0.4s ease-out 0.0s;
	
	vertical-align: middle;
	white-space: nowrap;
}

.options-button span {
	display: table-cell;
	padding: 0.5em 1.0em;
}
.options-button span:last-of-type {
	padding-right: 0;
}
.options-button span:first-child {
	-webkit-bottom-left-border-radius: 4px;
	-webkit-top-left-border-radius: 4px;
	-khtml-bottom-left-border-radius: 4px;
	-khtml-top-left-border-radius: 4px;
	-moz-border-radius-bottomleft: 4px;
	-moz-border-radius-topleft: 4px;
	border-bottom-left-radius: 4px;
	border-top-left-radius: 4px;
}
.options-button span:last-child {
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	
	padding: 0.5em 1.0em;
}

.options-button a {
	color: inherit;
	display: table-cell;
	line-height: 1;
	outline: 0 none;
	padding: 0.5em;
	text-decoration: none;
	vertical-align: middle;
}
.options-button a:last-of-type {
	-webkit-bottom-right-border-radius: 4px;
	-webkit-top-right-border-radius: 4px;
	-khtml-bottom-right-border-radius: 4px;
	-khtml-top-right-border-radius: 4px;
	-moz-border-radius-bottomright: 4px;
	-moz-border-radius-topright: 4px;
	border-bottom-right-radius: 4px;
	border-top-right-radius: 4px;
}
.options-button a:after {
	-webkit-border-radius: 50%;
	-khtml-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	
	content: "\f00d";
	display: inline-block;
	font-family: FontAwesome;
	font-size: 0.8em;
	height: 1.0em;
	padding: 0.3em;
	text-align: center;
	text-indent: -0.05em;
	vertical-align: middle;
	width: 1.0em;
}

.options-button--on {
	background-color: #8bc34a;
}
.options-button--on:hover {
	background-color: #eb5339;
}
.options-button--on a:after {
	background-color: rgba(255, 255, 255, 0.4);
	content: "\f00d";
}

/* ------------------------------------------------------------
	Tooltips
------------------------------------------------------------ */

.tip:hover,
.tip:active {
	position: relative;
}

.tip[title]:hover:after,
.tip[title]:active:after {
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
	background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
	background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
	background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
	background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0px 0px 4px #222;
	-moz-box-shadow: 0px 0px 4px #222;
	box-shadow: 0px 0px 4px #222;
	color: #333;
	content: attr(title);
	left: 0;
	padding: 4px 8px;
	position: absolute;
	top: 100%;
	-webkit-transition: all 0.4s ease-out 0s;
	-moz-transition: all 0.4s ease-out 0s;
	-ms-transition: all 0.4s ease-out 0s;
	-o-transition: all 0.4s ease-out 0s;
	transition: all 0.4s ease-out 0s;
	white-space: nowrap;
	z-index: 20;
}

.tip.top[title]:hover:after,
.tip.top[title]:active:after {
	top: auto;
	bottom: 100%;
}
.tip.bottom[title]:hover:after,
.tip.bottom[title]:active:after {
	top: 100%;
	bottom: auto;
}
.tip.left[title]:hover:after,
.tip.left[title]:active:after {
	left: 0;
	right: auto;
}
.tip.right[title]:hover:after,
.tip.right[title]:active:after {
	left: auto;
	right: 0;
}

/* ------------------------------------------------------------
	Badges
------------------------------------------------------------ */

.badge {
	background-color: #bdbdbd;
	
	-webkit-border-radius: 0.8rem;
	-khtml-border-radius: 0.8rem;
	-moz-border-radius: 0.8rem;
	border-radius: 0.8rem;
	
	color: #ffffff;
	display: inline-block;
	font-size: 0.8em;
	font-weight: 600;
	line-height: 1.2;
	min-width: 1.0rem;
	padding: 0.2em 0.5em;
	text-align: center;
	vertical-align: baseline;
	white-space: nowrap;
}
.badge-primary {
	background-color: #03a9f4;
}
.badge-success {
	background-color: #8bc34a;
}
.badge-info {
	background-color: #00bcd4;
}
.badge-warning {
	background-color: #ffc107;
}
.badge-error {
	background-color: #e51c23;
}
.badge-orange {
	background-color: #ffb300;
	background-color: #ff9800;
}

/* ------------------------------------------------------------
	Tags
------------------------------------------------------------ */

.tag {
	-webkit-border-radius: 0.25em;
	-khtml-border-radius: 0.25em;
	-moz-border-radius: 0.25em;
	border-radius: 0.25em;
	
	color: #ffffff;
	display: inline-block;
	font-size: 85%;
	font-weight: 600;
	line-height: 1.4;
	padding: 0 0.3em;
	text-align: center;
	text-transform: uppercase;
	vertical-align: baseline;
	white-space: nowrap;
}

.code-tag {
	background-color: #f9f2f4;
	
	-webkit-border-radius: 1px;
	-khtml-border-radius: 1px;
	-moz-border-radius: 1px;
	border-radius: 1px;
	
	color: #c7254e;
	font-size: 90%;
	font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
	padding: 2px 4px;
}

/* ------------------------------------------------------------
	Panels
------------------------------------------------------------ */

.panel {
	background-color: #ffffff;
	border: 1px solid #eeeeee;
	
	-webkit-border-radius: 1px;
	-khtml-border-radius: 1px;
	-moz-border-radius: 1px;
	border-radius: 1px;
	
	margin-bottom: 1.0em;
}
.panel-transparent {
	background-color: transparent;
	border-color: transparent;
}

.panel-heading {
	padding: 1.0em 1.0em 0;
}
.panel-heading h2 {
	color: #9e9e9e;
	font-size: 1.2rem;
	font-weight: 700;
	margin: 0;
	text-transform: uppercase;
}

.panel-body {
	padding: 1.0em;
}

.panel-footer {
	border-top: 1px solid #eeeeee;
	color: #9e9e9e;
	padding: 1.0em;
}

/* ------------------------------------------------------------
	Wells
------------------------------------------------------------ */

.well {
	background-color: #f6f6f6;
	
	-webkit-box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.08);
	-moz-box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.08);
	box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.08);
	
	margin-bottom: 1.0em;
	padding: 1.0em;
}
.well--dark {
	background-color: #eeeeee;
}
.well--s {
	padding: 0.5em;
}
.well--l {
	padding: 1.5em;
}

/* ------------------------------------------------------------
	Site Messages
------------------------------------------------------------ */

/* 
	Notifications
	
	<div class="notification" data-notification-type="success">
		<p><strong>Success!</strong> Here is a notification <a href="">with a link</a>.</p>
	</div>
	
	<div class="notification" data-notification-mode="box" data-notification-type="success">
		<p><strong>Success!</strong> Here is a notification <a href="">with a link</a>.</p>
	</div>
	
	<div class="notification" data-notification-mode="box" data-notification-type="messages">
		<div class="notification-message">
			<h3>Message <span>Heading</span></h3>
			<p>Here is a message <a href="">with a link</a>.</p>
		</div>
	</div>
---------------------------------------- */
.notification {
	clear: both;
	color: #a5a5a5;
	margin-bottom: 1.0em;
	position: relative;
}
.notification *:last-child {
	margin-bottom: 0;
}

.notification[data-notification-type="primary"] {
	color: #03a9f4;
}
.notification[data-notification-type="success"] {
	color: #8bc34a;
}
.notification[data-notification-type="error"] {
	color: #eb5339;
}
.notification[data-notification-type="danger"] {
	color: #e51c23;
}
.notification[data-notification-type="warning"] {
	color: #ffb300;
}
.notification[data-notification-type="info"] {
	color: #00bcd4;
}
.notification[data-notification-type="message"] {
	color: #428bca;
}

/* Handle data-notification-mode = box */

.notification[data-notification-mode="box"] {
	background-color: #ffffff;
	border: 1px solid currentColor;
	
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	
	padding: 1.0em;
	padding-left: 3.0em;
}
.notification[data-notification-mode="box"]:after {
	content: "\00D7";/*2716 or 00D7*/
	cursor: pointer;
	font-size: 18px;
	left: auto;
	line-height: 1.0;
	outline: 0 none;
	padding: 0.25em 0.5em;
	position: absolute;
	right: 0;
	text-decoration: none;
	top: 0;
}
.notification[data-notification-mode="box"]:before {
	content: "";
	font-family: FontAwesome;
	left: 1.8em;
	position: absolute;
	top: 50%;
	
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.notification--inverse[data-notification-mode="box"] {
	background-color: #a5a5a5;
	border: 0;
	color: #ffffff;
}

.notification[data-notification-mode="box"][data-notification-type="primary"]:before {
	content: "\f111";
}
.notification--inverse[data-notification-mode="box"][data-notification-type="primary"] {
	background-color: #03a9f4;
	border: 0;
	color: #ffffff;
}

.notification[data-notification-mode="box"][data-notification-type="success"]:before {
	content: "\f058";
}
.notification--inverse[data-notification-mode="box"][data-notification-type="success"] {
	background-color: #8bc34a;
	border: 0;
	color: #ffffff;
}

.notification[data-notification-mode="box"][data-notification-type="error"]:before {
	content: "\f06a";
}
.notification--inverse[data-notification-mode="box"][data-notification-type="error"] {
	background-color: #eb5339;
	border: 0;
	color: #ffffff;
}

.notification[data-notification-mode="box"][data-notification-type="danger"]:before {
	content: "\f0e7";
}
.notification--inverse[data-notification-mode="box"][data-notification-type="danger"] {
	background-color: #e51c23;
	border: 0;
	color: #ffffff;
}

.notification[data-notification-mode="box"][data-notification-type="warning"]:before {
	content: "\f071";
}
.notification--inverse[data-notification-mode="box"][data-notification-type="warning"] {
	background-color: #ffb300;
	border: 0;
	color: #ffffff;
}

.notification[data-notification-mode="box"][data-notification-type="info"]:before {
	content: "\f05a";
}
.notification--inverse[data-notification-mode="box"][data-notification-type="info"] {
	background-color: #00bcd4;
	border: 0;
	color: #ffffff;
}

.notification[data-notification-mode="box"][data-notification-type="message"]:before {
	content: "\f0e0";
}
.notification--inverse[data-notification-mode="box"][data-notification-type="message"] {
	background-color: #428bca;
	border: 0;
	color: #ffffff;
}

/* ------------------------------------------------------------
	Notification colors
------------------------------------------------------------ */

/* 
	Default
---------------------------------------- */
.default-lighter {
	background-color: #f6f6f6;
}
.default-row td,
.default-row:hover td,
.default-light {
	background-color: #eeeeee;
}
.default-medium {
	background-color: #bdbdbd;
}
.default-dark {
	background-color: #a5a5a5;
}
.default-darker {
	background-color: #7e7e7e;
}

/* 
	Primary
---------------------------------------- */
.primary-lighter {
	background-color: #e4f3fa;
}
.primary-row td,
.primary-row:hover td,
.primary-light {
	background-color: #d4f1ff;
}
.primary-medium {
	background-color: #03a9f4;
}
.primary-dark {
	background-color: #0295d9;
}
.primary-darker {
	background-color: #027fb0;
}

/* 
	Success
---------------------------------------- */
.success-lighter {
	background-color: #f1f8e9;
}
.success-row td,
.success-row:hover td,
.success-light {
	background-color: #e5f2d6;
}
.success-medium {
	background-color: #8bc34a;
}
.success-dark {
	background-color: #7cb342;
}
.success-darker {
	background-color: #558b2f;
}

.success-alt-lighter {
	background-color: #f1f8e9;
}
.success-alt-light {
	background-color: #5cb85c;
}
.success-alt-medium {
	background-color: #4cae4c;
}
.success-alt-dark {
	background-color: #449d44;
}
.success-alt-darker {
	background-color: #398439;
}

/* 
	Warning
---------------------------------------- */
.warning-lighter {
	background-color: #fff8e1;
}
.warning-row td,
.warning-row:hover td,
.warning-light {
	background-color: #fff2c7;
}
.warning-medium {
	background-color: #ffc107;
}
.warning-dark {
	background-color: #ffb300;
}
.warning-darker {
	background-color: #ff8f00;
}

.warning-alt-lighter {
	background-color: #fff8e1;
}
.warning-alt-row td,
.warning-alt-row:hover td,
.warning-alt-light {
	background-color: #f0ad4e;
}
.warning-alt-medium {
	background-color: #eea236;
}
.warning-alt-dark {
	background-color: #ec971f;
}
.warning-alt-darker {
	background-color: #d58512;
}

/* 
	Error
---------------------------------------- */
.error-lighter {
	background-color: #f9ece9;
}
.error-row td,
.error-row:hover td,
.error-light {
	background-color: #f6ddd9;
}
.error-medium {
	background-color: #eb5339;
}
.error-dark {
	background-color: #e64529;
}
.error-darker {
	background-color: #d23419;
}

.error-alt-row td,
.error-alt-lighter {
	background-color: #f9ece9;
}
.error-alt-row:hover td,
.error-alt-light {
	background-color: #d9534f;
}
.error-alt-medium {
	background-color: #d43f3a;
}
.error-alt-dark {
	background-color: #c9302c;
}
.error-alt-darker {
	background-color: #ac2925;
}

/* 
	Danger
---------------------------------------- */
.danger-row td,
.danger-lighter {
	background-color: #fde0dc;
}
.danger-row:hover td,
.danger-light {
	background-color: #fccbc4;
}
.danger-medium {
	background-color: #e51c23;
}
.danger-dark {
	background-color: #dd191d;
}
.danger-darker {
	background-color: #c41411;
}

/* 
	Info
---------------------------------------- */
.info-row td,
.info-lighter {
	background-color: #e0f7fa;
}
.info-row:hover td,
.info-light {
	background-color: #caf1f6;
}
.info-medium {
	background-color: #00bcd4;
}
.info-dark {
	background-color: #00acc1;
}
.info-darker {
	background-color: #00838f;
}

.info-alt-row td,
.info-alt-lighter {
	background-color: #e0f7fa;
}
.info-alt-row:hover td,
.info-alt-light {
	background-color: #5bc0de;
}
.info-alt-medium {
	background-color: #46b8da;
}
.info-alt-dark {
	background-color: #31b0d5;
}
.info-alt-darker {
	background-color: #269abc;
}

/* 
	Message
---------------------------------------- */

.message-row td,
.message-lighter {
	background-color: #e0f7fa;
}
.message-row:hover td,
.message-light {
	background-color: #428bca;
}
.message-medium {
	background-color: #357ebd;
}
.message-dark {
	background-color: #3071a9;
}
.message-darker {
	background-color: #285e8e;
}

/* ------------------------------------------------------------
	Site Loading Overlay
------------------------------------------------------------ */

.site-loading {
	background: #FFFFFF url('images/icons/preloader.png') scroll no-repeat 50% 50%;
	background-color: rgba(255, 255, 255, 0.8);
	bottom: 0;
	display: none;
	left: 0;
	padding: 1.0em;
	position: fixed;
	right: 0;
	text-align: center;
	top: 0;
	z-index: 9999999;
}

/* ------------------------------------------------------------
	Loading Overlay
------------------------------------------------------------ */

.loading-overlay_bg {
	background: rgb(0, 0, 0);/*lte IE8*/
	background: rgba(0, 0, 0, 0.8);
	
	/* Fixed to fill scrollable area */
	bottom: 0;
	left: 0;
	position: fixed;/* If appended to body element, set position fixed to fill all scrollable */
	right: 0;
	top: 0;
	z-index: 997;
	
	display: table;
	height: 100%;
	width: 100%;
}
.loading-overlay_liner {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}
.loading-overlay_content {
	/* Scroll overflowing content */
	overflow: auto;
	
	/* Resize */
	resize: both;
	resize: none;
	
	/* Styling */
	background: #FFFFFF;
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0 0 18px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0 0 18px rgba(0, 0, 0, 0.4);
	box-shadow: 0 0 18px rgba(0, 0, 0, 0.4);
	display: inline-block;
	padding: 2.0em;
}


/* ============================================================
	# Site Styles
============================================================ */

/* --------------------------------------------------------------------------------
	## Body and Liner

	<body>
		<div class="body-liner">
			<header></header>
			<section></section>
		</div>
		<footer></footer>
	</body>
-------------------------------------------------------------------------------- */

/* Set as the color of the <footer> so non-scrollable area below it looks like part of the <footer> */
body {
	/*background: #323131;*/
}

/* Set as the desired <body> color; it is layered on top of the real <body> */
.body-liner {
	/*background: #FFFFFF;*/
}

/* --------------------------------------------------------------------------------
	## Band, Wrap, and Liner

	<div class="band-wrap>
		<div class="band">
			<div class="band-liner">
			
			</div>
		</div>
	</div>
-------------------------------------------------------------------------------- */

.band {
	/* Trigger hasLayout for inline-block, contain floats */
	display: inline-block;*display: inline;*zoom: 1;/*ie6/7*/
	vertical-align: top;
	width: 100%;
}
.band-row {
	position: relative;
}

.band-liner {
	margin: 0 auto;
	max-width: 1200px;
	position: relative;
	width: 100%;
}
/* Desktop : Design for a width of 960px (0px - 1199px) */
@media only screen and (max-width: 74.99em) {
	.band-liner {
		max-width: 960px;
	}
}
/* Tablet : Design for a width of 768px (0px - 959px); 59.99em if 1em=16px */
@media only screen and (max-width: 959.99px) {
}


/* --------------------------------------------------------------------------------
	## Navigation
-------------------------------------------------------------------------------- */

/* 
	Navigation - Nav list setup
---------------------------------------- */
.nav-list {
	/* Trigger hasLayout for inline-block, contain floats */
	display: inline-block; *display: inline;zoom: 1;/*ie6/7*/
	vertical-align: bottom;
}
/* Reset list styles */
.nav-list ul,
.nav-list li {
	list-style: none;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}
/* Setup menu items, Item > Subitem... */
.nav-list ul {
	/* Trigger hasLayout for inline-block, contain floats */
	display: inline-block;*display: inline;*zoom: 1;/*ie6/7*/
	vertical-align: bottom;
}
.nav-list li {
	float: left;
	position: relative;
}
.nav-list li.first,
.nav-list li:first-child {
}
.nav-list li:before {
}
.nav-list li:first-child:before {
}
/* Restful state */
.nav-list a {
	display: block;
}
/* Hover state */
.nav-list a:hover {
}
/* Active state */
.nav-list .active a {
}

/* 
	Navigation - Nav List Dropdown Setup
---------------------------------------- */
/* Setup menus, Item... */
.nav-dropdown-setup {
	/* Trigger hasLayout for inline-block, contain floats */
	display: inline-block;*display: inline;*zoom: 1;/*ie6/7*/
	vertical-align: bottom;
	width: 100%;
}
.nav-dropdown-setup ul {
	/* Trigger hasLayout for inline-block, contain floats */
	display: inline-block;*display: inline;*zoom: 1;/*ie6/7*/
	text-align: left;
	vertical-align: top;
}
/* Reset list styles */
.nav-dropdown-setup ul,
.nav-dropdown-setup li {
	border: 0 none;
	list-style: none;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}
.nav-dropdown-setup li {
	float: left;/**//*Horizontal menu*/
	position: relative;
}
/* Setup nested menus, Item > Subitem... */
.nav-dropdown-setup ul ul {
	/* Position dropdown */
	left: 0;
	min-width: 100%;/**//* Attempt uniform width throughout descendants */
	pointer-events: none;
	position: absolute;
	top: 100%;
	width: auto;
	z-index: 20;
	
	/* Squish - Hide it initially */
	/* don't do display:none; squish it for screen readers and devices */
	height: 0px;
	overflow: hidden;
	
	/* Transition from */
	opacity: 0.0;/* for transition, problem with nesting in IE8 */
	/*filter: alpha(opacity=0);*/
	
	/* Transition */
	-webkit-transition: opacity 0.4s ease-out 0s;
	-moz-transition: opacity 0.4s ease-out 0s;
	-ms-transition: opacity 0.4s ease-out 0s;
	-o-transition: opacity 0.4s ease-out 0s;
	transition: opacity 0.4s ease-out 0s;
}
.lt-ie9 .nav-dropdown-setup ul ul {
	height: 0px;
}
.nav-dropdown-setup li li {
	display: list-item;
	float: none;
}
/* Setup nested menus, Item > Subitem > Sub-subitem... */
.nav-dropdown-setup ul ul ul {/* Position to the top right of parent */
	left: 100%;
	top: 0;
}
/* Show the direct submenu on hover (not nested menu ULs) */
.nav-dropdown-setup li:hover > ul {
	/* Squish - Show it */
	height: auto;
	overflow: visible;
	pointer-events: inherit;
	
	/* Transition to */
	opacity: 1.0;/* for transition, problem with nesting in IE8 */
	/*filter: alpha(opacity=100);*/
}

/* ------------------------------------------------------------
	Responsive Menu
	
	<input id="responsive-menu_cb_height-top" type="checkbox" class="responsive-menu-checkbox" data-responsive-menu-type="height-top">
	<label for="responsive-menu_cb_height-top" class="responsive-menu-button">Menu Button - Height Top</label>
	<nav class="responsive-menu" data-responsive-menu-type="height-top">
		<ul>
			<li><label for="responsive-menu_cb_height-top" class="responsive-menu-button">Menu Button - Height Top</label></li>
			<li><a href="">Home</a></li>
			<li><a href="">Option</a></li>
			<li><a href="">Option</a>
				<ul>
					<li><a href="">Sub-Option</a></li>
					<li><a href="">Sub-Option</a></li>
					<li><a href="">Sub-Option</a></li>
				</ul>
			</li>
			<li><a href="">Option</a></li>
		</ul>
	</nav>
------------------------------------------------------------ */

.responsive-menu {
	height: 100%;
	opacity: 1.0;
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
	position: relative;
	white-space: nowrap;
	z-index: 9999999;
	
	background: rgb(255, 255, 255);
	
	-webkit-transition: all 0.4s ease-out 0s;
	-moz-transition: all 0.4s ease-out 0s;
	-ms-transition: all 0.4s ease-out 0s;
	-o-transition: all 0.4s ease-out 0s;
	transition: all 0.4s ease-out 0s;
}
/* Reset list styles */
.responsive-menu ul,
.responsive-menu li {
	list-style: none;
	margin: 0;
	padding: 0;
}
/* Setup menu items, Item > Subitems */
.responsive-menu ul {
	display: block;
}
.responsive-menu ul:after {
	clear: both;
	content: "";
	display: table;
}
	/* Restful state */
	.responsive-menu a {
		display: block;
		padding: 0.5em;
		padding-left: 1.0em;
	}

.responsive-menu li ul {
	padding-left: 1.0em;
}
	.responsive-menu li li,
	.responsive-menu li li:first-child {
		border: 0;
	}
		.responsive-menu li li a {
			font-weight: normal;
		}
		.responsive-menu li li a:before {
			/*content: "- ";*/
		}
/* Custom override */
.responsive-menu > ul {
	padding: 2.0em 0 4.0em;
}
.responsive-menu > ul ul {
	padding-bottom: 1.0em;
}
.responsive-menu li li {
	background-color: rgba(255, 255, 255, 0.2);
}

.responsive-menu a {
	font-size: 1.2em;
	text-decoration: none;
}
.responsive-menu a:hover {
	text-decoration: underline;
}

/* 
	Responsive Menu liner - Use on the <body> tag; critical if pushing page content
---------------------------------------- */
.responsive-menu-liner {
	left: 0;
	position: relative;
	top: 0;
	
	-webkit-transition: all 0.4s ease-out 0s;
	-moz-transition: all 0.4s ease-out 0s;
	-ms-transition: all 0.4s ease-out 0s;
	-o-transition: all 0.4s ease-out 0s;
	transition: all 0.4s ease-out 0s;
}

/* 
	Responsive Menu - Checkbox toggle - Checkbox at sibling level to menu
---------------------------------------- */
.responsive-menu-checkbox {
	display: none !important;
	text-rendering: geometricPrecision;
}

/* 
	Responsive Menu - Checkbox toggle - Button to toggle checkbox
---------------------------------------- */
.responsive-menu-button {
	cursor: pointer;
	font-size: 1.0em;
	margin: 0;
	text-align: center;
	text-rendering: geometricPrecision;
	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.responsive-menu-button:after {
	content: "\f0c9";
	display: block;
	font-family: FontAwesome;
	line-height: 1;
}
.responsive-menu-button--close:after {
	content: "\f00d";
}

/* ------------------------------------------------------------
	Responsive Menu positions
------------------------------------------------------------ */

/* 
	Responsive Menu - Fade menu
---------------------------------------- */
.responsive-menu[data-responsive-menu-type="fade"] {
	bottom: 0;
	height: 100%;
	left: 0;
	overflow: hidden;
	position: fixed;
	right: 0;
	opacity: 0.0;
	width: 100%;
	z-index: -9999999;
}
.responsive-menu-active[data-responsive-menu-type="fade"] .responsive-menu[data-responsive-menu-type="fade"],
.responsive-menu-checkbox[data-responsive-menu-type="fade"]:checked ~ .responsive-menu[data-responsive-menu-type="fade"],
.responsive-menu-checkbox[data-responsive-menu-type="fade"]:checked ~ * .responsive-menu[data-responsive-menu-type="fade"] {
	display: block;
	opacity: 1.0;
	overflow: visible;
	overflow-y: auto;
	z-index: 9999999;
}

/* 
	Responsive Menu - Top height menu
---------------------------------------- */
.responsive-menu[data-responsive-menu-type="height-top"] {
	height: auto;
	max-height: 0px;
	overflow: hidden;
}
.responsive-menu-active[data-responsive-menu-type="height-top"] .responsive-menu[data-responsive-menu-type="height-top"],
.responsive-menu-checkbox[data-responsive-menu-type="height-top"]:checked ~ .responsive-menu[data-responsive-menu-type="height-top"],
.responsive-menu-checkbox[data-responsive-menu-type="height-top"]:checked ~ * .responsive-menu[data-responsive-menu-type="height-top"] {
	max-height: 1000px;
}

/* 
	Responsive Menu - Fixed top
----------------------------------- */
.responsive-menu[data-responsive-menu-type="fixed-top"] {
	bottom: 0;
	height: 90%;
	left: 0;
	overflow: hidden;
	position: fixed;
	top: -100%;
	width: 100%;
}
.responsive-menu-active[data-responsive-menu-type="fixed-top"] .responsive-menu[data-responsive-menu-type="fixed-top"],
.responsive-menu-checkbox[data-responsive-menu-type="fixed-top"]:checked ~ .responsive-menu[data-responsive-menu-type="fixed-top"],
.responsive-menu-checkbox[data-responsive-menu-type="fixed-top"]:checked ~ * .responsive-menu[data-responsive-menu-type="fixed-top"] {
	-moz-box-shadow: 
		5px 0px 5px 0px rgba(0, 0, 0, 0.6);
	-webkit-box-shadow: 
		5px 0px 5px 0px rgba(0, 0, 0, 0.6);
	box-shadow: 
		5px 0px 5px 0px rgba(0, 0, 0, 0.6);
	
	top: 0;
	overflow: visible;
	overflow-y: auto;
}

/* 
	Responsive Menu - Fixed bottom
----------------------------------- */
.responsive-menu[data-responsive-menu-type="fixed-bottom"] {
	bottom: 0;
	height: 90%;
	left: 0;
	overflow: hidden;
	position: fixed;
	top: 100%;
	width: 100%;
}
.responsive-menu-active[data-responsive-menu-type="fixed-bottom"] .responsive-menu[data-responsive-menu-type="fixed-bottom"],
.responsive-menu-checkbox[data-responsive-menu-type="fixed-bottom"]:checked ~ .responsive-menu[data-responsive-menu-type="fixed-bottom"],
.responsive-menu-checkbox[data-responsive-menu-type="fixed-bottom"]:checked ~ * .responsive-menu[data-responsive-menu-type="fixed-bottom"] {
	-moz-box-shadow: 
		5px 0px 5px 0px rgba(0, 0, 0, 0.6);
	-webkit-box-shadow: 
		5px 0px 5px 0px rgba(0, 0, 0, 0.6);
	box-shadow: 
		5px 0px 5px 0px rgba(0, 0, 0, 0.6);
	
	top: 10%;
	overflow: visible;
	overflow-y: auto;
}

/* 
	Responsive Menu - Fixed left
----------------------------------- */
.responsive-menu[data-responsive-menu-type="fixed-left"] {
	bottom: 0;
	left: -100%;
	overflow: hidden;
	position: fixed;
	top: 0;
	width: 80%;
}
.responsive-menu-active[data-responsive-menu-type="fixed-left"] .responsive-menu[data-responsive-menu-type="fixed-left"],
.responsive-menu-checkbox[data-responsive-menu-type="fixed-left"]:checked ~ .responsive-menu[data-responsive-menu-type="fixed-left"],
.responsive-menu-checkbox[data-responsive-menu-type="fixed-left"]:checked ~ * .responsive-menu[data-responsive-menu-type="fixed-left"] {
	-moz-box-shadow: 
		5px 0px 5px 0px rgba(0, 0, 0, 0.6);
	-webkit-box-shadow: 
		5px 0px 5px 0px rgba(0, 0, 0, 0.6);
	box-shadow: 
		5px 0px 5px 0px rgba(0, 0, 0, 0.6);
	
	left: 0;
	overflow: visible;
	overflow-y: auto;
}

/* 
	Responsive Menu - Fixed right
---------------------------------------- */
.responsive-menu[data-responsive-menu-type="fixed-right"] {
	bottom: 0;
	display: block;
	height: 100%;
	left: 100%;
	opacity: 1.0;
	overflow: hidden;
	position: fixed;
	top: 0;
	width: 80%;
}
.responsive-menu-active[data-responsive-menu-type="fixed-right"] .responsive-menu[data-responsive-menu-type="fixed-right"],
.responsive-menu-checkbox[data-responsive-menu-type="fixed-right"]:checked ~ .responsive-menu[data-responsive-menu-type="fixed-right"],
.responsive-menu-checkbox[data-responsive-menu-type="fixed-right"]:checked ~ * .responsive-menu[data-responsive-menu-type="fixed-right"] {
	-moz-box-shadow: 
		-5px 0px 10px 0px rgba(0, 0, 0, 0.6);
	-webkit-box-shadow: 
		-5px 0px 10px 0px rgba(0, 0, 0, 0.6);
	box-shadow: 
		-5px 0px 10px 0px rgba(0, 0, 0, 0.6);
	
	left: 20%;
	overflow: visible;
	overflow-y: auto;
}

/* 
	Responsive Menu - Push fixed menu top
---------------------------------------- */
.responsive-menu[data-responsive-menu-type="push-top"] {
	bottom: 0;
	height: 90%;
	left: 0;
	overflow: hidden;
	position: fixed;
	top: -100%;
	width: 100%;
}
.responsive-menu-active[data-responsive-menu-type="push-top"] .responsive-menu[data-responsive-menu-type="push-top"],
.responsive-menu-checkbox[data-responsive-menu-type="push-top"]:checked ~ .responsive-menu[data-responsive-menu-type="push-top"],
.responsive-menu-checkbox[data-responsive-menu-type="push-top"]:checked ~ * .responsive-menu[data-responsive-menu-type="push-top"] {
	-moz-box-shadow: 
		-5px 0px 10px 0px rgba(0, 0, 0, 0.6);
	-webkit-box-shadow: 
		-5px 0px 10px 0px rgba(0, 0, 0, 0.6);
	box-shadow: 
		-5px 0px 10px 0px rgba(0, 0, 0, 0.6);
	
	top: 0%;
	overflow: visible;
	overflow-y: auto;
}
.responsive-menu-active[data-responsive-menu-type="push-top"].responsive-menu-liner,
.responsive-menu-active[data-responsive-menu-type="push-top"] .responsive-menu-liner {
	top: 90%;
}

/* 
	Responsive Menu - Push fixed menu bottom
---------------------------------------- */
.responsive-menu[data-responsive-menu-type="push-bottom"] {
	bottom: 0;
	height: 90%;
	left: 0;
	overflow: hidden;
	position: fixed;
	top: 100%;
	width: 100%;
}
.responsive-menu-active[data-responsive-menu-type="push-bottom"] .responsive-menu[data-responsive-menu-type="push-bottom"],
.responsive-menu-checkbox[data-responsive-menu-type="push-bottom"]:checked ~ .responsive-menu[data-responsive-menu-type="push-bottom"],
.responsive-menu-checkbox[data-responsive-menu-type="push-bottom"]:checked ~ * .responsive-menu[data-responsive-menu-type="push-bottom"] {
	-moz-box-shadow: 
		-5px 0px 10px 0px rgba(0, 0, 0, 0.6);
	-webkit-box-shadow: 
		-5px 0px 10px 0px rgba(0, 0, 0, 0.6);
	box-shadow: 
		-5px 0px 10px 0px rgba(0, 0, 0, 0.6);
	
	top: 10%;
	overflow: visible;
	overflow-y: auto;
}
.responsive-menu-active[data-responsive-menu-type="push-bottom"].responsive-menu-liner,
.responsive-menu-active[data-responsive-menu-type="push-bottom"] .responsive-menu-liner {
	top: -90%;
}

/* 
	Responsive Menu - Push fixed menu left
---------------------------------------- */
.responsive-menu[data-responsive-menu-type="push-left"] {
	bottom: 0;
	left: 100%;
	overflow: hidden;
	position: fixed;
	top: 0;
	width: 80%;
}
.responsive-menu-active[data-responsive-menu-type="push-left"] .responsive-menu[data-responsive-menu-type="push-left"],
.responsive-menu-checkbox[data-responsive-menu-type="push-left"]:checked ~ .responsive-menu[data-responsive-menu-type="push-left"],
.responsive-menu-checkbox[data-responsive-menu-type="push-left"]:checked ~ * .responsive-menu[data-responsive-menu-type="push-left"] {
	-moz-box-shadow: 
		-5px 0px 10px 0px rgba(0, 0, 0, 0.6);
	-webkit-box-shadow: 
		-5px 0px 10px 0px rgba(0, 0, 0, 0.6);
	box-shadow: 
		-5px 0px 10px 0px rgba(0, 0, 0, 0.6);
	
	left: 20%;
	overflow: visible;
	overflow-y: auto;
}
.responsive-menu-active[data-responsive-menu-type="push-left"].responsive-menu-liner,
.responsive-menu-active[data-responsive-menu-type="push-left"] .responsive-menu-liner {
	left: -80%;
}

/* 
	Responsive Menu - Push fixed menu right
---------------------------------------- */
.responsive-menu[data-responsive-menu-type="push-right"] {
	bottom: 0;
	left: -80%;
	overflow: hidden;
	position: fixed;
	top: 0;
	width: 80%;
}
.responsive-menu-active[data-responsive-menu-type="push-right"] .responsive-menu[data-responsive-menu-type="push-right"],
.responsive-menu-checkbox[data-responsive-menu-type="push-right"]:checked ~ .responsive-menu[data-responsive-menu-type="push-right"],
.responsive-menu-checkbox[data-responsive-menu-type="push-right"]:checked ~ * .responsive-menu[data-responsive-menu-type="push-right"] {
	-moz-box-shadow: 
		5px 0px 5px 0px rgba(0, 0, 0, 0.6);
	-webkit-box-shadow: 
		5px 0px 5px 0px rgba(0, 0, 0, 0.6);
	box-shadow: 
		5px 0px 5px 0px rgba(0, 0, 0, 0.6);
	
	left: 0%;
	overflow: visible;
	overflow-y: auto;
}
.responsive-menu-active[data-responsive-menu-type="push-right"].responsive-menu-liner,
.responsive-menu-active[data-responsive-menu-type="push-right"] .responsive-menu-liner {
	left: 80%;
}

/* ------------------------------------------------------------
	Responsive Menu - Dropdown select replacement for nav
------------------------------------------------------------ */

.responsive-nav_mobile {
	display: none;
}
.responsive-nav_mobile select {
	background: #e8ecf3;
	font: normal 400 1.8em/100% inherit;
	margin: 0;
	min-height: 28px;
	width: 100%;
}
/* Tablet : Design for a width of 768px (0px - 959px); 59.99em if 1em=16px */
@media only screen and (max-width: 959.99px) {
	.responsive-nav_desktop {
		display: none !important;
	}
	.responsive-nav_mobile {
		display: block;
	}
}

/* --------------------------------------------------------------------------------
	## Content
-------------------------------------------------------------------------------- */

/* ------------------------------------------------------------
	Media
------------------------------------------------------------ */

/*
If you need a transparent image 1x1 pixel just set this data uri as img src
data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==

This is a base64 encoding for an image 1x1 white
data:image/gif;base64,R0lGODlhAQABAIAAAP7//wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==

<div class="embed">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/Vzuj1ZXjCjM?&hl=en&fs=1&rel=0&autoplay=1&egm=0&showinfo=0&hd=0&loop=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>
</div>
*/

/* Make container height proportional to width using a 16:9 ratio */
.embed {
	height: 0;
	overflow: hidden;
	padding: 0;
	padding-bottom: 56.25%;/* 16:9 ratio */
	position: relative;
}
.embed_16-9 {
	padding-bottom: 56.25%;/* 16:9 ratio */
}
.embed_4-3 {
	padding-bottom: 75.00%;/* 4:3 ratio */
}
/* Make the embedded content position and scale to dimensions of the container */
.embed iframe,
.embed object,
.embed embed {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

/* ------------------------------------------------------------
	Images
------------------------------------------------------------ */

.img,
.img * {
	vertical-align: bottom;
}
.img-row {
	margin-bottom: 1.0em;
}

/* 
	Images - Formatting
---------------------------------------- */
.img-border {
	border: 1.5em solid rgba(0, 0, 0, 0.1);
}
.img-rounded {
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.img-dropshadow {
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4);
}
.img-circle {
	-webkit-border-radius: 50%;
	-khtml-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}
.img-thumbnail {
	border: 1px solid #EEEEEE;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	display: inline-block;
	padding: 5px;
}

/* 
	Images - Positioning
---------------------------------------- */
.img-right {
	float: right;
	margin-left: 1.0em;
}
.img-right-clear {
	clear: right;
}
.img-left {
	float: left;
	margin-right: 1.0em;
}
.img-left-clear {
	clear: left;
}
.img-center {
	float: none;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.img-contain {
	object-fit: contain;
}
.img-cover {
	object-fit: cover;
}
.img-fill {
	object-fit: fill;
}
.img-scale-down {
	object-fit: scale-down;
}

/* 
	Images - Responsive images
---------------------------------------- */
.img-fluid,
.img-fluid-inside > * {
	height: auto;
	-ms-interpolation-mode: bicubic;
	width: 100%;
}
.img-responsive,
.img-scale {
	height: auto;
	-ms-interpolation-mode: bicubic;
	max-width: 100%;
	width: auto;
}

/* 
	Images - Fix < IE9 PNG transaprency
---------------------------------------- */
.img-png {/* * html .png { */
	behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
	this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
	this.src = "images/pixel/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
	this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
	this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
}

/* 
	Images - Rendering
---------------------------------------- */
.img-bicubic {
	-ms-interpolation-mode: bicubic; /* IE8+ */
	image-rendering: optimizeQuality; /* Legal fallback */
}
.img-pixelated {
	-ms-interpolation-mode: nearest-neighbor; /* IE8+ */
	image-rendering: optimizeSpeed; /* Legal fallback */
	image-rendering: -moz-crisp-edges; /* Firefox */
	image-rendering: -o-crisp-edges; /* Opera */
	image-rendering: -webkit-optimize-contrast; /* Safari */
	image-rendering: optimize-contrast; /* CSS3 Proposed */
	image-rendering: crisp-edges; /* CSS4 Proposed */
	image-rendering: pixelated; /* CSS4 Proposed */
}

/* iPhone 4+ and high dpi retina displays */
@media only screen and (min-resolution: 2dppx) and (-webkit-min-device-pixel-ratio: 2) {
	/*http://flowz.com/2010/07/css-image-replacement-for-iphone-4-high-dpi-retina-display/*/
	.img-2x {/*for img tags and will have no effect; flag that will tell our javascript it is okay to do image replacement*/
		font-size: 1px;
	}
	
	/*http://dryan.com/articles/hi-res-mobile-css-iphone-4/
	.resize-background-image
	{
		background-image: url(../images/Browser-128.png);
		-webkit-background-size: 64px 64px;
		-khtml-background-size: 64px 64px;
		-moz-background-size: 64px 64px;
		-o-background-size: 64px 64px;
		background-size: 64px 64px;
	}*/
}

/* ------------------------------------------------------------
	Filters
------------------------------------------------------------ */

.filter-contrast {
	-webkit-filter: contrast(10);
	filter: url('filters.xml#contrast');
}
.filter-brightness {
	-webkit-filter: brightness(50%);
	filter: url('filters.xml#brightness');
} 
.filter-grayscale {
	-webkit-filter: grayscale(1);
	filter: url('filters.xml#grayscale');
}
.filter-saturate {
	-webkit-filter: saturate(7);
	filter: url('filters.xml#saturate');
}
.filter-hue-rotate {
	-webkit-filter: hue-rotate(180deg);
	filter: url('filters.xml#hue-rotate');
}
.filter-sepia {
	-webkit-filter: sepia(100%);
	filter: url('filters.xml#sepia');
}
.filter-invert {
	-webkit-filter: invert(100%);
	filter: url('filters.xml#invert');
}
.filter-blur {
	-webkit-filter: blur(10px);
	filter: url('filters.xml#blur');
}

.filter-desaturate2 {
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
	filter: gray;
	filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
	zoom: 1;
}
.filter-sepia2 {
	background-color: #5E2612;
	
	-webkit-filter: sepia(100%);
	-webkit-filter: sepia(1);
	-moz-filter: sepia(100%);
	-ms-filter: sepia(100%);
	-o-filter: sepia(100%);
	filter: sepia(100%);
	filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg'><filter id='old-timey'><feColorMatrix type='matrix' values='0.14 0.45 0.05 0 0 0.12 0.39 0.04 0 0 0.08 0.28 0.03 0 0 0 0 0 1 0' /></filter></svg>#old-timey");
	zoom: 1;
}
.filter-blur2 {
	-webkit-filter: blur(3px);
	-moz-filter: blur(3px);
	-ms-filter: blur(3px);
	-o-filter: blur(3px);
	filter: blur(3px);
	filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg'><filter id='blur'><feGaussianBlur stdDeviation='3' /></filter></svg>#blur");
	filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
	zoom: 1;
}


/* ============================================================
	# Utility Helpers
============================================================ */

/* ------------------------------------------------------------
	Size
------------------------------------------------------------ */

/* http://slicejack.com/creating-a-fullscreen-html5-video-background-with-css/ */
.screen {
	height: 100vh;
	max-width: 100%;
	overflow: hidden;
	position: relative;
	width: 100vw;
}
.screen__contain {
    height: auto;
    left: 50%;
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    top: 50%;
	
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	
    width: auto;
}
.screen__cover {
    height: auto;
    left: 50%;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    top: 50%;
	
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	
    width: auto;
}
.screen__fill {
    bottom: 0;
    height: 100%;
    left: 0;
    position: absolute;
	right: 0;
    top: 0;
    width: 100%;
}
/* Background videos will not play in mobile, so do not show them and put background on screen instead */
@media (max-width: 767px) {
	video.screen__contain,
	video.screen__cover,
	video.screen__fill {
		display: none;
	}
}

/* ------------------------------------------------------------
	Positioning
------------------------------------------------------------ */

.position-absolute {
	position: absolute !important;
}
.position-fixed {
	position: fixed !important;
}
.position-relative {
	position: relative !important;
}

.position-center-horizontal {
	left: 50%;
	position: absolute;
	-webkit-transform: translate(-50%);
	-moz-transform: translate(-50%);
	-ms-transform: translate(-50%);
	-o-transform: translate(-50%);
	transform: translate(-50%);
}
.position-center-horizontal-2 {
	left: 0;
	margin-left: auto;
	margin-right: auto;
	position: absolute;
	right: 0;
}
.position-center {
	left: 50%;
	position: absolute;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.pin-bottom {
	bottom: 0;
	top: auto;
}
.pin-left {
	left: 0;
	right: auto;
}
.pin-right {
	left: auto;
	right: 0;
}
.pin-top {
	bottom: auto;
	top: 0;
}

.transform-origin-0-0 {
	-webkit-transform-origin: 0% 0%;
	-moz-transform-origin: 0% 0%;
	-ms-transform-origin: 0% 0%;
	-o-transform-origin: 0% 0%;
	transform-origin: 0% 0%;
}
.transform-origin-0-50 {
	-webkit-transform-origin: 0% 50%;
	-moz-transform-origin: 0% 50%;
	-ms-transform-origin: 0% 50%;
	-o-transform-origin: 0% 50%;
	transform-origin: 0% 50%;
}
.transform-origin-0-100 {
	-webkit-transform-origin: 0% 100%;
	-moz-transform-origin: 0% 100%;
	-ms-transform-origin: 0% 100%;
	-o-transform-origin: 0% 100%;
	transform-origin: 0% 100%;
}
.transform-origin-50-0 {
	-webkit-transform-origin: 50% 0%;
	-moz-transform-origin: 50% 0%;
	-ms-transform-origin: 50% 0%;
	-o-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
}
.transform-origin-50-50 {
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}
.transform-origin-50-100 {
	-webkit-transform-origin: 50% 100%;
	-moz-transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-o-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
}
.transform-origin-100-0 {
	-webkit-transform-origin: 100% 0%;
	-moz-transform-origin: 100% 0%;
	-ms-transform-origin: 100% 0%;
	-o-transform-origin: 100% 0%;
	transform-origin: 100% 0%;
}
.transform-origin-100-50 {
	-webkit-transform-origin: 100% 50%;
	-moz-transform-origin: 100% 50%;
	-ms-transform-origin: 100% 50%;
	-o-transform-origin: 100% 50%;
	transform-origin: 100% 50%;
}
.transform-origin-100-100 {
	-webkit-transform-origin: 100% 100%;
	-moz-transform-origin: 100% 100%;
	-ms-transform-origin: 100% 100%;
	-o-transform-origin: 100% 100%;
	transform-origin: 100% 100%;
}

.transform-rotate-22 {
	-webkit-transform: rotate(22.5deg);
	-moz-transform: rotate(22.5deg);
	-ms-transform: rotate(22.5deg);
	-o-transform: rotate(22.5deg);
	transform: rotate(22.5deg);
}
.transform-rotate-45 {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
.transform-rotate-67 {
	-webkit-transform: rotate(67.5deg);
	-moz-transform: rotate(67.5deg);
	-ms-transform: rotate(67.5deg);
	-o-transform: rotate(67.5deg);
	transform: rotate(67.5deg);
}
.transform-rotate-90 {
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
}
.transform-rotate-112 {
	-webkit-transform: rotate(112.5deg);
	-moz-transform: rotate(112.5deg);
	-ms-transform: rotate(112.5deg);
	-o-transform: rotate(112.5deg);
	transform: rotate(112.5deg);
}
.transform-rotate-135 {
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	-o-transform: rotate(135deg);
	transform: rotate(135deg);
}
.transform-rotate-157 {
	-webkit-transform: rotate(157.5deg);
	-moz-transform: rotate(157.5deg);
	-ms-transform: rotate(157.5deg);
	-o-transform: rotate(157.5deg);
	transform: rotate(157.5deg);
}
.transform-rotate-180 {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}
.transform-rotate-202 {
	-webkit-transform: rotate(202.5deg);
	-moz-transform: rotate(202.5deg);
	-ms-transform: rotate(202.5deg);
	-o-transform: rotate(202.5deg);
	transform: rotate(202.5deg);
}
.transform-rotate-225 {
	-webkit-transform: rotate(225deg);
	-moz-transform: rotate(225deg);
	-ms-transform: rotate(225deg);
	-o-transform: rotate(225deg);
	transform: rotate(225deg);
}
.transform-rotate-247 {
	-webkit-transform: rotate(247.5deg);
	-moz-transform: rotate(247.5deg);
	-ms-transform: rotate(247.5deg);
	-o-transform: rotate(247.5deg);
	transform: rotate(247.5deg);
}
.transform-rotate-270 {
	-webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	transform: rotate(270deg);
}
.transform-rotate-292 {
	-webkit-transform: rotate(292.5deg);
	-moz-transform: rotate(292.5deg);
	-ms-transform: rotate(292.5deg);
	-o-transform: rotate(292.5deg);
	transform: rotate(292.5deg);
}
.transform-rotate-315 {
	-webkit-transform: rotate(315deg);
	-moz-transform: rotate(315deg);
	-ms-transform: rotate(315deg);
	-o-transform: rotate(315deg);
	transform: rotate(315deg);
}
.transform-rotate-337 {
	-webkit-transform: rotate(337.5deg);
	-moz-transform: rotate(337.5deg);
	-ms-transform: rotate(337.5deg);
	-o-transform: rotate(337.5deg);
	transform: rotate(337.5deg);
}
.transform-rotate-360 {
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	transform: rotate(360deg);
}
.transform-rotate-720 {
	-webkit-transform: rotate(720deg);
	-moz-transform: rotate(720deg);
	-ms-transform: rotate(720deg);
	-o-transform: rotate(720deg);
	transform: rotate(720deg);
}

/* ------------------------------------------------------------
	Display
------------------------------------------------------------ */

/* Add dimensions to the inside of the element and not the outside (borders and padding do not effect widths and heights) */
.border-box,
.border-box:before,
.border-box:after,
.border-box *,
.border-box *:before,
.border-box *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.display-table {
	display: table;
}
	.display-table-cell {
		display: table-cell;
	}
	.display-table-cell.middle,
	.table-cell--middle {
		vertical-align: middle;
	}
	.table-cell--bottom {
		vertical-align: bottom;
	}
	.table-cell--top {
		vertical-align: top;
	}
.display-block {
	display: block;
}
.display-flex {
	display: flex;
}
.display-inline {
	display: inline;
}
.display-inline-block {
	display: inline-block;*display: inline;*zoom: 1;/*ie6/7*/
}
.display-inline-flex {
	display: inline-flex;
}

.overflow-auto {
	overflow: auto;
}
.overflow-hidden {
	overflow: hidden;
}
.overflow-scroll {
	overflow: scroll;
}

.scroll-horizontal {
	overflow-x: scroll;
	overflow-y: hidden;
}
.scroll-vertical {
	overflow-x: hidden;
	overflow-y: scroll;
}

.resize-none {
	resize: none;
}
.resize-horizontal {
	resize: horizontal;
}
.resize-vertical {
	resize: vertical;
}

.valign-top {
	vertical-align: top !important;
}
.valign-middle {
	vertical-align: middle !important;
}
.valign-bottom {
	vertical-align: bottom !important;
}

/* ------------------------------------------------------------
	Float
------------------------------------------------------------ */

/* Trigger hasLayout for inline-block, contain floats */
.has-layout,
.float-container {
	/* trigger hasLayout */
	display: inline-block;*display: inline;*zoom: 1;/*ie6/7*/
	vertical-align: bottom;
	width: 100%;
}

.float-left,
.pull-left {
	float: left;
}
.float-none,
.pull-none {
	float: none;
}
.float-right,
.pull-right {
	float: right;
}

/* ------------------------------------------------------------
	Clearing floated elements
------------------------------------------------------------ */

.clear-left {
	clear: left;
}
.clear-right {
	clear: right;
}
.clear-both {
	clear: both;
}

/* You can also use a <br class="clear" /> to clear columns */
.clear {
	clear: both;
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	width: 0;
}

.clear-after,
.clear-before {
	*zoom: 1;
}
.clear-after:after,
.clear-before:before {
	clear: both;
	content: "";
	display: table;
}

/* ------------------------------------------------------------
	Margin
------------------------------------------------------------ */

.mauto,
.margin-auto {
	margin: auto;
}
.mlrauto,
.margin-lrauto {
	margin-left: auto;
	margin-right: auto;
}

.m0,
.margin-0 {
	margin: 0;
}
.m1,
.margin-1 {
	margin: 1rem;
}
.m2,
.margin-2 {
	margin: 2rem;
}
.m3,
.margin-3 {
	margin: 3rem;
}
.m4,
.margin-4 {
	margin: 4rem;
}
.m5,
.margin-5 {
	margin: 5rem;
}

.mtbxxxs,
.margin-tbxxxs {
	margin-bottom: 0.125em;
	margin-top: 0.125em;
}
.mtbxxs,
.margin-tbxxs {
	margin-bottom: 0.25em;
	margin-top: 0.25em;
}
.mtbxs,
.margin-tbxs {
	margin-bottom: 0.5em;
	margin-top: 0.5em;
}
.mtbs,
.margin-tbs {
	margin-bottom: 1.0em;
	margin-top: 1.0em;
}
.mtbm,
.margin-tbm {
	margin-bottom: 2.0em;
	margin-top: 2.0em;
}
.mtbl,
.margin-tbl {
	margin-bottom: 4.0em;
	margin-top: 4.0em;
}
.mtbxl,
.margin-tbxl {
	margin-bottom: 6.0em;
	margin-top: 6.0em;
}
.mtbxxl,
.margin-tbxxl {
	margin-bottom: 8.0em;
	margin-top: 8.0em;
}
.mtbxxxl,
.margin-tbxxxl {
	margin-bottom: 33vh;
	margin-top: 33vh;
}

.mtb0,
.margin-tb0 {
	margin-bottom: 0;
	margin-top: 0;
}
.mtb1,
.margin-tb1 {
	margin-bottom: 1rem;
	margin-top: 1rem;
}
.mtb2,
.margin-tb2 {
	margin-bottom: 2rem;
	margin-top: 2rem;
}
.mtb3,
.margin-tb3 {
	margin-bottom: 3rem;
	margin-top: 3rem;
}
.mtb4,
.margin-tb4 {
	margin-bottom: 4rem;
	margin-top: 4rem;
}
.mtb5,
.margin-tb5 {
	margin-bottom: 5rem;
	margin-top: 5rem;
}

.mlr0,
.margin-lr0 {
	margin-left: 0;
	margin-right: 0;
}
.mlr1,
.margin-lr1 {
	margin-left: 1rem;
	margin-right: 1rem;
}
.mlr2,
.margin-lr2 {
	margin-left: 2rem;
	margin-right: 2rem;
}
.mlr3,
.margin-lr3 {
	margin-left: 3rem;
	margin-right: 3rem;
}
.mlr4,
.margin-lr4 {
	margin-left: 4rem;
	margin-right: 4rem;
}
.mlr5,
.margin-lr5 {
	margin-left: 5rem;
	margin-right: 5rem;
}

.mb0,
.margin-b0 {
	margin-bottom: 0;
}
.mb1,
.margin-b1 {
	margin-bottom: 1rem;
}
.mb2,
.margin-b2 {
	margin-bottom: 2rem;
}
.mb3,
.margin-b3 {
	margin-bottom: 3rem;
}
.mb4,
.margin-b4 {
	margin-bottom: 4rem;
}
.mb5,
.margin-b5 {
	margin-bottom: 5rem;
}

.ml0,
.margin-l0 {
	margin-left: 0;
}
.ml1,
.margin-l1 {
	margin-left: 1rem;
}
.ml2,
.margin-l2 {
	margin-left: 2rem;
}
.ml3,
.margin-l3 {
	margin-left: 3rem;
}
.ml4,
.margin-l4 {
	margin-left: 4rem;
}
.ml5,
.margin-l5 {
	margin-left: 5rem;
}

.mr0,
.margin-r0 {
	margin-right: 0;
}
.mr1,
.margin-r1 {
	margin-right: 1rem;
}
.mr2,
.margin-r2 {
	margin-right: 2rem;
}
.mr3,
.margin-r3 {
	margin-right: 3rem;
}
.mr4,
.margin-r4 {
	margin-right: 4rem;
}
.mr5,
.margin-r5 {
	margin-right: 5rem;
}

.mt0,
.margin-t0 {
	margin-top: 0;
}
.mt1,
.margin-t1 {
	margin-top: 1rem;
}
.mt2,
.margin-t2 {
	margin-top: 2rem;
}
.mt3,
.margin-t3 {
	margin-top: 3rem;
}
.mt4,
.margin-t4 {
	margin-top: 4rem;
}
.mt5,
.margin-t5 {
	margin-top: 5rem;
}

/* ------------------------------------------------------------
	Padding
------------------------------------------------------------ */

.p0,
.padding-0 {
	padding: 0;
}
.p1,
.padding-1 {
	padding: 1rem;
}
.p2,
.padding-2 {
	padding: 2rem;
}
.p3,
.padding-3 {
	padding: 3rem;
}
.p4,
.padding-4 {
	padding: 4rem;
}
.p5,
.padding-5 {
	padding: 5rem;
}

.ptbxxxs,
.padding-tbxxxs {
	padding-bottom: 0.125em;
	padding-top: 0.125em;
}
.ptbxxs,
.padding-tbxxs {
	padding-bottom: 0.25em;
	padding-top: 0.25em;
}
.ptbxs,
.padding-tbxs {
	padding-bottom: 0.5em;
	padding-top: 0.5em;
}
.ptbs,
.padding-tbs {
	padding-bottom: 1.0em;
	padding-top: 1.0em;
}
.ptbm,
.padding-tbm {
	padding-bottom: 2.0em;
	padding-top: 2.0em;
}
.ptbl,
.padding-tbl {
	padding-bottom: 4.0em;
	padding-top: 4.0em;
}
.ptbxl,
.padding-tbxl {
	padding-bottom: 6.0em;
	padding-top: 6.0em;
}
.ptbxxl,
.padding-tbxxl {
	padding-bottom: 8.0em;
	padding-top: 8.0em;
}
.ptbxxxl,
.padding-tbxxxl {
	padding-bottom: 33vh;
	padding-top: 33vh;
}

.ptb0,
.padding-tb0 {
	padding-bottom: 0;
	padding-top: 0;
}
.ptb1,
.padding-tb1 {
	padding-bottom: 1rem;
	padding-top: 1rem;
}
.ptb2,
.padding-tb2 {
	padding-bottom: 2rem;
	padding-top: 2rem;
}
.ptb3,
.padding-tb3 {
	padding-bottom: 3rem;
	padding-top: 3rem;
}
.ptb4,
.padding-tb4 {
	padding-bottom: 4rem;
	padding-top: 4rem;
}
.ptb5,
.padding-tb5 {
	padding-bottom: 5rem;
	padding-top: 5rem;
}

.plr0,
.padding-lr0 {
	padding-left: 0;
	padding-right: 0;
}
.plr1,
.padding-lr1 {
	padding-left: 1rem;
	padding-right: 1rem;
}
.plr2,
.padding-lr2 {
	padding-left: 2rem;
	padding-right: 2rem;
}
.plr3,
.padding-lr3 {
	padding-left: 3rem;
	padding-right: 3rem;
}
.plr4,
.padding-lr4 {
	padding-left: 4rem;
	padding-right: 4rem;
}
.plr5,
.padding-lr5 {
	padding-left: 5rem;
	padding-right: 5rem;
}

.pb0,
.padding-b0 {
	padding-bottom: 0;
}
.pb1,
.padding-b1 {
	padding-bottom: 1rem;
}
.pb2,
.padding-b2 {
	padding-bottom: 2rem;
}
.pb3,
.padding-b3 {
	padding-bottom: 3rem;
}
.pb4,
.padding-b4 {
	padding-bottom: 4rem;
}
.pb5,
.padding-b5 {
	padding-bottom: 5rem;
}

.pl0,
.padding-l0 {
	padding-left: 0;
}
.pl1,
.padding-l1 {
	padding-left: 1rem;
}
.pl2,
.padding-l2 {
	padding-left: 2rem;
}
.pl3,
.padding-l3 {
	padding-left: 3rem;
}
.pl4,
.padding-l4 {
	padding-left: 4rem;
}
.pl5,
.padding-l5 {
	padding-left: 5rem;
}

.pr0,
.padding-r0 {
	padding-right: 0;
}
.pr1,
.padding-r1 {
	padding-right: 1rem;
}
.pr2,
.padding-r2 {
	padding-right: 2rem;
}
.pr3,
.padding-r3 {
	padding-right: 3rem;
}
.pr4,
.padding-r4 {
	padding-right: 4rem;
}
.pr5,
.padding-r5 {
	padding-right: 5rem;
}

.pt0,
.padding-t0 {
	padding-top: 0;
}
.pt1,
.padding-t1 {
	padding-top: 1rem;
}
.pt2,
.padding-t2 {
	padding-top: 2rem;
}
.pt3,
.padding-t3 {
	padding-top: 3rem;
}
.pt4,
.padding-t4 {
	padding-top: 4rem;
}
.pt5,
.padding-t5 {
	padding-top: 5rem;
}

/* ------------------------------------------------------------
	Widths and Heights
------------------------------------------------------------ */

.fullscreen {
	min-height: 100vh;
	min-width: 100%;
}

/* 
	Widths
---------------------------------------- */

.wauto,
.width-auto {
	width: auto !important;
}
.wfull,
.width-full {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	max-width: 100% !important;
	width: 100% !important;
}
.winitial,
.width-initial {
	width: initial !important;
}

/* Widths - Fractions and Percents */
.w0 {
	width: 0%;
}
.w5 {
	width: 5%;
}
	.w5-prefix {
		margin-left: 5%;
	}
	.w5-suffix {
		margin-right: 5%;
	}
.w1-12 {
	width: 8.33%;
}
	.w1-12.last {
		width: 8.34%;
	}
	.w1-12-prefix {
		margin-left: 8.33%;
	}
	.w1-12-suffix {
		margin-right: 8.33%;
	}
.w1-11 {
	width: 9.09%;
}
	.w1-11.last {
		width: 9.10%;
	}
	.w1-11-prefix {
		margin-left: 9.09%;
	}
	.w1-11-suffix {
		margin-right: 9.09%;
	}
.w1-10,
.w10 {
	width: 10%;
}
	.w1-10-prefix,
	.w10-prefix {
		margin-left: 10%;
	}
	.w1-10-suffix,
	.w10-suffix {
		margin-right: 10%;
	}
.w1-9 {
	width: 11.11%;
}
	.w1-9.last {
		width: 11.12%;
	}
	.w1-9-prefix {
		margin-left: 11.11%;
	}
	.w1-9-suffix {
		margin-right: 11.11%;
	}
.w1-8 {
	width: 12.50%;
}
	.w1-8-prefix {
		margin-left: 12.50%;
	}
	.w1-8-suffix {
		margin-right: 12.50%;
	}
.w1-7 {
	width: 14.28%;
}
	.w1-7.last {
		width: 14.32%;
	}
	.w1-7-prefix {
		margin-left: 14.28%;
	}
	.w1-7-suffix {
		margin-right: 14.28%;
	}
.w15 {
	width: 15%;
}
	.w15-prefix {
		margin-left: 15%;
	}
	.w15-suffix {
		margin-right: 15%;
	}
.w1-6 {
	width: 16.66%;
}
	.w1-6.last {
		width: 16.70%;
	}
	.w1-6-prefix {
		margin-left: 16.66%;
	}
	.w1-6-suffix {
		margin-right: 16.66%;
	}
.w1-5,
.w20 {
	width: 20%;
}
	.w1-5-prefix,
	.w20-prefix {
		margin-left: 20%;
	}
	.w1-5-suffix,
	.w20-suffix {
		margin-right: 20%;
	}
.w1-4,
.w25 {
	width: 25%;
}
	.w1-4-prefix,
	.w25-prefix {
		margin-left: 25%;
	}
	.w1-4-suffix,
	.w25-suffix {
		margin-right: 25%;
	}
.w30 {
	width: 30%;
}
	.w30-prefix {
		margin-left: 30%;
	}
	.w30-suffix {
		margin-right: 30%;
	}
.w1-3,
.w33 {
	width: 33.33%;
}
	.w1-3.last,
	.w33.last {
		width: 33.34%;
	}
	.w1-3-prefix,
	.w33-prefix {
		margin-left: 33.33%;
	}
	.w1-3-suffix,
	.w33-suffix {
		margin-right: 33.33%;
	}
.w35 {
	width: 35%;
}
	.w35-prefix {
		margin-left: 35%;
	}
	.w35-suffix {
		margin-right: 35%;
	}
.w2-5,
.w40 {
	width: 40%;
}
	.w2-5-prefix,
	.w40-prefix {
		margin-left: 40%;
	}
	.w2-5-suffix,
	.w40-suffix {
		margin-right: 40%;
	}
.w45 {
	width: 45%;
}
	.w45-prefix {
		margin-left: 45%;
	}
	.w45-suffix {
		margin-right: 45%;
	}
.w1-2,
.w50 {
	width: 50%;
}
	.w1-2-prefix,
	.w50-prefix {
		margin-left: 50%;
	}
	.w1-2-suffix,
	.w50-suffix {
		margin-right: 50%;
	}
.w55 {
	width: 55%;
}
	.w55-prefix {
		margin-left: 55%;
	}
	.w55-suffix {
		margin-right: 55%;
	}
.w3-5,
.w60 {
	width: 60%;
}
	.w3-5-prefix,
	.w60-prefix {
		margin-left: 60%;
	}
	.w3-5-suffix,
	.w60-suffix {
		margin-right: 60%;
	}
.w65 {
	width: 65%;
}
	.w65-prefix {
		margin-left: 65%;
	}
	.w65-suffix {
		margin-right: 65%;
	}
.w2-3,
.w66 {
	width: 66.66%;
}
	.w2-3.last,
	.w66.last {
		width: 66.67%;
	}
	.w2-3-prefix,
	.w66-prefix {
		margin-left: 66.66%;
	}
	.w2-3-suffix,
	.w66-suffix {
		margin-right: 66.66%;
	}
.w70 {
	width: 70%;
}
	.w70-prefix {
		margin-left: 70%;
	}
	.w70-suffix {
		margin-right: 70%;
	}
.w3-4,
.w75 {
	width: 75%;
}
	.w3-4-prefix,
	.w75-prefix {
		margin-left: 75%;
	}
	.w3-4-suffix,
	.w75-suffix {
		margin-right: 75%;
	}
.w4-5,
.w80 {
	width: 80%;
}
	.w4-5-prefix,
	.w80-prefix {
		margin-left: 80%;
	}
	.w4-5-suffix,
	.w80-suffix {
		margin-right: 80%;
	}
.w85 {
	width: 85%;
}
	.w85-prefix {
		margin-left: 85%;
	}
	.w85-suffix {
		margin-right: 85%;
	}
.w90 {
	width: 90%;
}
	.w90-prefix {
		margin-left: 90%;
	}
	.w90-suffix {
		margin-right: 90%;
	}
.w95 {
	width: 95%;
}
	.w95-prefix {
		margin-left: 95%;
	}
	.w95-suffix {
		margin-right: 95%;
	}
.w1,
.w100 {
	width: 100%;
}
	.w1-prefix,
	.w100-prefix {
		margin-left: 100%;
	}
	.w1-suffix,
	.w100-suffix {
		margin-right: 100%;
	}

/* Widths - Viewport */
.vw0 {
	width: 0vw;
}
.vw5 {
	width: 5vw;
}
.vw10 {
	width: 10vw;
}
.vw15 {
	width: 15vw;
}
.vw20 {
	width: 20vw;
}
.vw25 {
	width: 25vw;
}
.vw30 {
	width: 30vw;
}
.vw35 {
	width: 35vw;
}
.vw40 {
	width: 40vw;
}
.vw45 {
	width: 45vw;
}
.vw50 {
	width: 50vw;
}
.vw55 {
	width: 55vw;
}
.vw60 {
	width: 60vw;
}
.vw65 {
	width: 65vw;
}
.vw70 {
	width: 70vw;
}
.vw75 {
	width: 75vw;
}
.vw80 {
	width: 80vw;
}
.vw85 {
	width: 85vw;
}
.vw90 {
	width: 90vw;
}
.vw95 {
	width: 95vw;
}
.vw100 {
	width: 100vw;
}

/* Widths - max-width */
.max-w0 {
	max-width: 0%;
}
.max-w5 {
	max-width: 5%;
}
.max-w10 {
	max-width: 10%;
}
.max-w15 {
	max-width: 15%;
}
.max-w20 {
	max-width: 20%;
}
.max-w25 {
	max-width: 25%;
}
.max-w30 {
	max-width: 30%;
}
.max-w35 {
	max-width: 35%;
}
.max-w40 {
	max-width: 40%;
}
.max-w45 {
	max-width: 45%;
}
.max-w50 {
	max-width: 50%;
}
.max-w55 {
	max-width: 55%;
}
.max-w60 {
	max-width: 60%;
}
.max-w65 {
	max-width: 65%;
}
.max-w70 {
	max-width: 70%;
}
.max-w75 {
	max-width: 75%;
}
.max-w80 {
	max-width: 80%;
}
.max-w85 {
	max-width: 85%;
}
.max-w90 {
	max-width: 90%;
}
.max-w95 {
	max-width: 95%;
}
.max-w100 {
	max-width: 100%;
}

/* Widths - min-width */
.min-w0 {
	min-width: 0%;
}
.min-w5 {
	min-width: 5%;
}
.min-w10 {
	min-width: 10%;
}
.min-w15 {
	min-width: 15%;
}
.min-w20 {
	min-width: 20%;
}
.min-w25 {
	min-width: 25%;
}
.min-w30 {
	min-width: 30%;
}
.min-w35 {
	min-width: 35%;
}
.min-w40 {
	min-width: 40%;
}
.min-w45 {
	min-width: 45%;
}
.min-w50 {
	min-width: 50%;
}
.min-w55 {
	min-width: 55%;
}
.min-w60 {
	min-width: 60%;
}
.min-w65 {
	min-width: 65%;
}
.min-w70 {
	min-width: 70%;
}
.min-w75 {
	min-width: 75%;
}
.min-w80 {
	min-width: 80%;
}
.min-w85 {
	min-width: 85%;
}
.min-w90 {
	min-width: 90%;
}
.min-w95 {
	min-width: 95%;
}
.min-w100 {
	min-width: 100%;
}

/* 
	Heights
---------------------------------------- */

.hauto,
.height-auto {
	height: auto !important;
}
.hinherit,
.height-inherit {
	height: inherit !important;
}
.hinitial,
.height-initial {
	height: initial !important;
}

.h0 {
	height: 0%;
}
.h5 {
	height: 5%;
}
.h10 {
	height: 10%;
}
.h15 {
	height: 15%;
}
.h20 {
	height: 20%;
}
.h25 {
	height: 25%;
}
.h30 {
	height: 30%;
}
.h35 {
	height: 35%;
}
.h40 {
	height: 40%;
}
.h45 {
	height: 45%;
}
.h50 {
	height: 50%;
}
.h55 {
	height: 55%;
}
.h60 {
	height: 60%;
}
.h65 {
	height: 65%;
}
.h70 {
	height: 70%;
}
.h75 {
	height: 75%;
}
.h80 {
	height: 80%;
}
.h85 {
	height: 85%;
}
.h90 {
	height: 90%;
}
.h95 {
	height: 95%;
}
.h100 {
	height: 100%;
}

.vh0 {
	height: 0vh;
}
.vh5 {
	height: 5vh;
}
.vh10 {
	height: 10vh;
}
.vh15 {
	height: 15vh;
}
.vh20 {
	height: 20vh;
}
.vh25 {
	height: 25vh;
}
.vh30 {
	height: 30vh;
}
.vh35 {
	height: 35vh;
}
.vh40 {
	height: 40vh;
}
.vh45 {
	height: 45vh;
}
.vh50 {
	height: 50vh;
}
.vh55 {
	height: 55vh;
}
.vh60 {
	height: 60vh;
}
.vh65 {
	height: 65vh;
}
.vh70 {
	height: 70vh;
}
.vh75 {
	height: 75vh;
}
.vh80 {
	height: 80vh;
}
.vh85 {
	height: 85vh;
}
.vh90 {
	height: 90vh;
}
.vh95 {
	height: 95vh;
}
.vh100 {
	height: 100vh;
}

/* ------------------------------------------------------------
	Gradient
------------------------------------------------------------ */

/* http://www.colorzilla.com/gradient-editor/
Support for full multi-stop gradients with IE9 (using SVG). */
.gte-ie9 .gradient {
	filter: none !important;
}

.gradient_transparent-to-black {
	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 20%, rgba(0,0,0,0.80) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.80))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 20%,rgba(0,0,0,0.80) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(0,0,0,0) 20%,rgba(0,0,0,0.80) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(0,0,0,0) 20%,rgba(0,0,0,0.80) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 20%,rgba(0,0,0,0.80) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
}

/* ------------------------------------------------------------
	Block formatting
------------------------------------------------------------ */

.border-transparent {
	border-color: transparent !important;
}

.bg-fixed,
.bg-attachment-fixed {
	background-attachment: fixed !important;
}
.bg-local,
.bg-attachment-local {
	background-attachment: local !important;
}
.bg-scroll,
.bg-attachment-scroll {
	background-attachment: scroll !important;
}

.bg-transparent {
	background-color: transparent !important;
}

.bg-lt,
.bg-left-top {
	background-position: left top !important;
}
.bg-t,
.bg-top {
	background-position: center top !important;
}
.bg-rt,
.bg-right-top {
	background-position: right top !important;
}
.bg-l,
.bg-left {
	background-position: left center !important;
}
.bg-c,
.bg-center {
	background-position: center center !important;
}
.bg-r,
.bg-right {
	background-position: right center !important;
}
.bg-lb,
.bg-left-bottom {
	background-position: left bottom !important;
}
.bg-b,
.bg-bottom {
	background-position: center bottom !important;
}
.bg-rb,
.bg-right-bottom {
	background-position: right bottom !important;
}

.bg-nr,
.bg-no-repeat,
.bg-repeat-none {
	background-repeat: no-repeat !important;
}
.bg-rx,
.bg-repeat-x {
	background-repeat: repeat-x !important;
}
.bg-ry,
.bg-repeat-y {
	background-repeat: repeat-y !important;
}

.bg-contain,
.bg-size-contain {
	-webkit-background-size: contain !important;
	-moz-background-size: contain !important;
	-o-background-size: contain !important;
	background-size: contain !important;
}
.bg-cover,
.bg-size-cover {
	-webkit-background-size: cover !important;
	-moz-background-size: cover !important;
	-o-background-size: cover !important;
	background-size: cover !important;
}

/* ------------------------------------------------------------
	Text formatting
------------------------------------------------------------ */

.color-inherit {
	color: inherit;
}
.color-transparent {
	color: transparent;
}

.text-bold {
	font-weight: bold !important;
}
.text-normal {
	font-weight: normal !important;
}
.text-italic {
	font-style: italic !important;
}
.text-strike {
	text-decoration: line-through !important;
}
.text-decoration-none {
	text-decoration: none !important;
}

.text-center {
	text-align: center !important;
}
.text-left {
	text-align: left !important;
}
.text-right {
	text-align: right !important;
}
.text-justify {
	text-align: justify !important;
}
.text-nowrap {
	white-space: nowrap !important;
}
.text-lowercase {
	text-transform: lowercase !important;
}
.text-uppercase {
	text-transform: uppercase !important;
}
.text-capitalize {
	text-transform: capitalize !important;
}

.text-xl {
	font-size: 140% !important;
}
.text-l {
	font-size: 120% !important;
}
.text-s {
	font-size: 80% !important;
}
.text-xs {
	font-size: 60% !important;
}

.text-lead {
	font-size: 110%;
	font-weight: bold;
}
.text-meta {
	font-size: 80% !important;
}
.text-micro {
	font-size: 60% !important;
}
.text-dropcap {
	float: left;
	font-size: 280%;
	font-weight: 700;
	line-height: 1.0;
	padding-right: 0.1em;
}

.text-dim {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";/* IE 8 */
	filter: alpha(opacity=80);/* IE 5-7 */
	-khtml-opacity: 0.8;/* Safari 1.x */
	-moz-opacity: 0.8;/* Netscape */
	opacity: 0.8;/* Good browsers */
}
.text-card {
	background: #fcfcfc;
	
	-webkit-box-shadow: 0px 1px 2px 1px rgba(167, 164, 164, 0.25);
	-moz-box-shadow: 0px 1px 2px 1px rgba(167, 164, 164, 0.25);
	box-shadow: 0px 1px 2px 1px rgba(167, 164, 164, 0.25);
	
	margin-left: 2px;
	margin-right: 2px;
	padding: 1.25rem;
}
/* http://css-tricks.com/minimum-paragraph-widths/
Minimum paragraph width*/
.text-min-width:before {
	content: "";
	display: block;
	overflow: hidden;
	width: 10.0em;
	
	/* For demonstration */
	border: 1px solid green;
}


/* <span data-icon="&#x25a8;"></span><span class="screen-reader-text">RSS</span> */
.text-screen-reader {
	/* Reusable, toolbox kind of class */
	left: -9999px;
	position: absolute;
	top: -9999px;
}

/* <span data-icon="&#x25a8;"></span> */
[data-icon]:before {
	font-family: icons;/* BYO icon font, mapped smartly */
	content: attr(data-icon);
	speak: none;/* Not to be trusted, but hey. */
}

.text-nowrap,
.nowrap,
.no-wrap {
	white-space: nowrap !important;
}
.text-pre,
.pre {
	white-space: pre !important;
}

/* Put on body to prevent background scrolling */
.no-scroll {
	overflow: hidden !important;
}
/* Prevent text selection */
.no-select {
	-webkit-touch-callout: none !important;
	-webkit-user-select: none !important;
	-khtml-user-select: none !important;
	-moz-user-select: none !important;
	-ms-user-select: none !important;
	user-select: none !important;
}
/* Prevent mouse interaction */
.no-pointer-events {
	pointer-events: none !important;
}

.cursor-default {
	cursor: default !important;
}
.cursor-pointer {
	cursor: pointer !important;
}
.disabled {
	cursor: not-allowed;
	opacity: 0.5;
	pointer-events: none;
}

/* ------------------------------------------------------------
	Hiding
------------------------------------------------------------ */

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hide,
.hidden,
/* Address styling not present in IE 7/8/9, Firefox 3, and Safari 4. Known issue: no IE 6 support. */
[hidden] {
	display: none !important;
	visibility: hidden !important;
}
/* Hide visually and from screenreaders, but maintain layout */
.invisible {
	visibility: hidden !important;
}

/* Accessible Hiding */
.hide-offpage {
	left: -9999px;
	position: absolute;
	top: -9999px;
}
.hide-squish {
	/* don't do display:none for screen readers and devices */
	width: 0;
	height: 0;
	overflow: hidden;
}
.show-squish {
	/* don't do display:none for screen readers and devices */
	width: auto;
	height: auto;
	overflow: visible;
}
.hide-text {
	/* hide text */
	background-color: transparent;
	border: 0;
	color: transparent;
	font: 0/0 a;
	text-shadow: none;
}

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.hide-visually {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
/* Extends the .hide-visually class to allow the element to be focusable 
when navigated to via the keyboard: h5bp.com/p */
.hide-visually.focusable:active,
.hide-visually.focusable:focus {
	clip: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;
}

/* 
	Breakpoint hiding at this breakpoint and above or below
---------------------------------------- */
/* Desktop : Design for a width of 1200px (1200px+); 75.00em if 1em=16px */
@media only screen and (min-width: 1200px) {
	.show-xs,
	.show-s,
	.show-m,
	.show-l,
	.show-xs-down,
	.show-s-down,
	.show-m-down,
	.show-l-down,
	
	.hide-xl,
	.hide-xs-up,
	.hide-s-up,
	.hide-m-up,
	.hide-l-up,
	.hide-xl-up,
	.hide-xl-down {
		display: none !important;
	}
}
/* Desktop : Design for a width of 960px (960px - 1199px); 60.00em if 1em=16px */
@media only screen and (min-width: 960px) and (max-width: 1199.99px) {
	.show-xs,
	.show-s,
	.show-m,
	.show-xs-down,
	.show-s-down,
	.show-m-down,
	
	.hide-l,
	.hide-xs-up,
	.hide-s-up,
	.hide-m-up,
	.hide-l-up,
	.hide-l-down,
	.hide-xl-down {
		display: none !important;
	}
}
/* Tablet : Design for a width of 768px (768px - 959px); 59.99em if 1em=16px */
@media only screen and (min-width: 768px) and (max-width: 959.99px) {
	.show-xs,
	.show-s,
	.show-l,
	.show-xl,
	.show-l-up,
	.show-xl-up,
	.show-xs-down,
	.show-s-down,
	
	.hide-m,
	.hide-xs-up,
	.hide-s-up,
	.hide-m-up,
	.hide-m-down,
	.hide-l-down,
	.hide-xl-down {
		display: none !important;
	}
}
/* Mobile (Landscape) : Design for a width of 480px (480px - 767px); 47.99em if 1em=16px */
@media only screen and (min-width: 480px) and (max-width: 767.99px) {
	.show-xs,
	.show-m,
	.show-l,
	.show-xl,
	.show-m-up,
	.show-l-up,
	.show-xl-up,
	.show-xs-down,
	
	.hide-s,
	.hide-xs-up,
	.hide-s-up,
	.hide-s-down,
	.hide-m-down,
	.hide-l-down,
	.hide-xl-down {
		display: none !important;
	}
}
/* Mobile (Portrait) : Design for a width of 320px (0px - 479px); 29.99em if 1em=16px */
@media only screen and (max-width: 479.99px) {
	.show-s,
	.show-m,
	.show-l,
	.show-xl,
	.show-s-up,
	.show-m-up,
	.show-l-up,
	.show-xl-up,
	
	.hide-xs,
	.hide-xs-up,
	.hide-xs-down,
	.hide-s-down,
	.hide-m-down,
	.hide-l-down,
	.hide-xl-down {
		display: none !important;
	}
}
/* Print */
@media not print {
	.show-print {
		display: none !important;
	}
}
@media print {
	.hide-print {
		display: none !important;
	}
}


/* ============================================================
	# Responsive / Media Queries / Target Devices
============================================================ */

/* Desktop : Design for a width of 960px (960px+); 60.00em if 1em=16px */
@media only screen and (min-width: 960px) {
}

/* Desktop : Design for a width of 960px (0px - 1199px); 74.99em if 1em=16px */
@media only screen and (max-width: 1199.99px) {
}

/* Tablet : Design for a width of 768px (0px - 959px); 59.99em if 1em=16px */
@media only screen and (max-width: 959.99px) {
}

/* Mobile (Landscape) : Design for a width of 480px (0px - 767px); 47.99em if 1em=16px */
@media only screen and (max-width: 767.99px) {
}

/* Mobile (Portrait) : Design for a width of 320px (0px - 479px); 29.99em if 1em=16px */
@media only screen and (max-width: 479.99px) {
}

/* iPhone 4+ and high dpi retina displays */
@media only screen and (min-resolution: 2dppx) and (-webkit-min-device-pixel-ratio: 2) {
}


/* ============================================================
	# Fonts
============================================================ */

/*
@font-face {
	font-family: 'museo_sans100';
	src: url('fonts/museosans/museosans_100-webfont.eot');
	src: url('fonts/museosans/museosans_100-webfont.eot?#iefix') format('embedded-opentype'),
		 url('fonts/museosans/museosans_100-webfont.woff') format('woff'),
		 url('fonts/museosans/museosans_100-webfont.ttf') format('truetype'),
		 url('fonts/museosans/museosans_100-webfont.svg#museo_sans100') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Archivo Narrow';
	font-style: normal;
	font-weight: 400;
	src: local('Archivo Narrow Regular'), local('ArchivoNarrow-Regular'), url(fonts/archivonarrow/DsLzC9scoPnrGiwYYMQXphdbPw3QSf9R-kE0EsQUn2A.woff) format('woff');
}
*/