#left-col {
    width: 300px;
    float: left;
    position: static;
    left: auto;
    top: auto;
    bottom: auto;
}

#main-content-wrap {
    padding-left: 300px;
}

#left-col-events-wrapper-outer {
    padding-right: 25px;
    margin-top: -2.5rem;
}

@media screen and (max-width: 700px) {
    
    .event-time-wrapper,
    .event-location-wrapper,
    .event-contact-wrapper,
    .event-calendar-wrapper {
        display: block;
    }
    
    .detail-time,
    .event-detail-time,
    .detail-location,
    .event-detail-location-wrapper,
    .event-detail-location,
    .detail-contact,
    .event-contact-name,
    .detail-calendar,
    .event-calendar-name {
        display: block;
    }
    
    .teaser-calendar-name,
    .teaser-location {
        display: none;
    }
    
    .event-contact-email-address {
        background-color: #4E2A84;
        line-height: 18px;
        padding: 5px 1rem;
        border: none !important;
        margin-top: -2px;
        *zoom: 1;
        *display: inline;
        display: inline-block;
    }
    
    .event-contact-email-address::after {
        content: "";
    }
    
    .event-contact-email-address-text {
        display: none;
    }
    
    .event-contact-email-address-text-short {
        *zoom: 1;
        *display: inline;
        display: inline-block;
    }
}

@media screen and (max-width: 400px) {
    
    .addthis_section .event-detail-label {
        margin-bottom: 0.75rem;
        display: block;
    }
}

#mobile-nav {
    display: none;
}

@media screen and (min-width: 701px) {
    
    #left-col-events-wrapper-outer .events-mobile-filters-toggle-link {
        display: none;
    }
    
    #main-content h2 {
        display: none;
    }
}

@media screen and (max-width: 1080px) {
    
    #event-list .event-details > .event-sharing {
        padding: 0.5rem 1.4rem;
    }
    
    #main-content .addthis_section {
        padding: 0.5rem 0;
        display: block;
    }
}

@media screen and (max-width: 768px) {
    
    #left-col {
        width: 100%;
        position: static;
    }
    
    #left-col-events-wrapper-outer {
        padding-right: 0;
    }
    
    #left-col-events {
        padding: 0.8rem;
    }
    
    #main-content-wrap {
        padding-left: 0;
        clear: both;
    }

    .events-inputs-wrap {
        width: 45%;
    }
    
    #main-content h2,
    h2 {
        font-size: 3rem;
        margin: 0;
    }
}

@media screen and (max-width: 700px) {
    
    #left-col {
        width: auto;
        padding: 3.2rem 3.2rem 0 3.2rem;
        border-right: 1px solid #cacaca;
        border-left: 1px solid #cacaca;
        margin: 0 0.55rem;
        background-color: #ffffff;
        display: block;
        float: none;
    }
    
    #left-col-events-wrapper-outer h2 {
        display: none;
    }
    
    #filter-control-bar.left-col-row {
        margin: 0;
    }
    
    #left-col-events-wrapper-outer {
        padding-bottom: 1.75rem;
        border-bottom: 1px solid #cccccc;
        margin: 0;
        position: relative;
    }
    
    #left-col-events-wrapper-outer.opened > .close,
    #left-col-events-wrapper-outer.closed > .open {
        display: none;
    }
    
    #left-col-events-wrapper-outer .events-mobile-filters-toggle-link::after {
        content: "click to expand menu";
    }
    
    #left-col-events-wrapper-inner {
        padding-top: 2.3rem;
        background-color: #f4f4f4;
        /*border-bottom: 9px solid #4E2A84;*//*what was this even for? before adding shadow and rounded corners maybe? -BT*/
        border: 1px solid #cccccc;
        -webkit-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.2);
        box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.2);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 2;
    }
    
    #left-col-events {
        border-top: none;
        border-bottom: none;
        padding-top: 0;
    }
    
    .tablet-left-column,
    .tablet-right-column {
        width: 100%;
    }
    
    #event-calendar {
        margin: 0px auto;
    }
    
    #main-content-wrap {
        padding-top: 0;
        margin-top: 0;
    }
    
    #main-content {
        padding-top: 0;
        margin-top: 0;
    }
    
    #main-content h2 {
        padding: 1rem 0;
    }
}

@media screen and (max-width: 480px) {
    
    #left-col {
        padding: .55rem .55rem 0px .55rem;
        border: 0;
        margin: 0;
    }
    
    #left-col-events-wrapper-outer {
        padding-bottom: 1.25rem;
    }
    
    #main-content h2 {
        font-size: 2.25rem;
        padding: .75rem 0;
    }
}

@media screen and (max-width: 320px) {
    
    .teaser-location {
        display: none;
    }
    
    .event-detail-label {
        display: block;
    }
}

@media (max-width: 768px) and (min-width: 701px) {
    
    h2,
    #event-upcoming,
    #primary-calendar-list-wrapper-outer {
        margin: 0px 0px 15px 0px;
    }
    
    .tablet-left-column,
    .tablet-right-column {
        width: 50%;
    }
    
    .tablet-left-column {
        float: left;
        clear: left;
    	padding-right: 30px;
    }

    h2.tablet-left-column {
        margin-right: 2rem;
    }
    
    .tablet-right-column {
    	padding-left: 30px;
    	width: 50%;
    	margin-left: auto;
    	float: right;
    }
    
    #event-calendar {
        max-width: inherit;
        margin: 0 0 auto;
    }
    /*
    #event-calendar .previous-month,
    #event-calendar .next-month {
        width: 10%;
    }
    
    #event-calendar .current-month {
        width: 78%;
    }*/
}