body {
	background-color: var(--usc--color--primary);
}

/* Header */
.front-header {
	position: sticky;
	top: 0;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	padding-right: var(--usc--spacing--40);
	background: var(--usc--color--primary);
	z-index: 100;
}
.front-header h1 a {
	color: var(--usc--color--background);
	font-family: var(--usc--font-family--logo);
	font-weight: normal;
	text-decoration: none;
}
.front-header h1 a mark {
	background: var(--usc--color--background-2);
	color: var(--usc--color--secondary);
}
.front-header nav ul {
	list-style-type: none;
	display: flex;
	flex-flow: row nowrap;
	column-gap: var(--usc--spacing--10);
	margin: 0;
	padding: 0;
	/*
	border: 1px solid var(--usc--color--background-2);
	padding: 0 var(--usc--spacing--10);
	*/
}
.front-header nav a {
	display: block;
	padding: var(--usc--spacing--10) var(--usc--spacing--10);
	color: var(--usc--color--background-2);
	text-decoration: none;
}
.front-header nav a:hover {
	color: var(--usc--color--background);
}
/* --- Header */



/* Footer */
.front-footer {
	padding-left: var(--usc--spacing--40);
	padding-right: var(--usc--spacing--40);
	padding-top: var(--usc--spacing--10);
	padding-bottom: var(--usc--spacing--40);
	color: var(--usc--color--background-2);
	font-size: var(--usc--font-size--tiny);
}
/* --- Footer */


/* Content */
.front-content-pad {
	padding-top: var(--usc--spacing--30);
	padding-bottom: var(--usc--spacing--40);
	padding-left: var(--usc--spacing--40);
	padding-right: var(--usc--spacing--40);
}
.front-content.top {
	padding-top: 0;
}
/* --- Content */



/* Not found */
.front-not-found {
	background: var(--usc--color--background-2);
	padding: var(--usc--spacing--50);
}
.front-not-found > div {
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-start;
	column-gap: var(--usc--spacing--30);
	img {
		max-width: 100%;
		height: auto;
	}
	p {
		color: var(--usc--color--primary);
	}
}
@media screen and (max-width: 850px) {
	.front-not-found > div {
		flex-flow: column nowrap;
	}
}
@media screen and (max-width: 600px) {
	.front-not-found {
		padding: var(--usc--spacing--20);
	}
}
/* --- Not found */



/* Order */
.front-background {
	position: fixed;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	background: url('/images/trucks.jpg') bottom center no-repeat;
	background-size: cover;
	z-index: -1000;
}
.front-block-order {
	margin: 0 auto;
    box-shadow:
      0 1px 1px hsl(0deg 0% 0% / 0.075),
      0 2px 2px hsl(0deg 0% 0% / 0.075),
      0 4px 4px hsl(0deg 0% 0% / 0.075),
      0 8px 8px hsl(0deg 0% 0% / 0.075),
      0 16px 16px hsl(0deg 0% 0% / 0.075)
    ;
	border: 1px solid var(--usc--color--primary);
	border-radius: 6px;
	background: var(--usc--color--background);
	padding-top: var(--usc--spacing--30);
	padding-bottom: var(--usc--spacing--50);
	padding-left: var(--usc--spacing--40);
	padding-right: var(--usc--spacing--40);
	& > header {
		font-weight: bold;
	}
}
.front-order {
	display: flex;
	flex-flow: row nowrap;
	column-gap: var(--usc--spacing--30);
	row-gap: var(--usc--spacing--10);
	.contact,
	.order {
		flex: 1;
		display: flex;
		flex-flow: column nowrap;
		row-gap: var(--usc--spacing--10);
	}
	.entry {
		border: 2px solid var(--usc--color--background-2);
		border-radius: 4px;
		background: rgba(242, 242, 242, 0.8);
	}
	.entry label {
		display: block;
		padding: 2px 4px 0 4px;
	}
	.entry input {
		box-sizing: border-box;
		width: 100%;
		border: 0;
		background: rgba(242, 242, 242, 0.8);
		padding: 2px 4px 0 4px;
	}
	.entry:focus-within:has(input.error),
	.entry:focus-within {
		border: 2px solid var(--usc--color--primary);
	}
	.entry input.error {
		border: 0;
	}
	.entry:has(input.error) {
		border: 2px solid var(--usc--color--error);		
	}
}
.front-order input[type="submit"] {
	align-self: flex-end;
}
.front-block-order-confirm > p {
	color: var(--usc--color--primary);
}
/* --- Order */








/* Media rules */
@media screen and (max-width: 1150px) {
	.front-order {
		flex-flow: column nowrap;
	}
}
@media screen and (max-width: 1040px) {
	.front-header {
		position: initial;
		padding-right: 0;
		flex-flow: column nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		& nav ul {
			padding-left: var(--usc--spacing--10);
		}
	}
	.front-content-pad {
		padding-top: var(--usc--spacing--20);
		padding-bottom: var(--usc--spacing--40);
		padding-left: var(--usc--spacing--30);
		padding-right: var(--usc--spacing--30);
	}
	.front-footer {
		padding-left: var(--usc--spacing--30);
		padding-right: var(--usc--spacing--30);		
	}
}

@media screen and (max-width: 600px) {
	.front-header {
		& nav ul {
			flex-flow: column nowrap;
		}
	}
	.front-content-pad {
		padding: 0;
	}
	.front-footer {
		padding-top: var(--usc--spacing--30);
		padding-left: var(--usc--spacing--20);
		padding-right: var(--usc--spacing--20);
	}
	.front-block-order {
		margin: 0;
		border: initial;
		border-radius: initial;
		padding-left: var(--usc--spacing--20);
		padding-right: var(--usc--spacing--20);
		& .submit {
			margin-top: var(--usc--spacing--20);
		}
	}
}







/* Home */
.front-block-home {
	font-family: var(--usc--font-family--logo);
	font-weight: normal;
	& h1 {
		font-weight: normal;
	}
	.page {
		zoom: var(--usc--zoom);
		position: relative;
		min-height: 720px;
		& h1 {
			margin-top: 0;
			box-sizing: border-box;
		}
		& p {
			margin-top: 0;
			box-sizing: border-box;
		}
	}

	.page-1 {
		background: url('/images/home-page-1.png') top right no-repeat;
		.b1 {
			position: absolute;
			bottom: 466px;
			right: 24px;
			max-width: 400px;
			padding-left: 12px;
			color: #7E7E7E;
			font-size: 28pt;
			line-height: 1.1em;
		}
		.b2 {
			position: absolute;
			top: 580px;
			right: 32px;
			max-width: 400px;
			padding-left: 12px;
			color: #808080;
			font-size: 36pt;
			line-height: 1.2em;
		}
		.b2 span {
			color: #FFFFFF;
		}
	}

	.page-2 {
		background: url('/images/home-page-2-long.png') top left no-repeat;
		.b1 {
			position: absolute;
			top: 30px;
			left: 980px;
			width: 250px;
			color: #3B5268;
			font-size: 40pt;
			text-align: center;
		}
		.b2 {
			position: absolute;
			top: 430px;
			left: 45px;
			display: flex;
			flex-flow: column nowrap;
			row-gap: 32px;
			color: #E8ECF1;
			font-size: 40pt;
		}
		.b2 p {
			margin: 0;
		}
		.b3 {
			position: absolute;
			left: 440px;
			top: 424px;
			padding-right: 6px;
			color: #E8ECF1;
			font-size: 24pt;
			line-height: 1.8em;
		}
	}

	.page-3 {
		background: url('/images/home-page-3.png') top left no-repeat;
		& p {
			font-family: var(--usc--font-family--text);
		}
		.b1 {
			position: absolute;
			top: 38px;
			left: 64px;
			color: #ffffff;
			font-size: 36pt;
		}
		.b2 {
			position: relative;
			top: 120px;
			max-width: 540px;
			padding-left: 64px;
			padding-right: 12px;
			color: #ffffff;
			font-size: 18pt;
		}
	}

	.page-4 {
		background: url('/images/home-page-4.png') top left no-repeat;
		& p {
			font-family: var(--usc--font-family--text);
		}
		.b1 {
			position: absolute;
			top: 38px;
			left: 64px;
			color: #ffffff;
			font-size: 36pt;
		}
		.b2 {
			position: relative;
			top: 120px;
			max-width: 540px;
			padding-left: 64px;
			padding-right: 12px;
			color: #ffffff;
			font-size: 18pt;
		}
	}

	.page-5 {
		background: url('/images/home-page-5.png') top left no-repeat;
		& p {
			font-family: var(--usc--font-family--text);
		}
		.b1 {
			position: absolute;
			top: 38px;
			left: 64px;
			color: #ffffff;
			font-size: 36pt;
		}
		.b2 {
			position: relative;
			top: 120px;
			margin-top: 0;
			max-width: 540px;
			padding-left: 64px;
			padding-right: 12px;
			color: #ffffff;
			font-size: 18pt;
		}
		.b3 {
			position: relative;
			top: 120px;
			max-width: 540px;
			padding-left: 64px;
			padding-right: 12px;
			color: #ffffff;
			font-size: 18pt;
		}
	}

	.page-6 {
		background: url('/images/home-page-6.png') top left no-repeat #d7d9e3;
		.b1 {
			padding-top: 24px;
			padding-left: 24px;
			color: #3b5268;
			font-size: 36pt;
		}
		.b2 {
			padding-left: 24px;
			font-family: var(--usc--font-family--text);
			font-size: 20pt;
			font-weight: bold;
			text-transform: uppercase;
		}
		.b3 {
			padding-left: 24px;
			font-family: var(--usc--font-family--text);
			font-size: 18pt;
		}
		.b4 {
			margin-bottom: 12px;
			font-family: var(--usc--font-family--text);
			font-size: 18pt;
			text-align: center;
		}
		.b5 {
			display: flex;
			flex-flow: row wrap;
			& figure {
				margin: 0;
			}
			& img {
				width: 100%;
				max-width: 450px;
			}
			& figcaption {
				color: #3b5268;
				text-align: center;
			}
		}
	}

	.page-7 {
		background: url('/images/home-page-7.png') top left no-repeat #d7d9e3;
		.b1 {
			padding-top: 24px;
			padding-left: 24px;
			color: #3b5268;
			font-size: 36pt;
		}
		.b2 {
			padding-left: 24px;
			font-family: var(--usc--font-family--text);
			font-size: 20pt;
			font-weight: bold;
			text-transform: uppercase;
		}
		.b3 {
			padding-left: 24px;
			font-family: var(--usc--font-family--text);
			font-size: 18pt;
		}
		.b4 {
			margin-bottom: 6px;
			font-family: var(--usc--font-family--text);
			font-size: 18pt;
			text-align: center;			
		}
		.b5 {
			display: flex;
			flex-flow: row wrap;
			& figure {
				margin: 0;
			}
			& img {
				width: 100%;
				max-width: 450px;
			}
			& figcaption {
				color: #3b5268;
				text-align: center;
			}
		}
	}

	.page-8 {
		background: url('/images/home-page-8.png') top left no-repeat #d7d9e3;
		.b1 {
			padding-top: 24px;
			padding-left: 24px;
			color: #3b5268;
			font-size: 36pt;
		}
		.b2 {
			padding-left: 24px;
			font-family: var(--usc--font-family--text);
			font-size: 20pt;
			font-weight: bold;
			text-transform: uppercase;
		}
		.b3 {
			padding-left: 24px;
			font-family: var(--usc--font-family--text);
			font-size: 18pt;
		}
		.b4 {
			margin-bottom: 6px;
			font-family: var(--usc--font-family--text);
			font-size: 18pt;
			text-align: center;
			& mark {
				background: none;
				color: var(--usc--color--error);
				font-weight: bold;
			}	
		}
		.b5 {
			display: flex;
			flex-flow: row wrap;
			padding-bottom: 24px;
			& figure {
				margin: 0;
			}
			& img {
				width: 100%;
				max-width: 450px;
			}
			& figcaption {
				color: #3b5268;
				text-align: center;
			}
		}
	}

	.page-9 {
		background: url('/images/home-page-9.png') left top 3px no-repeat #555555;
		padding-top: 3px;
		font-family: var(--usc--font-family--text);
		& h1,
		& h2 {
			padding-left: 24px;
		}
		& p {
			padding-left: 24px;
		}
		.b1 {
			font-family: var(--usc--font-family--logo);
			color: #3b5268;
			font-size: 20pt;
		}
		.b2,
		.b4 {
			font-size: 16pt;
			font-weight: bold;
		}
		.b3,
		.b5,
		.b6,
		.b7 {
			max-width: 740px;
			font-size: 16pt;
		}
		.b8 {
			padding-top: 72px;
			padding-left: 48px;
			color: #ffffff;
			font-family: var(--usc--font-family--logo);
			font-size: 72pt;
		}
		.b9 {
			position: absolute;
			top: 24px;
			left: 810px;
		}
		.b10 {
			padding-top: 36px;
			margin-bottom: 24px;
			padding-left: 72px;
			color: #ffffff;
			font-family: var(--usc--font-family--logo);
			font-size: 20pt;
			font-weight: normal;
		}
		.b11 {
			table-layout: fixed;
			border-collapse: collapse;
			color: #ffffff;
			& td {
				border: 2px solid var(--usc--color--background-2);
				min-width: 68px;
				padding-left: 4px;
				padding-right: 6px;
				font-size: 14pt;
			}
		}
	}
	.page-10 {
		background: url('/images/home-page-10.png') left top no-repeat;
		.b1 {
			position: absolute;
			color: #ffffff;
			font-size: 66pt;
			top: 310px;
			left: 80px;
		}
		.b2 {
			padding-top: 120px;
			padding-left: 910px;
			min-width: 344px;
			display: flex;
			flex-flow: column nowrap;
			row-gap: 13px;
			& p {
				margin-bottom: 0;
				color: #ffffff;
				font-family: tahoma, sans-serif;
				font-size: 15pt;
			}
		}
		.b3 {
			color: #ffffff;
			font-size: 32pt;
			font-weight: normal;
		}
		.b4 {
			text-transform: uppercase;
		}
		.b7 {
			text-transform: uppercase;
		}
	}

	.page-11 {
		background: url('/images/home-page-11.png') left top no-repeat;
		& h1 {
			color: #ffffff;
			font-size: 18pt;
			font-weight: normal;
		}
		.l1 {
			padding-left: 50px;
			padding-right: 50px;
			display: flex;
			flex-flow: column nowrap;
			justify-content: space-between;
		}
		.b1 {
			position: absolute;
			left: 516px;
			top: 392px;
			font-size: 72pt;
		}
		.b2 {
			position: absolute;
			top: 50px;
			left: 60px;
		}
		.b3 {
			position: absolute;
			top: 50px;
			right: 60px;
		}
		.b4 {
			position: absolute;
			bottom: 50px;
			left: 60px;
		}
		.b5 {
			position: absolute;
			bottom: 50px;
			right: 60px;
		}
	}
}
@media screen and (max-width: 1280px) {
	.front-block-home {
		.page {
			zoom: initial;
		}
		.page-10 {
			background-position-x: calc(100vw - 1280px);			
			.b1 {
				display: none;
			}
			.b2 {
				padding-left: calc(100vw - 370px);
			}
		}
		.page-11 {
			zoom: var(--usc--zoom);
		}
	}
}
@media screen and (max-width: 1250px) {
	.front-block-home {
		.page-2 {
			.b1 {
				display: none;
			}
			.b3 {
				line-height: 1.4em;
			}
		}
		.page-9 {
			border-top: 3px solid #555555;
			background: #d7d9e3;
			.b3,
			.b5,
			.b6,
			.b7 {
				max-width: initial;
				padding-right: 24px;
			}
			.b8 {
				display: none;
			}
			.b9 {
				position: initial;
				background: url('/images/home-page-9-background-small.png') left top repeat;
				padding-bottom: 48px;
				padding-left: 24px;
			}
			.b10 {
			}
		}
	}
}
@media screen and (max-width: 1100px) {
	.front-block-home {
		.page-2 {
			.b3 {
				font-size: 20pt;
			}
		}
	}	
}
@media screen and (max-width: 950px) {
	.front-block-home {
		.page-2 {
			min-height: 1020px;
			background-position-x: calc(100vw - 950px);
			.b3 {
				top: 720px;
				left: 32px;
				font-size: 20pt;
			}
		}
	}
}
@media screen and (max-width: 640px) {
	.front-block-home {
		.page-11 {
			zoom: initial;
			min-height: 360px;
			background-size: 640px 360px;
			background-position-x: calc((100vw - 640px) / 2);
			.b1 {
				position: initial;
				padding-top: 240px;
				padding-left: 12px;
				font-size: 16pt;
			}
			.b2 {
				position: initial;
				padding-left: 12px;
			}
			.b3 {
				position: initial;
				padding-left: 12px;
			}
			.b4 {
				position: initial;
				display: none;
			}
			.b5 {
				position: initial;
				display: none;
			}
		}
	}
}
@media screen and (max-width: 600px) {
	.front-block-home {
		.page-3 {
			background-position-x: -50px;
			.b1 {
				top: 50px;
				left: 12px;
				font-size: 24pt;
			}
			.b2 {
				padding-left: 12px;
				font-size: 16pt;
			}
		}
		.page-4 {
			background-position-x: -50px;
			.b1 {
				top: 50px;
				left: 12px;
				font-size: 24pt;
			}
			.b2 {
				padding-left: 12px;
				font-size: 16pt;
			}
		}
		.page-5 {
			background-position-x: -50px;
			.b1 {
				top: 50px;
				left: 12px;
				font-size: 24pt;
			}
			.b2,
			.b3 {
				padding-left: 12px;
				font-size: 16pt;
			}
		}
		.page-6 {
			.b1,
			.b2,
			.b3 {
				padding-left: 12px;
			}
		}
		.page-7 {
			.b1,
			.b2,
			.b3 {
				padding-left: 12px;
			}
		}
		.page-8 {
			.b1,
			.b2,
			.b3 {
				padding-left: 12px;
			}
		}
		.page-9 {
			.b1,
			.b2,
			.b3,
			.b4,
			.b5,
			.b6,
			.b7 {
				padding-left: 12px;
				padding-right: 12px;
			}
			.b9 {
				padding-left: 12px;
				padding-right: 12px;
			}
		}
	}
}
@media screen and (max-width: 455px) {
	.front-block-home {
		.page-2 {
			.b2 {
				left: 12px;
				font-size: 33pt;
			}
			.b3 {
				top: 680px;
				left: 12px;
				font-size: 18pt;
			}
		}
		.page-9 {
			.b10 {
				padding-left: 4px;
			}
			.b11 td {
				min-width: initial;
				font-size: 12pt;
			}
		}
	}
}
@media screen and (max-width: 410px) {
	.front-block-home {
		.page-2 {
			background-position-x: -540px;
		}
		.page-10 {
			.b2 {
				min-width: initial;
				padding-left: 12px;
			}
		}
	}	
}
/* --- Home */