@import url(https://fonts.googleapis.com/css?family=Lato:700);

#percent {
    display: block;
    width: 160px;
    border: 1px solid #CCC;
    border-radius: 5px;
    margin: 50px auto 20px;
    padding: 10px;
    color: #fb2e82;
    font-family: "Lato", Tahoma, Geneva, sans-serif;
    font-size: 35px;
    text-align: center;
}

#donut {
    display: block;
    margin: 0px auto;
    color: #fb2e82;
    font-size: 20px;
    text-align: center;
}


.donut-size {
    font-size: 12em;
}

.pie-wrapper {
    position: relative;
    width: 1em;
    height: 1em;
    margin: 0px auto;
}

    .pie-wrapper .pie {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        clip: rect(0, 1em, 1em, 0.5em);
    }

    .pie-wrapper .half-circle {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        border: 0.1em solid #fb2e82;
        border-radius: 50%;
        clip: rect(0em, 0.5em, 1em, 0em);
    }

    .pie-wrapper .right-side {
        transform: rotate(0deg);
    }

    .pie-wrapper .label {
        position: absolute;
        top: 0.52em;
        right: 0.4em;
        bottom: 0.4em;
        left: 0.4em;
        display: block;
        background: none;
        border-radius: 50%;
        color: #181b35;
        font-size: 0.25em;
        line-height: 2.6em;
        text-align: center;
        cursor: default;
        z-index: 2;
    }

    .pie-wrapper .smaller {
        padding-bottom: 20px;
        color: #181b35;
        font-size: 0.45em;
        vertical-align: super;
    }

    .pie-wrapper .shadow {
        width: 100%;
        height: 100%;
        border: 0.1em solid #181b35;
        border-radius: 50%;
    }