/* 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;
}
#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: .75em;
	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;
}
.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: ;
}