<style>


    html, body, h1, h2, h3, h4, h5, h6, p
        {font-family: Calibri, sans-serif;}
    
    .kofc-blue,.kofc-hover-blue:hover
        {color:#fff!important;background-color:#112866!important}
    .kofc-text-blue
        {color:#112866!important}

    .kofc-button-margin
        {   margin-top:4px!important;
            margin-bottom:4px!important;
            margin-left:2px!important;
            margin-right:2px!important;
        }

    .kofc-table-font-size
        {font-size:18px!important}

    @media print {
        .kofc-table-font-size
            {font-size:10px!important}
    }

:target {
  scroll-margin-top: 60px; /* the height of your fixed header is 50px */
}

.kofc-image600x400 {max-width:600px;max-height:400px;}
.fitimg img {object-fit:contain;}
.rightmargin16 {margin-right: 16px;}
.height50fitcontain {max-height:50px;object-fit:contain;}
.sticky_top {position:sticky; top:0;}
.stdimage {
    max-width: 600px;
    max-height: 400px;
    width: 100%;
    object-fit: contain;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom:0;
}

.wtlriderimage {
    max-width: 600px;
    max-height: 400px;
    width: 100%;
    object-fit: contain;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom:0;
}

.carouselheight {min-height:300px}
.menufont {font-size:10px}
@media screen and (min-height:700px) {
    .carouselheight {min-height:400px}
    .menufont {font-size:12px}
}

.kofc-table-font-family-left
        {font-family: "Times New Roman", serif;}

    .kofc-intro-font-size
        {font-size:22px!important}

    .mySlides {display: none;}

    .w3-dropdown-content {left:auto; right:0;}

    #imageContainer {
        background-color: #FFFFFF;
        max-width: 100%;
        height: auto;
        width: auto;
        overflow: hidden;
        border: 2px #FFFFFF solid;
    }

    #imageMcGiveny {
        background-color: #FFFFFF;
        max-width: 100%;
        height: auto;
        width: auto;
        overflow: hidden;
        border: 2px #FFFFFF solid;
    }

    @media screen and (max-width: 600px)
        {   h1{font-size:24px;margin:4px}
            h2{font-size:22px}
            h3{font-size:20px}
            h4{font-size:18px}
            h5{font-size:16px}
            h6{font-size:14px}
            .kofc-table-font-size {font-size:12px!important}
            .kofc-intro-font-size {font-size:16px!important}
            
            #imageContainer {
                max-width: 300px;
                max-height: 200px;}
            
            #kofc-SmallDevice {max-width: 90vw;}

        }

    @media (max-width:992px) and (min-width:601px)
        {
            .kofc-table-font-size {font-size:15px!important}
            .kofc-intro-font-size {font-size:18px!important}
        }


    .sticky {
        position: fixed;
        top: 0;
        width: 100%;
    }

    .parallax_pagetop_midistrict1 {
        /* The image used */
        background-image: url("../pics/banner.jpg");
        
        /* Set a specific height */
        height=100%;
        
        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }


    .cd-fixed-bg {
        position: relative;
        max-height: 72px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        z-index: 1;
    }

    .cd-scrolling-bg {
        position: relative;
        min-height: 100%;
        padding: 4em 0;
        line-height: 1.6;
        -webkit-box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
        z-index: 2;
    }

/* The items below were added for events and calendars. */

.calendar {
  background: #fff;
  width: 350px;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.calendar-days div {
  text-align: center;
  font-weight: 600;
  color: #888;
  font-size: 0.85rem;
}

.calendar-dates div {
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  transition: background 0.2s;
}

.calendar-dates .significantday {
    font-weight: bold;
}

.calendar-dates .today {
    border-color: black;
    border-style: solid;
}

.calendar-events-0 {
    background: white;
    color: black;
    cursor: auto;
}

.calendar-events-1 {
    background: lightpink;
    color: black;
    cursor: auto;
}

.calendar-events-2 {
    background: lightsalmon;
    color: black;
    cursor: auto;
}

.calendar-events-3 {
    background: orange;
    color: white;
    cursor: auto;
}

.calendar-events-4 {
    background: red;
    color: white;
    cursor: auto;
}

.calendar-example {
    margin: 8px 0px 8px 16px;
}

.calendar-round {
    border-radius:10px;
}

.calendar-dates .empty {
  background: transparent;
}

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar-month {
    width: 260px;          /* adjust as needed */
    text-align: center;
    font-weight: bold;
}

.caret {
    cursor: pointer;
    user-select: none;
}

.agenda-date {
    width: 300px;
    text-align: left;
    margin-right: 16px;
    margin-top: 8px;
    font-size: 24px;
    font-weight: bold;
}

.agenda-date .date {
    color: blue;
}

.agenda-date .date-old {
    color: lightgrey;
}

.agenda-events {
/*    flex: 1; */
}

.agenda-event {
    border-bottom: 1px solid grey;
}

.agenda-event:last-child {
    border-bottom: 3px double black;
}

.agenda-significantday {
    color: blue;
}

.time {
    width: 80px;
    color: black;
    font-weight: normal;
}

.agenda-button {
    background-color: cyan;
    margin: 0px 16px 8px 0px;
}

.cb_unchecked { display: none; }
/* .cb_checked { display: block; } */
.cb_style { width:15px; height:15px }

/* Mobile */

@media (max-width: 600px) {
    .agenda-date {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: auto;
    }

    .agenda-date .date {
        margin: 0 0px;
    }

    .time {
        width: 80px;
        padding-right: 20px;
    }
    
}

/******************/

</style>
