@keyframes fadeDown {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .fade-down-on-load {
        animation: fadeDown 1s linear forwards;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    .fade-in-on-load {
        animation: fadeIn 3s ease forwards;
    }

   

.fade-up-catalog {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    height: 80%;

}
.fade-up-done-catalog {
    opacity: 1;
    transform: translateY(0);

}
.fade-down-catalog {
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity 0.8s ease, transform 0.6s ease;

}
.fade-down-done-catalog {
    opacity: 1;
    transform: translateY(0);

}
/*@keyframes fadeInRight {*/
/*	0% {*/
/*		transform: translateX(-50px);*/
/*	}*/

/*	100% {*/
/*		transform: translateX(0px);*/
/*	}*/
/*}*/
/*@keyframes fadeInRight {*/
/*	0% {*/
/*		background-position: center bottom;*/
/*		background-size: 100%;*/
/*	}*/

/*	100% {*/
/*		background-position: center bottom;*/
/*		background-size: 150%;*/
/*	}*/
/*}*/
    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .fade-in-up-on-load {
        animation: slideUp 0.4s linear 0s 1 normal forwards;
    }


.fade-in-down-on-load {
    animation: slideDown 0.5s linear forwards;
}
@keyframes slideDown {
    from {
        transform: translateY(-10px);
        /*opacity: 0;*/
    }
    to {
        transform: translateY(0);
        /*opacity: 1;*/
    }
}
.image-s-container, .image-e-container {
    position: relative;
    width: auto; 
    height: 630px; 
    overflow: hidden;
}
.mono-image-container {
    position: relative;
    width: auto; 
    height: 338px; 
    overflow: hidden;
}
.mono-image-container img, .image-s-container img, .image-e-container img {
    position: absolute;
    width: 100%; 
    height: auto; 
}


/*nav animations*/
/* Initial state */
/*.fade-up {*/
/*    opacity: 0;*/
/*    transform: translateY(20px);*/
/*    transition: opacity 0.6s ease, transform 0.6s ease;*/
/*}*/

/* State when animation is done */
/*.fade-up-done {*/
/*    opacity:1;*/
/*    transform: translateY(0);*/
/*}*/
img.fade-up-done {
    opacity: 0.5;
    /*transform: translateY(0);*/
}
/* Initial state */
.fade-down {
    opacity: 0;
    transform: translateY(-20px); /* Elements start 20px above their final position */
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* State when animation is done */
.fade-down-done {
    opacity: 1;
    transform: translateY(0); /* Elements move to their final position */
}

/* MENU FADE UP ANIMATIONS */
.menu-search-template:not(#menu-65-collapse) .fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
/* State when animation is done */
.menu-search-template:not(#menu-65-collapse) .fade-up-done {
    opacity:1!important;
    transform: translateY(0);
    /*transition: opacity 0.6s ease, transform 0.6s ease;*/

}
/* State when animation is done */
.menu-search-template#menu-65-collapse .fade-up-done {
    opacity:0!important;
    transform: translateY(0);
    /*transition: opacity 0.6s ease, transform 0.6s ease;*/

}
.menu-search-template#menu-65-collapse .fade-up {
    opacity: 1 !important;
    transform: translateY(20px);
    /*transition: opacity 0.6s ease, transform 0.6s ease;*/
}
/* END MENU FADE UP ANIMATIONS */

.products-list .gradient-overlap::before{
    z-index:1;
    }
.trio-image-template__layer-bg::before{
    bottom: 10.33vh!important;
    }
.trio-image-template__layer-bg::before {
  opacity:0;
}