/**********************************************
	General
***********************************************/

html, body {
	width: 100%;
	height: 100%;
	overflow-x: hidden;
}

body {
	position: relative;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	width: 100%;
	max-width: 100%;
}

* {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

div[class^="col-"], div[class*="col-"] {
	float: left;
}

/* ------------------------------------------ */

.site {
	width: 100%;
	margin-left: 0;
	z-index: 2;
}

.container {
	margin: 0 auto;
}

.header,
.main,
.footer {
	float: none;
	width: 100%;
}	

.row {
	margin: 0;
	margin-bottom: 10px;
	padding: 0;
	clear: both;
}

/* ------------------------------------------ */

.padding {
	padding: 5px;
}

.padding2x {
	padding: 10px;
}

.padding4x {
	padding: 20px;
}

.margin {
	margin: 5px;
}

.clear {
	clear: both;
}

.spacer {
	border-bottom: solid 1px #DDD;
	margin-bottom: 10px;
	padding-top: 10px;
	clear: both;
}

.align-grid-bottoms {
	display: flex;
	flex-wrap: wrap;
}

/**********************************************
	YouTube Responsive Grid
***********************************************/

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/**********************************************
	Facebook Responsive Grid
***********************************************/

#fb-root {
	display: none;
}

.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
	width: 100% !important;
}

/**********************************************
	Mobile
***********************************************/

@media all and (max-width: 768px) {
	.mode {
		font-family: "mobile";
	}

	.m-hide {
		display: none;
	}

	/* ------------------------------------------ */

	.container {
		min-width: 320px;
	}

	/* ------------------------------------------ */

	.col-0of4 { display: none; }
	.col-1of4 { width: 25%; }
	.col-2of4 { width: 50%; }
	.col-3of4 { width: 75%; }
	.col-4of4 { width: 100%; }

	/* ------------------------------------------ */

	.col-3of4 .col-1of4 { width: 33.3333%; }
	.col-3of4 .col-2of4 { width: 66.6667%; }
	.col-3of4 .col-3of4 { width: 100%; }
	.col-2of4 .col-1of4 { width: 50%; }
	.col-2of4 .col-2of4 { width: 100%; }
	.col-1of4 .col-1of4 { width: 100%; }
}

/**********************************************
	Tablet
***********************************************/

@media all and (min-width: 769px) and (max-width: 1079px) {
	.mode {
		font-family: "tablet";
	}

	.t-hide {
		display: none;
	}

	/* ------------------------------------------ */

	.col-0of8 { display: none; }
	.col-1of8 { width: 12.5%; }
	.col-2of8 { width: 25%; }
	.col-3of8 { width: 37.5%; }
	.col-4of8 { width: 50%; }
	.col-5of8 { width: 62.5%; }
	.col-6of8 { width: 75%; }
	.col-7of8 { width: 87.5%; }
	.col-8of8 { width: 100%; }

	/* ------------------------------------------ */

	.col-7of8 .col-1of8 { width: 14.2857%; }
	.col-7of8 .col-2of8 { width: 28.5714%; }
	.col-7of8 .col-3of8 { width: 42.8571%; }
	.col-7of8 .col-4of8 { width: 57.1429%; }
	.col-7of8 .col-5of8 { width: 71.4286%; }
	.col-7of8 .col-6of8 { width: 85.7143%; }
	.col-7of8 .col-7of8 { width: 100%; }

	/* ------------------------------------------ */

	.col-6of8 .col-1of8 { width: 16.6667%; }
	.col-6of8 .col-2of8 { width: 33.3333%; }
	.col-6of8 .col-3of8 { width: 50%; }
	.col-6of8 .col-4of8 { width: 66.6667%; }
	.col-6of8 .col-5of8 { width: 83.3333%; }
	.col-6of8 .col-6of8 { width: 100%; }

	/* ------------------------------------------ */

	.col-5of8 .col-1of8 { width: 20%; }
	.col-5of8 .col-2of8 { width: 40%; }
	.col-5of8 .col-3of8 { width: 60%; }
	.col-5of8 .col-4of8 { width: 80%; }
	.col-5of8 .col-5of8 { width: 100%; }

	/* ------------------------------------------ */

	.col-4of8 .col-1of8 { width: 25%; }
	.col-4of8 .col-2of8 { width: 50%; }
	.col-4of8 .col-3of8 { width: 75%; }
	.col-4of8 .col-4of8 { width: 100%; }

	/* ------------------------------------------ */

	.col-3of8 .col-1of8 { width: 33.3333%; }
	.col-3of8 .col-2of8 { width: 66.6667%; }
	.col-3of8 .col-3of8 { width: 100%; }

	/* ------------------------------------------ */

	.col-2of8 .col-1of8 { width: 50%; }
	.col-2of8 .col-2of8 { width: 100%; }

	/* ------------------------------------------ */

	.col-1of8 .col-1of8 { width: 100%; }
}

/**********************************************
	Desktop
***********************************************/

@media all and (min-width: 1080px) {
	.mode {
		font-family: "desktop";
	}

	.d-hide {
		display: none;
	}

	/* ------------------------------------------ */

	.container { width: 1080px; }

	/* ------------------------------------------ */

	.col-0of12 { display: none; }
	.col-1of12 { width: 8.3333%; }
	.col-2of12 { width: 16.6667%; }
	.col-3of12 { width: 25%; }
	.col-4of12 { width: 33.3333%; }
	.col-5of12 { width: 41.6667%; }
	.col-6of12 { width: 50%; }
	.col-7of12 { width: 58.3333%; }
	.col-8of12 { width: 66.6667%; }
	.col-9of12 { width: 75%; }
	.col-10of12 { width: 83.3333%; }
	.col-11of12 { width: 91.6667%; }
	.col-12of12 { width: 100%; }

	/* ------------------------------------------ */

	.col-11of12 .col-1of12 { width: 9.0909%; }
	.col-11of12 .col-2of12 { width: 18.1818%; }
	.col-11of12 .col-3of12 { width: 27.2727%; }
	.col-11of12 .col-4of12 { width: 36.3636%; }
	.col-11of12 .col-5of12 { width: 45.4545%; }
	.col-11of12 .col-6of12 { width: 54.5455%; }
	.col-11of12 .col-7of12 { width: 63.6364%; }
	.col-11of12 .col-8of12 { width: 72.7273%; }
	.col-11of12 .col-9of12 { width: 81.8182%; }
	.col-11of12 .col-10of12 { width: 90.9091%; }
	.col-11of12 .col-11of12 { width: 100%; }

	/* ------------------------------------------ */

	.col-10of12 .col-1of12 { width: 10%; }
	.col-10of12 .col-2of12 { width: 20%; }
	.col-10of12 .col-3of12 { width: 30%; }
	.col-10of12 .col-4of12 { width: 40%; }
	.col-10of12 .col-5of12 { width: 50%; }
	.col-10of12 .col-6of12 { width: 60%; }
	.col-10of12 .col-7of12 { width: 70%; }
	.col-10of12 .col-8of12 { width: 80%; }
	.col-10of12 .col-9of12 { width: 90%; }
	.col-10of12 .col-10of12 { width: 100%; }

	/* ------------------------------------------ */

	.col-9of12 .col-1of12 { width: 11.1111%; }
	.col-9of12 .col-2of12 { width: 22.2222%; }
	.col-9of12 .col-3of12 { width: 33.3333%; }
	.col-9of12 .col-4of12 { width: 44.4444%; }
	.col-9of12 .col-5of12 { width: 55.5556%; }
	.col-9of12 .col-6of12 { width: 66.6667%; }
	.col-9of12 .col-7of12 { width: 77.7778%; }
	.col-9of12 .col-8of12 { width: 88.8889%; }
	.col-9of12 .col-9of12 { width: 100%; }

	/* ------------------------------------------ */

	.col-8of12 .col-1of12 { width: 12.5%; }
	.col-8of12 .col-2of12 { width: 25%; }
	.col-8of12 .col-3of12 { width: 37.5%; }
	.col-8of12 .col-4of12 { width: 50%; }
	.col-8of12 .col-5of12 { width: 62.5%; }
	.col-8of12 .col-6of12 { width: 75%; }
	.col-8of12 .col-7of12 { width: 87.5%; }
	.col-8of12 .col-8of12 { width: 100%; }

	/* ------------------------------------------ */

	.col-7of12 .col-1of12 { width: 14.2857%; }
	.col-7of12 .col-2of12 { width: 28.5714%; }
	.col-7of12 .col-3of12 { width: 42.8571%; }
	.col-7of12 .col-4of12 { width: 57.1429%; }
	.col-7of12 .col-5of12 { width: 71.4286%; }
	.col-7of12 .col-6of12 { width: 85.7143%; }
	.col-7of12 .col-7of12 { width: 100%; }

	/* ------------------------------------------ */

	.col-6of12 .col-1of12 { width: 16.6667%; }
	.col-6of12 .col-2of12 { width: 33.3333%; }
	.col-6of12 .col-3of12 { width: 50%; }
	.col-6of12 .col-4of12 { width: 66.6667%; }
	.col-6of12 .col-5of12 { width: 83.3333%; }
	.col-6of12 .col-6of12 { width: 100%; }

	/* ------------------------------------------ */

	.col-5of12 .col-1of12 { width: 20%; }
	.col-5of12 .col-2of12 { width: 40%; }
	.col-5of12 .col-3of12 { width: 60%; }
	.col-5of12 .col-4of12 { width: 80%; }
	.col-5of12 .col-5of12 { width: 100%; }

	/* ------------------------------------------ */

	.col-4of12 .col-1of12 { width: 25%; }
	.col-4of12 .col-2of12 { width: 50%; }
	.col-4of12 .col-3of12 { width: 75%; }
	.col-4of12 .col-4of12 { width: 100%; }

	/* ------------------------------------------ */

	.col-3of12 .col-1of12 { width: 33.3333%; }
	.col-3of12 .col-2of12 { width: 66.6667%; }
	.col-3of12 .col-3of12 { width: 100%; }

	/* ------------------------------------------ */

	.col-2of12 .col-1of12 { width: 50%; }
	.col-2of12 .col-2of12 { width: 100%; }

	/* ------------------------------------------ */

	.col-1of12 .col-1of12 { width: 100%; }
}

/**********************************************
	Sets height to number of rows
	based on single column width
***********************************************/

div[class^="row-"] {
	display: inline-block;
	position: relative;
	width: 100%;
	overflow: hidden;
}

div[class^="row-"]:after {
	content: '';
	display: block;
}

div[class^="col-8"].row-1:after { margin-top: 12.5%; }
div[class^="col-8"].row-2:after { margin-top: 25%; }
div[class^="col-8"].row-3:after { margin-top: 37.5%; }
div[class^="col-8"].row-4:after { margin-top: 50%; }

/**********************************************
	Sets height equal to width
***********************************************/

.square {
	display: inline-block;
	position: relative;
	width: 100%;
	overflow: hidden;
}

.square:after {
	content: '';
	display: block;
	margin-top: 100%;
}

/**********************************************
	Shapes Helpers
***********************************************/

.arrow-up {
	width: 0; 
	height: 0; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	
	border-bottom: 5px solid black;
}

.arrow-down:after {
	content: "";
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid #06F;
	position: absolute;
	bottom: -10px;
	left: 10px;
}

.arrow-down:before {
	content: "";
	width: 0;
	height: 0;
	border-left: 14px solid transparent;
	border-right: 14px solid transparent;
	border-top: 14px solid #000;
	position: absolute;
	bottom: -14px;
	left: 6px;
}