:is(.speciesList, .speciesInfo) .content {text-align: left;}
.species, .speciesDetail, .species-bottom {display: flex; flex-wrap: wrap;}



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

.species {
	> div {flex-grow: 1; width: 33%; margin: var(--gapSmall) auto; min-width: 400px; padding: 0 22px; border-right: 2px solid var(--lighterGrey);}
	> div:last-child {border-right: none}
	h3 {font-size: var(--fontSizeXLarge); font-weight: bold; margin-bottom: var(--gapSmall)}
}


.speciesListing {
	div {padding: 30px 25px 3px 17px; line-height: 20px; font-size: 16px;}
	div:first-child {padding-top: 20px;}
	div h4 {font-size: 16px; display: inline-block; padding-right: 5px;}
	a {padding: 6px 5px 6px 0; display: inline-block;}
	a.spp {color: black; display: block !important; margin: 8px 0 0 0 !important; cursor: text;}
	a.spp:hover {text-decoration: none; cursor: text;}
}


@media screen and (max-width: 1024px) {
.species {padding: 10px;}
.species > div {width: 50%; padding: 0px 0px; min-width: 280px; border-right: none;}
.speciesListing a {padding: 5px 5px 5px 15px;}
}


@media screen and (max-width: 768px) {
.species {padding: 10px 0;}
.species > div {width: 100%; padding: 0;}
}




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

.speciesDetail {padding: 10px 22px;
	> div {flex-grow: 1; width: 33%; margin: 0 0 24px 0; min-width: 400px; user-select: none}
	b {display: block; font-weight: 700; color: #777; margin: 0 0 4px 0}
	hr {display: block; clear: both; margin: var(--gap) auto var(--gap) auto;}
	i {font-size: var(--fontSizeSmall); color: var(--lightGrey)}
	i svg {height: 14px; width: 12px; fill: var(--lightGrey); display: inline-block; margin: -3px 4px 0 0}
}

.species-bottom {margin: 30px 0; padding-top: 30px; border-top: 1px solid rgba(0,0,0,0.2);
	> div {flex-grow: 1; width: 50%; margin: 22px 0; min-width: 400px;}
	b {display: block; font-weight: 700;font-size: 20px; margin: 0 0 10px 0}
	a {margin: 0px 10px 0px 0px; padding: 5px; line-height: 28px; white-space: nowrap;}
}

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

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


@media screen and (max-width: 1024px) {
.speciesDetail, .species-bottom {padding: 10px;}
.speciesDetail > 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;}
}

@media screen and (max-width: 768px) {
.speciesDetail > div, .species-bottom > div {width: 100%;}
}