/*************************
    - Basic settings -
*************************/
.box {
	list-style:none;
	display:block;
	text-align:center;
	width:100%;
	margin:0;
	padding:0;
}

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

.box > li {
	width:220px;
	height:220px;
	display:inline-block;
	margin:8px;
}

/***********************
    - Front / Back -
***********************/
.front, .back {
	font-family:"Open Sans", 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 3px 0 #e3dfd6;
	box-shadow:0 0 3px 0 #e3dfd6;
	-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;
}

/*****************
    - Colors -
*****************/

/* Color 1 */
.color-1 .bg, .color-1 .choose span {
	background:#2cbae8;
}

.color-1 .title, .color-1 .price {
	color:#2cbae8;
}

.color-1 .choose span {
	-webkit-box-shadow:0 2px 0 0 #3495b5;
	box-shadow:0 2px 0 0 #3495b5;	
}

/* Color 2 */
.color-2 .bg, .color-2 .choose span {
	background:#e7b148;
}

.color-2 .title, .color-2 .price, .color-2 .popular {
	color:#e7b148;
}

.color-2 .choose span {
	-webkit-box-shadow:0 2px 0 0 #c4963d;
	box-shadow:0 2px 0 0 #c4963d;	
}

/* Color 3 */
.color-3 .bg, .color-3 .choose span {
	background:#e96b5d;
}

.color-3 .title, .color-3 .price {
	color:#e96b5d;
}

.color-3 .choose span {
	-webkit-box-shadow:0 2px 0 0 #be4b3e;
	box-shadow:0 2px 0 0 #be4b3e;	
}

/* Color 4 */
.color-4 .bg, .color-4 .choose span {
	background:#63cac9;
}

.color-4 .title, .color-4 .price {
	color:#63cac9;
}

.color-4 .choose span {
	-webkit-box-shadow:0 2px 0 0 #49a1a0;
	box-shadow:0 2px 0 0 #49a1a0;	
}

/****************
    - Front -
****************/
.front > div {
	text-align:center;
}

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

.price span {
	vertical-align:top;
	line-height:0.7;
}

.price span.currency {
	font-size:60px;
	font-weight:400;
}

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

.currency, .end {
	font-size:30px;
	font-weight:300;
}

.description {
	text-align:center;
}

.front .description {
	color:#999;
	font-size:13px;
	line-height:13px;
	padding:16px 30px 12px;
}

.choose span {	
	text-align:center;	
	color:#fff;
	font-weight:bold;
	font-size:12px;
	line-height:12px;
	padding:6px 12px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
}

/***************
    - Back -
***************/
.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;
	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;
	}
}