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

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

	.desktop {
		display: none !important;
	}

	#projects {

		.leaflet-right, .leaflet-left {
			transition: none;
		}

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

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

			#title {
				display: none;
			}
		}

		&.with-feed #settings-button {
			display:none;
		}

		&.with-settings #feed-button {
			display:none;
		}
	
		.leaflet-control-container .leaflet-top.leaflet-left {
			display: none;
		}
		#feed, #settings {
			width: calc(#{$panel-width});
			max-width: calc(#{$panel-width});
			transition: none;
		}

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

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

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

	.lightbox.vertical .lb-dataContainer .lb-data .lb-details .lb-caption-line.comment {
		display: none;
	}
}

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