/**
 * The base file that should be imported by every file.
 * There should be no CSS generation in this or from imported scss files at all!
 */
/**
 * Library
 */
/**
 * Variables and functions
 */
@media (min-width: 981px) {
  #related-items {
    display: flex;
    flex-wrap: wrap;
    margin-left: -30px;
    position: relative; }
    #related-items > div, #related-items article {
      margin-left: 30px;
      margin-top: 30px; } }
    @media (min-width: 981px) and (min-width: 768px) {
      #related-items > div, #related-items article {
        flex: 1 0 auto; } }
    @media (min-width: 981px) and (min-width: 560px) {
      #related-items > div, #related-items article {
        max-width: calc(50% - 30px); } }
    @media (min-width: 981px) and (min-width: 500px) {
      #related-items > div, #related-items article {
        min-width: calc(50% - 30px); } }

@media (max-width: 980px) {
  [id^="section-related-items-"], #related-items {
    margin-left: -1.5%;
    margin-right: -1.5%; } }

[id^="section-related-items-"] .related-item, #related-items .related-item {
  position: relative;
  background: #fff;
  border-radius: 16px;
  display: flex;
  margin-bottom: .5em; }
  [id^="section-related-items-"] .related-item a.overlay, #related-items .related-item a.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2; }
  [id^="section-related-items-"] .related-item .thumb, #related-items .related-item .thumb {
    flex-basis: 100px;
    height: auto;
    display: block;
    overflow: hidden;
    position: relative;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px; }
    [id^="section-related-items-"] .related-item .thumb > img, #related-items .related-item .thumb > img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 0;
      -o-object-fit: cover;
         object-fit: cover; }
    [id^="section-related-items-"] .related-item .thumb .inner-thumb, #related-items .related-item .thumb .inner-thumb {
      background-size: cover;
      background-position: center;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      transform: scale(1);
      transition: transform .3s ease-in-out; }
  [id^="section-related-items-"] .related-item .content, #related-items .related-item .content {
    padding: .5em;
    flex: 1; }
    [id^="section-related-items-"] .related-item .content .title, #related-items .related-item .content .title {
      color: #0db2e7;
      font-family: "MultipleSansPro", Helvetica, Arial, sans-serif;
      font-weight: 600;
      font-size: 15.93252px; }
      [id^="section-related-items-"] .related-item .content .title > a, #related-items .related-item .content .title > a {
        text-decoration: none;
        color: #0db2e7; }
        [id^="section-related-items-"] .related-item .content .title > a:after, #related-items .related-item .content .title > a:after {
          position: absolute;
          top: 0;
          left: 0;
          content: '';
          width: 100%;
          height: 100%; }
    [id^="section-related-items-"] .related-item .content .event-data, #related-items .related-item .content .event-data {
      font-weight: 600;
      font-size: 15.93252px; }
  [id^="section-related-items-"] .related-item:hover .thumb .inner-thumb, #related-items .related-item:hover .thumb .inner-thumb {
    transform: scale(1.2); }

#section-related {
  background-color: #0db2e7; }
  #section-related .h2 {
    color: #fff;
    margin-bottom: .5em;
    display: block; }
  #section-related .container {
    max-width: 1140px; }
  #section-related .event-data {
    font-family: "MultipleSansPro", Helvetica, Arial, sans-serif;
    font-weight: 600;
    font-size: 14.93207px; }
    #section-related .event-data > span {
      display: block;
      position: relative;
      padding-left: 1.5em; }
      #section-related .event-data > span [class^="icon-"], #section-related .event-data > span [class*=" icon-"] {
        position: absolute;
        left: 0;
        top: 5px; }
    #section-related .event-data .time {
      display: block; }
  #section-related .overview-link {
    display: block;
    text-align: center;
    margin-top: 1em; }
    #section-related .overview-link a {
      color: #fff; }

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