.events_calendar
{
 
            
   padding: 0;
   
} 

.events_calendar li
{
  display: inline-block;
  
    position: relative;
  width: 100%;
  vertical-align: top;
  
}


.events_calendar_text
{
  display: table; 
  text-align: left;
  font-size: 2.0rem;
  font-weight: 300;
  width: 100%;
  
}
.events_calendar_text p
{
    max-height: 50px;
    text-align: left;
  
  font-size: 1.4rem;
  font-weight: 300;
  margin-bottom: 6px!important;
  
}

.events_calendar_event_date
{
    background: #f1f1f1 none repeat scroll 0 0;
    color: #888;
    float: left;
    font-size: 1.2rem;
    margin-bottom: 5px;
    margin-right: 20px;
    margin-top: 6px;
    padding: 2px 10px;
    width:auto;
    
     
}

.events_calendar_event_date_first
{
    background: #FF3B30!important;
    color: #FFF!important;
    
}

.events_calendar_event_time_from,
.events_calendar_event_time_to,
.events_calendar_event_organizator
{
    font-size: 1.2rem;
    vertical-align: top;
    
}
.events_calendar_event_specific
   {
      float: left;
      padding-top: 2px;
   }
   
.events_calendar_event_specific span
{
    margin-right: 10px;
}

.counter{
    float: none;
}


.events_calendar_text a{
    display: inline-block;
    vertical-align: middle;
    width:80%;
}

.events_calendar_text .events_calendar_event_date .events_calendar_event_date_first{
    display: inline-block;
    vertical-align: top;
}

@media all and (min-width: 992px) and (max-width:1199px) 
{
    .events_calendar_text a{
        width: 75%
    }
}
@media all and (min-width: 550px) and (max-width: 750px)
{
    .events_calendar_text a{
        width: 80%
    }
}
@media all and (min-width: 450px) and (max-width: 550px)
{
    .events_calendar_text a{
        width: 75%
    }
}
@media all and (min-width: 350px) and (max-width: 450px)
{
    .events_calendar_text a{
        width: 68%
    }
}
@media all and (max-width: 350px)
{
    .events_calendar_text a{
        width: 50%
    }
}