$mobile-hamburger-menu-width: 70px;
$mobile-hamburger-menu-height: 50px;

body.has-header-background header {
	background: none;
}

div#main-content {
	min-height: 100px;
}

button::-moz-focus-inner {
	border: 0;
}

.site-header {
	z-index: 200;
	height: $header-height;
	background: white;
	h1 {
		display: none;
	}
	#toplinks {
		height: $header-height;
		right: auto;
		left: $nav-menu-side + 2px;
		border-radius: 0;
		text-transform: uppercase;
		border: 0;
		box-shadow: none;
		padding-left: 0.5em;
		width: $width - $nav-menu-side - $pwa-desktop-nav-width;
		a, span {
			color: $darkblue;
			display: inline-block;
			float: left;
			font-size: 0.812rem;
			font-weight: 500;
		}
		span {
			padding: 0 0.5rem;
		}
		a.hello {
			padding-left: 10px;
			max-width: 200px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			span {
				text-overflow: ellipsis;
				max-width: 100%;
				overflow: hidden;
			}
		}
		a.logout {
			background: url(img/CROIX.svg) center right no-repeat;
			padding-right: 30px;
		}
		a.home {
			overflow: hidden;
			background: #e8e8e8 url(img/HOME.svg) center center no-repeat;
			background-size: 26px;
			position: absolute;
			right: 0;
			top: 0;
			height: 100%;
			text-indent: -10000px;
			display: block;
			width: 42px;
			&:hover {
				background-color: $yellow;
			}
		}
		@media screen and ($max-mobile-viewport) {
			width: auto;
			height: $mobile-hamburger-menu-height;
			overflow: hidden;
			padding-top: 7px;
			left: $mobile-hamburger-menu-width;
			right: 0;
			text-align: left;
			a.hello {
				width: calc(100vw - #{50px + $mobile-hamburger-menu-width * 2});
				overflow: hidden;
				padding-left: 0;
				span {
					width: 50px;
					overflow: visible;
					text-overflow: normal;
					white-space: normal;
				}
				+ span {
					display: none;
				}
			}
			a.login,
			a.registration {
				display: block;
				float: none;
			}
			a.logout {
				padding-right: 0;
				position: absolute;
				top: 0;
				text-indent: -10000px;
				right: $mobile-hamburger-menu-width;
				width: 40px;
				height: $mobile-hamburger-menu-height;
				background-size: 30px;
				background-position: center center;
			}
			a.home {
				width: $mobile-hamburger-menu-width;
				height: $mobile-hamburger-menu-height;
			}
		}
		@media screen and ($min-desktop-viewport) and (max-width: $width) {
			width: calc(100vw - #{$nav-menu-side + $pwa-desktop-nav-width});
			a.logout {
				text-indent: -10000px;
			}
		}
	}
}

.site-nav {
	z-index: 250;
	pointer-events: none;
	button, ul {
		pointer-events: all;
	}
}

.gru-nav-wrapper {
	margin-top: -$header-height;
}

div.gru-nav {
	.gru-nav-button {
		border-radius: 0;
	}
}

div.gru-nav .gru-nav-button {
	top: 0;
	margin-left: 0;
	@media screen and ($max-mobile-viewport) {
		width: $mobile-hamburger-menu-width;
		height: $mobile-hamburger-menu-height;
		border: solid transparent;
		border-width: 2px 15px 6px;
	}
	+ ul {
		margin-bottom: 0;
		position: absolute;
		width: $width;
		border-top: 0;
		z-index: 1000;
	}
}

#pwa-navigation {
	ul li {
		a {
			padding-top: 35px;
			span {
				text-transform: uppercase;
				font-weight: bold;
				line-height: 110%;
				font-size: 0.812rem;
				font-weight: 500;
			}
		}
	}
}

@media screen and (min-width: $mobile-limit - 1px) {
	#pwa-navigation {
		display: block;
		max-width: $width;
		margin: auto;
		position: relative;
		height: auto;
		> div {
			width: $pwa-desktop-nav-width;
			background: $nav-mobile-bottom-bar-background;
			position: absolute;
			right: 0;
			top: #{0px - $header-height};
		}
		ul li {
			margin: 0;
			a {
				height: $header-height;
				padding-left: 15px;
				padding-right: 15px;
				background-image: none !important;
				background-position: 15px 50%;
				padding-top: 10px;
				span {
					font-size: 0.938rem;
				}
				span.badge {
					padding: 0;
					height: 20px;
					width: 20px;
					text-align: center;
					left: 30px;
				}
			}
		}
	}
	.has-pwa-navigation footer {
		margin-bottom: 0;
	}
}

#banner-wrapper {
	height: 150px;
	background: url(/assets/header:background) top center no-repeat;
	background-position: top -40px center;
	background-size: cover;
	@media screen and ($max-mobile-viewport) {
		height: 140px;
	}
	border-bottom: 5px solid $yellow;
	margin-bottom: 25px;
	@media screen and ($max-mobile-viewport) {
		border-bottom: 0;
		margin-bottom: 10px;
	}
	#banner {
		margin: 0 auto;
		height: 100%;
		max-width: $width;
		display: flex;
		.title {
			flex: 1;
			text-align: center;
			h1 {
				margin-top: 20px;
				a {
					text-indent: -10000px;
					padding-top: 0;
					height: 130px;
					display: inline-block;
					width: 522px;
					background: url(img/LOGO.svg) top center no-repeat;
					background-size: auto 110px;
				}
				@media screen and ($max-mobile-viewport) {
					margin-top: 10px;
					a {
						max-width: 100vw;
					}
				}
				@media screen and (max-width: 360px) {
					a {
						background-size: 95% auto;
					}
				}
			}
		}
		.topside {
			@media screen and ($max-mobile-viewport) {
				display: none;
			}
			flex: 1;
			max-width: 400px;
			background: $blue;
			position: relative;
			&::before {
				content: "";
				background: $blue;
				display: block;
				transform: skewX(-10deg);
				height: 350px;
				transform-origin: top left;
				width: 62px;
				position: absolute;
				z-index: 0;
			}
			&::after {
				content: "";
				background: $blue;
				display: block;
				height: 350px;
				top: 0;
				right: calc(0px - (100vw - #{$width}) / 2);
				width: calc((100vw - #{$width}) / 2);
				position: absolute;
				z-index: 0;
			}
			h2, span {
				display: block;
				padding-left: 60px;
				position: relative;
				z-index: 10;
				text-transform: uppercase;
				font-size: 1.25rem;
			}
			h2 {
				padding-top: 100px;
				color: $darkblue;
				font-weight: bold;
			}
			span {
				color: white;
			}

			#idea {
				position: relative;
				&::before {
					content: "";
					display: block;
					border: 15px solid $darkblue;
					border-color: $darkblue $darkblue transparent transparent;
					position: absolute;
					left: -30px;
				}
				float: right;
				margin-top: 20px;
				padding: 10px 20px;
				background: $darkblue;
				width: 300px;
				h3, p {
					font-size: 0.875rem;
					margin: 0;
					color: white;
					text-transform: uppercase;
					a {
						color: white;
					}
				}
				h3 {
					font-size: 1.125rem;
				}
			}
		}
	}
}

div.carrousel-content {
	margin: 0 auto;
	max-width: $width;
	div.carrousel-nav {
		left: auto;
		bottom: auto;
		top: 60px;
		right: 0px;
		width: 40px;
		label {
			display: block;
			margin-bottom: 10px;
			background: white;
		}
		@media screen and ($max-mobile-viewport) {
			top: auto;
			bottom: 10px;
			height: auto;
		}
	}

	@media screen and (max-width: 360px) {
		height: 200px;
	}

	input + div div.carrousel-item {
		padding-left: 0;
		background: $yellow url(img/right.png) right 100px top 50% no-repeat !important;
		@media screen and ($max-mobile-viewport) {
			background-position: right 60px bottom 20px !important;
		}
		@media screen and (max-width: 360px) {
			background-position: right 40px bottom 20px !important;
		}
	}
	input + div div.carrousel-item div.carrousel-item-content {
		margin-bottom: 0;
		@media screen and ($max-mobile-viewport) {
			vertical-align: top;
			font-size: 1rem;
		}
	}
	input + div div.carrousel-item div.carrousel-item-content > a {
		text-align: left;
		margin-left: 0;
		margin-right: 10rem;
		@media screen and ($max-mobile-viewport) {
			margin-right: 2rem;
			height: 150px;
		}
		strong, p {
			max-width: none;
			color: $darkblue;
		}
		strong {
			text-transform: uppercase;
			+ p {
				margin-top: 5px;
			}
		}
	}
	input + div div.carrousel-item::after {
		content: none;
	}
}


#content-top-wrapper {
	background: #ececec;
}

@mixin cover-width {
	&::after,
	&::before {
		content: "";
		display: block;
		width: calc((100vw - #{$width}) / 2);
		position: absolute;
		top: 0;
		bottom: 0;
	}
	&::before {
		left: calc(0px - (100vw - #{$width}) / 2);
	}
	&::after {
		right: calc(10px - (100vw - #{$width}) / 2);
	}
}

#footer-wrapper {
	padding-top: 0;
}

footer #idea {
	position: relative;
	@include cover-width;
	height: 140px;
	background: $darkblue;
	p {
		color: white;
		text-align: center;
		text-transform: uppercase;
		font-weight: bold;
		font-size: 0.812rem;
		margin: 0;
		a {
			display: block;
			padding-top: 40px;
			font-size: 1.375rem;
			letter-spacing: 1.5px;
			color: white;
		}
	}
	&::after,
	&::before {
		background: $darkblue;
	}
	@media screen and ($max-mobile-viewport) {
		height: 100px;
		p {
			font-weight: normal;
			a {
				font-weight: bold;
				padding-top: 10px;
				font-size: 1.125rem;
			}
		}
	}
	@media screen and (max-width: 360px) {
		height: 140px;
	}
}

footer {
	#financeurs {
		@media screen and ($max-mobile-viewport) {
			text-align: center;
			img {
				float: none !important;
				display: block;
				margin: 10px auto !important;
			}
		}
	}
}

.content-top {
	position: relative;
	width: $width;
	max-width: 100vw;
	margin: 0 auto;
	div#carrousel {
		@include cover-width;
		&::after,
		&::before {
			height: $carrousel-height;
			background: $yellow;
		}
		margin-bottom: 20px;
		@media screen and ($max-mobile-viewport) {
			margin-bottom: 0;
		}
	}
	div.cell.grid-1-2 {
		margin-left: 0;
		margin-right: 5px;
		width: ($width / 2) - 10px;
		padding-right: 0;
		+ div.cell {
			margin-left: 10px;
			width: ($width / 2) - 10px;
		}
		@media screen and ($min-desktop-viewport) and (max-width: $width) {
			width: calc(100vw / 2 - 10px);
			+ div.cell {
				width: calc(100vw / 2 - 10px);
			}
		}
	}

	a.big-image-link {
		border: 0;
		background-color: white;
		background-position: left 20px top 50%;
		@media screen and ($max-mobile-viewport) {
			background-position: left 5px top 50%;
			background-size: 160px auto;
		}
		&:hover {
			background-color: #e0e0e0;
		}
		margin-bottom: 0;
		div {
			padding-left: 300px;
			@media screen and ($max-mobile-viewport) {
				padding-left: 170px;
			}
			@media screen and ($min-desktop-viewport) and (max-width: $width) {
				padding-left: 250px;
			}
			display: table;
			strong {
				display: table-cell;
				vertical-align: middle;
				position: static;
				text-align: left;
				width: 200px;
				font-size: 1.625rem;
				line-height: 110%;
				font-weight: 500;
				top: 0px;
				height: 100%;
				@media screen and ($max-mobile-viewport) {
					width: auto;
					font-size: 1.125rem;
				}
			}
		}
	}
}

div.cell.trackingcodeinputcell {
	background: $green;
	padding: 0px 20px 30px 20px;
	color: white;
	h2:first-child {
		margin-bottom: 0;
		text-transform: uppercase;
		color: white;
		padding-left: 0;
	}
	p {
		margin-top: 0;
		font-size: 90%;
	}
	form {
		margin: 0;
		display: flex;
		input,
		input:focus {
			margin: 0;
			background: white;
			border: none;
		}
		button {
			flex: 0;
			background: $darkblue;
			color: $green;
			border: 0;
			margin-right: 0;
			padding-left: 10px;
			padding-right: 10px;
		}
	}
}

.content-top {
	div.cell.trackingcodeinputcell {
		padding: 30px 50px;
		height: 250px;
	}
}

#footer {
	div.menucell {
		a {
			color: #5a5a5a;
			text-decoration: underline;
		}
		&#carrousel {
			a {
				color: $darkblue;
				text-decoration: none;
			}
		}
	}
	div.textcell {
		h4 {
			font-weight: normal;
			text-transform: uppercase;
			padding-bottom: 10px;
			border-bottom: 1px solid #a9aaac;
			text-align: center;
		}
	}
}

div#page div#main-content-wrapper {
	padding-bottom: 50px;
	@media screen and ($max-mobile-viewport) {
		padding-bottom: 10px;
	}
}

footer {
	position: relative;
	z-index: 100;
}

div#title-section {
	position: relative;
	background: #ececec;
	@include cover-width;
	&::after,
	&::before {
		background: #ececec;
	}
	@media screen and ($max-mobile-viewport) {
		padding: 0 10px;
	}

	h1 {
		margin: 0;
		text-transform: uppercase;
		font-size: 3.125rem;
		line-height: 100%;
		letter-spacing: 1.5px;
		padding-top: 60px;
		padding-bottom: 60px;
		color: $darkblue;
		max-width: 700px;
		@media screen and ($max-mobile-viewport) {
			padding-top: 10px;
			padding-bottom: 10px;
			font-size: 1.25rem;
		}
	}

	div#service-propose-par {
		position: absolute;
		right: 10px;
		bottom: 60px;
		text-transform: uppercase;
		span {
			display: block;
			text-align: right;
			color: $darkblue;
			font-size: 0.812rem;
		}
		span.commune {
			font-weight: bold;
		}
		@media screen and ($max-mobile-viewport) {
			position: static;
			span {
				text-align: left;
			}
			padding-bottom: 20px;
		}
	}
}

div#gauche {
	position: relative;
	width: 350px;
	margin-top: 0;
	max-width: 100%;
}

div#gauche + div#rub_service {
	width: $width - 350px - 20px;
	@media screen and ($max-mobile-viewport) {
		width: 100%;
	}
	@media screen and ($min-desktop-viewport) and (max-width: $width) {
		width: calc(100vw - 350px - 20px);
	}
}


div#gauche div#tracking-code {
	background: $green;
	height: 32px;
	margin-top: -32px;
	margin-bottom: 0;
	position: relative;
	@media screen and ($max-mobile-viewport) {
		margin: 0;
		order: 0;
		margin-left: 10px;
		width: 200px;
		height: auto;
	}
	h3, a {
		background: transparent;
		display: inline-block;
		color: white;
		font-size: $font-size;
		border: none;
		text-transform: uppercase;
		padding: 3px 0;
		font-weight: bold;
	}
	h3 {
		font-weight: normal;
		padding-left: 10px;
		padding-right: 10px;
		&::after {
			content: none;
		}
	}
	form {
		position: absolute;
		margin: 0;
		padding: 0;
		top: 0;
		right: -250px;
		button {
			margin: 0;
			padding: 0;
			height: 32px;
			width: 250px;
		}
		@media screen and ($max-mobile-viewport) {
			position: static;
			button {
				width: 200px;
			}
		}
	}
}

// Steps
.wcs-steps {
	text-transform: uppercase;
	font-size: .89em;

	@media ($mq-max--wcs-steps-small-layout) {
		margin: -1px 10px;
	}
}
.wcs-step {
	margin-bottom: 0;
	border-radius: 0;

	&--label {
		font-size: 1em;
	}

	&--marker {
		font-weight: bold;
		> * {
			transform: none;
			font-size: 1em;
		}
		&-total {
			color: #fff;
			font-weight: bold;
			margin-right: .33em;
		}
		// Slash
		&::before {
			height: 1.2em;
			margin: .3em;
		}
		&::after {
			content: "-";
			align-self: center;
			order: 3;
			color: #fff;
		}
		@media ($mq-max--wcs-steps-small-layout) {
			height: auto;
			width: auto;
			color: $primary-color !important;
			padding-left: .33em;
		}
	}
}

form.quixote div.buttons {
	display: flex;
	@media screen and (max-width: $width) {
		flex-wrap: wrap;
	}
	div.savedraft-button {
		display: none;
	}
	div.widget {
		div.content,
		button {
			width: 100%;
			text-transform: uppercase;
			text-align: left;
			font-weight: bold;
			box-shadow: none;
		}
		button {
			padding: 1rem 1rem;
		}
		div.content {
			padding-right: 1rem;
		}
		@media screen and (max-width: $width) {
			margin-bottom: 0.75rem;
		}
	}
	div.previous-button {
		flex: 1;
		order: 0;
		@media screen and (max-width: 500px) {
			flex-basis: 50%;
		}
		@media screen and (max-width: 320px) {
			flex-basis: 100%;
		}
	}
	div.cancel-button {
		flex: 1;
		order: 1;
		button {
			background: #ececec;
			color: #adadad;
		}
		@media screen and (max-width: 500px) {
			flex-basis: 50%;
		}
		@media screen and (max-width: 320px) {
			flex-basis: 100%;
		}
	}
	div.submit-button {
		flex: 1;
		order: 2;
		button {
			background: $green url(img/right.png) right 10px top 50% no-repeat;
			background-size: auto 60%;
		}
		@media screen and (max-width: 500px) {
			flex-basis: 100%;
		}
	}
}

ul#evolutions,
div.gru-content #disclose-dataview,
div#receipt-intro {
	margin: 1em 10px;
}

div#rub_service div.dataview {
	margin-top: 1rem;
	font-size: 90%;
}

div.gru-content div#rub_service h3,
div#rub_service h3 {
	@extend %title;
	padding-left: 0;
	text-transform: uppercase;
}

div.datetimepicker {
	font-size: 1rem;
}

form.quixote {
	div.error {
		padding-left: 0;
		margin-left: 0;
		background-image: none;
		font-weight: normal;
		color: #e95f5c;
	}
	div.widget-with-error {
		input[type=text], input[type=email], textarea {
			border-color: #e95f5c;
		}
	}
}

div.textcell h1 {
	@extend %title;
	font-size: 2.5rem;
	padding-left: 0;
}

footer {
	.grid-footer-1-5 {
		width: calc(20% - 1rem);
		padding-right: 0;
		padding-left: 1rem;
		text-align: center;
		img {
			max-width: 90%;
		}
		@media screen and ($max-mobile-viewport) {
			width: 50%;
		}
		@media screen and (max-width: $very-small-limit) {
			width: 100%;
			padding-left: 0;
		}
	}
}

#sidebar {
	.textcell {
		h2 {
			margin-top: 0;
			padding-top: 0;
			padding-left: 0;
		}
	}
	.wcsformcell {
		a {
			color: $darkblue;
			text-transform: uppercase;
			display: block;
			border-bottom: 1px solid $yellow;
			padding-bottom: 10px;
			margin-bottom: 20px;
			font-weight: 500;
		}
	}
}

a.big-image-link {
	display: block;
	border: 10px solid #f4f4f4;
	background-color: #f4f4f4;
	background-repeat: no-repeat;
	background-position: bottom 100px left 50%;
	background-size: 230px auto;
	margin-bottom: 2rem;
	margin-bottom: 1rem;
	height: 250px;
	@media screen and ($max-mobile-viewport) {
		height: 150px;
		background-position: top center;
		background-size: auto 80px;
		margin-bottom: 5px;
	}
	@media screen and (max-width: 360px) {
		height: 170px;
	}
	padding-top: 0;
	overflow: hidden;
	transition: all ease 0.2s;
	&:hover {
		border-color: #e0e0e0;
		background-color: #e0e0e0;
	}
	div {
		height: 100%;
		position: relative;
		strong {
			text-transform: uppercase;
			position: absolute;
			width: 100%;
			top: 140px;
			text-align: center;
			color: $darkblue;
		}
		@media screen and ($max-mobile-viewport) {
			strong {
				top: 80px;
				font-size: 0.875rem;
			}
		}
		@media screen and (max-width: 600px) {
			strong {
				top: 80px;
				font-size: 0.75rem;
			}
		}

		p {
			display: none;
		}
	}
	@media screen and (max-width: 600px) {
		border-width: 10px 5px 5px 5px;
	}
	@media screen and (max-width: 360px) {
		border-width: 10px 2px 2px 2px;
	}
}

div.cell.large a.big-image-link {
	// signalement links on mobile, restore some desktop sizes
	@media screen and ($max-mobile-viewport) {
		background-size: 230px auto;
		border-width: 10px;
		div strong {
			top: 110px;
			font-size: 0.875rem;
		}
	}
}

body.wcs-page {
	#banner-wrapper {
		margin-bottom: 0;
		overflow: hidden;
		@media screen and ($max-mobile-viewport) {
			height: 55px;
		}
		#banner .title h1 {
			@media screen and ($max-mobile-viewport) {
				margin-top: 5px;
			}
			a {
				padding-top: 0;
				height: 130px;
				background-size: auto 110px;
				@media screen and ($max-mobile-viewport) {
					height: 55px;
					background-image: url(img/LOGO-no-baseline.svg);
					background-size: auto 45px;
				}
			}
		}
	}
	@media screen and ($max-mobile-viewport) {
		#columns {
			padding: 0;
		}
		form.quixote + br.quixoteform {
			display: none;
		}
	}
}

body.authentic-page {
	#page {
		background: #ececec;
		background: linear-gradient(to bottom, white 0%, white 50px, #ececec 50px, #ececec 100%);
	}
	#columns {
		margin-top: 0;
		@media screen and ($max-mobile-viewport) {
			div#login-page > div.block {
				margin: 0 0 1rem 0;
			}
		}
	}
	#sidebar {
		flex: 0 0 350px;
		max-width: 350px;
		width: 350px;
		margin-left: 0;
		div.cell {
			margin-left: 0;
		}
		@media screen and ($max-mobile-viewport) {
			margin: 0 0.7em;
			width: auto;
			max-width: auto;
		}
	}
	#banner-wrapper {
	}
	#fc-button {
		box-shadow: none;
		padding: 0;
		width: 250px;
	}
	div#fc-registration-user-info,
	div#fc-button-wrapper,
	div#fc-explanation-text {
		text-align: left;
	}
	div#account-management-fc div.fc {
		padding: 0 1rem;
		+ p {
			padding: 0 1rem 1rem 1rem;
		}
	}
	div#frontend-registration-fc {
		> div {
			padding: 0 1rem 1rem 1rem;
		}
	}
	div#frontend-registration-email {
		form {
			padding: 0 0 1rem 0;
		}
	}
	div.a2-block {
		padding-bottom: 1px;
	}
	@media screen and ($max-mobile-viewport) {
		div.a2-block {
			margin: 1rem auto;
		}
	}
}

#content div#login-page {
	div.block {
		h2 {
			margin-bottom: 0;
			padding-bottom: 0;
		}
		h2 + div {
			margin-top: 0;
			padding-top: 0;
		}
	}
}

div.errornotice {
	color: #e95f5c;
}

div#up {
	position: relative;
	top: -40px;

	p {
		text-align: center;
	}
	a {
		display: inline-block;
		background: url(img/FLECHE.svg) top left no-repeat;
		width: 75px;
		height: 75px;
		text-indent: -10000px;
		overflow: hidden;
	}
}

.page-template-homepage {
	div#main-content-wrapper {
		margin-top: 25px;
	}
	#banner-wrapper {
		border: 0;
		margin-bottom: 0;
	}
	@media screen and ($min-desktop-viewport) {
		#banner-wrapper {
			height: 350px;
			background-position: -250px 0px;
			#banner .title h1 {
				margin-top: 90px;
				a {
					padding-top: 100px;
					height: 164px;
					background-size: auto;
				}
			}
		}
	}
	@media screen and ($max-mobile-viewport) {
		#content-top-wrapper .content-top {
			display: flex;
			flex-direction: column;
			.cell {
				order: 1;
				&.trackingcodeinputcell {
					order: 0;
				}
				height: 150px;
			}
			.cell.grid-1-2 {
				margin: 1rem auto 0 auto;
				width: calc(100% - 2rem);
				padding: 0;
			}
			.cell.trackingcodeinputcell {
				height: auto;
				padding: 1rem;
				padding-bottom: 0;
				h2 {
					padding-top: 0;
					margin-top: 0;
				}
				form {
					margin: 0 -1rem; // cancel padding
					width: calc(100% + 2rem);
					input {
						flex: 1;
					}
				}
			}
			.cell.linkcell {
				margin: 1rem 0 1rem 0;
				width: 100%;
			}
		}
		#columns {
			padding-left: 1rem;
			.grid-1-3 {
				width: calc(50% - 1rem);
			}
		}
		#sidebar {
			display: none;
		}
		div#page div#main-content-wrapper {
			padding-bottom: 0;
		}
	}
}

form ul.errorlist {
	margin-top: 0;
	color: #e95f5c;
	background: $notification_error_color;
	padding: 1em;
}

@media screen and ($max-mobile-viewport) {
	body.anonymous-user, body.focus-in {
		#pwa-navigation {
			display: none;
		}
	}
	body.anonymous-user {
		&.has-pwa-navigation footer {
			margin-bottom: 0;
		}
	}
}
