﻿/* 
 * HCSO Green & Gold Skin
======================================================
  =  HCSO Branding ADA Color Scheme Codes
======================================================

    GREENS
    ==================================================
        - Primary: #304b3c (48,75,60)
        - Primary Light: #5a7766 (90,119,102) | Accent
        - Primary Dark: #092316 (9,35,22)

    GOLDS
    ==================================================
        - Primary: #cdb02c (205,176,44)
        - Primary Light: #ffe25f (255, 226,95)
        - Primary Dark: #988100 (152, 129,0)
*/

/* #region*/
/* =============================================
    1 | Typography
================================================ */
/* #region*/
a {
    color: #1e824c;
}

    a:hover {
        color: #205e3b;
    }

    a:focus,
    a:active {
        color: #205e3b;
    }

mark,
.mark {
    background-color: #092316;
    color: #ffffff;
}

.text-default {
    color: #304b3c;
}



/* (A) Tables
---------------------------------- */
.table.table-colored {
    border-bottom-color: #092316;
}

.table-colored > thead > tr > th {
    border-color: #092316;
    background-color: #304b3c;
    color: #ffffff;
}
/* #endregion*/

/* ==============================================
    2 | Layout
================================================= */
/* #region*/
.header-top.dark {
    background-color: #304b3c;
    border-bottom: 1px solid #092316;
}

.header.dark {
    background-color: #3c433d;
    border-top-color: #3c433d;
}

.header-top.colored {
    background-color: #304b3c;
    border-bottom: 1px solid #092316;
}

.default-bg {
    background-color: #304b3c;
    color: #ffffff;
}

.default-bg-50 {
    background-color: rgba(48, 75, 60, 0.5);
    color: #ffffff;
}

.bg-green-light {
    background-color: rgba(90,119,102,1) !important;
}

.bg-green-light-50 {
    background-color: rgba(90,119,102,.50) !important;
}

.bg-green-dark {
    background-color: rgba(9,35,22,1) !important;
}

.bg-green-dark-50 {
    background-color: rgba(9,35,22,1) !important;
}

.bg-gold {
    background-color: rgba(205,176,44,1) !important;
}

.bg-gold-50 {
    background-color: rgba(205,176,44,.50) !important;
}

.bg-gold-light {
    background-color: rgba(255,226,95,1) !important;
}

.bg-gold-light-50 {
    background-color: rgba(255,225,95,.50) !important;
}

.bg-gold-dark {
    background-color: rgba(152,129,0,1) !important;
}

.bg-gold-dark-50 {
    background-color: rgba(152,129,0,.50) !important;
}

/*Transparent Header*/
.transparent-header header.header.dark.transparent-header-on {
    background-color: rgba(48, 75, 60, 0.8);
    border-top-color: rgba(9, 35, 60, 0.5);
}

/*Fixed Navigation*/
.fixed-header-on .dark.header.fixed {
    background-color: rgba(48, 75, 60, 0.95);
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 992px) {
    .fixed-header-on .dark.header .dropdown-menu {
        border: 1px solid #5a7766;
    }
}

/*Translucent Backgrounds*/
.default-translucent-bg:after {
    background-color: rgba(9, 35, 60, 0.7);
}

.default-translucent-bg.hovered:hover:after {
    background-color: rgba(9, 35, 60, 0.8);
}

.default-hovered:hover:after,
.default-hovered:hover {
    background-color: #5a7766;
}
/* #endregion*/
/* ==============================================
   3 | Pages
================================================= */
/* #region*/
/* Blog Timeline layout
---------------------------------- */
.timeline-date-label:after {
    background-color: #092316;
}
/* #endregion*/
/* ==============================================
    4  | Components
================================================= */
/* #region*/
/* Buttons
---------------------------------- */
.btn-default {
    background-color: #304b3c;
    border-color: #5a7766;
}

    .btn-default:hover,
    .btn-default:focus,
    .btn-default.focus,
    .btn-default:active,
    .btn-default.active,
    .show > .dropdown-toggle.btn-default {
        background-color: #5a7766;
        border-color: #5a7766;
    }

    .btn-default.disabled,
    .btn-default[disabled],
    fieldset[disabled] .btn-default {
        background-color: #304b3c;
        border-color: #5a7766;
    }

.btn-default-transparent {
    border-color: #304b3c;
}

    .btn-default-transparent:hover,
    .btn-default-transparent:focus,
    .btn-default-transparent.focus,
    .btn-default-transparent:active,
    .btn-default-transparent.active,
    .show > .dropdown-toggle.btn-default-transparent {
        background-color: #5a7766;
        border-color: #5a7766;
    }

.default-bg .btn-default,
.default-translucent-bg .btn-default,
.default-bg .btn-default-transparent,
.default-translucent-bg .btn-default-transparent { color: #304b3c;}

.btn-white:hover,
.btn-white:focus,
.btn-white.focus,
.btn-white:active,
.btn-white.active,
.show > .dropdown-toggle.btn-white {
    color: #5a7766;
}

.btn-animation:hover:before,
.btn-animation:focus:before {
    background: #5a7766;
}

/* Pager
---------------------------------- */
ul.pagination .page-item .page-link:hover,
ul.pagination .page-item .page-link:focus {
    background-color: #5a7766;
    border-color: #5a7766;
}

ul.pagination .page-item.active .page-link,
.page-item.active .page-link:hover,
.page-item.active .page-link:focus {
    background-color: #304b3c;
    border-color: #304b3c;
}

/* Breadcrumb
---------------------------------- */
.banner .breadcrumb .breadcrumb-item a:hover {
    color: #5a7766;
}

.banner .dark.breadcrumb-container {
    background-color: rgba(48, 75, 60, 0.6);
}

/* Nav pills
---------------------------------- */
.nav-pills.style-2 > li .nav-link.active,
.nav-pills.style-2 > li .nav-link.active:hover,
.nav-pills.style-2 > li .nav-link.active:focus,
.nav-pills.style-2 > li .nav-link:hover,
.nav-pills.style-2 > li .nav-link:focus {
    color: #304b3c;
}

.nav.flex-column > li .nav-link.active,
.nav.flex-column > li .nav-link.active:hover,
.nav.flex-column > li .nav-link.active:focus,
.nav.flex-column > li .nav-link:hover,
.nav.flex-column > li .nav-link:focus {
    color: #1e824c;
}

.nav-pills > li .nav-link.active:after {
    color: #304b3c;
}

.nav.flex-column:not(.list-style-icons) > li .nav-link.active:hover:after,
.nav.flex-column:not(.list-style-icons) > li .nav-link.active:focus:after,
.nav.flex-column:not(.list-style-icons) > li .nav-link:hover:after,
.nav.flex-column:not(.list-style-icons) > li .nav-link:focus:after {
    color: #5a7766;
}

.nav.flex-column.list-style-icons > li .nav-link.active > i,
.nav.flex-column.list-style-icons > li .nav-link:hover > i,
.nav.flex-column.list-style-icons > li .nav-link:focus > i {
    color: #5a7766;
}

.dark .footer-content .nav.flex-column > li > a.active:hover,
.dark .footer-content .nav.flex-column > li > a:hover {
    color: #5a7766;
}

/* Collapse
---------------------------------- */
.collapse-style-2 .card-header a {
    background-color: #304b3c;
}

/* Progress bars
---------------------------------- */
.progress-bar-default {
    background-color: #304b3c;
}

/* Forms
---------------------------------- */
.default-bg .form-control {
    border-color: #5a7766;
}

.default-bg .input-group-addon {
    border-color: #5a7766;
}

/*Icons
---------------------------------- */
.icon.default-bg {
    background-color: #304b3c;
}

.icon.light-bg {
    color: #304b3c;
}

/*Listing Items
---------------------------------- */
.listing-item .overlay-container .badge {
    border: 1px solid #304b3c;
    color: #304b3c;
}

/*Modals
---------------------------------- */
.modal-content .modal-header {
    background-color: #304b3c;
}

/*Pace (Page loader)
---------------------------------- */
/*loader 1*/
.page-loader-1 .pace {
    border: 1px solid #304b3c;
}

    .page-loader-1 .pace .pace-progress {
        background: #304b3c;
    }

.page-loader-2 .pace .pace-progress:before {
    background: #304b3c;
}

.page-loader-2 .pace .pace-activity {
    border: 5px solid #304b3c;
}

    .page-loader-2 .pace .pace-activity:after {
        border: 5px solid #304b3c;
    }

    .page-loader-2 .pace .pace-activity:before {
        border: 5px solid #304b3c;
    }

.page-loader-3 .pace .pace-progress {
    background: #304b3c;
}

.page-loader-4 .pace .pace-progress {
    background: #304b3c;
}

.page-loader-5 .pace .pace-progress:after {
    color: #304b3c;
}

.page-loader-6 .pace .pace-activity {
    background: #304b3c;
}

/* #endregion*/

/* ==============================================
    5 |  Navigations
================================================= */
/* #region*/
/* 6.1 Light Version
------------------------------------------------ */
.header .navbar-nav li .nav-link:focus,
.header .navbar-nav li .nav-link:hover,
.header .navbar-nav .show > .nav-link,
.header .navbar-nav li .nav-link.show,
.header .navbar-nav .active.show > .nav-link,
.header .navbar-nav li.show .nav-link.active {
    color: #304b3c;
}

.transparent-header .dark.header .navbar-nav li .nav-link.active,
.header .navbar-nav .active > .nav-link,
.header .navbar-nav li .nav-link.active {
    color: #ffe25f;
}

.header .navbar-nav li li a:focus,
.header .navbar-nav li li a:hover,
.header .navbar-nav li .show > a,
.header .navbar-nav li li a.show,
.header .navbar-nav li .active > a,
.header .navbar-nav li li a.active {
    color: #092316;
}

header:not(.dark) .mega-menu .menu > li > a:hover i,
header:not(.dark) .dropdown-menu > li > a:hover i,
header:not(.dark) .mega-menu .menu > li.active > a i,
header:not(.dark) .dropdown-menu > li.active > a i {
    color: #304b3c;
}

.navbar-light .navbar-toggler:hover,
.navbar-light .navbar-toggler:focus {
    border-color: #5a7766;
}

/* Small devices (tablets, phones less than 767px) */
@media (max-width: 991px) {
    .header .navbar-nav .active .nav-link,
    .header .navbar-nav .active .nav-link:hover,
    .header .navbar-nav .active .nav-link:focus {
        color: #5a7766;
    }
    /* first level item hover and focus states */
    .header .navbar-nav li > a:hover,
    .header .navbar-nav li > a:focus,
    .header .navbar-nav .active > a,
    .header .navbar-nav .active > a:hover,
    .header .navbar-nav .active > a:focus {
        color: #5a7766;
    }
    /* second level item on hover/focus */
    .header .navbar-nav .show .dropdown-menu > li > a:hover,
    .header .navbar-nav .show .dropdown-menu > li > a:focus {
        color: #5a7766;
    }
    /* Arrow for parent menu item */
    .header .navbar-nav .dropdown.show > .dropdown-toggle::after {
        color: #304b3c;
    }
}

/* 6.2 Dark Version
------------------------------------------------------------*/
/* first level active menu item when opened */
.dark.header .navbar-nav .show .nav-link,
.dark.header .navbar-nav .show .nav-link:hover,
.dark.header .navbar-nav .show .nav-link:focus,
.dark.header .navbar-nav .dropdown .nav-link:focus {
    border-bottom-color: #304b3c;
}

/* second level menu item */
.dark.header .dropdown-menu {
    background-color: #304b3c;
}

    .dark.header .dropdown-menu .divider {
        background-color: rgba(90, 119, 102, 0.8);
    }

    .dark.header .dropdown-menu > li > a,
    .dark.header .navbar-nav .mega-menu .menu > li > a {
        border-bottom: 1px solid rgba(90, 119, 102, 0.8);
    }

.dark.header .mega-menu .menu > li > a:hover,
.dark.header .mega-menu .menu > li > a:focus {
    border-color: rgba(48, 75, 60, 0.8);
}

.dark.header .dropdown-menu > li > a:hover,
.dark.header .dropdown-menu > li > a:focus,
.dark.header .navbar-nav .show > a,
.dark.header .navbar-nav .show > a:hover,
.dark.header .navbar-nav .show > a:focus,
.dark.header .dropdown-menu > .active > a,
.dark.header .dropdown-menu > .active > a:hover,
.dark.header .dropdown-menu > .active > a:focus,
.dark.header .dropdown-menu .menu > .active > a,
.dark.header .dropdown-menu .menu > .active > a:hover,
.dark.header .dropdown-menu .menu > .active > a:focus {
    border-color: rgba(48, 75, 60, 0.8);
}

/* 6.3 Navigation style 2
------------------------------------------------------------- */
@media (min-width: 992px) {
    .header.white-bg .main-navigation--style-2 .navbar-nav li .nav-link:focus,
    .header.white-bg .main-navigation--style-2 .navbar-nav li .nav-link:hover,
    .header.white-bg .main-navigation--style-2 .navbar-nav li.show .nav-link {
        color: #304b3c;
    }
}
/* #endregion*/
/* ==============================================
    6 |  Blocks/Widgets
================================================= */
/* #region*/
/* Social icons block
------------------------------------------------ */
.social-links li a:hover {
    border-color: #5a7766;
    color: #5a7766;
}

.social-links.animated-effect-1 li a:after {
    background-color: #304b3c;
}

.social-links.default li a {
    background-color: #304b3c;
    border: 1px solid #5a7766;
}

.header-top:not(.dark) .social-links .dropdown.show > button > i:before {
    color: #304b3c;
}

/*Header Dropdowns (search, cart etc)
-------------------------------------- */
.header-dropdown-buttons .btn-group > .btn:hover {
    background-color: #304b3c;
    border-color: #5a7766;
}

.header-dropdown-buttons .btn-group.show > .btn {
    background-color: #304b3c;
    border-color: #5a7766;
}

.dark.header-top .dropdown-menu {
    border: 1px solid #242824;
    background: #304b3c;
}

.colored.header-top .dropdown-menu {
    border: 1px solid #304b3c;
    background: #304b3c;
}

/*  Media
---------------------------------- */
.media:hover .icon {
    color: #304b3c;
    border: 1px solid #304b3c;
}

/* Full Width Content
---------------------------------- */
/* Large and Medium devices (desktops, tablets less than 1199px) */
@media (max-width: 1199px) {
    .full-width-section:not(.no-image) .full-text-container.default-bg {
        background-color: rgba(36, 168, 40, 0.6);
    }
}

/* Pricing tables
---------------------------------- */
.popover-title {
    background-color: #304b3c;
}

/* Tags cloud block
---------------------------------- */
.tag a {
    background-color: #304b3c;
    border: 1px solid #5a7766;
}

    .tag a:hover {
        color: #304b3c;
        border-color: #5a7766;
    }
/* #endregion*/
/*===============================================
    7 | Main Slideshow
================================================= */
/* #region*/
.tp-bannertimer {
    background-color: rgba(90, 119, 102, 0.8);
}
/* #endregion*/
/*================================================ 
    8 |  Slick Carousel
================================================== */
/* #region*/
.content-slider-with-large-controls .slick-prev:after,
.content-slider-with-large-controls-autoplay .slick-prev:after {
    color: #304b3c;
}

.content-slider-with-large-controls .slick-next:after,
.content-slider-with-large-controls-autoplay .slick-next:after {
    color: #304b3c;
}
/* #endregion*/
/*================================================
    9  | Full Page
================================================== */
/* #region*/
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
    background: rgba(90, 119, 102, 0.8);
}
/* #endregion*/

/* #endregion*/
