/* Style for Event */

/* Teaser small */
.event-teaser-small {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-left: 1rem;
}
.small-event .event-teaser-small,
.small-event .event-teaser-small  .event-teaser-small-image img {
    height: 8rem;
}
.big-event .event-teaser-small,
.big-event .event-teaser-small .event-teaser-small-image img {
    height: 17rem;
}
.event-teaser-small-image {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1;
    background: #000;
}
.big-event .event-teaser-small-image {
    left: 0;
}
.event-teaser-small-image img{
    width: 100%;
    object-fit: cover;
    opacity: 0.5;
}
.event-teaser-small-text {
    position: relative;
    width: 70%;
    z-index: 2;
    color: #fff;
    padding: 1.5rem 1rem;
    font-weight: bold;
    font-family: 'EBGaramond';
    font-size: 0.7rem;
    padding-bottom: 0.8rem;
    line-height: 1rem;
    text-transform: uppercase;
    height: 76%;
    display: flex;
    align-items: flex-end;
}   
.big-event .event-teaser-small-text {
    height: 85%;
}  
.event-teaser-small-link {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 2;
}
.red .event-teaser-small-link a,
.light-gray .event-teaser-small-link a,
.light-blue .event-teaser-small-link a,
.light-red .event-teaser-small-link a,
.dark-gray .event-teaser-small-link a,
.yellow .event-teaser-small-link a,
.blue .event-teaser-small-link a {
    color: var(--dark-gray) !important;
}
.event-teaser-small-link a {
    display: block;
    color: #fff;
    background: var(--dark-gray);
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Teaser */
.event-teaser {
    text-decoration: none;
    position: relative;
    height: 22rem;
    width: 100%;
    overflow: hidden;
    display: block;
    margin-bottom: 1.5rem;
}

.red .event-teaser:hover .event-teaser-link,
.event-item.red .event-teaser:hover .event-teaser-link {
  color: var(--red-color) !important;
}
.red  .event-teaser-container {
  background: var(--red-color);
}
.light-red .event-teaser:hover .event-teaser-link,
.event-item.light-red .event-teaser:hover .event-teaser-link {
  color: var(--light-red) !important;
}
.light-red  .event-teaser-container {
  background: var(--light-red);
}
.yellow .event-teaser:hover .event-teaser-link,
.event-item.yellow .event-teaser:hover .event-teaser-link {
  color: var(--yellow-color) !important;
}
.yellow  .event-teaser-container {
  background: var(--yellow-color);
}
.blue .event-teaser:hover .event-teaser-link,
.event-item.blue .event-teaser:hover .event-teaser-link {
  color: var(--blue-color) !important;
}
.blue  .event-teaser-container {
  background: var(--blue-color);
}
.light-blue .event-teaser:hover .event-teaser-link,
.event-item.light-blue .event-teaser:hover .event-teaser-link {
  color: var(--light-blue) !important;
}
.light-blue  .event-teaser-container {
  background: var(--light-blue);
}
.light-gray .event-teaser:hover .event-teaser-link,
.event-item.light-gray .event-teaser:hover .event-teaser-link {
  color: var(--light-gray) !important;
}
.light-gray  .event-teaser-container {
  background: var(--light-gray);
}
.dark-gray .event-teaser:hover .event-teaser-link,
.event-item.dark-gray .event-teaser:hover .event-teaser-link {
  color: var(--dark-gray) !important;
}
.dark-gray  .event-teaser-container {
  background: var(--dark-gray);
}
.event-teaser-container {
   background: var(--light-blue);
   position: absolute;
   bottom: 0;
   right: 0;
   padding: 1rem;
   height: 50%;
   width: 75%;
}
.event-teaser-title {
    color: var(--dark-gray) !important;
    text-transform: uppercase;
    font-size: 0.9rem;
    font-weight: bold;
    font-family: 'EBGaramond';
    margin-bottom: 1rem;
}
.event-teaser-description {
    color: var(--dark-gray) !important;
    font-size: 0.8rem;
}
.event-teaser-link {
    color: var(--dark-gray)!important;
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    border: 4px solid var(--dark-gray);
    height: 1.5rem;
    width: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transform: rotateZ(-90deg);
    transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
.event-teaser:hover .event-teaser-link {
    background: var(--dark-gray);
    border: 4px solid var(--dark-gray   );
    box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12);
}
.event-teaser-image img {
    height: 22rem;
    width: 100%;
    object-fit: cover;
}

/* View events page */
.view-events.view-display-id-page_1 {
    margin-top: 1rem;
    margin-bottom: 4rem;
}
.view-events .views-exposed-form {
    margin-bottom: 3rem;
}
.view-events .js-form-item {
    width: 33.333%;
}
#view-events.view-display-id-page_1 .form-item-sort-by label {
    display: none;
}
#views-exposed-form-events-page-1 .form-item-sort-by {
    display: none;
}
#views-exposed-form-events-page-1 .form-item-sort-order label {
    display: none;
}
@media (max-width: 992px) {
    .view-events .js-form-item {
        width: 100%;
        padding-right: 0!important;
        padding-left: 0!important;
    }
}