.glwa-wrap-accordion {
--bg: #E1E2E3;
--text: #02216E;
--accent: #00B476;
--panel: #f5f5f5;
--button: #02216E;
--button-text: #fff;
background: var(--bg);
color: var(--text);
}
.glwa-wrap-accordion--bg-white {
--bg: #f5f5f5;
}
.glwa-wrap-accordion--bg-blue {
--bg: #0031A7;
--text: #f5f5f5;
--panel: #042985;
--button: #f5f5f5;
--button-text: #02216E;
}
.glwa-wrap-accordion--bg-blue .glwa-wrap-accordion__intro h2 {
color: #f5f5f5;
}
.glwa-wrap-accordion--bg-blue .glwa-wrap-accordion__icon {
background: #02216E;
}
.glwa-wrap-accordion--bg-blue .glwa-wrap-accordion__toggle {
background: #042985;
}
.glwa-wrap-accordion--bg-blue .glwa-wrap-accordion__toggle .glwa-wrap-accordion__toggle-text {
color: #f5f5f5;
}
.glwa-wrap-accordion--bg-blue .glwa-wrap-accordion__file {
background: #042985;
color: #f5f5f5;
}
.glwa-wrap-accordion--bg-blue .glwa-wrap-accordion__item {
margin-bottom: 10px;
}
.glwa-wrap-accordion--bg-blue .glwa-wrap-accordion__item.is-open .glwa-wrap-accordion__toggle {
background: #042985;
}
@media all and (pointer: fine), screen and (-moz-touch-enabled: 0) {
.glwa-wrap-accordion--bg-blue .glwa-wrap-accordion__item:hover .glwa-wrap-accordion__toggle {
background: #042985;
}
}
.glwa-wrap-accordion--bg-navy {
--bg: #06256f;
--text: #fff;
--panel: #082b82;
--button: #fff;
--button-text: #02216E ;
}
.glwa-wrap-accordion--accent-blue {
--accent: #02216E ;
}
.glwa-wrap-accordion--accent-sky {
--accent: #55c3ff ;
}
.glwa-wrap-accordion--accent-white {
--accent: #fff ;
}
.glwa-wrap-accordion--padding-small {
padding: 54px 0;
}
.glwa-wrap-accordion--padding-medium {
padding: 78px 0;
}
.glwa-wrap-accordion--padding-large {
padding: 112px 0;
}
.glwa-wrap-accordion--padding-xlarge {
padding: 140px 0;
}
.glwa-wrap-accordion__inner {
margin: 0 auto;
}
.glwa-wrap-accordion__intro {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(420px, 1fr);
gap: clamp(48px, 9vw, 120px);
align-items: start;
margin-bottom: 120px;
}
.glwa-wrap-accordion__intro h2 {
margin: 0;
color: #0031A7;
text-transform: uppercase;
}
.glwa-wrap-accordion__intro h2 strong {
display: block;
color: var(--accent);
}
.glwa-wrap-accordion__items {
width: min(1080px, 100%);
margin: 0 auto;
}
.glwa-wrap-accordion__item {
margin-bottom: 10px;
}
.glwa-wrap-accordion__item.is-open .glwa-wrap-accordion__toggle {
background: rgb(245, 245, 245);
}
@media all and (pointer: fine), screen and (-moz-touch-enabled: 0) {
.glwa-wrap-accordion__item:hover .glwa-wrap-accordion__toggle {
background: rgb(245, 245, 245);
}
}
.glwa-wrap-accordion__toggle-heading {
margin: 0;
width: 100%;
}
.glwa-wrap-accordion__toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
width: 100%;
min-height: 58px;
padding: 12px 22px;
border: 0;
border-radius: 5px;
background: rgba(245, 245, 245, 0.5);
cursor: pointer;
}
.glwa-wrap-accordion__toggle:focus-visible {
outline: 2px solid #02216E;
outline-color: inherit;
outline-offset: 2px;
}
.glwa-wrap-accordion__toggle-text {
font-family: "dm-sans";
font-size: 24px;
font-style: normal;
font-weight: 300;
line-height: 1.333;
color: #02216E;
text-align: left;
}
@media screen and (max-width: 767px) {
.glwa-wrap-accordion__toggle-text {
font-size: 16px;
}
}
.glwa-wrap-accordion__icon {
position: relative;
width: 22px;
height: 22px;
border-radius: 50%;
background: #0031A7;
flex: 0 0 auto;
}
.glwa-wrap-accordion__icon:before,
.glwa-wrap-accordion__icon:after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 11px;
height: 2px;
background: #fff;
transform: translate(-50%, -50%);
}
.glwa-wrap-accordion__icon:after {
transform: translate(-50%, -50%) rotate(90deg);
}
.glwa-wrap-accordion__item.is-open .glwa-wrap-accordion__icon:after {
display: none;
}
.glwa-wrap-accordion__panel {
background: rgba(245, 245, 245, 0.5);
border-radius: 0 0 5px 5px;
}
.glwa-wrap-accordion--bg-blue .glwa-wrap-accordion__panel {
background: #1242B4;
}
.glwa-wrap-accordion--bg-blue .glwa-wrap-accordion__panel h4 {
color: #f5f5f5;
}
.glwa-wrap-accordion__panel-grid {
display: grid;
grid-template-columns: 1fr 1.25fr;
gap: 70px;
padding: 56px 34px 36px;
}
.glwa-wrap-accordion__panel-grid--files-only {
grid-template-columns: 1fr;
}
.glwa-wrap-accordion__panel-grid--files-only .glwa-wrap-accordion__files {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.glwa-wrap-accordion__panel h4 {
margin: 0 0 24px;
color: #0031A7;
}
.glwa-wrap-accordion__contact * + * {
margin-top: 15px;
}
.glwa-wrap-accordion__contact a {
color: inherit;
text-decoration: underline;
}
.glwa-wrap-accordion__panel-column p img {
width: 100%;
height: auto;
border-radius: 8px;
}
.glwa-wrap-accordion__apply {
display: inline-flex;
margin-top: 18px;
padding: 12px 18px;
border-radius: 4px;
background: var(--accent);
color: #00245f;
text-decoration: none;
font-weight: 800;
}
.glwa-wrap-accordion__buttons {
margin-top: 36px;
}
.glwa-wrap-accordion__files {
display: grid;
gap: 10px;
}
.glwa-wrap-accordion__file {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
min-height: 56px;
padding: 10px 10px 10px 22px;
border-radius: 7px;
background: #fff;
color: #02216E;
text-decoration: none;
}
.glwa-wrap-accordion__download svg {
width: 24px;
height: 24px;
}
.glwa-wrap-accordion__footer {
width: min(560px, 100%);
margin: 56px auto 0;
text-align: center;
}
.glwa-wrap-accordion__footer a {
color: inherit;
text-decoration: underline;
}
@media (max-width: 850px) {
.glwa-wrap-accordion__intro {
text-align: center;
}
.glwa-wrap-accordion__intro,
.glwa-wrap-accordion__panel-grid {
grid-template-columns: 1fr;
gap: 32px;
}
.glwa-wrap-accordion__intro h2,
.glwa-wrap-accordion__panel-grid h2 {
margin-left: auto;
margin-right: auto;
}
.glwa-wrap-accordion__panel-grid--files-only .glwa-wrap-accordion__files {
grid-template-columns: 1fr;
}
.glwa-wrap-accordion__intro {
margin-bottom: 64px;
}
}
@media (max-width: 560px) {
.glwa-wrap-accordion__inner {
width: min(100% - 32px, 1080px);
}
.glwa-wrap-accordion__panel-grid {
padding: 32px 18px;
}
.glwa-wrap-accordion__download {
justify-self: start;
}
}