/* ---------------------- 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 ------------------ */

/* ------------------ Begin of ANIMATIONS Declarations ------------------ */

/* Simple CSS3 Fade-in-down Animation */
.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

/* Simple CSS3 Fade-in Animation */
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fadeIn {
    opacity: 0;
    -webkit-animation: fadeIn ease-in 1;
    -moz-animation: fadeIn ease-in 1;
    animation: fadeIn ease-in 1;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    animation-duration: 1s;
}

    .fadeIn.first {
        -webkit-animation-delay: 0.4s;
        -moz-animation-delay: 0.4s;
        animation-delay: 0.4s;
    }

    .fadeIn.second {
        -webkit-animation-delay: 0.6s;
        -moz-animation-delay: 0.6s;
        animation-delay: 0.6s;
    }

    .fadeIn.third {
        -webkit-animation-delay: 0.8s;
        -moz-animation-delay: 0.8s;
        animation-delay: 0.8s;
    }

    .fadeIn.fourth {
        -webkit-animation-delay: 1s;
        -moz-animation-delay: 1s;
        animation-delay: 1s;
    }

/* Simple CSS3 Fade-in Animation */
.underlineHover:after {
    display: block;
    left: 0;
    bottom: -10px;
    width: 0;
    height: 2px;
    background-color: #56baed;
    content: "";
    transition: width 0.2s;
}

.underlineHover:hover {
    color: #0d0d0d;
}

    .underlineHover:hover:after {
        width: 100%;
    }

/* ------------------ End of ANIMATIONS Declarations ------------------ */