@charset "utf-8";
/* CSS Document */

:root {
  --primary-color: #003046;
  --secondary-color: #FFF;
  --body-background: #000;
  --light-background: #FFF;
  --dark-background: #C7C0BB;
  --link-color: #000;
  --dark-blue-color: #003046;
}

body {
    font-family: var(--base-font-family);
    font-size: 1rem;
}

.drop-menu-code {
  display: none;
}

.slide-menu-code {
  display: flex;
}

h1 {
    color: var(--primary-color);
    font-family: var(--base-font-family);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 2rem;
}

h2, h3, h4, h5, h6 {
    color: var(--primary-color);
    font-family: var(--base-font-family);
}

h2 {
    font-size: 1.25rem;
}

.nonBold h2 {
    font-weight: 400;
}

p {
    font-family: var(--base-font-family);
    font-size: var(--base-paragraph-size);
    font-weight: 500;
    line-height: 1.75rem;
    color: var(--body-background);
}

a {
    /* color: var(--link-colors); */
    text-decoration: underline;
}

.quickLinks a.standardLink:focus {
    color: #fff;
}

.quickLinks a.standardLink:hover {
    color: #003046;
}

/* a:focus, a:hover {
    color: var(--link-colors);
    opacity: 0.7;
} */

table tr th {
    background: #003046;
}

table caption {
    display: none;
}

.hidden {
    display: none;
}

.quickLinks { padding: 0; }
.quickLinks .row { justify-content: flex-start; }

.quickLinks a {
    padding: 1.0125rem 0.8125rem;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1rem;
    font-family: var(--base-font-family);
}

.quickLinks a:visited
{
    color: #fff;
    text-decoration: none;
}

.quickLinks a:hover, .quickLinks a.selected {
    background-color: #fff;
    color: #003046;
    padding: 1.0125rem 0.8125rem;
    text-decoration: none;
    opacity: 1;
}

.linkNest, .linkNest:focus {
    background-color: #003046;
    border:none;
    color:#fff;
    font-weight: bold;
    box-shadow: none;
    margin: 1rem 0 1rem 0 !important;
}

.mobileQuickLinksDYN {
    background: #003046;
}

.topNavContainer { background-color: #FFF; }
.topNavContainer a { color: #000; }

.section-color-dark {
    background-color: #003046;
    color: #FFF;
}

.hero-section-text-mobile {
    display: none;
}

.spread .highliteColor2 h1,
.spread .highliteColor2 h2,
.spread .highliteColor2 h3,
.spread .highliteColor2 p {
    color: #FFF;
}

.spread h3 {
    text-transform: capitalize;
    font-size: 1.125rem;
}

.spreadCol .paragraphFootnoteContainer {
    margin: 0;
}

.columnGrid h3 {
    font-size: 1.5rem;
    padding: 1.25rem 0 0 0.125rem;
}

.columnBlockContainer {
    width: 100%;
}

.columnBlock h3 {
    font-size: 1rem;
    text-transform: capitalize;
}

.columnBlock p {
    font-size: 0.875rem;
}

.navItem, .ctaDash {
    background-color: #003046;
}

.slideNav {
    display: none;
}

.linkContainer, .linkContainer2 {
    margin-top: 2.5rem;
}

.largePadding {
    padding: 1rem 0;
}

/* buttons */
.button {
    font-family: var(--base-font-family);
    font-size: 0.75rem;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.03rem;
    padding: 0.875rem 1.875rem;
    border-radius: 0;
}

.button.primary {
    background-color: #FFF;
    color: #000;
    border: 0.0625rem solid #000;
}

.button.primary:focus,
.button.primary:hover {
    background-color: #eee;
}

.button.secondary {
    color: var(--secondary-color);
    background-color: var(--dark-blue-color);
    border-color: var(--secondary-color);
}

.button.secondary:focus,
.button.secondary:hover {
    background-color: #32596b;
    color: #fff;
}

section:first-child {
    padding-top: 0;
}

/* Custom Dev Config tab overrides */
.uUniversity {
    text-align: center;
}

.uUniversity .row {
    border-top: 0.0625rem solid #ccc;
}

.ambassadorBlockGrid .imageBlock {
    background: transparent;
}
/* [end] Custom Dev Config tab overrides */

/* footer */
.fatFooterRow .footerLinkContainer {
    text-align: center;
}

.footerRow, .fatFooterRow {
    background-color: #eee;
}

.footerLogo img {
    max-width: 7rem;
}

.footerBlock .standardLink {
    font-size: 0.875rem;
    color: #000;
    text-decoration: underline;
    line-height: 1.4;
    margin-bottom: 0.5rem;
}

.footerBlock a:hover {
    padding-left: 0;
    color: #000;
    opacity: 0.6;
}

.footerLegal {
    color: #000;
    margin-top: 0;
}

.fatFooterRow .footerLinkContainer a:hover {
    padding-left: 0;
    width: auto;
    line-height: inherit;
}

/* Vsp Optics Vouchers */
.formstack-form form.voucher-form {
    display: block;
}

.formstack-form form.voucher-form .hidden {
    display: none;
}

.voucher-form .form-element-container.fix-horizontal-items {
    height: 100px;
}

.voucher-form .text-element-container {
    padding: 3px 35px 3px 8px;
}

.red-bold strong, .red-text {
    color: red;
}

.voucher-form section.code-field {
    padding: 0;
}

.voucher-radio-group-label {
    display: inline-block;
    font-weight: 600;
}

.voucher-radio-group-label ~ label {
    display:inline-block; 
    width: auto;
}

.voucher-form h2 {
    color: #00B6F1;
}

.voucher-verbiage h1 {
    font-size: 2rem;
    margin: 1rem 0 2rem;
}

.voucher-items h4 {
    color: #00b6f1;
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 0;
}

.voucher-verbiage .button.primary {
    background-color: #f47944;
    color: #000;
    font-weight: bold;
    border: 0.0625rem solid #000;
    text-transform: none;
    margin-top: 1rem;
}

.voucher-verbiage .button.primary:focus,
.voucher-verbiage .button.primary:hover {
    opacity: .8;
}

.confirm-h3 h3 {
    text-align: center;
    text-transform: none;
    font-size: 1.25rem;
    font-weight: 600;
}

.confirm-h3 h3 big {
    color: red;
    font-size: 1.25rem;
}

/* This fixes the bad looking outline around checkboxes */
.formstack-form form:not(.column) .checkboxGroup label {
    padding-top: 4px !important;
    padding-bottom: 1px;
}

/***** MEDIA QUIRIES START HERE ******/

/*--- SMALL only --------------------------------------------- */
@media screen and (max-width: 39.9375em)
{
    .button { font-size: 0.8rem; }
    .quickLinks { display: none; }

    .blue-header.section-margin {
        margin-bottom: 0;
    }

    .blue-header h1 {
        font-size: 1.5rem;
    }

    .unityLogo .title-bar-title {
        display: none;
    }

    .voucher-radio-group-label {
        padding-bottom: .5rem;
    }

    .voucher-radio-group-label ~ label {
        display: block;
    }
}

/*--- SMALL and MEDIUM only ----------------------------------- */
@media screen and (max-width: 63.9375em) {

    .quickLinks { display: none; }
    .off-canvas { background: #fff; }

    .topNavContainer.navbar-fixed .headerRow,
    .topNavContainer.navWithSearch .headerRow {
        padding-bottom: 0;
    }

    .topNavContainer { box-shadow: inset -0.8125rem 0 1.25rem -0.8125rem rgb(10 10 10 / 25%); }
    .topNavContainer img { width: 65%; }

    .navLinkContainer { padding-bottom: 0; }
    .navLinkContainer a { padding-bottom: 0.875rem; }

    .navLogoContainer {
        display: block;
        text-align: center;
        margin-bottom: 2rem;
    }

    .navbar-fixed .navLogoContainer a img {
        width: 65%;
    }

    .menu-icon::after {
        background: #000;
        box-shadow: 0 0.4375rem 0 #000, 0 0.875rem 0 #000;
    }

    .navLogo-mobile { height: 100%; }

    .title-bar { background: #fff; }

    header .quickLinks, header .topNavContainer > .headerRow {
        display: none;
    }

    /* this is needed to hide EPN since template wasn't built to handle this */
    div#offCanvasLeft > .mobile-nav-logo, .mobileCls, .mobileNavControl  {
        display: none;
    }

    .quickLinks .row {
        flex-direction: row;
    }

    .slick-dotted.slick-slider {
        margin-bottom: 0;
    }

    .privacy-policy table {
        width: auto!important;
    }
}

/*--- MEDIUM LANDSCAPE only ----------------------------------- */
@media only screen and (min-device-width: 48rem) and (max-device-width: 64rem) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
    .quickLinks, .mobileNavControl {
        display: none;
    }

    div#offCanvasLeft > .mobile-nav-logo, .mobileCls  {
        display: none;
    }
}

/*--- MEDIUM and UP only ------------------------------- */
@media screen and (min-width: 40em) {

    .mobileNavControl {
        display: none;
    }

    .slideNav {
        display: flex;
    }

    .footerBlock {
        margin-left: 5rem;
    }

    .footerBlock .linkContainer,
    .footerBlock .linkContainer2 {
        margin-top: 0;
    }
}

/*--- MEDIUM only ------------------------- */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {

    .quickLinks {
        display: block !important;
    }

    .navLogoContainer {
        margin-top: 4rem;
    }

    .section-margin {
        margin-bottom: 0;
    }

    /* jjh this is the one for tablet width to modify */
    .spread .container.stack-spread {
        width: 100%
    }

    .quickLinks a {
        margin-bottom: 0;
    }

    .footerLogo {
        margin-left: 2rem;
    }

    .unity-footer .footerLogo {
        margin-left: 0;
    }

    .unity-footer .footerLogo img {
        max-width: 10rem;
    }

    .unity-footer .footerBlock {
        width: 70%;
    }
}

/*--- Large and up ------------------------- */
@media screen and (min-width: 64em) {

    .topNavContainer a {
        font-size: 0.75rem;
        font-weight: 400;
    }

    .navLinkContainer a {
        padding: 0.4375rem 1.25rem;
    }

    .navLinkContainer a:hover {
        color: #000;
        opacity: 0.6;
        padding: 0.4375rem 1.25rem;
        border-bottom: none;
    }

    a.standardLink.activeTopNav {
        padding: 0.4375rem 1.25rem;
        border: 0.0625rem solid #000;
    }

    a.standardLink.activeTopNav:hover {
        opacity: 1;
    }

    .navLogoContainer {
        padding-left: 1.875rem;
    }

    .largePadding {
        padding: 4rem 0;
    }

    .para-section.largePadding {
        padding: 2rem 0;
    }

    .spread h1, .spread h2 {
        margin-bottom: 1rem;
    }

    .spreadCol1 .para-section {
        padding-right: 1.375rem;
    }

    .spreadCol2 .para-section {
        padding-left: 1.375rem;
    }

    .footerLogo {
        margin-left: .875rem;
    }

    .footerBlock .linkList1 {
        margin-right: 7.125rem;
    }

    .fatFooterRow .footerLinkContainer {
        text-align: left;
    }

    .fa-facebook-f, .fa-linkedin {
        font-size: 1.375rem;
        margin-right: 1rem;
    }

    .unity-footer .footerLogo {
        width: 25%;
    }

    .unity-footer .footerBlock {
        width: 66.66667%;
    }

    .para-section.largePadding.blue-header {
        padding: 3rem 0 4rem;
    }
    
    .voucher-radio-group-label {
        min-width: 12rem;
    }

    .voucher-radio-group {
        height: 2.5rem;
    }

    .materials-header {
        margin-top: 1.5rem;
    }
}

/* Large only */
@media screen and (min-width: 64em) and (max-width: 74.9375em) { }


/* Unity */

.blue-header h1 {
  color: #003046;
  font-size: 2rem;
  margin-bottom: 2rem;
  letter-spacing: 1px;
}

.section-color-background1 {
  background-color: #616265;
}

.section-color-background1 h1,
.section-color-background1 h2,
.section-color-background1 p {
  color: #fff;
}


.section-color-background1 .button.hollow {
  color: #fff;
  border-color: #fff;
  margin-left: 0;
  margin-bottom: 1.5rem;
}

.section-color-background1 .button.hollow:focus, .button.hollow:hover {
  background-color: #767679;
  opacity: .9;
}

.unity-footer .footerLogo img {
  max-width: unset;
}

.unity-footer .selectFormat {
  font-size: 0.875rem;
  color: #000;
  text-decoration: none;
  line-height: 0;
  margin-bottom: 0.5rem;
  opacity: 0.6;
  cursor: default;
}

#termsLink {
  margin-bottom: 0;
}

#mailLink {
  display: block;
  margin-top: 8px;
  margin-bottom: 19px;
  text-decoration: underline;
  opacity: 1;
  cursor: pointer;
}

#mailLink:hover {
  opacity: .6;
}

#relatedLlink {
  text-decoration: none;
  cursor: default;
}

#relatedLlink:hover {
  opacity: 1;
}

.privacy-policy p {
  margin-bottom: 2rem;
}

.ui-selectmenu-text {
  padding: 19px 0 20px 8px !important;
}

.checkboxGroup, .groupHeader {
  margin-bottom: 0 !important;
}

.groupLabel {
  margin-top: 0 !important;
}

.column.submit-button {
  clear: both;
}

input#bsubmit {
  /* background-color: #fff; */
  border-color: #000;
  color: #000;
}

input#bsubmit:hover {
  background-color: #eee;
}

/********************** iPad Pro 12.9" *************************/

/*---- Portrait and Landscape ----*/
@media only screen
  and (min-device-width: 1024px)
  and (max-device-width: 1366px)
  and (-webkit-min-device-pixel-ratio: 2) {
    .unity-footer .footerBlock {
      margin-left: 0;
    }
    .unity-footer .footerLogo img {
      max-width: 10rem;
    }
 }