/*========= styles for Services chart ==========*/
.chartContainer{
	margin: -50px auto 20px;
	width: 700px;
	height: 520px;
	overflow: hidden;
}
.chartContainer span{
	/*display:block;*/
	display:inline-block;
}
.chartContainer span br{
	margin-top:-20px;
}
.circleDiv{
	position:relative;
	width: 100px;
	height:70px;
	padding: 25px 10px;
	line-height: 1.5;
	background-color: #216982;
	color: #f1f1f1;
	font-family: Verdana, Geneva, sans-serif;
	text-align: center;
	border: 2px solid #F57F20;
	border-radius: 200px;
	cursor:default;
	box-shadow: 1px 1px 5px #888888;
}
.circleDiv>span{
	color: #f1f1f1;
	font-size:15px;
	font-weight:normal;
	margin-bottom:10px;
}
.circleDiv .hover{
	margin:10px auto;
	width:80%;
	font-size:9px;
	position: relative;
	display: inline-block;
}

.circleDiv .tooltip {
	  z-index: 999;
	  position: absolute;
	  bottom:150px;
	  left:-72px;
	  width:200px;
	  padding:10px;
	  font-size:12px;
	  color: #FFFFFF;
	  background-color: rgba(0,0,0,0.8);
	  line-height: normal;
	  text-align: center;
	  opacity:0;
	  visibility: hidden;
	  border: 3px solid #FFD800;
	  border-radius: 10px 0px 10px 0px;
	  transition: bottom 0.3s ease-in-out 0s, opacity 0.5s ease-in-out 0s, visibility 0.4s ease-in-out 0s;
}
.circleDiv .tooltip:before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  width: 0; height: 0;
  border-top: 33px solid #FFD800;
  border-right: 13px solid transparent;
  border-left: 13px solid transparent;
}
.circleDiv .tooltip:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -12px;
  width: 0; height: 0;
  border-top: 28px solid #000000;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}
.circleDiv .hover:hover{
    color: #FFD800;
}
.circleDiv .hover:hover .tooltip {
  visibility: visible;
  opacity: 1;
  bottom: 52px;
  left: 50%;
  margin-left: -112px;
  
}
.chartContainer #MediscreenSystem{
	top: 119px;
	left: 286px;
}
.chartContainer #NATA{
	top: 105px;
	left: 286px;
}
.chartContainer #Tested{
	left: 135px;
	top: -85px;
}
.chartContainer #Accessible{
	left: 440px;
	top: -236px;
}
.chartContainer #Private{
	top: -215px;
	left: 400px;
}
.chartContainer #Accurate{
	top: -340px;
	left: 175px;
}
/*styles for the arrows in service chart*/
.chartContainer #curvedarrow {
	position: relative;
	width: 0px;
	height: 0px;
	border-top: 20px solid transparent;
	border-right: 20px solid #216982;
	transform: rotate(10deg);
	-webkit-transform: rotate(10deg);
	 -moz-transform: rotate(10deg);
	 -ms-transform: rotate(10deg);
	 -o-transform: rotate(10deg);
	margin-left: 10px;
 }
.chartContainer #curvedarrow:after {
	content: "";
	position: absolute;
	border-width: 17px 0px 0px;
	border-style: solid;
	border-color: #216982 transparent transparent;
	-moz-border-top-colors: none;
	-moz-border-right-colors: none;
	-moz-border-bottom-colors: none;
	-moz-border-left-colors: none;
	border-image: none;
	top: -26px;
	left: -10px;
	width: 18px;
	height: 20px;
	transform: rotate(45deg);
	 -webkit-transform: rotate(45deg);
	 -moz-transform: rotate(45deg);
	 -ms-transform: rotate(45deg);
	 -o-transform: rotate(45deg);
 }
 
 @media only screen and (min-width:621px) and (max-width:767px){
	.chartContainer{
		width:500px;
		margin-left:-30px;
	}
	.chartContainer #NATA {
		left:189px;
	}
	.chartContainer #Tested {
		left:35px;
	}
	.chartContainer #MediscreenSystem{
		left:189px;
	}
	.chartContainer #Accurate{
		left:75px;
	}
	.chartContainer #Private{
		left:300px;
	}
	.chartContainer #Accessible{
		left:340px;
	}
	.chartContainer #NATA+br+#curvedarrow{
		left:229px !important;
	}
	.chartContainer #MediscreenSystem+br+#curvedarrow{
		left:153px !important;
	}
	.chartContainer #Tested+br+#curvedarrow{
		left:173px !important;
	}
	.chartContainer #Accessible+br+#curvedarrow{
		left:288px !important;
	}
	.chartContainer #Accurate+br+#curvedarrow{
		left:310px !important;
	}
	.chartContainer .circleDiv .tooltip{
		width:150px;
		font-size:10px;
		left:-47px;
		bottom:120px;
	}
	.chartContainer .circleDiv .hover:hover .tooltip{
		left:65px;
		bottom:45px;
	}
 }
 @media only screen and (max-width:620px){
	.chartContainer{
		width:300px;
		height:410px;
		padding-bottom:10px;
	}
	.chartContainer .circleDiv{
		width: 80px;
		height: 50px;
		padding: 17px 5px 23px;
		line-height: normal;
	}
	.chartContainer .circleDiv .hover{
		margin: 7px;
		display: inline-block;
	}
	.chartContainer .circleDiv  span{
		font-size:10px;
		line-height: normal;
	}
	.chartContainer #curvedarrow{
		border-top: 15px solid transparent;
		border-right: 15px solid rgb(33, 105, 130);
	}
	.chartContainer #curvedarrow:after{
		border-width: 12px 0px 0px;
		top: -18px;
		left: -5px;
		width: 12px;
		height: 12px;
	}
	.chartContainer #NATA {
		top:80px;
		left:105px;
	}
	.chartContainer #Tested {
		left:0px;
	}
	.chartContainer #MediscreenSystem{
		left:105px;
		top: 90px !important;
	}
	.chartContainer #Accurate{
		left: 13px;
		top: -280px;
	}
	.chartContainer #Private{
		left: 200px;
		top: -190px;
	}
	.chartContainer #Accessible{
		left: 205px;
		top: -210px;
	}
	.chartContainer #NATA+br+#curvedarrow{
		left:133px !important;
		top: 85px !important;
		transform: rotate(224deg) !important;
		-webkit-transform: rotate(224deg) !important;
		-moz-transform: rotate(224deg) !important;
		-ms-transform: rotate(224deg) !important;
		-o-transform: rotate(224deg) !important;
		
	}
	.chartContainer #MediscreenSystem +br+ #curvedarrow {
		left: 84px !important;
		top: 0px !important;
		transform: rotate(165deg) !important;
		-webkit-transform: rotate(165deg) !important;
		-moz-transform: rotate(165deg) !important;
		-ms-transform: rotate(165deg) !important;
		-o-transform: rotate(165deg) !important;
		
	}
	.chartContainer #Tested+br+#curvedarrow{
		left:90px !important;
	}
	.chartContainer #Accessible+br+#curvedarrow{
		left: 182px !important;
		top: -165px !important;
		transform: rotate(358deg) !important;
		-webkit-transform: rotate(358deg) !important;
		-moz-transform: rotate(358deg) !important;
		-ms-transform: rotate(358deg) !important;
		-o-transform: rotate(358deg) !important;
	}
	.chartContainer #Accurate+br+#curvedarrow{
		left: 185px !important;
		top: -450px !important;
		transform: rotate(280deg) !important;
		-webkit-transform: rotate(280deg) !important;
		-moz-transform: rotate(280deg) !important;
		-ms-transform: rotate(280deg) !important;
		-o-transform: rotate(280deg) !important;
	}
	.chartContainer .circleDiv .tooltip{
		width:80px;
		font-size:10px;
		left:-15px;
		bottom:100px;
		padding:5px;
	}
	 .chartContainer .circleDiv .hover:hover .tooltip{
		left:97px;
		bottom:45px
	 }
	  .chartContainer #NATA .tooltip{
		 width:160px;
		 left:-57px
	 }
	 .chartContainer #NATA .hover:hover .tooltip{
		 left:55px
	 }
	 .chartContainer #MediscreenSystem .tooltip{
		 width:160px;
		 left:-57px
	 }
	 .chartContainer #MediscreenSystem .hover:hover .tooltip{
		 left:55px
	 }
	.chartContainer #Tested .tooltip{
		left:80px;bottom:30px;
	 }
	 .chartContainer #Tested .hover:hover .tooltip{
		 bottom:-61px;left:192px;
	 }
	 .chartContainer #Tested .tooltip:after{
		left: -25px;
		top: 55px;
 		border-top: 8px solid transparent;
  		border-right: 28px solid #000000;
  		border-left: 10px solid transparent;
		border-bottom: 10px solid transparent;
	}
	 .chartContainer #Tested .tooltip:before {
		left: -35px;
		top: 52px;
		border-top:11px solid transparent;
  		border-right: 35px solid #FFD800;
  		border-left:15px solid transparent;
		border-bottom: 14px solid transparent;
	 }
	 
	 .chartContainer #Accurate .tooltip{
		left:81px;bottom:30px;width:178px
	 }
	 .chartContainer #Accurate .hover:hover .tooltip{
		 bottom:-60px;left:193px;
	 }
	 .chartContainer #Accurate .tooltip:after{
		left: -25px;
		top: 55px;
 		border-top: 8px solid transparent;
  		border-right: 28px solid #000000;
  		border-left: 10px solid transparent;
		border-bottom: 10px solid transparent;
	}
	 .chartContainer #Accurate .tooltip:before {
		left: -35px;
		top: 52px;
		border-top:11px solid transparent;
  		border-right: 35px solid #FFD800;
  		border-left:15px solid transparent;
		border-bottom: 14px solid transparent;
	 }
 }
 
/*=================== style for ie only ====================*/
@media screen\0 {
    .chartContainer #Accessible{ left: 438px; top: -240px; }
	.chartContainer #Accurate+br+#curvedarrow {
		left:406px !important;
		top:-567px !important;
		-ms-transform: rotate(292deg) !important;
	}
	.chartContainer #NATA + br + #curvedarrow {
		top:115px !important;
	}
	.chartContainer #NATA{top:107px; }
	.chartContainer #Tested + br + #curvedarrow {
		top: -40px !important;
	}
	.chartContainer #Accurate{top:-335px !important;}
	.chartContainer #Accessible + br + #curvedarrow {
		top: -191px !important;
	}
	.chartContainer #Private{top:-210px !important;}
}
/* Safari */
/* Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    /* Safari and Chrome, if Chrome rule needed */
    .someClass {
     /*color:#c00;*/
    }
    /* Safari 5+ ONLY */
    ::i-block-chrome, .chartContainer #NATA + br + #curvedarrow {
        top: 118px !important;
    }
    ::i-block-chrome, .chartContainer #Accurate + br + #curvedarrow {
        top: -595px !important;
        -webkit-transform:rotate(296deg) !important;
    }
    ::i-block-chrome, .chartContainer #Accessible + br + #curvedarrow {
        top: -225px !important;
         -webkit-transform:rotate(358deg) !important;
    }
    ::i-block-chrome, .chartContainer #Tested + br + #curvedarrow {
        top: -61px !important;
        -webkit-transform:rotate(84deg) !important;
    }
    ::i-block-chrome, .chartContainer #NATA{
        top:115px;
    }
    ::i-block-chrome, .chartContainer #Accurate{
        top:-377px;
    }
    ::i-block-chrome, .chartContainer #Private{
        top:-245px;
    }
	.circleDiv .hover{
		-webkit-transition:none;
	}
	.chartContainer .circleDiv{
		box-shadow:none;
	}
}
@media screen and (-webkit-min-device-pixel-ratio:0) and (max-width:619px){
     ::i-block-chrome, .chartContainer #NATA + br + #curvedarrow {
        top: 93px !important;
    }
  ::i-block-chrome, .chartContainer #NATA{
        top:97px;
    }
    ::i-block-chrome, .chartContainer #Accessible{
        left:205px;
        top:-220px;
    }
    ::i-block-chrome, .chartContainer #Accurate{
        top:-310px;
        left:17px;
    }
    ::i-block-chrome, .chartContainer #Private{
        top:-210px;
        left:194px
    }
    ::i-block-chrome, .chartContainer #Accessible + br + #curvedarrow {
        top: -191px !important;
         -webkit-transform:rotate(358deg) !important;
    }
    ::i-block-chrome, .chartContainer #Accurate + br + #curvedarrow {
        top: -484px !important;
        left:186px !important;
        -webkit-transform:rotate(290deg) !important;
    }
	  .chartContainer{
        padding-bottom:40px;
    }
    ::i-block-chrome, .chartContainer #Accurate .tooltip{
        width:168px;
     }
}