/* globale Styles */
html, body{
	font-family:'Arima';
	height:100%;
	margin:0;
	overflow-x:hidden;
}

	#main-container{
		height:100%;
		display:flex;
		flex-flow:column;
	}

		#control-elements{
			text-align:center;
		}
	
			#sortierverfahren{
				width:100%;
				border:solid #20b2aa;
				border-radius:5px;
				font-family:'Arima';
				text-align:center;
				line-height:100%;
			}

			#barSlider {
				width:100%;
				-webkit-appearance:none;
				background:#d3d3d3;
				outline:none;
				opacity:0.7;
				-webkit-transition:.2s;
				transition:opacity .2s;
			}

				#barSlider:hover {
					opacity:1;
				}
	  
				#barSlider::-webkit-slider-thumb {
					-webkit-appearance:none;
					appearance:none;
					background:#20b2aa;
				}
	  
				#barSlider::-moz-range-thumb {
					background:#04AA6D;
				}

			button{
				background:#20b2aa;
				opacity:0.5;
				border:none;
				border-radius:5px;
				font-family:'Arima';
				color:white;
			}
	  
		#barsContainer{
			background-color:#DDDDDD;
			flex-grow:1;
		}
	
		.bar{
			position:fixed;
			bottom:0;
			background:#20b2aa;
			border:solid #20b2aa 1px;
			transition:left .1s;
		}
	
	#footer{
		position:fixed;
		right:0;
		bottom:0;
		font-size:12px;
		text-align:left;
		z-index:5;
		background:white;
	}

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/* Styles für desktop */
@media only screen and (min-device-width:1001px){

	#control-elements{
		margin:20px;
	}
	
		#sortierverfahren{
			height:50px;
			font-size:40px;
		}

		#barSlider {
			height:25px;
	  	}
	  
			#barSlider::-webkit-slider-thumb {
				width:25px;
				height:25px;
				cursor:pointer;
			}
	  
			#barSlider::-moz-range-thumb {
				width:25px;
				height:25px;
				cursor:pointer;
			}

		button{
			width:50%;
			font-size:30px;
			cursor:pointer;
		}
}

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/* Styles für mobile */
@media only screen and (max-device-width:1000px){

	#control-elements{
		height:30vh;
		padding-top:10vh;
		margin:20px;
	}
	
		#sortierverfahren{
			height:90px;
			font-size:65px;
		}

		#barSlider {
			height:100px;
		}
	  
			#barSlider::-webkit-slider-thumb {
				width:100px;
				height:100px;
				cursor:pointer;
			}
			
			#barSlider::-moz-range-thumb {
				width:100px;
				height:100px;
			}
			
		button{
			width:50%;
			margin-top:20px;
			font-size:80px;
		}

		label{
			font-size:50px;
		}
}