/*Style for Event List */
.event-page-header {
   background-color: #32bdc7; 
}
.event-banner-list {
  float: left; 
}
.event-banner-list > img {
  border-radius: 5px;
}

.event-block:not(:first-of-type) {
  padding: 30px 0 0 0;
 border-top: 1px solid #CCC;
 border-width: thin;
} 

.event-date {
  font-weight: 500;
  padding: 0 20px;
  font-size: 14px;
  margin-bottom: 0;
  display: inline-block;
  color: #777;
}

.event-date::before {
  content: url("https://uat-web.cordlife.com/sites/default/files/images/icons/calendar-day-solid.svg");
  display: inline-block;
  opacity: 0.5;
  width: 14px;
  margin-right:  5px;
}

.event-category {
    font-weight: 500;
    background: #32BDC7;
    padding: 5px 20px;
    color: #FFF;
    font-size: 18px;
    margin: 10px 0 10px 20px;
    display: inline-block;
}

.event-title-list > a {
    font-size: 24px;
    text-decoration: none;
    font-weight: 500;
    padding: 0 0 0 20px;
    color: #32bdc7;
}

.event-summary {
  padding: 0 20px;
  display: flex;
  font-size: 16px;
  margin: 0;
}

.event-venue {
    font-size: 14px;
    padding: 10px;
    font-weight: 500;
    display: inline-flex;
    color: #777;
}

.event-venue::before {
  content: url("https://uat-web.cordlife.com/sites/default/files/images/icons/location-pin-solid.svg");
      display: inline-block;
    opacity: 0.5;
    width: 15px;
    margin: 0 5px 0 10px;
}

.btn-event-more > a {  
    background: #32BDC7;
    border-radius: 25px;
    color: #FFF;
    padding: 5px 20px;
    border: none;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    float: right;

}
    
  .btn-event-more > a:hover {
     background: #28a0a9;
  }
  


/* Styles for Detailed Events Page */
.event-title {
    font-size: 24px;
    font-weight: 500;
    padding: 10px 0 10px 20px;
    border-bottom: 1px solid #CCC;
    border-width: thin;
    background: #2ca6bd;
    color: #ffffff;
}

.event-section {
  background-color: #ecfcfc;
  border-top:  1px solid rgb(50 189 199 / 65%);
  border-width: thin;
}
.event-section > .layout__region--first {
  border-radius: 0 20px;
  background-color:#ECFCFC ;
  padding: 20px;
  margin: 10px 0;
  max-width: 35%;
}

.event-section > .layout__region--second {
  padding: 20px;
}

@media screen and (max-width: 850px)  {
  .event-section > .layout__region--first {
    max-width: 100%;
  }
  
  .event-block {
    width: 95%;
  }
  
  .event-banner-list {
    padding: 20px 10px;
    width: 100%;
  }
  
}