/* Put any custom CSS rules here */
.main-imgdiv h1 {
    display: none;
}

#GetEmbedTicketButton {
    background: #C1A1CB !important;
    transition: .3s all ease-in-out;
}

#GetEmbedTicketButton:hover {
    box-shadow: 0px 10px 35px -10px rgba(0,0,0,.2);
    transform: translateY(-2px);
}

.main-imgdiv {
    background: #f1f1f2;
    padding: 25px;
}

.upcoming_events .list-box {
    transition: .3s all ease-in-out;
    border: #e8e8e8 solid 2px;
}

.upcoming_events .list-box a:hover::before {
    opacity: 0;
}

.upcoming_events .list-box:hover {
    box-shadow: 0px 10px 35px -10px rgba(0,0,0,.2);
    transform: translateY(-2px);
    border: #C1A1CB solid 2px;
}

@media screen and (min-width: 767px) {
    .upcoming_events .listing-page .list-box {
    width: calc(33.33% - 30px);
}
}

.upcoming_events .listing-page .list-box .links {
    flex-direction: column;
}

.upcoming_events .listing-page .list-box a .event_image {
    width: 100%;
    padding-top: 64.33%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.upcoming_events .listing-page .list-box a .event__contentdiv {
     width: 100%;
     padding: 25px;
     background: #f9f9f9;
     flex: 1;
}