.service{ float: left;  text-align:center; overflow: hidden; position: relative;
    border: 5px solid  rgba(255,255,255,0.8);
    padding: 15px;
    background-color: rgba(0,0,0,0.2);
    transition: all 300ms linear;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -webkit-border-radius: 250px;
    -moz-border-radius: 250px;
    border-radius: 250px;
    -webkit-transition: all 400ms linear;
    -moz-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    -ms-transition: all 400ms linear;
    transition: all 400ms linear;}
.service:hover{
    background-color: #f1f1f1;
    border-color: #fff;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}    
.service a{  width: 100%; height: 100%; display: block;position: relative;}
.service a:hover{ color: #222;}
.service-icon{  font-size: 60px; margin-top: 15px;line-height: 60px; position: relative; width: 100%; padding: 0px; text-align: center;}	
.service-content{position: relative; left: 0px; width: 100%;height: 50%; top: 50%;}
.service-main{ font-size: 24px; margin:10px 0 0 0 ; text-align: center;}
.service-sub{ opacity: 0;padding:5px; position: relative; margin:0px; width: 98%; }	
.service:hover{}
.service:hover .service-main{ display: none;}
.service:hover .service-sub{opacity: 0.8; margin-top: 10px;}