/*** <--- CIRCLE STYLES ---> ***/
/*Define values*/
.wrap-circles {
    display: flex;
    flex-wrap: wrap;
    justify-content: right;
    padding-right: 15px;
}
.circle {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #298976;
    overflow: hidden;
    opacity: 0.8;
    .inner {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 30px;
        height: 30px;
        background: #fff;
        border-radius: 50%;
        font-size: 0.8em;
        font-weight: 300;
        color: black;
    }
}
.circle.per-0 {
    background-image: conic-gradient(#298976 0%, $primary 0%);
}
.circle.per-1 {
    background-image: conic-gradient(#298976 1%, $primary 0%);
}
.circle.per-2 {
    background-image: conic-gradient(#298976 2%, $primary 0%);
}
.circle.per-3 {
    background-image: conic-gradient(#298976 3%, $primary 0%);
}
.circle.per-4 {
    background-image: conic-gradient(#298976 4%, $primary 0%);
}
.circle.per-5 {
    background-image: conic-gradient(#298976 5%, $primary 0%);
}
.circle.per-6 {
    background-image: conic-gradient(#298976 6%, $primary 0%);
}
.circle.per-7 {
    background-image: conic-gradient(#298976 7%, $primary 0%);
}
.circle.per-8 {
    background-image: conic-gradient(#298976 8%, $primary 0%);
}
.circle.per-9 {
    background-image: conic-gradient(#298976 9%, $primary 0%);
}
.circle.per-10 {
    background-image: conic-gradient(#298976 10%, $primary 0%);
}
.circle.per-11 {
    background-image: conic-gradient(#298976 11%, $primary 0%);
}
.circle.per-12 {
    background-image: conic-gradient(#298976 12%, $primary 0%);
}
.circle.per-13 {
    background-image: conic-gradient(#298976 13%, $primary 0%);
}
.circle.per-14 {
    background-image: conic-gradient(#298976 14%, $primary 0%);
}
.circle.per-15 {
    background-image: conic-gradient(#298976 15%, $primary 0%);
}
.circle.per-16 {
    background-image: conic-gradient(#298976 16%, $primary 0%);
}
.circle.per-17 {
    background-image: conic-gradient(#298976 17%, $primary 0%);
}
.circle.per-18 {
    background-image: conic-gradient(#298976 18%, $primary 0%);
}
.circle.per-19 {
    background-image: conic-gradient(#298976 19%, $primary 0%);
}
.circle.per-20 {
    background-image: conic-gradient(#298976 20%, $primary 0%);
}
.circle.per-21 {
    background-image: conic-gradient(#298976 21%, $primary 0%);
}
.circle.per-22 {
    background-image: conic-gradient(#298976 22%, $primary 0%);
}
.circle.per-23 {
    background-image: conic-gradient(#298976 23%, $primary 0%);
}
.circle.per-24 {
    background-image: conic-gradient(#298976 24%, $primary 0%);
}
.circle.per-25 {
    background-image: conic-gradient(#298976 25%, $primary 0%);
}
.circle.per-26 {
    background-image: conic-gradient(#298976 26%, $primary 0%);
}
.circle.per-27 {
    background-image: conic-gradient(#298976 27%, $primary 0%);
}
.circle.per-28 {
    background-image: conic-gradient(#298976 28%, $primary 0%);
}
.circle.per-29 {
    background-image: conic-gradient(#298976 29%, $primary 0%);
}
.circle.per-30 {
    background-image: conic-gradient(#298976 30%, $primary 0%);
}
.circle.per-31 {
    background-image: conic-gradient(#298976 31%, $primary 0%);
}
.circle.per-32 {
    background-image: conic-gradient(#298976 32%, $primary 0%);
}
.circle.per-33 {
    background-image: conic-gradient(#298976 33%, $primary 0%);
}
.circle.per-34 {
    background-image: conic-gradient(#298976 34%, $primary 0%);
}
.circle.per-35 {
    background-image: conic-gradient(#298976 35%, $primary 0%);
}
.circle.per-36 {
    background-image: conic-gradient(#298976 36%, $primary 0%);
}
.circle.per-37 {
    background-image: conic-gradient(#298976 37%, $primary 0%);
}
.circle.per-38 {
    background-image: conic-gradient(#298976 38%, $primary 0%);
}
.circle.per-39 {
    background-image: conic-gradient(#298976 39%, $primary 0%);
}
.circle.per-40 {
    background-image: conic-gradient(#298976 40%, $primary 0%);
}
.circle.per-41 {
    background-image: conic-gradient(#298976 41%, $primary 0%);
}
.circle.per-42 {
    background-image: conic-gradient(#298976 42%, $primary 0%);
}
.circle.per-43 {
    background-image: conic-gradient(#298976 43%, $primary 0%);
}
.circle.per-44 {
    background-image: conic-gradient(#298976 44%, $primary 0%);
}
.circle.per-45 {
    background-image: conic-gradient(#298976 45%, $primary 0%);
}
.circle.per-46 {
    background-image: conic-gradient(#298976 46%, $primary 0%);
}
.circle.per-47 {
    background-image: conic-gradient(#298976 47%, $primary 0%);
}
.circle.per-48 {
    background-image: conic-gradient(#298976 48%, $primary 0%);
}
.circle.per-49 {
    background-image: conic-gradient(#298976 49%, $primary 0%);
}
circle.per-50 {
    background-image: conic-gradient(#298976 50%, $primary 0%);
}
.circle.per-51 {
    background-image: conic-gradient(#298976 51%, $primary 0%);
}
.circle.per-52 {
    background-image: conic-gradient(#298976 52%, $primary 0%);
}
.circle.per-53 {
    background-image: conic-gradient(#298976 53%, $primary 0%);
}
.circle.per-54 {
    background-image: conic-gradient(#298976 54%, $primary 0%);
}
.circle.per-55 {
    background-image: conic-gradient(#298976 55%, $primary 0%);
}
.circle.per-56 {
    background-image: conic-gradient(#298976 56%, $primary 0%);
}
.circle.per-57 {
    background-image: conic-gradient(#298976 57%, $primary 0%);
}
.circle.per-58 {
    background-image: conic-gradient(#298976 58%, $primary 0%);
}
.circle.per-59 {
    background-image: conic-gradient(#298976 59%, $primary 0%);
}
.circle.per-60 {
    background-image: conic-gradient(#298976 60%, $primary 0%);
}
.circle.per-61 {
    background-image: conic-gradient(#298976 61%, $primary 0%);
}
.circle.per-62 {
    background-image: conic-gradient(#298976 62%, $primary 0%);
}
.circle.per-63 {
    background-image: conic-gradient(#298976 63%, $primary 0%);
}
.circle.per-64 {
    background-image: conic-gradient(#298976 64%, $primary 0%);
}
.circle.per-65 {
    background-image: conic-gradient(#298976 65%, $primary 0%);
}
.circle.per-66 {
    background-image: conic-gradient(#298976 66%, $primary 0%);
}
.circle.per-67 {
    background-image: conic-gradient(#298976 67%, $primary 0%);
}
.circle.per-68 {
    background-image: conic-gradient(#298976 68%, $primary 0%);
}
.circle.per-69 {
    background-image: conic-gradient(#298976 69%, $primary 0%);
}
.circle.per-70 {
    background-image: conic-gradient(#298976 70%, $primary 0%);
}
.circle.per-71 {
    background-image: conic-gradient(#298976 71%, $primary 0%);
}
.circle.per-72 {
    background-image: conic-gradient(#298976 72%, $primary 0%);
}
.circle.per-73 {
    background-image: conic-gradient(#298976 73%, $primary 0%);
}
.circle.per-74 {
    background-image: conic-gradient(#298976 74%, $primary 0%);
}
.circle.per-75 {
    background-image: conic-gradient(#298976 75%, $primary 0%);
}
.circle.per-76 {
    background-image: conic-gradient(#298976 76%, $primary 0%);
}
.circle.per-77 {
    background-image: conic-gradient(#298976 77%, $primary 0%);
}
.circle.per-78 {
    background-image: conic-gradient(#298976 78%, $primary 0%);
}
.circle.per-79 {
    background-image: conic-gradient(#298976 79%, $primary 0%);
}
.circle.per-80 {
    background-image: conic-gradient(#298976 80%, $primary 0%);
}
.circle.per-81 {
    background-image: conic-gradient(#298976 81%, $primary 0%);
}
.circle.per-82 {
    background-image: conic-gradient(#298976 82%, $primary 0%);
}
.circle.per-83 {
    background-image: conic-gradient(#298976 83%, $primary 0%);
}
.circle.per-84 {
    background-image: conic-gradient(#298976 84%, $primary 0%);
}
.circle.per-85 {
    background-image: conic-gradient(#298976 85%, $primary 0%);
}
.circle.per-86 {
    background-image: conic-gradient(#298976 86%, $primary 0%);
}
.circle.per-87 {
    background-image: conic-gradient(#298976 87%, $primary 0%);
}
.circle.per-88 {
    background-image: conic-gradient(#298976 88%, $primary 0%);
}
.circle.per-89 {
    background-image: conic-gradient(#298976 89%, $primary 0%);
}
.circle.per-90 {
    background-image: conic-gradient(#298976 90%, $primary 0%);
}
.circle.per-91 {
    background-image: conic-gradient(#298976 91%, $primary 0%);
}
.circle.per-92 {
    background-image: conic-gradient(#298976 92%, $primary 0%);
}
.circle.per-93 {
    background-image: conic-gradient(#298976 93%, $primary 0%);
}
.circle.per-94 {
    background-image: conic-gradient(#298976 94%, $primary 0%);
}
.circle.per-95 {
    background-image: conic-gradient(#298976 95%, $primary 0%);
}
.circle.per-96 {
    background-image: conic-gradient(#298976 96%, $primary 0%);
}
.circle.per-97 {
    background-image: conic-gradient(#298976 97%, $primary 0%);
}
.circle.per-98 {
    background-image: conic-gradient(#298976 98%, $primary 0%);
}
.circle.per-99 {
    background-image: conic-gradient(#298976 99%, $primary 0%);
}
.circle.per-100 {
    background-image: conic-gradient(#298976 100%, $primary 0%);
}
