.transition (@transition) {
	-webkit-transition: @transition;  
	-moz-transition:    @transition;
	-ms-transition:     @transition; 
	-o-transition:      @transition;
}
.drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
    -webkit-box-shadow:	@x @y @blur @spread rgba(0, 0, 0, @alpha);
	-moz-box-shadow:	@x @y @blur @spread rgba(0, 0, 0, @alpha);
	box-shadow:		@x @y @blur @spread rgba(0, 0, 0, @alpha);
}
.inner-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
	-webkit-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
	-moz-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
	box-shadow:inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
}
.border-radius(@top_left, @top_right, @bottom_left, @bottom_right) {
    -moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
}
 
.border-radius(@top_left, @top_right, @bottom_left, @bottom_right) when not (@top_left = unchanged) {
	-webkit-border-top-left-radius: @top_left;
	-moz-border-radius-topleft: @top_left;
	border-top-left-radius: @top_left;
}
 
.border-radius(@top_left, @top_right, @bottom_left, @bottom_right) when not (@top_right = unchanged) {
	-webkit-border-top-right-radius: @top_right;
	-moz-border-radius-topright: @top_right;
	border-top-right-radius: @top_right;
}
 
.border-radius(@top_left, @top_right, @bottom_left, @bottom_right) when not (@bottom_left = unchanged) {
	-webkit-border-bottom-left-radius: @bottom_left;
	-moz-border-radius-bottomleft: @bottom_left;
	border-bottom-left-radius: @bottom_left;
}
 
.border-radius(@top_left, @top_right, @bottom_left, @bottom_right) when not (@bottom_right = unchanged) {
	-webkit-border-bottom-right-radius: @bottom_right;
	-moz-border-radius-bottomright: @bottom_right;
	border-bottom-right-radius: @bottom_right;
}
 
.border-radius(@top, @bottom) {
	.border-radius(@top, @top, @bottom, @bottom);
}
 
.border-radius(@radius) {
	.border-radius(@radius, @radius);
}
body{
  /* fallback */
  background-color: #2F2727;
  background-image: url(http://www.artsmc.net/codepen/dribbble/personalsite/images/radial_bg.png);
  background-position: center center;
  background-repeat: no-repeat;
  /* Safari 4-5, Chrome 1-9 */
  /* Can't specify a percentage size? Laaaaaame. */
  background: -webkit-gradient(radial, center center, 0, center center, 460, from(#e6dbd6), to(#c7b7b0));
  /* Safari 5.1+, Chrome 10+ */
  background: -webkit-radial-gradient(circle, #e6dbd6,#c7b7b0 );
  /* Firefox 3.6+ */
  background: -moz-radial-gradient(circle, #e6dbd6,#c7b7b0);
  /* IE 10 */
  background: -ms-radial-gradient(circle, #e6dbd6,#c7b7b0);
}
.process-paper{
     margin:0 auto;
     width:418px; 
}
.shredder{
    position:relative;
 width:418px;   
}
.catcher {
    display:block;
    height:20px;
    .border-radius(10px,10px,0,0);
      /* fallback */
  background-color:#bab7cd;
  background: url(http://www.artsmc.net/codepen/dribbble/personalsite/images/linear_bg_2.png);
  background-repeat: repeat-x;
background-image: -moz-linear-gradient(top , #bab7cd, #5b5182 7.5%,#bab7cd 23.5%,#f7ffff 42.5%,#000024 48.5%,#000024 59.0%,#823d57 81.0%,#64263c 100.0%);
background-image: -webkit-linear-gradient(top , #bab7cd, #5b5182 7.5%,#bab7cd 23.5%,#f7ffff 42.5%,#000024 48.5%,#000024 59.0%,#823d57 81.0%,#64263c 100.0%);
background-image: -o-linear-gradient(top , #bab7cd, #5b5182 7.5%,#bab7cd 23.5%,#f7ffff 42.5%,#000024 48.5%,#000024 59.0%,#823d57 81.0%,#64263c 100.0%);
background-image: -ms-linear-gradient(top , #bab7cd, #5b5182 7.5%,#bab7cd 23.5%,#f7ffff 42.5%,#000024 48.5%,#000024 59.0%,#823d57 81.0%,#64263c 100.0%);
background-image: linear-gradient(top , #bab7cd, #5b5182 7.5%,#bab7cd 23.5%,#f7ffff 42.5%,#000024 48.5%,#000024 59.0%,#823d57 81.0%,#64263c 100.0%);
}
.operation{
display:block;
font-family: 'Oxygen', sans-serif;
text-shadow: #ff7b6f 0px 1px 0px;
font-weight: 700;
font-size: 2.9em;
font-style: normal;
letter-spacing: -1pt;
color:#a7042e;
 padding: 40px 40px; 
 height:144px;
 border-top:1px solid #ff7b6f;
 border-bottom:2px solid #ff7b6f;
 .border-radius(0px,0px,60px,60px);
  position:relative;
  /* fallback */
  background-color:#e33b49;
  background: url(http://www.artsmc.net/codepen/dribbble/personalsite/images/linear_bg_1.png);
  background-repeat: repeat-x;
background-image: -moz-linear-gradient(top , #e33b49, #e33b49 0%,#ce374e 73.5%);
background-image: -webkit-linear-gradient(top , #e33b49, #e33b49 0%,#ce374e 73.5%);
background-image: -o-linear-gradient(top , #e33b49, #e33b49 0%,#ce374e 73.5%);
background-image: -ms-linear-gradient(top , #e33b49, #e33b49 0%,#ce374e 73.5%);
background-image: linear-gradient(top , #e33b49, #e33b49 0%,#ce374e 73.5%);

}
.operation:before{
 content: " ";
   position: absolute;
   display:block;
   width:390px;
   z-index: -1;
   top: 0px;
   left: 0px;
   right: 0px;
   bottom: -14px;
   .border-radius(0px,0px,60px,60px);
   border: 14px solid #ae113e;   
   .drop-shadow (0, 1px, 10px, 0, 0.75);
}
.operation:after{
 content: " ";
   position: absolute;
   display:block;
   width:390px;
   z-index: -1;
   top: 0px;
   left: 0px;
   right: 0px;
   bottom: -14px;
   .border-radius(0px,0px,60px,60px);
   border: 14px solid #ae113e;   
   .drop-shadow (0px, 20px, 30px, 0, 0.35);
  .transition(box-shadow 1s);
}
.state{
 position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -150px;
   margin-top: -50px;   
}
.icon-spinner{
    margin-right:40px;
}
.dispenser{
position: absolute;
display:block;
bottom:-10px;
left:50px;
height:7px;
width:320px;
background:#55041e;
}
.dispenser:after{
  content: " ";
   position: absolute;
   display:block;
   height:7px;
   width:320px;
   z-index: 4;
   top: 0px;
   left: 0px;
   right: 10px;
   bottom: -14px;
  .inner-shadow (0,2px,4px,0,0.85);
}
.fullsheet{
display:block;
width:325px;
height:171px;
position:relative;
margin-left:10%;
background:#e8eaeb;
border-top:1px solid #faffff;
  .transition(height 1s);
}
.fullsheet:before{
 content: " ";
 position:absolute;
   display:block;
   width:323px;
   height:172px;
   z-index: -1;
   top: -2px;
   left: -1px;
   right: 0px;
   bottom: 0px;
   border: 2px solid #cfc5c0;   
   .drop-shadow (0, 10px, 50px, 0, 0.25);
}
.shredded{
position:relative;
top:5px;
left:60px;  
}
.slice{
display:block;
position:relative;
  float:left;
  margin-right:5px;
  height:0px;
  width:10px;
  background-color:#b7a9b1;
  border-bottom:2px solid #948688;
  .drop-shadow (0, 10px, 10px, 0, 0.25);
  .transition(height 1s);
background-image: -moz-linear-gradient(top , #461b2b, #8d6d7a 6.0%,#c5bcc2 19.0%,#eaeff0 42.5%);
background-image: -webkit-linear-gradient(top , #461b2b, #8d6d7a 6.0%,#c5bcc2 19.0%,#eaeff0 42.5%);
background-image: -o-linear-gradient(top , #461b2b, #8d6d7a 6.0%,#c5bcc2 19.0%,#eaeff0 42.5%);
background-image: -ms-linear-gradient(top , #461b2b, #8d6d7a 6.0%,#c5bcc2 19.0%,#eaeff0 42.5%);
background-image: linear-gradient(top , #461b2b, #8d6d7a 6.0%,#c5bcc2 19.0%,#eaeff0 42.5%);
}
.process-paper:hover {
  .slice{
   height:99px; 
  }
  .fullsheet{
   height:44px; 
  }
  .operation:after{
   .drop-shadow (0px, 10px, 20px, 0, 0.35); 
  }
}