[class*="btn-icon-"] {
    overflow: hidden;
    position: relative;
    padding-left: 30px;
    padding-right: 30px;
}

[class*="btn-icon-"] i {
    transition: 0.5s all;
    position: absolute;
    top: 0;
    height: 100%;
    background: rgba(0,0,0,.2);
    line-height: 40px !important;
    width: 35px;
    text-align: center
}

.btn-xl.right-icon i, .btn-xl.left-icon i {
    line-height: 68px
}

.btn-md.right-icon i, .btn-md.left-icon i {
    line-height: 40px
}

.btn-sm.right-icon i, .btn-sm.left-icon i {
    line-height: 16px
}

[class*="btn-icon-"] span {
    display: inline-block;
    position: relative;
    right: 0
}

.btn-xs[class*="btn-icon-" ] i {
    padding: 2px 5px;
    font-size: 10px;
    line-height: 1.2
}

.btn.main-bg.btn-3d {
    margin-bottom: 5px
}

.btn-sm[class*="btn-icon-"] i {
    line-height: 27px
}

.btn-md[class*="btn-icon-"] i {
    line-height: 40px
}

.btn-lg[class*="btn-icon-"] i {
    line-height: 50px
}

.btn-xl [class*="btn-icon-"] i {
    line-height: 70px
}

.btn-xxl[class*= btn-icon-] i {
    line-height: 1.5
}

[class*="btn-icon-"].no-bg i {
    background: transparent
}

.btn-icon-left i {
    right: -35px
}

.btn-icon-left:hover i {
    right: 0
}

.btn-icon-left:hover span {
    right: 15px
}

.btn-icon-right i {
    left: -100%;
    margin: 0
}

.btn-icon-right:hover i {
    left: 0
}

.btn-icon-right:hover span {
    right: -15px
}

.btn.white {
    color: #fff !important
}

.btn-blue {
    background-color: #5472d2;
    color: #fff
}

    .btn-blue.btn-outlined, .btn-blue.btn-square_outlined {
        color: #5472d2;
        border-color: #5472d2
    }

    .btn-blue:hover {
        background-color: #3c5ecc;
        color: #f7f7f7
    }

    .btn-blue.btn-3d {
        -webkit-box-shadow: 0 4px 0 #3253bc;
        box-shadow: 0 4px 0 #3253bc;
        margin-bottom: 5px
    }

.btn-turquoise {
    background-color: #00c1cf;
    color: #fff
}

    .btn-turquoise.btn-outlined, .btn-turquoise.btn-square_outlined {
        color: #00c1cf;
        border-color: #00c1cf
    }

    .btn-turquoise:hover {
        background-color: #00a4b0;
        color: #f7f7f7
    }

    .btn-turquoise.btn-3d {
        -webkit-box-shadow: 0 4px 0 #008d97;
        box-shadow: 0 4px 0 #008d97;
        margin-bottom: 5px
    }

.btn-pink {
    background-color: #fe6c61;
    color: #fff
}

    .btn-pink.btn-outlined, .btn-pink.btn-square_outlined {
        color: #fe6c61 !important;
        border-color: #fe6c61
    }

    .btn-pink:hover {
        background-color: #fe5043;
        color: #f7f7f7
    }

    .btn-pink.btn-3d {
        -webkit-box-shadow: 0 4px 0 #fe3829;
        box-shadow: 0 4px 0 #fe3829;
        margin-bottom: 5px
    }

.btn-default.btn-3d {
    -webkit-box-shadow: 0 4px 0 #ddd;
    box-shadow: 0 4px 0 #ddd;
    margin-bottom: 5px
}

.btn-default.btn-outlined {
    background-color: transparent
}

.btn-default.btn-3d:hover {
    -webkit-box-shadow: 0 4px 0 #ccc;
    box-shadow: 0 4px 0 #ccc
}

.btn-violet {
    background-color: #8d6dc4;
    color: #fff
}

    .btn-violet.btn-outlined, .btn-violet.btn-square_outlined {
        color: #8d6dc4;
        border-color: #8d6dc4
    }

    .btn-violet:hover {
        background-color: #7c57bb;
        color: #f7f7f7
    }

    .btn-violet.btn-3d {
        -webkit-box-shadow: 0 4px 0 #6e48b1;
        box-shadow: 0 4px 0 #6e48b1;
        margin-bottom: 5px
    }

.btn-peacoc {
    background-color: #4cadc9;
    color: #fff
}

    .btn-peacoc.btn-outlined, .btn-peacoc.btn-square_outlined {
        color: #4cadc9;
        border-color: #1cadc9
    }

    .btn-peacoc:hover {
        background-color: #39a0bd;
        color: #f7f7f7
    }

    .btn-peacoc.btn-3d {
        -webkit-box-shadow: 0 4px 0 #338faa;
        box-shadow: 0 4px 0 #338faa;
        margin-bottom: 5px
    }

.btn-chino {
    background-color: #cec2ab;
    color: #fff
}

    .btn-chino.btn-outlined, .btn-chino.btn-square_outlined {
        color: #cec2ab;
        border-color: #cec2ab
    }

    .btn-chino:hover {
        background-color: #c3b498;
        color: #f7f7f7
    }

    .btn-chino.btn-3d {
        -webkit-box-shadow: 0 4px 0 #b9a888;
        box-shadow: 0 4px 0 #b9a888;
        margin-bottom: 5px
    }

.btn-mulled_wine {
    background-color: #50485b;
    color: #fff
}

    .btn-mulled_wine.btn-outlined, .btn-mulled_wine.btn-square_outlined {
        color: #50485b;
        border-color: #50485b
    }

    .btn-mulled_wine:hover {
        background-color: #413a4a;
        color: #f7f7f7
    }

    .btn-mulled_wine.btn-3d {
        -webkit-box-shadow: 0 4px 0 #342f3c;
        box-shadow: 0 4px 0 #342f3c;
        margin-bottom: 5px
    }

.btn-vista_blue {
    background-color: #75d69c;
    color: #fff
}

    .btn-vista_blue.btn-outlined, .btn-vista_blue.btn-square_outlined {
        color: #75d69c !important;
        border-color: #75d69c
    }

    .btn-vista_blue:hover {
        background-color: #5dcf8b;
        color: #f7f7f7
    }

    .btn-vista_blue.btn-3d {
        -webkit-box-shadow: 0 4px 0 #4ac97d;
        box-shadow: 0 4px 0 #4ac97d;
        margin-bottom: 5px
    }

.btn-black {
    background-color: #2a2a2a;
    color: #fff
}

    .btn-black.btn-outlined, .btn-black.btn-square_outlined {
        color: #2a2a2a;
        border-color: #2a2a2a
    }

    .btn-black:hover {
        background-color: #383838;
        color: #f7f7f7
    }

    .btn-black.btn-3d {
        -webkit-box-shadow: 0 4px 0 #595959;
        box-shadow: 0 4px 0 #151515;
        margin-bottom: 5px
    }

.btn-grey {
    background-color: #ebebeb;
    text-shadow: none
}

    .btn-grey.btn-outlined, .btn-grey.btn-square_outlined {
        color: #444;
        border-color: #ebebeb
    }

    .btn-grey:hover {
        background-color: #e2e2e2;
        color: #333
    }

    .btn-grey.btn-3d {
        -webkit-box-shadow: 0 4px 0 #cfcfcf;
        box-shadow: 0 4px 0 #cfcfcf;
        margin-bottom: 5px
    }

.btn-orange {
    background-color: #f7be68;
    color: #fff
}

    .btn-orange.btn-outlined, .btn-orange.btn-square_outlined {
        color: #f7be68;
        border-color: #f7be68
    }

    .btn-orange:hover {
        background-color: #f5b14b;
        color: #f7f7f7
    }

    .btn-orange.btn-3d {
        -webkit-box-shadow: 0 4px 0 #f4a733;
        box-shadow: 0 4px 0 #f4a733;
        margin-bottom: 5px
    }

.btn-sky {
    background-color: #5aa1e3;
    color: #fff
}

    .btn-sky.btn-outlined, .btn-sky.btn-square_outlined {
        color: #5aa1e3;
        border-color: #5aa1e3
    }

    .btn-sky:hover {
        background-color: #4092df;
        color: #f7f7f7
    }

    .btn-sky.btn-3d {
        -webkit-box-shadow: 0 4px 0 #2a86db;
        box-shadow: 0 4px 0 #2a86db;
        margin-bottom: 5px
    }

.btn-green {
    background-color: #6dab3c;
    color: #fff
}

    .btn-green.btn-outlined, .btn-green.btn-square_outlined {
        color: #6dab3c;
        border-color: #6dab3c
    }

    .btn-green:hover {
        background-color: #5f9434;
        color: #f7f7f7
    }

    .btn-green.btn-3d {
        -webkit-box-shadow: 0 4px 0 #53812d;
        box-shadow: 0 4px 0 #53812d;
        margin-bottom: 5px
    }

.btn-juicy_pink {
    background-color: #f4524d;
    color: #fff
}

    .btn-juicy_pink.btn-outlined, .btn-juicy_pink.btn-square_outlined {
        color: #f4524d;
        border-color: #f4524d
    }

    .btn-juicy_pink:hover {
        background-color: #f23630;
        color: #f7f7f7
    }

    .btn-juicy_pink.btn-3d {
        -webkit-box-shadow: 0 4px 0 #f11f18;
        box-shadow: 0 4px 0 #f11f18;
        margin-bottom: 5px
    }

.btn-sandy_brown {
    background-color: #f79468;
    color: #fff
}

    .btn-sandy_brown.btn-outlined, .btn-sandy_brown.btn-square_outlined {
        color: #f79468;
        border-color: #f79468
    }

    .btn-sandy_brown:hover {
        background-color: #f57f4b;
        color: #f7f7f7
    }

    .btn-sandy_brown.btn-3d {
        -webkit-box-shadow: 0 4px 0 #f46e33;
        box-shadow: 0 4px 0 #f46e33;
        margin-bottom: 5px
    }

.btn-purple {
    background-color: #b97ebb;
    color: #fff
}

    .btn-purple.btn-outlined, .btn-purple.btn-square_outlined {
        color: #b97ebb;
        border-color: #b97ebb
    }

    .btn-purple:hover {
        background-color: #ae6ab0;
        color: #f7f7f7
    }

    .btn-purple.btn-3d {
        -webkit-box-shadow: 0 4px 0 #a559a8;
        box-shadow: 0 4px 0 #a559a8;
        margin-bottom: 5px
    }

.btn-white {
    background-color: #fff
}

    .btn-white.btn-outlined, .btn-white.btn-square_outlined {
        color: #fff;
        border-color: #fff
    }

    .btn-white:hover {
        background-color: #f0f0f0;
        color: #5e5e5e
    }

    .btn-white.btn-3d {
        -webkit-box-shadow: 0 4px 0 #e3e3e3;
        box-shadow: 0 4px 0 #e3e3e3;
        margin-bottom: 5px
    }

.btn-grace {
    background-color: #aed13b;
    color: #fff
}

    .btn-grace.btn-outlined, .btn-grace.btn-square_outlined {
        color: #aed13b;
        border-color: #aed13b
    }

    .btn-grace:hover {
        background-color: #9ec02d;
        color: #f7f7f7
    }

    .btn-grace.btn-3d {
        -webkit-box-shadow: 0 4px 0 #8dac28;
        box-shadow: 0 4px 0 #8dac28;
        margin-bottom: 5px
    }

.btn-round {
    border-radius: 25px
}

.btn-outlined {
    background-color: transparent;
    border: 1px solid;
    text-shadow: none !important
}