.share-on {
    overflow: hidden;
    text-align: center;
    padding: 15px;
}

.share-on i.zmdi {
    width: 80px;
    height: 40px;
    border-radius: 2px;
    margin: 0 5px;
    text-align: center;
    display: inline-block;
    line-height: 38px;
    color: #606060;
    border: 1px solid #606060;
    -webkit-box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0);
    box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0);
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.share-on i.zmdi:hover {
    color: #ffffff;
    background-color: #606060;
    -webkit-box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.2);
}

.share-on i.zmdi-facebook {
    color: #3b5998;
    border: 1px solid #3b5998;
}

.share-on i.zmdi-facebook:hover {
    color: #ffffff;
    background-color: #3b5998;
}

.share-on i.zmdi-twitter {
    color: #0084b4;
    border: 1px solid #0084b4;
}

.share-on i.zmdi-twitter:hover {
    color: #ffffff;
    background-color: #0084b4;
}

.share-on i.zmdi-google-plus {
    color: #d34836;
    border: 1px solid #d34836;
}

.share-on i.zmdi-google-plus:hover {
    color: #ffffff;
    background-color: #d34836;
}

.share-on i.zmdi-linkedin {
    color: #0076B4;
    border: 1px solid #0076B4;
}

.share-on i.zmdi-linkedin:hover {
    color: #ffffff;
    background-color: #0076B4;
}