/* errors are written with this class before the CSS is loaded. If the page loads correctly these will disappear */
/* for best effect make the text color the background color of the page */
.nf_ltf {
	display: none;
	color: #32323D;
}


/******************************************************/
/*************** BOOTSTRAP REBOOT *********************/
/******************************************************/

.navbar-toggler {
	border: 2px solid #fff;
	opacity: 0.6;
}

.navbar-toggler-icon {
	background-image: url(https://dev.nookfoo.com/.reaktor/elements/images/icons/hamburger-grey.png);
}


/******************************************************/
/********************* HTML ***************************/
/******************************************************/

BODY {
	font-family: helvetica,arial, sans-serif;
	font-size: 18px;
	line-height: 1.4em;
	margin: 0% 0% 0% 0%;
}

STRONG {

	font-weight: bold;

}


IMG {
	border: 0px;
}


/**** Headers **************/

H1 {
	font-size: 200%;
	font-weight: bold;
	line-height: 1.3em;
	text-transform: capitalize;
}


H2 {
	font-size: 150%;
	line-height: 1.3em;
	text-transform: capitalize;
}

h3 {
	font-size: 130%;
	line-height: 1.3em;
	text-transform: initial;
}

h4 {
	font-size: 120%;
	line-height: 1.3em;
	text-transform: initial;
}

h5 {
	color: #a0391d;
	font-size: 94%;
	font-weight: 500;
	letter-spacing: .055rem;
	margin-bottom: -4px;
	text-transform: uppercase;
}

main {
	position: relative;
}
/**** Text and Links **************/

P {
	margin-top: 1%;
	margin-bottom: 4%;
}

A {
	color: #1a4c9a;
	text-decoration: none;
}

A:hover {
	color: #07661c;
	text-decoration: underline;
}

.NF_linkPageTop {
	width: 100%;
	font-size: 120%;
	padding: 1% 5%;
	text-align: center;
	margin: auto;
	display: block;
}

#NF_footer .NF_belowBannerText .NF_text {
	text-align: left;
	font-size: 110%;
	padding: 0% 5% 4% 6%;
}

#NF_footer .NF_belowBannerText .NF_text a {
	margin: 0%;
	font-weight: bold;
}

/**** BOOTSTRAP REBOOT **************/

.card-body {
	padding-right: 0%;
	padding-left: 5%;
	padding-top: 0%;
}

.card-body h4 {
	font-size: 150%;
}


/**** Lists **************/

.NF_sideBySide ul li {
	list-style: none;
	margin-left: -9%;
}

.NF_3panel ul li {
	list-style: none;
	margin-left: -20%;
}


/****** Callouts ***********/

section.NF_callout {
	padding: 3%;
	line-height: 1.7em;
}



/****** 3 Cards ***********/


.NF_3panel {
	background-color: var(--color-dark);
	color: var(--color-light);
	width: 95%;
	margin: 30px auto;
}

.NF_3panel .card {
	width: 29%;
	float: left;
	margin: 0% 2%;
	background-color: unset;
	color: whitesmoke;
	position: relative;

}

.NF_3panel h4 {
	margin-bottom: 0.8rem;
	margin-top: 1%;
	font-size: 137%;
}

.NF_3panel .card-text {
	width: 85%;
}

/**** Forms **************/

FORM {

}

INPUT {
	height: auto;
}

TEXTAREA {
	font-size: 90%;
	font-family: courier, times, verdana, monospace;
	line-height:1.5em;
	margin: 1.5% auto 1.5% auto;
	max-width: 900px
	padding: 1.5%;
}


/******************************************************/
/********************* GENERAL ************************/
/******************************************************/

/* For making a clear gif that covers an entire div with a background image-rendering
/* so that the whole image area is clickable */
.NF_clearCover {
	width: 100%;
	height: 100%;
	z-index: 1;
}

/* for clawing out some blank space on the page */
.NF_spacer {
	clear: both;
	height: 1px;
	width: 100%;
}

/* For hilighting, especially NookFoo related items */
.NF_nookFoo {
	  color: #d65a38;
	  white-space: nowrap;
}

/* For showing code items */
.NF_nookFooKode {
	color: #80995e;
	font-family: trispace,monospace,verdana,serif;
}

.NF_displayOnDesktop {

	display: block;

}

.NF_displayOnTablet {

	display: none;

}

.NF_displayOnPhone {

	display: none;

}

.NF_videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.NF_videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/******************************************************/
/************* NOOKFOO LOGIN PAGE *********************/
/******************************************************/

#NF_loginBoxHolder {
	margin: 10% auto 5% auto;
}

.NF_formFields {
	max-width: 300px;
	padding: 5%;
	text-align: center;
}

.NF_logoImageHolder {
	text-align: right;
	padding-right: 50px;
}

.NF_formFieldHolder {
	text-align: left;
}

.NF_logoField {
	max-width: 300px;
	padding: 5%;
}

.NF_logo {
	margin-top: 5%;
}

#NF_atomHolder {
	text-align: center;
}

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

	.NF_formFields {
		text-align: center;
		margin: 0% auto;
	}

	.NF_logoImageHolder {
		text-align: center;
		padding-right: 0px;
	}

}


/******************************************************/
/************* LIKE, NAVS and STUFF *******************/
/******************************************************/

nav .navbar-brand img {
	max-height: 60px;
}

.NF_mainNavLink {
	float: left;
}

.NF_mainNavDropCarret {
	float: left;
}

.NF_navSubLinks {
	float:none;
	clear: both;
}

#NF_pageNavTabs {
	padding: 1.1% 15% 0% 15%;
	text-transform: capitalize;
	margin: auto;
	text-align: center;
	display: flex!important;
	justify-content: space-around;
}

#NF_pageNavTabs li {
	text-transform: capitalize;
}

#NF_pageNavTabs .nav-underline, #NF_pageNavTabs .nav-link.active {
	color: #ffffff;
	border-bottom-color: currentcolor;
}

#NF_pageNavTabs li a {
	color: #83bcf5;
	float: left;
	margin-right: 7%;
	white-space: nowrap;
}

#NF_home #NF_pageNavTabs {
	display: none!important;
}

/******************************************************/
/********************* HTML ***************************/
/******************************************************/

/******************************************
/****************** HEROES ****************
/*****************************************/

/***** I NEED A HEROS ***********************/

.NF_hero {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	margin: 0%;
	padding: 0% 8%;
	width: 100%;
	text-align: center;
}

.NF_hero h1 {
	font-size: calc(1.575rem + 3.8vw);
	color: #fff;
	position: absolute;
	bottom: 10%;left: 0%;
	text-align: center;
	padding: 0% 8%;
}

#NF_home .NF_hero {
	background-image: var(--nf-header-hero-home);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	margin: 0% auto 0% 0%;
	padding: 0%;
	width: 100%;
	text-align: center;
}


#NF_home .NF_hero#NF_video {
	position: relative;
	z-index: 0;
	margin-top: 0px;
	width: 100%;
}

#NF_home .NF_hero h1 {
	font-size: calc(1.875rem + 5.8vw);
	color: #fff;
	position: absolute;
	top: 23%;
	text-align: center;
	padding: 0px 5%;
}


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

.NF_hero video {
	width: 100%;
}


/******************************************************/
/***************** COMPONENTS *************************/
/******************************************************/

.NF_accordion {
	width: 95%;
	margin: 5% auto 5% auto;
	clear: both;
}


/******************************************************/
/***************** PAGE LAYOUT ************************/
/******************************************************/

.NF_list {
	width: 90%;
	max-width: 900px;
	margin: auto;
}

.NF_list h3 {
	width: 90%;
	font-size: 120%;
}

.NF_list .NF_item {
	clear: both;
	padding-right: 3%;
	border-top: 1px dashed #eeeeee54;
	padding-top: 3%;
	margin-bottom: 1%;

}

.NF_list .NF_item img {
	width: 43%;
	margin: 1% 4% 15% 0%;
	float: left;
}

.NF_list .NF_item p {
	font-size: 80%;
	margin: 0% 4% 6% 0%;
}

#NF_contactNav {

	width: 100%;
	background: #000;

}

#NF_contactNav .NF_container {

	width: 800px;
	padding: 1%;
	font-size: 12px;
	font-family: verdana;
	text-align: right;
	margin: 0px auto;

}


#NF_contactNav .NF_container A.NF_squareButton {
	border: 1px solid #efefefdb;
	background-color: #172f55;
	color: #e1e1e1b0;
	padding: .7% 2%;
	margin: 8px 0px 15px 0px;
	font-weight: 100;
	font-family: Poppins,helvetica,arial;
	text-transform: uppercase;
	letter-spacing: .07rem;

}

.NF_logo {
	margin-top: 16px;
	max-width: 320px !important;
}

/* currently unused */
#NF_siteTop {
	height: 100px;
	width: 100%;
}

#NF_pageContent {

	margin: 0% auto 0% auto;
	padding: 2.5% 0%;
	width: 95%;

}

#NF_page {
	margin: 0% auto;
	width: 800px;
	background-color: #ffffffa6;
}

.NF_header {
    border-bottom: 1px dashed #445132;
    margin-bottom: 2%;
    margin-top: 3%;
}

/* Title or headline, the smart thing to do would be replace with h4 tags...later */
.NF_title {
	color: #111111;
	font-weight: bold;
	letter-spacing: .01rem;
	line-height: 1.2em;
	margin: -2% auto 1.5% 0%;
	font-size: 145%;
	text-transform: capitalize;
}

/* Basic values for any text box, nice right side margin, some space on the top and bottom */
.NF_text {
	font-family: inherit;
	margin: 1% 5% 1.5% 0%;
	padding: 1% 3% 1% 2% ;
}

.NF_caption {

	font-size: 90%;
	line-height: 1.5em;
	margin: 1% 6% 2% 5%;

}

/* Easy way to put a collection of somethings in their own little box, usually paired with
/* an #id or nested in another DIV to give it context, but it's a quick way to say,
/* "everything in here goes together, and is separate from what is above and below
/* unless otherwise specified, which is actually quite likely"  */
.NF_container {
	clear: both;
	float: none;
	height: min-content;
	position: relative;
	width: 100%;
	margin-top: 1%;
}

.NF_panel {
	margin-top: 0% !important;
	margin: 0%;
	padding: 0% 2%;
}



/* One or more (usually more) things that go together */
/* mostly found enclosed in .NF_container  */
.NF_item {
}

/* One or more (usually more) things that go together */
/* mostly found enclosed in .NF_container  */
.NF_youTubeThumb {
	margin: 2% 2.5% 3% 0%;
	float: left;
	white-space: nowrap;
}


.NF_pageQuote {
	width: 95%;
	color: #664e2fbf;
    font-size: 148%;
    margin: 4% 0% 2% 4%;
    line-height: 1.3em;
    letter-spacing: 0.1rem;
    font-weight: 100;
    font-style: oblique;
}

.NF_pageQuote .NF_title {
    color: #102542;
    font-weight: bold;
    font-size: 105%;
    text-transform: uppercase;
    font-style: normal;
    letter-spacing: .1rem;
	display: block;
}

.NF_container .NF_header .NF_title {
    font-size: 80%;
    color: #fff;
    text-transform: uppercase;
    margin-left: 2%;
    background-color: #cd0000;
    padding: 1% 2% .7% 1.4%;
    margin-bottom: -1.1%;
    width: fit-content;
    letter-spacing: 0.15rem;
    font-weight: 420;
    font-family: "Patua One", sans-serif;
}


.NF_twoPanelsWide IMG {
	width: 49.5%;

}

.NF_floatLeft {
	float: left;
	margin: 1% 6% 1% -1%;
}


.NF_floatRight {
	float: right;
	margin: 1% -1% 1% 6%;
}

.NF_featureBox {
	margin: 5.5% 3% 6% 3%;
}



.NF_picsCollage .NF_picHolderToo {
	background-size: cover;
	height: 280px;
	background-image: url(http://dev.nookfoo.com/.reaktor/antimatter/nf/_common_nf/images_nf/nooky_the_atomic_nookleus.jpg);
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
}


/*** Responsive Youtube ***/

.NF_articleTitle {
	width: 80%;
	max-width: 800px;
	margin: 2% auto 3% auto;
	padding: 1% 3% 1% 4.5%;
}

#NF_article img {
	width: 95%;
	max-width: 950px;
	margin: 0% auto;
	display: block;
	box-shadow: 0px 0px 14px 13px rgba(0, 0, 0, 0.2);
}

#NF_article .NF_caption {
	width: 95%;
	max-width: 950px;
	margin: 2% auto 1% auto;
}

#NF_adventure #NF_article .NF_infoDropdown {
	display: none;
}

#NF_article .NF_infoDropdown {
	clear: both;
	width: 790px;
	height: auto;
	margin: 20px auto 89px auto;
}

#NF_adventures #NF_article .NF_infoDropdown {
	display: none;
}

#NF_article .NF_infoDropdown img {
	width: unset;
}

#NF_article .NF_infoDropdown .NF_infoLogo {
	box-shadow: none;
	float: left;
	width: 32%;
	height: 120px;
	/* margin-right: 5%; */
	box-shadow: none;
	margin-top: -8px;
}

#NF_article .NF_infoDropdown .NF_infoLogo img {
	box-shadow: none;
	/* width: 100%; */
	max-height: 130px;
}

#NF_article .NF_infoDropdown .NF_infoIcons {
	width: 95%;
	max-width: 830px;
	height: 49px;
	margin: auto;
	padding: 0% 5%;
}

#NF_article .NF_infoIcons .NF_iconCluster {
	margin-right: 1.5%;
	float: left;
	height: 43px;
}

#NF_article .NF_infoIcons .NF_iconCluster .NF_infoIcon {
	height: 24px;
	float: left;
}

#NF_article .NF_infoIcons .NF_iconCluster .NF_infoByte {
	float: left;
	margin-left: 5px;
	font-size: 18px;
	line-height: 1.2em;
	height: 35px;
	padding-top: 5px;
	white-space: nowrap;
}

#NF_article .NF_infoIcons .NF_iconCluster .NF_infoByte a {
	/* color: #000; */
	text-decoration: none;
}

#NF_article .NF_infoArea {
	clear: both;
	font-size: 130%;
	font-style: italic;
	padding: 2% 0%;
	display: none;
}

#NF_article .NF_infoAreaText {
	max-width: 700px;
	margin: auto;
	width: 90%;
	border-width: 1px 0px 1px 0px;
	border-color: #737373;
	border-style: dashed;
	padding: 2% 0%;
	display: none;
}

#NF_article .NF_infoArea p {
	color: #333;
}

#NF_article .NF_infoIcons .NF_iconCluster .NF_infoTitle {
	display: none;
}

#NF_article .NF_infoArea .NF_shortInfo {
	display: none;
}

#NF_article .NF_infoAreaFull {
	clear: both;
	max-width: 700px;
	margin: auto;
	border-width: 1px 0px 1px 0px;
	border-color: #737373;
	border-style: dashed;
	padding: 2% 0%;
	display: none;
	margin-bottom: -80px;
}


#NF_article .NF_infoAreaFull .NF_fullArea {
	display: none;
	line-height: 1.6em;
}

#NF_article .NF_infoDropdown .NF_socials {
	display: flex;
	justify-content: space-evenly;
}

#NF_article .NF_infoDropdown .NF_socials .NF_hoursOfOpDay .NF_label {
	font-weight: bold;
	text-transform: uppercase;
}

#NF_article .NF_infoDropdown .NF_socials img {
/*	float: left; */
	margin: -5% 6px;
	width: 23px;
}


#NF_pageContent .NF_item {
	clear: both;
	max-width: 700px;
	margin: auto;
	padding: 2% 0%;
	width: 90%;
}

.NF_item .NF_container {
	clear: none;
}


.NF_item .NF_title {
	margin-top: 7px;
}

.NF_item .NF_summary {
}

.NF_item .NF_description {
	display: none;
}

.NF_item  .NF_itemImage {
	width: 200px;
	height: 200px;
	border: 4px solid #000;
	background-size: cover;
	position: relative;
	float: left;
	margin: 0% 2.5% 2% 0%;
}

.NF_item .NF_price {

	display: none;

}

.NF_itemImage {
	float: right;
	margin: 0% -4% 2% 5%;
}

/* *********** page blurred out (like for a login page) *************************/

.NF_pageBlurrerer {
	text-align: center;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top:0px;
	z-index: 3;
	background-color: rgba(0, 0, 0, 0.741);
	-webkit-backdrop-filter: blur(15px);
	backdrop-filter: blur(15px);
}


/* *********** Images and stuff *************************/

IMG.NF_wide {
	width: 100%;
}


.NF_callOut {

	background-color: #fff;
	background-size: contain;
	background-position: center;
	padding: 0%;
	color: #001;
	width: 100%;
	margin: 0% -2% 7% -5%;

}

.NF_callOut .NF_text {

	margin-bottom: -2%;
	width: 65%;
	background-color: beige;
	padding: 0.3% 0% 3% 2%;

}

.NF_callOut .NF_text .NF_text {

	width: 92%;
	padding: 2% 6% 3% 2%;

}

.NF_container.NF_text.NF_left {
	margin-left: 268px;
}

.NF_left .NF_callOut .NF_text .NF_text{
	width: 92%;
	padding: 2% 6% 3% 2%;
	margin-left: 0%;
}


/****************************/
/****** CONVERSION **********/
/****************************/

.NF_conversionBar {
	padding: 1.5% 4% 2.5% 4%;
	background-color: #e0e0e0;
}

.NF_conversionBar .row {
	margin-left: 0%;
	margin-right: 0%;
}

.NF_conversionBar .NF_leftSide {
	text-align: center;
}

.NF_conversionBar .NF_leftSide h2 {
	text-align: center;
	font-size: 146%;
	margin-bottom: -1%;
}

.NF_conversionBar .NF_leftSide .NF_text {
	text-align: center;
	font-size: 110%;
	line-height: 1.4em;
}

.NF_conversionBar .NF_rightSide {
	padding-right: 4%;
	text-align: center;
}


.NF_conversionBar .NF_conversionBtn {
	width: 240px;
	margin: 0% auto;
	background-color: #1a560c;
	color: #fff;
	text-transform: uppercase;
	font-family: helvetica, arial, sans-serif;
}

.NF_conversionBar .NF_conversionBtn#NF_nextBtn {
	background-color: #0c3656;
}


.NF_sideBySide {
	margin: 2.5% auto;
}


.NF_sideBySide h3 {
	font-size: 150%;
}

.NF_sideBySide img {
	width: 100%;
	margin-top: 5%;
}



///**** RANDOM *****///

.NF_pageTopDescription {
	width: 85%;
	max-width: 900px;
	font-size: 120%;
	margin: 3% auto;
	line-height: 1.6em
}


/***** PICHOLDER *****/
.NF_picHolder {
	width: 100%;
	background-size: cover;
	height: 200px;
	background-image: url(http://nookfoo.com/.dev/.reaktor/antimatter/nf/_common_nf/images_nf/nooky_the_atomic_nookleus.jpg);
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
}

.NF_picHolder .NF_clearCover {
	width: 100%;
	height: 100%;
}





/******************************/
/********* THREEFER+ **********/
/******************************/

/* Three subpipcs with a fourth shown when the page is wide enough or is on mobile */

.NF_subPics {
	height: auto;
	padding: 0.6% 0.3%;
}

.NF_subPics a.NF_subSection {
	display: none;
}

.NF_subPics .NF_text {
	font-family: 'Alegreya Sans', sans-serif;
	color: #ffffffcc;
	padding: 0% 2% 3% 2%;
	font-size: calc(85%);
	font-weight: 300;
	line-height: 1.5em;
	display: block;
	font-size: 73%;
	margin-bottom: 7%;
	padding-bottom: 0%;
	text-align: center;
}

.NF_subPics .NF_text a {
	display: none;
}

.NF_subPics {
	height: auto;
	padding: 0.6% 0.3%;
}

.NF_subPics .NF_picHolder {
	width: 100%;
	background-size: cover;
	height: 200px;
	background-image: url(http://dev.nookfoo.com/.reaktor/antimatter/nf/_common_nf/images_nf/nooky_the_atomic_nookleus.jpg);
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
}

.NF_subPics h4  {
	font-size: calc(2.4vw);
	margin-top: 10px;
	margin-bottom: -1%;
	line-height: 1.3em;
	text-transform: initial;
	width: 100%;
	text-align: center;
	padding: 1% 1% 0% 0%;
	margin-bottom: 1%;
	font-family: "Alegreya", serif;
	color: #83bcf5;
	font-weight: 400;
}



/**************************/
/********* HOME **********/
/**************************/

#NF_home IMG.NF_wide {
	width: 530px;
}




/**************************/
/******* YOUTUBE **********/
/**************************/

.NF_youTube #tablet {

	display: none;

}

.NF_youTube #phone {

	display: none;

}



.NF_auto-resizable-iframe {

  max-width: 1000px;
  margin: 0px auto;

}

.NF_auto-resizable-iframe > div {

  position: relative;
  padding-bottom: 56.25%;
  height: 0px;

}

.NF_auto-resizable-iframe iframe {

  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;

}




/******************************************************/
/******************** BOTTOM ************************/
/******************************************************/

#NF_bottom {
	background-color: #883f2b;
	clear: both;
	display: flex;
	flex-direction: row;
	height: 55px;
	padding: 2% 6% 4% 5%;
}

#NF_bottom .NF_container {
	margin: 0% auto;
	width: 780px;
}

#NF_bottom .NF_logo {
    display: block;
    float: right;
    margin: -1% 0% 0% 2%;
   height: 98px;;
}


/**************************/
/******* SITE TOP *********/
/**************************/


.NF_hubLogo {
	display: inline-block;
	height: 30px;
	margin-top: 3px;
}

.backToTop {
	float: left;
	margin: 0.6% 3% 4% 3%;
	opacity: 85%;
	width: 85px;
}

/* little tiny all caps links suitable for small choices in tight spaces */
.NF_compactLinks {
	margin: -5px 20px 0px 0px;
	float: left;
	width: fit-content;
	clear: none;
}

/* the whole tippy top including NF_logo and navigation */
#NF_logoNavlinks {
	border-bottom: 1px dashed #cccccc78;
	width: 100%;
	height: 70px;
	width: 100%;
	padding: 0% 0% 1% 0%;
	opacity: 82%;
}


#NF_logoNavlinks .NF_logo {
	display: block;
	float: left;
	margin: .8% 0% 0% 2%;
	opacity: 75%;
	width: 210px;
}

#NF_mainNavArea {

	display: flex;
	flex-wrap: nowrap;
	height: 450px;
	background-position: center;
	background-size: cover;
	flex-direction: column;
	position: relative;

}

#NF_mainNavArea #NF_logoNavlinks .NF_container {
	margin: 0px auto;
	width: 900px;
}

#NF_mainNavArea .NF_container h3 {

	font-family: Fjalla One;
	font-size: 270%;
	background-color: #4d074de6;
	color: #f7f7f7;
	margin-bottom: -7px;
	margin-left: -4%;
	padding-bottom: 1.6%;
	padding-left: 4%;

}

#NF_mainNavArea .NF_container .NF_text {
	font-family: Poppins;
	font-size: 135%;
	color: #000;
	background-color: #f7f7f7db;
	padding: 2% 30% 2% 2%;
	line-height: 1.6em;
	margin-left: -2%;
	width: 70%;
	margin-top: 1%;
	margin-right: 0px;
	float: left;
}


#NF_mainNavArea .NF_container .NF_navHeaderImg {
	float: right;
	margin-left: -4%;
	margin-right: 0%;
	margin-top: -32.8%;
	height: 224px;
}

.NF_topNav {
	display: block;
}

#NF_topNav li {
	text-align: center;
	font-size: 140%;
	padding: 0% 2%;
	white-space: nowrap;
}

/* The actual site links */
.NF_siteNavigation {
	font-family: trispace,helvetica,arial,verdana,monospace;
	display: block;
	text-transform: uppercase;
	white-space: nowrap;
	width: auto;

 }

#NF_logoNavlinks .NF_siteNavigation {
	font-size: 123%;
	height: fit-content;
	margin: 0% 1% 0% 29%;
	padding: 1% 0% 0% 1%;
}

.NF_siteNavigation A {
	color: #efefef;
	float: left;
	font-size: 75%;
	letter-spacing: .1rem;
	margin: 2% 0% 0% 3%;
	text-transform: uppercase;
	padding: .7% 1% 1.7% 1%;
	white-space: nowrap;
}

.NF_siteNavigation A#selected {
	 color: #d65a38;
 }

.NF_siteNavigation  A#NF_hiddenLinks {
	display: none;	/* only show in bottom nav */
}

/* unused I don't think */
.NF_siteNavigation .NF_container {
	margin: 0%;
	padding: 0%;
	width: 90%;
 }

#NF_bottom .NF_siteNavigation {
	flex-basis: 10%;
	float: left;
	width: 84%;
	text-align: left;;
}

#NF_bottom .NF_siteNavigation A {
	color: #efefef;
	/* display: inline-block; */
	display: block;
	font-size: 50%;
	font-weight: normal;
	letter-spacing: .1rem;
	text-transform: uppercase;
	white-space: nowrap;
	margin: 0% 2.3% -6% 0%;
}


/* MOBILE MENU DEFAULT for NON MOBILE SITES
/* Hidden until the page passes a min width
/* The actual mobile menu CSS is down below in a
/* @media screen and (max-width: 990px) */
#NF_mobileMenu {
	display: none;
}

#NF_btnBack {
	display: none;
}

.NF_mobileNavigation {
	display: none;
}


/******************************************************/
/********** SIDE NAVIGATION ************************/
/******************************************************/

#NF_sideNav {

	border-radius: 10px;
	width: 23%;
	display: block;
	float: right;
	padding: 0% 2.5% 1.5% 1.2%;
	margin: 16px 21px 20px 45px;
	background-color: #ffffff38;

}


#NF_sideNav A {
	display: block;
	text-align: left;
	margin-bottom: 10.5%;
}

#NF_sideNav A IMG {

	width: 28.3%;
	margin: 0% 5% 5% 0%;

}

#NF_sideNav  .NF_phone {

	display: none;

}


.NF_backToTop {
	float: left;
	margin: 0.6% 3% 4% -3%;
	opacity: 85%;
	width: 124px;
}

/* little tiny all caps links suitable for small choices in tight spaces */
.NF_compactLinks {
	margin: -5px 20px 0px 0px;
	float: left;
	width: fit-content;
	clear: none;
}


/******************************************************/
/***************** SUBBAV TABS ************************/
/******************************************************/

/* FIX: Really more like tabsNavigation but maybe later */

NAV, .NF_subNavigation {
/*	border-bottom: 1px dashed #cccccc78;*/
	margin: 0% auto 0% auto;
	padding: 1% 0%;
	width: 100%;
}

.NF_subNavigation UL {
	list-style-type: none;
	overflow: visible;
}

.NF_subNavigation LI {
	clear: none;
	float: left;
	height: 25px;
	margin-right: 0px;
	padding: 0px 20px;
	width: auto;
}

.NF_subNavigation LI A {
	font-size: 20px;
	font-weight: 100;
	letter-spacing: .1rem;
	text-decoration: none;
	text-transform: Capitalize;

	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.NF_subNavigation LI A:hover {
	color: #000;

}

.NF_subNavigation LI.NF_active A, .NF_subNavigation LI A.active a {
	color: #d65a38;
}

.NF_subNavigation  #NF_tabSelected {
	color: #fff;
}

.NF_subNavigation#nfs_tab LI A,.NF_subNavigation#nf_tab LI A {

	display: inline-block;
	color: #fff!important;
	font-size: 1em;
	background-color: #7eb4e2;
	padding: 10px 23px 10px 19px;
	border-radius: 70em;
	margin: -14px 6px 8px 0%;
	position: relative;
	text-transform: capitalize;
	white-space: nowrap;
	letter-spacing: 0rem;
	font-weight: bold;
	font-family: helvetica,arial;

	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
	border: 1px solid #fff;
}


/* FIX: Shouldn't this actually be .NF_subNavigation SELECT {} ? */
.NF_subNavDropdown {
	/* border-bottom: 1px dashed #c8c0c061; */
	color: #d65a38;
	float: left;
	font-family: trispace,helvetica,arial, sans-serif;
	font-size: 110%;
	font-weight: 100;
	letter-spacing: .1rem;
	margin: -1.6% 0% 2.5% 0%;
	padding-bottom: 0.73%;
	text-align: left;
	text-transform: uppercase;
	width: 20%;
}

.NF_subNavigation#nf_subtab {
	margin: 0% auto -1% auto;
	width: 100%;
	border-bottom: 0px;
}

.NF_subNavigation#nfs_tab LI A:hover, .NF_subNavigation#nf_tab LI A:hover {
	color: #666;
}

.NF_subNavigation#nfs_tab LI.NF_selected A, .NF_subNavigation#nf_tab LI.NF_selected A {
	color: #d65a38;
}


.NF_subNavigation#nf_subtab LI A,.NF_subNavigation#nfs_subtab LI A {
	display: inline-block;
	color: #fff!important;
	font-size: 1em;
	background-color: #122c09;
	padding: 10px 23px 10px 19px;
	border-radius: 70em;
	margin: -14px 6px 8px 0%;
	position: relative;
	text-transform: capitalize;
	white-space: nowrap;
	letter-spacing: 0rem;
	font-weight: bold;
	font-family: helvetica,arial;

	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
	border: 1px solid #fff;
}

/******************************************
/************** MAIN PAGES ****************
/*****************************************/

.NF_pageTopDescription {
	width: 85%;
	max-width: 900px;
	font-size: 120%;
	margin: 3% auto;
	line-height: 1.6em
}


.NF_picHolder {
	width: 100%;
	background-size: cover;
	height: 200px;
	background-image: url(http://dev.nookfoo.com/.reaktor/antimatter/nf/_common_nf/images_nf/nooky_the_atomic_nookleus.jpg);
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
}

.NF_picHolder .NF_clearCover {
	width: 100%;
	height: 100%;
}

.NF_articlePage {

	margin: 4% auto 5% auto;
	width: 85%;
	max-width: 900px;

	font-size: 140%;

	.NF_pageTopDescription {
		font-size: 80%;
	}

	img.NF_articleImage {
		width: 100%;
		margin: 7% auto -3% auto;
	}

	h2 {
		width: 100%;
		margin: 1% auto 3% auto;
		font-size: 130%
	}

	h3 {
		font-size: 100%;
		width: 100%;
		margin: 5% auto 1% auto;
	}

	p {
		width: 100%;
		margin: auto;
		font-size: 65%;
		line-height: 1.6em;

	}

}


/******************************************************/
/************* FORMS [admin] **************************/
/******************************************************/

/* Using this instead of INPUT because it covers everything, not just <input> */
.NF_input {
	background-color: #303245;
	border: 0px;
	border-radius: 12px;
	border-width: 1px 1px 1px 1px;
	box-sizing: border-box;
	color: #cacaca;
	font-family: trispace,arial,verdana,tahoma,sans-serif;
	font-size: 100%;
	letter-spacing: 0.045rem;
	margin: 1% 0%;
	outline: 0;
	padding: 17px 35px 20px 20px;
	width: 95%;
}

.NF_checkbox {
	margin: 1.1% 10px 0% 0%;
}

.NF_radioButtons {
	float: left;
	width: auto;
}

/* Not replacing these titles with <H tags, also
/* Titles are large and go on top of a text input or similar */
FORM .NF_title {
	color: #46631f;
	font-family: martian mono,helvetica,arial,sans-serif;
	font-weight: 600;
	margin-top: 30px;
	clear: both;
	float: none;
	text-transform: capitalize;
	letter-spacing: .1rem;
	margin-bottom: 0.8%;
	line-height: 1.4em;
}

/* Labels are small and [usually] go to the side of checkboxes and radio buttons etc */
FORM .NF_label {
	float: left;
	font-size: 92%;
	margin: 0% 0% 0% 1%;
}

/* A container for .NF_buttons */
.NF_formButtons {
	clear: both;
	margin: 3% auto;
	padding: 5% 1%
}



/**************************************************
/************* PAGE COVERING POPUP ****************
/*************************************************/

.NF_infoPopup h2 {
	font-size: calc(4.5vw);
}

.NF_infoPopup li {
	text-align: left;
}

.NF_infoPopup a {

}


/******************************************
/************* CITY SERVER ****************
/*****************************************/


.NF_cityserver {
	margin-top: 4%;
	width: 100%;
	background-color: #231f20;
}


/* These were copied off the internet */
/* They are cool radio and checkbox buttons */
/* Customize the label (the container) */

/* Customize the label (the container) * /

ALL DISABLE FOR NOW BECAUSE THEY CONFLICT WITH BOOTSTRAP
we need to find out where these are actually used, probably only on NookFoo Admin forms
and rename those CSS tags there

.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  margin-top: 5%;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox * /
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox * /
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  margin-top: 1.3%;
}

/* On mouse-over, add a grey background color * /
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background * /
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) * /
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked * /
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator * /
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/*
FORM .NF_item {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox * /
FORM .NF_item input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox * /
.NF_checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color * /
FORM .NF_item:hover input ~ .NF_checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background * /
FORM .NF_item input:checked ~ .NF_checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) * /
.NF_checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked * /
FORM .NF_item: input:checked ~ FORM .NF_item::after {
  display: block;
}

/* Style the checkmark/indicator * /
FORM .NF_item: .NF_checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* End of check boxes from the internet */


/************* COOL BUTTON **************************/

.NF_button {
	background: #32323d00;
	color: #d7dfec;
	border-color: #ffffeebd;
}

.NF_button:not(:disabled):hover {
	transform: scale(1.05);
}

.NF_button:not(:disabled):hover:active {
	transform: scale(1.05) translateY(.125rem);
}

.NF_button:focus {
	outline: 0 solid transparent;
}

.NF_button:focus:before {
	content: "";
	left: calc(-1*.375rem);
	pointer-events: none;
	position: absolute;
	top: calc(-1*.375rem);
	transition: border-radius;
	user-select: none;
}

.NF_button:focus:not(:focus-visible) {
	outline: 0 solid transparent;
}

.NF_button:focus:not(:focus-visible):before {
	border-width: 0;
}

.NF_button:not(:disabled):active {
	transform: translateY(.125rem);
}

/************* /COOL BUTTON **************************/



/* A container for .NF_buttons */
.NF_formButtons {
	clear: both;
	margin: 3% auto;
	padding: 5% 1%
}

.NF_text-field {
    height: 60px;
    padding: 0% 2% 0% 3%;
    margin-bottom: 4%;
    border-style: none none solid;
    border-width: 1px;
    border-color: #000 #000 #e6e6e6;
    font-family: courier,'courier=-new',sans-serif;
    color: #445132;
    font-size: 115%;
    width: 96%;
    background-color: #fff;

}

TEXTAREA.NF_text-field {
	padding-top: 2%;

}

/************* COOL BUTTON **************************/

.NF_button {
	background: #32323D;
	backface-visibility: hidden;
	border-radius: .375rem;
	border-style: solid;
	border-width: .125rem;
	box-sizing: border-box;
	color: #b0bdd1;
	cursor: pointer;
	display: inline-block;
	font-family: Circular,Helvetica,sans-serif;
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.3;
	margin: 2.5% 1.5% 0% 1.5%;
	padding: .875rem 1.125rem;
	position: relative;
	text-align: center;
	text-transform: capitalize;
	text-decoration: none;
	touch-action: manipulation;
	transform: translateZ(0) scale(1);
	transition: transform .2s;
	user-select: none;
	-webkit-user-select: none;
}

.NF_button:not(:disabled):hover {
	transform: scale(1.05);
}

.NF_button:not(:disabled):hover:active {
	transform: scale(1.05) translateY(.125rem);
}

.NF_button:focus {
	outline: 0 solid transparent;
}

.NF_button:focus:before {
	content: "";
	left: calc(-1*.375rem);
	pointer-events: none;
	position: absolute;
	top: calc(-1*.375rem);
	transition: border-radius;
	user-select: none;
}

.NF_button:focus:not(:focus-visible) {
	outline: 0 solid transparent;
}

.NF_button:focus:not(:focus-visible):before {
	border-width: 0;
}

.NF_button:not(:disabled):active {
	transform: translateY(.125rem);
}

/************* /COOL BUTTON **************************/

/* Unsure about these as well as they don't seem to be used */

.w-form-done {
	background-color: #dddddd;
	display: none;
	padding: 20px;
	text-align: center;
}

.w-form-fail {
	background-color: #ffdede;
	display: none;
	margin-top: 10px;
	padding: 10px;
}

.NF_form .NF_cut {
	background-color: #15172b;
	border-radius: 10px;
	height: 20px;
	left: 20px;
	position: absolute;
	top: -20px;
	transform: translateY(0);
	transition: transform 200ms;
	width: 76px;
}

.NF_form .cut-short {
	  width: 50px;
}

.NF_input:focus ~ .NF_cut,
.NF_input:not(:placeholder-shown) ~ .NF_cut {
  transform: translateY(8px);
}

.NF_input:not(:placeholder-shown) ~ .NF_placeholder {
	  color: #808097;
	}
/* Unsure about these as well as they don;t seem to be used */


/************* HORIZNTAL FORM **************************/

/* A form laid out horizontally where the form elements are
/* side-by-disde instead of stacked vertically */
/* Used for the sort form */

.NF_horizontalForm .NF_container {
	float: left;
	clear: none;
	width: min-content;
}

.NF_horizontalForm .NF_container .NF_item {
	font-size: 50%;
	margin-bottom: -10.6px;
	text-transform: uppercase;
	white-space: nowrap;
}

.NF_horizontalForm .NF_formButtons {
	float: left;
	clear: none;
	margin: 0% 2% 2% 2%;
	padding: 0.5%;
	width: max-content;
}

.NF_horizontalForm .NF_button {
	font-size: 0.925rem;
	padding: 0.370rem 0.625rem;
	margin-left: -1%;
}



/******************************************************/
/************* BASIC POST LIST ************************/
/******************************************************/

.NF_postList {
	list-style-type: none;
	margin: 0% auto 5% auto;
	overflow: visible;
	width: 95%;
}

.NF_postList LI {
	/* height: min-content */;
	border-bottom: 1px dotted #ffffff3D;
	clear: both;
	color: #fff;
	letter-spacing: .05rem;
	margin: 0% 5% 0% 1%;
	font-family: trispace,verdana,arial,helvetica,sans-serif;
	font-size: 16px;
	font-weight: 100;
	text-transform: capitalize;
	padding: 1% 5% 1% 1%;
}

.NF_postList LI:last-child {
	border-bottom: none;
}

.NF_postList LI:first-child {
	border-bottom: 2px solid #ffffff3D;
	color: #fff;
	font-size: 20px;
}

.NF_postList LI A {
	font-weight: 100;
	text-decoration: none;

	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.NF_postList LI A:hover {
	color: #fff;
}

.NF_postList .NF_title {
	clear: both;
	color: unset;
	display: block;
	float: left;
	font-family: verdana,arial,helvetica,sans-serif;
	/* height: min-content; */
	margin: 0% 0% 0% 1%;
	overflow: auto;
	padding: 0% 2% 0% 1%;
	text-align: right;
	width: 30%;
}

.NF_postList .NF_description {
	color: #cccccccf;
	display: block;
	float: right;
	font-size: 70%;
	letter-spacing: .05rem;
	line-height: 1.9em;
	margin: 0% 2% 0% 1%;
	padding: 0% 0% 0% 0%;
	text-align: initial;
	width: 63%;
}

.nf_listColumn {
	float: left;
	font-family: arial,helvetica,sans-serif,verdana,tahoma;
	font-size: 60%;
	margin: 3px 10px 10px 0px;
}

.nf_colType_tinyint {
	width: 4%;
}

.nf_colType_mediumint {
	width: 4%;
}

.nf_colType_tinytext {
	width: 23%;
}

.nf_colType_mediumtext {
	width: 23%;
}

.nf_colType_varchar {
	width: 10%;
}

#NF_tableSortBar FORM {
	height: 60px;
}



/******************************************************/
/***************** BASIC POST ************************/
/******************************************************/

.NF_post {

	width: 100%;

}

.NF_post IMG {

	width: 100%;

}



/******************************************************/
/****************** VERYCAL VIDEOS ********************/
/******************************************************/

.NF_verticalVideoHolder img {
	width: 96%;
	padding: 2%;
}


/******************************************************/
/****************** LOGON PAGE ************************/
/******************************************************/


.NF_container#NF_accessPages {
	margin: 20% auto;
	width: 700px;
}

#NF_accessPages .nf_logo {
	padding-bottom: 3%;
	width: 92%;
}

#NF_accessPages #NF_lefty {
	border-right: 1px dotted #919191;
	padding: 0px;
	text-align: left;
	width: 48%;
	margin: 0% 5% 3% 0%;
	float: left;
}

#NF_accessPages #NF_righty {
	float: left;
	width: auto;
}

#NF_accessPages .NF_button {
	/* margin-top: 13px;
	margin-left: 0px; */
}

#NF_righty #NF_nookular {
	margin: 18px 0px 0px 26px;
}

#NF_accessPages .NF_error {
	border-bottom: 1px dotted #b5bda69e;
	color: #942D10;
	padding: 2.5% 3% 3% 3%;
}



/******************************************************/
/****************** ARRAYS ****************************/
/******************************************************/

/* no trace_display should be anywhere but with the rest of its kind */
.NF_traceDisplayPopupMsgText .NF_foldableArrayHolder .NF_title {
	background-color: unset;
}

.NF_foldableArrayHolder {
	/* background-color: #323c5759; */
	clear: both;
	float: none;
	font-size: 17px;
	height: fit-content;
	margin: 0% auto;
	width: 100%;
}

.NF_foldableArrayHolder .NF_title {
	/* background-color: #333; */
	color: #fff;
	width: auto;
	padding: 1%;
	font-size: 82%;
}

.NF_foldableArrayHolder .NF_foldableArrayContents {
	/* background-color: #acbc93e8; */
	border-left: 1px dashed #24bb3859;
	display: none;
	/* margin: 1%; */
	margin-left: 10px;
	/* padding: 0.5%; */
	text-align: left;
	width: 100%;
}

.NF_foldableArrayHolder .NF_foldableArrayRow {
	clear: both;
	padding: 0%;
	width: 100%;
}

.NF_foldableArrayHolder .NF_foldableArrayKey {
	/* background-color: #acbc93; */
	color: #333;
	float: left;
	font-family: trispace,helvetica,arial,sans-serif,verdana;
	font-weight: 600;
	height: 30px;
	margin-right: 5.8px;
	padding: 0.2% 0% 0.2% 10px;
	width: fit-content;
}

.NF_foldableArrayHolder .NF_foldableArrayValue {
	/* background-color: #4a4955; */
	color: #efefef;
	float: left;
	font-family: verdana,helvetica,arial,sans-serif,trispace;
	font-size: 95%;
	padding: 0.2%;
	width: fit-content;
}

.NF_foldableArrayHolder .NF_foldableArrayValue .NF_text {
	color: #d5db9a;
	font-family: monospace;
	height: auto;
	max-height: 200px;
	overflow: auto;
	padding: 0% 3% 1% 2.5%;
	width: fit-content;
}


/**************************/
/******* SOCIALS **********/
/**************************/


.NF_likeAndSubscribe {
	width: 100%;
	opacity: 55%;
	display: block;
}


/******************************************************/
/****************** ANTI-PAGE *************************/
/******************************************************/

#NF_antiPage .NF_errors {
	margin-bottom: 6%;
}


/******************************************************/
/********************* DEPRECATED ********************/
/*****************************************************/

/*** island of lost styles, help them get home why don't you **/

/* .NF_container .NF_table .NF_container {
	clear: none;
	float: left;
	padding-bottom: 15px;
} */

.NF_container .NF_table .NF_container .NF_title {
	display: block;
	float: left;
	font-size: 100%;
	margin: 12px 20px 0px 10px;
}


/* Extraneous, links with this class should be converted so that the A tag holds all the CSS */
.NF_link {
	  display: block;
}

/* Used to make a graphic on the bottom use the full width of the page
there is a better way */
.NF_fullWidth {
	width: 100%;
}

.NF_errors {
	background-color: #dcd2c4;
	color: #1e0a02;
	font-family: trispace,monospace,verdana;
	font-weight: bold;
	line-height: 1.4em;
	margin: 0%;
	padding: 3% 8%;
}

.NF_errors .NF_title {
	background-color: #ffc700;
	color: #921818;
	font-family: trispace,monospace,verdana;
	font-weight: bold;
	letter-spacing: .01rem;
	line-height: 1.2em;
	margin: 0% -6% 3% -2%;
	padding: 1% 2%;
}

/*********************** VIDEO **********************************/

.NF_videoCover {
	position:relative;
	margin: 0%;
	padding: 0%;
	width: 100%;
 }
.NF_videoCover video {
	position:relative;
	z-index:0;
	margin-top: -16px;
}
.NF_videoOverlay {
	position:absolute;
	bottom: 3%;
	left: 5%;
	z-index:1;
}

.NF_videoOverlay h1 {
	font-size: calc(1.575rem + 5.8vw);
	color: #fff;
	text-shadow: #000000 0px 0px 28px;
}




/******************************************
/************** 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 */


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

	#NF_topNav li {
		text-align: center;
		font-size: 180%;
	}

}

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

	#NF_topNav li {
		text-align: center;
		font-size: 160%;
	}

	.NF_subPics h4  {
		font-size: calc(3.3vw);
	}


	.NF_articlePage {
		margin: 4% auto 5% auto;
		width: 90%;
		max-width: 900px;
	}

	#NF_article .NF_infoDropdown {
		clear: both;
		width: 100%;
		height: auto;
		margin: 20px auto 29px auto;
	}



	#NF_article .NF_infoDropdown .NF_infoLogo {
		float: none;
		width: 100%;
		margin-right: 0px;
	}

	#NF_article .NF_infoDropdown .NF_infoIcons {
		height: 69px;
		display: flex;
		justify-content: space-evenly;
	}

	#NF_article .NF_infoIcons .NF_iconCluster .NF_infoByte {
		display: none;
	}

	#NF_article .NF_infoIcons .NF_iconCluster .NF_infoIcon {
		height: 41px;
	}

	#NF_article .NF_infoIcons .NF_iconCluster
	 {
		margin-right: 1.5%;
		float: left;
		height: 50px;
		margin: 3% 2% 3% 0%;
	}

	#NF_article .NF_infoIcons .NF_iconCluster {
		font-size: 130%;
		font-weight: bold;
		text-transform: uppercase;

	}

	#NF_article .NF_infoAreaFull {
		max-width: 700px;
		margin-bottom: -25px;
		width: 90%;
	}


	#NF_article .NF_infoIcons .NF_iconCluster .NF_infoTitle {
		font-size: 130%;
		font-weight: bold;
		text-transform: uppercase;
		float: left;
		margin: 6% 0% 0% 0%;
		color: #bb9f;
		display: none;
	}

	#NF_article .NF_infoDropdown .NF_socials img {
		margin: 2% 6px;
		width: 43px;
	}

}

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

	#SOBtopCarousel h1 {
		display: none;
	}

	.NF_subPics .NF_text {
		font-size: calc(6.1vw);
	}

	.NF_infoPopup h2 {
		font-size: calc(9.5vw);
	}

	.NF_infoPopup li {
		margin: 7% 3% 3% 0%;
		font-size: 150%;
		font-weight: bold;
		line-height: 1.5em;
	}

	#NF_pageNavTabs .nav-item {
		width: 100%;
		text-align: center;
	}

	.NF_subPics h4  {
		font-size: calc(7.3vw);
	}

	.NF_subPics .NF_picHolder {
		height: 330px;
}

	.NF_articlePage h3 {
		margin-bottom: 3%;
	}

	.NF_articlePage	img {
			margin: 11% auto 6%;
	}

	.NF_picsCollage .NF_picHolderToo {
		height: 390px;
	}


	#NF_article img {
		width: 100%;
	}

	#NF_article .NF_hero .NF_clearCover {
		box-shadow: none;
	}

	#NF_article .NF_infoIcons .NF_iconCluster .NF_infoIcon {
		height: 57px;
	}

	#NF_article .NF_infoIcons .NF_iconCluster .NF_infoTitle {
		display: none;
	}

	#NF_article .NF_infoArea {
		margin: 4% auto 1% auto;

	}

	#NF_article .NF_infoIcons .NF_iconCluster
	{
		margin: 3% 2% 5% 0%;
	}

	.NF_conversionBar .NF_leftSide h2 {
		font-size: calc(6.1vw);
	}

	// Conversion area for phones
	.NF_conversionBar .NF_leftSide .NF_text {
		text-align: center;
		font-size: calc(6.1vw);
	}

	.NF_conversionBar .NF_rightSide {
		padding-right: 4%;
		text-align: center;
	}


	.NF_conversionBar .NF_conversionBtn {
		width: 240px;
		margin: 0% auto;
		background-color: #1a560c;
		color: #fff;
		text-transform: uppercase;
		font-family: helvetica, arial, sans-serif;
	}

	.NF_conversionBar .NF_conversionBtn#NF_nextBtn {
		background-color: #0c3656;
	}



}