﻿/* The animation code */
@keyframes fadeInEvent {
    from { opacity: 0; }
    to { opacity: 100; }
}

/* The element to apply the animation to */
.event-summary { animation-name: fadeInEvent; animation-duration: 2s; }




/*Main Event List*/
.eventList { width:90%; max-width:1800px; margin:0 auto; }

.eventList .btn { display:inline-block; margin:20px 0 0; white-space:nowrap; font-size:12px; }

.eventList .event-summary { display: flex; flex-wrap: wrap; align-items: flex-start; width: 100%; margin: 10px auto; border: 1px solid #ccc; border-radius: 5px; padding: 15px 20px 0; }
    .eventList .event-summary h3 { width:100%; margin: 0 0 20px; }

    .eventList .event-summary .eventDetails { width:100%; }
        .eventList .event-summary .eventDetails p { margin:0; padding:0 0 5px; }

        .eventList .event-summary .eventDescription { padding:20px 0; }
            .eventList .event-summary .eventDescription > div { width:100%; }

    .eventList .event-summary .event-summary-image { width: 200px; margin: 0; padding: 0; text-align: center; }
        .eventList .event-summary .event-summary-image + div { width:calc(100% - 200px); margin:0; padding:0; }


.event-Index { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; }
    .event-Index h1 { width: 100%; }
    .event-Index h2 { width: 100%; }
    .event-Index h3 { width: 100%; }
    .event-Index h4 { width: 100%; }
    .event-Index h5 { width: 100%; }
    .event-Index h6 { width: 100%; }

    /*.event-Index .eventDescription p { margin: 0; padding: 0; }*/







/*Event Post Details*/

.event-summary { display:flex; align-items:flex-start; flex-wrap:wrap; width:90%; max-width:1800px; margin:0 auto; }

    .event-summary .eventSchedule { width:550px; }
    .event-summary .eventDescription { width:calc(100% - 550px); padding:0 20px; }
        .event-summary .eventSchedule p { margin:0; padding:0 0 5px; }
    .event-summary .eventSchedule .eventDuration { margin-bottom:20px; }


.eventDetails .event-summary {  flex-direction:row-reverse; }