/* import other css files */
/* Variables */
:root {
--main-font: "TT Interphases Pro", serif;
--white: #FFFFFF;
--super-light-grey: #F9F9F9;
--light-grey: #e8e8e8;
--mid-grey: #d4d4d4;
--dark-grey: #333333;
--grey: #21272A;
--blue: #001a3b;
--orange: #ff5532;
}
/* Fonts */
@font-face {
font-display: swap;
font-family: 'TT Interphases Pro';
font-style: normal;
font-weight: 300;
src: url('../../src/fonts/TT_Interphases_Pro_Light.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'TT Interphases Pro';
font-style: normal;
font-weight: 400;
src: url('../../src/fonts/TT_Interphases_Pro_Regular.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'TT Interphases Pro';
font-style: normal;
font-weight: 500;
src: url('../../src/fonts/TT_Interphases_Pro_Medium.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'TT Interphases Pro';
font-style: normal;
font-weight: 600;
src: url('../../src/fonts/TT_Interphases_Pro_DemiBold.woff2') format('woff2');
}
/* normalize html */
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
box-sizing: border-box;
font-size: 6.944vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
font-size: 25.65vw;
}
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
margin: 0;
padding: 0;
font-weight: normal;
}
ol,
ul {
list-style: none;
}
img {
max-width: 100%;
height: auto;
}
a {
color: inherit;
text-decoration: none;
}
html {
background-color: var(--white);
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "liga" 1;
font-smoothing: antialiased;
font-family: var(--main-font);
font-size: 0.23rem;
line-height: 1.3;
letter-spacing: -0.02em;
text-underline-position: from-font;
text-decoration-skip-ink: none;
}
/* overflow: hidden; */
@media screen and (max-width: 768px) and (orientation: portrait) {
.main {
overflow: hidden;
}
}
body.mobile-menu-open {
overflow: hidden;
}
/* Image with 'data' attribute is hidden */
img[data-lazy-src] {
/* we set the opacity to 0 */
opacity: 0;
}
/* Image without 'data' attribute is (or becomes) visible */
img.lazyloaded {
/* prepare the future animation */
-webkit-transition: opacity 0.5s linear 0.2s;
-moz-transition: opacity 0.5s linear 0.2s;
transition: opacity 0.5s linear 0.2s;
/* we set the opacity to 1 to do the magic */
opacity: 1;
}
.spacer {
height: 200vh;
}
.container {
width: 100%;
max-width: 12.8rem;
margin: auto;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.container {
padding-left: 0.2rem;
padding-right: 0.2rem;
}
}
/* gf */
.gform-theme--framework textarea,
.gform-theme--framework input[type]:not([type="hidden"]) {
--gf-local-outline-width: 0px;
--gf-local-outline-style: none;
--gf-local-outline-color: transparent;
--gf-local-shadow: none;
outline: none !important;
box-shadow: none !important;
}
.gform-theme--framework textarea:focus,
.gform-theme--framework textarea:focus-visible,
.gform-theme--framework input[type]:not([type="hidden"]):focus,
.gform-theme--framework input[type]:not([type="hidden"]):focus-visible {
outline: none !important;
box-shadow: none !important;
}
/* Typography */
.heading-large {
font-size: 0.44rem;
line-height: 110%;
letter-spacing: -0.02em;
font-weight: 400;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.heading-large {
font-size: 0.3rem;
}
}
.heading-small {
font-size: 0.4rem;
line-height: 110%;
letter-spacing: -0.02em;
font-weight: 400;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.heading-small {
font-size: 0.32rem;
}
}
.overline{
font-size: 0.16rem;
line-height: 120%;
letter-spacing: 0;
font-weight: 600;
}
.overline-large {
font-size: 0.2rem;
line-height: 120%;
letter-spacing: 0;
font-weight: 600;
}
.title-28 {
font-size: 0.28rem;
line-height: 110%;
letter-spacing: -0.02em;
font-weight: 400;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.title-28 {
font-size: 0.24rem;
}
}
.body-extra-large {
font-size: 0.28rem;
line-height: 110%;
letter-spacing: -0.02em;
font-weight: 400;
}
.body-large, .body-large p {
font-size: 0.23rem;
line-height: 130%;
letter-spacing: -0.02em;
font-weight: 400;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.body-large, .body-large p {
font-size: 0.2rem;
}
}
.body-medium {
font-size: 0.20rem;
line-height: 110%;
letter-spacing: -0.02em;
font-weight: 400;
}
.body-regular, .body-regular p {
font-size: 0.16rem;
line-height: 140%;
letter-spacing: 0;
font-weight: 400;
}
.links, .url{
font-size: .16rem;
line-height: 150%;
font-weight: 600;
}
html[lang^="de"],
html[lang^="en"] {
/* Desktop: no automatic hyphenation, rely on explicit soft hyphens only. */
hyphens: manual;
-webkit-hyphens: manual;
-ms-hyphens: manual;
overflow-wrap: normal;
word-break: normal;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
html[lang^="de"],
html[lang^="en"] {
/* Mobile: allow automatic hyphenation globally. */
hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
}
}
.bg-grey:is(section.posts-filter-section.newsroom-posts .filter-results) .posts{
background-color: var(--light-grey);
padding: 0;
border-radius: .24rem;
gap: .2rem;
}
@media (max-width: 768px) and (orientation: portrait) {
.bg-grey:is(section.posts-filter-section.newsroom-posts .filter-results) .posts{
background-color: transparent;
}
}
[class~="2-cards"]:is(section.posts-filter-section.newsroom-posts .filter-results) .posts{
grid-template-columns: repeat(2, 1fr);
}
[class~="3-cards"]:is(section.posts-filter-section.newsroom-posts .filter-results) .posts{
grid-template-columns: repeat(3, 1fr);
}
[class~="4-cards"]:is(section.posts-filter-section.newsroom-posts .filter-results) .posts{
grid-template-columns: repeat(4, 1fr);
}
[class~="5-cards"]:is(section.posts-filter-section.newsroom-posts .filter-results) .posts{
grid-template-columns: repeat(5, 1fr);
}
[class~="6-cards"]:is(section.posts-filter-section.newsroom-posts .filter-results) .posts{
grid-template-columns: repeat(6, 1fr);
}
@media (max-width: 768px) and (orientation: portrait) {
:is(section.posts-filter-section.newsroom-posts .filter-results) .posts{
grid-template-columns: repeat(1, 1fr) !important;
}
}
:is(section.posts-filter-section.newsroom-posts .filter-results) .newsroom-downloads{
margin-top: .32rem;
}
:is(:is(section.posts-filter-section.newsroom-posts .filter-results) .newsroom-downloads) .downloads-list{
display: flex;
flex-wrap: wrap;
gap: .12rem;
margin-top: .16rem;
}
:is(section.posts-filter-section.newsroom-posts .filter-results) .newsroom-newsletter-ctas{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: .12rem;
margin: .2rem 0;
}
.is-hidden:is(:is(section.posts-filter-section.newsroom-posts .filter-results) .newsroom-newsletter-ctas){
display: none;
}
:is(:is(section.posts-filter-section.newsroom-posts .filter-results) .newsroom-newsletter-downloads) .newsletter-downloads-slider{
--newsletter-track-spill: calc((100vw - 100%) / 2);
margin-top: .56rem;
position: relative;
}
@media (max-width: 768px) and (orientation: portrait) {
:is(:is(section.posts-filter-section.newsroom-posts .filter-results) .newsroom-newsletter-downloads) .newsletter-downloads-slider{
margin-top: .4rem;
}
}
:is(:is(:is(section.posts-filter-section.newsroom-posts .filter-results) .newsroom-newsletter-downloads) .newsletter-downloads-slider) .newsletter-gsap-track{
overflow: hidden;
width: calc(100% + (var(--newsletter-track-spill) * 2));
margin-left: calc(var(--newsletter-track-spill) * -1);
margin-right: calc(var(--newsletter-track-spill) * -1);
}
:is(:is(:is(section.posts-filter-section.newsroom-posts .filter-results) .newsroom-newsletter-downloads) .newsletter-downloads-slider) .newsletter-gsap-list{
display: flex;
gap: .2rem;
padding-right: var(--newsletter-track-spill);
touch-action: pan-y;
will-change: transform;
}
:is(:is(:is(section.posts-filter-section.newsroom-posts .filter-results) .newsroom-newsletter-downloads) .newsletter-downloads-slider) .newsletter-gsap-slide{
width: auto;
flex: 0 0 auto;
}
:is(:is(:is(section.posts-filter-section.newsroom-posts .filter-results) .newsroom-newsletter-downloads) .newsletter-downloads-slider) .newsletter-gsap-nav{
display: flex;
justify-content: center;
gap: .2rem;
margin-top: .56rem;
}
:is(:is(:is(section.posts-filter-section.newsroom-posts .filter-results) .newsroom-newsletter-downloads) .newsletter-downloads-slider) .newsletter-gsap-arrow{
width: .56rem;
height: .56rem;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--blue);
border-radius: 1rem;
background-color: transparent;
cursor: pointer;
transition: all .3s ease;
}
:is(:is(:is(:is(section.posts-filter-section.newsroom-posts .filter-results) .newsroom-newsletter-downloads) .newsletter-downloads-slider) .newsletter-gsap-arrow) svg{
width: .14rem;
height: auto;
}
:is(:is(:is(:is(:is(section.posts-filter-section.newsroom-posts .filter-results) .newsroom-newsletter-downloads) .newsletter-downloads-slider) .newsletter-gsap-arrow) svg) path{
transition: fill .3s ease;
}
:is(:is(:is(:is(section.posts-filter-section.newsroom-posts .filter-results) .newsroom-newsletter-downloads) .newsletter-downloads-slider) .newsletter-gsap-arrow):hover{
background-color: var(--orange);
border-color: var(--orange);
}
:is(:is(:is(:is(section.posts-filter-section.newsroom-posts .filter-results) .newsroom-newsletter-downloads) .newsletter-downloads-slider) .newsletter-gsap-arrow):hover path{
fill: var(--white);
}
:is(:is(:is(:is(section.posts-filter-section.newsroom-posts .filter-results) .newsroom-newsletter-downloads) .newsletter-downloads-slider) .newsletter-gsap-arrow):disabled{
background-color: var(--light-grey);
border-color: var(--light-grey);
pointer-events: none;
}
@media (max-width: 768px) and (orientation: portrait) {
:is(:is(section.posts-filter-section.newsroom-posts .filter-results) .newsroom-newsletter-downloads) .newsletter-downloads-slider{
overflow: visible;
}
:is(:is(:is(section.posts-filter-section.newsroom-posts .filter-results) .newsroom-newsletter-downloads) .newsletter-downloads-slider) .newsletter-gsap-track{
overflow: visible;
}
}
:is(:is(section.posts-filter-section.newsroom-posts .filter-results) .newsroom-newsletter-downloads) .debug-empty{
color: #666;
}
section.posts-filter-section .post-filter{
display: flex;
gap: .16rem;
flex-direction: column;
margin-top: .6rem;
}
@media (max-width: 768px) and (orientation: portrait) {
section.posts-filter-section .post-filter{
margin-top: .4rem;
}
}
:is(:is(section.posts-filter-section .post-filter) .highlighted-filter) .highlighted-filter-scroll-wrap{
position: relative;
width: 100%;
max-width: 12.8rem;
margin: 0 auto;
}
@media (max-width: 768px) and (orientation: portrait) {
:is(:is(section.posts-filter-section .post-filter) .highlighted-filter) .highlighted-filter-scroll-wrap{
max-width: 100%;
}
}
:is(:is(:is(section.posts-filter-section .post-filter) .highlighted-filter) .highlighted-filter-scroll-wrap) .highlighted-filter-scroll-indicator{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: .28rem;
height: 100%;
border: none;
background-color: var(--orange);
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 3;
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity .3s ease, background-color .3s ease;
}
@media (max-width: 768px) and (orientation: portrait) {
:is(:is(:is(section.posts-filter-section .post-filter) .highlighted-filter) .highlighted-filter-scroll-wrap) .highlighted-filter-scroll-indicator{
display: none;
}
}
:is(:is(:is(:is(section.posts-filter-section .post-filter) .highlighted-filter) .highlighted-filter-scroll-wrap) .highlighted-filter-scroll-indicator):hover{
background-color: var(--orange);
}
.is-visible:is(:is(:is(:is(section.posts-filter-section .post-filter) .highlighted-filter) .highlighted-filter-scroll-wrap) .highlighted-filter-scroll-indicator){
opacity: 1;
pointer-events: auto;
}
.left:is(:is(:is(:is(section.posts-filter-section .post-filter) .highlighted-filter) .highlighted-filter-scroll-wrap) .highlighted-filter-scroll-indicator){
left: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: .16rem;
border-bottom-left-radius: .16rem;
}
.left:is(:is(:is(:is(section.posts-filter-section .post-filter) .highlighted-filter) .highlighted-filter-scroll-wrap) .highlighted-filter-scroll-indicator) svg{
transform: rotate(180deg);
}
.right:is(:is(:is(:is(section.posts-filter-section .post-filter) .highlighted-filter) .highlighted-filter-scroll-wrap) .highlighted-filter-scroll-indicator){
right: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: .16rem;
border-bottom-right-radius: .16rem;
}
:is(:is(section.posts-filter-section .post-filter) .highlighted-filter) .highlighted-filter-scroll-container{
padding: 0;
line-height: 0;
position: relative;
overflow: hidden;
border-radius: .16rem;
}
@media (max-width: 768px) and (orientation: portrait) {
:is(:is(section.posts-filter-section .post-filter) .highlighted-filter) .highlighted-filter-scroll-container{
width: 100%;
overflow: auto;
border-radius: 0;
}
}
:is(:is(:is(section.posts-filter-section .post-filter) .highlighted-filter) .highlighted-filter-scroll-container) .buttons{
background-color: var(--blue);
display: flex;
flex-wrap: nowrap;
gap: .04rem;
border-radius: .16rem;
overflow: hidden;
flex-wrap: nowrap;
width: fit-content;
white-space: nowrap;
min-width: 100%;
}
@media (max-width: 768px) and (orientation: portrait) {
:is(:is(:is(section.posts-filter-section .post-filter) .highlighted-filter) .highlighted-filter-scroll-container) .buttons{
margin: 0 .2rem;
}
}
.justify-content-start:is(:is(:is(:is(section.posts-filter-section .post-filter) .highlighted-filter) .highlighted-filter-scroll-container) .buttons){
justify-content: flex-start;
}
.justify-content-between:is(:is(:is(:is(section.posts-filter-section .post-filter) .highlighted-filter) .highlighted-filter-scroll-container) .buttons){
justify-content: space-between;
}
:is(:is(:is(:is(section.posts-filter-section .post-filter) .highlighted-filter) .highlighted-filter-scroll-container) .buttons) button{
border: none;
background-color: transparent;
font-size: .16rem;
line-height: 1.5;
color: var(--white);
opacity: 1;
font-weight: 600;
padding: .12rem .32rem;
border-radius: .16rem;
cursor: pointer;
transition: background-color .3s ease;
font-family: var(--main-font);
}
:is(:is(:is(:is(:is(section.posts-filter-section .post-filter) .highlighted-filter) .highlighted-filter-scroll-container) .buttons) button):hover,.is-active:is(:is(:is(:is(:is(section.posts-filter-section .post-filter) .highlighted-filter) .highlighted-filter-scroll-container) .buttons) button),.active:is(:is(:is(:is(:is(section.posts-filter-section .post-filter) .highlighted-filter) .highlighted-filter-scroll-container) .buttons) button){
background-color: var(--orange);
}
@media (max-width: 768px) and (orientation: portrait) {
:is(section.posts-filter-section .post-filter) .main-filter{
padding: 0 .2rem;
}
}
:is(:is(section.posts-filter-section .post-filter) .main-filter) .container{
background-color: var(--light-grey);
padding: .24rem;
border-radius: .24rem;
display: flex;
flex-direction: column;
gap: .32rem;
width: 100%;
}
@media (max-width: 768px) and (orientation: portrait) {
:is(:is(section.posts-filter-section .post-filter) .main-filter) .container{
padding: .16rem;
gap: .32rem;
}
}
:is(section.posts-filter-section .post-filter) .row{
display: flex;
gap: .08rem;
justify-content: space-between;
align-items: center;
}
@media (max-width: 768px) and (orientation: portrait) {
:is(section.posts-filter-section .post-filter) .row{
flex-direction: column;
gap: .32rem;
align-items: flex-start;
}
}
:is(section.posts-filter-section .post-filter) .container:has(.newsroom-filter-hint){
padding-top: .11rem;
padding-bottom: .11rem;
}
:is(section.posts-filter-section .post-filter) .container:has(.newsroom-extra-filters){
gap: 0;
}
:is(section.posts-filter-section .post-filter) .newsroom-filter-hint{
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
gap: .08rem;
border: none;
background: transparent;
cursor: pointer;
padding: 0;
text-align: center;
}
:is(section.posts-filter-section .post-filter) .newsroom-filter-hint-icon{
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
transition: transform .3s ease;
}
:is(section.posts-filter-section .post-filter) .newsroom-filter-toggle.is-open .newsroom-filter-hint-icon{
transform: rotate(180deg);
}
:is(section.posts-filter-section .post-filter) .newsroom-filter-hint-text{
font-size: .16rem;
line-height: 1.5;
font-weight: 500;
}
:is(section.posts-filter-section .post-filter) .newsroom-extra-filters{
overflow: hidden;
height: 0;
opacity: 0;
margin-bottom: 0;
}
:is(section.posts-filter-section .post-filter) .newsroom-extra-filters.is-open{
opacity: 1;
margin-bottom: .16rem;
overflow: visible;
}
:is(section.posts-filter-section .post-filter) .newsroom-extra-filters .filters{
justify-content: flex-start;
align-items: stretch;
opacity: 0;
transition: opacity .2s ease;
}
/* .newsroom-extra-filters .filter{
min-width: 2.4rem;
} */
@media (max-width: 768px) and (orientation: portrait) {
:is(section.posts-filter-section .post-filter) .newsroom-extra-filters .filter{
width: 100%;
min-width: 0;
}
}
:is(section.posts-filter-section .post-filter) .filters{
display: flex;
gap: .08rem;
}
@media (max-width: 768px) and (orientation: portrait) {
:is(section.posts-filter-section .post-filter) .filters{
flex-direction: column;
gap: .16rem;
}
}
:is(:is(section.posts-filter-section .post-filter) .reset-filters) .reset-filters-button{
background-color: var(--orange);
border: 2px solid var(--orange);
font-size: .16rem;
line-height: 1.5;
color: var(--white);
opacity: 1;
font-weight: 600;
border: none;
border-radius: 1rem;
padding: .12rem .32rem;
cursor: pointer;
}
:is(section.posts-filter-section .post-filter) .choices{
margin: 0;
margin-bottom: 0;
width: fit-content;
}
:is(:is(section.posts-filter-section .post-filter) .choices) .choices__inner{
padding: .12rem .38rem .12rem .16rem;
padding-bottom: .12rem !important;
background-color: var(--white);
border: 2px solid var(--white);
border-radius: 1rem;
line-height: 0;
width: 100%;
transition: border-color .3s ease;
min-height: unset !important;
}
:is(:is(:is(section.posts-filter-section .post-filter) .choices) .choices__inner):hover,:is(:is(:is(section.posts-filter-section .post-filter) .choices) .choices__inner):focus,:is(:is(:is(section.posts-filter-section .post-filter) .choices) .choices__inner):active,:is(:is(:is(section.posts-filter-section .post-filter) .choices) .choices__inner):focus-visible,:is(:is(:is(section.posts-filter-section .post-filter) .choices) .choices__inner):focus-within,:is(:is(:is(section.posts-filter-section .post-filter) .choices) .choices__inner):has( + .is-active){
border-color: var(--orange);
}
:is(:is(:is(section.posts-filter-section .post-filter) .choices) .choices__inner) .choices__list--single{
width: 100%;
padding: 0;
}
:is(:is(:is(:is(section.posts-filter-section .post-filter) .choices) .choices__inner) .choices__list--single) .choices__item{
font-size: .16rem;
line-height: 1.5;
color: var(--blue);
opacity: 1;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
:is(:is(section.posts-filter-section .post-filter) .choices)::after{
width: .12rem !important;
height: .07rem !important;
right: .18rem !important;
border-color: transparent !important;
border: none !important;
background-image: url('data:image/svg+xml,');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin-top: 0 !important;
}
.is-open:is(:is(section.posts-filter-section .post-filter) .choices)::after{
transform: rotate(180deg);
margin-top: 0 !important;
}
:is(section.posts-filter-section .post-filter) .choices__list.custom-scrollbar{
background-color: var(--white) !important;
}
:is(section.posts-filter-section .post-filter) .choices__list:not(.choices__list--single){
background-color: transparent;
width: fit-content;
max-width: fit-content;
min-width: 100%;
padding-right: 0 !important;
}
:is(section.posts-filter-section .post-filter) .choices__list--dropdown,:is(section.posts-filter-section .post-filter) .choices__list[aria-expanded]{
margin-top: .06rem;
border: none;
background-color: transparent;
transition: border-color .3s ease;
z-index: 10 !important;
}
.is-flipped:is(:is(section.posts-filter-section .post-filter) .choices__list--dropdown,:is(section.posts-filter-section .post-filter) .choices__list[aria-expanded]) {
margin-bottom: .06rem;
}
.is-active:is(:is(section.posts-filter-section .post-filter) .choices__list--dropdown,:is(section.posts-filter-section .post-filter) .choices__list[aria-expanded]) .choices__list{
border: 2px solid var(--orange);
border-radius: .16rem;
}
:is(:is(section.posts-filter-section .post-filter) .choices__list--dropdown,:is(section.posts-filter-section .post-filter) .choices__list[aria-expanded]) .choices__item--selectable,:is(:is(section.posts-filter-section .post-filter) .choices__list--dropdown,:is(section.posts-filter-section .post-filter) .choices__list[aria-expanded]) .choices__placeholder{
/* transition: background-color .3s ease; */
color: var(--blue);
font-size: .16rem;
line-height: 1.2;
font-weight: 600;
opacity: 1;
white-space: nowrap;
border: 2px solid transparent;
background-color: var(--white);
padding: .1rem .16rem;
transition: .3s ease;
}
:is(:is(:is(section.posts-filter-section .post-filter) .choices__list--dropdown,:is(section.posts-filter-section .post-filter) .choices__list[aria-expanded]) .choices__item--selectable,:is(:is(section.posts-filter-section .post-filter) .choices__list--dropdown,:is(section.posts-filter-section .post-filter) .choices__list[aria-expanded]) .choices__placeholder):first-child{
/* border-top-left-radius: .16rem;
border-top-right-radius: .16rem; */
border: 2px solid var(--white);
}
:is(:is(:is(section.posts-filter-section .post-filter) .choices__list--dropdown,:is(section.posts-filter-section .post-filter) .choices__list[aria-expanded]) .choices__item--selectable,:is(:is(section.posts-filter-section .post-filter) .choices__list--dropdown,:is(section.posts-filter-section .post-filter) .choices__list[aria-expanded]) .choices__placeholder):last-child{
/* border-bottom-left-radius: .16rem;
border-bottom-right-radius: .16rem; */
border: 2px solid var(--white);
}
:is(:is(:is(section.posts-filter-section .post-filter) .choices__list--dropdown,:is(section.posts-filter-section .post-filter) .choices__list[aria-expanded]) .choices__item--selectable,:is(:is(section.posts-filter-section .post-filter) .choices__list--dropdown,:is(section.posts-filter-section .post-filter) .choices__list[aria-expanded]) .choices__placeholder):hover,.is-selected:is(:is(:is(section.posts-filter-section .post-filter) .choices__list--dropdown,:is(section.posts-filter-section .post-filter) .choices__list[aria-expanded]) .choices__item--selectable,:is(:is(section.posts-filter-section .post-filter) .choices__list--dropdown,:is(section.posts-filter-section .post-filter) .choices__list[aria-expanded]) .choices__placeholder),:is(:is(:is(section.posts-filter-section .post-filter) .choices__list--dropdown,:is(section.posts-filter-section .post-filter) .choices__list[aria-expanded]) .choices__item--selectable,:is(:is(section.posts-filter-section .post-filter) .choices__list--dropdown,:is(section.posts-filter-section .post-filter) .choices__list[aria-expanded]) .choices__placeholder):focus,:is(:is(:is(section.posts-filter-section .post-filter) .choices__list--dropdown,:is(section.posts-filter-section .post-filter) .choices__list[aria-expanded]) .choices__item--selectable,:is(:is(section.posts-filter-section .post-filter) .choices__list--dropdown,:is(section.posts-filter-section .post-filter) .choices__list[aria-expanded]) .choices__placeholder):focus-visible,:is(:is(:is(section.posts-filter-section .post-filter) .choices__list--dropdown,:is(section.posts-filter-section .post-filter) .choices__list[aria-expanded]) .choices__item--selectable,:is(:is(section.posts-filter-section .post-filter) .choices__list--dropdown,:is(section.posts-filter-section .post-filter) .choices__list[aria-expanded]) .choices__placeholder):focus-within,:is(:is(:is(section.posts-filter-section .post-filter) .choices__list--dropdown,:is(section.posts-filter-section .post-filter) .choices__list[aria-expanded]) .choices__item--selectable,:is(:is(section.posts-filter-section .post-filter) .choices__list--dropdown,:is(section.posts-filter-section .post-filter) .choices__list[aria-expanded]) .choices__placeholder):active,:is(:is(:is(section.posts-filter-section .post-filter) .choices__list--dropdown,:is(section.posts-filter-section .post-filter) .choices__list[aria-expanded]) .choices__item--selectable,:is(:is(section.posts-filter-section .post-filter) .choices__list--dropdown,:is(section.posts-filter-section .post-filter) .choices__list[aria-expanded]) .choices__placeholder):target{
background-color: var(--orange) !important;
border: 2px solid var(--orange);
opacity: 1 !important;
/* border-radius: 1rem !important; */
color: var(--white);
}
.is-highlighted:is(:is(:is(section.posts-filter-section .post-filter) .choices__list--dropdown,:is(section.posts-filter-section .post-filter) .choices__list[aria-expanded]) .choices__item--selectable,:is(:is(section.posts-filter-section .post-filter) .choices__list--dropdown,:is(section.posts-filter-section .post-filter) .choices__list[aria-expanded]) .choices__placeholder){
background-color: var(--orange) !important;
color: var(--white);
}
:is(section.posts-filter-section .post-filter) .search{
display: flex;
align-items: center;
}
@media (max-width: 768px) and (orientation: portrait) {
:is(section.posts-filter-section .post-filter) .search{
width: 100%;
}
}
:is(:is(section.posts-filter-section .post-filter) .search) input{
border: none;
background-color: var(--white);
border: 2px solid var(--white);
border-radius: 1rem;
padding: .12rem .16rem;
width: 100%;
font-size: .16rem;
line-height: 1.5;
font-weight: 600;
transition: border-color .3s ease;
padding-right: .44rem;
width: 3.35rem;
}
@media (max-width: 768px) and (orientation: portrait) {
:is(:is(section.posts-filter-section .post-filter) .search) input{
width: 100%;
}
}
:is(:is(:is(section.posts-filter-section .post-filter) .search) input):focus,:is(:is(:is(section.posts-filter-section .post-filter) .search) input):focus-visible,:is(:is(:is(section.posts-filter-section .post-filter) .search) input):focus-within{
outline: none;
box-shadow: none;
border: 2px solid var(--orange);
}
:is(:is(:is(section.posts-filter-section .post-filter) .search) input)::placeholder{
color: var(--blue);
opacity: 1;
font-family: var(--main-font);
}
:is(:is(:is(:is(section.posts-filter-section .post-filter) .search) input):focus,:is(:is(:is(section.posts-filter-section .post-filter) .search) input):focus-visible,:is(:is(:is(section.posts-filter-section .post-filter) .search) input):focus-within)::placeholder{
display: none;
opacity: 0;
}
:is(:is(section.posts-filter-section .post-filter) .search) .search-icon{
width: .2rem;
height: .2rem;
margin-left: -.42rem;
line-height: 0;
}
:is(:is(:is(section.posts-filter-section .post-filter) .search) .search-icon) img,:is(:is(:is(section.posts-filter-section .post-filter) .search) .search-icon) svg{
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
:is(:is(section.posts-filter-section .post-filter) .visual) .icon{
width: .24rem;
height: .24rem;
display: inline-block;
}
:is(:is(:is(section.posts-filter-section .post-filter) .visual) .icon) img,:is(:is(:is(section.posts-filter-section .post-filter) .visual) .icon) svg{
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
:is(:is(section.posts-filter-section .post-filter) .visual) p{
color: var(--blue);
display: flex;
align-items: center;
justify-content: center;
gap: .08rem;
}
section.posts-filter-section .filter-results{
margin-top: .72rem;
margin-bottom: 1.02rem;
}
@media (max-width: 768px) and (orientation: portrait) {
section.posts-filter-section .filter-results{
margin-top: .4rem;
margin-bottom: .4rem;
}
}
:is(section.posts-filter-section .filter-results) .posts-count{
color: var(--blue);
}
.4-cards:is(section.posts-filter-section .filter-results) .posts{
grid-template-columns: repeat(4, 1fr);
}
.3-cards:is(section.posts-filter-section .filter-results) .posts{
grid-template-columns: repeat(3, 1fr);
}
:is(section.posts-filter-section .filter-results) .no-results{
padding: .11rem .24rem;
}
:is(section.posts-filter-section .filter-results) .posts{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .2rem;
margin-top: .48rem;
}
@media (max-width: 768px) and (orientation: portrait) {
:is(section.posts-filter-section .filter-results) .posts{
grid-template-columns: repeat(1, 1fr);
margin-top: .4rem;
}
}
:is(:is(section.posts-filter-section .filter-results) .posts) .card{
position: relative;
border-radius: .32rem;
overflow: hidden;
line-height: 0;
height: 3.16rem;
}
@media (max-width: 768px) and (orientation: portrait) {
:is(:is(section.posts-filter-section .filter-results) .posts) .card{
height: 2.58rem;
width: 2.98rem;
}
}
:is(:is(:is(section.posts-filter-section .filter-results) .posts) .card) .card-image{
width: 100%;
height: 100%;
}
:is(:is(:is(:is(section.posts-filter-section .filter-results) .posts) .card) .card-image) img,:is(:is(:is(:is(section.posts-filter-section .filter-results) .posts) .card) .card-image) svg{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
:is(:is(:is(section.posts-filter-section .filter-results) .posts) .card) .overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--blue);
opacity: .9;
transition: opacity .3s ease;
}
:is(:is(:is(section.posts-filter-section .filter-results) .posts) .card) .card-content{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
padding: .24rem;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: .08rem;
}
:is(:is(:is(:is(:is(section.posts-filter-section .filter-results) .posts) .card) .card-content) .card-header) .instrument{
color: var(--orange);
}
:is(:is(:is(:is(section.posts-filter-section .filter-results) .posts) .card) .card-content) .card-body{
margin-top: .16rem;
}
:is(:is(:is(:is(:is(section.posts-filter-section .filter-results) .posts) .card) .card-content) .card-body) h3{
color: var(--white);
}
:is(:is(:is(:is(:is(section.posts-filter-section .filter-results) .posts) .card) .card-content) .card-footer) .btn{
width: fit-content;
z-index: 2;
position: relative;
}
:is(:is(:is(:is(section.posts-filter-section .filter-results) .posts) .card) .card-content) .absolute-link{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
:is(:is(:is(section.posts-filter-section .filter-results) .posts) .card):hover .overlay{
opacity: .2;
}
@media (max-width: 768px) and (orientation: portrait) {
.card-video:is(:is(:is(section.posts-filter-section .filter-results) .posts) .card){
max-width: 2.98rem;
}
}
.card-video:is(:is(:is(section.posts-filter-section .filter-results) .posts) .card) .card-footer{
display: flex;
justify-content: flex-end;
}
@media (max-width: 768px) and (orientation: portrait) {
.card-pressespiegel:is(:is(:is(section.posts-filter-section .filter-results) .posts) .card){
width: 2.98rem;
}
}
.card-pressespiegel:is(:is(:is(section.posts-filter-section .filter-results) .posts) .card) .card-header{
margin-bottom: .16rem;
}
.card-pressespiegel:is(:is(:is(section.posts-filter-section .filter-results) .posts) .card) .card-body{
margin-top: 0;
}
:is(.card-pressespiegel:is(:is(:is(section.posts-filter-section .filter-results) .posts) .card) .card-footer) .date{
color: var(--white);
margin: 0;
}
.card-pressespiegel.regular:is(:is(:is(section.posts-filter-section .filter-results) .posts) .card){
display: flex;
justify-content: center;
align-items: center;
}
.card-pressespiegel.regular:is(:is(:is(section.posts-filter-section .filter-results) .posts) .card) .card-image{
width: 1.8rem;
height: 1.5rem;
}
:is(.card-pressespiegel.regular:is(:is(:is(section.posts-filter-section .filter-results) .posts) .card) .card-image) img{
object-fit: contain !important;
}
:is(:is(section.posts-filter-section .filter-results) .posts) .presseinformationen-card{
display: flex;
flex-direction: column;
gap: .16rem;
justify-content: space-between;
height: 100%;
padding: .2rem;
}
@media (max-width: 768px) and (orientation: portrait) {
:is(:is(section.posts-filter-section .filter-results) .posts) .presseinformationen-card{
background-color: var(--light-grey);
border-radius: .32rem;
width: 2.98rem;
max-width: 2.98rem;
}
}
:is(:is(:is(section.posts-filter-section .filter-results) .posts) .presseinformationen-card) .card-image{
filter: grayscale(1);
width: 1.5rem;
height: 1.08rem;
display: flex;
justify-content: flex-start;
align-items: center;
height: 1rem;
}
:is(:is(:is(:is(section.posts-filter-section .filter-results) .posts) .presseinformationen-card) .card-image) img{
max-width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
:is(:is(:is(:is(section.posts-filter-section .filter-results) .posts) .presseinformationen-card) .card-content) .date{
color: var(--blue);
}
:is(:is(:is(:is(section.posts-filter-section .filter-results) .posts) .presseinformationen-card) .card-content) .card-excerpt{
color: var(--dark-grey);
margin-top: .01rem;
}
:is(:is(section.posts-filter-section .filter-results) .posts) .presseinformationen-card-link{
display: block;
width: fit-content;
max-width: 100%;
}
@media (max-width: 768px) and (orientation: portrait) {
:is(:is(section.posts-filter-section .filter-results) .posts) .presseinformationen-card-link{
width: 2.98rem;
max-width: 2.98rem;
}
}
:is(:is(section.posts-filter-section .filter-results) .posts):has(.portrait-card){
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 768px) and (orientation: portrait) {
:is(:is(section.posts-filter-section .filter-results) .posts):has(.portrait-card){
grid-template-columns: repeat(1, 1fr);
}
}
:is(:is(section.posts-filter-section .filter-results) .posts) .portrait-card{
width: 100%;
display: flex;
flex-direction: column;
gap: .16rem;
}
:is(:is(:is(section.posts-filter-section .filter-results) .posts) .portrait-card) .card-image{
line-height: 0;
border-radius: .32rem;
overflow: hidden;
height: 3.45rem;
}
:is(:is(:is(:is(section.posts-filter-section .filter-results) .posts) .portrait-card) .card-image) img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
:is(:is(:is(section.posts-filter-section .filter-results) .posts) .portrait-card) .card-content{
display: flex;
flex-direction: column;
gap: 0.02rem;
line-height: 0;
}
:is(:is(section.posts-filter-section .filter-results) .posts):has(.brochure-card){
gap: .4rem;
}
@media (max-width: 768px) and (orientation: portrait) {
:is(:is(section.posts-filter-section .filter-results) .posts) .brochure-card{
max-width: 2.98rem;
}
}
:is(:is(:is(section.posts-filter-section .filter-results) .posts) .brochure-card) .card-image{
width: 100%;
line-height: 0;
}
:is(:is(:is(:is(section.posts-filter-section .filter-results) .posts) .brochure-card) .card-image) img{
width: 100%;
}
:is(:is(:is(section.posts-filter-section .filter-results) .posts) .brochure-card) .card-content{
margin-top: .24rem;
}
:is(:is(:is(:is(section.posts-filter-section .filter-results) .posts) .brochure-card) .card-content) .date{
color: var(--orange);
}
:is(:is(:is(:is(section.posts-filter-section .filter-results) .posts) .brochure-card) .card-content) .file-title{
color: var(--blue);
margin-top: .08rem;
}
:is(:is(section.posts-filter-section .filter-results) .posts) .brochure-card{
padding-bottom: .44rem;
}
:is(:is(section.posts-filter-section .filter-results) .posts) .news-card{
width: 100%;
position: relative;
margin-bottom: .4rem;
background-color: var(--white);
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(section.posts-filter-section .filter-results) .posts) .news-card{
margin-bottom: 0;
max-width: 2.98rem;
}
}
:is(:is(:is(:is(section.posts-filter-section .filter-results) .posts) .news-card):hover .card-image) img{
transform: scale(1.05);
}
:is(:is(:is(section.posts-filter-section .filter-results) .posts) .news-card) .absolute-link{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
:is(:is(:is(section.posts-filter-section .filter-results) .posts) .news-card) .card-image{
width: 100%;
height: 3.1rem;
border-radius: .32rem;
overflow: hidden;
transition: transform .3s ease-in-out;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(:is(section.posts-filter-section .filter-results) .posts) .news-card) .card-image{
height: 2.93rem;
}
}
:is(:is(:is(:is(section.posts-filter-section .filter-results) .posts) .news-card) .card-image):hover img{
transform: scale(1.05);
}
:is(:is(:is(:is(section.posts-filter-section .filter-results) .posts) .news-card) .card-image) img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform .3s ease-in-out;
}
:is(:is(:is(section.posts-filter-section .filter-results) .posts) .news-card) .card-content{
padding: .24rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(:is(section.posts-filter-section .filter-results) .posts) .news-card) .card-content{
padding: .16rem 0;
}
}
:is(:is(:is(:is(section.posts-filter-section .filter-results) .posts) .news-card) .card-content) .category{
color: var(--orange);
}
:is(:is(:is(:is(section.posts-filter-section .filter-results) .posts) .news-card) .card-content) .title{
margin-top: .08rem;
color: var(--dark-grey);
}
:is(:is(:is(:is(section.posts-filter-section .filter-results) .posts) .news-card) .card-content) .text{
margin-top: .08rem;
color: var(--dark-grey);
}
:is(section.posts-filter-section .filter-results) .pagination{
margin-top: .48rem;
display: flex;
justify-content: center;
align-items: center;
gap: .2rem;
}
:is(:is(section.posts-filter-section .filter-results) .pagination) .pagination-button{
width: .56rem;
height: .56rem;
display: flex;
align-items: center;
justify-content: center;
border: none;
background-color: transparent;
border: 2px solid var(--blue);
cursor: pointer;
transition: all .3s ease;
border-radius: 1rem;
overflow: hidden;
}
.disabled:is(:is(:is(section.posts-filter-section .filter-results) .pagination) .pagination-button){
background-color: var(--light-grey);
border: 2px solid var(--light-grey);
pointer-events: none;
}
:is(:is(:is(section.posts-filter-section .filter-results) .pagination) .pagination-button) svg{
width: .14rem;
height: auto;
}
:is(:is(:is(:is(section.posts-filter-section .filter-results) .pagination) .pagination-button) svg) path{
transition: fill .3s ease;
}
:is(:is(:is(section.posts-filter-section .filter-results) .pagination) .pagination-button):hover{
background-color: var(--orange);
border: 2px solid var(--orange);
}
:is(:is(:is(:is(section.posts-filter-section .filter-results) .pagination) .pagination-button):hover svg) path{
fill: var(--white);
}
.previous:is(:is(:is(section.posts-filter-section .filter-results) .pagination) .pagination-button) svg{
transform: translateX(-.02rem);
}
.next:is(:is(:is(section.posts-filter-section .filter-results) .pagination) .pagination-button) svg{
transform: translateX(.02rem);
}
:is(:is(section.posts-filter-section .filter-results) .pagination) .pages{
display: flex;
justify-content: center;
align-items: center;
}
:is(:is(:is(section.posts-filter-section .filter-results) .pagination) .pages) .page-button{
background-color: transparent;
border: none;
outline: none;
font-family: var(--main-font);
color: var(--dark-grey);
transition: color .3s ease;
padding: .08rem;
cursor: pointer;
}
:is(:is(:is(:is(section.posts-filter-section .filter-results) .pagination) .pages) .page-button):hover,.is-active:is(:is(:is(:is(section.posts-filter-section .filter-results) .pagination) .pages) .page-button){
color: var(--orange);
}
.is-active:is(:is(:is(:is(section.posts-filter-section .filter-results) .pagination) .pages) .page-button){
pointer-events: none;
}
:is(:is(section.posts-filter-section .filter-results) .posts) .newsroom-mobile-slider{
position: relative;
overflow: hidden;
opacity: 1;
visibility: visible;
}
:is(:is(:is(section.posts-filter-section .filter-results) .posts) .newsroom-mobile-slider) .newsroom-mobile-track{
overflow: hidden;
}
:is(:is(:is(section.posts-filter-section .filter-results) .posts) .newsroom-mobile-slider) .newsroom-mobile-list{
display: flex;
align-items: stretch;
gap: .2rem;
touch-action: pan-y;
user-select: none;
-webkit-user-select: none;
will-change: transform;
}
:is(:is(:is(section.posts-filter-section .filter-results) .posts) .newsroom-mobile-slider) .newsroom-mobile-slide{
width: auto;
flex: 0 0 auto;
display: flex;
}
:is(:is(:is(section.posts-filter-section .filter-results) .posts) .newsroom-mobile-slider) .newsroom-mobile-loader{
position: absolute;
right: .12rem;
bottom: .12rem;
width: .52rem;
height: .52rem;
border-radius: .24em;
background-color: var(--light-grey);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity .2s ease, visibility .2s ease;
z-index: 2;
pointer-events: none;
}
.is-visible:is(:is(:is(:is(section.posts-filter-section .filter-results) .posts) .newsroom-mobile-slider) .newsroom-mobile-loader){
opacity: 1;
visibility: visible;
}
:is(:is(:is(:is(section.posts-filter-section .filter-results) .posts) .newsroom-mobile-slider) .newsroom-mobile-loader) .newsroom-mobile-loader__spinner{
width: .26rem;
height: .26rem;
border-radius: 50%;
border: .03rem solid var(--blue);
border-top-color: var(--white);
animation: newsroom-mobile-spin .75s linear infinite;
}
.news-card--presseinformationen .card-image{
display: flex;
justify-content: center;
align-items: center;
}
.news-card--presseinformationen .image-wrap{
width: 1.5rem;
height: 1rem;
}
.news-card--presseinformationen .card-image img{
object-fit: contain !important;
object-position: center;
}
.company-posts.posts-filter-section .highlighted-filter-button{
flex-grow: 1;
}
@media (max-width: 768px) and (orientation: portrait) {
.company-posts.posts-filter-section .highlighted-filter-button{
flex-grow: unset;
}
}
.newsroom-downloads-wrap .downloads-heading{
width: 8.68rem;
margin: 0 auto;
text-align: center;
color: var(--blue);
}
@media (max-width: 768px) and (orientation: portrait) {
.newsroom-downloads-wrap .downloads-heading{
width: 100%;
}
}
.newsroom-downloads-wrap .downloads-text{
width: 8.68rem;
margin: 0 auto;
margin-top: .24rem;
text-align: center;
color: var(--blue);
}
@media (max-width: 768px) and (orientation: portrait) {
.newsroom-downloads-wrap .downloads-text{
width: 100%;
}
}
.newsroom-posts .highlighted-filter-button{
flex-grow: 1;
}
@media (max-width: 768px) and (orientation: portrait) {
.newsroom-posts .highlighted-filter-button{
flex-grow: unset;
}
}
@keyframes newsroom-mobile-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* People modal portal (rendered in footer/body) */
.people-modal-backdrop {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
background-color: rgba(232, 232, 232, 0.95);
z-index: 1000;
display: none;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0.32rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.people-modal-backdrop {
padding: 0.1rem;
}
}
.people-modal-backdrop.is-active {
display: flex;
}
.people-modal-backdrop .people-modal {
display: flex;
height: 6rem;
max-width: 10.65rem;
display: none;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.people-modal-backdrop .people-modal {
height: unset;
max-height: 7rem;
flex-direction: column;
gap: 0.16rem;
}
}
.is-active:is(.people-modal-backdrop .people-modal) {
display: flex;
}
:is(.people-modal-backdrop .people-modal) .modal-image {
position: relative;
flex-shrink: 0;
width: 4.14rem;
height: 100%;
border-radius: 0.32rem;
overflow: hidden;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(.people-modal-backdrop .people-modal) .modal-image {
width: 100%;
height: 3.2rem;
}
}
:is(:is(.people-modal-backdrop .people-modal) .modal-image) img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
:is(.people-modal-backdrop .people-modal) .modal-body {
background-color: var(--white);
border-top: 0.09rem solid var(--orange);
border-radius: 0.32rem;
padding: 0.24rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(.people-modal-backdrop .people-modal) .modal-body {
padding: 0.2rem;
max-height: 3.64rem;
}
}
:is(:is(.people-modal-backdrop .people-modal) .modal-body) .modal-header {
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
}
:is(:is(:is(.people-modal-backdrop .people-modal) .modal-body) .modal-header) .modal-close {
flex-shrink: 0;
width: 0.56rem;
height: 0.56rem;
background-color: transparent;
display: flex;
justify-content: center;
align-items: center;
border: none;
cursor: pointer;
}
:is(:is(.people-modal-backdrop .people-modal) .modal-body) .modal-content-wrap {
flex-grow: 1;
overflow: auto;
}
section.single-video{
padding: .96rem 0;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
section.single-video{
padding: .4rem 0;
}
}
section.single-video .container{
display: flex;
justify-content: space-between;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
section.single-video .container{
flex-direction: column;
gap: .4rem;
}
}
:is(section.single-video .container) .left{
width: 5.22rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(section.single-video .container) .left{
width: 100%;
}
}
:is(:is(section.single-video .container) .left) .title{
color: var(--blue);
}
:is(:is(:is(section.single-video .container) .left) .title) span{
color: var(--orange);
}
:is(:is(section.single-video .container) .left) .text{
margin-top: .48rem;
color: var(--dark-grey);
font-weight: 400;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(section.single-video .container) .left) .text{
margin-top: .4rem;
}
}
:is(:is(:is(section.single-video .container) .left) .text) span{
font-weight: 600;
}
:is(:is(section.single-video .container) .left) .buttons{
display: flex;
flex-wrap: wrap;
margin-top: .48rem;
gap: .24rem;
}
:is(:is(:is(section.single-video .container) .left) .buttons) .btn{
display: flex;
align-items: center;
padding: .12rem .24rem;
gap: .08rem;
}
:is(:is(:is(:is(section.single-video .container) .left) .buttons) .btn) .icon{
width: .24rem;
height: .24rem;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
:is(:is(:is(:is(:is(section.single-video .container) .left) .buttons) .btn) .icon) svg{
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.pdf-download-btn:is(:is(:is(:is(section.single-video .container) .left) .buttons) .btn) .icon{
padding: .04rem;
}
:is(:is(:is(:is(section.single-video .container) .left) .buttons) .btn) svg path,:is(:is(:is(:is(section.single-video .container) .left) .buttons) .btn) svg line{
transition: all .3s ease;
}
:is(:is(:is(:is(section.single-video .container) .left) .buttons) .btn):hover{
color: var(--blue);
}
:is(:is(:is(:is(section.single-video .container) .left) .buttons) .btn):hover svg path,:is(:is(:is(:is(section.single-video .container) .left) .buttons) .btn):hover svg line{
fill: var(--blue);
stroke: var(--blue);
}
:is(section.single-video .container) .right{
width: 6.3rem;
display: flex;
justify-content: flex-end;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(section.single-video .container) .right{
width: 100%;
}
}
:is(:is(section.single-video .container) .right) .video-wrap{
width: 100%;
max-width: 6.3rem;
aspect-ratio: 16 / 9;
border-radius: .32rem;
overflow: hidden;
}
:is(:is(:is(section.single-video .container) .right) .video-wrap) iframe,:is(:is(:is(section.single-video .container) .right) .video-wrap) video{
width: 100%;
height: 100%;
display: block;
border: 0;
}
:is(:is(:is(section.single-video .container) .right) .video-wrap) video{
object-fit: cover;
}
.content p + p,.content p + div,.content div + p,.content div + div,.content p + h3,.content h3 + p,.content h3 + h3,.content p + h4,.content h4 + p,.content h4 + h4,.content ul + p,.content ol + p{
margin-top: calc(.23rem * 1.3);
}
.content em{
font-style: unset !important;
}
.content p{
font-size: 0.16rem;
line-height: 120%;
letter-spacing: 0;
font-weight: 400;
}
.content blockquote{
margin: .6rem 0;
}
:is(.content blockquote) p{
font-size: 0.16rem;
line-height: 120%;
letter-spacing: 0;
font-weight: 600;
color: var(--blue);
text-align: center;
position: relative;
}
:is(:is(.content blockquote) p)::before{
content: '';
width: .25rem;
height: .2rem;
margin-left: -.13rem;
margin-right: .04rem;
margin-top: -.1rem;
background-image: url('data:image/svg+xml,');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: inline-block;
}
:is(:is(.content blockquote) p)::after{
content: '';
width: .25rem;
height: .2rem;
margin-right: -.13rem;
margin-left: .04rem;
margin-bottom: -.1rem;
background-image: url('data:image/svg+xml,');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: inline-block;
}
:is(.content ul) li{
font-size: .16rem;
line-height: 1.5;
font-weight: 400;
letter-spacing: 0;
padding-left: .24rem;
position: relative;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(.content ul) li{
font-size: .16rem;
}
}
:is(:is(.content ul) li)::before{
content: '';
position: absolute;
left: .1rem;
top: .12rem;
width: .02rem;
height: .02rem;
display: block;
border-radius: 50%;
background-color: #000;
}
:is(:is(.content ul) li) + li{
margin-top: calc(.23rem * 1.3);
}
.content .text_mit_liste{
margin-top: unset !important;
margin: calc(.23rem * 1.3) 0 !important;
}
section.pressespiegel-single.podcast{
padding: .48rem 0;
}
section.pressespiegel-single .container{
display: flex;
justify-content: space-between;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
section.pressespiegel-single .container{
flex-direction: column;
gap: .4rem;
}
}
:is(section.pressespiegel-single .container) .left{
width: 5.22rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(section.pressespiegel-single .container) .left{
width: 100%;
}
}
:is(:is(section.pressespiegel-single .container) .left) .title{
color: var(--blue);
}
:is(:is(:is(section.pressespiegel-single .container) .left) .title) span{
color: var(--orange);
}
:is(:is(section.pressespiegel-single .container) .left) .content{
margin-top: .48rem;
color: var(--dark-grey);
}
:is(:is(:is(section.pressespiegel-single .container) .left) .content) p + p,:is(:is(:is(section.pressespiegel-single .container) .left) .content) p + h3,:is(:is(:is(section.pressespiegel-single .container) .left) .content) h3 + p{
margin-top: calc(.23rem * 1.3);
}
:is(:is(section.pressespiegel-single .container) .left) .buttons{
display: flex;
flex-wrap: wrap;
margin-top: .48rem;
gap: .24rem;
}
:is(:is(:is(section.pressespiegel-single .container) .left) .buttons) .btn{
display: flex;
align-items: center;
padding: .12rem .24rem;
gap: .08rem;
}
:is(:is(:is(:is(section.pressespiegel-single .container) .left) .buttons) .btn) .icon{
width: .24rem;
height: .24rem;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
:is(:is(:is(:is(:is(section.pressespiegel-single .container) .left) .buttons) .btn) .icon) svg{
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.pdf-download-btn:is(:is(:is(:is(section.pressespiegel-single .container) .left) .buttons) .btn) .icon{
padding: .04rem;
}
:is(:is(:is(:is(section.pressespiegel-single .container) .left) .buttons) .btn) svg path,:is(:is(:is(:is(section.pressespiegel-single .container) .left) .buttons) .btn) svg line{
transition: all .3s ease;
}
:is(:is(:is(:is(section.pressespiegel-single .container) .left) .buttons) .btn):hover{
color: var(--blue);
}
:is(:is(:is(:is(section.pressespiegel-single .container) .left) .buttons) .btn):hover svg path,:is(:is(:is(:is(section.pressespiegel-single .container) .left) .buttons) .btn):hover svg line{
fill: var(--blue);
stroke: var(--blue);
}
:is(section.pressespiegel-single .container) .right{
width: 6.3rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(section.pressespiegel-single .container) .right{
width: 100%;
}
}
:is(:is(section.pressespiegel-single .container) .right) .embed-wrap{
position: relative;
line-height: 0;
}
:is(:is(:is(section.pressespiegel-single .container) .right) .embed-wrap) img{
width: 100%;
height: auto;
line-height: 0;
border-radius: .32rem;
}
:is(:is(:is(section.pressespiegel-single .container) .right) .embed-wrap) .embed-content{
left: 0;
width: 100%;
margin-top: .32rem;
}
section.single-news-post{
padding: .9rem 0;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
section.single-news-post{
padding: .4rem 0;
}
}
section.single-news-post .container{
display: flex;
justify-content: space-between;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
section.single-news-post .container{
flex-direction: column;
gap: .4rem;
}
}
section.single-news-post .left{
width: 5.22rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
section.single-news-post .left{
width: 100%;
padding-bottom: .4rem;
}
}
section.single-news-post .right{
width: 6.3rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
section.single-news-post .right{
width: 100%;
}
}
section.single-news-post .title{
color: var(--blue);
}
:is(section.single-news-post .title) span{
color: var(--orange);
}
section.single-news-post .title + .text{
margin-top: .48rem;
}
section.single-news-post .text{
color: var(--dark-grey);
}
section.single-news-post .date-and-location{
margin-top: .16rem;
}
:is(section.single-news-post .date-and-location) span{
display: inline-block;
color: var(--dark-grey);
}
:is(:is(section.single-news-post .date-and-location) span) + span{
margin-left: .16rem;
}
:is(:is(:is(section.single-news-post .date-and-location) span) + span)::before{
content: '|';
margin-right: .16rem;
}
section.single-news-post .buttons{
display: flex;
flex-wrap: wrap;
margin-top: .48rem;
gap: .24rem;
}
:is(section.single-news-post .buttons) .btn{
display: flex;
align-items: center;
padding: .12rem .24rem;
gap: .08rem;
}
:is(:is(section.single-news-post .buttons) .btn) .icon{
width: .24rem;
height: .24rem;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
:is(:is(:is(section.single-news-post .buttons) .btn) .icon) svg{
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.pdf-download-btn:is(:is(section.single-news-post .buttons) .btn) .icon{
padding: .04rem;
}
:is(:is(section.single-news-post .buttons) .btn) svg path,:is(:is(section.single-news-post .buttons) .btn) svg line{
transition: all .3s ease;
}
:is(:is(section.single-news-post .buttons) .btn):hover{
color: var(--blue);
}
:is(:is(section.single-news-post .buttons) .btn):hover svg path,:is(:is(section.single-news-post .buttons) .btn):hover svg line{
fill: var(--blue);
stroke: var(--blue);
}
section.single-news-post .company{
padding: .24rem;
border-radius: .24rem;
background-color: var(--orange);
margin-top: 1.14rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
section.single-news-post .company{
margin-top: .4rem;
}
}
:is(section.single-news-post .company) .logo{
border-radius: .16rem;
padding: .6rem;
background-color: var(--white);
width: 100%;
height: 2.06rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(section.single-news-post .company) .logo{
padding: .24rem;
}
}
:is(:is(section.single-news-post .company) .logo) img{
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
:is(section.single-news-post .company) .name,:is(section.single-news-post .company) .company-extra-info{
margin-top: .24rem;
color: var(--white);
}
section.single-news-post .content{
color: var(--dark-grey);
}
:is(section.single-news-post .content) p + p,:is(section.single-news-post .content) p + h3,:is(section.single-news-post .content) h3 + p{
margin-top: calc(.23rem * 1.3);
}
:is(section.single-news-post .content) a{
color: var(--blue);
text-decoration: underline;
}
:is(section.single-news-post .content) button {
position: relative;
display: flex;
padding: 0.135rem 0.23rem 0.145rem;
border-radius: 2rem;
font-size: 0.16rem;
line-height: 100%;
letter-spacing: 0;
font-weight: 500;
text-transform: uppercase;
background-color: var(--blue);
color: var(--white);
border: 1px solid var(--blue);
transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out;
}
:is(:is(section.single-news-post .content) button) a{
color: var(--white);
text-decoration: none;
}
:is(:is(section.single-news-post .content) button):hover {
background-color: transparent;
}
:is(:is(section.single-news-post .content) button):hover span,:is(:is(section.single-news-post .content) button):hover a {
color: var(--blue);
}
:is(:is(section.single-news-post .content) button) span{
color: var(--white);
}
:is(section.single-news-post .right) .related-post{
margin-top: .48rem;
}
:is(:is(section.single-news-post .right) .related-post) .heading{
color: var(--dark-grey);
}
:is(:is(section.single-news-post .right) .related-post) .related-post-card-link{
display: block;
}
:is(:is(section.single-news-post .right) .related-post) .related-post-card{
background-color: var(--light-grey);
padding: .24rem .24rem .32rem;
border-radius: .32rem;
display: flex;
flex-direction: column;
gap: .1rem;
margin-top: .48rem;
}
:is(:is(:is(section.single-news-post .right) .related-post) .related-post-card) .card-title{
color: var(--orange);
}
:is(:is(:is(section.single-news-post .right) .related-post) .related-post-card) .card-body{
color: var(--dark-grey);
}
:is(:is(:is(section.single-news-post .right) .related-post) .related-post-card) .date{
color: #000;
font-weight: 400;
display: flex;
gap: .06rem;
align-items: center;
}
:is(:is(:is(:is(section.single-news-post .right) .related-post) .related-post-card) .date) span{
display: inline-block;
width: .14rem;
height: .14rem;
line-height: 0;
}
:is(:is(:is(:is(:is(section.single-news-post .right) .related-post) .related-post-card) .date) span) img,:is(:is(:is(:is(:is(section.single-news-post .right) .related-post) .related-post-card) .date) span) svg{
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
section.single-news-post .post-image{
width: 100%;
margin-top: 1.14rem;
border-radius: .32rem;
overflow: hidden;
line-height: 0;
}
:is(section.single-news-post .post-image) img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
section.single-news-post.single-presseinformationen .image-gallery-section {
padding: 1.04rem 0;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
section.single-news-post.single-presseinformationen .image-gallery-section {
padding: 0.4rem 0;
}
}
section.single-news-post.single-presseinformationen .image-gallery-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .24rem;
}
section.single-news-post.single-presseinformationen .image-gallery-item {
height: 2rem;
border-radius: .16rem;
background-color: var(--light-grey);
overflow: hidden;
width: 100%;
margin-bottom: 0;
}
section.single-news-post.single-presseinformationen .image-gallery-trigger {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: .16rem;
border: 0;
background: transparent;
cursor: pointer;
}
:is(section.single-news-post.single-presseinformationen .image-gallery-trigger):hover img {
transform: scale(1.02);
}
:is(section.single-news-post.single-presseinformationen .image-gallery-trigger) img {
transition: transform 0.4s ease-in-out;
}
section.single-news-post.single-presseinformationen .image-gallery-trigger:focus-visible {
outline: 2px solid currentColor;
outline-offset: 0.08rem;
}
section.single-news-post.single-presseinformationen .image-gallery-item-image {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
@media screen and (max-width: 991px) {
section.single-news-post.single-presseinformationen .image-gallery-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media screen and (max-width: 768px) {
section.single-news-post.single-presseinformationen .image-gallery-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media screen and (max-width: 480px) {
section.single-news-post.single-presseinformationen .image-gallery-grid {
grid-template-columns: 1fr;
}
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(section.single-news-post.single-newsletter .container) .left{
display:flex;
flex-direction: column;
gap: .4rem;
}
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(section.single-news-post.single-newsletter .container) .left) .title{
order: 1;
margin-top: 0;
}
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(section.single-news-post.single-newsletter .container) .left) .post-image{
order: 2;
margin-top: 0;
}
}
:is(:is(section.single-news-post.single-newsletter .container) .left) .buttons{
justify-content: space-between;
gap: .16rem;
}
:is(:is(:is(section.single-news-post.single-newsletter .container) .left) .buttons) .newsletter-share-desktop{
display: inline-flex;
align-items: center;
gap: .12rem;
padding: .12rem .24rem;
}
:is(:is(:is(:is(section.single-news-post.single-newsletter .container) .left) .buttons) .newsletter-share-desktop) .newsletter-share-icon{
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
width: .24rem;
height: .24rem;
}
:is(:is(:is(:is(:is(section.single-news-post.single-newsletter .container) .left) .buttons) .newsletter-share-desktop) .newsletter-share-icon) svg{
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
:is(:is(:is(:is(section.single-news-post.single-newsletter .container) .left) .buttons) .newsletter-share-desktop) .newsletter-share-label{
white-space: nowrap;
}
:is(:is(:is(section.single-news-post.single-newsletter .container) .left) .buttons) .newsletter-share-mobile{
display: none;
}
:is(:is(:is(:is(section.single-news-post.single-newsletter .container) .left) .buttons) .newsletter-pdf-download) .icon{
width: .24rem;
height: .24rem;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
:is(:is(:is(:is(:is(section.single-news-post.single-newsletter .container) .left) .buttons) .newsletter-pdf-download) .icon) svg{
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(section.single-news-post.single-newsletter .container) .left) .buttons{
order: 3;
margin-top: 0;
gap: .16rem;
}
:is(:is(:is(section.single-news-post.single-newsletter .container) .left) .buttons) .newsletter-share-desktop{
display: none;
}
:is(:is(:is(section.single-news-post.single-newsletter .container) .left) .buttons) .newsletter-share-mobile{
display: inline-flex;
}
}
:is(:is(section.single-news-post.single-newsletter .container) .right) .intro + .content{
margin-top: .48rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(section.single-news-post.single-newsletter .container) .right) .intro + .content{
margin-top: .24rem;
}
}
.content p img{
display: block;
margin-bottom: .24rem;
max-width: 100%;
height: auto;
}
.newsletter-download-card{
width: 4.09rem;
height: 100%;
min-height: 3.69rem;
background-color: var(--white);
border: .02rem solid var(--orange);
border-radius: .24rem;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: .2rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.newsletter-download-card{
width: 2.98rem;
align-items: center;
}
}
.newsletter-download-card .card-header{
min-height: .4rem;
}
:is(.newsletter-download-card .card-header) .file-name{
color: var(--blue);
}
.newsletter-download-card .card-body{
display: flex;
justify-content: space-between;
align-items: flex-end;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.newsletter-download-card .card-body{
flex-direction: column;
align-items: flex-start;
}
}
:is(.newsletter-download-card .card-body) .left{
width: 1.72rem;
}
:is(:is(.newsletter-download-card .card-body) .left) .preview-image{
width: 100%;
}
:is(:is(:is(.newsletter-download-card .card-body) .left) .preview-image) img{
width: 100%;
height: auto;
}
:is(.newsletter-download-card .card-body) .right{
width: 1.72rem;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
:is(:is(:is(.newsletter-download-card .card-body) .right) .top) .themes{
font-size: .16rem;
line-height: 1.5;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(:is(.newsletter-download-card .card-body) .right) .top) .themes{
text-align: center;
margin-top: .2rem;
}
}
:is(:is(:is(.newsletter-download-card .card-body) .right) .top) .topics{
margin-top: .36rem;
display: grid;
gap: .06rem;
padding-left: .2rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(:is(.newsletter-download-card .card-body) .right) .top) .topics{
text-align: center;
}
}
:is(:is(:is(.newsletter-download-card .card-body) .right) .top) .topic{
font-size: .12rem;
line-height: 1.5;
position: relative;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(:is(.newsletter-download-card .card-body) .right) .top) .topic{
text-align: center;
width: fit-content;
margin: 0 auto;
}
}
:is(:is(:is(:is(.newsletter-download-card .card-body) .right) .top) .topic)::before{
content: '';
position: absolute;
left: -.08rem;
top: .08rem;
width: .02rem;
height: .02rem;
background-color: #000;
border-radius: 50%;
}
:is(:is(.newsletter-download-card .card-body) .right) .btn{
margin-top: .2rem;
display: inline-block;
text-align: center;
}
:is(:is(:is(.newsletter-download-card .card-body) .right) .btn):hover{
color: var(--blue);
}
section.hosted-form-section{
padding: .96rem 0;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
section.hosted-form-section{
padding: .4rem 0;
}
}
section.hosted-form-section .container{
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
gap: .4rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
section.hosted-form-section .container{
gap: .24rem;
}
}
section.hosted-form-section .hosted-form-section__text{
width: 8rem;
text-align: center;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
section.hosted-form-section .hosted-form-section__text{
width: 100%;
}
}
:is(section.hosted-form-section .hosted-form-section__text) h2{
color: var(--orange);
margin-bottom: .24rem;
}
section.hosted-form-section .hosted-form-section__content{
width: 8.98rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
section.hosted-form-section .hosted-form-section__content{
width: 100%;
}
}
/* Company */
section.company-hero {
background-color: var(--blue);
text-align: center;
padding: 1.2rem .24rem;
display: flex;
justify-content: center;
align-items: center;
}
section.company-hero h1{
max-width: 6rem;
color: var(--white);
font-weight: 400;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
section.company-hero h1{
max-width: 2.7rem;
}
}
section.company-hero svg,section.company-hero img{
max-width: 2.7rem;
height: auto;
}
section.company-attributes {
margin-top: .6rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
section.company-attributes {
margin-top: .4rem;
}
}
@media screen and (max-width: 768px) and (orientation: portrait) {
section.company-attributes .container{
overflow-x: auto;
padding-right: 0;
}
}
:is(section.company-attributes .container) .inner{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: .2rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(section.company-attributes .container) .inner{
flex-wrap: nowrap;
width: fit-content;
overflow-x: auto;
padding-right: .2rem;
}
}
section.company-attributes .attributes{
display: flex;
max-width: 100%;
flex-shrink: 0;
gap: .2rem;
}
:is(section.company-attributes .attributes) .attribute{
width: 1.96rem;
display: flex;
flex-direction: column;
gap: .16rem;
}
:is(:is(section.company-attributes .attributes) .attribute) .attribute-key{
display: flex;
align-items: center;
justify-content: center;
background-color: var(--orange);
padding: .12rem;
width: 100%;
border-radius: 1rem;
color: var(--white);
text-align: center;
display: block;
width: 100%;
height: .46rem;
}
:is(:is(section.company-attributes .attributes) .attribute) .attribute-value{
color: var(--dark-grey);
text-align: center;
word-break: break-word;
display: block;
width: 100%;
}
section.company-attributes .links{
display: flex;
flex-shrink: 0;
gap: .2rem;
}
:is(section.company-attributes .links) .link{
display: flex;
align-items: center;
justify-content: center;
background-color: var(--blue);
padding: .07rem .12rem;
width: 100%;
border-radius: 1rem;
color: var(--white);
text-align: center;
gap: .08rem;
height: .46rem;
width: 1.96rem;
}
:is(:is(section.company-attributes .links) .link) .link-icon{
line-height: 0;
max-width: .24rem;
height: auto;
}
section.company-content {
margin-top: .6rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
section.company-content {
margin-top: .4rem;
}
}
section.company-content .container{
display: flex;
justify-content: space-between;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
section.company-content .container{
flex-direction: column-reverse;
gap: .4rem;
}
}
section.company-content .left{
width: 5.42rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
section.company-content .left{
width: 100%;
}
}
:is(:is(section.company-content .left) .rich-text) p{
color: var(--dark-grey);
}
:is(:is(section.company-content .left) .rich-text) > * + *{
margin-top: .24rem;
}
:is(section.company-content .left) .related-post{
margin-top: .48rem;
}
:is(:is(section.company-content .left) .related-post) .heading{
color: var(--dark-grey);
}
:is(:is(section.company-content .left) .related-post) .related-post-card{
background-color: var(--light-grey);
padding: .24rem .24rem .32rem;
border-radius: .32rem;
display: flex;
flex-direction: column;
gap: .1rem;
margin-top: .48rem;
}
:is(:is(:is(section.company-content .left) .related-post) .related-post-card) .card-title{
color: var(--orange);
}
:is(:is(:is(section.company-content .left) .related-post) .related-post-card) .card-body{
color: var(--dark-grey);
}
:is(:is(:is(section.company-content .left) .related-post) .related-post-card) .date{
color: #000;
font-weight: 400;
display: flex;
gap: .06rem;
align-items: center;
}
:is(:is(:is(:is(section.company-content .left) .related-post) .related-post-card) .date) span{
display: inline-block;
width: .14rem;
height: .14rem;
line-height: 0;
}
:is(:is(:is(:is(:is(section.company-content .left) .related-post) .related-post-card) .date) span) img,:is(:is(:is(:is(:is(section.company-content .left) .related-post) .related-post-card) .date) span) svg{
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
section.company-content .right{
width: 6.3rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
section.company-content .right{
width: 100%;
}
}
:is(section.company-content .right) .sticky{
position: sticky;
top: .32rem;
}
:is(section.company-content .right) .featured-image-wrap{
width: 100%;
aspect-ratio: 63 / 45;
border-radius: .32rem;
overflow: hidden;
}
:is(:is(section.company-content .right) .featured-image-wrap) img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
section.company-hero ~ section:last-of-type{
margin-bottom: 1.02rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
section.company-hero ~ section:last-of-type{
margin-bottom: .4rem;
}
}
section.contact-people-bottom-text{
margin: .46rem 0 1.26rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
section.contact-people-bottom-text{
margin: .4rem 0;
padding: 0 .2rem;
}
}
section.contact-people-bottom-text .container{
background-color: var(--orange);
color: var(--white);
padding: .24rem;
border-radius: .32rem;
display: flex;
justify-content: space-between;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
section.contact-people-bottom-text .container{
flex-direction: column;
gap: .4rem;
}
}
:is(section.contact-people-bottom-text .container) .bottom_text_left{
max-width: 2.7rem;
}
:is(section.contact-people-bottom-text .container) .bottom_text_right{
max-width: 6.06rem;
font-size: .16rem;
line-height: 150%;
font-weight: 400;
letter-spacing: 0;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.contact-people-posts .filter-results .newsroom-mobile-slider .card-contact-person{
width: 2.98rem !important;
}
}
.card-modal-trigger{
display: block;
width: 100%;
margin: 0;
padding: 0;
border: none;
background: none;
color: inherit;
text-align: inherit;
font: inherit;
cursor: pointer;
text-decoration: none;
}
.card-modal-trigger .card-image img{
transition: transform .4s ease-in-out;
}
.card-modal-trigger:hover .card-image img{
transform: scale(1.05);
}
section.contact-people-posts.people-modal-section .modal-backdrop{
position: fixed;
inset: 0;
width: 100%;
height: 100%;
background-color: rgba(232, 232, 232, .95);
z-index: 1000;
display: none;
align-items: center;
justify-content: center;
flex-direction: column;
padding: .32rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
section.contact-people-posts.people-modal-section .modal-backdrop{
padding: .1rem;
}
}
.is-active:is(section.contact-people-posts.people-modal-section .modal-backdrop){
display: flex;
}
:is(section.contact-people-posts.people-modal-section .modal-backdrop) .modal{
display: flex;
height: 6rem;
max-width: 10.65rem;
display: none;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(section.contact-people-posts.people-modal-section .modal-backdrop) .modal{
height: unset;
max-height: 7rem;
flex-direction: column;
gap: .16rem;
}
}
.is-active:is(:is(section.contact-people-posts.people-modal-section .modal-backdrop) .modal){
display: flex;
}
:is(:is(section.contact-people-posts.people-modal-section .modal-backdrop) .modal) .modal-image{
position: relative;
flex-shrink: 0;
width: 4.14rem;
height: 100%;
border-radius: 0.32rem;
overflow: hidden;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(section.contact-people-posts.people-modal-section .modal-backdrop) .modal) .modal-image{
width: 100%;
height: 3.2rem;
}
}
:is(:is(:is(section.contact-people-posts.people-modal-section .modal-backdrop) .modal) .modal-image) img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(:is(section.contact-people-posts.people-modal-section .modal-backdrop) .modal) .modal-image) img{
object-position: 50% 10%;
}
}
:is(:is(section.contact-people-posts.people-modal-section .modal-backdrop) .modal) .modal-body{
background-color: var(--white);
border-top: .09rem solid var(--orange);
border-radius: .32rem;
padding: .24rem;
display: flex;
flex-direction: column;
gap: .4rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(section.contact-people-posts.people-modal-section .modal-backdrop) .modal) .modal-body{
padding: .2rem;
max-height: 3.64rem;
}
}
:is(:is(:is(section.contact-people-posts.people-modal-section .modal-backdrop) .modal) .modal-body) .modal-header{
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
}
:is(:is(:is(:is(section.contact-people-posts.people-modal-section .modal-backdrop) .modal) .modal-body) .modal-header) .modal-title {
color: var(--dark-grey);
}
:is(:is(:is(:is(section.contact-people-posts.people-modal-section .modal-backdrop) .modal) .modal-body) .modal-header) .modal-close{
flex-shrink: 0;
width: .56rem;
height: .56rem;
background-color: transparent;
display: flex;
justify-content: center;
align-items: center;
border: none;
transition: background-color .4s ease-in-out;
cursor: pointer;
}
:is(:is(:is(:is(:is(section.contact-people-posts.people-modal-section .modal-backdrop) .modal) .modal-body) .modal-header) .modal-close) svg{
width: .2rem;
height: .2rem;
}
:is(:is(:is(:is(:is(:is(section.contact-people-posts.people-modal-section .modal-backdrop) .modal) .modal-body) .modal-header) .modal-close) svg) path{
transition: fill .4s ease-in-out;
}
:is(:is(:is(:is(:is(section.contact-people-posts.people-modal-section .modal-backdrop) .modal) .modal-body) .modal-header) .modal-close):hover{
background-color: var(--orange);
}
:is(:is(:is(:is(:is(:is(section.contact-people-posts.people-modal-section .modal-backdrop) .modal) .modal-body) .modal-header) .modal-close):hover svg) path{
fill: var(--white);
}
:is(:is(:is(section.contact-people-posts.people-modal-section .modal-backdrop) .modal) .modal-body) .modal-content-wrap{
flex-grow: 1;
overflow: auto;
}
:is(:is(:is(:is(section.contact-people-posts.people-modal-section .modal-backdrop) .modal) .modal-body) .modal-content-wrap) .modal-content {
color: var(--dark-grey);
}
:is(:is(:is(:is(:is(section.contact-people-posts.people-modal-section .modal-backdrop) .modal) .modal-body) .modal-content-wrap) .modal-content) p{
color: var(--dark-grey);
}
:is(:is(:is(:is(:is(section.contact-people-posts.people-modal-section .modal-backdrop) .modal) .modal-body) .modal-content-wrap) .modal-content) blockquote {
font-size: 0.2rem;
line-height: 120%;
letter-spacing: 0;
font-weight: 600;
color: var(--dark-grey);
margin: 0;
}
:is(:is(:is(:is(:is(:is(section.contact-people-posts.people-modal-section .modal-backdrop) .modal) .modal-body) .modal-content-wrap) .modal-content) blockquote) p{
font-size: 0.2rem;
line-height: 120%;
letter-spacing: 0;
font-weight: 600;
color: var(--dark-grey);
}
section.latest-news{
margin-top: .72rem;
}
section.latest-news .title{
color: var(--dark-grey);
}
section.latest-news .news-grid{
position: relative;
display: flex;
flex-direction: column;
width: 100%;
margin-top: .48rem;
visibility: visible;
}
:is(section.latest-news .news-grid) .splide__track{
overflow: visible;
}
:is(section.latest-news .news-grid) .splide__list{
position: relative;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .2rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(section.latest-news .news-grid) .splide__list{
grid-template-columns: 1fr;
}
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.is-slider-active:is(section.latest-news .news-grid) .splide__track{
width: 2.98rem;
}
}
.is-slider-active:is(section.latest-news .news-grid) .splide__list{
display: flex;
gap: 0;
}
:is(section.latest-news .news-grid) .news-item{
display: block;
text-decoration: none;
color: inherit;
}
:is(section.latest-news .news-grid) .news-card{
width: 100%;
}
:is(:is(section.latest-news .news-grid) .news-card) .card-image{
width: 100%;
height: 3.1rem;
border-radius: .32rem;
overflow: hidden;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(section.latest-news .news-grid) .news-card) .card-image{
height: 2.93rem;
}
}
:is(:is(:is(section.latest-news .news-grid) .news-card) .card-image):hover img{
transform: scale(1.05);
}
:is(:is(:is(section.latest-news .news-grid) .news-card) .card-image) img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform .4s ease-in-out;
}
:is(:is(:is(section.latest-news .news-grid) .news-card) .card-image) .image-wrap.cover{
width: 100%;
height: 100%;
}
:is(:is(:is(:is(section.latest-news .news-grid) .news-card) .card-image) .image-wrap.cover) img{
object-fit: cover !important;
}
:is(:is(section.latest-news .news-grid) .news-card) .card-content{
padding: .24rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(section.latest-news .news-grid) .news-card) .card-content{
padding: .24rem 0;
}
}
:is(:is(:is(section.latest-news .news-grid) .news-card) .card-content) .title{
color: var(--orange);
}
:is(:is(:is(section.latest-news .news-grid) .news-card) .card-content) .text{
margin-top: .04rem;
color: var(--dark-grey);
}
:is(:is(:is(section.latest-news .news-grid) .news-card) .card-content) .date{
margin-top: .08rem;
color: var(--blue);
}
/* Mobile menu overlay – state driven by GSAP */
.mobile-menu-overlay {
position: fixed;
inset: 0;
display: flex;
justify-content: flex-start;
align-items: stretch;
background-color: rgba(0, 0, 0, 0.7);
z-index: 999;
opacity: 0;
visibility: hidden;
pointer-events: none;
}
@media screen and (min-width: 769px) {
.mobile-menu-overlay {
display: none;
}
}
.mobile-menu-overlay .mobile-menu-panel {
position: relative;
width: 100%;
max-height: 100vh;
background-color: var(--orange);
color: var(--white);
padding: 0.16rem 0.2rem 0.45rem;
display: flex;
flex-direction: column;
gap: 0.56rem;
}
:is(.mobile-menu-overlay .mobile-menu-panel) .mobile-menu-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.16rem;
}
:is(:is(.mobile-menu-overlay .mobile-menu-panel) .mobile-menu-header) .mobile-menu-logo .logo-link {
display: flex;
width: 2.1rem;
height: 0.2354rem;
}
:is(:is(:is(.mobile-menu-overlay .mobile-menu-panel) .mobile-menu-header) .mobile-menu-logo .logo-link) svg {
width: 100%;
height: 100%;
fill: var(--white);
}
:is(:is(.mobile-menu-overlay .mobile-menu-panel) .mobile-menu-header) .mobile-menu-close {
display: flex;
align-items: center;
justify-content: center;
width: 0.24rem;
height: 0.24rem;
padding: 0;
border: none;
background: transparent;
cursor: pointer;
}
:is(:is(:is(.mobile-menu-overlay .mobile-menu-panel) .mobile-menu-header) .mobile-menu-close) svg {
width: 0.18rem;
height: 0.18rem;
fill: var(--white);
}
:is(.mobile-menu-overlay .mobile-menu-panel) .mobile-menu-content {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
gap: 0.4rem;
justify-content: space-between;
padding: 0 0.25rem;
flex: 1;
overflow-y: auto;
overscroll-behavior: contain;
}
:is(:is(.mobile-menu-overlay .mobile-menu-panel) .mobile-menu-content) .mobile-menu-nav {
position: relative;
display: flex;
}
:is(:is(:is(.mobile-menu-overlay .mobile-menu-panel) .mobile-menu-content) .mobile-menu-nav) .mobile-main-nav {
position: relative;
display: flex;
flex-direction: column;
gap: 0.08rem;
width: 100%;
}
:is(:is(:is(:is(.mobile-menu-overlay .mobile-menu-panel) .mobile-menu-content) .mobile-menu-nav) .mobile-main-nav) li .mobile-submenu-toggle {
position: absolute;
top: 0.06rem;
right: 0;
display: flex;
width: 0.16rem;
height: 0.22rem;
z-index: 10;
}
:is(:is(:is(:is(.mobile-menu-overlay .mobile-menu-panel) .mobile-menu-content) .mobile-menu-nav) .mobile-main-nav) li .mobile-submenu-toggle svg {
width: 100%;
height: 100%;
fill: var(--white);
transform: rotate(-90deg);
transition: transform 0.4s ease-in-out;
}
:is(:is(:is(:is(:is(.mobile-menu-overlay .mobile-menu-panel) .mobile-menu-content) .mobile-menu-nav) .mobile-main-nav) li.menu-item-has-children.is-open) .mobile-submenu-toggle svg{
transform: rotate(-270deg);
}
:is(:is(:is(:is(.mobile-menu-overlay .mobile-menu-panel) .mobile-menu-content) .mobile-menu-nav) .mobile-main-nav) li {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
}
.menu-item-has-children:is(:is(:is(:is(:is(.mobile-menu-overlay .mobile-menu-panel) .mobile-menu-content) .mobile-menu-nav) .mobile-main-nav) li) a {
margin-right: 0.25rem;
}
:is(:is(:is(:is(:is(.mobile-menu-overlay .mobile-menu-panel) .mobile-menu-content) .mobile-menu-nav) .mobile-main-nav) li) a {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.32rem;
line-height: 110%;
letter-spacing: -0.02em;
font-weight: 400;
color: var(--white);
}
:is(:is(:is(:is(:is(.mobile-menu-overlay .mobile-menu-panel) .mobile-menu-content) .mobile-menu-nav) .mobile-main-nav) li) .sub-menu {
position: relative;
display: flex;
flex-direction: column;
gap: 0.04rem;
}
:is(:is(:is(:is(:is(:is(.mobile-menu-overlay .mobile-menu-panel) .mobile-menu-content) .mobile-menu-nav) .mobile-main-nav) li) .sub-menu) li {
position: relative;
display: flex;
}
:is(:is(:is(:is(:is(:is(:is(.mobile-menu-overlay .mobile-menu-panel) .mobile-menu-content) .mobile-menu-nav) .mobile-main-nav) li) .sub-menu) li) a {
position: relative;
display: flex;
font-size: 0.16rem;
line-height: 150%;
letter-spacing: 0em;
}
:is(:is(.mobile-menu-overlay .mobile-menu-panel) .mobile-menu-content) .mobile-menu-search-social {
display: flex;
flex-direction: column;
gap: 0.32rem;
}
:is(:is(:is(.mobile-menu-overlay .mobile-menu-panel) .mobile-menu-content) .mobile-menu-search-social) .mobile-menu-search-form {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.08rem 0.16rem;
border-radius: 0.24rem;
background-color: var(--white);
}
:is(:is(:is(:is(.mobile-menu-overlay .mobile-menu-panel) .mobile-menu-content) .mobile-menu-search-social) .mobile-menu-search-form) .mobile-menu-search-input {
flex: 1;
border: none;
outline: none;
font-size: 0.16rem;
line-height: 130%;
color: var(--dark-grey);
background: transparent;
}
:is(:is(:is(:is(.mobile-menu-overlay .mobile-menu-panel) .mobile-menu-content) .mobile-menu-search-social) .mobile-menu-search-form) .mobile-menu-search-submit {
display: flex;
align-items: center;
justify-content: center;
width: 0.24rem;
height: 0.24rem;
border: none;
background: transparent;
cursor: pointer;
padding: 0;
}
:is(:is(:is(:is(:is(.mobile-menu-overlay .mobile-menu-panel) .mobile-menu-content) .mobile-menu-search-social) .mobile-menu-search-form) .mobile-menu-search-submit) svg {
width: 0.2rem;
height: 0.2rem;
fill: var(--blue);
}
:is(:is(:is(.mobile-menu-overlay .mobile-menu-panel) .mobile-menu-content) .mobile-menu-search-social) .mobile-menu-social {
display: flex;
flex-direction: column;
gap: 0.08rem;
}
:is(:is(:is(:is(.mobile-menu-overlay .mobile-menu-panel) .mobile-menu-content) .mobile-menu-search-social) .mobile-menu-social) .mobile-menu-social-label {
font-size: 0.16rem;
line-height: 150%;
font-weight: 400;
}
:is(:is(:is(:is(.mobile-menu-overlay .mobile-menu-panel) .mobile-menu-content) .mobile-menu-search-social) .mobile-menu-social) .mobile-menu-social-nav {
display: flex;
align-items: center;
gap: 0.12rem;
}
:is(:is(:is(:is(:is(.mobile-menu-overlay .mobile-menu-panel) .mobile-menu-content) .mobile-menu-search-social) .mobile-menu-social) .mobile-menu-social-nav) a {
position: relative;
display: flex;
width: 0.24rem;
height: 0.24rem;
}
:is(:is(:is(:is(:is(:is(.mobile-menu-overlay .mobile-menu-panel) .mobile-menu-content) .mobile-menu-search-social) .mobile-menu-social) .mobile-menu-social-nav) a) svg {
width: 100%;
height: 100%;
fill: var(--white);
}
/* Buttons */
.btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.14rem 0.23rem;
border-radius: 2rem;
font-size: 0.16rem;
line-height: 1;
letter-spacing: 0;
font-weight: 500;
text-transform: uppercase;
}
.btn.color-a{
background-color: var(--blue);
color: var(--white);
border: 1px solid var(--blue);
transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out;
}
.btn.color-a:hover {
background-color: transparent;
}
.btn.color-a:hover span {
color: var(--blue);
}
.btn.color-a span{
color: var(--white);
}
.btn.color-b{
background-color: var(--orange);
color: var(--white);
border: 1px solid var(--orange);
transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out;
}
.btn.color-b:hover {
background-color: transparent;
}
.btn.color-b:hover span {
color: var(--orange);
}
.btn.color-b span{
color: var(--white);
}
.btn.color-c{
background-color: var(--white);
color: var(--blue);
transition: 0.4s ease-in-out, color 0.4s ease-in-out;
}
.btn.color-c:hover {
background-color: var(--orange);
color: var(--white);
}
.page-builder-flexible-content-wrap {
padding-top: 0.25rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.page-builder-flexible-content-wrap {
padding-top: 0rem;
}
}
/* User content (WYSIWYG: p, headings, lists) */
.user-content {
position: relative;
color: var(--dark-grey);
}
.user-content strong {
font-weight: 600;
}
.user-content p {
font-size: 0.16rem;
line-height: 140%;
letter-spacing: 0;
font-weight: 400;
padding: 0 0 0.24rem;
}
:is(.user-content p):last-child {
padding-bottom: 0;
}
.user-content h1,.user-content h2,.user-content h3,.user-content h4,.user-content h5,.user-content h6 {
color: var(--dark-grey);
font-weight: 400;
letter-spacing: -0.02em;
line-height: 110%;
padding: 0.24rem 0 0.24rem;
}
:is(.user-content h1,.user-content h2,.user-content h3,.user-content h4,.user-content h5,.user-content h6):first-child {
padding-top: 0;
}
:is(.user-content h1,.user-content h2,.user-content h3,.user-content h4,.user-content h5,.user-content h6):last-child {
padding-bottom: 0;
}
.user-content h1 {
font-size: 0.44rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.user-content h1 {
font-size: 0.32rem;
}
}
.user-content h2 {
font-size: 0.28rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.user-content h2 {
font-size: 0.24rem;
}
}
.user-content h3 {
font-size: 0.24rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.user-content h3 {
font-size: 0.22rem;
}
}
.user-content h4 {
font-size: 0.23rem;
line-height: 130%;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.user-content h4 {
font-size: 0.2rem;
}
}
.user-content h5 {
font-size: 0.2rem;
line-height: 120%;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.user-content h5 {
font-size: 0.2rem;
}
}
.user-content h6 {
font-size: 0.16rem;
line-height: 140%;
letter-spacing: 0;
}
.user-content a {
color: var(--dark-grey);
font-weight: 600;
text-decoration: underline;
}
:is(.user-content a):hover {
color: var(--orange);
}
.user-content ul {
list-style: disc;
}
.user-content ol {
list-style: decimal;
}
.user-content ul,.user-content ol {
padding: 0 0 0.24rem 0.28rem;
font-size: 0.16rem;
line-height: 140%;
}
:is(.user-content ul,.user-content ol):last-child {
padding-bottom: 0;
}
.user-content li {
padding-bottom: 0.08rem;
}
:is(.user-content li):last-child {
padding-bottom: 0;
}
/* Header */
.page-header {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
min-height: 0.87rem;
padding: 0.24rem 0.4rem;
z-index: 100;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.page-header {
padding: 0.2rem;
min-height: 0.64rem;
}
}
.page-header .inner-wrap {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.page-header .inner-wrap {
gap: 0.14rem;
}
}
:is(.page-header .inner-wrap) .logo-wrap {
position: relative;
display: flex;
flex-shrink: 0;
}
:is(:is(.page-header .inner-wrap) .logo-wrap) .logo-link {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 2.6rem;
height: 0.2914rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(.page-header .inner-wrap) .logo-wrap) .logo-link {
width: 2.1rem;
height: 0.2354rem;
}
}
:is(:is(:is(.page-header .inner-wrap) .logo-wrap) .logo-link) svg {
width: 100%;
height: 100%;
fill: var(--blue);
}
:is(.page-header .inner-wrap) .menu-wrap {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: 0.21rem;
}
:is(:is(.page-header .inner-wrap) .menu-wrap) .navigation-wrap {
position: relative;
display: flex;
padding: 0 0.13rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(.page-header .inner-wrap) .menu-wrap) .navigation-wrap {
display: none;
}
}
:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .navigation-wrap) .main-nav {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: 0.26rem;
}
:is(:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .navigation-wrap) .main-nav) li {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
padding: 0.075rem 0 0.075rem 0;
}
:is(:is(:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .navigation-wrap) .main-nav) li)::before {
content: "";
position: absolute;
top: 50%;
right: -0.13rem;
transform: translateY(-50%);
width: 1px;
height: 0.32rem;
background-color: var(--mid-grey);
}
:is(:is(:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .navigation-wrap) .main-nav) li):last-child::before {
display: none;
}
:is(:is(:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .navigation-wrap) .main-nav) li):hover .sub-menu {
opacity: 1;
visibility: visible;
}
.current-menu-item:is(:is(:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .navigation-wrap) .main-nav) li) a {
color: var(--orange);
}
:is(:is(:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .navigation-wrap) .main-nav) li) a {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: 0.21rem;
font-size: 0.16rem;
line-height: 150%;
letter-spacing: 0;
font-weight: 500;
color: var(--blue);
transition: color 0.4s ease-in-out;
}
:is(:is(:is(:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .navigation-wrap) .main-nav) li) a):hover {
color: var(--orange);
}
:is(:is(:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .navigation-wrap) .main-nav) li) .sub-menu {
position: absolute;
top: 100%;
right: 50%;
transform: translateX(50%);
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
gap: 0.06rem;
padding: 0.24rem 0.12rem 0.12rem;
z-index: 100;
background-color: var(--white);
box-shadow: 0 0.04rem 0.12rem rgba(0, 0, 0, 0.08);
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
}
:is(:is(:is(:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .navigation-wrap) .main-nav) li) .sub-menu) li {
position: relative;
display: flex;
padding: 0;
}
:is(:is(:is(:is(:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .navigation-wrap) .main-nav) li) .sub-menu) li)::before {
display: none;
}
:is(:is(:is(:is(:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .navigation-wrap) .main-nav) li) .sub-menu) li) a {
width: max-content;
color: var(--blue);
transition: color 0.4s ease-in-out;
}
:is(:is(:is(:is(:is(:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .navigation-wrap) .main-nav) li) .sub-menu) li) a):hover {
color: var(--orange);
}
:is(:is(.page-header .inner-wrap) .menu-wrap) .search-lang-user-wrap {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: 0.24rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(.page-header .inner-wrap) .menu-wrap) .search-lang-user-wrap {
gap: 0.205rem;
}
}
:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .search-lang-user-wrap) .logout-link-wrap {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .search-lang-user-wrap) .logout-link-wrap {
display: none;
}
}
:is(:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .search-lang-user-wrap) .logout-link-wrap)::before {
content: "";
position: absolute;
top: 50%;
left: -0.13rem;
transform: translateY(-50%);
width: 1px;
height: 0.32rem;
background-color: var(--mid-grey);
}
:is(:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .search-lang-user-wrap) .logout-link-wrap) .logout-link {
position: relative;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.16rem;
line-height: 150%;
letter-spacing: 0;
font-weight: 500;
color: var(--blue);
transition: color 0.4s ease-in-out;
}
:is(:is(:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .search-lang-user-wrap) .logout-link-wrap) .logout-link):hover {
color: var(--orange);
}
:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .search-lang-user-wrap) .search-wrap {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .search-lang-user-wrap) .search-wrap {
display: none;
}
}
:is(:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .search-lang-user-wrap) .search-wrap) .search-link {
position: relative;
display: flex;
width: 0.2rem;
height: 0.2rem;
align-items: center;
justify-content: center;
}
:is(:is(:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .search-lang-user-wrap) .search-wrap) .search-link):hover svg {
fill: var(--orange);
}
:is(:is(:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .search-lang-user-wrap) .search-wrap) .search-link) .search-link-icon {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
}
:is(:is(:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .search-lang-user-wrap) .search-wrap) .search-link) .search-link-icon-default {
opacity: 1;
visibility: visible;
}
:is(:is(:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .search-lang-user-wrap) .search-wrap) .search-link) .search-link-icon-active {
transform: rotate(-90deg);
}
:is(:is(:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .search-lang-user-wrap) .search-wrap) .search-link) svg {
width: 100%;
height: 100%;
fill: var(--blue);
transition: fill 0.4s ease-in-out;
}
:is(:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .search-lang-user-wrap) .search-wrap) .header-search-form {
position: absolute;
top: calc(100% + 0.12rem);
right: 0;
display: flex;
align-items: center;
gap: 0.08rem;
padding: 0.08rem 0.16rem;
width: 3.35rem;
height: 0.4rem;
background: var(--white);
border: 1px solid var(--blue);
border-radius: .32rem;
opacity: 0;
visibility: hidden;
transform: translateY(-0.06rem);
transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, visibility 0.2s ease-in-out;
z-index: 120;
}
.is-open:is(:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .search-lang-user-wrap) .search-wrap) .search-link-icon-default {
opacity: 0;
visibility: hidden;
}
.is-open:is(:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .search-lang-user-wrap) .search-wrap) .search-link-icon-active {
opacity: 1;
visibility: visible;
}
.is-open:is(:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .search-lang-user-wrap) .search-wrap) .header-search-form {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
:is(:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .search-lang-user-wrap) .search-wrap) .header-search-input {
flex: 1;
min-width: 0;
border: none;
outline: none;
font-size: 0.16rem;
color: var(--blue);
font-weight: 600;
}
:is(:is(:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .search-lang-user-wrap) .search-wrap) .header-search-input)::placeholder {
color: var(--blue);
font-weight: 600;
}
:is(:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .search-lang-user-wrap) .search-wrap) .header-search-submit {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 0.2rem;
height: 0.2rem;
border: none;
background: transparent;
padding: 0;
cursor: pointer;
}
:is(:is(:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .search-lang-user-wrap) .search-wrap) .header-search-submit) svg {
width: 100%;
height: 100%;
fill: var(--blue);
transition: fill 0.3s ease-in-out;
}
:is(:is(:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .search-lang-user-wrap) .search-wrap) .header-search-submit):hover svg {
fill: var(--orange);
}
:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .search-lang-user-wrap) .user-wrap {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
:is(:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .search-lang-user-wrap) .user-wrap) .user-link {
position: relative;
display: flex;
width: 0.24rem;
height: 0.24rem;
}
:is(:is(:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .search-lang-user-wrap) .user-wrap) .user-link):hover svg {
fill: var(--orange);
}
:is(:is(:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .search-lang-user-wrap) .user-wrap) .user-link) svg {
width: 100%;
height: 100%;
fill: var(--blue);
transition: fill 0.3s ease-in-out;
}
:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .search-lang-user-wrap) .lang-wrap {
position: relative;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
:is(:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .search-lang-user-wrap) .lang-wrap) .lang-current {
position: relative;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.17rem;
line-height: 100%;
letter-spacing: 0;
font-weight: 600;
color: var(--blue);
text-transform: uppercase;
gap: 0.06rem;
}
:is(:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .search-lang-user-wrap) .lang-wrap) .lang-dropdown {
position: absolute;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
top: 100%;
left: 50%;
transform: translateX(-50%);
padding-top: 0.08rem;
background-color: var(--white);
box-shadow: 0 0.04rem 0.12rem rgba(0, 0, 0, 0.08);
opacity: 0;
visibility: hidden;
z-index: 10;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
:is(:is(:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .search-lang-user-wrap) .lang-wrap) .lang-dropdown) .lang-nav {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 0.08rem;
padding: 0.1rem 0.1rem;
}
:is(:is(:is(:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .search-lang-user-wrap) .lang-wrap) .lang-dropdown) .lang-nav) li {
position: relative;
display: flex;
}
:is(:is(:is(:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .search-lang-user-wrap) .lang-wrap) .lang-dropdown) .lang-nav) a {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 0.21rem;
color: var(--blue);
text-transform: uppercase;
font-size: 0.17rem;
line-height: 100%;
letter-spacing: 0;
font-weight: 600;
color: var(--blue);
transition: color 0.3s ease-in-out;
}
:is(:is(:is(:is(:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .search-lang-user-wrap) .lang-wrap) .lang-dropdown) .lang-nav) a):hover {
color: var(--orange);
}
:is(:is(:is(:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .search-lang-user-wrap) .lang-wrap) .lang-dropdown) .lang-nav) .icon {
width: 0.16rem;
height: 0.16rem;
}
:is(:is(:is(:is(:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .search-lang-user-wrap) .lang-wrap) .lang-dropdown) .lang-nav) .icon) svg {
width: 100%;
height: 100%;
}
:is(:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .search-lang-user-wrap) .lang-wrap) .lang-arrow {
position: relative;
display: flex;
width: 0.06rem;
height: 0.12rem;
transform: rotate(-90deg); /* from left arrow to down arrow */
}
:is(:is(:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .search-lang-user-wrap) .lang-wrap) .lang-arrow) svg {
width: 100%;
height: 100%;
fill: var(--blue);
}
:is(:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .search-lang-user-wrap) .lang-wrap):hover .lang-dropdown {
opacity: 1;
visibility: visible;;
}
:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .search-lang-user-wrap) .mobile-menu-wrap {
position: relative;
display: none;
width: 0.24rem;
height: 0.24rem;
flex-direction: column;
flex-shrink: 0;
align-items: center;
justify-content: center;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .search-lang-user-wrap) .mobile-menu-wrap {
display: flex;
}
}
:is(:is(:is(:is(.page-header .inner-wrap) .menu-wrap) .search-lang-user-wrap) .mobile-menu-wrap) svg {
width: 0.18rem;
height: 0.12rem;
}
/* Footer */
.page-footer {
position: relative;
display: flex;
padding: 0.4rem;
width: 100%;
background-color: var(--orange);
color: var(--white);
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.page-footer {
padding: 0.4rem 0.2rem;
}
}
.page-footer .inner-wrap {
position: relative;
display: flex;
flex-direction: column;
gap: 0.15rem;
width: 100%;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.page-footer .inner-wrap {
gap: 0.56rem;
}
}
:is(.page-footer .inner-wrap) .top-part {
position: relative;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
gap: 0.4rem;
width: 100%;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(.page-footer .inner-wrap) .top-part {
flex-direction: column;
gap: 0.56rem;
}
}
:is(:is(.page-footer .inner-wrap) .top-part) .logo-wrap {
position: relative;
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 1.96rem;
height: 0.2177rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(.page-footer .inner-wrap) .top-part) .logo-wrap {
width: 2.4rem;
height: 0.2666rem;
}
}
:is(:is(:is(.page-footer .inner-wrap) .top-part) .logo-wrap) svg {
width: 100%;
height: 100%;
fill: var(--white);
}
:is(:is(.page-footer .inner-wrap) .top-part) .navigation-social-image-wrap {
position: relative;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-end;
gap: 0.58rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(.page-footer .inner-wrap) .top-part) .navigation-social-image-wrap {
flex-direction: column;
width: 100%;
gap: 0.56rem;
}
}
:is(.member-footer-navigation-wrap:is(:is(:is(.page-footer .inner-wrap) .top-part) .navigation-social-image-wrap) .menu-list-wrap) .menu-list {
flex-direction: row;
gap: 0.4rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(.member-footer-navigation-wrap:is(:is(:is(.page-footer .inner-wrap) .top-part) .navigation-social-image-wrap) .menu-list-wrap) .menu-list {
flex-direction: column;
gap: 0.06rem;
}
}
:is(:is(:is(.page-footer .inner-wrap) .top-part) .navigation-social-image-wrap) .menu-list-wrap {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-end;
flex-wrap: wrap;
gap: 0.24rem 0.58rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(:is(.page-footer .inner-wrap) .top-part) .navigation-social-image-wrap) .menu-list-wrap {
gap: 0.24rem 0.8rem;
}
}
:is(:is(:is(:is(.page-footer .inner-wrap) .top-part) .navigation-social-image-wrap) .menu-list-wrap) .menu-list{
display: flex;
flex-direction: column;
gap: 0.06rem;
}
:is(:is(:is(:is(:is(.page-footer .inner-wrap) .top-part) .navigation-social-image-wrap) .menu-list-wrap) .menu-list) li{
position: relative;
display: flex;
}
:is(:is(:is(:is(:is(:is(.page-footer .inner-wrap) .top-part) .navigation-social-image-wrap) .menu-list-wrap) .menu-list) li) a{
position: relative;
display: flex;
font-size: 0.16rem;
line-height: 150%;
letter-spacing: 0;
font-weight: 500;
color: var(--white);
transition: color 0.3s ease-in-out;
}
:is(:is(:is(:is(:is(:is(:is(.page-footer .inner-wrap) .top-part) .navigation-social-image-wrap) .menu-list-wrap) .menu-list) li) a):hover {
color: var(--blue);
}
:is(:is(:is(.page-footer .inner-wrap) .top-part) .navigation-social-image-wrap) .social-image-wrap {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-end;
gap: 0.58rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(:is(.page-footer .inner-wrap) .top-part) .navigation-social-image-wrap) .social-image-wrap {
gap: 0.2rem;
width: 100%;
justify-content: space-between;
}
}
:is(:is(:is(.page-footer .inner-wrap) .top-part) .navigation-social-image-wrap) .social-wrap {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 0.06rem;
}
:is(:is(:is(:is(.page-footer .inner-wrap) .top-part) .navigation-social-image-wrap) .social-wrap) .social-title{
font-size: 0.16rem;
line-height: 150%;
letter-spacing: 0;
font-weight: 500;
}
:is(:is(:is(:is(.page-footer .inner-wrap) .top-part) .navigation-social-image-wrap) .social-wrap) .social-nav{
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
gap: 0.12rem;
}
:is(:is(:is(:is(:is(.page-footer .inner-wrap) .top-part) .navigation-social-image-wrap) .social-wrap) .social-nav) li{
position: relative;
display: flex;
}
:is(:is(:is(:is(:is(:is(.page-footer .inner-wrap) .top-part) .navigation-social-image-wrap) .social-wrap) .social-nav) li) a{
position: relative;
display: flex;
width: 0.24rem;
height: 0.24rem;
}
:is(:is(:is(:is(:is(:is(:is(.page-footer .inner-wrap) .top-part) .navigation-social-image-wrap) .social-wrap) .social-nav) li) a) svg{
width: 100%;
height: 100%;
fill: var(--white);
transition: fill 0.3s ease-in-out;
}
:is(:is(:is(:is(:is(:is(:is(:is(.page-footer .inner-wrap) .top-part) .navigation-social-image-wrap) .social-wrap) .social-nav) li) a) svg):hover {
fill: var(--blue);
}
:is(:is(:is(.page-footer .inner-wrap) .top-part) .navigation-social-image-wrap) .image-list-wrap {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
gap: 0.32rem;
flex-shrink: 0;
width: 1.73rem;
}
:is(:is(:is(:is(.page-footer .inner-wrap) .top-part) .navigation-social-image-wrap) .image-list-wrap) .image-item{
position: relative;
display: flex;
max-width: 0.7rem;
}
:is(:is(:is(:is(:is(.page-footer .inner-wrap) .top-part) .navigation-social-image-wrap) .image-list-wrap) .image-item) img {
max-width: 100%;
height: auto;
}
:is(.page-footer .inner-wrap) .bottom-part {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 0.4rem;
width: 100%;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(.page-footer .inner-wrap) .bottom-part {
flex-direction: column;
gap: 0.32rem;
align-items: flex-start;
}
}
:is(:is(.page-footer .inner-wrap) .bottom-part) .text-wrap {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 0.24rem;
}
:is(:is(:is(.page-footer .inner-wrap) .bottom-part) .text-wrap) .text {
font-size: 0.13rem;
line-height: 130%;
letter-spacing: 0;
font-weight: 500;
}
:is(:is(.page-footer .inner-wrap) .bottom-part) .additional-links-wrap {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 0.22rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(.page-footer .inner-wrap) .bottom-part) .additional-links-wrap {
justify-content: flex-start;
gap: 0.8rem;
}
}
:is(:is(:is(.page-footer .inner-wrap) .bottom-part) .additional-links-wrap) .additional-links-nav{
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 0.22rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(:is(.page-footer .inner-wrap) .bottom-part) .additional-links-wrap) .additional-links-nav{
justify-content: flex-start;
flex-direction: column;
align-items: flex-start;
gap: 0.06rem;
}
}
:is(:is(:is(:is(.page-footer .inner-wrap) .bottom-part) .additional-links-wrap) .additional-links-nav) li{
position: relative;
display: flex;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(:is(:is(.page-footer .inner-wrap) .bottom-part) .additional-links-wrap) .additional-links-nav) li{
min-width: 1.1rem;
}
}
:is(:is(:is(:is(:is(.page-footer .inner-wrap) .bottom-part) .additional-links-wrap) .additional-links-nav) li) a{
position: relative;
display: flex;
font-size: 0.13rem;
line-height: 130%;
letter-spacing: 0;
font-weight: 500;
color: var(--white);
transition: color 0.3s ease-in-out;
}
:is(:is(:is(:is(:is(:is(.page-footer .inner-wrap) .bottom-part) .additional-links-wrap) .additional-links-nav) li) a):hover {
color: var(--blue);
}
/* People modal portal (rendered in footer/body) */
.people-modal-backdrop {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
background-color: rgba(232, 232, 232, 0.95);
z-index: 1000;
display: none;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0.32rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.people-modal-backdrop {
padding: 0.1rem;
}
}
.people-modal-backdrop.is-active {
display: flex;
}
.people-modal-backdrop .people-modal {
display: flex;
height: 6rem;
max-width: 10.65rem;
display: none;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.people-modal-backdrop .people-modal {
height: unset;
max-height: 7rem;
flex-direction: column;
gap: 0.16rem;
}
}
.is-active:is(.people-modal-backdrop .people-modal) {
display: flex;
}
:is(.people-modal-backdrop .people-modal) .modal-image {
position: relative;
flex-shrink: 0;
width: 4.14rem;
height: 100%;
border-radius: 0.32rem;
overflow: hidden;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(.people-modal-backdrop .people-modal) .modal-image {
width: 100%;
height: 3.2rem;
}
}
:is(:is(.people-modal-backdrop .people-modal) .modal-image) img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(.people-modal-backdrop .people-modal) .modal-image) img {
object-position: 50% 10%;
}
}
:is(:is(.people-modal-backdrop .people-modal) .modal-image) .socail-link-wrap {
position: absolute;
bottom: 0.24rem;
left: 0.24rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 0.72rem;
height: 0.72rem;
background-color: var(--blue);
border-radius: 50%;
overflow: hidden;
}
:is(:is(:is(.people-modal-backdrop .people-modal) .modal-image) .socail-link-wrap) .social-link-item {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 0.24rem;
height: 0.24rem;
}
:is(:is(:is(:is(.people-modal-backdrop .people-modal) .modal-image) .socail-link-wrap) .social-link-item):hover svg {
fill: var(--orange);
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(:is(:is(.people-modal-backdrop .people-modal) .modal-image) .socail-link-wrap) .social-link-item):hover svg {
fill: var(--blue);
}
}
:is(:is(:is(:is(.people-modal-backdrop .people-modal) .modal-image) .socail-link-wrap) .social-link-item) svg {
width: 100%;
height: 100%;
fill: var(--white);
transition: fill 0.4s ease-in-out;
pointer-events: none;
}
:is(.people-modal-backdrop .people-modal) .modal-body {
background-color: var(--white);
border-top: 0.09rem solid var(--orange);
border-radius: 0.32rem;
padding: 0.24rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(.people-modal-backdrop .people-modal) .modal-body {
padding: 0.2rem;
max-height: 3.64rem;
}
}
:is(:is(.people-modal-backdrop .people-modal) .modal-body) .modal-header {
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
}
:is(:is(:is(.people-modal-backdrop .people-modal) .modal-body) .modal-header) .modal-title {
color: var(--dark-grey);
}
:is(:is(:is(.people-modal-backdrop .people-modal) .modal-body) .modal-header) .modal-close {
flex-shrink: 0;
width: 0.56rem;
height: 0.56rem;
background-color: transparent;
display: flex;
justify-content: center;
align-items: center;
border: none;
transition: background-color 0.4s ease-in-out;
cursor: pointer;
}
:is(:is(:is(:is(.people-modal-backdrop .people-modal) .modal-body) .modal-header) .modal-close) svg {
width: 0.2rem;
height: 0.2rem;
}
:is(:is(:is(:is(:is(.people-modal-backdrop .people-modal) .modal-body) .modal-header) .modal-close) svg) path {
transition: fill 0.4s ease-in-out;
}
:is(:is(:is(:is(.people-modal-backdrop .people-modal) .modal-body) .modal-header) .modal-close):hover {
background-color: var(--orange);
}
:is(:is(:is(:is(:is(.people-modal-backdrop .people-modal) .modal-body) .modal-header) .modal-close):hover svg) path {
fill: var(--white);
}
:is(:is(.people-modal-backdrop .people-modal) .modal-body) .modal-content-wrap {
flex-grow: 1;
overflow: auto;
}
:is(:is(:is(.people-modal-backdrop .people-modal) .modal-body) .modal-content-wrap) .modal-content {
color: var(--dark-grey);
}
:is(:is(:is(:is(.people-modal-backdrop .people-modal) .modal-body) .modal-content-wrap) .modal-content) p {
color: var(--dark-grey);
}
:is(:is(:is(:is(.people-modal-backdrop .people-modal) .modal-body) .modal-content-wrap) .modal-content) blockquote {
font-size: 0.2rem;
line-height: 120%;
letter-spacing: 0;
font-weight: 600;
color: var(--dark-grey);
margin: 0;
}
:is(:is(:is(:is(:is(.people-modal-backdrop .people-modal) .modal-body) .modal-content-wrap) .modal-content) blockquote) p {
font-size: 0.2rem;
line-height: 120%;
letter-spacing: 0;
font-weight: 600;
color: var(--dark-grey);
}
/* Locations modal portal (rendered in footer/body) */
.locations-modal-backdrop {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
background-color: rgba(232, 232, 232, 0.95);
z-index: 1000;
display: none;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0.32rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.locations-modal-backdrop {
padding: 0.1rem;
}
}
.locations-modal-backdrop.is-active {
display: flex;
}
.locations-modal-backdrop .locations-modal {
display: flex;
height: 6rem;
max-width: 7rem;
display: none;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.locations-modal-backdrop .locations-modal {
height: unset;
max-height: 7rem;
flex-direction: column;
gap: 0.16rem;
}
}
.is-active:is(.locations-modal-backdrop .locations-modal) {
display: flex;
}
:is(.locations-modal-backdrop .locations-modal) .locations-modal-body {
background-color: var(--white);
border-top: 0.09rem solid var(--orange);
border-radius: 0.32rem;
padding: 0.24rem;
display: flex;
flex-direction: column;
gap: 0.2rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(.locations-modal-backdrop .locations-modal) .locations-modal-body {
padding: 0.2rem;
max-height: 6rem;
}
}
:is(:is(.locations-modal-backdrop .locations-modal) .locations-modal-body) .locations-modal-header {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
height: 0.56rem;
}
:is(:is(:is(.locations-modal-backdrop .locations-modal) .locations-modal-body) .locations-modal-header) .locations-modal-close {
position: absolute;
top: 0rem;
right: 0rem;
flex-shrink: 0;
width: 0.56rem;
height: 0.56rem;
background-color: transparent;
display: flex;
justify-content: center;
align-items: center;
border: none;
transition: background-color 0.4s ease-in-out;
cursor: pointer;
}
:is(:is(:is(:is(.locations-modal-backdrop .locations-modal) .locations-modal-body) .locations-modal-header) .locations-modal-close) svg {
width: 0.2rem;
height: 0.2rem;
}
:is(:is(:is(:is(:is(.locations-modal-backdrop .locations-modal) .locations-modal-body) .locations-modal-header) .locations-modal-close) svg) path {
transition: fill 0.4s ease-in-out;
}
:is(:is(:is(:is(.locations-modal-backdrop .locations-modal) .locations-modal-body) .locations-modal-header) .locations-modal-close):hover {
background-color: var(--orange);
}
:is(:is(:is(:is(:is(.locations-modal-backdrop .locations-modal) .locations-modal-body) .locations-modal-header) .locations-modal-close):hover svg) path {
fill: var(--white);
}
:is(:is(.locations-modal-backdrop .locations-modal) .locations-modal-body) .locations-modal-content-wrap {
flex-grow: 1;
overflow: auto;
}
:is(:is(:is(.locations-modal-backdrop .locations-modal) .locations-modal-body) .locations-modal-content-wrap) .modal-content {
color: var(--dark-grey);
}
:is(:is(:is(:is(.locations-modal-backdrop .locations-modal) .locations-modal-body) .locations-modal-content-wrap) .modal-content) p {
color: var(--dark-grey);
}
:is(:is(:is(:is(.locations-modal-backdrop .locations-modal) .locations-modal-body) .locations-modal-content-wrap) .modal-content) blockquote {
font-size: 0.2rem;
line-height: 120%;
letter-spacing: 0;
font-weight: 600;
color: var(--dark-grey);
margin: 0;
}
:is(:is(:is(:is(:is(.locations-modal-backdrop .locations-modal) .locations-modal-body) .locations-modal-content-wrap) .modal-content) blockquote) p {
font-size: 0.2rem;
line-height: 120%;
letter-spacing: 0;
font-weight: 600;
color: var(--dark-grey);
}
/* use the same nesting syntax as in sass: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting */
section.example-section {
display: block;
position: relative;
padding: 0.6rem 0;
/* syntax example for extra class on section */
}
section.example-section.hidden {
display: none;
}
/* syntax example for container inside section */
section.example-section .container {
width: 100%;
max-width: 12rem;
margin: auto;
}
/* commons */
/* chrome and mozilla */
.custom-scrollbar::-webkit-scrollbar {
width: 0.06rem;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: var(--light-grey);
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: var(--blue);
border-radius: 1rem;
}
.custom-scrollbar {
/* firefox */
scrollbar-width: thin;
scrollbar-color: var(--blue) transparent;
}
.custom-scrollbar-orange::-webkit-scrollbar {
width: 0.06rem;
}
.custom-scrollbar-orange::-webkit-scrollbar-track {
background: var(--light-grey);
}
.custom-scrollbar-orange::-webkit-scrollbar-thumb {
background: var(--orange);
}
.custom-scrollbar-orange {
scrollbar-width: thin;
scrollbar-color: var(--orange) transparent;
}
/* login modal — minimal layout/state only (replace with Figma styles later) */
.login-modal.is-open {
position: fixed;
inset: 0;
z-index: 100000;
display: flex;
align-items: center;
justify-content: center;
padding: .2rem;
box-sizing: border-box;
}
.login-modal__overlay {
position: absolute;
inset: 0;
background: #ABABAB;
opacity: 0.95;
}
.login-modal__dialog {
position: relative;
z-index: 1;
width: 100%;
max-width: 8.46rem;
max-height: min(90vh, 40rem);
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
background: #fff;
padding: 0.2rem;
box-sizing: border-box;
border-radius: 0.32rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.login-modal__dialog {
padding: 0.16rem;
}
}
.login-modal__dialog .login-inner-wrapper {
position: relative;
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
padding: 0.2rem;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.login-modal__dialog .login-inner-wrapper {
padding: 0;
}
}
.login-modal__dialog .login-modal__close {
position: absolute;
top: 0.2rem;
right: 0.2rem;
width: 0.56rem;
height: 0.56rem;
background-color: transparent;
border: none;
cursor: pointer;
z-index: 10;
transition: background-color 0.4s ease-in-out;
}
:is(.login-modal__dialog .login-modal__close):hover {
background-color: var(--orange);
}
:is(.login-modal__dialog .login-modal__close):focus {
outline: none;
}
:is(.login-modal__dialog .login-modal__close):focus-visible {
outline: none;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.login-modal__dialog .login-modal__close {
position: relative;
margin-left: auto;
margin-right: 0;
top: unset;
right: unset;
margin-bottom: 0.24rem;
}
}
.login-modal__dialog .login-modal__inner {
position: relative;
}
:is(.login-modal__dialog .login-modal__inner) .login-modal__step:not(.is-active) {
display: none;
}
:is(.login-modal__dialog .login-modal__inner) .login-modal__step {
position: relative;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
[data-step="logout-success"]:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .text-wrap{
max-width: 3.8rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
[data-step="logout-success"]:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .text-wrap{
max-width: 100%;
}
}
:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .vrep-overlay-placeholder-wrap {
position: relative;
}
:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .vrep-overlay-placeholder-wrap) .vrep-overlay-placeholder {
position: absolute;
left: 0.16rem;
top: 50%;
transform: translateY(-50%);
font-family: var(--main-font);
font-size: 0.16rem;
line-height: 140%;
font-weight: 400;
letter-spacing: 0;
color: var(--dark-grey);
opacity: 0.5;
pointer-events: none;
transition: opacity 0.2s ease-in-out;
}
:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .vrep-overlay-placeholder-wrap) .vrep-overlay-placeholder) .required {
color: var(--orange);
opacity: 1;
}
:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .vrep-overlay-placeholder-wrap):focus-within .vrep-overlay-placeholder,.has-value:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .vrep-overlay-placeholder-wrap) .vrep-overlay-placeholder {
opacity: 0;
}
:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .title-wrap {
position: relative;
display: flex;
flex-direction: column;
gap: 0.05rem;
margin-right: 0.56rem;
color: var(--dark-grey);
hyphens: initial;
}
:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-text-wrap {
position: relative;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
gap: 0.18rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-text-wrap {
flex-direction: column;
gap: 0.2rem;
}
}
:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-text-wrap) .text-btn-wrap2 {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 0.24rem;
}
:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-text-wrap) .login-modal__step-body--login {
position: relative;
display: block;
width: 3.88rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-text-wrap) .login-modal__step-body--login {
width: 100%;
}
}
:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-text-wrap) .login-modal__step-body--login) .swpm-login-widget-form) form) .swpm-login-form-inner {
position: relative;
display: flex;
flex-direction: column;
}
:is(:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-text-wrap) .login-modal__step-body--login) .swpm-login-widget-form) form) .swpm-login-form-inner) .swpm-username-label,:is(:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-text-wrap) .login-modal__step-body--login) .swpm-login-widget-form) form) .swpm-login-form-inner) .swpm-password-label,:is(:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-text-wrap) .login-modal__step-body--login) .swpm-login-widget-form) form) .swpm-login-form-inner) .swpm-remember-me,:is(:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-text-wrap) .login-modal__step-body--login) .swpm-login-widget-form) form) .swpm-login-form-inner) .swpm-join-us-link {
display: none;
}
:is(:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-text-wrap) .login-modal__step-body--login) .swpm-login-widget-form) form) .swpm-login-form-inner) .swpm-username-input,:is(:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-text-wrap) .login-modal__step-body--login) .swpm-login-widget-form) form) .swpm-login-form-inner) .swpm-password-input {
width: 100%;
margin-bottom: 0.19rem;
}
:is(:is(:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-text-wrap) .login-modal__step-body--login) .swpm-login-widget-form) form) .swpm-login-form-inner) .swpm-username-input,:is(:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-text-wrap) .login-modal__step-body--login) .swpm-login-widget-form) form) .swpm-login-form-inner) .swpm-password-input) input {
position: relative;
width: 100%;
height: 0.32rem;
padding: 0.13rem 0.16rem;
border-radius: 0.32rem;
background-color: var(--super-light-grey) !important;
border: 0.01rem solid var(--light-grey);
font-family: var(--main-font);
font-size: 0.16rem;
line-height: 140%;
font-weight: 400;
letter-spacing: 0;
color: var(--dark-grey) !important;
block-size: auto;
-webkit-box-shadow: 0 0 0 1000px #f9f9f9 inset !important;
box-shadow: 0 0 0 1000px #f9f9f9 inset !important;
}
:is(:is(:is(:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-text-wrap) .login-modal__step-body--login) .swpm-login-widget-form) form) .swpm-login-form-inner) .swpm-username-input,:is(:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-text-wrap) .login-modal__step-body--login) .swpm-login-widget-form) form) .swpm-login-form-inner) .swpm-password-input) input):focus {
outline: none;
}
:is(:is(:is(:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-text-wrap) .login-modal__step-body--login) .swpm-login-widget-form) form) .swpm-login-form-inner) .swpm-username-input,:is(:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-text-wrap) .login-modal__step-body--login) .swpm-login-widget-form) form) .swpm-login-form-inner) .swpm-password-input) input)::placeholder {
color: transparent;
}
:is(:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-text-wrap) .login-modal__step-body--login) .swpm-login-widget-form) form) .swpm-login-form-inner) .swpm-forgot-pass-link {
position: relative;
font-size: 0.16rem;
line-height: 120%;
letter-spacing: 0;
font-weight: 600;
color: var(--dark-grey);
cursor: pointer;
transition: color 0.4s ease-in-out;
}
:is(:is(:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-text-wrap) .login-modal__step-body--login) .swpm-login-widget-form) form) .swpm-login-form-inner) .swpm-forgot-pass-link):hover {
color: var(--orange);
}
:is(:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-text-wrap) .login-modal__step-body--login) .swpm-login-widget-form) form) .swpm-login-form-inner) .swpm-login-submit {
order: 1;
margin-top: 0.32rem;
margin-bottom: 0;
}
:is(:is(:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-text-wrap) .login-modal__step-body--login) .swpm-login-widget-form) form) .swpm-login-form-inner) .swpm-login-submit) .swpm-login-form-submit {
position: relative;
display: flex;
padding: 0.135rem 0.23rem 0.145rem;
border-radius: 2rem;
font-family: var(--main-font);
font-size: 0.16rem;
line-height: 100%;
letter-spacing: 0;
font-weight: 500;
text-transform: uppercase;
background-color: var(--blue);
color: var(--white);
border: 1px solid var(--blue);
transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out;
color: var(--white);
cursor: pointer;
}
:is(:is(:is(:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-text-wrap) .login-modal__step-body--login) .swpm-login-widget-form) form) .swpm-login-form-inner) .swpm-login-submit) .swpm-login-form-submit):hover {
background-color: transparent;
color: var(--blue);
}
:is(:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-text-wrap) .login-modal__step-body--login) .swpm-login-widget-form) form) .swpm-login-form-inner) .swpm-login-action-msg {
order: 2;
font-size: 0.16rem;
line-height: 140%;
letter-spacing: 0;
font-weight: 400;
}
:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-text-wrap) .right-text-wrap {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 0.32rem;
width: 3.57rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-text-wrap) .right-text-wrap {
width: 100%;
}
}
:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-text-wrap) .right-text-wrap) .inner-text-wrap {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 0.16rem;
}
:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-text-wrap) .right-text-wrap) .btn-wrap {
position: relative;
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-text-wrap) .right-text-wrap) .btn-wrap) .btn {
cursor: pointer;
font-family: var(--main-font);
}
:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf {
position: relative;
width: 100%;
}
@media (min-width: 768px) {
:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) .two-col-desktop .gform_fields {
display: grid !important;
grid-template-columns: minmax(0, 4.95rem) minmax(0, 1fr);
column-gap: 0.2rem;
align-items: start;
}
:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) .two-col-desktop .gfield {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) .two-col-desktop .left-1 { grid-column: 1; grid-row: 1; }
:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) .two-col-desktop .left-2 { grid-column: 1; grid-row: 2; }
:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) .two-col-desktop .left-3 { grid-column: 1; grid-row: 3; }
:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) .two-col-desktop .left-4 { grid-column: 1; grid-row: 4; }
:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) .two-col-desktop .left-5 { grid-column: 1; grid-row: 5; }
:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) .two-col-desktop .left-6 { grid-column: 1; grid-row: 6; }
:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) .two-col-desktop .left-7 { grid-column: 1; grid-row: 7; }
:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) .two-col-desktop .left-8 { grid-column: 1; grid-row: 8; }
:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) .two-col-desktop .left-9 { grid-column: 1; grid-row: 9; }
:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) .two-col-desktop .right-1 {
grid-column: 2;
grid-row: 1 / span 9;
align-self: start;
}
}
:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) .gform_heading {
display: none!important;
}
:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) .gform_validation_errors {
display: none!important;
}
:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) form {
position: relative;
width: 100%;
padding: 0;
}
:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) form) .gform-body{
position: relative;
display: flex;
flex-direction: column;
}
:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) form) .gform-body) .gfield--type-frcaptcha) .gfield_label{
display: none!important;
}
:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) form) .gform-body) .gform_fields {
position: relative;
row-gap: 0.19rem;
}
:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) form) .gform-body) .gform_fields) .gfield_validation_message {
position: relative;
color: var(--orange);
}
:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) form) .gform-body) .gform_fields) .gfield:has(input:focus) .gfield_label,:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) form) .gform-body) .gform_fields) .gfield:has(textarea:focus) .gfield_label,:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) form) .gform-body) .gform_fields) .gfield:has(input[placeholder]:not(:placeholder-shown)) .gfield_label,:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) form) .gform-body) .gform_fields) .gfield:has(textarea[placeholder]:not(:placeholder-shown)) .gfield_label,:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) form) .gform-body) .gform_fields) .gfield:has(input:-webkit-autofill) .gfield_label {
opacity: 0;
pointer-events: none;
}
:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) form) .gform-body) .gform_fields) .gfield {
position: relative;
}
:is(:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) form) .gform-body) .gform_fields) .gfield) .gfield_label {
position: absolute;
display: flex;
gap: 0;
margin-bottom: 0;
left: 0.18rem;
top: 0.15rem;
font-family: var(--main-font);
font-size: 0.16rem;
line-height: 140%;
font-weight: 400;
letter-spacing: 0;
color: var(--dark-grey);
opacity: 0.5;
z-index: 2;
transition: opacity 0.2s ease-in-out;
}
:is(:is(:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) form) .gform-body) .gform_fields) .gfield) .gfield_label) .gfield_required_asterisk {
color: var(--orange);
font-family: var(--main-font);
font-size: 0.16rem;
line-height: 140%;
font-weight: 400;
letter-spacing: 0;
}
:is(:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) form) .gform-body) .gform_fields) .gfield--type-html) a {
text-decoration: underline;
transition: color 0.4s ease-in-out;
}
:is(:is(:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) form) .gform-body) .gform_fields) .gfield--type-html) a):hover {
color: var(--orange);
}
:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) form) .gform-body) .gform_fields) .left-form-text,:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) form) .gform-body) .gform_fields) .right-form-text {
position: relative;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.25rem;
margin-bottom: 0.21rem;
}
:is(:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) form) .gform-body) .gform_fields) .left-form-text,:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) form) .gform-body) .gform_fields) .right-form-text) .number {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 0.42rem;
height: 0.42rem;
color: var(--white);
background-color: var(--orange);
padding:0.08rem;
border-radius: 50%;
font-size: 0.2rem;
line-height: 123%;
font-weight: 600;
letter-spacing: 0;
}
:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) form) .gform-body) .gform_fields) input {
position: relative;
width: 100%;
height: 0.32rem;
padding: 0.13rem 0.16rem;
border-radius: 0.32rem;
background-color: var(--super-light-grey);
border: 0.01rem solid var(--light-grey);
font-family: var(--main-font);
font-size: 0.16rem;
line-height: 140%;
font-weight: 400;
letter-spacing: 0;
color: var(--blue);
block-size: auto;
}
:is(:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) form) .gform-body) .gform_fields) input):focus {
outline: none;
}
:is(:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) form) .gform-body) .gform_fields) input)::placeholder {
color: transparent;
}
:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) form) .gform-body) .gform_fields) input[type="checkbox"] {
position: relative;
padding: 0;
border-radius: 0.08rem;
width: 0.24rem;
height: 0.24rem;
cursor: pointer;
}
:is(:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) form) .gform-body) .gform_fields) input[type="checkbox"]):checked::before {
color: var(--orange)!important;
}
:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) form) .gform-body) .gform_fields) .gfield--type-consent {
position: relative;
}
:is(:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) form) .gform-body) .gform_fields) .gfield--type-consent) .ginput_container_consent {
position: relative;
align-items: center;
}
:is(:is(:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) form) .gform-body) .gform_fields) .gfield--type-consent) .ginput_container_consent) label {
margin-left: 0.08rem;
font-size: 0.16rem;
line-height: 150%;
font-weight: 600;
letter-spacing: 0;
color: var(--dark-grey);
cursor: pointer;
}
:is(:is(:is(:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) form) .gform-body) .gform_fields) .gfield--type-consent) .ginput_container_consent) label) .gfield_required_asterisk {
font-size: 0.16rem;
line-height: 150%;
font-weight: 600;
letter-spacing: 0;
color: var(--blue);
}
:is(:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) form) .gform-body) .gform_fields) .gfield--type-consent) .gfield_consent_description {
position: relative;
padding: 0;
font-size: 0.16rem;
line-height: 140%;
font-weight: 400;
letter-spacing: 0;
color: var(--dark-grey);
border: none;
max-height: unset;
}
:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) form) .gform-body) .gform_fields) textarea {
min-block-size: 2.49rem;
resize: none;
}
:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) form) .gform_footer {
position: relative;
margin-top: 0.32rem;
}
:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) form) .gform_footer) .gform_button {
position: relative;
padding: 0.14rem 0.23rem !important;
border-radius: 2rem !important;
font-size: 0.16rem !important;
line-height: 100% !important;
letter-spacing: 0 !important;
font-family: var(--main-font)!important;
font-weight: 500 !important;
text-transform: uppercase !important;
background-color: var(--blue) !important;
color: var(--white) !important;
border: 1px solid var(--blue) !important;
transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out;
}
:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--gf) form) .gform_footer) .gform_button):hover {
background-color: var(--white) !important;
color: var(--blue) !important;
}
:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .text-wrap {
position: relative;
color: var(--dark-grey);
}
:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--forgot {
position: relative;
display: block;
}
:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--forgot) .swpm_error {
font-size: 0.16rem;
line-height: 140%;
letter-spacing: 0;
font-weight: 400;
margin-bottom: 0.1rem;
}
:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--forgot) .swpm_pass_reset_processing_msg_section {
font-size: 0.16rem;
line-height: 140%;
letter-spacing: 0;
font-weight: 400;
}
:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--forgot) .swpm_pass_reset_processing_msg_section) p {
margin-bottom: 0.1rem;
}
:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--forgot) .swpm-pw-reset-widget-form) form) .swpm-pw-reset-widget-inside {
position: relative;
display: flex;
flex-direction: column;
}
:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--forgot) .swpm-pw-reset-widget-form) form) .swpm-pw-reset-widget-inside) .swpm-pw-reset-email {
display: none;
}
:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--forgot) .swpm-pw-reset-widget-form) form) .swpm-pw-reset-widget-inside) .swpm-pw-reset-email-input {
margin-top: 0;
}
:is(:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--forgot) .swpm-pw-reset-widget-form) form) .swpm-pw-reset-widget-inside) .swpm-pw-reset-email-input) input {
position: relative;
width: 100%;
height: 0.32rem;
padding: 0.13rem 0.16rem;
border-radius: 0.32rem;
background-color: var(--super-light-grey);
border: 0.01rem solid var(--light-grey);
font-family: var(--main-font);
font-size: 0.16rem;
line-height: 140%;
font-weight: 400;
letter-spacing: 0;
color: var(--dark-grey);
block-size: auto;
}
:is(:is(:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--forgot) .swpm-pw-reset-widget-form) form) .swpm-pw-reset-widget-inside) .swpm-pw-reset-email-input) input):focus {
outline: none;
}
:is(:is(:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--forgot) .swpm-pw-reset-widget-form) form) .swpm-pw-reset-widget-inside) .swpm-pw-reset-email-input) input)::placeholder {
color: var(--dark-grey);
opacity: 0.5;
font-family: var(--main-font);
}
:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--forgot) .swpm-pw-reset-widget-form) form) .swpm-pw-reset-widget-inside) .swpm-pw-reset-submit-button {
margin-top: 0.32rem;
margin-bottom: 0;
}
:is(:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--forgot) .swpm-pw-reset-widget-form) form) .swpm-pw-reset-widget-inside) .swpm-pw-reset-submit-button) .swpm-pw-reset-submit {
position: relative;
display: flex;
padding: 0.135rem 0.23rem 0.145rem;
border-radius: 2rem;
font-family: var(--main-font);
font-size: 0.16rem;
line-height: 100%;
letter-spacing: 0;
font-weight: 500;
text-transform: uppercase;
background-color: var(--blue);
color: var(--white);
border: 1px solid var(--blue);
transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out;
color: var(--white);
cursor: pointer;
}
:is(:is(:is(:is(:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--forgot) .swpm-pw-reset-widget-form) form) .swpm-pw-reset-widget-inside) .swpm-pw-reset-submit-button) .swpm-pw-reset-submit):hover {
background-color: transparent;
color: var(--blue);
}
:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--logout-success {
position: relative;
display: block;
}
:is(:is(:is(:is(.login-modal__dialog .login-modal__inner) .login-modal__step) .login-modal__step-body--logout-success) .title-wrap) h5 {
font-size: 0.32rem;
line-height: 114%;
letter-spacing: -0.02em;
font-weight: 400;
color: var(--dark-grey);
}
.vrep-swpm-gate {
position: relative;
min-height: 85vh;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
.vrep-swpm-gate .vrep-swpm-gate-msg {
position: relative;
display: flex;
flex-direction: column;
color: var(--dark-grey);
}
:is(.vrep-swpm-gate .vrep-swpm-gate-msg) a {
text-decoration: underline;
color: var(--dark-grey);
transition: color 0.4s ease-in-out;
}
:is(:is(.vrep-swpm-gate .vrep-swpm-gate-msg) a):hover {
color: var(--orange);
}
.login-modal__title.screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.search-page {
position: relative;
padding: 0.5rem 0 0.8rem;
min-height: 80vh;
}
.search-page .search-page__header {
margin-bottom: 0.3rem;
}
:is(.search-page .search-page__header) .heading-small {
padding-bottom: 0.1rem;
}
.search-page .search-page__results {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
:is(.search-page .search-page__results) .search-page__item {
padding: 0.1rem 0.2rem;
width: 100%;
border-bottom: 1px solid var(--light-grey);
background-color: var(--super-light-grey);
border-radius: 0.12rem;
}
:is(:is(.search-page .search-page__results) .search-page__item):last-child {
border-bottom: none;
}
:is(:is(.search-page .search-page__results) .search-page__item) h2 {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 0.1rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(.search-page .search-page__results) .search-page__item) h2 {
flex-direction: column;
align-items: flex-start;
}
}
:is(:is(:is(.search-page .search-page__results) .search-page__item) h2) a:first-child {
color: var(--blue);
transition: color 0.4s ease-in-out;
font-weight: 600;
}
:is(:is(:is(:is(.search-page .search-page__results) .search-page__item) h2) a:first-child):hover {
color: var(--orange);
}
:is(:is(:is(.search-page .search-page__results) .search-page__item) h2) a:last-child {
flex-shrink: 0;
color: var(--blue);
transition: color 0.4s ease-in-out;
}
:is(:is(:is(:is(.search-page .search-page__results) .search-page__item) h2) a:last-child):hover {
color: var(--orange);
}
.search-page .search-page__pagination {
margin-top: 0.4rem;
}
:is(.search-page .search-page__pagination) .screen-reader-text {
display: none;
}
:is(.search-page .search-page__pagination) .nav-links {
display: flex;
flex-wrap: wrap;
gap: 0.08rem;
}
:is(:is(.search-page .search-page__pagination) .nav-links) .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 0.38rem;
height: 0.38rem;
padding: 0 0.12rem;
border: 1px solid var(--blue);
border-radius: 999px;
color: var(--blue);
font-size: 0.14rem;
font-weight: 600;
line-height: 1;
transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out;
}
.current:is(:is(:is(.search-page .search-page__pagination) .nav-links) .page-numbers) {
background-color: var(--blue);
color: var(--white);
}
:is(:is(:is(.search-page .search-page__pagination) .nav-links) .page-numbers):hover {
background-color: var(--blue);
color: var(--white);
}
.search-page .search-page__empty {
padding: 0.2rem 0;
}
.page-template-default .swpm_success {
position: relative;
display: block;
width: 100%;
max-width: 12.8rem;
margin: .1rem auto 0;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.page-template-default .swpm_success {
padding-left: 0.2rem;
padding-right: 0.2rem;
}
}
.swpm-post-not-logged-in-msg,
.swpm_profile_not_logged_in_msg {
position: relative;
display: block;
width: 100%;
max-width: 9.5rem;
margin: .8rem auto;
min-height: calc(100vh - 3.5rem);
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.swpm-post-not-logged-in-msg,
.swpm_profile_not_logged_in_msg {
padding-left: 0.2rem;
padding-right: 0.2rem;
margin: .4rem auto;
}
}
:is(.swpm-post-not-logged-in-msg,.swpm_profile_not_logged_in_msg) a {
text-decoration: underline;
transition: color 0.4s ease-in-out;
}
:is(:is(.swpm-post-not-logged-in-msg,.swpm_profile_not_logged_in_msg) a):hover {
color: var(--orange);
}
.swpm-edit-profile-form {
position: relative;
display: block;
width: 100%;
max-width: 9.5rem;
margin: .8rem auto;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.swpm-edit-profile-form {
padding-left: 0.2rem;
padding-right: 0.2rem;
margin: .4rem auto;
}
}
.swpm-edit-profile-form .swpm-validate-form {
position: relative;
display: block;
}
:is(.swpm-edit-profile-form .swpm-validate-form) table {
width: 100%;
border-collapse: separate;
border-spacing: 0 0.2rem;
}
:is(.swpm-edit-profile-form .swpm-validate-form) tr {
margin: 0 0 0.2rem;
display: block;
}
:is(.swpm-edit-profile-form .swpm-validate-form) td {
display: block;
width: 100%;
}
:is(.swpm-edit-profile-form .swpm-validate-form) td:first-child {
padding-right: 0;
}
:is(.swpm-edit-profile-form .swpm-validate-form) td:last-child {
margin-top: 0.06rem;
}
:is(.swpm-edit-profile-form .swpm-validate-form) label {
display: inline-block;
padding-left: 0.2rem;
font-size: 0.16rem;
line-height: 130%;
font-weight: 600;
color: var(--dark-grey);
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(.swpm-edit-profile-form .swpm-validate-form) label {
padding-left: 0;
}
}
:is(.swpm-edit-profile-form .swpm-validate-form) .swpm-profile-username-row td:last-child,:is(.swpm-edit-profile-form .swpm-validate-form) .swpm-profile-membership-level-row td:last-child {
color: var(--orange);
font-weight: 600;
padding-top: 0.01rem;
padding-left: 0.2rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(.swpm-edit-profile-form .swpm-validate-form) .swpm-profile-username-row td:last-child,:is(.swpm-edit-profile-form .swpm-validate-form) .swpm-profile-membership-level-row td:last-child {
padding-left: 0;
}
}
:is(.swpm-edit-profile-form .swpm-validate-form) input[type="text"],:is(.swpm-edit-profile-form .swpm-validate-form) input[type="password"],:is(.swpm-edit-profile-form .swpm-validate-form) select {
position: relative;
width: 100%;
min-height: 0.32rem;
padding: 0.13rem 0.16rem;
border-radius: 0.32rem;
background-color: var(--super-light-grey);
border: 0.01rem solid var(--light-grey);
font-size: 0.16rem;
line-height: 140%;
font-weight: 400;
letter-spacing: 0;
color: var(--dark-grey);
block-size: auto;
}
:is(.swpm-edit-profile-form .swpm-validate-form) input[type="text"]:focus,:is(.swpm-edit-profile-form .swpm-validate-form) input[type="password"]:focus,:is(.swpm-edit-profile-form .swpm-validate-form) select:focus {
outline: none;
}
:is(.swpm-edit-profile-form .swpm-validate-form) input[type="text"]::placeholder,:is(.swpm-edit-profile-form .swpm-validate-form) input[type="password"]::placeholder {
color: var(--dark-grey);
}
:is(.swpm-edit-profile-form .swpm-validate-form) .swpm-edit-profile-submit-section {
margin-top: 0.6rem;
margin-bottom: 0.4rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(.swpm-edit-profile-form .swpm-validate-form) .swpm-edit-profile-submit-section {
margin-top: 0.2rem;
margin-bottom: 0.2rem;
}
}
:is(:is(.swpm-edit-profile-form .swpm-validate-form) .swpm-edit-profile-submit-section) .swpm-edit-profile-submit {
position: relative;
padding: 0.135rem 0.23rem 0.145rem;
border-radius: 2rem;
font-size: 0.16rem;
line-height: 100%;
letter-spacing: 0;
font-weight: 500;
text-transform: uppercase;
background-color: var(--blue);
color: var(--white);
border: 1px solid var(--blue);
transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out;
cursor: pointer;
}
:is(:is(:is(.swpm-edit-profile-form .swpm-validate-form) .swpm-edit-profile-submit-section) .swpm-edit-profile-submit):hover {
background-color: transparent;
color: var(--blue);
}