@charset "utf-8";
/* CSS Document */

/* crossfade */
#cross-content {
	position: relative;
    width: 100%;
    height: auto;	
	display: inline-block;	
	overflow: hidden;	
}

#cross-content:after {
  content: "";
  display: block;
  padding-bottom: 31.5%;
}

#crossfade {   
    width: 100%;
    height: auto;
	background-color: #FFF;	
}

#crossfade img {
	position: absolute;
    width: 100%;
    height: auto;
    
    animation-name: crossfade;
    animation-iteration-count: infinite;
    animation-duration: 34s;
    -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;
}

@keyframes crossfade {
  0%   { opacity: 1; }
  17%  { opacity: 1; }
  25%  { opacity: 0; }
  92%  { opacity: 0; }
  100% { opacity: 1; }
}

#crossfade img:nth-of-type(1) {
	animation-delay: 27s;
}
#crossfade img:nth-of-type(2) {
	animation-delay: 20s;
}
#crossfade img:nth-of-type(3) {
	animation-delay: 14s;
}
#crossfade img:nth-of-type(4) {
	animation-delay: 6s;
}
#crossfade img:nth-of-type(5) {
	animation-delay: 0s;
}

@media screen and (max-width: 768px) {
#cross-content:after {
  content: "";
  display: block;
  padding-bottom: 50%;
}
		
#crossfade img {
	position: absolute;
	top: auto;
	left: -30%;
    width: 160%;
    height: auto;
}
}