header {
    background-image:url("https://sgdyslexiamallorca.com/images/hero.jpg");
    background-position:center;
    background-size:cover;
    box-sizing:border-box;
    font-size:1em;
}

branding-footer {
display:flex;
flex-wrap:nowrap;
align-items:center;
color:white;
height:6em;
}

header-branding {
display:flex;
flex-wrap:nowrap;
align-items:center;
color:white;
height:6em;
z-index:9999;
padding-left:1em;
position:fixed;
top:0;  
}

branding-sg {
font-family:'Barlow Condensed';
font-size:3em;
}

branding-white,branding-blue,branding-logo {
width:5em;
height:3em;
background-size:cover;
background-position:center;
}


branding-white, branding-logo {
background-image:url("https://sgdyslexiamallorca.com/svg/white.svg");
display:block;
}

branding-blue {
background-image:url("https://sgdyslexiamallorca.com/svg/blue.svg");
display:none;
}

branding-dm {
font-family:'Barlow Condensed';
font-size:1.1em;
font-weight:bold;
}


header-fixed {
box-sizing:border-box;
display:flex;
align-items:center;
padding-left:12.5em;
position:fixed;
top:0;
width:100%;
height:6em;
justify-content:center;
  z-index:999;
}

header nav {
    display:flex;
    gap:2em;
}

header nav hr {
    width:4em;
    display:none;
 
    
    
height: 1px;
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.5);
  margin: 1em 0;
  padding: 0;
    
    
    
    
    
    
}

header nav a {
text-decoration:none;
color:white;
border-bottom: 1px solid transparent;
font-weight:100;
}

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

header-margin {
    display:block;
    height:6em;
    width:100%;
}

header-content {
    display:block;
}

header.scrolled  header-fixed {
    background-color:white;
    color:#55B;
    border-bottom:2px solid #55B;
}

header.scrolled  a {
    color:silver;
}

header.scrolled  a:hover {
    color:salmon;
}

header.scrolled  hr {
    border-top: 1px solid silver;
}


header.scrolled  header-branding {
    color:#55B;
}

header.scrolled  branding-white {
    display:none;
}

header.scrolled  branding-blue {
    display:block;
}


@media only screen and (max-width:1025px) {header{font-size:0.975em;}}
@media only screen and (max-width:1000px) {header{font-size:0.95em;}}
@media only screen and (max-width:975px) {header{font-size:0.925em;}}
@media only screen and (max-width:950px) {header{font-size:0.9em;}}
@media only screen and (max-width:925px) {header{font-size:0.875em;}}
@media only screen and (max-width:900px) {header{font-size:0.85em;}}
@media only screen and (max-width:875px) {header{font-size:0.825em;}}
@media only screen and (max-width:850px) {header{font-size:0.8em;}}
@media only screen and (max-width:825px) {header{font-size:0.775em;}}
@media only screen and (max-width:800px) {header{font-size:0.75em;}}
@media only screen and (max-width:775px) {header{font-size:0.725em;}}

@media only screen and (max-width:750px) { 
    
    header{font-size:0.7em;}  
  
    header nav a {
        display:none;
    }

}