:root {
    --nav-height: 60px;
    --nav-background: var(--color-primary);
    --nav-text-color: white;
    --nav-hover-color: var(--color-accent);
    --nav-font-size: 15px;
    --nav-font-weight: 200;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 3;
}

.header-separator {
    margin: 0 15px;
}

.header-separator-sm {
    margin: 0 5px;
}

.header-logo-container {
    height: 100%;
    display: flex;
    align-items: center;
}

.header-logo-container>.header-logo {
    max-height: 55%;
}

#header-menu-1 {
    height: var(--nav-height);
    background: var(--nav-background);
}

.header-menu nav,
.header-menu nav ul,
.header-menu nav li,
.header-menu nav a {
    height: 100%;
}

.header-menu nav ul {
    margin: 0 10px;
}

.header-menu nav a {
    width: 100%;
}

.header-menu nav .separator-line {
    width: 1px;
    min-width: 1px;
    height: 25%;
    margin: 0 10px;
    background-color: var(--nav-text-color);
}

#header-filler {
    height: calc(var(--nav-height) - 1px);
}

nav ul {
    list-style: none;
}

nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--nav-font-size);
    font-weight: var(--nav-font-weight);
    color: var(--nav-text-color);
}

nav a:hover {
    color: var(--nav-hover-color);
}

.header-menu .rrss ul {
    list-style: none;
    margin: 10px 0;
}

.header-menu .rrss li {
    margin: 0 7px;
}

.header-menu .rrss a {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--nav-font-size);
    font-weight: var(--nav-font-weight);
    color: var(--nav-text-color);
}

.header-menu .rrss a:hover {
    color: var(--nav-hover-color);
}

#device-header-bar {
	display: none;
}

@media all and (max-width: 1050px) {
	.header-separator {
		margin: 0 10px;
	}
}

@media all and (max-width: 850px) {
    #device-header-bar {
		display: flex;
		padding: 0 20px;
		height: var(--nav-height);
		background: var(--nav-background);
	}
    
    .header-separator {
		margin: 0 5px;
	}

	.header-separator-sm {
		margin: 0 3px;
	}

	#header-menu-1 {
		display: none;
	}

	.header-menu .rrss li {
		margin: 0 5px;
	}
}

@media all and (max-width: 550px) {
	.header-separator {
		margin: 0 3px;
	}
}