:root {
    --color-primary: #184a5b;
    --color-secondary: #ed7647;
    --color-text: #fff;
}
.row{
    display:flex;
    flex-wrap:wrap;
    margin-right:-15px;
    margin-left:-15px
}

.d-flex {
    display: flex;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.w-100 {
    width: 100% !important;
}

.m-0  {
    margin:0 !important;
}

.my-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.mt-3 {
    margin-top: 1rem !important;
}

.py-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.pt-3 {
    padding-top: 1rem !important;
}

.p-3 {
    padding: 1rem !important;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

.text-uppercase {
    text-transform: uppercase;
}



.col-md-2,
.col-md-3,
.col-md-4,
.col-lg-1,
.col-lg-2,
.col-lg-6 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

@media(min-width: 768px){
    .col-md-2 {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-md-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-md-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-md-8 {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
}
@media(min-width: 1025px){
    .col-lg-1 {
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-lg-2 {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-lg-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

.event-details .event-detail-wrapper {
    background-color: #f3f3f3;
}

.event-details .event-detail-wrapper .e-detail.last{
    border-bottom:none
}

.event-details .event-detail-wrapper .balken{
    background-color:var(--color-primary);
    padding:.5rem .75rem
}

.event-details .event-detail-wrapper .balken h2,
.event-details .event-detail-wrapper .balken h3{
    font-size:1.25rem;
    margin:0;
    line-height:1;
    color:#f5ece2;
    font-weight:400
}

.event-details .event-detail-wrapper .e-detail{
    padding:1.5rem 0rem;
    border-bottom:1px dotted #464646;
    font-size: 1.125rem;
}

.event-details .event-detail-wrapper .e-detail h3{
    font-weight:bold;
    font-size:1.25rem
}

.event-details .event-detail-wrapper .e-detail:last-child{
    border-bottom:none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.event-details .event-detail-wrapper .e-detail:last-child p:last-child{
    margin-bottom: 0;
}

.event-body h1 {
    margin-bottom: 1rem;
}

.monthdivider h2{
    font-size:1.5rem;
    font-weight:400;
    letter-spacing:2px;
    color: #fff;
    text-transform:uppercase;
}

.monthdivider h3 a{
    color: #fff;
}

.monthdivider{
    background-color:var(--primary-color);
    color:#fff;
    padding:.25rem .75rem
}

@media(max-width: 775px){
    .event-row{
        padding:0
    }
    .event-row .datecube{
        width:100%;
        height:8rem;
        justify-content:center
    }
}

@media(min-width: 776px){
    .event-row .date{
        padding:0px
    }
    .event-row .buttons{
        padding-right:0px
    }
}

.datecube{
    display:flex;
    padding:0rem 0rem 0rem .75rem;
    text-transform:uppercase;
    align-items:center;
    background-color:var(--color-primary);
    color:#fff;
    width:5em;
    height:5em
}
.datecube .mon{
    font-size:1em;
    line-height:1;
    padding:0;
    margin:0
}
.datecube .day{
    font-size:2em;
    line-height:1;
    margin:-0.75rem 0 0 0;
    padding:0
}

.event-row{
    border-bottom:dotted 1px #000
}
.event-row p:empty{
    display:none
}
.event-row{
    flex-grow:1
}
.event-row .date{
    align-items:center
}
.event-row .date .datecube{
    line-height:1.5;
    padding:0;
    padding-left:.75rem
}
.event-row .date .datecube .day{
    padding:0;
    margin:0
}
.event-row .date .datecube .mon{
    line-height:1.5;
    padding:0;
    margin:0
}
.event-row .img{
    align-items:center
}
.event-row .infos h2{
    font-size:2em
}
.event-row .infos{
    flex-grow:1;
    align-items:center
}
.event-row .buttons{
    align-items:center
}
.event-row .buttons .btn{
    display: inline-block;
    margin:.25rem 0;
    width:100%;
    text-align:center;
}
.event-row .buttons .btn.tickets{
    background-color: var(--color-secondary);
    color: #fff;
}
.event-row .buttons .btn.tickets:hover{
    background-color: #fff;
    color: var(--color-secondary);
}