
 .ju-coolicons.type9 { padding: 10px;margin-bottom: 30px }

.ju-coolicons.type9{text-align:center;}
.ju-coolicons.type9 .icon{margin:0 auto 15px; padding:0px; text-align:center; width:105px; height:105px; border:1px solid #dcdcdc; position:relative; -webkit-border-radius:100%; -moz-border-radius:100%; -ms-border-radius:100%; -o-border-radius:100%; border-radius:100%; -webkit-transition:all 0.4s ease 0s; -moz-transition:all 0.4s ease 0s; -ms-transition:all 0.4s ease 0s; -o-transition:all 0.4s ease 0s; transition:all 0.4s ease 0s;}
.ju-coolicons.type9 .icon span{font-size:40px; line-height:105px; width:105px; height:105px; position:relative; z-index:9; transition:all 300ms linear 0s; -webkit-transition:all 300ms linear 0s; -moz-transition:all 300ms linear 0s; -ms-transition:all 300ms linear 0s; -o-transition:all 300ms linear 0s;}	
.ju-coolicons.type9 > h5{width:90%; display:block; margin:0px auto 20px; border-bottom:1px solid #dcdcdc; line-height:24px; text-align:center; padding-bottom:20px; text-transform:uppercase; position:relative;}
.ju-coolicons.type9:hover .icon span{color:#FFF;}
.ju-coolicons.type9 .icon:before{content:""; position:absolute; opacity:0; z-index:0; width:90px; height:90px; top:0px; bottom:0px; margin:auto; left:0px; right:0px; border-radius:100%; -moz-border-radius:100%; -webkit-border-radius:100%; transition:all 300ms linear; -moz-transition:all 300ms linear; -webkit-transition:all 300ms linear; transform:scale(0); -webkit-transform:scale(0); -moz-transform:scale(0);}
.ju-coolicons.type9:hover .icon:before{opacity:1; transform:scale(1); -webkit-transform:scale(1); -moz-transform:scale(1);}
.ju-coolicons.type9 > h5:after, .ju-coolicons.type9 > h5:before{background:#BABABA; bottom:-5px; content:""; height:10px; position:absolute; right:100%; width:10px; margin:0px -5px 0px 0px; -webkit-border-radius:100%; -moz-border-radius:100%; -ms-border-radius:100%; -o-border-radius:100%; border-radius:100%; -webkit-transition:all 0.4s ease 0s; -moz-transition:all 0.4s ease 0s; -ms-transition:all 0.4s ease 0s; -o-transition:all 0.4s ease 0s; transition:all 0.4s ease 0s;}
.ju-coolicons.type9:hover > h5:after{right:50%; margin:0px -7px 0px 0px; width:14px; height:14px;}
.ju-coolicons.type9 > h5:before{left:100%;}
.ju-coolicons.type9:hover > h5:before{left:50%; margin:0px 0px 0px -7px; width:14px; height:14px;}

