@charset "utf-8";
/* CSS Document */

/*Colors*/
/*#E04836, #F39D41, #8D5924, #5696BC, #2F5168, #FFFFFF*/
.color1 {background: #E04836; color: black;}
.color2 {background: #F39D41; color: black;}
.color3 {background: #8D5924; color: white;}
.color4 {background: #5696BC; color: black;}
.color5 {background: #2F5168; color: white;}
.color6 {background: #FFFFFF; color: black;}

html {background: black; color: white;}
h2 {text-align: center; margin-bottom: 5px;}

header{
	background: SteelBlue; 
	color: black; 
	overflow: auto; 
	font-family: verdana; 
	text-align: center;}
	
header h1{
	display: flex;
	align-items: center;
	justify-content: center;}
	
header .logo {width: 100px;}

#container{
	background: #2F5168;
	margin: 0 auto;
	max-width: 1500px;
	overflow: hidden;
}

.bar {display: block; width:100%; overflow:auto; min-height: 2px;}
.bar a, #nav a, .mobile a {text-decoration: none; color: black; padding: 5px; }
.bar a {
	display: inline-block;
	margin: 0; 
	width: 20%;
	text-align: center; 
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box; /* Firefox, other Gecko */
	box-sizing: border-box; /* Opera/IE 8+ */
	float: left;}

.bar a img {width: 20px; height: 20px; display: inline; margin: -3px 5px;}

#nav, .mobile {color: black; margin: 0; width: 20%; display: inline-block; float: left; padding:0;}
#nav a, .mobile a {display: block; background: #F39D41; width: 100%; border: 1px solid black; border-left: 0;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box; /* Firefox, other Gecko */
	box-sizing: border-box; /* Opera/IE 8+ */
}

.bar a:hover, .bar a:active, #nav a:hover, #nav a:active, .mobile a:hover, .mobile a:active {box-shadow:inset 0 0 0 99999px rgba(255,255,255,0.3);}

.bar-mobile {
  display:none; /* Hide from browsers that don't support media queries */
  cursor:pointer;
  float: right;
  position:absolute;
  top:0;
  right:0;
  background:#F39D41 url(../images/swallow.png);
  background-size: 100% 100%;
  height:50px;
  width:50px;
  border-radius:5px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
}

.bar-list .mobile {display: none;}



.searchbox{
  overflow: hidden;
  vertical-align: middle;
  white-space: nowrap;
  border: 1px solid black;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.searchbox input#search{
  width: 80%;
  height: 40px;
  background: #2b303b;
  border: none;
  float: left;
  color: #fff;
  padding-left: 5px;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box; /* Firefox, other Gecko */
  box-sizing: border-box; /* Opera/IE 8+ */
}
.searchbox input#search::-webkit-input-placeholder {
   color: #65737e;}
.searchbox input#search:-moz-placeholder { /* Firefox 18- */
   color: #65737e;}
.searchbox input#search::-moz-placeholder {  /* Firefox 19+ */
   color: #65737e;}
.searchbox input#search:-ms-input-placeholder {  
   color: #65737e;}
.searchbox button.icon{
  height: 40px;
  width: 20%;
  font-size: 1em;
}

.searchbox:hover button.icon:hover{
    background: white;
  }

.content{
	display: inline-block;
	min-height: 400px;
	overflow: auto;
	float: right;
	width: 80%;
}

.content h1 {text-align: center;}
.content input {background:#2F5168; color:white;}

/*.content h1, .content p {padding: 5px;}*/
img {width: 100%; display: block;}

.pleasedontfloat { 
	/*border-top: 2px dotted black;*/
    clear:both;
}
.thumb, .tomthumb {width: 200px; float: left; display: inline-block; margin: 5px;}
/*img.swap {width: 600px; position: relative; left: 0; top: 0;}*/
.tomthumb {border: 2px solid #5696BC; border-radius: 15%; width: 50px;}
/*.flex {display: flex; align-items: center; justify-content: center;}*/
.section {border-top: 2px dotted black;}
.section span {color: black; display:block; margin: 0 5px;}

.center {
	margin:15px auto; 
	width: 75%; 
	min-height: 675px; 
	padding: 10px;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box; /* Firefox, other Gecko */
	box-sizing: border-box; /* Opera/IE 8+ */
}
/*.under {position: relative; width: 600px; height: 400px; top: 0; left: 40px;}*/
/*img.swap {position: relative; width: 600px; top: 100px; z-index: 100;}*/

/*.swap {float:left; width: 20%;}*/
/*.rightText {float: right; width: 80%;}*/
/*.under {top: 7vmin;left: -7vmin; background-color: #eee; width:40vmin; height: 30vmin; z-index: 2; position: relative; margin-top: 0; display: inline-block; visibility: hidden;}*/
/*.swap {top: -20vmin;left: -10vmin; width:40vmin; z-index: 100; position: relative; margin-top: 0;}*/
/*.rightText{top: -50vmin;left: 40vmin; width:30vw; z-index: 100; position: relative; margin-top: 0; visibility: hidden;}*/

/*.swap {top: 5vmin;left: -8vmin; background-color: #eee; width:40vmin; z-index: 2; position: relative; margin-top: 0;*/
/*#rightText {margin-left: 40vmin; margin-top: -20vmin;}*/

#swap {
	box-shadow: 15px -15px #eee;
	float: left;
	width: 40%;
	margin: 30px 5% 15px -8%;
}
#aboutText, #aboutForm {
	float: left;
	width: 60%;
}

#species {min-width: 200px;}

.dropzone {padding: 0;}
.dz-message {padding: 40px 10px;}
#submit-all {padding: 3px;}
button:disabled {color: gray;}
textarea {width: 100%;}
#warning {padding: 5px; border-radius: 5px;}

/* Gallery List */
div.gallery {
  margin: 0 auto;
  width: 75%;
}
 
div.gallery ul {
  list-style-type: none;
  width: 100%;
  padding: 0;
}

div.gallery a {text-decoration: none; color: black;}
 
div.gallery h3 {
  font: bold 20px/1.5 Helvetica, Verdana, sans-serif;
}
 
div.gallery li img {
  float: left;
  margin: 0 15px 0 0;
  width: 200px;
}
 
div.gallery li p {
  font: 200 12px/1.5 Georgia, Times New Roman, serif;
}
 
div.gallery li {
  padding: 10px;
  overflow: auto;
}
 
div.gallery li:hover {
  background: #eee;
  cursor: pointer;
}

.success, .accountMessage {background: #659D32; padding: 5px; border-radius: 15px;}
.accountMessage {margin: 0 2%; text-align: center;}
.fail {background: #E04836;}

#login form {width: 250px; margin: 0 auto; text-align: center;}

#login form input {width: 215px; margin-top: 15px; padding: 10px;}
#login form input[type=submit] {margin-top: 30px; margin-bottom: 10px;}
.column {
	width: 45%; 
	float: left;
	margin: 2%;
	background:#eee;
	padding: 0 1% 1% 1%;
	height: 316px;
}
.column.second {
	margin-left: 0;
}

#mobileNav {display:none;}

@media (max-width: 850px) {
  #aboutForm {
  	margin: 0 5%;
  	width: 90%;
  }
}

@media (max-width: 800px) {
	.center, div.gallery {
		width:90%;
	}
}

@media (max-width: 700px) {
	#nav, .content, .bar, .mobile {width: 100%;}
	button[type=submit] {width: 100%; margin-bottom: 1em;}
	#warning {display: block; width: 100%;}
	#navlinks, header h1 img, .bar-list, #hideMe {display: none;}
	header h1 {font-size: 1em; display: block; text-align: left; height: 40px; margin-bottom: 0;}	
	.bar-list .mobile, #mobileNav {display: block;}
	.bar a {width: 100%; float: none;}
	.bar-mobile, .bar-active {display: block;}
	.bar-mobile-open {
		border-radius:5px 5px 0 0;
		-webkit-border-radius:5px 5px 0 0;
		-moz-border-radius:5px 5px 0 0;
	}
	.dropzone.hide {display: none;}
	div.gallery li h3, div.gallery li p {margin: 5px;}
	div.gallery li h3 {font-size: 1em;}
	div.gallery li img {max-width: 40%;}
}

@media (max-width: 650px) {
	.column {
		width:95%;
		float: none;
		margin: 0 auto;
		padding: 1%;
	}
	.column.second {
		margin: 10px auto;
	}
}


@media (max-width: 550px) {
	#swap, #aboutText {
  		width: 95%;
	}
	#swap {
		box-shadow: 0 0 #eee;
		float: none;
		width: 60%;
		margin: 0 auto;
  }
}