@-webkit-keyframes animate-width {  0% {
 width: 0;
}
 100% {
 visibility: visible;
}
}
@-moz-keyframes animate-width {  0% {
 width: 0;
}
 100% {
 visibility: visible;
}
}
@keyframes animate-width {  0% {
 width: 0;
}
 100% {
 visibility: visible;
}
}
@-webkit-keyframes animate-height {  0% {
 height: 0;
}
 100% {
 visibility: visible;
}
}
@-moz-keyframes animate-height {  0% {
 height: 0;
}
 100% {
 visibility: visible;
}
}
@keyframes animate-height {  0% {
 height: 0;
}
 100% {
 visibility: visible;
}
}
body { background-color: #fff; color: #cdcdcd; /*font-family: arial, sans-serif;*/ }
#bar-chart { height: 270px; margin: 30px auto 0 auto; position: relative; width: 90%; }

.mid_side #bar-chart { height: 306px; margin: 30px auto 0 auto; position: relative; width: 90%; }
#bar-chart * { box-sizing: border-box; }
#bar-chart .graph { height: 100%; position: relative; }
#bar-chart .bars { height: 100%; padding: 0; position: absolute; width: 100%; z-index: 10; }
#bar-chart .bar-group { display: block; float: left; height: 100%; margin-right: 10%; position: relative; width: 100%; }
#bar-chart .bar-group:last-child { margin-right: 0; }
#bar-chart .bar-group .bar { animation: 0.4s cubic-bezier(0.35, 0.95, 0.67, 0.99) 0s normal forwards 1 running animate-height; border: 1px solid #383838; bottom: 0; box-shadow: 1px 0 2px rgba(0, 0, 0, 0.15); cursor: pointer; height: 0; position: absolute; text-align: center; visibility: hidden; width: 56px; }
#bar-chart .bar-group .bar:nth-child(2) { left: auto; right: 0; }
#bar-chart .bar-group .bar:nth-child(3) { left: 70%; }
#bar-chart .bar-group .bar-1 { animation-delay: 0.3s; float: left; }
#bar-chart .bar-group .bar-2 { animation-delay: 0.4s; float: right; }
#bar-chart .bar-group .bar-3 { animation-delay: 0.5s; }
/*#bar-chart .stat-1 { background-image: linear-gradient(to right, #ff4500 0%, #ff4500 47%, #cf3a02 50%, #cf3a02 100%);}*/
#bar-chart .stat-1 { background: #dfd9e8 none repeat scroll 0 0; }
/*#bar-chart .stat-2 {background-image: linear-gradient(to right, #b8f123 0%, #b8f123 47%, #79a602 50%, #79a602 100%);}*/
#bar-chart .stat-2 { background: #d9eef3 none repeat scroll 0 0; }





	


#bar-chart .bar-group .bar { visibility: hidden; height: 0; -webkit-animation: animate-height; -moz-animation: animate-height; animation: animate-height; animation-timing-function: cubic-bezier(0.35, 0.95, 0.67, 0.99); -webkit-animation-timing-function: cubic-bezier(0.35, 0.95, 0.67, 0.99); -moz-animation-timing-function: cubic-bezier(0.35, 0.95, 0.67, 0.99); animation-duration: 0.4s; -webkit-animation-duration: 0.4s; -moz-animation-duration: 0.4s; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; box-shadow: 1px 0 2px rgba(0, 0, 0, 0.15); border: 1px solid #2d2d2d; border-radius: 0px; bottom: 0; cursor: pointer; height: 0; position: absolute; text-align: center; width:56px; }








 @media screen and (max-width:1300px) {

#bar-chart { height: 240px; }

.mid_side #bar-chart{ height: 240px; }

#bar-chart{width: 100%;}
#bar-chart .bar-group .bar { width: 52px;}
}
 @media screen and (max-width:1150px) {

#bar-chart { height: 219px; width: 100%; }

.mid_side #bar-chart { height: 219px; width: 100%; }

#bar-chart .bar-group .bar { width: 43px; }


}
 @media screen and (max-width:992px) {
	 

#bar-chart { height: 190px; width: 100%; }	 
.mid_side #bar-chart { height: 190px; width: 100%; }
.my_list_middel_right .grphd::before { width: 84%; bottom: -76px; left: -6px; }


}
@media screen and (max-width:992px) {
#bar-chart { height: 133px; }	

.mid_side #bar-chart { height: 303px; }
#bar-chart .bar-group .bar { width: 61px; }
.my_list_middel_right #bar-chart .bar-group .bar { width: 32px; }
}
@media screen and (max-width:767px) {

#bar-chart { height:168px; }

.mid_side #bar-chart{ height:210px; }
.my_list_middel_right .grphd::before {bottom: -72px;  }
#bar-chart .bar-group .bar { width: 40px; }
}
 @media screen and (max-width:480px) {
	 
#bar-chart { height: 110px; }

.mid_side #bar-chart{ height: 140px; }

.my_list_middel_right .grphd::before { bottom: -20px; }
#bar-chart .bar-group .bar { width: 23px; }
}