@font-face { font-family: 'Hash_bold'; src: url('../fonts/HelveticaNeueLTStd-Bd.otf');}





.thack{
    background:url('../images/timer_hack.png');
    background-repeat:no-repeat;
    width: 253px;
    height: 258px;
    float: right;
    margin-right: -100px;
    margin-top: 60px;
    position: relative;
}
#timer {
    width: 223px;
    margin-left: 10px;
    margin-top: 14px;
    float: left;
    position: relative;
    z-index: 1;
}
.pietimer {
    position:relative;
    width:1em;
    height:1em;
    float: left;
    margin-top: 14px;
    margin-left: 10px;
}
.pietimer > .percent {
    font-family: 'Hash_bold';
    position: absolute;
    top: 70px;
    left: 0;
    width: 220px;
    font-size: 90px;
    text-align:center;
    display: none;

    color: #FFF;
   -webkit-text-stroke-width: 3px;
   -webkit-text-stroke-color: #e74c3c;

   z-index: 2;
}
.pietimer > .slice {
    position:absolute;
    width:1em;
    height:1em;
    clip:rect(0px,1em,1em,0.5em);
}
.pietimer > .slice.gt50 {
    clip:rect(auto, auto, auto, auto);
}
.pietimer > .slice > .pie {
    border: 0.1em solid #c0c0c0;
    position:absolute;
    width:0.8em; /* 1 - (2 * border width) */
    height:0.8em; /* 1 - (2 * border width) */
    clip:rect(0em,0.5em,1em,0em);
    -moz-border-radius:0.5em;
    -webkit-border-radius:0.5em; 
    border-radius:0.5em; 
}
.pietimer > .slice > .pie.fill {
    -moz-transform:rotate(180deg) !important;
    -webkit-transform:rotate(180deg) !important;
    -o-transform:rotate(180deg) !important;
    transform:rotate(180deg) !important;
}
.pietimer.fill > .percent {
    display: none;
}
.pietimer.fill > .slice > .pie {
    border: transparent;
    background-color: #c0c0c0;
    width:1em;
    height:1em;
}