Can't figure out what's wrong with my syntax

Can't figure out what's wrong with my syntax

as you can see here http://jsfiddle.net/Ec8kN/ , my css circles are not
working properly. Initially I only had one class .circle that I used
several times to have multiple circles and it was working fine. I then
decided to name each circle differently (i.e. circle-1, circle-2,
circle-3) to get a better control with JS at a later stage. That's where
the issues started. Now that I renamed them circle-1, circle-2, etc they
won't display correctly anymore. What could be the issue? Many thanks
<div class="circle-1 circlebackground circle_5px_marging">
<p>Créativité</p>
<div class="innercircle">
<p>Le fdfd stimule la dfdsfd du fdfds en le dfdfd à réinventer sa
dfdsf de la dfds dfs et donc les fdsfs qu'il peut y fdssf.</p>
</div>
</div>
<div class="circle-2 circlebackground circle_5px_marging">
<p>Circle 2</p>
<div class="innercircle">
<p>by Angela</p>
</div>
</div>
<div class="circle-3 circlebackground">
<p>Circle 3</p>
<div class="innercircle">
<p>by Angela</p>
</div>
</div>
.circle_5px_marging {
margin-right: 30px;
}
.circle-1, .circle-2, .circle-3 {
position: relative;
float: left;
margin-bottom: 10px;
width: 220px;
height: 220px;
border-radius: 50%;
box-shadow: inset 0 0 0 0px rgba(255, 255, 255, 0.6), 0 1px 2px
rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.circlebackground {
border:1px solid #2970AE;
background: #FFF;
}
.innercircle {
position: absolute;
width: inherit;
height: inherit;
border-radius: 50%;
background: #2970AE;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-backface-visibility: hidden;
}
.circle-1, .circle-2, .circle-3 p {
position: absolute;
top: 50%;
left: 50%;
margin: 0;
color: #2970AE;
letter-spacing: 1px;
font-weight: 700;
font-size: 14px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.innercircle p {
position: absolute;
top: 50%;
left: 50%;
margin: 0;
color:#fff;
text-align: center;
font-weight: 300;
font-size: 10px;
opacity: 1;
-webkit-transition: all 1s ease-in-out 0.4s;
-moz-transition: all 1s ease-in-out 0.4s;
-ms-transition: all 1s ease-in-out 0.4s;
-o-transition: all 1s ease-in-out 0.4s;
transition: all 1s ease-in-out 0.4s;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.circle-1:hover {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px
rgba(0, 0, 0, 0.1);
}
.circle-1:hover .innercircle {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.circle-1:hover .innercircle p {
opacity: 1;
}
.clear {
clear: both;
}