/*there is some problems with the LOCAL slideshow problamatic on large screens where it does not centre very well */
body {
	margin: 0;
	padding: 0;
	background-color: black;
} 
 

h1 { color: whitesmoke;; text-align: center;}
nav{text-align: center;padding-bottom: 1em;}
h2,p {color: whitesmoke;}
a:link {color: whitesmoke;}	  	               
a:hover {color: yellow;}
a:visited {color: white;}
picture{width: 100%;}
picture > * {max-width: 100%;display: block; margin: 0 auto}
#profile-picture{ float:left; margin-right: 2em; padding-bottom: 1em;}
#bio-bridge{ float:left; padding-bottom: 1em;}
@media (min-width: 30em) {#bio-bridge{float: right; margin-left: 1em; margin right: 1em; }
}
#arch-picture{ float: left; padding-top: 1em; padding-bottom: 1em;
padding-right: 3em; margin-right: 1em;}
@media (min-width: 30em) {#arch-picture
	{float: right; padding-left: 2em; padding-right: 0;}
}
@media (max-width: 40em) {#image-container {
	margin-left: 10%; margin-right: 10%;}
}

img{border: 4px inset whitesmoke; width:100%;}
video{max-width: 100%;display: block; 
	margin: 0 auto;}


#bio-wrapper{ margin-left: 3em; margin-right: 2em;}
@media (min-width: 40em) and (max-width: 55em) {
	#image-container {margin-left: 15%; margin-right: 15%;}
}
@media (min-width: 55em) and (max-width: 70em) {
	#image-container {margin-left: 20%; margin-right: 20%;}
}
@media (min-width: 70em) {
	#image-container {margin-left: 25%; margin-right: 25%;}
}
h3,h4,h5,h6{color: whitesmoke; text-align: center }
/*
.gallery-wrapper{
	display: flex;
	column-gap: auto;
}*/
.gallery {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}
.gallery-item {
	margin: 1em auto;
	padding: 0 1em;
	width: 150px;
}
.gallery-item img {
	width: 100%;
	height: auto;
}
#float-left{ float: left;}
#center{text-align: center}
#float-right{ float: right;}
#gallery-description{text-align: center;}
#exhibition-wrapper{ margin-left: 2em; margin-right: 2em; 
	text-align: center;}
#full-screen-image body, html{height: 100%}

footer{text-align: center; padding: 1em;}

/* Slider */
/* Slideshow container */
#slide-container {
 position: relative;
 max-width: 800px; /* responsiveness */

}
/* First element to be in block mode for responsiveness */
#slide-first-element {
 display: block; /* to get the dimensions set */
 
 width: 60%; 
 height: auto;
 margin: 0 auto;
}

/* Other element to be in absolute position. */
#slide-element-2,
#slide-element-3, 
#slide-element-4 {
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 bottom: 0;
 left: 20%;
 right: 20%;
}
/* Style images */
.slide-image {
 width: 60%; 
}

 
/* Animation settings for individual elements */
/* For more images the animations have to be adjusted */
#slide-first-element {
 animation: fade-1 15s infinite;
 -webkit-animation: fade-1 15s infinite;
}
#slide-element-2 {
 animation: fade-2 15s infinite;
 -webkit-animation: fade-2 15s infinite;
}
#slide-element-3 {
 animation: fade-3 15s infinite;
 -webkit-animation: fade-3 15s infinite;
}
#slide-element-4 {
 animation: fade-4 15s infinite;
 -webkit-animation: fade-4 15s infinite;
}
/* and more if there are more slides to show */

@keyframes fade-1 {
 0% { opacity: 1; }
 25% { opacity: 0; }
 50% { opacity: 0; }
 75% { opacity: 0; }
 100% { opacity: 1; }
}
@keyframes fade-2 {
 0% { opacity: 0; }
25% { opacity: 1; }
 50% { opacity: 0; }
 75% { opacity: 0; }
 100% { opacity: 0; }
}
@keyframes fade-3 {
 0% { opacity: 0; }
 25% { opacity: 0; }
 50% { opacity: 1; }
 75% { opacity: 0; } 
 100% { opacity: 0; }
}

@keyframes fade-4 {
 0% { opacity: 0; }
 25% { opacity: 0; }
 50% { opacity: 0; }
 75% { opacity: 1; }
 100% { opacity: 0; }
}