.buble-box{ position: relative; display: table; vertical-align: middle; float: left;}

.blue .bbl{background: rgba(15,128,196,0.8);}

.green .bbl{background: rgba(60,170,54,0.8);}

.orange .bbl{background: rgba(234,91,12,0.8);}

.yellow .bbl{background: rgba(255,204,3,0.6);}

.dark-green .bbl{background: rgba(0,118,52,0.8);}

.gray .bbl{background: rgba(199,199,198,0.8);}

.red .bbl{background: rgba(194,35,24,0.8);}

.dark-blue .bbl{background: rgba(0,91,155,0.8);}





.blue .bbl-hd{color: #1280c4;}

.green .bbl-hd{color: #007634;}

.orange .bbl-hd{color: #c22318;}

.yellow .bbl-hd{color: #d18f08;}

.dark-green .bbl-hd{color: #007634;}

.gray .bbl-hd{color: #9d9d9c;}

.red .bbl-hd{color: #c22318; }

.dark-blue .bbl-hd{color: #005b9b;}



.bbl-hd{background: rgba(255,255,255,0.9); text-align: center; padding: 10px 0 ; position: absolute; top: 50%; left: 0; width: 100%; z-index: 99; margin-top: -13px; font-size: 11px; font-weight:bold; }

.bbl-hd a{line-height: 14px; display: block; color: #000 }

.dbl-line{font-size: 11px;  padding: 3px 0;}

.bbl-wrap{position: relative; width: 100%; height: 300px; display: table; vertical-align: middle;}

.bbl{border-radius: 50%; float: left; position: absolute; top: 50%; cursor: pointer; -webkit-transition: 0.3s ease;

           -moz-transition: 0.3s ease;

         -o-transition: 0.3s ease;

            transition: 0.3s ease;}

.bbl:hover {-webkit-transform: scale(1.1);

           -moz-transform: scale(1.1);

             -o-transform: scale(1.1);

            transform: scale(1.1);}





.bbl:before{content: ""; background: #1e1e1c; height: 32px;  display: block;  left: 0; right: 0; margin:auto; top:-42px; width: 1px; position: absolute;} 

.bbl:after{  background: #fff none repeat scroll 0 0;    border: 1px solid #1e1e1c; border-radius: 50%; color: #005;  content: ""; display: block;  font-size: 28px;    height: 10px;    left: 0; right: 0; margin:auto;    position: absolute;      top: -5px;        width: 10px;} 

.bbl .tooltip{  display: inline-block;  font-size: 11px; opacity: 1; left: 0;  margin: auto;  position: absolute;  right: 0; text-align: center;  text-transform: capitalize; top: -68px;  width: 100%; min-width:85px;}

.bbl .tooltip a{color: #000; line-height: 14px; display: block;}

.bbl.last-bbl:before,

.bbl.last-bbl:after{display:none;}



.bbl.bottom:after{top:inherit; bottom: -47%}

.bbl.bottom:before{top:inherit; bottom: -80%}

.bbl.bottom .tooltip{top:inherit !important; bottom: 0; margin-top: 83%;}



.bbl.angle-1:before{ transform: rotate(-60deg); -moz-transform: rotate(-60deg); -webkit-transform: rotate(-60deg); -o-transform: rotate(-60deg); -ms-transform: rotate(-60deg); -sand-transform: rotate(-60deg);  left: -30%;    top: -30px; }

.bbl.angle-1 .tooltip{ left: -54px; top: -50px;}

.bbl.angle-1 .tooltip.dbl-line  {  left: -60px;  top: -55px;}

.bbl.bottom.angle-1:before{ transform: rotate(50deg); -moz-transform: rotate(50deg); -webkit-transform: rotate(50deg); -o-transform: rotate(50deg); -ms-transform: rotate(50deg); -sand-transform: rotate(50deg); left: -26%;   top: 42%;}

.bbl.bottom.angle-1 .tooltip {  left: -82px;  top: -55px;}

.bbl.bottom.angle-1 .tooltip.dbl-line{margin-top: 67%;}



.bbl.angle-2::before {  left: -25%;  top: -27px;  transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -sand-transform: rotate(-45deg);}

.bbl.angle-2 .tooltip {  left: -35px;  top: -55px;}

.bbl.bottom.angle-2::before {  left: -22%;  top: 47%;  transform: rotate(40deg); -moz-transform: rotate(40deg); -webkit-transform: rotate(40deg); -o-transform: rotate(40deg); -ms-transform: rotate(40deg); -sand-transform: rotate(40deg);}

.bbl.bottom.angle-2 .tooltip {  left: -60px;  top: -55px;}





.bbl.angle-3::before {  left: -30%;    top: -30px;    transform: rotate(-30deg); -moz-transform: rotate(-30deg); -webkit-transform: rotate(-30deg); -o-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -sand-transform: rotate(-30deg);}

.bbl.angle-3 .tooltip {  left: -20px;  top: -53px;}

.bbl.angle-3 .tooltip.dbl-line  {top: -70px;}

.bbl.bottom.angle-3::before {  left: -13%;  top: 57%;  transform: rotate(20deg); -moz-transform: rotate(20deg); -webkit-transform: rotate(20deg); -o-transform: rotate(20deg); -ms-transform: rotate(20deg); -sand-transform: rotate(20deg);}

.bbl.bottom.angle-3 .tooltip {  left: -27px;  top: -55px; margin-top: 85%;}
.bbl.bottom.angle-3 .tooltip.dbl-line{margin-top: 90%;} 


.bbl.angle-4::before {  left: 1px;  top: -34px;  transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); -sand-transform: rotate(0deg);}

.bbl.angle-4 .tooltip {  left: 0;  top: -50px;}

.bbl.angle-4 .tooltip.dbl-line{top: -65px;}

.bbl.bottom.angle-4::before {  left: 0;  top: 55%;  transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -mstransform: rotate(0deg); -sand-transform: rotate(0deg);}

.bbl.bottom.angle-4 .tooltip {  left: -5px;  margin-top: 85%;  top: -55px;}

.bbl.bottom.angle-4 .tooltip.dbl-line { margin-top: 90%; }



.bbl.angle-5::before {  left: 13px;  top: -34px;  transform: rotate(20deg); -moz-transform:rotate(20deg); -webkit-transform:rotate(20deg); -o-transform:rotate(20deg); -ms-transform: rotate(20deg); -sand-transform: rotate(20deg);}

.bbl.angle-5 .tooltip {    left: 15px;    top: -53px;}

.bbl.angle-5 .tooltip.dbl-line {top: -70px;}

.bbl.bottom.angle-5::before {  left: 8px;  top: 40%;  transform: rotate(-20deg); -moz-transform: rotate(-20deg); -webkit-transform: rotate(-20deg); -o-transform: rotate(-20deg); -ms-transform: rotate(-20deg); -sand-transform: rotate(-20deg);}

.bbl.bottom.angle-5 .tooltip {  left: 10px;  margin-top: 80%;  top: -55px;}





.bbl.angle-6::before {  left: 20px;  top: -32px;  transform: rotate(30deg); -moz-transform: rotate(30deg); -webkit-transform: rotate(30deg); -o-transform: rotate(30deg); -ms-transform: rotate(30deg); -sand-transform: rotate(30deg);}

.bbl.angle-6 .tooltip {  left: 25px;  top: -55px; }

.bbl.angle-6 .tooltip.dbl-line {top: -67px;}

.bbl.bottom.angle-6::before {  left: 15px;  top: 45%;  transform: rotate(-30deg); -moz-transform: rotate(-30deg); -webkit-transform: rotate(-30deg); -o-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -sand-transform: rotate(-30deg);}

.bbl.bottom.angle-6 .tooltip {  left: 20px;  margin-top: 78%;  top: -55px;}



.bbl.angle-7::before {  left: 31px;  top: -30px;  transform: rotate(49deg); -moz-transform: rotate(49deg); -webkit-transform: rotate(49deg); -o-transform: rotate(49deg); -ms-transform: rotate(49deg); -sand-transform: rotate(49deg);}

.bbl.angle-7 .tooltip {  left: 35px;  top: -50px;}

.bbl.angle-7 .tooltip.dbl-line {  left: 35px;  top: -65px;}



.bbl.bottom.angle-7::before {  left: 11px;  top: 52%;  transform: rotate(-27deg); -moz-transform: rotate(-27deg); -webkit-transform: rotate(-27deg); -o-transform: rotate(-27deg); -ms-transform: rotate(-27deg); -sand-transform: rotate(-27deg);}

.bbl.bottom.angle-7 .tooltip {  left: 16px;  margin-top: 95%;  top: -55px;  }



.wrapper .buble-box:first-child .bbl-hd:before{

    width: 20px;

    content: '';

    position: absolute;

    background: rgba(255,255,255,0.9);

    height: 34px;

    top: 0;

    left: -20px;

}

.wrapper .buble-box.bbl_clr_c22318 .bbl-hd:after {

    width: 20px;

    content: '';

    position: absolute;

    background: rgba(255,255,255,0.9);

    height: 34px;

    top: 0;

    right: -20px;

}

@media (max-width: 767px){
	.bubble-content{
		display:none;
	}
}