/* PageBase – CSS för sajtens tema. Byggs om från theme/ – ändra inte här. */
/* main.css */
/* BODY CSS */
*
{
box-sizing: border-box;
}
body { padding: 0; margin: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility; }
body::-webkit-scrollbar-track { background-color: var(--color-secondary); } body::-webkit-scrollbar { width: 5px; background-color: var(--color-secondary); } body::-webkit-scrollbar-thumb { background-color: var(--color-primary); }
body { font-family: var(--font-family-text); }
/* MAIN */
.row {
--bs-gutter-x: 0 !important;
}
a {
text-decoration: none;
font-size: var(--font-size);
font-family: var(--font-family-text), sans-serif;
}
.content {
position: absolute;
width: 100%;
overflow: hidden;
top: 70px;
}
.content .page-element > .container {
box-sizing: border-box;
}
.page-element[id] {
scroll-margin-top: 110px;
}
/* Två sektioner äger tillsammans mellanrummet mellan dem. När båda har
största standardavståndet blir annars gränsen 12–14rem tom yta. Detta
gäller alla modultyper (text, formulär, flöden, kort), inte enskilda
mallar, och låter sektionernas övriga inre spacing vara orörd. */
.content > .page-element:has(+ .page-element > :is(.element, .container).pt-6, + .page-element > :is(.element, .container).pt-7) > :is(.element, .container).pb-6,
.content > .page-element:has(+ .page-element > :is(.element, .container).pt-6, + .page-element > :is(.element, .container).pt-7) > :is(.element, .container).pb-7 {
padding-bottom: 1.5rem !important;
}
.content > .page-element:has(> :is(.element, .container).pb-6, > :is(.element, .container).pb-7) + .page-element > :is(.element, .container).pt-6,
.content > .page-element:has(> :is(.element, .container).pb-6, > :is(.element, .container).pb-7) + .page-element > :is(.element, .container).pt-7 {
padding-top: 3rem !important;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: .5rem;
}
p {
margin-top: 0;
margin-bottom: 0;
}
h1, .h1 { font-size: var(--h1-size); font-family: var(--font-family-header), sans-serif; color: var(--color-dark); font-weight: var(--h1-weight); }
h2, .h2 { font-size: var(--h2-size); font-family: var(--font-family-header), sans-serif; color: var(--color-dark); font-weight: var(--h2-weight); }
h3, .h3 { font-size: var(--font-size); font-family: var(--font-family-header), sans-serif; color: var(--color-dark); font-weight: var(--h2-weight); }
.font-xxl { font-size: 8.5rem; line-height: 8.5rem; word-wrap: break-word; hyphens: auto; }
.font-xl { font-size: 6.5rem; line-height: 6.5rem; word-wrap: break-word; hyphens: auto; }
.font-large { font-size: 2.25em; line-height: 2.25rem; }
.font-medium-large { font-size: 1.8rem }
.font-medium { font-size: 1.2rem; line-height: 1.5rem; }
.font-small { font-size: .8rem; line-height: 1rem; }
.font-bold {font-weight: 700;}
p { font-size: var(--font-size); font-family: var(--font-family-text), sans-serif; line-height: var(--line-height); color: var(--color-dark);}
.is-dark h1,
.is-dark .h1,
.is-dark h2,
.is-dark .h2,
.is-dark h3,
.is-dark .h3,
.is-dark p {
color: var(--color-light);
}
.is-dark .faq-item,
.is-dark .faq-item h1,
.is-dark .faq-item h2,
.is-dark .faq-item h3,
.is-dark .faq-item p {
color: var(--color-dark);
}
/* Mobile */
@media (max-width: 767px) {
h1, .h1 { font-size: 1.8rem;}
h2, .h2 { font-size: 1.4rem;}
.font-xxl { font-size: 5.5rem; line-height: 5.5rem; }
.font-xl { font-size: 4.5rem; line-height: 4.5rem; }
}
.text-center { text-align: center; } .text-right { text-align: right; } .text-left { text-align: left; }
@media (min-width: 768px) {
.text-md-right { text-align: right; }
}
.text-uppercase { text-transform: uppercase; }
nav.nav-1 {
position: fixed;
width: 100%;
z-index: 10;
}
nav .nav-1-top {
background-color: var(--color-primary);
height: 30px;
width: 100%;
}
nav .nav-1-top .nav-items {
height: 30px;
line-height: 30px;
margin: 0;
}
/* Nav items */
nav .nav-1-top li.nav-item {
position: relative;
padding: 0px 20px;
color: #000;
display: inline-block;
vertical-align: middle;
}
nav .nav-1-top li.nav-item a {
color: var(--color-nav-text);
}
nav .nav-1-main {
background-color: var(--color-nav);
width: 100%;
height: 70px;
top: 0px;
transition: background .3s;
}
nav .nav-1-main-push {
top: 30px;
}
nav.gradient .nav-1-main {
background: none;
}
nav .nav-1-main + .content { top: 60px; }
nav .nav-1-main .nav-logo {
height: 44px;
margin-top: 13px;
width: auto;
max-width: 160px;
}
nav .nav-brand {
display: inline-flex;
align-items: center;
max-width: 100%;
color: inherit;
text-decoration: none;
}
.nav-wordmark {
display: inline-block;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: var(--font-family-header), sans-serif;
font-weight: 700;
font-size: 22px;
line-height: 44px;
color: var(--color-nav-text);
}
nav .nav-1-main .nav-wordmark {
margin-top: 13px;
line-height: 44px;
}
nav .nav-1-main ul.nav-items {
margin: 0;
padding: 0;
text-align: right;
}
/* Nav items */
nav .nav-1-main li.nav-item {
position: relative;
padding: 0px 10px;
font-weight: 700;
color: #000;
display: inline-block;
line-height: 70px;
vertical-align: middle;
}
nav .nav-1-main li.nav-item a {
font-family: var(--font-family-text);
font-weight: var(--nav-weight);
color: var(--color-nav-text);
transition: color .15s;
}
nav .nav-1-main li.nav-item svg {
width: 10px;
height: 10px;
margin-left: 10px;
fill: var(--color-nav-text);
transition: fill .15s;
}
nav .nav-1-main li.nav-item:hover > a {
color: var(--color-primary);
}
nav .nav-1-main li.nav-item:hover > a svg {
fill: var(--color-primary);
}
nav .nav-1-main li.nav-item:hover > .nav-sub {
opacity: 1;
visibility: visible;
/*transform: translate(-50%, -0px);*/
}
nav .nav-1-main li.nav-item .nav-sub {
position: absolute;
top: 70px;
left: 50%;
padding: 10px 0px;
line-height: 2rem;
background-color: #fff;
list-style: none;
font-weight: 400;
opacity: 0;
visibility: hidden;
transform: translate(-50%, -5px);
transition: transform .15s, visibility .15s, opacity .15s;
border: 1px solid #eee;
box-shadow: 0px 5px 5px rgb(0 0 0 / 10%);
text-align: left;
border-radius: 10px;
}
nav .nav-1-main li.nav-item .nav-sub-item {
display: block;
padding: .15rem 1.5rem;
font-family: var(--font-family-text);
color: var(--color-text);
transition: color .15s;
white-space: nowrap;
}
nav .nav-1-main li.nav-item .nav-sub-item:hover {
color: var(--color-primary);
}
nav .nav-1-main .nav-mobile-toggle {
display: none;
}
@media screen and (max-width: 992px) {
nav .nav-1-main .nav-mobile-toggle {
display: block;
width: 30px;
height: 30px;
float: right;
margin: 15px 30px 15px 0px;
}
.nav-items-holder {
opacity: 0;
visibility: hidden;
position: fixed;
top: 60px;
left: 0;
height: 100%;
width: 100%;
background-color: var(--color-nav);
transition: visibility .15s, opacity .15s;
display: none;
}
.nav-items-holder.open {
opacity: 1;
visibility: visible;
display: block;
overflow-y: auto;
}
nav .nav-1-main ul.nav-items {
margin-top: 30px;
text-align: left;
padding-left: 2.25rem;
padding-right: 2.25rem;
}
nav .nav-1-main ul.nav-items .nav-item {
display: block;
line-height: 30px;
margin-bottom: 0.6rem;
}
nav .nav-1-main ul.nav-items .nav-item:last-child {
margin-bottom: 0;
}
nav .nav-1-main ul.nav-items li.nav-item .nav-sub {
position: relative;
opacity: 1;
visibility: visible;
top: 0;
left: 0;
transform: none !important;
background-color: var(--color-nav);
border: none;
box-shadow: none;
max-height: 0;
overflow: hidden;
padding: 0 0 0 1rem;
margin: 0;
transition: max-height 0.25s ease-out;
}
nav .nav-1-main ul.nav-items li.nav-item.nav-item--open .nav-sub {
max-height: 400px;
}
nav .nav-1-main ul.nav-items li.nav-item.nav-item--open > a svg {
transform: rotate(180deg);
}
nav .nav-1-main ul.nav-items li.nav-item > a svg {
transition: transform 0.2s ease;
}
nav .nav-1-main ul.nav-items li.nav-item .nav-sub .nav-sub-item {
color: var(--color-nav-text);
padding-left: 0.5rem;
}
}
nav.nav-2 {
background: var(--color-nav); /* fallback för äldre webbläsare */
background: color-mix(in srgb, var(--color-nav) 72%, transparent);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 20px;
box-shadow: 0 4px 30px rgba(0,0,0,0.1);
border: 1px solid color-mix(in srgb, var(--color-nav) 25%, transparent);
position: fixed;
width: 1320px;
max-width: 1320px;
top: 10px;
height: 60px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
transition: background .3s;
}
nav.nav-2 + .content { top: 0px; }
nav.nav-2 .nav-logo {
height: 30px;
margin-top: 15px;
margin-left: 15px;
width: auto;
}
nav.nav-2 .nav-wordmark {
margin-top: 0;
margin-left: 15px;
font-size: 20px;
line-height: 60px;
}
nav.nav-2 ul.nav-items {
margin: 0;
padding: 0;
text-align: right;
}
/* Nav items */
nav.nav-2 li.nav-item {
position: relative;
padding: 0px 20px;
font-weight: 700;
color: #000;
display: inline-block;
line-height: 60px;
vertical-align: middle;
}
nav.nav-2 li.nav-item a {
font-family: var(--font-family-header);
font-weight: var(--nav-weight);
color: var(--color-nav-text);
transition: color .2s ease;
}
nav.nav-2 li.nav-item:hover > a {
color: var(--color-primary);
}
nav.nav-2 li.nav-item svg {
width: 10px;
height: 10px;
margin-left: 8px;
fill: currentColor;
transition: transform .2s ease, fill .2s ease;
}
nav.nav-2 li.nav-item:hover > a svg {
fill: var(--color-primary);
}
nav.nav-2 li.nav-item:hover > .nav-sub {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0);
}
nav.nav-2 li.nav-item .nav-sub {
position: absolute;
top: 100%;
left: 50%;
margin-top: 4px;
padding: 8px 0;
min-width: 200px;
line-height: 1.5;
background-color: #fff;
list-style: none;
font-weight: 400;
opacity: 0;
visibility: hidden;
transform: translate(-50%, -8px);
transition: transform .2s ease, visibility .2s ease, opacity .2s ease;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
border: 1px solid rgba(0,0,0,0.06);
}
nav.nav-2 li.nav-item .nav-sub-item {
display: block;
padding: .5rem 1.25rem;
font-family: var(--font-family-header);
color: var(--color-primary);
transition: background-color .15s ease, color .15s ease;
text-align: left;
}
nav.nav-2 li.nav-item .nav-sub-item:hover {
background-color: rgba(0,0,0,0.04);
color: var(--color-primary);
}
nav.nav-2 .nav-mobile-toggle {
display: none;
}
@media screen and (max-width: 1320px) {
nav.nav-2 {
left: 15px;
right: 15px;
width: calc(100% - 30px);
max-width: 100%;
transform: none;
}
}
@media screen and (max-width: 992px) {
nav.nav-2 {
left: 15px;
right: 15px;
width: calc(100% - 30px);
max-width: 100%;
transform: none;
}
nav.nav-2 .nav-mobile-toggle {
display: block;
width: 30px;
height: 30px;
float: right;
margin: 15px 30px 15px 0px;
}
nav.nav-2 .nav-logo-holder {
position: relative;
z-index: 11;
}
nav.nav-2 .nav-items-holder {
opacity: 0;
visibility: hidden;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
min-height: 100vh;
background-color: var(--color-nav);
transition: visibility .15s, opacity .15s;
display: none;
z-index: 5;
}
nav.nav-2 .nav-items-holder.open {
opacity: 1;
visibility: visible;
display: block;
overflow-y: auto;
}
nav.nav-2 ul.nav-items {
text-align: left;
margin-top: 30px;
padding-top: 70px;
padding-left: 2.25rem;
padding-right: 2.25rem;
}
nav.nav-2 ul.nav-items .nav-item {
display: block;
line-height: 30px;
margin-bottom: 0.6rem;
}
nav.nav-2 ul.nav-items .nav-item:last-child {
margin-bottom: 0;
}
nav.nav-2 ul.nav-items li.nav-item .nav-sub {
position: relative;
left: 0;
opacity: 1;
visibility: visible;
top: 0;
transform: none !important;
background-color: var(--color-nav);
border: none;
box-shadow: none;
max-height: 0;
overflow: hidden;
padding: 0 0 0 1rem;
margin: 0;
transition: max-height 0.25s ease-out;
}
nav.nav-2 ul.nav-items li.nav-item.nav-item--open .nav-sub {
max-height: 400px;
}
nav.nav-2 ul.nav-items li.nav-item.nav-item--open > a svg {
transform: rotate(180deg);
}
nav.nav-2 ul.nav-items li.nav-item > a svg {
transition: transform 0.2s ease;
}
nav.nav-2 ul.nav-items li.nav-item .nav-sub .nav-sub-item {
color: var(--color-nav-text);
padding-left: 0.5rem;
}
}
nav.nav-3 {
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
}
nav .nav-3-top {
background-color: var(--color-primary);
height: 30px;
width: 100%;
padding: 0 2.25rem;
box-sizing: border-box;
text-align: right;
}
nav .nav-3-top .nav-items {
height: 30px;
line-height: 30px;
margin: 0;
}
nav .nav-3-top li.nav-item {
position: relative;
padding: 0px 20px;
color: #000;
display: inline-block;
vertical-align: middle;
}
nav .nav-3-top li.nav-item a {
color: var(--color-nav-text);
}
nav .nav-3-main {
width: 100%;
height: 70px;
background: var(--color-nav);
background: color-mix(in srgb, var(--color-nav) 72%, transparent);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid transparent;
border-bottom-color: color-mix(in srgb, var(--color-nav) 25%, transparent);
border-radius: 0;
box-shadow: none;
transition: width .35s ease, margin .35s ease, border-radius .35s ease, height .35s ease, box-shadow .35s ease, background .3s, border-color .3s;
}
nav.nav-3.gradient .nav-3-main {
background: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-color: transparent;
box-shadow: none;
}
nav.nav-3.is-compact .nav-3-main {
width: calc(100% - 48px);
height: 62px;
margin-top: 10px;
border-radius: 20px;
border: 1px solid color-mix(in srgb, var(--color-nav) 25%, transparent);
box-shadow: 0 4px 30px rgba(0,0,0,0.1);
}
nav.nav-3.is-compact:has(.nav-3-top) .nav-3-main {
margin-top: 0;
}
nav .nav-3-row {
display: flex;
align-items: center;
position: relative;
width: 100%;
height: 70px;
box-sizing: border-box;
padding: 0 2.25rem;
transition: height .35s ease;
}
nav.nav-3.is-compact .nav-3-row {
height: 62px;
}
nav .nav-3-row .nav-logo-holder {
position: relative;
z-index: 2;
flex: 0 0 auto;
display: flex;
align-items: center;
min-width: 0;
}
nav .nav-3-row .nav-items-holder {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: flex-end;
min-width: 0;
pointer-events: none;
}
nav .nav-3-main ul.nav-3-links,
nav .nav-3-main ul.nav-3-tools {
pointer-events: auto;
}
nav .nav-3-main .nav-logo {
height: 44px;
width: auto;
max-width: 160px;
}
nav .nav-3-main .nav-wordmark {
margin-top: 0;
line-height: 44px;
}
nav .nav-3-main ul.nav-items {
margin: 0;
padding: 0;
list-style: none;
}
nav .nav-3-main ul.nav-3-links {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
z-index: 2;
}
nav .nav-3-main ul.nav-3-tools {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: flex-end;
}
nav .nav-3-main li.nav-item {
position: relative;
padding: 0 10px;
font-weight: 700;
color: #000;
display: block;
line-height: 70px;
white-space: nowrap;
transition: line-height .35s ease;
}
nav.nav-3.is-compact .nav-3-main li.nav-item {
line-height: 62px;
}
nav .nav-3-main li.nav-item a {
font-family: var(--font-family-text);
font-weight: var(--nav-weight);
color: var(--color-nav-text);
transition: color .15s;
}
nav .nav-3-main li.nav-item svg {
width: 10px;
height: 10px;
margin-left: 10px;
fill: var(--color-nav-text);
transition: fill .15s;
}
nav .nav-3-main li.nav-item:hover > a {
color: var(--color-primary);
}
nav .nav-3-main li.nav-item:hover > a svg {
fill: var(--color-primary);
}
nav .nav-3-main li.nav-item:hover > .nav-sub {
opacity: 1;
visibility: visible;
}
nav .nav-3-main li.nav-item .nav-sub {
position: absolute;
top: 100%;
left: 50%;
padding: 10px 0px;
line-height: 2rem;
background-color: #fff;
list-style: none;
font-weight: 400;
opacity: 0;
visibility: hidden;
transform: translate(-50%, -5px);
transition: transform .15s, visibility .15s, opacity .15s;
border: 1px solid #eee;
box-shadow: 0px 5px 5px rgb(0 0 0 / 10%);
text-align: left;
border-radius: 10px;
}
nav .nav-3-main li.nav-item .nav-sub-item {
display: block;
padding: .15rem 1.5rem;
font-family: var(--font-family-text);
color: var(--color-text);
transition: color .15s;
white-space: nowrap;
}
nav .nav-3-main li.nav-item .nav-sub-item:hover {
color: var(--color-primary);
}
nav .nav-3-main .nav-mobile-toggle {
display: none;
}
@media screen and (max-width: 992px) {
nav.nav-3.is-compact .nav-3-main {
width: calc(100% - 24px);
}
nav.nav-3:has(.nav-items-holder.open) .nav-3-main {
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: var(--color-nav);
}
nav.nav-3.is-compact:has(.nav-items-holder.open) .nav-3-main {
width: 100%;
margin-top: 0;
border-radius: 0;
height: 70px;
box-shadow: none;
border-color: transparent;
}
nav.nav-3.is-compact:has(.nav-items-holder.open) .nav-3-row {
height: 70px;
}
nav .nav-3-row {
display: flex;
}
nav .nav-3-row .nav-logo-holder {
display: flex;
width: 100%;
justify-content: space-between;
z-index: 3;
}
nav .nav-3-main .nav-mobile-toggle {
display: block;
width: 30px;
height: 30px;
margin: 0 0 0 12px;
}
nav .nav-3-row .nav-items-holder {
opacity: 0;
visibility: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100vh;
min-height: 100vh;
width: 100%;
padding-top: 70px;
box-sizing: border-box;
background-color: var(--color-nav);
transition: visibility .15s, opacity .15s;
display: none;
justify-content: flex-start;
pointer-events: auto;
z-index: 1;
}
nav .nav-3-row .nav-items-holder.open {
opacity: 1;
visibility: visible;
display: block;
overflow-y: auto;
}
nav .nav-3-main ul.nav-3-links {
position: static;
left: auto;
top: auto;
transform: none;
display: block;
}
nav .nav-3-main ul.nav-3-tools {
display: block;
justify-content: flex-start;
margin-top: 10px;
}
nav .nav-3-main ul.nav-items {
margin-top: 30px;
text-align: left;
padding-left: 2.25rem;
padding-right: 2.25rem;
}
nav .nav-3-main ul.nav-items .nav-item {
display: block;
line-height: 30px;
margin-bottom: 0.6rem;
}
nav .nav-3-main ul.nav-items .nav-item:last-child {
margin-bottom: 0;
}
nav .nav-3-main ul.nav-items li.nav-item .nav-sub {
position: relative;
opacity: 1;
visibility: visible;
top: 0;
left: 0;
transform: none !important;
background-color: var(--color-nav);
border: none;
box-shadow: none;
max-height: 0;
overflow: hidden;
padding: 0 0 0 1rem;
margin: 0;
transition: max-height 0.25s ease-out;
}
nav .nav-3-main ul.nav-items li.nav-item.nav-item--open .nav-sub {
max-height: 400px;
}
nav .nav-3-main ul.nav-items li.nav-item.nav-item--open > a svg {
transform: rotate(180deg);
}
nav .nav-3-main ul.nav-items li.nav-item > a svg {
transition: transform 0.2s ease;
}
nav .nav-3-main ul.nav-items li.nav-item .nav-sub .nav-sub-item {
color: var(--color-nav-text);
padding-left: 0.5rem;
}
}
.col-shadow {
box-shadow: 0px 5px 10px #00000026;
}
.element-background-image {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.img-aspect-4-3 {
aspect-ratio: 4 / 3;
overflow: hidden;
}
.img-aspect-3-4 {
aspect-ratio: 3 / 4;
overflow: hidden;
}
.img-aspect-16-9 {
aspect-ratio: 16 / 9;
overflow: hidden;
}
.img-aspect-1-1 {
aspect-ratio: 1 / 1;
overflow: hidden;
}
.img-aspect-4-3 img, .img-aspect-3-4 img, .img-aspect-16-9 img, .img-aspect-1-1 img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.image-fit-holder--1-1 {
position: relative;
width: 100%;
height: 0;
padding: 100%;
}
.image-fit-holder--md {
position: relative;
width: 100%;
height: 100%;
}
.image-fit-holder--md > img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
}
@media screen and (max-width: 768px) {
.image-fit-holder--md {
width: 100%;
height: auto;
padding-bottom: 66.66%;
}
}
.image-fit-holder--lg {
position: relative;
width: 100%;
height: 100%;
}
.image-fit-holder--lg > img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
}
@media screen and (max-width: 992px) {
.image-fit-holder--lg {
width: 100%;
height: auto;
padding-bottom: 66.66%;
}
}
.image-border-radius-medium {
border-radius: 30px;
overflow: hidden;
}
.image-border-radius-rounded {
border-radius: 50%;
overflow: hidden;
}
.image-border-radius {
border-radius: 10px;
overflow: hidden;
}
.video-poster {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: #111;
}
.video-poster video {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
background: #111;
}
.video-poster__play {
position: absolute;
inset: 0;
margin: auto;
width: 64px;
height: 64px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
color: #111;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 2;
}
.video-poster__play svg {
width: 22px;
height: 22px;
margin-left: 3px;
display: block;
}
.video-poster__play[hidden],
.video-poster.is-playing .video-poster__play {
display: none;
}
.video-banner {
position: relative;
overflow: hidden;
}
.video-banner > .overlay,
.video-banner > .z-index--2 {
pointer-events: none;
}
.video-banner > .overlay {
z-index: 1;
}
.video-banner > .z-index--2 a,
.video-banner > .z-index--2 button,
.video-banner > .z-index--2 [data-pb-layout-editor-text] {
pointer-events: auto;
}
.video-banner > .video-container-full {
pointer-events: none;
}
.video-banner > .video-container-full[data-pb-layout-editor-image] {
pointer-events: auto;
}
@media screen and (min-width: 576px) {
.image-border-radius--sm {
border-radius: 10px;
overflow: hidden;
}
}
@media screen and (min-width: 768px) {
.image-border-radius--md {
border-radius: 10px;
overflow: hidden;
}
}
@media screen and (min-width: 992px) {
.image-border-radius--lg {
border-radius: 10px;
overflow: hidden;
}
}
@media screen and (min-width: 992px) {
.image-border-radius-right--lg {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
overflow: hidden;
}
.image-border-radius-left--lg {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
overflow: hidden;
}
.image-border-radius-bottom--lg {
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
overflow: hidden;
}
.image-border-radius-top--lg {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
overflow: hidden;
}
}
.link {
display: inline-block;
text-decoration: none;
}
.link-button {
padding: .6rem 2.6rem;
background-color: var(--color-button-primary);
line-height: 1.5rem;
font-size: 1rem;
border-radius: var(--button-radius);
font-family: var(--font-family-header);
font-weight: var(--button-weight);
color: var(--color-button-primary-text);
transition: filter .3s;
}
.link-button:hover {
filter: brightness(0.90);
}
.link-button-primary {
padding: .6rem 2.6rem;
background-color: var(--color-button-primary);
line-height: 1.5rem;
font-size: 1rem;
border-radius: var(--button-radius);
font-family: var(--font-family-text);
font-weight: var(--button-weight);
color: var(--color-button-primary-text);
transition: filter .3s;
}
.link-button-secondary {
padding: .6rem 2.6rem;
background-color: #fff;
line-height: 1.5rem;
font-size: 1rem;
border-radius: var(--button-radius);
font-family: var(--font-family-text);
font-weight: var(--button-weight);
color: var(--color-text-dark);
transition: filter .3s;
}
.link-button-outline-primary {
padding: calc(.6rem - 2px) calc(2.6rem - 2px);
border: 2px solid;
border-color: var(--color-button-primary);
line-height: 1.5rem;
font-size: 1rem;
border-radius: var(--button-radius);
font-family: var(--font-family-text);
font-weight: var(--button-weight);
color: var(--color-button-primary);
transition: background-color .3s, color .3s, filter .3s;
}
.link-button-outline-secondary {
padding: calc(.6rem - 2px) calc(2.6rem - 2px);
border: 2px solid;
border-color: var(--color-secondary);
line-height: 1.5rem;
font-size: 1rem;
border-radius: var(--button-radius);
font-family: var(--font-family-text);
font-weight: var(--button-weight);
color: var(--color-secondary);
transition: background-color .3s, color .3s, filter .3s;
}
.link-button-secondary:hover, .link-button-primary:hover {
filter: brightness(0.80);
cursor: pointer;
}
.link-button-outline-primary:hover {
cursor: pointer;
background-color: var(--color-button-primary);
color: var(--color-button-primary-text);
}
.link-button-outline-secondary:hover {
cursor: pointer;
background-color: #fff;
color: var(--color-text-dark);
}
[data-button-style="compact"] .link-button,
[data-button-style="compact"] .link-button-primary,
[data-button-style="compact"] .link-button-secondary {
padding: .4rem 1.4rem;
font-size: .875rem;
line-height: 1.25rem;
}
[data-button-style="compact"] .link-button-outline-primary,
[data-button-style="compact"] .link-button-outline-secondary {
padding: calc(.4rem - 2px) calc(1.4rem - 2px);
font-size: .875rem;
line-height: 1.25rem;
}
.link-button-underline,
.link-button-underline-dark,
.link-button-underline-light {
position: relative;
display: inline-block;
padding: 0 0 .45rem;
background: none;
border: 0;
border-radius: 0;
line-height: 1.5rem;
font-size: 1rem;
font-family: var(--font-family-text);
font-weight: var(--button-weight);
color: var(--color-dark);
text-decoration: none;
}
.link-button-underline-light {
color: var(--color-light);
}
.link-button-underline::after,
.link-button-underline-dark::after,
.link-button-underline-light::after {
content: '';
position: absolute;
left: -.15em;
bottom: .1rem;
width: calc(100% + .7em);
height: 2px;
background: var(--color-button-primary);
pointer-events: none;
}
.link-button-underline:hover,
.link-button-underline-dark:hover,
.link-button-underline-light:hover {
background: none;
filter: none;
cursor: pointer;
}
.link-button-text {
background: none;
position: relative;
font-family: var(--font-family-header);
font-weight: var(--button-weight);
color: var(--color-button-primary);
}
.link-button-text:after {
color: var(--color-button-primary);
border-right: 2px solid var(--color-button-primary);
border-bottom: 2px solid var(--color-button-primary);
content: '';
position: absolute;
width: 10px;
height: 10px;
top: calc(50% - 6px);
right: 5px;
transform: rotate(-45deg);
}
.link-button-text-secondary {
background: none;
position: relative;
font-family: var(--font-family-header);
font-weight: var(--button-weight);
color: #fff;
}
.link-button-text-secondary:after {
color: #fff;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
content: '';
position: absolute;
width: 10px;
height: 10px;
top: calc(50% - 6px);
right: 5px;
transform: rotate(-45deg);
}
.link-standard {
text-decoration: underline;
}
.link-submit {
padding: .6rem 2.6rem;
background-color: var(--color-button-primary);
line-height: 1.5rem;
font-size: 1rem;
border-radius: var(--button-radius);
font-family: var(--font-family-header);
font-weight: var(--button-weight);
color: var(--color-button-primary-text);
border: none;
cursor: pointer;
width: 100%;
display: block;
text-align: center;
box-sizing: border-box;
}
/** COMPONENTS **/
.price-table-box {
border-radius: 5px;
overflow: hidden;
}
.box-circle-60 {
width: 60px;
height: 60px;
border-radius: 30px;
}
.box-circle-60 > p {
line-height: 60px;
}
.box-circle-100 {
width: 100px;
height: 100px;
border-radius: 50px;
}
.box-circle-100 > p {
line-height: 100px;
}
ul.list-checks {
list-style: none;
}
ul.list-checks li {
margin: 5px 0px;
}
ul.list-checks li:before {
content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAABmJLR0QA/wD/AP+gvaeTAAAA0klEQVQoka3SO04DMRgE4E8bkXQ0UYSgoeQEFHlQk81JCBdA4lpUeZwgfZLtqMkRkJAo7CjW4t0gwTS2//F4/D/4AzotXA9X+MTXbx98wAof2MV1ick54TP2eEQRYwWmMT5vc9yj38D3Iz/OkevomMMtLlBiUSd7Qm5FncAd3nEvFPiAbnrhBtu4H+ANl4mwTO7ucN3m/IpNRph1JrRnmpxfakKYyeRM6GOlvdoVRg28udCO0mn6OtGxwlOT8Ihx/NrBacIWGJ4TpugKVf1RnH/BN9mvJosPgCnTAAAAAElFTkSuQmCC');
margin-right: 10px;
}
.card {
width: 100%;
position: relative;
overflow: hidden;
}
.card-round {
border-radius: 10px;
}
.card-round--large {
border-radius: 20px;
}
.card.card-1-1 {
padding-top: 100%;
}
.card.card-1-2 {
padding-top: 50%;
}
.card.card-2-3 {
padding-top: 66%;
}
.card.card-3-4 {
padding-top: 75%;
}
.card.card-2-1 {
padding-top: 200%;
}
.card.card-3-2 {
padding-top: 150%;
}
.card.card-4-3 {
padding-top: 133%;
}
.card.card-1-1 .card-body,
.card.card-1-2 .card-body,
.card.card-2-3 .card-body,
.card.card-3-4 .card-body,
.card.card-2-1 .card-body,
.card.card-3-2 .card-body,
.card.card-4-3 .card-body {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 10px;
text-align: center;
}
.card.card-1-1 .card-body.card-align-left,
.card.card-1-2 .card-body.card-align-left,
.card.card-2-3 .card-body.card-align-left,
.card.card-3-4 .card-body.card-align-left,
.card.card-2-1 .card-body.card-align-left,
.card.card-3-2 .card-body.card-align-left,
.card.card-4-3 .card-body.card-align-left {
align-items: baseline;
justify-content: end;
text-align: left;
}
.card.card-1-1 .card-body.card-align-top,
.card.card-1-2 .card-body.card-align-top,
.card.card-2-3 .card-body.card-align-top,
.card.card-3-4 .card-body.card-align-top,
.card.card-2-1 .card-body.card-align-top,
.card.card-3-2 .card-body.card-align-top,
.card.card-4-3 .card-body.card-align-top {
align-items: baseline;
justify-content: start;
text-align: left;
}
.card.card-1-1 .card-body::before,
.card.card-1-2 .card-body::before,
.card.card-2-3 .card-body::before,
.card.card-3-4 .card-body::before,
.card.card-2-1 .card-body::before,
.card.card-3-2 .card-body::before,
.card.card-4-3 .card-body::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #00000040;
z-index: 1;
}
.card.card-1-1 .card-body.overlay-none::before,
.card.card-1-2 .card-body.overlay-none::before,
.card.card-2-3 .card-body.overlay-none::before,
.card.card-3-4 .card-body.overlay-none::before,
.card.card-2-1 .card-body.overlay-none::before,
.card.card-3-2 .card-body.overlay-none::before,
.card.card-4-3 .card-body.overlay-none::before {
background-color: unset;
}
.card.card-1-1 .card-body > *,
.card.card-1-2 .card-body > *,
.card.card-2-3 .card-body > *,
.card.card-3-4 .card-body > *,
.card.card-2-1 .card-body > *,
.card.card-3-2 .card-body > *,
.card.card-4-3 .card-body > * {
position: relative;
z-index: 2;
}
/*
.card {
display: block;
overflow: hidden;
}
*/
.card-animate {
transition: transform .15s;
position: relative;
cursor: pointer;
}
.card-animate:hover{
transform: scale(1.02);
}
.card-overflow {
overflow: hidden;
}
.card-content {
padding: 20px;
}
.card-content--large {
padding: 40px;
}
.content-card {
border-radius: 20px;
background-color: #fff;
overflow: hidden;
}
.news-list-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.news-list-header h1 {
margin: 0;
}
.news-list-filter {
margin-left: auto;
min-width: 180px;
}
.news-list-filter .form-input--select {
width: 100%;
background: #fff;
}
.news-list-holder {
border-radius: 20px;
transition: background-color .15s;
color: inherit;
text-decoration: none;
}
.news-list-holder:hover {
background-color: #00000005;
color: inherit;
text-decoration: none;
}
.news-list-thumbnail {
width: 100%;
height: 0;
padding-bottom: 66%;
position: relative;
overflow: hidden;
border-radius: 20px;
}
.news-list-thumbnail > img {
width: 100%;
height: 100%;
position: absolute;
object-fit: cover;
transition: transform .15s;
}
.news-list-holder:hover .news-list-thumbnail > img {
transform: scale(1.05);
}
.news-list-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.news-list-tag {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 999px;
background: #00000008;
font-size: 13px;
line-height: 1.2;
}
.places-finder {
display: grid;
grid-template-columns: minmax(280px, 420px) 1fr;
grid-template-areas: "list map";
min-height: calc(100vh - 70px);
height: calc(100vh - 70px);
background: #fff;
}
.places-finder__list {
grid-area: list;
display: flex;
flex-direction: column;
min-height: 0;
border-right: 1px solid #00000012;
overflow: hidden;
}
.places-finder__header {
padding: 28px 24px 16px;
flex: 0 0 auto;
}
.places-finder__header h1 {
margin: 0 0 16px;
}
.places-finder__filters {
display: grid;
gap: 8px;
}
.places-finder__count {
margin: 12px 0 0;
font-size: .8rem;
line-height: 1rem;
color: var(--color-dark);
opacity: .7;
}
.places-finder__items {
flex: 1 1 auto;
overflow-y: auto;
padding: 0 12px 24px;
}
.places-finder__empty {
margin: 12px 12px 0;
color: var(--color-dark);
opacity: .7;
}
.places-list-item {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
width: 100%;
margin: 0 0 4px;
padding: 14px 12px;
border: 0;
border-radius: 16px;
background: transparent;
color: inherit;
text-align: left;
cursor: pointer;
font: inherit;
}
.places-list-item:hover,
.places-list-item.is-active {
background: #00000008;
}
.places-list-item[hidden] {
display: none;
}
.places-list-item__title {
font-size: 1.05rem;
line-height: 1.35rem;
font-weight: 700;
color: var(--color-dark);
}
.places-list-item__tag {
display: inline-flex;
align-items: center;
padding: 3px 9px;
border-radius: 999px;
background: #00000008;
font-size: 12px;
line-height: 1.2;
color: var(--color-dark);
}
.places-list-item__meta {
font-size: .8rem;
line-height: 1.15rem;
color: var(--color-dark);
opacity: .75;
}
.places-finder__map {
grid-area: map;
height: 100%;
min-height: 320px;
position: relative;
z-index: 1;
}
.places-map {
width: 100%;
height: 100%;
min-height: 320px;
}
.places-map .leaflet-pane,
.places-map .leaflet-top,
.places-map .leaflet-bottom {
z-index: 1;
}
.places-popup__title {
font-weight: 700;
margin: 0 0 4px;
}
.places-popup__meta,
.places-popup__hours {
margin: 0 0 4px;
font-size: .85rem;
line-height: 1.25rem;
}
.leaflet-popup-content p {
margin: 0 0 4px;
}
@media (max-width: 991px) {
.places-finder {
grid-template-columns: 1fr;
grid-template-areas:
"map"
"list";
height: auto;
min-height: calc(100vh - 70px);
}
.places-finder__map,
.places-map {
height: 42vh;
min-height: 260px;
}
.places-finder__list {
border-right: 0;
border-top: 1px solid #00000012;
overflow: visible;
}
.places-finder__items {
overflow: visible;
}
}
.news-socials {
position: fixed;
top: 80px;
padding: 20px 40px;
}
.news-socials-title {
font-size: var(--h2-size);
color: var(--color-primary);
}
.news-socials-icon {
border-radius: 25px;
border: 1px solid var(--color-primary);
width: 30px;
height: 30px;
fill: var(--color-primary);
margin: 20px 0px;
opacity: .5;
transition: opacity .15s;
cursor: pointer;
}
.news-socials-icon:hover {
opacity: .8;
}
.news-socials-icon > svg {
width: 22px;
height: 22px;
margin: 4px;
}
@media screen and (max-width: 768px) {
.news-socials {
position: inherit;
}
.news-socials-icon {
display: inline-block;
margin: 20px 20px;
}
}
/* FAQ */
.faq-item {
width: 100%;
border-radius: 20px;
background-color: #FAFAFA;
padding: 20px;
margin-bottom: 10px;
}
.faq-item-simple {
width: 100%;
padding: 20px;
margin-bottom: 10px;
}
.faq-item-simple:first-child {
border-top: 1px solid #9e9e9e;
border-bottom: 1px solid #9e9e9e;
}
.faq-item-simple:not(:first-child) {
border-bottom: 1px solid #9e9e9e;
border-top: none;
}
.faq-title-box {
position: relative;
cursor: pointer;
}
.faq-title {
font-family: var(--font-family-header);
font-size: 1.2rem;
margin: 0;
width: calc(100% - 30px);
}
.faq-title-box::after {
content: ' ';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 20px; /* Öka storleken */
height: 20px; /* Öka storleken */
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-image: url('data:image/svg+xml;utf8,');
transition: transform 0.3s;
}
.faq-title-box.active::after {
background-image: url('data:image/svg+xml;utf8,');
transform: translateY(-50%) rotate(180deg);
}
.faq-content {
margin-top: 20px;
display: none;
}
.search-results {
width: 100%;
display: block;
padding: 1.5rem 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
text-decoration: none;
color: var(--color-dark);
}
.search-results p {
margin: 0;
}
.search-results:hover {
opacity: 0.7;
}
.icon-holder > svg {
width: 100%;
height: 100%;
}
.icon-holder--md > svg {
width: 50px;
height: 50px;
}
/** COLORS **/
.color-primary {
color: var(--color-primary);
}
.color-secondary {
color: var(--color-secondary);
}
.color-white {
color: #fff;
}
.background-color-primary {
background-color: var(--color-primary);
}
.background-color-secondary {
background-color: var(--color-secondary);
}
.background-color-white {
background-color: #fff;
}
/** Form **/
.form-col {
}
.form-label {
display: block;
width: 100%;
margin: .6rem .6rem;
}
.form-label { font-size: var(--font-size); font-family: var(--font-family-text), sans-serif; line-height: var(--line-height); color: var(--color-dark); }
.form-input {
display: block;
width: 100%;
font-size: calc(var(--font-size) - 0px); font-family: var(--font-family-text), sans-serif; line-height: var(--line-height); color: var(--color-dark);
}
.form-input--text {
padding: .6rem .8rem;
border-radius: 10px;
border: 1px solid #9E9E9E;
box-sizing: border-box;
}
.form-input--text:focus {
border-color: var(--color-primary);
outline: none;
}
.form-input--select {
padding: .6rem .6rem;
border-radius: 20px;
border: 1px solid #9E9E9E;
}
.form-input--select:focus {
border-color: var(--color-primary);
outline: none;
}
.form-input--textarea {
height: 100px;
padding: .6rem .6rem;
border-radius: 10px;
border: 1px solid #9E9E9E;
resize: none;
box-sizing: border-box;
}
.form-input--textarea:focus {
border-color: var(--color-primary);
outline: none;
}
.form-checkbox {
margin: .6rem .6rem;
}
/** Nyhetsbrev (modulen newsletter-1) — teman justerar via --nl-* i theme.css **/
.pb-newsletter {
--nl-radius: 10px;
--nl-border: #9E9E9E;
--nl-bg: #fff;
--nl-ink: var(--color-dark);
--nl-gap: 10px;
--nl-height: 3rem;
position: relative;
max-width: 560px;
margin: 0 auto;
}
.pb-newsletter__row { display: flex; flex-wrap: wrap; gap: var(--nl-gap); }
.pb-newsletter__input {
flex: 1 1 200px;
min-width: 0;
height: var(--nl-height);
padding: 0 1rem;
border: 1px solid var(--nl-border);
border-radius: var(--nl-radius);
background: var(--nl-bg);
box-sizing: border-box;
font-size: var(--font-size); font-family: var(--font-family-text), sans-serif; color: var(--nl-ink);
transition: border-color .2s, box-shadow .2s;
}
.pb-newsletter__input::placeholder { color: color-mix(in srgb, var(--nl-ink) 55%, transparent); }
.pb-newsletter__input:focus {
border-color: var(--color-primary);
outline: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.pb-newsletter__button {
flex: 0 0 auto;
min-height: var(--nl-height);
border: 0;
cursor: pointer;
white-space: nowrap;
}
.pb-newsletter__row:has(input[name="name"]) .pb-newsletter__button { flex: 1 1 100%; }
.pb-newsletter__consent {
display: flex;
gap: .6rem;
align-items: flex-start;
justify-content: center;
margin-top: .9rem;
text-align: left;
cursor: pointer;
font-size: .875rem; font-family: var(--font-family-text), sans-serif; line-height: 1.45; color: var(--nl-ink);
}
.pb-newsletter__consent input { flex: 0 0 auto; width: 1rem; height: 1rem; margin: .15rem 0 0; accent-color: var(--color-primary); }
.pb-newsletter__consent span { opacity: .8; }
.pb-newsletter__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pb-newsletter__status { margin: .9rem 0 0; text-align: center; font-size: .95rem; font-family: var(--font-family-text), sans-serif; color: var(--nl-ink); }
.pb-newsletter__status:empty { display: none; }
.pb-newsletter__status.is-error { color: #b3261e; }
.pb-newsletter__status.is-success { font-weight: 600; font-size: 1.05rem; }
.pb-newsletter.is-sending .pb-newsletter__button { opacity: .6; pointer-events: none; }
.pb-newsletter.is-done .pb-newsletter__row,
.pb-newsletter.is-done .pb-newsletter__consent { display: none; }
.is-dark .pb-newsletter { --nl-bg: rgba(255, 255, 255, .08); --nl-border: rgba(255, 255, 255, .35); --nl-ink: var(--color-light); }
.is-dark .pb-newsletter__status.is-error { color: #ffb4ab; }
@media (max-width: 575px) {
.pb-newsletter__button { flex: 1 1 100%; }
}
.form-checkbox-field label { font-size: var(--font-size); font-family: var(--font-family-text), sans-serif; line-height: var(--line-height); color: var(--color-dark);}
.form-accept {
margin: .6rem .6rem;
}
.form-accept { font-size: var(--font-size); font-family: var(--font-family-text), sans-serif; line-height: var(--line-height); color: var(--color-dark);}
.footer {
background-color: var(--color-footer);
color: var(--color-footer-text);
}
.footer-logo {
width: 50%;
display: block;
height: auto;
}
.nav-wordmark--footer {
max-width: 100%;
font-size: 1.25rem;
line-height: 1.3;
color: var(--color-footer-text);
margin-top: 0;
}
.footer p {
color: var(--color-footer-text);
}
.footer .footer-title {
color: var(--color-footer-text);
display: block;
margin-bottom: 1.2rem;
}
.footer .footer-link {
display: block;
margin-bottom: 10px;
color: var(--color-footer-text);
opacity: .8;
transition: opacity .15s;
}
.footer .footer-link:hover {
opacity: 1;
}
.footer .footer-socials {
border-radius: 25px;
border: 1px solid var(--color-footer-text);
width: 40px;
height: 40px;
fill: var(--color-footer-text);
display: inline-block;
margin: auto 10px auto auto;
opacity: .5;
transition: opacity .15s;
}
.footer .footer-socials:hover {
opacity: .8;
}
.footer .footer-socials svg {
width: 28px;
height: 28px;
margin: 6px;
}
.footer-copyright {
opacity: .8;
}
.overlay {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
background-color: #00000066;
}
.search-box {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
background-color: #000000bf;
z-index: 10;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.25s ease, visibility 0.25s ease;
}
.search-box.open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.search-box-holder {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -46%);
display: flex;
align-items: center;
gap: 8px;
background: #fff;
padding: 8px 8px 8px 18px;
border-radius: var(--button-radius);
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
width: 420px;
max-width: calc(100% - 32px);
box-sizing: border-box;
opacity: 0;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.search-box.open .search-box-holder {
opacity: 1;
transform: translate(-50%, -50%);
}
.search-box-holder input[type="text"] {
flex: 1;
height: 40px;
width: auto;
border: none;
margin: 0;
background: transparent;
font-family: var(--font-family-text);
font-size: 1rem;
}
.search-box-holder input[type="text"]:focus {
outline: none;
}
.search-box-holder input[type="submit"] {
width: auto;
flex: 0 0 auto;
}
/* FADE – syns bara när en förälder har klassen animate */
.animate .fade-up,
.animate .fade-left,
.animate .fade-right {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) var(--fade-delay, 0s), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) var(--fade-delay, 0s);
}
.animate .delay-0-33 { --fade-delay: .33s; }
.animate .delay-0-5 { --fade-delay: .5s; }
.animate .delay-0-66 { --fade-delay: .66s; }
.animate .delay-1 { --fade-delay: 1s; }
.animate .delay-1-5 { --fade-delay: 1.5s; }
.animate .delay-2 { --fade-delay: 2s; }
.animate .fade-left {
transform: translateX(-40px);
}
.animate .fade-right {
transform: translateX(40px);
}
.animate .fade-in {
opacity: 1;
transform: translateY(0) translateX(0);
}
.animate .fade-up-hover {
opacity: 0;
transform: translateY(16px);
pointer-events: none;
transition: opacity .4s ease, transform .4s ease;
}
.animate a:hover .fade-up-hover,
.animate a:focus-within .fade-up-hover,
.animate :hover > .fade-up-hover,
.animate :focus-within > .fade-up-hover {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
html[data-pb-layout-editor-ready] .animate .fade-up,
html[data-pb-layout-editor-ready] .animate .fade-left,
html[data-pb-layout-editor-ready] .animate .fade-right,
html[data-pb-layout-editor-ready] .animate .fade-up-hover {
opacity: 1;
transform: none;
pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
.animate .fade-up,
.animate .fade-left,
.animate .fade-right,
.animate .fade-up-hover {
opacity: 1;
transform: none;
pointer-events: auto;
transition: none;
}
}
.carusel {
display: flex;
width: 100%;
box-sizing: border-box;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
/* gap: 1rem; */
padding-bottom: 10px;
scroll-behavior: smooth;
padding-left: 1rem;
padding-right: 1rem;
scrollbar-width: none;
-ms-overflow-style: none;
}
.carusel::-webkit-scrollbar {
display: none;
}
/* Standard container - centrerad, overflow hidden */
.carusel-container {
width: 100%;
max-width: 100%;
margin: 0 auto;
overflow: hidden;
position: relative;
}
/* Viewport runt tracken – scrollar inte, fade sitter fast i kanterna */
.carusel-viewport {
overflow: hidden;
position: relative;
}
/* Fade vänster kant – fast i vänster kant av viewport */
.carusel-container-fade .carusel-viewport::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 48px;
height: calc(100% - 10px);
background: linear-gradient(to right, rgba(255, 255, 255, 0.95), transparent);
pointer-events: none;
opacity: 0;
transition: opacity 0.3s;
z-index: 2;
}
.carusel-container-fade.has-more-left .carusel-viewport::before {
opacity: 1;
}
/* Fade höger kant – fast i höger kant av viewport */
.carusel-container-fade .carusel-viewport::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 48px;
height: calc(100% - 10px);
background: linear-gradient(to left, rgba(255, 255, 255, 0.95), transparent);
pointer-events: none;
opacity: 0;
transition: opacity 0.3s;
z-index: 2;
}
.carusel-container-fade.has-more-right .carusel-viewport::after {
opacity: 1;
}
/* Variant: Låt items gå utanför containern (för när carousel är i Bootstrap container) */
.carusel-container-overflow {
overflow: visible;
position: relative;
}
.carusel-container-overflow .carusel {
margin-left: -1rem;
margin-right: -1rem;
padding-left: 1rem;
padding-right: 1rem;
}
/* Variant: Overflow hidden (explicit för bildspel) */
.carusel-container-hidden {
overflow: hidden;
position: relative;
}
.carusel-info {
flex-shrink: 0;
scroll-snap-align: start;
padding: 1rem;
min-height: 120px;
}
.carusel-info img {
transition: transform .15s;
}
.carusel-info a:hover img {
transform: scale(1.05);
}
/* Breddkontroll - används om items ska ha fast bredd */
.carusel.width-25 .carusel-info { width: 25%; }
.carusel.width-33 .carusel-info { width: 33.3333%; }
.carusel.width-50 .carusel-info { width: 50%; }
.carusel.width-75 .carusel-info { width: 75%; }
.carusel.width-100 .carusel-info { width: 100%; }
@media (max-width: 768px) {
.carusel.width-25 .carusel-info,
.carusel.width-33 .carusel-info,
.carusel.width-50 .carusel-info,
.carusel.width-75 .carusel-info {
width: 90%;
}
.carusel.width-100 .carusel-info {
width: 100%;
}
}
/* Fullslide: viewport och slides fyller utrymmet, en slide i taget */
.carusel-viewport-fullslide {
width: 100%;
aspect-ratio: 4 / 3;
min-height: 280px;
}
.carusel-viewport-fullslide > div,
.carusel-viewport-fullslide .carusel {
height: 100%;
}
.carusel-container-fullslide .carusel {
padding-left: 0;
padding-right: 0;
gap: 0;
}
.carusel-container-fullslide .carusel-info {
padding: 0;
min-height: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.carusel-container-fullslide .carusel-info .carusel-slide-img,
.carusel-container-fullslide .carusel-info img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.carusel-buttons {
text-align: center;
margin-top: 1rem;
}
.carusel-buttons button {
margin: 0 0.5rem;
background-color: var(--color-button-primary);
}
.carusel-buttons button > svg {
fill: var(--color-button-primary-text);;
}
.carusel-buttons button:disabled {
margin: 0 0.5rem;
opacity: 0.1;
}
.carusel-buttons button > svg {
fill: var(--color-button-primary-text);;
}
.media-gallery-slideshow {
display: flex;
align-items: stretch;
gap: 16px;
}
.media-gallery-slideshow__stage {
flex: 1 1 auto;
min-width: 0;
}
.media-gallery-slideshow .carusel-viewport-fullslide {
aspect-ratio: auto;
height: 650px;
min-height: 0;
max-height: 650px;
}
.media-gallery-slideshow .carusel-container-fullslide .carusel-info .carusel-slide-img,
.media-gallery-slideshow .carusel-container-fullslide .carusel-info img {
width: 100%;
height: 100%;
object-fit: contain;
}
.media-gallery-slideshow__thumbs {
flex: 0 0 112px;
max-height: 650px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 8px;
}
.media-gallery-slideshow__thumbs button {
display: block;
width: 100%;
padding: 0;
border: 2px solid transparent;
background: transparent;
cursor: pointer;
opacity: 0.65;
}
.media-gallery-slideshow__thumbs button:hover,
.media-gallery-slideshow__thumbs button.is-active {
opacity: 1;
border-color: var(--color-primary);
}
.media-gallery-slideshow__thumbs img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
display: block;
}
@media (max-width: 768px) {
.media-gallery-slideshow {
flex-direction: column;
}
.media-gallery-slideshow .carusel-viewport-fullslide {
height: min(650px, 70vh);
max-height: 650px;
}
.media-gallery-slideshow__thumbs {
flex: none;
flex-direction: row;
max-height: none;
overflow-x: auto;
overflow-y: hidden;
}
.media-gallery-slideshow__thumbs button {
flex: 0 0 72px;
width: 72px;
}
}
.w-100 {
width: 100% !important;
}
.h-100 {
height: 100% !important;
}
.vh-100 {
height: 100vh !important;
}
.p-absolute {
position: absolute !important;
}
.object-fit__cover {
object-fit: cover;
}
.p-relative {
position: relative !important;
}
.z-index--1 {
z-index: 1;
}
.z-index--2 {
z-index: 2;
}
div[data-type="buttons"] > a:last-child {
margin-right: 0px !important;
}
.mosaic {
display: grid;
gap: 12px;
height: 680px;
}
.mosaic .element-background-image {
position: relative;
display: flex;
align-items: flex-end;
flex: 1;
width: 100%;
height: 100%;
min-height: 0;
overflow: hidden;
border-radius: 10px;
}
.mosaic-cap {
position: relative;
z-index: 1;
width: 100%;
padding: 14px 22px 16px;
}
.overlay-gradient {
background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}
.mosaic-spread {
grid-template-columns: 1.4fr 1fr;
grid-template-rows: 1fr 1fr;
}
.mosaic-spread > :first-child {
grid-row: 1 / span 2;
}
.mosaic-band {
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1.15fr 1fr;
}
.mosaic-band > :first-child {
grid-column: 1 / -1;
}
.mosaic-bento {
grid-template-columns: 1.15fr 0.9fr 1fr;
grid-template-rows: 1fr 1fr;
}
.mosaic-bento > :nth-child(1) {
grid-row: 1 / span 2;
}
.mosaic-bento > :nth-child(4) {
grid-column: 2 / span 2;
}
.mosaic > a {
display: flex;
height: 100%;
min-height: 0;
min-width: 0;
}
@media (max-width: 767px) {
.mosaic-spread,
.mosaic-band,
.mosaic-bento {
grid-template-columns: 1fr;
grid-template-rows: none;
height: auto;
}
.mosaic-spread > :first-child,
.mosaic-band > :first-child,
.mosaic-bento > :nth-child(1),
.mosaic-bento > :nth-child(4) {
grid-column: auto;
grid-row: auto;
}
.mosaic .element-background-image {
aspect-ratio: 4 / 3;
height: auto;
}
.mosaic-spread > a:first-child .element-background-image,
.mosaic-band > a:first-child .element-background-image,
.mosaic-bento > a:nth-child(1) .element-background-image {
aspect-ratio: 3 / 4;
}
}
/* Icon slot used by icon modules ([icon] inside .pb-icon). Follows the primary colour. */
.pb-icon { width: 44px; height: 44px; color: var(--color-primary); }
.pb-icon--center { margin-left: auto; margin-right: auto; }
.pb-icon > div { height: 100%; }
.pb-icon svg { display: block; width: 100% !important; height: 100% !important; fill: currentColor; }
/* Galleri i mosaik ([gallery type='mosaic']). Grupper om sex bilder fyller rutnätet
helt (4 × 3 rutor på dator, 2 × 4 på mobil); färre än sex visas i en jämn rad.
Temat ger formerna, detta är grunden. */
.media-gallery-mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 170px; gap: 10px; }
.media-gallery-mosaic__item { margin: 0; overflow: hidden; border-radius: 10px; background: rgba(0, 0, 0, .04); }
.media-gallery-mosaic__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-gallery-mosaic[data-pattern="1"] .media-gallery-mosaic__item:nth-child(6n+1) { grid-column: span 2; }
.media-gallery-mosaic[data-pattern="1"] .media-gallery-mosaic__item:nth-child(6n+4) { grid-row: span 2; }
.media-gallery-mosaic[data-pattern="0"] { grid-auto-rows: 240px; }
@media (min-width: 768px) {
.media-gallery-mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 210px; grid-auto-flow: dense; gap: 12px; }
.media-gallery-mosaic[data-pattern="1"] .media-gallery-mosaic__item:nth-child(6n+1) { grid-column: span 2; grid-row: span 2; }
.media-gallery-mosaic[data-pattern="1"] .media-gallery-mosaic__item:nth-child(6n+3),
.media-gallery-mosaic[data-pattern="1"] .media-gallery-mosaic__item:nth-child(6n+4) { grid-row: span 2; }
.media-gallery-mosaic[data-pattern="1"] .media-gallery-mosaic__item:nth-child(6n+5) { grid-column: span 2; }
.media-gallery-mosaic[data-pattern="0"] { grid-template-columns: repeat(var(--mosaic-columns, 3), minmax(0, 1fr)); grid-auto-rows: 280px; }
}
/* =========================================================================
Meny (appen Meny) – modulen "Meny från appen" i alla teman.
Grunden ligger här; Bistro och Robust lägger till sin egen ton i theme.css.
========================================================================= */
.pb-menu { --pb-menu-line: color-mix(in srgb, currentColor 22%, transparent); }
.pb-menu-section + .pb-menu-section { margin-top: 3.5rem; }
.pb-menu-section__title { margin: 0 0 .5rem; text-align: center; }
.pb-menu-section__desc { margin: 0 auto 1.75rem; max-width: 560px; opacity: .72; }
.pb-menu-section__title + .pb-menu__grid,
.pb-menu-section__title + .bi-menu { margin-top: 1.75rem; }
.pb-menu__grid { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 64px; row-gap: 22px; }
@media (min-width: 992px) { .pb-menu__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pb-menu__line { display: flex; align-items: baseline; gap: 10px; }
.pb-menu__name { margin: 0; font-size: 1.1rem; font-weight: 600; line-height: 1.3; }
.pb-menu__dots { flex: 1 1 24px; min-width: 24px; border-bottom: 1px dashed var(--pb-menu-line); transform: translateY(-5px); }
.pb-menu__price { margin: 0; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.pb-menu__desc { margin: 4px 0 0; font-size: .95rem; line-height: 1.45; opacity: .72; }
.pb-menu__labels { display: inline-flex; flex: none; gap: 3px; align-self: center; }
.pb-menu__labels abbr { text-decoration: none; cursor: help; font-size: .62rem; font-weight: 700; line-height: 1; letter-spacing: .03em; padding: 3px 5px; border: 1px solid currentColor; border-radius: 4px; opacity: .6; }
.pb-menu__note { margin: 2.5rem 0 0; font-size: .92rem; opacity: .75; }
.pb-menu__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin: 1.25rem 0 0; font-size: .85rem; opacity: .7; }
.pb-menu__legend b { font-weight: 700; margin-right: 4px; }
.pb-menu__note + .pb-menu__legend { margin-top: .75rem; }
/* Natural: mjuka kort och etikett som rubrik */
.page-element[data-theme="natural"] .pb-menu-section__title { display: table; margin: 0 auto .75rem; padding: .45rem 1.1rem; border-radius: 99px; background: color-mix(in srgb, var(--color-primary) 10%, transparent); color: var(--color-primary); font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.page-element[data-theme="natural"] .pb-menu__grid { row-gap: 16px; column-gap: 16px; }
.page-element[data-theme="natural"] .pb-menu__dish { padding: 20px 22px; border-radius: 18px; background: color-mix(in srgb, var(--color-primary) 5%, transparent); }
.page-element[data-theme="natural"] .pb-menu__dots { border: 0; }
.page-element[data-theme="natural"] .pb-menu__price { color: var(--color-primary); }
.page-element[data-theme="natural"] .is-dark .pb-menu__price,
.page-element[data-theme="natural"] .is-dark .pb-menu-section__title { color: inherit; }
/* Standard: rent med hårfina linjer */
.page-element[data-theme="standard"] .pb-menu-section__title { text-align: left; padding-bottom: .75rem; border-bottom: 1px solid var(--pb-menu-line); }
.page-element[data-theme="standard"] .pb-menu-section__desc { margin-left: 0; text-align: left !important; }
.page-element[data-theme="standard"] .pb-menu__dots { border: 0; }
/* ===== Bildkarusell, bildspel, omdömen, siffror och diagram (Natural-familjen) =====
Grundutseende; Robust, Bistro och Byrå ger formerna i sina theme.css. */
.pb-slider .carusel, .pb-quotes .carusel { padding-left: 0; padding-right: 0; }
.pb-slider .carusel-info, .pb-quotes .carusel-info { padding: 0 10px; }
.pb-slide-card__image { border-radius: 10px; overflow: hidden; }
.pb-slide-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-slide-card__title { margin: 16px 0 0; font-size: 1.2rem; }
.pb-slide-card__text { margin: 6px 0 0; opacity: .75; }
.pb-slideshow .carusel-viewport-fullslide { border-radius: 10px; overflow: hidden; }
.carusel-container.pb-slideshow { width: auto; }
.pb-slideshow .carusel { padding-bottom: 0; }
.pb-slider .carusel-buttons button, .pb-quotes .carusel-buttons button, .pb-slideshow .carusel-buttons button {
display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
}
.pb-slider .carusel-buttons button:focus-visible, .pb-quotes .carusel-buttons button:focus-visible, .pb-slideshow .carusel-buttons button:focus-visible { outline: 2px solid var(--color-dark); outline-offset: 2px; }
.pb-slider .carusel-buttons, .pb-quotes .carusel-buttons { margin-top: 1.5rem; }
.pb-quote-card { margin: 0; height: 100%; padding: 32px 28px; border-radius: 10px; background: color-mix(in srgb, var(--color-primary) 6%, #fff); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.pb-quote-card blockquote { margin: 0; }
.pb-quote-card blockquote::before { content: "\201D"; display: block; height: .5em; font-family: var(--font-family-header), serif; font-size: 3.6rem; line-height: 1; color: var(--color-primary); }
.pb-quote-card__text { margin: 0; font-size: 1.08rem; line-height: 1.55; }
.pb-quote-card__name { margin: 0; font-weight: 600; }
.pb-quote-card__role { margin: 2px 0 0; opacity: .7; font-size: .95rem; }
.pb-quotes .carusel { align-items: stretch; }
.pb-stat { margin: 0 8px 32px; text-align: center; }
.pb-stat__value { margin: 0; font-size: clamp(2.4rem, 4.5vw, 3.4rem); line-height: 1; color: var(--color-primary); font-variant-numeric: tabular-nums; }
.pb-stat__label { margin: 14px 0 0; font-weight: 600; }
.pb-stat__text { margin: 6px 0 0; opacity: .75; }
.pb-bars { display: grid; gap: 22px; }
.pb-bar__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 8px; }
.pb-bar__head p { margin: 0; }
.pb-bar__value { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pb-bar__track { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--color-dark) 8%, transparent); overflow: hidden; }
.pb-bar__fill { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--color-primary); transition: width 1.1s cubic-bezier(.2, .7, .2, 1); }
.pb-bars.is-visible .pb-bar__fill { width: calc(var(--pb-value, 0) * 100%); }
.pb-bars.is-visible .pb-bar:nth-child(2) .pb-bar__fill { transition-delay: .08s; }
.pb-bars.is-visible .pb-bar:nth-child(3) .pb-bar__fill { transition-delay: .16s; }
.pb-bars.is-visible .pb-bar:nth-child(n+4) .pb-bar__fill { transition-delay: .24s; }
.pb-columns { display: flex; align-items: stretch; gap: clamp(8px, 2vw, 22px); height: 300px; }
.pb-column { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; text-align: center; }
.pb-column__value { margin: 0 0 8px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pb-column__track { flex: 1; display: flex; align-items: flex-end; border-bottom: 1px solid color-mix(in srgb, var(--color-dark) 25%, transparent); }
.pb-column__fill { display: block; width: 100%; height: 0; border-radius: 8px 8px 0 0; background: var(--color-primary); transition: height 1.1s cubic-bezier(.2, .7, .2, 1); }
.pb-columns.is-visible .pb-column__fill { height: calc(var(--pb-value, 0) * 100%); }
.pb-column:last-child .pb-column__fill { background: var(--color-button-primary); }
.pb-column__label { margin: 10px 0 0; font-size: .9rem; opacity: .75; overflow-wrap: anywhere; }
.pb-chart__source { margin: 18px 0 0; font-size: .85rem; opacity: .6; text-align: right; }
.is-dark .pb-quote-card { background: rgba(255, 255, 255, .06); }
.is-dark .pb-bar__track { background: rgba(255, 255, 255, .14); }
.is-dark .pb-column__track { border-color: rgba(255, 255, 255, .3); }
@media (max-width: 767px) { .pb-columns { height: 220px; } .pb-column__label { font-size: .78rem; } }
@media (prefers-reduced-motion: reduce) { .pb-bar__fill, .pb-column__fill { transition: none; } }
/* Mega menu (menus/_submenu.php): level 2 as column headings with level 3 links below. The panel follows the width of each menu type. */
.nav-mega__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 28px 40px; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; list-style: none; }
.nav-mega__col { min-width: 0; margin: 0; padding: 0; list-style: none; }
.nav-mega__links { margin: 0; padding: 0; list-style: none; }
nav li.nav-item .nav-mega .nav-mega__heading { display: block; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(0, 0, 0, .08); font-family: var(--font-family-header, inherit); font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--color-dark, #111); text-decoration: none; transition: color .15s; }
nav li.nav-item .nav-mega a.nav-mega__heading:hover { color: var(--color-primary); }
nav li.nav-item .nav-mega .nav-mega__links .nav-sub-item { display: block; padding: 5px 0; font-size: .95rem; line-height: 1.45; white-space: normal; color: var(--color-dark, #111); opacity: .72; background: none; transition: color .15s, opacity .15s, transform .15s; }
nav li.nav-item .nav-mega .nav-mega__links .nav-sub-item:hover { color: var(--color-primary); opacity: 1; background: none; transform: translateX(3px); }
@media screen and (min-width: 993px) {
/* The menu bar is the reference, so the panel lines up with the bar instead of the item. */
nav li.nav-item:has(> .nav-mega) { position: static; }
nav li.nav-item > .nav-sub.nav-mega {
display: flex;
align-items: flex-start;
gap: 40px;
top: 100%;
left: 50%;
width: min(1296px, calc(100vw - 48px));
max-width: none;
box-sizing: border-box;
padding: 32px 36px;
line-height: 1.5;
text-align: left;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, .06);
border-radius: 16px;
box-shadow: 0 18px 50px rgba(0, 0, 0, .12);
transform: translate(-50%, 6px);
}
nav li.nav-item:hover > .nav-sub.nav-mega,
nav li.nav-item.pb-nav-open > .nav-sub.nav-mega { transform: translate(-50%, 0); }
/* Invisible bridge so the panel stays open while the pointer moves down to it. */
nav li.nav-item > .nav-sub.nav-mega::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 16px; }
/* Helbredd: hangs from the bar, as wide as the page container. */
nav.nav-1 li.nav-item > .nav-sub.nav-mega { border-top-color: transparent; border-radius: 0 0 16px 16px; }
/* Flytande: exactly as wide as the floating bar, with the same rounding. */
nav.nav-2 li.nav-item > .nav-sub.nav-mega { left: 0; width: 100%; top: calc(100% + 8px); border-radius: 20px; transform: translateY(6px); }
nav.nav-2 li.nav-item:hover > .nav-sub.nav-mega,
nav.nav-2 li.nav-item.pb-nav-open > .nav-sub.nav-mega { transform: translateY(0); }
/* Glas: aligned with the bar's side padding. */
nav .nav-3-main li.nav-item > .nav-sub.nav-mega { top: calc(100% + 18px); width: calc(100vw - 4.5rem); max-width: 1440px; }
}
@media screen and (max-width: 992px) {
nav ul.nav-items li.nav-item.nav-item--open > .nav-sub.nav-mega { max-height: 2000px; }
.nav-mega__grid { grid-template-columns: 1fr; gap: 14px; padding: 6px 0 10px; }
nav li.nav-item .nav-mega .nav-mega__heading { margin-bottom: 4px; padding-bottom: 0; border-bottom: 0; color: var(--color-nav-text); }
nav li.nav-item .nav-mega .nav-mega__links { padding-left: .75rem; }
nav li.nav-item .nav-mega .nav-mega__links .nav-sub-item { color: var(--color-nav-text); }
}
/* ===== Valfria textfält, prisplaner och prislista (Natural-familjen) =====
optional='1' i mallen: tomt fält döljs på sajten men syns i redigeraren. */
.pb-optional:empty:not([data-pb-layout-editor-text]):not([contenteditable]) { display: none; }
.pb-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; max-width: 1120px; margin: 0 auto; align-items: stretch; }
.pb-plans:has(> :only-child) { max-width: 420px; }
.pb-plans:has(> :nth-child(2):last-child) { max-width: 780px; }
.pb-plan { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 34px 28px 30px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-dark) 12%, transparent); text-align: left; }
.pb-plan__badge { position: absolute; top: 0; left: 28px; transform: translateY(-50%); margin: 0; padding: 5px 12px; border-radius: 999px; background: var(--color-primary); color: #fff; font-size: .72rem; font-weight: 700; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.pb-plan:has(> .pb-plan__badge:not(:empty)) { box-shadow: 0 0 0 2px var(--color-primary), 0 18px 40px rgba(0, 0, 0, .08); }
.pb-plan__name { margin: 0; font-size: 1.15rem; }
.pb-plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 16px; }
.pb-plan__amount { margin: 0; font-family: var(--font-family-header), sans-serif; font-size: clamp(2rem, 3.2vw, 2.5rem); font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.pb-plan__period { margin: 0; font-size: .95rem; opacity: .65; }
.pb-plan__desc { margin: 14px 0 0; opacity: .8; }
.pb-plan__features { display: grid; gap: 10px; margin: 22px 0 0; padding: 20px 0 0; list-style: none; border-top: 1px solid color-mix(in srgb, var(--color-dark) 12%, transparent); }
.pb-plan__features li { display: flex; align-items: flex-start; gap: 10px; }
.pb-plan__features li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: .2em; background: var(--color-primary); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / contain no-repeat; }
.pb-plan__features li:has(> .pb-optional:empty:not([data-pb-layout-editor-text]):not([contenteditable])) { display: none; }
.pb-plan__features:not(:has(li > :not(:empty))):not(:has([data-pb-layout-editor-text])):not(:has([contenteditable])) { display: none; }
.pb-plan__feature { margin: 0; }
.pb-pricing-note { margin: 22px 0 0; font-size: .9rem; opacity: .7; text-align: center; }
.pb-pricelist { display: block; }
.pb-price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 18px 0; border-bottom: 1px solid color-mix(in srgb, var(--color-dark) 12%, transparent); }
.pb-price-row:first-child { border-top: 1px solid color-mix(in srgb, var(--color-dark) 12%, transparent); }
.pb-price-row__main { min-width: 0; }
.pb-price-row__name { margin: 0; font-size: 1.08rem; }
.pb-price-row__desc { margin: 4px 0 0; font-size: .95rem; opacity: .7; }
.pb-price-row__price { flex: none; margin: 0; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.is-dark .pb-plan { background: rgba(255, 255, 255, .06); box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); }
.is-dark .pb-plan__features, .is-dark .pb-price-row, .is-dark .pb-price-row:first-child { border-color: rgba(255, 255, 255, .18); }
@media (max-width: 575px) { .pb-plan { padding: 30px 22px 26px; } .pb-price-row { gap: 14px; } }
/* Natural: mjuka, tonade kort */
.page-element[data-theme="natural"] .pb-plan { border-radius: 20px; background: color-mix(in srgb, var(--color-primary) 5%, #fff); box-shadow: none; }
.page-element[data-theme="natural"] .pb-plan:has(> .pb-plan__badge:not(:empty)) { background: #fff; box-shadow: 0 0 0 2px var(--color-primary), 0 18px 40px rgba(0, 0, 0, .07); }
.page-element[data-theme="natural"] .pb-plan__features { border-top-color: color-mix(in srgb, var(--color-primary) 18%, transparent); }
.page-element[data-theme="natural"] .pb-price-row__price { color: var(--color-primary); }
.page-element[data-theme="natural"] .is-dark .pb-plan { background: rgba(255, 255, 255, .06); }
.page-element[data-theme="natural"] .is-dark .pb-price-row__price { color: inherit; }
/* pb-header.css */
/* =========================================================================
PageBase – sidhuvudena i motor 2 (docs/SITE-THEMES.md, "Menyerna 4–8").
Fem upplägg med samma HTML (admin/assets/elements/_base/layout/header-4..8.html):
.pb-header--klassisk logga vänster, menyn höger · mobil: panel från höger
.pb-header--centrerad logga i mitten, menyn på en rad under · mobil: helskärm
.pb-header--delad menyn vänster, logga i mitten, verktyg höger · mobil: panel från vänster
.pb-header--flytande en svävande list med rundade hörn · mobil: kort under listen
.pb-header--helskarm bara logga och "Meny" – menyn öppnas över hela skärmen
Filen laddas efter grunden (main.css) men före temat: temats, AI:ns och kundens CSS vinner med
samma selektor (t.ex. .pb-header__bar). Ändra utseendet med variablerna på .pb-header (färger,
höjd, avstånd, typsnitt) eller egna regler.
Logiken är låst: pb-header.js öppnar och stänger menyn (.is-open), sätter .is-scrolled och
mäter höjden till --pb-header-offset. Lägg inte transform, filter eller backdrop-filter på
.pb-header eller .pb-header__bar – då hamnar mobilpanelen fel. Glas och skuggor läggs på
.pb-header__bar::before, som är listens bakgrund.
========================================================================= */
/* Avståndet till innehållet innan pb-header.js har mätt (med toppremsa: +34 px). */
:root {
--pb-header-offset: 72px;
}
:root:has(.pb-header--centrerad) {
--pb-header-offset: 126px;
}
:root:has(.pb-header--flytande) {
--pb-header-offset: 92px;
}
:root:has(.pb-header:is(.pb-header--klassisk, .pb-header--delad) .pb-header__top) {
--pb-header-offset: 106px;
}
:root:has(.pb-header--centrerad .pb-header__top) {
--pb-header-offset: 160px;
}
@media (max-width: 992px) {
:root,
:root:has(.pb-header--centrerad),
:root:has(.pb-header .pb-header__top) {
--pb-header-offset: 64px;
}
:root:has(.pb-header--flytande) {
--pb-header-offset: 78px;
}
}
.pb-header {
--pb-header-bg: var(--color-nav, #fff);
--pb-header-text: var(--color-nav-text, #111);
--pb-header-line: color-mix(in srgb, var(--pb-header-text) 12%, transparent);
--pb-header-hover: color-mix(in srgb, var(--pb-header-text) 7%, transparent);
--pb-header-panel-bg: var(--pb-header-bg);
--pb-header-shadow: 0 10px 30px -18px rgba(0, 0, 0, .28);
--pb-header-height: 72px;
--pb-header-top-height: 34px;
--pb-header-pad: clamp(16px, 3vw, 40px);
--pb-header-gap: clamp(18px, 2vw, 32px);
--pb-header-font: var(--font-family-text), sans-serif;
--pb-header-size: .95rem;
--pb-header-weight: var(--nav-weight, 500);
--pb-header-logo-height: 40px;
--pb-header-brand-max: min(420px, 55vw);
--pb-header-radius: 18px;
--pb-header-speed: .35s;
--pb-header-ease: cubic-bezier(.2, .8, .2, 1);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 10;
color: var(--pb-header-text);
font-family: var(--pb-header-font);
font-size: var(--pb-header-size);
line-height: 1.4;
transition: color var(--pb-header-speed);
}
.pb-header *,
.pb-header *::before,
.pb-header *::after {
box-sizing: border-box;
}
/* Innehållet börjar under sidhuvudet. pb-header.js mäter den riktiga höjden. */
.pb-header ~ .content {
top: var(--pb-header-offset);
}
/* ---------------------------------------------------------------- Toppremsan (menyn "top") */
.pb-header__top {
position: relative;
z-index: 3;
display: flex;
align-items: center;
justify-content: flex-end;
height: var(--pb-header-top-height);
padding: 0 var(--pb-header-pad);
background: var(--pb-header-bg);
border-bottom: 1px solid var(--pb-header-line);
font-size: .8rem;
}
.pb-header__top-links {
display: flex;
gap: 22px;
margin: 0;
padding: 0;
list-style: none;
}
.pb-header__top-links li.nav-item {
display: block;
}
.pb-header__top-links a {
color: inherit;
text-decoration: none;
opacity: .75;
transition: opacity .2s;
}
.pb-header__top-links a:hover {
opacity: 1;
}
/* ---------------------------------------------------------------- Listen */
.pb-header__bar {
position: relative;
z-index: 2;
isolation: isolate;
display: flex;
align-items: center;
gap: var(--pb-header-gap);
height: var(--pb-header-height);
padding: 0 var(--pb-header-pad);
}
.pb-header__bar::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--pb-header-bg);
border-bottom: 1px solid var(--pb-header-line);
transition: background-color var(--pb-header-speed), border-color var(--pb-header-speed), box-shadow var(--pb-header-speed);
}
.pb-header.is-scrolled .pb-header__bar::before {
box-shadow: var(--pb-header-shadow);
}
.pb-header__brand {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
flex: 0 0 auto;
min-width: 0;
color: inherit;
text-decoration: none;
}
.pb-header__brand .nav-logo {
display: block;
width: auto;
height: var(--pb-header-logo-height);
max-width: 220px;
object-fit: contain;
}
/* Grunden (main.css) kapar ordmärket vid 200 px – här får det mer plats. */
.pb-header__brand .nav-wordmark {
max-width: var(--pb-header-brand-max);
margin: 0;
color: inherit;
transition: color var(--pb-header-speed);
}
/* ---------------------------------------------------------------- Menyn på dator */
.pb-header__nav {
display: flex;
align-items: center;
align-self: stretch;
justify-content: flex-end;
flex: 1 1 auto;
min-width: 0;
}
.pb-header__menu {
display: flex;
align-items: center;
height: 100%;
}
.pb-header__links {
display: flex;
align-items: center;
gap: var(--pb-header-gap);
height: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.pb-header__links > li.nav-item {
position: relative;
display: flex;
align-items: center;
height: 100%;
}
.pb-header__links > li.nav-item > a {
position: relative;
display: inline-flex;
align-items: center;
gap: .4em;
padding: .45em 0;
color: inherit;
font-weight: var(--pb-header-weight);
text-decoration: none;
white-space: nowrap;
}
.pb-header__links > li.nav-item > a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: .15em;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: right;
transition: transform .3s var(--pb-header-ease);
}
.pb-header__links > li.nav-item > a:hover::after,
.pb-header__links > li.nav-item:focus-within > a::after {
transform: scaleX(1);
transform-origin: left;
}
.pb-header .nav-items > li.nav-item > a > svg {
width: .65em;
height: .65em;
fill: currentColor;
transition: transform .25s var(--pb-header-ease);
}
.pb-header__extra {
display: none;
}
/* Undermenyer och megameny (megamenyns placering kommer från main.css). */
.pb-header .nav-sub {
position: absolute;
z-index: 5;
margin: 0;
list-style: none;
opacity: 0;
visibility: hidden;
transition: opacity .2s, transform .2s, visibility .2s;
}
.pb-header .nav-sub:not(.nav-mega) {
top: 100%;
left: -16px;
min-width: 220px;
padding: 8px;
background: var(--pb-header-panel-bg);
color: var(--pb-header-text);
border: 1px solid var(--pb-header-line);
border-radius: 12px;
box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .28);
transform: translateY(6px);
}
.pb-header li.nav-item:hover > .nav-sub,
.pb-header li.nav-item:focus-within > .nav-sub,
.pb-header li.nav-item.pb-nav-open > .nav-sub {
opacity: 1;
visibility: visible;
}
.pb-header li.nav-item:hover > .nav-sub:not(.nav-mega),
.pb-header li.nav-item:focus-within > .nav-sub:not(.nav-mega),
.pb-header li.nav-item.pb-nav-open > .nav-sub:not(.nav-mega) {
transform: none;
}
.pb-header .nav-sub:not(.nav-mega) li {
display: block;
}
.pb-header .nav-sub:not(.nav-mega) .nav-sub-item,
.pb-header .nav-sub:not(.nav-mega) a {
display: block;
padding: 9px 12px;
border-radius: 8px;
color: inherit;
text-decoration: none;
white-space: nowrap;
transition: background-color .15s;
}
.pb-header .nav-sub:not(.nav-mega) a:hover {
background: var(--pb-header-hover);
}
/* ---------------------------------------------------------------- Verktyg (språk, sök, konto, varukorg) */
.pb-header__tools {
position: relative;
z-index: 2;
display: flex;
align-items: center;
flex: 0 0 auto;
gap: 2px;
margin: 0;
padding: 0;
list-style: none;
}
.pb-header__tool {
display: flex;
}
.pb-header__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border: 0;
border-radius: 999px;
background: transparent;
color: inherit;
cursor: pointer;
transition: background-color .2s;
}
.pb-header__icon:hover {
background: var(--pb-header-hover);
}
.pb-header__icon svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.pb-header__tools > li.nav-item {
position: relative;
display: flex;
align-items: center;
margin-right: 6px;
}
.pb-header__tools > li.nav-item > a {
display: inline-flex;
align-items: center;
gap: 6px;
color: inherit;
text-decoration: none;
font-weight: var(--pb-header-weight);
}
.pb-header__tools > li.nav-item > a svg {
fill: currentColor;
}
.pb-header__tools .nav-sub:not(.nav-mega) {
left: auto;
right: -8px;
min-width: 160px;
}
/* ---------------------------------------------------------------- Menyknappen */
.pb-header__toggle {
position: relative;
z-index: 2;
display: none;
align-items: center;
gap: 10px;
height: 40px;
margin-right: -8px;
padding: 0 8px;
border: 0;
background: transparent;
color: inherit;
font: inherit;
font-weight: var(--pb-header-weight);
cursor: pointer;
}
.pb-header__toggle-text {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.pb-header__toggle-icon {
position: relative;
display: block;
width: 22px;
height: 12px;
}
.pb-header__toggle-icon::before,
.pb-header__toggle-icon::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 1.5px;
border-radius: 2px;
background: currentColor;
transition: transform var(--pb-header-speed) var(--pb-header-ease), top var(--pb-header-speed) var(--pb-header-ease);
}
.pb-header__toggle-icon::before {
top: 0;
}
.pb-header__toggle-icon::after {
top: calc(100% - 1.5px);
}
.pb-header.is-open .pb-header__toggle-icon::before,
.pb-header.is-open .pb-header__toggle-icon::after {
top: calc(50% - .75px);
}
.pb-header.is-open .pb-header__toggle-icon::before {
transform: rotate(45deg);
}
.pb-header.is-open .pb-header__toggle-icon::after {
transform: rotate(-45deg);
}
.pb-header__backdrop {
position: fixed;
inset: 0;
z-index: 1;
background: rgba(0, 0, 0, .32);
opacity: 0;
visibility: hidden;
transition: opacity var(--pb-header-speed), visibility var(--pb-header-speed);
}
.pb-header.is-open .pb-header__backdrop {
opacity: 1;
visibility: visible;
}
html.pb-header-locked,
html.pb-header-locked body {
overflow: hidden;
}
/* ---------------------------------------------------------------- Genomskinlig över första bilden (data-overlay="true") */
.pb-header[data-overlay="true"]:has(~ .content > .page-element:first-child[data-category="banners"]):not(.is-scrolled):not(.is-open) {
--pb-header-bg: transparent;
--pb-header-line: transparent;
color: var(--pb-header-overlay-text, #fff);
}
/* Loggan blir vit över bilden (temat kan sätta --pb-header-overlay-logo: none). */
.pb-header[data-overlay="true"]:has(~ .content > .page-element:first-child[data-category="banners"]):not(.is-scrolled):not(.is-open) .pb-header__brand .nav-logo {
filter: var(--pb-header-overlay-logo, brightness(0) invert(1));
}
.pb-header[data-overlay="true"]:has(~ .content > .page-element:first-child[data-category="banners"]):not(.is-scrolled):not(.is-open) .pb-header__top {
background: transparent;
}
.pb-header[data-overlay="true"]:has(~ .content > .page-element:first-child[data-category="banners"]) ~ .content {
top: 0;
}
/* ================================================================ 5 · Centrerad */
.pb-header--centrerad {
--pb-header-height: 76px;
--pb-header-row: 50px;
}
.pb-header--centrerad .pb-header__bar {
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-rows: var(--pb-header-height) var(--pb-header-row);
gap: 0 var(--pb-header-gap);
height: auto;
}
.pb-header--centrerad .pb-header__brand {
grid-column: 2;
grid-row: 1;
justify-self: center;
}
.pb-header--centrerad .pb-header__tools {
grid-column: 3;
grid-row: 1;
justify-self: end;
}
.pb-header--centrerad .pb-header__toggle {
grid-column: 1;
grid-row: 1;
justify-self: start;
margin: 0 0 0 -8px;
}
.pb-header--centrerad .pb-header__nav {
grid-column: 1 / -1;
grid-row: 2;
justify-content: center;
margin: 0 calc(var(--pb-header-pad) * -1);
border-top: 1px solid var(--pb-header-line);
}
.pb-header--centrerad .pb-header__links {
gap: calc(var(--pb-header-gap) * 1.25);
}
/* ================================================================ 6 · Delad */
.pb-header--delad .pb-header__bar {
display: grid;
grid-template-columns: 1fr auto 1fr;
}
.pb-header--delad .pb-header__nav {
grid-column: 1;
grid-row: 1;
justify-content: flex-start;
}
.pb-header--delad .pb-header__brand {
grid-column: 2;
grid-row: 1;
}
.pb-header--delad .pb-header__tools {
grid-column: 3;
grid-row: 1;
justify-self: end;
}
.pb-header--delad .pb-header__toggle {
grid-column: 1;
grid-row: 1;
justify-self: start;
margin: 0 0 0 -8px;
}
/* ================================================================ 7 · Flytande */
.pb-header--flytande {
--pb-header-height: 64px;
--pb-header-float: 14px;
--pb-header-below: 14px;
padding: var(--pb-header-float) var(--pb-header-float) 0;
pointer-events: none;
}
.pb-header--flytande > * {
pointer-events: auto;
}
.pb-header--flytande .pb-header__top {
max-width: 1240px;
margin: 0 auto 8px;
padding: 0 6px;
height: auto;
background: transparent;
border: 0;
}
.pb-header--flytande .pb-header__bar {
display: grid;
grid-template-columns: 1fr auto 1fr;
max-width: 1240px;
margin: 0 auto;
padding: 0 12px 0 22px;
}
.pb-header--flytande .pb-header__bar::before {
border: 1px solid var(--pb-header-line);
border-radius: var(--pb-header-radius);
box-shadow: var(--pb-header-shadow);
}
.pb-header--flytande.is-scrolled .pb-header__bar::before {
box-shadow: 0 16px 40px -18px rgba(0, 0, 0, .35);
}
.pb-header--flytande .pb-header__brand {
grid-column: 1;
justify-self: start;
}
.pb-header--flytande .pb-header__nav {
grid-column: 2;
grid-row: 1;
justify-content: center;
}
.pb-header--flytande .pb-header__tools {
grid-column: 3;
grid-row: 1;
justify-self: end;
}
.pb-header--flytande .pb-header__toggle {
grid-column: 4;
grid-row: 1;
}
/* ================================================================ 8 · Helskärm (alla skärmar) */
.pb-header--helskarm .pb-header__top {
display: none;
}
.pb-header--helskarm .pb-header__nav {
display: contents;
}
.pb-header--helskarm .pb-header__tools {
margin-left: auto;
}
.pb-header--helskarm .pb-header__toggle {
display: inline-flex;
}
.pb-header--helskarm .pb-header__toggle-text {
position: static;
width: auto;
height: auto;
overflow: visible;
clip-path: none;
}
.pb-header--helskarm .pb-header__menu {
position: fixed;
inset: 0;
z-index: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
gap: 40px;
height: auto;
padding: calc(var(--pb-header-height) + clamp(24px, 7vh, 72px)) var(--pb-header-pad) calc(32px + env(safe-area-inset-bottom));
overflow-y: auto;
overscroll-behavior: contain;
background: var(--pb-header-panel-bg);
color: var(--pb-header-text);
opacity: 0;
visibility: hidden;
transition: opacity var(--pb-header-speed) var(--pb-header-ease), visibility 0s linear var(--pb-header-speed);
}
.pb-header--helskarm.is-open .pb-header__menu {
opacity: 1;
visibility: visible;
transition-delay: 0s;
}
.pb-header--helskarm .pb-header__backdrop {
display: none;
}
.pb-header--helskarm .pb-header__links {
flex-direction: column;
align-items: flex-start;
gap: .15em;
height: auto;
}
.pb-header--helskarm .pb-header__links > li.nav-item {
display: block;
height: auto;
opacity: 0;
transform: translateY(14px);
transition: opacity .5s var(--pb-header-ease), transform .5s var(--pb-header-ease);
}
.pb-header--helskarm.is-open .pb-header__links > li.nav-item {
opacity: 1;
transform: none;
}
.pb-header--helskarm.is-open .pb-header__links > li.nav-item:nth-child(2) { transition-delay: .04s; }
.pb-header--helskarm.is-open .pb-header__links > li.nav-item:nth-child(3) { transition-delay: .08s; }
.pb-header--helskarm.is-open .pb-header__links > li.nav-item:nth-child(4) { transition-delay: .12s; }
.pb-header--helskarm.is-open .pb-header__links > li.nav-item:nth-child(5) { transition-delay: .16s; }
.pb-header--helskarm.is-open .pb-header__links > li.nav-item:nth-child(n+6) { transition-delay: .2s; }
.pb-header--helskarm .pb-header__links > li.nav-item > a {
padding: .05em 0;
font-family: var(--font-family-header), sans-serif;
font-size: clamp(2rem, 5.5vw, 4.5rem);
font-weight: var(--h2-weight, 500);
line-height: 1.12;
letter-spacing: -.01em;
white-space: normal;
}
.pb-header--helskarm .pb-header__links > li.nav-item > a::after {
bottom: .08em;
height: 2px;
}
.pb-header--helskarm .pb-header__extra {
display: flex;
flex-wrap: wrap;
gap: 10px 28px;
margin: 0;
padding: 0;
list-style: none;
}
.pb-header--helskarm .pb-header__extra li.nav-item {
display: block;
}
.pb-header--helskarm .pb-header__extra a {
color: inherit;
text-decoration: none;
opacity: .7;
}
/* Undermenyer: en rad med mindre länkar under menyvalet. */
.pb-header--helskarm .pb-header__links .nav-sub:not(.nav-mega) {
position: static;
display: flex;
flex-wrap: wrap;
gap: 2px 18px;
min-width: 0;
padding: 2px 0 14px;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
opacity: 1;
visibility: visible;
transform: none;
}
.pb-header--helskarm .pb-header__links .nav-sub:not(.nav-mega) a {
padding: 4px 0;
font-size: 1rem;
opacity: .7;
}
.pb-header--helskarm .pb-header__links .nav-sub:not(.nav-mega) a:hover {
background: none;
opacity: 1;
}
.pb-header--helskarm .pb-header__links .nav-sub.nav-mega {
position: static;
display: block;
width: auto;
padding: 2px 0 14px;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
transform: none;
opacity: 1;
visibility: visible;
}
.pb-header--helskarm .pb-header__links > li.nav-item > a > svg {
display: none;
}
/* ================================================================ Mobil (under 992 px) */
@media (max-width: 992px) {
.pb-header {
--pb-header-height: 64px;
--pb-header-logo-height: 34px;
}
.pb-header__top {
display: none;
}
.pb-header__toggle {
display: inline-flex;
}
.pb-header__nav {
display: contents;
}
.pb-header__tools {
margin-left: auto;
}
/* Panelen: under listen, gömd tills menyn öppnas. Uppläggen nedan bestämmer hur den kommer in. */
.pb-header__menu {
position: fixed;
top: var(--pb-header-panel-top, calc(var(--pb-header-height) + var(--pb-header-float, 0px)));
left: 0;
right: 0;
bottom: 0;
z-index: 1;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 28px;
height: auto;
padding: 12px var(--pb-header-pad) calc(32px + env(safe-area-inset-bottom));
overflow-y: auto;
overscroll-behavior: contain;
background: var(--pb-header-panel-bg);
color: var(--pb-header-text);
visibility: hidden;
transition: transform var(--pb-header-speed) var(--pb-header-ease), opacity var(--pb-header-speed) var(--pb-header-ease), visibility 0s linear var(--pb-header-speed);
}
.pb-header.is-open .pb-header__menu {
visibility: visible;
transition-delay: 0s;
}
.pb-header__links {
flex-direction: column;
align-items: stretch;
gap: 0;
height: auto;
}
.pb-header__links > li.nav-item {
display: block;
height: auto;
border-bottom: 1px solid var(--pb-header-line);
}
.pb-header__links > li.nav-item > a {
display: flex;
justify-content: space-between;
width: 100%;
padding: 16px 0;
font-size: 1.15rem;
white-space: normal;
}
.pb-header__links > li.nav-item > a::after {
display: none;
}
.pb-header .nav-sub,
.pb-header .nav-sub:not(.nav-mega) {
position: static;
display: none;
min-width: 0;
padding: 0 0 14px 12px;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
opacity: 1;
visibility: visible;
transform: none;
}
.pb-header li.nav-item.nav-item--open > .nav-sub {
display: block;
}
.pb-header li.nav-item.nav-item--open > a > svg {
transform: rotate(180deg);
}
.pb-header .nav-sub:not(.nav-mega) a {
padding: 8px 0;
white-space: normal;
}
.pb-header__extra {
display: flex;
flex-direction: column;
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
font-size: .95rem;
}
.pb-header__extra li.nav-item {
display: block;
}
.pb-header__extra a {
color: inherit;
text-decoration: none;
opacity: .7;
}
/* 4 · Klassisk: panel från höger. */
.pb-header--klassisk .pb-header__menu {
left: auto;
width: min(88vw, 420px);
transform: translateX(100%);
box-shadow: -24px 0 40px -28px rgba(0, 0, 0, .35);
}
.pb-header--klassisk.is-open .pb-header__menu {
transform: none;
}
/* 5 · Centrerad: menyknapp vänster, logga i mitten, helskärm med stora länkar. */
.pb-header--centrerad .pb-header__bar {
grid-template-rows: var(--pb-header-height);
}
.pb-header--centrerad .pb-header__tools {
margin-left: 0;
}
.pb-header--centrerad .pb-header__menu {
align-items: center;
padding-top: clamp(24px, 6vh, 56px);
text-align: center;
opacity: 0;
transform: translateY(-8px);
}
.pb-header--centrerad.is-open .pb-header__menu {
opacity: 1;
transform: none;
}
.pb-header--centrerad .pb-header__links {
width: 100%;
max-width: 420px;
}
.pb-header--centrerad .pb-header__links > li.nav-item {
border: 0;
}
.pb-header--centrerad .pb-header__links > li.nav-item > a {
justify-content: center;
padding: 10px 0;
font-family: var(--font-family-header), sans-serif;
font-size: 1.75rem;
}
.pb-header--centrerad .pb-header__backdrop {
display: none;
}
/* 6 · Delad: panel från vänster. */
.pb-header--delad .pb-header__tools {
margin-left: 0;
}
.pb-header--delad .pb-header__menu {
right: auto;
width: min(88vw, 420px);
transform: translateX(-100%);
box-shadow: 24px 0 40px -28px rgba(0, 0, 0, .35);
}
.pb-header--delad.is-open .pb-header__menu {
transform: none;
}
/* 7 · Flytande: ett kort under listen. */
.pb-header--flytande {
--pb-header-height: 58px;
--pb-header-float: 10px;
--pb-header-below: 10px;
}
.pb-header--flytande .pb-header__bar {
grid-template-columns: 1fr auto auto;
padding: 0 8px 0 18px;
}
.pb-header--flytande .pb-header__tools {
grid-column: 2;
margin-left: 0;
}
.pb-header--flytande .pb-header__toggle {
grid-column: 3;
}
.pb-header--flytande .pb-header__menu {
top: calc(var(--pb-header-float) * 2 + var(--pb-header-height));
left: var(--pb-header-float);
right: var(--pb-header-float);
bottom: auto;
max-height: calc(100dvh - var(--pb-header-height) - var(--pb-header-float) * 3);
padding: 8px 22px 24px;
border: 1px solid var(--pb-header-line);
border-radius: var(--pb-header-radius);
box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .4);
opacity: 0;
transform: translateY(-6px) scale(.98);
transform-origin: top center;
}
.pb-header--flytande.is-open .pb-header__menu {
opacity: 1;
transform: none;
}
.pb-header--flytande .pb-header__links > li.nav-item:last-child {
border-bottom: 0;
}
.pb-header--flytande .pb-header__backdrop {
background: rgba(0, 0, 0, .18);
}
/* 8 · Helskärm: samma som på dator, mindre text. */
.pb-header--helskarm .pb-header__menu {
top: 0;
bottom: 0;
padding-top: calc(var(--pb-header-height) + 28px);
}
.pb-header--helskarm .pb-header__links > li.nav-item {
border: 0;
}
.pb-header--helskarm .pb-header__links > li.nav-item > a {
padding: .1em 0;
font-size: clamp(1.9rem, 9vw, 2.6rem);
}
.pb-header--helskarm .pb-header__links > li.nav-item > a > svg {
display: inline-block;
}
.pb-header--helskarm .pb-header__links .nav-sub:not(.nav-mega),
.pb-header--helskarm .pb-header__links .nav-sub.nav-mega {
display: none;
}
.pb-header--helskarm .pb-header__links li.nav-item.nav-item--open > .nav-sub:not(.nav-mega) {
display: flex;
}
.pb-header--helskarm .pb-header__links li.nav-item.nav-item--open > .nav-sub.nav-mega {
display: block;
}
.pb-header--helskarm .pb-header__extra {
flex-direction: column;
}
}
/* pb-footer.css */
/* =========================================================================
PageBase – sidfötterna i motor 2 (docs/SITE-THEMES.md, "Sidfötterna 1–4").
Fyra upplägg (admin/assets/elements/_base/layout/footer-1..4.html):
.pb-footer--kolumner logga och text, sidfotsmenyerna och kontakt i kolumner
.pb-footer--rubrik stor rubrik (e-post eller företagsnamn), sedan kontakt, menyer och ikoner
.pb-footer--centrerad allt centrerat: logga, länkar på en rad, kontakt, ikoner
.pb-footer--kompakt logga, länkar och ikoner på en rad – för små sajter
Laddas efter grunden (main.css) men före temat: temats, AI:ns och kundens CSS vinner med
samma selektor. Ändra utseendet med variablerna på .pb-footer eller egna regler. Taggarna
(menyerna, kontaktuppgifterna, sociala ikoner, sökrutan) är låsta – de kommer från grunden.
========================================================================= */
.pb-footer {
--pb-footer-bg: var(--color-footer, #111);
--pb-footer-text: var(--color-footer-text, #fff);
--pb-footer-line: color-mix(in srgb, var(--pb-footer-text) 16%, transparent);
--pb-footer-pad-y: clamp(48px, 7vw, 96px);
--pb-footer-pad-x: clamp(16px, 3vw, 40px);
--pb-footer-max: 1320px;
--pb-footer-gap: clamp(28px, 4vw, 56px);
--pb-footer-size: .95rem;
--pb-footer-title-size: 1rem;
--pb-footer-headline-size: clamp(2.2rem, 6vw, 5rem);
--pb-footer-logo-height: 44px;
padding: var(--pb-footer-pad-y) 0 calc(var(--pb-footer-pad-y) * .45);
background: var(--pb-footer-bg);
color: var(--pb-footer-text);
font-family: var(--font-family-text), sans-serif;
font-size: var(--pb-footer-size);
line-height: 1.6;
}
.pb-footer *,
.pb-footer *::before,
.pb-footer *::after {
box-sizing: border-box;
}
.pb-footer__inner {
display: flex;
flex-direction: column;
gap: var(--pb-footer-gap);
max-width: var(--pb-footer-max);
margin: 0 auto;
padding: 0 var(--pb-footer-pad-x);
}
.pb-footer a {
color: inherit;
text-decoration: none;
}
.pb-footer ul {
margin: 0;
padding: 0;
list-style: none;
}
.pb-footer p {
margin: 0;
color: inherit;
}
/* ---------------------------------------------------------------- Delar */
.pb-footer__brand {
display: inline-flex;
align-items: center;
color: inherit;
}
.pb-footer .footer-logo {
display: block;
width: auto;
height: var(--pb-footer-logo-height);
max-width: 220px;
object-fit: contain;
}
.pb-footer .nav-wordmark {
max-width: none;
margin: 0;
color: inherit;
font-family: var(--font-family-header), sans-serif;
font-size: 1.35rem;
font-weight: 700;
line-height: 1.2;
white-space: normal;
}
.pb-footer__text {
max-width: 38ch;
opacity: .8;
}
.pb-footer__text p + p {
margin-top: .6em;
}
.pb-footer .pb-footer__title {
display: block;
margin-bottom: .9rem;
font-size: var(--pb-footer-title-size);
font-weight: 600;
}
.pb-footer__list,
.pb-footer__contact-list {
display: flex;
flex-direction: column;
gap: .5rem;
}
.pb-footer__link {
opacity: .75;
transition: opacity .15s;
}
.pb-footer__link:hover,
.pb-footer__title:hover {
opacity: 1;
}
.pb-footer__row {
display: flex;
flex-wrap: wrap;
gap: 10px 28px;
}
.pb-footer__socials {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.pb-footer__social {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid var(--pb-footer-line);
border-radius: 999px;
transition: background-color .2s, border-color .2s;
}
.pb-footer__social:hover {
border-color: currentColor;
background: color-mix(in srgb, currentColor 10%, transparent);
}
.pb-footer__social svg {
width: 18px;
height: 18px;
fill: currentColor;
}
.pb-footer__bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px 24px;
padding-top: calc(var(--pb-footer-gap) * .6);
border-top: 1px solid var(--pb-footer-line);
font-size: .85rem;
}
.pb-footer__copyright {
opacity: .7;
}
.pb-footer__copyright a {
text-decoration: underline;
}
.pb-footer__legal {
display: flex;
flex-wrap: wrap;
gap: 6px 20px;
}
.pb-footer__legal li.nav-item {
display: block;
}
.pb-footer__legal a {
opacity: .7;
}
.pb-footer__legal a:hover {
opacity: 1;
}
/* ================================================================ 1 · Kolumner */
.pb-footer--kolumner .pb-footer__main {
display: flex;
flex-wrap: wrap;
gap: var(--pb-footer-gap);
}
.pb-footer--kolumner .pb-footer__about {
display: flex;
flex: 1 1 240px;
flex-direction: column;
gap: 20px;
max-width: 380px;
}
.pb-footer--kolumner .pb-footer__menus {
display: grid;
flex: 3 1 360px;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: var(--pb-footer-gap);
}
.pb-footer--kolumner .pb-footer__contact {
flex: 1 1 200px;
}
/* ================================================================ 2 · Stor rubrik */
.pb-footer--rubrik .pb-footer__hero {
padding-bottom: var(--pb-footer-gap);
border-bottom: 1px solid var(--pb-footer-line);
}
.pb-footer .pb-footer__kicker {
margin-bottom: .75rem;
font-size: .8rem;
letter-spacing: .14em;
text-transform: uppercase;
opacity: .7;
}
.pb-footer__headline {
display: inline-block;
max-width: 100%;
font-family: var(--font-family-header), sans-serif;
font-size: var(--pb-footer-headline-size);
font-weight: var(--h1-weight, 600);
line-height: 1.05;
letter-spacing: -.02em;
overflow-wrap: anywhere;
transition: opacity .2s;
}
.pb-footer__headline:hover {
opacity: .75;
}
.pb-footer--rubrik .pb-footer__main {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: var(--pb-footer-gap);
}
.pb-footer--rubrik .pb-footer__about {
display: flex;
flex: 1 1 220px;
flex-direction: column;
gap: 16px;
}
.pb-footer--rubrik .pb-footer__contact {
flex: 1 1 200px;
}
.pb-footer--rubrik .pb-footer__menus {
display: grid;
flex: 2 1 320px;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: var(--pb-footer-gap);
}
/* ================================================================ 3 · Centrerad */
.pb-footer--centrerad .pb-footer__inner {
align-items: center;
gap: calc(var(--pb-footer-gap) * .6);
text-align: center;
}
.pb-footer--centrerad .pb-footer__text {
margin: 0 auto;
}
.pb-footer--centrerad .pb-footer__row,
.pb-footer--centrerad .pb-footer__socials {
justify-content: center;
}
.pb-footer__contact-row {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 6px 28px;
}
.pb-footer--centrerad .pb-footer__bottom {
flex-direction: column;
justify-content: center;
width: 100%;
margin-top: calc(var(--pb-footer-gap) * .4);
}
/* ================================================================ 4 · Kompakt */
.pb-footer--kompakt {
--pb-footer-pad-y: clamp(32px, 4vw, 52px);
--pb-footer-logo-height: 36px;
}
.pb-footer--kompakt .pb-footer__inner {
gap: 24px;
}
.pb-footer--kompakt .pb-footer__main {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px 36px;
}
.pb-footer--kompakt .pb-footer__row {
flex: 1 1 auto;
justify-content: center;
}
.pb-footer--kompakt .pb-footer__bottom {
padding-top: 18px;
}
/* ================================================================ Mobil */
@media (max-width: 768px) {
.pb-footer--kolumner .pb-footer__about {
max-width: none;
}
.pb-footer--kolumner .pb-footer__menus,
.pb-footer--rubrik .pb-footer__menus {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pb-footer--kompakt .pb-footer__main {
flex-direction: column;
align-items: flex-start;
}
.pb-footer--kompakt .pb-footer__row {
justify-content: flex-start;
}
.pb-footer__bottom {
flex-direction: column;
align-items: flex-start;
}
.pb-footer--centrerad .pb-footer__bottom {
align-items: center;
}
}
/* bootstrap-grid 5.0.2 */
/*!
* Bootstrap Grid v5.0.2 (https://getbootstrap.com/)
* Copyright 2011-2021 The Bootstrap Authors
* Copyright 2011-2021 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/.container,.container-fluid,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{width:100%;padding-right:var(--bs-gutter-x,.75rem);padding-left:var(--bs-gutter-x,.75rem);margin-right:auto;margin-left:auto}@media (min-width:576px){.container,.container-sm{max-width:540px}}@media (min-width:768px){.container,.container-md,.container-sm{max-width:720px}}@media (min-width:992px){.container,.container-lg,.container-md,.container-sm{max-width:960px}}@media (min-width:1200px){.container,.container-lg,.container-md,.container-sm,.container-xl{max-width:1140px}}@media (min-width:1400px){.container,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{max-width:1320px}}.row{--bs-gutter-x:1.5rem;--bs-gutter-y:0;display:flex;flex-wrap:wrap;margin-top:calc(var(--bs-gutter-y) * -1);margin-right:calc(var(--bs-gutter-x) * -.5);margin-left:calc(var(--bs-gutter-x) * -.5)}.row>*{box-sizing:border-box;flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-top:var(--bs-gutter-y)}.col{flex:1 0 0%}.row-cols-auto>*{flex:0 0 auto;width:auto}.row-cols-1>*{flex:0 0 auto;width:100%}.row-cols-2>*{flex:0 0 auto;width:50%}.row-cols-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-4>*{flex:0 0 auto;width:25%}.row-cols-5>*{flex:0 0 auto;width:20%}.row-cols-6>*{flex:0 0 auto;width:16.6666666667%}@media (min-width:576px){.col-sm{flex:1 0 0%}.row-cols-sm-auto>*{flex:0 0 auto;width:auto}.row-cols-sm-1>*{flex:0 0 auto;width:100%}.row-cols-sm-2>*{flex:0 0 auto;width:50%}.row-cols-sm-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-sm-4>*{flex:0 0 auto;width:25%}.row-cols-sm-5>*{flex:0 0 auto;width:20%}.row-cols-sm-6>*{flex:0 0 auto;width:16.6666666667%}}@media (min-width:768px){.col-md{flex:1 0 0%}.row-cols-md-auto>*{flex:0 0 auto;width:auto}.row-cols-md-1>*{flex:0 0 auto;width:100%}.row-cols-md-2>*{flex:0 0 auto;width:50%}.row-cols-md-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-md-4>*{flex:0 0 auto;width:25%}.row-cols-md-5>*{flex:0 0 auto;width:20%}.row-cols-md-6>*{flex:0 0 auto;width:16.6666666667%}}@media (min-width:992px){.col-lg{flex:1 0 0%}.row-cols-lg-auto>*{flex:0 0 auto;width:auto}.row-cols-lg-1>*{flex:0 0 auto;width:100%}.row-cols-lg-2>*{flex:0 0 auto;width:50%}.row-cols-lg-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-lg-4>*{flex:0 0 auto;width:25%}.row-cols-lg-5>*{flex:0 0 auto;width:20%}.row-cols-lg-6>*{flex:0 0 auto;width:16.6666666667%}}@media (min-width:1200px){.col-xl{flex:1 0 0%}.row-cols-xl-auto>*{flex:0 0 auto;width:auto}.row-cols-xl-1>*{flex:0 0 auto;width:100%}.row-cols-xl-2>*{flex:0 0 auto;width:50%}.row-cols-xl-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-xl-4>*{flex:0 0 auto;width:25%}.row-cols-xl-5>*{flex:0 0 auto;width:20%}.row-cols-xl-6>*{flex:0 0 auto;width:16.6666666667%}}@media (min-width:1400px){.col-xxl{flex:1 0 0%}.row-cols-xxl-auto>*{flex:0 0 auto;width:auto}.row-cols-xxl-1>*{flex:0 0 auto;width:100%}.row-cols-xxl-2>*{flex:0 0 auto;width:50%}.row-cols-xxl-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-xxl-4>*{flex:0 0 auto;width:25%}.row-cols-xxl-5>*{flex:0 0 auto;width:20%}.row-cols-xxl-6>*{flex:0 0 auto;width:16.6666666667%}}.col-auto{flex:0 0 auto;width:auto}.col-1{flex:0 0 auto;width:8.33333333%}.col-2{flex:0 0 auto;width:16.66666667%}.col-3{flex:0 0 auto;width:25%}.col-4{flex:0 0 auto;width:33.33333333%}.col-5{flex:0 0 auto;width:41.66666667%}.col-6{flex:0 0 auto;width:50%}.col-7{flex:0 0 auto;width:58.33333333%}.col-8{flex:0 0 auto;width:66.66666667%}.col-9{flex:0 0 auto;width:75%}.col-10{flex:0 0 auto;width:83.33333333%}.col-11{flex:0 0 auto;width:91.66666667%}.col-12{flex:0 0 auto;width:100%}.offset-1{margin-left:8.33333333%}.offset-2{margin-left:16.66666667%}.offset-3{margin-left:25%}.offset-4{margin-left:33.33333333%}.offset-5{margin-left:41.66666667%}.offset-6{margin-left:50%}.offset-7{margin-left:58.33333333%}.offset-8{margin-left:66.66666667%}.offset-9{margin-left:75%}.offset-10{margin-left:83.33333333%}.offset-11{margin-left:91.66666667%}.g-0,.gx-0{--bs-gutter-x:0}.g-0,.gy-0{--bs-gutter-y:0}.g-1,.gx-1{--bs-gutter-x:0.25rem}.g-1,.gy-1{--bs-gutter-y:0.25rem}.g-2,.gx-2{--bs-gutter-x:0.5rem}.g-2,.gy-2{--bs-gutter-y:0.5rem}.g-3,.gx-3{--bs-gutter-x:1rem}.g-3,.gy-3{--bs-gutter-y:1rem}.g-4,.gx-4{--bs-gutter-x:1.5rem}.g-4,.gy-4{--bs-gutter-y:1.5rem}.g-5,.gx-5{--bs-gutter-x:3rem}.g-5,.gy-5{--bs-gutter-y:3rem}@media (min-width:576px){.col-sm-auto{flex:0 0 auto;width:auto}.col-sm-1{flex:0 0 auto;width:8.33333333%}.col-sm-2{flex:0 0 auto;width:16.66666667%}.col-sm-3{flex:0 0 auto;width:25%}.col-sm-4{flex:0 0 auto;width:33.33333333%}.col-sm-5{flex:0 0 auto;width:41.66666667%}.col-sm-6{flex:0 0 auto;width:50%}.col-sm-7{flex:0 0 auto;width:58.33333333%}.col-sm-8{flex:0 0 auto;width:66.66666667%}.col-sm-9{flex:0 0 auto;width:75%}.col-sm-10{flex:0 0 auto;width:83.33333333%}.col-sm-11{flex:0 0 auto;width:91.66666667%}.col-sm-12{flex:0 0 auto;width:100%}.offset-sm-0{margin-left:0}.offset-sm-1{margin-left:8.33333333%}.offset-sm-2{margin-left:16.66666667%}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:33.33333333%}.offset-sm-5{margin-left:41.66666667%}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:58.33333333%}.offset-sm-8{margin-left:66.66666667%}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:83.33333333%}.offset-sm-11{margin-left:91.66666667%}.g-sm-0,.gx-sm-0{--bs-gutter-x:0}.g-sm-0,.gy-sm-0{--bs-gutter-y:0}.g-sm-1,.gx-sm-1{--bs-gutter-x:0.25rem}.g-sm-1,.gy-sm-1{--bs-gutter-y:0.25rem}.g-sm-2,.gx-sm-2{--bs-gutter-x:0.5rem}.g-sm-2,.gy-sm-2{--bs-gutter-y:0.5rem}.g-sm-3,.gx-sm-3{--bs-gutter-x:1rem}.g-sm-3,.gy-sm-3{--bs-gutter-y:1rem}.g-sm-4,.gx-sm-4{--bs-gutter-x:1.5rem}.g-sm-4,.gy-sm-4{--bs-gutter-y:1.5rem}.g-sm-5,.gx-sm-5{--bs-gutter-x:3rem}.g-sm-5,.gy-sm-5{--bs-gutter-y:3rem}}@media (min-width:768px){.col-md-auto{flex:0 0 auto;width:auto}.col-md-1{flex:0 0 auto;width:8.33333333%}.col-md-2{flex:0 0 auto;width:16.66666667%}.col-md-3{flex:0 0 auto;width:25%}.col-md-4{flex:0 0 auto;width:33.33333333%}.col-md-5{flex:0 0 auto;width:41.66666667%}.col-md-6{flex:0 0 auto;width:50%}.col-md-7{flex:0 0 auto;width:58.33333333%}.col-md-8{flex:0 0 auto;width:66.66666667%}.col-md-9{flex:0 0 auto;width:75%}.col-md-10{flex:0 0 auto;width:83.33333333%}.col-md-11{flex:0 0 auto;width:91.66666667%}.col-md-12{flex:0 0 auto;width:100%}.offset-md-0{margin-left:0}.offset-md-1{margin-left:8.33333333%}.offset-md-2{margin-left:16.66666667%}.offset-md-3{margin-left:25%}.offset-md-4{margin-left:33.33333333%}.offset-md-5{margin-left:41.66666667%}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:58.33333333%}.offset-md-8{margin-left:66.66666667%}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:83.33333333%}.offset-md-11{margin-left:91.66666667%}.g-md-0,.gx-md-0{--bs-gutter-x:0}.g-md-0,.gy-md-0{--bs-gutter-y:0}.g-md-1,.gx-md-1{--bs-gutter-x:0.25rem}.g-md-1,.gy-md-1{--bs-gutter-y:0.25rem}.g-md-2,.gx-md-2{--bs-gutter-x:0.5rem}.g-md-2,.gy-md-2{--bs-gutter-y:0.5rem}.g-md-3,.gx-md-3{--bs-gutter-x:1rem}.g-md-3,.gy-md-3{--bs-gutter-y:1rem}.g-md-4,.gx-md-4{--bs-gutter-x:1.5rem}.g-md-4,.gy-md-4{--bs-gutter-y:1.5rem}.g-md-5,.gx-md-5{--bs-gutter-x:3rem}.g-md-5,.gy-md-5{--bs-gutter-y:3rem}}@media (min-width:992px){.col-lg-auto{flex:0 0 auto;width:auto}.col-lg-1{flex:0 0 auto;width:8.33333333%}.col-lg-2{flex:0 0 auto;width:16.66666667%}.col-lg-3{flex:0 0 auto;width:25%}.col-lg-4{flex:0 0 auto;width:33.33333333%}.col-lg-5{flex:0 0 auto;width:41.66666667%}.col-lg-6{flex:0 0 auto;width:50%}.col-lg-7{flex:0 0 auto;width:58.33333333%}.col-lg-8{flex:0 0 auto;width:66.66666667%}.col-lg-9{flex:0 0 auto;width:75%}.col-lg-10{flex:0 0 auto;width:83.33333333%}.col-lg-11{flex:0 0 auto;width:91.66666667%}.col-lg-12{flex:0 0 auto;width:100%}.offset-lg-0{margin-left:0}.offset-lg-1{margin-left:8.33333333%}.offset-lg-2{margin-left:16.66666667%}.offset-lg-3{margin-left:25%}.offset-lg-4{margin-left:33.33333333%}.offset-lg-5{margin-left:41.66666667%}.offset-lg-6{margin-left:50%}.offset-lg-7{margin-left:58.33333333%}.offset-lg-8{margin-left:66.66666667%}.offset-lg-9{margin-left:75%}.offset-lg-10{margin-left:83.33333333%}.offset-lg-11{margin-left:91.66666667%}.g-lg-0,.gx-lg-0{--bs-gutter-x:0}.g-lg-0,.gy-lg-0{--bs-gutter-y:0}.g-lg-1,.gx-lg-1{--bs-gutter-x:0.25rem}.g-lg-1,.gy-lg-1{--bs-gutter-y:0.25rem}.g-lg-2,.gx-lg-2{--bs-gutter-x:0.5rem}.g-lg-2,.gy-lg-2{--bs-gutter-y:0.5rem}.g-lg-3,.gx-lg-3{--bs-gutter-x:1rem}.g-lg-3,.gy-lg-3{--bs-gutter-y:1rem}.g-lg-4,.gx-lg-4{--bs-gutter-x:1.5rem}.g-lg-4,.gy-lg-4{--bs-gutter-y:1.5rem}.g-lg-5,.gx-lg-5{--bs-gutter-x:3rem}.g-lg-5,.gy-lg-5{--bs-gutter-y:3rem}}@media (min-width:1200px){.col-xl-auto{flex:0 0 auto;width:auto}.col-xl-1{flex:0 0 auto;width:8.33333333%}.col-xl-2{flex:0 0 auto;width:16.66666667%}.col-xl-3{flex:0 0 auto;width:25%}.col-xl-4{flex:0 0 auto;width:33.33333333%}.col-xl-5{flex:0 0 auto;width:41.66666667%}.col-xl-6{flex:0 0 auto;width:50%}.col-xl-7{flex:0 0 auto;width:58.33333333%}.col-xl-8{flex:0 0 auto;width:66.66666667%}.col-xl-9{flex:0 0 auto;width:75%}.col-xl-10{flex:0 0 auto;width:83.33333333%}.col-xl-11{flex:0 0 auto;width:91.66666667%}.col-xl-12{flex:0 0 auto;width:100%}.offset-xl-0{margin-left:0}.offset-xl-1{margin-left:8.33333333%}.offset-xl-2{margin-left:16.66666667%}.offset-xl-3{margin-left:25%}.offset-xl-4{margin-left:33.33333333%}.offset-xl-5{margin-left:41.66666667%}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:58.33333333%}.offset-xl-8{margin-left:66.66666667%}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:83.33333333%}.offset-xl-11{margin-left:91.66666667%}.g-xl-0,.gx-xl-0{--bs-gutter-x:0}.g-xl-0,.gy-xl-0{--bs-gutter-y:0}.g-xl-1,.gx-xl-1{--bs-gutter-x:0.25rem}.g-xl-1,.gy-xl-1{--bs-gutter-y:0.25rem}.g-xl-2,.gx-xl-2{--bs-gutter-x:0.5rem}.g-xl-2,.gy-xl-2{--bs-gutter-y:0.5rem}.g-xl-3,.gx-xl-3{--bs-gutter-x:1rem}.g-xl-3,.gy-xl-3{--bs-gutter-y:1rem}.g-xl-4,.gx-xl-4{--bs-gutter-x:1.5rem}.g-xl-4,.gy-xl-4{--bs-gutter-y:1.5rem}.g-xl-5,.gx-xl-5{--bs-gutter-x:3rem}.g-xl-5,.gy-xl-5{--bs-gutter-y:3rem}}@media (min-width:1400px){.col-xxl-auto{flex:0 0 auto;width:auto}.col-xxl-1{flex:0 0 auto;width:8.33333333%}.col-xxl-2{flex:0 0 auto;width:16.66666667%}.col-xxl-3{flex:0 0 auto;width:25%}.col-xxl-4{flex:0 0 auto;width:33.33333333%}.col-xxl-5{flex:0 0 auto;width:41.66666667%}.col-xxl-6{flex:0 0 auto;width:50%}.col-xxl-7{flex:0 0 auto;width:58.33333333%}.col-xxl-8{flex:0 0 auto;width:66.66666667%}.col-xxl-9{flex:0 0 auto;width:75%}.col-xxl-10{flex:0 0 auto;width:83.33333333%}.col-xxl-11{flex:0 0 auto;width:91.66666667%}.col-xxl-12{flex:0 0 auto;width:100%}.offset-xxl-0{margin-left:0}.offset-xxl-1{margin-left:8.33333333%}.offset-xxl-2{margin-left:16.66666667%}.offset-xxl-3{margin-left:25%}.offset-xxl-4{margin-left:33.33333333%}.offset-xxl-5{margin-left:41.66666667%}.offset-xxl-6{margin-left:50%}.offset-xxl-7{margin-left:58.33333333%}.offset-xxl-8{margin-left:66.66666667%}.offset-xxl-9{margin-left:75%}.offset-xxl-10{margin-left:83.33333333%}.offset-xxl-11{margin-left:91.66666667%}.g-xxl-0,.gx-xxl-0{--bs-gutter-x:0}.g-xxl-0,.gy-xxl-0{--bs-gutter-y:0}.g-xxl-1,.gx-xxl-1{--bs-gutter-x:0.25rem}.g-xxl-1,.gy-xxl-1{--bs-gutter-y:0.25rem}.g-xxl-2,.gx-xxl-2{--bs-gutter-x:0.5rem}.g-xxl-2,.gy-xxl-2{--bs-gutter-y:0.5rem}.g-xxl-3,.gx-xxl-3{--bs-gutter-x:1rem}.g-xxl-3,.gy-xxl-3{--bs-gutter-y:1rem}.g-xxl-4,.gx-xxl-4{--bs-gutter-x:1.5rem}.g-xxl-4,.gy-xxl-4{--bs-gutter-y:1.5rem}.g-xxl-5,.gx-xxl-5{--bs-gutter-x:3rem}.g-xxl-5,.gy-xxl-5{--bs-gutter-y:3rem}}.d-inline{display:inline!important}.d-inline-block{display:inline-block!important}.d-block{display:block!important}.d-grid{display:grid!important}.d-table{display:table!important}.d-table-row{display:table-row!important}.d-table-cell{display:table-cell!important}.d-flex{display:flex!important}.d-inline-flex{display:inline-flex!important}.d-none{display:none!important}.flex-fill{flex:1 1 auto!important}.flex-row{flex-direction:row!important}.flex-column{flex-direction:column!important}.flex-row-reverse{flex-direction:row-reverse!important}.flex-column-reverse{flex-direction:column-reverse!important}.flex-grow-0{flex-grow:0!important}.flex-grow-1{flex-grow:1!important}.flex-shrink-0{flex-shrink:0!important}.flex-shrink-1{flex-shrink:1!important}.flex-wrap{flex-wrap:wrap!important}.flex-nowrap{flex-wrap:nowrap!important}.flex-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-start{justify-content:flex-start!important}.justify-content-end{justify-content:flex-end!important}.justify-content-center{justify-content:center!important}.justify-content-between{justify-content:space-between!important}.justify-content-around{justify-content:space-around!important}.justify-content-evenly{justify-content:space-evenly!important}.align-items-start{align-items:flex-start!important}.align-items-end{align-items:flex-end!important}.align-items-center{align-items:center!important}.align-items-baseline{align-items:baseline!important}.align-items-stretch{align-items:stretch!important}.align-content-start{align-content:flex-start!important}.align-content-end{align-content:flex-end!important}.align-content-center{align-content:center!important}.align-content-between{align-content:space-between!important}.align-content-around{align-content:space-around!important}.align-content-stretch{align-content:stretch!important}.align-self-auto{align-self:auto!important}.align-self-start{align-self:flex-start!important}.align-self-end{align-self:flex-end!important}.align-self-center{align-self:center!important}.align-self-baseline{align-self:baseline!important}.align-self-stretch{align-self:stretch!important}.order-first{order:-1!important}.order-0{order:0!important}.order-1{order:1!important}.order-2{order:2!important}.order-3{order:3!important}.order-4{order:4!important}.order-5{order:5!important}.order-last{order:6!important}.m-0{margin:0!important}.m-1{margin:.25rem!important}.m-2{margin:.5rem!important}.m-3{margin:1rem!important}.m-4{margin:1.5rem!important}.m-5{margin:3rem!important}.m-auto{margin:auto!important}.mx-0{margin-right:0!important;margin-left:0!important}.mx-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-3{margin-right:1rem!important;margin-left:1rem!important}.mx-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-5{margin-right:3rem!important;margin-left:3rem!important}.mx-auto{margin-right:auto!important;margin-left:auto!important}.my-0{margin-top:0!important;margin-bottom:0!important}.my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-0{margin-top:0!important}.mt-1{margin-top:.25rem!important}.mt-2{margin-top:.5rem!important}.mt-3{margin-top:1rem!important}.mt-4{margin-top:1.5rem!important}.mt-5{margin-top:3rem!important}.mt-auto{margin-top:auto!important}.me-0{margin-right:0!important}.me-1{margin-right:.25rem!important}.me-2{margin-right:.5rem!important}.me-3{margin-right:1rem!important}.me-4{margin-right:1.5rem!important}.me-5{margin-right:3rem!important}.me-auto{margin-right:auto!important}.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:.25rem!important}.mb-2{margin-bottom:.5rem!important}.mb-3{margin-bottom:1rem!important}.mb-4{margin-bottom:1.5rem!important}.mb-5{margin-bottom:3rem!important}.mb-auto{margin-bottom:auto!important}.ms-0{margin-left:0!important}.ms-1{margin-left:.25rem!important}.ms-2{margin-left:.5rem!important}.ms-3{margin-left:1rem!important}.ms-4{margin-left:1.5rem!important}.ms-5{margin-left:3rem!important}.ms-auto{margin-left:auto!important}.p-0{padding:0!important}.p-1{padding:.25rem!important}.p-2{padding:.5rem!important}.p-3{padding:1rem!important}.p-4{padding:1.5rem!important}.p-5{padding:3rem!important}.px-0{padding-right:0!important;padding-left:0!important}.px-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-3{padding-right:1rem!important;padding-left:1rem!important}.px-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-5{padding-right:3rem!important;padding-left:3rem!important}.py-0{padding-top:0!important;padding-bottom:0!important}.py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-0{padding-top:0!important}.pt-1{padding-top:.25rem!important}.pt-2{padding-top:.5rem!important}.pt-3{padding-top:1rem!important}.pt-4{padding-top:1.5rem!important}.pt-5{padding-top:3rem!important}.pt-6{padding-top:5rem!important}.pt-7{padding-top:7rem!important}.pe-0{padding-right:0!important}.pe-1{padding-right:.25rem!important}.pe-2{padding-right:.5rem!important}.pe-3{padding-right:1rem!important}.pe-4{padding-right:1.5rem!important}.pe-5{padding-right:3rem!important}.pb-0{padding-bottom:0!important}.pb-1{padding-bottom:.25rem!important}.pb-2{padding-bottom:.5rem!important}.pb-3{padding-bottom:1rem!important}.pb-4{padding-bottom:1.5rem!important}.pb-5{padding-bottom:3rem!important}.pb-6{padding-bottom:5rem!important}.pb-7{padding-bottom:7rem!important}.ps-0{padding-left:0!important}.ps-1{padding-left:.25rem!important}.ps-2{padding-left:.5rem!important}.ps-3{padding-left:1rem!important}.ps-4{padding-left:1.5rem!important}.ps-5{padding-left:3rem!important}@media (min-width:576px){.d-sm-inline{display:inline!important}.d-sm-inline-block{display:inline-block!important}.d-sm-block{display:block!important}.d-sm-grid{display:grid!important}.d-sm-table{display:table!important}.d-sm-table-row{display:table-row!important}.d-sm-table-cell{display:table-cell!important}.d-sm-flex{display:flex!important}.d-sm-inline-flex{display:inline-flex!important}.d-sm-none{display:none!important}.flex-sm-fill{flex:1 1 auto!important}.flex-sm-row{flex-direction:row!important}.flex-sm-column{flex-direction:column!important}.flex-sm-row-reverse{flex-direction:row-reverse!important}.flex-sm-column-reverse{flex-direction:column-reverse!important}.flex-sm-grow-0{flex-grow:0!important}.flex-sm-grow-1{flex-grow:1!important}.flex-sm-shrink-0{flex-shrink:0!important}.flex-sm-shrink-1{flex-shrink:1!important}.flex-sm-wrap{flex-wrap:wrap!important}.flex-sm-nowrap{flex-wrap:nowrap!important}.flex-sm-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-sm-start{justify-content:flex-start!important}.justify-content-sm-end{justify-content:flex-end!important}.justify-content-sm-center{justify-content:center!important}.justify-content-sm-between{justify-content:space-between!important}.justify-content-sm-around{justify-content:space-around!important}.justify-content-sm-evenly{justify-content:space-evenly!important}.align-items-sm-start{align-items:flex-start!important}.align-items-sm-end{align-items:flex-end!important}.align-items-sm-center{align-items:center!important}.align-items-sm-baseline{align-items:baseline!important}.align-items-sm-stretch{align-items:stretch!important}.align-content-sm-start{align-content:flex-start!important}.align-content-sm-end{align-content:flex-end!important}.align-content-sm-center{align-content:center!important}.align-content-sm-between{align-content:space-between!important}.align-content-sm-around{align-content:space-around!important}.align-content-sm-stretch{align-content:stretch!important}.align-self-sm-auto{align-self:auto!important}.align-self-sm-start{align-self:flex-start!important}.align-self-sm-end{align-self:flex-end!important}.align-self-sm-center{align-self:center!important}.align-self-sm-baseline{align-self:baseline!important}.align-self-sm-stretch{align-self:stretch!important}.order-sm-first{order:-1!important}.order-sm-0{order:0!important}.order-sm-1{order:1!important}.order-sm-2{order:2!important}.order-sm-3{order:3!important}.order-sm-4{order:4!important}.order-sm-5{order:5!important}.order-sm-last{order:6!important}.m-sm-0{margin:0!important}.m-sm-1{margin:.25rem!important}.m-sm-2{margin:.5rem!important}.m-sm-3{margin:1rem!important}.m-sm-4{margin:1.5rem!important}.m-sm-5{margin:3rem!important}.m-sm-auto{margin:auto!important}.mx-sm-0{margin-right:0!important;margin-left:0!important}.mx-sm-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-sm-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-sm-3{margin-right:1rem!important;margin-left:1rem!important}.mx-sm-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-sm-5{margin-right:3rem!important;margin-left:3rem!important}.mx-sm-auto{margin-right:auto!important;margin-left:auto!important}.my-sm-0{margin-top:0!important;margin-bottom:0!important}.my-sm-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-sm-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-sm-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-sm-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-sm-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-sm-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-sm-0{margin-top:0!important}.mt-sm-1{margin-top:.25rem!important}.mt-sm-2{margin-top:.5rem!important}.mt-sm-3{margin-top:1rem!important}.mt-sm-4{margin-top:1.5rem!important}.mt-sm-5{margin-top:3rem!important}.mt-sm-auto{margin-top:auto!important}.me-sm-0{margin-right:0!important}.me-sm-1{margin-right:.25rem!important}.me-sm-2{margin-right:.5rem!important}.me-sm-3{margin-right:1rem!important}.me-sm-4{margin-right:1.5rem!important}.me-sm-5{margin-right:3rem!important}.me-sm-auto{margin-right:auto!important}.mb-sm-0{margin-bottom:0!important}.mb-sm-1{margin-bottom:.25rem!important}.mb-sm-2{margin-bottom:.5rem!important}.mb-sm-3{margin-bottom:1rem!important}.mb-sm-4{margin-bottom:1.5rem!important}.mb-sm-5{margin-bottom:3rem!important}.mb-sm-auto{margin-bottom:auto!important}.ms-sm-0{margin-left:0!important}.ms-sm-1{margin-left:.25rem!important}.ms-sm-2{margin-left:.5rem!important}.ms-sm-3{margin-left:1rem!important}.ms-sm-4{margin-left:1.5rem!important}.ms-sm-5{margin-left:3rem!important}.ms-sm-auto{margin-left:auto!important}.p-sm-0{padding:0!important}.p-sm-1{padding:.25rem!important}.p-sm-2{padding:.5rem!important}.p-sm-3{padding:1rem!important}.p-sm-4{padding:1.5rem!important}.p-sm-5{padding:3rem!important}.px-sm-0{padding-right:0!important;padding-left:0!important}.px-sm-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-sm-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-sm-3{padding-right:1rem!important;padding-left:1rem!important}.px-sm-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-sm-5{padding-right:3rem!important;padding-left:3rem!important}.py-sm-0{padding-top:0!important;padding-bottom:0!important}.py-sm-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-sm-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-sm-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-sm-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-sm-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-sm-0{padding-top:0!important}.pt-sm-1{padding-top:.25rem!important}.pt-sm-2{padding-top:.5rem!important}.pt-sm-3{padding-top:1rem!important}.pt-sm-4{padding-top:1.5rem!important}.pt-sm-5{padding-top:3rem!important}.pt-sm-6{padding-top:5rem!important}.pt-sm-7{padding-top:7rem!important}.pe-sm-0{padding-right:0!important}.pe-sm-1{padding-right:.25rem!important}.pe-sm-2{padding-right:.5rem!important}.pe-sm-3{padding-right:1rem!important}.pe-sm-4{padding-right:1.5rem!important}.pe-sm-5{padding-right:3rem!important}.pb-sm-0{padding-bottom:0!important}.pb-sm-1{padding-bottom:.25rem!important}.pb-sm-2{padding-bottom:.5rem!important}.pb-sm-3{padding-bottom:1rem!important}.pb-sm-4{padding-bottom:1.5rem!important}.pb-sm-5{padding-bottom:3rem!important}.pb-sm-6{padding-bottom:5rem!important}.pb-sm-7{padding-bottom:7rem!important}.ps-sm-0{padding-left:0!important}.ps-sm-1{padding-left:.25rem!important}.ps-sm-2{padding-left:.5rem!important}.ps-sm-3{padding-left:1rem!important}.ps-sm-4{padding-left:1.5rem!important}.ps-sm-5{padding-left:3rem!important}}@media (min-width:768px){.d-md-inline{display:inline!important}.d-md-inline-block{display:inline-block!important}.d-md-block{display:block!important}.d-md-grid{display:grid!important}.d-md-table{display:table!important}.d-md-table-row{display:table-row!important}.d-md-table-cell{display:table-cell!important}.d-md-flex{display:flex!important}.d-md-inline-flex{display:inline-flex!important}.d-md-none{display:none!important}.flex-md-fill{flex:1 1 auto!important}.flex-md-row{flex-direction:row!important}.flex-md-column{flex-direction:column!important}.flex-md-row-reverse{flex-direction:row-reverse!important}.flex-md-column-reverse{flex-direction:column-reverse!important}.flex-md-grow-0{flex-grow:0!important}.flex-md-grow-1{flex-grow:1!important}.flex-md-shrink-0{flex-shrink:0!important}.flex-md-shrink-1{flex-shrink:1!important}.flex-md-wrap{flex-wrap:wrap!important}.flex-md-nowrap{flex-wrap:nowrap!important}.flex-md-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-md-start{justify-content:flex-start!important}.justify-content-md-end{justify-content:flex-end!important}.justify-content-md-center{justify-content:center!important}.justify-content-md-between{justify-content:space-between!important}.justify-content-md-around{justify-content:space-around!important}.justify-content-md-evenly{justify-content:space-evenly!important}.align-items-md-start{align-items:flex-start!important}.align-items-md-end{align-items:flex-end!important}.align-items-md-center{align-items:center!important}.align-items-md-baseline{align-items:baseline!important}.align-items-md-stretch{align-items:stretch!important}.align-content-md-start{align-content:flex-start!important}.align-content-md-end{align-content:flex-end!important}.align-content-md-center{align-content:center!important}.align-content-md-between{align-content:space-between!important}.align-content-md-around{align-content:space-around!important}.align-content-md-stretch{align-content:stretch!important}.align-self-md-auto{align-self:auto!important}.align-self-md-start{align-self:flex-start!important}.align-self-md-end{align-self:flex-end!important}.align-self-md-center{align-self:center!important}.align-self-md-baseline{align-self:baseline!important}.align-self-md-stretch{align-self:stretch!important}.order-md-first{order:-1!important}.order-md-0{order:0!important}.order-md-1{order:1!important}.order-md-2{order:2!important}.order-md-3{order:3!important}.order-md-4{order:4!important}.order-md-5{order:5!important}.order-md-last{order:6!important}.m-md-0{margin:0!important}.m-md-1{margin:.25rem!important}.m-md-2{margin:.5rem!important}.m-md-3{margin:1rem!important}.m-md-4{margin:1.5rem!important}.m-md-5{margin:3rem!important}.m-md-auto{margin:auto!important}.mx-md-0{margin-right:0!important;margin-left:0!important}.mx-md-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-md-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-md-3{margin-right:1rem!important;margin-left:1rem!important}.mx-md-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-md-5{margin-right:3rem!important;margin-left:3rem!important}.mx-md-auto{margin-right:auto!important;margin-left:auto!important}.my-md-0{margin-top:0!important;margin-bottom:0!important}.my-md-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-md-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-md-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-md-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-md-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-md-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-md-0{margin-top:0!important}.mt-md-1{margin-top:.25rem!important}.mt-md-2{margin-top:.5rem!important}.mt-md-3{margin-top:1rem!important}.mt-md-4{margin-top:1.5rem!important}.mt-md-5{margin-top:3rem!important}.mt-md-auto{margin-top:auto!important}.me-md-0{margin-right:0!important}.me-md-1{margin-right:.25rem!important}.me-md-2{margin-right:.5rem!important}.me-md-3{margin-right:1rem!important}.me-md-4{margin-right:1.5rem!important}.me-md-5{margin-right:3rem!important}.me-md-auto{margin-right:auto!important}.mb-md-0{margin-bottom:0!important}.mb-md-1{margin-bottom:.25rem!important}.mb-md-2{margin-bottom:.5rem!important}.mb-md-3{margin-bottom:1rem!important}.mb-md-4{margin-bottom:1.5rem!important}.mb-md-5{margin-bottom:3rem!important}.mb-md-auto{margin-bottom:auto!important}.ms-md-0{margin-left:0!important}.ms-md-1{margin-left:.25rem!important}.ms-md-2{margin-left:.5rem!important}.ms-md-3{margin-left:1rem!important}.ms-md-4{margin-left:1.5rem!important}.ms-md-5{margin-left:3rem!important}.ms-md-auto{margin-left:auto!important}.p-md-0{padding:0!important}.p-md-1{padding:.25rem!important}.p-md-2{padding:.5rem!important}.p-md-3{padding:1rem!important}.p-md-4{padding:1.5rem!important}.p-md-5{padding:3rem!important}.px-md-0{padding-right:0!important;padding-left:0!important}.px-md-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-md-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-md-3{padding-right:1rem!important;padding-left:1rem!important}.px-md-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-md-5{padding-right:3rem!important;padding-left:3rem!important}.py-md-0{padding-top:0!important;padding-bottom:0!important}.py-md-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-md-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-md-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-md-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-md-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-md-0{padding-top:0!important}.pt-md-1{padding-top:.25rem!important}.pt-md-2{padding-top:.5rem!important}.pt-md-3{padding-top:1rem!important}.pt-md-4{padding-top:1.5rem!important}.pt-md-5{padding-top:3rem!important}.pt-md-6{padding-top:5rem!important}.pt-md-7{padding-top:7rem!important}.pe-md-0{padding-right:0!important}.pe-md-1{padding-right:.25rem!important}.pe-md-2{padding-right:.5rem!important}.pe-md-3{padding-right:1rem!important}.pe-md-4{padding-right:1.5rem!important}.pe-md-5{padding-right:3rem!important}.pb-md-0{padding-bottom:0!important}.pb-md-1{padding-bottom:.25rem!important}.pb-md-2{padding-bottom:.5rem!important}.pb-md-3{padding-bottom:1rem!important}.pb-md-4{padding-bottom:1.5rem!important}.pb-md-5{padding-bottom:3rem!important}.pb-md-6{padding-bottom:5rem!important}.pb-md-7{padding-bottom:7rem!important}.ps-md-0{padding-left:0!important}.ps-md-1{padding-left:.25rem!important}.ps-md-2{padding-left:.5rem!important}.ps-md-3{padding-left:1rem!important}.ps-md-4{padding-left:1.5rem!important}.ps-md-5{padding-left:3rem!important}}@media (min-width:992px){.d-lg-inline{display:inline!important}.d-lg-inline-block{display:inline-block!important}.d-lg-block{display:block!important}.d-lg-grid{display:grid!important}.d-lg-table{display:table!important}.d-lg-table-row{display:table-row!important}.d-lg-table-cell{display:table-cell!important}.d-lg-flex{display:flex!important}.d-lg-inline-flex{display:inline-flex!important}.d-lg-none{display:none!important}.flex-lg-fill{flex:1 1 auto!important}.flex-lg-row{flex-direction:row!important}.flex-lg-column{flex-direction:column!important}.flex-lg-row-reverse{flex-direction:row-reverse!important}.flex-lg-column-reverse{flex-direction:column-reverse!important}.flex-lg-grow-0{flex-grow:0!important}.flex-lg-grow-1{flex-grow:1!important}.flex-lg-shrink-0{flex-shrink:0!important}.flex-lg-shrink-1{flex-shrink:1!important}.flex-lg-wrap{flex-wrap:wrap!important}.flex-lg-nowrap{flex-wrap:nowrap!important}.flex-lg-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-lg-start{justify-content:flex-start!important}.justify-content-lg-end{justify-content:flex-end!important}.justify-content-lg-center{justify-content:center!important}.justify-content-lg-between{justify-content:space-between!important}.justify-content-lg-around{justify-content:space-around!important}.justify-content-lg-evenly{justify-content:space-evenly!important}.align-items-lg-start{align-items:flex-start!important}.align-items-lg-end{align-items:flex-end!important}.align-items-lg-center{align-items:center!important}.align-items-lg-baseline{align-items:baseline!important}.align-items-lg-stretch{align-items:stretch!important}.align-content-lg-start{align-content:flex-start!important}.align-content-lg-end{align-content:flex-end!important}.align-content-lg-center{align-content:center!important}.align-content-lg-between{align-content:space-between!important}.align-content-lg-around{align-content:space-around!important}.align-content-lg-stretch{align-content:stretch!important}.align-self-lg-auto{align-self:auto!important}.align-self-lg-start{align-self:flex-start!important}.align-self-lg-end{align-self:flex-end!important}.align-self-lg-center{align-self:center!important}.align-self-lg-baseline{align-self:baseline!important}.align-self-lg-stretch{align-self:stretch!important}.order-lg-first{order:-1!important}.order-lg-0{order:0!important}.order-lg-1{order:1!important}.order-lg-2{order:2!important}.order-lg-3{order:3!important}.order-lg-4{order:4!important}.order-lg-5{order:5!important}.order-lg-last{order:6!important}.m-lg-0{margin:0!important}.m-lg-1{margin:.25rem!important}.m-lg-2{margin:.5rem!important}.m-lg-3{margin:1rem!important}.m-lg-4{margin:1.5rem!important}.m-lg-5{margin:3rem!important}.m-lg-auto{margin:auto!important}.mx-lg-0{margin-right:0!important;margin-left:0!important}.mx-lg-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-lg-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-lg-3{margin-right:1rem!important;margin-left:1rem!important}.mx-lg-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-lg-5{margin-right:3rem!important;margin-left:3rem!important}.mx-lg-auto{margin-right:auto!important;margin-left:auto!important}.my-lg-0{margin-top:0!important;margin-bottom:0!important}.my-lg-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-lg-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-lg-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-lg-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-lg-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-lg-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-lg-0{margin-top:0!important}.mt-lg-1{margin-top:.25rem!important}.mt-lg-2{margin-top:.5rem!important}.mt-lg-3{margin-top:1rem!important}.mt-lg-4{margin-top:1.5rem!important}.mt-lg-5{margin-top:3rem!important}.mt-lg-auto{margin-top:auto!important}.me-lg-0{margin-right:0!important}.me-lg-1{margin-right:.25rem!important}.me-lg-2{margin-right:.5rem!important}.me-lg-3{margin-right:1rem!important}.me-lg-4{margin-right:1.5rem!important}.me-lg-5{margin-right:3rem!important}.me-lg-auto{margin-right:auto!important}.mb-lg-0{margin-bottom:0!important}.mb-lg-1{margin-bottom:.25rem!important}.mb-lg-2{margin-bottom:.5rem!important}.mb-lg-3{margin-bottom:1rem!important}.mb-lg-4{margin-bottom:1.5rem!important}.mb-lg-5{margin-bottom:3rem!important}.mb-lg-auto{margin-bottom:auto!important}.ms-lg-0{margin-left:0!important}.ms-lg-1{margin-left:.25rem!important}.ms-lg-2{margin-left:.5rem!important}.ms-lg-3{margin-left:1rem!important}.ms-lg-4{margin-left:1.5rem!important}.ms-lg-5{margin-left:3rem!important}.ms-lg-auto{margin-left:auto!important}.p-lg-0{padding:0!important}.p-lg-1{padding:.25rem!important}.p-lg-2{padding:.5rem!important}.p-lg-3{padding:1rem!important}.p-lg-4{padding:1.5rem!important}.p-lg-5{padding:3rem!important}.px-lg-0{padding-right:0!important;padding-left:0!important}.px-lg-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-lg-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-lg-3{padding-right:1rem!important;padding-left:1rem!important}.px-lg-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-lg-5{padding-right:3rem!important;padding-left:3rem!important}.py-lg-0{padding-top:0!important;padding-bottom:0!important}.py-lg-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-lg-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-lg-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-lg-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-lg-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-lg-0{padding-top:0!important}.pt-lg-1{padding-top:.25rem!important}.pt-lg-2{padding-top:.5rem!important}.pt-lg-3{padding-top:1rem!important}.pt-lg-4{padding-top:1.5rem!important}.pt-lg-5{padding-top:3rem!important}.pt-lg-6{padding-top:5rem!important}.pt-lg-7{padding-top:7rem!important}.pe-lg-0{padding-right:0!important}.pe-lg-1{padding-right:.25rem!important}.pe-lg-2{padding-right:.5rem!important}.pe-lg-3{padding-right:1rem!important}.pe-lg-4{padding-right:1.5rem!important}.pe-lg-5{padding-right:3rem!important}.pb-lg-0{padding-bottom:0!important}.pb-lg-1{padding-bottom:.25rem!important}.pb-lg-2{padding-bottom:.5rem!important}.pb-lg-3{padding-bottom:1rem!important}.pb-lg-4{padding-bottom:1.5rem!important}.pb-lg-5{padding-bottom:3rem!important}.pb-lg-6{padding-bottom:5rem!important}.pb-lg-7{padding-bottom:7rem!important}.ps-lg-0{padding-left:0!important}.ps-lg-1{padding-left:.25rem!important}.ps-lg-2{padding-left:.5rem!important}.ps-lg-3{padding-left:1rem!important}.ps-lg-4{padding-left:1.5rem!important}.ps-lg-5{padding-left:3rem!important}}@media (min-width:1200px){.d-xl-inline{display:inline!important}.d-xl-inline-block{display:inline-block!important}.d-xl-block{display:block!important}.d-xl-grid{display:grid!important}.d-xl-table{display:table!important}.d-xl-table-row{display:table-row!important}.d-xl-table-cell{display:table-cell!important}.d-xl-flex{display:flex!important}.d-xl-inline-flex{display:inline-flex!important}.d-xl-none{display:none!important}.flex-xl-fill{flex:1 1 auto!important}.flex-xl-row{flex-direction:row!important}.flex-xl-column{flex-direction:column!important}.flex-xl-row-reverse{flex-direction:row-reverse!important}.flex-xl-column-reverse{flex-direction:column-reverse!important}.flex-xl-grow-0{flex-grow:0!important}.flex-xl-grow-1{flex-grow:1!important}.flex-xl-shrink-0{flex-shrink:0!important}.flex-xl-shrink-1{flex-shrink:1!important}.flex-xl-wrap{flex-wrap:wrap!important}.flex-xl-nowrap{flex-wrap:nowrap!important}.flex-xl-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-xl-start{justify-content:flex-start!important}.justify-content-xl-end{justify-content:flex-end!important}.justify-content-xl-center{justify-content:center!important}.justify-content-xl-between{justify-content:space-between!important}.justify-content-xl-around{justify-content:space-around!important}.justify-content-xl-evenly{justify-content:space-evenly!important}.align-items-xl-start{align-items:flex-start!important}.align-items-xl-end{align-items:flex-end!important}.align-items-xl-center{align-items:center!important}.align-items-xl-baseline{align-items:baseline!important}.align-items-xl-stretch{align-items:stretch!important}.align-content-xl-start{align-content:flex-start!important}.align-content-xl-end{align-content:flex-end!important}.align-content-xl-center{align-content:center!important}.align-content-xl-between{align-content:space-between!important}.align-content-xl-around{align-content:space-around!important}.align-content-xl-stretch{align-content:stretch!important}.align-self-xl-auto{align-self:auto!important}.align-self-xl-start{align-self:flex-start!important}.align-self-xl-end{align-self:flex-end!important}.align-self-xl-center{align-self:center!important}.align-self-xl-baseline{align-self:baseline!important}.align-self-xl-stretch{align-self:stretch!important}.order-xl-first{order:-1!important}.order-xl-0{order:0!important}.order-xl-1{order:1!important}.order-xl-2{order:2!important}.order-xl-3{order:3!important}.order-xl-4{order:4!important}.order-xl-5{order:5!important}.order-xl-last{order:6!important}.m-xl-0{margin:0!important}.m-xl-1{margin:.25rem!important}.m-xl-2{margin:.5rem!important}.m-xl-3{margin:1rem!important}.m-xl-4{margin:1.5rem!important}.m-xl-5{margin:3rem!important}.m-xl-auto{margin:auto!important}.mx-xl-0{margin-right:0!important;margin-left:0!important}.mx-xl-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-xl-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-xl-3{margin-right:1rem!important;margin-left:1rem!important}.mx-xl-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-xl-5{margin-right:3rem!important;margin-left:3rem!important}.mx-xl-auto{margin-right:auto!important;margin-left:auto!important}.my-xl-0{margin-top:0!important;margin-bottom:0!important}.my-xl-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-xl-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-xl-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-xl-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-xl-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-xl-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-xl-0{margin-top:0!important}.mt-xl-1{margin-top:.25rem!important}.mt-xl-2{margin-top:.5rem!important}.mt-xl-3{margin-top:1rem!important}.mt-xl-4{margin-top:1.5rem!important}.mt-xl-5{margin-top:3rem!important}.mt-xl-auto{margin-top:auto!important}.me-xl-0{margin-right:0!important}.me-xl-1{margin-right:.25rem!important}.me-xl-2{margin-right:.5rem!important}.me-xl-3{margin-right:1rem!important}.me-xl-4{margin-right:1.5rem!important}.me-xl-5{margin-right:3rem!important}.me-xl-auto{margin-right:auto!important}.mb-xl-0{margin-bottom:0!important}.mb-xl-1{margin-bottom:.25rem!important}.mb-xl-2{margin-bottom:.5rem!important}.mb-xl-3{margin-bottom:1rem!important}.mb-xl-4{margin-bottom:1.5rem!important}.mb-xl-5{margin-bottom:3rem!important}.mb-xl-auto{margin-bottom:auto!important}.ms-xl-0{margin-left:0!important}.ms-xl-1{margin-left:.25rem!important}.ms-xl-2{margin-left:.5rem!important}.ms-xl-3{margin-left:1rem!important}.ms-xl-4{margin-left:1.5rem!important}.ms-xl-5{margin-left:3rem!important}.ms-xl-auto{margin-left:auto!important}.p-xl-0{padding:0!important}.p-xl-1{padding:.25rem!important}.p-xl-2{padding:.5rem!important}.p-xl-3{padding:1rem!important}.p-xl-4{padding:1.5rem!important}.p-xl-5{padding:3rem!important}.px-xl-0{padding-right:0!important;padding-left:0!important}.px-xl-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-xl-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-xl-3{padding-right:1rem!important;padding-left:1rem!important}.px-xl-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-xl-5{padding-right:3rem!important;padding-left:3rem!important}.py-xl-0{padding-top:0!important;padding-bottom:0!important}.py-xl-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-xl-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-xl-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-xl-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-xl-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-xl-0{padding-top:0!important}.pt-xl-1{padding-top:.25rem!important}.pt-xl-2{padding-top:.5rem!important}.pt-xl-3{padding-top:1rem!important}.pt-xl-4{padding-top:1.5rem!important}.pt-xl-5{padding-top:3rem!important}.pt-xl-6{padding-top:5rem!important}.pt-xl-7{padding-top:7rem!important}.pe-xl-0{padding-right:0!important}.pe-xl-1{padding-right:.25rem!important}.pe-xl-2{padding-right:.5rem!important}.pe-xl-3{padding-right:1rem!important}.pe-xl-4{padding-right:1.5rem!important}.pe-xl-5{padding-right:3rem!important}.pb-xl-0{padding-bottom:0!important}.pb-xl-1{padding-bottom:.25rem!important}.pb-xl-2{padding-bottom:.5rem!important}.pb-xl-3{padding-bottom:1rem!important}.pb-xl-4{padding-bottom:1.5rem!important}.pb-xl-5{padding-bottom:3rem!important}.pb-xl-6{padding-bottom:5rem!important}.pb-xl-7{padding-bottom:7rem!important}.ps-xl-0{padding-left:0!important}.ps-xl-1{padding-left:.25rem!important}.ps-xl-2{padding-left:.5rem!important}.ps-xl-3{padding-left:1rem!important}.ps-xl-4{padding-left:1.5rem!important}.ps-xl-5{padding-left:3rem!important}}@media (min-width:1400px){.d-xxl-inline{display:inline!important}.d-xxl-inline-block{display:inline-block!important}.d-xxl-block{display:block!important}.d-xxl-grid{display:grid!important}.d-xxl-table{display:table!important}.d-xxl-table-row{display:table-row!important}.d-xxl-table-cell{display:table-cell!important}.d-xxl-flex{display:flex!important}.d-xxl-inline-flex{display:inline-flex!important}.d-xxl-none{display:none!important}.flex-xxl-fill{flex:1 1 auto!important}.flex-xxl-row{flex-direction:row!important}.flex-xxl-column{flex-direction:column!important}.flex-xxl-row-reverse{flex-direction:row-reverse!important}.flex-xxl-column-reverse{flex-direction:column-reverse!important}.flex-xxl-grow-0{flex-grow:0!important}.flex-xxl-grow-1{flex-grow:1!important}.flex-xxl-shrink-0{flex-shrink:0!important}.flex-xxl-shrink-1{flex-shrink:1!important}.flex-xxl-wrap{flex-wrap:wrap!important}.flex-xxl-nowrap{flex-wrap:nowrap!important}.flex-xxl-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-xxl-start{justify-content:flex-start!important}.justify-content-xxl-end{justify-content:flex-end!important}.justify-content-xxl-center{justify-content:center!important}.justify-content-xxl-between{justify-content:space-between!important}.justify-content-xxl-around{justify-content:space-around!important}.justify-content-xxl-evenly{justify-content:space-evenly!important}.align-items-xxl-start{align-items:flex-start!important}.align-items-xxl-end{align-items:flex-end!important}.align-items-xxl-center{align-items:center!important}.align-items-xxl-baseline{align-items:baseline!important}.align-items-xxl-stretch{align-items:stretch!important}.align-content-xxl-start{align-content:flex-start!important}.align-content-xxl-end{align-content:flex-end!important}.align-content-xxl-center{align-content:center!important}.align-content-xxl-between{align-content:space-between!important}.align-content-xxl-around{align-content:space-around!important}.align-content-xxl-stretch{align-content:stretch!important}.align-self-xxl-auto{align-self:auto!important}.align-self-xxl-start{align-self:flex-start!important}.align-self-xxl-end{align-self:flex-end!important}.align-self-xxl-center{align-self:center!important}.align-self-xxl-baseline{align-self:baseline!important}.align-self-xxl-stretch{align-self:stretch!important}.order-xxl-first{order:-1!important}.order-xxl-0{order:0!important}.order-xxl-1{order:1!important}.order-xxl-2{order:2!important}.order-xxl-3{order:3!important}.order-xxl-4{order:4!important}.order-xxl-5{order:5!important}.order-xxl-last{order:6!important}.m-xxl-0{margin:0!important}.m-xxl-1{margin:.25rem!important}.m-xxl-2{margin:.5rem!important}.m-xxl-3{margin:1rem!important}.m-xxl-4{margin:1.5rem!important}.m-xxl-5{margin:3rem!important}.m-xxl-auto{margin:auto!important}.mx-xxl-0{margin-right:0!important;margin-left:0!important}.mx-xxl-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-xxl-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-xxl-3{margin-right:1rem!important;margin-left:1rem!important}.mx-xxl-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-xxl-5{margin-right:3rem!important;margin-left:3rem!important}.mx-xxl-auto{margin-right:auto!important;margin-left:auto!important}.my-xxl-0{margin-top:0!important;margin-bottom:0!important}.my-xxl-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-xxl-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-xxl-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-xxl-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-xxl-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-xxl-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-xxl-0{margin-top:0!important}.mt-xxl-1{margin-top:.25rem!important}.mt-xxl-2{margin-top:.5rem!important}.mt-xxl-3{margin-top:1rem!important}.mt-xxl-4{margin-top:1.5rem!important}.mt-xxl-5{margin-top:3rem!important}.mt-xxl-auto{margin-top:auto!important}.me-xxl-0{margin-right:0!important}.me-xxl-1{margin-right:.25rem!important}.me-xxl-2{margin-right:.5rem!important}.me-xxl-3{margin-right:1rem!important}.me-xxl-4{margin-right:1.5rem!important}.me-xxl-5{margin-right:3rem!important}.me-xxl-auto{margin-right:auto!important}.mb-xxl-0{margin-bottom:0!important}.mb-xxl-1{margin-bottom:.25rem!important}.mb-xxl-2{margin-bottom:.5rem!important}.mb-xxl-3{margin-bottom:1rem!important}.mb-xxl-4{margin-bottom:1.5rem!important}.mb-xxl-5{margin-bottom:3rem!important}.mb-xxl-auto{margin-bottom:auto!important}.ms-xxl-0{margin-left:0!important}.ms-xxl-1{margin-left:.25rem!important}.ms-xxl-2{margin-left:.5rem!important}.ms-xxl-3{margin-left:1rem!important}.ms-xxl-4{margin-left:1.5rem!important}.ms-xxl-5{margin-left:3rem!important}.ms-xxl-auto{margin-left:auto!important}.p-xxl-0{padding:0!important}.p-xxl-1{padding:.25rem!important}.p-xxl-2{padding:.5rem!important}.p-xxl-3{padding:1rem!important}.p-xxl-4{padding:1.5rem!important}.p-xxl-5{padding:3rem!important}.px-xxl-0{padding-right:0!important;padding-left:0!important}.px-xxl-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-xxl-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-xxl-3{padding-right:1rem!important;padding-left:1rem!important}.px-xxl-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-xxl-5{padding-right:3rem!important;padding-left:3rem!important}.py-xxl-0{padding-top:0!important;padding-bottom:0!important}.py-xxl-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-xxl-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-xxl-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-xxl-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-xxl-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-xxl-0{padding-top:0!important}.pt-xxl-1{padding-top:.25rem!important}.pt-xxl-2{padding-top:.5rem!important}.pt-xxl-3{padding-top:1rem!important}.pt-xxl-4{padding-top:1.5rem!important}.pt-xxl-5{padding-top:3rem!important}.pt-xxl-6{padding-top:5rem!important}.pt-xxl-7{padding-top:7rem!important}.pe-xxl-0{padding-right:0!important}.pe-xxl-1{padding-right:.25rem!important}.pe-xxl-2{padding-right:.5rem!important}.pe-xxl-3{padding-right:1rem!important}.pe-xxl-4{padding-right:1.5rem!important}.pe-xxl-5{padding-right:3rem!important}.pb-xxl-0{padding-bottom:0!important}.pb-xxl-1{padding-bottom:.25rem!important}.pb-xxl-2{padding-bottom:.5rem!important}.pb-xxl-3{padding-bottom:1rem!important}.pb-xxl-4{padding-bottom:1.5rem!important}.pb-xxl-5{padding-bottom:3rem!important}.pb-xxl-6{padding-bottom:5rem!important}.pb-xxl-7{padding-bottom:7rem!important}.ps-xxl-0{padding-left:0!important}.ps-xxl-1{padding-left:.25rem!important}.ps-xxl-2{padding-left:.5rem!important}.ps-xxl-3{padding-left:1rem!important}.ps-xxl-4{padding-left:1.5rem!important}.ps-xxl-5{padding-left:3rem!important}}@media print{.d-print-inline{display:inline!important}.d-print-inline-block{display:inline-block!important}.d-print-block{display:block!important}.d-print-grid{display:grid!important}.d-print-table{display:table!important}.d-print-table-row{display:table-row!important}.d-print-table-cell{display:table-cell!important}.d-print-flex{display:flex!important}.d-print-inline-flex{display:inline-flex!important}.d-print-none{display:none!important}}
/*# sourceMappingURL=bootstrap-grid.min.css.map */
/* engine-v2.css */
/* =========================================================================
Motor v2 – grundstilar för taggarnas utdata.
Laddas bara för sajter med render-engine = 2. Se docs/ENGINE-V2.md.
Motor 1 satte de här värdena som inline-stilar. Här ligger de i ett eget
lager (pb.base), så att temats och kundens CSS alltid vinner utan !important.
Värden som kunden ställer in kommer som CSS-variabler från motorn:
--pb-focus bildens fokuspunkt
--pb-bg-image bakgrundsbild
--pb-section-bg bakgrundsfärg från [style]
--pb-model-ratio 3D-modellens proportioner ([model ratio='…'])
========================================================================= */
@layer pb.base {
.pb-image {
width: 100%;
object-position: var(--pb-focus, 50% 50%);
}
.pb-bg {
background-image: var(--pb-bg-image);
background-position: var(--pb-focus, center);
}
.has-bg {
background-color: var(--pb-section-bg);
}
.pb-buttons .pb-button {
/* Som motor 1:s "link"-klass – utan den hamnar knappens padding över texten ovanför. */
display: inline-block;
text-decoration: none;
margin-top: var(--pb-button-gap-top, 1.5rem);
margin-right: var(--pb-button-gap, 1rem);
}
/* Köpknapp på produktkortet ([card-add]). */
.shop-card__add {
display: inline-block;
margin-top: .75rem;
text-decoration: none;
cursor: pointer;
}
.shop-card__add--soldout,
.shop-card__add[disabled] {
opacity: .55;
cursor: default;
}
.pb-video-cover {
position: absolute;
inset: 0;
z-index: 1;
}
.pb-video-cover > video {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 3D-modell ([model]). Höjden följer bredden: --pb-model-ratio (1/1), egen höjd med --pb-model-height. */
.pb-model {
position: relative;
width: 100%;
aspect-ratio: var(--pb-model-ratio, 1 / 1);
height: var(--pb-model-height, auto);
background: var(--pb-model-bg, transparent);
}
.pb-model > model-viewer {
display: block;
width: 100%;
height: 100%;
--poster-color: transparent;
--progress-bar-color: var(--color-primary, #111);
}
.pb-map {
width: 100%;
height: var(--pb-map-height, 300px);
border-radius: var(--pb-map-radius, 8px);
}
.pb-icon,
.pb-embed {
display: block;
width: 100%;
}
.pb-nav,
.pb-nav__sub {
list-style: none;
margin: 0;
padding: 0;
}
.pb-logo img {
display: block;
max-height: var(--pb-logo-height, 48px);
width: auto;
}
}
/* Appar per sajt (docs/APPAR.md): formulär från [app-action] */
@layer pb.base {
.pb-hp {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
.pb-app-status {
margin: 1rem 0 0;
}
.pb-app-status:empty {
display: none;
}
.pb-app-status.is-error,
.pb-field-error {
color: #b42318;
}
.pb-field-error {
margin: .35rem 0 0;
font-size: .875em;
}
.pb-app-form.is-sending {
opacity: .7;
}
.pb-app--missing {
padding: 2rem;
text-align: center;
border: 1px dashed currentColor;
opacity: .6;
}
}
/* pb.js (docs/PB-JS.md): tillstånd som skriptet sätter i formulär och på köpknappen. Teman kan skriva över. */
@layer pb.base {
.is-invalid {
border-color: #b42318 !important;
}
.pb-form-error {
margin: 0.75rem 0;
color: #b42318;
}
.pb-form-error[hidden] {
display: none;
}
.is-loading,
.is-sending [data-pb~="form.submit"] {
opacity: 0.6;
pointer-events: none;
}
}
/* =========================================================================
Kassan på motor 2 (gamla sajter laddar inte den här filen).
Utanför lagret med flit: shop.css laddas efter och måste slås med specificitet.
Temat kan skriva över med lika specifika selektorer.
========================================================================= */
.checkout-bar .checkout-bar__name {
margin: 0;
font-family: var(--font-family-header);
font-size: 1.25rem;
font-weight: 600;
}
.checkout-bar > a {
color: var(--color-primary);
text-decoration: none;
}
.checkout-card .cart-price,
.checkout-card .cart-quantity {
white-space: nowrap;
}
.checkout-card .cart-discount-form button {
background: var(--color-button-primary);
color: var(--color-button-primary-text);
border-radius: var(--button-radius);
}
.checkout-card .cart-discount-remove {
color: var(--color-primary);
}
@media (max-width: 767.98px) {
.checkout-card .cart-row {
gap: 10px;
padding: 10px 4px;
}
.checkout-card .cart-row .cart-image {
flex: 0 0 56px;
}
.checkout-card .cart-row .cart-image > img {
width: 100%;
}
button.js-pay-submit {
display: block;
width: 100%;
}
}