/*!
Theme Name: jabil 2025
Author: Gallagher Commubnication | Ian Israel
Version: 1.0.0
Text Domain: jabil-2025

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* GLOBAL */
html {
	scroll-padding-top: calc(114px);
    scroll-behavior: smooth;
}

html.modal-active {
    overflow: hidden;
}
 
/* VARIABLES */
:root {
    /* Fonts */
    --primary-font: 'Roboto', sans-serif;
 
    /* Colors */
    --primary: #002B49;
    --secondary:#0990CF;
    --tertiary: #669933;

    --accent-one: #B1D34A;
    --accent-two: #15BEF0;
    --accent-three: #eceeee;
    --accent-four: #f9f9f9;
    --accent-five: #414042;
    --accent-six: #AFAFAF;
    --accent-seven: #7FBA00;

    --border: var(--accent-three);

    --pale-blue: #F1FBFE;
    --light-blue: #46BFE8;
    --logo-blue: #005288;
    --accent-blue: #00aae6;
    --medium-blue: #003865;
    --dark-blue: #002B49;
    --light-gray: #F5F5F5;
    --accent-grey: #D9D9D9;
    --gray: #818A91;
    --dark-gray: #3c3c3c;
    --red: #E5745B;
    --green: #A3C777;
    --purple: #9F7DBF;

    --background-gradient: linear-gradient(210deg, #84BD41 14.67%, #19BEF0 88%);
 }
 
 .pale-blue {
     background-color: var(--pale-blue)  ;
 }
 
 /* TYPOGRAPHY */
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 p,
 a,
 li,
 input,
 .copyright,
 th,
 td {
     font-family: var(--primary-font);
 }
 
 h1 {
    font-size: 3rem;
    font-weight: 700;
    color: white;
    margin: 0;
    line-height: 1.2;
    display: flex;
    flex-direction: column;
    gap: 1rem;
 }

 h1:after {
    content: "";
    background-color: var(--accent-two);
    width: 5rem;
    height: 4px;
 }
 
 #index h1::after {
    display: none;
 }
 
 h2 {
    font-size: 2.375rem;
    font-weight: 500;
    color: var(--primary);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 3rem;
    line-height: normal;
 }

h2::after {
    content: "";
    background-color: var(--tertiary);
    width: 2.5rem;
    height: 3px;
}

h2.contact-cat {
    width: 100%;
}

h2.contact-cat::after {
    background-color: var(--secondary);
    width: 100%;
}
 
h3 {
    font-size: 1.875rem;
    font-weight: 500;
    color: var(--primary);
}
 
 
h4 {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--primary);
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

h4:after {
    content: "";
    background-color: var(--accent-one);
    width: 2.5rem;
    height: 3px;
}

h4 + ul {
    margin-top: 1rem;
}
 
 #index.search h4:first-of-type {
     margin-top: 0;
 }
 
 h5 {
     font-size: 1.5rem;
     font-weight: 700;
     text-transform: uppercase;
     color: var(--medium-blue);
 }

h6,
h6 p {
    font-weight: 300;
    font-size: 1.75rem;
    line-height: 2.375rem;
    margin: 0 0 1rem;
    color: var(--primary);
}

h6 {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

h6:after {
    content: "";
    width: 2.5rem;
    height: 3px;
    background-color: var(--secondary);
}
 
 p, li {
     font-size: 1rem;
     color: var(--dark-gray);
 }
 
 p.first-elem {
     margin-top: 0;
 }

p.note {
    padding: 1rem 0;
    border-top: 1px solid var(--secondary);
    border-bottom: 1px solid var(--secondary);
}
 
 p.footnote {
     font-size: .75rem;
 }
 
 /* Links */
 a {
     transition: .3s;
 }
 
 a,
 a:visited {
     color: var(--secondary);
 }
 
 a:hover,
 a:focus,
 a:active {
     color: var(--medium-blue);
 }
 
 a:hover,
 a:active {
     outline: 0;
 }
 
 a strong {
     font-weight: 400;
 }
 
 .banner-text a:hover,
 .banner-text a:visited:hover {
     background: white;
     text-decoration: none;
     color: var(--medium-blue);
 }
 
 /* Lists */
 .main-content li {
     color: var(--accent-two) !important;
 }

li p {
    margin: 0 0 .5rem;
}
 
 .main-content li p .note {
     margin-top:1rem;
 }

table tbody tr td ul li p {
	text-align: left !important;
}

.body-container ul li p {
	margin-bottom: 10px;
}
 
 /* HEADER */
 header {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 10;
    box-shadow: 1px 1px 4px var(--gray);
 }
 
 .header-grid {
    display: flex;
    justify-content: space-between;
    width: 80%;
    margin: 0 auto;
    align-items: center;
    padding: 2rem 0;
 }
 
 .header-right-container {
    display: flex;
    align-items: center;
 }
 
 .utility-container {
    display: flex;
    gap: 1rem;
    align-items: center;
    border-left: 1px solid var(--accent-six);
    padding-left: 1rem;
    margin-left: 1rem;
 }
 
 .search-form {
     display: flex;
 }
 
 .search-field,
 input[type="search"] {
    background-color: var(--medium-blue);
    -webkit-background-color: var(--medium-blue);
    -moz-background-color: var(--medium-blue);
    color: white!important;
    border: none;
    height: 2rem;
    border-bottom-right-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    -moz-border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    -webkit-border-top-right-radius: 0;
    -moz-border-top-right-radius: 0;
    padding-left: 1.75rem;
    outline: none;
    outline-offset: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 4rem;

 }
 
 ::placeholder {
     color: white;
 }
 
 .search-submit {
     color: white;
     background-color: var(--gray);
     width: 4rem;
     height: 4rem;
     padding: 3px;
     border: none;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
 }
 
 .search-submit:hover {
     cursor: pointer;
 }
 
.print {
    position: relative;
    width: 2rem;
    height: 2rem;
    background-image: url('/wp-content/uploads/ICON_print-1.svg');
    background-repeat: no-repeat;
    background-size: contain;
}


 
 /* Nav */
 /* nav {
     margin-top: 1rem;
 } */
 
 #primary-menu {
     margin: 0;
     padding: 0;
     display: flex;
     justify-content: space-between;
 }
 
 #primary-menu li,
 .print li {
     list-style: none;
     transition: .3s;
     position: relative;
 }

 /* Search */
.search-icon {
    height: 1.5rem;
    cursor: pointer;
}

.search-modal-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    justify-content: center;
    align-items: center;
}

.search-modal-container.active {
    display: flex;
}

.search-modal-wrapper {
    width: 80%;
    margin: 0 auto;
    position: relative;
}

.search-modal-wrapper .close {
    position: absolute;
    top: -4rem;
    right: 0;
    background-color: white;
    padding: .5rem 1rem;
    transform: rotate(45deg);
    border-radius: 50%;
    color: black;
    padding: 5px 13px 10px 12px;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.utility-btn {
    border-radius: 0.25rem;
    border: 1px solid var(--border);
    display: flex;
    padding: 0.5rem;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.square-btn {
    transition: .3s;
}

.square-btn,
.square-btn:visited {
    background-color: var(--primary);
    color: white;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: .5rem 1rem;
    text-decoration: none;
    transition: .3s;
    cursor: pointer;
}

.square-btn:hover,
.square-btn:active {
    background-color: var(--secondary);
    color: white;
}

.wired-btn {
    border: 2px solid var(--accent-six);
    color: var(--accent-six);
    font-size: 1rem;
    font-weight: 400;
    text-transform: uppercase;
    padding: .5rem 1rem;
    text-decoration: none;
}

#primary-menu li.menu-item-has-children:after,
.utility-btn:after {
    content: url('/wp-content/uploads/down-arrow.svg');
}

 #primary-menu a {
     transition: .3s;
     text-decoration: none;
 }
 
 #primary-menu li:hover {
     cursor: pointer;
 }
 
 #primary-menu > li {
    display: inline-block;
    padding: 10px;
    border-bottom: 4px solid transparent;
    transition: .3s;
 }
 
 #primary-menu > li > a {
     color: var(--primary);
     text-decoration: none;
 }
 
 #primary-menu > li:hover,
 #primary-menu > li.current-menu-item,
 #primary-menu > li.current-menu-ancestor {
     /* background-color: var(--light-blue); */
    border-bottom: 4px solid var(--secondary);
 }
 
 /* #primary-menu > li:hover > a,
 #primary-menu > li.current-menu-item a,
 #primary-menu > li.current-menu-ancestor > a {
     color: white;
 } */
 
 .sub-menu {
     display: none;
 }
 
 #primary-menu > li > .sub-menu.active,
 .utility-btn.active .print > .sub-menu {
    display: block;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: var(--accent-four);
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
    padding: 1rem;
    z-index: 5;
    border-radius: .5rem;
 }

#primary-menu > li > .sub-menu.active {
    min-width: 300px;
}

.utility-btn.active .print > .sub-menu {
    width: 180px;
    left: -.5rem;
    top: calc(100% + .5rem);
}

#primary-menu > li.mega > .sub-menu.active {
    width: 60vw;
    left: 50%;
    position: fixed;
    translate: -50%;
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    grid-auto-flow: column;
}
 
 #primary-menu .sub-menu li,
 .print .sub-menu li {
    padding: 10px 0;
 }
 
 #primary-menu .sub-menu a,
 .print .sub-menu a {
     /* font-weight: 700; */
     color: var(--dark-gray);
     padding-left: 1rem;
     border-left: 3px solid transparent;
     display: block;
 }
 
 #primary-menu .sub-menu li:hover a,
 .print .sub-menu li:hover a {
     border-left: 3px solid var(--secondary);
     color: var(--secondary);
 }
 
 .print:hover {
    
 }
 
 .print .sub-menu {
     z-index: 15;
     min-width: auto;
 }
 
 .print .sub-menu ul {
     padding: 0;
 }
 
 .print > .sub-menu.active {
     min-width: 175px;
 }
 
 .mobile-icons {
     display: none;
 }
 
 .hamburger {
     color: var(--gray);
     display: flex;
     align-items: center;
     height: 100%;
     font-size: 1.75rem;
 }
 
/* FOOTER */
footer {
background: var(--primary);
}

.main-footer-container { 
    padding: 4rem 0 1.75rem;
}

.main-footer-container *,
.socket-container * {
    color: white!important;
}
 
.main-footer-grid {
    display: grid;
    grid-template-columns: 7rem 70% 1fr;
    gap: 1.75rem;
    width: 80%;
    margin: 0 auto;
}

 #footer-menu {
    display: flex;
    gap: 1.75rem;
    flex-wrap: wrap;
    justify-content: space-between;
 }

#footer-menu > li {
    font-weight: 700;   
}

#footer-menu > li:last-child {
    display: none;
}

#footer-menu .menu-item-has-children li,
#footer-menu > .sub-menu a {
    font-weight: 400;
    font-size: .75rem;
    line-height: 1.375rem;
}

#footer-menu,
#footer-menu ul,
#footer-menu li {
    list-style: none;
    padding: 0;
}

 #footer-menu .sub-menu {
    display: block;
 }

.footer-contact-container {
    margin-left: 1.75rem;
    padding-left: 1.75rem;
    border-left: 1px solid white;
}
 
.footer-contact-container h4 {
    margin: 0 0 1rem 0;
    color: white;
    line-height: 1;
}

.footer-contact-container h4::after {
    display: none;
}

.footer-contact-container p,
.footer-contact-container a {
    font-size: .75rem;
    margin: 0;
    font-weight: 400;
    font-size: .75rem;
    line-height: 1.375rem;
}

.footer-contact-container > :last-child {
    margin-bottom: 0;
}

 .footer-contact-grid {
     display: grid;
     grid-template-columns: 1fr;
     grid-gap: 2rem;
 }
 
 .footer-contact-grid p,
 .footer-contact-grid a {
     color: white;
 }
 
 .footer-contact-grid .contact {
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 15rem;
     margin: 0 auto;
 }
 
 .footer-contact-grid .contact img {
     width: 2rem;
 }
 
 .socket-container {
    display: flex;
    justify-content: space-between;
    width: 80%;
    margin: 0 auto;
    padding: 1.75rem 0;
    border-top: 1px solid white;
    font-size: .75rem;
 }
 
 /* PAGES */
 .page-content {
     width: 80%;
     margin: 0 auto;
 }

 .home .page-content {
    width: 100%;
 }

 .main-content > :first-child {
    margin-top: 0;
 }
 
 .full-width-row {
     margin: 0 -12.5%;
     padding: 4rem 0;
 }
 
 .full-width-container {
     width: 80%;
     margin: 0 auto;
 }
 
 .col2-row-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     grid-gap: 2rem;
     margin: 4rem 0;
 }
 
 /* Device Type Classes */
 .android-app, 
 .android-app-btn, 
 .apple-app, 
 .apple-app-btn, 
 .app-label {
     display: none;
 }
 
 @media only screen and (max-width:1051px) {
     .desktop {
         display: none;
     }
 }
 
 /* Tables */
 .table-wrapper {
     overflow-x: auto;
 }
 
 table {
     border-collapse: collapse;
 }
 
 table p {
     margin: 0;
 }
 
 .col-4 th {
     width: calc(100% / 4);
 }
 
 .col-6 th {
     width: calc(100% / 6);
 }
 
 th {
     background-color: var(--primary);
 }
 
 th,
 th p {
     color: white;
 }
 
 th,
 td {
     border: 1px solid #ccc;
     padding: 1rem;
     text-align: center;
 }
 
 td:first-child {
     text-align: left;
 }
 
 .align-btm {
     vertical-align: bottom;
 }
 
 .align-btm > td:first-of-type > p:first-of-type {
     margin-bottom: 1rem;
 }

 table.all-left td {
    text-align: left;
 }

 /* Callout */
 .callout {
    background-color: var(--accent-three);
    padding: 1.75rem 1.75rem 1.75rem 2.25rem;
    position: relative;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
 }

 .callout::before {
    content: "";
    background: var(--background-gradient);
    width: .5rem;
    border-radius: 0.5rem 0rem 0rem 0.5rem;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
 }

 .callout :first-child {
    margin-top: 0;
 }

 .callout :last-child {
    margin-bottom: 0;
 }


 /* Callout Wired */
 .callout-wired {
    padding: 1.75rem;
    border-radius: 8px;
    border: 1px solid var(--accent-two);
}


.callout-wired h4 {
color: var(--accent-two);
}

.callout-wired h4:after {
background-color: var(--accent-two);
}

.callout.contact .callout-contact-text {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    font-size: 1.25rem;
}

 /* Left align table content by page */
 #life-and-add-insurance td,
 #new-hire td,
 #tax-advantaged-accounts td {
     text-align: left;
 }
 
 tr:nth-child(odd) > td {
     background-color: #f7f7f7;
 }
 
 tr:hover > td {
     background-color: #e9e9e9;
 }
 
 /*Tabbed Tables*/
 .tmo-nh-table.tab th:nth-child(n+3),
 .tmo-nh-table.tab td:nth-child(n+3) {
     display: none;
 }
 
 .tmo-nh-table.tab th:first-child {
     width: 50%;
 }
 
 .table-tab {
     display: inline-block;
     border:  1px solid black;
     padding:  10px;
     margin:  0 1em 1em 0;
 }
 
 .table-tab:hover {
     cursor: pointer;
 }
 
 /* Drop Down Table */
 .table-select-container {
     margin-bottom: .5rem;
 }
 
 .table-select-container select {
     width: 100%;
     padding: 5px 10px;
 }

 /* Sidebar */
.sidebar-section {
    background-color: var(--accent-four);
    padding: 1.75rem;
    margin-bottom: 1.75rem;
}

.sidebar-section h4 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.sidebar-section h4::after,
.event-section-top h3:after {
    content: "";
    background-color: var(--tertiary);
    width: 2.5rem;
    height: 3px;
}

.sidebar-section p {
    margin-bottom: 1rem;
}

.sidebar-section :last-child {
    margin-bottom: 0;
}

.sidebar-section.notes > :first-child {
    margin-top: 0;
}

 
 /* Front Page Template */
 /* #index .hero-container {
     position: relative;
     min-height: 576px;
     background-position: 100% center;
     background-repeat: no-repeat;
 }
 
 #index .hero-text-container {
     background-image: url('/wp-content/uploads/home_hero-left-ii.svg'), url('/wp-content/uploads/home_hero-right-ii.svg');
     background-position: left center, 100% bottom;
     background-size: 60% 100%, auto;
     background-repeat: no-repeat;
     min-height: 576px;
     display: flex;
     align-items: center;
 }
 
 #index .hero-text-wrapper {
     padding-left: 1rem;
     border-left: 2px solid white;
 } 
 
 #index .hero-text-wrapper p {
     color: white;
     line-height: 2;
     font-size: 1.5rem;
 } */
 
 .center-heading {
     text-align: center;
     padding-bottom: 1rem;
     border-bottom: 6px solid var(--light-blue);
     width: 60%;
     margin: 0 auto;
 }
 
 /* #index .hero-text {
     padding: 4rem 4rem 4rem 10%;
     width: 40%;
 } */
 
 .jabil-experience {
     display: flex;
     gap: 1rem;
 }
 
 .jabil-experience:after {
     content: url('/wp-content/uploads/jabil_experience_all_icons.svg');
     width: 120px;
 }
 
 .whats-new {
     text-align: center;
 }
 
 .whats-new h2 {
     margin-bottom: 2rem;
 }
 
 .whats-new-grid {
     display: grid;
     width: 75%;
     margin: 0 auto;
     grid-gap: 1rem;
     grid-template-columns: repeat(2, 1fr);
 }
 
 .new-item {
     display: flex;
     gap: 1rem;
     align-items: center;
 }
 
 .new-item p {
     margin: 0;
     text-align: left;
 }
 
 .new-item a {
     color: var(--light-blue);
     font-weight: 700;
 }
 
 .new-item::before {
     content: url('/wp-content/uploads/icon_document.svg');
     width: 44px;
 }
 
 .benefits-for-all {
     background-repeat: no-repeat;
     position: relative;
 }
 
 .benefits-for-all > .flag {
     background-color: var(--light-blue);
     margin: 4rem 0 4rem auto;
     padding: 1rem 1rem 1rem 2rem;
     width: 40%;
 }
 
 .flag h3 {
     margin: 0;
     color: white;
 }
 
 .benefit-for-all-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-gap: 2rem;
     margin: 0 auto;
     width: 80%;
 
 }
 
 .benefit-tile {
     background-color: white;
     box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.25);
     border-radius: 8px;
     padding: 3rem 2rem;
 }
 
 .benefit-tile img {
     height: 109px;
     display: block;
     margin: 0 auto;
 }
 
 .benefit-title {
     padding: .75rem;
     text-align: center;
     color: white;
     font-size: 1.75rem;
     margin-bottom: 1rem;
 }
 
 .benefit-tile:nth-child(1) .benefit-title {
     background-color: var(--red);
 }
 
 .benefit-tile:nth-child(2) .benefit-title {
     background-color: var(--green);
 }
 
 .benefit-tile:nth-child(3) .benefit-title {
     background-color: var(--purple);
 }
 
 .benefit-tile li {
     font-size: 1.25rem;
 }
 
 .benefit-tile li li {
     font-size: 1rem;
 }

 /* Home Page Template */
.home .content-grid {
    margin: 0;
}

.dark {
    background-color: var(--primary);
}

.dark * {
    color: white;
}

.light {
    background-color: var(--accent-three);
}

.section-container {
    width: 80%;
    margin: 0 auto;
    padding: 4rem 0;
    text-align: center;
}

.section-container > :first-child {
    margin-top: 0;
}

.light .section-container h2:after,
.dark .section-container h2:after {
    display: none;
}

.quick-links-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.75rem;
}

.link-card {
    text-align: left;
    border-radius: 0.5rem;
    border: 2px solid var(--accent-two);
    position: relative;
    cursor: pointer;
    transition: .3s;
}

.link-card a {
    text-decoration: none!important;
    padding: 2.5rem 1.75rem 1.75rem;
    display: block;
}

.link-card:hover {
    border-color: var(--accent-seven);
}

.link-card::before {
    content: url(/wp-content/uploads/ICON_external-link_ACTIVE.svg);
    position: absolute;
    top: -1.25rem;
    left: 1rem;
}

.link-card:hover::before {
    content: url(/wp-content/uploads/ICON_external-link_HOVER.svg);
}

.link-card > :first-child {
    margin-top: 0;
}

.link-card > :last-child {
    margin-bottom: 0;
}

.home-featured-grid {
    display: grid;
    grid-template-columns: 30% 1fr;
    background: url(/wp-content/uploads/jabil-ribbon-home-callout.svg);
    border-radius: .5rem;
    background-color: var(--accent-three);
    background-position: -35% 10%;
    background-repeat: no-repeat;
    background-size: 111%;
}

.home-featured-grid .left {
    padding: 2.5rem;
    text-align: left
}

.home-featured-grid .right img {
    display: block;
    height: 30rem;
    margin: 0 auto;

}

.section-container.dates {
    padding-top: 0;
}

.section-container.dates .wired-btn,
.section-container.dates .wired-btn:visited {
    border: 2px solid var(--primary);
    color: var(--primary);
    transition: .3s;
}

.section-container.dates .wired-btn:hover,
.section-container.dates .wired-btn:active {
    border: 2px solid var(--secondary);
    color: var(--secondary);
}

.event-section-top {
    text-align: left;
    display: flex;
    justify-content: space-between;
}
 
.event-section-top h3 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
}

.home-event-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
    margin-top: 1.75rem;
}

.home-event {
    background-color: var(--accent-four);
    padding: 1.75rem;
    border-radius: .5rem;
    text-align: left;
    transition: .3s;
    display: flex;
    flex-direction: column;
}

.benefit:hover,
.home-event:hover {
    box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

.home-event :first-child {
    margin-top: 0;
}

.home-event :last-child {
    margin-top: auto;
    margin-bottom: 0;
}

.eyebrow {
    text-transform: uppercase;
    color: var(--accent-five);
    font-size: 1.125rem;
    margin: 0 0 .5rem;
}

.benefit h4,
.home-event h4 {
    color: var(--secondary);
}

.cta-arrow {
    display: flex;
    gap: .5rem;
    align-items: center;
    font-weight: 700;
    color: var(--accent-five);
    text-decoration: none;
    transition: .3s;
}

.cta-arrow:after {
    content: url(/wp-content/uploads/ICON-arrowRight.svg);
}

.cta-arrow:hover {
    color: var(--secondary);
}

.benefits-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}

a .benefits-cards-grid .benefit * {
    text-decoration: none;
}

.benefits-cards-grid .benefit {
    background-color: white;
    border-radius: .5rem;
    transition: .3s;
    text-align: left;
    border: none;
    cursor: pointer;
}

.benefits-cards-grid .benefit a {
    text-decoration: none;
    padding: 1.75rem;
    display: block;
}

.benefits-cards-grid .benefit a > :last-child {
    margin-bottom: 0;
}

.benefits-cards-grid .benefit img {
    border-radius: .5rem;
    display: block;
    height: 15rem;
    width: 100%;
    object-fit: cover;
    margin-bottom: 1rem;
}

 /* Main Page Template */
.hero-container {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 16rem;
    background: linear-gradient(to right, var(--primary), transparent), url(/wp-content/uploads/jabil-ribbon-hero.svg);
    background-color: var(--primary);
    background-position: 100% center;
    background-repeat: no-repeat;
    background-size: 100%;
    padding: 4rem 10%;
}

.home .hero-container {
    background: revert;
    background-position: 25% center;
    background-repeat: no-repeat;
    background-size: cover;
}
 
#important-note .hero-container,
#legal-notices .hero-container,
/* #contacts .hero-container, */
#index.search .hero-container,
#new-hire-video .hero-container,
#leaving-jabil .hero-container,
#other-events .hero-container {
    min-height: 0;
}
 
 .hero-text-container {
    height: 100%;
    width: 50%;
 }

 .home .hero-text-container {
    background: url(/wp-content/uploads/jabil-ribbon-callout.svg), var(--primary);
    background-repeat: no-repeat;
    background-size: 107% 242%;
    background-position: 100% 25%;
    text-align: right;
    padding: 4rem 2.34rem 7rem;
 }
 
 /* #important-note .hero-text-container,
 #legal-notices .hero-text-container,
 #contacts .hero-text-container,
 #index.search .hero-text-container,
 #new-hire-video .hero-text-container,
 #leaving-jabil .hero-text-container,
 #other-events .hero-text-container {
     background-image: none;
     background-color: var(--accent-blue);
     min-height: 0;
 } */
 
 .hero-text-wrapper {
     padding-left: 1rem;
     border-left: 2px solid white;
 } 
 
 .hero-text-wrapper p {
     color: white;
     line-height: 2;
     font-size: 1.5rem;
 }
 
 /* .hero-text {
     padding: 4rem 4rem 4rem 10%;
     width: 50%;
 } */
 
 .banner-container {
    background-color: var(--accent-seven);
 }
 
 /* #important-note .banner-container,
 #legal-notices .banner-container,
 #index.search .banner-container,
 #new-hire-video .banner-container,
 #leaving-jabil .banner-container,
 #other-events .banner-container {
     display: none;
 } */

 #new-hire-video .hero-container {
    display: none;
}

 .banner-text {
    width: 80%;
    padding: 1.25rem 0;
    text-align: center;
    margin: 0 auto;
 }

 .banner-text > :first-child {
    margin-top: 0;
 }

 .banner-text > :last-child {
    margin-bottom: 0;
 }
 
 .banner-text *,
 .banner-text a:visited {
     color: white;
 }
 
 .banner-text p {
    font-size: 1.625rem;
    font-weight: 700;
 }

 .banner-text .square-btn {
    margin-left: 1rem;
 }
 
 .content-grid {
     display: grid;
     grid-template-columns: 65% 1fr;
     grid-gap: 4rem;
     margin: 4rem 0;
 }

 .content-grid.no_sidebar {
    grid-template-columns: 1fr;
 }
 
 /* #contacts .content-grid {
     grid-template-columns: 35%;
 } */
 
 /* #contacts .main-content {
     display: none;
 } */
 
.pdf-resources,
 .resources ul {
    padding: 0;
 }

 .pdf-resources li,
 .resources li {
    list-style: none;
 }

 .pdf-resources li:not(:last-child),
 .resources li:not(:last-child) {
    margin-bottom: 1rem;
 }
 
 /* Contacts Template */
 .contact-heading {
     display: flex;
     gap: .5rem;
     align-items: center;
     margin-bottom: 2rem;
 }
 
 .contact-heading img {
     width: 4rem;
 }
 
 .contact-heading h3 {
     margin: 0;
 }
 
 .contacts-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-gap: 2rem;
     margin-bottom: 4rem;
 }
 
 .contact-tile {
     padding: 3rem;
     box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
     display: flex;
     flex-direction: column;
     gap: 1rem;
 }
 
 .contact-tile h4 {
     margin: 0;
 }
 
 .contact-tile p {
     margin: 0;
 }
 
 .contact-icon {
     width: 40px;
     margin-right: 1rem;
     float: left;
     transition: .3s;
 }
 
 /* .benefit {
     padding-bottom: 1rem;
     border-bottom: 1px solid var(--light-blue);
 } */
 
 .contact-btm-container {
     background-color: var(--pale-blue);
     padding: .5rem;
     display: flex;
     gap: 1rem;
     margin-top: auto;
 }
 
 .contact-btm-container img {
     transition: .3s;
     width: 3rem;
 }
 
 .contact-btm-container img:hover,
 .contact-icon:hover {
     transform: scale(1.2);
 }
 
 /* Search Results Template */
 .search-grid {
     display: grid;
     grid-template-columns: 65% 1fr;
     grid-gap: 4rem;
     margin: 4rem 0;
     min-height: calc(100vh - 348px);
 }
 
 .pdf-resources-wrapper {
     background-color: var(--light-gray);
     padding: 3rem 2rem;
 }
 
 .pdf-resources-wrapper:before {
     content: url('/wp-content/uploads/icon_pdf.svg');
     width: 25%;
     margin-bottom: 2rem;
     display: block;
 }
 
 /* .pdf-resources li {
     color: var(--accent-blue);
 } */
 
 /* .pdf-resources a {
     font-weight: 700;
     font-size: 1.25rem;
 } */
 
/* Country Selector */
.country-selector-container {
    position: relative;
    width: 2rem;
}

.country-selector-container * {
    font-family: var(--primary-font);
}

.country-selector-container img {
    width: 2rem;
    display: block;
}
 
.country-selector {
    display: none;
    position: absolute;
    top: calc(100% + .5rem);
    left: -.5rem;
    min-width: auto;
    background-color: var(--accent-four)!important;
    box-shadow: 0px 4px 12px rgb(0 0 0 / 25%);
    padding: 1rem;
    border-bottom: 1px solid var(--accent-six);
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
}

.country-selector > ul {
    border-bottom-left-radius: .5rem;
    border-bottom-right-radius: .5rem;
    box-shadow: 0px 10px 12px rgb(0 0 0 / 25%);
    padding: 1rem;
    background-color: var(--accent-four);
}
 
.utility-btn.active .country-selector-container .country-selector,
.utility-btn.active .country-selector-container .country-selector > ul {
    display: block;     
    background-color: var(--accent-four);
 }

.utility-btn.active .country-selector-container .country-selector .wgcurrent {
    border: none;
}

.utility-btn.active .country-selector-container .country-selector .wgcurrent span {
    font-weight: 700;
}

.utility-btn.active .country-selector-container .country-selector .wgcurrent::after {
    display: none;
}
 
.utility-btn.active .country-selector-container .country-selector li {
    list-style: none;
    transition: .3s;
    position: relative;
    display: block;
}
 
.utility-btn.active .country-selector-container .country-selector li a {
    text-decoration: none;
    color: var(--dark-gray);
    padding-left: 1rem;
    border-left: 3px solid transparent;
    display: block;
}
 
.utility-btn.active .country-selector-container .country-selector li:hover a {
    border-left: 3px solid var(--secondary);
    color: var(--secondary);
 }
 
 .country-selector.weglot-inline label {
     display: block;
     font-weight: 700;
     color: black;
     border-bottom: 2px solid var(--accent-grey);
 }

.country-selector.weglot-dropdown span {
    margin: 0 0 0 3px;
    line-height: 1;
    padding: 0 0 1rem;
    height: auto;
}

 /* Cards */
 .contact-cards-grid,
 .bag-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
 }

 .contact-cards-grid {
    gap: 2.5rem;
    margin-bottom: 2.5rem;
 }

 .contact-cards-grid:last-child {
    margin-bottom: 0;
 }

 .card {
    background-color: var(--accent-four);
    padding: 1.75rem;
    border-radius: .5rem;
 }

 .card > :first-child {
    margin-top: 0;
 }

 .card > :last-child {
    margin-bottom: 0;
 }

 .card h3 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    color: var(--accent-five);
    font-weight: 500;
 }

 .card h3::after {
    content: "";
    width: 2.5rem;
    height: 3px;
    background-color: var(--secondary);
 }

 .card > ul {
    padding: 0 0 0 1.75rem;
 }

 .card > ul > li ul {
    padding: 0 0 0 1.5rem;
 }

 .event-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
 }

 .event {
    display: flex;
    padding: 1.75rem;
    background-color: var(--accent-four);
 }

 .date-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 25%;
    padding-right: 1.75rem;
    border-right: 1px solid var(--primary);
 }

 .month {
    color: var(--primary);
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
 }

 .day {
    color: var(--primary);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
 }
 
 .time {
    color: var(--primary);
    font-size: 1rem;
    font-weight: 400;
 }

 .details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 50%;
    padding: 0 1.75rem;
 }

 .cta {
    display: flex;
    align-items: center;
 }

 /* Personas */
 .jabil-persona {
    background-color: var(--accent-four);
    border-radius: .5rem;
    padding: 1.75rem;
    display: flex;
    gap: 1.75rem;
    margin-bottom: 2.5rem;
 }

 .jabil-persona > :last-child {
    margin-bottom: 0;
 }

 .persona-img {
    background-image: url(/wp-content/uploads/persona-img-ring.svg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 7.4rem;
    height: 7.4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
 }

 .persona-img img {
    width: 6.5rem;
    height: 6.5rem;
    border-radius: 50%;
    display: block;
 }

 /************************************************************************/
 /****************************** RESPONSIVE ******************************/
 /************************************************************************/
@media only screen and (max-width: 1424px) {
    .header-grid {
        flex-wrap: wrap;
    }

    .logo {
        padding-left: 10px;
    }

    .header-right-container {
        width: 100%;
        justify-content: space-between;
    }

    .main-footer-grid {
        grid-template-columns: 7rem 64% 1fr;
    }
}

 @media only screen and (max-width: 1051px) {
     .header-grid {
         flex-wrap: nowrap;
     }

     #primary-menu li.menu-item-has-children:after,
     .utility-btn:after {
         content: "";
     }

     #primary-menu > li:hover, #primary-menu > li.current-menu-item, #primary-menu > li.current-menu-ancestor {
         border-bottom: none;
     }

     .header-right-container {
         width: auto;
     }

     .utility-container {
         border-left: none;
         padding-left: 0;
         margin-left: 0;
     }

     .mobile-icons {
         display: block;
		 margin-left: 25px;
     }
 
     .header-grid {
         width: 90%;
     }
 
     .print {
         display: none;
     }

     .utility-btn .print {
         display: revert;
     }
 
     nav {
         display: none;
         padding: 2rem;
         background-color: white;
         position: absolute;
         left: 0;
         top: 106px;
         width: 100vw;
         box-shadow: 1px 1px 4px var(--gray);
         max-height: 80vh;
         overflow-x: auto;
     }
 
     #primary-menu {
         flex-direction: column;
     }

     #primary-menu li.menu-item-has-children:after, .utility-btn:after {
         content: "";
     }
 
     nav .sub-menu {
         display: block;
         margin-left: 1rem;
         padding: 0;
     }
 
     #primary-menu > li > .sub-menu.active {
         display: block;
         position: static;
         min-width: auto;
         box-shadow: none;
         padding: 0;
     }
 
     #primary-menu > li:hover,
     #primary-menu > li.current-menu-item,
     #primary-menu > li.current-menu-ancestor {
         background-color: transparent;
     }
 
     #primary-menu > li:hover > a,
     #primary-menu > li.current-menu-item a,
     #primary-menu > li.current-menu-ancestor > a {
         color: black;
     }

     #primary-menu > li > .sub-menu a,
     #primary-menu > li:hover > .sub-menu a {
        border: none;
        padding-left: 0;
     }

     #index .hero-container {
        background-position: 65% center;
     }
 
     .utility-btn {
         gap: 0;
     }

     .full-width-row {
         margin: 0 -2rem;
     }
 
     .page-content,
     .socket-container {
         width: 100%;
         padding: 2rem;
     }
 
     .benefits-for-all > .flag {
         width: 50%;
         margin: 6rem 0 2rem 0;
     }

     #footer-menu {
         display: grid;
         grid-template-columns: repeat(3,1fr);
     }
 }
 
 @media only screen and (max-width: 980px) {
     .hero-text-container,
     #index .hero-text-container {
         position: relative;
         background-size: 0%, 50% 100%;
         background-position: center, 100%;
     }
 
     #index .hero-container {
        background-position: 60% center;
     }
 
     .header-grid {
         width: 100%;
         padding: .5rem 2rem;
     }
 
     .page-content {
         margin: 0 auto;
     }
 
     .page-content,
     .full-width-container,
     .socket-container {
         width: 100%;
         padding: 2rem;
     }
 
     #index .page-content {
         margin-top: 0;
         padding-top: 0;
     }

     #index.search .search-grid {
        grid-template-columns: 1fr;
    }

     #index .section-container {
         width: 100%;
     }

     .event-grid,
     .bag-cards-grid,
     .contact-cards-grid,
     .main-footer-grid,
     .benefits-cards-grid,
     .home-event-grid,
     .quick-links-grid {
         grid-template-columns: 100%;
     }

     .benefits-cards-grid {
         margin: 0 2rem;
     }

     .callout.contact .callout-contact-text {
         display: revert;
     }

     .event-grid {
         gap: 1rem;
     }

     .event {
         padding: 1rem;
         flex-wrap: wrap;
         gap: 1rem 0;
     }

     .footer-contact-container {
         margin-left: 0;
         padding-left: 0;
         border-left: none;
     }

     .content-grid {
         grid-template-columns: 1fr;
         margin: 0;
     }
 
     .full-width-row {
         padding: 2rem;
     }
 
     .whats-new {
         padding: 2rem 3rem;
     }
 
     .whats-new .new-item {
         text-align: left;
     }
 
     .benefit-for-all-grid {
         grid-template-columns: 1fr;
     }
 
     .benefits-for-all > .flag {
         margin: 6rem 0 2rem -2rem;
         width: 50%;
         padding: 1rem 4rem;
     }
 
     #important-note .hero-container, 
     #legal-notices .hero-container, 
	 #leaving-jabil .hero-container, 
     /* #contacts .hero-container,  */
     #index.search .hero-container,
     #important-note .hero-text-container, 
     #legal-notices .hero-text-container,
	 #leaving-jabil .hero-text-container,
     /* #contacts .hero-text-container,  */
     #index.search .hero-text-container { 
         height: auto;
     }
     
     #important-note .hero-text, 
     #legal-notices .hero-text, 
	 #leaving-jabil .hero-text
     /* #contacts .hero-text,  */
     /* #index.search .hero-text  */
     {
         margin-top: 0;
     }
 
     .contacts-grid {
         grid-template-columns: repeat(2, 1fr);
     }

     .socket-container {
         flex-direction: column;
         gap: .5rem;
     }

     .hero-container {
         background-position: 100% 100%;
         background-size: cover;
     }

     .sidebar-section.this-page {
         display: none;
     }
 }
 
 @media only screen and (max-width:479px) {
     #index .hero-text-container {
         position: absolute;
         top: 100%;
         width: 100%;
         left: 0;
         height: auto;
     }

     .hero-text-container {
         width: 100%;
     }

     .banner-text .square-btn {
         display: block;
     }

     .header-grid {
         flex-direction: column;
         padding: 1rem;
     }
	 
	 .new-item:before {
		 margin-right: 10px;
	 }
 
     .utility-container {
         justify-content: flex-start;
         gap: 1rem;
         flex-wrap: wrap;
     }

     .search-form,
     .search-field {
        width: 100%;
     }
 
     nav {
         top: 125px;
         max-height: 75vh;
     }

     #index .page-content {
        margin-top: 230px;
    }

    #index.search .page-content {
        margin-top: 0;
    }
 
     .full-width-row {
         margin: 0 -1rem;
     }
 
     .page-content, 
     .full-width-container, 
     .socket-container {
         padding: 1rem;
     }
 
     .full-width-container,
     .benefits-for-all {
         padding: 0;
     }
 
     .benefits-for-all {
         background-image: none!important;
     }
 
     .benefits-for-all > .flag {
         margin: 0 0 2rem;
         width: 100%;   
     }
 
     .col2-row-grid,
     .whats-new-grid,
     .main-footer-grid {
         grid-template-columns: 1fr;
         grid-gap: 2rem;
     }

     .details,
     .date-section {
         flex: 2;
         width: auto;
     }

     .quick-links-grid {
         margin: 0 1rem;
     }

     .home-featured-grid {
         grid-template-columns: 100%;
         background-size: 200%;
         background-position: 100% 100%;
     }

     .home-featured-grid .left {
         padding: 0 2.5rem;
     }

     .event-section-top {
         flex-direction: column;
         gap: 1rem;
     }

     .home-featured-grid .right img {
         height: auto;
     }
 
     #index h2,
     .footer-contact-container h4  {
         line-height: 1.2;
     }
 
     .jabil-experience {
         flex-direction: column;
     }
 
     #index .hero-container {
         background-position: 75% center;
         height: auto;
     }

     .hero-container {
         background-position: 100% 100%;
         background-size: 200%;
     }

     .contacts-grid {
         grid-template-columns: 1fr;
     }

     #footer-menu {
         grid-template-columns: 100%;
     }
 } 
 
 @media print {
     header {
         position: absolute;
         width: 100%;
         top: 0;
         left: 0;
         box-shadow: none;
     }

     .header-grid,
     .page-content {
         width: 100%;
     }

     footer,
     .square-btn,
     .wired-btn,
     .whats-new,
     #index .right,
     nav,
     .utility-container,
     .resources,
     .socket-container,
     .contact-btm-container,
     .sidebar-section.this-page {
         display: none;
     }
     
     p,
     li,
     .notes,
     .contact-tile,
     .section-container,
     .link-card {
         page-break-inside: avoid;
     }

     .break-before {
        page-break-before: always;
     }

     h1,
     .page-content h2,
     h3,
     h4,
     h5 {
         color: #003865;
     }

     p,
     .link-card *,
     .banner-text p {
         color: black;
     }

     a {
         color:inherit;
         text-decoration: none;
     }
     th {
         background-color: #003865;
     }
 
     th,
     th p {
         color: white;
     }
     
     .hero-container {
         min-height: 0;
         padding: 0;
     }
     
     .hero-text-container {
         width: 100%;
     }
     
     .hero-text {
         padding: 2rem;
     }

     .hero-text h1 {
         margin-top: 5rem;
     }
     
     .banner-container {
         background-color: #003865;
         padding: 2rem 0;
     }
     
     /*.jabil-banner {*/
     /*       background-image: url(/wp-content/uploads/Jabil-2020-AE_point-of-lights-strip-scaled-1.jpeg);*/
     /*}*/

     /*#index .hero-text-container {*/
     /*    background-image: url(/wp-content/uploads/home_hero-left-ii.svg), url(/wp-content/uploads/home_hero-right-ii.svg);*/
     /*}*/

     /*.hero-text-container {*/
     /*    background-image: url(/wp-content/uploads/page_hero-left-ii.svg), url(/wp-content/uploads/page_hero-right-ii.svg);*/
     /*}*/
     
     /*.notes:before {*/
     /*    content: url(/wp-content/uploads/icon_lightbulb.svg);*/
     /*}*/
 
     /*.notes {*/
     /*    background-color: #F1FBFE;*/
     /*    margin-top: 2rem;*/
     /*}*/

    /*.page-id-103 .notes,*/
    /*.page-id-173 .notes,*/
    /*.page-id-182 .notes,*/
    /*.page-id-184 .notes,*/
    /*.page-id-245 .notes,*/
    /*.page-id-250 .notes {*/
    /*    display: none!important;*/
    /* }*/
     
     .jabil-experience:after {
         content: url(/wp-content/uploads/jabil_experience_all_icons.svg);
         width: 120px;
     }
     
     /* Home Page */
     .pale-blue {
         background-color: #F1FBFE;
     }
     
     .benefit-for-all-grid {
         width: 50%!important;
         margin: 0 auto!important;
     }
     
     .benefit-tile {
         box-shadow: none;
         border: 1px solid black;
     }

    .home-featured-grid,
    .main-footer-grid,
    .benefits-cards-grid,
    .home-event-grid,
    .quick-links-grid,
    .content-grid.has_sidebar {
        grid-template-columns: 100%;
    }
     
     /* Medical Page */
     #medical table {
        table-layout: fixed;
     }

     #medical th,
     #medical td,
     .med-table th,
     .med-table td {
        width: 25%!important;
     }
     
     /* Contacts Page */
     .contacts-grid {
         grid-template-columns: 50% 50%!important;
         grid-gap: 1rem!important;
     }
     
     .contact-tile {
         padding: 1rem;
         box-shadow: none;
         grid-gap: 1rem;
     }
     
     /* Important Note Page */
     #important-note .notes {
         display: none;
     }

     /*Dynamic Tables*/
     .table-select-container {
        display: none;
     }

     table.drop-down tr th:not(:first-of-type),
     table.drop-down td:not(:first-of-type),
     table.drop-down tr th,
     table.drop-down tr td {
        display: revert!important;
     }
 }