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

/* =====[ BODY ]============================================================================== */


h1 {
font-family:Lato, sans-serif;
font-weight:100;
font-size:50px;
text-transform:uppercase;
text-align:center;
color:#444;
padding:30px;
}

.content_wrap {
width:100%;
margin:0 auto;
padding:0;
}

/* =====[ COLORS ]============================================================================== */

.color-1-bg {
background:#6baba1!important;
}

.color-1-font,.color1-price {
color:#6baba1!important;
}

.color-2-bg {
background:#e0a32e!important;
}

.color-2-font,.color-2-price {
color:#e0a32e!important;
}

.color-3-bg {
background:#e7603b!important;
}

.color-3-font,.color-3-price {
color:#e7603b!important;
}

.color-4-bg {
background:#9ca780!important;
}

.color-4-font,.color-4-price {
color:#9ca780!important;
}

.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 ]============================================================================== */

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

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

.box > li {
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;
line-height:0.7;
}

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

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

.description {
text-align:center;
}

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

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

.back .title {
color:#FFF;
}

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

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

.popular {
font-size:30px;
color:#60bad7;
position:absolute;
left:0;
top:0;
opacity:0;
}

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

.circle {
border-radius:50%;
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;
}

.info {
position:absolute;
border-radius:50%;
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 .front-popular {
border-radius:10% 50% 50% 50%!important;
}

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

@keyframes popularAnim
{
from {opacity:0; left:40px;}
to {opacity:1; left:0;}
}

@-webkit-keyframes popularAnim /* Safari and Chrome */
{
from {opacity:0; left:40px;}
to {opacity:1; left:0;}
}