/* 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; /* 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, .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 underline Effect */

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

// Translate Effect 

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