%h1 Daily CSS Images :: 09 Calendar
.wrap
	.holder
		.ornate
		.side.left
		.side.right
	.calender-days
		.cube-wrap
			.arrow
			.cube.cube-1
				.face.front 0
				.face.back 2
				.face.right 3
				.face.left 4
				.face.top 5
				.face.bottom 6
		.cube-wrap
			.cube.cube-2
				.face.front 1
				.face.back 2
				.face.right 3
				.face.left 9
				.face.top 3
				.face.bottom 6
	.calender-month
		.rectangle-wrap
			.rectangle.rectangle-1
				.face.front January
				.face.back Febuary
				.face.top May
				.face.bottom June

$main-color:#E6D7C3;
body {
	font-family: 'Pacifico', cursive;
	background-color: #BDADEA;
}

h1 {
	position: absolute;
	top: 20px;
	width: 99%;
	text-align: center;
	font-weight: normal;
	font-family: 'Space Mono', monospace;
	font-size: 2rem;
}

.wrap {
	width: 220px;
	margin: 200px auto;
	position: relative;
}

.holder {
	width: 250px;
	left: -20px;
	top: -60px;
	border-radius: 50px 50px 0 0;
	background-color: darken($main-color, 5);
	height: 220px;
	position: absolute;
	z-index: -1;
	box-shadow: 0px -8px 1px darken($main-color, 10);
	.ornate {
		display: none;
		background-color: #BDADEA;
		//display: inline-block;
		height: 15px;
		//margin: 0 10px;
		position: relative;
		margin: 25px auto;
		transform: rotate(-45deg);
		width: 15px;
		box-shadow: 0px -6px 1px darken($main-color, 10);
		&:before,
		&:after {
			content: "";
			background-color: #BDADEA;
			border-radius: 50%;
			height: 15px;
			position: absolute;
			width: 15px;
		}
		&:before {
			top: -10px;
			left: 0;
		}
		&:after {
			left: 10px;
			top: 0;
		}
	}
	.side {
		position: absolute;
		width: 22px;
		height: 140px;
		background-color: darken($main-color, 10);
		//box-shadow: 0px -8px 1px darken($main-color,10);
		//	transform-style: preserve-3d;
		bottom: -25px;
		box-shadow: 4px -10px 2px 2px darken($main-color, 15);
		&:after {
			content: "";
		}
		&.left {
			left: -2px;
			//	transform: rotateY( -80deg) translateZ( 50px) translateY(40px);
		}
		&.right {
			box-shadow: -4px -10px 2px 2px darken($main-color, 20);
			right: -2px;
		}
	}
}

.calender-days,
calender-month {
	width: 220px;
	margin-bottom: 20px;
	display: flex;
}

.cube-wrap {
	//display: none;
	width: 105px;
	height: 105px;
	position: relative;
	perspective: 1000px;
}

.rectangle-wrap {
	//float: left;
	width: 220px;
	height: 100px;
	position: relative;
	perspective: 1000px;
}

.cubeoid {
	position: absolute;
	transform-style: preserve-3d;
	transition: transform 1s;
	transform: translateZ( -10px) rotateX( -10deg);
	transform-origin: "center center";
	width: 100%;
	height: 100%;
	>.face {
		border: 1px solid rgba(0, 0, 0, 0.1);
		text-align: center;
		background-color: $main-color;
		position: absolute;
		display: block;
		border-radius: 2px;
		text-shadow: 0px 1px 1px #4d4d4d;
		color: lighten(#222, 20);
		//color: #3B5957;
		text-shadow: 0px 1px 0px rgba(255, 255, 255, .3), 0px -1px 0px rgba(0, 0, 0, .7);
	}
}

.cube {
	@extend .cubeoid;
	animation: cycle-1 2s linear;
	&.cube-2 {
		animation: cycle-2 2s ease;
	}
	>.face {
		margin: 0;
		width: 99px;
		height: 99px;
		line-height: 80px;
		font-size: 5rem;
	}
}

.calender-month {
	position: relative;
	z-index: -1;
	margin-top: -10px;
	.rectangle {
		animation: cycle-1 1.5s ease;
		@extend .cubeoid;
		height: 50px;
		>.face {
			width: 207px;
			height: 48px;
			font-size: 1.5rem;
			line-height: 40px;
		}
	}
}

.cube .face.front {
	transform: rotateY( 0deg) translateZ( 50px);
}

.cube .face.back {
	transform: rotateX( 180deg) translateZ( 50px);
}

.cube .face.right {
	transform: rotateY( 90deg) translateZ( 50px);
}

.cube .face.left {
	transform: rotateY( -90deg) translateZ( 50px);
}

.cube .face.top {
	transform: rotateX( 90deg) translateZ( 50px);
}

.cube .face.bottom {
	transform: rotateX( -90deg) translateZ( 50px);
}

.rectangle .face.front {
	transform: rotateY( 0deg) translateZ( 25px);
}

.rectangle .face.back {
	transform: rotateX( 180deg) translateZ( 25px);
}

.rectangle .face.right {
	transform: rotateY( 90deg) translateZ( 25px);
}

.rectangle .face.left {
	transform: rotateY( -90deg) translateZ( 25px);
}

.rectangle .face.top {
	transform: rotateX( 90deg) translateZ( 25px);
}

.rectangle .face.bottom {
	transform: rotateX( -90deg) translateZ( 25px);
}

.cube.show-front {
	transform: translateZ( -50px) rotateY( 0deg);
}

.cube.show-back {
	transform: translateZ( -50px) rotateX( -180deg);
}

.cube.show-right {
	transform: translateZ( -50px) rotateY( -90deg);
}

.cube.show-left {
	transform: translateZ( -50px) rotateY( 90deg);
}

.cube.show-top {
	transform: translateZ( -50px) rotateX( -90deg);
}

.cube.show-bottom {
	transform: translateZ( -50px) rotateX( 90deg);
}

@keyframes cycle-1 {
	from {
		transform: translateZ( -10px) rotateX( 0deg);
	}
	to {
		transform: translateZ( -10px) rotateX( -360deg);
	}
}

@keyframes cycle-2 {
	from {
		transform: translateZ( -10px) rotateY( 0deg);
	}
	to {
		transform: translateZ( -10px) rotateY( -360deg);
	}
}

var date = new Date(),
	locale = "en-GB",
	month = date.toLocaleString(locale, {
		month: "long"
	}),
	day = date.toLocaleString(locale, {
		day: "2-digit"
	});
setTimeout(function() {
	$('.cube-1 .face.front').text(day[0]);
	$('.cube-2 .face.front').text(day[1]);
	$('.rectangle-1 .face.front').text(month);
}, 500);