.clearfix::after {
  content: "";
  display: table;
  clear: both; }

/*  To utilize the font mixin,

@mixin font-source-serif($size: false, $color: false, $weight: false,  $lh: false, $ls: false) {
@mixin font-source-serif-italic($size: false, $color: false, $weight: false,  $lh: false, $ls: false) {
@mixin font-source-sans($size: false, $color: false, $weight: false,  $lh: false, $ls: false) {

// @include font-source-serif(40px, $brand-v2-off-black, normal, 50px, null);
// @include font-source-sans(16px, $brand-v2-off-black, normal, 21px, 0.03em);

*/
.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px; }

.display-none {
  display: none; }

.menu {
  float: left;
  margin: 0;
  padding: 0; }
  .menu li {
    float: left;
    list-style: none outside none !important; }

.text-ellipses {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 99%; }

/* mixin for multiline */
/* ============================================================================
Flexbox component
============================================================================ */
/* ============================================================================
Styles for custom components
============================================================================ */
.page-designer-reference .ex-flexbox:hover {
  border: none;
  text-decoration: none;
  color: initial; }

.ex-flexbox {
  min-height: var(--min-height);
  min-width: var(--min-width);
  max-width: var(--max-width-flexbox);
  position: var(--position);
  top: var(--top);
  right: var(--right);
  bottom: var(--bottom);
  left: var(--left);
  -ms-transform: var(--transform);
      transform: var(--transform);
  overflow: hidden; }
  @media only screen and (min-width: 768px) {
    .ex-flexbox {
      min-height: var(--min-height-md);
      min-width: var(--min-width-md);
      max-width: var(--max-width-md-flexbox);
      position: var(--position-md);
      top: var(--top-md);
      right: var(--right-md);
      bottom: var(--bottom-md);
      left: var(--left-md);
      -ms-transform: var(--transform-md);
          transform: var(--transform-md); } }
  .ex-flexbox__as-link {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0; }
  .ex-flexbox--region > .experience-layouts-flexbox {
    -ms-flex: initial;
        flex: initial; }

/*# sourceMappingURL=flexbox.css.map */