.bloodbank{display: inline-block; width: 100%; margin-top: 30px; }
.bloodbank h3.title{color: #EC1C23; text-align: center; font-size: 2.438em; position: relative; margin-bottom: 20px;} 
.bloodbank h3.title:before{content: ""; width: 100px; height: 3px; background: #EC1C23; position: absolute; left: 50%; margin-left: -50px; top: 120%;}
.bloodbank h4.last_update{ text-align: center; font-size: 1em; margin-bottom: 30px;} 
.bloodbank  .hover_info{opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out 0s; z-index: 20; background: #EC1C23; color: #FFF; display: table; position: absolute; width: 172px; height: 172px; border-radius: 100%; top: 0; left: 0; border: 14px solid #ebebeb;}
.bloodbank  .hover_info.scanning{opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); width: 172px; height: 172px; border: 14px solid #ebebeb;
	position: fixed;
	right: auto;
	bottom: 0;
	z-index: -100;
	left: 50%;
	top: auto;
	margin-left: -85px;
}
.bloodbank  .hover_info:hover, .bloodbank .human:hover + .hover_info{opacity: 1; transform: scale(1);}
.bloodbank  .hover_info .border_percent{border: 14px solid #479559;	border-radius: 100%;	clip: rect(0px, 100px, 210px, 0px); height: 172px; left: 0;	position: absolute; top: 0; width: 172px; z-index: 200;	}
.bloodbank  .hover_info.scanning .border_percent{display: none;}
.bloodbank  .hover_info.no_percent .border_percent{border: none;}
.bloodbank  .hover_info .tran_percent{background: #bd0f09; border-radius: 100%; clip: rect(0px, 86px, 175px, 0px); height: 172px; left: 14px;	position: absolute; top: 14px; width: 172px; z-index: 100;	}
.bloodbank  .hover_info.scanning .tran_percent{display: none;}
.bloodbank  .hover_info .tran_percent.red{background: #ec1c23;}
.bloodbank  .hover_info .border_percent.gray{border: 15px solid #EBEBEB; z-index: 300; left: -0.5px; top: -0.5px;}
.bloodbank  .hover_info .info_text{display: table-cell; vertical-align: middle; color: #FFF; position: relative; z-index: 400;}
.bloodbank  .hover_info .info_text > span{display: block;}
.bloodbank  .hover_info .info_text .status_text{font-family: 'Helvetica-Bold';line-height: 28px; padding-top: 2px; font-size: 20px;/* text-transform: uppercase; */}
.bloodbank  .hover_info .info_text .percent_value{font-family: 'Helvetica-Bold'; font-size: 2.5em; line-height: 1.1;}
.bloodbank  .hover_info .info_text .status_desc{font-size: 13px; line-height: 18px; display: block; font-weight: bold; padding: 10px 0; min-height: 45px;box-sizing: border-box;}
.bloodbank  .hover_info .info_text .social_link a{margin-top: 5px; display: inline-block; width: 26px; height: 26px; background: url(fa-icon.png) center center no-repeat;}
.bloodbank  .hover_info .info_text .social_link .tw{background-image: url('tw-icon.png')}
.bloodbank  .hover_info .info_text .social_link .gp{background-image: url('in-icon.png')}
.bloodbank   .blood_bank_level{text-align: center; display: inline-block; width: 100%;}
.bloodbank   .blood_bank_level > div{ display: inline-block; height: 194px; width: 194px; position: relative; margin: 0 10px 20px;} 
.bloodbank   .blood_bank_level .human{cursor: pointer; position: relative; width: 70px; height: 100%; display: inline-block; background: url(empty-human.jpg) center bottom no-repeat; overflow: hidden; background-size: 100% auto;}
.bloodbank   .blood_bank_level .human .blank_humam{position: absolute; z-index: 10; left: 0; top: 0; width: 100%; height: 100%; background: url(blank_human.png) center bottom no-repeat; background-size: 100% auto;}
.bloodbank   .blood_bank_level .human .fill_humam{position: absolute; left: 0; bottom: 0; width: 100%; background: #ec1c23;}
/* .bloodbank   .blood_bank_level .human .fill_humam:after{content: ""; position: absolute; bottom: 100%; left: 0; width: 100%; height: 8px; background: url(floor_blood.png) 0 0 no-repeat;} */
.bloodbank   .blood_bank_level .human .blank_humam .blood_text{position: absolute; top: 25px; left: -1px; text-align: center; font-family: 'Helvetica-Bold'; font-size: 16px; width: 100%;}
.bloodbank   .blood_bank_level .human .blank_humam .percent_text{top: 90px; font-size: 1em; font-family: 'helvetica-regular'; }
.bloodbank   .blood_bank_level .human.nearly_full .blank_humam .percent_text{color: #FFF;}
.bloodbank   .blood_bank_level .human .blank_humam .blood_text.white{color: #FFF;}
.bloodbank .healthy_bar{display: inline-block; width: 100%; text-align: center; margin-top: 20px;}
.bloodbank .healthy_bar ul{display: inline-block; width: 100%;}
.bloodbank .healthy_bar ul li{font-size: 20px; float: left; font-weight: bold; width: 25%; border-bottom: 8px solid #197b30; text-align: center;}
.bloodbank .healthy_bar ul li.low{border-color: #f8b033}
.bloodbank .healthy_bar ul li.critical{border-color: #ca0000}
.bloodbank .mod_bottons{display: inline-block; width: 100%; text-align: center; padding-bottom: 30px; margin-top: 10px;}
.bloodbank .mod_bottons > a{margin: 10px;}
@media screen and (-webkit-min-device-pixel-ratio:0){
	.bloodbank  .hover_info .border_percent{left: -14px; top: -14px;}
	.bloodbank  .hover_info .border_percent.gray{left: -14.8px; top: -14.6px;}
	.bloodbank  .hover_info .tran_percent{left: 0; top: 0;}
}
@media (max-width: 479px){
	.bloodbank .healthy_bar ul li{
		font-size: 14px;
	}
}
@media (max-width: 470px){
	.bloodbank .blood_bank_level{
		width: 50%;
		overflow: hidden;
		float: left;
	}
	.bloodbank .blood_bank_level > div{
		width: 150px;
		height: 150px;
		margin: 5px;
	}
	.bloodbank .blood_bank_level .human{
		width: 54px;
		background-size: cover;
	}
	.bloodbank .blood_bank_level .human .blank_humam{
		background-size: cover;
	}
	.bloodbank .blood_bank_level .human .blank_humam .blood_text{
		top: 20px;
		font-size: 14px;
		left: 0;
	}
	
	
	.bloodbank .hover_info .border_percent,
	.bloodbank .hover_info{
		width: 132px;
		height: 132px;
		border-width: 9px;
	}
	.bloodbank .hover_info .border_percent{
		clip: rect(0px, 75px, 150px, 0px);
		left: -9px;
		top: -9px;
	}
	.bloodbank .hover_info{
		display: block;
		top: 1px;
	}
	.bloodbank .hover_info .info_text{
		display: inline-block;
		width: 100%;
		max-height: 132px;
		max-width: 132px;
		overflow: hidden;
		padding-top: 10px;
		box-sizing: border-box;
	}
	.bloodbank .hover_info .tran_percent{
		width: 132px;
		height: 132px;
		left: 0px;
		top: 0px;
		clip: rect(0px, 66px, 132px, 0px);
	}
	.bloodbank .hover_info .border_percent.gray{
		border-width: 9.5px;
		left: -10px;
		top: -9.5px;
	}
	.bloodbank .hover_info:not(.scanning) .info_text .status_text{
		font-size: 15px !important;
		line-height: 16px;
	}
	.bloodbank .hover_info:not(.scanning) .info_text .status_desc{
		font-size: 12px;
		padding: 3px;
		line-height: 13px;
	}
	.bloodbank .hover_info:not(.scanning) .info_text .social_link a{
		width: 20px;
		height: 20px;
		background-size: contain;
	}
}
@media (max-width: 350px){
	.bloodbank .blood_bank_level > div{
		margin: 0;
	}
}