/* change colour of brand header */
.container-header {
  background-color: #8CCDFF;
  background-image: none;
}
/* align logo and menu on the left */
.grid-child .container-nav .mod-custom {
flex-wrap: wrap;
justify-content: start;
padding-top: 20px;
}

.navbar {
align-items: left;
justify-content: space-between;
}

/* change font colour of main menu to black */
.container-header .mod-menu {
    color: #000;
    font-size: 1.5rem;
    flex: unset;
}
/* Change the font color of the menu links to black */
.container-header .mod-menu li a {
  color: #000;
}  

.container-header.mod-menu a:active {
    background-color: transparent;
    color: black; /* Change this to your desired color */
    text-decoration: underline; /* Add an underline to the menu item */
}
.container-header .navbar-toggler {
    color: #db504a;
    border: 1px solid #db504a;
}
/* Begin: Flexbox for image and text side by side ************************/
html {
    padding: 0 1em;
    font-family: Calibri, sans-serif;
}

.image-left,
.image-right {
    margin: 1em 0;
}
/* Moved this into .image-left and .image-right because it affects other  */
/*
img {
    max-width: 220px;
    height: auto;
}
*/
@media (min-width: 20em) {
    .image-left,
    .image-right {
        display: flex;
        align-items: center;
    }

    .image-left img {
        margin-right: 1em;
/*		max-width: 220px; */
        height: auto;
        float: left; /* fallback */
    }

    .image-right img {
        order: 1;
        margin-left: 1em;
		max-width: 220px;
        height: auto;
        float: right; /* fallback */
    }

    /* Clearfix for fallback */
    .image-left::after,
    .image-right::after {
        content: "";
        display: block;
        clear: both;
    }
}

@media (min-width: 30em) {
    .image-left img,
    .image-right img {
        flex-shrink: 0;
    }
}
/* End: Flexbox for image and text side by side *******************************/