.cc,.cc-back {
		border-radius:4%;
		z-index:1
	}
	
.cc .date .right span,.cc .name,.cc .number {
		color:#fff
	}

.cc {
		box-shadow:5px 5px 6px 3px #ccc;
		position:relative
	}
	
.cc .logo,.cc .number,.chip .mc {
		position:absolute
	}
	
.cc-back{
		transform:rotateY(180deg)
	}
	
.cc .chip,.cc-back .chip {
		width:18%;
		height:18%;
		position:absolute;
		background:#ddd;
		border-radius:5%;
		top:10%;
		left:10%
	}
	
.cc-back .chip {
		top:70%!important;
		left:5%!important
	}
	
.chip .mc {
		width:99%;
		height:99%;
		background: url("../baseimages/chip.png") no-repeat;
		top:0%;
		left:4%
	}
	
.cc .logo {
		width:20%;
		height:100%;
		top:10%;
		right:10%;
		display:none
	}
	
.cc .number{
		width:80%;
		height:20%;
		top:45%;
		left:10%;
		text-align:center
	}

.cc .name,.cc-back .sign{
		left:5%;
		position:absolute
	}
	
.cc .name{
		width:60%;
		height:auto;
		bottom:15%
	}
	
.cc .date{
		width:30%;
		height:auto;
		position:absolute;
		right:10%;
		bottom:10%
	}
	
.cc .date .left{
		width:30%;
		display:inline-block;
		float:left;
		padding-top:10%
	}
	
.cc .date .right{
		width:70%;
		display:inline-block;
		float:right;
		text-align:center
	}
	
.cc-back .magnet{
		width:100%;
		height:20%;
		position:absolute;
		background:#000;
		top:15%
	}
	
.cc-back .sign{
		width:65%;
		height:15%;
		background:#fff;
		top:40%
	}
	
.cc-back .cvc{
		width:25%;
		height:auto;
		position:absolute;
		color:#fff;
		top:40%;
		right:5%;
		text-align:center
	}
	
.cc-back .copyright{
		width:65%;
		height:20%;
		position:absolute;
		top:70%;
		right:5%;
		color:#666;
		text-align:justify
	}