/* Nav - CSS */
#nav
{
	display: grid;
	
	grid-row: 2;
	grid-column: 1;
	z-index: 5;
	
	align-self: start;
	
	grid-template-columns: auto;
	
	padding: 16px 0;
	
	
	background-color: #596174;
	box-shadow: 0 4px 8px #00000040;
	border-bottom: solid 2px #596174;
	border-top: solid 2px #596174;	
}

@media( min-width: 768px )
{
	#nav
	{
		grid-row: 1;
		margin-top: 44px;
	}
}

@media( min-width: 992px )
{
	#nav
	{
		grid-row: 1;
	}
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */



/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

#nav-inner
{
	display: grid;
}

@media( min-width: 768px )
{
	#nav
	{
		grid-template-columns: auto 768px auto;
	}
	
	#nav-inner
	{
		grid-column: 2;
	}
}

@media( min-width: 992px )
{
	#nav
	{
		grid-template-columns: auto 992px auto;
	}
}

@media( min-width: 1200px )
{
	#nav
	{
		grid-template-columns: auto 1200px auto;
	}
}

/* - */


#nav-inner
{
	align-content: start;
}

@media( min-width: 992px )
{
	#nav-inner
	{
		grid-template-columns: max-content auto max-content;
	}
}

#logo-container
{
	display: grid;
	align-self: center;
	justify-self: center;
}

#logo
{
	max-height: 92px;
}

#nav-links
{
	display: none;	
	grid-gap: 16px;	
}

.show-nav
{
	display: grid!important;
}

@media( min-width: 992px )
{
	#nav-links
	{
		display: grid;
		grid-column: 3;	
		align-self: center;		
	}
	
}

#nav-links a
{
	text-decoration: none;
	color: #f1f1f1;
	text-transform: uppercase;
	
}

@media( min-width: 992px )
{
	#nav-links a
	{
		grid-row: 1;
		font-size: 18px;
		padding-bottom: 4px;
		transition: border ease .5s;
		border-bottom: solid 2px rgba(255,255,255,0.00);
	}
	
	.active-link
	{
		/*
		color: #596174!important;
		border-bottom: solid 2px #596174!important;
		*/
		
		color: #596174!important;
		border-bottom: solid 2px #596174 !important;
	}
	
	#nav-links a:hover
	{
		border-bottom: solid 2px #596174!important;
	}
}



/* - */

@media( min-width: 768px )
{
	.page-link
	{
		grid-row: 1;
	}
}

/* - */

@media( min-width: 768px )
{
	.dropdown-outer
	{
		grid-row: 1;
	}
}
.dropdown-outer:hover .dropdown-container 
{
	display: grid!important;
}

.dropdown-container
{
	display: grid;
	background-color: #ccc;
	padding: 16px;
	grid-gap: 8px;
}

@media( min-width: 768px )
{
	.dropdown-container
	{
		display: none;
		position: absolute;
		z-index: 4;
		background-color: #fff;
		padding: 16px;
		grid-gap: 8px;
	}	
}

/* - */

.menu_toggle
{
	justify-self: center;
	margin: 32px;
	font-size: 24px;
}			

.burger-container
{
	display: grid;
	margin-top: 24px;
	background-color: #596174;
}

@media( min-width: 992px )
{
	.burger-container
	{
		display: none!important;
	}
}

.burger-icon
{
	justify-self: center;
	margin: 8px;
	color: #fff;
	font-size: 24px;
}

.page-link
{
  display: grid;
  justify-content: center;
  width: 100%;
}

#nav-links
{
	grid-gap: 16px;
	margin: 24px 0 8px;
}


/* - */
#nav-inner
{
justify-content: center;
align-content: center;
grid-gap: 32px;
}
@media( min-width: 992px )
{
#nav-inner
{
justify-content: space-between;
grid-template-columns: max-content auto max-content;
}
}
@media( min-width: 992px )
{
.dropdown-outer
{
grid-row: 1;
}
}
.dropdown-outer:hover .dropdown-container 
{
display: grid!important;
}
.dropdown-container
{
display: grid;
background-color: #596174;
padding: 14px;
grid-gap: 8px;
}
@media( min-width: 992px )
{
.dropdown-container
{
display: none;
position: absolute;
z-index: 4;
background-color: #596174;
padding: 16px;
grid-gap: 8px;
}
}
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px solid;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
color: #fff;
}
@media( max-width: 960px ) {
    
    .caret {
        display: none;
    }
}
.burger-container
{
display: grid;
grid-row: 1;
width: 32px;
justify-self: center;
}
@media( min-width: 992px )
{
.burger-container
{
display: none!important;
}
}
.burger-icon
{
font-size: 32px;
align-self: center;
grid-row: 1;
grid-column: 1;
justify-self: center;
}
#burger-bars
{
color: white;
}
#burger-cross
{
color: white;
}