body {
    background-color: #000;
    color: #fff;
    font-family: calibri, verdana, helvetica, arial, sans-serif;
    font-size:  14px;
}

a {
    color: rgb(52, 95, 227, 1);
}

#page-constraints {
    margin: auto;
    width: 90%;
}

main .events-container {

}

main .events {
     display: flex;
}


main .event-slide {
    flex:  1;
    position: relative;
}

main .event-list {
    display: flex;
    flex:  1;
    padding:  0;
}

main .event-list > li {
   list-style-type: none;
   flex:  4;
   border:  1px solid #f00;  
}

.event-slide .event-logo {
    height:  120px;
}

.event-slide .event-logo img {
    padding-top:  10px;
    max-width: 100%;
    max-height: 100%;
}

.event-slide .event-details-section {
    padding: 10px 20px 20px;
    display: flex;
    flex-wrap: wrap;
}

.event-slide .event-details-section > div {
    flex: 1;
    padding: 10px 10px 0;
}

.event-slide .event-details-section > div.description-container {
    height: 150px;
    min-width: 100%;
}

.event-slide .event-details-section .event-header {
    font-size: larger;
    font-weight: bold;
    margin-bottom: 5px;
}

.event-slide .event-details-section .event-detail {
    margin-bottom: 10px;
}

.event-slide .event-details-section .event-detail.ticket-container {
    margin-bottom: 0;
    position: absolute;
    bottom: 20px;
}

.event-slide .event-details-section .event-detail.tickets button {
    font-size:  larger;
    background-color: rgb(10, 6, 92, 1);
    border-radius:  10px;
    border: 2px solid rgb(255, 255, 255, 1);
    margin-top:  10px;
    color: rgb(255, 255, 255, 1);
    padding:  5px;
}

.event-slide .event-details-section .event-detail.tickets button.spank {
    background-color: rgb(193, 8, 8, 1);
}


.event-slide .event-details-section .event-detail.tickets button.breathe {
    background-color: rgb(200, 161, 252, 1);
}




.footer-constraints {
    margin: auto;
    padding-top: 20px;
    text-align: center;
}