/************************
A NOTE ABOUT THIS CSS:
This file is designed to ensure basic styles are provided for our most commonly used assets on websites.
To modify color variables, see nld-color.css
*************************/

/************************
FONT INCLUDES - Google Fonts or Adobe Font @import
*************************/
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


/************************
BODY
*************************/
* {
	/**/
}

body {
	background: var(--dark);
	color: var(--light);
	font-family: "Inter", serif;
	font-size: 1rem;
}	

::selection { /*text selection*/
	background: var(--tertiary-shade-02);
	color: #fff;
}

/*************************
HEADINGS AND FONTS
**************************/
.display-1, .display-2, .display-3, .display-4 {
	font-weight: 900;
}

h1, .h1 { /*only use for page titles*/
	font-family: "Montserrat", "Jost", sans-serif;
	font-weight: 700;
}

h2, .h2 {
	font-family: "Montserrat", "Jost", sans-serif;
	font-weight: 700;
}

h3, .h3 {
	font-family: "Montserrat", "Jost", sans-serif;
	font-weight: 700;
}

h4, .h4 {
	font-family: "Montserrat", "Jost", sans-serif;
	font-weight: 700;
}

h5, .h5 {
	font-family: "Montserrat", "Jost", sans-serif;
	font-weight: 700;
}

h6, .h6 {
	font-family: "Montserrat", "Jost", sans-serif;
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 1px;
}

.text-serif {
	font-family: Georgia, serif;
}

.text-sans-serif {
	font-family: "Montserrat", "Jost", sans-serif;
}

.text-sans-serif-2 {
	font-family: "Inter", sans-serif;
}

.text-muted {
	color: inherit!important;
	opacity: 0.75;
}

.fw-xbold {
	font-weight: 800;
}

.lead { /*slightly larger text used for intro paragraphs*/
	font-size: 1.3rem;
	font-weight: normal;
}

.small, small, .text-small { /*small text used for asides or footnotes*/
	font-size: 0.9rem;
	font-weight: normal;
}

pre {
	border-left: 5px solid var(--secondary);
	background: var(--darker);
	padding: 1rem;
	white-space: pre;
}

code {
	color: var(--secondary)!important;
	background: var(--darker);
}

blockquote { /*used for pullquotes in articles*/
	font-size: 1.4rem;
	font-weight: 600;
	font-style: italic;
	max-width: 400px;
	margin: 2.5rem auto;
	position: relative;
	border-left: 5px solid var(--primary);
	padding: 1rem;
}

	blockquote p {
		margin-bottom: 0;
	}

	/*blockquote:before {
		position: absolute;
		margin-left: -30px;
		font-style: normal;
		font-weight: 700;
		font-family: "Montserrat", Jost, sans-serif;
		font-size: 3rem;
		line-height: 1rem;
		height: 25px;
		width: 25px;
		display: flex;
		align-items: center;
		
		content: '“';
		color: var(--primary);
		
	}*/
	
	blockquote cite {
		font-size: 0.8rem;
		color: var(--gray);
	}

figure {
	
}

	figure img {
		max-width: 100%;
		height: auto;
	}

	figcaption {
		font-style: italic;
		color: var(--gray);
	}
	
/*** extra large screen display, font adjustments ***/
	@media (min-width: 1600px) {		
		h1, .h1 {
			font-size: 3.25rem;
		}
		
		h2, .h2 {
			font-size: 2.5rem;
		}
		
		h3, .h3 {
			font-size: 2.35rem;
		}
		
		h4, .h4 {
			font-size: 1.75rem;
		}
		
		h5, .h5 {
			font-size: 1.5rem;
		}
		
		h6, .h6 {
			font-size: 1rem;
		}
	}	
	
	@media (max-width: 600px) {
		.card-title {
			font-size: 1.1rem;
		}
	}

.article-body h2, .article-body h3, .article-body h4, .article-body h5, .article-body h6   {
	margin: 1.5rem 0;
}

/**************************
LINKS AND BUTTONS
***************************/
/*** default links ***/	
a {
	transition: 0.3s;
	color: inherit;
}

	a:hover {
		
	}
	
	a:active, a:focus {
		
	}
	
	a:focus-visible { /* used for keyboard accessiblity */
		box-shadow: 0 0 0 .1rem var(--primary-tint-03);
		outline: var(--primary);
	}

/*** default button ***/	
.btn, button {
	border-color: inherit;
	transition: 0.3s;
	
	font-family: "Inter", sans-serif;
	font-weight: 600;
	font-size: 0.95rem;
	padding: 0.75rem 1rem;
	border-radius: 0.75rem;
}

	.btn-sm {
		padding: 0.5rem 0.75rem;
	}
	
	.btn-lg {
		padding: 1rem 1.25rem;
	}

	.btn:hover {
		
	}
	
	.btn:active, .btn:focus {
		border-color: inherit;
	}
	
	.btn:focus-visible {
		border-color: inherit;
		box-shadow: 0 0 0 .1rem var(--primary-tint-03);
	}

/*button with primary colors*/
.btn-primary {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--dark);
}

	.btn-primary:hover {
		background: var(--primary-tint-01);
		border-color: var(--primary-tint-01);
		color: var(--dark);
	}
	
	.btn-primary:active, .btn-primary:focus {
		background: var(--primary-tint-01)!important;
		border-color: var(--primary-tint-01)!important;
	}
	
	.btn-primary:focus-visible {
		border-color: var(--primary)!important;
		background: var(--primary-tint-03);
		box-shadow: 0 0 0 .1rem var(--primary-tint-03)!important;
	}
	
.btn-outline-primary {
	background: none;
	border-color: var(--primary);
	color: var(--primary);
}

	.btn-outline-primary:hover {
		background: var(--primary);
		border-color: var(--primary);
	}
	
	.btn-outline-primary:active, .btn-primary:focus {
		background: var(--primary-shade-01)!important;
		border-color: var(--primary-shade-01)!important;
	}
	
	.btn-outline-primary:focus-visible {
		border-color: var(--primary);
		background: var(--primary-tint-03);
		color: var(--primary);
		box-shadow: 0 0 0 .1rem var(--primary-tint-03)!important;
	}
	
/*** button with secondary colors ***/
.btn-secondary {
	background: var(--secondary);
	border-color: var(--secondary);
	color: var(--dark);
}

	.btn-secondary:hover {
		background: var(--secondary-tint-01);
		border-color: var(--secondary-tint-01);
		color: var(--dark);
	}
	
	.btn-secondary:active, .btn-secondary:focus {
		background: var(--secondary-shade-01)!important;
		border-color: var(--secondary-shade-01)!important;
	}
	
	.btn-secondary:focus-visible {
		border-color: var(--secondary)!important;
		box-shadow: 0 0 0 .1rem var(--secondary-tint-03);
	}
	
.btn-outline-secondary {
	background: none;
	border-color: var(--secondary);
	color: var(--secondary);
}

	.btn-outline-secondary:hover {
		background: var(--secondary);
		border-color: var(--secondary);
	}
	
	.btn-outline-secondary:active, .btn-secondary:focus {
		background: var(--secondary-shade-01)!important;
		border-color: var(--secondary-shade-01)!important;
	}
	
	.btn-outline-secondary:focus-visible {
		border-color: var(--secondary);
		background: var(--secondary-tint-03);
		color: var(--secondary);
		box-shadow: 0 0 0 .1rem var(--secondary-tint-03)!important;
	}
	
/*** button with tertiary colors ***/
.btn-tertiary {
	background: var(--tertiary);
	border-color: var(--tertiary);
	color: var(--dark);
}

	.btn-tertiary:hover {
		background: var(--tertiary-tint-01);
		border-color: var(--tertiary-tint-01);
		color: var(--dark);
	}
	
	.btn-tertiary:active, .btn-tertiary:focus {
		background: var(--tertiary-shade-01)!important;
		border-color: var(--tertiary-shade-01)!important;
		color: var(--light);
	}
	
	.btn-tertiary:focus-visible {
		border-color: var(--tertiary)!important;
		box-shadow: 0 0 0 .1rem var(--tertiary-tint-03);
		color: var(--dark);
	}
	
.btn-outline-tertiary {
	background: none;
	border-color: var(--tertiary);
	color: var(--tertiary);
}

	.btn-outline-tertiary:hover {
		background: var(--tertiary);
		border-color: var(--tertiary);
		color: var(--light);
	}
	
	.btn-outline-tertiary:active, .btn-tertiary:focus {
		background: var(--tertiary-shade-01)!important;
		border-color: var(--tertiary-shade-01)!important;
		color: var(--light)!important;
	}
	
	.btn-outline-tertiary:focus-visible {
		border-color: var(--tertiary);
		background: var(--tertiary-tint-03);
		color: var(--tertiary);
		box-shadow: 0 0 0 .1rem var(--tertiary-tint-03)!important;
	}
	
/*** button with light colors ***/
.btn-light {
	background: var(--light);
	border-color: var(--light);
	color: var(--dark);
}

	.btn-light:hover {
		background: var(--light);
		border-color: var(--light);
	}
	
	.btn-light:active, .btn-light:focus {
		background: var(--light)!important;
		border-color: var(--light)!important;
		color: var(--dark)!important;
	}
	
	.btn-light:focus-visible {
		background: var(--light)!important;
		border-color: var(--light)!important;
		color: var(--dark)!important;
		box-shadow: 0 0 0 .1rem rgba(255,255,255,0.25)!important;
	}
	
.btn-outline-light {
	background: none;
	border-color: var(--light);
	color: var(--light);
}

	.btn-outline-light:hover {
		background: var(--light);
		border-color: var(--light)!important;
	}
	
	.btn-outline-light:active, .btn-light:focus {
		background: var(--light)!important;
		border-color: var(--light)!important;
		color: var(--dark)!important;
	}
	
	.btn-outline-light:focus-visible {
		background: var(--light)!important;
		border-color: var(--light)!important;
		color: var(--dark)!important;
		box-shadow: 0 0 0 .1rem rgba(255,255,255,0.25)!important;
	}
	
/*** button with dark colors ***/
.btn-dark {
	background: var(--dark);
	border-color: var(--dark);
	color: var(--light);
}

	.btn-dark:hover {
		background: var(--dark);
		border-color: var(--dark);
	}
	
	.btn-dark:active, .btn-dark:focus {
		background: var(--dark)!important;
		border-color: var(--dark)!important;
		color: var(--light)!important;
	}
	
	.btn-dark:focus-visible {
		background: var(--dark)!important;
		border-color: var(--dark)!important;
		color: var(--light)!important;
		box-shadow: 0 0 0 .1rem rgba(0,0,0,0.25)!important;
	}
	
.btn-outline-dark {
	background: none;
	border-color: var(--dark);
	color: var(--dark);
}

	.btn-outline-dark:hover {
		background: var(--dark);
		border-color: var(--dark)!important;
	}
	
	.btn-outline-dark:active, .btn-dark:focus {
		background: var(--dark)!important;
		border-color: var(--dark)!important;
		color: var(--light)!important;
	}
	
	.btn-outline-dark:focus-visible {
		background: var(--dark)!important;
		border-color: var(--dark)!important;
		color: var(--light)!important;
		box-shadow: 0 0 0 .1rem rgba(0,0,0,0.25)!important;
	}

/***************************
WEBFORMS
****************************/
.form-control, .form-select {
	transition: 0.3s;
	padding: 0.75rem 1rem;
	background: var(--dark);
	border-color: var(--gray);
	color: var(--light);
	border-radius: 0.75rem;
}

	.form-control:focus, .form-select:focus {
		border-color: var(--primary);
		box-shadow: 0 0 0 .1rem var(--primary-tint-03);
		background: var(--darker);
		color: var(--light);
	}
	
	.form-control::placeholder {
		color: var(--gray);
	}

.form-check-input[type="checkbox"] {
	background-color: var(--dark);
}

.form-check-input[type="radio"] {
	background-color: var(--dark);
}

.form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}

	.form-check-input:focus {
		border-color: var(--primary);
		box-shadow: 0 0 0 .1rem var(--primary-tint-03)
	}

label {
	font-weight: 600;
}

/*************************
DESIGN ELEMENTS / HELPER CLASSES for STRUCTURE
**************************/
hr {
	opacity:1;
}

.heading-hr-wrap {
	display: flex;
	justify-content: start;
	align-items: center;
	column-gap: 0.5rem;
	text-align: left;
}

.heading-hr {
	display: inline-block;
	width: 30px;
	height: 5px;
	background: var(--secondary);
	border-color: var(-secondary);
}

/*** background + semi-transparent overlay ***/
.background { /* applied to parent div with background image */
	position:relative;
}

.text-overlay { /* applied to first child div with text */
	z-index: 3;
	position: relative;
}

.bg-overlay { /* applied to second child div to add gradient/overlay to parent image*/
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	width: 100%;
	background: rgba(0,0,0,0.2);
}

/*** min heights by screen resolution ***/
.vh-100 {
	min-height: 100vh;
}

.vh-75 {
	min-height: 75vh;
}

.vh-50 {
	min-height: 50vh;
}

.vh-25 {
	min-height: 25vh;
}

/***************************
CARDS - https://getbootstrap.com/docs/5.3/components/card/
****************************/
.card {
	color: inherit;
	background: none;
	border: 0;
	margin: 1rem 0;
}

	.card-link {
		text-decoration: none;
	}

	.card-img {
		transition: 0.3s;
		overflow: hidden;
		border-top-left-radius: 1rem;
		border-top-right-radius: 1rem;
	}
	
		.card-img img {
			transition: 0.3s;
		}
	
		.card-img:hover img {
			transform: scale(1.05);
		}

	.card-img-top {
		border-top-left-radius: 1rem;
		border-top-right-radius: 1rem;
	}

	.card-body {
		
	}
	
	.card-footer {
		color: var(--gray);
	}
	
/***************************
LIST GROUPS - https://getbootstrap.com/docs/5.3/components/list-group/
****************************/
.list-group {
	background: none;
}

.list-group-item {
	background: none;
	color: var(--light);
}

.list-group-item.active {
	background: var(--primary);
	color: var(--light);
	border-color: var(--primary);
	box-shadow: none;
}
	
/***************************
ACCORDIONS - https://getbootstrap.com/docs/5.3/components/accordion/
****************************/
.accordion-button {
	background: var(--dark);
	border-color: var(--gray);
	color: var(--light);
	padding: 1.5rem 1.25rem;
	font-size: 1.25rem;
}

.accordion-button:focus {
	box-shadow: 0 0 0 .1rem var(--primary-shade-02)
}

.accordion-button:not(.collapsed) {
	background: var(--dark);
	color: var(--light);
}

	.accordion-button.collapsed::after, .accordion-button:not(.collapsed)::after { /*icon*/
	  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
	}
	
.accordion-item { /*body*/
	background: none;
	color: var(--light);
}
	
/***************************
PAGINATION (used for views) - https://getbootstrap.com/docs/5.3/components/pagination
****************************/
.pagination .page-link {
	background: var(--dark);
	color: var(--light);
	border-color: var(--gray);
	padding: 0.5rem 1rem;
	transition: 0.3s;
}

	.pagination .page-link:hover {
		color: var(--gray);
	}

.page-link:focus {
	box-shadow: 0 0 0 .1rem var(--primary-tint-03);
}

/****************************
BADGES
*****************************/
.badge {
	border-radius: 25px;
	background: transparent!important;
	border: 2px solid var(--primary);
	text-decoration: none;
	color: var(--light);
}

/***************************
NAVIGATION - standard rail navigation
****************************/
/*** average desktop / tablet display ***/
.rail-navigation {
	position: fixed;
	z-index: 10000;
	left: 0;
	top: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: var(--dark);
	box-shadow: 0 0.1rem 15px 0px rgba(0,0,0,0.25);
	border-right: 1px solid rgba(255,255,255,0.15);
}

	.rail-navigation .rail-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		height: 75px;
		width: 75px;
		transition: 0.3s;
		color: var(--light);
		text-decoration: none;
		opacity: 0.7;
		gap: 0.2rem;
	}
	
	.rail-nav-offset { /*controls the content offset for the navbar*/
		margin-left: 75px;
	}
	
	.rail-navigation .rail-item:hover {
		opacity: 1;
	}
	
	.rail-navigation .rail-item svg {
		width: 20px;
		fill: var(--light);
		opacity: 0.7;
	}
	
	.rail-navigation .rail-item.active {
		opacity: 1;
	}
	
	.rail-navigation .rail-item svg {
		opacity: 1;
	}
	
	.rail-navigation .rail-item .rail-label {
		font-family: "Montserrat", "Jost", sans-serif;
		font-weight: 600;
		text-transform: uppercase;
		font-size: 0.7rem;
	}
	
	.rail-navigation .rail-item.active svg {
		fill: var(--secondary);
	}
	
/*** extra large screen display ***/
@media (min-width: 1600px) {	
	.rail-navigation .rail-item svg {
		width: 30px;
	}
	
	.rail-navigation .rail-item {
		height: 100px;
		width: 100px;
	}
	
	.rail-nav-offset { /*controls the content offset for the navbar*/
		margin-left: 100px;
	}
}
		
/*** mobile display ***/
@media (max-width: 640px) {
	.rail-navigation {
		top: inherit;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		box-shadow: 0 0.1rem 15px 5px rgba(0,0,0,0.25);
		border: 0;
		border-top: 1px solid rgba(255,255,255,0.15);
	}
	
	.rail-navigation .rail-item {
		flex-direction: column;
		align-items: center;
	}
	
	.rail-nav-offset { /*controls the content offset for the navbar*/
		margin-left: 0px;
		margin-bottom: 80px;
	}
}

/****************************
NAVIGATION POP UP MENU
*****************************/
.offcanvas-browse {
	margin-left: 75px;
	border-right: 1px solid rgba(255,255,255,0.15)!important;
	background: var(--darker);
	color: var(--light);
}

	.offcanvas-browse .offcanvas-header {
		background: var(--darker);
		border-bottom: 1px solid rgba(255,255,255,0.15);
	}
	
	.offcanvas-browse .accordion-button {
		background: none;
		padding: 0.75rem;
		opacity: 0.75;
		transition: 0.3s;
		font-family: "Inter", sans-serif;
		font-weight: 600;
	}
	
		.offcanvas-browse .accordion-button:hover {
			opacity: 1;
		}
	
	.offcanvas-browse .accordion,
	.offcanvas-browse .accordion-item,
	.offcanvas-browse .accordion-button:not(.collapsed)	{
		border: none!important;
		box-shadow: none!important;
	}
	
	.offcanvas-browse .accordion-link {
		text-decoration: none;
	}
	
		.offcanvas-browse .accordion-link:not(.collapsed)::after { /*icon*/
			background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
			transform: rotate(-90deg);
		}
	
	.offcanvas-browse .accordion-body {
		padding: 0.5rem 0.5rem;
	}
	
	.offcanvas-browse a.nav-link {
		color: var(--light);
		font-style: italic;
		opacity: 0.75;
		transition: 0.3s;
		padding: 0.25rem 0.5rem;
	}
	
		.offcanvas-browse a.nav-link.active {
			opacity: 1;
		}
	
		.offcanvas-browse a.nav-link:hover {
			opacity: 1;
			margin-left: 0.25rem;
		}

/*** extra large screen display ***/
@media (min-width: 1600px) {	
	.offcanvas-browse {
		margin-left: 100px;
	}
}
		
/*** mobile display ***/
@media (max-width: 640px) {
	.offcanvas-browse {
		margin-left: 0;
	}
}


/***************************
FOOTER
****************************/


/*****************************
SLIDER
******************************/
.swiper {
	width: 100%;
	padding-bottom: 35px;
}

.swiper-button-next::after, .swiper-button-prev::after {
	color: var(--secondary);
}

.swiper-pagination-bullet {
	background: var(--gray);
	opacity: 1;
}

.swiper-pagination-bullet-active {
	background: var(--secondary);
}

.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
	
}

/*****************************
ANIMATIONS - GENERAL
******************************/
.l1 {
	font-family: "Montserrat", "Jost", sans-serif;
	font-weight: 900;
}

.neonText {
	  animation: flicker 5s infinite alternate;
}

	/* Flickering animation */
	@keyframes flicker {
	  0%, 18%, 22%, 25%, 53%, 57%, 100% {
		  text-shadow:
		  0 0 2px #fff,
		  0 0 4px #fff,
		  0 0 2px #fff,
		  0 0 20px var(--primary),
		  0 0 28px var(--primary),
		  0 0 35px var(--primary),
		  0 0 43px var(--primary),
		  0 0 55px var(--primary);
	  }
	  
	  20%, 24%, 55% {        
		  text-shadow: none;
	  }    
	}
	
/********************************
ARTICLES AND VIDEO STYLE
**********************************/
.author-byline {
	padding: 1rem;
	border-top: 1px solid var(--gray);
	border-bottom: 1px solid var(--gray);
	display: flex;
	column-gap: 1rem;
}

	.author-byline .author-img {
		max-width: 80px;
	}
	
		.author-byline .author-img img {
			border-radius: 100%;
		}
	
.affiliate-linker {
	background: var(--darker);
	padding: 1rem;
	border-top: 5px solid var(--primary);
}