@media only screen and (max-width: 800px) {

	$panel-width: "100vw - #{$button-width} - 2 * #{$block-spacing}";
	$panel-width-max: $panel-width;
	$panel-actual-width: $panel-width;

	.desktop {
		display: none !important;
	}

	#projects {
		.map-container {
			width: calc(#{$panel-width});
			max-width: calc(#{$panel-width});
		}

		#title {
			text-align: center;
		}

		&.with-feed, &.with-settings {
			#title {
				max-width: calc(100vw  - #{$block-spacing} - #{$panel-actual-width} - (#{$button-width} + #{$block-spacing} * 2) * 2);
			}

			#submap {
				transform: translateX(0);
			}
		}
	
		&.with-feed {
			.map-container-left {
				transform: translateX(-200vw);
			}
	
			.map-container-right {
				transform: translateX(calc(#{$button-width} + #{$block-spacing} * 2));
			}
		}
	
		&.with-settings {
			.map-container-left {
				transform: translateX(0);
			}

			.map-container-right {
				transform: translateX(200vw);
			}
		}
	}

	.lightbox .lb-outerContainer .lb-container .lb-nav {
		a.lb-prev, a.lb-next  {
			height: 100%;
			width: 100%;
		}

		a.lb-prev::before {
			left: 1em;
		}

		a.lb-next::before {
			right: 1em;
		}
	}

	#mobile {
		display: block;
	}
}