body{
    background: green;
}

main{
    background: black;
}


/*acts as WINDOW to show current caption*/

div#caption_window{
    height: 80px;
    border: 1px darkgrey solid;
    background: black;
    overflow: hidden;
}

/*div SLIDER holds all the captions
div moved to scroll current caption in to window */
div#captions_container{
    position: relative; 
    top: 80px;
    
    animation: captions 60s;
    animation-timing-function: step-end;
}


div.caption{
    height: 78px;
    border: 1px darkgrey solid;
    display: flex;
    color: white;
    text-align: center;
    justify-content: center;
}


div#imgDiv{
    height: 600px;
    width: 800px;
    overflow:hidden;
    position:relative;
    margin: auto;
/*    background: beige;*/
}

img{
    height: 600px;
    margin: auto;
    position: absolute;
    animation: panels 60s;
/*    animation-timing-function: cubic-bezier(.2,1,.25,.9)*/
}


@keyframes panels{
    0%{top:-15px; left: 0px; clip: rect(0px, 800px, 600px, 0px);}
    10%{top:-16px; left: 230px; clip: rect(16px, 300px, 233px, 40px);}
    20%{top: -7px; left: -43px; clip: rect(7px, 587px, 226px, 299px);}
    30%{top: -2px; left: -284px; clip: rect(2px, 781px, 227px, 587px);}
    40%{top: -227px; left: 221px; clip: rect(227px, 319px, 413px, 38px);}
    50%{top: -236px; left: -57px; clip: rect(236px, 594px, 415px, 321px);}
    60%{top: -231px; left: -283px; clip: rect(231px, 776px, 417px, 590px);}
    70%{top: -418px; left: 219px; clip: rect(418px, 318px, 582px, 45px);}
    80%{top: -413px; left: 15px; clip: rect(413px, 455px, 576px, 314px);}
    90%{top: -417px; left: -138px; clip: rect(417px, 620px, 578px, 457px);}
    100%{top: -418px; left: -298px; clip: rect(418px, 780px, 587px, 616px);}
}

@keyframes captions{
    0%{top: 100px;}       /*blank*/
    
    1%{top: 0px;}     /*go find him */
    10%{top: 100px;}      
    
    30%{top: -80px;}   /*bark*/
    35%{top: 100px;}
    
    60%{top: -160px;}   /*hands in the air*/
    65%{top: 100px;}
    
    70%{top: -240px;}  /*you're under arrest */
    75%{top: 100px;}
    
    80%{top: -320px;}  /*oh yeah */
    85%{top: 100px;}
    
    90%{top: -400px;}  /*max, it was  you*/
    95%{top: 100px;} /* */
}