header{position:-webkit-sticky;position:sticky;top:0;display:grid;grid-column:1/2;grid-row:1/2;grid-template-columns:var(--container-padding) 1fr 1fr var(--container-padding);transition:colour .1s;z-index:2}header.header-dormant{color:var(--header-text-colour);& .header-links-box{& a:hover{background-color:rgba(255,255,255,.1)}& a.open-app-link{border:1px solid var(--header-button-border-colour);&:hover{background-color:var(--primary-colour)}}& button:hover{background-color:rgba(255,255,255,.1)}}}header.header-scrolled{color:#666;& .header-links-box{& a:hover{background-color:var(--subtle-box-hover)}& a.open-app-link{border:1px solid transparent;&:hover{background-color:var(--primary-colour)}}& button:hover{background-color:var(--subtle-box-hover)}}}.header-title-box{grid-column-start:2;grid-column-end:3;display:flex;align-items:center;justify-content:flex-start;font-family:Hind,sans-serif;box-sizing:border-box;transition:width .2s;color:inherit;&>.header-logo-box{margin-right:8px;height:46px;width:46px;&>svg{top:0;left:0;height:46px;width:46px;transition:opacity .1s}}&>span{font-size:1.4em;font-weight:400;font-family:Hind,sans-serif}}.header-links-box{grid-column:3/4;display:flex;justify-content:flex-end;align-items:center;&>a{padding:8px 12px;border-radius:4px;font-weight:400;font-size:1.05em;white-space:nowrap}& a:hover{text-decoration:none}& a.open-app-link{font-size:.9em;margin:0 8px;background-color:var(--primary-colour);color:white;box-sizing:border-box;display:flex;align-items:center;img{margin-right:4px;translate:-2px}}}.header-backdrop{position:-webkit-sticky;position:sticky;top:0;display:flex;grid-column:1/2;grid-row:1/2;background:white;height:var(--header-height);box-shadow:5px 4px 4px var(--subtle-box-hover);transition:all .75s;transition-timing-function:cubic-bezier(.075,.82,.165,1);z-index:2}.header-backdrop-closed{translate:0 calc(var(--header-height) * -1.1)}.header-backdrop-open{translate:0 0}@media (max-width:768px){header{grid-template-columns:calc(var(--container-padding)/2) 1fr 1fr calc(var(--container-padding)/2)}.header-links-box{& a{display:none}}}:root{--side-menu-width:250px}.side-menu{position:fixed;top:0;width:var(--side-menu-width);height:100%;background-color:white;z-index:2;transition:all .6s;transition-timing-function:cubic-bezier(.075,.82,.165,1);color:var(--text-colour);border-left:1px solid rgba(0,0,0,.015);box-sizing:border-box;display:grid;grid-template-columns:var(--container-padding) 1fr var(--container-padding);grid-template-rows:var(--header-height) 1fr auto var(--container-padding);& .social-media-tile-container{display:flex;justify-content:flex-start;padding:4px 24px;color:var(--textColour2);& a{display:flex;align-items:center;justify-content:center;padding:4px;margin:2px;border-radius:20px;background-color:transparent;transition:background-color .2s;& svg{stroke:none;height:30px;width:30px}}}}.side-menu-closed{right:calc(0px - var(--side-menu-width))}.side-menu-open{right:0}.side-menu-header{grid-column:2/3;grid-row:1/2;display:grid;justify-content:flex-end;align-items:center;color:#777;&>.button-icon{&>svg{height:18px;width:18px}}.button-icon:hover{background-color:rgba(0,0,0,.15)}}.side-menu-main{grid-column:2/3;grid-row:2/3;&>.side-menu-column{display:grid;&>h1{padding:8px;margin-bottom:8px;font-size:1.25em;font-weight:300;text-transform:uppercase;color:var(--accent-colour-light)}&>a{padding:8px;border-radius:4px;color:var(--text-colour);&:hover{background-color:var(--subtle-box-hover);text-decoration:none}}}}.social-media-icon-container{display:flex;margin:12px 0;justify-content:flex-start;&>a{align-items:center;background-color:transparent;border-radius:20px;display:flex;justify-content:center;margin:2px;padding:4px;transition:background-color .2s;&:hover{background-color:var(--subtle-box-hover)}&>svg{height:24px;width:24px}}}.side-menu-footer{grid-column:2/3;grid-row:3/4;display:grid;font-size:.9em;color:var(--text-colour-2);&>a{margin:4px 0;&:hover{text-decoration:underline}}&>span{font-size:.8em;margin-top:24px}}