html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
  }
  
    body { 
    margin: 0;
    padding: 0;
    font-family: Helvetica,Arial,sans-serif;
    text-align: center;
    overflow:hidden;
  }
#progressbar {
    width: 90%;
    height: 26px;
    background-color: #ffffff;
    margin: .5em 0;
    border: 2px #000000 double;
    float: right;
    clear: both;
}
#progress {
    background: #74DF00; /*-- Color of the bar1 --*/
    height: 22px;
    width: 0%;
    max-width: 100%;
    float: left;
    -webkit-animation: progress 2s 1 forwards;
    -moz-animation: progress 2s 1 forwards;
    -ms-animation: progress 2s 1 forwards;
    animation: progress 4s 1 forwards;
}
#progressbar2 {
    width: 90%;
    height: 26px;
    background-color: #ffffff;
    margin: .5em 0;
    border: 2px #000000 double;
    float: right;
    clear: both;
}
#progress2 {
    background: #ff9d9d; /*-- Color of the bar2 --*/
    height: 22px;
    width: 0%;
    max-width: 100%;
    float: left;
    -webkit-animation: progress2 2s 1 forwards;
    -moz-animation: progress2 2s 1 forwards;
    -ms-animation: progress2 2s 1 forwards;
    animation: progress2 4s 1 forwards;
}


#progressbar3 {
    width: 90%;
    height: 26px;
    background-color: #ffffff;
    margin: .5em 0;
    border: 2px #000000 double;
    float: right;
    clear: both;
}
#progress3 {
    background: #fd9f5a; /*-- Color of the bar2 --*/
    height: 22px;
    width: 0%;
    max-width: 100%;
    float: left;
    -webkit-animation: progress3 2s 1 forwards;
    -moz-animation: progress3 2s 1 forwards;
    -ms-animation: progress3 2s 1 forwards;
    animation: progress3 4s 1 forwards;
}


    .tick {
        background: url("../images/tick-empty.png") no-repeat;
        width: 40px;
        height: 24px;
        margin-top: 9px;
        position: absolute;
        z-index: 1;
    }
    .tick:hover {
        background: url("../images/tick-marked.png") no-repeat;
        width: 40px;
        height: 24px;
        margin-top: 9px;
        position: absolute;
        z-index: 1;
    }

@-webkit-keyframes progress { 
    from { }

    to { width: 60% }
}

@-moz-keyframes progress { 
    from { }

    to { width: 60% }
}

@-ms-keyframes progress { 
    from { }

    to { width: 60% }
}

@keyframes progress { 
    from { }

    to { width: 60% }
}
@-webkit-keyframes progress2 { 
    from { }

    to { width: 35% }
}

@-moz-keyframes progress2 { 
    from { }

    to { width: 35% }
}

@-ms-keyframes progress2 { 
    from { }

    to { width: 35% }
}

@keyframes progress2 { 
    from { }

    to { width: 35% }
}

@-webkit-keyframes progress3 { 
    from { }

    to { width: 25% }
}

@-moz-keyframes progress3 { 
    from { }

    to { width: 25% }
}

@-ms-keyframes progress3 { 
    from { }

    to { width: 25% }
}

@keyframes progress3 { 
    from { }

    to { width: 25% }
}
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}
                              body {
                                        font-family:Tahoma, Arial,san-serif;
                                            font-size:13px;
                              }
                              .banner_headline {
                                            display:block;
                                             font-size:17px;
                                            
                                            text-align:center;
											font-weight:bold;
											color:#c01;
											margin-top:5px;
											margin-bottom:0px;
                              }
                              a {
                                            color:#0069C8;
                                            text-decoration:none;
                              }