/*------------------------------------------------------------------
    [Theme Icons]
------------------------------------------------------------------*/

.theme-icons-wrap {
    z-index: 1;
}

.theme-icons-wrap {
    .theme-icons {
        text-align: center;
        margin-bottom: 5px;
    }

    a {
        &[href] {
            &:hover {
                .theme-icons {
                    @include cubic-transition($delay: 0, $duration: 200ms, $property: (all));
                }
            }
        }
    }
}

/* Theme Icons Base */
.theme-icons-base {
    @include theme-icons($color-base, transparent, 0, transparent);
}

.theme-icons-wrap {
    > a {
        &[href] {
            > .theme-icons-base-hover {
                &:hover {
                    color: $color-white;
                    background: $color-base;
                    border-color: transparent;
                }
            }
        }
    }
}

/* Theme Icons White */
.theme-icons-white {
    @include theme-icons($color-white, transparent, 0, transparent);
}

.theme-icons-wrap {
    > a {
        &[href] {
            > .theme-icons-white-hover {
                color: $color-white;
                
                &:hover {
                    color: $color-dark;
                    background: $color-white;
                    border-color: transparent;
                }
            }
        }
    }
}

/* Theme Icons Dark */
.theme-icons-dark {
    @include theme-icons($color-dark-light, transparent, 0, transparent);
}

.theme-icons-wrap {
    > a {
        &[href] {
            > .theme-icons-dark-hover {
                &:hover {
                    color: $color-white;
                    background: $color-dark;
                    border-color: $color-dark;
                }
            }
        }
    }
}

/* Theme Icons Dark Light */
.theme-icons-dark-light {
    @include theme-icons($color-dark-light, transparent, 0, transparent);
}

.theme-icons-wrap {
    > a {
        &[href] {
            > .theme-icons-dark-light-hover {
                &:hover {
                    color: $color-white;
                    background: $color-dark-light;
                    border-color: $color-dark-light;
                }
            }
        }
    }
}

/* Theme Icons Blue */
.theme-icons-blue {
    @include theme-icons($color-dark-light, transparent, 0, transparent);
}

.theme-icons-wrap {
    > a {
        &[href] {
            > .theme-icons-blue-hover {
                &:hover {
                    color: $color-white;
                    background: $color-blue;
                    border-color: transparent;
                }
            }
        }
    }
}

/* Theme Icons Blue Grey */
.theme-icons-blue-grey {
    @include theme-icons($color-dark-light, transparent, 0, transparent);
}

.theme-icons-wrap {
    > a {
        &[href] {
            > .theme-icons-blue-grey-hover {
                &:hover {
                    color: $color-white;
                    background: $color-blue-grey;
                    border-color: $color-blue-grey;
                }
            }
        }
    }
}

/* Theme Icons Grey */
.theme-icons-grey {
    @include theme-icons($color-dark-light, transparent, 0, transparent);
}

.theme-icons-wrap {
    > a {
        &[href] {
            > .theme-icons-grey-hover {
                &:hover {
                    color: $color-white;
                    background: $color-grey;
                    border-color: transparent;
                }
            }
        }
    }
}

/* Theme Icons Teal */
.theme-icons-teal {
    @include theme-icons($color-dark-light, transparent, 0, transparent);
}

.theme-icons-wrap {
    > a {
        &[href] {
            > .theme-icons-teal-hover {
                &:hover {
                    color: $color-white;
                    background: $color-teal;
                    border-color: transparent;
                }
            }
        }
    }
}

/* Theme Icons Red */
.theme-icons-red {
    @include theme-icons($color-dark-light, transparent, 0, transparent);
}

.theme-icons-wrap {
    > a {
        &[href] {
            > .theme-icons-red-hover {
                &:hover {
                    color: $color-white;
                    background: $color-red;
                    border-color: transparent;
                }
            }
        }
    }
}

/* Theme Icons Red */
.theme-icons-pink {
    @include theme-icons($color-dark-light, transparent, 0, transparent);
}

.theme-icons-wrap {
    > a {
        &[href] {
            > .theme-icons-pink-hover {
                &:hover {
                    color: $color-white;
                    background: $color-pink;
                    border-color: transparent;
                }
            }
        }
    }
}

/* Theme Icons Purple */
.theme-icons-purple {
    @include theme-icons($color-dark-light, transparent, 0, transparent);
}

.theme-icons-wrap {
    > a {
        &[href] {
            > .theme-icons-purple-hover {
                &:hover {
                    color: $color-white;
                    background: $color-purple;
                    border-color: transparent;
                }
            }
        }
    }
}

/* Theme Icons Gold */
.theme-icons-gold {
    @include theme-icons($color-dark-light, transparent, 0, transparent);
}

.theme-icons-wrap {
    > a {
        &[href] {
            > .theme-icons-gold-hover {
                &:hover {
                    color: $color-white;
                    background: $color-gold;
                    border-color: transparent;
                }
            }
        }
    }
}


/*------------------------------------------------------------------
    [Theme Icons Background Color]
------------------------------------------------------------------*/

/* Theme Icons Base Background */
.theme-icons-base-bg {
    @include theme-icons($color-white, $color-base, 0, transparent);
}

.theme-icons-wrap {
    > a {
        &[href] {
            > .theme-icons-base-bg {
                &:hover {
                    color: $color-white;
                    background: $color-base-light;
                    border-color: transparent;
                }
            }
        }
    }
}

/* Theme Icons White Background */
.theme-icons-white-bg {
    @include theme-icons($color-dark-light, $color-white, 0, transparent);
}

.theme-icons-wrap {
    > a {
        &[href] {
            > .theme-icons-white-bg {
                &:hover {
                    color: $color-white;
                    background: $color-base;
                    border-color: transparent;
                }
            }
        }
    }
}

/* Theme Icons Dark Background */
.theme-icons-dark-bg {
    @include theme-icons($color-white, $color-dark, 0, transparent);
}

.theme-icons-wrap {
    > a {
        &[href] {
            > .theme-icons-dark-bg {
                &:hover {
                    color: $color-white;
                    background: $color-dark-light;
                    border-color: transparent;
                }
            }
        }
    }
}

/* Theme Icons Dark Light Background */
.theme-icons-dark-light-bg {
    @include theme-icons($color-white, $color-dark-light, 0, transparent);
}

.theme-icons-wrap {
    > a {
        &[href] {
            > .theme-icons-dark-light-bg {
                &:hover {
                    color: $color-white;
                    background: $color-dark;
                    border-color: transparent;
                }
            }
        }
    }
}

/* Theme Icons Blue Background */
.theme-icons-blue-bg {
    @include theme-icons($color-white, $color-blue, 0, transparent);
}

.theme-icons-wrap {
    > a {
        &[href] {
            > .theme-icons-blue-bg {
                &:hover {
                    color: $color-white;
                    background: $color-blue-light;
                    border-color: transparent;
                }
            }
        }
    }
}

/* Theme Icons Blue Grey Background */
.theme-icons-blue-grey-bg {
    @include theme-icons($color-white, $color-blue-grey, 0, transparent);
}

.theme-icons-wrap {
    > a {
        &[href] {
            > .theme-icons-blue-grey-bg {
                &:hover {
                    color: $color-white;
                    background: $color-blue-grey-light;
                    border-color: transparent;
                }
            }
        }
    }
}

/* Theme Icons Grey Background */
.theme-icons-grey-bg {
    @include theme-icons($color-white, #6a6969, 0, transparent);
}

.theme-icons-wrap {
    > a {
        &[href] {
            > .theme-icons-grey-bg {
                &:hover {
                    color: $color-white;
                    background: $color-grey-light;
                    border-color: transparent;
                }
            }
        }
    }
}

/* Theme Icons Teal Background */
.theme-icons-teal-bg {
    @include theme-icons($color-white, $color-teal, 0, transparent);
}

.theme-icons-wrap {
    > a {
        &[href] {
            > .theme-icons-teal-bg {
                &:hover {
                    color: $color-white;
                    background: $color-teal-light;
                    border-color: transparent;
                }
            }
        }
    }
}

/* Theme Icons Red Background */
.theme-icons-red-bg {
    @include theme-icons($color-white, $color-red, 0, transparent);
}

.theme-icons-wrap {
    > a {
        &[href] {
            > .theme-icons-red-bg {
                &:hover {
                    color: $color-white;
                    background: $color-red-light;
                    border-color: transparent;
                }
            }
        }
    }
}

/* Theme Icons Pink Background */
.theme-icons-pink-bg {
    @include theme-icons($color-white, $color-pink, 0, transparent);
}

.theme-icons-wrap {
    > a {
        &[href] {
            > .theme-icons-pink-bg {
                &:hover {
                    color: $color-white;
                    background: $color-pink-light;
                    border-color: transparent;
                }
            }
        }
    }
}

/* Theme Icons Purple Background */
.theme-icons-purple-bg {
    @include theme-icons($color-white, $color-purple, 0, transparent);
}

.theme-icons-wrap {
    > a {
        &[href] {
            > .theme-icons-purple-bg {
                &:hover {
                    color: $color-white;
                    background: $color-purple-light;
                    border-color: transparent;
                }
            }
        }
    }
}

/* Theme Icons Gold Background */
.theme-icons-gold-bg {
    @include theme-icons($color-white, $color-gold, 0, transparent);
}

.theme-icons-wrap {
    > a {
        &[href] {
            > .theme-icons-gold-bg {
                &:hover {
                    color: $color-white;
                    background: $color-gold-light;
                    border-color: transparent;
                }
            }
        }
    }
}

/* Theme Icons Grey Light Background */
.theme-icons-grey-light-bg {
    @include theme-icons($color-subtitle, $color-grey-light, 0, transparent);
}

.theme-icons-wrap {
    > a {
        &[href] {
            > .theme-icons-grey-light-bg {
                &:hover {
                    color: $color-white;
                    background: $color-base;
                    border-color: transparent;
                }
            }
        }
    }
}


/*------------------------------------------------------------------
    [Theme Icons Bordered Color]
------------------------------------------------------------------*/

/* Theme Icons Base Bordered */
.theme-icons-base-brd {
    @include theme-icons($color-base, transparent, 1px, $color-base);
}

.theme-icons-wrap {
    > a {
        &[href] {
            > .theme-icons-base-brd {
                &:hover {
                    color: $color-white;
                    background: $color-base;
                    border-color: $color-base;
                }
            }
        }
    }
}

/* Theme Icons White Bordered */
.theme-icons-white-brd {
    @include theme-icons(lighten($color-white, 15%), transparent, 1px, $color-white);
}

.theme-icons-wrap {
    > a {
        &[href] {
            > .theme-icons-white-brd {
                &:hover {
                    color: $color-dark-light;
                    background: $color-white;
                    border-color: $color-white;
                }
            }
        }
    }

    .theme-icons-white-brd-hover-base {
        &:hover {
            color: $color-dark-light;
            background: $color-white;
        }
    }
}

/* Theme Icons Dark Bordered */
.theme-icons-dark-brd {
    @include theme-icons($color-dark, transparent, 1px, $color-dark);
}

.theme-icons-wrap {
    > a {
        &[href] {
            > .theme-icons-dark-brd {
                &:hover {
                    color: $color-white;
                    background: $color-dark;
                    border-color: $color-dark;
                }
            }
        }
    }
}

/* Theme Icons Dark Light Bordered */
.theme-icons-dark-light-brd {
    @include theme-icons($color-dark-light, transparent, 1px, $color-dark-light);
}

.theme-icons-wrap {
    > a {
        &[href] {
            > .theme-icons-dark-light-brd {
                &:hover {
                    color: $color-white;
                    background: $color-dark-light;
                    border-color: $color-dark-light;
                }
            }
        }
    }
}

/* Theme Icons Blue Bordered */
.theme-icons-blue-brd {
    @include theme-icons($color-blue, transparent, 1px, $color-blue);
}

.theme-icons-wrap {
    > a {
        &[href] {
            > .theme-icons-blue-brd {
                &:hover {
                    color: $color-white;
                    background: $color-blue;
                    border-color: $color-blue;
                }
            }
        }
    }
}

/* Theme Icons Blue Grey Bordered */
.theme-icons-blue-grey-brd {
    @include theme-icons($color-blue-grey, transparent, 1px, $color-blue-grey);
}

.theme-icons-wrap {
    > a {
        &[href] {
            > .theme-icons-blue-grey-brd {
                &:hover {
                    color: $color-white;
                    background: $color-blue-grey;
                    border-color: $color-blue-grey;
                }
            }
        }
    }
}

/* Theme Icons Grey Bordered */
.theme-icons-grey-brd {
    @include theme-icons($color-grey, transparent, 1px, $color-grey);
}

.theme-icons-wrap {
    > a {
        &[href] {
            > .theme-icons-grey-brd {
                &:hover {
                    color: $color-white;
                    background: $color-grey;
                    border-color: $color-grey;
                }
            }
        }
    }
}

/* Theme Icons Teal Bordered */
.theme-icons-teal-brd {
    @include theme-icons($color-teal, transparent, 1px, $color-teal);
}

.theme-icons-wrap {
    > a {
        &[href] {
            > .theme-icons-teal-brd {
                &:hover {
                    color: $color-white;
                    background: $color-teal;
                    border-color: $color-teal;
                }
            }
        }
    }
}

/* Theme Icons Red Bordered */
.theme-icons-red-brd {
    @include theme-icons($color-red, transparent, 1px, $color-red);
}

.theme-icons-wrap {
    > a {
        &[href] {
            > .theme-icons-red-brd {
                &:hover {
                    color: $color-white;
                    background: $color-red;
                    border-color: $color-red;
                }
            }
        }
    }
}

/* Theme Icons Pink Bordered */
.theme-icons-pink-brd {
    @include theme-icons($color-pink, transparent, 1px, $color-pink);
}

.theme-icons-wrap {
    > a {
        &[href] {
            > .theme-icons-pink-brd {
                &:hover {
                    color: $color-white;
                    background: $color-pink;
                    border-color: $color-pink;
                }
            }
        }
    }
}

/* Theme Icons Purple Bordered */
.theme-icons-purple-brd {
    @include theme-icons($color-purple, transparent, 1px, $color-purple);
}

.theme-icons-wrap {
    > a {
        &[href] {
            > .theme-icons-purple-brd {
                &:hover {
                    color: $color-white;
                    background: $color-purple;
                    border-color: $color-purple;
                }
            }
        }
    }
}

/* Theme Icons Gold Bordered */
.theme-icons-gold-brd {
    @include theme-icons($color-gold, transparent, 1px, $color-gold);
}

.theme-icons-wrap {
    > a {
        &[href] {
            > .theme-icons-gold-brd {
                &:hover {
                    color: $color-white;
                    background: $color-gold;
                    border-color: $color-gold;
                }
            }
        }
    }
}


/*------------------------------------------------------------------
    [Theme Icons Sizes]
------------------------------------------------------------------*/

/* Extra Small Size */
.theme-icons-xs {
    @include theme-icons-size(30px, 30px, $font-size-14, $line-height-base, 5px);
}

/* Small Size */
.theme-icons-sm {
    @include theme-icons-size(35px, 35px, $font-size-16, $line-height-base, 6px);
}

/* Medium Size */
.theme-icons-md {
    @include theme-icons-size(45px, 45px, $font-size-20, 1.5, 8px);
}

/* Large Size */
.theme-icons-lg {
    @include theme-icons-size(55px, 55px, $font-size-24, 1.15, 14px);
}


/*------------------------------------------------------------------
    [Social Icons Theme]
------------------------------------------------------------------*/

/* Theme Icons Facebook */
.theme-icons-fb {
    @include theme-icons($color-white, $color-fb, 0, transparent);
}

/* Theme Icons Twitter */
.theme-icons-tw {
    @include theme-icons($color-white, $color-tw, 0, transparent);
}

/* Theme Icons Dribbble */
.theme-icons-dr {
    @include theme-icons($color-white, $color-dr, 0, transparent);
}

/* Theme Icons Youtube */
.theme-icons-yt {
    @include theme-icons($color-white, $color-yt, 0, transparent);
}


/*------------------------------------------------------------------
    [Animate Theme Icons]
------------------------------------------------------------------*/

.animate-theme-icons {
    .animate-theme-icons-body {
        z-index: 1;
        display: inline-block;
        text-align: center;
        overflow: hidden;
    }

    &:hover {
        .animate-theme-icons-body {
            .animate-theme-icons-element {
                @include animation(toTopFromBottom .3s forwards);
            }
        }
    }
}

@include keyframes(toTopFromBottom) {
    49% {
        @include translate3d(0,-100%,0);
    }
    50% {
        opacity: 0;
        @include translate3d(0,100%,0);
    }
    51% {
        opacity: 1;
    }
}


/*------------------------------------------------------------------
    [Animate Theme Icons Colors]
------------------------------------------------------------------*/

/* Animate Theme Icons Base */
.animate-theme-icons .animate-theme-icons-base {
    color: $color-base;
}

/* Animate Theme Icons White */
.animate-theme-icons .animate-theme-icons-white {
    color: $color-white;
}

/* Animate Theme Icons Dark */
.animate-theme-icons .animate-theme-icons-dark {
    color: $color-dark;
}

/* Animate Theme Icons Dark Light */
.animate-theme-icons .animate-theme-icons-dark-light {
    color: $color-dark-light;
}

/* Animate Theme Icons Blue */
.animate-theme-icons .animate-theme-icons-blue {
    color: $color-blue;
}

/* Animate Theme Icons Blue Grey */
.animate-theme-icons .animate-theme-icons-blue-grey {
    color: $color-blue-grey;
}

/* Animate Theme Icons Grey */
.animate-theme-icons .animate-theme-icons-grey {
    color: $color-grey;
}

/* Animate Theme Icons Teal */
.animate-theme-icons .animate-theme-icons-teal {
    color: $color-teal;
}

/* Animate Theme Icons Red */
.animate-theme-icons .animate-theme-icons-red {
    color: $color-red;
}

/* Animate Theme Icons Pink */
.animate-theme-icons .animate-theme-icons-pink {
    color: $color-pink;
}

/* Animate Theme Icons Purple */
.animate-theme-icons .animate-theme-icons-purple {
    color: $color-purple;
}

/* Animate Theme Icons Gold */
.animate-theme-icons .animate-theme-icons-gold {
    color: $color-gold;
}


/*------------------------------------------------------------------
    [Animate Theme Icons Background Colors]
------------------------------------------------------------------*/

/* Animate Theme Icons Base Background */
.animate-theme-icons .animate-theme-icons-base-bg {
    color: $color-white;
    background: $color-base;
}

/* Animate Theme Icons White Background */
.animate-theme-icons .animate-theme-icons-white-bg {
    color: $color-dark-light;
    background: $color-white;
}

/* Animate Theme Icons Dark Background */
.animate-theme-icons .animate-theme-icons-dark-bg {
    color: $color-white;
    background: $color-dark;
}

/* Animate Theme Icons Dark Light Background */
.animate-theme-icons .animate-theme-icons-dark-light-bg {
    color: $color-white;
    background: $color-dark-light;
}

/* Animate Theme Icons Blue Background */
.animate-theme-icons .animate-theme-icons-blue-bg {
    color: $color-white;
    background: $color-blue;
}

/* Animate Theme Icons Blue Grey Background */
.animate-theme-icons .animate-theme-icons-blue-grey-bg {
    color: $color-white;
    background: $color-blue-grey;
}

/* Animate Theme Icons Grey Background */
.animate-theme-icons .animate-theme-icons-grey-bg {
    color: $color-white;
    background: $color-grey;
}

/* Animate Theme Icons Teal Background */
.animate-theme-icons .animate-theme-icons-teal-bg {
    color: $color-white;
    background: $color-teal;
}

/* Animate Theme Icons Red Background */
.animate-theme-icons .animate-theme-icons-red-bg {
    color: $color-white;
    background: $color-red;
}

/* Animate Theme Icons Pink Background */
.animate-theme-icons .animate-theme-icons-pink-bg {
    color: $color-white;
    background: $color-pink;
}

/* Animate Theme Icons Purple Background */
.animate-theme-icons .animate-theme-icons-purple-bg {
    color: $color-white;
    background: $color-purple;
}

/* Animate Theme Icons Gold Background */
.animate-theme-icons .animate-theme-icons-gold-bg {
    color: $color-white;
    background: $color-gold;
}


/*------------------------------------------------------------------
    [Animate Theme Icons Bordered]
------------------------------------------------------------------*/


/* Animate Theme Icons Base Bordered */
.animate-theme-icons .animate-theme-icons-base-brd {
    color: $color-base;
    border: 1px solid $color-base;
}

/* Animate Theme Icons White Bordered */
.animate-theme-icons .animate-theme-icons-white-brd {
    color: $color-white;
    border: 1px solid $color-white;
}

/* Animate Theme Icons Dark Bordered */
.animate-theme-icons .animate-theme-icons-dark-brd {
    color: $color-dark;
    border: 1px solid $color-dark;
}

/* Animate Theme Icons Dark Light Bordered */
.animate-theme-icons .animate-theme-icons-dark-light-brd {
    color: $color-dark-light;
    border: 1px solid $color-dark-light;
}

/* Animate Theme Icons Blue Bordered */
.animate-theme-icons .animate-theme-icons-blue-brd {
    color: $color-blue;
    border: 1px solid $color-blue;
}

/* Animate Theme Icons Blue Grey Bordered */
.animate-theme-icons .animate-theme-icons-blue-grey-brd {
    color: $color-blue-grey;
    border: 1px solid $color-blue-grey;
}

/* Animate Theme Icons Grey Bordered */
.animate-theme-icons .animate-theme-icons-grey-brd {
    color: $color-grey;
    border: 1px solid $color-grey;
}

/* Animate Theme Icons Teal Bordered */
.animate-theme-icons .animate-theme-icons-teal-brd {
    color: $color-teal;
    border: 1px solid $color-teal;
}

/* Animate Theme Icons Red Bordered */
.animate-theme-icons .animate-theme-icons-red-brd {
    color: $color-red;
    border: 1px solid $color-red;
}

/* Animate Theme Icons Pink Bordered */
.animate-theme-icons .animate-theme-icons-pink-brd {
    color: $color-pink;
    border: 1px solid $color-pink;
}

/* Animate Theme Icons Purple Bordered */
.animate-theme-icons .animate-theme-icons-purple-brd {
    color: $color-purple;
    border: 1px solid $color-purple;
}

/* Animate Theme Icons Gold Bordered */
.animate-theme-icons .animate-theme-icons-gold-brd {
    color: $color-gold;
    border: 1px solid $color-gold;
}


/*------------------------------------------------------------------
    [Theme Icons Elegant]
------------------------------------------------------------------*/

.theme-icons-elegant {
    @include clearfix;

    .theme-icons-element {
        float: left;
        margin-right: 15px;

        .theme-icons-wrap {
            > a {
                &[href] {
                    > .theme-icons {
                        &:hover {
                            color: $color-white;
                            background: $color-base;
                            border-color: transparent;
                        }
                    }
                }
            }
        }
    }

    .theme-icons-body {
        overflow: hidden;

        .theme-icons-body-title {
            display: block;
            @include font($size: $font-size-14);
            margin-bottom: 5px;
        }

        .them-icon-body-paragraph {
            @include font($size: $font-size-12);
            margin-bottom: 0;
        }
    }
}

/* Theme Icons Elegant Right */
.theme-icons-elegant-right {
    text-align: right;

    .theme-icons-element {
        float: right;
        margin: 0 0 0 15px;
    }
}

/* Media Queries below 480px */
@media (max-width: $screen-xs-min) {
    .theme-icons-elegant {
        .theme-icons-element {
            float: none;
            text-align: center;
            margin: 0 0 5px;
        }

        .theme-icons-body {
            text-align: center;
        }
    }
}