@import url("https://nj.gov/nj/design/css/reset.css");
@import url("https://nj.gov/nj/design/css/normalize.css");
@import "bootstrap.min.css";
@import "sonj-components.css";



:root {
  --blue: #1636a6;
  --white: #ffffff;
  --blue-dark: #133E87;
  --black: #212529;
  --brown: #c26e21;
  --bg: #f7f5f0;
  --light-gray: #efeeeb;
	--grey: #78787d;
	--light-brown: #d8c9ab;
	--dark-brown: #8a581a;
}


html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

#subBlog article {
  font-size: 102%;
  -webkit-text-size-adjust: 102%;
  -ms-text-size-adjust: 102%;
}

.h2title {
  color: #006699;
}

#site-name h2 {
	font-size: 2.5em;
	font-weight: bold;
}

#site-name h2.text-blue {
  color: var(--blue-dark);
}

h3.page-title {
  font-size: 2.3rem;
  color: var(--blue-dark);
}

h3.sec-title {
  font-size: 2rem;
  font-weight: bold;
  color: var(--blue-dark);
}

p {
	color: #000;
	font-size: 1.125em;
}
/*
#cardContent a:link .card-title,
#cardContent h4.card-title {
  color: var(--blue-dark);
  font-size: 1.3em;
  font-weight: 400
}

/* Site Title Department - Division - Program */

#site-name {
  margin-bottom: 2rem;
}

.dept-logo {
  width: auto;
  height: 86;
  margin-bottom: -1rem;
}

.oe-logo {
  max-width: 166px;
  width: 166px;
  margin-bottom: -1rem;
}

.fas, .sonj-nav .navbar-nav .fa-home {
	color: var(--grey);
}

.fas, .sonj-nav .navbar-nav .nav-link:hover .fa-home {
	color: var(--brown);
}


/*Navigation************************************************************************************ */
.sonj-nav {
  font-size: 1rem;
  line-height: normal;
  border-bottom: 1px solid var(--grey);
	background: inherit;
}

.sonj-nav .navbar-brand {
  color: #fff;
}

.sonj-nav .navbar-nav .nav-link {
  color: var(--black);
  /*text-transform: uppercase;*/
	font-size: .9375em;
	font-weight: bold;
}

.navbar {
	padding-bottom: 0;
}

.navbar-nav {
	width: 100%;
    justify-content: space-between;
    max-width: 64em;
}

.navbar-nav .nav-link {
  position: relative;

}

ul.navbar-nav>li.nav-item>a.nav-link,
ul.navbar-nav>li.nav-item>a.active {

  color: var(--black);
  height: 100%
}

.navbar-dark .navbar-nav .nav-item a.active,
.navbar-dark .navbar-nav .nav-item a.active:visited,
.navbar-dark .navbar-nav .nav-item a.nav-link:focus {
  border-bottom: 5px solid var(--dark-brown);
  color: var(--black) !important;
}

.navbar-dark .navbar-nav .nav-item a.nav-link:hover {
	border-color: var(--brown);
	color: #000;
}

.osw .nav-link {
  border-bottom: 5px solid transparent;
}

.osw .show>.nav-link {
  background: #ffffff;
  border-bottom: 5px solid var(--brown);
}

*/.navbar-nav .nav-link::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--blue-dark) !important;
  height: .333em;
  transform: scaleY(0);
  transition: transform .3s;
  transform-origin: center bottom;
  border: 0;
}

.navbar-nav .nav-link.active::before {
  background: #669700;
}

.navbar-nav .nav-link.active::before,
.navbar-nav .nav-link:hover::before {
  transform: scaleY(1);
}*/

.breadcrumb {

  background-color: var(--light-gray:);
}
.breadcrumb-item a:link{ color: var(--blue-dark);}
.breadcrumb-item br {
  display: none;
}

.breadcrumb-item.active {
  color: var(--blue-dark);
  /*set to provide sufficient contract in default usage*/
}
.breadcrumb-item::before {
  display: inline-block;
  padding-right: .5rem;
  padding-left: .5rem;
  color: #6c757d;
  content: "";}
.breadcrumb-item .first-child::before { content: "/";}
ol li.last-item::after{  content: ""!important;}
li.last-item::before{  content: ""!important;}
ol.breadcrumb .page_title::before{  content: ""!important;}
.statewide a {
    display: inline-block;
    padding: .17em 0;
}

/* ------------------------------------- Footer -------------------------------------*/
.footer.site,
.site-footer {
  /*background: #0099cc;*/
  background: var(--blue-dark);

}

.digital-nj {max-width:25%}
/*------------------------------------- Main ---------------------------------------*/

.fa-solid, .fab {
	color: var(--dark-brown);
}

.lead {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.5em;
  padding-top: 2rem;
}

#hero .figure {
  display: block;
  padding: 0 3rem 0 0;
}

#hero a:link.btn-blue {
	text-transform: none;
}

.shadow {
  box-shadow: 0px 18px 50.1px 6.9px rgba(204, 204, 204, 0.20) !important;
  -webkit-box-shadow: 0px 18px 49.1px 6.9px rgba(204, 204, 204, 0.20) !important;
  -moz-box-shadow: 0px 18px 49.1px 6.9px rgba(204, 204, 204, 0.20) !important;
}

.alert {
  background-color: var(--bg)
}

ul.check li {
  padding: 0;
  margin: 0;
  list-style: none;
}

ul.check {
  margin: 2em 0;
}

ul.check li {
  margin: 1em;
  margin-left: 3em;
}

ul.check li:before {
  content: '✔';
  font-family: 'FontAwesome';
  float: left;
  margin-left: -1.5em;
  color: var(--brown);
}

.link {
  font-size: 0.45em;
}
/* Cards Template */


#members .card:hover {

 box-shadow: 0px 18px 50.1px 6.9px rgba(204, 204, 204, 0.35);
border: 1px solid;
}

#cardsTemplate .image-cards-section .card-body .card-name {
  color: var(--blue-dark);
}

.soliver-video-cards .font-icon svg {
  height: 5rem;
  color: var(--blue-dark);
}
#cardContent .list-inline {
  display: block;
}

#cardContent .list-inline li {
  display: inline-block;
}

#cardContent .list-inline li.list-inline-item:before {
  content: '#8226 ';
  margin: 0 10px;
}
#members .card-body .card-department {font-size: .845em;line-height: normal;}
#members  .card-body .card-title {font-weight: 500;font-size: 1em;}
#members .card-body .card-name {
font-size: 1.2em;
  color: #203AA6;
  font-weight: 500;
}
.  
.btn-link,
a:link.btn-blue {
  padding-left: 1.2rem;
  padding-right: 1.2rem;
  text-decoration: none;
}

.btn-link:hover,
a.btn-blue:hover {
  padding-left: 1.2rem;
  padding-right: 1.2rem;
  text-decoration: none;
  background: var(--white);
  color: var(--blue-dark);
  border: 1px solid var(--brown);
}

.btn-link:hover .fa-solid, .btn-link:hover .fab {
	color: var(--brown);
}

a.a-link {
  text-transform: uppercase;
  color: #fff;
}

a:hover {
  color: var(--blue-dark);
  text-decoration: underline;
}

.training td {
  padding: .75rem;
  vertical-align: top;
  border-top: 1px solid #37863C;

}

.card-icon {
  padding: 1.3rem auto
}

.card-icon i {
  font-size: 2.7rem;
}

#mainContent .col-xl-8 a:link,
#mainContent .col-xl-8,
#content a:link,
#sectionContent a:link {
  color: #006699;
  text-decoration: underline !important;
}

#mainContent .col-xl-8 a:hover,
#content a:link,
#sectionContent a:link {
  color: var(--blue-dark);
  text-decoration: underline !important;
}

.bg-color {
	background: #f3f3f3;
}

/*------- Right Content------------------------------------------*/
.figure {
  display: block;
}

#rightContent .borderTop {
  border-top: 5px solid var(--dark-brown);
}
#rightContent .card-text, #rightContent .card-text a:link{
color: #000;
  font-size: 1em;
}
#rightContent  a:link{
color: var(--blue-dark);
  font-size: 1em!important;
}
.figure-img {
  margin-bottom: 1rem;

}

#rightContent.figcaption h5 {
  font-size: 1.1em;
  font-weight: 300;
}

#rightContent .figure-img:hover {
  border: 1px solid rgba(20, 27, 201, .09);

  box-shadow: 0px 18px 50.1px 6.9px rgba(204, 204, 204, 0.35) !important;
  -webkit-box-shadow: 0px 18px 49.1px 6.9px rgba(204, 204, 204, 0.35) !important;
  -moz-box-shadow: 0px 18px 49.1px 6.9px rgba(204, 204, 204, 0.35) !important;

}



#rightContent a.btn,
#rightContent .card-title a:link {
  text-decoration: none !important;
}

.bg-blue-dark-btn a:link {
  color: #fff !important;
}

.btn-white {
  text-transform: uppercase;
  color: #006699;
  background-color: #fff;
  border-color: #fff;
}

.btn-white:hover {
  text-transform: uppercase;
  color: #0f4060;
  background-color: #fff;
  border-color: #0f4060;
  text-decoration: underline;
}

.btn-blue {
  padding-left: 1.2rem;
  padding-right: 1.2rem;
  text-decoration: none;
  background: var(--blue-dark);
  color: var(--white);
  border: 1px solid var(--blue-dark)
}

a.btn-blue {
  padding-left: 1.2rem;
  padding-right: 1.2rem;
  text-decoration: none;
  background: var(--blue-dark);
  color: var(--white) !important;
  border: 1px solid var(--blue-dark)
}

a.btn-blue:hover {
  padding-left: 1.2rem;
  padding-right: 1.2rem;
  text-decoration: none;
  background: var(--white);
  color: var(--blue-dark) !important;
  border: 1px solid var(--blue-dark)
}

.btn-blue-lang {
  color: #fff;
  background-color: #00679c;
  border-color: #00679c;
  font-weight: 600;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.btn-blue-lang:hover {
  text-transform: uppercase;
  color: #fff;
  background-color: #006699;
  border-color: #00679c;
  font-weight: 600;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.btn-blue:hover {
  color: #fff;
  background-color: #006699;
  border-color: #006699;
  text-decoration: underline;
}

.border-blue-dark {
  border-left: 7px solid #006699;
}

.border-dark {
  border-right: 1px solid #006699;
}

.border-btm-dark {
  border-bottom: 7px solid #006699;
}

/* ------------------------------  Ribbons -------------------------*/
.card-past::after {
    position: absolute;
   top: 1rem;
    left: 0px;
 
    padding-left: 1rem;
    width: 8rem;
    /*background:#297BBD;*/
      background:var(--dark-brown);
    color: white;
    text-align: left;
}
.card-new::after{
    position: absolute;
   top: 1rem;
    left: 0px;
 
    padding-left: 1rem;
   padding-right: 1rem;
    min-width: 11rem;
      background:var(--brown)!important;
    color: white;
    text-align: left;
}
        

.card-new::after{content:'Upcoming Event';} 
.card-past::after{content:'Past Event';} 
/* --------------------------- Home --------------------------*/

h4.card-title {
	font-weight: 400;
	color: var(--blue-dark);
}
.card-new h4.card-title, .card-past h4.card-title {text-decoration:underline;}
#CardContent h4 {
  font-size: 1.3rem;
margin-left:auto;
margin-right:auto
}
#subOEnewsletters #CardContent h4 { font-size: 1.1rem;
margin-left:auto;
margin-right:auto;}
#News .card {border-top: .625em solid var(--dark-brown);
border-left: 1px solid #dee2e6 !important;
border-right: 1px solid #dee2e6 !important;
border-bottom: 1px solid #dee2e6 !important;

}
.border-blue-dark {
  border-left: 7px solid #006699;
}
#News .card h4 {
  margin-top: 0em;
font-size:1.2rem!important;
}
#News .card p {
  color: #000;
  font-size: 1em;
}
#News .btn-secondary  {
	background-color: var(--dark-brown);
}               
.card-release::after, .card-news::after, .card-OpEd::after,.card-new::after {
    position: absolute;
    top: 1rem;
    left: 0px;
 
    padding-left: 1rem;
    width: 8rem;
    background:#37863C;
    color: white;
    text-align: left;
}
#spotlight .spots {
  background-size: cover;
  background-repeat: no-repeat;
}

.card-header {
	background: var(--dark-brown);
}

.card-title a {
  margin: 0;
  color: var(--blue-dark);

}

.card-header > .card-title {
	color: #fff;
}

.card-title h5 {
  font-size: 1.1em;
}

#tcs .card-text {
  line-height: normal;
}

div.hr {

  background: #00679c;
}

div.hr hr {
  display: none;
}

.list-group.list-group-horizontal-md {
  display: flex;
  flex-direction: row;
}

.list-group.list-group-horizontal-md .list-group-item {
  margin-bottom: 0;
  margin-right: 0;
  border-right-width: 0;
  border: none;
  background-color: transparent !important;
}

/*-- ANIMATIONS / TRANSITIONS START --*/
.osw .nav-link.active,
.osw .nav-link:hover,
.osw .nav-link:focus {
  border-color: transparent;
	background: inherit;
}


.tpc_icon {
  animation: fade-in .4s .1s backwards;
}

.row .spots:nth-child(2) .tpc_icon {
  animation-delay: .2s;
}

.row .spots:nth-child(3) .tpc_icon {
  animation-delay: .3s;
}

.overlay {
	background: rgba(245,245,245,.9);
}

/*-------------------------ACCORDION--------------------------------------------- */

#accordion .dddaccHeader,
#accordionTab .dddaccHeader {
  background-color: #ffffff !important;
  color: #000000;
  border: 1px solid #e9ecef !important;
  border-left: 0 !important;
}

#accordion h4 {
  font-size: 1.07em;
}

.colorgreen {
  color: var(--green) !important;
}

.py-10 {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

.cards-component-link {
  display: block;
}

.cards-component-link:hover {
  background-color: #ffffff !important;
  color: var(--blue) !important;
}

.border-blue {
  border: 2px solid #297BBD;
}

#accordion .card,
#accordionTab .card {
  background-color: #ffffff !important;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  padding-left: 8px;
}

#accordion .card .card-body,
#accordionTab .card .card-body {
  background-color: #ffffff !important;
  border-bottom: 1px solid #e9ecef;
  border-right: 1px solid #e9ecef;
  border-bottom-right-radius: 6px;
}

#accordion .dddacc a,
#accordionTab .dddacc a {
  text-decoration: none !important;
}

#accordion .content-col a:link {
  text-decoration: underline !important;
}

#accordion a.collapsed {
  border-left: 7px solid #669700;

}

#accordion a:not(.collapsed) {
  border-left: 7px solid #669700;

}


#accordion a.accordianDDDAnc:hover {
  border-left: 7px solid #2174b7 !important;
}

#accordion .dddacc i,
#accordionTab .dddacc i {
  font-weight: bold
}

#accordion a.collapsed i {
  color: #008546;
}

#accordion a:not(.collapsed) .card-header i {
  color: var(--blue);
}

#accordion .dddacc .collapsed .fa-plus-circle,
#accordionTab .dddacc .collapsed .fa-plus-circle,
#accordion .dddacc .collapsed .fa-chevron-down,
#accordionTab .dddacc .collapsed .fa-chevron-down {
  display: block;
}

#accordion .dddacc .collapsed .fa-minus-circle,
#accordionTab .dddacc .collapsed .fa-minus-circle,
#accordion .dddacc .collapsed .fa-chevron-up,
#accordionTab .dddacc .collapsed .fa-chevron-up {
  display: none;
}

#accordion .dddacc .fa-plus-circle,
#accordionTab .dddacc .fa-plus-circle,
#accordionTab .dddacc .fa-chevron-down,
#accordion .dddacc .fa-chevron-down {
  display: block;
}

#accordion .dddacc .card-body .content-col a {
  border-left: 0 none !important;
  margin-bottom: 1.4rem;
  text-decoration: none;
}

#accordion a:not(.collapsed) {
  border-left-color: #2174b7;
}



/* ------------------------ACCORDION END ---------------------------------------- */

#faqContent .stretched-link:hover {
  box-shadow: 0px 18px 50.1px 6.9px rgba(204, 204, 204, 0.35);
}


@keyframes fade-in {
  from {
    opacity: 0;
    transform: scale(0);
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

/*-- ANIMATIONS / TRANSITIONS END --*/


@media (max-width: 575.98px) {
  .border-dark {
    border-right: 0 none;
  }

  .list-group.list-group-horizontal-md {
    display: flex;
    flex-direction: column;
  }
	
	.btn {
		white-space: wrap;
	}
	header.sonj {
		margin-right: 0;
		margin-left: 0;
	}
	
	#home section.py-5 > .row.col-lg-10.mx-auto {
		flex-wrap: wrap-reverse;
	}
	
	img.w-100 { margin-bottom: 10%; }
	#home .card-body.p-5.h-100 { padding-left: 0 !important; padding-right: 0 !important; }
}

/* // Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
  .border-dark {
    border-right: 0 none;
  }

  .list-group.list-group-horizontal-md {
    display: flex;
    flex-direction: column;
  }
  #hero .figure {
  display: block;
  padding: 0;
}
a.nav-link br {display:none}
.text-hero {
  font-size: 1rem;
  font-weight: 400;
  line-height: normal;
  padding-top: 1rem;
}
h3.page-title {
  font-size: 1.55rem;
  color: var(--blue-dark);
}

h3.sec-title {
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--blue-dark);
}
h4.card-title {
  font-weight: 400;
  color: var(--blue-dark);
    font-size: 1.2rem;
}
}

@media screen and (min-width: 768px) {
  #ts-iframe {
    min-width: 768px;
  }
}

@media screen and (min-width: 992px) {
  #ts-iframe {
    min-width: 992px;
  }
a.nav-link br {display:none}
}

@media screen and (min-width: 1200px) {
  #ts-iframe {
    min-width: 1200px;
  }
}

@media screen and (max-width: 1200px) {
  .carousel-indicators {
    display: none;
  }
}



#sectionContent .card > .btn-link {
	text-decoration: none !important;
	white-space: normal;
}

.home_icon {
	color: var(--dark-brown);
}

/* Other Resources */

#artwork {
 background: #282828;
}

#artwork img {
 max-height: 43.25em;
 margin: 0 auto;
}

.carousel-control-prev, carousel-control-next {
  color: transparent;
}

.btn-link:focus {
  outline: 2px solid;
}