
#CrossFade {
  background: #fff;
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
#CrossFade img {
  position: absolute;
  min-width: 100%;
  min-height: 100%;
  width:100%;
  background: #fff;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  opacity: 0;
  -webkit-transform: scale(1.4) rotate(12deg);
          transform: scale(1.4) rotate(12deg);
  -webkit-animation: CrossFade 12s infinite;
          animation: CrossFade 12s infinite;
}
#CrossFade img:nth-child(3) {
  -webkit-animation-delay: 8s;
          animation-delay: 8s;
}
#CrossFade img:nth-child(2) {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
#CrossFade img:nth-child(1) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

@-webkit-keyframes CrossFade {
  33.3% {
    opacity: 1;
    -webkit-transform: scale(1) rotate(0);
            transform: scale(1) rotate(0);
  }
  45% {
    opacity: 0;
  }
}
@keyframes CrossFade {
  33.3% {
    opacity: 1;
    -webkit-transform: scale(1) rotate(0);
            transform: scale(1) rotate(0);
  }
  45% {
    opacity: 0;
  }
}

.speaker {
  background-image: url(data:image/png;base64,[encoded data, 9688 characters]);
  background-repeat: no-repeat;
  background-size: 200%;
  background-position: 100% 0;
  height: 34px;
  width: 28px;
  cursor: pointer;
  display: block;
  position: absolute;
  top: 20px;
  right: 20px;
  display: block;
  z-index:9999;
  opacity:.5;
}

.speakerplay {
  background-position: 0 0;
}
