/* The region colors */
.page-wrapper {
  background-color: #ffffff;
  color: #3e4a1d;
}

#header {
  background-color: #e2fad1;
}

.main-navigation-wrapper,
.close-nav,
.mobile-nav {
  background-color: #162216;
  color: #f3fcec;
}

#welcome-text {
  background-color: #e2fad1;
  color: #3e4a1d;
}

#highlighted {
  background-color: #f3fcec;
  color: #3e4a1d;
}

#top-container {
  background-color: #f3fcec;
}

#top-container .first-top > div {
  background-color: #e2fad1;
  color: #162216;
}

#top-container .second-top > div {
  background-color: #f3fcec;
  color: #162216;
}

#top-container .third-top > div {
  background-color: #e2fad1;
  color: #162216;
}

#page-title {
  background-color: #3e4a1d;
  color: #f3fcec;
}

#main-container {
  background-color: #f3fcec;
  color: #3e4a1d;
}

#main-container .main-box > div {
  background-color: #ffffff;
}

#bottom-container {
  background-color: #3e4a1d;
}

#bottom-container .first-bottom > div {
  background-color: #316e38;
  color: #f3fcec;
}

#bottom-container .second-bottom > div {
  background-color: #316e38;
  color: #f3fcec;
}

#bottom-container .third-bottom > div {
  background-color: #316e38;
  color: #f3fcec;
}

#bottom-container .forth-bottom > div {
  background-color: #316e38;
  color: #f3fcec;
}

#footer-container {
  background-color: #3e4a1d;
}

#footer-container .first-footer > div {
  background-color: #3e4a1d;
  color: #f3fcec;
}

#footer-container .second-footer > div {
  background-color: #3e4a1d;
  color: #f3fcec;
}

#footer-container .third-footer > div {
  background-color: #3e4a1d;
  color: #f3fcec;
}

#footer-menu {
  background-color: #162216;
  color: #f3fcec;
}

#copyright {
  background-color: #0b300b;
  color: #f3fcec;
}

/* button animation  */
@keyframes btnBorderAnimation {
  0% {
    width: 0;
    height: 0;
    border-bottom-color: #fff;
  }

  99.9999% {
    width: 100%;
    height: 100%;
    border-bottom-color: #fff;
  }

  100% {
    width: 0;
    height: 0;
    border-bottom-color: transparent;
  }

}

/* Border animation  */
@keyframes borderLeftColors {
  0% {
    width: 0;
    height: 0;
    border-top-color: #fff;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }

  50% {
    width: 100%;
    height: 0;
    border-top-color: #fff;
    border-right-color: #fff;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }

  99.9999% {
    width: 100%;
    height: 100%;
    border-top-color: #fff;
    border-right-color: #fff;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }

  100% {
    width: 0;
    height: 0;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }

}

@keyframes borderRightColors {
  0% {
    width: 0;
    height: 0;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: #fff;
    border-left-color: transparent;
  }

  50% {
    width: 100%;
    height: 0;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: #fff;
    border-left-color: #fff;
  }

  99.9999% {
    width: 100%;
    height: 100%;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: #fff;
    border-left-color: #fff;
  }

  100% {
    width: 0;
    height: 0;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }

}