/**THE CLOCK STYLE**/
body{
  
font-family: Sniglet;
}
#face {
	stroke-width: 1px; stroke: #111; 
}

#hour, #min, #sec {
	stroke-width: 1px; fill: #333; stroke: #555;	
}

#sec { stroke: #f55; }

/** Controller settings **/


.ui-slider .ui-btn-inner {
    padding: 4px 0 0 0 !important;
}
 
.ui-slider-popup {
    position: absolute !important;
    width: 64px;
    height: 64px;
    text-align: center;
    font-size: 36px;
    padding-top: 14px;
    z-index: 100;
    opacity: 0.8;
}


.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  
  background: #4CAF50;
  cursor: pointer;
}

.bar {
	height:20px;
	background:#cccccc;
	color:#f4f4f4;
	text-align:center;
	width:100%;
}

.level {
	height:20px;
	background:#aae0aa;
    width:80%;
}

.eighty.start {
	width: 0px;
	background: #aae0aa;
	-webkit-animation: eighty 2s ease-out forwards;
	   -moz-animation: eighty 2s ease-out forwards;
	    -ms-animation: eighty 2s ease-out forwards;
	     -o-animation: eighty 2s ease-out forwards;
	        animation: eighty 2s ease-out forwards;
}