/** =========================================
    Grid
============================================= */

/* Widths
================================================== */

:root {

	--narrow:    568px;
	--cond:      640px;
	--full:      992px;
	--wide:      1340px;
	--super:     1680px;

	/* Breakpoints
	================================================== */

	--bp-mobile:   688px;
	--bp-tablet:   992px;
	--bp-desktop:  1312px;
	--bp-large:    1920px;

	/* Baseline
	========================================================== */

	--baseline-eighth:  4px;
	--baseline-quarter: 8px;
	--baseline-half:    16px;
	--baseline:         32px;
	--baseline-double:  64px;
	--baseline-triple:  96px;

	/* Gutters
	================================================== */

	--gutter-half:    8px;
	--gutter-quarter: 4px;
	--gutter:         16px;
	--gutter-double:  32px;
	--gutter-triple:  48px;

}

/* Wrappers and Containers
================================================== */

.container {
	margin: 0 auto;
	max-width: 100%;
	overflow: hidden;
	position: relative;
	width: 100%;
	}

.grid {
	margin: 0 auto;
	max-width: var(--wide);
	position: relative;
	}

	.grid-outer {
		padding: 0;
		margin: 0 auto;
		width: 100%;
		max-width: 100%;
		position: relative;
		}

	.grid-inner {
		padding: 0;
		margin: 0 auto;
		width: 100%;
		max-width: 100%;
		position: relative;
		}	

.content {
	margin: var(--baseline) auto;
	padding: 0 var(--gutter-double);
	position: relative;
	}

	.content-inner {
		margin: 0 auto;
		max-width: 100%;
		padding: 0;
		position: relative;
		width: 100%;
		}

	.content-outer {
		margin: 0 auto;
		max-width: 100%;
		padding: 0;
		position: relative;
		width: 100%;
		}

/* Rows and Blocks
================================================== */

.block {
	width: 100%;
	position: relative;
	padding: 16px;
	}

.row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	max-width: 100%;
	}

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

	.content { 
		padding: var(--gutter);
	}

	.block .row {
		margin-left: - var(--gutter);
		margin-right: - var(--gutter);
	}

	.block .row .block {
		padding-left: var(--gutter);
		padding-right: var(--gutter);
	}

	.row .whole,           .row .w-1-1, .row .span-12 { width: 100%;     }
	.row .half,            .row .w-1-2, .row .span-6  { width: 50%;      }
	.row .one-third,       .row .w-1-3, .row .span-4  { width: 33.3332%; }
	.row .two-thirds,      .row .w-2-3                { width: 66.6665%; }
	.row .one-quarter,     .row .w-1-4, .row .span-3  { width: 25%;      }
	.row .three-quarters,  .row .w-3-4                { width: 75%;      }
	.row .one-fifth,       .row .w-1-5, .row .span-2  { width: 20%;      }
	.row .two-fifths,      .row .w-2-5                { width: 40%;      }
	.row .three-fifths,    .row .w-3-5                { width: 60%;      }
	.row .four-fifths,     .row .w-4-5                { width: 80%;      }
	.row .one-sixth,       .row .w-1-6                { width: 16.6667%; }
	.row .five-sixths,     .row .w-5-6                { width: 83.3333%; }
	.row .one-twelfth,     .row .w-1-12               { width: 8.3333%;  }
						   .row .w-2-12               { width: 16.6667%  }
						   .row .w-3-12               { width: 25%       }
						   .row .w-4-12               { width: 33.3332%  }
	.row .five-twelfths,   .row .w-5-12               { width: 41.6667%  }
						   .row .w-6-12               { width: 50%       }
	.row .seven-twelfths,  .row .w-7-12               { width: 58.3333%  }
						   .row .w-8-12               { width: 66.6665%  }
						   .row .w-9-12               { width: 75%       }
						   .row .w-10-12              { width: 83.3333%  }
	.row .eleven-twelfths, .row .w-11-12              { width: 91.6667%  }
						   .row .w-12-12              { width: 100%      }
	.row .golden-small,    .row .w-g-s                { width: 38.2716%; }
	.row .golden-large,    .row .w-g-l                { width: 61.7283%; }

	.row .push-half,       .row .push-1-2             { margin-left: 50%; }
	.row .push-one-third,  .row .push-1-3             { margin-left: 33.3332%; }
	.row .push-one-quarter,.row .push-1-4             { margin-left: 25%;      }
	.row .push-one-fifth,  .row .push-1-5             { margin-left: 20%;      }
	.row .push-one-sixth,  .row .push-1-6             { margin-left: 16.6667%; }
	.row .push-one-eighth, .row .push-1-8             { margin-left: 12.5%;    }
	.row .push-one-twelfth,.row .push-1-12            { margin-left: 8.3333%;  }

}

@media screen and (min-width: 992px ) {
	[id*='-content'] { max-width: 100%;  }
	.content 		 { width: 100%; max-width: var(--wide); }
	.full 			 { width: 100%; max-width: var(--wide); }
}

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

	.row .block.one-fifth,
	.row .block.one-quarter,
	.row .block.one-third {
		width: 50%;
	}
	
	.sidebar.column {
		padding: 0 var(--gutter) 0 0 !important;
	}

	.sidebar img.size-large {
		max-width: 100%;
	}

} /* end media query */

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

	.row .block.one-fifth,
	.row .block.one-quarter,
	.row .block.one-third,
	.row .block.one-half {
		width: 100%;
	}

}

.sidebar.column {
	padding: 0 0 0 var(--gutter-double);
}

.sidebar.column .row:first-of-type > .sidebar.column .block:first-of-type {
	padding-top: 0;
}

.sidebar.column .block { padding-right: 0; }

.sidebar.column .inner {
	padding-top: 0;
}

.sidebar.column .row {
	margin-bottom: var(--baseline);
	width: 100%;
}

.sidebar.column .row:first-of-type {
	margin-top: var(--baseline-half);
}

.sidebar.column .block ul {
	padding-left: 0;
}