/*************************
    - Basic settings -
*************************/
.pricing-table {
	width:230px;
	padding:0;
	margin:5px;
	list-style:none;
	float:left;
	font-family:'Open Sans', sans-serif;
	background:#fff;
	border-radius:5px;
	position:relative;
	overflow:hidden;
	box-shadow:0 1px 2px #d9d9d9;
	-o-transition:all .3s linear;
	-moz-transition:all .3s linear;
	-webkit-transition:all .3s linear;
	transition:all .3s linear;
}

.pricing-table li {
	width:100%;
	float:left;
	color:#999;
	text-align:center;
	box-sizing:border-box;
	-moz-box-sizing:border-box; 
	-webkit-box-sizing:border-box;
}

.pricing-table:hover {
	box-shadow:0 1px 20px #999;
}

/***************
    - Plan -
***************/
.pricing-table .plan {
	padding:10px 0;
	float:left;
	color:#fff;
	font-size:24px;
	font-family:'Open Sans', sans-serif;
	font-weight:300;
	text-transform:uppercase;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	background:#656d78;
	background:-moz-linear-gradient(top,  #656d78 0%, #434a54 100%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#656d78), color-stop(100%,#434a54));
	background:-webkit-linear-gradient(top,  #656d78 0%,#434a54 100%);
	background:-o-linear-gradient(top,  #656d78 0%,#434a54 100%);
	background:-ms-linear-gradient(top,  #656d78 0%,#434a54 100%);
	background:linear-gradient(to bottom,  #656d78 0%,#434a54 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#656d78', endColorstr='#434a54',GradientType=0);
}

/****************
    - Price -
****************/
.pricing-table .table-price {
	padding:20px 26px;
	float:left;
	font-size:64px;
	font-weight:300;
	text-transform:uppercase;
}

.pricing-table .table-price .price {
	position:relative;
	display:block;
	width:120px;
	height:120px;
	font-weight:600;
	line-height:114px;
	text-align:center;
	margin:auto;
	border:1px solid #000;
	border-radius:100px;
	overflow:hidden;
	-o-transition:all .3s linear;
	-moz-transition:all .3s linear;
	-webkit-transition:all .3s linear;
	transition:all .3s linear;
}

.pricing-table .dollar {
	position:absolute;
	top:36px;
	left:10px;	
	font-size:24px;
	font-weight:300;
	line-height:20px;	
}

.pricing-table .dollar.single {
	left:28px;
}

.pricing-table:hover .table-price .price {
	background:#656d78;
	color:#fff;
}

.pricing-table:hover .table-price .price {
	-webkit-animation:toRightFromLeft 0.5s forwards;
	-moz-animation:toRightFromLeft 0.5s forwards;
	animation:toRightFromLeft 0.5s forwards;
}

@-webkit-keyframes toRightFromLeft  {
	49% {-webkit-transform:translate(100%);}
	50% {opacity:0; -webkit-transform:translate(-100%);}
	51% {opacity:1;}
}

@-moz-keyframes toRightFromLeft  {
	49% {-moz-transform:translate(100%);}
	50% {opacity:0; -moz-transform:translate(-100%);}
	51% {opacity:1;}
}

@keyframes toRightFromLeft  {
	49% {transform:translate(100%);}
	50% {opacity:0; transform:translate(-100%);}
	51% {opacity:1;}
}

/******************
    - Details -
******************/
.pricing-table .detail {
	position:relative;
	clear:both;
	padding:8px 26px;
	font-size:12px;
	border-top:solid 1px #dedede;	
	background:#f9f9f9;
}

.pricing-table .detail:nth-child(even) {
	background:#f3f3f3;
}

/**************************
    - Sign-up buttons -
**************************/
.pricing-table .sign-up {
	padding:12px 26px;
	float:left;
	font-size:16px;
	text-decoration:none;
	border-top:solid 1px #dedede;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
}

.pricing-table .sign-up a {
	width:70%;
	margin:0 auto;
	padding:10px 10px;
	display:block;
	font-size:14px;
	font-family:'Open Sans', sans-serif;
	font-weight:300;
	text-transform:uppercase;
	text-decoration:none;
	text-align:center;
	color:#fff;
	border-radius:5px;
	box-sizing:border-box;
	-moz-box-sizing:border-box; 
	-webkit-box-sizing:border-box;
	-o-transition:background .3s linear;
	-moz-transition:background .3s linear;
	-webkit-transition:background .3s linear;
	transition:background .3s linear;
}
	
/*****************
    - Colors -
*****************/

/* Black */
.black .table-price {color:#444;}
.black .table-price .price {border-color:#444;}
.black:hover .table-price .price {background:#444;}

.black .plan, .black .sign-up a { 
	background:#444444;
	background:-moz-linear-gradient(top,  #444444 0%, #222222 100%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#444444), color-stop(100%,#222222));
	background:-webkit-linear-gradient(top,  #444444 0%,#222222 100%);
	background:-o-linear-gradient(top,  #444444 0%,#222222 100%);
	background:-ms-linear-gradient(top,  #444444 0%,#222222 100%);
	background:linear-gradient(to bottom,  #444444 0%,#222222 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#222222',GradientType=0);
}

.black .sign-up a { 
	-webkit-box-shadow:0 2px 0 0 #000;
	box-shadow:0 2px 0 0 #000;
}

/* Blue */
.blue .table-price {color:#5d9cec;}
.blue .table-price .price {border-color:#5d9cec;}
.blue:hover .table-price .price {background:#5d9cec;}

.blue .plan, .blue .sign-up a { 
	background:#5d9cec;
	background:-moz-linear-gradient(top,  #5d9cec 0%, #4a89dc 100%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#5d9cec), color-stop(100%,#4a89dc));
	background:-webkit-linear-gradient(top,  #5d9cec 0%,#4a89dc 100%);
	background:-o-linear-gradient(top,  #5d9cec 0%,#4a89dc 100%);
	background:-ms-linear-gradient(top,  #5d9cec 0%,#4a89dc 100%);
	background:linear-gradient(to bottom,  #5d9cec 0%,#4a89dc 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5d9cec', endColorstr='#4a89dc',GradientType=0);
}

.blue .sign-up a { 
	-webkit-box-shadow:0 2px 0 0 #2f69b2;
	box-shadow:0 2px 0 0 #2f69b2;
}

/* Green */
.green .table-price {color:#48cfad;}
.green .table-price .price {border-color:#48cfad;}
.green:hover .table-price .price {background:#48cfad;}

.green .plan, .green .sign-up a {
	background:#48cfad;
	background:-moz-linear-gradient(top,  #48cfad 0%, #37bc9b 100%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#48cfad), color-stop(100%,#37bc9b));
	background:-webkit-linear-gradient(top,  #48cfad 0%,#37bc9b 100%);
	background:-o-linear-gradient(top,  #48cfad 0%,#37bc9b 100%);
	background:-ms-linear-gradient(top,  #48cfad 0%,#37bc9b 100%);
	background:linear-gradient(to bottom,  #48cfad 0%,#37bc9b 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#48cfad', endColorstr='#37bc9b',GradientType=0);
}

.green .sign-up a { 
	-webkit-box-shadow:0 2px 0 0 #168e70;
	box-shadow:0 2px 0 0 #168e70;
}

/* Grey */
.grey .table-price {color:#656d78;}
.grey .table-price .price {border-color:#656d78;}
.grey:hover .table-price .price {background:#656d78;}

.grey .plan, .grey .sign-up a {
	background:#656d78;
	background:-moz-linear-gradient(top,  #656d78 0%, #434a54 100%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#656d78), color-stop(100%,#434a54));
	background:-webkit-linear-gradient(top,  #656d78 0%,#434a54 100%);
	background:-o-linear-gradient(top,  #656d78 0%,#434a54 100%);
	background:-ms-linear-gradient(top,  #656d78 0%,#434a54 100%);
	background:linear-gradient(to bottom,  #656d78 0%,#434a54 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#656d78', endColorstr='#434a54',GradientType=0);
}

.grey .sign-up a { 
	-webkit-box-shadow:0 2px 0 0 #222;
	box-shadow:0 2px 0 0 #222;
}

/* Red */
.red .table-price {color:#ed5565;}
.red .table-price .price {border-color:#ed5565;}
.red:hover .table-price .price {background:#ed5565;}
.red .plan, .red .sign-up a { 
	background:#ed5565;
	background:-moz-linear-gradient(top,  #ed5565 0%, #da4453 100%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ed5565), color-stop(100%,#da4453));
	background:-webkit-linear-gradient(top,  #ed5565 0%,#da4453 100%);
	background:-o-linear-gradient(top,  #ed5565 0%,#da4453 100%);
	background:-ms-linear-gradient(top,  #ed5565 0%,#da4453 100%);
	background:linear-gradient(to bottom,  #ed5565 0%,#da4453 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed5565', endColorstr='#da4453',GradientType=0);
}

.red .sign-up a { 
	-webkit-box-shadow:0 2px 0 0 #a41423;
	box-shadow:0 2px 0 0 #a41423;
}

/* Orange */
.orange .table-price {color:#ff8f26;}
.orange .table-price .price {border-color:#ff8f26;}
.orange:hover .table-price .price {background:#ff8f26;}
.orange .plan, .orange .sign-up a { 
	background:#ff8f26;
	background:-moz-linear-gradient(top,  #ff8f26 0%, #ff7b0d 100%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff8f26), color-stop(100%,#ff7b0d));
	background:-webkit-linear-gradient(top,  #ff8f26 0%,#ff7b0d 100%);
	background:-o-linear-gradient(top,  #ff8f26 0%,#ff7b0d 100%);
	background:-ms-linear-gradient(top,  #ff8f26 0%,#ff7b0d 100%);
	background:linear-gradient(to bottom,  #ff8f26 0%,#ff7b0d 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8f26', endColorstr='#ff7b0d',GradientType=0);
}

.orange .sign-up a { 
	-webkit-box-shadow:0 2px 0 0 #bd5b00;
	box-shadow:0 2px 0 0 #bd5b00;
}

/* Purple */
.purple .table-price {color:#ac92ec;}
.purple .table-price .price {border-color:#ac92ec;}
.purple:hover .table-price .price {background:#ac92ec;}
.purple .plan, .purple .sign-up a { 
	background:#ac92ec;
	background:-moz-linear-gradient(top,  #ac92ec 0%, #967adc 100%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ac92ec), color-stop(100%,#967adc));
	background:-webkit-linear-gradient(top,  #ac92ec 0%,#967adc 100%);
	background:-o-linear-gradient(top,  #ac92ec 0%,#967adc 100%);
	background:-ms-linear-gradient(top,  #ac92ec 0%,#967adc 100%);
	background:linear-gradient(to bottom,  #ac92ec 0%,#967adc 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ac92ec', endColorstr='#967adc',GradientType=0);
}

.purple .sign-up a { 
	-webkit-box-shadow:0 2px 0 0 #6f51bb;
	box-shadow:0 2px 0 0 #6f51bb;
}

/* Yellow */
.yellow .table-price {color:#ffc53f;}
.yellow .table-price .price {border-color:#ffc53f;}
.yellow:hover .table-price .price {background:#ffc53f;}
.yellow .plan, .yellow .sign-up a { 
	background:#ffc53f;
	background:-moz-linear-gradient(top,  #ffc53f 0%, #f4ac1d 100%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc53f), color-stop(100%,#f4ac1d));
	background:-webkit-linear-gradient(top,  #ffc53f 0%,#f4ac1d 100%);
	background:-o-linear-gradient(top,  #ffc53f 0%,#f4ac1d 100%);
	background:-ms-linear-gradient(top,  #ffc53f 0%,#f4ac1d 100%);
	background:linear-gradient(to bottom,  #ffc53f 0%,#f4ac1d 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc53f', endColorstr='#f4ac1d',GradientType=0);
}

.yellow .sign-up a { 
	-webkit-box-shadow:0 2px 0 0 #c18700;
	box-shadow:0 2px 0 0 #c18700;
}

/*********************
    - Responsive -
*********************/

@media only screen and (min-width:768px) and (max-width:959px) {
	.pricing-table {
		width:180px;
	}
}

@media only screen and (min-width:0) and (max-width:479px)  {
	.pricing-table {
		width:310px;
	}
}