body {
	background: $body-background;
	&.homepage {
		background: linear-gradient(to bottom, transparent 0%, white 20%), url('img/homepage-bg.png');
		background-repeat: repeat-x;
		background-position: left 180px;
	}
}

div#rub_service,
ul#evolutions .evolution-metadata,
ul#evolutions li div.msg {
	background: white;
}

ul#evolutions li span.item {
	box-shadow: 0 0 0px 5px white;
}

ul#evolutions {
	display: flex;
	flex-direction: column-reverse;
	li:last-child span.item {
		background: $primary-color !important;
	}
}

a {
	color: $primary-color;
}

div#nav {
	display: none;
}

div.cell hr {
	display: block;
	clear: both;
}

#toplinks {
	display: none;
}

div#header-wrapper {
	max-width: 100%;
	background: white;
	border-bottom: 5px solid $primary-color;
	box-shadow: 0px 0px 10px #888888;
	@media screen and ($max-mobile-viewport) {
		border-bottom: 3px solid $primary-color;
	}
	#logo {
		@media screen and ($max-mobile-viewport) {
			padding-left: 0;
		}
	}
	#logo a {
		box-sizing: content-box;
		display: block;
		padding-top: 40px;
		padding-bottom: 40px;
		text-indent: -10000px;
		color: #4D4D4D;
		font-size: 1.875rem;
		font-weight: normal;
		background: url(img/logo-sau.png) center center no-repeat;
		width: 277px;
		height: 66px;
		margin: 0 auto;
	}
}

div#main-content-wrapper {
	margin: 2ex auto;
	div#content {
		align-items: flex-start;
	}
	div#columns {
		padding: 1em;
		@media screen and ($max-mobile-viewport) {
			width: 100%;
		}
	}
	div#sidebar {
		position: sticky;
		top: 2em;
		padding: 1em 0;
		@media screen and ($max-mobile-viewport) {
			position: relative;
			padding: 0 1em;
			margin: 0;
			top: 0;
		}
	}
}

.linkcell div.links-list ul > li > a {
	&:hover {
		text-decoration: underline;
	}
	&::after {
		transition: none;
	}
}

div#footer a {
	color: inherit;
}

#content div.cell.whitebg {
	padding: 10px 0;
	background: white;
}

div.cell > div {
	margin: 0 auto;
	max-width: 1000px;
}

#content {
	#columns {
		div.cell {
			&.bandeau div {
				@media screen and ($max-mobile-viewport) {
					background: $cell-background;
					height: auto;
				}
			}
			&.textcell {
				> div:first-child {
					padding: 2em 2em 1em 2em;
				}
				&.hidden {
					display: none;
				}
				&.text-motif:target {
					display: block;
				}
				h2 {
					letter-spacing: 2px;
					font-weight: normal;
					font-size: 1.875rem;
				}
			}
			> div:first-child {
				padding: 1em 2em;
				h2:first-child {
					padding: 0;
					font-size: 200%;
					font-family: "Source Sans Pro", sans-serif;
					font-weight: normal;
				}
			}
			&.linkcell {
				&.lien-motif {
					> div {
						padding: 0 1em;
						ul > li > a {
							&:hover {
								color: #000000;
							}
							&::after {
								background: transparent;
								position: relative;
								content: '\f105'; /* angle-right */
								font-family: FontAwesome;
								margin-left: 0.75em;
								width: auto;
							}
						}
					}
				}
			}
		}
		#rub_service {
			margin: 0 auto;
			form {
				padding: 3ex;
			}
			div.dataview {
				padding: 1em;
			}
			div.back-home-button {
				display: none;
			}
			div.widget-readonly {
				input, select, textearea {
					color: #999999;
				}
			}
		}
		#rub_service, div.block, div.a2-block {
			&.has-sidebox {
				float: none;
			}
			.buttons {
				display: flex;
				justify-content: center;
				.widget {
					padding: 1em;
					flex: 1 1 1;
				}
			}
		}
		.form-content--sidebox {
			display: none;
		}
		form {
			&.quixote {
				text-align: left;
			}
			input, textarea, select, option {
				max-width: 100%;
				vertical-align: sub;
				outline: medium none;
			}
			textarea {
				width: 100%;
			}
			button {
				margin: 0.5em;
				&.previous {
					background-color: $widget-background;
				}
			}
			div.submit {
				display: flex;
			}
			div.SubmitWidget {
				&.submit-button {
					order: 1;
					button {
						background-color: $primary-color;
						color: #ffffff;
					}
				}
				&.previous-button {
					order: 0;
				}
				&.cancel-button {
					display: none;
				}
			}
		}
	}
	div.linkcell {
		&.retour {
			background: transparent;
			@media screen and ($max-mobile-viewport) {
				margin-bottom: 0;
				font-size: 0.2em;
			}
			ul > li > a {
				background: transparent url('img/retour.png') no-repeat;
				background-size: contain;
				padding-left: 6em;
				@media screen and ($max-mobile-viewport) {
					text-indent: -9999px;
				}
				&:hover {
					color: $link-color;
					&:after {
						width: 0;
						height: 0;
					}
				}
			}
		}
	}
	div.formulaire-choix-service {
		width: 25em;
		margin: 1ex auto;
		padding: 1em 0;
		@media screen and ($max-mobile-viewport) {
			width: 100%;
		}
		select {
			margin: 0 1em;
		}
	}
	.menucell, .link-list-cell {
		&.urgence ul {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-around;
			align-items: stretch;
			@media screen and ($max-mobile-viewport) {
				flex-direction: column;
			}
			li {
				@extend %homepage-block-color;
				flex-grow: 1;
				margin: 10px;
				padding: 1em 0 0 0;
				position: relative;
				font-size: 1.2em;
				> a {
					background-repeat: no-repeat;
					background-position: center 10px;
					background-size: auto 6.5em;
					padding-top: 10em;
					margin: 0 auto;
					text-align: center;
					display: block;
					@media screen and ($max-mobile-viewport) {
						background-size: auto 3em;
						padding-top: 4em;
					}
				}
				&:hover {
					@extend %homepage-block-hover;
					> a {
						@extend %homepage-block-hover;
					}
				}
				&.selected {
					@extend %homepage-block-hover;
					> div.page-description {
						display: block;
					}
					> a {
						@extend %homepage-block-hover;
						background-repeat: no-repeat;
					}
				}
				@each $category in (pass-perdu-ou-vole, pass-endommage, abonnement-expire, pass-non-recu, un-probleme, une-idee, une-aide) {
					&.menu-#{$category} {
						> a {
							background-image: url('img/#{$category}.png');
						}
						&.selected > a, &:hover > a {
							background-image: url('img/#{$category}-hover.png');
						}
					}
				}
				> div.page-description {
					@extend %homepage-block-hover;
					display: none;
					bottom: -4.5em;
					padding: 5px;
					font-size: 1.1rem;
				}
			}
		}
	}
	div.homepage-container {
		flex-grow: 1;
		* {
			background-color: transparent;
		}
		div.services {
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			> div {
				width: 350px;
				@media screen and ($max-mobile-viewport) {
					width: 100%;
				}
				a {
					display: block;
					width: 100%;
					border: 1px solid #000000;
					text-align: center;
					&:hover {
						border-color: $primary-color;
						color: $primary-color;
					}
				}
			}
			div.service-sau.has-asset-picture {
				a {
					background-repeat: no-repeat;
					background-size: 200px auto;
					background-position: center 10%;
					padding-top: 150px;
					position: relative;
					filter: grayscale(1);
					&:hover {
						filter: none;
						&::after {
							background-color: $primary-color;
						}
					}
					&::after {
						position: absolute;
						top: 145px;
						background-color: #000000;
						display: block;
						height: calc(100% - 145px);
					}
				}
			}

		}
	}
}
div.wcs-tracking-code-input {
	padding-bottom: 5px;
}

#footer a.metro {
	color: inherit;
	display: inline-block;
	padding-top: 2px;
	padding-left: 34px;
	background: url(img/footer-metropole-plus.png) no-repeat center left;
	min-height: 22px;
	float: right;
}