@import url(https://fonts.googleapis.com/css?family=Lato:300);

$bg-dark: #6f1634;
$bg-light: #ed739c;
$front-dark: #9bd151;
$front-light: #e2f0cb;
$shadow: #32314f;
$text: #5f5f5f;
$height: 265px;
$width: 530px;

@mixin radial-gradient($light, $dark) {
	background-image: -webkit-radial-gradient(circle, $light, $dark);
	background-image: -moz-radial-gradient(circle, $light, $dark);
	background-image: -ms-radial-gradient(circle, $light, $dark);
	background-image: radial-gradient(circle, $light, $dark);
}

*  {
  margin: 0;
  padding: 0;
}

html {
	height: 100%;
}

body {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: flex;
	position: fixed;
	overflow: auto;
	align-items: center;
	justify-content: center;
	@include radial-gradient($bg-light,$bg-dark);
	color: $text;
	font-family: 'Lato', sans-serif;
}

h1 {
	font-size: 30px;
	margin-bottom: 20px;
}

p {
	font-size: 15px;
}

.button {
	@include radial-gradient($front-light, $front-dark);
	width: $width / 2;
	height: $height;
	box-sizing: border-box;
	text-align: center;
	padding-top: 5px;
	cursor: pointer;
	box-shadow: 0 0 21px transparentize($shadow, .7);
	transition: all .4s;
	&:hover {
		box-shadow: 0 0 30px transparentize($shadow, .5);
	}
}

.modal {
	width: $width;
	height: $height;
	perspective: 2000px;
	z-index: 2;
	position: absolute;
	top: calc(#{50%} - #{$height / 2});
	left: calc(#{50%} - #{$width / 2});
	display: none;
}

.shadow {
	box-shadow: 0 0 30px transparentize($shadow, .5);
}

.wrapper {
	background: transparentize($shadow, .5);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}

.front,
.back,
.opened {
	height: $height;
	position: absolute;
	box-sizing: border-box;
}

.front {
	@include radial-gradient($front-light, $front-dark);
	width: $width / 2;
	text-align: center;
	padding-top: 5px;
	cursor: pointer;
	z-index: 3;
	backface-visibility: hidden;
	transform-origin: 0% 50%;
	box-shadow: 0 0 21px transparentize($shadow, .5);
	transform: rotateY(-180deg);
}

.back,
.opened {
	width: $width;
	padding: 35px 25px;
	clip: rect(auto, auto, auto, $width / 2);
}

.back {
	background: darken(white, 5%);	
	transform-origin: 50% 50%;
	transform: rotateY(-180deg);
	& .content {
		transform: rotateY(180deg);
	}
}

.opened {
	background: darken(white, 5%);
}

.close {
	position: absolute;
	top: 15px;
	right: 15px;
	cursor: pointer;
	width: 25px;
	height: 25px;
	background: url(http://i63.tinypic.com/1671taq.png) no-repeat center;
	background-size: cover;
	opacity: .6;
}

.front-open {
	animation: front 1.1s forwards ease-in-out;
}

.back-open {
	animation: back 1.1s forwards ease-in-out;
}

.opened-open {
	animation: opened 1.1s forwards ease-in-out;
}

.front-close {
	animation: front 1.1s forwards reverse ease-in-out;
}

.back-close {
	animation: back 1.1s forwards reverse ease-in-out;
}

.opened-close {
	animation: opened 1.1s forwards reverse ease-in-out;
}

@keyframes front {
	0% {
		transform: rotateY(0deg);
		left: $width / 4;
	}
	100% {
		transform: rotateY(-180deg);
		left: $width / 2;
	}
}

@keyframes back {
	0% {
		transform: rotateY(0deg);
		left: -$width / 4;
		background: darken(white, 70%);
	}
	100% {
		transform: rotateY(-180deg);
		left: 0;
		background: darken(white, 5%);
	}
}

@keyframes opened {
	0% {
		left: -$width / 4;
		background: darken(white, 35%);
	}
	100% {
		left: 0;
		background: darken(white, 5%);
	}
}