<div class="logo">
	<div class="shadow"></div>
	<div class="r2">
	  <div class="ribb1b ribbon"></div>			
	</div>
	<div class="sh21">
		<div class="sh2a"></div>
	</div>
		<div class="sh1 sh1b"></div>
	<div class="r1">
		<div class="ribb2a ribbon"></div>
	</div>
	<div class="sh22">
		<div class="sh2b"></div>
	</div>
	<div class="r2">
		<div class="ribb2b ribbon"></div>			
	</div>
	<div class="sh1 sh1a"></div>	
	<div class="r1">
		<div class="ribb1a ribbon"></div>	
	</div>
</div>
.logo, .logo *{
	position: absolute;
	left: 30%;
}
.ribbon{
	width: 75px;
	height: 220px;	
}
.r1{
	-webkit-transform: rotate(62deg);
	-moz-transform: rotate(62deg);
	-o-transform: rotate(62deg);
	-ms-transform: rotate(62deg);
	transform: rotate(62deg);
}
.r2{
	-webkit-transform: rotate(-62deg);
	-moz-transform: rotate(-62deg);
	-o-transform: rotate(-62deg);
	-ms-transform: rotate(-62deg);
	transform: rotate(-62deg);
}
.ribb1a{
	background: #E4641F;
	top: -158px;
	left: 135px;	
	border-radius: 0px 12px;
	-webkit-transform: skewy(28deg);
	-moz-transform: skewy(28deg);
	-o-transform: skewy(28deg);
	-ms-transform: skewy(28deg);
	transform: skewy(28deg);
}
.ribb1b{
	background: -webkit-gradient(radial,0% 10%,60, -70% 10%,200,from(rgba(169,68,59,1)),to(rgba(190,120,51,1)));
	background: -moz-radial-gradient(0% 10%,circle,rgba(169,68,59,1),rgba(190,120,51,1));
	background-image: -o-linear-gradient(top,rgba(169,68,59,1),rgba(190,120,51,1));
	background: gradient(radial,0% 10%,60, -70% 10%,200,from(rgba(169,68,59,1)),to(rgba(190,120,51,1)));
	top: 115px;
	left: -198px;	
	border-radius: 18px 0px;
	-webkit-transform: skewy(-28deg);
	-moz-transform: skewy(-28deg);
	-o-transform: skewy(-28deg);
	-ms-transform: skewy(-28deg);
	transform: skewy(-28deg);
}

.ribb2a{
	background-color: rgba(75,111,107,1);
	background: -webkit-gradient(radial,0% 10%,60, -70% 10%,250,from(rgba(75,111,107,1)),to(rgba(99,148,123,1)));
	background: -moz-radial-gradient(0% 10%,circle,rgba(75,111,107,1),rgba(99,148,123,1));
	background-image: -o-linear-gradient(bottom,rgba(99,148,123,1),rgba(0,0,0,0));
	background: gradient(radial,0% 10%,60, -70% 10%,250,from(rgba(75,111,107,1)),to(rgba(99,148,123,1)));
	border-radius: 0px 12px;
	-webkit-transform: skewy(28deg);
	-moz-transform: skewy(28deg);
	-o-transform: skewy(28deg);
	-ms-transform: skewy(28deg);
	transform: skewy(28deg);
	
	top: -158px;
	left: 268px;	
}

.ribb2b{
	background-color: rgba(75,111,107,1);
	background: -webkit-gradient(radial,10% 30%,10,10% 25%,150,from(rgba(99,148,123,1)),to(rgba(75,111,107,1)));
	background: -moz-radial-gradient(10% 30%,circle,rgba(99,148,123,1),rgba(75,111,107,1));
	background-image: -o-linear-gradient(top,rgba(99,148,123,1),rgba(0,0,0,0));
	background: gradient(radial,10% 30%,10,10% 25%,150,from(rgba(99,148,123,1)),to(rgba(75,111,107,1)));
	top: 116px;
	left: -67px;	
	border-radius: 12px 0px;
	-webkit-transform: skewy(-28deg);
	-moz-transform: skewy(-28deg);
	-o-transform: skewy(-28deg);
	-ms-transform: skewy(-28deg);
	transform: skewy(-28deg);
}
.sh1{
	background: #000;
	width: 60px;
	height: 100px;
	border-radius: 45px;
	box-shadow: 0 0 30px rgba(0,0,0,.6);
	clip: rect(30px 55px 200px -100px);
}	
.sh1a{
	-webkit-transform: rotate(-32deg) skewx(30deg);
	-moz-transform: rotate(-32deg) skewx(30deg);
	-o-transform: rotate(-32deg) skewx(30deg);
	-ms-transform: rotate(-32deg) skewx(30deg);
	transform: rotate(-32deg) skewx(30deg);
	left: 128px;
	top: 49px;
}
.sh1b{
	-webkit-transform: rotate(148deg) skewx(30deg);
	-moz-transform: rotate(148deg) skewx(30deg);
	-o-transform: rotate(148deg) skewx(30deg);
	-ms-transform: rotate(148deg) skewx(30deg);
	transform: rotate(148deg) skewx(30deg);
	left: 121px;
	top: 230px;
}
.sh22{
	top: 140px;
	left: 232px;
	clip: rect(0px 40px 100px -100px);
}
.sh2b{
	opacity: .4;
	background-image: -webkit-linear-gradient(top,rgba(0,0,0,.7) 40%,rgba(0,0,0,0) 97%), -webkit-linear-gradient(263deg,rgba(0,0,0,1)60%,rgba(0,0,0,0) 88%);
	background-image: -moz-linear-gradient(top,rgba(0,0,0,.7) 40%,rgba(0,0,0,0) 97%), -moz-linear-gradient(263deg,rgba(0,0,0,1)60%,rgba(0,0,0,0) 88%);
	background-image: -o-linear-gradient(top,rgba(0,0,0,.7) 40%,rgba(0,0,0,0) 97%), -o-linear-gradient(263deg,rgba(0,0,0,1)60%,rgba(0,0,0,0) 88%);
	background-image: linear-gradient(top,rgba(0,0,0,.7) 40%,rgba(0,0,0,0) 97%), linear-gradient(263deg,rgba(0,0,0,1)60%,rgba(0,0,0,0) 88%);
	width: 150px;
	height: 80px;
	-webkit-transform: skewx(-62deg);
	-moz-transform: skewx(-62deg);
	-o-transform: skewx(-62deg);
	-ms-transform: skewx(-62deg);
	transform: skewx(-62deg);
}
.sh21{
	top: 140px;
	left: 77px;
	-webkit-transform: scalex(-1);
	-moz-transform: scalex(-1);
	-o-transform: scalex(-1);
	-ms-transform: scalex(-1);
	transform: scalex(-1);
	clip: rect(0px 40px 100px -100px);
}
.sh2a{
	z-index: 50;
	opacity: .4;
	background-image: -webkit-linear-gradient(top,rgba(0,0,0,.7) 40%,rgba(0,0,0,0) 97%), -webkit-linear-gradient(263deg,rgba(0,0,0,1)60%,rgba(0,0,0,0) 88%);
	background-image: -moz-linear-gradient(top,rgba(0,0,0,.7) 40%,rgba(0,0,0,0) 97%), -moz-linear-gradient(263deg,rgba(0,0,0,1)60%,rgba(0,0,0,0) 88%);
	background-image: -o-linear-gradient(top,rgba(0,0,0,.7) 40%,rgba(0,0,0,0) 97%), -o-linear-gradient(263deg,rgba(0,0,0,1)60%,rgba(0,0,0,0) 88%);
	background-image: linear-gradient(top,rgba(0,0,0,.7) 40%,rgba(0,0,0,0) 97%), linear-gradient(263deg,rgba(0,0,0,1)60%,rgba(0,0,0,0) 88%);
	width: 150px;
	height: 80px;
	-webkit-transform: skewx(-62deg);
	-moz-transform: skewx(-62deg);
	-o-transform: skewx(-62deg);
	-ms-transform: skewx(-62deg);
	transform: skewx(-62deg);
}
.shadow,
.shadow:before{
	width: 70px;
	height: 55px;
	border-radius: 70px;
	box-shadow: 0 70px 70px rgba(0,0,0,.4);
	top: 290px;
	left: 60px;
	-webkit-transform: rotateX(70deg);
	-moz-transform: rotateX(70deg);
	-o-transform: rotateX(70deg);
	-ms-transform: rotateX(70deg);
	transform: rotateX(70deg);
}
.shadow:before{
	left: 181px
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.