/* NAV COLOR */
:root {
	--custom-bg                 : #368FB7;
	--custom-bg-rgb             : 54, 143, 183;
	--custom-border             : #2A7899;
	--custom-hover-bg           : #1F5F77;
	--custom-accent             : #62B8D9;
	--custom-highlight-bg       : #D7901A;
	--custom-highlight-bg-hover : #B9750D;
	
	--custom-margin-bottom      : 77px;
	--custom-margin-bottom-md   : 61px;
	}


.navbar-custom {
	background : var(--custom-bg);
	}
.navbar-custom-flat {
	background : var(--custom-bg) !important;
	}

.navbar-custom-border-top {
	border-top : 1px solid var(--custom-border);
	}

.navbar-custom-border-bottom {
	border-bottom : 1px solid var(--custom-border);
	}

.navbar-footer .nav-link-custom {
	border-right : 1px solid var(--custom-border);
	border-left  : 1px solid var(--custom-accent);
	}

.navbar-nav > .active > a, .navbar-footer a.nav-link-custom:hover {
	background : var(--custom-hover-bg);
	}

.navbar-nav > .highlight > a {
	background : var(--custom-highlight-bg);
	}
.navbar-nav > .highlight > a:hover {
	background : var(--custom-highlight-bg-hover);
	}

.navbar-footer.nav-link-custom-border-left,
.navbar-footer .nav-link-custom-border-left {
	border-left : 1px solid var(--custom-border);
	}

.navbar-custom-margin-bottom {
	margin-bottom : var(--custom-margin-bottom);
	}

@media (min-width : 576px) {
	.navbar-custom-margin-bottom {
		margin-bottom : var(--custom-margin-bottom-md);
		}
	}

@media (min-width : 768px) {
	.navbar-custom {
		background-image : linear-gradient(to bottom, var(--custom-border), var(--custom-accent));
		/*background : var(--custom-accent);*/
		}
	}

@media (min-width : 992px) {
	.nav-link-custom-border-left {
		border-left : 1px solid var(--custom-border);
		}
	
	.nav-link-custom {
		border-right : 1px solid var(--custom-border);
		border-left  : 1px solid var(--custom-accent);
		}
	}

.bg-image-mask {
	text-shadow      : 1px 1px #000;
	background-color : rgba(var(--custom-bg-rgb), 0.75);
	border           : 1px solid var(--custom-border)
	}

.bg-mask {
	background-image : linear-gradient(to bottom, var(--custom-border), var(--custom-accent));
	text-shadow      : 1px 1px #000;
	}

.quote-counter-mask {
	text-shadow : 2px 2px #000;
	background  : linear-gradient(0deg, var(--custom-border), var(--custom-accent) 100%);
	}