.ul_teste
{
    margin:0px;
    padding:0px;
    list-style-type:none;
    -webkit-backface-visibility: hidden; backface-visibility: hidden;  
}
.var_nav
{
    position:relative;
    background:#a1cff4; 
    width:100%;
    height:70px;
    margin-bottom:5px;
}
.link_bg
{
    width:70px;
    height:70px;
    position:absolute;
    background:#286290;
    color:#000;
    z-index:2;
}
.link_bg i
{
    position:relative;
}
.link_title
{
    position:absolute;
    width:100%;
    z-index:3;
    color:#000;
}
.link_title:hover .icon
{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    transform:rotate(360deg);  
}
.var_nav:hover .link_bg
{
    width:100%;
    background:#286290;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;  
}
.var_nav:hover a
{
    font-weight:bold;
    -webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out; 
    -o-transition:all .5s ease-in-out; 
    -ms-transition:all .5s ease-in-out;
    transition:all .5s ease-in-out;  
}
.icon
{
    position:relative;
    width:70px;
    height:70px;
    text-align:center;
    color:#fff;
    -webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out; 
    -o-transition:all .5s ease-in-out; 
    -ms-transition:all .5s ease-in-out;   
    float:left;
    transition:all .5s ease-in-out;   
    float:left;  
}
.icon i{top:22px;position:relative;}
.a_teste{
    font-weight:bold;
    display:block;
    position:absolute;
    float:left;
    font-family:arial;
    color:#fff;
    text-decoration:none;
    width:100%;
    height:70px;
    text-align:center;
}
.span_teste
{
    color: white;
    margin-top:25px;
    display:block;
}