.overlay {
	position: fixed;
	display: none;
	right: 0;
	bottom: 0;
	top: 0;
	left: 0;
	z-index: -1;
	overflow: auto;

	background-color: $navigation-background--lighter;
	// Must be above transition so that overlay does not fade out
	// when site is loading.
	opacity: 0;
	@include transition(opacity, $transition-duration);

	&--open {
		z-index: 300;
		opacity: 1;
		display: block;
	}

	&__menu {
		display: none;

		@include min-screen($breakpoint-mobile) {
			display: block;
			position: fixed;
			right: 35px;
			top: 100px;
			z-index: 200;
		}

		.menu {
			list-style: none;

			&-item {
				padding: 5px 0;
				text-align: right;

				a {
					position: relative;
					//text-transform: uppercase;

					color: white;

					&:hover,
					&:active {
						@include transition(font-weight, $transition-duration);
						font-weight: 600;
					}
				}
			}
		}
	}

	&__container {
		position: relative;
		width: 80%;
		max-width: 600px;
		padding: $navigation-height 0 200px 0;
		margin: auto;
		color: white;

		@include min-screen($breakpoint-mobile) {
			width: 40%;
		}
	}

	h1 {
		margin-top: 1.3em;
	}

	&__paragraph {
		&--footnote {
			font-size: 0.8em;
		}
	}

	.adresses {
		@include flexbox();
		@include flex-direction(row);
		@include flex-wrap(wrap);
		@include justify-content(space-between);

		address {
			@include flex-basis(40%);
			margin-bottom: 5%;
		}
	}

	.image--fullwidth {
		display: block;
		width: 100%;
	}

	.guide {
		margin: 40px 0;
		font-weight: 600;

		button {
			//margin-left: 40px;
		}
	}

	// step images wrapper
	&__image-wrapper {

		background-color: #fff;

		&--step1 {
			padding: 20px 40px;

			@include min-screen($breakpoint-sm) {
				padding: 40px 80px;
			}
			@include min-screen($breakpoint-md) {
				padding: 60px 120px;
			}
			@include min-screen($breakpoint-mobile) {
				padding: 20px 40px;
			}
			@include min-screen($breakpoint-lg) {
				padding: 40px 80px;
			}
			@include min-screen($breakpoint-xl) {
				padding: 80px 140px;
			}
		}
		&--step2 {
			padding: 20px 40px;

			@include min-screen($breakpoint-sm) {
				padding: 40px 80px;
			}
			@include min-screen($breakpoint-md) {
				padding: 60px 120px;
			}
			@include min-screen($breakpoint-mobile) {
				padding: 20px 40px;
			}
			@include min-screen($breakpoint-lg) {
				padding: 40px 80px;
			}
			@include min-screen($breakpoint-xl) {
				padding: 80px 140px;
			}
		}
		&--step3 {
			padding: 20px 40px;

			@include min-screen($breakpoint-sm) {
				padding: 40px 80px;
			}
			@include min-screen($breakpoint-md) {
				padding: 60px 120px;
			}
			@include min-screen($breakpoint-mobile) {
				padding: 20px 40px;
			}
			@include min-screen($breakpoint-lg) {
				padding: 40px 80px;
			}
			@include min-screen($breakpoint-xl) {
				padding: 80px 140px;
			}
		}
	}
}