.timer {
        position:relative;
        width:200px;
        height:200px;
        z-index: 1000;
        margin: auto;
    }
    
    .timer {

    }    

    .timer > .percent {
        position: absolute;
        top:40px;
        left:40px;
        -moz-border-radius:100px;
        -webkit-border-radius:100px;; 
        border-radius:100px; 
        width:120px;
        height:120px;
        font-size:32px;
        text-align:center;
        line-height:120px;
        color:#ffffff;
        background-color:#0298d5;
    }

    .timer > #slice {
        position:absolute;
        width:200px;
        height:200px;
        clip:rect(0px,200px,200px,100px);
    }

    .timer > #slice.gt50 {
        clip:rect(auto, auto, auto, auto);
    }

    .timer > #slice > .pie {
        border: 40px solid #80cbea;
        position:absolute;
        width:200px; /* 1 - (2 * border width) */
        height:200px; /* 1 - (2 * border width) */
        clip:rect(0px,100px,200px,0px);
        -moz-border-radius:100px;
        -webkit-border-radius:100px;; 
        border-radius:100px; 
    }

    .timer > #slice > .pie.fill {
        -moz-transform:rotate(180deg) !important;
        -webkit-transform:rotate(180deg) !important;
        -o-transform:rotate(180deg) !important;
        transform:rotate(180deg) !important;
    }

    .timer.fill > .percent {
        display: none;
    }

    .timer.fill > #slice > .pie {
        border: transparent;
        background-color: #c0c0c0;
        width:200px;
        height:200px;
    }

    #loadTime {
        margin:50px auto 50px auto;
    }