.border-effect a:before,
.underline-effect a:before{
	-webkit-transition: all 400ms ease;
	-moz-transition: all 400ms ease;
	-ms-transition: all 400ms ease;
	-o-transition: all 400ms ease;
	transition: all 400ms ease;
}
.border-effect a,
.underline-effect a{ position: relative; z-index: 1; padding-bottom: 2px; }
.border-effect a:before,
.underline-effect a:before{
	content: '';
	position: absolute;
	left: 0;
	top: 100%;
	width: 100%;
	border-bottom: 1px solid;
	opacity: .5;
}
.border-effect a:before,
.underline-effect a:hover:before,
.underline-effect a:focus:before{
	width: 90%;
	left: 5%;
}
.border-effect a:before{
	opacity: 0;
	visibility: hidden;
}
.border-effect a:hover:before,
.border-effect a:focus:before{
	width: 100%;
	left: 0;
	opacity: 1;
	visibility: visible;
}

/* Lightbox zoom effect */

.my-mfp-zoom-in .mfp-content {
	-webkit-opacity: 0;
	-moz-opacity: 0;
	opacity: 0;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	-ms-transform: scale(0.8);
	-o-transform: scale(0.8);
	transform: scale(0.8);
}

/* animate in */
.my-mfp-zoom-in.mfp-ready .mfp-content {
	-webkit-opacity: 1;
	-moz-opacity: 1;
	opacity: 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
}

/* animate out */
.my-mfp-zoom-in.mfp-removing .mfp-content {
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	-ms-transform: scale(0.8);
	-o-transform: scale(0.8);
	transform: scale(0.8);
	-webkit-opacity: 0;
	-moz-opacity: 0;
	opacity: 0;
}

/* Dark overlay, start state */
.my-mfp-zoom-in.mfp-bg {
	opacity: 0.001; /* Chrome opacity transition bug */
	-webkit-transition: opacity 0.3s ease-out;
	-moz-transition: opacity 0.3s ease-out;
	-o-transition: opacity 0.3s ease-out;
	transition: opacity 0.3s ease-out;
}
/* animate in */
.my-mfp-zoom-in.mfp-ready.mfp-bg {
	-webkit-opacity: 0.8;
	-moz-opacity: 0.8;
	opacity: 0.8;
}
/* animate out */
.my-mfp-zoom-in.mfp-removing.mfp-bg {
	-webkit-opacity: 0;
	-moz-opacity: 0;
	opacity: 0;
}

/* Global opacity Effect */

a.hover-effect{
	display: block;
	position: relative;
	overflow: hidden;
	background: #000;
}
a.hover-effect img, a.hover-effect span.cover{
	display: block;
	width: 101%;
	height: auto;
	backface-visibility: hidden;
	transition: all 600ms ease;
}
a.hover-effect:hover img, a.hover-effect:hover span.cover,
a.hover-effect:focus img, a.hover-effect:focus span.cover{
	opacity: .85;
}

// Gradient effect

.gradient-effect{
    a:not(.epcl-button){
        padding-bottom: 5px;
        background-image: linear-gradient(to right, rgba($green, 1) 0%, rgba($green, 1) 100%);
        background-size: 0px 4px;
        background-repeat: no-repeat;
        background-position: left 87%;        
        &:after, &:before{ display: none; }
        &:hover{
            color: $black2;
            background-size: 100% 4px;
        }
    }
    &.red{
        a{
            background-image: linear-gradient(to right, rgba($red, 1) 0%, rgba($red, 1) 100%);
        }
    }
}

// Translate Effect 

.translate-effect{
    display: inline-block;
    &:hover, &:focus{
        transform: translateY(-2px);
    }
}

