<div class="row">
                        <div class="col-sm-12 text-center">
                            <div class="elements--title">
                                <h4>Horizontal Thick</h4>
                            </div>
                        </div>
                        <div class="col-md-10 col-md-offset-1">
                            <div class="barchart barchart-1" data-value="45">
                                <div class="barchart__description">
                                    <span class="h6">Ammenity</span>
                                </div>
                                <div class="barchart__bar">
                                    <div class="barchart__progress"></div>
                                </div>
                            </div>
                            <!--end of barchart-->
                            <div class="barchart barchart-1" data-value="75">
                                <div class="barchart__description">
                                    <span class="h6">Public Transport</span>
                                </div>
                                <div class="barchart__bar">
                                    <div class="barchart__progress"></div>
                                </div>
                            </div>
                            <!--end of barchart-->
                            <div class="barchart barchart-1" data-value="65">
                                <div class="barchart__description">
                                    <span class="h6">Nightlife</span>
                                </div>
                                <div class="barchart__bar">
                                    <div class="barchart__progress"></div>
                                </div>
                            </div>
                            <!--end of barchart-->
                            <div class="barchart barchart-1" data-value="85">
                                <div class="barchart__description">
                                    <span class="h6">Safety</span>
                                </div>
                                <div class="barchart__bar">
                                    <div class="barchart__progress"></div>
                                </div>
                            </div>
                            <!--end of barchart-->
                        </div>
                    </div>
                    <!--end row-->
                    <div class="row">
                        <div class="col-sm-12 text-center">
                            <div class="elements--title">
                                <h4>Horizontal Thin</h4>
                            </div>
                        </div>
                        <div class="col-md-10 col-md-offset-1">
                            <div class="barchart barchart-2" data-value="85">
                                <div class="barchart__description">
                                    <span class="h6">Ammenity</span>
                                </div>
                                <div class="barchart__bar">
                                    <div class="barchart__progress"></div>
                                </div>
                            </div>
                            <!--end of barchart-->
                            <div class="barchart barchart-2" data-value="95">
                                <div class="barchart__description">
                                    <span class="h6">Public Transport</span>
                                </div>
                                <div class="barchart__bar">
                                    <div class="barchart__progress"></div>
                                </div>
                            </div>
                            <!--end of barchart-->
                            <div class="barchart barchart-2" data-value="25">
                                <div class="barchart__description">
                                    <span class="h6">Nightlife</span>
                                </div>
                                <div class="barchart__bar">
                                    <div class="barchart__progress"></div>
                                </div>
                            </div>
                            <!--end of barchart-->
                            <div class="barchart barchart-2" data-value="75">
                                <div class="barchart__description">
                                    <span class="h6">Safety</span>
                                </div>
                                <div class="barchart__bar">
                                    <div class="barchart__progress"></div>
                                </div>
                            </div>
                            <!--end of barchart-->
                        </div>
                    </div>
                    <!--end row-->
                    <div class="row">
                        <div class="col-md-5 col-md-offset-1 col-sm-6 text-center">
                            <div class="elements--title">
                                <h4>Vertical Thick</h4>
                            </div>
                            <div class="barchart barchart--vertical barchart-1" data-value="85">
                                <div class="barchart__bar">
                                    <div class="barchart__progress"></div>
                                </div>
                                <div class="barchart__description">
                                    <span class="h6">Ammenity</span>
                                </div>
                            </div>
                            <!--end of barchart-->
                            <div class="barchart barchart--vertical barchart-1" data-value="65">
                                <div class="barchart__bar">
                                    <div class="barchart__progress"></div>
                                </div>
                                <div class="barchart__description">
                                    <span class="h6">Transport</span>
                                </div>
                            </div>
                            <!--end of barchart-->
                            <div class="barchart barchart--vertical barchart-1" data-value="45">
                                <div class="barchart__bar">
                                    <div class="barchart__progress"></div>
                                </div>
                                <div class="barchart__description">
                                    <span class="h6">Nightlife</span>
                                </div>
                            </div>
                            <!--end of barchart-->
                            <div class="barchart barchart--vertical barchart-1" data-value="25">
                                <div class="barchart__bar">
                                    <div class="barchart__progress"></div>
                                </div>
                                <div class="barchart__description">
                                    <span class="h6">Safety</span>
                                </div>
                            </div>
                            <!--end of barchart-->
                            <div class="barchart barchart--vertical barchart-1" data-value="15">
                                <div class="barchart__bar">
                                    <div class="barchart__progress"></div>
                                </div>
                                <div class="barchart__description">
                                    <span class="h6">Schools</span>
                                </div>
                            </div>
                            <!--end of barchart-->
                        </div>
                        <div class="col-md-5 col-md-offset-1 col-sm-6 text-center">
                            <div class="elements--title">
                                <h4>Vertical Thin</h4>
                            </div>
                            <div class="barchart barchart--vertical barchart-2" data-value="85">
                                <div class="barchart__bar">
                                    <div class="barchart__progress"></div>
                                </div>
                                <div class="barchart__description">
                                    <span class="h6">Ammenity</span>
                                </div>
                            </div>
                            <!--end of barchart-->
                            <div class="barchart barchart--vertical barchart-2" data-value="65">
                                <div class="barchart__bar">
                                    <div class="barchart__progress"></div>
                                </div>
                                <div class="barchart__description">
                                    <span class="h6">Transport</span>
                                </div>
                            </div>
                            <!--end of barchart-->
                            <div class="barchart barchart--vertical barchart-2" data-value="45">
                                <div class="barchart__bar">
                                    <div class="barchart__progress"></div>
                                </div>
                                <div class="barchart__description">
                                    <span class="h6">Nightlife</span>
                                </div>
                            </div>
                            <!--end of barchart-->
                            <div class="barchart barchart--vertical barchart-2" data-value="25">
                                <div class="barchart__bar">
                                    <div class="barchart__progress"></div>
                                </div>
                                <div class="barchart__description">
                                    <span class="h6">Safety</span>
                                </div>
                            </div>
                            <!--end of barchart-->
                            <div class="barchart barchart--vertical barchart-2" data-value="15">
                                <div class="barchart__bar">
                                    <div class="barchart__progress"></div>
                                </div>
                                <div class="barchart__description">
                                    <span class="h6">Schools</span>
                                </div>
                            </div>
                            <!--end of barchart-->
                        </div>
                    </div>