/* drop down menu */

.switch {
  display: none;
}

.menu {
  background-color: beige;
  color: blue;
  width: 400px;
}

.dropdown a:hover {background-color: #ddd;}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  position: absolute;
  background-color: #cccccc;
  left: 10px;
  top: 100px;
  width: 400px;
  height: 300px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

// position div with menu image, top does not seem to do anything
.menupos {
  // position: fixed;
  top: 10px;
  left: 10px;
}

.slider {
	overflow-y: hidden;
	max-height: 500px; /* approximate max height */
	max-width: 500px; /* approximate max width */

	transition-property: max-height,max-width ;
	transition-duration: .2s;
	transition-timing-function: linear ;
}

.slider.closed {
	max-height: 0;
	max-width: 0;
}