.nav12 ul li {
    list-style: outside none none;
}
.nav12 {
    margin: auto;
    overflow: hidden;
    width: 100%;
    padding:0px;
}
.nav12 li {
    cursor: pointer;
    display: inline-block;
    float: left;
    height: 98px;
    transition: all 0.4s ease 0s;
    width: 12.5%;
}
.nav12 li:hover {
    height: 94px;
    opacity: 1;
}
.nav12 li.hm:hover {
    border-bottom: 4px solid #222;
}
.nav12 li.fb:hover {
    border-bottom: 4px solid #222;
}
.nav12 li.gp:hover {
    border-bottom: 4px solid #222;
}
.nav12 li.tw:hover {
    border-bottom: 4px solid #222;
}
.nav12 li.cl1:hover {
    border-bottom: 4px solid #222;
}
.nav12 li.cl2:hover {
    border-bottom: 4px solid #222;
}
.nav12 li.cl3:hover {
    border-bottom: 4px solid #222;
}
.nav12 li.cl:hover {
    border-bottom: 4px solid #222;
}
.nav12 img.icons {
    background: rgba(255, 255, 255, 0.4) none repeat scroll 0 0;
    border-radius: 100%;
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.1);
    display: block;
    margin: 15px auto;
    padding: 10px;
    transition: all 0.8s ease 0s;
}
.nav12 li:hover img.icons {
    background: rgba(255, 255, 255, 0.9) none repeat scroll 0 0;
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.8);
}
.nav12 li span {
    color: white;
    display: block;
    font-size: 13px;
    text-align: center;
    transition: padding-top 0.4s ease 0s;
}
.hm {
    background: rgba(29, 162, 168, 0.8) none repeat scroll 0 0;
}
.fb {
    background: rgba(255, 89, 76, 0.8) none repeat scroll 0 0;
}
.gp {
    background: rgba(47, 31, 64, 0.8) none repeat scroll 0 0;
}
.tw {
    background: rgba(254, 162, 14, 0.8) none repeat scroll 0 0;
}
.cl {
    background: rgba(93, 181, 29, 0.8) none repeat scroll 0 0;
}
.cl1 {
    background: rgba(21, 182, 173, 0.8) none repeat scroll 0 0;
}
.cl2 {
    background: rgba(171, 64, 203, 0.8) none repeat scroll 0 0;
}
.cl3 {
    background: rgba(254, 146, 1, 0.8) none repeat scroll 0 0;
}