body {
	background: #f0f0f0;
}

/*--------------------
Credit Card
--------------------*/
.credit-card-box {

}

.btn {
 border-radius: 0px !important;
 background-color: #CCCCCC !important;
 color: #000 !important;
 border-color: #CCCCCC !important;
}

.btn:hover {
 background-color: #CCCCCC !important;
 border-color: #CCCCCC !important;
}


#card, .front {
	width: 270px;
	height: 168px;
}

#card, .back {
	width: 270px;
	height: 168px;
}

.credit-card-box .front,
.credit-card-box .back {
	border-radius: 15px;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transition: 0.6s;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	position: absolute;
	top: 0;
	left: 0;
	background: linear-gradient(135deg, #0a0a82, #0a0a82);
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

	.credit-card-box .flip {
		transition: 0.6s;
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
		position: relative;
	}

	.credit-card-box .logo {
		position: absolute;
		top: 15px;
		left: 30px;
		width: 60px;
	}

		.credit-card-box .logo svg {
			width: 100%;
			height: auto;
			fill: #fff;
		}

	.credit-card-box .front {
		z-index: 2;
		-webkit-transform: rotateY(0deg);
		transform: rotateY(0deg);
	}

	.credit-card-box .back {
		-webkit-transform: rotateY(180deg);
		transform: rotateY(180deg);
	}


	.credit-card-box .strip {
		background: linear-gradient(135deg, #404040, #1a1a1a);
		position: absolute;
		width: 100%;
		height: 30px;
		top: 30px;
		left: 0;
	}

.credit-card-box .number {
	position: absolute;
	margin: 0 auto;
	top: 65px;
	left: 20px;
	font-size: 13px;
}

	.credit-card-box label {
		font-size: 10px;
		letter-spacing: 1px;
		text-shadow: none;
		text-transform: uppercase;
		font-weight: normal;
		display: block;
		margin-bottom: 3px;
		color: #fff;
	}

	.credit-card-box .card-holder,
	.credit-card-box .card-expiration-date {
		position: absolute;
		margin: 0 auto;
		top: 180px;
		left: 19px;
		font-size: 22px;
		text-transform: capitalize;
	}

	.card-number {
		position: absolute;
		margin: 0 auto;
		top: 45px;
		left: 30px;
		text-transform: capitalize;
	}

		.btn {
			font-size: 13px;
		}

	.bc-card-btn {

	}

	.credit-card-box .ccv {
		height: 85px;
		background: #fff;
		width: 91%;
		border-radius: 5px;
		top: 70px;
		left: 0;
		right: 0;
		position: absolute;
		margin: 0 auto;
		color: #000;
		padding: 5px;
		font-size:12px;
	}

		.credit-card-box .ccv label {
			margin: -25px 0 14px;
			color: #fff;
		}

.credit-card-box .label-box {
	width: 100px;
	display: inline-block;
} 


.number {
	text-align: center;
	position: absolute;
	top: 150px;
	left: 32px;
	right: 32px;
	font-size: 0;
}

	.number > input {
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		padding: 5px 5px;
		font-size: 13px;
		color: #000000;
		text-align: center;
		width: 22%;
		background: #82D2F0;
		border-radius: 5px;
		border: 0;
		transition: 0.2s;
	}

	@keyframes bubble-rotate {
		from {
			-webkit-transform: rotate(0turn);
			transform: rotate(0turn);
		}

		to {
			-webkit-transform: rotate(.25turn);
			transform: rotate(.25turn);
		}
	}

.modal-btn-close {
	-webkit-animation-duration: .4s;
	animation-duration: .4s;
	-webkit-animation-timing-function: ease;
	animation-timing-function: ease;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1;
	-webkit-animation-fill-mode: none;
	animation-fill-mode: none;
	overflow: hidden;
	color: #fff !important;
	opacity: 1;
}

	.modal-btn-close:hover {
		-webkit-animation-name: bubble-rotate;
		animation-name: bubble-rotate
	}



	.card-hidden {
		display: none !important;
	}

.card-visible {
	display: block !important;
	backface-visibility: visible !important;
}

.btn-click {
	cursor: pointer;
	text-align: right;
	left: auto;
	right: 40px;
	top: 120px;
	position: absolute;
}