/* show-from-right-when-scrolled-to */

.template-503.show-from-right-when-scrolled-to.is-showing {
    transform: none !important;
}

/* show-second-image-on-hover */

.template-503.show-second-image-on-hover {
    position: relative;    
}

.template-503.show-second-image-on-hover img {
    transition: all .4s; 
}

.template-503.show-second-image-on-hover .template__hover-image {
    opacity: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transition: opacity .4s;
}

@media (min-width: 991.92px) {
    
    .template-503.show-second-image-on-hover:hover .template__hover-image {
        opacity: 1;    
    }
    
    .template-503.show-second-image-on-hover:hover .hide-first-image-on-hover {
        opacity: 0;
    }
}

/*************************
    scrolled to 
*************************/

/* scroll-to-white-overlay-w-100 */

.scroll-to-white-overlay-w-100 {
    position: relative;
    overflow: hidden;
}

.scroll-to-white-overlay-w-100:after {
    content: '';
    position: absolute;
    display: block;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    height: 100%;
    bottom: 0;
    background: transparent;
    z-index: 2;
    width: 50%;
    box-shadow: 0 0 1000px 1000px rgba(255, 255, 255, 1);
    transition: width .4s;
}

.scroll-to-white-overlay-w-100.radius-10:after {
    border-radius: 10px;
}

.scroll-to-white-overlay-w-100.is-active:after {
    width: 100%;
}

/* .scroll-transform-x-50vw */

.scroll-transform-x-50vw {
    transform: translateX(200%);
}

.scroll-transform-x-50vw-negative {
    transform: translateX(-200%);
}


.scroll-transform-x-50vw.is-active,
.scroll-transform-x-50vw-negative.is-active {
    transform: translateX(0);
}