/*updated 5/6/23*/
:root {
	--primary-color: rgb(0, 133, 202);
  --secondary-color: rgb(242, 125, 0);
  --accent-color: rgb(64, 177, 233);
  --gradient-1: --primary-color;
  --gradient-2: --primary-color;
  --gradient-3: --primary-color;
  --primary-font: 'Roboto', sans-serif;
  --secondary-font: 'Roboto', sans-serif;
  --accent-font: var(--secondary-font);
}
/* GLOBAL RESETS */
html {
  font-size: 62.5%;
  font-family: sans-serif;
  list-style: none;
  text-decoration: none;
  animation: fade-in 0.8s;
  scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/**:focus {
  outline: 3px solid var(--focus-color);
  outline-offset: 0px;
  border-radius: var(--line-round);
  transition: none; 
  animation: none; 
}*/
body {
  margin: auto;
}

ul {
  margin: 1.5rem 0;
  line-height: 1.5;
  padding-left: 1.5rem;
}

ul li {
  list-style: none;
  text-decoration: none;
}

body p {
  font-family: var(--paragraphFont);
}

p {
  font-size: 100%;
  margin: 1.5rem 0;
  line-height: 1.5;
}

a {
  list-style: none;
  text-decoration: none;
  color: var(--link-color);
  font-weight: normal;
}

.content a:visited,
.query a:visted {
  color: purple;
}

button a:visited {
  color: initial;
}

.featuredButtons a:visited {
  color: unset;
}

a.benefits-tile:visited {
  color: var(--buttonText-color);
}

a.benefits-tile:visited:hover {
  color: var(--buttonTextOnHover-color);
}

/* ===============PAGEMACRO MIGRATE==================================== */
button {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: inherit;
  border-radius: var(--line-round);
}

h1 {
  margin: 3rem 0;
  line-height: 1;
  font-size: 200%;
  font-weight: bolder;
  font-family: var(--h1Font-family);
}

h2 {
  margin: 2rem 0;
  line-height: 1;
  font-size: 175%;
  font-weight: lighter;
}

h3 {
  margin: 1rem 0;
  line-height: 1.25;
  font-size: 150%;
  font-weight: bold;
}

h4 {
  margin: 1rem 0;
  line-height: 1.25;
  font-size: 150%;
  font-weight: normal;
}

h5 {
  margin: 1rem 0;
  line-height: 1.25;
  font-size: 125%;
  font-weight: normal;
  font-variant: small-caps;
}

h6 {
  margin: 1rem 0;
  line-height: 1.25;
  font-size: 100%;
  font-weight: normal;
  text-transform: uppercase;
}

hr {
  margin: 1rem 0;
}

input {
  vertical-align: middle;
}

input.action {
  padding: 1rem;
  margin: 1rem;
}

figure img {
  width: 100%;
  display: block;
  min-width: 240px;
}

/* =================FORMS======================= */
form label {
  margin: 1rem;
  display: block;
}

form label select,
form label textarea,
form label input[type="tel"],
form label input[type="url"],
form label input[type="text"],
form label input[type="file"],
form label input[type="email"],
form label input[type="search"],
form label input[type="password"] {
  width: 100%;
  display: block;
  padding: 0.5rem;
  font-size: 1.5rem;
  border-radius: 5px;
  border: var(--line-width) solid var(--line-color);
}

/*form label select {
  -webkit-appearance: none;
}*/
form label textarea {
  height: 8rem;
}

/**
 *  PageMacro™ Hidden.
 */
.hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  display: none;
}

/**
 *  PageMacro™ Filled Area.
 */
.area-filled {
  padding: 1rem;
}

/**
 *  PageMacro™ Action.
 */
.action {
  /* line-height: 3.5; */
  padding: 0.5rem 1rem;
  border-radius: var(--line-round);
  cursor: pointer;
}

/**
 * PageMacro™ Blurb.
 */
.blurb {
  position: relative;
  text-align: center;
  overflow: hidden;
  z-index: 1;
}

/**
 *  PageMacro™ Popup.
 */
.popup {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: var(--backgroundOverlay-color);
  -webkit-animation: fade-in 0.25s;
  animation: fade-in 0.25s;
}
/*hides background of embedded videos with class of webinar*/
.dialog:has(.webinar) {
	background: transparent;
  border: none;
  height: 0;
}

.popup>.dialog {
  border-radius: 5px;
  border: var(--line-width) solid var(--line-color);
  background-color: var(--page-color);
}

.popup>.dialog>button.close {
  position: absolute;
  opacity: 0.8;
  background-size: cover;
  background-color: transparent;
  background-image: url("/images/icons/close.png");
}

.popup>.dialog>*:not(button.close) {
  display: block !important;
}

.popup .dialog ul li {
  font-family: var(--primary-font);
}

button[data-popup-id=""]+*,
button[data-popup-id^="popup"]+* {
  display: none;
}

/**
 *  PageMacro™ Fade-In.
 */
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* Leo updates 6/2/22 from EAP-1055 */
.results:not(.search) #filter #sorting li:nth-child(5) {
  display: none;
}

.results.search #filter #sorting li:nth-child(1) {
  display: none;
}

#results>p {
  text-align: center;
  flex: 100;
}

/************************************************************************************************** */
/* ==============LAYOUT==============================================================================
/****************************************************************************************************/
/*==========ABOVE THE FOLD============*/
@media all and (min-width: 0px) {

  /* Breaking news element */
  #news {
    display: var(--newsHideAndShow);
    background: var(--breakingNewsBackground-color);
    font-family: var(--secondary-font);
  }

  /*.results #news,
  .content #news,
  .learning #news {
    display: none;
  }*/
  #news a {
    color: var(--breakingNewsText-color);
    font-size: 1.4rem;
    position: var(--breakingNewsPosition);
    right: 2rem;
    top: 0;
  }

  /* ======================================================
  =========================NAV=============================
  ====================================================== */
  body>header {
    margin: 1rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 3rem;
    min-height: 140px;
  }

  #links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 85%;
    height: min-content;
    min-height: 40%;
    transform: translateX(-101%);
    z-index: 100;
    transition: all ease 0.4s;
    background: white;
    box-shadow: 1px 1px 1px 1px;
    color: rgba(0, 0, 0, 0.3);
    line-height: 2;
    margin: 0;
    padding: 5rem 0;
  }

  /* ====styling top nav links==== */
  #links a {
    margin: auto;
    font-size: 2rem;
    font-weight: 400;
    padding: 5px;
    text-transform: uppercase;
    color: var(--nav-color);
  }

  /* google translate text*/
  .goog-te-gadget a {
    font-size: 1rem !important;
  }

  #links li {
    text-align: center;
    font-size: 2rem;
  }

  #menu #links>li:not(:last-child)::after {
    content: "";
    font-size: 0;
    font-weight: 0;
  }

  #close-links {
    position: absolute;
    left: 20px;
    top: 40px;
    cursor: pointer;
    color: black;
  }

  #menu #links #close-links span::after {
    content: "";
  }

  #my-profile>a {
    display: none;
  }

  .profile-dropdown {
    display: flex;
    flex-direction: column;
  }

  #links .profile-dropdown ul {
    margin: unset;
    line-height: unset;
    padding-left: unset;
  }

  #links .profile-dropdown ul li {
    text-align: center;
  }

  /* Hamburger menu icon */
  #menu button img {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 24px;
    height: 24px;
  }

  /* Top Search and contact positioning*/
  #help {
    /* flex: 1; */
    width: 0%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px;
  }

  /* Top search and phone buttons */
  #help img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    padding: 8px;
    background: var(--helpButtons-color);
  }

  /* TOP Magnifier and phone buttons ON hover effect */
  #help img:hover {
    background: var(--buttonOnHover-color);
    -webkit-transition: 0.4s ease 0.2s;
    transition: 0.4s ease 0.2s;
  }

  /* Hidden search bar and contact menu */
  #search,
  .contact {
    display: none;
  }

  .learning .popup .dialog {
    padding: 0;
  }

  /* Search suggestion list. */
  #suggestions {
    width: 100%;
    margin: 0 0 0 0;
    padding: 8px;
    background-color: gainsboro;
    list-style: none;
    z-index: 101;
  }
  
  #suggestions li {
  	font-size: 1.8rem;
  }

  #suggestions li:hover,
  #suggestions li[aria-selected="true"] {
    background-color: white;
    cursor: pointer;
  }

  /*==============Hidden Overlay Contact form layout==========================*/
  .popup>.dialog>.contact.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex !important;
    margin: auto;
  }

  /* ====================================================================== */
  /* ================ALL POPUPS ELEMENT STYLING============================ */
  /* ====================================================================== */
  .popup>.dialog {
    /* display: flex; */
    padding: 0;
    position: relative;
    top: 10%;
    margin: auto;
    width: 90%;
    max-width: 1000px;
    border: solid 2px var(--contactBorder-color);
  }

  /* Fixing font weight of popup H2 on subpages */
  .popup>.dialog b {
    font-weight: unset;
  }

  /* ==============================Breaking News===================== */
  /* Breaking news element */
  #news {
    /*width: 100%;*/
    text-align: center;
    margin: 0;
    display: var(--newsHideAndShow);
  }

  #news a {
    font-size: 1.4rem;
  }

  /* ==================================== */
  /*============SEARCH BAR=============== */
  /* ==========CONTACT MENU============== */
  /* ==================================== */
  /* Search bar. */
  #search {
    height: 100%;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 50%;
    flex: 1 1 50%;
  }

  #search label {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin: 0;
  }

  #search input[type="search"] {
    border: none;
    height: 50px;
    font-size: 2.8rem;
    text-align: center;
  }

  #search button {
    width: 2rem;
    height: 2rem;
    border: none;
    background: transparent;
    cursor: pointer;
    position: absolute;
    top: 16px;
    right: 10px;
  }

  #search button img {
    width: 2rem;
    opacity: 0.5;
  }

  /* ==================================== */
  .popup>.dialog>#search {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  /*================Contact form design======================*/
  .contact {
    color: var(--companyName-color);
  }

  .contact>* {
    max-width: 100%;
    margin: auto;
  }

  .contact h2 {
    font-family: unset;
    font-size: 1.5rem;
    font-weight: 500;
    padding: 2rem;
  }

  .contact p {
    border-left: 1px solid rgb(128, 128, 128);
    padding: 1rem;
    width: 50%;
    font-size: 2rem;
    font-weight: 400;
    color: var(--contactInfo-color);
  }

  /* setting phone "tel" anchor link to inherit font color */
  .contact a {
    color: inherit;
  }

  /* =========================Logo======================================== */
  /* Company Logo Positioning */
  #logo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 0 3rem;
  }

  #logo img {
    width: var(--companyLogoMobile-width);
    max-width: 100%;
    max-height: 15rem;
    margin: 1rem 0;
  }
  
  .logo {
  	max-width: 600px;
  }

  /* ========================HEADER============================================== */
  .ribbon.blurb {
    -ms-flex-flow: row;
    flex-flow: row;
  }

  /* H1 ribbon ("Welcome to our new site")*/
  .ribbon {
    height: 80px;
    width: 100%;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: var(--ribbonBackground-color);
    color: var(--ribbonText-color);
    white-space: nowrap;
    padding-left: 20px;
  }

  .ribbon header {
    height: 80px;
    width: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .ribbon footer {
    height: 80px;
    width: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }

  .ribbon button {
    background: var(--carouselButton-color);
    color: var(--carouselButtonText-color);
    border-radius: var(--line-round);
    margin: 0 10px;
    padding: 10px;
  }

  .ribbon button:hover {
    background: var(--carouselButtonHover-color);
    color: var(--carouselButtonTextHover-color);
    -webkit-transition: 0.4s ease;
    transition: 0.4s ease;
  }

  /* hidden tour element */
  .overlay {
    display: none;
    /*height: 80vh;*/
    height: 0;
    /*overflow-y: auto;*/
  }

  iframe {
    /*min-height: 50vh;*/
    max-height: 80vh;
    background: white;
  }

  /* commented out below in case revert is needed -mf 10/17/22 */
  /* .overlay {
    display: none;
    height: 80vh;
		overflow: hidden;
  } */
  /* Featured section w/ HERO / background image (image located in custom.css) */
  #featured {
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: cover;
    height: 300px;
    width: 100%;
    /*background-position: -120px bottom;*/
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    background-image: url("../images/monthly/monthly.webp");
  }

  /* Hiding Hero Paragraph on small screens */
  .featuredParagraph {
    display: none;
    color: var(--featuredParagraph-color);
  }

  /* Setting container and aligning of HERO items */
  .featuredArticle {
    width: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    margin: 0;
    padding: 20px 0 40px 0;
    background: var(--heroOverlay-color);
    color: var(--featuredText-color);
    z-index: 0 !important;
  }

  /* h1 and h2 header */
  .featuredArticle header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 150px;
    margin: 20px;
  }

  /* hiding "featured this month" on mobile */
  .featuredArticle h1 {
    display: none;
    margin: 0;
    font-family: var(--h1Font-family);
  }

  .featuredArticle h2 {
    font-size: 6rem;
    margin: 0;
    font-family: var(--h2Font-family);
  }

  /* buttons in featured section */
  .featuredButtons p {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    gap: 20px;
    font-size: 1.1rem;
    margin: 0 0 0 0;
  }

  .featuredButtons * {
    font-weight: normal;
    color: var(--buttonText-color);
  }

  /* Overwriting Pagemacro button margin on "view resources" button */
  .featuredButtons p .action {
    margin: 0;
    /* And making button look normal */
    padding: 8px 12px;
    white-space: nowrap;
    border-radius: var(--line-round);
  }

  .featuredButtons button {
    font-family: var(--h1Font-family);
  }

  /* hiding default button next to view webinar */
  .featuredButtons p img {
    display: none;
  }

  /* Publisher */
  .home .carousel-overlay {
    background: var(--heroOverlay-color);
    border-radius: var(--line-round);
  }

  .home #featured {
    padding: 0;
    background-image: unset;
  }

  .home #featured .featuredArticle {
    width: 100%;
    height: 100%;
    align-items: center;
    background: var(--heroOverlay-color) !important;
    overflow: visible;
    flex-flow: column nowrap;
  }

  .home .featuredArticle>section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .home .featuredArticle>div {
    display: block !important;
    width: 75%;
  }

  .home .featuredArticle header {
    width: auto;
  }

  .home #featured .featured h3 {
    font-family: var(--accent-font);
    font-size: 2.6rem;
    font-weight: normal;
  }

  .home #featured .featured h2 {
    display: none;
  }

  .home .featuredArticle header {
    margin: 0;
  }

  .home .featuredArticle header h3 {
    margin: 0;
  }

  .home .featuredArticle header span {
    display: none;
  }

  .home .featuredArticle div p {
    font-size: 1.2rem;
  }

  .home .featuredArticle p {
    display: flex;
    gap: 2rem;
  }

  .home .featuredArticle p a {
    white-space: nowrap;
  }

  .home .slide {
    min-height: 300px;
  }

  .home #slide-1,
  .home #slide-2 {
    background-size: cover;
  }

  .home #slide-2 {
    background-position: bottom;
  }

  .home .single-slide #slide-1 {
    background-position: bottom;
  }

  .home .carousel-overlay button.action {
    margin: 1rem;
  }

  .home .results aside .carousel .elastic.animated {
    min-height: 300px;
  }

  /* End Publisher */

  /* styling button for webinar launch button */
  .webinarLink {
    background: var(--button-color);
    padding: 11px 20px;
    border-radius: var(--line-round);
    font-weight: unset;
    /* font-size: 1.9rem; */
  }

  /* Button styling "view webinar, view resources" on hero*/
  .webinarLink,
  .action {
    background: var(--button-color);
    color: var(--buttonText-color);
    border: none;
    font-family: var(--secondary-font);
  }

  /* Hero and gallery button hover styling */
  .action:hover {
    background: var(--buttonOnHover-color);
    -webkit-transition: 0.6s ease 0.1s;
    transition: 0.6s ease 0.1s;
    color: var(--buttonTextOnHover-color);
  }

  .webinarLink:hover {
    background: var(--buttonOnHover-color);
    -webkit-transition: 0.6s ease 0.1s;
    transition: 0.6s ease 0.1s;
    color: var(--buttonTextOnHover-color);
  }
  /* Core tile/benefits tile popup */
  .core-tiles:not(.resource-page) {
    text-align: center;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    background: white;
  }
  
  .core-tiles:not(.resource-page) header {
    display: none;
  }

  .core-tiles:not(.resource-page) img {
    width: 100%;
  }

  .core-tiles:not(.resource-page) h1 {
    color: var(--featuredText-color);
    font-family: var(--galleryHeader-font);
    font-size: 3rem;
    width: 100%;
    text-align: center;
  }

  .benefits-links {
    text-align: center;
  }

  .benefits-tile {
    height: auto;
    width: 40%;
    min-width: 280px;
    margin: 1rem;
    padding: 0.6rem;
    font-family: var(--galleryHeader-font);
    font-size: 1.5rem;
    font-weight: 600;
    color: white;
    background: var(--button-color);
    border-radius: 20px;
    text-align: center;
    margin: 1rem auto;
    display: inline-block;
    text-decoration: none;
  }
  
  .benefits-tile:hover {
    background: var(--buttonOnHover-color);
    color: var(--buttonTextOnHover-color);
    transition: all 0.4s ease-in-out;
  }

  /* ==========================================================================================================
  =====================================BELOW THE FOLD==========================================================
  =============================================================================================================*/
  .gallery h1 {
    font-size: 3rem;
    font-family: var(--galleryHeader-font);
    width: 100%;
    text-align: center;
    color: var(--galleryHeader-color);
  }

  /* ==================================
  ================GALLERY==============
  ================================== */
  .home .gallery {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    /* margin: 0; */
    padding: 0 10%;
    max-width: 1500px;
    /*sets max width on entire gallery*/
    /* gap: 60px ; */
  }

  /* image styling inside container */
  .home .blurb.compact>figure {
    position: absolute;
    width: 100%;
    z-index: -1;
    position: absolute;
    top: 15%;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
  }

  /* gallery transparent overlay box */
  .home .blurb.compact>header {
    background-color: var(--backgroundOverlay-color);
    color: var(--galleryText-color);
    padding: 0 15px;
    height: 33%;
    width: 100%;
    bottom: 0;
    position: absolute;
  }

  /* gallery heading text size */
  .home .blurb.compact>header h2 {
    font-size: 2rem;
    font-weight: 500;
    margin: 1rem 0;
    font-family: var(--h1Font-family);
  }

  /* gallery paragraph/content text size */
  .home .blurb.compact>header h3 {
    font-size: 1.3rem;
    font-weight: 400;
    font-family: var(--h2Font-family);
  }

  /* ======GALLERY IMAGE RESPONSIVENESS===== */

  /* Image Container styling and sizing */
  .home .blurb.compact {
    width: 340px;
    height: 340px;
    border-radius: 10px;
    box-shadow: 1px 1px 1px 1px;
    color: rgba(0, 0, 0, 0.3);
    /*shadow color*/
    z-index: 0;
  }

  /* PageMacro™ Blurb - Animated. */
  .blurb.animated>figure img {
    -webkit-transition: ease-in-out 0.5s;
    transition: ease-in-out 0.5s;
  }

  /* IMAGE SCALE ON HOVER */
  .blurb.animated:hover>figure img {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }

  /* 'OnHover' "Read More" button */
  .home .gallery footer span {
    font-size: 1.5rem;
    padding: 10px 20px;
    font-weight: bolder;
  }

  .blurb.overlaid>footer {
    position: absolute;
    height: 100%;
    width: 100%;
    bottom: 0;
    left: 0;
  }

  /* makes overlay take entire container */
  .blurb.overlaid>footer p {
    margin: 0;
    height: 100%;
  }

  .blurb.overlaid>footer a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
  }

  /* hides button until hover */
  .blurb.overlaid>footer a>span {
    visibility: hidden;
    position: relative;
    top: calc(50% - 4rem);
  }

  .blurb.overlaid>footer a:hover>span,
  .blurb.overlaid>footer a:focus>span {
    visibility: visible;
  }

  /* image overlay on hover color */
  .blurb.overlaid>footer a:hover,
  .blurb.overlaid>footer a:focus {
    background-color: var(--backgroundOverlay-color);
  }

  /* =======================================================================
  ================CAROUSEL======GLOBAL======================================
  ======================================================================= */
  .projector .media,
  .projector .carouselmain,
  .projector .area-filled {
    background: var(--carouselBackground-color);
    color: var(--carouselText-color);
    font-family: var(--carousel-font);
  }

  .blurb.elastic {
    background: transparent;
  }

  /**
 * PageMacro™ Blurb.
 */
  .blurb {
    position: relative;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    /*justify-content: space-between;*/
    z-index: 1;
  }

  .blurb>figure {
    margin: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column;
    flex-flow: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .blurb>figure div {
    height: 100%;
  }

  .blurb>figure div>img {
    height: auto;
    max-width: 100%;
    width: auto;
    margin: 0 auto;
  }

  /* Flips H2 and image stacking order */
  .blurb.elastic>figure {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
    opacity: 1;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 100%;
    flex: 1 0 100%;
  }

  /* makes section stop at footer Nav */
  .projector {
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column;
    flex-flow: column;
  }

  /* centering heading text above carousel */
  .projector .media {
    text-align: center;
  }

  /* carousel H1 text size */
  .projector h1 {
    font-size: 2.8rem;
  }

  /* flexing all carousel items into row */
  .carouselmain {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    z-index: 0;
    /* max-height: 600px; */
  }

  /* Carousel H2 */
  .carouselmain h3 {
    font-size: 4rem;
    padding: 0 40px;
    font-family: var(--accent-font);
    font-weight: normal;
  }

  /* hiding h3 */
  .carouselmain h2 {
    display: none;
  }

  /* carousel paragraph text */
  .carouselParagraph {
    font-size: 1.2rem;
    width: 100%;
    margin: auto;
    overflow: visible;
  }

  /* positioning visit learning center button */
  .carousel footer {
    display: flex;
    justify-content: center;
  }

  /* visit learning center button */
  .carousel footer a span {
    border: none;
    /*eliminating pagemacro border*/
    font-size: 1.1rem;
    padding: 10px;
    font-weight: 500;
    border-radius: var(--line-round);
    background: var(--carouselButton-color);
    color: var(--carouselButtonText-color);
    display: block;
    min-width: 180px;
    max-width: 240px;
  }

  /* visit learning center button hover effect*/
  .carousel footer a span:hover {
    background: var(--carouselButtonHover-color);
    color: var(--carouselButtonTextHover-color);
    -webkit-transition: 0.6s ease-in-out 0.2s;
    transition: 0.6s ease-in-out 0.2s;
  }

  /* Prev and Next arrows/button sizing */
  .carouselmain .back img,
  .carouselmain .next img,
  #related .back img,
  #related .next img {
    width: 25px;
    height: 25px;
    cursor: pointer;
  }

  .next,
  .back {
    max-width: 80px;
    max-height: 80px;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
  }

  /* makes slides fade on start.html carousel and topic carousel */
  .projector .controls button.list[aria-expanded="true"]~.playlist {
    display: block;
    -webkit-animation: fade-in 1s;
    animation: fade-in 1s;
  }

  /* makes view featured menu hidden until clicked */
  .projector .controls button.list~.playlist {
    display: none;
  }

  /* play pause buttons */
  .projector .controls button {
    background-repeat: no-repeat;
    width: 115px;
    height: 3rem;
    border: none;
    background-size: cover;
    background-color: transparent;
    border-radius: 0;
    white-space: nowrap;
    color: var(--carouselText-color);
  }

  /* Hiding learning centers until clicked */
  .projector .subject {
    display: none;
  }

  /* Removing corner curves and pagemacro border on bottom "view featured" 
  "play/pause" and "view all" buttons container*/
  .projector .controls {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    border: 1px solid var(--carouselBackground-color);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 1% 2%;
    overflow: visible !important;
    /*attempting to fix IOS cutoff*/
    z-index: 0;
  }

  .home .projector .controls,
  .learning .projector .controls,
  .resource-page .projector .controls {
    align-items: center;
  }

  .projector .controls .playlist {
    width: 100%;
    z-index: 1;
  }

  /* view featured and view all spans sizing */
  .featureViewButton {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 80px;
    height: 60px;
    /*fixing word cutoff on safari*/
    overflow: visible !important;
    font-size: 1.8rem;
    color: var(--carouselText-color);
  }

  /* carousel play button */
  .projector .controls button.play {
    background-image: url("/images/icons/lc_play.png");
    background-size: contain;
    height: 15px;
    width: 15px;
    margin-bottom: 1.6rem;
  }

  /* carousel pause button */
  .projector .controls button.play.running {
    background-image: url("/images/icons/lc_pause.png");
    background-size: contain;
    height: 15px;
    width: 15px;
    margin-bottom: 1.6rem;
  }

  /* View Featured slide down */
  .playlist h2 {
    display: none;
  }

  .playlist ol {
    list-style: none;
    list-style-position: inside;
    line-height: 4rem;
  }

  .playlist ol li {
    border: none;
    /*removes page macro border*/
  }

  .playlist ol li a {
    color: var(--h2Text-color);
    font-size: 1.5rem;
  }

  /**
 * PageMacro™ Projector.
 */
  .projector .carousel {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    list-style: none;
    overflow: hidden;
  }

  .projector .carousel .slide {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    display: none;
  }

  .projector .carousel .slide.active {
    display: block;
    -webkit-animation: fade-in 1s;
    animation: fade-in 1s;
  }

  .projector .controls .playlist .entry.active a {
    font-weight: bold;
  }

  /* *********************************************************************************** */
  /* *********************************************************************************** */

  /* *********************************************************************************** */
  /* *********************************************************************************** */

  /* ================================================================================= */
  /* ==============================SITEMAP============================================ */
  /* ================================================================================= */
  #sitemap {
    padding: 3rem;
    border-bottom: 1px solid black;
  }

  /* targeting all anchors */
  #sitemap~a {
    font-weight: 400;
  }

  /* keeps columns tidy */
  #sitemap>ul>li {
    max-width: 90%;
    margin: 0;
    position: relative;
    padding-left: 4rem;
    /*space between icons/images and list/text*/
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Vertical space between divs */
  #sitemap>ul>li>div {
    margin-bottom: 1.5rem;
  }

  /* ==========ICON/Image Spacing and styling ===========*/
  #sitemap>ul>li h2>img {
    width: auto;
    height: auto;
    max-width: 24px;
    position: absolute;
    left: 0;
  }

  #sitemap h2:not(.modal h2):not(#sitemap.newsworthy h2) {
    font-size: 1.8rem;
    margin: 0 0 2px 0;
    font-weight: 500;
    color: #3d3d3d;
    cursor: pointer;
  }
  
  #sitemap >section >div >h2:not(.modal h2):not(#sitemap.newsworthy h2) {
    cursor: default;
  }

  #sitemap .personal>h2 b {
    color: var(--sitemapPersonal-color);
  }

  #sitemap .curated>h2,
  #sitemap .curated b,
  #sitemap .curated>h2>b>a {
    color: var(--sitemapCurated-color);
    font-weight: bold;
  }

  #sitemap .curated a {
    color: black;
  }

  #sitemap .subject>ul>li a {
    font-size: 1.2rem;
    color: black;
  }

  #sitemap p:not(.modal p) {
    color: black;
    font-size: 1.2rem;
    margin: 0;
    font-weight: lighter;
  }

  /* HIDES VIEW/SHOW ALL BUTTONS */
  #sitemap button[data-popup-id] {
    margin-bottom: 15px;
    position: initial;
    display: none;
    position: absolute;
    top: -0.1rem;
    right: 0;
  }

  /* =========================================================
  ===============FROM PROGRAM.CSS=============================
  ========================================================= */
  #sitemap ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  #sitemap .personal>ul {
    display: none;
  }

  #sitemap button[data-popup-id] b {
    font-size: x-small;
    text-transform: uppercase;
  }

  /* ========HIDES LINKS/CONTENT AFTER 5 ITEMS=========== */
  #sitemap .subject>ul>li {
    display: inline;
  }

  #sitemap .subject>ul>li::before {
    content: "/";
  }

  #sitemap .subject>ul>li:first-child::before {
    content: none;
  }

  #sitemap .subject>ul>li:nth-child(n + 5) {
    display: none;
  }

  /* ================================================================================= */
  /* ==============================FOOTER============================================= */
  /* ================================================================================= */
  /* postitioning footer elements */
  #notices {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    align-items: center;
    padding: 1.6rem;
    text-transform: uppercase;
    text-align: center;
  }

  /* styling font */
  #notices p a {
    color: var(--notices-color);
    font-size: 1rem;
    font-weight: 400;
    border-right: solid 1px var(--nav-color);
    padding: 0 4px;
  }

  /* clears pipe on last element */
  #notices p a+a+a {
    border: none;
    padding: 0;
  }

  #copyright {
    color: black;
  }

  #end {
    display: none;
  }

  /* ================================================================================= */
  /* ==============================POPUPS============================================= */
  /* ================================================================================= */
  .popup .subject {
    position: relative;
    padding: 3rem;
    width: 100%;
  }

  /* Heading styling */
  .popup .subject h2 b {
    font-family: var(--accent-font);
    font-size: 3rem;
    color: black;
  }

  /* Icon styling */
  .popup .subject h2 img {
    position: absolute;
    opacity: 0.2;
    width: 20%;
    top: 5%;
    right: 5%;
  }

  /* How many columns the list should occupy */
  .popup .subject ul {
    -webkit-columns: 1;
    -moz-columns: 1;
    columns: 1;
    padding: 0;
  }

  /* List item styling */
  .popup .subject a {
    font-size: 1.4rem;
    color: var(--popupText-color);
  }

  .popup>.dialog>button.close {
    width: 2rem;
    height: 2rem;
    top: -40px;
    right: -20px;
  }

  /* ================================================================================================================================================ */
  /* ====================================================History and Favorite======================================================================== */
  /* ==================================================================================================================================================*/
  .history .navbar,
  .history .topbar,
  .library .navbar,
  .library .topbar {
    display: none;
  }

  #results #recent {
    font-size: 3rem;
    padding-left: 3rem;
  }

  .history .search ol,
  .library .search ol {
    width: 98%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    margin: auto;
  }

  .history .search ol li,
  .library .search ol li {
    width: 90%;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    line-height: 20px;
    margin: auto 4rem;
    padding: 0 0 2rem 3rem;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid black;
  }

  .history .search ol li label img,
  .library .search ol li label img {
    display: none;
  }

  .history .search ol li label input,
  .library .search ol li label input {
    top: 18px;
    left: -30px;
    right: unset;
    display: none;
  }

  .history .search ol li a,
  .library .search ol li a {
    text-decoration: none;
    font-size: 1.6rem;
    line-height: 2rem;
  }

  .history .search ol li:hover,
  .library .search ol li:hover {
    background: rgb(255, 222, 222);
    font-size: 110%;
  }

  .history a,
  .library a {
    color: black;
    padding-bottom: 10px;
  }

  .history form label,
  .library form label {
    margin: 0;
  }

  /* .history .search ol li a:hover{
      text-decoration: underline;
      font-size: 110%;
    } */
  /*The actual popup*/
  object {
    width: 100%;
    height: 900px;
    max-width: 1200px !important;
  }

  /*===RJ guest modal===*/
  .modal {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 9999;
    background: rgba(0, 0, 0, .6);
    overflow: hidden;
  }

  .modal-content {
    width: 50vw;
    height: auto;
    position: relative;
    top: 10%;
    text-align: center;
    padding: 3rem;
    background: white;
    border-radius: var(--line-round);
    min-width: 300px;
    max-width: 900px;
    margin: auto;
  }

  .modal h2 {
    font-size: 3rem;
    font-family: var(--accent-font);
  }
  .modal h3 {
  	font-family: var(--accent-font);
    font-size: 3rem;
    font-weight: normal;
  }

  .modal p {
    font-size: 2rem;
  }

  .modal a,
  .modal button {
    color: white;
    margin: 1rem;
  }

  .modal .close {
    position: absolute;
    top: -35px;
    right: -25px;
    opacity: 0.8;
    background-size: cover;
    background-color: transparent;
    background-image: url("https://web.personaladvantage.com/images/icons/close.png");
    width: 20px;
    height: 20px;
  }

  .modal .close:hover {
    cursor: pointer;
  }
}

/* ===================================================================================================================================== */
@media all and (min-width: 330px) {

  /* =========================================================
    ==============NAV AND SEARCH/CONTACT========================
    ========================================================= */
  /*
    Contact form design
    */
  .contact h2 {
    font-size: 2rem;
  }

  /* ===========================================================
    =======================GALLERY================================
    ============================================================*/
  /* ======GALLERY IMAGE RESPONSIVENESS===== */
  .home .gallery {
    gap: 20px;
    margin: 0 auto 5% auto;
  }

  /* Positioning image inside container */
  .home .blurb.compact>figure {
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
    top: 8%;
    /* left: 0; */
  }
}

/* ===================================================================================================================================== */
@media all and (min-width: 500px) {

  /* ===========================================================
    ========================GALLERY===============================
    ============================================================*/
  /* .home .blurb.compact {
      width: 480px;
      height: 480px;
    } */
  /* image styling inside container */
  .home .blurb.compact>figure {
    top: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  /* gallery overlay header text */
  .home .blurb.compact>header h2 {
    font-size: 3rem;
  }

  /* gallery paragraph/content text*/
  .home .blurb.compact>header h3 {
    font-size: 1.7rem;
  }

  /* =============================================
  ================CAROUSEL==========================
  =============================================== */
  /* Carousel H2 */
  .carouselmain h3 {
    font-size: 5rem;
    padding: 0;
  }

  /* carousel paragraph text */
  div .carouselParagraph {
    width: 100%;
    padding: 0;
  }

  .carouselParagraph p {
    font-size: 1.8rem;
    padding: 0 60px;
  }

  /* Prev and Next arrows/button sizing */
  .carouselmain .back img,
  .carouselmain .next img,
  #related .back img,
  #related .next img {
    width: 50px;
    height: 50px;
  }

  /* View Featured slide down */
  .playlist ol li a {
    font-size: 2rem;
  }
}

/* ===================================================================================================================================== */
@media all and (min-width: 600px) {

  /*=================Overlay Contact form layout=========*/
  .contact p {
    font-size: 1.8rem;
    padding: 2rem;
  }

  /* ==================Search Bar===================== */
  #search input[type="search"] {
    font-size: 2rem;
  }

  #search button {
    width: 4rem;
    height: 3rem;
    top: 20px;
  }

  #search button img {
    width: 3rem;
    top: 0px;
  }

  .popup>.dialog>#search {
    margin: 1rem auto;
  }

  /*===Hiding Elements for Mobile-Only===*/
  .mobile-only {
    display: none;
  }


  /* ================================================================================= */
  /* ==============================FOOTER============================================= */
  /* ================================================================================= */
  /* postitioning footer elements "site feedback, privacy, copyright"*/
  #notices {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 1.6rem 4rem;
  }

  /* styling font */
  #notices p a {
    padding: 0 20px !important;
  }
}

/* ===================================================================================================================================== */
@media all and (min-width: 650px) {

  /* ===========================================================
    ==Background image AND HERO ELEMENTS/Buttons responsiveness===
    ============================================================*/
  /* Eliminating right margin */
  .featuredArticle {
    margin-right: 0;
  }

  /* increasing header container size to unwrap h1 and h2 over buttons */
  .featuredArticle header {
    width: 200px;
  }
}

/* ===================================================================================================================================== */
/* =================================
  =====Tablets and Medium Screens=====
  ==================================*/
@media all and (min-width: 768px) {
  .two-column {
    column-count: 2;
    column-gap: 50px;
  }

  .two-column>* {
    display: inline-block;
    width: 100%;
  }

  /* ==================NAV=================== */
  /* =====HAMBURGER========= */
  /* Hiding Hamburger img on laptops and larger */
  #menu button {
    display: none;
  }

  #menu #links>li:not(:last-child)::after {
    content: "|";
    font-size: 15px;
    font-weight: 200;
  }

  #links {
    display: flex;
    flex-flow: row;
    align-items: baseline;
    padding: unset;
    position: absolute;
    top: 0;
    width: unset;
    height: unset;
    margin: 0;
    transform: translateX(0) !important;
    z-index: 2;
    background: unset;
    box-shadow: unset;
    line-height: 1;
    min-height: 0;
  }

  #close-links {
    display: none;
  }

  /* ====styling top nav links==== */
  #links a {
    margin: auto;
    font-size: 1.4rem;
    font-weight: 400;
    padding: 10px;
    text-transform: uppercase;
    color: var(--nav-color);
  }

  /* pipes between top links */
  #menu #links>li:not(:last-child):after {
    content: "|";
    font-size: 15px;
    font-weight: 200;
  }

  #menu #links>li:last-child {
    font-size: 15px;
  }

  #my-profile {
    position: relative;
  }

  #my-profile>a {
    display: inline;
  }

  .profile-dropdown {
    display: none;
    position: absolute;
    min-width: 165px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 99;
    background: white;
    text-align: left;
  }


  #my-profile:hover .profile-dropdown,
  #my-profile:focus .profile-dropdown,
  #my-profile:active .profile-dropdown,
  #my-profile:focus-visible .profile-dropdown,
  #my-profile:focus-within .profile-dropdown {
    display: block;
  }

  #links .profile-dropdown ul li {
    text-align: left;
  }

  .profile-dropdown a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }

  .profile-dropdown a:hover {
    background-color: #ddd;
  }

  /* =========================
  ===========HEADER===========
  ========================= */
  /* flexes logo and help icons into row on big screen */
  .home>header,
  .results>header,
  .content>header,
  .learning>header,
  .resource-page>header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 180px;
    padding: 2rem 0 0 0;
    margin: 0;
  }

  /* company logo adjustments */
  #logo {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem;
    padding: 0 0 0 2rem;
  }

  #logo a {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #logo img {
    width: var(--companyLogo768-width);
    max-width: 45rem;
  }

  /* Search and Contact Bars fixed to right for big screens*/
  #help {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: center;
    flex-flow: row;
    padding-right: 2rem;
    width: 50%;
    gap: 20px;
  }

  /* resizing search and contact Icons */
  #help img {
    width: 65px;
    height: 65px;
    padding: 12px;
  }

  /* aligning ribbon h1 text left on big screens*/
  .ribbon {
    padding: 0 0 0 10px;
    text-align: start;
    font-size: 1.5rem;
  }

  /* ===========================================================
    ==Background image AND HERO ELEMENTS/Buttons responsiveness===
    ============================================================*/
  /* Adjusting background (HERO) Image for desktop screens */
  #featured {
    max-height: 800px;
    width: 100%;
    height: 500px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 5% 0 0;
  }

  .blurb.elastic.featuredArticle {
    min-height: 300px;
    height: 440px;
    width: 75%;
    /* margin: 5%; */
    padding: 0;
  }

  /* gap between h1 and h2 */
  .featuredArticle header {
    gap: 20px;
    margin: 0;
  }

  /* Resizing header text */
  .featuredArticle h2 {
    font-size: 8rem;
  }

  /* =====================================================
  =====Showing/Unhiding HERO paragraph on large screens===
  ===================================================== */
  .featuredParagraph {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 1.6rem;
    margin: 0;
    padding: 0;
    font-weight: 400;
  }

  /* Aligining paragrah to right */
  .featuredArticle div {
    overflow: visible;
  }

  /* prevents button text from wrapping */
  .webinarLink {
    white-space: nowrap;
  }

  /* Resizing container for paragraph to sit nicely */
  .featuredArticle {
    min-height: 500px;
    gap: 20px;
  }

  /* buttons in featured section */
  .featuredButtons p {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 20px;
    font-size: 1.4rem;
  }

  .featuredArticle header h2,
  .featuredArticle header h1 {
    margin: 0;
  }

  /* Publisher */
  .home #featured .featuredArticle {
    width: 55%;
  }

  .home .featuredArticle header span {
    font-size: 2.4rem;
    font-family: var(--h1Font-family);
  }

  .home .featuredArticle p a {
    font-size: 1.8rem;
  }

  /* End Publisher */
  /* ===========================================================
    ========================GALLERY===============================
    ============================================================*/
  /* ======GALLERY IMAGE RESPONSIVENESS===== */
  .home .gallery {
    margin: 0% auto 5% auto;
    padding: 0;
  }

  /* Positioning image inside container */
  .home .blurb.compact>figure {
    -webkit-transform: scale(1);
    transform: scale(1);
    top: 0%;
    /* left: 0; */
  }

  /*Core tiles/benefits tile popup*/
  .core-tiles:not(.resource-page) .benefits-links {
    columns: 2;
  }

  .core-tiles:not(.resource-page) .benefits-tile {
    width: 90%;
  }

  /* Image Container styling and sizing */
  /* .home .blurb.compact {
      width: 480px;
      height: 480px;
    } */
  /* =====================================
  ================CAROUSEL================
  ===================================== */
  /* Flips carousel (right aligned image,left aligned text) */
  .blurb.elastic>figure {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }

  /* visit learning center button */
  .carousel footer a span {
    font-size: 2rem;
    margin-right: 0;
    white-space: nowrap;
  }

  /* Prev and Next arrows/button sizing */
  .carouselmain .back img,
  .carouselmain .next img,
  #related .back img,
  #related .next img {
    width: 80px;
    height: 80px;
  }

  /* paragraph padding*/
  .carouselParagraph {
    padding: 0 5%;
    margin: 0;
  }

  /* view featured and view all spans sizing */
  .featureViewButton {
    width: auto !important;
  }

  /* PageMacro™ Blurb - Elastic. */
  .blurb.elastic {
    height: calc(100% - 2rem);
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .blurb.elastic * {
    width: auto;
    height: auto;
    position: static;
    visibility: visible;
  }

  .blurb.elastic>* {
    width: 50%;
  }

  /* =================SITEMAP=============== */
  /* =================SITEMAP=============== */
  /* =================SITEMAP=============== */
  #sitemap>ul {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 1.5rem;
    -moz-column-gap: 1.5rem;
    column-gap: 1.5rem;
  }

  /* ================================================================================= */
  /* ==============================POPUPS============================================= */
  /* ================================================================================= */
  .popup .subject h2 b {
    font-size: 8rem;
  }

  .popup .subject h2 img {
    width: 15%;
    max-width: 180px;
  }

  .popup .subject ul {
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
  }

  .popup .subject a {
    font-size: 2rem;
  }

  .popup .dialog ul li {
    break-inside: avoid;
  }

  .popup .dialog #workplace ul li:last-child {
    padding-bottom: 3rem;
  }

  /* ========================Carousel play/pause buttons===================================== */
  /* carousel play button */
  .projector .controls button.play {
    height: 25px;
    width: 25px;
    margin-top: 0;
  }

  /* carousel pause button */
  .projector .controls button.play.running {
    height: 25px;
    width: 25px;
    margin-top: 0;
  }

  /*===RJ guest modal===*/
  .modal-content {
    height: 50vh;
    padding: 8rem;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
  }

  .modal h2 {
    font-size: 5rem;
  }

  .modal a {
    font-size: 1.6rem;
  }
}

/* ===================================================================================================================================== */
@media all and (min-width: 1024px) {

  /* ============Breaking News=============== */
  #news a {
    font-size: 3rem;
  }

  /* =======================================
  =============HEADER=======================
  ======================================= */

  #logo img {
    width: var(--companyLogo1024-width);
  }

  /* =======================================
  =========HERO/FEATURED SECTION============
  ======================================= */
  .featuredArticle {
    padding: 0;
  }

  /* Keeping HERO paragraph centered under h1 h2 and buttons */
  .featuredArticle div p {
    font-size: 1.8rem;
  }

  /* ===========================================================
    ========================GALLERY===============================
    ============================================================*/
  /* ======GALLERY IMAGE RESPONSIVENESS===== */

  /* Image Container styling and sizing */
  /* .home .blurb.compact {
      max-width: 380px;
      max-height: 380px;
    } */
  /* ==================================
    ================GALLERY==============
    ================================== */
  .home .gallery {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    /* margin: 0; */
    padding: 0;
    max-width: 1400px;
    /*sets max width on entire gallery*/
    gap: 30px;
  }

  /* Publisher */
  .home .featuredArticle div p {
    font-size: 1.6rem;
  }

  /* End Publisher */

  /* ================CAROUSEL=============== */
  /* flexing all carousel items into row */
  .carouselmain {
    max-height: 480px;
  }

  /* Carousel H2 */
  .carouselmain h3 {
    font-size: 5rem;
  }

  /* =================SITEMAP=============== */
  /* =================SITEMAP=============== */
  /* =================SITEMAP=============== */
  #sitemap>ul {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 2rem;
    -moz-column-gap: 2rem;
    column-gap: 2rem;
  }

  /* =================================LEARNING CENTER====================================================== */
  .trifold {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
  }

  /* .trifold > *:not(h1) {
      -webkit-box-flex: 1;
          -ms-flex: 1 0 calc(33% - 2rem);
              flex: 1 0 calc(33% - 2rem);
    } */
}

/* ===================================================================================================================================== */
@media all and (min-width: 1200px) {

  /* Adjusting background (HERO) Image for desktop screens */
  #featured {
    height: 500px;
    background-position: left bottom;
  }

  .featuredArticle {
    height: 500px;
  }

  /* hiding "featured this month" on mobile */
  .featuredArticle h1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  /* HERO paragraph*/
  .featuredArticle div p {
    font-size: 2rem;
  }

  /* increasing button font size on big screens */
  .featuredButtons p {
    font-size: 2rem;
  }

  /* Publisher */
  .home .featuredArticle header span {
    display: block;
    font-size: 2.5rem;
    white-space: nowrap;
    font-weight: bold;
  }

  .home #featured .featured h3 {
    font-size: 4rem;
  }

  .home .featuredArticle div p {
    font-size: 1.8rem;
  }

  /* End Publisher */
}

@media screen and (min-width:1600px) {

  /* Publisher */
  .home #featured .featured h3 {
    font-size: 5rem;
  }

  /* End Publisher */
  /* Carousel H2 */
  .carouselmain h3 {
    font-size: 7rem;
  }
}

@media all and (min-width: 1800px) {

  /* ===========================================================
    ========================HERO==================================
    ============================================================*/
  /* Adjusting background (HERO) Image for desktop screens */
  #featured {
    background-position: 0% 30%;
  }

  /* ===========================================================
    ========================GALLERY===============================
    ============================================================*/
  /* ======GALLERY IMAGE RESPONSIVENESS===== */
  /* image position */
  /* .home .blurb.compact figure{
      top: -4% ;   
    } */
  /* Image Container styling and sizing */
  .home .blurb.compact {
    width: 440px;
    height: 440px;
  }
}

/* ============================================================ Animations etc ========================================================================= */

#loading-screen {
  visibility: visible;
  height: 100vh;
  width: 100vw;
  background: white;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader {
  /*border: 16px solid var(--primary-color); */
  border: 16px solid gray;
  /*border-top: 16px solid var(--secondary-color);*/
  border-top: 16px solid lightgray;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin .5s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.slide-right {
  animation: slide-in-right .5s;
}

@keyframes slide-in-right {
  from {
    transform: translateX(-320px);
  }

  to {
    transform: translateX(0px);
  }
}

.slide-down {
  animation: slide-down-animation 1s;
}

@keyframes slide-down-animation {
  0% {
    display: none;
    transform: translate3d(0, -30rem, 0);
    opacity: 0;
  }

  1% {
    display: block;
    transform: translate3d(0, -3rem, 0);
    opacity: 0;
  }

  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}