#desc {
    text-align: center;
    margin: 40px 0
}

.skill_1 {
    position: relative;
    font-size: 220px;
    width: 150px;
    height: 150px;
    float: left
}

.prog-contain {
    width: 220px;
    height: 220px;
    margin: 0 auto;
    background: url(../images/skill_bg.png) no-repeat
}

.skill_1>.percent {
    position: absolute;
    font-size: 44px;
    text-align: center;
    background: url(../images/skill_text_bg.png) no-repeat;
    top: 32px;
    right: -32px;
    width: 150px;
    height: 150px;
    padding: 0
}

.skill_1>.percent>p {
    margin: 57px 0 0 7px
}

.skill_1>#slice {
    position: absolute;
    width: 1em;
    height: 1em;
    clip: rect(0, 1em, 1em, .5em)
}

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

.skill_1>#slice>.pie {
    border: 32px solid #fff;
    position: absolute;
    width: 215px;
    height: 212px;
    clip: rect(0, .5em, 1em, 0);
    -moz-border-radius: .5em;
    -webkit-border-radius: .5em;
    border-radius: .5em;
    margin-top: 1px;
    margin-left: 1px
}

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

.skill_1.fill>.percent {
    display: none
}

.skill_1.fill>#slice>.pie {
    border: transparent;
    width: 1em;
    height: 1em
}

.skill_2 {
    position: relative;
    font-size: 220px;
    width: 150px;
    height: 150px;
    float: left
}

.skill_2>.percent_2 {
    position: absolute;
    font-size: 44px;
    text-align: center;
    background: url(../images/skill_text_bg.png) no-repeat;
    top: 32px;
    right: -32px;
    width: 150px;
    height: 150px;
    padding: 0
}

.skill_2>.percent_2>p {
    margin: 57px 0 0 7px
}

.skill_2>#slice2 {
    position: absolute;
    width: 1em;
    height: 1em;
    clip: rect(0, 1em, 1em, .5em)
}

.skill_2>#slice2.gt50 {
    clip: rect(auto, auto, auto, auto)
}

.skill_2>#slice2>.pie {
    border: 32px solid #fff;
    position: absolute;
    width: 215px;
    height: 212px;
    clip: rect(0, .5em, 1em, 0);
    -moz-border-radius: .5em;
    -webkit-border-radius: .5em;
    border-radius: .5em;
    margin-top: 1px;
    margin-left: 1px
}

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

.skill_2.fill>.percent_2 {
    display: none
}

.skill_2.fill>#slice2>.pie {
    border: transparent;
    width: 1em;
    height: 1em
}

.skill_3 {
    position: relative;
    font-size: 220px;
    width: 150px;
    height: 150px;
    float: left
}

.skill_3>.percent_3 {
    position: absolute;
    font-size: 44px;
    text-align: center;
    background: url(../images/skill_text_bg.png) no-repeat;
    top: 32px;
    right: -32px;
    width: 150px;
    height: 150px;
    padding: 0
}

.skill_3>.percent_3>p {
    margin: 57px 0 0 7px
}

.skill_3>#slice3 {
    position: absolute;
    width: 1em;
    height: 1em;
    clip: rect(0, 1em, 1em, .5em)
}

.skill_3>#slice3.gt50 {
    clip: rect(auto, auto, auto, auto)
}

.skill_3>#slice3>.pie {
    border: 32px solid #fff;
    position: absolute;
    width: 215px;
    height: 212px;
    clip: rect(0, .5em, 1em, 0);
    -moz-border-radius: .5em;
    -webkit-border-radius: .5em;
    border-radius: .5em;
    margin-top: 1px;
    margin-left: 1px
}

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

.skill_3.fill>.percent_3 {
    display: none
}

.skill_3.fill>#slice3>.pie {
    border: transparent;
    width: 1em;
    height: 1em
}

.skill_4 {
    position: relative;
    font-size: 220px;
    width: 150px;
    height: 150px;
    float: left
}

#prog-contain {
    width: 220px;
    height: 220px;
    margin: 0 auto;
    background: url(../images/skill_bg.png) no-repeat
}

.skill_4>.percent_4 {
    position: absolute;
    font-size: 44px;
    text-align: center;
    background: url(../images/skill_text_bg.png) no-repeat;
    top: 32px;
    right: -32px;
    width: 150px;
    height: 150px;
    padding: 0
}

.skill_4>.percent_4>p {
    margin: 57px 0 0 7px
}

.skill_4>#slice4 {
    position: absolute;
    width: 1em;
    height: 1em;
    clip: rect(0, 1em, 1em, .5em)
}

.skill_4>#slice4.gt50 {
    clip: rect(auto, auto, auto, auto)
}

.skill_4>#slice4>.pie {
    border: 32px solid #fff;
    position: absolute;
    width: 215px;
    height: 212px;
    clip: rect(0, .5em, 1em, 0);
    -moz-border-radius: .5em;
    -webkit-border-radius: .5em;
    border-radius: .5em;
    margin-top: 1px;
    margin-left: 1px
}

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

.skill_4.fill>.percent_4 {
    display: none
}

.skill_4.fill>#slice4>.pie {
    border: transparent;
    width: 1em;
    height: 1em
}