/* html, body {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 16%, #219eb0 32%, #3f679d 88%);
  }
   */
/*   .wrapper {
    position: relative;
    width: 100%;
    height: 100%;
  } */

.container {
        width: 230px;
        height: 255px;
        margin: auto;
        position: absolute;
        top: -150px;
        bottom: 0;
        left: 0;
        right: 0;
        /*   background: linear-gradient(to bottom, #0c3d69 16%, #116c97 95%); */
        box-shadow: 0 4px 36px 0 rgba(0, 0, 0, 0.5);
        border-radius: 48px;
        overflow: hidden;
}

.icons {
        position: absolute;
        width: 25px;
        height: 25px;
        text-align: center;
        cursor: pointer;
        top: 4px;
        left: 13px;
}

.icons .stop-watch {
        display: block;
        width: 24px;
        height: 24px;
        position: absolute;
        left: 200px;
        right: 0;
        top: 610%;
        margin: -10px auto 0;
        /* border: 2px solid #f8f8f8; */
        border-radius: 24px;
}

.icons .stop-watch::before {
        content: "";
        display: block;
        width: -10px;
        height: 2px;
        /*   background: #f8f8f8; */
        position: absolute;
        top: -6px;
        right: 0;
        left: 0;
        margin: 0 auto;
        -webkit-transform: top 0.2s;
        transform: top 0.2s;
}

.icons .stop-watch::after {
        /* content: ""; */
        display: block;
        width: 7px;
        height: 1px;
        background: red;
        position: absolute;
        top: -3px;
        right: -3px;
        /*   -webkit-transform: rotate(45deg);
            transform: rotate(45deg); */
}

.icons .stop-watch.sw-click::before {
        top: -3px;
}

.icons .stop-watch .sw-parts {
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 4px;
        height: 4px;
        border-radius: 4px;
        background: yellowgreen;
}

.icons .stop-watch .sw-parts .sw-parts2 {
        display: block;
        width: 2px;
        height: 9px;
        background: #f8f8f8;
        position: absolute;
        top: 2px;
        left: 1px;
}

.icons .stop-watch .sw-parts #icn-clock-line {
        -webkit-transform-origin: 50% 0;
        transform-origin: 50% 0;
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        transition: -webkit-transform 0.5s;
        transition: transform 0.5s;
        transition: transform 0.5s, -webkit-transform 0.5s;
}

.icons .label {
        color: #FFF;
        text-align: center;
        position: absolute;
        bottom: -1rem;
        left: 80px;
        right: 0;
        margin: auto;
        font-size: 0.75rem;
        font-family: 'Share Tech Mono', sans-serif;
}

.clock p {
        position: absolute;
        color: #FFF;
        text-align: center;
        top: 130px;
        left: 15px;
        right: 0;
        margin: 0 auto;
        font-family: 'Share Tech Mono', sans-serif;
        font-size: 2rem;
        font-weight: 50;
}

.clockline li {
        width: 1px;
        height: 20px;
        border-radius: 2px;
        background: #f8f8f8;
        position: absolute;
        left: 115px;
        top: 130px;
}

.clockline li:nth-child(1) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(111.77899px, 7.03254px) rotate(453.6deg);
        transform: translate(111.77899px, 7.03254px) rotate(453.6deg);
}

.clockline li:nth-child(2) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(111.11685px, 14.03732px) rotate(457.2deg);
        transform: translate(111.11685px, 14.03732px) rotate(457.2deg);
}

.clockline li:nth-child(3) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(110.01617px, 20.98671px) rotate(460.8deg);
        transform: translate(110.01617px, 20.98671px) rotate(460.8deg);
}

.clockline li:nth-child(4) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(108.48131px, 27.85327px) rotate(464.4deg);
        transform: translate(108.48131px, 27.85327px) rotate(464.4deg);
}

.clockline li:nth-child(5) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(106.51833px, 34.6099px) rotate(468deg);
        transform: translate(106.51833px, 34.6099px) rotate(468deg);
        height: 29px;
}

.clockline li:nth-child(6) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(104.13497px, 41.22995px) rotate(471.6deg);
        transform: translate(104.13497px, 41.22995px) rotate(471.6deg);
}

.clockline li:nth-child(7) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(101.34063px, 47.68728px) rotate(475.2deg);
        transform: translate(101.34063px, 47.68728px) rotate(475.2deg);
}

.clockline li:nth-child(8) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(98.14635px, 53.95641px) rotate(478.8deg);
        transform: translate(98.14635px, 53.95641px) rotate(478.8deg);
}

.clockline li:nth-child(9) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(94.56473px, 60.0126px) rotate(482.4deg);
        transform: translate(94.56473px, 60.0126px) rotate(482.4deg);
}

.clockline li:nth-child(10) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(90.6099px, 65.83195px) rotate(486deg);
        transform: translate(90.6099px, 65.83195px) rotate(486deg);
        height: 29px;
}

.clockline li:nth-child(11) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(86.29748px, 71.39149px) rotate(489.6deg);
        transform: translate(86.29748px, 71.39149px) rotate(489.6deg);
}

.clockline li:nth-child(12) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(81.64449px, 76.66928px) rotate(493.2deg);
        transform: translate(81.64449px, 76.66928px) rotate(493.2deg);
}

.clockline li:nth-child(13) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(76.66928px, 81.64449px) rotate(496.8deg);
        transform: translate(76.66928px, 81.64449px) rotate(496.8deg);
}

.clockline li:nth-child(14) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(71.39149px, 86.29748px) rotate(500.4deg);
        transform: translate(71.39149px, 86.29748px) rotate(500.4deg);
}

.clockline li:nth-child(15) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(65.83195px, 90.6099px) rotate(504deg);
        transform: translate(65.83195px, 90.6099px) rotate(504deg);
        height: 29px;
}

.clockline li:nth-child(16) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(60.0126px, 94.56473px) rotate(507.6deg);
        transform: translate(60.0126px, 94.56473px) rotate(507.6deg);
}

.clockline li:nth-child(17) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(53.95641px, 98.14635px) rotate(511.2deg);
        transform: translate(53.95641px, 98.14635px) rotate(511.2deg);
}

.clockline li:nth-child(18) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(47.68728px, 101.34063px) rotate(514.8deg);
        transform: translate(47.68728px, 101.34063px) rotate(514.8deg);
}

.clockline li:nth-child(19) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(41.22995px, 104.13497px) rotate(518.4deg);
        transform: translate(41.22995px, 104.13497px) rotate(518.4deg);
}

.clockline li:nth-child(20) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(34.6099px, 106.51833px) rotate(522deg);
        transform: translate(34.6099px, 106.51833px) rotate(522deg);
        height: 29px;
}

.clockline li:nth-child(21) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(27.85327px, 108.48131px) rotate(525.6deg);
        transform: translate(27.85327px, 108.48131px) rotate(525.6deg);
}

.clockline li:nth-child(22) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(20.98671px, 110.01617px) rotate(529.2deg);
        transform: translate(20.98671px, 110.01617px) rotate(529.2deg);
}

.clockline li:nth-child(23) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(14.03732px, 111.11685px) rotate(532.8deg);
        transform: translate(14.03732px, 111.11685px) rotate(532.8deg);
}

.clockline li:nth-child(24) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(7.03254px, 111.77899px) rotate(536.4deg);
        transform: translate(7.03254px, 111.77899px) rotate(536.4deg);
}

.clockline li:nth-child(25) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(0px, 112px) rotate(540deg);
        transform: translate(0px, 112px) rotate(540deg);
        height: 29px;
}

.clockline li:nth-child(26) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-7.03254px, 111.77899px) rotate(543.6deg);
        transform: translate(-7.03254px, 111.77899px) rotate(543.6deg);
}

.clockline li:nth-child(27) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-14.03732px, 111.11685px) rotate(547.2deg);
        transform: translate(-14.03732px, 111.11685px) rotate(547.2deg);
}

.clockline li:nth-child(28) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-20.98671px, 110.01617px) rotate(550.8deg);
        transform: translate(-20.98671px, 110.01617px) rotate(550.8deg);
}

.clockline li:nth-child(29) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-27.85327px, 108.48131px) rotate(554.4deg);
        transform: translate(-27.85327px, 108.48131px) rotate(554.4deg);
}

.clockline li:nth-child(30) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-34.6099px, 106.51833px) rotate(558deg);
        transform: translate(-34.6099px, 106.51833px) rotate(558deg);
        height: 29px;
}

.clockline li:nth-child(31) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-41.22995px, 104.13497px) rotate(561.6deg);
        transform: translate(-41.22995px, 104.13497px) rotate(561.6deg);
}

.clockline li:nth-child(32) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-47.68728px, 101.34063px) rotate(565.2deg);
        transform: translate(-47.68728px, 101.34063px) rotate(565.2deg);
}

.clockline li:nth-child(33) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-53.95641px, 98.14635px) rotate(568.8deg);
        transform: translate(-53.95641px, 98.14635px) rotate(568.8deg);
}

.clockline li:nth-child(34) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-60.0126px, 94.56473px) rotate(572.4deg);
        transform: translate(-60.0126px, 94.56473px) rotate(572.4deg);
}

.clockline li:nth-child(35) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-65.83195px, 90.6099px) rotate(576deg);
        transform: translate(-65.83195px, 90.6099px) rotate(576deg);
        height: 29px;
}

.clockline li:nth-child(36) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-71.39149px, 86.29748px) rotate(579.6deg);
        transform: translate(-71.39149px, 86.29748px) rotate(579.6deg);
}

.clockline li:nth-child(37) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-76.66928px, 81.64449px) rotate(583.2deg);
        transform: translate(-76.66928px, 81.64449px) rotate(583.2deg);
}

.clockline li:nth-child(38) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-81.64449px, 76.66928px) rotate(586.8deg);
        transform: translate(-81.64449px, 76.66928px) rotate(586.8deg);
}

.clockline li:nth-child(39) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-86.29748px, 71.39149px) rotate(590.4deg);
        transform: translate(-86.29748px, 71.39149px) rotate(590.4deg);
}

.clockline li:nth-child(40) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-90.6099px, 65.83195px) rotate(594deg);
        transform: translate(-90.6099px, 65.83195px) rotate(594deg);
        height: 29px;
}

.clockline li:nth-child(41) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-94.56473px, 60.0126px) rotate(597.6deg);
        transform: translate(-94.56473px, 60.0126px) rotate(597.6deg);
}

.clockline li:nth-child(42) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-98.14635px, 53.95641px) rotate(601.2deg);
        transform: translate(-98.14635px, 53.95641px) rotate(601.2deg);
}

.clockline li:nth-child(43) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-101.34063px, 47.68728px) rotate(604.8deg);
        transform: translate(-101.34063px, 47.68728px) rotate(604.8deg);
}

.clockline li:nth-child(44) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-104.13497px, 41.22995px) rotate(608.4deg);
        transform: translate(-104.13497px, 41.22995px) rotate(608.4deg);
}

.clockline li:nth-child(45) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-106.51833px, 34.6099px) rotate(612deg);
        transform: translate(-106.51833px, 34.6099px) rotate(612deg);
        height: 29px;
}

.clockline li:nth-child(46) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-108.48131px, 27.85327px) rotate(615.6deg);
        transform: translate(-108.48131px, 27.85327px) rotate(615.6deg);
}

.clockline li:nth-child(47) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-110.01617px, 20.98671px) rotate(619.2deg);
        transform: translate(-110.01617px, 20.98671px) rotate(619.2deg);
}

.clockline li:nth-child(48) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-111.11685px, 14.03732px) rotate(622.8deg);
        transform: translate(-111.11685px, 14.03732px) rotate(622.8deg);
}

.clockline li:nth-child(49) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-111.77899px, 7.03254px) rotate(626.4deg);
        transform: translate(-111.77899px, 7.03254px) rotate(626.4deg);
}

.clockline li:nth-child(50) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-112px, 0px) rotate(630deg);
        transform: translate(-112px, 0px) rotate(630deg);
        height: 29px;
}

.clockline li:nth-child(51) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-111.77899px, -7.03254px) rotate(633.6deg);
        transform: translate(-111.77899px, -7.03254px) rotate(633.6deg);
}

.clockline li:nth-child(52) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-111.11685px, -14.03732px) rotate(637.2deg);
        transform: translate(-111.11685px, -14.03732px) rotate(637.2deg);
}

.clockline li:nth-child(53) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-110.01617px, -20.98671px) rotate(640.8deg);
        transform: translate(-110.01617px, -20.98671px) rotate(640.8deg);
}

.clockline li:nth-child(54) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-108.48131px, -27.85327px) rotate(644.4deg);
        transform: translate(-108.48131px, -27.85327px) rotate(644.4deg);
}

.clockline li:nth-child(55) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-106.51833px, -34.6099px) rotate(648deg);
        transform: translate(-106.51833px, -34.6099px) rotate(648deg);
        height: 29px;
}

.clockline li:nth-child(56) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-104.13497px, -41.22995px) rotate(651.6deg);
        transform: translate(-104.13497px, -41.22995px) rotate(651.6deg);
}

.clockline li:nth-child(57) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-101.34063px, -47.68728px) rotate(655.2deg);
        transform: translate(-101.34063px, -47.68728px) rotate(655.2deg);
}

.clockline li:nth-child(58) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-98.14635px, -53.95641px) rotate(658.8deg);
        transform: translate(-98.14635px, -53.95641px) rotate(658.8deg);
}

.clockline li:nth-child(59) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-94.56473px, -60.0126px) rotate(662.4deg);
        transform: translate(-94.56473px, -60.0126px) rotate(662.4deg);
}

.clockline li:nth-child(60) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-90.6099px, -65.83195px) rotate(666deg);
        transform: translate(-90.6099px, -65.83195px) rotate(666deg);
        height: 29px;
}

.clockline li:nth-child(61) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-86.29748px, -71.39149px) rotate(669.6deg);
        transform: translate(-86.29748px, -71.39149px) rotate(669.6deg);
}

.clockline li:nth-child(62) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-81.64449px, -76.66928px) rotate(673.2deg);
        transform: translate(-81.64449px, -76.66928px) rotate(673.2deg);
}

.clockline li:nth-child(63) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-76.66928px, -81.64449px) rotate(676.8deg);
        transform: translate(-76.66928px, -81.64449px) rotate(676.8deg);
}

.clockline li:nth-child(64) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-71.39149px, -86.29748px) rotate(680.4deg);
        transform: translate(-71.39149px, -86.29748px) rotate(680.4deg);
}

.clockline li:nth-child(65) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-65.83195px, -90.6099px) rotate(684deg);
        transform: translate(-65.83195px, -90.6099px) rotate(684deg);
        height: 29px;
}

.clockline li:nth-child(66) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-60.0126px, -94.56473px) rotate(687.6deg);
        transform: translate(-60.0126px, -94.56473px) rotate(687.6deg);
}

.clockline li:nth-child(67) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-53.95641px, -98.14635px) rotate(691.2deg);
        transform: translate(-53.95641px, -98.14635px) rotate(691.2deg);
}

.clockline li:nth-child(68) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-47.68728px, -101.34063px) rotate(694.8deg);
        transform: translate(-47.68728px, -101.34063px) rotate(694.8deg);
}

.clockline li:nth-child(69) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-41.22995px, -104.13497px) rotate(698.4deg);
        transform: translate(-41.22995px, -104.13497px) rotate(698.4deg);
}

.clockline li:nth-child(70) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-34.6099px, -106.51833px) rotate(702deg);
        transform: translate(-34.6099px, -106.51833px) rotate(702deg);
        height: 29px;
}

.clockline li:nth-child(71) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-27.85327px, -108.48131px) rotate(705.6deg);
        transform: translate(-27.85327px, -108.48131px) rotate(705.6deg);
}

.clockline li:nth-child(72) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-20.98671px, -110.01617px) rotate(709.2deg);
        transform: translate(-20.98671px, -110.01617px) rotate(709.2deg);
}

.clockline li:nth-child(73) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-14.03732px, -111.11685px) rotate(712.8deg);
        transform: translate(-14.03732px, -111.11685px) rotate(712.8deg);
}

.clockline li:nth-child(74) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(-7.03254px, -111.77899px) rotate(716.4deg);
        transform: translate(-7.03254px, -111.77899px) rotate(716.4deg);
}

.clockline li:nth-child(75) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(0px, -112px) rotate(720deg);
        transform: translate(0px, -112px) rotate(720deg);
        height: 29px;
}

.clockline li:nth-child(76) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(7.03254px, -111.77899px) rotate(723.6deg);
        transform: translate(7.03254px, -111.77899px) rotate(723.6deg);
}

.clockline li:nth-child(77) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(14.03732px, -111.11685px) rotate(727.2deg);
        transform: translate(14.03732px, -111.11685px) rotate(727.2deg);
}

.clockline li:nth-child(78) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(20.98671px, -110.01617px) rotate(730.8deg);
        transform: translate(20.98671px, -110.01617px) rotate(730.8deg);
}

.clockline li:nth-child(79) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(27.85327px, -108.48131px) rotate(734.4deg);
        transform: translate(27.85327px, -108.48131px) rotate(734.4deg);
}

.clockline li:nth-child(80) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(34.6099px, -106.51833px) rotate(738deg);
        transform: translate(34.6099px, -106.51833px) rotate(738deg);
        height: 29px;
}

.clockline li:nth-child(81) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(41.22995px, -104.13497px) rotate(741.6deg);
        transform: translate(41.22995px, -104.13497px) rotate(741.6deg);
}

.clockline li:nth-child(82) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(47.68728px, -101.34063px) rotate(745.2deg);
        transform: translate(47.68728px, -101.34063px) rotate(745.2deg);
}

.clockline li:nth-child(83) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(53.95641px, -98.14635px) rotate(748.8deg);
        transform: translate(53.95641px, -98.14635px) rotate(748.8deg);
}

.clockline li:nth-child(84) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(60.0126px, -94.56473px) rotate(752.4deg);
        transform: translate(60.0126px, -94.56473px) rotate(752.4deg);
}

.clockline li:nth-child(85) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(65.83195px, -90.6099px) rotate(756deg);
        transform: translate(65.83195px, -90.6099px) rotate(756deg);
        height: 29px;
}

.clockline li:nth-child(86) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(71.39149px, -86.29748px) rotate(759.6deg);
        transform: translate(71.39149px, -86.29748px) rotate(759.6deg);
}

.clockline li:nth-child(87) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(76.66928px, -81.64449px) rotate(763.2deg);
        transform: translate(76.66928px, -81.64449px) rotate(763.2deg);
}

.clockline li:nth-child(88) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(81.64449px, -76.66928px) rotate(766.8deg);
        transform: translate(81.64449px, -76.66928px) rotate(766.8deg);
}

.clockline li:nth-child(89) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(86.29748px, -71.39149px) rotate(770.4deg);
        transform: translate(86.29748px, -71.39149px) rotate(770.4deg);
}

.clockline li:nth-child(90) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(90.6099px, -65.83195px) rotate(774deg);
        transform: translate(90.6099px, -65.83195px) rotate(774deg);
        height: 29px;
}

.clockline li:nth-child(91) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(94.56473px, -60.0126px) rotate(777.6deg);
        transform: translate(94.56473px, -60.0126px) rotate(777.6deg);
}

.clockline li:nth-child(92) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(98.14635px, -53.95641px) rotate(781.2deg);
        transform: translate(98.14635px, -53.95641px) rotate(781.2deg);
}

.clockline li:nth-child(93) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(101.34063px, -47.68728px) rotate(784.8deg);
        transform: translate(101.34063px, -47.68728px) rotate(784.8deg);
}

.clockline li:nth-child(94) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(104.13497px, -41.22995px) rotate(788.4deg);
        transform: translate(104.13497px, -41.22995px) rotate(788.4deg);
}

.clockline li:nth-child(95) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(106.51833px, -34.6099px) rotate(792deg);
        transform: translate(106.51833px, -34.6099px) rotate(792deg);
        height: 29px;
}

.clockline li:nth-child(96) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(108.48131px, -27.85327px) rotate(795.6deg);
        transform: translate(108.48131px, -27.85327px) rotate(795.6deg);
}

.clockline li:nth-child(97) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(110.01617px, -20.98671px) rotate(799.2deg);
        transform: translate(110.01617px, -20.98671px) rotate(799.2deg);
}

.clockline li:nth-child(98) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(111.11685px, -14.03732px) rotate(802.8deg);
        transform: translate(111.11685px, -14.03732px) rotate(802.8deg);
}

.clockline li:nth-child(99) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(111.77899px, -7.03254px) rotate(806.4deg);
        transform: translate(111.77899px, -7.03254px) rotate(806.4deg);
}

.clockline li:nth-child(100) {
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-transform: translate(112px, 0px) rotate(810deg);
        transform: translate(112px, 0px) rotate(810deg);
        height: 29px;
}

.btn {
        cursor: pointer;
}

.btn-reset {
        width: 28px;
        height: 28px;
        position: absolute;
        top: 4px;
        right: 50px;
        box-sizing: border-box;
        /* opacity: 0.5; */
        /*  transition: opacity 0.2s; */
}

.btn-reset .bl-parts {
        display: block;
        position: absolute;
        width: 24px;
        height: 26px;
        /* border-top: 2px solid #f8f8f8; */
        /* para ver el reset del crono */
        /*    border-right: 2px solid transparent;
    border-left: 2px solid transparent; */
        border-radius: 50%;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        top: 140px;
        right: 170px;
        transition: -webkit-transform 0s;
        transition: transform 0s;
        transition: transform 0s, -webkit-transform 0s;
}

.btn-reset .bl-parts::after {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        /*  border-top: 8px solid transparent; */
        /*    border-right: 8px solid #f8f8f8; */
        /*  border-left: 8px solid transparent; */
        position: absolute;
        top: 2px;
        left: 5px;
        top: -2px;
}

.btn-reset .bl-parts:nth-child(2) {
        -webkit-transform: rotate(225deg);
        transform: rotate(225deg);
}

.btn-reset.br-click .bl-parts {
        -webkit-transform: rotate(405deg);
        transform: rotate(405deg);
}

.btn-reset.br-click .bl-parts:nth-child(2) {
        -webkit-transform: rotate(585deg);
        transform: rotate(585deg);
}

.btn-label {
        width: 100%;
        color: red;
        left: -58px;
        text-align: center;
        position: absolute;
        bottom: -1rem;
        font-size: 0.75rem;
        font-family: 'Share Tech Mono', sans-serif;
        top: 55px;
}