@mixin button{
    display: inline-block;
	color: $white;
	font-size: 15px;
	padding: 8px 25px;
	letter-spacing: 0.5px;
    position: relative;
    z-index: 2;
    font-family: $title-font-family;
    box-shadow: $medium-shadow;
    background-color: $main-color;
    @include transition;
    &.bordered{
        box-shadow: none;
        background-color: $white !important;
        &:before{
            content: '';
            border: 3px solid $black;
            background: $white;
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            @include transition;
        }
        &:after{
            content: attr(data-title);  
            position: absolute;
            left: 0px;
            top: 0px;
            padding: 8px 25px;   
            z-index: 3;
            background: $black;
            @include transition;
        }
    }
	&:hover{
        color: $white;
        box-shadow: none;
        &:after{
            transform: translate(-5px, -5px)  
        }
    }
    &.secondary{
        background-color: $main-color;
        &:after{
            background: $main-color;
        }
        &:before{
            border-color: $main-color;
        }
    }
    &.black{
        background: $black;
    }
    &.small{
        font-size: 12px;
        padding: 5px 15px;
        &:after{
            padding: 5px 15px;
        }
        &.bordered:hover:after{
            left: -4px;
            top: -4px;
        }
    }
    &.medium{
        font-size: 15px;
        padding: 5px 20px;
        &:after{
            padding: 5px 20px;
        }
        &.bordered:hover:after{
            left: -4px;
            top: -4px;
        }
    }
    &.large{ font-size: 20px; padding: 8px 40px; }
    &.icon{
        i{
            vertical-align: middle;
            position: relative;
            top: -2px;
        }
    }
    &.circle{
        padding: 0;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        text-align: center;
        line-height: 44px;
        font-size: 16px;
        i.fa{ margin: 0; vertical-align: middle; }
        &:hover{
            transform: translateY(-2px);
        }
    }
    // By Color
	&.dark{
        background-image: none;
        background-color: $black;
        color: $white;
	}
	& i.fa{ font-size: 85%; margin-left: 5px; }
}

.button, .epcl-button:not(.epcl-shortcode){
    @include button;
}

/* Global Tags */

div.tags{
    display: block;
    font-weight: 500;
    font-size: 14px;
    font-family: $title-font-family;
    a{
        color: $black;
        display: inline-block;
        box-shadow: 0px 2px 6px rgba($shadow-color, 0.1);
        padding: 6px 8px 4px;
        line-height: 1.2;
        margin-right: 10px;
        background: $white;
        &:before{
            content: '#';
            color: $main-color;
            margin-right: 3px;
            backface-visibility: hidden;
        }
        &:hover{
            color: $main-color;
            transform: translateY(-2px);
        }
    }
    i, svg{
        display: inline-block;
        color: $main-color;
        font-size: 20px;
        vertical-align: middle;
        margin-top: -3px;
        margin-right: 3px;
        width: 20px;
        height: 20px;
    }
    &.single-categories{
        a{ margin-bottom: 10px; }
    }
}
.menu-item-object-category .sub-menu{
    a:before{
        content: '#';
        color: $main-color;
        font-size: 115%;
        margin-right: 5px;
        vertical-align: middle;
        position: relative;
        top: -1px;
    }
}

/* @end */