h1 {
    margin-top: 0px;
    margin-bottom: 0em;
}

h2 {

    margin-bottom: 0.9em;
    margin-top: 0px;
}


section {
    margin-top: 4vh;
}

#bigLogoWrapper {
    display: flex;
    justify-content: center;
    width: 20em;
    padding-left: 4em;
    padding-right: 6em;
}
#bigLogo {
    width: 20em;
}
header #lclo_options {

    border-right: 1.5px solid var(--lclo-gold);
}

#calendarWrapper {
    padding-left: 2em;
    padding-top: 0em;
}
#calendarTable {
    border-collapse: collapse;
    cursor: none;
}
#calendarTable th {
    color: rgb(215,215,216);
    height: 2em;
    background-color: rgb(115,115,115);
    vertical-align: bottom;
    min-width: 6vw;
    max-width: 6vw;
}


#calendarTable td {
    vertical-align: bottom;
    padding: 3px;
    font-size: 0.9em;
    min-width: 6vw;
    max-width: 6vw;
    height: 2em;
}
#calendarTable td:hover, #calendarTable th:hover {
    color: var(--lclo-black);
    background-color: rgb(215,215,216);
}

#calendarTable .performances {
    background-color: var(--lclo-gold) !important;
    color: var(--lclo-black) ;

}

#calendarTable .rehersals {
    background-color: rgb(189, 214, 172) !important;
    color: var(--lclo-black) ;

}
#calendarTable .cancelled, #calendarTable .cancelledEvent {
    background-color: rgb(194, 120, 97) !important;
    color: white !important;

}

#calendarTable .eventText {
    background-color: rgb(215,215,216) !important;
    color: var(--lclo-black);
}
#calendarTable .eventTextBlank {
    background-color: var(--lclo-black) !important;
    color: white ;

}
@media (max-width: 768px) {

    section {
        margin-bottom: 2em;
    }
    #logoandsitedesc {
        display: flex;
        flex-direction: column;
    }
    #calendarWrapper  {
        padding-left: 0px;
    }
    #calendarTable {
        min-width: 100%;
        max-width: 100%;
    }
    #calendarTable td {
        min-width: 6vw;
        max-width: 6vw;
    }
    #nameDescription {
        max-width: 100%;
        order: 1;
    }
    #bigLogo {
        width: 15em;
    }
    #bigLogoWrapper {
        order: 10;
        margin-right: 0em;
        width: 100%;
    }
}