// main content wrapper variant
$custom-header-height: 10em;
$custom-mobile-header-height: 5em;
$margin-center: 0 auto;

.template-neutre {
	#page {
		display: block;
		font-weight: 400;
		font-size: 1.5rem;
		line-height: 1.4;
		margin-top: $custom-header-height;

		@media screen and ($max-mobile-viewport) {
			margin-top: $custom-mobile-header-height;
		}

		.site-header {
			background-color: white;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 2;
		}

		#header-wrapper {

			@media screen and ($max-mobile-viewport) {
				min-height: $custom-mobile-header-height;
			}

			#header {
				#top {
					display: flex;
					align-items: center;
					justify-content: center;
					margin: $margin-center;
					width: 100%;
					min-height: $custom-header-height;
					max-width: $width;

					> .cell {
						flex: 1 1 100%;

						&.top-logo {
							flex-basis: auto;
						}
					}
				}
			}
			#toplinks {
				display: none;
			}
		}

		nav {
			display: flex;

			.user-nav {
				margin: $margin-center;
			}

			div#nav {
				margin: $margin-center;
				height: auto;

				ul {
					margin: 0;

					> li a {
						line-height: 2.7em;
					}

					> li:hover > ul {
						background: $cell-background;
					}
					@media screen and ($max-mobile-viewport) {
						height: 60px;

						> li a {
							line-height: 1em;
						}
					}
				}
			}
		}

		#nav-skip {
			display: none;
		}

		footer {
			padding-top: 20px;
			padding-bottom: 20px;
			color: $footer-color;
			background: $footer-background;

			a {
				color: $footer-color;
			}

			#footer-wrapper {
				margin: $margin-center;

				#footer {
					a {
						color: white;
					}
				}
			}
		}
	}
}