.ribbon

$shadow : #507abd;
$bgColor: #5d84c3;
$ribbonColor:	#fff;

html{	background-color:$bgColor; }

/* The ribbon */

.ribbon{
	width:100px;
	height:150px;
	background-color:$ribbonColor;
	position:absolute;
	right:100px;
	top:-350px;
	animation:drop forwards .8s 1s cubic-bezier(0.165, 0.84, 0.44, 1);
	&:before{
		content: '';
		position: absolute;
		z-index: 2;
		left: 0;
		bottom: -50px;
		border-left: 50px solid $ribbonColor;
		border-right: 50px solid $ribbonColor;
		border-bottom: 50px solid transparent;
	}
	&:after{
		content:'';
		width:200px;
		height:270px;
		position: absolute;
		z-index: -1;
		left: 0;
		bottom:-120px;
		background-color:$shadow;
		transform:skewY(35deg) skewX(0);
	}
}

@keyframes drop{
	0%		{ top:-350px; }
	100%	{ top:0; }
}