.header-page {
     background-image:url("https://robertgravessociety.org/images/bookshelf_blue.png"); 
     font-family:'Open Sans';
 color:white;
 font-size:1em;
  background-size:cover;
 background-position:20% 70%;
}



.div-header-upper, .div-header-middle {
    align-items:center;
    box-sizing:border-box;
    columns:1fr;
    grid-template-column-gap:2em;
    row-gap:0.5em;
    width:100%;
}




.div-header-upper {
    display:grid;
    justify-items:center;
    padding:1em;

}

.div-header-middle {
    display:none;
     justify-items:start;
     padding:1em;
}


.div-header-lower {
    display:none;
}





.div-header-branding {
    align-items:center;
    column-gap:0.5em;
    display:flex;
    flexwrap:nowrap;
}



.div-header-logo {
    height:5em;
}


.img-header-logo {
    height:100%;
}


.div-header-title {
    font-family:'EB Garamond';
    font-size:3em;
}












.nav-horizontal {
    display:flex;
    gap:2em;
}

.nav-vertical {
    display:none;
}





.a-header-menu {
    color:white;
    text-decoration:none;
    font-weight:100;
}

.a-header-menu:hover {
border-bottom: 1px dotted white;
}

.a-header-current {
    color:white;
    text-decoration:none;
border-bottom: 1px dotted white;
   font-weight:100;
    
}

.a-header-current:hover {
border-bottom: 1px solid white;
}


@media only screen and (max-width: 700px) {



.div-header-upper {
    display:none;
}


.div-header-middle {
    display:grid;
}


.nav-horizontal {
    display:none;
}

.div-header-lower {
    display:block;
}

}

@media only screen and (max-width:700px){.div-header-logo {height:5.00EM;} .div-header-title{font-size:3.00em;}}
@media only screen and (max-width:680px){.div-header-logo {height:4.84EM;} .div-header-title{font-size:2.90em;}}
@media only screen and (max-width:660px){.div-header-logo {height:4.68EM;} .div-header-title{font-size:2.81em;}}
@media only screen and (max-width:640px){.div-header-logo {height:4.52EM;} .div-header-title{font-size:2.71em;}}
@media only screen and (max-width:620px){.div-header-logo {height:4.36EM;} .div-header-title{font-size:2.62em;}}
@media only screen and (max-width:600px){.div-header-logo {height:4.20EM;} .div-header-title{font-size:2.52em;}}
@media only screen and (max-width:580px){.div-header-logo {height:4.04EM;} .div-header-title{font-size:2.42em;}}
@media only screen and (max-width:560px){.div-header-logo {height:3.88EM;} .div-header-title{font-size:2.33em;}}
@media only screen and (max-width:540px){.div-header-logo {height:3.72EM;} .div-header-title{font-size:2.23em;}}
@media only screen and (max-width:520px){.div-header-logo {height:3.56EM;} .div-header-title{font-size:2.14em;}}
@media only screen and (max-width:500px){.div-header-logo {height:3.40EM;} .div-header-title{font-size:2.04em;}}
@media only screen and (max-width:480px){.div-header-logo {height:3.24EM;} .div-header-title{font-size:1.94em;}}
@media only screen and (max-width:460px){.div-header-logo {height:3.08EM;} .div-header-title{font-size:1.85em;}}
@media only screen and (max-width:440px){.div-header-logo {height:2.92EM;} .div-header-title{font-size:1.75em;}}
@media only screen and (max-width:420px){.div-header-logo {height:2.76EM;} .div-header-title{font-size:1.66em;}}
@media only screen and (max-width:400px){.div-header-logo {height:2.60EM;} .div-header-title{font-size:1.56em;}}
@media only screen and (max-width:380px){.div-header-logo {height:2.44EM;} .div-header-title{font-size:1.46em;}}
@media only screen and (max-width:360px){.div-header-logo {height:2.28EM;} .div-header-title{font-size:1.37em;}}
@media only screen and (max-width:340px){.div-header-logo {height:2.12EM;} .div-header-title{font-size:1.27em;}}
@media only screen and (max-width:320px){.div-header-logo {height:1.96EM;} .div-header-title{font-size:1.18em;}}