.bottom {
	.controls {
		//visibility: hidden;
		opacity: 0.85;
		width: 96%;
		height: 150px;
		border-radius: 10px;
		position: absolute;
		bottom: 20px;
		left: 2%;
		//margin-left: -200px;
		background-color: black;
		box-shadow: 3px 3px 5px black;
		transition: 1s all;
		display: flex;
		font-size: 40px;
		.material-icons {
	  		color: #FFF;
			font-size: 40px;
		}
		button {
			border: none;
			background: none;
		}

		button:disabled,
		button[disabled] {
			.material-icons {
				color: rgb(46, 46, 46);
			}
		}
		
		.slidecontainer {
			line-height: 38px;
			font-size: 10px;
			font-family: monospace;
			text-shadow: 1px 1px 0px black;
			color: white;
			flex: 5;
			position: relative;
		}
		.slider {
			position: relative;
			-webkit-appearance: none;
			//width: calc(100% - 60px);
			width: 95%;
			height: 10px;
			top: 5px;
			border-radius: 5px;  
			background: #d3d3d3;
			outline: none;
			opacity: 0.7;
			-webkit-transition: .2s;
			transition: opacity .2s;
			flex: 5;
		}
		.slider::-webkit-slider-thumb {
			-webkit-appearance: none;
			appearance: none;
			width: 25px;
			height: 25px;
			border-radius: 50%; 
			background: #4CAF50;
			cursor: pointer;
		}
		
		.slider::-moz-range-thumb {
			width: 25px;
			height: 25px;
			border-radius: 50%;
			background: #4CAF50;
			cursor: pointer;
		}

		.timer-title {
			position: absolute;
		    left: 30px;
		    width: 100%;
		    font-size: 20px;
		    font-weight:bold;
		    bottom: 104px;
	    }
		.timer-lines {
			position: absolute;
		    left: 30px;
		    //width: calc(100%-60px);
		    font-size: 20px;
		    font-weight:bold;
		    bottom: 82px;
	    }
		.timer-text {
			position: absolute;
		    left: 30px;
		    width: 100%;
		    font-size: 20px;
		    font-weight:bold;
		    bottom: 40px;
	    }
	    .timer-control {
			position: absolute;
		    //top: 25px;
		    left: 0px;
		    width: 100%;
		    //line-height: 38px;
		    font-size: 30px;
		    font-weight:bold;
		    bottom: 0px;
	    }
		.label {
			//transform: translate(-12px,-12px);
			vertical-align: text-top;
			line-height: 18px;
			min-width: 50%;
			//display: block,
		}
	}
	/*
	:hover .controls, :focus .controls {
	  opacity: 1;
	}
	*/
	
	button:before {
	  font-family: HeydingsControlsRegular;
	  font-size: 30px;
	  position: relative;
	  color: #FFF;
	  //text-shadow: 1px 1px 0px black;
	}
	.timer {
		line-height: 38px;
		font-size: 30px;
		font-family: monospace;
		text-shadow: 1px 1px 0px black;
		color: white;
		flex: 5;
		position: relative;
	}
		
	.timer div {
		width:100%;
		line-height: 38px;
		font-size: 10px;
		font-family: monospace;
		text-shadow: 1px 1px 0px black;
		color: white;
		flex: 5;
		position: relative;
	}
		
	.timer span {
		position: absolute;
		z-index: 3;
		left: 19px;
	}
	
	
}