.speciesnav {
 position: relative;
 margin-top: 0px;
 padding-left: 20px;
 padding-right: 20px;
 width: 100%;
 height: 40px;
 background-color: var(--page_nav);
 float: left;
 display: flex;
 flex-wrap: nowrap;
 transition-duration: 0.3s;
}
.speciesnav > div {
 height: 40px;
 padding-top: 2px;
 font-size: 14px;
 color: var(--font_white);
 display: flex;
 align-items: center;
}
.spacienavlink > span {
 line-height: 12px;
}
.speciestop {
 justify-content: flex-start;
 width: 20%;
}
.speciesmove {
 justify-content: flex-end;
 width: 80%;
}
.spacienavlink:link,
.spacienavlink:visited {
 color: var(--font_white);
 cursor: pointer;
 transition-duration: 0.3s;
}
.spacienavlink:hover,
.spacienavlink:active {
 color: var(--font_white);
 opacity: 0.8;
 cursor: pointer;
 transition-duration: 0.3s;
}
@media screen and (max-width: 700px) {
 .spacienavlink > span {
  display: none;
 }
}

.speciestitle {
 font-family: "Titillium Web", sans-serif;
 position: relative;
 float: left;
 display: block;
 width: calc(100% - 20px);
 margin-left: 10px;
 height: 600px;
 transition-duration: 0.3s;
}
.speciesname {
 float: left;
 width: 40%;
 height: 75%;
 display: flex;
 flex-direction: column;
 align-content: flex-end;
 align-items: flex-end;
 transition-duration: 0.3s;
}
.speciesblank {
 width: 100%;
 height: 45%;
 background-color: rgba(0, 0, 0, 0.3);
}
.speciesnbox {
 float: left;
 width: 100%;
 height: 40%;
 display: flex;
 justify-content: center;
 align-items: center;
 flex-direction: column;
 padding-left: 10px;
 padding-right: 10px;
 background-color: rgba(0, 0, 0, 0.5);
 transition-duration: 0.3s;
}
.headingname {
 font-size: 36px;
 color: var(--font_white);
 font-weight: bold;
}
.headingsname {
 font-size: 28px;
 color: var(--font_white);
 font-style: oblique;
 transition-duration: 0.3s;
}
.speciesinfo {
 float: left;
 width: 100%;
 height: 15%;
 display: flex;
 justify-content: space-evenly;
 align-items: center;
 flex-direction: row;
 padding-left: 10px;
 padding-right: 10px;
 transition-duration: 0.3s;
}
.speciesicon {
 height: 40px;
 width: 40px;
 cursor: pointer;
 transition-duration: 0.3s;
}
.speciesicon:hover {
 height: 50px;
 width: 50px;
 cursor: pointer;
 opacity: 0.8;
 transition-duration: 0.3s;
}
.speciesimage {
 float: right;
 width: 60%;
 height: 100%;
 display: flex;
 align-items: center;
 overflow: hidden;
 transition-duration: 0.3s;
}
.speciesimage > img {
 width: 100%;
}
.speciespropts {
 float: left;
 width: 40%;
 height: 25%;
 display: block;
 padding: 10px;
 font-size: 16px;
 line-height: 1;
 color: var(--font_white);
 background-color: rgba(0, 0, 0, 0.3);
 transition-duration: 0.3s;
}
#birdFea0 > a,
#birdFea0 > a:visited,
#birdFea1 > a,
#birdFea1 > a:visited {
 color: var(--font_white);
}

@media screen and (max-width: 1200px) {
 .speciestitle {
  height: 550px;
  transition-duration: 0.3s;
 }
 .speciesname {
  height: 75%;
  transition-duration: 0.3s;
 }
 .headingname {
  font-size: 32px;
 }
 .headingsname {
  font-size: 26px;
 }
 .speciespropts {
  height: 25%;
  font-size: 15px;
  transition-duration: 0.3s;
 }
}
@media screen and (max-width: 1000px) {
 .speciestitle {
  height: 500px;
  transition-duration: 0.3s;
 }
 .speciesname {
  height: 75%;
  transition-duration: 0.3s;
 }
 .headingname {
  font-size: 30px;
 }
 .headingsname {
  font-size: 24px;
 }
 .speciespropts {
  height: 25%;
  font-size: 14px;
  transition-duration: 0.3s;
 }
 .speciesicon {
  height: 30px;
  width: 30px;
  transition-duration: 0.3s;
 }
}
@media screen and (max-width: 900px) {
 .speciestitle {
  height: 480px;
  transition-duration: 0.3s;
 }
}
@media screen and (max-width: 850px) {
 .speciesname {
  height: 80%;
  transition-duration: 0.3s;
 }
 .headingname {
  font-size: 29px;
 }
 .headingsname {
  font-size: 23px;
 }
 .speciesimage {
  height: 80%;
  transition-duration: 0.3s;
 }
 .speciespropts {
  width: 100%;
  height: 20%;
  font-size: 14px;
  transition-duration: 0.3s;
 }
}
@media screen and (max-width: 750px) {
 .speciestitle {
  height: 720px;
  transition-duration: 0.3s;
 }
 .speciesblank {
  display: none;
 }
 .speciesname {
  float: left;
  width: 100%;
  height: 150px;
  transition-duration: 0.3s;
 }
 .headingname {
  font-size: 28px;
 }
 .headingsname {
  font-size: 22px;
 }
 .speciesnbox {
  height: 70%;
 }
 .speciesinfo {
  height: 30%;
 }
 .speciesicon {
  height: 30px;
  width: 30px;
  transition-duration: 0.3s;
 }
 .speciesicon:hover {
  height: 35px;
  width: 35px;
  cursor: pointer;
  opacity: 0.8;
  transition-duration: 0.3s;
 }

 .speciesimage {
  float: left;
  width: 100%;
  height: 450px;
  transition-duration: 0.3s;
 }
 .speciespropts {
  float: left;
  width: 100%;
  height: 120px;
  font-size: 14px;
  transition-duration: 0.3s;
 }
}
@media screen and (max-width: 550px) {
 .speciestitle {
  height: 650px;
  transition-duration: 0.3s;
 }
 .speciesblank {
  display: none;
 }
 .speciesname {
  height: 130px;
  transition-duration: 0.3s;
 }
 .speciesnbox {
  height: 70%;
 }
 .speciesinfo {
  height: 30%;
 }
 .speciesicon {
  height: 25px;
  width: 25px;
  transition-duration: 0.3s;
 }
 .speciesicon:hover {
  height: 35px;
  width: 35px;
  cursor: pointer;
  opacity: 0.8;
  transition-duration: 0.3s;
 }
 .speciesimage {
  height: 400px;
  transition-duration: 0.3s;
 }
 .speciespropts {
  height: 120px;
  font-size: 13px;
  transition-duration: 0.3s;
 }
}
@media screen and (max-width: 450px) {
 .speciestitle {
  height: 600px;
  transition-duration: 0.3s;
 }
 .speciesblank {
  display: none;
 }
 .speciesname {
  height: 130px;
  transition-duration: 0.3s;
 }
 .speciesnbox {
  height: 70%;
 }
 .speciesinfo {
  height: 30%;
 }
 .speciesicon {
  height: 25px;
  width: 25px;
  transition-duration: 0.3s;
 }
 .speciesicon:hover {
  height: 35px;
  width: 35px;
  cursor: pointer;
  opacity: 0.8;
  transition-duration: 0.3s;
 }
 .speciesimage {
  height: 350px;
  transition-duration: 0.3s;
 }
 .speciespropts {
  height: 120px;
  font-size: 13px;
  transition-duration: 0.3s;
 }
}

.container {
 position: relative;
 float: left;
 display: flex;
 align-content: center;
 width: calc(100% - 20px);
 margin: 20px 10px;
}
.mainbox1 {
 width: 50%;
 padding-left: 15px;
 padding-right: 15px;
 display: inline-block;
 text-align: left;
 font-family: "Poppins", sans-serif;
 transition-duration: 0.3s;
}
.mainbox1 > h1 {
 width: 100%;
 font-family: "Poppins", sans-serif;
 color: var(--font_black);
 transition-duration: 0.3s;
}
.mainbox2 {
 width: 50%;
 padding-left: 30px;
 padding-right: 15px;
 display: inline-block;
 text-align: left;
 font-family: "Poppins", sans-serif;
 transition-duration: 0.3s;
}
.mainbox2 > img {
 width: 100%;
 transition-duration: 0.3s;
}
.mapbox {
position: relative;
display: inline-block;
width: 100%;
background-image: url("../birds/mapimg/GB-RelfL.jpg");
background-position: center;
background-size: 100% auto;
background-repeat: no-repeat;

}
.maplayer {
width: 100%;
position: relative;
display: inline;
opacity: 0.9;
}

.toplayer {
width: 100%;
position: absolute;
left: 0px;
top: 0px;
opacity: 0.7;
}
.seasonsbox {
position: absolute;
left: 2px;
bottom: 2px;
width: calc( 100% - 4px );
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.seascols {
position: relative;
width: calc( 25% - 6px );
margin: 3px;
font-size: 12px;
color: #ffffff;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.scl1 {
background-color: #47b143;
}
.scl2 {
background-color: #e09f39;
}
.scl3 {
background-color: #295a9d;
}
.scl4 {
background-color: #898989;
}
@media screen and (max-width: 1200px) {
.seascols {
font-size: 11px;
transition-duration: 0.3s;
}
}
@media screen and (max-width: 1100px) {
.seascols {
font-size: 10px;
transition-duration: 0.3s;
}
}
@media screen and (max-width: 1020px) {
.seascols {
font-size: 9px;
transition-duration: 0.3s;
}
}
@media screen and (max-width: 800px) {
.seascols {
font-size: 12px;
transition-duration: 0.3s;
}
}
@media screen and (max-width: 650px) {
.seascols {
font-size: 10px;
transition-duration: 0.3s;
}
}
@media screen and (max-width: 550px) {
.seascols {
font-size: 9px;
transition-duration: 0.3s;
}
}
     
.mainbox2 > p {
 font-size: 12px;
 font-style: oblique;
 transition-duration: 0.3s;
}
.mainbox2 > h1 {
 width: 100%;
 font-family: "Poppins", sans-serif;
 color: var(--font_black);
 transition-duration: 0.3s;
}
@media screen and (max-width: 800px) {
 .container {
  display: flex;
  flex-direction: column;
  align-content: center;
  transition-duration: 0.3s;
 }
 .mainbox1 {
  width: 100%;
  transition-duration: 0.3s;
  padding-left: 10px;
  padding-right: 10px;
 }
 .mainbox2 {
  width: 100%;
  transition-duration: 0.3s;
  padding-left: 10px;
  padding-right: 10px;
 }
}
@media screen and (max-width: 600px) {
 .mainbox1 > h1 {
  font-size: 22px;
  transition-duration: 0.3s;
 }

 .mainbox1 > p {
  font-size: 13px;
  transition-duration: 0.3s;
 }
 .mainbox2 > p {
  font-size: 10px;
  font-style: oblique;
  transition-duration: 0.3s;
 }
 .mainbox2 > h1 {
  font-size: 22px;
  transition-duration: 0.3s;
 }
}