:root {

	/* This is set up so we can easily alternate panel structure, having an image on the left in one row, on the right on the next, back to the left on the next.
	/* They are named 'a' and 'b' so we can set our columns to start their journey of alternating back and forth on either side just by switching the variables */

	--row-flex-direction-a: row;
	--row-flex-direction-b: row-reverse;

	--nf-admin-nav-bg-color: #2d394b;

	--link-color: #1a438a;
	--link-color-reversed: #da8325;
	--color-light: #ebe9db;
	--color-dark: #1D2022;
	--color-dark-flat: #232;

	--renamezmoi-goldcolor: #8f6815;
	--renamezmoi-hilite: #da8325;

	--font-body: 'roboto';
	--font-condensed: 'roboto condensed';
	--font-tertiary: 'roboto serif';
	--font-headline: 'roboto slab';
	--font-massive: 'roboto';

	--text-color-tertiary: #838e72;

	--conversion-bg-color: #180b37;
	--conversion-color: #fff;
	--conversion-btn-bg-color: #48a53d;
	--conversion-btn-color: #fff;

	--nf-nav-bg-color: #2a3747f0;
	--nf-nav-bg-img: url('https://radplatypus.com/_common/images/topnav-bg.jpg');
	--nf-nav-nav-toggler-img: url('https://nookfoo.com/.dev/.reaktor/matter/cleanboots/_common_cleanboots/images_cleanboots/btn_mobileMenu-dark.png');

	--nf-header-hero-home: url('https://nookfoo.com/.dev/.reaktor/antimatter/nf/_common_nf/images_nf/home/hero-bg-home.jpg');
	--nf-header-hero-blog: url('https://nookfoo.com/.dev/.reaktor/antimatter/nf/_common_nf/images_nf/blog/hero-bg-blog.jpg');
	--nf-header-hero-contact: url('https://nookfoo.com/.dev/.reaktor/antimatter/nf/_common_nf/images_nf/contact/hero-bg-contact.jpg');
	--nf-header-hero-about: url('https://nookfoo.com/.dev/.reaktor/antimatter/nf/_common_nf/images_nf/about/hero-bg-about.jpg');

	--nf-thumbnail-width: 200px;
	--nf-thumbnail-height: 32.3%;
	--nf-thumbnail-margin: 3%;

	--bs-bg-opacity: .2;
	--nf-nav-link-color: #ff9900;


}



/******************************************
/******** Overwrite Bootstrap CSS ********
/*****************************************/
/*p {
  margin: 0;
  font-size: calc(4vw + 4vh + 2vmin);
   See:
   * http://codepen.io/CrocoDillon/pen/jgmwt
   * For some math behind this

} */

BODY {
	margin: 0px;
	padding-bottom: 50px;
	font-family: var(--font-body);
	/* clamp(1rem, -0.875rem + 3.333vw, 1.5rem) */
	font-size: clamp(1rem, 1.45rem + -0.267vw, 1.5rem);
	background-color: rgb(29, 32, 34);
	color: #e1e1e1;
}

body:first-letter {
	text-transform: capitalize;
}

h1,h2,h3,h4,h5,h6 {
	font-family: var(--font-headline);
}

h1 {
	font-size: 233%;
}

h2 {
	font-size: 200%;
}

h3 {
	font-size: 170%;
}

button {
	text-transform: inherit;
}



/******** BOOTSTRAP REBOOTS **********/

.btn-primary {
	background-color: var(--link-color);
}

section .container ul+.col-8 .btn-primary {
	font-size: 110%;
	margin-top: 10px;
}

.img-thumbnail {
	/* height: var(--nf-thumbnail-height); */
	/* height: calc(33% - 3%); */
	/* max-width: var(--nf-thumbnail-width); */
	margin: var(--nf-thumbnail-margin);
	border: 0px;
	padding: 0px;
	display: block;
	float: right;

}

/******** EVERYPAGE BASICS **********/

.NF_hilite {
	color: var(--renamezmoi-hilite);
}

.NF_flexdir-a {
	flex-direction: var(--row-flex-direction-a);
}

.NF_flexdir-b {
	flex-direction: var(--row-flex-direction-b);
}

/******** SEMANTIC HTML **********/

section {
	padding: 5%;
}

/******** NAVBAR ********/

#NF_topNav {
	background-color: var(--nf-nav-bg-color);
	background-image: var(--nf-nav-bg-img);
	background-repeat: no-repeat;
	background-size: cover;
	padding: 11.1px 20px 1.5rem 20px;
}

.navbar#NF_topNav .navbar-toggler{
	width: 2em;
	height: 2em;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: var(--nf-nav-nav-toggler-img);
}

.navbar-brand IMG {
	max-height: 60px;
	max-width: 273px !important;
}

.navbar-collapse {
	width: 100%;
}

.nav-item .nav-link {
	font-family: 'roboto condensed';
}


.navbar.fixed-bottom {
	padding-bottom: 0px;
}

.navbar.fixed-bottom {
	background-color: var(--nf-admin-nav-bg-color);
}

.navbar.fixed-bottom .container-fluid .row {
	width: 100%;
}

/***** I NEED A HEROS ***********************/
.NF_hero {
	background-image: var(--nf-header-hero-home);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	margin: 0%;
	padding: 0%;
	width: 100%;
	height: 550px;
}

#NF_index .NF_hero, #NF_home .NF_hero {
	height: auto;
}


.NF_hero video {
	position: relative;
	z-index: 0;
	margin-top: -16px;
	width: 100%;
}

.NF_hero video+h1 {
	position: absolute;
	bottom: 3%;
	left: 5%;
	z-index: 1;
	font-size: calc(1.575rem + 5.8vw);
	color: #fff;
	text-shadow: #000000 0px 0px 28px;
	font-family: var(--font-condensed), sans-serif;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 20px;
	width: 100%;
}

.NF_hero .container {
	padding-top: 15%;
}

#NF_blog .NF_hero {
	background-image: var(--nf-header-hero-blog);
}

#NF_about .NF_hero {
	background-image: var(--nf-header-hero-about);
}

#NF_contact .NF_hero {
	background-image: var(--nf-header-hero-contact);
}


#NF_index .NF_hero .row {
   align-items: center !important;
   justify-content: center !important;
}


/***** CONVERSION BAR ***********************/
.NF_conversionBar {
	text-align: center;
	background-color: var(--conversion-bg-color);
	padding: 2% 2%;
	color: var(--conversion-color);
}

.NF_conversionBar h4 {
	margin-top: 1.6%;
	font-size: 140%;
}

.NF_conversionBar .btn {
	background-color: var(--conversion-btn-bg-color);
	color: var(--conversion-btn-color);
	margin: 3% !important;
}

/*********** SIDE BY SIDES *************/

.NF_sideBySide {
	background-color: var(--color-light);
	color: var(--color-dark-flat);
}

.NF_sideBySide h3 {
	margin-bottom: 0.8rem;
}

.NF_sideBySide li {
	margin: .4rem 0px .4rem -16px;
}

.NF_3panel {
	background-color: var(--color-dark);
	color: var(--color-light);
}

.NF_3panel h3 {
	margin-bottom: 0.8rem;
	margin-top: 7%;
	font-size: 96%;
}

.NF_3panel p {
	font-size: 86%;
	opacity: .8;
}



/*********** GALLERIES *************/

#NF_galleryMainImage {
	background-repeat: no-repeat;
	background-size: cover;
	padding: 0px;
}

.NF_section-gallery #NF_thumbnails {

	text-align: center

}

.NF_section-gallery .btn-lg {
	width: 100%;
	margin-top: 6%;
}

.NF_section-gallery h2 {
	text-align: center;
	margin-bottom: 3%;
	color: #d89419;
	font-weight: bold
}

.NF_section-gallery h3 {
	margin-bottom: 0%;
	background-image: url(https://dev.straightoffbase.com/_common/images/bg_cammo_desert.png);
	padding: 2%;
	color: #333333;
}

.NF_section-gallery p {
	margin-bottom: 3%;
	color: var(--text-color-tertiary);
	text-align: center;
}

/******************************************
/************** MEDIA QUERIES *************
/*****************************************/

/* Note: These media sizes are the same as Bootstrap's but not automatically set.
/* However I have no expectation that these sizes will ever change */

/************** Screens LARGER than 992px *************/

@media screen and (max-width: 767px) {
	/* body{font-size: 32px;}

	.NF_hero video+h1 {
		width: 90%;
	} */
}

@media screen and (min-width: 768px) {
	/*
	body{
		font-size: 28px;
	}

	.NF_hero video+h1 {
		width: 50%;
	}
	*/
}

@media screen and (min-width: 992px) {

	/*
	.navbar-collapse {
		background-color: transparent;
	}

	.nav-item .nav-link {
		font-size: 24px;
		margin-right: 12px;
	}
	*/
}

@media screen and (min-width: 1200px) {
	/*
	body{font-size: 20px;}
	*/
}

@media screen and (min-width: 1400px) {
	/*
	body{font-size: 20px;}
	*/
}