/* --------------------------------------------------

	Re-usable generic layout components, prefixed with "l-"
	- mostly used to facilitate layout in Components
	- do not reference/modify these classes directly, create a new Component class in components.css

-------------------------------------------------- */

.l-container {
  width: var(--max-width);
  margin: 0 auto;
}

.l-row:before,
.l-row:after,
.l-layoutList:not(.l-grid):before,
.l-layoutList:not(.l-grid):after,
.l-container--divided:before,
.l-container--divided:after,
.l-container:before,
.l-container:after {
  content: "";
  display: block;
}

.l-row:after,
.l-container--divided:after,
.l-layoutList:after,
.l-container:after {
  clear: both;
}

.l-row--reversed *[class*="l-col"] {
  float: right;
}

.l-layoutList {
  list-style: none;
  margin: 0;
  padding: 0;
}

.l-divided--nested,
.l-divided {
  margin-right: -15px;
  margin-left: -15px;
}

.l-divided *[class*="l-col"] {
  padding-right: 15px;
  padding-left: 15px;
}

.l-divided {
  margin-right: -30px;
  margin-left: -30px;
}

.l-divided *[class*="l-col"] {
  padding-right: 30px;
  padding-left: 30px;
}

.l-divided--extreme {
  margin-right: -60px;
  margin-left: -60px;
}

.l-divided--extreme *[class*="l-col"] {
  padding-right: 60px;
  padding-left: 60px;
}

.l-divided--nested *[class*="l-col"] {
  padding-right: 15px;
  padding-left: 15px;
}

.l-splitCols {
  display: table;
}

.l-splitHalf {
  display: table-cell;
  float: none !important;
  vertical-align: top;
}

.l-splitHalf:first-child {
  padding-right: 30px;
}

.l-splitHalf:first-child + .l-splitHalf {
  padding-left: 30px;
}

.l-hr--top:before,
.l-hr--bottom:after,
.l-hr:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  max-width: 1140px;
  width: 100%;
  border-top: 4px solid var(--clr-gray20);
}

.l-hr--bottom:after {
  top: auto;
  bottom: 0;
}

.l-alignRight {
  text-align: right;
}

.l-alignCenter {
  text-align: center;
}

.l-valign {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.l-valign--extend {
  height: 100%;
}

.l-valignItem {
  display: table-cell;
  vertical-align: middle;
}

.l-pullRight {
  float: right;
}

.l-pullLeft {
  float: left;
}

.l-flexContainer {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  align-content: space-around;
}

.l-flexItem {
  flex-grow: 1;
}

.l-hide {
  display: none;
}

.l-tether {
  position: relative;
}

*[class*="l-col"] {
  float: left;
}

.l-col--16 {
  width: 16.6666667%;
}

.l-col--20 {
  width: 20%;
}

.l-col--25 {
  width: 25%;
}

.l-col--30 {
  width: 30%;
}

.l-col--33 {
  width: 33.33334%;
}

.l-col--40 {
  width: 40%;
}

.l-col--45 {
  width: 45%;
}

.l-col--50 {
  width: 50%;
}

.l-col--55 {
  width: 55%;
}

.l-col--60 {
  width: 60%;
}

.l-col--66 {
  width: 66.66667%;
}

.l-col--70 {
  width: 70%;
}

.l-col--75 {
  width: 75%;
}

.l-col--100 {
  width: 100%;
}

.l-valignItem--col {
  float: none;
}

.l-grid {
  display: grid;
  gap: 20px;
}

.l-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* ----------------------------------------------------------------------
	Media Queries
---------------------------------------------------------------------- */

@media only screen and (min-width: 1161px) {
  /* X Large */

  .l-hideXLarge,
  .l-mediumOnly,
  .l-smallOnly {
    display: none;
  }

  .l-showXLarge {
    display: inherit; /* "initial" fallback */
    display: initial;
  }
}

@media only screen and (max-width: 1160px) {
  /* Large */

  .l-mediumOnly,
  .l-smallOnly,
  .l-hideLarge {
    display: none;
  }

  .l-showLarge {
    display: inherit; /* "initial" fallback */
    display: initial;
  }

  .l-container {
    /* padding-left: 15px;
    padding-right: 15px; */
  }

  .l-hr:before {
    left: 0;
  }

  .l-hr:before {
    width: calc(100% - 30px);
    left: calc(15px); /* if calc is supported, set the left property */
  }

  .l-col-large--50 {
    width: 50%;
  }

  .ContactInfo-actions {
    text-align: right;
  }
}

@media only screen and (max-width: 768px) {
  /* Medium */

  .l-hideMedium {
    display: none;
  }

  .l-showMedium,
  .l-mediumOnly {
    display: inherit; /* "initial" IE fallback */
    display: initial;
  }

  .l-tabletBlock {
    display: block;
  }

  .l-col-medium--33 {
    width: 33.33334%;
  }

  .l-col-medium--66 {
    width: 66.66667%;
  }

  .l-col-medium--50 {
    width: 50%;
  }

  .l-col-medium--75 {
    width: 75%;
  }

  .l-tabletBlock,
  .l-col-medium--100 {
    width: 100%;
  }

  .ContactInfo-actions {
    text-align: left;
  }

  .l-grid-medium--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 640px) {
  /* Phone */

  .l-mediumOnly,
  .l-hideSmall {
    display: none;
  }

  .l-showSmall,
  .l-smallOnly {
    display: inherit; /* "initial" IE fallback */
    display: initial;
  }

  .l-smallBlock {
    display: block;
  }

  .l-smallBlock,
  .l-col-small--100 {
    width: 100%;
  }

  .l-col-small--50 {
    width: 50%;
  }

  .l-valignItem--col {
    display: block;
  }

  .l-valignItem--col + .l-valignItem--col {
    margin-top: 30px;
  }

  .l-grid-small--1 {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media only screen and (max-width: 480px) {
  /* X Small */

  .l-col-xsmall--100 {
    width: 100%;
  }

  .l-grid-xsmall--1 {
    grid-template-columns: repeat(1, 1fr);
  }
}