#wbd-page-slides {
     height: 100vh;
     width: 100%;
     position: relative;
     z-index: 1;
     top: 0;
 }

 .page-slide {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     transition: 1000ms;

 }

 .page-slide img {
     object-fit: cover;
     min-height: 100%;
     height: auto;
     width: 100%;
 }

 .title-bar {
     position: fixed;
     top: -50px;
     /* start above the slide */
     left: 0;
     right: 0;
     width: 0;
     /* start collapsed horizontally */
     height: 20px;
     /* initial small height */
     background: #8dc8e8;
     overflow: hidden;
     display: flex;
     align-items: center;
     padding-left: 10px;
     box-sizing: border-box;
     z-index: 10;
     margin: 0 2em;
     opacity: 0.9;
 }


 .tb .title-bar {

     animation: fallExpand 5s forwards;
 }


 .title-inner {
     opacity: 0;
     margin-left: 5px;
     animation-delay: 1.8s;
     clip-path: inset(0 100% 0 0);
     overflow: hidden;
 }

 .tb .title-inner {
     animation: revealText 750ms forwards 2s;
 }

 @keyframes revealText {
     0% {
         opacity: 0;
         clip-path: inset(0 100% 0 0);
     }

     100% {
         opacity: 1;
         clip-path: inset(0 0 0 0);
     }
 }

 @keyframes fallExpand {
     0% {
         top: -50px;
         width: 20px;
         height: 20px;
         border-radius: 20px;
     }


     20% {
         top: 100%;
         width: 20px;
         height: 20px;
         border-radius: 20px;

     }


     25% {
         /* little bounce */
         top: 98%;
         width: 20px;
         height: 20px;
         border-radius: 20px;

     }

     28% {
         top: 96%;
         width: 20px;
         height: 20px;
         border-radius: 20px;

     }

     50% {
         top: auto;
         width: 90%;
         /* final full-width bar */
         height: 100px;
         /* final bar height */
         border-radius: 8px;
         bottom: 1px;
     }

     80% {
         top: auto;
         width: 90%;
         /* final full-width bar */
         height: 100px;
         /* final bar height */
         border-radius: 8px;
         bottom: 1px;
     }

     100% {
         top: auto;
         width: 90%;
         /* final full-width bar */
         height: 100px;
         /* final bar height */
         border-radius: 8px;
         bottom: -100px;
     }
 }

 @keyframes fadeInText {
     from {
         opacity: 0;
         width: 0;
     }

     to {
         opacity: 1;
         width: 100%;
     }
 }


 #wbd-page-slides h2 {
     padding: 0 0 4px 0;
     margin: 0;
     color: #fff;
     font-size: 1em;
 }
 #wbd-page-slides p {
     padding: 0 0 4px 0;
     margin: 0;
     color: #fff;
     font-size: 1em;
     line-height: 1.2;
 }

 @media screen and (min-width: 768px) {
    
    @keyframes fallExpand {
            0% {
                top: -50px;
                width: 20px;
                height: 20px;
                border-radius: 20px;
            }
    
    
            20% {
                top: 100%;
                width: 20px;
                height: 20px;
                border-radius: 20px;
    
            }
    
    
            25% {
                /* little bounce */
                top: 98%;
                width: 20px;
                height: 20px;
                border-radius: 20px;
    
            }
    
            28% {
                top: 96%;
                width: 20px;
                height: 20px;
                border-radius: 20px;
    
            }
    
            50% {
                top: auto;
                width: 90%;
                /* final full-width bar */
                height: 58px;
                /* final bar height */
                border-radius: 8px;
                bottom: 1px;
            }
    
            80% {
                top: auto;
                width: 90%;
                /* final full-width bar */
                height: 58px;
                /* final bar height */
                border-radius: 8px;
                bottom: 1px;
            }
    
            100% {
                top: auto;
                width: 90%;
                /* final full-width bar */
                height: 58px;
                /* final bar height */
                border-radius: 8px;
                bottom: -60px;
            }
        }
 }