/**
 * layout.css
 *
 * Sections, major components and containing elements
 * Layouts specify widths and margins
 *
 * - Grid systems have their own stylesheet in layout
 * - Mostly use single class names
 * - No use of ID's
 * - No use of !important
 * - Prefix layout classes with l-
 *
**/

.l-site {
	box-shadow: 0 1px 6px 0 rgb(32 33 36 / 28%);
	margin: 0 auto;
	max-width: 1920px;
	overflow: hidden !important;
	padding: 5px 0;
	position: relative;
    width: 100%;
}

.l-container {
	padding: 0 10px;
}

.l-header {
	position: relative;
}

.l-content {
	position: relative;
}

.l-contentContainer {
	padding: 25px;
}

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

	.l-header {
		margin-bottom: 40px;
	}

	.l-flex {
		display: flex;
	}
}

@media screen and (min-width: 865px) {
	.l-container {
		padding: 5px 0;
		margin-bottom: 100px;
	}

	.l-header{
		margin-bottom: 40px;
	}

	.l-header.l-container,
	.l-footer .l-container,
	.l-content .breadcrumbs,
	.pageHeader,
	.entry {
		padding-left: 30px;
		padding-right: 30px;
	}

	.l-contentContainer {
		padding: 50px;
	}

}

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

	.l-container {
		max-width: 1920px;
		padding: 5px 0;
	}

	.l-container-rightFull {
		padding-right: 0;
	}

	.l-header.l-container,
	.l-footer .l-container,
	.l-content .breadcrumbs,
	.pageHeader,
	.entry {
		padding-left: 104px;
		padding-right: 104px;
	}

}