.bChart {
    display: table;
    table-layout: fixed;
    width: 80%;
    /*
  max-width: 700px;*/
    min-height: 200px;
    margin: 0 auto;
    /*
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.1) 2%, rgba(0, 0, 0, 0) 2%);
  background-size: 100% 50px;
  background-position: left top;*/
}

.bChart li {
    position: relative;
    display: table-cell;
    vertical-align: bottom;/*
    height: 200px;*/
}

.bChart span {

    width: 100px;
    position: relative;
    /*
    margin: 0 2em;*/
    margin-left: auto;
    margin-right: auto;
    display: block;/*
    background: rgba(209, 236, 250, 0.75);*/
    animation: draw 1s ease-in-out;
}

.bChart span:before {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    padding: 5px 1em 0;
    display: block;
    text-align: center;
    width: 100%;
    /*
  content: attr(title);*/
    /*
  word-wrap: break-word;*/
}


.bChart span::after {
    position: absolute;
    top: 0.5rem;
    left: 0;
    right: 0;
    padding: 5px 1em 0;
    display: block;
    font-weight: inherit;
    text-align: center;
    font-size: inherit;
    color: inherit;
    font-family: inherit;
    content: attr(data-val);
    word-wrap: break-word;
}

@keyframes draw {
    0% {
        height: 0;
    }
}