#wrapwrap .s_event_list_item {
    @include clearfix;
    box-shadow: 0px 0px 5px rgba(black, 0.25);
    margin: 0px 0px 20px;

    > time {
        display: block;
        padding: 5px;
        text-align: center;
        text-transform: uppercase;
        div {
            display: none;
        }
        .s_event_list_day, .s_event_list_month, .s_event_list_time {
            display: block;
            line-height: 1;
        }
        .s_event_list_day {
            font-size: 50px;
            padding-top: 10px;
        }
        .s_event_list_month {
            font-size: 30px;
        }
        .s_event_list_time {
            font-size: 16px;
            font-weight: 200;
            padding-bottom: 10px;
        }
    }
    > .s_event_list_icon  {
        text-align: center;
    }

    > .s_event_list_info,
    > .s_event_list_social {
        > ul {
            list-style: none;
            margin: 0;
            padding: 0;
            text-align: center;
            > li {
                float: left;
                color: map-get($grays, '800');
                font-size: 11px;
                font-weight: 300;

                &:hover {
                    color: map-get($grays, '800');
                    background-color: map-get($grays, '200');
                }

                > a {
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
    > .s_event_list_info {
        padding-top: 5px;
        text-align: center;
        > .s_event_list_title {
            margin: 5px 0 0;
            @include o-text-overflow;
        }
        > .s_event_list_desc {
            font-size: 14px;
            font-weight: 300;
            margin: 8px 0 0;
            word-wrap: break-word;
            overflow: hidden;
            text-overflow: ellipsis;
            max-height: 2.2em;
            line-height: 1.1em;
            .fa {
                color: white;
            }
        }

        > ul {
            margin-top: 10px;
            > li {
                width: 50%;
                > a {
                    display: block;
                    width: 100%;
                    color: map-get($grays, '800');
                    text-decoration: none;
                }
            }
        }
    }
    > .s_event_list_social > ul {
        > li {
            width: 33.3333%;
            padding: 0px;
            > a {
                padding: 9px 0px 3px;
            }

            &:hover > a {
                color: white!important;
            }
        }
    }

    .s_event_list_facebook a {
        color: $color-facebook!important;
    }
    .s_event_list_twitter a {
        color: $color-twitter!important;
    }
    .s_event_list_google_plus a {
        color: $color-google!important;
    }
    .s_event_list_facebook:hover a {
        background-color: $color-facebook !important;
    }
    .s_event_list_twitter:hover a {
        background-color: $color-twitter !important;
    }
    .s_event_list_google_plus:hover a {
        background-color: $color-google !important;
    }
}

@include media-breakpoint-up(md) {
    #wrapwrap .s_event_list_item {
        display: flex;
        position: relative;
        > .s_event_list_icon  {
            width: $s-event-list-main-size;
            height: $s-event-list-main-size;
            float: left;
            text-align: center;
            .fa  {
                line-height: $s-event-list-main-size;
            }
        }
        > img {
            height: $s-event-list-main-size;
        }
        > time {
            max-width: $s-event-list-main-size;
        }
        > time, > img {
            flex: 1 1 auto;
            min-height: $s-event-list-main-size;
            min-width: $s-event-list-main-size;
            margin: 0px;
            padding: 0px;
            float: left;
        }
        > .s_event_list_info {
            flex: 1 1 auto;
            position: relative;
            overflow: hidden;
            min-height: $s-event-list-main-size;
            padding-right: 40px;
            text-align: left;
            > .s_event_list_title, .s_event_list_desc {
                padding: 0px 10px;
            }
            > ul {
                @include o-position-absolute($left: 0, $bottom: 0, $right: 40px);
            }
        }
        > .s_event_list_social {
            flex: 1 1 auto;
            @include o-position-absolute($top: 0, $right: 0, $bottom: 0);
            width: 40px;
            > ul {
                height: 100%;
                border-left: 1px solid lighten(map-get($grays, '200'), 10%);
                > li {
                    width: 100%;
                    height: 33.333%;
                    > a {
                        padding: 9px 0px;
                    }
                }
            }
        }
    }
}