/* BOOTSTRAP CUSTOM VARIABLES
------------------------------------------------------------------------*/
/* VARIABLES
------------------------------------------------------------------------*/
/*
 * Global Ignite Variables
 *
 * 1. Ignite custom typography settings for prose (See _prose.scss for explanation).
 *
 * 2. Establish custom spacing variables based on line height to
 *    facilitate vertical rhythm
 *
 * 3. Black/white colour variables
 *
 * 4. Brand visited & focused styles
 *
 * 5. Brand border
 *
 */
/* [1] */
/* [2] */
/* [3] */
/* [4] */
/* [5] */
/* COMPASS
------------------------------------------------------------------------*/
/* BREAKPOINT
------------------------------------------------------------------------*/
/* GENERIC
------------------------------------------------------------------------*/
/*
 * Mixins
 *
 * 1. Intrinsic ratios (eg: Used by _responsive-ratio)
 *
 * 2. Cross browser opacity
 *
 * 3. Font smoothing
 *
 * 4. Px to Em https://web-design-weekly.com/snippets/converts-pixels-to-ems-with-sass/
 *
 * 5. WebKit-style focus
 */
/*
 * Breakpoints
 *
 * Map Bootstrap breakpoints to nice mixins
 */
.teaser,
.asset,
.resource.teaser {
  width: 100%;
  display: flex;
  flex-direction: column;
  /* [3] */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.teaser > .group-left,
.teaser > .group-right,
.asset > .group-left,
.resource.teaser > .group-left,
.asset > .group-right,
.resource.teaser > .group-right {
  padding: 20px 5%;
  width: 100%;
  margin-right: 0;
}
@media (min-width: 768px) {
  .teaser > .group-left,
  .teaser > .group-right,
  .asset > .group-left,
  .resource.teaser > .group-left,
  .asset > .group-right,
  .resource.teaser > .group-right {
    padding: 30px;
  }
}
.teaser > .group-left,
.asset > .group-left,
.resource.teaser > .group-left {
  background-color: #e4eaed;
}
.teaser > .group-left:empty,
.asset > .group-left:empty,
.resource.teaser > .group-left:empty {
  display: block;
}
.teaser > .group-left img,
.asset > .group-left img,
.resource.teaser > .group-left img {
  background-color: #ffffff;
  vertical-align: top;
}
@media (min-width: 768px) {
  .teaser,
  .asset,
  .resource.teaser {
    flex-direction: row;
  }
  .teaser > .group-left,
  .asset > .group-left,
  .resource.teaser > .group-left {
    max-width: 33.33333%;
    /*&:empty + .group-right {
      max-width: inherit;
      padding-left: 0;
    }*/
  }
  .teaser > .group-left + .group-right,
  .asset > .group-left + .group-right,
  .resource.teaser > .group-left + .group-right {
    max-width: 66.66667%;
    padding-left: 5%;
  }
}

.asset h3 {
  margin: 0;
  font-style: italic;
  color: #1f2c33;
  font-size: 26px;
}
.asset h3 + .field {
  margin-top: .7em;
}

* + .asset__list {
  margin-top: 1em;
}
.asset__list > ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 15px;
}
.asset__list > ul > li ~ li {
  margin-top: .66em;
}
.asset__list .file > a {
  font-weight: bold;
}
.asset__list .file > a:before {
  content: none;
}
.asset__list .file-icon {
  display: none;
}

.read-more {
  font-weight: bold;
  font-style: italic;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
}
* + .read-more {
  margin-top: 1em;
}
.read-more:hover, .read-more:focus {
  text-decoration: none;
}
.read-more:after {
  content: '\bb';
  margin-left: .33em;
}

.resource {
  width: 100%;
}
.resource > h1 {
  margin: 0;
}
.resource > h1 + * {
  margin-top: 1em;
}
.resource.teaser h3 {
  margin: 0;
  font-style: italic;
  color: #1f2c33;
  font-size: 26px;
}
.resource.teaser h3 + .field {
  margin-top: .7em;
}
.resource.teaser h3 > a {
  color: #1f2c33;
}
.resource.teaser h3 > a:hover, .resource.teaser h3 > a:focus {
  color: #0033a0;
}
.block + .block > .resource {
  margin-top: 3rem;
}

.resource__assets > ul,
.resource__tags > ul,
.teaser-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.resource__assets > ul,
.teaser-list--bordered {
  border-top: 1px #dddfe0 solid;
  border-bottom: 1px #dddfe0 solid;
}
.resource__assets > ul > *,
.teaser-list--bordered > * {
  width: 100%;
}
.resource__assets > ul > * ~ *,
.teaser-list--bordered > * ~ * {
  border-top: 1px #dddfe0 solid;
}

* + .resource__assets > ul {
  margin-top: 2em;
}

.resource__tags > ul {
  font-size: 15px;
  line-height: 1;
  align-items: baseline;
  align-items: flex-start;
}
.resource__tags > ul > li {
  background-color: #e4eaed;
  padding: 8px 10px 5px 10px;
  margin-right: .5em;
}

* + .resource__tags, .teaser .resource__tags + .field {
  margin-top: 1em;
}

.resource__filter > .block-title {
  margin: 0;
  font-size: 22px;
  font-style: italic;
}
.resource__filter > .block-title ~ form {
  margin-top: .66em;
}
.resource__filter .views-exposed-form {
  margin: 0;
  padding: 1.5em;
}
.site__sidebar .resource__filter .views-exposed-form .views-exposed-widget + .views-exposed-widget {
  margin-top: 1em;
}
