<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
}