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

.slideshow_container {
	width: 100%;
	height: 0;
	padding-bottom: 15%;
	margin: 0;
	overflow: hidden;
	position: relative;
    background-image: url("../images/slideshow/maki-e_logo.png"), linear-gradient(to top, #fff0d8 14%, white 70%) ;
    background-repeat: no-repeat;
    background-position: 97% top, center;
    background-size: contain, 100%;
}

.placeholder {
	height: 100%;
	width: 100%;
	visibility: hidden;
}
.layer_1, .layer_2, .layer_3, .layer_4, .layer_5, .layer_6 {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-repeat: no-repeat;
        background-position: 6vw center;
	    background-size: 70%;
		z-index: 10;
	}
.layer_1 {
	background-image: url("../images/slideshow/Genkai.png");
	animation: slide1 30s infinite;
}
.layer_2 {
	background-image: url("../images/slideshow/Hyotan.png");
	animation: slide2 30s infinite;
}
.layer_3 {
	background-image: url("../images/slideshow/Kaijin.png");
	animation: slide3 30s infinite;
}
.layer_4 {
	background-image: url("../images/slideshow/Mikado.png");
	animation: slide4 30s infinite;
}

.layer_5 {
	background-image: url("../images/slideshow/Sho-Genkai.png");
	animation: slide5 30s infinite;
}

.layer_6 {
	background-image: url("../images/slideshow/Takumi.png");
	animation: slide6 30s infinite;
}

@keyframes slide1 {
	0% {opacity: 1;}
    14% {opacity: 1;}
    16% {opacity: 0;}
    98% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes slide2 {
    0% {opacity: 0;}
    14% {opacity: 0;}
    16% {opacity: 1;}
    30% {opacity: 1;}
    32% {opacity: 0;}
    100% {opacity: 0;}
}

@keyframes slide3 {
    0% {opacity: 0;}
    30% {opacity: 0;}
    32% {opacity: 1;}
    48% {opacity: 1;}
    50% {opacity: 0;}
    100% {opacity: 0;}
}

@keyframes slide4 {
    0% {opacity: 0;}
    48% {opacity: 0;}
    50% {opacity: 1;}
    65% {opacity: 1;}
    67% {opacity: 0;}
    100% {opacity: 0;}
}

@keyframes slide5 {
    0% {opacity: 0;}
    65% {opacity: 0;}
    67% {opacity: 1;}
    81% {opacity: 1;}
    83% {opacity: 0;}
    100% {opacity: 0;}
}

@keyframes slide6 {
    0% {opacity: 0;}
    81% {opacity: 0;}
    83% {opacity: 1;}
    98% {opacity: 1;}
    100% {opacity: 0;}
}