.bOverlay {
    z-index: 1;
    display: block;
    position: relative;
    top: 0px;
    left: 0;
    margin-left: 0;
    width: 942px;
    height: 345px;
    background: transparent url(/contents/images/header.overlay.png) no-repeat top left
}

.peKenBurns {
    position: absolute;
    overflow: hidden;
    width: 943px;
    height: 295px;
    display: block;
    clear: right;
}


.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    opacity: 0;
    animation-name: kenBurnsEffect;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 20s; /* Total animation duration per slide */
}

/* Delay for subsequent slides */
.slide:nth-child(1) {
    animation-delay: 0s;
}

.slide:nth-child(2) {
    animation-delay: 5s;
}
/* Adjust delay based on animation duration */
.slide:nth-child(3) {
    animation-delay: 10s;
}

.slide:nth-child(4) {
    animation-delay: 15s;
}

.slide:nth-child(5) {
    animation-delay: 20s;
}

.slide:nth-child(6) {
    animation-delay: 25s;
}

@keyframes kenBurnsEffect {
    0% {
        opacity: 0;
        transform: scale(1.1) translate(0, 0); /* Initial zoom and position */
    }

    10% {
        opacity: 1; /* Fade in */
    }

    90% {
        opacity: 1;
        transform: scale(1) translate(-20px, 10px); /* Zoom out and pan */
    }

    100% {
        opacity: 0; /* Fade out */
    }
}