nav {
}

nav a {
    text-decoration: none;
}

.navtitle {
    font-size: 1.3em;
    font-weight: bold;
}

.navtoggle{
    display: flex;
    cursor: pointer;
    margin-left: auto;
	align-self: baseline;
}

.navlist-menu {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-grow: 1;
	justify-content: space-between;
}

.navlist-host {
    display: none;
    width: 100%;
    
    margin: 0;
}

.navlist {    
    padding: 0;
	margin: 0;
    width: 100%;
    
    list-style: none;
}

.navlist > li{
    text-align: left;
    margin: 0.5em 0em; 
    
}

.navlogo {
    display: none;
}

.nav-selector-icon{
	width:20px;
	height:2px;
	box-shadow:inset 0 0 0 32px,0 -6px,0 6px;
	margin:16px 7px
}

.nav-selector{
	width:24px;
	height:24px;
    margin: 2px 2px;
}

.active {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}


@media only screen and (min-width: 768px) {
	.navtitle {
		display: none;
	}
	.navlist-menu{
		display: none;
	}
	.navlist-host {
		display: flex;
		flex-direction: row;
	}
    
	.navtoggle{
		display: none;
	}

	.navlist {
		display: flex;
		flex-direction: row;
		padding: 0;
		margin: 0;
		
		width: 100%;
		
		list-style: none;
		line-height: 2em;
		
	}
	.navlist li {
		/*		T	   R	B	L */
		margin: 0em 0.9em 0em 0.2em;
		height: 100%;
	}
	.navlist li:last-child {
	    border-bottom: none;
	    margin-left: auto;
	   
	}
    .navlist a {
        text-decoration: none;
        transition: 0.2s background-color;
        
        display: block;
		width: 100%;
    }
    
}


@media only screen and (min-width: 1800px) {
    nav-main{
        display: flex;
        flex-direction: row;
        flex-grow: 1;
        background-color: #fafafa;
    }

    nav {
        flex: 0 0 7em;
        flex-direction: column;
		border-top-right-radius: 5em;
        align-items: start;
    }

    nav > :first-child {
        /* flex-grow: 1; */
        margin: 3em 0 2em 0.5em;
    }
      
	.navlist-menu {		
		display: flex;
		flex-direction: column;
		flex-grow: 0;
	}
	
	.navtitle {
		display: block;
	}
    
	.navlist {
		flex-direction: column;
	}
	.navlist li {
		/*		T	   R	B	L */
		margin: 0;
	}
    .navlist a {
		padding-left: 1em;
		padding-right: 2em;
		width: inherit;

		white-space: nowrap;
    }

	.navlist li:last-child {
		margin: 0;
	}
}