/*
  Add/override brand colors here.
*/
/**
 * Replace `$search` with `$replace` in `$string`
 *
 * @author Hugo Giraudel
 * @param {String} $string - Initial string
 * @param {String} $search - Substring to replace
 * @param {String} $replace ('') - New value
 * @return {String} - Updated string
 */
/**
 * http://codepen.io/philippkuehn/pen/zGEjxB
 */
/**
 * Change the fill color of an svg.
 * @param  {[type]} $svg
 * @param  {[type]} $color: $black
 */
/**
 * Create properly pathed image url
 * Usage: background-image: image-url('image.png');
 */
/**
* Typography util abstractions that can be used throughout the site.
*/
/**
 * Maintains aspect ratio
 * Grabbed from: https://css-tricks.com/snippets/sass/maintain-aspect-ratio-mixin
 * @param  {[type]} $width  [description]
 * @param  {[type]} $height [description]
 * @return {[type]}         [description]
 */
/**
 * @var number $width
 *   See below.
 * @var number $height
 *   See below.
 * @var css-length $scale
 *   The designed CSS height, in a unit, usually `rem`
 * @var boolean $include-bkgnd-size
 *   True if background-size need not be set, like when using colorized-svg-url()
 */
/**
 * Change the color of the svg.
 */
/**
 * Apply to smaller img, per design.
*/
/**
 * Apply to larger img, per design.
*/
.component--akt-events {
  margin-top: 2rem;
}
.component--akt-events > .content {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 1024px) {
  .component--akt-events > .content {
    flex-direction: row;
  }
}
.component--akt-events #facets-wrapper {
  border-radius: 0 2rem 0 0;
  background-color: transparent;
  padding: 2rem 2rem 10rem;
  width: 100%;
  margin: 0 auto;
  background-color: #3E4797;
  position: relative;
}
@media screen and (min-width: 1024px) {
  .component--akt-events #facets-wrapper {
    max-width: 30rem;
    margin-right: 2.5rem;
    flex-basis: 30rem;
    flex-shrink: 0;
    flex-grow: 1;
  }
}
.component--akt-events #facets-wrapper #reset-search {
  display: none;
}
.component--akt-events .block-facet-blockevent-type {
  background-color: unset;
  max-width: 30rem;
  margin: 0 auto;
}
@media screen and (min-width: 1024px) {
  .component--akt-events .block-facet-blockevent-type {
    max-width: unset;
    margin: unset;
  }
}
.component--akt-events .block-facet-blockevent-type ul {
  padding: 0;
  margin: 2rem 0 0 1rem;
  flex-direction: column;
}
.component--akt-events .block-facet-blockevent-type h3 {
  font-family: "LibreCaslonText-Bold", sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}
.component--akt-events .block-facet-blockevent-type label {
  color: #fff;
  line-height: 2.2857142857;
  font-family: "greycliff-demi-bold", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
}
.component--akt-events .block-facet-blockevent-type label::before {
  border-color: white !important;
}
.component--akt-events .block-facet-blockevent-type .facet-empty p {
  color: #fff;
}
.component--akt-events .listing-results-container {
  width: 100%;
  padding: 1rem;
  overflow: hidden;
}
@media screen and (min-width: 1024px) {
  .component--akt-events .listing-results-container {
    max-width: 95rem;
    margin: 0 auto;
    padding-left: 2.5rem;
  }
}
.component--akt-events .facets-widget-checkbox li.facet-item.facets-reset,
.component--akt-events .datepicker--buttons,
.component--akt-events .viewsreference--view-title {
  display: none;
}
.component--akt-events .view-filters .form-actions,
.component--akt-events .view-filters .form-item-field-start-date,
.component--akt-events .view-filters .form-item-field-start-date-1 {
  display: none;
}
.component--akt-events .use-datepicker {
  margin-bottom: 1rem;
}
.component--akt-events .akt-datepicker-form {
  background-color: transparent;
  margin: 2rem 0;
  overflow: initial;
  position: unset;
  color: #fff;
}
.component--akt-events .akt-datepicker-form label {
  font-family: "LibreCaslonText-Bold", sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}
.component--akt-events .akt-clear-dates {
  bottom: 2rem;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}
.component--akt-events .form-item-search-api-fulltext {
  display: flex;
  justify-content: flex-start;
}
@media screen and (min-width: 1024px) {
  .component--akt-events .form-item-search-api-fulltext {
    justify-content: flex-end;
    margin-right: 7rem;
  }
}
@media screen and (min-width: 1150px) {
  .component--akt-events .form-item-search-api-fulltext {
    margin-right: 14rem;
  }
}
.component--akt-events .form-item-search-api-fulltext label {
  display: none;
}
.component--akt-events .form-item-search-api-fulltext input {
  max-width: 24rem;
  float: right;
  border-radius: 2.4rem;
  border-color: #758B3D;
  background-color: #f7f7fc;
}
.component--akt-events .form-item-search-api-fulltext input::-moz-placeholder {
  color: rgba(61, 62, 69, 0.45);
  line-height: 1.6;
  text-align: center;
  letter-spacing: 0.4px;
  font-family: "greycliff-bold", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-size: 2rem;
}
.component--akt-events .form-item-search-api-fulltext input::placeholder {
  color: rgba(61, 62, 69, 0.45);
  line-height: 1.6;
  text-align: center;
  letter-spacing: 0.4px;
  font-family: "greycliff-bold", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-size: 2rem;
}
@media screen and (min-width: 768px) {
  .component--akt-events .form-item-search-api-fulltext input {
    max-width: 28.4rem;
  }
}
.component--akt-events .view-content {
  border-radius: 2rem 0;
  background-color: #fff;
}
.component--akt-events .views-row {
  padding: 2rem 0;
  border-bottom: 1px solid #ADCA54;
}
.component--akt-events .node--akt-event--teaser .node__content {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 1024px) {
  .component--akt-events .node--akt-event--teaser .node__content {
    flex-direction: row;
  }
}
@media screen and (min-width: 1024px) {
  .component--akt-events .node--akt-event--teaser .teaser-first {
    flex-basis: 67%;
    flex-shrink: 0;
  }
}
.component--akt-events .node--akt-event--teaser .field_display_title--wrapper {
  line-height: 1.1428571429;
  margin-bottom: 1rem;
  font-family: "greycliff-bold", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-size: 2.8rem;
  font-weight: 700;
}
.component--akt-events .node--akt-event--teaser .field_display_title--wrapper::after {
  content: ">";
  font-size: 1rem;
  line-height: 1.5rem;
  height: 1.5rem;
  width: 1.5rem;
  border-radius: 4px;
  color: #fff;
  background: #ADCA54;
  text-indent: 0.5rem;
  display: inline-block;
  vertical-align: middle;
}
.component--akt-events .node--akt-event--teaser .field_display_title--wrapper a {
  color: #3E4797;
  display: inline-block;
}
.component--akt-events .node--akt-event--teaser .field--name-field-location .address {
  display: inline-block;
}
.component--akt-events .node--akt-event--teaser .field--name-field-location .address :not(.locality):not(.administrative-area) {
  display: none;
}
.component--akt-events .node--akt-event--teaser .field--name-field-location::before {
  content: "";
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3Cpath%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20d%3D%22M215.7%20499.2C267%20435%20384%20279.4%20384%20192C384%2086%20298%200%20192%200S0%2086%200%20192c0%2087.4%20117%20243%20168.3%20307.2c12.3%2015.3%2035.1%2015.3%2047.4%200zM192%20256c-35.3%200-64-28.7-64-64s28.7-64%2064-64s64%2028.7%2064%2064s-28.7%2064-64%2064z%22%20fill%3D%22%23ADCA54%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  height: 2rem;
  width: 1.5rem;
  background-size: 1.5rem 2rem;
  display: inline-block;
  margin-right: 1rem;
}
.component--akt-events .node--akt-event--teaser .field--name-field-times {
  font-family: "LibreCaslonText-Regular", sans-serif;
  font-size: 1.8rem;
  line-height: 1.4444444444;
  margin-bottom: 0.5rem;
}
.component--akt-events .node--akt-event--teaser .field--name-field-display-dates {
  font-family: "LibreCaslonText-Bold", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.4444444444;
}
.component--akt-events [role=navigation] ul {
  display: flex;
  list-style: none;
  justify-content: center;
}
.component--akt-events [role=navigation] li {
  padding: 0 2rem;
}