/*  
---------------------------------------------------
Header - Small Breakpoint
---------------------------------------------------  
*/

header#site-header { 
    height: var(--small-header);
    overflow: hidden;
}

html:not(.reveal-out) body.transparent-header-sm header#site-header { 
    position:fixed;
    width: calc(100% - var(--site-spacing_sm) - var(--site-spacing_sm));
}

html:not(.reveal-out) body.max-width.transparent-header-sm header#site-header { 
    max-width: calc(var(--site-max-width) - var(--site-spacing_sm) - var(--site-spacing_sm));
}

html.reveal-out header#site-header::after { 
    display:none;
}

header#site-header .container { 
    width:100%!important;
    max-width:var(--header-max-width)!important;
}

header#site-header .row { 
    -ms-flex: 1;
    flex: 1;
    -ms-flex-direction: column;
    flex-direction: column;
}


/*  
---------------------------------------------------
Header

- Burger Navigation Open
---------------------------------------------------  
*/

/* This removes the vertical scrollbar when buger navigation is open */
html.reveal-out { 
    overflow: hidden;
} 
/* END */

html.reveal-out header#site-header {
    position: fixed; top: 0; right: 0; left: 0;
    width: calc(100% - var(--site-spacing_sm) - var(--site-spacing_sm));
    height: 100%; max-height: 100%;
    overflow: auto;
}
html.reveal-out header#site-header .row {
    padding-bottom: var(--small-header);
}

html.reveal-out body.max-width header#site-header { 
    max-width: calc(var(--site-max-width) - var(--site-spacing_sm) - var(--site-spacing_sm));
}

html.reveal-out #site {
    max-height: 100%;
}

/* iOS 13 issues with html, body overflow */
html.reveal-out body { 
    overflow-y: hidden; height:100%; max-height:100%;
}
html.reveal-out header#site-header { 
    bottom:0;
    overflow-x: hidden;
}
html.reveal-out header#site-header {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}
/* iOS 13 issues with html, body overflow --- END */

/* Display none of internal header items before expanded */
html:not(.reveal-out) header#site-header nav.main,
html:not(.reveal-out) header#site-header nav.cta-links,
html:not(.reveal-out) header#site-header .site-search,
html:not(.reveal-out) header#site-header nav.secondary { 
    display:none;
}


/*  
---------------------------------------------------
Header

- Transparent header
---------------------------------------------------  
*/

body.transparent-header-sm header#site-header {
    background: transparent;
}

html.nav-down:not(.reached-top) body.transparent-header-sm header#site-header,
html.nav-up:not(.reached-top) body.transparent-header-sm header#site-header,
html.nav-down:not(.reached-top) body.transparent-header-sm header#site-header.header-bg-solid,
html.nav-up:not(.reached-top) body.transparent-header-sm header#site-header.header-bg-solid { 
    background: rgba(var(--header-bg-color1), 1); 
}
html.nav-down:not(.reached-top) body.transparent-header-sm header#site-header.header-bg-linear,
html.nav-up:not(.reached-top) body.transparent-header-sm header#site-header.header-bg-linear { 
    background: linear-gradient(var(--header-bg-angle), rgba(var(--header-bg-color1), 1) 0%, rgba(var(--header-bg-color2), 1) 100%); 
}
html.nav-down:not(.reached-top) body.transparent-header-sm header#site-header.header-bg-radial,
html.nav-up:not(.reached-top) body.transparent-header-sm header#site-header.header-bg-radial { 
    background: radial-gradient(farthest-side at var(--header-bg-start-perc) var(--header-bg-stop-perc), rgba(var(--header-bg-color1), 1) 0%, rgba(var(--header-bg-color2), 1) 100%); 
}

body.transparent-header-sm header#site-header::after { 
    opacity:0;
    -webkit-transition: opacity 0.4s ease-in-out 0s;
    transition: opacity 0.4s ease-in-out 0s;
}

html.nav-down:not(.reached-top) body.transparent-header-sm header#site-header::after, 
html.nav-up:not(.reached-top) body.transparent-header-sm header#site-header::after {
    opacity:1;
}

html.reveal-out body.transparent-header-sm header#site-header,
html.reveal-out body.transparent-header-sm header#site-header.header-bg-solid { 
    background: rgba(var(--header-bg-color1), 1); 
}
html.reveal-out body.transparent-header-sm header#site-header.header-bg-linear { 
    background: linear-gradient(var(--header-bg-angle), rgba(var(--header-bg-color1), 1) 0%, rgba(var(--header-bg-color2), 1) 100%); 
}
html.reveal-out body.transparent-header-sm header#site-header.header-bg-radial { 
    background: radial-gradient(farthest-side at var(--header-bg-start-perc) var(--header-bg-stop-perc), rgba(var(--header-bg-color1), 1) 0%, rgba(var(--header-bg-color2), 1) 100%); 
}


/*  
---------------------------------------------------
Header

- On scroll
---------------------------------------------------  
*/

html.nav-down:not(.reached-top) body.transparent-header-sm header#site-header::after, 
html.nav-up:not(.reached-top) body.transparent-header-sm header#site-header::after {
    opacity:1;
}

/* Header */
html.nav-up body:not(.show_header-on-scroll-sm) header#site-header { 
    top: calc((var(--small-header) + 5px) * -1);
}