/* ============================================= */
/* ===== MICROSITE THEME COLOR OVERRIDES   ===== */
/* ============================================= */


:root {
    --site-primary: #1f8247;
    --site-secondary: #50b848;
    --white: #ffffff;
    --black: #000;
}

:root {
    --link-color: #4ca744;
    --link-hover: var(--site-primary);
    --link-visited: var(--site-secondary);
    --button-background-primary: var(--site-secondary);
    --button-background-secondary: var(--site-secondary);
    --button-text-primary: var(--black);
    --button-text-secondary: var(--black);
}

/* =========================== */
/* Microsite Header Navigation */
/* =========================== */

.journal-header.journal-bg {
    background-color: var(--site-secondary); /* Background Color */
    /* Gradient */
    background: linear-gradient(180deg, hsla(123, 47%, 29%, 1) 0%, hsla(115, 42%, 46%, 1) 50%, hsla(123, 47%, 29%, 1) 100%);
    background: -moz-linear-gradient(180deg, hsla(123, 47%, 29%, 1) 0%, hsla(115, 42%, 46%, 1) 50%, hsla(123, 47%, 29%, 1) 100%);
    background: -webkit-linear-gradient(180deg, hsla(123, 47%, 29%, 1) 0%, hsla(115, 42%, 46%, 1) 50%, hsla(123, 47%, 29%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#276B2A", endColorstr="#4CA744", GradientType=1 );
    border-bottom: 2px solid var(--white) !important; /* Bottom Border */
}
/* Add white border above desktop links */
@media (min-width: 900px) {
.journal-header .journal-header_content .navbar-menu_wrap {
    padding: 1rem 1rem 0 1rem;
    border-top: 2px solid white;
}

.journal-header .site-menu .site-menu-item.site-menu-lvl-0>.nav-link {
    color: var(--white) !important; /* Navigation Links Color */
}

.journal-header .site-menu .site-menu-item.site-menu-lvl-0>.nav-link i {
    color: var(--white) !important; /* Navigation Links Dropdown Icon Color */
    
}
}

.mobile-site-menu-toggle .icon-menu_hamburger:before {
    color: var(--white) !important;
}


/* ============================================= */
/* ========== HOMEPAGE HERO CUSTOMIZATION  ===== */
/* ============================================= */

/* HERO BACKGROUND IMAGE + COLOR GRADIENT OVERLAY

- How to Change Image: Upload Image through SiteBuilder Image Assets, ensure it has a different filename, update URL with below
- How to Change Color Gradient Overlay: use HEX to RGBA converter for the appropriate format, first rgba() value is top color, second value is bottom color, use last digit in each for opacity (.75 = 75%).
- Example (do not remove or edit):
	.pg_Index .hero-row {
	    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)), url('/data/SiteBuilderAssetsOriginals/Live/Images/crt/hero-bg-crc.jpg');
	    background-position: center;
	    background-repeat: no-repeat;
	}
*/

.pg_Index .hero-row {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('/data/SiteBuilderAssetsOriginals/Live/Images/crt/hero-crt_1440x312px-c.jpg') !important;
    background-position: center;
    background-repeat: no-repeat;
}


/* HERO ISSUE TEXT

- Change the below hex value to change "Current Issue" "Volume #, Issue #" and "Date" values in the left side of the hero.
- Ensure at least AA Accessibility is reached by examining contrast ratio between the below hex value and combined image + gradient overlay. Use tool here: https://www.brandwood.com/a11y/
- Example (do not remove or edit):
    .pg_Index .current-issue-title,
    .pg_Index .widget-IssueInfo .article-issue-info .issue,
    .pg_Index .widget-IssueInfo .article-issue-info .volume,
    .pg_Index .widget-IssueInfo .article-issue-info .ii-pub-date {
 		color: #fff;
	}
*/

.pg_Index .current-issue-title,
.pg_Index .widget-IssueInfo .article-issue-info .issue,
.pg_Index .widget-IssueInfo .article-issue-info .volume,
.pg_Index .widget-IssueInfo .article-issue-info .ii-pub-date {
 color: var(--white) !important;
}


/* HERO BUTTON COLOR

- Change the below hex value to change color of button.
- Ensure AA Accessibility is reached by entering below hex value into the left box here https://contrast-ratio.com/#white-on-#A41E22
- Example (do not remove or edit):
	.pg_Index .hero-row .button {
	    background-color:#A41E22;
	}
*/

.pg_Index .content-main_content .hero-row .button {
    background: var(--button-background-primary) !important;
	color: var(--button-text-primary);
}

.pg_Index .content-main_content .hero-row .button:hover
 {
    background: var(--button-background-secondary) !important;
    color: var(--button-text-secondary);
    border: none;
}

/* TWITTER FEED BOX */
.widget-instance-crt_home-feature-panel-twitter	{
	margin-top: 10px;
	width: 50%;
}

@media only screen and (max-width: 1180px) {
  .widget-instance-crt_home-feature-panel-twitter	{
    width: 100%;
  }
}