#service * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

}


#service span, #service a, #service a:hover {
    display: inline-block;
    text-decoration: none;
}

#service{ float: left;  overflow: hidden; position: relative;}

.ju-coolicons { width:100%; margin:0px; padding:0px; }

.ju-coolicons.type1, .ju-coolicons.type2, .ju-coolicons.type4, .ju-coolicons.type5, .ju-coolicons.type6, .ju-coolicons.type8, .ju-coolicons.type9, .ju-coolicons.type10 { padding: 10px; }
.ju-coolicons.type1, .ju-coolicons.type2, .ju-coolicons.type4, .ju-coolicons.type6 { text-align:center; }
.ju-coolicons.type1 .icon, .ju-coolicons.type2 .icon, .ju-coolicons.type4 .icon, .ju-coolicons.type5 .icon, .ju-coolicons.type6 .icon { display: inline-block; margin-bottom:15px; text-align:center; }
.ju-coolicons.type1 .icon, .ju-coolicons.type2 .icon, .ju-coolicons.type4 .icon { background:#ededed; border:5px solid #dcdcdc; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; transition:all 300ms linear; -webkit-transition:all 300ms linear; -moz-transition:all 300ms linear; -ms-transition:all 300ms linear; -o-transition:all 300ms linear; }
.ju-coolicons.type1 .icon span, .ju-coolicons.type2 .icon span, .ju-coolicons.type4 .icon span { color:#a5a5a5; display:inline-block; font-size:40px; }
.ju-coolicons.type1:hover .icon span, .ju-coolicons.type2:hover .icon span, .ju-coolicons.type3:hover .icon span, .ju-coolicons.type4:hover .icon span { color:#fff; }
.ju-coolicons.type1 h5, .ju-coolicons.type2 h5, .ju-coolicons.type4 h5 { border-bottom:1px solid #ededed; padding:0px 0px 10px; text-transform:uppercase; }
.ju-coolicons.type1 h5 a:hover, .ju-coolicons.type2 h5 a:hover, .ju-coolicons.type4 h5 a:hover { color:#333334; }

.ju-coolicons.type2, .ju-coolicons.type4 { background:#f5f5f5; position:relative; }
.ju-coolicons.type2 .icon { border: none; position: relative; z-index: 1; }
.ju-coolicons.type2 .icon span, .ju-coolicons.type4 .icon span { background: none; }
.ju-coolicons.type2 h5, .ju-coolicons.type4 h5 { border-color: #dcdcdc; }
.ju-coolicons.type4 .dt-sc-button { background: #808080; border: none; color: #fff; display: block; font-size: 12px; font-weight: bold; height: 40px; line-height: 40px; padding: 0; position: absolute; bottom: -40px; left: 0; text-transform: uppercase; width: 100%; }

.ju-coolicons.type3, .ju-coolicons.type7 { position: relative; width: auto; }
.ju-coolicons.type3 { padding: 10px 10px 25px 105px; }
.ju-coolicons.type3 .icon, .ju-coolicons.type7 .icon { display: inline-block; position: absolute; left: 0; }
.ju-coolicons.type3 .icon { top: 10px; left: 5px; }
.ju-coolicons.type3 .icon span { font-size:40px; color:#FFF;  display: inline-block; font-size:30px; margin-bottom:15px; text-align:center; }
 .ju-coolicons.type7 .icon span { display: inline-block; font-size:30px;text-align:center; }
.ju-coolicons.type3 .icon span { border: 5px solid rgba(0,0,0,0); width: 90px; height:90px; }
.ju-coolicons.type3 h5 { font-size: 16px; }
.ju-coolicons.type7 h5 { font-size: 14px; line-height: 26px; text-transform: uppercase; }

.ju-coolicons.type5 { text-align:center; }
.ju-coolicons.type5 .icon span { font-size:60px; }
.ju-coolicons.type5 h5 { font-size:16px; margin-bottom:10px; text-transform:uppercase; }

.ju-coolicons.type5:hover .icon span { transform: rotateY(360deg); -webkit-transform: rotateY(360deg); -moz-transform: rotateY(360deg); -ms-transform: rotateY(360deg); -o-transform: rotateY(360deg); 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.type6 .icon {  background: none; cursor: pointer; height: 155px; overflow: hidden; position: relative; width: 155px; /*transform: translateZ(0px); -webkit-transform: translateZ(0px); -moz-transform: translateZ(0px); -ms-transform: translateZ(0px); -o-transform: translateZ(0px);*/ }
.ju-coolicons.type6 .icon span { bottom: 0; display: inline-block; font-size: 30px; height: 125px; left: 0; line-height: 125px; margin: auto; position: absolute; right: 0; top: 0; width: 125px; transform: scale(1) rotate(0deg) translate(0px); -webkit-transform: scale(1) rotate(0deg) translate(0px); -moz-transform: scale(1) rotate(0deg) translate(0px); -ms-transform: scale(1) rotate(0deg) translate(0px); -o-transform: scale(1) rotate(0deg) translate(0px); }

.ju-coolicons.type6 .icon .fa { border: 5px solid; }
.icon span img { display: inline-block;  -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; height: inherit; 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.type6 h3 { border-bottom: none; font-size: 24px; font-weight: normal; margin-bottom: 15px; padding: 0; }		

.ju-coolicons.type6 .icon:before, .ju-coolicons.type6 .icon:after { content: ""; height: inherit; left: 0; position: absolute; top: 0; width: inherit; 
box-shadow: 75px 0 0 rgba(255, 255, 255, 0.01) inset, 0 75px 0 rgba(255, 255, 255, 0.01) inset, -75px 0 0 rgba(255, 255, 255, 0.01) inset, 0 -75px 0 rgba(255, 255, 255, 0.01) inset;
-webkit-box-shadow: 75px 0 0 rgba(255, 255, 255, 0.01) inset, 0 75px 0 rgba(255, 255, 255, 0.01) inset, -75px 0 0 rgba(255, 255, 255, 0.01) inset, 0 -75px 0 rgba(255, 255, 255, 0.01) inset;
-moz-box-shadow: 75px 0 0 rgba(255, 255, 255, 0.01) inset, 0 75px 0 rgba(255, 255, 255, 0.01) inset, -75px 0 0 rgba(255, 255, 255, 0.01) inset, 0 -75px 0 rgba(255, 255, 255, 0.01) inset;
-ms-box-shadow: 75px 0 0 rgba(255, 255, 255, 0.01) inset, 0 75px 0 rgba(255, 255, 255, 0.01) inset, -75px 0 0 rgba(255, 255, 255, 0.01) inset, 0 -75px 0 rgba(255, 255, 255, 0.01) inset;
-o-box-shadow: 75px 0 0 rgba(255, 255, 255, 0.01) inset, 0 75px 0 rgba(255, 255, 255, 0.01) inset, -75px 0 0 rgba(255, 255, 255, 0.01) inset, 0 -75px 0 rgba(255, 255, 255, 0.01) inset;

}

.ju-coolicons.type6:hover .icon:before, .ju-coolicons.type6:hover .icon:after {   
box-shadow: 5px 0 0 rgba(255, 0, 0, 0.5) inset, 0 5px 0 rgba(252, 150, 0, 0.5) inset, -5px 0 0 rgba(0, 255, 0, 0.5) inset, 0 -5px 0 rgba(0, 150, 255, 0.5) inset;
-webkit-box-shadow: 5px 0 0 rgba(255, 0, 0, 0.5) inset, 0 5px 0 rgba(252, 150, 0, 0.5) inset, -5px 0 0 rgba(0, 255, 0, 0.5) inset, 0 -5px 0 rgba(0, 150, 255, 0.5) inset;
-moz-box-shadow: 5px 0 0 rgba(255, 0, 0, 0.5) inset, 0 5px 0 rgba(252, 150, 0, 0.5) inset, -5px 0 0 rgba(0, 255, 0, 0.5) inset, 0 -5px 0 rgba(0, 150, 255, 0.5) inset;
-ms-box-shadow: 5px 0 0 rgba(255, 0, 0, 0.5) inset, 0 5px 0 rgba(252, 150, 0, 0.5) inset, -5px 0 0 rgba(0, 255, 0, 0.5) inset, 0 -5px 0 rgba(0, 150, 255, 0.5) inset;
-o-box-shadow: 5px 0 0 rgba(255, 0, 0, 0.5) inset, 0 5px 0 rgba(252, 150, 0, 0.5) inset, -5px 0 0 rgba(0, 255, 0, 0.5) inset, 0 -5px 0 rgba(0, 150, 255, 0.5) inset;
}

.ju-coolicons.type6 .icon:after { transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg);  }

.ju-coolicons.type6:hover .icon span { transform: scale(1.3) rotate(0deg) translate(0px); -webkit-transform: scale(1.3) rotate(0deg) translate(0px); -moz-transform: scale(1.3) rotate(0deg) translate(0px); -ms-transform: scale(1.3) rotate(0deg) translate(0px); -o-transform: scale(1.3) rotate(0deg) translate(0px); }

.ju-coolicons.type1 .icon, .ju-coolicons.type2 .icon, .ju-coolicons.type3 .icon, .ju-coolicons.type4 .icon { height: 90px; width: 90px; }
.ju-coolicons.type1 .icon span, .ju-coolicons.type2 .icon span{ line-height:90px; }
.ju-coolicons.type4 .icon span, .ju-coolicons.type3 .icon span { line-height:80px; }
.ju-coolicons.type1:hover .icon span, .ju-coolicons.type2:hover .icon span, .ju-coolicons.type3:hover .icon span, .ju-coolicons.type4:hover .icon span { transform: scale(1) rotate(360deg) translate(0px); -moz-transform: scale(1) rotate(360deg) translate(0px); -webkit-transform: scale(1) rotate(360deg) translate(0px); -ms-transform: scale(1) rotate(360deg) translate(0px); -o-transform: scale(1) rotate(360deg) translate(0px); }	

.ju-coolicons.type1 .icon span, .ju-coolicons.type2 .icon span, .ju-coolicons.type3 .icon span, .ju-coolicons.type4 .icon span, .ju-coolicons.type6 .icon, .ju-coolicons.type6 .icon:before, .ju-coolicons.type6 .icon:after, .ju-coolicons.type6 .icon span, .ju-coolicons.type6 .icon span img, .ju-coolicons.type7 .icon { border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; 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.type2 .icon:after { background: #e8e8e8; border-radius: 50%; content: ""; height: 100%; left: 0; padding: 0; position: absolute; top: 0; width: 100%; z-index: -1; box-sizing: content-box; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; transition: transform 0.2s ease 0s, opacity 0.3s ease 0s; -webkit-transition: transform 0.2s ease 0s, opacity 0.3s ease 0s; -moz-transition: transform 0.2s ease 0s, opacity 0.3s ease 0s; -ms-transition: transform 0.2s ease 0s, opacity 0.3s ease 0s; -o-transition: transform 0.2s ease 0s, opacity 0.3s ease 0s; }

.ju-coolicons.type2:hover .icon:after { opacity: 0; filter: alpha(opacity=0); transform: scale(1.3); -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); }

.ju-coolicons.type7 { padding: 10px 10px 25px 100px; }
.ju-coolicons.type7 .icon { border: 1px solid; height: 85px; width: 85px; top: 10px;left: 5px;}	
.ju-coolicons.type7 .icon span{font-size:40px; line-height:85px; width:85px; height:85px; 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.type7:hover .icon span { color: #fff; }

.ju-coolicons.type8{text-align:center;}
.ju-coolicons.type8 .icon{margin:0 auto 15px; padding:0px; text-align:center; width:105px; height:105px; -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.type8 .icon span{font-size:40px; color:#FFF; line-height:105px; transform:rotateY(0deg); -webkit-transform:rotateY(0deg); -moz-transform:rotateY(0deg); -ms-transform:rotateY(0deg); -o-transform:rotateY(0deg); 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.type8:hover .icon span{transform:rotateY(360deg); -webkit-transform:rotateY(360deg); -moz-transform:rotateY(360deg); -ms-transform:rotateY(360deg); -o-transform:rotateY(360deg);}	
.ju-coolicons.type8 > 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.type8 > h5:after, .ju-coolicons.type8 > h5:before{background:#BABABA; bottom:-5px; content:""; height:10px; position:absolute; right:50%; 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.type8:hover > h5:after{right:100%;}
.ju-coolicons.type8 > h5:before{left:50%; margin:0px 0px 0px -5px;}
.ju-coolicons.type8:hover > h5:before{left:100%;}

.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;}


.ju-coolicons.type10{text-align:center;}
.ju-coolicons.type10 .icon{margin:0 auto 15px; padding:0px; text-align:center; width:105px; height:105px; -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.type10:hover .icon{-webkit-border-radius:0px; -moz-border-radius:0px; -ms-border-radius:0px; -o-border-radius:0px; border-radius:0px;}
.ju-coolicons.type10 .icon span{font-size:40px; color:#FFF; line-height:105px;transform:rotateY(0deg); -webkit-transform:rotateY(0deg); -moz-transform:rotateY(0deg); -ms-transform:rotateY(0deg); -o-transform:rotateY(0deg); 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.type10:hover > h5{border-bottom:1px dashed #dcdcdc;}
.ju-coolicons.type10:hover > h5:after, .ju-coolicons.type10:hover > h5:before{-webkit-border-radius:0px; -moz-border-radius:0px; -ms-border-radius:0px; -o-border-radius:0px; border-radius:0px;}
.ju-coolicons.type10 > h5{width:90%; display:block; margin:0px auto 20px; border-bottom:1px solid #dcdcdc; line-height:24px; text-align:center; padding-bottom:15px; text-transform:uppercase; position:relative;}
.ju-coolicons.type10 > h5:after, .ju-coolicons.type10 > h5:before{background:#BABABA; bottom:-5px; content:""; height:10px; position:absolute; right:50%; 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.type10:hover > h5:after{right:100%;}
.ju-coolicons.type10 > h5:before{left:50%; margin:0px 0px 0px -5px;}
.ju-coolicons.type10:hover > h5:before{left:100%;}


.ju-coolicons.type1:hover .icon, .ju-coolicons.type2:hover .icon, .ju-coolicons.type2:hover .link, .ju-coolicons.type3 .icon span, .ju-coolicons.type4:hover .icon, .ju-coolicons.type4:hover .dt-sc-button:after, .ju-coolicons.type4:hover .dt-sc-button, .ju-coolicons.type7:hover .icon, .ju-coolicons.type8 .icon, .ju-coolicons.type9 .icon:before, .ju-coolicons.type10 .icon{ background: #333; }