/* ---------------------- Effects Declarations --------------------- */

/*==================================================
 * Effect 1
 * ===============================================*/
.effect1 {
    -webkit-box-shadow: 0 0.625em 0.375em -0.375em #777;
    -moz-box-shadow: 0 0.625em 0.375em -0.375em #777;
    box-shadow: 0 0.625em 0.375em -0.375em #777;
}

/*==================================================
 * Effect 2
 * ===============================================*/
.effect2 {
    position: relative;
}

    .effect2:before, .effect2:after {
        z-index: -1;
        position: absolute;
        content: "";
        bottom: 10.313em;
        left: 0.625em;
        width: 50%;
        top: 80%;
        max-width: 18.75em;
        background: #777;
        -webkit-box-shadow: 0 10.313em 0.625em #777;
        -moz-box-shadow: 0 10.313em 0.625em #777;
        box-shadow: 0 10.313em 0.625em #777;
        -webkit-transform: rotate(-3deg);
        -moz-transform: rotate(-3deg);
        -o-transform: rotate(-3deg);
        -ms-transform: rotate(-3deg);
        transform: rotate(-3deg);
    }

    .effect2:after {
        -webkit-transform: rotate(3deg);
        -moz-transform: rotate(3deg);
        -o-transform: rotate(3deg);
        -ms-transform: rotate(3deg);
        transform: rotate(3deg);
        right: 0.625em;
        left: auto;
    }

/*==================================================
 * Effect 3
 * ===============================================*/
.effect3 {
    position: relative;
}

    .effect3:before {
        z-index: -1;
        position: absolute;
        content: "";
        bottom: 10.313em;
        left: 0.625em;
        width: 50%;
        top: 80%;
        max-width: 18.75em;
        background: #777;
        -webkit-box-shadow: 0 10.313em 0.625em #777;
        -moz-box-shadow: 0 10.313em 0.625em #777;
        box-shadow: 0 10.313em 0.625em #777;
        -webkit-transform: rotate(-3deg);
        -moz-transform: rotate(-3deg);
        -o-transform: rotate(-3deg);
        -ms-transform: rotate(-3deg);
        transform: rotate(-3deg);
    }

/*==================================================
 * Effect 4
 * ===============================================*/
.effect4 {
    position: relative;
}

    .effect4:after {
        z-index: -1;
        position: absolute;
        content: "";
        bottom: 0.938em;
        right: 0.625em;
        left: auto;
        width: 50%;
        top: 80%;
        max-width: 18.75em;
        background: #777;
        -webkit-box-shadow: 0 0.938em 0.625em #777;
        -moz-box-shadow: 0 0.938em 0.625em #777;
        box-shadow: 0 0.938em 0.625em #777;
        -webkit-transform: rotate(3deg);
        -moz-transform: rotate(3deg);
        -o-transform: rotate(3deg);
        -ms-transform: rotate(3deg);
        transform: rotate(3deg);
    }

/*==================================================
 * Effect 5
 * ===============================================*/
.effect5 {
    position: relative;
}

    .effect5:before, .effect5:after {
        z-index: -1;
        position: absolute;
        content: "";
        bottom: 1.565em;
        left: 0.625em;
        width: 50%;
        top: 80%;
        max-width: 18.75em;
        background: #777;
        -webkit-box-shadow: 0 2.191em 1.25em #777;
        -moz-box-shadow: 0 2.191em 1.25em #777;
        box-shadow: 0 2.191em 1.25em #777;
        -webkit-transform: rotate(-8deg);
        -moz-transform: rotate(-8deg);
        -o-transform: rotate(-8deg);
        -ms-transform: rotate(-8deg);
        transform: rotate(-8deg);
    }

    .effect5:after {
        -webkit-transform: rotate(8deg);
        -moz-transform: rotate(8deg);
        -o-transform: rotate(8deg);
        -ms-transform: rotate(8deg);
        transform: rotate(8deg);
        right: 0.625em;
        left: auto;
    }

/*==================================================
 * Effect 6
 * ===============================================*/
.effect6 {
    position: relative;
    -webkit-box-shadow: 0 1px 0.250em rgba(0, 0, 0, 0.3), 0 0 2.5em rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 1px 0.250em rgba(0, 0, 0, 0.3), 0 0 2.5em rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 1px 0.250em rgba(0, 0, 0, 0.3), 0 0 2.5em rgba(0, 0, 0, 0.1) inset;
}

    .effect6:before, .effect6:after {
        content: "";
        position: absolute;
        z-index: -1;
        -webkit-box-shadow: 0 0 1.25em rgba(0,0,0,0.8);
        -moz-box-shadow: 0 0 1.25em rgba(0,0,0,0.8);
        box-shadow: 0 0 1.25em rgba(0,0,0,0.8);
        top: 50%;
        bottom: 0;
        left: 0.625em;
        right: 0.625em;
        -moz-border-radius: 100px / 0.625em;
        border-radius: 100px / 0.625em;
    }

    .effect6:after {
        right: 0.625em;
        left: auto;
        -webkit-transform: skew(8deg) rotate(3deg);
        -moz-transform: skew(8deg) rotate(3deg);
        -ms-transform: skew(8deg) rotate(3deg);
        -o-transform: skew(8deg) rotate(3deg);
        transform: skew(8deg) rotate(3deg);
    }

/*==================================================
 * Effect 7
 * ===============================================*/
.effect7 {
    position: relative;
    -webkit-box-shadow: 0 1px 0.250em rgba(0, 0, 0, 0.3), 0 0 2.5em rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 1px 0.250em rgba(0, 0, 0, 0.3), 0 0 2.5em rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 1px 0.250em rgba(0, 0, 0, 0.3), 0 0 2.5em rgba(0, 0, 0, 0.1) inset;
}

    .effect7:before, .effect7:after {
        content: "";
        position: absolute;
        z-index: -1;
        -webkit-box-shadow: 0 0 1.25em rgba(0,0,0,0.8);
        -moz-box-shadow: 0 0 1.25em rgba(0,0,0,0.8);
        box-shadow: 0 0 1.25em rgba(0,0,0,0.8);
        top: 0;
        bottom: 0;
        left: 0.625em;
        right: 0.625em;
        -moz-border-radius: 6.25em / 0.625em;
        border-radius: 6.25em / 0.625em;
    }

    .effect7:after {
        right: 0.625em;
        left: auto;
        -webkit-transform: skew(8deg) rotate(3deg);
        -moz-transform: skew(8deg) rotate(3deg);
        -ms-transform: skew(8deg) rotate(3deg);
        -o-transform: skew(8deg) rotate(3deg);
        transform: skew(8deg) rotate(3deg);
    }

/*==================================================
 * Effect 8
 * ===============================================*/
.effect8 {
    position: relative;
    -webkit-box-shadow: 0 1px 0.250em rgba(0, 0, 0, 0.3), 0 0 2.5em rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 1px 0.250em rgba(0, 0, 0, 0.3), 0 0 2.5em rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 1px 0.250em rgba(0, 0, 0, 0.3), 0 0 2.5em rgba(0, 0, 0, 0.1) inset;
}

    .effect8:before, .effect8:after {
        content: "";
        position: absolute;
        z-index: -1;
        -webkit-box-shadow: 0 0 1.25em rgba(0,0,0,0.8);
        -moz-box-shadow: 0 0 1.25em rgba(0,0,0,0.8);
        box-shadow: 0 0 1.25em rgba(0,0,0,0.8);
        top: 0.625em;
        bottom: 0.625em;
        left: 0;
        right: 0;
        -moz-border-radius: 100px / 0.625em;
        border-radius: 100px / 0.625em;
    }

    .effect8:after {
        right: 0.625em;
        left: auto;
        -webkit-transform: skew(8deg) rotate(3deg);
        -moz-transform: skew(8deg) rotate(3deg);
        -ms-transform: skew(8deg) rotate(3deg);
        -o-transform: skew(8deg) rotate(3deg);
        transform: skew(8deg) rotate(3deg);
    }


/* ------------------ End of Effects Declarations ------------------ */