.ec-circle{
    width: 360px;
    height: 74px;
    text-align: center;
    overflow: hidden;
    /*float: center;*/

    /*background: #dda994 url(../images/1.jpg) no-repeat center center;
    -webkit-box-shadow: inset 0 0 1px 230px rgba(0,0,0,0.6);
    -moz-box-shadow: inset 0 0 1px 230px rgba(0,0,0,0.6);
    box-shadow: inset 0 0 1px 230px rgba(0,0,0,0.6);  */ 

    -webkit-transition: box-shadow 400ms ease-in-out;
    -moz-transition: box-shadow 400ms ease-in-out;
    -o-transition: box-shadow 400ms ease-in-out;
    -ms-transition: box-shadow 400ms ease-in-out;
    transition: box-shadow 400ms ease-in-out;

    /*For IE < 9 so that we have some kind of effect */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    display: block;
    outline: none;
    text-decoration: none;
}

.ec-circle:hover{text-decoration: none;}

.ec-circle-hover{
    -webkit-box-shadow: inset 0 0 0 0 rgba(0,0,0,0.6), 0 0 10px rgba(0,0,0,0.3);
    -moz-box-shadow: inset 0 0 0 0 rgba(0,0,0,0.6), 0 0 10px rgba(0,0,0,0.3);
    box-shadow: inset 0 0 0 0 rgba(0,0,0,0.6), 0 0 10px rgba(0,0,0,0.3);
    /*For IE < 9 so that we have some kind of effect */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.ec-circle h3{
    color: transparent;
    line-height: 100px;
}

.ec-circle-hover h3{text-shadow: 3px 3px 3px #000; color: #fff;}

.ec-circle h3:hover{
    -webkit-transition: text-shadow 400ms ease-in-out 0.3s;
    -moz-transition: text-shadow 400ms ease-in-out 0.3s;
    -o-transition: text-shadow 400ms ease-in-out 0.3s;
    -ms-transition: text-shadow 400ms ease-in-out 0.3s;
    transition: text-shadow 400ms ease-in-out 0.3s;
}