@charset "UTF-8";
/* CSS Document */
* {
  box-sizing: border-box;
}
html, body {
  height: 100%;  
  padding: 0;
  margin: 0;
  display: block;
}
body  {
	background-color: rgba(67,83,50,0.13);
	font-family : Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	max-width: max-content; 
	margin: auto;
	}
.nomax {
	background-color: white;
	max-width: none;
}
img {
  max-width: 100%;
  height: auto;
}
a {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
a.species  {
	font-size : 10pt;
	color : #6827FF;
	text-decoration : none;
}
.menu {
		background-color: #f1f1f1;
		height:90vh;
	    width:0;
		flex: 30%;
		}
.mosaic {
  margin-left: auto;
  margin-right: auto;
  border-spacing: 7;   /* optional: removes the default gaps between cells */
}
.item {
  		flex: 70%;
		} 
.spaceAfter {
	padding-top: 0px;
	padding-bottom: 8px;
}
.menutext {
	text-align: center;
	font-size: 14pt;
	width: 20%;
	color: black;
}
.embed-container {
     position: relative;
     padding-bottom: 10%;
     height: 0;
     overflow: hidden;
     max-width: 100%;
     }

.embed-container iframe, .embed-container object, .embed-container embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      }
.page {
  	display:flex;
  	flex-direction:column;
  /*  height:100%;=100vh in some cases? */
	padding: 0px;
	max-width: 1400px;
	background-color: white;
	}
#contents h2 {
	text-align: center;
	margin-right: auto;
	margin-left: auto;
}
#contents {
	text-align: left;
}
#intro {
	text-align: left;
}
table {
			padding: 10px;
		}
.wrapper {
	background-color: white;
	padding:10px;
	width: 100%;
	display: flex;
	flex: 80%;
		}
.wrapper_center {
	display: flex;
	flex: 1;                      /* add this line */
	justify-content: center;
	align-items: center;
	text-align: center;
}
.wrapper_left {
	text-align: left;
}
.wrapper_block {
	display: block; 
	justify-content: center;
	margin-left: auto;
  margin-right: auto;
}
.menuframe {
	display: flex;
	flex: 16%;
	}
.flex-container {
  display: flex;
  background-color: DodgerBlue;
  justify-content: space-around;
}

.flex-container > div {
  background-color: white;
  padding: 10px;
}
.some-page-wrapper {
  margin: 0px;
  background-color: white;
}
.menucontainer > * {
  color: #29299E;
  background-color: rgba(1, 1, 1, 0.05);
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  margin: 3px;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  text-align: center;
}
.centered {
	align-self: center;
	text-align: center;
}
.menucontainer > div:hover {
  background-color: rgba(1, 1, 1, 0.15);
}
.menucontainer{
	display:flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: flex-end;
}
.menucontainer div {
	flex-grow: 1;
}
.menucontainer a {
	color: #29299E;
	text-decoration: none;
	font-size: 90%;
	}
.menucontainer a:hover {
	color: #29299E;
	text-decoration: underline;
	}
.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
	padding: 5px;
}
.column {
 /* display: flex; */
 /* flex-direction: column; */
  flex-basis: 50%;
  flex: 1; 
 /* padding: 5px;*/
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2;
}
@media (max-width: 900px) {
	.column {
		column-count: 1;
	}
}