/*updated 11/2/23 MF*/

/* 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 {
  max-width: 1920px;
  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;
}
.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;
}
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);
  }
  /*.results #news,
  .content #news,
  .learning #news {
    display: none;
  }*/
  #news a {
    color: var(--breakingNewsText-color);
    font-size: 1.4rem;
    position: absolute;
		right: 1rem;
		top: 1rem;
  }
  /* ======================================================
  =========================NAV=============================
  ====================================================== */
  header {
    max-width: 1920px;
    position: relative;
  }
   /* pipes between top links */
  #menu #links > li:not(:last-child):after {
    content: "|";
    font-size: 15px;
    font-weight: 200;
  }
  /* hiding internal hamburger links/Top Nav */
  #links {
    display: none;
    font-size: 2rem;
    max-width: 100%;
    text-align: center;
    margin: auto;
  }
  /* 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: 100%;
    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;
    gap: 60px;
    margin: 0px 0px 60px 0px; /*space above h1 ribbon*/
    padding: 0 50px 0 0; /*Making search and contact icons appear more center*/
  }
  /* Top search and phone buttons */
  #help img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    padding: 8px;
    position: absolute;
    top: 100px;
    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:hover,
  #suggestions li[aria-selected="true"] {
    background-color: gainsboro;
  }
  /*==============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: 1rem;
    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;
    width: 100%;
  }
  #logo img {
    width: var(--companyLogoMobile-width);
  }
  /* ========================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;
		overflow-y: auto;
  }
  /* 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;
  }
  /* 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(--h1Font-family);
  }
  /* 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);
  }

  /* ==========================================================================================================
  =====================================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 h2 {
    font-size: 4rem;
    padding: 0 40px;
    font-family: var(--h2Font-family);
    display: none;
  }
  /* h3 */
  .carouselmain h3 {
    font-size: 4rem;
    padding: 0 40px;
    font-family: var(--h2Font-family);
    display: block;
  }
  /* 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 {
    font-size: 1.8rem;
    margin: 0 0 2px 0;
    font-weight: 500;
    color: #3d3d3d;
    cursor: pointer;
  }
  #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 {
    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(--h2Font-family);
    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(--h2Font-family);
  }

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

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

  .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: 3rem;
  }
  /* ===========================================================
    =======================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 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;
  }
  
  /* ================================================================================= */
   /* ==============================Global Settings==================================== */
  /* ================================================================================= */
  .content-keywords {
  	display: none;
  }
}
/* ===================================================================================================================================== */
@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;
  }
  /* Unhiding links from hamburger */
  #links {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    margin: 0px;
    padding: 0px;
    position: absolute;
    top: 8px;
    left: 16px;
    font-size: 1rem;
  }
  /* ====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;
  }
  /* =========================
  ===========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;
  }
  /* 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;
    width: 50%;
    padding-left: 20px;
  }
  #logo a {
    margin-top: 40px;
  }
  #logo img {
    width: var(--companyLogo768-width);
    position: relative;
    margin: auto;
  }
  /* 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: flex-start;
    position: absolute;
    top: -35px;
    right: 30px;
    gap: 80px;
  }
  /* 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;
    margin-top: 30px;
  }
  /* ===========================================================
    ==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;
  }
  /* ===========================================================
    ========================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; */
  }
  /* 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: 6rem;
  }

  .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 5%;
    max-width: 1600px; /*sets max width on entire gallery*/
    gap: 30px;
  }
  /* ================CAROUSEL=============== */
  /* flexing all carousel items into row */
  .carouselmain {
    max-height: 480px;
  }
  /* Carousel H2 */
  .carouselmain h2 {
    font-size: 8rem;
  }
  /* =================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;
  }
}
@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;
  }
}
/* ===================================================================================================================================== */

.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;
  }
}