// main: style.scss
.container {
	max-width: $width;
	margin: 0 auto;
	padding: 0px 30px;
	@include for(medium-screens) {
		padding: 0px 50px;
	}
	@extend .clear;
	position: relative;
}

.container.full-screen {
	width: 100% !important;
	max-width: 100% !important;
	.content-area {
		width: 100%;
	}
}

#primary {
	padding-bottom: $base*2;
	padding-top: $base*2;
}

.home #primary {
	padding-bottom: 0px;
}

#secondary {
	padding-bottom: $base*2;
	padding-top: 0;
	@include for(medium-screens) {
		padding-top: $base*2;
	}
}

.content-area {
	width: 100%;
	float: none;
	@include for(medium-screens) {
		width: percentage( 840px / $grid ); //680px
		float: left;
	}
}
.sidebar {
	width: 100%;
	float: none;
	@include for(medium-screens) {
		width: percentage( 290px / $grid ); // 300px
		float: left;
	}
}

.page-fullwidth .content-area,
.page-template-template-fullwidth-php .content-area {
	float: none;
	width: 100%;
}

.no-sidebar .content-area {
	width: 100%;
}

@include for(medium-screens) {
	.left-sidebar .content-area {
		float: right;
		padding-left: 39px;
		border-left: 1px solid $border;
		margin-right: 1px;
	}

	.left-sidebar .sidebar {
		padding-right: 39px;
		border-right: 1px solid $border;
		margin-right: -1px;
	}

	.right-sidebar .content-area {
		padding-right: 39px;
		border-right: 1px solid $border;
	}

	.right-sidebar .sidebar {
		padding-left: 39px;
		border-left: 1px solid $border;
		margin-left: -1px;
	}
}

// Boxed Layout.
.layout-boxed {
	.site {
		max-width: $grid+100;
		margin: 0 auto;
		box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.2);
	}
}


// Grid System.
.grid-row {
	margin-left: -20px;
	margin-right: -20px;
}
.grid-xs-1, .grid-sm-1, .grid-md-1, .grid-lg-1, .grid-xs-2, .grid-sm-2, .grid-md-2, .grid-lg-2, .grid-xs-3, .grid-sm-3, .grid-md-3, .grid-lg-3, .grid-xs-4, .grid-sm-4, .grid-md-4, .grid-lg-4, .grid-xs-5, .grid-sm-5, .grid-md-5, .grid-lg-5, .grid-xs-6, .grid-sm-6, .grid-md-6, .grid-lg-6, .grid-xs-7, .grid-sm-7, .grid-md-7, .grid-lg-7, .grid-xs-8, .grid-sm-8, .grid-md-8, .grid-lg-8, .grid-xs-9, .grid-sm-9, .grid-md-9, .grid-lg-9, .grid-xs-10, .grid-sm-10, .grid-md-10, .grid-lg-10, .grid-xs-11, .grid-sm-11, .grid-md-11, .grid-lg-11, .grid-xs-12, .grid-sm-12, .grid-md-12, .grid-lg-12 {
	position: relative;
	min-height: 1px;
	padding-left: 20px;
	padding-right: 20px;
}
@media (min-width: 768px) {
	.grid-sm-1, .grid-sm-2, .grid-sm-3, .grid-sm-4, .grid-sm-5, .grid-sm-6, .grid-sm-7, .grid-sm-8, .grid-sm-9, .grid-sm-10, .grid-sm-11, .grid-sm-12 {
	float: left;
	}
	.grid-sm-12 {
	width: 100%;
	}
	.grid-sm-11 {
	width: 91.66666667%;
	}
	.grid-sm-10 {
	width: 83.33333333%;
	}
	.grid-sm-9 {
	width: 75%;
	}
	.grid-sm-8 {
	width: 66.66666667%;
	}
	.grid-sm-7 {
	width: 58.33333333%;
	}
	.grid-sm-6 {
	width: 50%;
	}
	.grid-sm-5 {
	width: 41.66666667%;
	}
	.grid-sm-4 {
	width: 33.33333333%;
	}
	.grid-sm-3 {
	width: 25%;
	}
	.grid-sm-2 {
	width: 16.66666667%;
	}
	.grid-sm-1 {
	width: 8.33333333%;
	}
}
@media (min-width: 992px) {
	.grid-md-1, .grid-md-2, .grid-md-3, .grid-md-4, .grid-md-5, .grid-md-6, .grid-md-7, .grid-md-8, .grid-md-9, .grid-md-10, .grid-md-11, .grid-md-12 {
	float: left;
	}
	.grid-md-12 {
	width: 100%;
	}
	.grid-md-11 {
	width: 91.66666667%;
	}
	.grid-md-10 {
	width: 83.33333333%;
	}
	.grid-md-9 {
	width: 75%;
	}
	.grid-md-8 {
	width: 66.66666667%;
	}
	.grid-md-7 {
	width: 58.33333333%;
	}
	.grid-md-6 {
	width: 50%;
	}
	.grid-md-5 {
	width: 41.66666667%;
	}
	.grid-md-4 {
	width: 33.33333333%;
	}
	.grid-md-3 {
	width: 25%;
	}
	.grid-md-2 {
	width: 16.66666667%;
	}
	.grid-md-1 {
	width: 8.33333333%;
	}
}