/* flex config for childs */
#container {
    display: flex;
/*    flex-direction: row;*/
    justify-content: space-evenly;
    flex-wrap: wrap;
    text-align: center;
}

/* outline container: 
#container {
    border: 1px solid rgb(250, 1, 1);
}*/
/* container borders white */
#container div {
    max-width: ;
    max-height: 70vh;
    background: white;
    border-color: white;
    border-width: 2vh 2vh;
    border-style: solid;
}
/* fit image to container */
img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}
#slidecontainer {
    border-color: white;
    border-width: 2vh 2vh;
    border-style: solid;
    text-align: center;
    cursor: crosshair;
}
#slidecontainer img {
    max-height: 75vh;
}

/* display config for LARGE screens */
@media screen and (min-width: 45em) {
    #container div{
        height: 40vh;
    }

    }
}

/* base styles */
/* top black bar next */
.main-menu {
	padding: 0em;
	color: ;
	background: purple;
}

.sidebar {
	padding: 0em .5em;
/*
	background: hsl(0, 0%, 100%);
    	flex 0 0 8em;
    	min-width: 10em;
*/
}

/* sidebar menu styles */
.example-menu ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.example-menu a {
	display: block;
/*    position: fixed;*/
	padding: 0.1em 0em;
	color: inherit;
	text-decoration: none;
	transition: all 0.8s ease;;
}

.example-menu a:hover,
.example-menu a:focus {
	padding: .4em 1em;
	background: hsl(210, 20%, 70%);
	color: white;
}

/* typography */
body {
	color: #404040;
	font-family: 'HelveticaNeue-Light', Arial, sans-serif;
    	font-size: .9em;
	line-height: 1.5;
}

/*style header name text to fade*/
h4:hover,
h4:focus {
    padding: 0em 0em;
    color: hsl(210, 20%, 70%);
    text-decoration: overline;
    transition: all 2s ease;
} 

.footer-area {
    padding: 0.3em 0.3em;
    bottom: 0;
    right: 0;
    position: ;
/*	background: hsl(0, 0%, 100%);*/
    	font-size: .em;
    	color: #404040;
}

/* remove pointer right click */
img {
   	pointer-events: none;
} 

/* remove link style */
a {
    	color: inherit;
    	text-decoration: none;
} 

/* make highlighted selection invisible */
input::selection {
    	background-color:transparent;
    	color: #000;
}

.masthead {
    	position: fixed;
    	top: -1vh;
    	right: 1vw;
    	text-align: right;	
}

.footertitle {
  	width:100%;
  	display: flex;
  	justify-content: center;
}


.button1 {
  left: 0;
  position: fixed;
  bottom: 0;
  background-color: ;
  border: 1px solid black;
  color: ;
  padding: .7vh .7vh;
  text-align: ;
  font-size: ;
  margin: 4px;
  opacity: .6;
  transition: 0.3s;
  display: ;
  text-decoration: ;
  cursor: crosshair;
  font-style: ;
}

button1:hover,
button2:hover {
    opacity: 1;
}

.button2 {
  right: 0;
  position: fixed;
  bottom: 0;
  background-color: ;
  border: 1px solid black;
  padding: .7vh .7vh;
  margin: 4px;
  opacity: 0.6;
  transition: 0.3s;
  cursor: crosshair;
  font-style: ;
}