/* ============================================= */
/* ===== MICROSITE THEME COLOR OVERRIDES   ===== */
/* ============================================= */
:root {
    --site-primary: #77a794;
    --site-secondary: #2b404d;
    --site-tertiary: #d5893b;
    --white: #ffffff;
    --black: #000;
    --gray-lightest: #fafafa;
    --gray-lighter: #ededed;
}

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

/* HERO BACKGROUND IMAGE + GRADIENT OVERLAY
 
 - How to Change Image: Upload Image through SiteBuilder Image Assets, ensure it has a different filename, update URL with the filename 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.62), rgba(0, 0, 0, 0.97)), url('/data/SiteBuilderAssetsOriginals/Live/Images/spectrum/hero-bg.jpg');
         background-position: center;
         background-repeat: no-repeat;
     }
 */

.pg_Index .hero-row {
    background-image: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.62),
            rgba(0, 0, 0, 0.97)
        ),
        url("/data/SiteBuilderAssetsOriginals/Live/Images/spectrum/hero-bg.jpg") !important;
    background-position: left;
    background-repeat: no-repeat;
    background-color: #000;
}

/*****************************/
/*****************************/
/* added 12.10.21 - mdlobik */
/*****************************/
/*****************************/

.widget-ArticleListNewAndPopular {
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
}

.article-issue-info {
    color: black;
}

.button {
    background-color: #77a794;
    text-decoration: none !important;
}

.btn-wrap .d-b {
    background-color: #77a794;
    text-decoration: none !important;
    transition: 0.3s;
}

.btn-wrap .d-b:hover {
    background-color: #2b404d !important;
    text-decoration: none !important;
}

.button:not(.toggle-left-col__close) {
    background-color: #77a794 !important;
    text-decoration: none !important;
    transition: 0.3s;
}

.button:not(.toggle-left-col__close):hover {
    background-color: #2b404d !important;
}

#issueInfo-Home_MainContentB0B0home-issue-info {
    color: #303030;
}

.cta-button {
    border: 5px solid #77a794;
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
    background-image: none !important;
}

.cta-button a {
    text-decoration: none !important;
    display: block;
    text-align: center;
    vertical-align: middle;
    padding-top: 50px;
    font-size: 26px;
    color: #303030 !important;
    background-color: rgb(119, 167, 148, 0.1) !important;
    transition: 0.3s;
}

.cta-button a:hover {
    background-color: rgb(56, 150, 164, 0.2) !important;
}

.home-announcement-banner {
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
}

.widget-instance-clinical_home-self-serve-content-cta {
    border: none !important;
}

.widget-instance-spectrum_home-self-serve-content-feature-3 {
    margin-top: 20px;
}

.pg_index .widget-IssueInfo .widget-info-wrap .article-issue-img {
    max-width: 325px;
    padding-top: 0px !important;
}

.view-current-issue {
    display: block;
    text-align: center;
    padding-bottom: 30px;
}