/***** HEADER AND FOOTER CLASS *****/
.headerfootercolor {
    background-color: var(--color-18345c);
    box-shadow: var(--boxshadow-black-alpha-0-4);
}

.headerfootercolor #footerbody p,
.headerfootercolor #footerbody h4,
.headerfootercolor #footerbody hr {
    color: #aaa;
    border-color: #aaa;
}

.headerfootercolor #footercopyright,
.headerfootercolor #footercopyright a {
    color: #eee;
    border-color: #eee;
}

#headercontainer {
    height: 56px;
}

#headerbody,
#footerbody,
.sectionbody {
    width: 90%;
}

#headerlogo img {
    width: 180px;
}

/***** HEADER MAIN MENU *****/
#headermainmenu {
    margin: auto 0;
    margin-left: auto;
}

/***** BODY CONTAINER *****/
#bodycontainer {
    margin-top: 56px !important;
}

/***** PAGE BANNER *****/
.pagebanner {
    background-image: url("../../public/images/pattern.jpg");
}

.pagebannercontent h1 {
    width: auto !important;
    position: absolute;
    left: 0;
    font-size: 3.2rem !important;
    text-align: left !important;
    color: #444 !important;
    background: none !important;
    white-space: nowrap;
    z-index: 1;
}

.pagebannercontent img {
    width: 300px;
    margin: 0 auto;
}

/***** RESPONSIVE WEB DESIGN *****/
@media screen and (max-width: 920px) {
    #headerlogo img {
        width: 140px;
    }

    #headermainmenu .canavigation ul {
        background-color: rgb(24, 52, 92);
    }

    .pagebannercontent h1 {
        width: 100% !important;
        position: relative !important;
        left: auto !important;
        text-align: center !important;
    }

    .pagebannercontent img {
        display: none;
    }
}

@media screen and (max-width: 1024px) {
    #headerlogo img {
        width: 140px;
    }
}