/* Events page */

#events-container {
    margin: 0 -0.5rem;
}

.event_item {
    position: relative;
    line-height: 1.5;
    flex: 0 0 100%;
    margin: 1rem 0;
    transition: transform 0.15s ease-in-out;
}

.event_item:hover .msl_event_name {
    transform: translateY(-0.5rem);
}

.event_item .msl_event_image {
    clip-path: polygon(100% 0, 100% 100%, 0 90%, 0 0);
    transition: 0.3s clip-path ease;
}

.event_item:hover .msl_event_image {
    clip-path: polygon(100% 0, 100% 90%, 0 90%, 0 0);
}

.event_item dl {
    margin: 0.5rem;
    background: rgba(0, 0, 0, 0.03);
    height: calc(100% - 1rem);
}

.msl_eventlist > div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.msl_event_image {
    display: block;
}

.msl_event_image img {
    height: auto;
}

.msl_event_hook, .msl_event_types, .msl_event_description {
    display: none;
}

.event-online {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    background: #fff;
    width: 2rem;
    height: 2rem;
    border-radius: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    -webkit-box-shadow: 0px 0px 10px -5px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 10px -5px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 10px -5px rgba(0,0,0,0.75);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.27, 1.55);
}

.event_item:hover .event-online {
    top: -0.5rem;
    color: #36ada9;
    transform: rotate(-35deg);
}

.event-online-tooltip {
    position: absolute;
    top: -1rem;
    left: 4rem;
    height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4rem;
    padding: 0 1rem;
    opacity: 0;
    background: #484495;
    font-weight: 700;
    color: #fff;
    transition: 0.1s all ease-in-out;
}

.event-online-tooltip::after {
    content: " ";
    position: absolute;
    top: 50%;
    right: 98%;
    margin-top: -8px;
    border-width: 8px;
    border-style: solid;
    border-color: transparent #484495 transparent transparent;
}

.event-online:hover + .event-online-tooltip {
    opacity: 1;
}

.msl_event_details {
    display: flex;
}

#main a.msl_event_name {
    background: transparent;
    margin: 0.5rem 1rem;
    display: block;
    font-weight: 700;
    transition: transform 0.3s ease;
}

.msl_event_name_location {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.msl_event_location {
    display: inline-block;
    margin: 0 1rem 1rem;
    color: #a6a1d1;
    word-break: break-word;
}

.msl_event_location:before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f3c5';
    margin-right: 0.5rem;
}

.msl_event_time {
    display: flex;
    flex: 0 0 6rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    order: 2;
    padding: 0 1rem;
    margin: 0.5rem 0;
    font-weight: 700;
    color: #a6a1d1;
}

/* Filters */

#event-filters {
    display: flex;
    flex-wrap: wrap;
}

#event-filters .dropdown-container, #event-filters .input-container {
    flex: 0 0 100%;
    position: relative;
}

#event-filters .input-container {
    margin-top: 1rem;
}

input#eventFilter {
    position: relative;
    width: 100%;
    padding: 0.5rem 4rem 0.5rem 1rem;
    font-size: 1.2rem;
    font-weight: 700;
    background: #fed060;
    border: 0;
    color: #484495;
}

input#eventFilter::placeholder {
    color: #f49645;
}

#event-filters .dropdown-container:after {
    content: '\f078';
    position: absolute;
    right: 1.25rem;
    top: 0.6rem;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 1.2rem;
}

#event-filters .input-container:after {
    content: '\f002';
    position: absolute;
    right: 1rem;
    top: 0.2rem;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 1.5rem;
}

#categoryFilter {
    -moz-appearance: none;
    -webkit-appearance: none; 
    appearance: none;
    width: 100%;
    height: 100%;
    padding: 0.5rem 1rem;
    font-size: 1.2rem;
    font-weight: 700;
    border: 0;
    background: #fed060;
    color: #f49644;
}

@media (min-width: 992px) {
    
    #events-container .event_item {
        flex: 0 0 50%;
    }

    #events-container .event_item:nth-child(-n+2) dl {
        background: #302a65;
    }

    #events-container .event_item:nth-child(-n+2) .msl_event_name {
        color: #fff;
    }

    #events-container .event_item:nth-child(n+3) {
        flex: 0 0 33.333333%;
    }
    
    #events-container .msl_event_name, #events-container .msl_event_time {
        font-size: 1.5rem;
    }
    
    #event-filters .dropdown-container {
        flex: 0 0 15rem;
        padding-right: 0.5rem;
    }
    
    #event-filters .input-container {
        flex: 1;
        padding-left: 0.5rem;
        margin-top: 0;
    }
    
}

/* Individual event pages */

.lead + .event_tickets {
    border-top: 3px solid #a6a1d1;
    padding-top: 1rem;
}

.event_tickets h3 {
    margin-top: 0;
}

.event_ticket {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.075);
    border-radius: 3rem;
    padding: 0 1rem;
}

.event_ticket + .event_ticket {
    margin-top: 1rem;
}

.event_ticket span {
    order: -1;
}

.event_ticket select {
    margin-left: auto;
    padding: 0.5rem 1rem;
    border: 0;
    background: transparent;
}

.event_ticket input {
    padding: 0.5rem 1rem;
    background: transparent;
}

.event_ticket input:hover, .event_ticket input:focus {
    background: transparent;
    color: #36ada9;
}

.event-page-details {
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    color: #36ada9;
}

.event-page-date, .event-page-time, .event-page-location {
    position: relative;
}

.event-page-date:before, .event-page-time:before, .event-page-location:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 4rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #f7f7f7;
    z-index: -1;
}

@media (min-width: 768px) {

    .event-page-date:before {
        content: '\f073';
    }
    
    .event-page-time:before {
        content: '\f017';
    }
    
    .event-page-location:before {
        content: '\f041';
    }
    
}