body{background-color: #dfe8df
}

.dayOfMonth{
    border: 1px solid black;


}

.calendarHeader
{
    display: none;
}

@media (min-width:500px) {

    /* your conditional / responsive CSS inside this condition */

    .calendarHeader
    {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
    }

}

.calendarHeader DIV
{
    border: 1px solid black;
    font-weight: bolder;
}

.calendarWeek {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
}

.eventListItem{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 60em;
    border-bottom: 1px solid black;
}




.offMonth{
    display: none;
}

@media (min-width:500px) {
    .calendarWeek {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
    }

    .cellDow{
        display: none;
    }
    .offMonth{
        display: grid;
        color: #6e6e6e;
    }
}



.headerControl
{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.calEvent{

}

.calEventName{
    font-weight: bold;
    color: #062038;
}

.callEventTime{
    font-size: .75em;
}