* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	background: #4e699d;
	font-family: sans-serif;
}

/* THE MAINCONTAINER LABEL HOLDS EVERYTHING */
label {
display: block;
position: absolute;
top: 63.5%;
left: 50%;
width: 500px!important;
height: 300px!important;
perspective: 1000px;
transform-style: preserve-3d;
transform: translate(-50%, -50%);
cursor: pointer;
margin-bottom: 100px!important;
}

/* THE CARD HOLDS THE FRONT AND BACK FACES */
.thecard{
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: all 0.5s ease-in-out;
	z-index: 1;
}

/* THE FLIP CSS CONTROLS THE FLIP ON MOUSE CLICK */
.thecard .theback {
	transform: rotateY(180deg);
	color: #000;
	background: #fff;
}


/* IF HOVER THEN THE CARD 2 DEGREE ROTATED */
label:hover .thecard {
transform: rotateX(2deg);
box-shadow: 0 20px 20px rgba(50, 60, 60, 0.2);
}


/* INPUT TYPE CHECKBOX DISPLAY NONE FOR COOL DESIGN */
input {
display: none;
}

:checked + .thecard {
transform: rotateY(180deg)!important;
}


/* IF CHECKED THEN IT ROTATE 180DEG Y AXIS THAT MEANS LEFT TO RIGHT */
/* IF YOU WANT TO ROTATE TOP TO BOTTOM THEN USE rotateX AXIS PLEASE! */
label:hover :checked + .thecard {
transform: rotateY(175deg)!important;
box-shadow: 0 20px 20px rgba(255, 255, 255, 0.2)!important;
} 

/* THE FRONT FACE OF THE CARD, WHICH SHOWS BY DEFAULT */
.thefront{
	position: absolute;
	width: 100%;
	height: 100%;
	text-align: center;
	background: #fff;
	backface-visibility: hidden;
	border-radius: 0 20px 0 20px;
}

/* THE BACK FACE OF THE CARD, WHICH SHOWS ON MOUSEOVER */
.theback{
	position: absolute;
	width: 100%;
	height: 100%;
	text-align: center;
	background: #fff;
	backface-visibility: hidden;
	border-radius: 0 20px 0 20px;
}


/*This block (starts here) is merely styling for the flip card, and is NOT an essential part of the flip code */
/* IF YOU DO NOT USE BOOTSTRAP THEN USE RAW CSS */

/* .thefront h1, .theback h1{
font-family: 'zilla slab', sans-serif;
padding: 30px;
font-weight: bold;
font-size: 24px;
text-align: center;
}

.thefront p, .theback p{
font-family: 'zilla slab', sans-serif;
padding: 30px;
font-weight: normal;
font-size: 12px;
text-align: center;
} */
/*This block (ends here) is merely styling for the flip card, and is NOT an essential part of the flip code */