#start.start, #stop.stop, #reset.reset {
    display: none;
    position: absolute;
}

/*animations*/
@-webkit-keyframes start_haptic {
    from {
        -webkit-transform: scale(.98)
    }

    to {
    }
}

@-webkit-keyframes stop_haptic {
    from {
        -webkit-transform: scale(.98)
    }

    to {
    }
}

@-webkit-keyframes reset_haptic {
    from {
        -webkit-transform: scale(.98)
    }

    to {
    }
}

@-webkit-keyframes sec {
    from {
        top: 0px;
    }

    to {
        top: -300px;
    }
}

@-webkit-keyframes sec1 {
    from {
        top: 0px;
    }

    to {
        top: -180px;
    }
}


/*stopwatch*/

.stopwatch {
    height: 30px;
    width: 170px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    transition: .15s;
}

.container {
    transition: -webkit-transform .15s;
}


/*digits*/

.digit_contianer {
    height: 30px;
    opacity: .55;
}

.space {
    height: 30px;
    width: 15px;
    float: left;
    font-family: digit;
    font-size: 14px;
    color: #fff;
    line-height: 30px;
    position: relative;
    text-align: center;
}

.animcont {
    height: 30px;
    width: 13px;
    overflow: hidden;
    float: left;
    margin: 0 1px;
}

.min1, .min2, .sec1, .sec2, .mil1, .mil2, .mil3 {
    font-family: 'Noto Sans', sans-serif;
    width: 13px;
    font-size: 24px;
    color: #fff;
    line-height: 30px;
    position: relative;
    text-align: center;
}

.min1 {
    -webkit-animation: sec1 steps(6) 3600s infinite;
    -webkit-animation-play-state: paused;
}

.min2 {
    -webkit-animation: sec steps(10) 600s infinite;
    -webkit-animation-play-state: paused;
}

.sec1 {
    -webkit-animation: sec1 steps(6) 60s infinite;
    -webkit-animation-play-state: paused;
}

.sec2 {
    -webkit-animation: sec steps(10) 10s infinite;
    -webkit-animation-play-state: paused;
}

.mil1 {
    -webkit-animation: sec steps(10) 1s infinite;
    -webkit-animation-play-state: paused;
}

.mil2 {
    -webkit-animation: sec steps(10) .1s infinite;
    -webkit-animation-play-state: paused;
}

.mil3 {
    -webkit-animation: sec steps(10) .01s infinite;
    -webkit-animation-play-state: paused;
}


.start:checked ~ .container .mil1 {
    -webkit-animation-play-state: running;
}

.stop:checked ~ .container .mil1 {
    -webkit-animation-play-state: paused;
}

.reset:checked ~ .container .mil1 {
    -webkit-animation: none;
    top: 0;
    transition: .2s;
}

.start:checked ~ .container .mil2 {
    -webkit-animation-play-state: running;
}

.stop:checked ~ .container .mil2 {
    -webkit-animation-play-state: paused;
}

.reset:checked ~ .container .mil2 {
    -webkit-animation: none;
    top: 0;
    transition: .2s;
}

.start:checked ~ .container .mil3 {
    -webkit-animation-play-state: running;
}

.stop:checked ~ .container .mil3 {
    -webkit-animation-play-state: paused;
}

.reset:checked ~ .container .mil3 {
    -webkit-animation: none;
    top: 0;
    transition: .2s;
}

.start:checked ~ .container .sec1 {
    -webkit-animation-play-state: running;
}

.stop:checked ~ .container .sec1 {
    -webkit-animation-play-state: paused;
}

.reset:checked ~ .container .sec1 {
    -webkit-animation: none;
    top: 0;
    transition: .2s;
}

.start:checked ~ .container .sec2 {
    -webkit-animation-play-state: running;
}

.stop:checked ~ .container .sec2 {
    -webkit-animation-play-state: paused;
}

.reset:checked ~ .container .sec2 {
    -webkit-animation: none;
    top: 0;
    transition: .2s;
}

.start:checked ~ .container .min1 {
    -webkit-animation-play-state: running;
}

.stop:checked ~ .container .min1 {
    -webkit-animation-play-state: paused;
}

.reset:checked ~ .container .min1 {
    -webkit-animation: none;
    top: 0;
    transition: .2s;
}

.start:checked ~ .container .min2 {
    -webkit-animation-play-state: running;
}

.stop:checked ~ .container .min2 {
    -webkit-animation-play-state: paused;
}

.reset:checked ~ .container .min2 {
    -webkit-animation: none;
    top: 0;
    transition: .2s;
}


/*haptic feedback*/
.start:checked ~ .container {
    -webkit-animation: start_haptic .2s;
}

.stop:checked ~ .container {
    -webkit-animation: stop_haptic .2s;
}

.reset:checked ~ .container {
    -webkit-animation: reset_haptic .2s;
}