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

/* ROWS */
/*   simple rows with varying    */ 
/* background colors and padding */
.row
{
	clear: both;
	overflow: hidden;
}

/* row-colors */
.row--white { background: #fff; }
.row--grey { background: #ddd; }
.row--blue { background: #3bb2d0; }

.row--dark-grey
{
	color: #fff;
	background: #282e37;
}

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

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


/* CONTAINERS */
/* containers of various widths */
/*       inside the rows        */
.container-narrow,
.container-medium,
.container-wide
{
	margin: 0 auto;
	padding-left: 1.5em;
	padding-right: 1.5em;
}

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

/* COLUMNS */
.col-narrow,
.col-narrow--right { margin-bottom: 1.5em; }

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

@media (min-width: 800px)
{
	.row--padding-medium
	{
		padding-top: 2.8889em;
		padding-bottom: 2em;
		/* 70px/18px */
	}
	
	.row--padding-wide
	{
		padding-top: 5.5556em;
		padding-bottom: 5.5556em;
		/* 100px/18px */
	}
	
	.container-narrow,
	.container-medium,
	.container-wide
	{
		padding-left: 2em;
		padding-right: 2em;
	}
	
	.col-narrow,
	.col-medium,
	.col-wide { float: left; }
	.col-narrow--right,
	.col-wide--right { float: right; }
	
	.col-wide,
	.col-wide--right { width: 61%; }
	
	.col-medium { width: 50%;}
	
	.col-narrow,
	.col-narrow--right
	{
		width: 33%;
		margin-bottom: 0;
		box-sizing:border-box;
		background:white;
	}
	
}