@media screen and (max-height: 760px) {

	#Navigation {
		position: fixed;
		bottom: 0px;
		left: 50%;
		margin-left: -700px;
		height: 110px;
		border-bottom: none;
		margin-bottom: 0px;
	}

		#Calendar {
			height: 90px;
			border-bottom: 1px #CCCCCC solid;
		}

	#Spacer {
		position: fixed;
		left: 50%;
		bottom: 110px;
		margin-left: -700px;
	}

	#sliderHolder {
		top: 0px;
		height: 90px;
	}

	.BauPhase {
		height: 10px;
	}

		.BauPhase:nth-child(even) { top: 10px;}
		.BauPhase:nth-child(odd) { top: 15px;}

	.ui-slider .ui-slider-handle {
		top: 0px !important;
		height: 90px !important;
		width: 54px !important;
		margin-left: -27px !important;
		background-image: url(../Gfx/Slider-klein.png);
		background-size: 100%;
		cursor: pointer !important;
		background-repeat: round;	
	}

	.Button {
		height: 90px;
		background-size: 20px auto;
	}
	
		.Button:hover {
			background-size: 23px auto;
		}

	#Calendar .Month .Title {
		bottom: 12px;
		font-size: 10px;
	}

	#Calendar .Year {
		height: 20px;
		line-height: 20px;
	}

	#Overview {
		bottom: 85px;
	}

	#TimeInfo {
		bottom: 85px;
		height: auto;
	}

}

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

	#Calendar .Year .Title {
		font-size: 10px;
	}
}

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

	#Calendar .Year {
		padding: 0px;
	}

		#Calendar .Year .Title {
			font-size: 1px;
			color: #FFF;
		}

			#Calendar .Year .Title .short {
				font-size: 10px;
				color: #e3051a;
			}

	#Overview {
		display: none;
	}

}

@media screen and (max-height: 760px) and (max-width: 1400px)  {

	#Navigation,
	#Spacer {
		margin-left: 0px;
		left: 0px;
	}
	
	
	
	#Navigation {
		position: fixed;
		left: 0px;
		bottom: 0px;
	}
	
	#Legend {
		position: fixed;
		bottom: 90px;
	}

	
}


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

	.mfp-container {
			left: 0px;
			top: 0px;
		}
}