#townStateSlider {
    position: relative;
    animation-name: townState-10;
    animation-iteration-count: infinite;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 100%;
    width: auto;
    border: 2px solid #eee;
    box-shadow: 1px 1px 2px 1px #777;
    cursor: pointer;
    overflow: hidden;
}

#townStateSlider figure {
    position: absolute;
    margin: 0;
    height: 12.5em;
    height: 100%;
    max-width: 100%;
    opacity: 0;
}

#townStateSlider figcaption {
    position: absolute;
    color: #4800ff;
    font: 1.0em/0.8 serif;
    line-height: 110%;
    letter-spacing: .1em;
    word-spacing: .1em;
    text-align: center;
    text-shadow: -1px -1px 0 rgba(255, 255, 255, .3), 1px 1px 0 #505050;
    background: rgba(255, 255, 255, .7);
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    width: 100%;
    -o-animation:  t12 25s 2s infinite;
    -webkit-animation:  t12 25s 2s infinite;
    -ms-animation:  t12 25s 2s infinite;
    -moz-animation:  t12 25s 2s infinite;
    animation: t12 25s 2s infinite;
}
   a { text-decoration: none; }
   a:link { color: #001365; }
   a:visited { color: #0CFFAA; }
   a:hover { color: #FF1C63; }
   a:active { color: #FF4D1C; }
       
.ladenTownStateSlider {
    position: relative;
    background: linear-gradient(90deg,#f00,#ffa500,#ff0,
                                #008000,#00f,#800080);
    width: 37.5em;
    height: .195em;
    bottom: -257px;
    -o-animation: balken 25s 2s ease-out infinite;
    -webkit-animation: balken 25s 2s ease-out infinite;
    -ms-animation: balken 25s 2s ease-out infinite;
    -moz-animation: balken 25s 2s ease-out infinite;
    animation: balken 25s 2s ease-out infinite;
    z-index: 2;
}

@keyframes t12 {
     0%, 80%, 100% {bottom:-250px;}
    15%, 65%       {bottom:  2px;}
}
          
#townStateSlider:hover figure,
#townStateSlider:hover figcaption,
#townStateSlider:hover .ladentownStateSlider {
    -o-animation-play-state: paused;
    -webkit-animation-play-state: paused;
    -ms-animation-play-state: paused;
    -moz-animation-play-state: paused;
    animation-play-state: paused;
}

#townStateSlider:focus figure,
#townStateSlider:focus figcaption,
#townStateSlider:focus .ladentownStateSlider {
    -o-animation-play-state: paused;
    -webkit-animation-play-state: paused;
    -ms-animation-play-state: paused;
    -moz-animation-play-state: paused;
    animation-play-state: paused;
}
   
@keyframes balken {
      0% {width:   0; opacity: 0;}
     10% {width:   0; opacity:.2;}
     80% {width:100%; opacity:.8;}
    100% {width:100%; opacity: 0;}
}
          
.pause {
    position: absolute;
    top: 1px;
    left: 570px;
    color: #eee;
    font: bolder 0.5em/2 Impact;
    opacity: 0;
    -o-transition: .5s;
    -webkit-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    transition: .5s;
    z-index: 2;
}

#townStateSlider.pause:after {
    content: 'I I';
}

#townStateSlider:hover .pause {
    opacity: 1;
}

#townStateSlider:focus .pause {
    opacity: 1;
}
          
#townStateSlider figure:nth-of-type(1) {
    -o-animation: slikatownStateSlider 250s ease-in-out infinite;
    -webkit-animation: slikatownStateSlider 250s ease-in-out infinite;
    -ms-animation: slikatownStateSlider 250s ease-in-out infinite;
    -moz-animation: slikatownStateSlider 250s ease-in-out infinite;
    animation: slikatownStateSlider 250s ease-in-out infinite;
}
#townStateSlider figure:nth-of-type(2) {
    -o-animation: slikatownStateSlider 250s 25s ease-in-out infinite;
    -webkit-animation: slikatownStateSlider 250s 25s ease-in-out infinite;
    -ms-animation: slikatownStateSlider 250s 25s ease-in-out infinite;
    -moz-animation: slikatownStateSlider 250s 25s ease-in-out infinite;
    animation: slikatownStateSlider 250s 25s ease-in-out infinite;
}
#townStateSlider figure:nth-of-type(3) {
    -o-animation: slikatownStateSlider 250s 50s ease-in-out infinite;
    -webkit-animation: slikatownStateSlider 250s 50s ease-in-out infinite;
    -ms-animation: slikatownStateSlider 250s 50s ease-in-out infinite;
    -moz-animation: slikatownStateSlider 250s 50s ease-in-out infinite;
    animation: slikatownStateSlider 250s 50s ease-in-out infinite;
}
#townStateSlider figure:nth-of-type(4) {
    -o-animation: slikatownStateSlider 250s 75s ease-in-out infinite;
    -webkit-animation: slikatownStateSlider 250s 75s ease-in-out infinite;
    -ms-animation: slikatownStateSlider 250s 75s ease-in-out infinite;
    -moz-animation: slikatownStateSlider 250s 75s ease-in-out infinite;
    animation: slikatownStateSlider 250s 75s ease-in-out infinite;
}
#townStateSlider figure:nth-of-type(5) {
    -o-animation: slikatownStateSlider 250s 100s ease-in-out infinite;
    -webkit-animation: slikatownStateSlider 250s 100s ease-in-out infinite;
    -ms-animation: slikatownStateSlider 250s 100s ease-in-out infinite;
    -moz-animation: slikatownStateSlider 250s 100s ease-in-out infinite;
    animation: slikatownStateSlider 250s 100s ease-in-out infinite;
}

#townStateSlider figure:nth-of-type(6) {
    -o-animation: slikatownStateSlider 250s 125s ease-in-out infinite;
    -webkit-animation: slikatownStateSlider 250s 125s ease-in-out infinite;
    -ms-animation: slikatownStateSlider 250s 125s ease-in-out infinite;
    -moz-animation: slikatownStateSlider 250s 125s ease-in-out infinite;
    animation: slikatownStateSlider 250s 125s ease-in-out infinite;
}
#townStateSlider figure:nth-of-type(7) {
    -o-animation: slikatownStateSlider 250s 150s ease-in-out infinite;
    -webkit-animation: slikatownStateSlider 250s 150s ease-in-out infinite;
    -ms-animation: slikatownStateSlider 250s 150s ease-in-out infinite;
    -moz-animation: slikatownStateSlider 250s 150s ease-in-out infinite;
    animation: slikatownStateSlider 250s 150s ease-in-out infinite;
}
#townStateSlider figure:nth-of-type(8) {
    -o-animation: slikatownStateSlider 250s 175s ease-in-out infinite;
    -webkit-animation: slikatownStateSlider 250s 175s ease-in-out infinite;
    -ms-animation: slikatownStateSlider 250s 175s ease-in-out infinite;
    -moz-animation: slikatownStateSlider 250s 175s ease-in-out infinite; 
    animation: slikatownStateSlider 250s 175s ease-in-out infinite;
}
#townStateSlider figure:nth-of-type(9) {
    -o-animation: slikatownStateSlider 250s 200s ease-in-out infinite;
    -webkit-animation: slikatownStateSlider 250s 200s ease-in-out infinite;
    -ms-animation: slikatownStateSlider 250s 200s ease-in-out infinite;
    -moz-animation: slikatownStateSlider 250s 200s ease-in-out infinite;
    animation: slikatownStateSlider 250s 200s ease-in-out infinite;
}
#townStateSlider figure:nth-of-type(10) {
    -o-animation: slikatownStateSlider 250s 225s ease-in-out infinite;
    -webkit-animation: slikatownStateSlider 250s 225s ease-in-out infinite;
    -ms-animation: slikatownStateSlider 250s 225s ease-in-out infinite;
    -moz-animation: slikatownStateSlider 250s 225s ease-in-out infinite;
    animation: slikatownStateSlider 250s 225s ease-in-out infinite;
}

@keyframes slikatownStateSlider {
     0.8%,  10% {bottom:0;      opacity:1; z-index:1;}
    10.8%     {bottom:0;      opacity:0; z-index:0;}
    0%, 100% {bottom:-500px; opacity:0; z-index:0;}
}