/* Nav  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

#nav
{				
        margin-bottom: -500px;
        z-index: 5;
}

#nav::after
{
        content: "";
        width: 100%;
        height: 500px;
        background: linear-gradient(#231F20, #231F2000);
        z-index: 10;
}

.nav-inner
{
        display: grid;
}

.nav-links a
{
        text-transform: uppercase;
        color: var( --colour1 );
        font-weight: bold;
        letter-spacing: 2px;
        text-align: center;
        font-family: var( --unique-font );
}

.active-link
{
        color: var( --colour1 )!important;
}


@media( min-width: 768px )
{
	.active-link
	{
		padding-bottom: 4px;
        border-bottom: var( --colour1 ) solid 4px;
	}	
}

#nav
{
	display: grid;
}


.logo-outer
{
	display: grid;
	background-color: var( --colour2 );
	padding: 12px 0;
}

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

.logo-container
{
	display: grid;
	justify-self: start;
}

.logo-container img
{
	max-height: 80px;
}

.nav-links
{
	display: grid;
	grid-row: 1;
	grid-column: 1;
	justify-self: end;
	align-self: center;
	grid-gap: 16px;
}

.nav-links a
{	
	text-decoration: none;
	list-style: none;
	grid-row: 1;
	color: var( --colour1 );
	font-size: 18px;
}

.active-link
{
	color: #111!important;
}

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

@media( min-width: 768px )
{

}

@media( min-width: 992px )
{

}

@media( min-width: 1200px )
{

}

/* - */


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

@media( min-width: 992px )
{

}

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

#logo
{
	max-height: 46px;
}

#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;	                
		justify-content: end;
	}
	
}

#nav-links a
{
	color: var( --colour2 );
}

@media( min-width: 992px )
{
	#nav-links a
	{
		grid-row: 1;
		font-size: 18px;
		padding-bottom: 4px;

        text-transform: uppercase;
        color: var( --colour1 );
        font-weight: bold;
        letter-spacing: 2px;
        text-align: center;

	}
	
	.active-link
	{
		/*
		color: rgb(213, 23, 23)!important;
		border-bottom: solid 2px rgb(213, 23, 23)!important;
		*/
		
		color: var( --colour1 )!important;
	}
	
	#nav-links a:hover
	{
		/*-*/
	}
}



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



@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: 12px;
}



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

.burger-icon
{
	justify-self: center;
	margin: 8px;
	color: var( --colour2 );
	font-size: 24px;
}

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

#nav-links
{
	grid-gap: 16px;
  	border-top: solid 2px var( --colour2 );
  	align-content: center;
  	padding: 16px 0;
}

.nav-links-outer {
    background-color: var( --colour1 );
}

@media( min-width: 992px )
{
	.nav-inner
	{
		grid-template-columns: auto max-content auto max-content auto;
		background-color: var( --colour2 );
		grid-gap: 64px;
	}

	.logo-outer
	{
		grid-row: 1;
		grid-column: 2;
	}

	.nav-links-outer
	{
		grid-row: 1;
		grid-column: 4;
		align-self: center;
		background-color: var( --colour2 );
	}

}


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