/* Colors */
:root {
--color-primary: #1B5039; /* green */
--color-primary-dark: #0D2E21; /* dark green */
--color-secondary: #CFB400; /* gold */
--color-secondary-dark: #806F00; /* gold - darker brownish */
--color-modal-bg: rgba(13, 46, 33, 0.9);
--color-input-border: #ccc;
--color-box-bg: #f4f4f4;
--color-border-light: #e5e7eb;
--color-border-dark: #ccc;
--color-input-border-focus: rgba(32, 90, 65, 1);
--color-input-border-focus-box-shadow: rgba(32, 90, 65, 0.25);
--color-section-bg: #F9F6EF; /* cream */
--color-tag-bg: #F0EBD8; /* beige */
}
.convertforms,
.convertforms * {
--color-primary: #1B5039!important;
--color-secondary: #CFB400!important;
}
/* General */
@media screen and (max-width: 575px) {
#sp-main-body {
padding: 30px 0;
}
}
@media screen and (min-width: 576px) and (max-width: 767px) {
#sp-main-body {
padding: 45px 20px;
}
}
@media screen and (min-width: 768px) {
#sp-main-body {
padding: 60px 30px;
}
}
#sp-main-body > .container {
animation-duration: 800ms;
animation-name: fadeIn;
}
hr {
border-top: 1px solid #ccc!important;
margin-top: 35px !important;
margin-bottom: 35px !important;
opacity: 1;
}
.sp-pagebuilder-page-edit {
display: none!important;
}
.article-list .article .featured-article-badge,
.article-details .featured-article-badge,
.article-can-edit {
display: none!important;
}
.com-finder p {
margin-bottom: 1rem!important;
}
.com-users-login button.input-password-toggle {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
/* Fonts */
a {
font-weight: 600;
}
a:focus, a:active {
color: #404040;
}
::selection {
background-color: var(--color-primary);
color: #fff;
}
.error-code, .coming-soon-number {
color: #D30000!important;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
margin-bottom: 1rem;
font-weight: 700;
line-height: 1.3;
letter-spacing: 1px;
}
h1.sppb-addon-title, h2.sppb-addon-title, h3.sppb-addon-title, h4.sppb-addon-title, h5.sppb-addon-title, h6.sppb-addon-title {
margin-bottom: 1.5rem;
}
body.view-article .h2:not([itemprop="headline"], .sppb-addon-title), body.view-article .h3:not(.sppb-addon-title), body.view-article .h4:not(.sppb-addon-title), body.view-article .h5:not(.sppb-addon-title), body.view-article .h6:not(.sppb-addon-title) {
margin-top: 2rem;
}
@media screen and (max-width: 574px) {
.h1, h1 {
font-size: 36px;
}
.article-details .article-header h1 {
font-size: 28px;
}
.h2, h2, .article-details .article-header h2 {
font-size: 34px;
}
.h3, h3, .article-details .article-header h3 {
font-size: 32px;
}
.h4, h4, .article-details .article-header h4 {
font-size: 30px;
}
.h5, h5, .article-details .article-header h5 {
font-size: 26px;
}
.h6, h6, .article-details .article-header h6 {
font-size: 22px;
}
}
@media screen and (min-width: 575px) and (max-width: 991px) {
.h1, h1, .article-details .article-header h1 {
font-size: 40px;
}
.h2, h2, .article-details .article-header h2 {
font-size: 36px;
}
.h3, h3, .article-details .article-header h3 {
font-size: 34px;
}
.h4, h4, .article-details .article-header h4 {
font-size: 32px;
}
.h5, h5, .article-details .article-header h5 {
font-size: 28px;
}
.h6, h6, .article-details .article-header h6 {
font-size: 24px;
}
}
@media screen and (min-width: 992px) {
.h1, h1, .article-details .article-header h1 {
font-size: 48px;
}
.h2, h2, .article-details .article-header h2 {
font-size: 44px;
}
.h3, h3, .article-details .article-header h3 {
font-size: 42px;
}
.h4, h4, .article-details .article-header h4 {
font-size: 38px;
}
.h5, h5, .article-details .article-header h5 {
font-size: 34px;
}
.h6, h6, .article-details .article-header h6 {
font-size: 30px;
}
}
/* Serach results */
#search-results .result__title-text {
line-height: 1.4;
}
#search-results .result__title a:hover span {
text-decoration: none;;
}
@media screen and (max-width: 767px) {
#search-form .btn-primary span.icon-search {
margin-right: 0;
}
#search-form .btn-primary {
font-size: 0!important;
padding: 16px 20px 16px 30px!important
}
#search-form .btn-primary .icon-search {
position: relative;
top: 3px;
font-size: 18px!important;
}
}
/* Buttons, links and forms */
.form-control, .form-select {
border-radius: 0;
padding: 14px 18px;
font-size: 18px;
border: 1px solid var(--color-input-border)!important;
box-sizing: border-box!important;
}
input {
font-size: 18px!important;
}
.form-control:focus {
border-color: var(--color-input-border-focus)!important;
box-shadow: 0 0 10px 3px var(--color-input-border-focus-box-shadow)!important;
outline: none!important;
}
.form-select:focus {
border-color: var(--color-input-border-focus)!important;
box-shadow: 0 0 10px 3px var(--color-input-border-focus-box-shadow)!important;
outline: none!important;
}
select.form-control:not([multiple]), select.inputbox:not([multiple]), select:not([multiple]) {
height: auto!important;
border-radius: 0!important;
}
textarea {
border-radius: 0!important;
border: 1px solid var(--color-input-border)!important;
box-sizing: border-box!important;
}
textarea:focus {
border-color: var(--color-input-border-focus)!important;
box-shadow: 0 0 10px 3px var(--color-input-border-focus-box-shadow)!important;
outline: none!important;
}
input[type="text"]:not(.form-control),
input[type="email"]:not(.form-control),
input[type="url"]:not(.form-control),
input[type="date"]:not(.form-control),
input[type="password"]:not(.form-control),
input[type="search"]:not(.form-control),
input[type="tel"]:not(.form-control),
input[type="number"]:not(.form-control),
select:not(.form-select):not(.form-control) {
padding: 18px!important;
border-radius: 0!important;
border: 1px solid var(--color-input-border)!important;
box-sizing: border-box!important;
}
input[type="text"]:not(.form-control):focus,
input[type="email"]:not(.form-control):focus,
input[type="url"]:not(.form-control):focus,
input[type="date"]:not(.form-control):focus,
input[type="password"]:not(.form-control):focus,
input[type="search"]:not(.form-control):focus,
input[type="tel"]:not(.form-control):focus,
input[type="number"]:not(.form-control):focus,
select:not(.form-select):not(.form-control):focus {
border-color: var(--color-input-border-focus)!important;
box-shadow: 0 0 10px 3px var(--color-input-border-focus-box-shadow)!important;
outline: none!important;
}
.btn, .btn-primary, .sppb-btn-primary {
display: inline-block!important;
position: relative!important;
white-space: nowrap!important;
color: #fff!important;
background-color: var(--color-primary)!important;
font-size: 14px!important;
line-height: 16px!important;
font-weight: 700!important;
letter-spacing: 1.2px!important;
text-transform: uppercase!important;
border: none!important;
border-radius: 0!important;
padding: 18px 32px!important;
transition: all 0.3s ease!important;
}
.btn:hover, .btn-primary:hover, .sppb-btn-primary:hover,
.btn:active, .btn-primary:active, .sppb-btn-primary:active {
color: var(--color-primary)!important;
background-color: var(--color-secondary)!important;
}
.btn:focus, .btn-primary:focus, .sppb-btn-primary:focus {
color: #fff!important;
background-color: var(--color-primary-dark)!important;
outline: 3px solid var(--color-primary)!important;
}
.btn:focus:not(:focus-visible),
.btn-primary:focus:not(:focus-visible),
.sppb-btn-primary:focus:not(:focus-visible) {
outline: none!important;
}
.btn-secondary, .sppb-btn-secondary {
display: inline-block!important;
position: relative!important;
white-space: nowrap!important;
color: #fff!important;
background-color: #6b7280!important;
font-size: 14px!important;
line-height: 16px!important;
font-weight: 700!important;
letter-spacing: 1.2px!important;
text-transform: uppercase!important;
border: none!important;
border-radius: 0!important;
padding: 18px 32px!important;
transition: all 0.3s ease!important;
}
.btn-secondary:hover, .sppb-btn-secondary:hover,
.btn-secondary:active, .sppb-btn-secondary:active {
color: #fff!important;
background-color: var(--color-primary)!important;
}
.btn-secondary:focus, .sppb-btn-secondary:focus {
color: #fff!important;
background-color: #4b5563!important;
outline: 3px solid #6b7280!important;
}
.btn-secondary:focus:not(:focus-visible),
.sppb-btn-secondary:focus:not(:focus-visible) {
outline: none!important;
}
/* Gold arrow button */
.btn-yellow-arrow {
display: inline-block !important;
position: relative !important;
white-space: nowrap !important;
color: var(--color-primary) !important;
background-color: var(--color-secondary) !important;
font-size: 14px !important;
line-height: 20px !important;
font-weight: 700 !important;
letter-spacing: 1.2px !important;
text-transform: uppercase !important;
border: 1px solid var(--color-secondary) !important;
border-radius: 0 !important;
padding: 18px 62px 18px 32px !important;
transition: all 0.3s ease !important;
}
.btn-yellow-arrow::after {
content: "";
position: absolute;
top: 50%;
right: 32px;
width: 16px;
height: 16px;
margin-top: -8px;
background-color: var(--color-primary);
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
transition: transform 0.3s ease;
}
.btn-yellow-arrow:hover::after,
.btn-yellow-arrow:focus-visible::after {
transform: translateX(6px);
}
.btn-yellow-arrow:hover,
.btn-yellow-arrow:active {
color: var(--color-primary) !important;
filter: brightness(1.05);
}
.btn-yellow-arrow:focus {
background-color: var(--color-primary) !important;
color: #fff !important;
outline: 3px solid var(--color-primary) !important;
border-color: var(--color-primary) !important;
}
.btn-yellow-arrow:focus::after {
background-color: #fff;
}
.btn-yellow-arrow:focus:not(:focus-visible) {
outline: none !important;
}
/* Green arrow button */
.btn-green-arrow {
display: inline-block !important;
position: relative !important;
white-space: nowrap !important;
color: #fff !important;
background-color: var(--color-primary) !important;
font-size: 14px !important;
line-height: 20px !important;
font-weight: 700 !important;
letter-spacing: 1.2px !important;
text-transform: uppercase !important;
border: 1px solid var(--color-primary) !important;
border-radius: 0 !important;
padding: 18px 62px 18px 32px !important;
transition: all 0.3s ease !important;
}
.btn-green-arrow::after {
content: "";
position: absolute;
top: 50%;
right: 32px;
width: 16px;
height: 16px;
margin-top: -8px;
background-color: #fff;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
transition: transform 0.3s ease;
}
.btn-green-arrow:hover::after,
.btn-green-arrow:focus-visible::after {
transform: translateX(6px);
}
.btn-green-arrow:hover,
.btn-green-arrow:active {
color: #fff !important;
filter: brightness(1.15);
}
.btn-green-arrow:focus {
background-color: var(--color-primary-dark) !important;
color: #fff !important;
outline: 3px solid var(--color-primary) !important;
border-color: var(--color-primary-dark) !important;
}
.btn-green-arrow:focus::after {
background-color: #fff;
}
.btn-green-arrow:focus:not(:focus-visible) {
outline: none !important;
}
/* White outline button*/
.btn-white-outline {
display: inline-block !important;
position: relative !important;
white-space: nowrap !important;
color: #fff !important;
background-color: transparent !important;
font-size: 14px !important;
line-height: 20px !important;
font-weight: 500 !important;
letter-spacing: 1.2px !important;
text-transform: uppercase !important;
border: 1px solid rgba(255, 255, 255, 0.4) !important;
border-radius: 0 !important;
padding: 18px 32px !important;
transition: all 0.3s ease !important;
}
.btn-white-outline:hover,
.btn-white-outline:active {
color: #fff !important;
border-color: #fff !important;
}
.btn-white-outline:focus {
background-color: var(--color-primary) !important;
border-color: var(--color-primary) !important;
outline: 3px solid var(--color-primary) !important;
}
.btn-white-outline:focus:not(:focus-visible) {
outline: none !important;
}
/* Dark outline button */
.btn-outline-dark {
display: inline-block !important;
position: relative !important;
white-space: nowrap !important;
color: var(--color-primary) !important;
background-color: transparent !important;
font-size: 14px !important;
line-height: 20px !important;
font-weight: 700 !important;
letter-spacing: 1.2px !important;
text-transform: uppercase !important;
border: 1px solid rgba(32, 90, 65, 0.45) !important;
border-radius: 0 !important;
padding: 18px 32px !important;
transition: all 0.3s ease !important;
}
.btn-outline-dark:hover,
.btn-outline-dark:active {
color: var(--color-primary) !important;
background-color: rgba(32, 90, 65, 0.05) !important;
border-color: var(--color-primary) !important;
}
.btn-outline-dark:focus {
background-color: var(--color-primary) !important;
color: #fff !important;
border-color: var(--color-primary) !important;
outline: 3px solid var(--color-primary) !important;
}
.btn-outline-dark:focus:not(:focus-visible) {
outline: none !important;
}
/* Text link with gold arrow circle */
.btn-text-arrow {
display: inline-flex !important;
align-items: center;
gap: 12px;
position: relative !important;
white-space: nowrap !important;
background: none !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: 1.8px !important;
text-transform: uppercase;
}
.btn-text-arrow:hover,
.btn-text-arrow:focus,
.btn-text-arrow:active {
color: inherit !important;
background: none !important;
text-decoration: none !important;
}
.btn-text-arrow:hover {
color: var(--color-primary) !important;
}
.btn-text-arrow::after {
content: "";
display: block;
width: 32px;
height: 32px;
flex-shrink: 0;
background-color: var(--color-secondary);
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: center;
background-size: 14px 14px;
border-radius: 999px;
transition: width 0.25s ease;
}
.btn-text-arrow:hover::after,
.btn-text-arrow:focus-visible::after {
width: 40px;
}
.btn-text-arrow:focus {
outline: none !important;
}
.btn-text-arrow:focus-visible {
outline: 1px solid var(--color-primary) !important;
outline-offset: 3px;
}
/* Gold arrow link */
.link-gold-arrow {
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
white-space: nowrap !important;
color: var(--color-secondary-dark) !important;
background-color: transparent !important;
font-size: 14px !important;
line-height: 18px !important;
font-weight: 700 !important;
letter-spacing: 1.2px !important;
text-transform: uppercase !important;
text-decoration: none !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
transition: color 0.3s ease !important;
}
.link-gold-arrow::after {
content: "";
width: 14px;
height: 14px;
flex-shrink: 0;
background-color: var(--color-secondary-dark);
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
transition: transform 0.3s ease, background-color 0.3s ease;
}
.link-gold-arrow:hover,
.link-gold-arrow:active,
.link-gold-arrow:focus {
color: var(--color-secondary-dark) !important;
background-color: transparent !important;
}
.link-gold-arrow:hover::after,
.link-gold-arrow:focus-visible::after {
transform: translateX(6px);
}
/* Green arrow link */
.link-green-arrow {
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
white-space: nowrap !important;
color: var(--color-primary) !important;
background-color: transparent !important;
font-size: 14px !important;
line-height: 18px !important;
font-weight: 700 !important;
letter-spacing: 1.2px !important;
text-transform: uppercase !important;
text-decoration: none !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
transition: color 0.3s ease !important;
}
.link-green-arrow::after {
content: "";
width: 14px;
height: 14px;
flex-shrink: 0;
background-color: var(--color-primary);
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
transition: transform 0.3s ease, background-color 0.3s ease;
}
.link-green-arrow:hover,
.link-green-arrow:active,
.link-green-arrow:focus {
color: var(--color-primary) !important;
background-color: transparent !important;
}
.link-green-arrow:hover::after,
.link-green-arrow:focus-visible::after {
transform: translateX(6px);
}
/* Green email signup button */
.btn-green-email {
display: inline-block !important;
position: relative !important;
white-space: nowrap !important;
color: #fff !important;
background-color: var(--color-primary) !important;
font-size: 14px !important;
line-height: 20px !important;
font-weight: 700 !important;
letter-spacing: 1.2px !important;
text-transform: uppercase !important;
border: 1px solid var(--color-primary) !important;
border-radius: 0 !important;
padding: 18px 62px 18px 32px !important;
transition: all 0.3s ease !important;
}
.btn-green-email::after {
content: "";
position: absolute;
top: 50%;
right: 32px;
width: 16px;
height: 16px;
margin-top: -8px;
background-color: #fff;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
transition: transform 0.3s ease;
}
.btn-green-email:hover::after,
.btn-green-email:focus-visible::after {
transform: translateX(6px);
}
.btn-green-email:hover,
.btn-green-email:active {
color: #fff !important;
filter: brightness(1.15);
}
.btn-green-email:focus {
background-color: var(--color-primary-dark) !important;
color: #fff !important;
outline: 3px solid var(--color-primary) !important;
border-color: var(--color-primary-dark) !important;
}
.btn-green-email:focus::after {
background-color: #fff;
}
.btn-green-email:focus:not(:focus-visible) {
outline: none !important;
}
/* Gold email signup button */
.btn-gold-email {
display: inline-block !important;
position: relative !important;
white-space: nowrap !important;
color: var(--color-primary) !important;
background-color: var(--color-secondary) !important;
font-size: 14px !important;
line-height: 20px !important;
font-weight: 700 !important;
letter-spacing: 1.2px !important;
text-transform: uppercase !important;
border: 1px solid var(--color-secondary) !important;
border-radius: 0 !important;
padding: 18px 62px 18px 32px !important;
transition: all 0.3s ease !important;
}
.btn-gold-email::after {
content: "";
position: absolute;
top: 50%;
right: 32px;
width: 16px;
height: 16px;
margin-top: -8px;
background-color: var(--color-primary);
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
transition: transform 0.3s ease;
}
.btn-gold-email:hover::after,
.btn-gold-email:focus-visible::after {
transform: translateX(6px);
}
.btn-gold-email:hover,
.btn-gold-email:active {
color: var(--color-primary) !important;
filter: brightness(1.05);
}
.btn-gold-email:focus {
background-color: var(--color-primary) !important;
color: #fff !important;
outline: 3px solid var(--color-primary) !important;
border-color: var(--color-primary) !important;
}
.btn-gold-email:focus::after {
background-color: #fff;
}
.btn-gold-email:focus:not(:focus-visible) {
outline: none !important;
}
/* Transparent outline button */
.btn-transparent-outline-light {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
width: 100% !important;
white-space: nowrap !important;
color: var(--color-primary) !important;
background-color: transparent !important;
font-size: 14px !important;
line-height: 16px !important;
font-weight: 700 !important;
letter-spacing: 1.2px !important;
text-transform: uppercase !important;
border: 1px solid rgba(32, 90, 65, 0.2) !important;
border-radius: 0 !important;
padding: 18px 32px !important;
transition: all 0.3s ease !important;
}
.btn-transparent-outline-light:hover,
.btn-transparent-outline-light:active {
color: var(--color-primary) !important;
border-color: var(--color-primary) !important;
background-color: rgba(32, 90, 65, 0.04) !important;
}
.btn-transparent-outline-light:focus {
background-color: var(--color-primary) !important;
color: #fff !important;
border-color: var(--color-primary) !important;
outline: 3px solid var(--color-primary) !important;
}
.btn-transparent-outline-light:focus:not(:focus-visible) {
outline: none !important;
}
/* Gold dollar button */
.btn-gold-dollar {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 12px !important;
white-space: nowrap !important;
color: var(--color-primary) !important;
background-color: var(--color-secondary) !important;
font-size: 14px !important;
line-height: 20px !important;
font-weight: 600 !important;
letter-spacing: 1.2px !important;
text-transform: uppercase !important;
border: 1px solid var(--color-secondary) !important;
border-radius: 0 !important;
padding: 18px 32px !important;
transition: all 0.3s ease !important;
}
.btn-gold-dollar::after {
content: "";
width: 16px;
height: 16px;
flex-shrink: 0;
background-color: var(--color-primary);
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
transition: transform 0.3s ease;
}
.btn-gold-dollar:hover,
.btn-gold-dollar:active {
color: var(--color-primary) !important;
filter: brightness(1.05);
}
.btn-gold-dollar:hover::after,
.btn-gold-dollar:focus-visible::after {
transform: translateX(6px);
}
.btn-gold-dollar:focus {
background-color: #fff !important;
color: var(--color-primary) !important;
border-color: #fff !important;
outline: 3px solid #fff !important;
}
.btn-gold-dollar:focus::after {
background-color: var(--color-primary);
}
.btn-gold-dollar:focus:not(:focus-visible) {
outline: none !important;
}
/* Green dollar button */
.btn-green-dollar {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 12px !important;
white-space: nowrap !important;
color: #fff !important;
background-color: var(--color-primary) !important;
font-size: 14px !important;
line-height: 20px !important;
font-weight: 600 !important;
letter-spacing: 1.2px !important;
text-transform: uppercase !important;
border: 1px solid var(--color-primary) !important;
border-radius: 0 !important;
padding: 18px 32px !important;
transition: all 0.3s ease !important;
}
.btn-green-dollar::after {
content: "";
width: 16px;
height: 16px;
flex-shrink: 0;
background-color: #fff;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
transition: transform 0.3s ease;
}
.btn-green-dollar:hover,
.btn-green-dollar:active {
color: #fff !important;
filter: brightness(1.15);
}
.btn-green-dollar:hover::after,
.btn-green-dollar:focus-visible::after {
transform: translateX(6px);
}
.btn-green-dollar:focus {
background-color: var(--color-primary-dark) !important;
color: #fff !important;
border-color: var(--color-primary-dark) !important;
outline: 3px solid var(--color-primary) !important;
}
.btn-green-dollar:focus::after {
background-color: #fff;
}
.btn-green-dollar:focus:not(:focus-visible) {
outline: none !important;
}
/* White card arrow button*/
.btn-white-arrow-card {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 16px !important;
width: 100% !important;
white-space: normal !important;
text-align: left !important;
color: var(--color-primary) !important;
background-color: #fff !important;
font-size: 14px !important;
line-height: 20px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
text-transform: none !important;
text-decoration: none !important;
border: 1px solid #e8e4dc !important;
border-radius: 0 !important;
padding: 20px !important;
transition: all 0.3s ease !important;
}
.btn-white-arrow-card::after {
content: "";
width: 13px;
height: 13px;
flex-shrink: 0;
opacity: 0.4;
background-color: var(--color-secondary);
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.btn-white-arrow-card:hover,
.btn-white-arrow-card:active {
color: var(--color-primary) !important;
background-color: #fff !important;
border-color: rgba(207, 180, 0, 0.45) !important;
}
.btn-white-arrow-card:hover::after,
.btn-white-arrow-card:focus-visible::after {
opacity: 1;
transform: translateX(3px);
}
.btn-white-arrow-card:focus {
background-color: #fff !important;
color: var(--color-primary) !important;
border-color: var(--color-primary) !important;
outline: 3px solid var(--color-primary) !important;
}
.btn-white-arrow-card:focus::after {
opacity: 1;
}
.btn-white-arrow-card:focus:not(:focus-visible) {
outline: none !important;
}
/* Beige card arrow button*/
.btn-beige-arrow-card {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 16px !important;
width: 100% !important;
white-space: normal !important;
text-align: left !important;
color: var(--color-primary) !important;
background-color: var(--color-section-bg) !important;
font-size: 14px !important;
line-height: 20px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
text-transform: none !important;
text-decoration: none !important;
border: 1px solid #e8e4dc !important;
border-radius: 0 !important;
padding: 20px !important;
transition: all 0.3s ease !important;
}
.btn-beige-arrow-card::after {
content: "";
width: 13px;
height: 13px;
flex-shrink: 0;
opacity: 0.4;
background-color: var(--color-secondary);
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.btn-beige-arrow-card:hover,
.btn-beige-arrow-card:active {
color: var(--color-primary) !important;
background-color: var(--color-section-bg) !important;
border-color: rgba(207, 180, 0, 0.45) !important;
}
.btn-beige-arrow-card:hover::after,
.btn-beige-arrow-card:focus-visible::after {
opacity: 1;
transform: translateX(3px);
}
.btn-beige-arrow-card:focus {
background-color: var(--color-section-bg) !important;
color: var(--color-primary) !important;
border-color: var(--color-primary) !important;
outline: 3px solid var(--color-primary) !important;
}
.btn-beige-arrow-card:focus::after {
opacity: 1;
}
.btn-beige-arrow-card:focus:not(:focus-visible) {
outline: none !important;
}
/* Green card arrow button*/
.btn-green-arrow-card {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 16px !important;
width: 100% !important;
white-space: normal !important;
text-align: left !important;
color: #fff !important;
background-color: var(--color-primary) !important;
font-size: 14px !important;
line-height: 20px !important;
font-weight: 600 !important;
letter-spacing: 1.1px !important;
text-transform: uppercase !important;
text-decoration: none !important;
border: 1px solid var(--color-primary) !important;
border-radius: 0 !important;
padding: 20px 32px !important;
transition: all 0.3s ease !important;
}
.btn-green-arrow-card::before {
content: "";
width: 22px;
height: 22px;
flex-shrink: 0;
order: -1;
margin-right: 4px;
background-color: var(--color-secondary);
-webkit-mask: var(--psu-card-icon) no-repeat center / contain;
mask: var(--psu-card-icon) no-repeat center / contain;
}
.btn-green-arrow-card::after {
content: "";
width: 14px;
height: 14px;
flex-shrink: 0;
margin-left: auto;
background-color: var(--color-secondary);
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
transition: transform 0.3s ease;
}
.btn-green-arrow-card:hover,
.btn-green-arrow-card:active {
color: #fff !important;
background-color: var(--color-primary) !important;
border-color: var(--color-primary) !important;
filter: brightness(0.9);
}
.btn-green-arrow-card:hover::after,
.btn-green-arrow-card:focus-visible::after {
transform: translateX(4px);
}
.btn-green-arrow-card:focus {
background-color: var(--color-primary-dark) !important;
color: #fff !important;
border-color: var(--color-primary-dark) !important;
outline: 3px solid var(--color-secondary) !important;
}
.btn-green-arrow-card:focus:not(:focus-visible) {
outline: none !important;
}
/* Convert Forms */
#sp-main-body .cf-response p {
margin-bottom: 0 !important;
}
#sp-main-body .cf-heading {
font-family: 'Poppins', sans-serif !important;
}
#sp-main-body .cf-label {
margin-top: 12px!important;
font-weight: 500;
}
#sp-main-body .convertforms input, .convertforms textarea, .convertforms select {
font-size: 18px!important;
color: #252525!important;
}
#sp-main-body .convertforms input {
height: 54px;
}
#sp-main-body input::placeholder,
#sp-main-body textarea::placeholder {
color: #606060;
}
#sp-main-body .convertforms .cf-content-wrap, #sp-main-body .convertforms .cf-form-wrap, #sp-bottom1 .convertforms .cf-form-wrap {
padding: 0 !important;
}
#sp-main-body .cf-control-input h1, #sp-main-body .cf-control-input h2, #sp-main-body .cf-control-input h3, #sp-main-body .cf-control-input h4, #sp-main-body .cf-control-input h5, #sp-main-body .cf-control-input h6 {
margin-top: 0 !important;
margin-bottom: 0 !important;
line-height: 1.2 !important;
}
@media screen and (max-width: 399px) {
.cf-control-input h1 {
font-size: 28px !important;
}
.cf-control-input h2 {
font-size: 26px !important;
}
}
@media screen and (min-width: 400px) and (max-width: 767px) {
.cf-control-input h1 {
font-size: 30px !important;
}
.cf-control-input h2 {
font-size: 28px !important;
}
}
@media screen and (min-width: 768px) {
.cf-control-input h1 {
font-size: 44px !important;
}
.cf-control-input h2 {
font-size: 40px !important;
}
}
#sp-main-body .convertforms .cf-control-input-desc {
font-size: 18px;
opacity: 0.7;
margin-bottom: 20px;
}
/*submit button*/
.cf .cf-submit button,
.cf button.cf-btn {
display: inline-block !important;
position: relative !important;
white-space: nowrap !important;
color: #fff !important;
background-color: var(--color-primary) !important;
font-size: 14px !important;
line-height: 20px !important;
font-weight: 700 !important;
letter-spacing: 1.2px !important;
text-transform: uppercase !important;
border: 1px solid var(--color-primary) !important;
border-radius: 0 !important;
padding: 18px 62px 18px 32px !important;
transition: all 0.3s ease !important;
}
.cf .cf-submit button::after,
.cf button.cf-btn::after {
content: "";
position: absolute;
top: 50%;
right: 32px;
width: 16px;
height: 16px;
margin-top: -8px;
background-color: #fff;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
transition: transform 0.3s ease;
}
.cf .cf-submit button:hover::after,
.cf .cf-submit button:focus-visible::after,
.cf button.cf-btn:hover::after,
.cf button.cf-btn:focus-visible::after {
transform: translateX(6px);
}
.cf .cf-submit button:hover,
.cf .cf-submit button:active,
.cf button.cf-btn:hover,
.cf button.cf-btn:active {
color: #fff !important;
filter: brightness(1.15);
}
.cf .cf-submit button:focus,
.cf button.cf-btn:focus {
background-color: var(--color-primary-dark) !important;
color: #fff !important;
outline: 3px solid var(--color-primary) !important;
border-color: var(--color-primary-dark) !important;
}
.cf .cf-submit button:focus::after,
.cf button.cf-btn:focus::after {
background-color: #fff;
}
.cf .cf-submit button:focus:not(:focus-visible),
.cf button.cf-btn:focus:not(:focus-visible) {
outline: none !important;
}
/**/
.convertforms.cf-success.cf-success-hideform .cf-fields, .convertforms.cf-success.cf-success-hideform .cf-footer {
display: none!important;
}
.convertforms .cf-response p {
margin-bottom: 0!important;
}
/* Logo, top and main menu */
#sp-top-bar {
display: flex;
align-items: center;
background-color: var(--color-primary-dark);
height: 42px;
}
@media screen and (max-width: 991px) {
#sp-top-bar {
display: none !important;
}
}
/*top menu*/
#sp-top-bar > .container > .container-inner,
#sp-top-bar > .container > .container-inner > .row {
height: 100%;
}
#sp-top-bar ul {
display: flex;
list-style: none;
font-size: 14px;
margin: 0;
padding: 0;
gap: 35px;
}
/*top1*/
#sp-top1 .sp-module {
margin: 0 0 0 12px!important;
}
#sp-top1 ul li {
position: relative;
}
#sp-top1 ul li:not(:last-child)::after {
content: "";
position: absolute;
top: 50%;
right: -18px;
transform: translateY(-50%);
width: 1px;
height: 12px;
background-color: rgba(255, 255, 255, 0.2);
}
#sp-top1 {
display: flex;
align-items: center;
justify-content: start;
}
#sp-top1 a {
display: flex;
align-items: center;
color: rgba(255, 255, 255, 0.7);
}
#sp-top1 a:hover {
color: #fff;
}
/*top2*/
#sp-top2 ul li {
position: relative;
}
#sp-top2 ul li:not(:last-child)::after {
content: "";
position: absolute;
top: 50%;
right: -18px;
transform: translateY(-50%);
width: 1px;
height: 12px;
background-color: rgba(255, 255, 255, 0.2);
}
#sp-top2 {
display: flex;
align-items: center;
justify-content: end;
}
#sp-top2 a {
display: flex;
align-items: center;
color: rgba(255, 255, 255, 0.7);
}
#sp-top2 a:hover {
color: #fff;
}
/*search on top2*/
#sp-top2 .sp-module-content search {
display: flex;
align-items: center;
}
#sp-top2 .mod-finder .input-group {
display: flex;
align-items: center;
flex-wrap: nowrap;
}
#sp-top2 .mod-finder .psu-search-input {
width: 130px !important;
height: 26px !important;
padding: 0 12px !important;
background-color: rgba(255, 255, 255, 0.1) !important;
color: #fff !important;
font-size: 12px !important;
font-family: inherit;
line-height: 26px !important;
border: none !important;
border-radius: 0 !important;
outline: none;
box-shadow: none !important;
-webkit-appearance: none;
appearance: none;
}
#sp-top2 .mod-finder .psu-search-input::placeholder {
color: rgba(255, 255, 255, 0.4) !important;
font-size: 13px !important;
opacity: 1;
}
#sp-top2 .mod-finder .psu-search-input:focus {
background-color: rgba(255, 255, 255, 0.15) !important;
border: none !important;
box-shadow: none !important;
}
#sp-top2 .mod-finder .psu-search-go {
height: 26px;
padding: 0 12px;
background-color: rgba(207, 180, 0, 0.3);
color: rgba(255, 255, 255, 0.8);
font-size: 13px;
font-family: inherit;
font-weight: 600;
line-height: 26px;
letter-spacing: 0.06em;
border: none;
border-radius: 0;
cursor: pointer;
transition: color 0.2s ease;
-webkit-appearance: none;
appearance: none;
}
#sp-top2 .mod-finder .psu-search-go:hover,
#sp-top2 .mod-finder .psu-search-go:focus-visible {
color: #fff;
background-color: rgba(207, 180, 0, 0.3);
}
/**/
#sp-logo-and-main-menu.header-sticky {
background-color: #fff;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.175);
z-index: 10000;
}
#sp-top-bar > .container {
max-width: 1440px!important;
}
@media screen and (max-width: 991px) {
#sp-logo-and-main-menu {
border-left: 4px solid var(--color-secondary);
}
}
#sp-logo-and-main-menu > .container {
max-width: 1440px!important;
}
.header-sticky {
position: fixed!important;
top: 0;
width: 100%;
animation: spFadeIn 0.8s;
z-index: 10000;
}
#sp-menu {
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 30px;
}
@media screen and (max-width: 1299px) {
#sp-menu {
margin-top: 0;
padding-right: 15px;
}
}
@media screen and (min-width: 576px) and (max-width: 1299px) {
#sp-menu {
padding-right: 17px;
}
}
#sp-logo > .sp-column {
display: flex;
align-items: center;
height: 100%;
}
@media screen and (min-width: 768px) {
#sp-logo > .sp-column {
padding-left: 10px;
}
}
@media screen and (min-width: 992px) {
.logo-image, .logo-image-phone {
height: 58px!important;
padding: 0;
position: relative;
bottom: 7px;
}
}
@media screen and (max-width: 991px) {
#sp-logo-and-main-menu .container > .container-inner > .row {
height: 80px;
}
.logo-image, .logo-image-phone {
height: 58px!important;
padding: 0;
position: relative;
bottom: 7px;
}
#offcanvas-toggler {
height: 80px;
line-height: 80px;
}
}
@media screen and (max-width: 480px) {
#sp-logo-and-main-menu .container > .container-inner > .row {
height: 80px;
flex-wrap: nowrap;
}
.logo-image, .logo-image-phone {
height: 54px!important;
padding: 0;
position: relative;
bottom: 6px;
}
#offcanvas-toggler {
height: 80px;
line-height: 80px;
}
}
@media screen and (max-width: 340px) {
#sp-logo-and-main-menu .container > .container-inner > .row {
height: 70px;
flex-wrap: nowrap;
}
.logo-image, .logo-image-phone {
height: 44px!important;
padding: 0;
position: relative;
bottom: 6px;
}
#offcanvas-toggler {
height: 70px;
line-height: 70px;
}
}
@media screen and (min-width: 992px) and (max-width: 1299px) {
#sp-menu > .sp-column {
margin-right: 0;
}
}
/*header column widths*/
@media screen and (max-width: 991px) {
#sp-logo.col-lg-3 {
flex-grow: 1;
width: auto;
}
#sp-menu.col-lg-9 {
width: 50px;
}
}
@media screen and (min-width: 992px) {
#sp-top1.col-lg-3, #sp-logo.col-lg-3 {
width: 280px;
}
#sp-top2.col-lg-9, #sp-menu.col-lg-9 {
flex-grow: 1;
width: auto;
}
}
.sp-megamenu-parent>li:last-child>a {
padding: 0 15px;
}
.sp-megamenu-parent>li.active>a {
font-weight: 600;
}
.sp-megamenu-parent>li.active>a:hover {
color: #252525;
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
display: block;
line-height: 1.2;
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item>a:hover {
color: var(--color-secondary);
}
.sp-megamenu-parent > li > span {
color: var(--color-primary);
cursor: pointer;
}
.sp-megamenu-parent > li > span:hover {
color: var(--color-secondary);
}
.sp-megamenu-parent>li.active:hover>a {
color: #252525;
}
@media screen and (min-width: 1300px) and (max-width: 1400px) {
.sp-megamenu-parent>li>a, .sp-megamenu-parent>li>span {
padding: 0 10px;
}
}
/*animated underline effect*/
.sp-megamenu-wrapper ul li a,
.sp-megamenu-wrapper ul li > span:not(.apply-now) {
position: relative;
display: inline-block;
white-space: normal;
color: #333;
text-decoration: none;
background: none;
-webkit-text-fill-color: initial;
transition: color 0.2s ease;
}
.sp-megamenu-parent > li > a:not(.apply-now)::before,
.sp-megamenu-parent > li > span:not(.apply-now)::before {
content: "";
position: absolute;
left: 15px;
right: 15px;
bottom: 20px;
height: 2px;
background-color: var(--color-secondary);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.2s ease;
}
.sp-megamenu-parent > li > a:hover::before,
.sp-megamenu-parent > li:hover > span:not(.apply-now)::before {
transform: scaleX(1);
}
.sp-megamenu-wrapper ul li a:hover,
.sp-megamenu-wrapper ul li:hover > span:not(.apply-now) {
color: #252525;
}
.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li.current-item > a {
color: #252525;
font-weight: 700;
}
.sp-megamenu-parent .sp-dropdown.sp-dropdown-main.sp-menu-right {
left: -5px !important;
}
/* apply now main menu item*/
.sp-megamenu-parent .sp-menu-item .apply-now {
display: inline-block;
position: relative;
white-space: nowrap;
margin-left: 12px;
background-color: var(--color-primary);
color: #fff;
font-size: 15px;
font-weight: 700;
line-height: 1.2;
text-align: center;
text-decoration: none;
border: none;
border-radius: 0;
padding: 12px 20px;
cursor: pointer;
transition: background-color 0.25s ease;
}
.sp-megamenu-parent .sp-menu-item .apply-now:hover,
.sp-megamenu-parent .sp-menu-item .apply-now:focus-visible {
background-color: var(--color-secondary);
color: var(--color-primary);
text-decoration: none;
text-shadow: none;
}
.sp-megamenu-parent .sp-menu-item .apply-now:focus {
color: #fff;
outline: none;
}
.sp-megamenu-parent .sp-menu-item .apply-now:focus-visible {
outline: 2px solid transparent;
outline-offset: 2px;
box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--color-primary);
}
.sp-megamenu-parent .sp-menu-item .apply-now:active {
background-color: var(--color-primary-dark);
color: #fff;
}
/**/
/* Offcanvas menu */
.offcanvas-menu {
overflow-y: auto!important;
overflow-x: hidden!important;
border-left: 4px solid var(--color-secondary);
}
.offcanvas-menu > .d-flex {
padding: 24px 16px 5px 16px!important;
}
.offcanvas-menu > .d-flex.align-items-center.p-3.pt-4 {
position: static!important;
}
.offcanvas-menu .offcanvas-inner {
overflow: visible!important;
max-height: none!important;
height: auto!important;
padding: 15px 20px 25px 30px;
}
.offcanvas-menu .offcanvas-inner .header-modules {
margin-bottom: 0!important;
}
.offcanvas-overlay {
background: var(--color-modal-bg)!important;
}
body.ltr .offcanvas-menu .offcanvas-inner ul.menu>li ul {
margin-left: 20px;
}
.offcanvas-menu .offcanvas-inner ul.menu, .offcanvas-menu .offcanvas-inner ul.menu ul {
margin: 0;
}
.offcanvas-menu .logo {
width: 75%;
}
.offcanvas-menu .logo-image {
width: auto!important;
height: 52px!important;
padding: 0 0 0 13px;
}
#offcanvas-toggler {
width: 100%;
font-size: 22px;
font-weight: 400;
z-index: 9;
}
#offcanvas-toggler:hover {
color: #122a57!important;
}
/* switch to mobile menu */
@media screen and (max-width: 1299px) {
#offcanvas-toggler.d-lg-none {
display: flex!important;
}
.sp-megamenu-parent.d-none {
display: none!important;
}
}
.offcanvas-active .burger-icon > span, #modal-menu-toggler.active .burger-icon > span {
background-color: #252525!important;
}
.offcanvas-menu .burger-icon {
margin-right: 6px!important;
margin-top: 10px;
}
#sp-menu .burger-icon {
width: 30px;
}
.offcanvas-active .burger-icon > span {
margin: 3.9px -3px;
}
.burger-icon > span {
background-color: #252525!important;
height: 3px;
border-radius: 5px;
}
@media screen and (max-width: 369px) {
.offcanvas-menu {
width: 100%!important;
}
body.ltr.offcanvs-position-right .offcanvas-menu {
right: -100%;
}
}
@media screen and (min-width: 370px) {
.offcanvas-menu {
width: 370px!important;
}
body.ltr.offcanvs-position-right .offcanvas-menu {
right: -370px;
}
}
body.ltr #offcanvas-toggler.offcanvas-toggler-right {
margin-right: 5px;
}
.offcanvas-toggler-right .burger-icon > span,
.offcanvas-menu .offcanvas-inner ul.menu > li a, .offcanvas-menu .offcanvas-inner ul.menu > li span,
.offcanvas-menu .offcanvas-inner ul.menu > li.active > a,
.offcanvas-menu .offcanvas-inner ul.menu li.active a,
.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > a:focus > .menu-toggler,
.offcanvas-menu .offcanvas-inner ul.menu > li li a,
.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > a > .menu-toggler,
.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > a:hover > .menu-toggler {
color: #252525;
}
.offcanvas-menu .offcanvas-inner ul.menu > li a:hover, .offcanvas-menu .offcanvas-inner ul.menu > li a:focus, .offcanvas-menu .offcanvas-inner ul.menu > li span:hover, .offcanvas-menu .offcanvas-inner ul.menu > li span:focus {
color: var(--color-primary);
}
.offcanvas-menu .offcanvas-inner ul.menu>li>a, .offcanvas-menu .offcanvas-inner ul.menu>li>span {
font-size: 20px;
line-height: 20px;
}
.offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent li.menu-parent .menu-toggler {
right: 0!important;
top: auto!important;
margin-top: -14px;
font-size: 20px;
}
.offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent .menu-toggler {
color: #252525;
}
.offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent .nav-header {
display: block;
cursor: pointer;
font-size: 20px;
}
.offcanvas-menu ul.menu-child li {
padding: 5px;
}
.offcanvas-menu .offcanvas-inner ul.menu > li > ul li a {
font-size: 19px;
display: flex;
font-weight: 700;
line-height: 1.4;
}
.offcanvas-menu .offcanvas-inner ul.menu > li > a.open-search-icon {
display: none!important;
}
.offcanvas-menu .offcanvas-inner ul.menu > li > a, .offcanvas-menu .offcanvas-inner ul.menu > li > span {
opacity: 1;
padding: 11px 10px 11px 0;
}
.offcanvas-menu .offcanvas-inner .sp-module {
width: 100%;
}
.offcanvas-menu .offcanvas-inner .sp-module:not(:last-child) {
margin-bottom: 10px;
}
/* apply now btn - offcanvas */
.offcanvas-menu .item-124 {
padding: 10px 0 !important;
}
.offcanvas-menu li .apply-now {
display: inline-block !important;
width: 100%;
margin-top: 5px;
padding: 12px 20px !important;
background-color: var(--color-primary) !important;
color: #fff !important;
font-size: 17px !important;
font-weight: 700 !important;
text-align: center;
text-decoration: none;
text-transform: none;
border: none;
border-radius: 0;
cursor: pointer;
transition: background-color 0.25s ease !important;
}
.offcanvas-menu li .apply-now:hover,
.offcanvas-menu li .apply-now:focus-visible {
background-color: var(--color-secondary);
color: #fff !important;
text-decoration: none;
text-shadow: none;
}
.offcanvas-menu li .apply-now:focus {
color: #fff;
outline: none;
}
.offcanvas-menu li .apply-now:focus-visible {
outline: 2px solid transparent;
outline-offset: 2px;
box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--color-primary);
}
.offcanvas-menu li .apply-now:active {
background-color: var(--color-primary-dark) !important;
color: #fff;
}
/* top menus */
.offcanvas-menu .offcanvas-inner {
display: block !important;
}
.offcanvas-menu .top-left-menu-offcanvas a,
.offcanvas-menu .top-right-menu-offcanvas a {
font-size: 16px!important;
display: flex!important;
font-weight: 500!important;
line-height: 1.2!important;
}
.offcanvas-menu .offcanvas-inner .sp-module.top-left-menu-offcanvas,
.offcanvas-menu .offcanvas-inner .sp-module.top-right-menu-offcanvas {
display: inline-flex !important;
width: auto !important;
margin: 0 !important;
vertical-align: middle;
}
.offcanvas-menu .offcanvas-inner .sp-module.top-left-menu-offcanvas .sp-module-content,
.offcanvas-menu .offcanvas-inner .sp-module.top-right-menu-offcanvas .sp-module-content {
display: inline-flex !important;
width: auto !important;
}
.offcanvas-menu .offcanvas-inner .sp-module.top-left-menu-offcanvas,
.offcanvas-menu .offcanvas-inner .sp-module.top-right-menu-offcanvas,
.offcanvas-menu .offcanvas-inner .sp-module.top-left-menu-offcanvas .sp-module-content,
.offcanvas-menu .offcanvas-inner .sp-module.top-right-menu-offcanvas .sp-module-content,
.offcanvas-menu .offcanvas-inner .sp-module.top-left-menu-offcanvas ul.menu,
.offcanvas-menu .offcanvas-inner .sp-module.top-right-menu-offcanvas ul.menu {
display: inline !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
list-style: none;
}
.offcanvas-menu .offcanvas-inner .sp-module.top-left-menu-offcanvas ul.menu li,
.offcanvas-menu .offcanvas-inner .sp-module.top-right-menu-offcanvas ul.menu li {
display: inline-flex !important;
width: auto !important;
align-items: center;
margin: 0 !important;
padding: 0 !important;
border: none !important;
float: none;
}
.offcanvas-menu .offcanvas-inner .sp-module.top-left-menu-offcanvas ul.menu li::after,
.offcanvas-menu .offcanvas-inner .sp-module.top-right-menu-offcanvas ul.menu li:not(:last-child)::after {
content: "";
width: 1px;
height: 14px;
margin: 0 8px 0 0;
background-color: rgba(13, 46, 33, 0.25);
}
.offcanvas-menu .offcanvas-inner .top-left-menu-offcanvas ul.menu > li > a,
.offcanvas-menu .offcanvas-inner .top-left-menu-offcanvas ul.menu > li > span,
.offcanvas-menu .offcanvas-inner .top-right-menu-offcanvas ul.menu > li > a,
.offcanvas-menu .offcanvas-inner .top-right-menu-offcanvas ul.menu > li > span {
padding: 9px 9px 9px 0 !important;
}
.offcanvas-menu .offcanvas-inner .sp-module.top-right-menu-offcanvas {
margin-left: -5px !important;
}
/*search*/
.offcanvas-menu .search-offcanvas {
margin-top: 15px !important;
}
.offcanvas-menu .search-offcanvas .mod-finder__search {
display: flex;
width: 100%;
}
.offcanvas-menu .search-offcanvas .psu-search-input {
flex: 1;
width: auto;
height: 44px;
padding: 0 8px !important;
font-size: 14px !important;
background: rgba(255, 255, 255, 0.1) !important;
border: 1px solid var(--color-input-border) !important;
border-radius: 0;
box-shadow: none !important;
}
.offcanvas-menu .search-offcanvas .psu-search-go {
flex-shrink: 0;
height: 44px;
padding: 0 10px;
font-size: 15px;
font-weight: 700;
color: #fff;
background: var(--color-primary);
border: none;
border-radius: 0;
cursor: pointer;
}
/* lite-youtube + lite-vimeo */
lite-youtube > .lty-playbtn,
lite-youtube > .lyt-playbtn,
lite-vimeo > .ltv-playbtn {
position: absolute;
display: inline-block;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: none!important;
cursor: pointer;
z-index: 1;
filter: none!important;
transition: none!important;
border: 0;
}
lite-youtube > .lty-playbtn::before,
lite-youtube > .lyt-playbtn::before,
lite-vimeo > .ltv-playbtn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 104px;
height: 104px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.3);
transition: transform 0.3s ease, border-color 0.3s ease;
}
lite-youtube > .lty-playbtn::after,
lite-youtube > .lyt-playbtn::after,
lite-vimeo > .ltv-playbtn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 76px;
height: 76px;
border-radius: 50%;
background-color: rgba(207, 180, 0, 0.5);
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2011%2014%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M0%200v14l11-7z%22%2F%3E%3C%2Fsvg%3E");
background-size: 19px 24px;
background-repeat: no-repeat;
background-position: calc(50% + 2px) 50%;
border: 1px solid rgba(207, 180, 0, 0.7);
transition: background-color 0.3s ease, border-color 0.3s ease;
}
lite-youtube > .lty-playbtn:hover::before,
lite-youtube > .lyt-playbtn:hover::before,
lite-vimeo > .ltv-playbtn:hover::before {
transform: translate(-50%, -50%) scale(1.1);
border-color: rgba(207, 180, 0, 0.5);
}
lite-youtube > .lty-playbtn:hover::after,
lite-youtube > .lyt-playbtn:hover::after,
lite-vimeo > .ltv-playbtn:hover::after {
background-color: var(--color-secondary);
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2011%2014%22%3E%3Cpath%20fill%3D%22%23205A41%22%20d%3D%22M0%200v14l11-7z%22%2F%3E%3C%2Fsvg%3E");
border-color: var(--color-secondary);
}
@media screen and (max-width: 575px) {
lite-youtube > .lty-playbtn::before,
lite-youtube > .lyt-playbtn::before,
lite-vimeo > .ltv-playbtn::before {
width: 76px;
height: 76px;
}
lite-youtube > .lty-playbtn::after,
lite-youtube > .lyt-playbtn::after,
lite-vimeo > .ltv-playbtn::after {
width: 56px;
height: 56px;
background-size: 14px 18px;
}
}
lite-youtube,
lite-vimeo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: 105%;
background-position: center;
max-width: 100%!important;
transition: background-size 0.5s ease;
}
lite-youtube::before,
lite-vimeo::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: none;
z-index: 0;
pointer-events: none;
-webkit-backdrop-filter: saturate(0.8) brightness(0.95);
backdrop-filter: saturate(0.8) brightness(0.95);
transition: -webkit-backdrop-filter 0.5s ease, backdrop-filter 0.5s ease;
}
lite-youtube:hover,
lite-vimeo:hover {
background-size: 110%;
}
lite-youtube:hover::before,
lite-vimeo:hover::before {
-webkit-backdrop-filter: saturate(1) brightness(1);
backdrop-filter: saturate(1) brightness(1);
}
lite-vimeo > .ltv-playbtn {
opacity: 1!important;
}
lite-vimeo.ltv-activated > .ltv-playbtn,
lite-vimeo.ltv-activated .ltv-playbtn::after,
lite-vimeo.ltv-activated::before,
lite-youtube.lyt-activated > .lty-playbtn,
lite-youtube.lyt-activated > .lyt-playbtn,
lite-youtube.lyt-activated::before {
display: none !important;
}
/*** Sections - general ***/
h1.sppb-addon-title, h2.sppb-addon-title, h3.sppb-addon-title, h4.sppb-addon-title, h5.sppb-addon-title, h6.sppb-addon-title {
color: var(--color-primary);
}
.heading-text-line-dark .sppb-addon-title,
.heading-text-line .sppb-addon-title {
display: flex;
align-items: center;
gap: 16px;
margin: 0;
text-transform: uppercase;
}
.heading-text-line .sppb-addon-title::before,
.heading-text-line-dark .sppb-addon-title::before {
content: "";
display: block;
width: 40px;
height: 1px;
flex-shrink: 0;
}
.heading-text-line .sppb-addon-title::before {
background-color: var(--color-secondary);
}
.heading-text-line-dark .sppb-addon-title::before {
background-color: var(--color-secondary-dark);
}
@media screen and (max-width: 574px) {
.heading-text-line-dark.heading-line-wrap .sppb-addon-title,
.heading-text-line.heading-line-wrap .sppb-addon-title {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
}
.heading-text-line-both-dark .sppb-addon-title,
.heading-text-line-both .sppb-addon-title {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin: 0;
text-transform: uppercase;
}
.heading-text-line-both .sppb-addon-title::before,
.heading-text-line-both .sppb-addon-title::after,
.heading-text-line-both-dark .sppb-addon-title::before,
.heading-text-line-both-dark .sppb-addon-title::after {
content: "";
display: block;
width: 40px;
height: 1px;
flex-shrink: 0;
}
.heading-text-line-both .sppb-addon-title::before,
.heading-text-line-both .sppb-addon-title::after {
background-color: var(--color-secondary);
}
.heading-text-line-both-dark .sppb-addon-title::before,
.heading-text-line-both-dark .sppb-addon-title::after {
background-color: var(--color-secondary-dark);
}
.psu-animated-textarea .sppb-addon-content h2,
.psu-animated-heading .sppb-addon-title {
font-size: clamp(50px, 1.83vw + 36.8px, 72px) !important;
line-height: 1.06 !important;
}
/*** Section - hero ***/
#section-hero {
display: flex;
align-items: center;
position: relative;
border-left: 4px solid var(--color-secondary);
}
@media screen and (min-width: 1200px) {
#section-hero {
min-height: max(600px, calc(100vh - 120px));
max-height: none;
height: auto;
}
}
#section-hero > .sppb-row-container,
#section-hero > .sppb-row-container > .sppb-row {
height: 100%;
}
/*large title*/
#section-hero .hero-title-text .sppb-addon-content,
#section-hero .hero-title-text .sppb-addon-content h1 {
font-size: clamp(46px, 5.42vw, 104px) !important;
line-height: 1.1 !important;
margin: 0 !important;
}
#section-hero .hero-title-text .sppb-addon-content p {
margin: 0;
}
#section-hero .hero-title-text .sppb-addon-content .hero-at {
font-size: clamp(29px, 4.2vw, 62px);
vertical-align: baseline;
}
#section-hero .hero-title-text .sppb-addon-content p:last-child {
color: var(--color-secondary);
}
/*bottom-right text*/
#section-hero .sppb-row-container,
#section-hero .sppb-row,
#section-hero .sppb-row-column,
#section-hero .sppb-column,
#section-hero .sppb-column-addons {
position: static!important;
}
#section-hero .sppb-addon-wrapper:has(.hero-bottom-right-text) {
position: absolute;
right: 64px;
bottom: 40px;
z-index: 10;
width: auto;
text-align: right;
}
#section-hero .hero-bottom-right-text .sppb-addon-title {
margin: 0;
}
#section-hero .hero-bottom-right-text .sppb-addon-content p {
margin: 0;
}
@media screen and (max-width: 767px) {
#section-hero .sppb-addon-wrapper:has(.hero-bottom-right-text) {
display: none;
}
}
/* bouncing arrow */
#section-hero::after {
content: "";
position: absolute;
bottom: 45px;
left: 50%;
width: 30px;
height: 30px;
background-image: url('/images/tmpl/next-section.png');
background-repeat: no-repeat;
background-size: 100% auto;
z-index: 9999;
-webkit-tap-highlight-color: transparent;
animation: bounce 2s infinite;
opacity: 0.6;
}
@media screen and (max-width: 1599px) {
#section-hero::after {
bottom: 25px;
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, to {
transform: translateX(-50%) translateY(0);
}
40% {
transform: translateX(-50%) translateY(5px);
}
60% {
transform: translateX(-50%) translateY(3px);
}
}
@media screen and (max-width: 1199px) {
#section-hero::after {
display: none !important;
}
}
@media screen and (max-height: 760px) {
#section-hero::after {
display: none !important;
}
}
/*** Section - identity ***/
/*identity left column — video panel*/
#section-identity .section-identity-left-col {
position: relative;
overflow: hidden;
min-height: 480px;
border-bottom: 4px solid var(--color-secondary);
}
@media screen and (min-width: 992px) {
#section-identity .section-identity-left-col {
min-height: 540px;
}
}
@media screen and (min-width: 1200px) {
#section-identity .section-identity-left-col {
min-height: 640px;
}
}
#section-identity .section-identity-left-col::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
background: inherit;
background-size: cover;
background-position: center 20%;
transform: scale(1);
transition: transform 0.7s ease;
}
#section-identity .section-identity-left-col:hover::before {
transform: scale(1.04);
}
#section-identity .section-identity-left-col::after {
content: "";
position: absolute;
top: 32px;
bottom: 32px;
left: 0;
z-index: 2;
width: 4px;
background-color: var(--color-secondary);
}
#section-identity .section-identity-left-col .sppb-column-overlay {
z-index: 1;
pointer-events: none;
}
#section-identity .section-identity-left-col .sppb-column-overlay::before,
#section-identity .section-identity-left-col .sppb-column-overlay::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 32px;
background: rgba(0, 0, 0, 0.55);
}
#section-identity .section-identity-left-col .sppb-column-overlay::before {
top: 0;
}
#section-identity .section-identity-left-col .sppb-column-overlay::after {
bottom: 0;
}
#section-identity .section-identity-left-col .sppb-column-addons {
position: static;
}
#section-identity .section-identity-left-col .addon-root-text-block {
position: relative;
z-index: 3;
}
#section-identity .section-identity-left-col .addon-root-modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 3;
margin: 0;
}
#section-identity .psu--modal-video .sppb-modal-selector {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
text-decoration: none;
}
#section-identity .psu--modal-video .sppb-modal-icon-wrap {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 76px;
background: rgba(207, 180, 0, 0.2);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border-radius: 999px;
transition: all 0.3s ease;
}
#section-identity .section-identity-left-col:hover .sppb-modal-icon-wrap {
width: 88px;
height: 88px;
background: var(--color-secondary);
}
#section-identity .psu--modal-video .sppb-modal-icon-wrap::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 2px solid var(--color-secondary);
border-radius: 999px;
opacity: 0.35;
transition: all 0.4s ease;
}
#section-identity .section-identity-left-col:hover .sppb-modal-icon-wrap::before {
opacity: 0.6;
transform: scale(1.25);
}
#section-identity .psu--modal-video .sppb-modal-icon-wrap::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1.5px solid rgba(255, 255, 255, 0.25);
border-radius: 999px;
}
#section-identity .psu--modal-video .sppb-modal-icon-wrap i {
position: absolute;
top: 50%;
left: calc(50% + 11px);
transform: translate(-50%, -50%);
z-index: 1;
margin: 0;
font-size: 24px;
color: #fff;
transition: color 0.3s ease;
}
#section-identity .psu--modal-video .sppb-modal-icon-wrap i::before {
content: "\f04b";
}
#section-identity .section-identity-left-col:hover .sppb-modal-icon-wrap i {
color: var(--color-primary);
}
#section-identity .psu--modal-video .sppb-modal-selector::after {
content: "WATCH OUR STORY";
color: rgba(255, 255, 255, 0.9);
font-size: 12px;
font-weight: 600;
letter-spacing: 1.8px;
text-transform: uppercase;
white-space: nowrap;
}
#section-identity .video-title-text {
display: flex;
flex-direction: column;
padding: 0 24px 48px;
}
#section-identity .video-title-text .sppb-addon-content {
order: 1;
}
#section-identity .video-title-text .sppb-addon-title {
order: 2;
}
#section-identity .video-title-text .video-duration {
order: 3;
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
color: var(--color-secondary);
font-size: 12px;
letter-spacing: 1.5px;
}
#section-identity .video-title-text .video-duration::before {
content: "";
width: 6px;
height: 6px;
background-color: var(--color-secondary);
border-radius: 999px;
flex-shrink: 0;
}
#section-identity .video-title-text .video-duration:empty {
display: none;
}
/*** Section - growth ***/
#section-growth .sppb-row.sppb-no-gutter > .sppb-row-column {
display: flex;
}
#section-growth .sppb-row.sppb-no-gutter > .sppb-row-column > .sppb-column {
width: 100%;
display: flex;
flex-direction: column;
}
#section-growth .sppb-row.sppb-no-gutter > .sppb-row-column > .sppb-column > .sppb-column-addons {
flex: 1;
display: flex;
flex-direction: column;
}
#section-growth .growth-section-right-col > .sppb-column-addons > .sppb-section {
flex: 1;
display: flex;
flex-direction: column;
}
#section-growth .growth-section-right-col > .sppb-column-addons > .sppb-section > .sppb-container-inner {
flex: 1;
display: flex;
flex-direction: column;
border-bottom: 1px solid #e5e7eb;
}
#section-growth .growth-section-right-col > .sppb-column-addons > .sppb-section > .sppb-container-inner > .sppb-row {
flex: 1;
}
#section-growth .growth-section-right-col .sppb-column-addons > .sppb-addon-wrapper {
flex: 1;
display: flex;
flex-direction: column;
}
#section-growth .academic-program-box-container-outer {
position: relative;
flex: 1;
border-right: 1px solid #e5e7eb;
border-top: 1px solid #e5e7eb;
background: transparent;
transition: background 0.2s ease;
cursor: pointer;
}
#section-growth .academic-program-box-container-outer:hover {
background: #fff;
}
#section-growth .academic-program-icon img {
filter: invert(73%) sepia(38%) saturate(2024%) hue-rotate(10deg) brightness(87%) contrast(125%);
}
#section-growth .academic-program-box-container-outer .sppb-addon-wrapper,
#section-growth .academic-program-box-container-outer .clearfix {
position: static;
}
#section-growth .academic-program-box-link a {
position: static;
color: inherit;
text-decoration: none;
}
#section-growth .academic-program-box-link a::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
}
#section-growth .academic-program-box-link a:focus-visible::after {
outline: 3px solid var(--color-primary);
outline-offset: -3px;
}
@media screen and (max-width: 767px) {
#section-growth .academic-program-box-container-outer {
border-left: 1px solid #e5e7eb;
}
}
#section-growth .growth-section-image-col > .sppb-column-addons {
position: relative;
z-index: 1;
justify-content: flex-end;
}
#section-growth .growth-image-title-text {
display: flex;
flex-direction: column;
text-align: left;
padding: 30px;
}
#section-growth .growth-image-title-text .sppb-addon-content {
order: 1;
}
#section-growth .growth-image-title-text .sppb-addon-title {
order: 2;
}
/*** Section - achievement ***/
#section-achievement .achievement-section-image-col {
border-left: 4px solid var(--color-secondary);
}
#section-achievement .testimonial.column {
position: relative;
}
#section-achievement .testimonial.column::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background-color: var(--color-secondary);
transition: height 0.3s ease;
z-index: 1;
}
#section-achievement .testimonial.column:hover::before {
height: 4px;
}
#section-achievement .testimonial-quote .sppb-addon-content {
border-left: 2px solid var(--color-secondary);
padding-left: 16px;
}
/*** Section - outcomes ***/
#section-outcomes .sppb-row.sppb-no-gutter > .sppb-row-column {
display: flex;
}
#section-outcomes .sppb-row.sppb-no-gutter > .sppb-row-column > .sppb-column {
width: 100%;
display: flex;
flex-direction: column;
}
#section-outcomes .sppb-row.sppb-no-gutter > .sppb-row-column > .sppb-column > .sppb-column-addons {
flex: 1;
display: flex;
flex-direction: column;
}
#section-outcomes .sppb-row.sppb-no-gutter .sppb-column-addons > .sppb-addon-wrapper {
flex: 1;
display: flex;
flex-direction: column;
}
#section-outcomes .outcome-box-container-outer {
position: relative;
flex: 1;
border-top: 1px solid rgba(255, 255, 255, 0.1);
background: transparent;
transition: background 0.2s ease;
cursor: pointer;
}
#section-outcomes .career-box-column-1 .outcome-box-container-outer,
#section-outcomes .career-box-column-2 .outcome-box-container-outer,
#section-outcomes .career-box-column-3 .outcome-box-container-outer {
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
#section-outcomes .outcome-box-container-outer:hover {
background: rgba(255, 255, 255, 0.05);
}
#section-outcomes .outcomes-icon .sppb-addon-single-image-container {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: rgba(207, 180, 0, 0.15);
}
#section-outcomes .outcomes-icon img {
width: 18px;
height: 18px;
filter: invert(73%) sepia(38%) saturate(2024%) hue-rotate(10deg) brightness(87%) contrast(125%);
}
#section-outcomes .career-box-link .sppb-addon-title {
display: flex;
align-items: center;
gap: 8px;
}
#section-outcomes .career-box-link .sppb-addon-title::after {
content: "";
width: 14px;
height: 14px;
flex-shrink: 0;
background-color: var(--color-secondary);
-webkit-mask: url('/images/tmpl/icon-arrow-right.svg') no-repeat center / contain;
mask: url('/images/tmpl/icon-arrow-right.svg') no-repeat center / contain;
opacity: 0;
margin-top: 5px;
transform: translateX(-4px);
transition: opacity 0.2s ease, transform 0.2s ease;
}
#section-outcomes .outcome-box-container-outer:hover .career-box-link .sppb-addon-title::after {
opacity: 1;
transform: translateX(0);
}
#section-outcomes .outcome-box-container-outer .sppb-addon-wrapper,
#section-outcomes .outcome-box-container-outer .clearfix {
position: static;
}
#section-outcomes .career-box-link a {
position: static;
color: inherit;
text-decoration: none;
}
#section-outcomes .career-box-link a::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
}
#section-outcomes .career-box-link a:focus-visible::after {
outline: 3px solid var(--color-secondary);
outline-offset: -3px;
}
@media screen and (max-width: 1199px) {
#section-outcomes .career-box-column-1 .outcome-box-container-outer,
#section-outcomes .career-box-column-3 .outcome-box-container-outer {
border-right: 1px solid rgba(255, 255, 255, 0.1);
border-left: none;
}
#section-outcomes .career-box-column-2 .outcome-box-container-outer,
#section-outcomes .career-box-column-4 .outcome-box-container-outer {
border-left: 1px solid rgba(255, 255, 255, 0.1);
border-right: none;
}
}
@media screen and (max-width: 767px) {
#section-outcomes .outcome-box-container-outer {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
#section-outcomes .career-box-column-1 .outcome-box-container-outer,
#section-outcomes .career-box-column-2 .outcome-box-container-outer,
#section-outcomes .career-box-column-3 .outcome-box-container-outer,
#section-outcomes .career-box-column-4 .outcome-box-container-outer {
border-left: none;
border-right: none;
}
}
/*** Section - legacy ***/
#section-legacy {
position: relative;
overflow: hidden;
}
#section-legacy::before {
content: "1877";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 0;
color: rgba(255, 255, 255, 0.05);
font-family: 'Oswald', sans-serif;
font-size: clamp(224px, 30vw, 512px);
font-weight: 700;
line-height: 1;
pointer-events: none;
user-select: none;
}
#section-legacy .sppb-row-container {
position: relative;
z-index: 1;
}
#section-legacy .achievement-section-image-col {
position: relative;
}
#section-legacy .achievement-section-image-col .sppb-column-addons {
position: static;
}
#section-legacy .years-container {
position: absolute;
bottom: -25px;
left: -25px;
z-index: 2;
width: auto;
min-width: 160px;
padding: 24px;
background-color: var(--color-secondary);
}
#section-legacy .years-container .sppb-addon-title {
margin: 0;
}
#section-legacy .years-container .sppb-addon-content p {
margin: 0;
}
@media screen and (max-width: 767px) {
#section-legacy .years-container {
bottom: -25px;
left: 25px;
}
}
#section-legacy .testimonial-quote .sppb-addon-content {
border-left: 2px solid var(--color-secondary);
padding-left: 24px;
}
#section-legacy .testimonial-quote .sppb-addon-content p {
margin: 0;
}
/*** Section - connect ***/
#section-connect .sppb-nested-row > .sppb-row-column {
display: flex;
}
#section-connect .sppb-nested-row > .sppb-row-column > .sppb-column {
width: 100%;
display: flex;
flex-direction: column;
}
#section-connect .sppb-nested-row > .sppb-row-column > .sppb-column > .sppb-column-addons {
flex: 1;
display: flex;
flex-direction: column;
}
#section-connect .sppb-column-addons > .sppb-addon-wrapper {
flex: 1;
display: flex;
flex-direction: column;
}
#section-connect .outcome-box-container-outer {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
background: #fff;
border-bottom: 2px solid var(--color-secondary);
box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.08);
transition: box-shadow 0.3s ease;
cursor: pointer;
}
#section-connect .outcome-box-container-outer:hover {
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
#section-connect .outcomes-icon .sppb-addon-single-image-container {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background-color: rgba(32, 90, 65, 0.08);
}
#section-connect .outcomes-icon img {
width: 22px;
height: 22px;
filter: invert(26%) sepia(35%) saturate(685%) hue-rotate(102deg) brightness(101%) contrast(91%);
}
#section-connect .outcome-box-container-outer > .sppb-addon-wrapper:last-child {
flex: 0;
margin-top: auto;
}
#section-connect .outcome-box-container-outer:hover .link-green-arrow::after {
transform: translateX(6px);
}
#section-connect .outcome-box-container-outer .link-green-arrow::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
}
#section-connect .outcome-box-container-outer .link-green-arrow:focus-visible::before {
outline: 3px solid var(--color-primary);
outline-offset: -3px;
}
/* Section - news & stories */
#section-news .blog-article-item-inner {
max-width: none;
margin: 0;
padding: 0;
}
#section-news .blog-article-item-inner.row {
display: block;
}
#section-news .mod-articles-items {
padding: 0;
width: 100%;
}
#section-news .mod-articles-grid,
#section-news .mod-articles-grid.grid-cols-2,
#section-news .mod-articles-grid.grid-cols-3 {
display: grid;
grid-template-columns: 1.6fr 1fr;
grid-template-rows: 1fr auto;
gap: 0;
border: 1px solid rgba(13, 46, 33, 0.12);
}
#section-news .mod-articles-grid > div:first-child {
grid-row: 1 / 3;
border-right: 1px solid rgba(13, 46, 33, 0.12);
}
#section-news .mod-articles-grid > div:nth-child(2) {
border-bottom: 1px solid rgba(13, 46, 33, 0.12);
}
@media screen and (max-width: 991px) {
#section-news .mod-articles-grid,
#section-news .mod-articles-grid.grid-cols-2,
#section-news .mod-articles-grid.grid-cols-3 {
grid-template-columns: 1fr;
grid-template-rows: none;
grid-auto-rows: auto;
}
#section-news .mod-articles-grid > div:first-child {
grid-row: auto;
border-right: none;
border-bottom: 1px solid rgba(13, 46, 33, 0.12);
}
}
#section-news .mod-articles-item {
position: relative;
height: 100%;
background-color: #fff;
transition: background-color 0.3s ease;
}
#section-news .mod-articles-item:hover {
background-color: var(--color-box-bg);
}
#section-news .mod-articles-item-content {
display: flex;
flex-direction: column;
height: 100%;
position: static;
}
#section-news .mod-articles-text-content,
#section-news .mod-articles-title {
position: static;
}
#section-news .mod-articles-link::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 3;
}
#section-news .mod-articles-item-content > a {
position: relative;
display: block;
overflow: hidden;
}
#section-news .blog-article-media-wrap {
position: relative;
overflow: hidden;
}
#section-news .blog-article-image-container {
padding-top: 56.25%;
background-color: #eee;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transform: scale(1);
transition: transform 0.5s ease;
}
#section-news .mod-articles-item:hover .blog-article-image-container {
transform: scale(1.05);
}
#section-news .blog-article-video-container {
position: relative;
padding-top: 56.25%;
overflow: hidden;
width: 100%;
}
#section-news .blog-article-video-container lite-youtube,
#section-news .blog-article-video-container lite-vimeo {
aspect-ratio: auto !important;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-width: none;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
transform: scale(1);
transition: transform 0.5s ease;
}
#section-news .mod-articles-item:hover .blog-article-video-container lite-youtube,
#section-news .mod-articles-item:hover .blog-article-video-container lite-vimeo {
transform: scale(1.05);
}
#section-news .blog-article-video-container lite-youtube::before,
#section-news .blog-article-video-container lite-vimeo::before {
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
#section-news .mod-articles-grid > div:first-child .blog-article-video-container {
z-index: 4;
}
#section-news .mod-articles-grid > div:first-child .blog-article-video-container::before,
#section-news .mod-articles-grid > div:first-child .mod-articles-item-content > a::before,
#section-news .mod-articles-grid > div:first-child .blog-article-media-wrap::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
background: linear-gradient(to top,
rgba(13, 46, 33, 0.95) 0%,
rgba(13, 46, 33, 0.85) 15%,
rgba(13, 46, 33, 0.6) 32%,
rgba(13, 46, 33, 0.35) 48%,
rgba(13, 46, 33, 0.15) 65%,
rgba(13, 46, 33, 0.05) 80%,
transparent 100%);
pointer-events: none;
}
#section-news .mod-articles-grid > div:first-child .blog-article-video-container:has(lite-youtube.lyt-activated)::before,
#section-news .mod-articles-grid > div:first-child .blog-article-video-container:has(lite-vimeo.ltv-activated)::before,
#section-news .blog-article-video-container:has(lite-youtube.lyt-activated) .blog-article-media-title,
#section-news .blog-article-video-container:has(lite-vimeo.ltv-activated) .blog-article-media-title {
display: none;
}
#section-news .mod-articles-grid > div:first-child .blog-article-video-container lite-youtube .lyt-playbtn,
#section-news .mod-articles-grid > div:first-child .blog-article-video-container lite-youtube .lty-playbtn,
#section-news .mod-articles-grid > div:first-child .blog-article-video-container lite-vimeo .ltv-playbtn {
z-index: 2;
}
#section-news .blog-article-media-title {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 3;
padding: 32px;
pointer-events: none;
}
#section-news .blog-article-media-title .mod-articles-title {
margin: 0;
}
#section-news .blog-article-media-title .mod-articles-title,
#section-news .blog-article-media-title .mod-articles-link {
color: #fff;
font-size: 28px;
font-weight: 700;
line-height: 1.3;
}
#section-news .blog-article-media-title .mod-articles-link {
pointer-events: auto;
}
#section-news .blog-article-media-title .mod-articles-link::before {
display: none;
}
#section-news .blog-article-media-title .mod-articles-link:hover,
#section-news .blog-article-media-title .mod-articles-link:focus {
color: #fff !important;
}
@media screen and (max-width: 575px) {
#section-news .blog-article-media-title {
padding: 20px;
}
#section-news .blog-article-media-title .mod-articles-title,
#section-news .blog-article-media-title .mod-articles-link {
font-size: 22px;
}
}
#section-news .mod-articles-text-content {
display: flex;
flex: 1;
flex-direction: column;
padding: 32px;
}
@media screen and (max-width: 399px) {
#section-news .mod-articles-text-content {
padding: 24px;
}
}
#section-news .mod-articles-title {
display: flex;
margin: 0 0 12px 0;
}
#section-news .mod-articles-link {
display: inline-block;
font-size: 20px;
font-weight: 700;
line-height: 1.35;
color: var(--color-primary);
text-decoration: none;
}
#section-news .mod-articles-link:hover,
#section-news .mod-articles-link:focus,
#section-news .mod-articles-link:active {
color: var(--color-primary) !important;
}
#section-news .mod-article-intro-text {
font-size: 15px;
line-height: 1.6;
color: rgba(13, 46, 33, 0.7);
margin-bottom: 0;
}
#section-news .mod-article-intro-text p {
margin-bottom: 0 !important;
}
#section-news .mod-articles-grid > div:not(:first-child) .mod-articles-item-content {
padding: 30px;
}
@media screen and (max-width: 574px) {
#section-news .mod-articles-grid > div:not(:first-child) .mod-articles-item-content {
padding: 20px;
}
}
#section-news .mod-articles-grid > div:not(:first-child) .mod-articles-text-content {
padding: 24px 0 0 0;
}
#section-news .readmore {
display: none;
}
#section-news .mod-articles-grid > div:nth-child(2) .blog-article-image-container,
#section-news .mod-articles-grid > div:nth-child(2) .blog-article-video-container {
padding-top: 50%;
}
#section-news .mod-articles-grid > div:nth-child(3) .mod-articles-item-content > a,
#section-news .mod-articles-grid > div:nth-child(3) .blog-article-image-container,
#section-news .mod-articles-grid > div:nth-child(3) .blog-article-video-container,
#section-news .mod-articles-grid > div:nth-child(3) .blog-article-media-wrap {
display: none;
}
#section-news .mod-articles-grid > div:nth-child(3) .mod-articles-text-content {
padding-top: 0;
}
#section-news .mod-articles-grid > div:first-child .mod-articles-item {
background-color: var(--color-section-bg);
}
#section-news .mod-articles-grid > div:first-child .mod-article-intro-text {
font-size: 17px;
color: rgba(13, 46, 33, 0.7);
}
#section-news .mod-articles-grid > div:first-child .readmore {
display: block;
position: static;
margin-top: 0;
padding-top: 20px;
}
#section-news .mod-articles-grid > div:first-child .readmore a {
position: static;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 17px;
font-weight: 700;
letter-spacing: 1px;
color: var(--color-primary) !important;
text-decoration: none;
text-transform: uppercase;
transition: color 0.3s ease;
}
#section-news .mod-articles-grid > div:first-child .readmore a::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
}
#section-news .mod-articles-grid > div:first-child .readmore a::after {
content: "";
width: 15px;
height: 15px;
flex-shrink: 0;
background-color: var(--color-primary);
-webkit-mask: url('/images/tmpl/icon-arrow-right.svg') no-repeat center / contain;
mask: url('/images/tmpl/icon-arrow-right.svg') no-repeat center / contain;
transition: transform 0.25s ease, background-color 0.3s ease;
}
#section-news .mod-articles-grid > div:first-child .readmore a:hover {
color: var(--color-primary-dark) !important;
}
#section-news .mod-articles-grid > div:first-child .readmore a:hover::after {
transform: translateX(4px);
background-color: var(--color-primary-dark);
}
/* Footer */
#section-footer1 .vertical-menu ul {
list-style: none;
padding: 0;
margin: 0;
}
#section-footer1 .vertical-menu ul li {
position: relative;
margin: 0 0 12px 0;
}
#section-footer1 .vertical-menu ul li a {
display: inline-flex;
align-items: flex-start;
font-size: 15px;
font-weight: 300;
line-height: 1.5;
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
transition: color 0.3s ease;
}
#section-footer1 .vertical-menu ul li a:hover {
color: #fff;
}
@media screen and (max-width: 767px) {
#section-footer1 .vertical-menu ul li {
display: flex;
justify-content: center;
}
}
/* contacts */
#section-footer1 .footer-contacts ul {
list-style: none;
padding: 0;
margin: 0;
}
#section-footer1 .footer-contacts ul li {
margin: 0 0 8px 0;
}
#section-footer1 .footer-contacts ul li a {
position: relative;
display: inline-flex;
align-items: flex-start;
gap: 12px;
font-size: 13px;
font-weight: 300;
line-height: 1.6;
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
transition: color 0.3s ease;
}
#section-footer1 .footer-contacts ul li a:hover {
color: #fff;
}
#section-footer1 .footer-contacts ul li a::before {
content: "";
flex-shrink: 0;
width: 14px;
height: 14px;
margin-top: 3px;
background-color: var(--color-secondary);
-webkit-mask: var(--psu-contact-icon) no-repeat center / contain;
mask: var(--psu-contact-icon) no-repeat center / contain;
}
#section-footer1 .footer-contacts .item-location {
--psu-contact-icon: url('/images/tmpl/icon-location.svg');
}
#section-footer1 .footer-contacts .item-phone {
--psu-contact-icon: url('/images/tmpl/icon-phone.svg');
}
#section-footer1 .footer-contacts .item-email {
--psu-contact-icon: url('/images/tmpl/icon-email.svg');
}
/* socials */
#section-footer1 .footer-socials ul {
display: flex;
list-style: none;
padding: 0;
margin: 0;
gap: 16px;
}
#section-footer1 .footer-socials ul li {
display: inline-block;
margin: 0;
}
#section-footer1 .footer-socials ul li::before {
display: none;
}
#section-footer1 .footer-socials ul li a {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
font-size: 0 !important;
line-height: 0;
color: transparent;
text-decoration: none;
}
#section-footer1 .footer-socials ul li a::before {
content: "";
width: 16px;
height: 16px;
background-color: rgba(255, 255, 255, 0.6);
-webkit-mask: var(--psu-social-icon) no-repeat center / contain;
mask: var(--psu-social-icon) no-repeat center / contain;
transition: background-color 0.3s ease;
}
#section-footer1 .footer-socials ul li a:hover::before {
background-color: #fff;
}
#section-footer1 .footer-socials .item-facebook {
--psu-social-icon: url('/images/tmpl/icon-facebook.svg');
}
#section-footer1 .footer-socials .item-x {
--psu-social-icon: url('/images/tmpl/icon-x.svg');
}
#section-footer1 .footer-socials .item-instagram {
--psu-social-icon: url('/images/tmpl/icon-instagram.svg');
}
#section-footer1 .footer-socials .item-youtube {
--psu-social-icon: url('/images/tmpl/icon-youtube.svg');
}
#section-footer1 .footer-socials .item-linkedin {
--psu-social-icon: url('/images/tmpl/icon-linkedin.svg');
}
/* copyright legal menu (socials excluded) */
#section-copyright .sppb-addon-module:not(.footer-socials) ul {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
list-style: none;
padding: 0;
margin: 0;
gap: 8px 12px;
}
#section-copyright .sppb-addon-module:not(.footer-socials) ul li {
position: relative;
display: flex;
align-items: center;
}
#section-copyright .sppb-addon-module:not(.footer-socials) ul li::before {
content: "";
width: 1px;
height: 12px;
margin-right: 12px;
background-color: rgba(255, 255, 255, 0.3);
flex-shrink: 0;
}
@media screen and (max-width: 767px) {
#section-copyright .sppb-addon-module:not(.footer-socials) ul li:first-child::before {
content: none;
}
}
#section-copyright .sppb-addon-module:not(.footer-socials) ul li a {
font-size: 14px;
font-weight: 300;
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
transition: color 0.3s ease;
}
#section-copyright .sppb-addon-module:not(.footer-socials) ul li a:hover {
color: #fff;
}
#section-copyright .footer-copyright-text {
color: rgba(255, 255, 255, 0.6);
font-size: 14px;
font-weight: 300;
}
#section-copyright {
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
/* Page header */
#section-page-header {
border-left: 4px solid var(--color-secondary);
}
#section-page-header .page-heading-trail {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px 14px;
}
#section-page-header .page-heading-home {
color: rgba(255, 255, 255, 0.6) !important;
font-size: 14px;
font-weight: 400;
letter-spacing: 1.2px;
text-transform: uppercase;
text-decoration: none;
transition: color 0.25s ease;
}
#section-page-header .page-heading-home:hover,
#section-page-header .page-heading-home:focus {
color: #fff !important;
text-decoration: none;
}
#section-page-header .page-heading-sep {
display: inline-block;
width: 7px;
height: 12px;
background-color: var(--color-secondary);
opacity: 0.55;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12' fill='none'%3E%3Cpath d='M1 1L6 6L1 11' stroke='%23000000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12' fill='none'%3E%3Cpath d='M1 1L6 6L1 11' stroke='%23000000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
#section-page-header .page-heading-current,
#section-page-header .page-heading-parent {
color: rgba(255, 255, 255, 0.6);
font-size: 14px;
font-weight: 400;
letter-spacing: 1.2px;
text-transform: uppercase;
}
#section-page-header .psu-page-heading-textarea .sppb-addon-content,
#section-page-header .psu-page-heading-textarea .sppb-addon-content h1,
#section-page-header .psu-page-heading-textarea .sppb-addon-content h2 {
font-size: clamp(2.25rem, 1.7308rem + 2.3077vw, 4.5rem) !important;
line-height: 1.1 !important;
}
.page-heading-title {
color: #fff;
font-family: 'Oswald', sans-serif;
font-size: clamp(2.25rem, 1.7308rem + 2.3077vw, 4.5rem) !important;
line-height: 1.1 !important;
font-weight: 700;
margin: 0;
}
/* News & stories blog roll */
.blognews .article-list .row {
--bs-gutter-x: 40px;
}
.blognews .article-list .row [class^="col-lg"] {
margin-bottom: 40px;
}
@media screen and (max-width: 991px) {
.blognews .article-list .row [class^="col-lg"] {
margin-bottom: 30px;
}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
.blognews .article-list .row > [class*="col-lg"] {
width: 50%;
flex: 0 0 50%;
max-width: 50%;
}
}
.blognews .blog-article-video-container {
position: relative;
width: 100%;
padding-top: 56.25%;
overflow: hidden;
border-radius: 0;
background-color: #eee;
}
.blognews .blog-article-video-container lite-youtube,
.blognews .blog-article-video-container lite-vimeo {
aspect-ratio: auto !important;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.blognews .article-list .article > a {
display: block;
overflow: hidden;
}
.blognews .blog-article-image-container {
position: relative;
padding-top: 56.25%;
background-color: #eee;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 0;
transform: scale(1);
transition: transform 0.5s ease;
}
.blognews .article-list .article:hover .blog-article-image-container {
transform: scale(1.05);
}
.blognews .article-list .article {
display: flex;
flex-direction: column;
height: 100%;
padding: 0;
margin-bottom: 0;
border: 1px solid var(--color-border-light);
border-radius: 0;
background-color: #fff;
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.blognews .article-list .article-body {
display: flex;
flex: 1;
flex-direction: column;
padding: 35px;
height: 100%;
z-index: 9;
}
@media screen and (max-width: 399px) {
.blognews .article-list .article-body {
padding: 25px;
}
}
.blognews .article-list .article-header h2 {
font-size: 24px;
font-weight: 700;
line-height: 1.3;
margin-bottom: 10px!important;
}
@media screen and (max-width: 991px) {
.blognews .article-list .article-header h2 {
font-size: 21px;
}
}
.blognews .article-list .article-header h2 a {
color: #252525;
font-weight: 700!important;
}
.blognews .article-list .article-header h2 a:hover {
color: var(--color-primary)!important;
}
.blognews .article-list .article-header h2 a:focus,
.blognews .article-list .article-header h2 a:active {
color: var(--color-primary)!important;
}
.blognews .article-list .article-introtext {
display: flex;
flex: 1;
flex-direction: column;
font-size: 18px;
line-height: 1.6;
}
.blognews .readmore {
margin-top: auto;
}
.blognews .readmore a {
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
white-space: nowrap !important;
color: var(--color-primary) !important;
background-color: transparent !important;
font-size: 14px !important;
line-height: 18px !important;
font-weight: 700 !important;
letter-spacing: 1.2px !important;
text-transform: uppercase !important;
text-decoration: none !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
transition: color 0.3s ease !important;
}
.blognews .readmore a::after {
content: "";
width: 14px;
height: 14px;
flex-shrink: 0;
background-color: var(--color-primary);
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
transition: transform 0.3s ease, background-color 0.3s ease;
}
.blognews .readmore a:hover,
.blognews .readmore a:active,
.blognews .readmore a:focus {
color: var(--color-primary)!important;
background-color: transparent !important;
}
.blognews .readmore a:hover::after,
.blognews .readmore a:focus-visible::after {
transform: translateX(6px);
}
/* Single article */
[itemprop="articleBody"] h1, [itemprop="articleBody"] h2, [itemprop="articleBody"] h3, [itemprop="articleBody"] h4, [itemprop="articleBody"] h5, [itemprop="articleBody"] h6 {
margin-top: 2rem;
}
joomla-hidden-mail a {
word-wrap: break-word;
}
@media screen and (min-width: 768px) {
.article-header [itemprop="headline"] {
margin-bottom: 20px;
margin-top: 0;
}
}
.article-details [itemprop="articleBody"] input,
.article-details [itemprop="articleBody"] select,
.article-details [itemprop="articleBody"] textarea,
.article-details [itemprop="articleBody"] table,
.article-details [itemprop="articleBody"] iframe {
max-width: 100% !important;
}
@media screen and (max-width: 575px) {
.article-details .article-full-image,
.article-details .article-featured-video {
margin-bottom: 30px;
}
.article-details .article-header {
margin-bottom: 15px;
}
}
.article-details [itemprop="articleBody"] p {
line-height: 1.8;
}
.article-details .wf-column > :is(h1, h2, h3, h4, h5, h6):first-child {
margin-top: 0 !important;
}
.article-details .wf-columns {
margin: 20px 0;
}
.article-details .article-full-image {
width: 100%;
height: 0;
padding-top: 56.25%;
position: relative;
overflow: hidden;
border-radius: 0;
}
.article-details .article-full-image img {
position: absolute;
top: 50%;
left: 0;
width: 100%;
border-radius: 0;
filter: brightness(95%);
transform: translateY(-50%);
}
.article-details iframe[src*="youtube"] {
width: 100%;
max-width: 100%;
height: auto!important;
aspect-ratio: 16 / 9;
border-radius: 0;
}
.article-details .article-info {
display: none;
}
.article-details .article-featured-video {
position: relative;
width: 100%;
padding-top: 56.25%;
overflow: hidden;
margin: 0 0 2rem 0;
border-radius: 0;
background-color: #070707;
}
.article-details .article-featured-video lite-vimeo {
aspect-ratio: auto!important;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.article-details [itemprop="articleBody"] img {
border-radius: 0;
}
blockquote, .blockquote {
position: relative;
display: block;
color: #4D4D4D;
font-size: 17px;
font-weight: 500;
font-style: italic;
text-align: left;
background-color: var(--color-section-bg);
border-left: 4px solid var(--color-secondary);
border-radius: 0;
padding: 40px 50px;
margin: 50px 0;
}
blockquote p:last-child, .blockquote p:last-child {
margin-bottom: 0;
}
@media screen and (max-width: 575px) {
blockquote, .blockquote {
font-size: 16px;
padding: 30px 25px;
margin: 40px 0;
}
}
@media screen and (min-width: 576px) and (max-width: 767px) {
blockquote, .blockquote {
font-size: 16px;
padding: 35px 35px;
margin: 40px 0;
}
}
/* ul li */
.article-details ul {
list-style: none;
padding: 0;
margin: 20px 0 30px 0;
}
.article-details ul li {
position: relative;
padding: 0 0 0 30px;
margin-bottom: 10px;
}
.article-details ul li::before {
content: '\f00c';
font-family: 'Font Awesome 6 Free';
font-size: 10px;
font-weight: 900;
color: #fff;
background-color: var(--color-primary);
border-radius: 50%;
position: absolute;
left: 0;
top: 4px;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
}
/* Pagination */
.pagination-wrapper {
display: flex;
align-items: center;
justify-content: center!important;
flex-wrap: wrap;
margin-top: 0;
margin-bottom: 15px;
}
.pagination-wrapper .pagination,
.pagination-wrapper .pagination-counter {
margin-bottom: 10px!important;
color: #252525 !important;
}
@media screen and (max-width: 767px) {
ul.pagination li:not(:first-child):not(:nth-child(2)):not(:last-child):not(:nth-last-child(2)) {
display: none;
}
}
@media screen and (max-width: 575px) {
.pagination-wrapper .pagination-counter {
display: none;
}
}
.pagination>.active>a, .pagination>.active>span {
color: #fff;
border-color: var(--color-primary);
background-color: var(--color-primary);
font-weight: 600;
}
.pagination>.active>a:hover, .pagination>.active>a:focus, .pagination>.active>span:focus {
color: #fff;
border-color: #000;
background-color: #000;
}
.pagination>li>a:hover, .pagination>li>a:focus, .pagination>li>span:hover, .pagination>li>span:focus {
color: #fff;
background-color: #000;
border-color: #000;
}
.pagination li a, .pagination li>span {
padding: 10px;
border-radius: 0!important;
background-color: #f7f7f7;
font-weight: 600;
}
.page-link:focus {
box-shadow: none;
}
.disabled > .page-link, .page-link.disabled {
color: #bbb;
background-color: #f7f7f7;
}
.pagination li.page-item {
width: 50px!important;
text-align: center;
margin: 4px;
border-radius: 0;
}
.pagination li:first-child {
margin-left: 0;
}
/* Accordions */
[data-rlta-element=container][data-rlta-state=ready] {
margin-bottom: 0;
}
[data-rlta-element=container][data-rlta-state=ready][data-rlta-type=accordions]>[data-rlta-element=button]>[data-rlta-element=heading], [data-rlta-element=container][data-rlta-state=ready][data-rlta-type=tabs]>[data-rlta-element=button-list]>[data-rlta-element=button]>[data-rlta-element=heading] {
font-size: 19px;
line-height: 1.5;
font-weight: 600;
margin-left: 5px;
padding-right: 20px;
}
[data-rlta-element="container"] [role="button"][data-rlta-state="open"]::after {
content: '\f068';
font-family: 'Font Awesome 6 Free';
font-size: 18px;
position: absolute;
font-weight: 900;
color: #fff;
right: 30px;
}
[data-rlta-element="container"] [role="button"][data-rlta-state="closed"]::after {
content: '\2b';
font-family: 'Font Awesome 6 Free';
font-size: 18px;
position: absolute;
font-weight: 900;
color: var(--color-secondary);
right: 30px;
}
[data-rlta-element=container][data-rlta-state=ready][data-rlta-theme=neutral][data-rlta-type=accordions]>[data-rlta-element=button] {
border: 1px solid var(--color-border-dark);
border-radius: 0;
padding: 1.5rem 2.75rem 1.5rem 1.5rem;
margin-bottom: 20px;
}
[data-rlta-element=container][data-rlta-state=ready][data-rlta-theme=neutral][data-rlta-type=accordions]>[data-rlta-element=button][data-rlta-state=open]:focus, [data-rlta-element=container][data-rlta-state=ready][data-rlta-theme=neutral][data-rlta-type=accordions]>[data-rlta-element=button][data-rlta-state=open]:hover {
border-bottom: 1px solid transparent;
}
[data-rlta-element=container][data-rlta-state=ready][data-rlta-theme=neutral][data-rlta-type=accordions]>[data-rlta-element=panel], [data-rlta-element=container][data-rlta-state=ready][data-rlta-theme=neutral][data-rlta-type=tabs]>[data-rlta-element=panels]>[data-rlta-element=panel] {
border: none;
padding: 0;
margin: 20px 0;
}
[data-rlta-element=container][data-rlta-state=ready][data-rlta-theme=neutral][data-rlta-type=accordions]>[data-rlta-element=button]:focus {
background-color: #fff;
}
[data-rlta-element=container][data-rlta-state=ready][data-rlta-theme=neutral][data-rlta-type=accordions]>[data-rlta-element=button]:hover {
border-color: var(--color-border-dark);
background-color: #f7f7f7;
}
[data-rlta-element=container][data-rlta-state=ready][data-rlta-theme=neutral][data-rlta-type=accordions]>[data-rlta-element=button][data-rlta-state=open]:focus, [data-rlta-element=container][data-rlta-state=ready][data-rlta-theme=neutral][data-rlta-type=accordions]>[data-rlta-element=button][data-rlta-state=open]:hover, [data-rlta-element=container][data-rlta-state=ready][data-rlta-theme=neutral][data-rlta-type=accordions]>[data-rlta-element=button][data-rlta-state=opening]:focus, [data-rlta-element=container][data-rlta-state=ready][data-rlta-theme=neutral][data-rlta-type=accordions]>[data-rlta-element=button][data-rlta-state=opening]:hover {
color: #fff;
border-color: var(--color-border-dark);
background-color: var(--color-primary);
margin-bottom: 0;
}
[data-rlta-element=container][data-rlta-state=ready][data-rlta-theme=neutral][data-rlta-type=accordions]>[data-rlta-element=button][data-rlta-state=open], [data-rlta-element=container][data-rlta-state=ready][data-rlta-theme=neutral][data-rlta-type=accordions]>[data-rlta-element=button][data-rlta-state=opening] {
color: #fff;
border-color: var(--color-border-dark);
background-color: var(--color-primary);
border-radius: 0;
margin-bottom: 0;
}
[data-rlta-element=container][data-rlta-state=ready][data-rlta-theme=neutral][data-rlta-type=accordions]>[data-rlta-element=panel]>[data-rlta-element=panel-content], [data-rlta-element=container][data-rlta-state=ready][data-rlta-theme=neutral][data-rlta-type=tabs]>[data-rlta-element=panels]>[data-rlta-element=panel]>[data-rlta-element=panel-content] {
padding: 0 1.25em 1.25em 1.25em;
}
[data-rlta-element=container][data-rlta-state=ready][data-rlta-theme=neutral][data-rlta-type=accordions]>[data-rlta-element=panel], [data-rlta-element=container][data-rlta-state=ready][data-rlta-theme=neutral][data-rlta-type=tabs]>[data-rlta-element=panels]>[data-rlta-element=panel] {
background: transparent;
}
/* Scroll up button */
.sp-scroll-up {
right: 15px;
bottom: 15px;
width: 45px;
height: 45px;
font-size: 20px;
line-height: 45px;
background-color: rgba(0, 0, 0, 0.3);
color: #fff;
border-radius: 0;
}
.sp-scroll-up .fas.fa-angle-up::before {
content: "\f062";
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
position: relative;
bottom: 1px;
}
.sp-scroll-up:hover .fas.fa-angle-up::before {
color: #fff;
}
.sp-scroll-up:hover, .sp-scroll-up:focus, .sp-scroll-up:active {
color: #fff;
background-color: var(--color-primary);
}
/********* SP Page Builder Sub-Pages *********/
/*** Alumni ***/
/* alumni contact items */
#section-alumni-main .alumni-contact-location,
#section-alumni-main .alumni-contact-phone,
#section-alumni-main .alumni-contact-hours {
display: grid;
grid-template-columns: 20px 1fr;
align-items: center;
column-gap: 14px;
}
#section-alumni-main .alumni-contact-location::before,
#section-alumni-main .alumni-contact-phone::before,
#section-alumni-main .alumni-contact-hours::before {
content: "";
grid-column: 1;
grid-row: 1 / 3;
align-self: start;
width: 20px;
height: 20px;
margin-top: 4px;
background-color: var(--color-secondary);
-webkit-mask: var(--psu-contact-icon) no-repeat center / contain;
mask: var(--psu-contact-icon) no-repeat center / contain;
}
#section-alumni-main .alumni-contact-location {
--psu-contact-icon: url('/images/tmpl/icon-location.svg');
}
#section-alumni-main .alumni-contact-phone {
--psu-contact-icon: url('/images/tmpl/icon-phone.svg');
}
#section-alumni-main .alumni-contact-hours {
--psu-contact-icon: url('/images/tmpl/icon-clock.svg');
}
#section-alumni-main .alumni-contact-location .sppb-addon-title,
#section-alumni-main .alumni-contact-phone .sppb-addon-title,
#section-alumni-main .alumni-contact-hours .sppb-addon-title {
grid-column: 2;
grid-row: 1;
margin: 0;
}
#section-alumni-main .alumni-contact-location .sppb-addon-content,
#section-alumni-main .alumni-contact-phone .sppb-addon-content,
#section-alumni-main .alumni-contact-hours .sppb-addon-content {
grid-column: 2;
grid-row: 2;
}
#section-alumni-main .alumni-contact-location .sppb-addon-content p,
#section-alumni-main .alumni-contact-phone .sppb-addon-content p,
#section-alumni-main .alumni-contact-hours .sppb-addon-content p {
margin: 0;
}
#section-alumni-main .alumni-contact-col {
border-top: 4px solid var(--color-secondary);
}
/* alumni boxes-links */
#section-alumni-boxes .alumni-box-col {
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#section-alumni-boxes .alumni-box-col:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}
#section-alumni-boxes .sppb-row {
align-items: stretch;
}
#section-alumni-boxes .sppb-row-column {
display: flex;
}
#section-alumni-boxes .alumni-box-col {
display: flex;
flex-direction: column;
width: 100%;
}
#section-alumni-boxes .alumni-box-col .sppb-column-addons {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
#section-alumni-boxes .alumni-box-col .addon-root-button {
margin-top: auto;
}
/* give back */
@media screen and (max-width: 991px) {
#section-alumni-give-back .give-back-media-col {
aspect-ratio: 16 / 9;
width: 100%;
}
}
/* stay connected */
#section-alumni-stay-connected .social-buttons-outer-container {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 16px;
}
#section-alumni-stay-connected .social-btn-container {
display: block;
line-height: 0;
transition: transform 0.3s ease;
}
#section-alumni-stay-connected .social-btn-container:hover,
#section-alumni-stay-connected .social-btn-container:focus-within {
transform: translateY(-4px);
}
#section-alumni-stay-connected .social-btn-container .sppb-addon-wrapper,
#section-alumni-stay-connected .social-btn-container .sppb-addon-single-image,
#section-alumni-stay-connected .social-btn-container .sppb-addon-content,
#section-alumni-stay-connected .social-btn-container .sppb-addon-single-image-container {
margin: 0;
padding: 0;
}
#section-alumni-stay-connected .social-btn-container .sppb-addon-single-image-container a {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
}
#section-alumni-stay-connected .social-btn-container .sppb-addon-single-image-container a:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 2px;
}
/*** About / History ***/
/*navigation*/
#section-about-navigation .about-nav-item .sppb-addon-title {
position: relative;
display: inline-block;
margin: 0;
transition: color 0.2s ease;
}
#section-about-navigation .about-nav-item a {
text-decoration: none;
}
#section-about-navigation .about-nav-item .sppb-addon-title::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -6px;
height: 2px;
background-color: var(--color-secondary);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.2s ease;
}
#section-about-navigation .about-nav-item:hover .sppb-addon-title::before,
#section-about-navigation .about-nav-item a:hover .sppb-addon-title::before {
transform: scaleX(1);
}
#section-about-navigation .about-nav-item-active .sppb-addon-title::before {
transform: scaleX(1);
}
/*milestones*/
#section-about-key-milestones .psu-timeline .sppb-column-addons > .sppb-addon-wrapper > .sppb-div-addon {
position: relative;
padding-left: 40px;
}
#section-about-key-milestones .psu-timeline .sppb-column-addons > .sppb-addon-wrapper > .sppb-div-addon::before {
content: "";
position: absolute;
top: 24px;
bottom: 0;
left: 8px;
width: 2px;
background-color: #e8e4dc;
}
#section-about-key-milestones .psu-timeline .addon-root-text-block {
position: relative;
}
#section-about-key-milestones .psu-timeline .addon-root-text-block:last-child {
margin-bottom: 0;
}
#section-about-key-milestones .psu-timeline .addon-root-text-block::before {
content: "";
position: absolute;
top: 14px;
left: -39px;
width: 16px;
height: 16px;
box-sizing: border-box;
background-color: var(--color-primary);
border: 3px solid #fff;
border-radius: 50%;
box-shadow: 0 0 0 2px var(--color-primary);
z-index: 1;
}
#section-about-key-milestones .psu-timeline .addon-root-text-block:last-child::before {
background-color: var(--color-secondary);
box-shadow: 0 0 0 2px var(--color-secondary);
}
#section-about-key-milestones .psu-milestone .sppb-addon-content h4 {
font-family: 'Bitter', sans-serif;
font-size: 18px !important;
margin: 0 0 8px;
}
/*learn more boxes*/
#section-about-learn-more .learn-more-box-col {
position: relative;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
#section-about-learn-more .learn-more-box-col:hover,
#section-about-learn-more .learn-more-box-col:focus-within {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
#section-about-learn-more .learn-more-box-col .link-gold-arrow::before {
content: "";
position: absolute;
top: -30px;
right: -30px;
bottom: -30px;
left: -30px;
z-index: 2;
}
#section-about-learn-more .learn-more-box-col:hover .link-gold-arrow::after,
#section-about-learn-more .learn-more-box-col:focus-within .link-gold-arrow::after {
transform: translateX(6px);
}
#section-about-learn-more .learn-more-box-col .link-gold-arrow:focus-visible::before {
outline: 3px solid var(--color-primary);
outline-offset: -3px;
}
/*be part of the legacy*/
#section-about-legacy {
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
/*** Academics ***/
/*explore boxes*/
#section-academics-explore .academics-explore-box-col {
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#section-academics-explore .academics-explore-box-col:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}
#section-academics-explore .sppb-nested-row {
align-items: stretch;
}
#section-academics-explore .sppb-nested-row > .sppb-row-column {
display: flex;
}
#section-academics-explore .academics-explore-box-col {
display: flex;
flex-direction: column;
width: 100%;
}
#section-academics-explore .academics-explore-box-col .sppb-column-addons {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
#section-academics-explore .academics-explore-box-col .sppb-column-addons > .sppb-addon-wrapper:last-child {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
#section-academics-explore .academics-explore-box-col .sppb-column-addons > .sppb-addon-wrapper:last-child > .sppb-div-addon {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
#section-academics-explore .academics-explore-box-col .addon-root-button {
margin-top: auto;
}
/*academic journey*/
@media screen and (max-width: 991px) {
#section-academics-journey .academics-journey-media-col {
aspect-ratio: 16 / 9;
width: 100%;
}
}
/*faculty spotlight*/
@media screen and (max-width: 991px) {
#section-academics-faculty-spotlight .academics-spotlight-media-col {
aspect-ratio: 16 / 9;
width: 100%;
}
}
/*** Section - admissions & aid ***/
/* admissions contact items */
#section-admissions-welcome .admissions-contact-location,
#section-admissions-welcome .admissions-contact-phone,
#section-admissions-welcome .admissions-contact-email,
#section-admissions-welcome .admissions-contact-hours {
display: grid;
grid-template-columns: 20px 1fr;
align-items: center;
column-gap: 14px;
}
#section-admissions-welcome .admissions-contact-location::before,
#section-admissions-welcome .admissions-contact-phone::before,
#section-admissions-welcome .admissions-contact-email::before,
#section-admissions-welcome .admissions-contact-hours::before {
content: "";
grid-column: 1;
grid-row: 1 / 3;
align-self: start;
width: 20px;
height: 20px;
margin-top: 4px;
background-color: var(--color-secondary);
-webkit-mask: var(--psu-contact-icon) no-repeat center / contain;
mask: var(--psu-contact-icon) no-repeat center / contain;
}
#section-admissions-welcome .admissions-contact-location {
--psu-contact-icon: url('/images/tmpl/icon-location.svg');
}
#section-admissions-welcome .admissions-contact-phone {
--psu-contact-icon: url('/images/tmpl/icon-phone.svg');
}
#section-admissions-welcome .admissions-contact-email {
--psu-contact-icon: url('/images/tmpl/icon-email.svg');
}
#section-admissions-welcome .admissions-contact-hours {
--psu-contact-icon: url('/images/tmpl/icon-clock.svg');
}
#section-admissions-welcome .admissions-contact-location .sppb-addon-title,
#section-admissions-welcome .admissions-contact-phone .sppb-addon-title,
#section-admissions-welcome .admissions-contact-email .sppb-addon-title,
#section-admissions-welcome .admissions-contact-hours .sppb-addon-title {
grid-column: 2;
grid-row: 1;
margin: 0;
}
#section-admissions-welcome .admissions-contact-location .sppb-addon-content,
#section-admissions-welcome .admissions-contact-phone .sppb-addon-content,
#section-admissions-welcome .admissions-contact-email .sppb-addon-content,
#section-admissions-welcome .admissions-contact-hours .sppb-addon-content {
grid-column: 2;
grid-row: 2;
}
#section-admissions-welcome .admissions-contact-location .sppb-addon-content p,
#section-admissions-welcome .admissions-contact-phone .sppb-addon-content p,
#section-admissions-welcome .admissions-contact-email .sppb-addon-content p,
#section-admissions-welcome .admissions-contact-hours .sppb-addon-content p {
margin: 0;
}
#section-admissions-welcome .admissions-contact-col {
border-top: 4px solid var(--color-secondary);
}
/*admissions who are you*/
#section-admissions-who-are-you .sppb-nested-row {
align-items: stretch;
}
#section-admissions-who-are-you .sppb-nested-row > .sppb-row-column {
display: flex;
}
#section-admissions-who-are-you .who-are-you-box-column {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
border-top: 3px solid var(--color-primary);
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#section-admissions-who-are-you .sppb-row-column:nth-child(even) .who-are-you-box-column {
border-top-color: var(--color-secondary);
}
#section-admissions-who-are-you .who-are-you-box-column:hover,
#section-admissions-who-are-you .who-are-you-box-column:focus-within {
transform: translateY(-4px);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
}
#section-admissions-who-are-you .who-are-you-box-column > .sppb-column-addons {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
#section-admissions-who-are-you .who-are-you-box-column > .sppb-column-addons > .sppb-addon-wrapper {
display: flex;
flex-direction: column;
flex: 1 1 auto;
margin: 0;
}
#section-admissions-who-are-you .who-are-you-box-container-outer {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
#section-admissions-who-are-you .who-are-you-box-container-outer > .sppb-addon-wrapper:first-child {
flex: 1 1 auto;
}
#section-admissions-who-are-you .who-are-you-box-inner-container {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
#section-admissions-who-are-you .who-are-you-box-container-outer > .sppb-addon-wrapper:last-child {
margin-top: auto;
}
#section-admissions-who-are-you .who-are-you-box-container-outer > .addon-root-button,
#section-admissions-who-are-you .who-are-you-box-container-outer > .addon-root-button .clearfix,
#section-admissions-who-are-you .who-are-you-box-container-outer > .addon-root-button .sppb-button-wrapper {
position: static;
}
#section-admissions-who-are-you .who-are-you-box-container-outer > .addon-root-button a::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
}
#section-admissions-who-are-you .who-are-you-box-container-outer > .addon-root-button a:focus-visible::before {
outline: 3px solid var(--color-primary);
outline-offset: -3px;
}
#section-admissions-who-are-you .who-are-you-box-column:hover .who-are-you-box-container-outer > .addon-root-button a::after {
transform: translateX(6px);
}
#section-admissions-who-are-you .who-are-you-icon .sppb-addon-single-image-container {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background-color: rgba(32, 90, 65, 0.06);
}
#section-admissions-who-are-you .who-are-you-icon img {
filter: invert(26%) sepia(35%) saturate(685%) hue-rotate(102deg) brightness(101%) contrast(91%);
}
/* important dates table */
#section-admissions-important-dates .academics-key-dates-table th,
#section-admissions-important-dates .academics-key-dates-table td {
vertical-align: middle;
}
#section-admissions-important-dates .academics-key-dates-table td > .bt-content,
#section-admissions-important-dates .academics-key-dates-table th > .sppb-addon-wrapper {
display: flex;
align-items: center;
min-height: 100%;
}
#section-admissions-important-dates .academics-key-dates-table .sppb-addon-content p {
margin: 0;
}
#section-admissions-important-dates .important-date-tag-item .sppb-addon-content {
display: inline-block;
padding: 4px 10px;
background-color: rgba(207, 180, 0, 0.15);
}
#section-admissions-important-dates .important-date-tag-item .sppb-addon-content p {
color: var(--color-secondary);
}
@media (max-width: 574px) {
#section-admissions-important-dates .academics-key-dates-table td {
border-top: none !important;
border-bottom: none !important;
}
#section-admissions-important-dates .academics-key-dates-table tbody tr {
display: block;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
padding: 10px 0;
}
#section-admissions-important-dates .academics-key-dates-table tbody tr:last-child {
border-bottom: none !important;
}
}
/* vivit & tour */
@media screen and (max-width: 991px) {
#section-admissions-visit-tour .visit-tour-media-col {
aspect-ratio: 16 / 9;
width: 100%;
}
}
/*admissions cost & financial aid*/
#section-admissions-cost-financial-aid .sppb-nested-row {
align-items: stretch;
}
#section-admissions-cost-financial-aid .sppb-nested-row > .sppb-row-column {
display: flex;
}
#section-admissions-cost-financial-aid .cost-aid-box-column {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
border-top: 3px solid var(--color-secondary);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#section-admissions-cost-financial-aid .cost-aid-box-column:hover,
#section-admissions-cost-financial-aid .cost-aid-box-column:focus-within {
transform: translateY(-4px);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}
#section-admissions-cost-financial-aid .cost-aid-box-column > .sppb-column-addons {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
#section-admissions-cost-financial-aid .cost-aid-box-column > .sppb-column-addons > .sppb-addon-wrapper {
display: flex;
flex-direction: column;
flex: 1 1 auto;
margin: 0;
}
#section-admissions-cost-financial-aid .cost-aid-box-container-outer {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
#section-admissions-cost-financial-aid .cost-aid-box-container-outer > .sppb-addon-wrapper:first-child {
flex: 1 1 auto;
}
#section-admissions-cost-financial-aid .cost-aid-box-inner-container {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
#section-admissions-cost-financial-aid .cost-aid-box-container-outer > .sppb-addon-wrapper:last-child {
margin-top: auto;
}
#section-admissions-cost-financial-aid .cost-aid-box-container-outer > .addon-root-button,
#section-admissions-cost-financial-aid .cost-aid-box-container-outer > .addon-root-button .clearfix,
#section-admissions-cost-financial-aid .cost-aid-box-container-outer > .addon-root-button .sppb-button-wrapper {
position: static;
}
#section-admissions-cost-financial-aid .cost-aid-box-container-outer > .addon-root-button a::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
}
#section-admissions-cost-financial-aid .cost-aid-box-container-outer > .addon-root-button a:focus-visible::before {
outline: 3px solid var(--color-primary);
outline-offset: -3px;
}
#section-admissions-cost-financial-aid .cost-aid-box-column:hover .cost-aid-box-container-outer > .addon-root-button a::after {
transform: translateX(6px);
}
#section-admissions-cost-financial-aid .cost-aid-icon img {
filter: invert(26%) sepia(35%) saturate(685%) hue-rotate(102deg) brightness(101%) contrast(91%);
}
/* apply online */
@media screen and (max-width: 991px) {
#section-admissions-apply-online .apply-online-media-col {
aspect-ratio: 16 / 9;
width: 100%;
}
}
/*** Apply Now ***/
/* main section */
@media screen and (max-width: 991px) {
#section-apply-main .section-apply-media-col {
aspect-ratio: 16 / 9;
width: 100%;
}
}
/*apply buttons*/
#section-apply-select-path .sppb-nested-row {
align-items: stretch;
}
#section-apply-select-path .sppb-nested-row > .sppb-row-column {
display: flex;
}
#section-apply-select-path .sppb-row-column .sppb-column,
#section-apply-select-path .sppb-row-column .sppb-column-addons,
#section-apply-select-path .sppb-row-column .addon-root-button,
#section-apply-select-path .sppb-row-column .addon-root-button > .clearfix,
#section-apply-select-path .sppb-row-column .sppb-button-wrapper {
display: flex;
flex-direction: column;
flex: 1 1 auto;
width: 100%;
}
#section-apply-select-path .btn-green-arrow-card {
flex: 1 1 auto;
height: 100%;
}
#section-apply-select-path .btn-green-arrow-card-freshman {
--psu-card-icon: url('/images/tmpl/icon-education.svg');
}
#section-apply-select-path .btn-green-arrow-card-readmit {
--psu-card-icon: url('/images/tmpl/icon-refresh.svg');
}
#section-apply-select-path .btn-green-arrow-card-transfer {
--psu-card-icon: url('/images/tmpl/icon-left-right-arrows.svg');
}
#section-apply-select-path .btn-green-arrow-card-international {
--psu-card-icon: url('/images/tmpl/icon-globe.svg');
}
/*priority deadlines*/
#section-apply-priority-deadlines .sppb-nested-row > .sppb-row-column + .sppb-row-column .priority-deadline-column {
border-left: 1px solid rgba(255, 255, 255, 0.15);
}
@media (max-width: 991px) {
#section-apply-priority-deadlines .sppb-nested-row > .sppb-row-column:nth-child(odd) .priority-deadline-column {
border-left: none;
}
#section-apply-priority-deadlines .sppb-nested-row > .sppb-row-column:nth-child(n + 3) .priority-deadline-column {
border-top: 1px solid rgba(255, 255, 255, 0.15);
}
}
@media (max-width: 574px) {
#section-apply-priority-deadlines .sppb-nested-row > .sppb-row-column + .sppb-row-column .priority-deadline-column {
border-left: none;
border-top: 1px solid rgba(255, 255, 255, 0.15);
}
}
/*why psu video*/
#section-apply-why-psu .why-psu-video-column {
position: relative;
aspect-ratio: 16 / 9;
}
#section-apply-why-psu .why-psu-video-column .sppb-column-addons {
position: static;
}
#section-apply-why-psu .why-psu-video-column .addon-root-modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 3;
margin: 0;
}
#section-apply-why-psu .psu--modal-video .sppb-modal-selector {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
}
#section-apply-why-psu .psu--modal-video .sppb-modal-icon-wrap {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 76px;
background: rgba(207, 180, 0, 0.2);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border-radius: 999px;
transition: all 0.3s ease;
}
#section-apply-why-psu .why-psu-video-column:hover .sppb-modal-icon-wrap {
width: 88px;
height: 88px;
background: var(--color-secondary);
}
#section-apply-why-psu .psu--modal-video .sppb-modal-icon-wrap::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 2px solid var(--color-secondary);
border-radius: 999px;
opacity: 0.35;
transition: all 0.4s ease;
}
#section-apply-why-psu .why-psu-video-column:hover .sppb-modal-icon-wrap::before {
opacity: 0.6;
transform: scale(1.25);
}
#section-apply-why-psu .psu--modal-video .sppb-modal-icon-wrap::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1.5px solid rgba(255, 255, 255, 0.25);
border-radius: 999px;
}
#section-apply-why-psu .psu--modal-video .sppb-modal-icon-wrap i {
position: absolute;
top: 50%;
left: calc(50% + 11px);
transform: translate(-50%, -50%);
z-index: 1;
margin: 0;
font-size: 24px;
color: #fff;
transition: color 0.3s ease;
}
#section-apply-why-psu .psu--modal-video .sppb-modal-icon-wrap i::before {
content: "\f04b";
}
#section-apply-why-psu .why-psu-video-column:hover .sppb-modal-icon-wrap i {
color: var(--color-primary);
}
/*welcome*/
@media screen and (max-width: 991px) {
#section-apply-welcome .apply-welcome-media-col {
aspect-ratio: 16 / 9;
width: 100%;
}
}
/*office of admin and recruitment*/
/*apply office contact items*/
#section-apply-office .phone-item .sppb-addon-content p,
#section-apply-office .email-item .sppb-addon-content p,
#section-apply-office .fax-item .sppb-addon-content p {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
}
#section-apply-office .phone-item .sppb-addon-content p::before,
#section-apply-office .email-item .sppb-addon-content p::before,
#section-apply-office .fax-item .sppb-addon-content p::before {
content: "";
flex-shrink: 0;
width: 16px;
height: 16px;
background-color: var(--color-secondary);
-webkit-mask: var(--psu-contact-icon) no-repeat center / contain;
mask: var(--psu-contact-icon) no-repeat center / contain;
}
#section-apply-office .phone-item {
--psu-contact-icon: url('/images/tmpl/icon-phone.svg');
}
#section-apply-office .email-item {
--psu-contact-icon: url('/images/tmpl/icon-email.svg');
}
#section-apply-office .fax-item {
--psu-contact-icon: url('/images/tmpl/icon-fax.svg');
}
/*** Giving ***/
#section-give-ways-to-invest .the-1877-fund-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
#section-give-ways-to-invest .the-1877-fund-grid > .sppb-addon-wrapper {
box-sizing: border-box;
flex: 0 0 auto;
width: 100%;
margin: 0;
}
#section-give-ways-to-invest .the-1877-amount-box {
height: 100%;
}
@media screen and (min-width: 768px) {
#section-give-ways-to-invest .the-1877-fund-grid > .sppb-addon-wrapper {
width: calc((100% - 16px) / 2);
}
}
@media screen and (min-width: 1200px) {
#section-give-ways-to-invest .the-1877-fund-grid > .sppb-addon-wrapper {
width: calc((100% - 48px) / 4);
}
}
#section-give-ways-to-invest .ways-to-give-icon img {
filter: invert(73%) sepia(38%) saturate(2024%) hue-rotate(10deg) brightness(87%) contrast(125%);
}
/*legacy*/
#section-give-legacy .checkmark-li .sppb-addon-content ul {
list-style: none;
margin: 0;
padding: 0;
}
#section-give-legacy .checkmark-li .sppb-addon-content li {
position: relative;
padding-left: 30px;
}
#section-give-legacy .checkmark-li .sppb-addon-content li:not(:last-child) {
padding-bottom: 8px;
}
#section-give-legacy .checkmark-li .sppb-addon-content li::before {
content: "";
position: absolute;
top: 2px;
left: 0;
width: 22px;
height: 22px;
background-color: var(--color-secondary);
-webkit-mask: url('/images/tmpl/icon-checkmark-round.svg') no-repeat center / contain;
mask: url('/images/tmpl/icon-checkmark-round.svg') no-repeat center / contain;
}
/*corporate & foundation giving*/
#section-give-corporate-foundation .corpoarte-foundation-header-icon img {
filter: invert(73%) sepia(38%) saturate(2024%) hue-rotate(10deg) brightness(87%) contrast(125%);
}
/*contacts*/
#section-give-contacts .institution-item {
display: grid;
grid-template-columns: 16px 1fr;
column-gap: 10px;
--psu-contact-icon: url('/images/tmpl/icon-building.svg');
}
#section-give-contacts .institution-item::before {
content: "";
grid-column: 1;
grid-row: 1 / 3;
align-self: start;
width: 16px;
height: 16px;
margin-top: 7px;
background-color: var(--color-secondary);
-webkit-mask: var(--psu-contact-icon) no-repeat center / contain;
mask: var(--psu-contact-icon) no-repeat center / contain;
}
#section-give-contacts .institution-item .sppb-addon-title {
grid-column: 2;
grid-row: 1;
margin: 0;
}
#section-give-contacts .institution-item .sppb-addon-content {
grid-column: 2;
grid-row: 2;
}
#section-give-contacts .institution-item .sppb-addon-content p {
margin: 0;
}
#section-give-contacts .phone-item .sppb-addon-content p,
#section-give-contacts .email-item .sppb-addon-content p {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
}
#section-give-contacts .phone-item .sppb-addon-content p::before,
#section-give-contacts .email-item .sppb-addon-content p::before {
content: "";
flex-shrink: 0;
width: 16px;
height: 16px;
background-color: var(--color-secondary);
-webkit-mask: var(--psu-contact-icon) no-repeat center / contain;
mask: var(--psu-contact-icon) no-repeat center / contain;
}
#section-give-contacts .phone-item {
--psu-contact-icon: url('/images/tmpl/icon-phone.svg');
}
#section-give-contacts .email-item {
--psu-contact-icon: url('/images/tmpl/icon-email.svg');
}
/*** Undergraduate Programs ***/
/*program boxes*/
#section-undergraduate-prog-programs .undergraduate-prog-box-col {
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#section-undergraduate-prog-programs .undergraduate-prog-box-col:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}
#section-undergraduate-prog-programs .sppb-nested-row {
align-items: stretch;
}
#section-undergraduate-prog-programs .sppb-nested-row > .sppb-row-column {
display: flex;
}
#section-undergraduate-prog-programs .undergraduate-prog-box-col {
display: flex;
flex-direction: column;
width: 100%;
}
#section-undergraduate-prog-programs .undergraduate-prog-box-col .sppb-column-addons {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
#section-undergraduate-prog-programs .undergraduate-prog-box-col .sppb-column-addons > .sppb-addon-wrapper:last-child {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
#section-undergraduate-prog-programs .undergraduate-prog-box-col .sppb-column-addons > .sppb-addon-wrapper:last-child > .sppb-div-addon {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
#section-undergraduate-prog-programs .undergraduate-prog-box-col .addon-root-button {
margin-top: auto;
}
/*** Cost & Financial Aid ***/
#section-cost-aid-commitment .cost-aid-calc-icon img {
filter: invert(26%) sepia(35%) saturate(685%) hue-rotate(102deg) brightness(101%) contrast(91%);
}
/*types of aid*/
#section-cost-aid-types .types-of-aid-icon img {
filter: invert(26%) sepia(35%) saturate(685%) hue-rotate(102deg) brightness(101%) contrast(91%);
}
#section-cost-aid-types .checkmark-li .sppb-addon-content ul {
list-style: none;
margin: 0;
padding: 0;
}
#section-cost-aid-types .checkmark-li .sppb-addon-content li {
position: relative;
padding-left: 30px;
}
#section-cost-aid-types .checkmark-li .sppb-addon-content li:not(:last-child) {
padding-bottom: 8px;
}
#section-cost-aid-types .checkmark-li .sppb-addon-content li::before {
content: "";
position: absolute;
top: 2px;
left: 0;
width: 22px;
height: 22px;
background-color: var(--color-secondary);
-webkit-mask: url('/images/tmpl/icon-checkmark-round.svg') no-repeat center / contain;
mask: url('/images/tmpl/icon-checkmark-round.svg') no-repeat center / contain;
}
/*steps*/
@media screen and (min-width: 575px) {
#section-cost-aid-steps .sppb-nested-row .sppb-column-addons > .sppb-addon-wrapper {
position: relative;
}
#section-cost-aid-steps .sppb-nested-row .sppb-column-addons > .sppb-addon-wrapper:not(:last-child)::before {
content: "";
position: absolute;
top: 36px;
bottom: -36px;
left: 36px;
width: 1px;
background-color: rgba(207, 180, 0, 0.3);
}
#section-cost-aid-steps .cost-aid-step-number {
position: relative;
z-index: 1;
width: 72px;
}
}
/*financial aid resources*/
#section-cost-aid-financial-aid-resources .aid-resources-icon img {
filter: invert(26%) sepia(35%) saturate(685%) hue-rotate(102deg) brightness(101%) contrast(91%);
}
/*aid resources boxes*/
#section-cost-aid-financial-aid-resources .cost-aid-resources-col {
position: relative;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#section-cost-aid-financial-aid-resources .cost-aid-resources-col:hover,
#section-cost-aid-financial-aid-resources .cost-aid-resources-col:focus-within {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
#section-cost-aid-financial-aid-resources .cost-aid-resources-col .link-gold-arrow::before {
content: "";
position: absolute;
top: -25px;
right: -24px;
bottom: -20px;
left: -25px;
z-index: 2;
}
#section-cost-aid-financial-aid-resources .cost-aid-resources-col:hover .link-gold-arrow::after,
#section-cost-aid-financial-aid-resources .cost-aid-resources-col:focus-within .link-gold-arrow::after {
transform: translateX(6px);
}
#section-cost-aid-financial-aid-resources .cost-aid-resources-col .link-gold-arrow:focus-visible::before {
outline: 3px solid var(--color-primary);
outline-offset: -3px;
}
/*your education is worth it*/
#section-cost-aid-education-worth-it .phone-item .sppb-addon-content p,
#section-cost-aid-education-worth-it .email-item .sppb-addon-content p {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
}
#section-cost-aid-education-worth-it .phone-item .sppb-addon-content p::before,
#section-cost-aid-education-worth-it .email-item .sppb-addon-content p::before {
content: "";
flex-shrink: 0;
width: 16px;
height: 16px;
background-color: var(--color-secondary);
-webkit-mask: var(--psu-contact-icon) no-repeat center / contain;
mask: var(--psu-contact-icon) no-repeat center / contain;
}
#section-cost-aid-education-worth-it .phone-item {
--psu-contact-icon: url('/images/tmpl/icon-phone.svg');
}
#section-cost-aid-education-worth-it .email-item {
--psu-contact-icon: url('/images/tmpl/icon-email.svg');
}