.event-detail {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-top: 3em;
}

.event-detail .event-detail--full-details {
    -webkit-box-flex: 1.5;
    -ms-flex: 1.5 1 auto;
    flex: 1.5 1 auto;
    padding-bottom: 2em;
}

.event-detail .event-detail--full-details h1 {
    text-align: left;
    font-size: 1.75em;
}
.event-detail .event-detail--full-details h1::before,
.event-detail .event-detail--full-details h1::after {
    display: none;
}

.event-detail .event {
    background-color: #fff;
    border: 1px solid #ddd;
    margin: 1em;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 30%;
    flex: 1 0 30%;
    min-width: 260px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 100%;
}

.event-detail .event .event--image {
    max-height: 200px;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.event-detail .event--image .post-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    -o-object-fit: cover;
    object-fit: cover;
}

.event-detail .event--details {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    height: 100%;
}

.event-detail .event--date {
    position: relative;
    text-align: center;
    padding: 0 0.25em;
    margin: 0 0 1em 0;
    margin-bottom: auto;
    background-color: #e6ecf1;
    min-width: 95px;
    padding-top: 30px;
}

.event-detail .event--date span {
    display: inline-block;
    background-color: #e6ecf1;
    padding: 0 0.35em 0.5em 0.35em;
    font-size: 1.5rem;
}

.event-detail .event--date span.date--year {
    display: block !important;
    font-size: 90%;
    border-top: 3px solid #fcd349;
    max-width: 90%;
    margin: 0 auto;
    padding: 0.5em 0;
}

.event-detail .event--date span.date__day:first-child:not(:only-child):after {
    position: absolute;
    top: 30px;
    width: 100%;
    text-align: center;
    left: 0;
}
.event-detail
    .event--date:not(.one-day)
    span.date__day:first-child:not(:only-child):after {
    content: '-';
}
.event-detail .event--date.one-day span.date--end {
    display: none;
}
.event-detail .event--date.one-month.one-day span.date__day:last-child {
    display: none;
}

.event-detail .event--date span:before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    padding: 0.25em 0.5em;
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 400;
    color: #054680;
    font-family: 'Roboto', sans-serif;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: #e6ecf1;
}
.event-detail .event--date.one-month span.date__day:first-child:before {
    content: attr(data-month);
}
.event-detail .event--date.two-months {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.event-detail .event--date.two-months span.date--start {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
.event-detail .event--date.two-months span.date--end {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
.event-detail .event--date.two-months span.date__day:before {
    width: 50%;
    content: attr(data-month);
}
.event-detail .event--date.two-months span.date--end:before {
    left: auto;
}
.event-listing
    .event--date.two-months
    span.date__day:last-child:not(:only-child):before {
    left: auto;
    right: 0;
    width: 50%;
    content: attr(data-month);
}
.event-detail .event--date.two-months span.date--year {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
}

.event-detail .event--info {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 1em;
}

.event-detail .event--info .info--section {
    padding-bottom: 10px;
    color: #0f253f;
}

.event-detail .event--info span {
    display: block;
    /*color: #ccc;*/
    color: #838383;
    font-weight: 600;
    letter-spacing: 0.02rem;
    text-transform: uppercase;
    font-size: 90%;
}

.event-detail .event--info .info--section__price .price {
    font-size: 1.25em;
}

.event-detail .event--actions {
    background-color: #fff;
    border-top: 1px solid #ddd;
    padding: 0.75em 1em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.event-detail .event--price {
    font-size: 1.25em;
    font-weight: bold;
    margin-bottom: 0.75em;
}

.event-detail .btn.btn-success {
    background-color: green;
    padding: 0.5em 1em;
    color: #fff;
    text-decoration: none;
}

.event-detail .event--actions .button.button__tertiary {
    padding: 0.5em 2em;
}

/* Mid-Size / Average Tablet */
@media screen and (min-width: 900px) {
    .event-detail {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
    .event-detail .event-detail--full-details {
        padding-right: 4em;
    }
    .event-detail .event {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 calc(33.33% - 2em);
        flex: 0 0 calc(33.33% - 2em);
        min-width: 300px;
        margin-right: 0;
    }
    .event-detail .event--details {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: 1em;
    }

    .event-detail .event--info {
        padding: 0 1em 1em 0;
    }

    .event-detail .event--date span::before {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background-color: #e6ecf1;
    }

    .event-detail .event--actions {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }

    .event-detail .event--price {
        margin-bottom: 0;
    }
}