.slideshow-container {
    position: relative;
    width:100%;
    margin: auto;
    border: 0px solid #ccc;
}
.slideshow-image-container {
    display: flex;
    align-items: flex-start; /* Align items to the top */
    justify-content: center; /* Keep centered horizontally */
    overflow: hidden; /* Hide anything outside the bounds */
	text-align:center;
}
.slideshow-image-container img {
	max-width:800px;
    max-height: 650px;
	border:0px solid red;
}
.slideshow-menu {
    text-align: center;
    padding: 10px;
}
.slideshow-nav-button {
    background-color: rgba(255, 255, 255, 0);
    color: black;
    border: 0px solid #000000;
    cursor: pointer;
    padding: 10px;
    margin: 0 1px;
    z-index: 10;
    width: 70px;
    height: 40px;
    border-radius: 0px;
    font-size: 14px;
	border:0px solid #000;
}
/* Number index */
#number {
	cursor: default;
}
.slideshow-text-container {
    text-align: center;
    padding: 10px;
}
#slideshow-image-title {
	letter-spacing: 1px;
	padding-bottom:10px;
	width:100%;
}
#slideshow-image-location {
	margin:auto;
	padding-bottom:10px;
	width:100%;
	font-size: smaller;
	letter-spacing: 1px;
}
#slideshow-image-map {
	margin:auto;
	padding-bottom:10px;
	width:100%;
	font-size: smaller;
	letter-spacing: 1px;
}
#slideshow-image-map img{
	width:25px;
}
#slideshow-image-date {
	margin:auto;
	padding-bottom:10px;
	width:100%;
	font-size: smaller;
	letter-spacing: 1px;
}
#slideshow-image-caption {
	max-width:460px;
	text-align:center;
	margin:auto;
	margin-top:10px;
	margin-bottom:0px;
	padding-left:15px;
	padding-right:15px;
	border-left: 0px solid #666666;
	font-size: smaller;
}
.fade-out {
    animation: fadeOut 2s;
} 
.fade-in {
    animation: fadeIn 2s;
}
@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 1; }
    to { opacity: 1; }
}

/* Extra small devices (phones, less than 600px) */
@media only screen and (max-width: 599px) {

	.slideshow-image-container img {
	    max-width:95%;
		max-height: 500px;
		border:0px solid green;
	}
	
	/* smartphone don't show bing map properly */
	#slideshow-image-map {
		display: none;
	}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) and (max-width: 767px) {
  /* Styles for portrait tablets and large phones */
  
.slideshow-image-container img {
    max-width:90%;
	max-height: 650px;
	border:0px solid blue;
}
  
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  /* Styles for landscape tablets */
  
.slideshow-image-container img {
    max-width:92%;
	max-height: 650px;
	border:0px solid red;
}
  
}