/* This is SlideShow3_style_NHN.css */

/*  last edits:  3/8/2021  */

.auto-slider{
    position: relative;
    box-sizing: content-box;
    display: inline-block;
    padding: 1px 1px 2px;   /*  Was 10px 10px 20px;   -- WLT */
    background: #595555;  /* Dark Grey , Was #fff;   White -- WLT */
    max-width: 720px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 1px;  /* Was 4px;  WLT   */
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);  /* Was 1px 1px 6px rgba(0, 0, 0, 0.4);  --  WLT */

}

/* WLT, let's try modifying this block, for 10 images...  2/17/2021  */
/* that did the trick!! --  WLT  2/17/2021  */
@keyframes sliding{
            0%{left: 0%; }
			10%{left: -100%;}
            20%{left: -200%;}
			30%{left: -300%;}
            40%{left: -400%;}
			50%{left: -500%;}
            60%{left: -600%;}
			70%{left: -700%;}
            80%{left: -800%;}
			90%{left: -900%;}
            100%{left: 0%;}
        }        
/* End of WLT substitute code, for 10 images, 2/17/2021 */		
        
/* original code for 5 images -- WLT  2/17/2021 */
/*
@keyframes sliding{
            0%{left: 0%; }
            20%{left: -100%;}
            40%{left: -200%;}
            60%{left: -300%;}
            80%{left: -400%;}
            100%{left: 0%;}
        }        
 */     /* end of WLT commented-out code */

 
@keyframes indicating{
            from{
                left: -100%;
            }
            to{
                left: 0;
            }
}  
        
        
div#slider { overflow: hidden; }
div#slider figure img { width: 10%; float: left; }  /*  for 10 images now, Was  20% for 5 images  -- WLT */
div#slider figure { 
  position: relative;
  width: 1000% ;  /*  for 10 images, WAS 500%; for 5 images --  WLT  # of images X 100% */
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 75s /* WAS 25s WLT */ sliding ease infinite; 
}

/* Slider indicator */
.indicator{
    width: 100%;
    max-width: 720px;
    height: 0px;  /*  Was 6px;  -- WLT  */
    background: #e41b17; /* Dark Red -- WLT  */
    position: absolute;
    bottom: 0;
    
    animation: indicating 10s /* WAS 5s WLT */ ease infinite; 
    
}