/********************************************************************************
--- Global Announcements ---
*********************************************************************************/
.announcement__container { display: none; position: relative; padding: 0.5rem 3rem; }
.announcement__container.announcement__active { display: flex; }
.announcement__container.center { justify-content: center;}
.announcement__container p { margin-bottom: 0; }
.announcement__container.apply_max_width p { max-width: 800px; }

/* because of the fixed header, this .announcement__spacer is needed to maintain the spacing of the first element (page banners) below the header. So just turning it transparent.  It's added just below the header in the header.php file */
.announcement__container.announcement__spacer { background: transparent; color: transparent; }

.dark_background_light_text { background: var(--black); color: #fff; }
.dark_background_light_text a.announcement__link { color: var(--secondary); transition: opacity 300ms ease-out; }
.dark_background_light_text a.announcement__link:hover { opacity: .7; }

.light_background_dark_text { background: #fff; color: var(--black); }
.light_background_dark_text a.announcement__link { margin-left: 0.25rem; color: var(--primary);transition: opacity 300ms ease-out; }
.light_background_dark_text a.announcement__link:hover { opacity: .7; }

.announcement__container a.close_me { display: flex; align-self: center; position: absolute; right: 1rem; }
.dark_background_light_text a.close_me { color: #fff; transition: opacity 300ms ease-out; }
.dark_background_light_text a.close_me:hover { opacity: .7; }
.light_background_dark_text a.close_me { margin-left: 0.25rem; color: var(--black); transition: opacity 300ms ease-out; }
.light_background_dark_text a.close_me:hover { opacity: .5; }