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

.slide_container {
	width: 100%;
	aspect-ratio: 1.78 / 1;
	margin: 0 auto 3vh;
	overflow: hidden;
	position: relative;
}

.placeholder {
	height: 100%;
	width: 100%;
	visibility: visible;
}
.layer_1, .layer_2, .layer_3, .layer_4, .layer_5 {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-repeat: no-repeat;
		background-size: contain;
	}

.layer_1 {
	background-image: url("../images/slideshow/dining_room.jpg");
	animation: slide1 25s infinite;
}
.layer_2 {
	background-image: url("../images/slideshow/Peking-Duck.jpg");
	animation: slide2 25s infinite;
}
.layer_3 {
	background-image: url("../images/slideshow/seafood.jpg");
	animation: slide3 25s infinite;
}
.layer_4 {
	background-image: url("../images/slideshow/dim_sum.jpg");
	animation: slide4 25s infinite;
}
.layer_5 {
	background-image: url("../images/slideshow/party_tray.jpg");
	animation: slide5 25s infinite;
}



@keyframes slide1 {
	0% {opacity: 1;}
	15% {opacity: 1;}
	20% {opacity: 0;}
	95% {opacity: 0;}
	100% {opacity: 1;}
}

@keyframes slide2 {
	0% {opacity: 0;}
	15% {opacity: 0;}
	20% {opacity: 1;}
	35% {opacity: 1;}
	40% {opacity: 0;}
	100% {opacity: 0;}
}

@keyframes slide3 {
	0% {opacity: 0;}
	35% {opacity: 0;}
	40% {opacity: 1;}
	55% {opacity: 1;}
	60% {opacity: 0;}
	100% {opacity: 0;}
}

@keyframes slide4 {
	0% {opacity: 0;}
	55% {opacity: 0;}
	60% {opacity: 1;}
	75% {opacity: 1}
	80% {opacity: 0}
	100% {opacity: 0}
}

@keyframes slide5 {
	0% {opacity: 0;}
	75% {opacity: 0;}
	80% {opacity: 1;}
	95% {opacity: 1}
	100% {opacity: 0}
}