.species, .species-info, .species-bottom {padding: 10px 25px; margin: 15px auto; display: flex; flex-wrap: wrap;}

/* --------- SPECIES LIST ---------- */

.species {}
.species > div {flex-grow: 1; width: 33%; margin: 0 0 22px 0; min-width: 400px; padding: 0px 20px; border-right: 1px solid #ddd;}
.species > div:last-child {border-right: none;}
.species h3 {font-size: 22px; border-bottom: 1px solid #ddd; padding: 10px 5px; margin-bottom: 12px;}


.species-list div {padding: 30px 25px 3px 17px; line-height: 20px; font-size: 16px;}
.species-list div:first-child {padding-top: 20px;}
.species-list div h4 {font-size: 16px; display: inline-block; padding-right: 5px;}
.species-list a {padding: 4px 5px 4px 15px; display: inline-block; font-size: 16px; line-height: 24px;}

a.spp {color: black; display: block !important; margin: 10px 0px 1px -8px !important; cursor: text;}
a.spp:hover {text-decoration: none; cursor: text;}
.species-list .spp {display: block !important;}


@media screen and (max-width: 1023px) {
.species {padding: 10px;}
.species > div {width: 50%; padding: 0px 0px; min-width: 280px; border-right: none;}
.species-list a {padding: 5px 5px 5px 15px; font-size: 18px; line-height: 24px;}
a.spp {font-size: 19px;}
}



/* --------- SPECIES INFO ---------- */

.species-info > div {flex-grow: 1; width: 33%; margin: 0 0 22px 0; min-width: 400px;}
.species-info div, .species-info strong, .species-info a {font-size: 18px;}
.species-info b {display: block; font-weight: 700; color: #777; font-size: 14px; margin: 0 0 2px 0}
.species-info hr {display: block; clear: both; width: 95%; margin: 0 auto 22px auto;}


.species-bottom {margin: 30px 0; padding-top: 30px; border-top: 1px solid rgba(0,0,0,0.2);}

.species-bottom > div {flex-grow: 1; width: 50%; margin: 22px 0; min-width: 400px;}

.species-bottom  b {display: block; font-weight: 700;font-size: 20px; margin: 0 0 10px 0}

.species-bottom a {font-size: 16px; margin: 0px 10px 0px 0px; padding: 5px; line-height: 28px; white-space: nowrap;}


.spec-class li {list-style: none;; border-bottom: 1px solid #ddd; padding: 0 0 18px 10px; font-size: 16px; margin: 0 0 15px 0; line-height: 150%;}
.spec-class li img {float: right; display: block; max-height: 70px; max-width: 100px; margin: 0 0 0 5px;}
.spec-class li h4 {display: block; font-weight: 500; font-size: 18px; margin: 0 0 1px 0; line-height: 115%;}
.spec-class li h4 a {padding: 3px 0px;}

.spec-class.hidden {display: none!important;}


@media screen and (max-width: 1023px) {
.species-info, .species-bottom {padding: 10px;}
.species-info > div, .species-bottom > div {width: 50%; min-width: 280px;}
.spec-class li h4 span {display: block; margin: 0 0 2px 0; line-height: 115%;}
.spec-class li img {float: none; display: block; max-height: 50px; max-width: 100px; margin: 0 0 5px 0;}
}