@charset "utf-8";
/*--- ROOT VARIABLES ---*/
:root {
	--sonj_grey: #363636;
	--main_font: "Roboto";
	--mxWidth: 101.25em;
	--sonj_secondary: #7e7e7e;
	--footer_bg: var(--sonj_secondary);
}

/*--- FONT DECLARATIONS ---*/

@font-face {
	font-family: "Roboto";
	src: url("../fonts/Roboto-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "Roboto";
	src: url("../fonts/Roboto-Light.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: "Roboto";
	src: url("../fonts/Roboto-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: "Roboto";
	src: url("../fonts/Roboto-Bold.woff2") format("woff2");
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: "sonj_icons";
	font-style: normal;
	font-display: block;
	src: url("../fonts/sonj_icons.woff2") format("woff2"), url("../fonts/sonj_icons.ttf") format("truetype");
}

/*--- RESET ---*/

*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	min-height: 100vh;
	font-family: var(--main_font);
	line-height: 1;
}

img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
}

input, button, textarea, select {
	font: inherit;
}

a {
	text-decoration: none;
}

p {
	line-height: 1.5;
}

p, h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
	font-weight: normal;
}

button {
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

button:focus {
	outline: none;
}

address {
	font-style: normal;
}

dialog {
	border: 0;
	z-index: 4;
}

menu li {
	list-style: none;
}

/*--- RESET END ---*/


/*--- SONJ ICONS ---*/

.c_icon:hover {
	text-decoration: none;
}

.c_icon::before {
	font-family: "sonj_icons";
	font-style: normal;
	font-variant: normal;
	display: inline-block;
	text-rendering: auto;
	-moz-osx-font-smoothing: grayscale;
  	-webkit-font-smoothing: antialiased;
}

.c_icon.acc-close::before { content: "\e00c"; }
.c_icon.acc-open::before { content: "\e00d"; }
.c_icon.address::before { content: "\e015"; }
.c_icon.alert::before { content: "\e012"; }
.c_icon.calendar::before { content: "\e009"; }
.c_icon.chat::before { content: "\e006"; }
.c_icon.closex::before { content: "\e005"; }
.c_icon.doc-ex::before { content: "\e017"; }
.c_icon.doc-pdf::before { content: "\e018"; }
.c_icon.doc-word::before { content: "\e004"; }
.c_icon.download::before { content: "\e007"; }
.c_icon.edit::before { content: "\e008"; }
.c_icon.email::before { content: "\e00e"; }
.c_icon.faqs::before { content: "\e014"; }
.c_icon.fb::before { content: "\e01e"; font-size: 130%; margin-bottom: 3px; }
.c_icon.home::before { content: "\e002"; }
.c_icon.in::before { content: "\e01f"; font-size: 115%; }
.c_icon.lighthouse::before { content: "\e020"; }
.c_icon.login::before { content: "\e00a"; }
.c_icon.news::before { content: "\e013"; }
.c_icon.nj::before { content: "\e001"; }
.c_icon.nj-sm::before { content: "\e019"; }
.c_icon.n::before { content: "\e01a"; }
.c_icon.j::before { content: "\e01b"; }
.c_icon.nj-state::before { content: "\e021"; }
.c_icon.open-dd::before { content: "\e00f"; }
.c_icon.open-win::before { content: "\e00b"; }
.c_icon.phone::before { content: "\e016"; }
.c_icon.search::before { content: "\e010"; }
.c_icon.top::before { content: "\e011"; }
.c_icon.web::before { content: "\e003"; }
.c_icon.x::before { content: "\e000"; }
.c_icon.yt::before { content: "\e01d"; font-size: 120%; }

.rnd_sq {
	background: #999999;
	width: 1.6875em;
	height: 1.6875em;
	font-size: 16px;
    display: inline-flex;
    color: inherit;
    justify-content: center;
    align-items: center;
    border-radius: .25em;
	margin: 2px 0;
}

.rnd_sq.fb {
	align-items: flex-end;
}

.rnd_sq.x:hover { background-color: #1d9bf0; }
.rnd_sq.fb:hover { background-color: #3b5998; }
.rnd_sq.yt:hover { background-color: #ff0000; }
.rnd_sq.in:hover { background-color: #2867b2; }

/*--- SONJ ICONS END ---*/


/* --- SONJ HEAD --- */

#osonj {
	height: 3.125em;
	background: var(--sonj_grey);
	color: #fff;
	line-height: 1em;
}

#osonj a, #osonj a:hover {
	color: inherit;
	display:inline-block;
}

#osonj a {
	text-decoration: none;
}

#osonj a:hover {
	text-decoration: underline;
}

#osonj .seal {
	font-size: .75em;
	text-transform: uppercase;
}

#osonj .wrap {
	display: flex;
    justify-content: space-between;
	align-items: center;
	max-width: var(--mxWidth);
	height: 100%;
	position: relative;
}

.seal a::before {
	content:"";
	display: inline-block;
	width: 2.66em;
	height: 2.66em;
	vertical-align: middle;
	background: url("../images/seal_nj.svg") no-repeat center;
	background-size: 92% auto;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,.7);
	margin-right: .2em;
}

#state_info {
	text-align: right;
}

#state_info > a {
	font-size: .9375em;
	margin-bottom: .2em;
}

#si_menu {
	display: flex;
	justify-content: flex-end;
}

#si_menu li {
	padding: 0 .438em;
	position: relative;
}

#si_menu li:last-child {
	padding-right:0;
}

#si_menu li::after {
	content:"";
	position: absolute;
	right:0;
	top:0;
	bottom:0;
	margin: auto 0;
	width: 1px;
	height: 12px;
	background: #9b9b9b;
}

#si_menu li:last-child::after {
	content: none;
}

#si_menu a, #si_menu button {
	font-size: .875em;
	padding: 0 .5em;
}

#si_menu #btn_search {
	padding-right: 0;
}

#osonj a:hover, #osonj button:hover {
	text-decoration: underline;
}

#state_info .search.marg {
	display: inline-block;
	font-size: .928em;
	min-height: 1em;
}

#state_info dialog {
	background: var(--sonj_grey);
	top: 3.125em;
    left: auto;
	width: 31.25em;
	max-width: 100%;
	padding: 1.2em;
	color: #fff;
	text-align: left;
	opacity: 0;
	display: block;
	transform: scale(.8);
	transform-origin: right top;
	transition: transform .3s allow-discrete, opacity .3s allow-discrete;
	pointer-events: none;
}

#state_info dialog[open] {
	opacity: 1;
	transform: scale(1);
	pointer-events: all;
}

#state_info dialog p {
	font-size: .875em;
	margin-bottom: 0;
}

.close_dlg {
	text-transform: uppercase;
	margin-top: .8em;
}

.input_wrap {
	display: flex;
	border: 1px solid #b1b9bc;
	border-radius: .25em;
	overflow: hidden;
}

#osonj .btn {
	display: flex;
    width: 2.5em;
    align-items: center;
    justify-content: center;
    background: #e2e6e9;
    color: var(--sonj_grey);
	border-left: 1px solid #b1b9bc;
	padding:0;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.ifield, #google_translate_element select {
	flex-grow: 1;
	height: 2.25em;
	padding: 0 .5em;
	border: 0;
}

/*style Google translate injection */
#google_translate_element { margin-bottom: .7em; }
#google_translate_element select {
	width: 100%;
	border: 1px solid #b1b9bc;
	border-radius: .25em;
	font-size: 1rem;
}
.skiptranslate.goog-te-gadget { font-size: 0; }
.skiptranslate > span { display: none; }

#si_menu .hlight > a, #si_menu .hlight > button {
    background: #fff;
    color: #000;
    font-weight: 500;
    border-radius: 2px;
}

#si_menu .hlight::after {
    content:none;
}


/* --- SONJ HEAD END --- */


/* --- SONJ FOOTER --- */

#footer {
	position: sticky;
    top: 100vh;
	color:#fff;
	line-height: 1em;
}

#sonj_foot {
	background: var(--sonj_grey);
	padding: .9375em 0
}

#footer nav {
	background: var(--footer_bg);
	padding: 1.0625em 0;
}

#footer .wrap {
	max-width: var(--mxWidth);
	display: grid;
    grid-template-columns: 1fr 18.75em;
    grid-template-rows: auto 1fr;
	grid-column-gap: 2em;
}

#statewide_links {
	grid-column: 2;
    grid-row: 1 / -1;
	position: relative;
}

#footer h3, #site_links a {
	border-bottom: 1px solid rgba(255,255,255,.75);
	font-weight: 500;
}

#footer h3 {
	font-size: 1.25em;
	padding: .7em 0;
	height: max-content;
	border-bottom-width: 2px;
	line-height: inherit;
	margin-bottom: 0;
}

#site_links {
	column-width: 25.5em;
	column-gap: 2em;
}

#site_links li {
	padding-top:.875em;
}

.flinks a, .flinks a:hover {
    display: block;
	color: inherit;
}

#site_links a {
	padding: .313em 0;
}

#site_links a:hover {
	background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,.15) 25%);
	border-bottom-color: #fff;
}

#statewide_links .flinks {
	padding: .8125em 0 1.375em;
	font-weight: 500;
}

#statewide_links li, #statewide_links a {
	padding: 1px 0;
	color: inherit;
}

#statewide_links a:hover {
	text-decoration: underline;
}

#statewide_links .nj::before {
	position: absolute;
	pointer-events: none;
	right:0;
	opacity: .3;
	font-size: 6.4em;
	margin-top: .2rem;
	display: flex;
    height: .98em;
    align-items: center;
}

#sonj_foot .wrap {
	grid-template-columns: auto 1fr;
	grid-template-rows: 1fr auto;
	min-height: 9.375em;
}

#sonj_foot address {
	text-align: right;
}

.fullw {
	grid-column: 1/-1;
}

.alignR {
	text-align: right;
}

.poweredby {
	display: inline-block;
}

.social_foot {
	display: flex;
	justify-content: flex-end;
	color: var(--sonj_grey);
}

.social_foot li {
	margin-left: .3125em;
}

.social_foot .c_icon.x::before {
	text-shadow: 1px 0px 0 var(--sonj_grey);
}

.social_foot .rnd_sq:hover {
	color: #fff;
	background-color: inherit;
}

.foot_logos {
	display: flex;
    flex-direction: column;
}

.foot_logos a {
	margin-bottom: 1em;
	width: max-content;
}

.foot_logos a:hover, .poweredby:hover {
	filter: drop-shadow(2px .25em .375em #000);
}

/* --- SONJ FOOTER END --- */


/* --- COMMON  --- */

.wrap {
	margin-left: auto;
	margin-right: auto;
}

/* --- COMMON END --- */


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

/* Max width wrap */
@media screen and (max-width: 101.25em){
	body .wrap { padding-left: 3%; padding-right: 3%; }
	#site_links { column-width: 17em; }
}

/* 800px */
@media  screen and (max-width: 50em) {
	#osonj .mobile-hide { display: none; }
	#si_menu { padding-bottom: .3em; }
	
	#footer nav .wrap { display: block; }
	#statewide_links { margin-top: 1.7em; }
	#site_links { column-width: 18.75em; column-gap: 1.4em; }
	#statewide_links .nj::before { font-size: 10em; right: 25%;  }
}

/* 480px */
@media  screen and (max-width: 30em) {
	#osonj { height: auto; padding: .5em 0;  }
	#osonj .wrap, #sonj_foot .wrap { display: block; }
	#si_menu { justify-content: flex-end; padding-bottom: 0; }
	#state_info dialog { top: 3.5em; }
	
	#statewide_links .nj::before { font-size: 24vw; right: 0;  }
	.foot_logos { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 2vw;}
	#sonj_foot .fullw { padding-top: 5vw; }
}