body#route_web_front {
	& > header {
		&:before {
			background-size: cover;
		}

		& section {
			& h1, & p {
				padding-left: 250px;

				@media (max-width: 600px) {
					& {
						padding-left: 0;
					}
				}

			}
		}
	}
}
body#route_web_features {
	& > header {
		&:before {
			background-image: url(../../image/web/header/features.jpg);
		}

		@media (min-width: 1025px) {
			& section {

				padding: var(--gap-rel-normal) 0;

				& p:last-of-type {
					margin-top: var(--gap-normal);
				}
			}
		}
	}
}

body#route_web_disciplines_show_jumping {
	& > header {
		&:before {
			background-image: url(../../image/web/header/show-jumping.jpg);
			background-position: center 100px;
		}

		& nav {
			& > ul > li {
				&:first-child a:after {
					content: '';
					background-image: url(../../image/web/icon/jumping.svg);
					border-left-color: var(--color-darkgray);
					filter: var(--color-filter-jumping);
				}
			}
		}

		& section em {
			background-color: rgba(22, 26, 42, .1);
			box-shadow: 0 0 10px rgba(22, 26, 42, .1);
			color: white;
		}

		& section {
			& h1 {
				& b {
					color: var(--color-jumping);
				}

				& .icon:after {
					filter: var(--color-filter-jumping);
				}

				&:after {
					color: var(--color-jumping);
				}
			}
		}
	}
}
body#route_web_disciplines_endurance {
	& > header {
		&:before {
			background-image: url(../../image/web/header/endurance.jpg);
			background-position: center 100px;
		}

		& nav {
			& > ul > li {
				&:first-child a:after {
					content: '';
					background-image: url(../../image/web/icon/endurance.svg);
					border-left-color: var(--color-darkgray);
					filter: var(--color-filter-endurance);
				}
			}
		}

		& section {
			& h1 {
				& b {
					color: var(--color-endurance);
				}

				& .icon:after {
					filter: var(--color-filter-endurance);
				}

				&:after {
					color: var(--color-endurance);
				}
			}
		}
	}
}

body#route_web_disciplines_horse_racing {
	& > header {
		&:before {
			background-image: url(../../image/web/header/racing.jpg);
			background-position: center 100px;
		}

		& nav {
			& > ul > li {
				&:first-child a:after {
					content: '';
					background-image: url(../../image/web/icon/racing.svg);
					border-left-color: var(--color-darkgray);
					filter: var(--color-filter-racing);
				}
			}
		}

		& section {
			& h1 {
				& b {
					color: var(--color-racing);
				}

				& .icon:after {
					filter: var(--color-filter-racing);
				}

				&:after {
					color: var(--color-racing);
				}
			}
		}
	}
}
body#route_web_disciplines_veterinary {


	& > header {

		&:before {
			background-image: url(../../image/web/header/ecg.jpg);
			background-position: center 200px;
		}

		& nav {
			& > ul > li {
				&:first-child a {

					background-image: url(../../image/web/icon/logo_heart_rate_light.svg);


					&:after {
						content: '';
						background-image: url(../../image/web/icon/logo_equimo_small.svg);
						border-left-color: var(--color-darkgray);
						/*filter: var(--color-filter-equimo);*/
					}
				}
			}
		}

		& section {
			& h1 {

				color: var(--color-heart);

				& b {
					color: var(--color-darkgray);
				}

				& .icon:after {
				}

				&:after {
					color: var(--color-darkgray);
				}
			}
		}
	}

	& main section.light {
		background-color: var(--color-white);

		&.array .icon {
			background-color: var(--color-white);
		}

		& .sep span {
			background-color: var(--color-white);
		}
	}


	& > footer {
		background-color: var(--color-light);
		color: var(--color-darkgray);

		& nav {
			& > ul > li {
				&:first-child a {
					background-image: url(../../image/web/icon/logo_equimo_dark.svg);
					display: block;
					position: relative;

					&:after {
						content: '';
						background: url(../../image/web/icon/logo_heart_rate_dark.svg) no-repeat center bottom/contain;
						width: 4em;
						height: 1em;
						position: absolute;
						left: 11rem;
						top: 1.2rem;
						font-size: 1.6rem;
						border-left: none;
						padding-left: .7rem;
						display: block;
					}
				}
			}
		}

		& a {
			color: var(--color-darkgray);
		}

		& a:hover {
			color: var(--color-darkgray);
		}

		&.legal {
			color: var(--color-white);
			background-color: var(--color-darkgray);

			& a {
				color: var(--color-white);
			}
		}

		& section.apps {
			& a {
				border-color: var(--color-darkgray);

				& span.icon.apple:after {
					filter: var(--color-filter-darkgray);
				}
			}
		}
	}
}
body#route_web_contacts {

	& > header {
		&:before {
			background-image: url(../../image/web/header/contacts.jpg);
			background-position: center 25%;
		}

		& section em {
			background-color: rgba(22, 26, 42, .1);
			box-shadow: 0 0 10px rgba(22, 26, 42, .1);
			color: white;
		}
	}

	& section.array .icon:after {
		display: none;
	}

	& > main {
		& section .multicol.contact {

			& > div {
				padding-top: var(--gap-large);

				& h3 {
					font-size: var(--font-size-xlarge);


				}

			}

			@media ( max-width: 1025px) {

				& {
					display: block;
				}

				& > div h3 {
					font-size: var(--font-size-large);
					word-wrap: break-word;
				}

			}
		}
	}
}
body#route_web_shop {
	& > header {
		&:before {
			background-image: url(../../image/web/header/shopping.jpg);
		}
	}
}

body#route_web_shop_plans {
	& > header {
		&:before {
			background-image: url(../../image/web/header/shopping-plans.jpg);
			background-position: center 100px;
		}
	}


	.comparison-table {
		width: 100%;
		margin-top: 2em;
		border-collapse: collapse;
		font-size: 0.9em;
		background-color: #2c3244;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
		border-radius: 8px;
		overflow: hidden;
	}

	.comparison-table th,
	.comparison-table td {
		padding: 9px 11px;
		text-align: left;
	}

	.comparison-table thead {
		background-color: #161a2a;
		color: #31c5f4;
	}

	.comparison-table thead th {
		text-align: center;
		font-weight: 600;
		font-size: 1.1em;
	}

	.comparison-table tbody th {
		font-weight: 500;
		padding-left: 15px;
	}

	.comparison-table td {
		text-align: center;
		font-size: 1.2em;
		font-weight: 600;
	}

	.comparison-table .section-header th {
		background-color: #161a2a;
		color: #31c5f4;
		font-weight: 600;
		text-align: left;
		padding-left: 15px;
		font-size: 1.1em;
	}

	.comparison-table td:first-child {
		text-align: left;
	}

	.check-mark {
		color: #10b981;
		font-weight: bold;
		font-size: 1.25rem;
	}

	.cross-mark {
		color: #ef4444;
		font-weight: bold;
		font-size: 1.25rem;
	}

	@media screen and (max-width: 768px) {
		.comparison-table {
			font-size: 0.7em;
		}

		.comparison-table thead th {
			font-size: 0.8em;
		}

		.comparison-table tbody th {
			font-size: 0.7em;
		}

		.comparison-table td {
			font-size: 0.9em;
		}

		.comparison-table .section-header th {
			font-size: 0.8em;
		}
	}
}

body#route_web_features_detail {
	& > header {
		&:before {
		}

		& section {
			min-height: 20vh;
			padding-bottom: var(--gap-small);
		}
	}

	&.subroute_balance-symmetry {
		& > header {
			&:before {
				background-image: url(../../image/web/header/narrow-balance.jpg);
				background-position: center 100px;
			}
		}
	}
}

body#route_error {
	& > header {
		&:before {
			background-image: url(../../image/web/header/contacts.jpg);
			background-position: center 25%;
		}

		& section em {
			background-color: rgba(22, 26, 42, .1);
			box-shadow: 0 0 10px rgba(22, 26, 42, .1);
			color: white;
		}

		& section {
			& h1 {
				& b {
					color: var(--color-warning);
				}

				&:after {
					color: var(--color-warning);
				}
			}
		}
	}

}