/*

For "n" images You must define:
a=presentation time for one image
b=duration for cross fading
Total animation-duration is of course t=(a+b)*n

animation-delay = t/n or = a+b

Percentage for keyframes:

1    0%
2    a/t×100%
3    (a+b)/t×100% = 1/n×100%
4    100%-(b/t×100%)
5    100%
-------------------

n = 17
a = 4
b = 1
t = 85

1 0%
2 4,7%
3 5,9%
4 98,8%
5 100%

*/

@keyframes FadeInOut {
  0% {
    opacity:1;
  }
  4.7% {
    opacity:1;
  }
  5.9% {
    opacity:0;
  }
  98.8% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

#cf img:nth-of-type(1) {
  animation-delay: 80s;
}
#cf img:nth-of-type(2) {
  animation-delay: 75s;
}
#cf img:nth-of-type(3) {
  animation-delay: 70s;
}
#cf img:nth-of-type(4) {
  animation-delay: 65;
}
#cf img:nth-of-type(5) {
  animation-delay: 60s;
}
#cf img:nth-of-type(6) {
  animation-delay: 55s;
}
#cf img:nth-of-type(7) {
  animation-delay: 50s;
}
#cf img:nth-of-type(8) {
  animation-delay: 45s;
}
#cf img:nth-of-type(9) {
  animation-delay: 40s;
}
#cf img:nth-of-type(10) {
  animation-delay: 35s;
}
#cf img:nth-of-type(11) {
  animation-delay: 30s;
}
#cf img:nth-of-type(12) {
  animation-delay: 25s;
}
#cf img:nth-of-type(13) {
  animation-delay: 20s;
}
#cf img:nth-of-type(14) {
  animation-delay: 15s;
}
#cf img:nth-of-type(15) {
  animation-delay: 10s;
}
#cf img:nth-of-type(16) {
  animation-delay: 5s;
}
#cf img:nth-of-type(17) {
  animation-delay: 0s;
}


#cf img {
animation-name: FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 85s;
}

#cf {
  position: relative;
}

#cf img:not(.pohja) {
  position: absolute;
  left: 0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.pohja {
	position: relative;
	z-index: -100;
}

p span.pelaajia {
	color: #aaa;
}

li span.pelaajia {
	color: #ddd;
	margin-left: 0.2em;
}

li span.pelaajia::before {
	content: "[";
}

li span.pelaajia::after {
	content: "]";
}

li:hover span.pelaajia {
	cursor: none;
}

li:hover span.pelaajia::before {
	content: "[enimmillään ";
}

li:hover span.pelaajia::after {
	content: " pelaajalle]";
}

.ohi {
	color: #999;
}

#wa-kuvake {
	width: 30px;
	margin: 20px 10px 0 0;
	float: left;
	fill-rule: nonzero;
}

#wa-kuvake:hover {
	filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.1));
	position: relative;
	top: -1px;
	left: -1px;
}
#wa-kuvake:active {
	top: 1px;
	left: 1px;
        filter: drop-shadow(2px 2px 4px rgb(0 0 0 / 0));
}

@media (min-width: 800px) {
	img.koriste {
		float: right;
		width: 40%;
		margin: 50px 0 30px 60px;
		border: 1px solid #999;
		border-radius: 10px;
		box-shadow: 8px 8px 20px #bbb;
	}

}