/** General layout. */

html {
	height: 100%;

	/* Patch for min width */
	min-width: var(--page_min-width);
	width: auto !important;
	width: var(--page_min-width);
}

body {
	position: relative;
	margin: 0;
	padding: 0;
	min-height: 100%;
}
body::after {
	content: '';
	display: block;
	height: var(--footer_height);	/* Height for fixed footer. */
}

.header-wrapper,
.content-wrapper,
.footer-wrapper,
header,
footer {
	margin: 0 auto;
	width: 100%;
}

.header-wrapper,
.content-wrapper,
/*.footer-wrapper,*/	/* NOTE: footer-wrapper must not have max-width defined, otherwise it won't stay centered on screens wider than established max-width. */
header,
footer {
	max-width: var(--page_max-width);
}

.header-wrapper {
	padding-top: var(--menu_height);	/* Space for menu. */
}

.content-wrapper {
	/* Defined to cover the header image on page scrolling.
	 * It has to stay like that until background image property position 'fixed' works for mobile devices. */
	background-color: #fff;
}

.footer-wrapper {
	position: absolute;
	bottom: 0;
}

footer {
	height: var(--footer_height);	/* Height for fixed footer. */
}

section {
	padding: 0;
	overflow: hidden;
	margin: var(--section_margin_tb) 0;
}

/* Workaround for covering the header image by the first and the last section.
 * It has to stay like that until background image property position 'fixed' works for mobile devices. */
section:first-child {
	margin-top: 0px;
	padding-top: var(--section_margin_tb);
}
section:last-child {
	margin-bottom: 0px;
	padding-bottom: var(--section_margin_tb);
}