/** stil 1 **/
.bls-clock-bad1 {width:100%;height:100%;background:#333;}
.clock1 {text-align: center;position: absolute;top: 50%; left: 50%;width: 12rem; height: 12rem;margin: -6rem 0 0 -6.2rem;border-radius: 50%;border: 0.2rem solid white;background-color: rgba(0, 0, 0, 0);}
.hand1 {position: absolute;background-color: white;
  -webkit-transition: -webkit-transform 0.5s ease;
  -moz-transition: -moz-transform 0.5s ease;
  -ms-transition: -ms-transform 0.5s ease;
  -o-transition: -o-transform 0.5s ease;
  transition: transform 0.5s ease;
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}

.hour1 {height: 20%; top: 30%;left: 50%; width: 3px; margin-left: -1.5px;}
.minute1 {height: 30%; top: 20%;left: 50%; width: 2px; margin-left: -1px;}
.second1 {height: 45%; top: 5%;left: 50%; width: 1px; margin-left: -0.5px;}

/** stil 2 **/


.wrap :before, .wrap :after {
  content: '';
  display: block;
  position: absolute;
  box-sizing: border-box;
}



/* Clock */
.wrap {
  position: absolute;
  top: 58%;
  left: 50%;
  width: 193px;
  height: 193px;
  margin-top: -96.5px;
  margin-left: -96.5px;
}

.clock {
  position: relative;
  width: 193px;
  height: 193px;
  border-radius: 50%;
  background: #eee;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 3px 0 rgba(0, 0, 0, 0.2);
}

.clock:before {
  width: 70px;
  height: 70px;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  background: linear-gradient(to bottom, #dddddd 0%, white 100%);
  opacity: .5;
}

.clockwise .center {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(to bottom, white 0%, #bbbbbb 100%);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);
}

.clockwise .center {
  left: 50%;
  margin-left: -5px;
  top: 50%;
  margin-top: -5px;
  z-index: 5;
}

.support {
  position: absolute;
  top: -40px;
  left: 50%;
  z-index: 0;
  width: 10px;
  height: 10px;
  margin-left: -5px;
}

.support .knob {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(to bottom, white 0%, #bbbbbb 100%);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);
}

.support:before,
.support:after {
  width: 3px;
  height: 100px;
  transform: rotate(38deg);
  transform-origin: 50% 0%;
  top: 4px;
  left: 5px;
  background: #fff;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2), inset 1px 0 4px rgba(0, 0, 0, 0.2);
}

.support:after {
  transform: rotate(-38deg);
  left: 1px;
  box-shadow: -3px 3px 3px rgba(0, 0, 0, 0.2), inset 1px 0 4px rgba(0, 0, 0, 0.2);
}

[class*="hand-"] {
  border-radius: 100% 100% 5px 5px;
  left: 50%;
  position: absolute;
  top: 50%;
  z-index: 4;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.hand-second {
  width: 2px;
  top: 18px;
  height: 78px;
  background: #5ae;
  transform-origin: 50% 100%;
}

.hand-minute {
  width: 6px;
  top: 26px;
  margin-left: -3px;
  height: 88px;
  background: #666;
  transform-origin: 50% 80%;
}

.hand-hour {
  width: 6px;
  top: 56px;
  transform-origin: 50% 40px;
  margin-left: -3px;
  height: 50px;
  background: #666;
}

/*  Dots*/
.ortakisim .s {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 90px;
  margin-top: -90px;
  transform-origin: bottom;
}

.ortakisim .s:before {
  top: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #888;
}

.ortakisim .s:nth-child(1) {
  transform: rotate(6deg);
}

.ortakisim .s:nth-child(5):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(2) {
  transform: rotate(12deg);
}

.ortakisim .s:nth-child(10):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(3) {
  transform: rotate(18deg);
}

.ortakisim .s:nth-child(15):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(4) {
  transform: rotate(24deg);
}

.ortakisim .s:nth-child(20):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(5) {
  transform: rotate(30deg);
}

.ortakisim .s:nth-child(25):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(6) {
  transform: rotate(36deg);
}

.ortakisim .s:nth-child(30):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(7) {
  transform: rotate(42deg);
}

.ortakisim .s:nth-child(35):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(8) {
  transform: rotate(48deg);
}

.ortakisim .s:nth-child(40):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(9) {
  transform: rotate(54deg);
}

.ortakisim .s:nth-child(45):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(10) {
  transform: rotate(60deg);
}

.ortakisim .s:nth-child(50):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(11) {
  transform: rotate(66deg);
}

.ortakisim .s:nth-child(55):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(12) {
  transform: rotate(72deg);
}

.ortakisim .s:nth-child(60):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(13) {
  transform: rotate(78deg);
}

.ortakisim .s:nth-child(65):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(14) {
  transform: rotate(84deg);
}

.ortakisim .s:nth-child(70):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(15) {
  transform: rotate(90deg);
}

.ortakisim .s:nth-child(75):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(16) {
  transform: rotate(96deg);
}

.ortakisim .s:nth-child(80):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(17) {
  transform: rotate(102deg);
}

.ortakisim .s:nth-child(85):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(18) {
  transform: rotate(108deg);
}

.ortakisim .s:nth-child(90):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(19) {
  transform: rotate(114deg);
}

.ortakisim .s:nth-child(95):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(20) {
  transform: rotate(120deg);
}

.ortakisim .s:nth-child(100):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(21) {
  transform: rotate(126deg);
}

.ortakisim .s:nth-child(105):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(22) {
  transform: rotate(132deg);
}

.ortakisim .s:nth-child(110):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(23) {
  transform: rotate(138deg);
}

.ortakisim .s:nth-child(115):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(24) {
  transform: rotate(144deg);
}

.ortakisim .s:nth-child(120):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(25) {
  transform: rotate(150deg);
}

.ortakisim .s:nth-child(125):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(26) {
  transform: rotate(156deg);
}

.ortakisim .s:nth-child(130):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(27) {
  transform: rotate(162deg);
}

.ortakisim .s:nth-child(135):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(28) {
  transform: rotate(168deg);
}

.ortakisim .s:nth-child(140):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(29) {
  transform: rotate(174deg);
}

.ortakisim .s:nth-child(145):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(30) {
  transform: rotate(180deg);
}

.ortakisim .s:nth-child(150):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(31) {
  transform: rotate(186deg);
}

.ortakisim .s:nth-child(155):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(32) {
  transform: rotate(192deg);
}

.ortakisim .s:nth-child(160):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(33) {
  transform: rotate(198deg);
}

.ortakisim .s:nth-child(165):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(34) {
  transform: rotate(204deg);
}

.ortakisim .s:nth-child(170):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(35) {
  transform: rotate(210deg);
}

.ortakisim .s:nth-child(175):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(36) {
  transform: rotate(216deg);
}

.ortakisim .s:nth-child(180):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(37) {
  transform: rotate(222deg);
}

.ortakisim .s:nth-child(185):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(38) {
  transform: rotate(228deg);
}

.ortakisim .s:nth-child(190):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(39) {
  transform: rotate(234deg);
}

.ortakisim .s:nth-child(195):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(40) {
  transform: rotate(240deg);
}

.ortakisim .s:nth-child(200):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(41) {
  transform: rotate(246deg);
}

.ortakisim .s:nth-child(205):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(42) {
  transform: rotate(252deg);
}

.ortakisim .s:nth-child(210):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(43) {
  transform: rotate(258deg);
}

.ortakisim .s:nth-child(215):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(44) {
  transform: rotate(264deg);
}

.ortakisim .s:nth-child(220):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(45) {
  transform: rotate(270deg);
}

.ortakisim .s:nth-child(225):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(46) {
  transform: rotate(276deg);
}

.ortakisim .s:nth-child(230):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(47) {
  transform: rotate(282deg);
}

.ortakisim .s:nth-child(235):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(48) {
  transform: rotate(288deg);
}

.ortakisim .s:nth-child(240):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(49) {
  transform: rotate(294deg);
}

.ortakisim .s:nth-child(245):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(50) {
  transform: rotate(300deg);
}

.ortakisim .s:nth-child(250):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(51) {
  transform: rotate(306deg);
}

.ortakisim .s:nth-child(255):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(52) {
  transform: rotate(312deg);
}

.ortakisim .s:nth-child(260):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(53) {
  transform: rotate(318deg);
}

.ortakisim .s:nth-child(265):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(54) {
  transform: rotate(324deg);
}

.ortakisim .s:nth-child(270):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(55) {
  transform: rotate(330deg);
}

.ortakisim .s:nth-child(275):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(56) {
  transform: rotate(336deg);
}

.ortakisim .s:nth-child(280):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(57) {
  transform: rotate(342deg);
}

.ortakisim .s:nth-child(285):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(58) {
  transform: rotate(348deg);
}

.ortakisim .s:nth-child(290):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(59) {
  transform: rotate(354deg);
}

.ortakisim .s:nth-child(295):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}

.ortakisim .s:nth-child(60) {
  transform: rotate(360deg);
}

.ortakisim .s:nth-child(300):before {
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -1px;
}