.calc{
  position: relative;
} 
.kadran{
    max-width: 400px;
    margin: 0 auto;
    position: relative;
}
.row{
    margin-bottom: 10px;
    position: relative;
    background-image: url('row.png');
    background-repeat: repeat-x;
    background-position: 5px;
}
.clear{
    display: block;
    clear: both;
}
.row span{
    display: inline-block;
    height: 30px;
    width: 20px;
    float: left;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px; /* future proofing */
    -khtml-border-radius: 10px; 
    margin: 0 2px;
    cursor: pointer;
    background-color: #24a777;
}
.row:nth-child(even) span{
    background-color: #47a2da;
}
.row .right{
    float: right;
}
.row::before,
.row::after{
    position: absolute;
    top: 5px;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    color: #aaa;
}
.row::before{
    width: 30px;
    left: -32px;
}
.row::after{
    width: 40px;
    right: -42px;
}

.row:nth-child(1)::before{
    content: "1";
}
.row:nth-child(2)::before{
    content: "2";
}
.row:nth-child(3)::before{
    content: "3";
}
.row:nth-child(4)::before{
    content: "4";
}
.row:nth-child(5)::before{
    content: "5";
}
.row:nth-child(6)::before{
    content: "6";
}
.row:nth-child(7)::before{
    content: "7";
}
.row:nth-child(8)::before{
    content: "8";
}
.row:nth-child(9)::before{
    content: "9";
}
.row:nth-child(10)::before{
    content: "10";
}

.row:nth-child(1)::after{
    content: "10";
}
.row:nth-child(2)::after{
    content: "20";
}
.row:nth-child(3)::after{
    content: "30";
}
.row:nth-child(4)::after{
    content: "40";
}
.row:nth-child(5)::after{
    content: "50";
}
.row:nth-child(6)::after{
    content: "60";
}
.row:nth-child(7)::after{
    content: "70";
}
.row:nth-child(8)::after{
    content: "80";
}
.row:nth-child(9)::after{
    content: "90";
}
.row:nth-child(10)::after{
    content: "100";
}

@media all and (max-width: 500px){
    .kadran{
        width: 93%
    }
    .row::before,
    .row::after{
        font-size: 12px;
    }
    .row::before {
        width: 15px;
        left: -20px;
    }
    .row::after {
        width: 24px;
        right: -24px;
    }
}
@media all and (max-width: 400px){
    .row span{
        height: 20px;
        width: 15px;
    }
}