@-webkit-keyframes fade {
	0% { opacity: 0; }
	10% { opacity: 1; }
	50% { opacity: 1; }
	70% { opacity: 0; }
	100% { opacity: 0; }
}
@-moz-keyframes fade {
	0% { opacity: 0; }
	10% { opacity: 1; }
	50% { opacity: 1; }
	70% { opacity: 0; }
	100% { opacity: 0; }
}
@-o-keyframes fade {
	0% { opacity: 0; }
	10% { opacity: 1; }
	50% { opacity: 1; }
	70% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes fade {
	0% { opacity: 0; }
	10% { opacity: 1; }
	50% { opacity: 1; }
	70% { opacity: 0; }
	100% { opacity: 0; }
}
.fadein { position:relative; width:100%; }
.fadein img { position:absolute; width:100%; left:0; right:0; opacity:0; animation-name: fade; animation-duration: 7s; animation-iteration-count: infinite; }
.fadein img:nth-child(1) { animation-delay: 0s; }
.fadein img:nth-child(2) { animation-delay: 3s; }
.fadein img:nth-child(3) { animation-delay: 4s; }

/*
@-webkit-keyframes fade_02 {
	0% { opacity: 0; }
	20% { opacity: 1; }
	40% { opacity: 1; }
	60% { opacity: 0; }
	80% { opacity: 1; }
	100% { opacity: 0; }
}
@-moz-keyframes fade_02 {
	0% { opacity: 0; }
	20% { opacity: 1; }
	40% { opacity: 1; }
	60% { opacity: 0; }
	80% { opacity: 1; }
	100% { opacity: 0; }
}
@-o-keyframes fade_02 {
	0% { opacity: 0; }
	20% { opacity: 1; }
	40% { opacity: 1; }
	60% { opacity: 0; }
	80% { opacity: 1; }
	100% { opacity: 0; }
}

@keyframes fade_02 {
	0% { opacity: 0; }
	20% { opacity: 1; }
	40% { opacity: 1; }
	60% { opacity: 0; }
	80% { opacity: 1; }
	100% { opacity: 0; }
}
*/

@-webkit-keyframes fade_02 {
    12.5%{ opacity: 1; }
    25%{ opacity: 1; }   
    37.5%{ opacity: 0; }
}
@-moz-keyframes fade_02 {
    12.5%{ opacity: 1; }
    25%{ opacity: 1; }   
    37.5%{ opacity: 0; }
}
@-o-keyframes fade_02 {
    12.5%{ opacity: 1; }
    25%{ opacity: 1; }   
    37.5%{ opacity: 0; }
}
@keyframes fade_02 {
    12.5%{ opacity: 1; }
    25%{ opacity: 1; }   
    37.5%{ opacity: 0; }
}
.fadein_02 { position:relative; width:100%; }
.fadein_02 img { position:absolute; width:100%; left:0; right:0; opacity:0; animation-name: fade_02; animation-duration: 15s; animation-iteration-count: infinite; }
.fadein_02 img:nth-child(1) { animation-delay: 0s; }
.fadein_02 img:nth-child(2) { animation-delay: 3s; }
.fadein_02 img:nth-child(3) { animation-delay: 6s; }
.fadein_02 img:nth-child(4) { animation-delay: 9s; }
.fadein_02 img:nth-child(5) { animation-delay: 12s; }
.fadein_02 img:nth-child(6) { animation-delay: 15s; }
.fadein_02 img:nth-child(7) { animation-delay: 18s; }
/*
.fadein_02 img:nth-child(8) { animation-delay: 21s; }
.fadein_02 img:nth-child(9) { animation-delay: 24s; }
.fadein_02 img:nth-child(10) { animation-delay: 27s; }
.fadein_02 img:nth-child(11) { animation-delay: 30s; }
.fadein_02 img:nth-child(12) { animation-delay: 33s; }
*/


/* In Code
@keyframes fade {
	0% { opacity: 0; }
	11.11% { opacity: 1; }
	33.33% { opacity: 1; }
	44.44% { opacity: 0; }
	100% { opacity: 0; }
}
.fadein { position:relative; width:100%;}
.fadein img { position:absolute; width:100%; left:0; right:0; opacity:0; animation-name: fade; animation-duration: 9s; animation-iteration-count: infinite; }
.fadein img:nth-child(1) { animation-delay: 0s; }
.fadein img:nth-child(2) { animation-delay: 3s; }
.fadein img:nth-child(3) { animation-delay: 6s; }
*/

/* Not Work

.imgContainer { position:relative; }

.imgContainer img {
position:absolute;
left:0;
-webkit-transition: opacity 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
-o-transition: opacity 2s ease-in-out;
transition: opacity 2s ease-in-out;
}

@-webkit-keyframes myImgAnimation {
0% {opacity:1; }
40% { opacity:1; }
50% { opacity:0; }
100% { opacity:0; }
}

@-moz-keyframes myImgAnimation {
0% { opacity:1; }
40% { opacity:1; }
50% { opacity:0; }
100% { opacity:0; }
}

@-o-keyframes myImgAnimation {
0% { opacity:1; }
40% { opacity:1; }
50% { opacity:0; }
100% { opacity:0; }
}

@keyframes myImgAnimation {
0% { opacity:1; }
40% { opacity:1; }
50% { opacity:0; }
100% { opacity:0; }
}

#imgÑontainer img.firstImg {
-webkit-animation-name: myImgAnimation;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 1s;
-webkit-animation-direction: alternate;
-moz-animation-name: myImgAnimation;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 1s;
-moz-animation-direction: alternate;
-o-animation-name: myImgAnimation;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 1s;
-o-animation-direction: alternate;
animation-name: myImgAnimation;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 1s;
animation-direction: alternate;
}

*/