html - CSS Hover works locally, but not on dev server -

the hover effect i'm trying achieve works wonderful locally, doesn't thing when uploaded our dev. environment.

here html...

<a class="circle" href="/portfolio">portfolio</a> 

now, css...

.circle{ display:inline-block; width: 380px; height: 380px; line-height: 360px; text-align: center; background-color: #02193b; border-radius: 50%; font-size: 54px; box-shadow: inset 0 0 0 0 rgba(0,0,0,0.6), inset 0 0 0 10px #a09176, 0 0 10px rgba(0,0,0,0.3); transition: box-shadow 400ms ease-in-out; -ms-transition: box-shadow 400ms ease-in-out; -moz-transition: box-shadow 400ms ease-in-out; -webkit-transition: box-shadow 400ms ease-in-out; -o-transition: box-shadow 400ms ease-in-out; color: white; text-decoration: none !important; text-transform: capitalize; 

}

.circle:hover  { box-shadow: inset 0 0 0 0 rgba(0,0,0,0.6), inset 0 0 0 20px #a09176, 0 0 20px rgba(0,0,0,0.3); transition: box-shadow 400ms ease-in-out; -ms-transition: box-shadow 400ms ease-in-out; -moz-transition: box-shadow 400ms ease-in-out; -webkit-transition: box-shadow 400ms ease-in-out; -o-transition: box-shadow 400ms ease-in-out; background-color: #01142f; 

}

i've searched, , have yet come across working solution. appreciate help!

i think problem lies within ordering of css. described here should list real properties last , vendor prefixes first.

e.g.:

.circle {     -webkit-transition: box-shadow 400ms ease-in-out;     -moz-transition: box-shadow 400ms ease-in-out;     -ms-transition: box-shadow 400ms ease-in-out;     -o-transition: box-shadow 400ms ease-in-out;     transition: box-shadow 400ms ease-in-out; }