/* =====[ GOOGLE FONT "LATO" ]============================================================================== */
@import url(http://fonts.googleapis.com/css?family=Lato:400,100,900);

@import url(http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);




.front,.back {
font-family:Lato, sans-serif;
float:left;
width:220px;
height:220px;
background:#FFF;
-webkit-border-radius:100%;
-moz-border-radius:100%;
border-radius:100%;
-webkit-box-shadow:0 0 10px 0 #dbdbdb;
box-shadow:0 0 10px 0 #dbdbdb;
-webkit-transition:all .3s ease-in-out;
-moz-transition:all .3s ease-in-out;
-o-transition:all .3s ease-in-out;
-ms-transition:all .3s ease-in-out;
transition:all .3s ease-in-out;
}



/* =====[ MAIN LIST ]============================================================================== */
.RoundAnimatedPricingTables
{
	text-align:center;
}

.box {
list-style:none;
display:inline-block;
text-align:center;
margin:20px 0 0;
padding:0;
}

.box i {
padding-right:5px;
}

.boxContainer {
width:220px;
height:220px;
display:inline-block;
margin:8px;
}

/* =====[ FRONT ELEMENTS ]============================================================================== */

.front > div {
text-align:center;
color:#60bad7;
}

.title {
font-size:25px;
text-transform:uppercase;
text-align:center;
padding:25px 10px 17px;
}

.price span {
font-weight:900;
vertical-align:top;
margin-top:-15px;
display:inline-block;
}

.price .total {
font-size:90px;
}

.currency,.end {
font-size:40px;
}

.description {
text-align:center;
}

.front .description {
color:#9b9b9b!important;
font-size:14px;
padding:4px 45px 0;
}

/* =====[ BACK ELEMENTS ]============================================================================== */

.back .title {
color:#FFF;
}

.back .description ul {
width:55%;
margin:auto;
}

.back .description ul li {
color:#FFF!important;
text-align:left;
list-style:none;
line-height:1.4;
}

/* =====[ CIRCLE ANIMATIONS ]============================================================================== */

.circle {
border-radius:150px;
-moz-border-radius: 150px;
-webkit-border-radius: 150px;
position:relative;
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
transition:all .4s ease-in-out;
position: absolute;
}

.info {
position:absolute;
border-radius:150px;
-moz-border-radius: 150px;
-webkit-border-radius: 150px;
opacity:0;
-moz-transform:scale(0) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-webkit-transform:scale(0) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-o-transform:scale(0) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-ms-transform:scale(0) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
transform:scale(0) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-webkit-backface-visibility:hidden;
}

.circle:hover .front {
-moz-transform:scale(1.1);
-webkit-transform:scale(1.1);
-o-transform:scale(1.1);
-ms-transform:scale(1.1);
transform:scale(1.1);
opacity:1;
}

.circle:hover .info {
-moz-transform:scale(1) rotate(360deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-webkit-transform:scale(1) rotate(360deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-o-transform:scale(1) rotate(360deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-ms-transform:scale(1) rotate(360deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
transform:scale(1) rotate(360deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
opacity:1;
}

.circle:hover .popular {
opacity:1;
animation:popularAnim 1s 1;
-webkit-animation:popularAnim 1s 1;
}


.box > li{
*float:left;
}

.circle .back{
*display:none;
}

.circle .back{
z-index:0;
}
.circle .front{
position:relative;
z-index:1;
}
.circle:hover .back{
z-index:1;
}
.circle:hover .front{
position:relative;
z-index:0;
}

.circle:hover .back{
*display:inline;
}
.circle:hover .front{
*display:none;
}