@media screen and (max-width: 680px) {
  table {width:100%;}
  thead {display: none;}
  tr:nth-of-type(2n) {background-color: inherit;}
  tr td:first-child {background: #f0f0f0; font-weight:bold;font-size:1.3em;}
  tbody td {display: block;  text-align:center;}
  tbody td:before {
      content: attr(data-th);
      display: block;
      text-align:center;
  }
}

.pagination {padding:0;}
#search-term {margin-top:8px;}
.pagination li {cursor:pointer;}
#taxon-rank {
padding: 0px 0px;
width: 105px;
}
#taxon-status {
padding: 0px 0px;
width: 90px;
}
#compare-to {
padding: 0px 0px;
width: 80px;
}
#page-size {
padding: 0px 0px;
width: 80px;
}
#select-label {
color: light blue ;
font-size: 10px;
margin-left: 10px;
padding-top: 0px;
}
.page-list {
line-height: 12px;
}
#download-csv, #download-json, #flag-issue {
padding: 2px;
margin: 0px;
}
#download-overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 1100;
cursor: pointer;
}
.centered-text {
position: absolute;
top: 200px;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1200;
}
.download-progress {
display: none;
position: relative;
background-color: green;
color: white;
font-size: 32px;
z-index: 1200;
}
#information-overlay {
position: fixed;
display: none;
flex-flow: column;
left: 25%; /* simple way to align variable box in the middle */
width: 50%; /* simple way to align variable box in the middle */
max-height: 50%;
overflow: auto;
top: 200px;
border: solid black 1px;
border-radius: 25px;
background: lightgrey;
z-index: 1100;
cursor: pointer;
padding: 20px;
}
#information-button {
max-width: 75px;
align-self:flex-end;
}
.fa-info-circle { /* white border around info icons for visibility */
border: solid white 3px;
border-radius: 50%;
background-color: black;
}
.fa-code-branch {
margin-left: 5px;
}

.icon-image {
min-width: 30px;
cursor: pointer;
}

/* The Modal (background) */
.modal-div {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 10000; /* Sit on top */
padding-top: 10px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
cursor: pointer;
}

/* Modal Content (Image) */
.modal-content {
padding: 0px;
margin: auto;
display: block;
width: 50%;
max-width: 700px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#capModal {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
font-size: 40px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #capMocal {
animation-name: zoom;
animation-duration: 0.6s;
}

@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}

/* The Close Button */
.modal-close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}

.modal-close:hover,
.modal-close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) {
.modal-content {
width: 100%;
}
} 

/* lines 28 - 52 in style.css */
/*** all displays ***/
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {
  .page-template-page-species-explorer-2022 .hero #searchform #searchsubmit { background-image: url(/wp-content/themes/val/images/magnify-small@2x.png); background-size: 15px 14px; }
}
/*** medium displays and up -- 680px and more ***/
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 680px), only screen and (min-resolution: 192dpi) and (min-width: 680px) {
  .page-template-page-species-explorer-2022 .hero #searchform:after { background-image: url(/wp-content/themes/val/images/hummingbird@2x.png); background-size: 113px 122px; }
  .page-template-page-species-explorer-2022 .hero #searchform #searchsubmit { background-image: url(/wp-content/themes/val/images/magnify-medium@2x.png); background-size: 19px 19px; }
  #crumbs a { background-image: url(/wp-content/themes/val/images/breadcrumbs-divider@2x.png); background-size: 14px 52px; }
}
/*** large displays -- 950px and more ***/
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 950px), only screen and (min-resolution: 192dpi) and (min-width: 950px) {
  .page-template-page-species-explorer-2022 .hero #searchform #searchsubmit { background-image: url(/wp-content/themes/val/images/magnify-large@2x.png); background-size: 21px 21px; }
}

/* lines 939 - 1014 in style.css */
.page-template-page-species-explorer-2022 .hero { position: relative; padding: 120px 30px 30px 30px; text-align: center; color: #fff; background: url(/wp-content/themes/val/images/vermont-panorama-small.jpg) no-repeat center; background-size: cover; z-index: 1000; }

@media screen and (min-width: 680px) { .page-template-page-species-explorer-2022 .hero { padding: 30px 30px 30px 30px; background-image: url(/wp-content/themes/val/images/vermont-panorama-medium.jpg); } }

@media screen and (min-width: 950px) { .page-template-page-species-explorer-2022 .hero { padding: 90px 30px 30px 30px; background-image: url(/wp-content/themes/val/images/vermont-panorama-large.jpg); } }

.page-template-page-species-explorer-2022 .hero .content { position:relative; z-index: 1000; }

.page-template-page-species-explorer-2022 .hero h1 { margin: 0 0 15px 0; font-family: "Sorts Mill Goudy", serif; font-size: 2.5em; font-weight: 300; line-height: 1.05em; }

@media screen and (max-width: 290px) { .page-template-page-species-explorer-2022 .hero h1 { font-size: 1.3em; } }

@media screen and (min-width: 680px) { .page-template-page-species-explorer-2022 .hero h1 { margin: 0 0 30px 0; font-size: 3em; line-height: .6em; } }

@media screen and (min-width: 950px) { .page-template-page-species-explorer-2022 .hero h1 { font-size: 3.8em; } }

.page-template-page-species-explorer-2022 .hero h2 { margin: 0 0 30px 0; text-transform: none; font-weight: 400; font-size: 1.3em; }

@media screen and (max-width: 290px) { .page-template-page-species-explorer-2022 .hero h2 { vertical-align:bottom; font-size: .9em; } }

@media screen and (min-width: 680px) { .page-template-page-species-explorer-2022 .hero h2 { vertical-align:bottom; margin: 0 0 25px 0; font-weight: 300; } }

@media screen and (min-width: 950px) { .page-template-page-species-explorer-2022 .hero h2 { vertical-align:bottom; margin: 0 0 30px 0; font-size: 1.5em; } }

.page-template-page-species-explorer-2022 .hero .hero-stats-wrap { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; max-width: 320px; margin: 0 auto 10px auto; }

@media screen and (min-width: 680px) { .page-template-page-species-explorer-2022 .hero .hero-stats-wrap { max-width: 500px; grid-gap: 40px; } }

.page-template-page-species-explorer-2022 .hero .hero-stats-wrap a.hero-stats-item { margin-bottom: 20px; line-height: 1.8em; text-decoration: none; color: #fff; }

@media screen and (min-width: 680px) { .page-template-page-species-explorer-2022 .hero .hero-stats-wrap a.hero-stats-item { display: grid; grid-template-columns: 1fr 5fr; justify-items: start; grid-gap: 15px; text-align: left; } .page-template-page-species-explorer-2022 .hero .hero-stats-wrap a.hero-stats-item:first-of-type { width: 275px; } .page-template-page-species-explorer-2022 .hero .hero-stats-wrap a.hero-stats-item:last-of-type { width: 200px; } }

.page-template-page-species-explorer-2022 .hero .hero-stats-wrap a.hero-stats-item:hover .stats { background: rgba(255, 255, 255, 0.2); }

.page-template-page-species-explorer-2022 .hero .hero-stats-wrap a.hero-stats-item i.stats-icon { display: block; margin: 0 0 5px 0; font-family: "Font Awesome 5 Pro"; font-size: 2.75em; }

@media screen and (min-width: 680px) { .page-template-page-species-explorer-2022 .hero .hero-stats-wrap a.hero-stats-item i.stats-icon { margin: 5px 0 0 0; font-size: 3.5em; } }

.page-template-page-species-explorer-2022 .hero .hero-stats-wrap a.hero-stats-item .stats { display: inline-block; padding: 5px 10px; font-weight: 500; border-radius: 5px; transition: all 0.1s ease; }

.page-template-page-species-explorer-2022 .hero .hero-stats-wrap a.hero-stats-item span { display: block; font-size: 1.3em; }

.page-template-page-species-explorer-2022 .hero .hero-stats-wrap a.hero-stats-item span.stats-count { font-size: 1.8em; font-weight: 700; }

@media screen and (min-width: 680px) { .page-template-page-species-explorer-2022 .hero .hero-stats-wrap a.hero-stats-item span.stats-count { font-weight: 600; } }

.page-template-page-species-explorer-2022 .hero .hero-stats-wrap a.hero-stats-item span.stats-count i { opacity: 0.7; animation: rotation 1s infinite ease; }

@keyframes rotation { 0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } }

.page-template-page-species-explorer-2022 .hero #searchform { position: relative; width: 100%; max-width: 400px; box-sizing: border-box; margin: 0 auto; border-radius: 100px; border: 5px solid #fff; }

.page-template-page-species-explorer-2022 .hero #searchform .search-field { width: 100%; height: 40px; box-sizing: border-box; padding: 15px 80px 13px 30px; font-family: "Sorts Mill Goudy", serif; font-size: 1.3em; color: #176f75 !important; border-radius: 25px; }

@media screen and (min-width: 380px) { .page-template-page-species-explorer-2022 .hero #searchform .search-field { font-size: 1.3em !important; } }

.page-template-page-species-explorer-2022 .hero #searchform .searchsubmit-wrap { display: flex; position: absolute; top: 0; right: 0; width: 40px; height: 40px; justify-content: center; align-items: center; background: #176f75; border-radius: 100px; border: 0; z-index: 1000; transition: all 0.1s ease; }

.page-template-page-species-explorer-2022 .hero #searchform .searchsubmit-wrap:hover { background: #1d8990; }

.page-template-page-species-explorer-2022 .hero #searchform .searchsubmit-wrap button { position: absolute; width: 40px; height: 40px; color: #fff; background: none; border-radius: 100px; cursor: pointer; }

.page-template-page-species-explorer-2022 .hero #searchform .searchsubmit-wrap button i { font-size: 1.8em; font-family: "Font Awesome 5 Pro"; }

@media screen and (min-width: 950px) { .page-template-page-species-explorer-2022 .hero #searchform:after { content: ""; display: block; position: absolute; right: -180px; top: -30px; width: 150px; height: 163px; background: url(/wp-content/themes/val/images/hummingbird.png); background-size: 150px 163px; } }

@media screen and (min-width: 680px) { .page-template-page-species-explorer-2022 .hero #searchform:after { content: ""; display: block; position: absolute; right: -90px; top: -15px; width: 75px; height: 81px; background: url(/wp-content/themes/val/images/hummingbird.png); background-size: 75px 81px; } }

.page-template-page-species-explorer-2022 .hero .button-wrap { margin: 30px 0; font-size: 1.2em; }

.page-template-page-species-explorer-2022 .hero .button-wrap span { padding-right: 10px; font-size: 1.1em; font-weight: 600; }

.page-template-page-species-explorer-2022 .hero span.overlay { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(35, 92, 164, 0.5); z-index: 0; }

@media screen and (min-width: 680px) { .page-template-page-species-explorer-2022 .hero span.overlay { background: rgba(35, 92, 164, 0.35); } }

@media screen and (min-width: 950px) { .page-template-page-species-explorer-2022 .hero span.overlay { background: rgba(35, 92, 164, 0.2); } }