.cp-column {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


/* Global CSS that are applied for all screen sizes */
/* Signup button style */
.cp-btn {
    border: 1px solid #fff;
    color: #fff!important;
    background: none;
    cursor: pointer;
    padding: 7px 18px;
    display: inline-block;
    text-transform: uppercase;
    outline: none;
    position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.cp-btn:after {
    content: '';
    position: absolute;
    z-index: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
	
	width: 0%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(255,255,255,0.3);
}


.cp-btn:hover,
.cp-btn:active {
}

.cp-btn:hover:after,
.cp-btn:active:after {
    width: 100%;
}

.colorfulpricing {
	max-width: 900px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	font-size: 1.5em;
	font-weight: 300;
	color: rgba(249, 249, 249, .9);
}

.colorfulpricing span {
	display: block;
}

.colorfulpricing i{
	/* Make the font smoother for Chrome */
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

/* Remove the blue Webkit background when element is tapped */
a, button {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* Main colorful pricing style */
.colorfulpricing .cp-column {
	text-align: center;
}

.cp-icon {
		padding-top: 1.4em;
}

.cp-header {
	font-size:20px;
	text-transform:uppercase;
	margin-top: 2.1em;
		-webkit-transition: margin .5s;
		-moz-transition: margin .5s;
		-o-transition: margin .5s;
		-ms-transition: margin .5s;
		transition: margin .5s;
}


.cp-price {
	font-size:18px;
	margin-top:10px
}

.cp-body {
	font-family: 'Open Sans', sans-serif;
	font-size:14px
}
	
	.cp-body ul {
		margin: 30px 0;
		padding: 0
	}
	.cp-body li {
		list-style: none
	}

.cp-footer {
	font-size:16px;
	padding-bottom:1.6em
}

/* Positioning the icons and preparing for the animation*/
.colorfulpricing i {
	position: relative;
	display: inline-block;
	margin: 0 auto;
	padding: 0;
	border-radius: 50%;
	font-size: 53px;
	line-height:1.9em;
	box-shadow: 0 0 0 30px transparent;
	background: rgba(255,255,255,0.2);
	height:100px;
	width:100px;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transition: box-shadow .6s ease-in-out;
	-moz-transition: box-shadow .6s ease-in-out;
	-o-transition: box-shadow .6s ease-in-out;
	-ms-transition: box-shadow .6s ease-in-out;
	transition: box-shadow .6s ease-in-out;
}	

/* Animate the box-shadow to create the effect */
.no-touch .colorfulpricing .cp-column:hover i {		
	box-shadow: 0 0 0 0 rgba(255,255,255,0.2);
	-webkit-transition: box-shadow .4s ease-in-out;
	-moz-transition: box-shadow .4s ease-in-out;
	-o-transition: box-shadow .4s ease-in-out;
	-ms-transition: box-shadow .4s ease-in-out;
	transition: box-shadow .4s ease-in-out;
}

/* style 1 */
.cp-style1 .cp-column:nth-child(4n+1) {
	background: none;
}
.cp-style1 .cp-column:nth-child(4n+2) {
	background: none;
}
.cp-style1 .cp-column:nth-child(4n+3) {
	background: #e94a4a;
}
.cp-style1 .cp-column:nth-child(4n+4) {
	background: #C44766;
}

/* style 2 */
.cp-style2 .cp-column {height: 260px;position:relative}
.cp-style2 .cp-effect {position: absolute; left:0; top:0; right: 0; bottom:0; z-index:3}
.cp-style2 .cp-column .cp-effect:nth-child(2) {z-index:2}
.cp-style2 .cp-below {z-index:1}
.cp-style2 .cp-column:nth-child(4n+1) .cp-effect:first-child {
	background: #96CEB4;
}
.cp-style2 .cp-column:nth-child(4n+2) .cp-effect:first-child {
	background: #FF6F69;
}
.cp-style2 .cp-column:nth-child(4n+3) .cp-effect:first-child {
	background: #FFCC5C;
}
.cp-style2 .cp-column:nth-child(4n+4) .cp-effect:first-child {
	background: #1B3647;
}
.cp-style2 .cp-column .cp-effect:nth-child(2) {
	background: #000;
}
.cp-style2 .cp-effect:nth-child(2) .cp-header {
	margin-top:25px
}
.cp-style2 .cp-effect:nth-child(2) .cp-body ul {
	margin: 20px 0
}

/* style 3 */
.cp-style3 .cp-column {height: 260px;position:relative}
.cp-style3 .cp-effect {position: absolute; left:0; top:0; right: 0; bottom:0; z-index:3}
.cp-style3 .cp-column .cp-effect:nth-child(2) {z-index:2}
.cp-style3 .cp-below {z-index:1}
.cp-style3 .cp-column:nth-child(4n+1) .cp-effect:first-child {
	background: #023550;
}
.cp-style3 .cp-column:nth-child(4n+2) .cp-effect:first-child {
	background: #028A9E;
}
.cp-style3 .cp-column:nth-child(4n+3) .cp-effect:first-child {
	background: #04BFBF;
}
.cp-style3 .cp-column:nth-child(4n+4) .cp-effect:first-child {
	background: #DE2E46;
}
.cp-style3 .cp-column .cp-effect:nth-child(2) {
	background: #000;
}
.cp-style3 .cp-effect:nth-child(2) .cp-header {
	margin-top:25px
}
.cp-style3 .cp-effect:nth-child(2) .cp-body ul {
	margin: 20px 0
}
.cp-style3 .cp-header {
	margin-top: 25px
}
.cp-bigprice {
	background: rgba(255,255,255,0.2);
    font-size: 20px;
	font-weight:400;
    padding: 15px 0 30px 20px;
	margin: 35px 0 0;
}

    .cp-pricewrap {
        font-size: 80px;
        line-height: 1em;
        position: relative;
    }
    .cp-sign {
        font-size: 50px;
        position: absolute;
        left: 50%;
        top: 10px;
        margin-left: -82px
    }
	.cp-number {
		
	}
    .cp-style3 .cp-duration {
        margin-left: -10px;
    }

/* style 4 */
.cp-style4 .cp-column {height: 260px;position:relative}
.cp-style4 .cp-effect {position: absolute; left:0; top:0; right: 0; bottom:0; z-index:3}
.cp-style4 .cp-column .cp-effect:nth-child(2) {z-index:2}
.cp-style4 .cp-below {z-index:1}
.cp-style4 .cp-column:nth-child(4n+1) .cp-effect:first-child {
	background: #DBD8A2;
}
.cp-style4 .cp-column:nth-child(4n+2) .cp-effect:first-child {
	background: #9CBF9D;
}
.cp-style4 .cp-column:nth-child(4n+3) .cp-effect:first-child {
	background: #5DA598;
}
.cp-style4 .cp-column:nth-child(4n+4) .cp-effect:first-child {
	background: #1E8C93;
}
.cp-style4 .cp-column .cp-effect:nth-child(2) {
	background: #000;
}
.cp-style4 .cp-effect:nth-child(2) .cp-header {
	margin-top:25px
}
.cp-style4 .cp-effect:nth-child(2) .cp-body ul {
	margin: 20px 0
}
.cp-style4 .cp-bigprice {
	display: inline-block;
	margin: 35px auto 0;
	padding: 20px 10px 0 20px;
	border-radius: 50%;
	box-shadow: 0 0 0 30px transparent;
	background: rgba(255,255,255,0.2);
	height:120px;
	width:120px;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transition: box-shadow .6s ease-in-out;
	-moz-transition: box-shadow .6s ease-in-out;
	-o-transition: box-shadow .6s ease-in-out;
	-ms-transition: box-shadow .6s ease-in-out;
	transition: box-shadow .6s ease-in-out;
}
	.cp-style4 .cp-pricewrap {
        font-size: 55px;
    }
   .cp-style4  .cp-sign {
        font-size: 35px;
        top: 6px;
        margin-left: -47px
    }
	.cp-style4 .cp-duration {
        font-size: 18px;
    }
	
.no-touch .cp-style4 .cp-column:hover .cp-bigprice {		
	box-shadow: 0 0 0 0 rgba(255,255,255,0.2);
	-webkit-transition: box-shadow .4s ease-in-out;
	-moz-transition: box-shadow .4s ease-in-out;
	-o-transition: box-shadow .4s ease-in-out;
	-ms-transition: box-shadow .4s ease-in-out;
	transition: box-shadow .4s ease-in-out;
}

/* For screen bigger than 800px */
@media (min-width: 50em) {
	.colorfulpricing .cp-column {
		float: left;
		width: 33%;
	}
}

/* CSS specific to the 2 columns version */
@media (min-width:32.5em) and (max-width: 49.938em) {
	.colorfulpricing .cp-column {
		display: block;

		float: left;
		width: 50%;
	}
}

/* EFFECTS: 3d flip */
.cp-effect-3dflip {
	-webkit-perspective: 1000px;
	perspective: 1000px;
}

.cp-effect-3dflip .cp-effect {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.cp-effect-3dflip .cp-effect:first-child,
.cp-effect-3dflip.cp-effect-out .cp-effect:first-child {
	-webkit-transform-origin: 0% 50%;
	transform-origin: 0% 50%;
	-webkit-animation: rotateInLeft 0.6s ease-in forwards;
	animation: rotateInLeft 0.6s ease-in forwards;
}

.cp-effect-3dflip .cp-effect:nth-child(2),
.cp-effect-3dflip.cp-effect-out .cp-effect:nth-child(2) {
	opacity: 1;
	-webkit-transform-origin: 100% 50%;
	transform-origin: 100% 50%;
	-webkit-animation: rotateOutRight 0.6s forwards;
	animation: rotateOutRight 0.6s forwards;
}

.cp-effect-3dflip:hover .cp-effect:first-child,
.cp-effect-3dflip.cp-effect-in .cp-effect:first-child {
	-webkit-transform-origin: 0% 50%;
	transform-origin: 0% 50%;
	-webkit-animation: rotateOutLeft 0.6s forwards;
	animation: rotateOutLeft 0.6s forwards;
	z-index:3
}

.cp-effect-3dflip:hover .cp-effect:nth-child(2),
.cp-effect-3dflip.cp-effect-in .cp-effect:nth-child(2) {
	-webkit-transform-origin: 100% 50%;
	transform-origin: 100% 50%;
	-webkit-animation: rotateInRight 0.6s ease-in forwards;
	animation: rotateInRight 0.6s ease-in forwards;
	z-index:4
}

@-webkit-keyframes rotateOutLeft { 
	100% { opacity: 0; -webkit-transform: rotateY(90deg); }
}

@keyframes rotateOutLeft { 
	100% { opacity: 0; transform: rotateY(90deg); }
}

@-webkit-keyframes rotateInRight { 
	0% { opacity: 0; -webkit-transform: rotateY(-90deg); }
	100% { visibility: visible; opacity: 1; -webkit-transform: rotateY(0deg); }
}

@keyframes rotateInRight { 
	0% { opacity: 0; transform: rotateY(-90deg); }
	100% { visibility: visible; opacity: 1; transform: rotateY(0deg); }
}

@-webkit-keyframes rotateInLeft { 
	0% { opacity: 0; -webkit-transform: rotateY(90deg); }
	100% { opacity: 1; -webkit-transform: rotateY(0deg); }
}

@keyframes rotateInLeft { 
	0% { opacity: 0; transform: rotateY(90deg); }
	100% { opacity: 1; transform: rotateY(0deg); }
}

@-webkit-keyframes rotateOutRight { 
	100% { opacity: 0;visibility: visible; -webkit-transform: rotateY(-90deg); }
}

@keyframes rotateOutRight { 
	
	100% {opacity: 0; visibility: visible; transform: rotateY(-90deg); }
}

/* EFFECTS: Front row */
.cp-effect-frontrow {
	overflow: hidden;
}

.cp-effect-frontrow .cp-effect:first-child,
.cp-effect-frontrow.cp-effect-out .cp-effect:first-child {
	-webkit-animation: moveToFront 0.8s forwards;
	animation: moveToFront 0.8s forwards;
}

.cp-effect-frontrow .cp-effect:nth-child(2),
.cp-effect-frontrow.cp-effect-out .cp-effect:nth-child(2) {
	-webkit-animation: moveToBack 0.8s forwards;
	animation: moveToBack 0.8s forwards;
}

.cp-effect-frontrow:hover .cp-effect:first-child,
.cp-effect-frontrow.cp-effect-in .cp-effect:first-child {
	-webkit-animation: moveToBack 0.8s forwards;
	animation: moveToBack 0.8s forwards;
	z-index:3
}

.cp-effect-frontrow:hover .cp-effect:nth-child(2),
.cp-effect-frontrow.cp-effect-in .cp-effect:nth-child(2) {
	-webkit-animation: moveToFront 0.8s forwards;
	animation: moveToFront 0.8s forwards;
	z-index:4
}


@-webkit-keyframes moveToBack { 
	100% { -webkit-transform: translateX(-60%) scale(.8); }
}

@keyframes moveToBack { 
	100% { transform: translateX(-60%) scale(.8); }
}

@-webkit-keyframes moveToBack { 
	100% { -webkit-transform: translateX(-60%) scale(.8); }
}

@-webkit-keyframes moveToFront { 
	0% { -webkit-transform: translateX(100%) scale(.8); }
	100% { visibility: visible; opacity: 1; -webkit-transform: translateX(0%) scale(1); }
}

@keyframes moveToFront { 
	0% { transform: translateX(100%) scale(.8); }
	100% { visibility: visible; opacity: 1; transform: translateX(0%) scale(1); }
}

/* EFFECTS: Center flip */
.cp-effect-flip {
	-webkit-perspective: 1500px;
	perspective: 1500px;
}

.cp-effect-flip li a {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.cp-effect-flip .cp-effect:first-child,
.cp-effect-flip.cp-effect-out .cp-effect:first-child {
	-webkit-animation: flipIn 0.8s ease-in forwards;
	animation: flipIn 0.8s ease-in forwards;
}

.cp-effect-flip .cp-effect:nth-child(2),
.cp-effect-flip.cp-effect-out .cp-effect:nth-child(2) {
	-webkit-animation: flipOut 0.8s ease-in forwards;
	animation: flipOut 0.8s ease-in forwards;
}

.cp-effect-flip:hover .cp-effect:first-child,
.cp-effect-flip.cp-effect-in .cp-effect:first-child {
	-webkit-animation: flipOut 0.8s ease-in forwards;
	animation: flipOut 0.8s ease-in forwards;
	z-index:3
}

.cp-effect-flip:hover .cp-effect:nth-child(2),
.cp-effect-flip.cp-effect-in .cp-effect:nth-child(2) {
	-webkit-animation: flipIn 0.8s ease-in forwards;
	animation: flipIn 0.8s ease-in forwards;
	z-index:4
}

@-webkit-keyframes flipOut { 
	50% { opacity: 0; -webkit-transform: rotateY(90deg); }
	100% { opacity: 0; -webkit-transform: rotateY(90deg); }
}

@keyframes flipOut { 
	50% { opacity: 0; transform: rotateY(90deg); }
	100% { opacity: 0; transform: rotateY(90deg); }
}

@-webkit-keyframes flipIn { 
	0% { opacity: 0; -webkit-transform: rotateY(-90deg); }
	50% { opacity: 0; -webkit-transform: rotateY(-90deg); }
	75% { visibility: visible; opacity: 1; -webkit-transform: rotateY(15deg); -webkit-animation-timing-function: ease-in; }
	100% { visibility: visible; opacity: 1; -webkit-transform: rotateY(0deg); }
}

@keyframes flipIn { 
	0% { opacity: 0; transform: rotateY(-90deg); }
	50% { opacity: 0; transform: rotateY(-90deg); }
	75% { visibility: visible; opacity: 1; transform: rotateY(15deg); animation-timing-function: ease-in; }
	100% { visibility: visible; opacity: 1; transform: rotateY(0deg); }
}