/* ================================ */

/* ================================ */
.box
{
   position: relative;
   width: 95%;
   padding: 15px;
   margin: 0 auto;
   background-color: #fff;
   -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
   -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
}

.box:before, .box:after
{
   position: absolute;
   width: 40%;
   height: 10px;
   content: ' ';
   left: 12px;
   bottom: 12px;
   background: transparent;
   -webkit-transform: skew(-5deg) rotate(-5deg);
   -moz-transform: skew(-5deg) rotate(-5deg);
   -ms-transform: skew(-5deg) rotate(-5deg);
   -o-transform: skew(-5deg) rotate(-5deg);
   transform: skew(-5deg) rotate(-5deg);
   -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
   -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);

   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.9);

   z-index: -1;
}
.box:after
{
   left: auto;
   right: 12px;
   -webkit-transform: skew(5deg) rotate(5deg);
   -moz-transform: skew(5deg) rotate(5deg);
   -ms-transform: skew(5deg) rotate(5deg);
   -o-transform: skew(5deg) rotate(5deg);
   transform: skew(5deg) rotate(5deg);
}

/* ================================ */

/* ================================ */
.box_left
{
   position: relative;
   width: 90%;
   padding: 10px;
   margin: 0 auto;
   background-color: #fff;
   -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
   -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
}

.box_left:before, .box_left:after
{
   position: absolute;
   width: 90%;
   height: 10px;
   content: ' ';
   left: 12px;
   bottom: 10px;
   background: transparent;
   -webkit-transform: skew(-5deg) rotate(-5deg);
   -moz-transform: skew(-5deg) rotate(-5deg);
   -ms-transform: skew(-5deg) rotate(-5deg);
   -o-transform: skew(-5deg) rotate(-5deg);
   transform: skew(-5deg) rotate(-5deg);
   -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
   -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);

   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.9);

   z-index: -1;
}
.box_left:after
{
   left: auto;
   right: 12px;
   -webkit-transform: skew(5deg) rotate(5deg);
   -moz-transform: skew(5deg) rotate(5deg);
   -ms-transform: skew(5deg) rotate(5deg);
   -o-transform: skew(5deg) rotate(5deg);
   transform: skew(5deg) rotate(5deg);
}

/* ================================ */

/* ================================ */
.box_right
{
   position: relative;
   width: 82%;
   padding: 10px;
   margin: 0 auto;
   background-color: #fff;
   -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
   -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
}

.box_right:before, .box_right:after
{
   position: absolute;
   width: 90%;
   height: 10px;
   content: ' ';
   left: 12px;
   bottom: 10px;
   background: transparent;
   -webkit-transform: skew(-5deg) rotate(-5deg);
   -moz-transform: skew(-5deg) rotate(-5deg);
   -ms-transform: skew(-5deg) rotate(-5deg);
   -o-transform: skew(-5deg) rotate(-5deg);
   transform: skew(-5deg) rotate(-5deg);
   -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
   -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);

   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.9);

   z-index: -1;
}
.box_right:after
{
   left: auto;
   right: 12px;
   -webkit-transform: skew(5deg) rotate(5deg);
   -moz-transform: skew(5deg) rotate(5deg);
   -ms-transform: skew(5deg) rotate(5deg);
   -o-transform: skew(5deg) rotate(5deg);
   transform: skew(5deg) rotate(5deg);
}