/**
 * 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
 */

.columnset       { clear: both; }
.columnset:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }

.columnset
{
	width: 100%;
	padding: 0px;
	margin-left: 0px;
	margin-right: 0px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.columnset.centered
{
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}

.columnset.gutter
{
	padding: 0px 10px;
}

.columnset .column
{
	float: left;
	width: 100%;
	padding: 0px;
	margin-left: 0;
	margin-right: 0;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.columnset.centered .column
{
	float: none;
}

.columnset.equal
{
	overflow: hidden;
}

.columnset.equal .column
{
	margin-bottom: -99999px;
	padding-bottom: 99999px;
}

.columnset.gutter .column
{
	padding: 10px;
}

.columnset .column.pad-left
{
	padding-left: 6rem;
}

.columnset .column.pad-right
{
	padding-right: 6rem;
}

.columnset .centered
{
	float: none;
	margin-left: auto;
	margin-right: auto;
}

.columnset .col-right { float: right; }

.columnset .col-90 { width: 90%; }
.columnset .col-85 { width: 85%; }
.columnset .col-80 { width: 80%; }
.columnset .col-75 { width: 75%; }
.columnset .col-70 { width: 70%; }
.columnset .col-66 { width: 66.6%; }
.columnset .col-60 { width: 60%; }
.columnset .col-55 { width: 55%; }
.columnset .col-50 { width: 50%; }
.columnset .col-45 { width: 45%; }
.columnset .col-40 { width: 40%; }
.columnset .col-33 { width: 33.3%; }
.columnset .col-30 { width: 30%; }
.columnset .col-25 { width: 25%; }
.columnset .col-20 { width: 20%; }
.columnset .col-15 { width: 15%; }
.columnset .col-10 { width: 10%; }


.columnset.full-gutter .col-50                   { padding: 10px 0px; }
.columnset.full-gutter .col-50:nth-of-type(odd)  { padding-right: 10px; }
.columnset.full-gutter .col-50:nth-of-type(even) { padding-left:  10px; }

.columnset.full-gutter .col-33                   { padding: 10px 8px; }
.columnset.full-gutter .col-33:nth-of-type(3n+1) { padding: 10px 16px 10px 0px; }
.columnset.full-gutter .col-33:nth-of-type(3n+3) { padding: 10px 0px 10px 16px; }

.columnset.full-gutter .col-25                   { padding: 10px; }
.columnset.full-gutter .col-25:nth-of-type(4n+1) { padding: 10px 20px 10px 0px; }
.columnset.full-gutter .col-25:nth-of-type(4n+4) { padding: 10px 0px 10px 20px; }

.columnset.full-gutter .col-20                   { padding: 10px; }
.columnset.full-gutter .col-20:nth-of-type(5n+1) { padding-left:  0; }
.columnset.full-gutter .col-20:nth-of-type(5n+5) { padding-right: 0; }

.columnset.full-gutter .col-10                     { padding: 10px; }
.columnset.full-gutter .col-10:nth-of-type(10n+1)  { padding-left:  0; }
.columnset.full-gutter .col-10:nth-of-type(10n+10) { padding-right: 0; }

@media screen and (max-width: 800px)
{
	.columnset .column { float: none; width: 100%; }

	.columnset .column.pad-left { padding-left: 0; }
	.columnset .column.pad-right { padding-right: 0; }

	/*
	.columnset .col-90 { width: 100%; }
	.columnset .col-80 { width: 100%; }
	.columnset .col-75 { width: 100%; }
	.columnset .col-70 { width: 100%; }
	.columnset .col-66 { width: 100%; }
	.columnset .col-60 { width: 100%; }
	.columnset .col-50 { width: 100%; }
	.columnset .col-40 { width: 100%; }
	.columnset .col-33 { width: 100%; }
	.columnset .col-30 { width: 100%; }
	.columnset .col-25 { width: 100%; }
	.columnset .col-20 { width: 100%; }
	.columnset .col-10 { width: 100%; }*/
}

@media screen and (max-width: 500px)
{

}