/* -------------- DEFAULTS 	-------------- */

:root {
	--font-primary: sans-serif;
	--font-headings: Helvetica, Arial, sans-serif;

	--color-text-primary: #505050;
	--color-text-headings: #6f1931;
}

/* --------------------------------------------------------- */
/* --------- HTML element classes 		*/

BODY, HTML {
	width: 100%;
	font-size: 16px;
	font-family: var(--font-primary);
	color: var(--color-text-primary);
	min-width: 390px;
}

IMG, IFRAME {
	max-width: 100%;
}

H1, H2, H3, H4, H5, H6 {
	font-family: var(--font-headings);
	font-weight: 700;
	color: var(--color-text-headings);
}

/* --------------------------------------------------------- */
/* --------- Generic classes 		*/
/*
	LAYOUT STYLES:
	Flexbox - one-directional
		flexbox with set widths (like bootstrap and Bee) - uses flex-basis for set widths, allows for empty space in the row/column
		flexbox with full flex - uses flex-grow/flex-shrink for flexible widths, fills the entire row/column


*/

.page-row {
	display: flex;
	flex-direction: row;
	justify-content: center;
	width: 100%;
}

.page-container {
	width: 100%;
	max-width: 995px;
}

/* really only acts as a placeholder in the HTML for consistency */
.page-container-full-width {
	width: 100%;
	max-width: none;
}

DIV.row {
	display: flex;   
	flex-direction: row;
	flex-wrap: wrap;
}

DIV.row.nowrap {
	flex-wrap: nowrap;
}

DIV.column {
	display: flex;
	flex-direction: column;
}

.h-align-left 	{ justify-content: flex-start; }
.h-align-center { justify-content: center; }
.h-align-right 	{ justify-content: flex-end; }

.v-align-top 		{ align-items: flex-start; }
.v-align-center 	{ align-items: center; }
.v-align-bottom 	{ align-items: flex-end; }
.v-align-stretch 	{ align-items: stretch; }

.v-self-align-top 		{ align-self: flex-start; }
.v-self-align-center 	{ align-self: center; }
.v-self-align-bottom 	{ align-self: flex-end; }
.v-self-align-stretch 	{ align-self: stretch; }

.item-width-1 	{	flex-basis: 100%; }
.item-width-2 	{	flex-basis: 100%; }
.item-width-3 	{	flex-basis: 100%; }
.item-width-4 	{	flex-basis: 100%; }
.item-width-5 	{	flex-basis: 100%; }
.item-width-6 	{	flex-basis: 100%; }
.item-width-7 	{	flex-basis: 100%; }
.item-width-8 	{	flex-basis: 100%; }
.item-width-9 	{	flex-basis: 100%; }
.item-width-10 	{	flex-basis: 100%; }
.item-width-11 	{	flex-basis: 100%; }
.item-width-12 	{	flex-basis: 100%; }

DIV.row.nowrap .item-width-1 	{	flex-basis: 8.3333%; }
DIV.row.nowrap .item-width-2 	{	flex-basis: 16.6666%; }
DIV.row.nowrap .item-width-3 	{	flex-basis: 25%; }
DIV.row.nowrap .item-width-4 	{	flex-basis: 33.3333%; }
DIV.row.nowrap .item-width-5 	{	flex-basis: 41.6666%; }
DIV.row.nowrap .item-width-6 	{	flex-basis: 49.9999%; }
DIV.row.nowrap .item-width-7 	{	flex-basis: 58.3333%; }
DIV.row.nowrap .item-width-8 	{	flex-basis: 66.6666%; }
DIV.row.nowrap .item-width-9 	{	flex-basis: 75%; }
DIV.row.nowrap .item-width-10 	{	flex-basis: 83.3333%; }
DIV.row.nowrap .item-width-11 	{	flex-basis: 91.6666%; }
DIV.row.nowrap .item-width-12 	{	flex-basis: 100%; }


.text-left 		{ text-align: left;	 }
.text-center 	{ text-align: center;	 }
.text-right 	{ text-align: right;	 }



/* --------------------------------------------------------- */
/* --------- RESPONSIVE 				 */

@media screen and (min-width: 576px) {
	DIV.row {
		flex-wrap: nowrap;
	}

	.item-width-1 	{	flex-basis: 8.3333%; }
	.item-width-2 	{	flex-basis: 16.6666%; }
	.item-width-3 	{	flex-basis: 25%; }
	.item-width-4 	{	flex-basis: 33.3333%; }
	.item-width-5 	{	flex-basis: 41.6666%; }
	.item-width-6 	{	flex-basis: 49.9999%; }
	.item-width-7 	{	flex-basis: 58.3333%; }
	.item-width-8 	{	flex-basis: 66.6666%; }
	.item-width-9 	{	flex-basis: 75%; }
	.item-width-10 	{	flex-basis: 83.3333%; }
	.item-width-11 	{	flex-basis: 91.6666%; }
	.item-width-12 	{	flex-basis: 100%; }

}


@media screen and (min-width: 768px) {

}


@media screen and (min-width: 993px) {

}

@media screen and (min-width: 1200px) {

}


@media screen and (min-width: 1400px) {

}