@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

body {
  color: #333;
  font-size:17px;
  background: #f8f1d7;
  font-family: "Inter", sans-serif;
}

h1, h2, h3, h4, h5 {
  font-weight: 800;
  color: #6f3e13;
}

a {
  text-decoration: none;
}

a:focus {
  outline:none;
}

.access-nav {
  left:45%;
  position: absolute;
  background-color: #6f3e13;
  transform: translateY(-100%);
}

.access-nav:focus {
  color:#f8f1d7;
  transform: translateY(0%);
}

#navigation {
  margin-top: 10px;
}

#navigation .menu-wrap {
  background-color:#3a5c2a;
}

#navigation .menu {
  width: 100%;
}

#navigation .access-icons i + i {
  color:#000;
}

#navigation li a {
  text-decoration: none;
  padding: 10px 20px 10px 20px;
  color: #fff;
  font-weight: bold;
  font-size:0.85em;
}

#navigation li a.show,
#navigation li a:hover {
  background-color: #3e7129;
}

#navigation li ul {
  background: #3a5c2a;
  border-radius: 0;
}

#navigation li ul li {
  width: 100%;
}

#navigation li ul li a {
  border: 0;
  font-size: 80%;
  padding-left:10px;
  padding-right:10px;
}

#navigation li ul li:first-child a {
  border: 0;
}

.access-icons {
  font-size:0.5em;
}

#banner .bx-wrapper {
  border: 0;
}

#banner .banner-item {
  height: 470px;
}

#banner .item {
  height: 470px;
  overflow: hidden;
}

#banner img {
  width: 100%;
}

#banner .banner-item:first-child .text {
  left: 12px;
}

#banner .text {
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.8;
  width: 60px;
  height: 100%;
}

#banner .text p {
  font-size: 35px;
  color: #fff;
  font-weight: bold;
  width: 390px;
  top: 45%;
  left: -170px;
  text-align: center;
  position: absolute;

  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
}

#banner .species {
  background: #222;
}

#banner .ecosystem {
  background: #998225;
}

#banner .genetic {
  background: #456d17;
}

.welcome a {
  color:#fff;
  background-color: #3a5c2a;
}

.welcome a:hover {
  color:#fff;
  background-color: #444;
}

.featured .feature-box {
  height: 16em;
}

.feature-box {
  border-color: #ddd;
}

.feature-box li {
  list-style: none;
  font-size: 0.9em;
}

.feature-box li a {
  color:#222;
}

.feature-box li a:hover {
  text-decoration: underline;
}

.feature-box i {
  color:#3a5c2a;
}

.feature-box h2 {
  color: #6f3e13;
  font-weight: 800;
  font-size:1.25rem;
}

.feature-box.latest-news {
  background-color: #3a5c2a;
}

.feature-box.latest-news h2 {
  color:#fff;
}

.feature-box.latest-news li a {
  color:#fff;
  font-size:0.9em;
}

.hero-content {
  color:#fff;
  position:relative;
  background-color: #2b362799;
}

.hero-content::after {
  content: "";
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: -1;
  position: absolute;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image:url(../images/hero_bg.jpg);
}

.hero-content p {
  font-size:2em;
  font-weight: 200;
}

.access .card h3 {
  font-size:1.25rem;
}

.access .card p {
  font-size: 0.9em;
  line-height: 1.7em;
}

.access .card a {
  font-size:0.8em;
  color:#fff;
  background-color: #3a5c2a;
}

.access .card a:hover {
  background-color: #444;
}

.sidebar .latest-news {
  height:16em;
}

.sidebar .latest-news h5 {
  color:#fff;
}

.sidebar .latest-news li a {
  color:#fff;
}

.footer {
  color:#fff;
  font-size: 0.9em;
  background: #3a5c2a;
}

.footer .fs-7 {
  font-size: 0.84em;
}

.footer .social a {
  color: #fff;
  width: 38px;
  height: 38px;
  border: 1px solid #fff;
  border-radius: 50%;
}

.footer .social a:hover i {
  color:#444
}

.footer h3 {
  color:#fff;
  font-size:1.25rem;
}

.footer a {
  color: #fff;
}

.footer a:hover {
  text-decoration: underline;
}

.footer li {
  list-style: none;
} 


@media (max-width: 576px) {
  .dropdown-item::after {
    border: 1px solid #f00;
    margin-left: 0.26em;
    transform: rotate(90deg);
  }
}

@media (min-width: 576px) {
  #navigation li .nav-link {
    text-align: center;
  }
}

/** DARK MODE **/

body.dark-mode {
  color:#D9B138;
  background:#374422;
}

.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5 {
  color: #fff;
}

.dark-mode #navigation .menu-wrap {
  background-color:#D9B138;
}

.dark-mode #navigation .access-icons i {
  color:#000;
}

.dark-mode #navigation .access-icons i + i {
  color:#fff;
}

.dark-mode #navigation .menu-wrap a {
  color:#000
}

.dark-mode #navigation li a.show,
.dark-mode #navigation li a:hover {
  background-color: #fff;
}

.dark-mode #navigation li ul {
  background: #D9B138;
  border-radius: 0;
}

.dark-mode .feature-box i {
  color: #f17a9b;
}

.dark-mode .access .card a.btn,
.dark-mode .feature-box.latest-news a.btn,
.dark-mode .welcome a {
  background-color:#f17a9b;
  color:#000;
  border:0;
}


.dark-mode .access p,
.dark-mode .feature-box.latest-news li a,
.dark-mode .feature-box a {
  color:#D9B138;
}

.dark-mode .feature-box.latest-news {
  background:#374422;
}

.dark-mode .footer {
  background: #374422;
}

.dark-mode .footer a {
  color:#D9B138
}

.dark-mode .footer .social a {
  color: #f17a9b;
}

.dark-mode .footer .social a:hover i {
  color:#fff;
}