@media screen {

  /** 
   * Frontpage news slideshow 
   */
  .news_slideshow {
    position: relative;
    width: 200px;
    height: 200px;
  }
  .news_slideshow .figure {
    position: absolute;
  }
  .news_slideshow .figure img {
    width: 200px;
  }
  .news_slideshow .figcaption {
    position: absolute;
    top: 0;
    color: #fff;
    background: rgba(0,0,0, .6);
    padding: 8px 12px;
    opacity: 0;

    transition:         opacity .25s;
    -moz-transition:    opacity .25s;
    -o-transition:      opacity .25s;
    -webkit-transition: opacity .25s;
  }
  .news_slideshow:hover .figure .figcaption {
    transition:         opacity .25s;
    -moz-transition:    opacity .25s;
    -o-transition:      opacity .25s;
    -webkit-transition: opacity .25s;

    opacity: 1;
  }
  .news_slideshow .figure {
    opacity: 0;
  }

  .news_slideshow .figure.startdummy {
    opacity: 1;
  }

  /** The n-th child's (of m) animation cycle is offset by (n-1)/m
   *  of the total animation time */
  .news_slideshow_phaseshift0of3 .figure:nth-child(1) {
    animation:         news_slideshow_crossfade 54s  0s infinite;
    -moz-animation:    news_slideshow_crossfade 54s  0s infinite;
    -o-animation:      news_slideshow_crossfade 54s  0s infinite;
    -webkit-animation: news_slideshow_crossfade 54s  0s infinite;
  }
  .news_slideshow_phaseshift0of3 .figure:nth-child(2) {
    animation:         news_slideshow_crossfade 54s  9s infinite;
    -moz-animation:    news_slideshow_crossfade 54s  9s infinite;
    -o-animation:      news_slideshow_crossfade 54s  9s infinite;
    -webkit-animation: news_slideshow_crossfade 54s  9s infinite;
  }
  .news_slideshow_phaseshift0of3 .figure:nth-child(3) {
    animation:         news_slideshow_crossfade 54s 18s infinite;
    -moz-animation:    news_slideshow_crossfade 54s 18s infinite;
    -o-animation:      news_slideshow_crossfade 54s 18s infinite;
    -webkit-animation: news_slideshow_crossfade 54s 18s infinite;
  }
  .news_slideshow_phaseshift0of3 .figure:nth-child(4) {
    animation:         news_slideshow_crossfade 54s 27s infinite;
    -moz-animation:    news_slideshow_crossfade 54s 27s infinite;
    -o-animation:      news_slideshow_crossfade 54s 27s infinite;
    -webkit-animation: news_slideshow_crossfade 54s 27s infinite;
  }
  .news_slideshow_phaseshift0of3 .figure:nth-child(5) {
    animation:         news_slideshow_crossfade 54s 36s infinite;
    -moz-animation:    news_slideshow_crossfade 54s 36s infinite;
    -o-animation:      news_slideshow_crossfade 54s 36s infinite;
    -webkit-animation: news_slideshow_crossfade 54s 36s infinite;
  }
  .news_slideshow_phaseshift0of3 .figure:nth-child(6) {
    animation:         news_slideshow_crossfade 54s 45s infinite;
    -moz-animation:    news_slideshow_crossfade 54s 45s infinite;
    -o-animation:      news_slideshow_crossfade 54s 45s infinite;
    -webkit-animation: news_slideshow_crossfade 54s 45s infinite;
  }

  .news_slideshow_phaseshift1of3 .startdummy:nth-child(7) {
    animation:         news_slideshow_startdummy 54s  3s;
    -moz-animation:    news_slideshow_startdummy 54s  3s;
    -o-animation:      news_slideshow_startdummy 54s  3s;
    -webkit-animation: news_slideshow_startdummy 54s  3s;
  }
  .news_slideshow_phaseshift1of3 .figure:nth-child(1) {
    animation:         news_slideshow_crossfade 54s  3s infinite;
    -moz-animation:    news_slideshow_crossfade 54s  3s infinite;
    -o-animation:      news_slideshow_crossfade 54s  3s infinite;
    -webkit-animation: news_slideshow_crossfade 54s  3s infinite;
  }
  .news_slideshow_phaseshift1of3 .figure:nth-child(2) {
    animation:         news_slideshow_crossfade 54s 12s infinite;
    -moz-animation:    news_slideshow_crossfade 54s 12s infinite;
    -o-animation:      news_slideshow_crossfade 54s 12s infinite;
    -webkit-animation: news_slideshow_crossfade 54s 12s infinite;
  }
  .news_slideshow_phaseshift1of3 .figure:nth-child(3) {
    animation:         news_slideshow_crossfade 54s 21s infinite;
    -moz-animation:    news_slideshow_crossfade 54s 21s infinite;
    -o-animation:      news_slideshow_crossfade 54s 21s infinite;
    -webkit-animation: news_slideshow_crossfade 54s 21s infinite;
  }
  .news_slideshow_phaseshift1of3 .figure:nth-child(4) {
    animation:         news_slideshow_crossfade 54s 30s infinite;
    -moz-animation:    news_slideshow_crossfade 54s 30s infinite;
    -o-animation:      news_slideshow_crossfade 54s 30s infinite;
    -webkit-animation: news_slideshow_crossfade 54s 30s infinite;
  }
  .news_slideshow_phaseshift1of3 .figure:nth-child(5) {
    animation:         news_slideshow_crossfade 54s 39s infinite;
    -moz-animation:    news_slideshow_crossfade 54s 39s infinite;
    -o-animation:      news_slideshow_crossfade 54s 39s infinite;
    -webkit-animation: news_slideshow_crossfade 54s 39s infinite;
  }
  .news_slideshow_phaseshift1of3 .figure:nth-child(6) {
    animation:         news_slideshow_crossfade 54s 48s infinite;
    -moz-animation:    news_slideshow_crossfade 54s 48s infinite;
    -o-animation:      news_slideshow_crossfade 54s 48s infinite;
    -webkit-animation: news_slideshow_crossfade 54s 48s infinite;
  }
  .news_slideshow_phaseshift1of3 .figure:nth-child(7) {
    animation:         news_slideshow_startdummy 54s  3s;
    -moz-animation:    news_slideshow_startdummy 54s  3s;
    -o-animation:      news_slideshow_startdummy 54s  3s;
    -webkit-animation: news_slideshow_startdummy 54s  3s;
    animation-fill-mode: forwards;
  }

  .news_slideshow_phaseshift2of3 .figure:nth-child(1) {
    animation:         news_slideshow_crossfade 54s  6s infinite;
    -moz-animation:    news_slideshow_crossfade 54s  6s infinite;
    -o-animation:      news_slideshow_crossfade 54s  6s infinite;
    -webkit-animation: news_slideshow_crossfade 54s  6s infinite;
  }
  .news_slideshow_phaseshift2of3 .figure:nth-child(2) {
    animation:         news_slideshow_crossfade 54s 15s infinite;
    -moz-animation:    news_slideshow_crossfade 54s 15s infinite;
    -o-animation:      news_slideshow_crossfade 54s 15s infinite;
    -webkit-animation: news_slideshow_crossfade 54s 15s infinite;
  }
  .news_slideshow_phaseshift2of3 .figure:nth-child(3) {
    animation:         news_slideshow_crossfade 54s 24s infinite;
    -moz-animation:    news_slideshow_crossfade 54s 24s infinite;
    -o-animation:      news_slideshow_crossfade 54s 24s infinite;
    -webkit-animation: news_slideshow_crossfade 54s 24s infinite;
  }
  .news_slideshow_phaseshift2of3 .figure:nth-child(4) {
    animation:         news_slideshow_crossfade 54s 33s infinite;
    -moz-animation:    news_slideshow_crossfade 54s 33s infinite;
    -o-animation:      news_slideshow_crossfade 54s 33s infinite;
    -webkit-animation: news_slideshow_crossfade 54s 33s infinite;
  }
  .news_slideshow_phaseshift2of3 .figure:nth-child(5) {
    animation:         news_slideshow_crossfade 54s 42s infinite;
    -moz-animation:    news_slideshow_crossfade 54s 42s infinite;
    -o-animation:      news_slideshow_crossfade 54s 42s infinite;
    -webkit-animation: news_slideshow_crossfade 54s 42s infinite;
  }
  .news_slideshow_phaseshift2of3 .figure:nth-child(6) {
    animation:         news_slideshow_crossfade 54s 51s infinite;
    -moz-animation:    news_slideshow_crossfade 54s 51s infinite;
    -o-animation:      news_slideshow_crossfade 54s 51s infinite;
    -webkit-animation: news_slideshow_crossfade 54s 51s infinite;
  }
  .news_slideshow_phaseshift2of3 .figure:nth-child(7) {
    animation:         news_slideshow_startdummy 54s  6s;
    -moz-animation:    news_slideshow_startdummy 54s  6s;
    -o-animation:      news_slideshow_startdummy 54s  6s;
    -webkit-animation: news_slideshow_startdummy 54s  6s;
    animation-fill-mode: forwards;
  }

  /** Images start invisible, then fade IN at the beginning of their
   *  animation cycle. After one-nth of the animation cycle, they fade
   *  out again (assuming a total of n images). */
  @keyframes news_slideshow_crossfade {
    0%     {opacity: 0; z-index:  1;}
    4%     {opacity: 1; z-index:  1;}
    4%     {opacity: 1; z-index: 10;}
    14.67% {opacity: 1; z-index: 10;}
    18.67% {opacity: 0; z-index: 10;}
    18.67% {opacity: 0; z-index:  1;}
    100%   {opacity: 0; z-index:  1;}
  }
  @-webkit-keyframes news_slideshow_crossfade {
    0%     {opacity: 0; z-index:  1;}
    4%     {opacity: 1; z-index:  1;}
    4%     {opacity: 1; z-index: 10;}
    14.67% {opacity: 1; z-index: 10;}
    18.67% {opacity: 0; z-index: 10;}
    18.67% {opacity: 0; z-index:  1;}
    100%   {opacity: 0; z-index:  1;}
  }

  @keyframes news_slideshow_startdummy {
    0%     {opacity: 1; z-index: 10;}
    4%     {opacity: 0; z-index: 10;}
    5%     {opacity: 0; z-index:  1;} /*TODO Why doesn't "4%" work?*/
    100%   {opacity: 0; z-index:  1;}
  }
  @-webkit-keyframes news_slideshow_startdummy {
    0%     {opacity: 1; z-index: 10;}
    4%     {opacity: 0; z-index: 10;}
    5%     {opacity: 0; z-index:  1;}
    100%   {opacity: 0; z-index:  1;}
  }

}