/* Added fallbacks to help with CLS, feel free to remove if it doesn't help on your project */
/* Colours */
/* Fluid heading sizes - set your min/max sizes and you're done! */
/* Some device sizes to use with min-width */
/* adjusted breakpoints for above */
/* 100% widths look better than "Snapping" IMO */
/* Utility */
/* Additional Spacers -- don't think you'll need more than 7, but if you do -- maybe just use a custom class  :)  */
.upcoming-events {
  padding: 100px 0 80px 0; }
  .upcoming-events .top-content ul {
    margin-bottom: 2rem; }
    @media (min-width: 641px) {
      .upcoming-events .top-content ul {
        column-count: 2; } }
    @media (min-width: 1025px) {
      .upcoming-events .top-content ul {
        column-count: 3; } }
    .upcoming-events .top-content ul li {
      margin-bottom: 1rem; }

.popper,
.tooltip {
  position: absolute;
  z-index: 9999;
  background: #FFC107;
  color: black;
  width: 150px;
  border-radius: 3px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  padding: 10px;
  text-align: center; }

.style5 .tooltip {
  background: #1E252B;
  color: #FFFFFF;
  max-width: 200px;
  width: auto;
  font-size: .8rem;
  padding: .5em 1em; }

.popper .popper__arrow,
.tooltip .tooltip-arrow {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  margin: 5px; }

.tooltip .tooltip-arrow,
.popper .popper__arrow {
  border-color: #FFC107; }

.style5 .tooltip .tooltip-arrow {
  border-color: #1E252B; }

.popper[x-placement^="top"],
.tooltip[x-placement^="top"] {
  margin-bottom: 5px; }

.popper[x-placement^="top"] .popper__arrow,
.tooltip[x-placement^="top"] .tooltip-arrow {
  border-width: 5px 5px 0 5px;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  bottom: -5px;
  left: calc(50% - 5px);
  margin-top: 0;
  margin-bottom: 0; }

.popper[x-placement^="bottom"],
.tooltip[x-placement^="bottom"] {
  margin-top: 5px; }

.tooltip[x-placement^="bottom"] .tooltip-arrow,
.popper[x-placement^="bottom"] .popper__arrow {
  border-width: 0 5px 5px 5px;
  border-left-color: transparent;
  border-right-color: transparent;
  border-top-color: transparent;
  top: -5px;
  left: calc(50% - 5px);
  margin-top: 0;
  margin-bottom: 0; }

.tooltip[x-placement^="right"],
.popper[x-placement^="right"] {
  margin-left: 5px; }

.popper[x-placement^="right"] .popper__arrow,
.tooltip[x-placement^="right"] .tooltip-arrow {
  border-width: 5px 5px 5px 0;
  border-left-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
  left: -5px;
  top: calc(50% - 5px);
  margin-left: 0;
  margin-right: 0; }

.popper[x-placement^="left"],
.tooltip[x-placement^="left"] {
  margin-right: 5px; }

.popper[x-placement^="left"] .popper__arrow,
.tooltip[x-placement^="left"] .tooltip-arrow {
  border-width: 5px 0 5px 5px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  right: -5px;
  top: calc(50% - 5px);
  margin-left: 0;
  margin-right: 0; }

.cta {
  padding: 0 0 100px 0; }

.support {
  padding: 0 0 100px 0; }