header#enheader3 {
    /* Convenience variables for header only start here. Add/update/delete for your needs. */
    --text-color: #333333;
    --font1: var(--school-font-family);
    --font2: Karla, sans-serif;
    /* Convenience variables end here */

    --height: min(19.0909vw, 210px);
    --top-bar-height: min(2.9090vw, 32px);
    --bottom-bar-height: min(4vw, 44px);
    --column-gap: min(2vw, 22px);

    --logo-width: min(15.5454vw, 171px);
    --logo-shadow-color: rgb(0, 0, 0, 15%);
    --logo-border-color: #dddddd;

    --top-bar-background:#f0f0f0;
    --top-bar-border-color: var(--blue); /* if border enabled */
    --center-bar-background: var(--red);
    --bottom-bar-background: #f0f0f0;
    --bottom-bar-border-color: #d8d8d8; /* if border enabled */

    --website-name-font-family: var(--school-font-family-hf-f1);
    --website-name-font-size: min(6vw, 66px);
    --website-name-font-weight: 600;
    --website-name-color: #fff;
    --website-name-line-height: 1;
    --website-name-shadow-color: #5f1006;
    --website-name-visibility: visible;
    --website-name-line-break-display: none;




    --website-motto-font-family: 'Nunito', sans-serif;
    --website-motto-font-family: var(--school-font-family);
    --website-motto-font-size: 0.34em;
    --website-motto-color: var(--white);


    --marquee-font-family: var(--font2);
    --marquee-font-size: min(1.4545vw, 16px);
    --marquee-background: var(--top-bar-background);
    --marquee-color: #222;

    --search-translate-font-family: var(--font2);
    --search-translate-font-size: min(1.3636vw, 15px);
    --search-translate-color: #222222;

    /* Top Navigation params */
    --topnav-font-family: var(--school-font-family-2);
    --topnav-font-size: clamp(12px, 1.72vw, 19px);
    --topnav-color: var(--red);
    --topnav-background:  #f0f0f0;  /*transparent; changed for ADA */
    --topnav-hover-color: var(--red);
    --topnav-hover-background: #f0f0f0;
    --topnav-color3: var(--red);

    --menu-font-family: var(--font1);
    --menu-font-size: clamp(14px, 1.7272vw, 16px);
    --menu-background: #f0f0f0;
    --menu-color: var(--red);
    --menu-hover-background: var(--blue);
    --menu-hover-color: var(--black);

}

/* STYLING FOR MOBILE */
@media only screen and (max-width: 768px) {

    header#enheader3.enh1 {

        --header-height: clamp(90px, 19vw, 150px);
        --header-background: #ffffff;

        --logo-width: clamp(80px, 15vw,  110px);

        --website-name-font-size: calc(32px + (44 - 32) * ((100vw - 320px) / (768 - 320)) * 0.9);
        --website-name-color: #000000;
        --website-name-font-weight: 600;
        --website-name-line-break-display: none;

        --website-motto-font-size: 0.6em;

        --marquee-background: var(--blue);
        --marquee-color: white;

        --mobnav-button-background: var(--header-background);
        --mobnav-button-color: var(--blue);
        --mobnav-button-hover-background: var(--blue);
        --mobnav-button-hover-color: var(--header-background);

        --menu-font-family: var(--font1);
        --menu-font-size: clamp(16px, 3.5vw, 16px);
        --menu-background: #ffffff;
        --menu-color: #000;
        --menu-hover-background: var(--blue);
        --menu-hover-color: #000;
        --logo-shadow-color: rgb(0, 0, 0, 10%);

    }


}
@media (max-width: 768px) and (min-width: 663px) {
    header#enheader3.enh1 {
        --website-name-font-size: calc(40px + (48 - 40) * ((100vw - 663px) / (768 - 663)));
    }
}

@media only screen and (max-width: 663px) {
    header#enheader3.enh1 {
        --website-name-font-size: calc(27px + (30 - 27) * ((100vw - 350px) / (663 - 350)) * 0.5);

    }

}

@media only screen and (max-width: 480px) {
    .enh1-website-name-motto,
    .enh1-website-motto{
        text-align: center !important;
    }
    .enh1-middle{
        justify-content: center !important;
        align-items: center;
    }
}