/*--------------------------------------------------------------
# IMAGE REVEAL Style1 Starts #
--------------------------------------------------------------*/

.rt-image-reveal {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    width: 100%;
}

.rt-reveal-effect,
.rt-reveal-content {
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.rt-reveal-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #377DFF;
    -webkit-animation-name: reveal;
    animation-name: reveal;
}

.rt-reveal-content {
    -webkit-animation-name: reveal-content;
    animation-name: reveal-content;
}

.rt-reveal-content img {
    width: 100%;
    height: 100%;
}

.rt-image-reveal:nth-child(3) .rt-reveal-effect,
.rt-image-reveal:nth-child(3) .rt-reveal-content {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

.rt-image-reveal:nth-child(5) .rt-reveal-effect,
.rt-image-reveal:nth-child(5) .rt-reveal-content {
    -webkit-animation-delay: 1.0s;
    animation-delay: 1.0s;
}

/*Left to Right Reveal Start*/
@-webkit-keyframes reveal {

    0%,
    100% {
        width: 0%;
        left: 0%;
    }

    50% {
        width: 100%;
        left: 0%;
    }

    100% {
        left: 100%;
    }
}

@keyframes reveal {

    0%,
    100% {
        width: 0%;
        left: 0%;
    }

    50% {
        width: 100%;
        left: 0%;
    }

    100% {
        left: 100%;
    }
}


/*Left to Right Reveal End*/

/*Right to Left Reveal Start*/
.rt-reveal-effect-right {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #377DFF;
    -webkit-animation-name: revealright;
    animation-name: revealright;
}

@-webkit-keyframes revealright {

    0%,
    100% {
        left: 100%;

    }

    50% {
        width: 100%;
        left: 0%;
    }

    100% {
        width: 0%;
        left: 0%;
    }
}

@keyframes revealright {

    0%,
    100% {
        left: 100%;
    }

    50% {
        width: 100%;
        left: 0%;
    }

    100% {
        width: 0%;
        left: 0%;
    }
}

/*Right to Left Reveal End*/


/*Top to Bottom Reveal End*/
.rt-reveal-effect-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background-color: #377DFF;
    -webkit-animation-name: revealtop;
    animation-name: revealtop;
}

@-webkit-keyframes revealtop {

    0%,
    100% {
        height: 0%;
        top: 0%;
    }

    50% {
        height: 100%;
        top: 0%;
    }

    100% {
        top: 100%;
    }
}

@keyframes revealtop {

    0%,
    100% {
        height: 0%;
        top: 0%;
    }

    50% {
        height: 100%;
        top: 0%;
    }

    100% {
        top: 100%;
    }
}

/*Top to Bottom Reveal End*/

/*Bottom to Top Reveal Start*/
.rt-reveal-effect-bottom {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background-color: #377DFF;
    -webkit-animation-name: revealbottom;
    animation-name: revealbottom;
}

@-webkit-keyframes revealbottom {

    0%,
    100% {
        height: 0%;
        Bottom: 0%;
    }

    50% {
        height: 100%;
        Bottom: 0%;
    }

    100% {
        Bottom: 100%;
    }
}

@keyframes revealbottom {

    0%,
    100% {
        height: 0%;
        Bottom: 0%;
    }

    50% {
        height: 100%;
        Bottom: 0%;
    }

    100% {
        Bottom: 100%;
    }
}

/*Bottom to top Reveal End*/
/*--------------------------------------------------------------
# IMAGE REVEAL Style1 Ends #
--------------------------------------------------------------*/