/*------------------------------------*\
    
    Header CSS
 
    eg: Header, Navigation, Ubermenu, Masthead 
    Page head.............The main page header.
    Navigation............Navigation elements + Ubermenu.
    Masthead..............Page title/image/slideshow header block.
    Breadcrumbs...........Breadcrumbs navigation typically near the masthead/page heading

\*------------------------------------*/

/**
 * Page-head
 */
 .page-header {
    position: relative;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    padding: 11px 0 0;
    transition: all ease-in-out 0.4s;
    background: #FFFFFF;
}

@media (min-width: 1200px) {
    .page-header {
        position: fixed;
    }
}

.nav-fixed {
    position: fixed;
    bottom: 0;
    background-color: #50565A;
    width: 100%;
    height: 60px;
    left: 0;
    z-index: 99999;
    text-align: center;
    padding: 0 0;
}

.nav-fixed-left {
    float: left;
    padding: 8px 17px 0;
}

.nav-fixed-right {
    float: right;
}

.nav-fixed .btn {
    padding: 13px 16px 12px;
}

.nav-fixed .btn::before {
    display: none;
}

.nav-fixed .btn i {
    font-size: 14px;
    vertical-align: middle;
    padding: 0 8px 3px;
}

.fixed-call-btn {
    float: left;
    padding: 12px 17px 10px;
    border-left: 1px solid rgba( 255, 255, 255, .2);
    border-right: 1px solid rgba( 255, 255, 255, .2);
}

.fixed-call-btn a,
.toggle-menu {
    font-size: 11px;
    color: #A1DB80;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1em;
    text-align: center;
}

.fixed-call-btn a i {
    font-size: 19px;
    display: block;
}

.toggle-menu {
    float: right;
    color: #FFFFFF;
    cursor: pointer;
    margin: 6px 16px 0 15px;
    line-height: 1em;
}

.toggle-menu i {
    font-size: 34px;
    display: block;
}

.toggle-menu--active i:before {
    content: '\e90c';
    font-size: 25px;
}

.logo {
    float: left;
    max-width: 181px;
}

.header-right {
    float: right;
}

div.search {
    font-size: 18px;
    color: #9A9A9A;
    font-weight: normal;
    margin-top: 9px;
    cursor: pointer;
}

.header-mobile-bar {
    background: #50565A;
    margin-top: -6px;
}

.header-mobile-bar ul,
.header-quick-link ul,
.header-mobile-bar ul li,
.header-quick-link li {
    margin: 0;
    padding: 0;
    text-align: center;
}

.header-mobile-bar ul li {
    padding: 11px 0 12px;
    line-height: 1.1em;
}

.header-mobile-bar ul li::before,
.header-quick-link ul li::before {
    display: none;
}

.header-mobile-bar ul li a {
    font-size: 14px;
    color: #FFFFFF;
    font-weight: normal;
    text-decoration: none;
}

.header-mobile-bar ul li a span {
    color: #A1DB80;
}

.header-mobile-bar ul li i {
    font-size: 12px;
    vertical-align: middle;
    padding: 0 2px 2px 0;
}

.header-btn .btn {
    padding: 13px 22px 14px;
}

.header-btn .btn::before {
    display: none;
}

.header-btn .btn i {
    font-size: 16px;
    vertical-align: middle;
    padding: 0 6px 1px;
}

.top-header {
    padding: 0;
}

.header-location {
    float: right;
    border-right: 1px solid #D8D9DE;
    line-height: 1em;
    padding-right: 40px;
}

.header-location a {
    font-size: 16px;
    color: #FFFFFF;
    font-weight: normal;
    text-decoration: none;
}

.header-location a span:not(.js-closest-location) {
    color: #A1DB80;
}

.header-location i {
    font-size: 16px;
    vertical-align: middle;
    padding: 0 2px 2px 0;
}

.header-phone {
    border-right: 1px solid #D8D9DE;
    float: right;
    line-height: 1em;
    padding-right: 10px;
    margin-right: 15px;
    font-size: 16px;
}
.home .header-phone {
	color: #fff;
}
.home .js-scrolled .header-phone {
	color: #50565A;
}

.header-phone i {
    font-size: 15px;
    margin-right: 7px;
}

.header-phone a {
    font-weight: 400;
}

.header-quick-link {
    float: right;
}

.header-quick-link ul li {
    padding-left: 40px;
    line-height: 1.1em;
    float: left;
}

.header-quick-link ul li a {
    font-size: 16px;
    color: #FFFFFF;
    font-weight: normal;
    text-decoration: none;
}

.header-quick-link ul li a i {
    font-size: 15px;
    vertical-align: middle;
    padding: 0 2px 4px 0;
}

@media (min-width: 768px) {
    .page-header .container-fluid {
        padding: 0 40px;
    }

    .page-header.menu-open {
        position: fixed;
    }

    .header-mobile-bar ul {
        display: flex;
        width: 100%;
    }

    .header-mobile-bar {
        margin-top: -12px;
    }

    .header-mobile-bar ul li {
        padding: 4px 0 13px;
        width: 50%;
        position: relative;
    }

    .header-mobile-bar ul li:after {
        content: "";
        position: absolute;
        right: 0;
        top: -12px;
        width: 1px;
        height: calc(100% + 12px);
        background: #9A9A9A;
    }

    .header-mobile-bar ul li:last-child:after {
        border: none;
    }

    .header-mobile-bar ul li a {
        font-size: 15px;
    }

    .header-mobile-bar ul li i {
        font-size: 13px;
        padding: 0 2px 2px 0;
    }

    .logo {
        max-width: 233px;
    }

    .header-main {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        padding-top: 5px;
    }

    .toggle-menu {
        float: right;
        color: #50565A;
        margin: 0 15px 0 0;
    }
    
    div.search {
        margin: 0 30px;
    }

}
@media (min-width: 1200px) {
    .page-header {
        padding: 40px 0 0;
        position: absolute;
        left: 0;
        top: 0;
        background: transparent;
    }

    .hideheader {
        top: -150px;
    }

    .page-header--inner,
    .page-header.js-scrolled {
        padding: 20px 0 18px;
        position: fixed;
        background: #FFFFFF;
        box-shadow: 0 0 20px rgba( 64, 135, 64, .3);
        top: 0;
    }

    body.admin-bar .page-header--inner,
    body.admin-bar .page-header.js-scrolled {
        top: 32px;
    }

    .fixed-logo {
        display: none;
    }

    .js-scrolled .fixed-logo,
    .page-header--inner .fixed-logo {
        display: block;
    }

    .js-scrolled .static-logo,
    .page-header--inner .static-logo {
        display: none;
    }

    .header-main {
        padding-top: 15px;
        display: block;
    }

    .header-btn,
    div.search {
        float: right;
    }

    div.search {
        color: #FFFFFF;
        font-size: 18px;
        margin: 13px 30px 0 16px;
    }

    .header-btn .btn {
        padding: 13px 28px 14px;
    }

    .logo {
        max-width: 271px;
        margin-top: 4px;
    }

    .js-scrolled .header-location a,
    .js-scrolled .header-quick-link ul li a,
    .page-header--inner .header-location a,
    .page-header--inner .header-quick-link ul li a {
        color: #50565A;
    }

    .js-scrolled .header-location a span:not(.js-closest-location),
    .page-header--inner .header-location a span:not(.js-closest-location) {
        color: #77AD5C;
    }

    .js-scrolled .search,
    .page-header--inner .search {
        color: #9A9A9A;
    }

}

@media (min-width: 1366px) {
    div.search {
        margin: 13px 50px 0 25px;
    }

    .logo {
        max-width: 300px;
        margin-top: 0;
        position: absolute;
        top: 35px;
    }
	.header-phone {
		padding-right: 30px;
		margin-right: 30px;
	}
}

@media (min-width: 1440px) {
    .page-header .container-fluid {
        padding: 0 40px;
        position: relative;
    }

    div.search {
        margin: 13px 50px 0 25px;
    }

    .logo {
        max-width: 275px;
        top: 0;
    }


}

@media (min-width: 1660px) {
    .page-header .container-fluid {
        padding: 0 142px;
        position: relative;
    }

    .logo {
        max-width: 351px;
        top: 0;
    }
}


/**
 * Navigation
 */


/* General Styling */

.nav-primary {
    display: none;
}

.nav-primary ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-primary li {
    cursor: pointer;
    position: relative;
    margin: 0 18px 0 0;
    padding: 0 15px 0 0;
    float: left;
}

.nav-primary li:before,
.nav-primary li:after {
    display: none; 
}

.nav-primary a {
    display: block;
    border: none;
    background: none;
    text-decoration: none;
    color: #FFFFFF;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-weight: 400;
}

.sub-menu-toggle {
    font-size: 10px;
    position: absolute;
    right: 0;
    top: calc(50% - 12px);
    transform: translate(0,-50%) rotate(0);
    color: #FFFFFF;
    transition: transform ease-in-out 300ms;
}

/* 1st Level */

.nav-primary > .menu > li {
    display: inline-block;
    padding-bottom: 25px;
}

.nav-primary > .menu > li:hover > .sub-menu-toggle {
    transform: translate(0,-50%) rotate(180deg);
}


/* Sub Menus */

.nav-primary .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-5%);
    max-width: 325px; 
    width: 325px;
    background-color: var(--white);
    opacity: 0;
    visibility: hidden;
    transition: all ease-in-out 300ms;

    -webkit-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.1);
}

.nav-primary .sub-menu.show {
    display: block;
}

.nav-primary > ul > li > .sub-menu {
    border-top: 4px solid var(--green);
    padding: 10px 0;
}

.nav-primary .sub-menu li {
    margin: 0;
    float: none;
    padding: 0 15px;
}

.nav-primary .sub-menu li .sub-menu-toggle {
    right: 15px;
    transform: translateX(0) translateY(-50%) rotate(-90deg);
    top: 50%;
    transition: transform ease-in-out 300ms;
    color: #77AD5C !important;
}

.nav-primary .sub-menu li:hover .sub-menu-toggle {
    transform: translateX(-15px) translateY(-50%) rotate(-90deg);
}

.nav-primary .sub-menu > li > a {
    padding: 10px 15px;
    background-color: var(--white);
    color: var(--gray);
    text-transform: none;

}

.nav-primary .sub-menu > li > a:hover {
    background-color: var(--light-green);
    color: var(--green);
}

/* .nav-primary .sub-menu > li > a:hover:before {
    position: absolute;
    content: "\e90a";
    right: 30px;
    font-family: 'icomoon'!important;
    font-size: 10px;
    transform: rotate(269deg);
} */

.nav-primary li:hover > .sub-menu {
    display: block;
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
}

.nav-primary .sub-menu li {
    display: block;
}

.nav-primary .sub-menu li:hover > .sub-menu {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}


/* 3rd Level Sub Menus */

.nav-primary .sub-menu .sub-menu {
    display: none;
    display: block;
    top: 0;
    left: 100%;
    transform: translateX(-5%);
    width: 280px;
    max-width: 280px;
    padding: 15px 0;
}

.nav-primary .sub-menu .sub-menu li:first-child {
    border: 0;
}

@media (min-width: 1200px) {
    .nav-primary {
        display: block;
        float: right;
        padding-top: 11px;
    }

    .js-scrolled .nav-primary a,
    .page-header--inner .nav-primary a {
        color: #090A05;
    }
    
    .js-scrolled .sub-menu-toggle,
    .page-header--inner .sub-menu-toggle {
        color: #77AD5C;
    }
}

@media (min-width: 1366px) {
    .nav-primary li {
        margin: 0 18px;
        padding: 0 15px 0 0;
    }
    
    .nav-primary a {
        font-size: 18px;
    }
}

@media (min-width: 1440px) {
    .nav-primary li {
        margin: 0 15px;
    }
}

/* MOBILE MENU */
body.js-menu-active {
    overflow: hidden;
    height: 0vh;
}

.responsive-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* height: calc(100% - 52px); */
    background: #fff;
    z-index: 99;
    overflow-y: auto;
    transform: translateX(100%);
    /* transform: translateX(0); */
    transition: all .5s ease;
    /* height: calc(100vh - 65px); */
    padding-bottom: 70px;
    opacity: 0;
    display: none;
}

.responsive-menu.show {
    display: block;
}

.responsive-menu--active {
    transform: translateX(0);
    opacity: 1;
}

.admin-bar .responsive-menu {
    top: 46px;
    height: calc(100vh - 105px);
}

.responsive-menu .main-header {
    display: block;
}

@media (min-width: 768px) {
    body.js-menu-active {
        overflow: auto;
        height: auto;
    }

    .responsive-menu {
        top: 126px;
    }
    
    .responsive-menu--active {
        transform: translateX(0);
    }
    
    .admin-bar .responsive-menu {
        top: 126px;
        height: calc(100vh - 126px);
    }

    .responsive-menu .main-header {
        display: none;
    }
}

.mobile-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-nav ul li {
    margin: 0;
    padding: 0;
}

.mobile-nav ul li a {
    display: block;
    padding: 10px 22px;
    border-top: 1px solid var(--border);
    color: #090A05;
    font-size: 18px;
    font-weight: 400;
}

.mobile-nav .sub-menu li a {
    padding-left: 42px;
    background-color: var(--light-green);
}


.mobile-nav .sub-menu .sub-menu li a {
    padding-left: 62px;
    background-color: var(--white);
}

.mobile-nav ul li:before {
    display: none;
}

.mobile-nav .mobile-sub-toggle {
    position: absolute;
    top: 0;
    right: 10px;
    cursor: pointer;
    transform: rotate(0);
    transition: transform ease-in-out 300ms;
    color: var(--green);
    display: inline-block;
    padding: 15px;
}

.mobile-nav .is-active > .mobile-sub-toggle {
    transform: rotate(180deg);
}

.mobile-nav .is-active > a {
    background-color: var(--gray);
    color: var(--white);
}

.mobile-nav .sub-menu .is-active > .mobile-sub-toggle {
    transform: rotate(180deg);
    color: var(--white);
}

.mobile-nav .sub-menu .is-active > a {
    background-color: var(--green);
    color: var(--white);
}

.mobile-nav .sub-menu {
    display: none;
}

/**
 * Ubermenu Styling (Starter CSS - Generally no editing needed)
 */
@media only screen and (max-width: 1024px) {
  /* forces mobile menu to push other menu items down when open instead of the sub-menu overlapping other menu items */
  .ubermenu .ubermenu-item .ubermenu-submenu-drop {
      position: relative !important;
  }

  .ubermenu-responsive.ubermenu {
      margin: 0;
      position: fixed;
      width: 100%;
      z-index: 900;
      background: #f0f0f0;
  }

  .ubermenu .ubermenu-item {
      position: relative !important;
  }

  /* styles the sub-menu indicator on mobile and tablet */
  .ubermenu-sub-indicator {
      position: absolute;
      right: 0;
      top: 0;
      padding: 20px;
      z-index: 900;
  }

  .ubermenu-responsive-toggle {
      float: right;
  }
}

.ubermenu-responsive-toggle i { /* controls styling of mobile menu toggle */
    display: block; 
    font-size: 30px;
    margin: 0 !important;
}

.ubermenu-sub-indicator-close {
    display: none !important;
}


@media only screen and (min-width: 1024px) {
  .ubermenu > ul > li > a {
      padding-top: 40px !important; /* controls top level menu items on desktop size */
      padding-bottom: 40px !important;
      display: block;
  }
}

.sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    width: 100%;
    z-index: 9;
    border-top: 1px solid #ccc;
}

.ubermenu-responsive.ubermenu {
    bottom: 80px;
    left: 0;
    max-height: 500px !important;
    overflow-x: scroll !important;
    z-index: 2000;
}

.desktop-menu .ubermenu-responsive-toggle {
    display: none;
    z-index: 2000;
    position: relative;
}

@media only screen and (min-width: 768px) {
  .ubermenu-responsive.ubermenu {
      top: 174px; /* controls position of responsive menu on tablet size */
      bottom: auto;
      max-height: auto !important;
      overflow-x: inherit !important;
  }

  .sticky-bar {
      display: none;
  }

  .desktop-menu {
      display: inline-block;
  }

  .desktop-menu .ubermenu-responsive-toggle {
      display: block;
  }
}

@media only screen and (min-width: 1025px) {
    .desktop-menu .ubermenu-responsive-toggle {
        display: none;
    }

    .ubermenu-responsive.ubermenu {
        top: auto; 
    }
}

/* controls sticky bar menu icon and overlay on mobile */
.sticky-bar .menu-is-active .fa-bars:before {
    content: 'X';
}

body:after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    background-color: rgba( 0, 0, 0, .25 );
    z-index: -1000;
}

body.menu-is-active:after {
    z-index: 1000;
    display: block;
}

@media( max-width: 1024px ) {
    .sticky-bar {
        z-index: 2000 !important;
    }
}

/* Modern IPhone Fixes */
@media screen and (width: 375px) and (height: 813px) {
	
	.sticky-bar {
		/* prevents 'home indicator' overlap */
		padding-bottom: 34px; 
		
		/* prevents content from being cut off in screen rounded corners */
		padding-left: 16px;
		padding-right: 16px;
	}
}




/**
 * Ubermenu Styling - Custom Styles
 */




/**
 * Masthead
 */

.masthead {
    position: relative;
}

.masthead--innerpage__bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.masthead--innerpage {
    background: #fff;
}

.masthead--innerpage__wrap {
    position: relative;
    z-index: 1;
    background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
}   

.masthead--innerpage h1 {
    color: #090A05;
}

.masthead--innerpage__content {
    padding: 20px 0 24px 0;
    position: relative;
}

.masthead--innerpage__content::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(to right,  rgba(242,105,36,1) 0%,rgba(249,172,77,1) 100%); 
}

@media (min-width: 768px) {
    .masthead--innerpage__content {
        padding: 20px 0 35px;
    }
}

@media (min-width: 1200px) {
    .masthead--innerpage {
        margin-top: 110px;
    }

    .masthead--innerpage__content {
        padding: 30px 0 57px;
    }
    
}

@media (min-width: 1366px) {
    .masthead--innerpage {
        margin-top: 140px;
    }
}


/**
 * Breadcrumbs
 */

 .back-to-page {
    padding-bottom: 15px;
}

.back-to-page a {
    padding: 0;
    border: none;
    text-decoration: none;
    background: transparent;
    font-size: 14px;
    color: #77AD5C;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-decoration: none;
    text-transform: uppercase;
}

.back-to-page a i {
    font-size: 10px;
    vertical-align: middle;
    padding: 4px 0 0 2px;
    transform: rotate(180deg);
    display: inline-block;
}

.breadcrumbs ul {
    padding: 0 0 40px 5px;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
}

.breadcrumbs li {
    list-style-type: none;
    margin: 0;
    padding: 0 13px;
    font-size: 15px;
    font-weight: 700;
    color: #77AD5C;
    line-height: 1em;
    position: relative;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.breadcrumbs li:first-child {
    padding-left: 0;
}

.breadcrumbs a {
    color: #50565A;
    border: none;
    background: transparent;
    font-weight: 400;
    text-decoration: none;
    position: relative;
}

.breadcrumbs li::before {
    display: none;
}

.breadcrumbs li a::before {
    content: "\e900";
    font-family: 'icomoon';
    position: absolute;
    right: -18px;
    top: 2px;
    color: #9A9A9A;
    font-size: 10px;
    font-weight: normal;
}

.breadcrumb_last {
    margin-left: 20px;
}

@media (min-width: 768px) { 
    .back-to-page {
        padding-bottom: 20px;
    }

}

 /* Search Form */
 .search-form {
    display: flex;
 }

 .search-form .form-col {
    flex: 0 0 calc(100% - 60px);
 }

 .search-form .form-col + .form-col {
    flex: 0 0 60px;
 }

 .search-form .form-col + .form-col .btn {
    display: block;
    width: 100%;
    height: 100%;
    background: rgb(119,173,92);
    background: linear-gradient(45deg, rgba(119,173,92,1) 0%, rgba(64,135,64,1) 100%);
    border-radius: 0;
 }

 .search-form .form-col + .form-col .btn i { padding: 0; }

/* SITE SEARCH */
#wpadminbar {
    position: fixed;
}

.page-header + .site-search {
    display: none;
    background: var(--pale-green);
    position: absolute;
    top: 152px;
    left: 0;
    z-index: 9999;
    width: 100%;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all ease-in-out 300ms;
}

.page-header + .site-search.show {
    display: none;
}


.page-header + .site-search.is-open {
    opacity: 1;
    visibility: visible;
}

@media (min-width: 768px) {
    .page-header + .site-search {
        top: 172px;
    }
}

@media (min-width: 785px) {
    .page-header + .site-search {
        top: 158px;
    }
}

@media (min-width: 1200px) {
    .page-header + .site-search {
        position: fixed;
        top: 141px;
    }
}

.page-header + .site-search .search-form .form-col {
    margin-bottom: 0;
}

.site-search .search-form {
    max-width: 800px;
    margin: auto;
}

.search .icon-search.is-open:before {
    content: '\e90c';
}

/** Promo Bar **/
.promo-bar {
    padding: 0.5rem 1rem;
    transform: translateY(-11px);
    text-align: center;
    background-color: #001722;
    text-transform: uppercase;
    color: #fff;
}

.promo-bar,
.promo-bar p {
    font-size: 0.75rem;
}

.promo-bar a {
    color: #fff;
}

.promo-bar a:hover {
    text-decoration: underline;
}

@media (min-width: 600px) {
    .promo-bar {
        padding: 0.75rem 1rem;
    }
    
    .promo-bar,
    .promo-bar p {
        font-size: 1rem;
    }
}

@media (min-width: 768px) {
    .promo-bar {
        padding: 1rem;
    }
}

@media (min-width: 1200px) {
    .promo-bar {
        transform: translateY(-40px);
    }
    
    .js-scrolled .promo-bar {
        transform: translateY(-20px);
    }
}