* { box-sizing: border-box;}

html,body {
  height: 100%;
  margin: 0;
}

body {
	background-color: #FF8E0E;
    background-image: url("../IMG/background_sm.jpg");
    background-repeat: repeat;
}
    
.container {
  position: relative;
  min-height:100%;
}

.wrapper {
    display: flex;
    flex-wrap: wrap;
    height:100%;
    width:90%;
    margin: 0 auto;
    max-height:100%;
    position:absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    border:0px solid #FFFFFF;
    border-collapse: collapse;
    padding:10px;
}

div.content_container {
    width: 100%;
    height:100%;
    font-size: 20px;
    border: 0px solid;
    border-collapse: collapse;
    background-color:#233BB6;
    background-image: url("../IMG/lnbg.png");
    background-repeat: repeat;
}
    
div.grid_container {
    display:grid ;
    grid-template-areas:
    'menu content'
    'events_header content'
    'calendar content';
    grid-template-columns: 255px auto;
    grid-template-rows: 132px 27px auto;
    grid-gap: 0px;
    padding: 10px;
    height: 100%;
    border:1px solid #FFFFFF;
    border-collapse: collapse;
    background: rgba(255, 255, 255, 0.2);
    vertical-align: top;
    text-align: left;
}

div.grid_menu { 
    grid-area: menu;
    vertical-align: top;
    text-align: left;
}    

div.grid_events_header { 
    padding-top:5px;
    grid-area: events_header;
    padding-bottom:5px;
    vertical-align: top;
    text-align: left;
}    

span.events_header {
    display: block;
    height:22px;
    width:100%;
    font-family:Century Gothic, sans-serif;
	font-size:14px;
	font-weight:700;
    color:#FFFFFF;
    background-color:#233BB6;
	border:2px solid #FE6306;
    border-collapse: collapse;
    margin-top:0px;
    padding-left:3px;
}    
    
div.grid_calendar {
    grid-area: calendar; 
    overflow-x: hidden;
    overflow-y: auto;
    vertical-align: top;
    text-align: left;
    padding-top:5px;
}

div.event_list {
    border: 0px solid;
    border-collapse: collapse;
    padding-top: 0px;
    /*padding-bottom: 5px;*/
    padding-left: 0px;
    padding-right: 5px;
    width:auto;
    overflow:hidden;
    height:100%;
    width:100%;
    overflow-x: hidden;
    overflow-y: auto;
    font-family:Century Gothic, sans-serif;
	font-size:14px;
	font-weight:700;
}    
    
div.grid_content { 
    grid-area: content; 
    padding-left: 10px;
    vertical-align: top;
    text-align: left;
}

div.event_list > h4 {
	font-family:Century Gothic, sans-serif;
	font-size:14px;
	font-weight:700;
    color:#233BB6;
    background-color:#FE6306;
    margin:0px !important;
    padding:0px !important;
    padding-left:3px !important;
    padding-right:3px !important;
    border-color: #FE6306;
    border-style: solid;
    border-collapse: collapse;
    border-top-width: 1px;
    border-left-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 0px;
    height:22px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}    

p.feed-item-desc {
	font-family:Century Gothic, sans-serif;
	font-size:12px;
	font-weight:700;
    color:#292C31;
    background-color: #E9E9E9;
    margin: 0px !important;
    margin-bottom: 5px !important;
    border-color: #FE6306;
    border-style: solid;
    border-collapse: collapse;
    border-top-width: 0px;
    border-left-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    padding:5px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
}    

h4.feed-item-title > a:link {
    color:#233BB6;
    text-decoration: none;
}    

h4.feed-item-title > a:visited {
    color:#233BB6;
    text-decoration: none;
}    

h4.feed-item-title > a:active {
    color:#233BB6;
    text-decoration: none;
}    

h4.feed-item-title > a:hover {
    color:#FFFFFF;
    text-decoration: underline;
}    

    
div.event_list >  p :nth-child(-n+22)  {
    display:none;
}     

div.event_list >  p :nth-child(1)  {
     display:block;
    text-transform: uppercase !important;
	font-family:Century Gothic, sans-serif;
	font-size:10px;
	font-weight:700;
    display:block;
    width:100%;
    background-color:#233BB6;
    color:#FFFFFF;
    padding-left:2px;
    padding-bottom:1px;
}  
    
div.event_list >  p :nth-child(5)  {
    display:block;
    text-transform: uppercase !important;
	font-family:Century Gothic, sans-serif;
	font-size:10px;
	font-weight:700;
    display:block;
    width:100%;
    background-color:#233BB6;
    color:#FFFFFF;
    padding-left:2px;
    padding-bottom:1px;
    margin-top:05px;
}    

div.event_list >  p :nth-child(7)  {
    display:block;
}   
div.event_list >  p :nth-child(9)  {
    display:block;
}   
    
div.event_list >  p :nth-child(11)  {
    /*hosted by*/
    display:block;
    text-transform: uppercase !important;
	font-family:Century Gothic, sans-serif;
	font-size:10px;
	font-weight:700;
    display:block;
    width:100%;
    background-color:#233BB6;
    color:#FFFFFF;
    padding-left:2px;
    padding-bottom:1px;
    margin-top:05px;
}    
div.event_list >  p :nth-child(15)  {
    display:block;
    text-transform: uppercase !important;
	font-family:Century Gothic, sans-serif;
	font-size:0px;
	font-weight:700;
    display:block;
    width:100%;
    background-color:#233BB6;
    color:#FFFFFF;
    padding-left:2px;
    padding-bottom:1px;
    margin-top:05px;
}    

div.event_list >  p :nth-child(15):after {
    font-size:10px;
    content: 'EVENT REGISTRATION:';
}

div.event_list >  p :nth-child(17)  {
    display:block;
    font-size:0px;
}

div.event_list >  p :nth-child(17):after {
    font-size:12px;
    content: 'Online at Eventbrite>>';
}
    
div.event_list >  p :nth-child(17):link {
    color:#FE6306;
    text-decoration: none;
}    

div.event_list >  p :nth-child(17):visited {
    color:#FE6306;
    text-decoration: none;
}    

div.event_list >  p :nth-child(17):active {
    color:#FE6306;
    text-decoration: none;
}    

div.event_list >  p :nth-child(17):hover {
    color:#233BB6;
    text-decoration: underline;
}    

div.event_list >  p :nth-child(20)  {
    display:block;
    text-transform: uppercase !important;
	font-family:Century Gothic, sans-serif;
	font-size:0px;
	font-weight:700;
    display:block;
    width:100%;
    background-color:#233BB6;
    color:#FFFFFF;
    padding-left:2px;
    padding-bottom:1px;
    margin-top:05px;
}    

div.event_list >  p :nth-child(20):after {
    font-size:10px;
    content: 'EVENT DESCRIPTION:';
}

div.event_list >  p :nth-child(21):after {
    display:none;
}