/**
 * Responsive Percentage Based Grid System
 *
 * @author Roger Soucy <roger.soucy@elusive-concepts.com>
 * @copyright 2014 Elusive Concepts, LLC. All rights reserved
 * @version 1.0.0
 */


/* ==[ GRID CONTAINER ]============================================*/
.grid
{
	display: flex;
	flex-wrap: wrap;

	width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding: 0;
}

.grid.gutter
{
	justify-content: space-between;
}

.grid.align-top
{
	align-items: flex-start;
}

.grid.align-center
{
	align-items: center;
}

.grid.align-bottom
{
	align-items: flex-end;
}

.grid.justify-left
{
	justify-content: flex-start;
}

.grid.justify-center
{
	justify-content: center;
}

.grid.justify-right
{
	justify-content: flex-end;
}

/* ==[ GRID CELL ]=================================================*/
.grid .cell.flex
{
	display: flex;
	flex: 1;
}

.grid .cell
{
	display: block;
	flex: 1;
}

.grid.gutter .cell
{
	margin: 1em 0 0;
}

.grid.gutter-lg .cell
{
	margin: 1.5em 0 0;
}

.grid .cell.pad-left
{
	padding-left: 6rem;
}

.grid .cell.pad-right
{
	padding-right: 6rem;
}

.grid .cell.align-top
{
	align-self: flex-start;
}

.grid .cell.align-bottom
{
	align-self: flex-end;
}

.grid .cell.align-center
{
	align-self: center;
}

.grid .cell.align-right
{
	margin-left: auto;
}

.grid.cells-1x .cell { flex: 0 0 100%; max-width: 100%; }
.grid.cells-2x .cell { flex: 0 0 50%; max-width: 50%; }
.grid.cells-3x .cell { flex: 0 0 33.3333%; max-width: 33.3333%; }
.grid.cells-4x .cell { flex: 0 0 25%; max-width: 25%; }
.grid.cells-5x .cell { flex: 0 0 20%; max-width: 20%; }

.grid.gutter.cells-2x .cell { flex: 0 0 calc(50% - 0.75em); max-width: calc(50% - 0.75em); }
.grid.gutter.cells-3x .cell { flex: 0 0 calc(33.3333% - 0.75em); max-width: calc(33.3333% - 0.75em); }
.grid.gutter.cells-4x .cell { flex: 0 0 calc(25% - 0.75em); max-width: calc(25% - 0.75em); }
.grid.gutter.cells-5x .cell { flex: 0 0 calc(20% - 0.75em); max-width: calc(20% - 0.75em); }

.grid.gutter-lg.cells-2x .cell { flex: 0 0 calc(50% - 1em); max-width: calc(50% - 1em); }
.grid.gutter-lg.cells-3x .cell { flex: 0 0 calc(33.3333% - 1em); max-width: calc(33.3333% - 1em); }
.grid.gutter-lg.cells-4x .cell { flex: 0 0 calc(25% - 1em); max-width: calc(25% - 1em); }
.grid.gutter-lg.cells-5x .cell { flex: 0 0 calc(20% - 1em); max-width: calc(20% - 1em); }

.grid.cells-3x .cell:nth-of-type(3n+1) {}
.grid.cells-3x .cell:nth-of-type(3n+3) {}

.grid .cell.w-100 { flex: 0 0 100% !important; max-width: 100% !important; }
.grid .cell.w-90 { flex: 0 0 90% !important; max-width: 90% !important; }
.grid .cell.w-85 { flex: 0 0 85% !important; max-width: 85% !important; }
.grid .cell.w-80 { flex: 0 0 80% !important; max-width: 80% !important; }
.grid .cell.w-75 { flex: 0 0 75% !important; max-width: 75% !important; }
.grid .cell.w-70 { flex: 0 0 70% !important; max-width: 70% !important; }
.grid .cell.w-66 { flex: 0 0 66.6666% !important; max-width: 66.6666% !important; }
.grid .cell.w-65 { flex: 0 0 65% !important; max-width: 65% !important; }
.grid .cell.w-60 { flex: 0 0 60% !important; max-width: 60% !important; }
.grid .cell.w-55 { flex: 0 0 55% !important; max-width: 55% !important; }
.grid .cell.w-50 { flex: 0 0 50% !important; max-width: 50% !important; }
.grid .cell.w-45 { flex: 0 0 45% !important; max-width: 54% !important; }
.grid .cell.w-40 { flex: 0 0 40% !important; max-width: 40% !important; }
.grid .cell.w-35 { flex: 0 0 35% !important; max-width: 35% !important; }
.grid .cell.w-33 { flex: 0 0 33.3333% !important; max-width: 33.3333% !important; }
.grid .cell.w-30 { flex: 0 0 30% !important; max-width: 30% !important; }
.grid .cell.w-25 { flex: 0 0 25% !important; max-width: 25% !important; }
.grid .cell.w-20 { flex: 0 0 20% !important; max-width: 20% !important; }
.grid .cell.w-15 { flex: 0 0 15% !important; max-width: 15% !important; }
.grid .cell.w-10 { flex: 0 0 10% !important; max-width: 10% !important; }


@media screen and (max-width: 799px), print
{
	.grid .cell.w-90, .grid .cell.w-85, .grid .cell.w-80, .grid .cell.w-75,
	.grid .cell.w-70, .grid .cell.w-66, .grid .cell.w-65, .grid .cell.w-60,
	.grid .cell.w-55, .grid .cell.w-50, .grid .cell.w-45, .grid .cell.w-40,
	.grid .cell.w-35, .grid .cell.w-33, .grid .cell.w-30, .grid .cell.w-25,
	.grid .cell.w-20, .grid .cell.w-15, .grid .cell.w-10, .grid .cell
	{
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}

	.grid .cell.pad-left
	{
		padding-left: 0;
	}

	.grid .grid.pad-right
	{
		padding-right: 0;
	}
}