/*
 * copyright benjamin intal
 * https://github.com/bfintal/css3Effects
 * 
 * Inspired by http://www.red-team-design.com/how-to-create-slick-effects-with-css3-box-shadow
 * 
 * Available effect classes:
 *   css3Effects-shadow-sides
 *   css3Effects-shadow-mid
 */

/* 
 * shadow-sides 
 */
.css3Effects-shadow-sides {
    position: relative;
}
.css3Effects-shadow-sides > * {
    z-index: 2;
    position: relative;
}
.css3Effects-shadow-sides:before, .css3Effects-shadow-sides:after {
    z-index: 1;
    position: absolute;
    content: "";
    bottom: 18px;
    left: 10px;
    width: 50%;
    top: 80%;
    background: transparent;
    -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);
}
.css3Effects-shadow-sides:after {
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    right: 10px;
    left: auto;
}

/* 
 * shadow middle 
 */
.css3Effects-shadow-mid {
    position: relative;
}
.css3Effects-shadow-mid > * {
    z-index: 2;
    position: relative;
}
.css3Effects-shadow-mid:before, .css3Effects-shadow-mid:after {
    z-index: 1;
    position: absolute;
    content: "";
    bottom: 17px;
    right: 10%;
    margin-right: .5%;
    width: 50%;
    top: 80%;
    max-width:40%;
    background: transparent;
    -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(-2deg);
    -moz-transform: rotate(-2deg);
    -o-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    transform: rotate(-2deg);
}
.css3Effects-shadow-mid:after
{
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    transform: rotate(2deg);
    margin-right: 0;
    margin-left: .5%;
    left: 10%;
    right: auto;
}


/*
 * image-inset
 */
.css3Effects-image-inset {
    position: relative;
    padding: 0 50px;
}
.css3Effects-image-inset > * {
    z-index: 2;
    position: relative;
}
/* lower line */
.css3Effects-image-inset:before {
    z-index: 3;
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    height: 1px;
    width: 100%;
    background: transparent;
    /* Safari and Chrome */
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,0)), to(rgba(0,0,0,0)), color-stop(.2, rgba(0,0,0,.5)), color-stop(.8, rgba(0,0,0,.5)));

    /* Firefox 3.6+ */ 
    background-image: -moz-linear-gradient(left, rgba(0,0,0,0) 0, rgba(0,0,0,.5) 20%, rgba(0,0,0,.5) 80%, rgba(0,0,0,0));
    
    /* IE 10 */ 
    background-image: -ms-linear-gradient(left, rgba(0,0,0,0) 0, rgba(0,0,0,.5) 20%, rgba(0,0,0,.5) 80%, rgba(0,0,0,0));
    
    /* Opera */ 
    background-image: -o-linear-gradient(left, rgba(0,0,0,0) 0, rgba(0,0,0,.5) 20%, rgba(0,0,0,.5) 80%, rgba(0,0,0,0));
    
    /* Other browsers */ 
    background-image: linear-gradient(left, rgba(0,0,0,0) 0, rgba(0,0,0,.5) 20%, rgba(0,0,0,.5) 80%, rgba(0,0,0,0));
}
/* shadow */
.css3Effects-image-inset:after {
    z-index: 1;
    position: absolute;
    content: "";
    bottom: -40px;
    height: 40px;
    width: 90%;
    margin-left: 5%;    
    left: 0;
    background: transparent;
    
    -webkit-box-shadow: 0 -20px 30px -17px #000000;
    -moz-box-shadow: 0 -20px 30px -17px #000000;
    box-shadow: 0 -20px 30px -17px #000000;
}