h1 {
 font-weight: 700; 
 font-size: 30px; 
 /*line-height: 20px;*/ 
 color: rgb(24, 96, 136); 
 font-family: Arial; 
}

h2 {
 font-weight: 600; 
 font-size: 28px; 
 /*line-height: 20px;*/ 
 color: rgb(24, 96, 136); 
 font-family: Arial; 
}

h3 {
 font-weight: 600; 
 font-size: 26px; 
 /*line-height: 20px;*/ 
 color: rgb(24, 96, 136); 
 font-family: Arial; 
}

h4 {
 font-weight: 600; 
 font-size: 24px; 
 /*line-height: 20px;*/ 
 color: rgb(24, 96, 136); 
 font-family: Arial; 
}

h5 {
 font-weight: 600; 
 font-size: 22px; 
 /*line-height: 20px;*/ 
 color: rgb(24, 96, 136); 
 font-family: Arial; 
}

h6 {
 font-weight: 600; 
 font-size: 18px; 
 /*line-height: 20px;*/ 
 color: rgb(24, 96, 136); 
 font-family: Arial; 
}

p {
 font-weight: 300; 
 font-size: 18px; 
 /*line-height: 20px;*/ 
 color: rgb(16, 16, 16); 
 font-family: Calibri,Open Sans,sans-serif;
 text-align: justify;
}

li {
 font-weight: 300; 
 font-size: 18px; 
 /*line-height: 20px;*/ 
 color: rgb(16, 16, 16); 
 font-family: Calibri,Open Sans,sans-serif;
 text-align: left;
}

button, .button {
 font-weight: 300; 
 font-size: 18px; 
 line-height: 16px; 
 padding: 10px; 
 color: rgb(255, 255, 255); 
 background-color: rgb(24, 96, 136); 
 font-family: Arial; 
}

button:hover, .button:hover {
 background-color: rgb(221, 221, 221); 
 color: rgb(24, 96, 136); 
}

a:not(.button,.breadcrumbClass) {
 font-weight: 300; 
 font-size: 18px; 
 /*line-height: 20px;*/ 
 color: rgb(34, 34, 34); 
 font-family: Calibri,Open Sans,sans-serif;
 text-decoration: underline;
}

a:not(.button,.breadcrumbClass):hover {
 color: rgb(34, 34, 34); 
 text-decoration: none;  
}

td {
 font-weight: 300; 
 font-size: 18px; 
 /*line-height: 20px;*/ 
 color: rgb(16, 16, 16); 
 font-family: Calibri,Open Sans,sans-serif;
 text-align: justify;
}


/* do not yet understand the @media stuff (it's CSS to override styles on smaller displays) and the default values seem to break things spectacularly so have commented out for now
        @media (max-width: 576px) {


            h1 {
                font-size: calc(30px - 100%)
            }


            h2 {
                font-size: calc(28px - 100%)
            }


            h3 {
                font-size: calc(26px - 100%)
            }


            h4 {
                font-size: calc(24px - 100%)
            }


            h5 {
                font-size: calc(22px - 100%)
            }


            h6 {
                font-size: calc(20px - 100%)
            }



            button {
                font-size: calc(18px - 100%)
            }


            p {
                font-size: calc(18px - 100%)
            }


            a {
                font-size: calc(18px - 100%)
            }


        }


        @media (max-width: 768px) {


            h1 {
                font-size: calc(30px - 100%)
            }


            h2 {
                font-size: calc(28px - 100%)
            }


            h3 {
                font-size: calc(26px - 100%)
            }


            h4 {
                font-size: calc(24px - 100%)
            }


            h5 {
                font-size: calc(22px - 100%)
            }


            h6 {
                font-size: calc(20px - 100%)
            }


            button {
                font-size: calc(18px - 100%)
            }


            p {
                font-size: calc(18px - 100%)
            }


            a {
                font-size: calc(18px - 100%)
            }


        }
*/

.fc-daygrid-day-number {

font-weight: 400;  font-size: 16px;  line-height: 21px;  color: rgb(16, 16, 16);  font-family: Arial; }

.fc-daygrid-day {background-color: rgb(255, 255, 255); }

.fc-day-today {background-color: rgb(255, 255, 255) !important; }

.fc-col-header-cell-cushion {font-weight: 700;  font-size: 16px;  line-height: 21px;  text-transform: capitalize;  color: rgb(16, 16, 16);  font-family: Arial; }

.fc-col-header-cell {background-color: rgb(255, 255, 255); }

.fc button {font-weight: 300 !important;  font-size: 18px !important;  line-height: 16px !important;  padding: 10px !important;  text-transform: capitalize !important;  color: rgb(255, 255, 255) !important;  background-color: rgb(24, 96, 136) !important;  border-color: rgb(0, 0, 0) !important;  font-family: Arial !important; }

.fc-toolbar {text-transform: capitalize;  color: rgb(0, 0, 0);  background-color: rgb(255, 255, 255);  font-family: Anton; }

.fc-theme-standard {}

.fc .fc-scrollgrid-section > td {border-color: rgb(0, 0, 0); }

.fc-daygrid-dot-event {font-weight: 700;  font-size: 14px;  line-height: 21px;  padding: 0px;  text-transform: capitalize;  color: rgb(16, 16, 16);  background-color: rgb(255, 255, 255);  font-family: Arial; }

.fc-h-event {font-weight: 700;  font-size: 14px;  line-height: 21px;  padding: 0px;  text-transform: capitalize;  color: rgb(16, 16, 16);  background-color: rgb(55, 136, 216);  border-color: rgb(0, 0, 0);  font-family: Arial; }

.fc-daygrid-event-dot {display: block; }


/* Custom styles */

.homepage-block {
    display:            inline-block;
    width:              100%;
    text-align:         center;
    vertical-align:     middle;
    padding:            10px;
    background-color:   white;
    border-color:       #666; 
    border-style:       solid; 
    border-width:       1px; 
    box-shadow:         8px 8px 8px #00000060;
    transition:         transform .2s;
}

.homepage-block:hover {
    transform:          scale(1.05) rotate(1deg);
}

.homepage-block .info-div {
    margin-top:         0;
    margin-bottom:      0;
    margin-left:        auto; 
    margin-right:       auto; 
    padding:            5px;
    top:                50px; 
    left:               0; 
    right:              0; 
    position:           absolute; 
    text-align:         center; 
    width:              80%;
    background:         rgba(24, 96, 136, 0.4); 
    color:              white;
}

.homepage-block .link-div {
    margin:             0;
    padding:            0;
    text-align:         center; 
    width:              100%;
}

.homepage-block .link-div a {
    margin:             0;
    padding:            0;
    font-family:        "Bradley Hand", "Comic Sans MS", "Comic Sans", cursive;
    display:            inline-block;
    width:              100%;
    text-decoration:    none; 
}

.homepage-block .image-div {
    margin:             0;
    padding:            0;
    text-align:         center; 
    width:              100%;
}

.homepage-block .image-div img {
    margin:             0;
    padding:            0;
    width:              100%;
}

.social-media-icon {
    transition:         transform .2s;
}

.social-media-icon:hover {
    transform:          scale(1.2);
}

/* the standard "powered by" element looks rubbish because it's white so have
copied its contents to our footer and added the following to hide the builtin one  */
.poweredBy {
    display:            none !important; 
}

/* make the footer stick to the bottom - don't do this */
/* footer {
    position: fixed;
    bottom: 0;
    left: 0;
} */
.sidebarBody ul.level-1 > li > a{font-family: Arial}
.sidebarBody ul.level-1 > li > a{font-size: 28px}
.sidebarBody ul.level-1 > li > a{font-weight: 400}
.sidebarBody ul.level-1 > li > a{text-transform: none}
.sidebarBody ul.level-1 > li > a{color: rgb(0, 0, 0)}
.sidebarBody ul.level-1{background-color: rgb(242, 242, 242)}
.sidebarBody ul.level-1 > li:hover > a{color: rgb(0, 0, 0)}
.sidebarBody ul.level-1 > li:hover{background-color: rgb(231, 231, 231)}
.sidebarBody ul.level-1.selected > li {background-color: rgb(231, 231, 231)}
.sidebarBody ul.level-1.selected > li > a{color: rgb(0, 0, 0)}
.sidebarBody ul.level-1 > li > a{padding-left: 10px !important; padding-right: 10px !important}
.sidebarBody ul.level-1 > li > a{padding-top: 10px !important; padding-bottom: 10px !important}
.sidebarBody ul.level-2 > li > a{font-family: Arial}
.sidebarBody ul.level-2 > li > a{font-size: 16px}
.sidebarBody ul.level-2 > li > a{font-weight: 400}
.sidebarBody ul.level-2 > li > a{text-transform: none}
.sidebarBody ul.level-2 > li > a{color: rgb(0, 0, 0)}
.sidebarBody ul.level-2{background-color: rgb(242, 242, 242)}
.sidebarBody ul.level-2 > li:hover > a{color: rgb(0, 0, 0)}
.sidebarBody ul.level-2 > li:hover{background-color: rgb(231, 231, 231)}
.sidebarBody ul.level-2.selected > li {background-color: rgb(231, 231, 231)}
.sidebarBody ul.level-2.selected > li > a{color: rgb(0, 0, 0)}
.sidebarBody ul.level-2 > li > a{padding-left: 10px !important; padding-right: 10px !important}
.sidebarBody ul.level-2 > li > a{padding-top: 10px !important; padding-bottom: 10px !important}
.sidebarBody ul.level-3 > li > a{font-family: Arial}
.sidebarBody ul.level-3 > li > a{font-size: 16px}
.sidebarBody ul.level-3 > li > a{font-weight: 400}
.sidebarBody ul.level-3 > li > a{text-transform: none}
.sidebarBody ul.level-3 > li > a{color: rgb(0, 0, 0)}
.sidebarBody ul.level-3{background-color: rgb(242, 242, 242)}
.sidebarBody ul.level-3 > li:hover > a{color: rgb(0, 0, 0)}
.sidebarBody ul.level-3 > li:hover{background-color: rgb(231, 231, 231)}
.sidebarBody ul.level-3.selected > li {background-color: rgb(231, 231, 231)}
.sidebarBody ul.level-3.selected > li > a{color: rgb(0, 0, 0)}
.sidebarBody ul.level-3 > li > a{padding-left: 10px !important; padding-right: 10px !important}
.sidebarBody ul.level-3 > li > a{padding-top: 10px !important; padding-bottom: 10px !important}
.sidebarBody ul.level-4 > li > a{font-family: Arial}
.sidebarBody ul.level-4 > li > a{font-size: 16px}
.sidebarBody ul.level-4 > li > a{font-weight: 400}
.sidebarBody ul.level-4 > li > a{text-transform: none}
.sidebarBody ul.level-4 > li > a{color: rgb(0, 0, 0)}
.sidebarBody ul.level-4{background-color: rgb(242, 242, 242)}
.sidebarBody ul.level-4 > li:hover > a{color: rgb(0, 0, 0)}
.sidebarBody ul.level-4 > li:hover{background-color: rgb(231, 231, 231)}
.sidebarBody ul.level-4.selected > li {background-color: rgb(231, 231, 231)}
.sidebarBody ul.level-4.selected > li > a{color: rgb(0, 0, 0)}
.sidebarBody ul.level-4 > li > a{padding-left: 10px !important; padding-right: 10px !important}
.sidebarBody ul.level-4 > li > a{padding-top: 10px !important; padding-bottom: 10px !important}
.sidebarBody ul.level-5 > li > a{font-family: Arial}
.sidebarBody ul.level-5 > li > a{font-size: 16px}
.sidebarBody ul.level-5 > li > a{font-weight: 400}
.sidebarBody ul.level-5 > li > a{text-transform: none}
.sidebarBody ul.level-5 > li > a{color: rgb(0, 0, 0)}
.sidebarBody ul.level-5{background-color: rgb(242, 242, 242)}
.sidebarBody ul.level-5 > li:hover > a{color: rgb(0, 0, 0)}
.sidebarBody ul.level-5 > li:hover{background-color: rgb(231, 231, 231)}
.sidebarBody ul.level-5.selected > li {background-color: rgb(231, 231, 231)}
.sidebarBody ul.level-5.selected > li > a{color: rgb(0, 0, 0)}
.sidebarBody ul.level-5 > li > a{padding-left: 10px !important; padding-right: 10px !important}
.sidebarBody ul.level-5 > li > a{padding-top: 10px !important; padding-bottom: 10px !important}