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

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

	.desktop {
		display: none !important;
	}

	#projects {
		#feed, #settings {
			width: calc(#{$panel-width});
			max-width: calc(#{$panel-width});
		}

		#feed {
			right: calc((#{$panel-width}) * -1);
		}

		#settings {
			left: calc((#{$panel-width}) * -1);
		}

		#title {
			width: calc(#{$panel-width} - #{$button-width} - 4 * #{$block-spacing});
			max-width: calc(#{$panel-width} - #{$button-width} - 4 * #{$block-spacing});
			text-align: center;
		}

		.leaflet-right, .leaflet-left {
			width: 100%;
		}

		&.with-feed, &.with-settings {
			#submap {
				width: 100%;
			}

			.leaflet-control-container .leaflet-top.leaflet-right {
				display: none;
			}

			#title {
				width: calc(#{$panel-width} - #{$button-width} - 4 * #{$block-spacing});
				max-width: calc(#{$panel-width} - #{$button-width} - 4 * #{$block-spacing});
			}
		}

		&.with-feed {
			.leaflet-right {
				right: calc(#{$panel-width});
			}
			.leaflet-left {
				left: calc((#{$panel-width}) * -1);
			}
		}

		&.with-settings {
			.leaflet-right {
				right: calc((#{$panel-width}) * -1);
			}
			.leaflet-left {
				left: calc(#{$panel-width});
			}
		}
	
		.leaflet-control-container .leaflet-top.leaflet-left {
			display: none;
		}
	}

	.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;
		}
	} 
}

@media only screen and (min-width: 801px) {
	.mobile {
		display: none !important;
	}
}