@charset "utf-8";
/* CSS Document */

@import url(reset.css);


#box
{
  position: relative;
  width: 60%;
  background: #ddd;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 2em 1.5em;
  color: rgba(0,0,0, .8);
  text-shadow: 0 1px 0 #fff;
  line-height: 1.5;
  margin: 60px auto;
}

#box:before, #box:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: rgba(0, 0, 0, 0.7);
  -webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);
  -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

#box:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

/************/
/*** Box1 ***/
/************/

.box1 p, .box2 p, .box3 p, .box4 p, .box5 p, .box6 p, .box7 p, .box9 p, .box10 p, .box11 p, .box12 p, .box13 p, .box14 p, .box15 p, .box16 p{
	margin: 30px;
	color: #aaa;
	outline: none;
}

.box1{
	width: 300px;
	margin: 40px;
	min-height: 200px;
	position:relative;
	display: inline-block;
	background: -webkit-gradient(linear, 0% 20%, 0% 1000%, from(#fff), to(#fff), color-stop(.1,#f3f3f3));
	border: 1px solid #ccc;
	-webkit-box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset;
	-webkit-border-bottom-right-radius: 6px 50px;	
}

.box1:before{
	content: '';
	width: 50px;
	height: 100px;
	position:absolute;
	bottom:0; right:0;
	-webkit-box-shadow: 20px 20px 10px rgba(0, 0, 0, 0.1);
	z-index:-1;
	-webkit-transform: translate(-35px,-40px)
						skew(0deg,30deg)
						rotate(-25deg);
}

.box1:after{
	content: '';
	width: 100px;
	height: 100px;
	top:0; left:0;
	position:absolute;
	display: inline-block;
	z-index:-1;
	-webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(2deg)
						translate(20px,25px)
						skew(20deg);
}

/************/
/*** Box2 ***/
/************/

.box2{
	margin: 50px;
	width: 300px;
	min-height: 150px;
	padding: 0 0 1px 0;
	position:relative;
	background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
	-webkit-border-bottom-right-radius: 60px 60px;
	-webkit-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
	
}
.box2:before{
	content:'';	
	width: 25px;
	height: 20px;
	position: absolute;
	bottom:0;
	right:0;
	-webkit-border-bottom-right-radius: 30px;
	-webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
	-webkit-transform:
	rotate(-20deg)
	skew(-40deg,-3deg)
	translate(-13px,-13px);
}

.box2:after{
	content: '';
	z-index: -1;
	width: 100px;
	height: 100px;
	position:absolute;
	bottom:0;
	right:0;
	background: rgba(0, 0, 0, 0.2);
	display: inline-block;
	-webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(0deg)
						translate(-45px,-20px)
					   	skew(20deg);
}


/************/
/*** Box3 ***/
/************/

.box3{
	margin: 50px;
	width: 300px;
	padding: 5px 0 ;
	position:relative;
	background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
	border: 1px solid #ccc;
	-webkit-border-radius: 60px 5px;
	-webkit-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
}

.box3:before{
	content: '';
	width: 50px;
	height: 50px;
	top:0; right:0;
	position:absolute;
	display: inline-block;
	z-index:-1;
	-webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(2deg)
						translate(-14px,20px)
					   	skew(-20deg);
}

.box3:after{
	content: '';
	width: 100px;
	height: 100px;
	top:0; left:0;
	position:absolute;
	z-index:-1;
	display: inline-block;
	-webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(2deg)
						translate(20px,25px)
					   	skew(20deg);
}

/************/
/*** Box4 ***/
/************/

.box4{
	margin: 50px;
	min-height: 100px;
	width: 300px;
	padding: 5px 0 ;
	position:relative;
	background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#fff), to(#fff), color-stop(.2, #f2f2f2));
	border: 1px solid #ccc;
	-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

.box4:before{
	content: '';
	width: 50px;
	height: 50px;
	top:0; right:0;
	position:absolute;
	z-index: -1;
	-webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(2deg)
						translate(-14px,20px)
						skew(-20deg);
}
.box4:after{
	content: '';
	width: 50px;
	height: 50px;
	top:0; left:0;
	position:absolute;
	z-index:-1;
	display: inline-block;
	-webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(2deg)
						translate(12px,25px)
					   	skew(20deg);
}

.shr_box4{
	width: 100px;
	height: 100px;
	bottom:0; right:0;
	position:absolute;
	z-index: -1;
	-webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(0deg)
	translate(-20px,-15px)
					   skew(20deg);
}
.shl_box4{
	content: '';
	width: 100px;
	height: 100px;
	bottom:0; left:0;
	position:absolute;
	z-index: -1;
	-webkit-box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(0deg)
	translate(20px,-15px)
					   skew(-20deg);
}

/************/
/*** Box5 ***/
/************/

.box5{
	margin: 50px;
	width: 300px;
	padding: 0 0 1px 0;
	position:relative;
	background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
	-webkit-border-bottom-right-radius: 60px 60px;
	-webkit-border-bottom-left-radius: 60px 60px;
	-webkit-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
	
}

.box5:before{
	content:'';	
	width: 25px;
	height: 20px;
	background: white;
	position: absolute;
	bottom:0; right:0;
	background: -webkit-gradient(linear, 0% 20%, 50% 40%, from(#fff), to( #eee), color-stop(.1,#fff));
	-webkit-border-bottom-right-radius: 30px;
	-webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
	-webkit-transform: rotate(-20deg)
						skew(-40deg,-3deg)
						translate(-13px,-13px);
}

.box5:after{
	content: '';
	z-index: -10;
	width: 100px;
	height: 100px;
	position:absolute;
	bottom:0;
	right:0;
	background: rgba(0, 0, 0, 0.2);
	display: inline-block;
	-webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(0deg)
						translate(-45px,-20px)
						skew(20deg);
}

.fold_box5{
	z-index: -10;
	width: 50px;
	height: 50px;
	position:absolute;

	bottom:0; left:0;
	-webkit-box-shadow: -20px 20px 8px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(0deg)
						translate(40px,-20px)
						skew(-20deg);
}
.fold2_box5{
	content:'';	
	width: 25px;
	height: 20px;
	background: white;
	position: absolute;
	bottom:0; left:0;
	background: -webkit-gradient(linear, 0% 20%, 50% 80%, from(#fff), to( #eee), color-stop(.1,#fff));
	-webkit-border-bottom-right-radius: 30px;
	-webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
	-webkit-transform: rotate(103deg)
						skew(-3deg,-40deg)
						translate(-13px,-15px);
}

/***************/
/*** box Six ***/
/***************/

.box6{
	margin: 50px;
	width: 300px;
	min-height: 150px;
	padding: 0 0 1px 0;
	position:relative;
	background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
	-webkit-border-top-left-radius: 60px 5px;
	-webkit-border-top-right-radius: 60px 5px;
	-webkit-border-bottom-right-radius: 60px 60px ;
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;
	
}

.box6:before{
	content:'';	
	width: 25px;
	height: 20px;
	position: absolute;
	bottom:0;
	right:0;
	-webkit-border-bottom-right-radius: 30px;
	-webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
	-webkit-transform:
	rotate(-20deg)
	skew(-40deg,-3deg)
	translate(-13px,-13px);
}

.box6:after{
	content: '';
	z-index: -10;
	width: 100px;
	height: 100px;
	position:absolute;
	bottom:0;
	right:0;
	background: rgba(0, 0, 0, 0.2);
	display: inline-block;
	-webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(0deg)
						translate(-45px,-20px)
					   	skew(20deg);
}
.box6_corner_lf{
	width: 100px;
	height: 100px;
	top:0; left:0;
	position:absolute;
	z-index:-6;
	display: inline-block;
	-webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(2deg)
						translate(20px,25px)
					   	skew(20deg);
}

.box6_corner_rt{
	content: '';
	width: 50px;
	height: 50px;
	top:0; right:0;
	position:absolute;
	display: inline-block;
	z-index:-6;
	-webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(2deg)
						translate(-14px,20px)
					   	skew(-20deg);
}

/*****************/
/*** box Seven ***/
/*****************/

.box7{
	margin: 50px;
	width: 600px;
	min-height: 150px;
	padding: 0 0 1px 0;
	position:relative;
	background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2) ;
}

.box7:before{
	content: '';
	position:absolute;
	width: 130px;
	height: 30px;
	border-left: 1px dashed rgba(0, 0, 0, 0.1);
	border-right: 1px dashed rgba(0, 0, 0, 0.1);
	background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-webkit-transform:translate(-50px,10px)
						skew(10deg,10deg)
						rotate(-50deg)
}
.box7:after{
	content: '';
	position:absolute;
	right:0;
	bottom:0;
	width: 130px;
	height: 30px;
	background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
	border-left: 1px dashed rgba(0, 0, 0, 0.1);
	border-right: 1px dashed rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-webkit-transform: translate(50px,-20px)
						skew(10deg,10deg)
						rotate(-50deg)
}

/*****************/
/*** box eight ***/
/*****************/

.box8{
	margin: 70px 50px;
	width: 300px;
	min-height: 250px;
	position:relative;
	border: 2px solid #ccc;
	background: rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.1);
}

.box8:before{
	content: '';
	width: 110%;
	left: 0; 
	height: 125%;
	z-index:-1;
	position:absolute;
	border: 1px solid #ccc;
	background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
	-webkit-transform: translate(-5%,-5%);
}

.box8:after{
	content: '';
	width: 100%;
	left: 0; 
	height: 115%;
	z-index:-2;
	background: none;
	position:absolute;
	border-radius: 20px;
	-webkit-box-shadow: 15px 0px 30px rgba(0, 0, 0, 0.2);
	-webkit-transform: translate(0,0);
}

/****************/
/*** box nine ***/
/****************/

.box9{
	margin: 70px 50px;
	width: 300px;
	min-height: 250px;
	position:relative;
	border: 1px solid rgba(0,0,0,0.1);
	border-radius:20px;
	background: white;
	-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
}

.box9:before{
	content: '';
	width: 110%;
	left: 0; 
	height: 111%;
	z-index:-1;
	position:absolute;
	border-radius:20px;
	border: 1px solid rgba(0,0,0, 0.1);
	background: rgba(0, 0, 0, 0.0);
	-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
	-webkit-transform: 	translate(-5%,-5%);
}

.box9:after{
	content: '';
	position:absolute;
	top:-25px; left: 30%;
	width: 130px;
	height: 40px;
	background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
	border-left: 1px dashed rgba(0, 0, 0, 0.1);
	border-right: 1px dashed rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
}
/****************/
/*** box ten ***/
/****************/

.box10{
	margin: 50px;
	width: 320px;
	min-height: 150px;
	padding: 0 0 1px 0;
	position:relative;
	background: -webkit-gradient(linear, 100% 100%, 50% 10%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
	border: 1px solid #ccc;
	-webkit-box-shadow: 1px 1px 4px rgba(0,0,0, 0.1);
	-webkit-border-bottom-right-radius: 60px 5px;
	
}
.box10:before{
	content: '';
	width: 98%;
	z-index:-1;
	height: 100%;
	padding: 0 0 1px 0;
	position: absolute;
	bottom:0; right:0;
	background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f9f9f9), color-stop(.1,#fff));
	border: 1px solid #ccc;
	-webkit-box-shadow: 1px 1px 8px rgba(0,0,0, 0.1);
	-webkit-border-bottom-right-radius: 60px 5px;
	-webkit-transform: skew(2deg,2deg)
						translate(3px,8px)
}
.box10:after{
	content: '';
	width: 98%;
	z-index:-1;
	height: 98%;
	padding: 0 0 1px 0;
	position: absolute;
	bottom:0; right:0;
	background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#f3f3f3), to(#f6f6f6), color-stop(.1,#fff));
	border: 1px solid #ccc;
	-webkit-box-shadow: 0px 0px 8px rgba(0,0,0, 0.1);
	-webkit-transform: skew(2deg,2deg)
						translate(-1px,2px)
}

/******************/
/*** box eleven ***/
/******************/

.box11{
	margin: 50px;
	width: 300px;
	min-height: 150px;
	padding: 0 0 1px 0;
	position:relative;
	background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));
	border-top: 1px solid white;
	border-right: 1px solid #ccc;
	-webkit-border-bottom-right-radius: 60px 60px;
	-webkit-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
	
}
.box11:before{
	content:'';	
	width: 25px;
	height: 20px;
	background: white;
	position: absolute;
	bottom:0; right:0;
	background: -webkit-gradient(linear, 0% 20%, 50% 40%, from(#fff), to( #eee), color-stop(.1,#fff));
	-webkit-border-bottom-right-radius: 30px;
	border-bottom-right-radius: 30px;
	-webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
	box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
	-webkit-transform: rotate(-20deg)
						skew(-40deg,-3deg)
						translate(-13px,-13px);
						transform: rotate(-20deg)
						skew(-40deg,-3deg)
						translate(-13px,-13px);
}

.box11:after{
	content: '';
	z-index: -1;
	width: 100px;
	height: 100px;
	position:absolute;
	bottom:0;
	right:0;
	background: rgba(0, 0, 0, 0.2);
	display: inline-block;
	-webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(0deg)
						translate(-45px,-20px)
					   	skew(20deg);
}


.box11_ribbon{
	position:absolute;
	top:-25px; left: 30%;
	width: 130px;
	height: 40px;
	background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
	border-left: 1px dashed rgba(0, 0, 0, 0.1);
	border-right: 1px dashed rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
}

/************/
/*** Box twelve ***/
/************/

.box12{
	margin: 50px;
	width: 300px;
	padding: 0 0 1px 0;
	position:relative;
	background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
	-webkit-border-bottom-right-radius: 60px 60px;
	-webkit-border-bottom-left-radius: 60px 60px;
	-webkit-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
	
}

.box12:before{
	content:'';	
	width: 25px;
	height: 20px;
	background: white;
	position: absolute;
	bottom:0; right:0;
	background: -webkit-gradient(linear, 0% 20%, 50% 40%, from(#fff), to( #eee), color-stop(.1,#fff));
	-webkit-border-bottom-right-radius: 30px;
	-webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
	-webkit-transform: rotate(-20deg)
						skew(-40deg,-3deg)
						translate(-13px,-13px);
}

.box12:after{
	content: '';
	z-index: -10;
	width: 100px;
	height: 100px;
	position:absolute;
	bottom:0;
	right:0;
	background: rgba(0, 0, 0, 0.2);
	display: inline-block;
	-webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(0deg)
						translate(-45px,-20px)
						skew(20deg);
}
.fold_box12{
	z-index: -10;
	width: 50px;
	height: 50px;
	position:absolute;
	bottom:0; left:0;
	-webkit-box-shadow: -20px 20px 8px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(0deg)
						translate(40px,-20px)
						skew(-20deg);
}
.fold2_box12{
	width: 25px;
	height: 20px;
	z-index:20;
	background: white;
	position: absolute;
	bottom:0; left:0;
	background: -webkit-gradient(linear, 0% 20%, 50% 80%, from(#fff), to( #eee), color-stop(.1,#fff));
	-webkit-border-bottom-right-radius: 30px;
	-webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
	-webkit-transform: rotate(103deg)
						skew(-3deg,-40deg)
						translate(-13px,-15px);
}

.box12_ribbon{
	content: '';
	position:absolute;
	top:-25px; left: 30%;
	width: 130px;
	height: 40px;
	background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
	border-left: 1px dashed rgba(0, 0, 0, 0.1);
	border-right: 1px dashed rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
}

/***************/
/*** box thirteen ***/
/***************/

.box13{
	margin: 50px;
	width: 300px;
	min-height: 150px;
	padding: 0 0 1px 0;
	position:relative;
	background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
	-webkit-border-top-left-radius: 60px 5px;
	-webkit-border-top-right-radius: 60px 5px;
	-webkit-border-bottom-right-radius: 60px 60px ;
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;
	
}
.box13:before{
	content:'';	
	width: 25px;
	height: 20px;
	position: absolute;
	bottom:0;
	right:0;
	-webkit-border-bottom-right-radius: 30px;
	-webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
	-webkit-transform:
	rotate(-20deg)
	skew(-40deg,-3deg)
	translate(-13px,-13px);
}
.box13:after{
	content: '';
	z-index: -10;
	width: 100px;
	height: 100px;
	position:absolute;
	bottom:0;
	right:0;
	background: rgba(0, 0, 0, 0.2);
	display: inline-block;
	-webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(0deg)
						translate(-45px,-20px)
					   	skew(20deg);
}
.box13_corner_lf{
	width: 100px;
	height: 100px;
	top:0; left:0;
	position:absolute;
	z-index:-6;
	display: inline-block;
	-webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(2deg)
						translate(20px,25px)
					   	skew(20deg);
}

.box13_corner_rt{
	content: '';
	width: 50px;
	height: 50px;
	top:0; right:0;
	position:absolute;
	display: inline-block;
	z-index:-6;
	-webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(2deg)
						translate(-14px,20px)
					   	skew(-20deg);
}
.box13_ribbon:before{
	content: '';
	position:absolute;
	top:0; left: 0;
	width: 130px;
	height: 40px;
	background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
	border-left: 1px dashed rgba(0, 0, 0, 0.1);
	border-right: 1px dashed rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(90deg) skew(0,0) translate(100px,65px);
}
.box13_ribbon:after{
	content: '';
	position:absolute;
	top:0; right: 0;
	width: 130px;
	height: 40px;
	background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
	border-left: 1px dashed rgba(0, 0, 0, 0.1);
	border-right: 1px dashed rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(90deg) skew(0,0) translate(100px,-65px);
}

/*********************/
/*** Box Fourteen  ***/
/*********************/

.box14{
	margin: 50px;
	width: 300px;
	padding: 5px 0 ;
	position:relative;
	background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
	border: 1px solid #ccc;
	-webkit-border-radius: 60px 5px;
	-webkit-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
}

.box14:before{
	content: '';
	width: 50px;
	height: 50px;
	top:0; right:0;
	position:absolute;
	display: inline-block;
	z-index:-1;
	-webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(2deg)
						translate(-14px,20px)
					   	skew(-20deg);
}

.box14:after{
	content: '';
	width: 100px;
	height: 100px;
	top:0; left:0;
	position:absolute;
	z-index:-1;
	display: inline-block;
	-webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(2deg)
						translate(20px,25px)
					   	skew(20deg);
}

.box14_ribbon{
	position:absolute;
	top:0; right: 0;
	width: 130px;
	height: 40px;
	background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
	border-left: 1px dashed rgba(0, 0, 0, 0.1);
	border-right: 1px dashed rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(6deg) skew(0,0) translate(-60%,-5px);
}

/****************/
/*** box fifteen ***/
/****************/

.box15{
	margin: 50px;
	width: 320px;
	min-height: 150px;
	padding: 0 0 1px 0;
	position:relative;
	background: -webkit-gradient(linear, 100% 100%, 50% 10%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
	border: 1px solid #ccc;
	-webkit-box-shadow: 1px 1px 4px rgba(0,0,0, 0.1);
	-webkit-border-bottom-right-radius: 60px 5px;
	
}

.box15:before{
	content: '';
	width: 98%;
	z-index:-1;
	height: 100%;
	padding: 0 0 1px 0;
	position: absolute;
	bottom:0; right:0;
	background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f9f9f9), color-stop(.1,#fff));
	border: 1px solid #ccc;
	-webkit-box-shadow: 1px 1px 8px rgba(0,0,0, 0.1);
	-webkit-border-bottom-right-radius: 60px 5px;
	-webkit-transform: skew(2deg,2deg)
						translate(3px,8px)
}
.box15:after{
	content: '';
	width: 98%;
	z-index:-1;
	height: 98%;
	padding: 0 0 1px 0;
	position: absolute;
	bottom:0; right:0;
	background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#f3f3f3), to(#f6f6f6), color-stop(.1,#fff));
	border: 1px solid #ccc;
	-webkit-box-shadow: 0px 0px 8px rgba(0,0,0, 0.1);
	-webkit-transform: skew(2deg,2deg)
						translate(-1px,2px)
}

.box15_ribbon{
	position:absolute;
	top:0; left: 0;
	width: 130px;
	height: 40px;
	background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
	border-left: 1px dashed rgba(0, 0, 0, 0.1);
	border-right: 1px dashed rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(-30deg) skew(0,0) translate(-30px,-20px);
}
/*****************/
/*** box sixteen ***/
/*****************/

.box16{
	margin: 70px 50px;
	width: 300px;
	min-height: 250px;
	position:relative;
	border: 2px solid #ccc;
	background: rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.1);
}

.box16:before{
	content: '';
	width: 110%;
	left: 0; 
	height: 125%;
	z-index:-1;
	position:absolute;
	border: 1px solid #ccc;
	background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
	-webkit-transform: translate(-5%,-5%);
}
.box16:after{
	content: '';
	width: 100%;
	left: 0; 
	height: 115%;
	z-index:-2;
	background: none;
	position:absolute;
	border-radius: 20px;
	-webkit-box-shadow: 15px 0px 30px rgba(0, 0, 0, 0.2);
	-webkit-transform: translate(0,0);
}
.box16_ribbon{
	position:absolute;
	top:0; left: 0;
	width: 130px;
	height: 40px;
	background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
	border-left: 1px dashed rgba(0, 0, 0, 0.1);
	border-right: 1px dashed rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(-30deg) skew(0,0) translate(-20px,-20px);
}
.box16_ribbon:before{
	content: '';
	position:absolute;
	top:0; left: 0;
	width: 130px;
	height: 40px;
	background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
	border-left: 1px dashed rgba(0, 0, 0, 0.1);
	border-right: 1px dashed rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(0deg) skew(0,0) translate(-15px,-20px);
}