﻿<style>
body{
font-family: Arial;
}

#events{
list-style-type: none;
list-style-position: outside;
margin: 0px;
padding: 0px;
}

.event-tile{
border-top: solid 6px rgb(1,87,177);
}

.event-tile > a:focus, .event-tile > a:hover{
/*margin-top: -3px;*/
transform: translateY(-4px);
-webkit-box-shadow: 10px 13px 35px 4px rgba(0,0,0,0.4);
-moz-box-shadow: 10px 13px 35px 4px rgba(0,0,0,0.4);
box-shadow: 10px 13px 35px 4px rgba(0,0,0,0.4);
text-decoration: none;
outline: solid 6px rgb(1,87,177);
}

.event-tile a{
  display: flex;
}

.date-day {
  /*width: 140px; /* A fixed width as the default */
  min-width: 120px;/*100px*/
 color: rgb(0,27,59);
 background-color: rgb(255,179,51); 
  display: flex;
  justify-content: center;
  align-items: center;   /* <---- NEW    */
}

.date-day-padding{
margin-top:-3px;
}

.date-details { 
  flex-grow: 1; /* Set the middle element to grow and stretch */
  background-color: rgb(250,250,250);
}

.date-details-padding{
padding:15px 20px;
}

.event-day-month-abbr{
text-align: center;
font-weight: bold;
margin-bottom: 8px;
display: block;
text-transform: uppercase;
font-size: 18px;
}

.event-day-dotm{
font-size: 32px;
text-align: center;
font-weight: bold;
display: block;
}

.time{
font-weight: bold;
margin-bottom: 8px;
color: rgb(0,27,59);
display: block;
}

.p-location{
margin-bottom: 8px;
font-size: .9em;
color: rgb(85, 85, 85);/*rgb(102, 102, 102)*/
display: block;
font-weight: normal;
}

.p-name{
font-size: 18px;
font-weight: bold;
color: rgb(1,87,177);
display: block;
}

/*
#events{
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 10px;
}
*/

#events{
margin: 15px auto !important;
display: grid;
grid-gap: 30px;
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
}

.event-tile{
display: grid;
-webkit-box-shadow: 10px 10px 35px 4px rgba(0,0,0,0.2);
-moz-box-shadow: 10px 10px 35px 4px rgba(0,0,0,0.2);
box-shadow: 10px 10px 35px 4px rgba(0,0,0,0.2);
padding-bottom: 0px !important;
transition: all .5s;
transition: transform 1s ease-in-out;
margin: 2px 0px;
}
@media screen and (max-width: 520px){
	#events{
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	}
}

</style>