/* ----------------------------
layout
---------------------------- */

/* row */
.row 
{
	clear: both;
	overflow: hidden;
}

/* row-colors */
.row--white { background: #fff; }
.row--grey { background: #f5f5f5; }
.row--beige 
{ 
	color: #7d7d7d;
	background: #f7f7f7; 
}

.row--banner-bg { background: #606080; }


/* row-padding */
.row--padding-medium
{
	padding-top: 1.25em;
	padding-bottom: 1.25em;
	/* 20px/16px */
}

.row--padding-wide
{
	padding-top: 2.1875em;
	padding-bottom: 2.1875em;
	/* 35px/16px */
}

/* containers */
.container-narrow,
.container-medium,
.container-wide
{
	margin: 0 auto;
	padding-left: 1.5em;
	padding-right: 1.5em;
}

/*.container-narrow { max-width: 34em; }
.container-medium { max-width: 52em; }
.container-wide { max-width: 58em; }*/

.container-narrow { max-width: 44em; }
.container-medium { max-width: 62em; }
.container-wide { max-width: 63.75em; }

/* columns */

.col-narrow,
.col-narrow--right,
.col-narrow--wider { margin-bottom: 1.5em; }

/* ----------------------------
wide
---------------------------- */

@media (min-width: 38em)
{

	.row--padding-medium
	{
	padding-top: 1.25em;
	padding-bottom: 1.25em;
	/* 20px/16px */
	}

	.row--padding-wide
	{
	padding-top: 2.1875em;
	padding-bottom: 2.1875em;
	/* 35px/16px */
	}

	.container-narrow,
	.container-medium,
	.container-wide
	{
		padding-left: 2em;
		padding-right: 2em;
	}

	.col-narrow,
	.col-narrow--wider,
	.col-medium,
	.col-wide { float: left; }
	.col-narrow--right,
	.col-wide--right { float: right; }

	.col-wide  { width: 72%; }
	.col-wide--right { width: 66%; }

	.col-medium { width: 50%; }

	.col-narrow,
	.col-narrow--right 
	{
		width: 22%;
		margin-bottom: 0; 
	}

	.col-narrow--wider 
	{
		width: 33.333%;
		margin-bottom: 0; 
	} 

}

@media (min-width: 64em)
{

	.row--padding-medium
	{
	padding-top: 1.25em;
	padding-bottom: 1.25em;
	/* 20px/16px */
	}

	.row--padding-wide
	{
	padding-top: 2.1875em;
	padding-bottom: 2.1875em;
	/* 35px/16px */
	}

	.container-narrow,
	.container-medium,
	.container-wide
	{
		padding-left: 2em;
		padding-right: 2em;
	}

	.col-narrow,
	.col-narrow--wider,
	.col-medium,
	.col-wide { float: left; }
	.col-narrow--right,
	.col-wide--right { float: right; }

	.col-wide  { width: 72%; }
	.col-wide--right { width: 66%; }

	.col-medium { width: 50%; }

	.col-narrow,
	.col-narrow--right 
	{
		width: 22%;
		margin-bottom: 0; 
	}

	.col-narrow--wider 
	{
		width: 33.333%;
		margin-bottom: 0; 
	} 

}