Events Calendar Custom Layout

layout.htm

<div class="event-wrapper">
	<a class="event-link" href="[wpbb post:url]">
		<div class="event-date-outer-wrapper mobilehide">
		    <div class="event-date-wrapper">
		    	<div class="event-month">
			    	[wpbb post:the_events_calendar_start_date format='M']
			    </div>
			    <div class="event-day">
			    	[wpbb post:the_events_calendar_start_date format='j']
			    </div>
	    	</div>
		</div>
		<div class="event-details-wrapper">
		    <div class="event-details">
			    <div class="event-name">
			    	[wpbb post:title]
		    	</div>
			    <div class="event-time mobilehide">
			    	[wpbb post:the_events_calendar_start_time] &ndash; Access for $15.00
			    </div>
			     <div class="event-time mobileshow">
			    	[wpbb post:the_events_calendar_date_and_time] &ndash; Access for $15.00
			    </div>
			    <div class="event-type">
                    [wpbb post:terms_list taxonomy='event-type' html_list='div' display='name' limit='' linked='no']
		        </div>
		    </div>
	    </div>
	</a>
</div>



/**** Custom CSS ****/

.fl-post-feed-post {
    border:0;
}

.event-wrapper,
.event-link {
    display: flex;    
}


.event-date-outer-wrapper {
    background: #D36220;
    color:#fff;
    display: flex;
    flex-flow: column;
    line-height: 1;
    text-align: center;
    width:60px;
    height:60px;
    border-radius: 100px;
    position: relative;
    overflow: hidden;
    border:2px #fff solid;
    transition: all .15s linear;
}

.event-link {
    text-decoration: none !important;
}

.event-link:hover .event-date-outer-wrapper {
    background: #FF670F;
    transition: all .15s linear;
}

.event-date-wrapper {
    position: relative;
    top:12px;
}

.event-month {
    text-transform: uppercase;
    font-size:.7rem;
    padding-bottom: 2px;
    font-weight: 600;
}

.event-day {
    font-size:1.3rem;
    font-weight: 900;
}

.event-details {
    width: 95%;
    vertical-align: middle;
}

.event-name {
    font-size:1.1rem;
    line-height: 1.2rem;
    font-weight: 600;
    margin-top:8px;
}

.event-time {
    font-size:.8rem;
    text-transform: uppercase;
    line-height: 1rem;
    margin-top: 8px;
}

.event-type span span {
    font-size:.65rem;
    font-weight: bold;
    background: rgba(255,255,255,.5);
    color:#39514A !important;
    border-radius: 50px;
    padding:0 10px;
    margin-right: 5px;
}

.event-wrapper {
    display:flex;
}

.event-details-wrapper {
    display: flex;
    padding-left:20px;
    flex-flow: column;
    flex: 75%;
}

.mobileshow {
    display: none;
}

@media only screen and (max-width: 600px) {
  .mobileshow {
    display: block
  }
  .mobilehide {
      display: none;
  }
}