<!-strip at the top of the screen->
             
            <!-Slide display frame->
            

  <!-Feed button radio button->
  <input type = "radio" name = "gal"><input type = "radio" name = "gal">
  <input type = "radio" name = "gal"><input type = "radio" name = "gal">
  <input type = "radio" name = "gal"><input type = "radio" name = "gal">
  <!-Slide group->
  
        <!-Slide 1->
      
        <!-Slide photo and current slide indication button->
          <!-
        <!-Associate feed button display with radio button->
        <label for = "back1"><span><</span></label>
        <label for = "next1"><span >>></span></label>
      
      
          <!-->
        <label for = "back2"><span><</span></label>
        <label for = "next2"><span >></span></label>
      
      
          <!-->
        <label for = "back1"><span><</span></label>
        <label for = "next1"><span >>></span></label>
      
  
  <!-Ensuring the height of the stage->
   

        
        

/* strip at the top of the screen * /
#top_belt {max-width: 400px;height: 15px;background: #fff;margin: 30px auto 0 auto;}
/ * Container for the entire slider * /
#stage {
    position: relative;
    max-width: 400px;
    height: 323px;
    margin: 0 auto;
    background: #fff;
    overflow: hidden;
}
/ * Hide all radio buttons * /
# r1, # r2, # r3, # r4, # r5, # back1, # back2, # back3, # back4, # back5, # next1, # next2, # next3, # next4, # next5 {
    display: none;
}
/ * Display switching button and display position * /
.circ img {
    position: absolute;
    bottom: 2.5%;
    cursor: pointer;
}

# lb1 img {left: 40%;width: 3%;}
# lb2 img {left: 43%;width: 3%;}
# lb3 img {left: 46%;width: 3%;}
/ * Left/right feed button * /
.pb, .nb {color: # 666;font-weight: bold;font-size: 10px;display: block;position: absolute;top: 45%;/* z-index: 200;pointer-events: auto;* /}
.pb {left: 0%;}.nb {left: 96%;}
.pb: hover, .nb: hover {color: orange;cursor: pointer;}
/ * Size when stage is below initial size * /
@media screen and (max-width: 660px) {.pb, .nb {font-size: 18px;}}
/ * Container for all slides * /
#photos {
    position: absolute;
    width: 100%;
    height: 90%;/* 100%;* /
    left: 4.55%;
    opacity: 0;
    / * pointer-events: none;* /
    animation: flowSlides 32s infinite;
}
/ * Individual slide/current slide indication button * /
.pic {
    position: absolute;
    width: 100%;
    height: 100%;
}
.pic img: nth-child (1) {width: 90.9%;margin-left: 4.55%;}
.pic img: nth-child (2) {width: 3%;bottom: -8.5%;/*2.5%;*/}
/ * Display slides side by side in photos * /
# photo1 {left: 0;}
# photo2 {left: 660px;}
# photo3 {left: 1320px;}

/ * Left/right feed button
# back1: checked ~ #photos {animation: flowSlides3 40s infinite;animation-delay: -32s;}
# back2: checked ~ #photos {animation: flowSlides1 40s infinite;animation-delay: 0s;}
# back3: checked ~ #photos {animation: flowSlides2 40s infinite;animation-delay: -8s;}
# next1: checked ~ #photos {animation: flowSlides2 40s infinite;animation-delay: -8s;}
# next2: checked ~ #photos {animation: flowSlides3 40s infinite;animation-delay: -16s;}
# next3: checked ~ #photos {animation: flowSlides1 40s infinite;animation-delay: -24s;}
/ * Initial slide show * /
@keyframes flowSlides {
    0% {left: 0px;opacity: 0;}
    2% {left: 0px;opacity: 1;}
    18% {left: 0px;opacity: 1;}
    20% {left: 0px;opacity: 0;}
    20.01% {left: -660px;opacity: 0;}
    22% {left: -660px;opacity: 1;}
    38% {left: -660px;opacity: 1;}
    40% {left: -660px;opacity: 0;}
    40.01% {left: -1320px;opacity: 0;}
    42% {left: -1320px;opacity: 1;}
    58% {left: -1320px;opacity: 1;}
    60% {left: -1320px;opacity: 0;}
    60.01% {left: -1980px;opacity: 0;}
    62% {left: -1980px;opacity: 1;}
    78% {left: -1980px;opacity: 1;}
    80% {left: -1980px;opacity: 0;}
    80.01% {left: -2640px;opacity: 0;}
    82% {left: -2640px;opacity: 1;}
    98% {left: -2640px;opacity: 1;}
    100% {left: -2640px;opacity: 0;}
}
/ * Slide show for each slide * /
@keyframes flowSlides1 {
    0% {left: 0px;opacity: 0;}
    2% {left: 0px;opacity: 1;}
    18% {left: 0px;opacity: 1;}
    20% {left: 0px;opacity: 0;}20.01% {left: -660px;opacity: 0;}
    22% {left: -660px;opacity: 1;}
    38% {left: -660px;opacity: 1;}
    40% {left: -660px;opacity: 0;}
    40.01% {left: -1320px;opacity: 0;}
    42% {left: -1320px;opacity: 1;}
    58% {left: -1320px;opacity: 1;}
    60% {left: -1320px;opacity: 0;}
    60.01% {left: -1980px;opacity: 0;}
    62% {left: -1980px;opacity: 1;}
    78% {left: -1980px;opacity: 1;}
    80% {left: -1980px;opacity: 0;}
    80.01% {left: -2640px;opacity: 0;}
    82% {left: -2640px;opacity: 1;}
    98% {left: -2640px;opacity: 1;}
    100% {left: -2640px;opacity: 0;}
}
@keyframes flowSlides2 {
    0% {left: 0px;opacity: 0;}
    2% {left: 0px;opacity: 1;}
    18% {left: 0px;opacity: 1;}
    20% {left: 0px;opacity: 0;}
    20.01% {left: -660px;opacity: 0;}
    22% {left: -660px;opacity: 1;}
    38% {left: -660px;opacity: 1;}
    40% {left: -660px;opacity: 0;}
    40.01% {left: -1320px;opacity: 0;}
    42% {left: -1320px;opacity: 1;}
    58% {left: -1320px;opacity: 1;}
    60% {left: -1320px;opacity: 0;}
    60.01% {left: -1980px;opacity: 0;}
    62% {left: -1980px;opacity: 1;}
    78% {left: -1980px;opacity: 1;}
    80% {left: -1980px;opacity: 0;}
    80.01% {left: -2640px;opacity: 0;}
    82% {left: -2640px;opacity: 1;}
    98% {left: -2640px;opacity: 1;}
    100% {left: -2640px;opacity: 0;}
}
@keyframes flowSlides3 {
    0% {left: 0px;opacity: 0;}
    2% {left: 0px;opacity: 1;}
    18% {left: 0px;opacity: 1;}
    20% {left: 0px;opacity: 0;}
    20.01% {left: -660px;opacity: 0;}
    22% {left: -660px;opacity: 1;}
    38% {left: -660px;opacity: 1;}
    40% {left: -660px;opacity: 0;}
    40.01% {left: -1320px;opacity: 0;}
    42% {left: -1320px;opacity: 1;}
    58% {left: -1320px;opacity: 1;}
    60% {left: -1320px;opacity: 0;}
    60.01% {left: -1980px;opacity: 0;}
    62% {left: -1980px;opacity: 1;}
    78% {left: -1980px;opacity: 1;}
    80% {left: -1980px;opacity: 0;}
    80.01% {left: -2640px;opacity: 0;}
    82% {left: -2640px;opacity: 1;}
    98% {left: -2640px;opacity: 1;}
    100% {left: -2640px;opacity: 0;}
}