@font-face {
  font-family: "Johnson Display Regular";
  font-style: normal;
  font-weight: 400;
  src: local(""), url("../fonts/JohnsonDisplay-Regular.woff") format("woff"), url("../fonts/JohnsonDisplay-Regular.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Johnson Display Bold";
  font-style: normal;
  font-weight: 700;
  src: local(""), url("../fonts/JohnsonDisplay-Bold.woff") format("woff"), url("../fonts/JohnsonDisplay-Bold.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Johnson Text Regular";
  font-style: normal;
  font-weight: 400;
  src: local(""), url("../fonts/JohnsonText-Regular.woff") format("woff"), url("../fonts/JohnsonText-Regular.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Johnson Text Light";
  font-style: normal;
  font-weight: 400;
  src: local(""), url("../fonts/JohnsonText-Light.woff") format("woff"), url("../fonts/JohnsonText-Light.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Johnson Text Bold";
  font-style: normal;
  font-weight: 700;
  src: local(""), url("../fonts/JohnsonText-Bold.woff") format("woff"), url("../fonts/JohnsonText-Bold.woff2") format("woff2");
  font-display: swap;
}
body {
  font-family: "Johnson Text Light", Helvetica, sans-serif !important;
  font-size: 18px;
  color: #000;
  background-color: #f4f3f1;
}

a {
  color: #eb1700;
}
a:hover {
  color: #000;
}

i {
  color: #eb1700;
}

p {
  color: #000;
}
p a {
  color: #eb1700;
}
p a:hover {
  color: #b81200;
}

b {
  font-family: "Johnson Text Bold", Helvetica, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Johnson Display Bold", Helvetica, sans-serif !important;
}
h1 b, h2 b, h3 b, h4 b, h5 b, h6 b {
  font-family: "Johnson Display Bold", Helvetica, sans-serif !important;
}

h3, .benefits-table h3 {
  color: #eb1700;
}

h4 {
  color: #000;
}

ul {
  color: #5e5047;
}

.heading--large {
  font-size: 4rem;
}

.deck {
  font-family: "Johnson Text Regular", Helvetica, sans-serif;
  color: #83786f;
}

.number-circle-white {
  border: 3px solid #eb1700;
  color: #eb1700;
}

.fa-external-link {
  color: #eb1700;
}

.callout-pink {
  background-color: #d6d1cb;
}
.callout-pink * {
  color: #000;
}

.callout-red {
  background-color: #eb1700 !important;
}
.callout-red p {
  color: #fff;
}
.callout-red a.link, .callout-red i {
  color: #fff;
}

.full-width-callout {
  background-color: #e9e8e4;
}

.darkgreybg {
  background-color: #e9e8e4;
}

.deck {
  line-height: 1.3em;
}

.no-wrap {
  white-space: nowrap;
}

/* IMAGES AND ICONS */
.screenshot {
  border: 1px solid #f4f3f1;
}

.jnj-red-text {
  color: #eb1700 !important;
}

.jnj-blue-text {
  color: #eb1700 !important;
}

.jnj-magenta-text {
  color: #000 !important;
}

.dark-text {
  color: #000 !important;
}

/* Coloured elements */
.jnj-red {
  background-color: #eb1700;
}

.jnj-blue {
  background-color: #eb1700;
}

.jnj-magenta {
  background-color: #000;
}

.jnj-exlightgray {
  background-color: #e9e8e4;
}

.magenta-divider {
  border-bottom: 1px solid #d6d1cb;
}

.panel-jnj-magenta .panel-heading a {
  color: #000;
}
.panel-jnj-magenta .panel-heading .panel-title a:before {
  color: #eb1700;
}
.panel-jnj-magenta .panel-default {
  border-color: #c5beb6;
}

.tooltip-inner,
.arrow {
  background-color: #f4f3f1;
}

.personas .name {
  color: #000;
}
.personas .jnj-gray--1 {
  background-color: #fff;
}
.personas .jnj-gray--2 {
  background-color: #e9e8e4;
}
.personas .jnj-gray--3 {
  background-color: #d6d1cb;
}

.navbar #support {
  background: #d6d1cb;
}
.navbar .container {
  background-color: #fff;
}

.navbar-inverse .btn {
  border: 4px solid #d6d1cb;
}
.navbar-inverse .btn:hover {
  background-color: white;
  border: 4px solid #eb1700;
  color: #eb1700;
}
.navbar-inverse .navbar-nav li a {
  color: #000;
  padding: 0.4rem 0 0.8rem 0;
  border-bottom: 1px solid #d6d1cb;
}
.navbar-inverse .navbar-nav li a:hover {
  color: #eb1700;
}
.navbar-inverse .navbar-nav .active a {
  font-family: "Johnson Text Regular", Helvetica, sans-serif;
  color: #eb1700;
}
.navbar-inverse .navbar-nav .active a:focus, .navbar-inverse .navbar-nav .active a:hover {
  color: #eb1700;
}

.navbar-fixed-left, .navbar-fixed-right {
  background-color: #d6d1cb;
}

a.sidebar-btn {
  background: #eb1700;
  border: 4px solid #eb1700;
}
a.sidebar-btn:hover {
  border: 4px solid #eb1700;
  color: #eb1700;
  font-family: "Johnson Text Regular", Helvetica, sans-serif;
}

.page-navigation table a {
  color: #eb1700;
}
.page-navigation table a:hover {
  color: #b81200;
}

.navbar-toggle {
  border-color: #eb1700 !important;
}
.navbar-toggle .icon-bar {
  background-color: #eb1700 !important;
}
.navbar-toggle:focus, .navbar-toggle:hover {
  background-color: #eb1700 !important;
}
.navbar-toggle:focus .icon-bar, .navbar-toggle:hover .icon-bar {
  background-color: #fff !important;
}

.nav-tabs li.active.jnj-red {
  background-color: #eb1700;
}
.nav-tabs li.active.jnj-magenta {
  background-color: #c5beb6;
}
.nav-tabs li.active.jnj-blue {
  background-color: #eb1700;
}

.bluespan-area {
  background-color: #e9e8e4;
}
.bluespan-area p {
  color: #000;
}

.red-cta {
  background-color: #eb1700 !important;
}
.red-cta p, .red-cta i, .red-cta h2 {
  color: #fff !important;
}

.callout {
  background-color: #d6d1cb;
}
.callout-pointer::after {
  border-bottom: 20px solid #d6d1cb;
  border-right: 18px solid transparent;
  border-left: 17px solid transparent;
}
.callout a.link {
  color: #000 !important;
}
.callout a.link:hover {
  color: #eb1700 !important;
}
.callout i {
  color: #000;
}

.next-page {
  font-family: "Johnson Text Regular", Helvetica, sans-serif;
  line-height: 1.2em;
}
.next-page:after {
  content: "\f178";
  font-family: "Font Awesome 5 Pro";
  font-size: 1.8rem;
  color: white;
  background: #eb1700;
  padding: 1.1rem 1.2rem;
  margin-left: 0.6em;
  border-radius: 40px;
  font-weight: 100;
  transition: background 0.5s, border 0.5s, color 0.5s;
}

.icons-in-row span {
  color: #000;
}

.number-circle {
  border: 3px solid #eb1700;
  color: #eb1700;
}

.icon-28 {
  margin-top: -0.35em;
  max-width: 28px;
  margin-right: 0.5em;
  height: auto;
}

.tip {
  color: #000;
}
.tip-icon {
  color: #000;
}
.tip:hover {
  color: #b81200;
}

.tooltip-inner {
  background-color: #e9e8e4;
}
.tooltip-inner h3 {
  font-size: 1.2rem;
  color: #000;
  margin-bottom: 0.5rem;
}

#footer {
  background-color: #d6d1cb;
}

#benefits-re-enrollment h5 {
  text-transform: none;
  font-size: 1rem;
}

.about-the-plan .panel-heading {
  background-color: #5e5047 !important;
}
.about-the-plan .panel-default {
  border-bottom: 1px solid #c5beb6;
}

.panel-body {
  background-color: #f4f3f1;
}

@media (max-width: 1024px) {
  body {
    font-size: 16px;
  }
}
#home-page .hero {
  background-size: cover !important;
  padding-right: 350px !important;
}
#home-page .padding {
  padding: 2.5em;
}
#home-page h1 {
  color: #000;
}
#home-page .nav-tabs li {
  font-family: "Johnson Display Bold", Helvetica, sans-serif;
  margin-bottom: 0;
}
#home-page .nav-tabs li a {
  color: #000 !important;
}
#home-page .nav-tabs li a:after {
  font-family: "Font Awesome 5 Pro";
  color: #000 !important;
}
#home-page .nav-tabs li.active {
  background: #fff;
}
#home-page .nav-tabs li.active a {
  color: #000 !important;
}
#home-page .tab-pane {
  padding: 1.5em;
  background-color: #fff;
}
#home-page .tab-pane p {
  color: #000;
  font-size: large;
  font-family: "Johnson Text Light", Helvetica, sans-serif;
}
#home-page .nav-tabs > li.active > a, #home-page .nav-tabs > li.active > a:focus, #home-page .nav-tabs > li.active > a:hover {
  background-color: unset;
  border: unset;
}
#home-page .nav > li > a:hover {
  background-color: unset !important;
}
#home-page .jnj-gray--1 {
  background-color: #f4f3f1;
  border: 1px solid #d6d1cb;
}
#home-page .jnj-gray--1 a {
  color: #000 !important;
}
#home-page .jnj-gray--2 {
  background-color: #e9e8e4;
  border: 1px solid #d6d1cb;
}
#home-page .jnj-gray--2 a {
  color: #000 !important;
}
#home-page .jnj-gray--3 {
  background-color: #d6d1cb;
  border: 1px solid #d6d1cb;
}
#home-page .jnj-gray--3 a {
  color: #000 !important;
}

#flexible-benefit-options-page .panel-heading {
  background-color: #f4f3f1;
}

table.choosing-the-right-options {
  background-color: #f4f3f1;
  padding: 1rem 1.8em;
}
table.choosing-the-right-options h3 {
  color: #000;
}

.choosing-the-right-options .panel-heading {
  background-color: #5e5047;
}

#choosing-the-right-options-page .panel-default > .panel-heading {
  background-color: #e9e8e4;
  padding: 1.5em;
}
#choosing-the-right-options-page .panel-default > .panel-heading a {
  color: #000;
}
#choosing-the-right-options-page .panel-default > .panel-heading a:hover {
  color: #5e5047;
}
#choosing-the-right-options-page .panel-default > .panel-heading .panel-title a.collapsed:before {
  color: #eb1700;
}
#choosing-the-right-options-page .panel-body {
  padding: 2em 0 !important;
}

.ashley .panel-heading {
  background-color: #fff !important;
}

.scott .panel-heading {
  background-color: #e9e8e4 !important;
}

.mary .panel-heading {
  background-color: #d6d1cb !important;
}

#benefits-shared-responsibility-page .panel-default {
  border-bottom: 1px solid #d6d1cb;
}
#benefits-shared-responsibility-page .panel-default .panel-heading {
  background-color: #f4f3f1;
}
#benefits-shared-responsibility-page .panel-default h3.panel-title a {
  color: #000;
}
#benefits-shared-responsibility-page .panel-default h3.panel-title a:before {
  color: #eb1700;
}

#questions-page h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}