html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

a {
    color: #2784e3;
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6, .card-header {
    color: #4fa684;
}

.bg-seagreen {
    background-color: #4fa684;
}

.clickable:hover {
    background-color: #eee;
}

.btn-success {
    background-color: #4fa684;
    border-color: #4fa684;
    color: #fff;
}

.btn-warning {
    background-color: #eed583;
    border-color: #eed583;
    color: #fff;
}

.main-solid-green-bg {
    background-color: #4fa684;
    margin: 0;
    padding: 5rem;
}

.main-body {
    background: #efefef url('/images/bgs/patino-bg.png') no-repeat top;
    background-color: #efefef;
}

.footer-bg-image {
    background: #efefef url('/images/bgs/waianae-coast.jpg') no-repeat top;
    background-color: #34755a;
}

header {
    background: #efefef url('/images/bgs/patino-bg.png') no-repeat top;
}

.nav-link:link, .nav-link:visited {
    color: #fff;
}
.nav-link:hover {
    color: #fff;
}

.btn-warning {
    background-color:#eac768;
    color:#333;
}

.list-group-item:link, .list-group-item:visited {
    color: #2784e3;
}

.offcanvas-header {
    background-color: #4fa684;
}
.offcanvas-header h4 {
    color: #fff;
    font-size: 2.3rem;
    font-weight: 200;
}

.offcanvas-body {
    background: #efefef url('/images/bgs/patino-bg.png') no-repeat top;
    padding: 0;
}

.offcanvas-title {
    color: #999;
}

.wcchc-oc {
    background-color: #fff;
}

.wcchc-oc-div {
    border-bottom: solid 1px #dedede;
    cursor: pointer;
    padding: 15px;
}

    .wcchc-oc-div:hover {
        
        background-color: rgba(75, 166, 132, .1);
    }

.wcchc-oc-link, .wcchc-oc-link:link, .wcchc-oc-link:hover, .wcchc-oc-link:visited, .wcchc-oc-link:active {
    color: #4ba684;
}

.carousel-item {
    background-color: transparent;
}

.carousel-indicators [data-bs-target] {
    height: 5px;
    width: 40px;
    border: 1px solid #999;
}

.carousel-caption > h3 {
    color: #fff;
}

.carousel-caption > p {
    color: #fff;
    font-size: 1.5rem;
    padding: 0px;
    opacity: 1;
    font-weight: 300;
}

.carousel-fade .carousel-item {
    transition: 1.5s opacity ease;
}

.carousel-control-prev,
.carousel-control-next {
    margin-left: -120px;
    margin-right: -120px;
}

.text-yellow {
    color: #f2c65a;
}

.text-fern-green {
    color: #97ca4f;
}