/* Nav CSS */

#nav
{
    display: grid;
    
    grid-template-columns: auto;
    background-color: #ffffff;
    padding: 24px 0;
    grid-gap: 24px;
    
    width: 100%;
}

@media( min-width: 768px)
{
    #nav
    {
        display: grid;
        grid-template-columns: max-content auto max-content;    
        padding: 8px 32px;
        width: calc( 100% - 64px );
    }
}

/* - */

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

@media only screen and (max-width: 600px) {

    #nav-logo{
        text-align: center;
        justify-content: center;}

}

/* - */

#nav-logo a
{
    display: grid;
	padding-top: 25px;
	padding-bottom: 25px;
	color: #2C346D;
}

#nav-logo h2
{
	font-family: 'Robotoblack', "Montserrat", Arial, "sans-serif";
	font-size: 24px;
    text-align: center;
}

.nav-link-outer
{
    display: grid;
    align-self: center;
    justify-self: center;    
    grid-gap: 16px;
    width: 100%;
    
}

@media( min-width:768px)
{
    #nav-burger
    {
        display: none;
    }
}

#nav-links
{
    display: none;
    grid-gap: 8px;
    justify-self: center;
    align-self: center;
    width: 100%;
}

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


@media( min-width:768px)
{
    #nav-links
    {
        display: grid;
        justify-content: center;
        grid-gap:32px;
    }
}


#nav-burger
{
    font-size: 32px;
    color: #2C346D;
    justify-self: center;
}

@media( min-width: 768px )
{
    #nav-burger
    {
        display: none;        
    }
}

/* - */

.page-link
{    
	font-family: 'Robotoreg', "tox", Times New Roman, "serif";
	
    display: grid;
    width: calc( 100% - 32px );
    background-color: #fff;
    justify-self: center;
    
    justify-content: center;
    align-content: center;
    
    padding: 16px 0;
    
    transition: opacity ease .5s;
}



.page-link:hover
{
    opacity: 0.4;
}

.page-link a 
{
    color: #2C346D;
    
    
    font-size: 22px;   
    letter-spacing: 1px;
}

@media( min-width: 768px)
{
    .page-link a 
    {
        font-size: 14px;
    }    
}

@media( min-width: 900px)
{
    .page-link a 
    {
        font-size: 18px;
    }    
}

@media( min-width: 1200px)
{
    .page-link a 
    {
        font-size: 22px;
    }    
}

.active-link a 
{
    color: #0E6C7E!important;
}
    
@media( min-width:768px)
{
    .page-link
    { 
        grid-row: 1;
        width: max-content;
        padding: 0;
        background: none;
    }
}

@media( max-width:768px)
{
    .page-link
    { 
		background-color: #D3E6EE;
    }
	.active-link
	{
		background-color: #90C0D6;
		
	}
	.active-link a
	{
		color: #fff!important;
	}
}

.nav-phone
{
    display: grid;
    align-self: center;
    justify-content: center;
    transition: opacity ease .5s;
}

.nav-phone:hover
{
    opacity: 0.4;
}

.nav-phone a
{
    display: grid;
    grid-template-columns: max-content auto;
    grid-gap: 8px;
}

.nav-phone h2
{
    color: #2C346D;
    letter-spacing: 2px;
    line-height: 25px;
    font-size: 24px;
    
}

.nav-icon
{
    display: grid;
    align-self: center;
    font-size: 24px;
    color: #0E6C7E;
}