
 /* oCopyright (c) 2023 by Steffan Burden (https://codepen.io/jekrb/details/jbpdBj) */
.events--container {
  margin: 0 auto;
  width: 100%;
}
#contentcontainer .events--container p {
margin: 0 0 0 0;
}
.event--name {
font-family: PantonBold;
color : #006e82;
}
#contentcontainer .events--container ul {
margin : 0;
padding : 10px 0 0 0;
border-top: 1px solid #dfdfdf;
}
#contentcontainer .events--container li {
margin : 0 0 10px 0;
padding : 0 0 10px 0;
border-bottom: 1px solid #dfdfdf;
background: none;
}
#events--details .events--container ul  {
border-top: none;
}
#events--details .events--container li  {
border-bottom: none;
}
#events--details strong  {
color: #006e82;
}
.events--body {
   /*  display: flex; */
  }
.events--body {
	width: 75%;
	margin: 0 2.5% 0 2.5%;
  }
@media (max-width: 1280px) {
.events--body {
	width: 70%;
	margin: 0 2.0% 0 2.0%;
  }
}
@media (max-width: 800px) {
.events--body {
	width: 65%;
	margin: 0 1.5% 0 1.5%;
  }
}
@media (max-width: 480px) {
.events--body {
	width: 75%;
  }
.events--location  {
display: none;
  }
#popup_start .div_link a {
display: block;
text-align: center;
}
}
.events--body__name {
      padding: 0 2em;
    }

.events--list {
    list-style: none;
    padding: 0;
  }

.events--list__event {
      display: flex;
      align-items: center;
      margin-bottom: 2em;
      justify-content: flex-start;
    }
.events--time,
.events--date{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    width: 80px;
    height: 80px;
	color: #fff;
  }
.date {
	font-family: PantonBold;
	font-size: 2.0em;
	padding-top: 10px;
  }
.month {
	font-size: 1.2em;
  }
 
.events--list li:nth-of-type(1n) .events--time  {
background-color: #50bcbd;
}
.events--list li:nth-of-type(3n+1) .events--time{
background-color: #ee7768;
}
.events--list li:nth-of-type(3n) .events--time {
background-color: #97918e;
}

.events--future .events--date {
    font-size: .8em;
  }

@media (max-width: 320px) {
  .events {
    text-align: center;
  }
    
    .events--body {
      flex-direction: column;
	  width: 98%;
	  margin: 0 1.0% 0 1.0%;
    }
      .events--list__event {
        flex-wrap: wrap;
        justify-content: center;
        margin-bottom: 4em;
      }
}