/* 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;
	-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, .my-mfp-zoom-in.mfp-ready .mfp-close {
	opacity: 1;
}
/* animate out */
.my-mfp-zoom-in.mfp-removing.mfp-bg, .my-mfp-zoom-in.mfp-removing .mfp-close  {
	-webkit-opacity: 0;
	-moz-opacity: 0;
	opacity: 0;
}

/* Global opacity Effect */

a.hover-effect{
	display: block;
	position: relative;
	overflow: hidden;
	background: $input-bg-color;
}
a.hover-effect img, a.hover-effect span.cover{
	display: block;
	width: 100%;
	height: auto;
	backface-visibility: hidden;
	transition: all 600ms ease;
}

.underline-effect{
    a:not(.epcl-button){
        padding-bottom: 5px;
        background-image: linear-gradient(to right, $titles-color 0%, $titles-color 100%);
        background-size: 0% 5%;
        background-repeat: no-repeat;
        background-position: left 80%;     
        transition: all 400ms ease;   
        &:after, &:before{ display: none; }
        &:hover{
            color: $titles-color !important;
            background-size: 100% 5%;
        }
    }
}
.border-effect{
    a:not(.epcl-button){
        border-bottom: 1px solid;
        &:hover{
            border-color: transparent; 
        }
    }
}

// Translate Effect 

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

.shadow-effect{
    border: 1px solid $border-color;
    @include transition($transition-time-bezier, 'bezier');
    &:hover{
        box-shadow: $small-shadow;
        transform: translate(-2px, -2px);
        a{
            color: $black;
        }
    }
    &.thumb{
        border-radius: $small-border-radius;
    }
    &.title{
        background: $white;
        border: 1px solid $border-color;
        border-radius: $small-border-radius;
        a{
            display: block;
            padding: 8px 15px;
        }
    }
}

.main-effect{
    transition: all 400ms $transition-bezier;
    .fullimage{
        transition: all 400ms $transition-bezier;
    }
    &:hover{
        box-shadow: $small-shadow;
        transform: translate(-2px, -2px);
    }
    &.medium-shadow:hover{
        box-shadow: $medium-shadow;
        transform: translate(-3px, -3px);
    }
}

.border-left-effect{
    a{
        display: inline-block;
        position: relative;
        z-index: 2;
        &::before{
            content: '';
            width: 0px;
            height: 1px;
            background: $black;
            position: absolute;
            left: 25px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 2;
            @include transition;
        }
        &:hover{
            padding-left: 40px !important;
            &:before{
                width: 8px;
            }
        }
    }
}