.panel {
	margin: 0 auto;
	width:500px;
	height: 500px;  
	position: relative;
	-webkit-perspective: 600px;
	-moz-perspective: 300px;
}

.panel .front,
.panel .back {
	text-align: center;
}
	
.panel .front {
	height: inherit;
	position: absolute;
	width:500px;
	top: 0;
	z-index: 900;
	text-align: center;
	-webkit-transform: rotateX(0deg) rotateY(0deg);
	   -moz-transform: rotateX(0deg) rotateY(0deg);
	-webkit-transform-style: preserve-3d;
	   -moz-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	   -moz-backface-visibility: hidden;
	-webkit-transition: all .4s ease-in-out;
	   -moz-transition: all .4s ease-in-out;
		-ms-transition: all .4s ease-in-out;
		 -o-transition: all .4s ease-in-out;
			transition: all .4s ease-in-out;
}

.panel .back {
	height: inherit;
	position: absolute;
	width:500px;
	top: 0;
	z-index: 1000;
	-webkit-transform: rotateY(-180deg);
	   -moz-transform: rotateY(-180deg);
	-webkit-transform-style: preserve-3d;
	   -moz-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	   -moz-backface-visibility: hidden;
	-webkit-transition: all .4s ease-in-out;
	   -moz-transition: all .4s ease-in-out;
		-ms-transition: all .4s ease-in-out;
		 -o-transition: all .4s ease-in-out;
			transition: all .4s ease-in-out;
}
.panel.flip .front {
	z-index: 900;
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
}
.panel.flip .back {
	z-index: 1000;
	-webkit-transform: rotateX(0deg) rotateY(0deg);
	-moz-transform: rotateX(0deg) rotateY(0deg);
}
.box1{
	
	background-color: transparent;
	width: 100%;
	max-width:500px;
	height: 500px;
	margin: 0 auto;
	
	border-radius: 40px;
	-moz-border-radius: 40px;
	-webkit-border-radius: 40px;
}
.box2{
	background-color: transparent;
	width: 100%;
	max-width:500px;
	height: 500px;
	margin: 0 auto;
	
	border-radius: 40px;
	-moz-border-radius: 40px;
	-webkit-border-radius: 40px;
}

@media only screen and (max-width: 767px) 
	{
		.panel 
			{
				width:320px;
				height: 320px;  
			}
			
		.panel .back 
			{
				width:320px;
			}
		
		.panel .front 
			{
				width:320px;
			}
		
		.box1
			{
				max-width:320px;
				height: 320px;
			}
		
		.box2
			{
				max-width:320px;
				height: 320px;
			}
	}