@charset "UTF-8";
/* CSS Document */

/* svg size control here */
.svg-container{
  width: 50%;
  margin: 0 auto;
  padding: 10px;
}


/* ===== SVG CLOCK STYLES === */

 .st0{ /* outer clock face */
   fill:#000;
   stroke:#231F20;
   stroke-width:11;
   stroke-miterlimit:10;
   fill-opacity: 0.4;
 }

 .st1{ /* inner clock face */
   fill:#FFF;
   stroke:#231F20;
   stroke-width:5;
   stroke-miterlimit:10;
   fill-opacity: 0.6;
 }

 .st2{
   fill:#231F20;
 }

 .st3{
   fill:none;
   stroke:#231F20;
   stroke-width:6;
   stroke-miterlimit:10;
 }

 .st4{
   fill:none;
   stroke:#231F20;
   stroke-width:9;
   stroke-miterlimit:10;
 }

 .st5{
   fill:none;
   stroke:#EE4036;
   stroke-width:2;
   stroke-miterlimit:10;
  }
 .st6{
   fill:#EE4036;
 }

 .st7{
   fill:#FFFFFF;
   stroke:#231F20;
   stroke-width:2;
   stroke-miterlimit:10;
   }

/* ==== for Javascript code ===*/


#hours_needle,
#minutes_needle,
#secs_needle{
	transform-origin: 190px 190px;
	transition: transform .5s ease-in-out;
	
}