:root {
    --main-color: #333;
    --brown: #8b6945;
    --grey: #EDE5DB;
    --cherry: #801B2B;
    --cherry-dark: #4d101e;
    --bt-hover: brightness(110%);
    --green: hsl(33deg 33% 89% / 50%);
    --warm: #7bd45a;

    --fade-bt: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);

    --font-sans: 'Plus Jakarta Sans', sans-serif;
    --font-serif: the-seasons, sans-serif;
    --italic: italic;

    --mw-super: calc(1240px + 2rem);
    --mw-full: calc(1120px + 2rem);
    --mw-md: calc(960px + 2rem);
    --mw-sm: calc(800px + 2rem);
}

/**************** 
 
 BASIC RESET 

****************/

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
*,
::after,
::before {
    box-sizing: border-box;
}
body.home,
html.home {
    height: 100%;
    scroll-behavior: smooth;
}
html {
    scroll-behavior: smooth;
}
canvas,
img,
picture,
svg,
video {
    display: block;
    max-width: 100%;
}
address {
    font-style: normal;
}
button,
input,
select,
textarea {
    font: inherit;
    color: var(--main-color);
}
fieldset {
    margin: 0;
    padding: 0;
    border-width: 0;
}
*,
h5,
h6,
p {
    margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
    overflow-wrap: break-word;
    padding: 0;
}
p {
    margin-bottom: 1rem;
    text-wrap: pretty;
}
dd, ol, ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
footer {
    text-align: center;
    font-size: 12px;
    padding: 1rem 0;
    background: var(--beige);
}
body {
    color: var(--main-color);
    background-color: var(--beige-light);
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 1em;
    line-height: 1.5em;
    width: 100%;
    position: relative;
    font-optical-sizing: auto;
}
main {
    position: relative;
}
h1,
h2,
h3,
h4 {
    line-height: 1.2em;
    text-wrap: balance;
    margin-bottom: .25em;
    font-weight: 700;
    font-family: var(--font-sans);
}
h1 {
    font-size: 3rem;
    line-height: 1;
}
h2 {
    font-size: 3rem;
}

a {
    color: var(--brown);
    text-decoration: none;
}

p a {text-decoration: underline;}

b, strong {
    font-weight: 600;
}

.hidden, .button.hidden {
    display: none;
}

div#spec-success {
    background: #ddffdd;
    padding: 1rem;
}

/****************
 
 BASIC UTILITIES 

 ****************/

.mxauto {margin-left: auto; margin-right: auto;}

.mt05   {margin-top: .5rem;}
.mt1    {margin-top: 1rem;}
.mt15   {margin-top: 1.5rem;}
.mt2    {margin-top: 2rem;}
.mt3    {margin-top: 3rem;}
.mt4    {margin-top: 4rem;}
.mt5    {margin-top: 5rem;}
.mt6    {margin-top: 6rem;}
.mt7    {margin-top: 7rem;}

.mb0    {margin-bottom: 0;}
.mb1    {margin-bottom: 1rem;}
.mb2    {margin-bottom: 2rem;}
.mb3    {margin-bottom: 3rem;}
.mb4    {margin-bottom: 4rem;}

.my4    {margin-top: 4rem; margin-bottom: 4rem;}

.mx2    {margin-right: 2rem; margin-left: 2rem;}

.pt1    {padding-top: 1rem;}
.pb3    {padding-bottom: 3rem;}
.pl3    {padding-left: 3rem;}

.px15   {padding-left: 1.5rem; padding-right: 1.5rem;}
.px2    {padding-left: 2rem; padding-right: 2rem;}

.p2     {padding: 2rem;}  



.grid   {display: grid}
.flex   {display: flex;}
.center {justify-content: center;}
.left   {justify-content: flex-start;}
.right  {justify-content: flex-end;}
.vcenter{align-items: center;}
.vtop   {align-items: flex-start;}
.gap0   {gap: 0}
.gap1   {gap: 1rem}
.gap2   {gap: 2rem}
.gap3   {gap: 3rem}
.gap4   {gap: 4rem}
.gap5   {gap: 5rem}
.gap6   {/* gap: 6rem; */}
.left   {text-align: left}

.col.d6 {flex: 0 0 50%;}

.d-hide {display: none!important;}

.italic {font-style: var(--italic);}
.serif  {font-family: var(--font-serif);}

.br4    {border-radius: 4px;}


/****************
 
  BUTTONS 
 
 ****************/

.bt-gr {
    display: flex;
    gap: 1rem;
}

.button {
    background: var(--cherry);
    display: flex;
    align-items: center;
    padding: .8em 1em 0.9em;
    border-radius: 10px;
    color: #eee;
    border: 1px solid var(--cherry);
    font-weight: 500;
    font-size: 15px;
    cursor: pointer;
    line-height: 1;
    text-align: center;
}

.button:hover {
    -webkit-filter: var(--bt-hover);
}

.button.ghost {
    color: var(--main-color);
    border-color: #ddd;
    background: #fff;
}

.button.white {
    border-color: #fff;
    color: #fff;
}

.button.dark {
    background: var(--cherry-dark);
    color: #ddd;
    border-color: var(--cherry-dark);
}

.button.nobg {
    background: none;
    border-color: var(--main-color);
    color: var(--main-color);
}

.button.submitting {
    background: var(--brown) url(../images/loading.gif) no-repeat 1rem 50% / 1rem;
    padding-left: 2.5em;
}

button.button {
    /* height: calc(3em - 4px); */
}

.button.lg {
    font-size: 20px;
    font-weight: 400;
}

/**************** 

 HEADER AND HAM 

 ****************/

.header {
    position: fixed;
    display: flex;
    justify-content: space-between;
    width: 100%;
    z-index: 10;
    padding: 2.5rem 5rem;
    align-items: center;
    background: linear-gradient(180deg, rgba(2,0,36,0.6) 0%, rgba(2,0,36,0) 100%);
    /*top: -184px;*/
    transition: background .5s;
    top: 0;
}

.header.sticky-header {
    opacity: 1;
    top: 0;
    padding: 5rem;
    background: var(--cherry);
    padding: 2.5rem 5rem;
}

.header .logo {
    transition: transform .5s;
    transform-origin: left center;
    transform: scale(1);
}

.header.sticky-header .logo {
    opacity: 1;
    /*transition: transform .5s;
    transform: scale(0.8);
    transform-origin: left center;*/
}

.ham {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    flex-direction: column;
    width: 43px;
    cursor: pointer;
}

.ham span {
    background: #fff;
    height: 3px;
    display: block;
}

.ham span:nth-child(2) {
    opacity: .7;
    margin-left: 5px;
}

.ham span:nth-child(3) {
    opacity: .5;
    margin-left: 15px;
}

.header a {
    color: #fff;
    font-size: 2.5rem;
    font-family: var(--font-serif);
}

.ham-nav {
    position: fixed;
    width: 50vw;
    right: -50vw;
    top: 0;
    min-height: 100svh;
    background: var(--cherry);
    transition: right ease .5s;
    z-index: 9999;
    font-size: 1.5rem;
    max-width: var(--mw-sm);
}

.ham-nav.nav-open {
    box-shadow: -1px 1px 40px hsl(var(--shadow-color) / 0.6);
    --shadow-color: 0deg 0% 20%;
    right: 0;
}

.ham-nav-wrapper {
    display: flex;
    padding: 5rem;
    align-items: flex-end;
    flex-wrap: wrap;
    -moz-column-gap: 2rem;
         column-gap: 2rem;
    row-gap: 2rem;
    color: #eee;
}

.ham-nav-wrapper a,
.nohero .ham-nav-wrapper a {
    display: block;
    padding: .5em;
    color: #ddd;
    font-family: var(--font-sans);
    font-size: 1.5rem;
}

.ham-nav a:hover {
    color: #eee;
}

/*.ham-nav-wrapper .main-menu a:nth-child(3) span {
    font-family: var(--font-serif);
    display: inline;
    margin: 0;
    font-size: 1.5rem;
}*/ 

.sub-menu {
    font-size: 18px;
}

.ham-nav-wrapper .ham-social a {
    padding: 0 .5em .5em;
}

span.close-ham {
    position: absolute;
    right: 2rem;
    top: 2rem;
    cursor: pointer;
}

.ham-contact-social {
    display: flex;
    font-size: 1rem;
    flex-basis: 100%;
    justify-content: space-between;
}

.ham-contact {
    display: flex;
    gap: 2rem;
    padding-left: 12px;
}

.ham-contact li {
    margin-bottom: .25rem;
}

.header .ham-contact a,
.header.nohero .ham-contact a {
    padding: 0;
    display: flex;
    align-items: center;
    margin-top: 0;
    font-size: 1rem;
    color: #ddd;
}

.ham-social img {
    width: 2rem;
}

.main-menu a, .sub-menu a {
    opacity: 0;
    display: flex;
}

.main-menu a span.logo-inline {
    font-size: 27px;
}

/**************** 

 OL 

 ****************/

.ol-wrapper {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    max-width: var(--mw-full);
    margin: 2rem auto;
}

.oc-price {
    flex-basis: 100%;
    padding: 1rem 0 0;
}

.oc-img-wrapper img {
    -o-object-fit: cover;
       object-fit: cover;
    aspect-ratio: 3/2;
}

.oc-overlay {
    font-size: 2rem;
    color: #fff;
    background: hsl(0deg 0% 0% / 60%);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    opacity: 0;
    transition: opacity .5s;
    text-align: center;
}

.oc-link {
    color: inherit;
    display: block;
    width: calc(33.33% - 1rem);
    padding: 0 .5rem;
    margin-bottom: 1rem;
}

.oc-link:hover .oc-overlay {
    opacity: 1;
}

.oc-link:hover .puff {
    border: 2px solid var(--cherry);
    transition: border .25s;
}

.ol .puff {
    border: 2px solid transparent;
    border-radius: 6px;
}

.oc-img-wrapper {
    position: relative;
}

.oc-facts {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
    gap: 1rem;
    font-size: 14px;
}

.oc-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    position: absolute;
    bottom: 0;
    background: var(--fade-bt);
    color: #fff;
    width: 100%;
    border-radius: 0 0 4px 4px;
    padding: 2rem 1rem 2rem;
}

.oc-content img {
    margin-right: .5rem;
    display: inline-block;
}

.oc-content h2.oc-sub-title,
.oc-content h3 {
    font-size: 1rem;
    margin: 0;
}

h3.oc-title {
    font-weight: 400;
    text-align: center;
}

h3.oc-sub-title {
    text-align: center;
    font-size: 1.25rem;
}

.oc-tag-wrapper {
    position: absolute;
    right: 2rem;
    top: 2rem;
    z-index: 9;
}

.oc-tag.bid,
.oc-tag.soon,
.oc-tag.sold {
    display: flex;
    background: var(--cherry);
    color: #fff;
    width: 5rem;
    height: 5rem;
    text-align: center;
    align-items: center;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.1;
    text-wrap: balance;
    padding-top: 5px;
}

.oc-tag.soon,
.oc-tag.sold {
    width: 4rem;
    height: 4rem;
    padding: 0;
}

.oc-tag.sold {
    background: var(--cherry-dark);
    justify-content: center;
    width: 3rem;
    height: 3rem;
}

/**************** 

 OB 

 ****************/

/* hero */

.ob-hero-wrapper {
    max-height: 100svh;
    overflow: hidden;
    position: relative;
}

.ob-hero-wrapper figure img {
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: 100%;
    max-height: 100svh;
}

.ob-hero-wrapper .bt-gr {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    z-index: 3;
}

/* summary */

.selling {
    grid-column: span 2 / span 2;
    padding-right: 3rem;
}

.selling-title {
    display: flex;
    /* justify-content: center; */
    flex-wrap: wrap;
}

.selling-title h2,
.selling-title h3,
h2.tag {
    color: #777;
    font-family: var(--font-sans);
    font-weight: 400;
}

.selling-title h3 {
    flex-basis: 100%;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.selling-title h2, h2.tag {
    font-size: 15px;
    flex-basis: 100%;
    margin-bottom: .25rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.selling-p {
    margin-top: 2rem;
}

.limited-height {
    height: 210px;
    overflow: hidden;
    transition: height 0.3s ease;
    interpolate-size: allow-keywords;
    position: relative;
}

.limited-height:after {
    content: '';
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    position: absolute;
    bottom: 0;
    height: 6rem;
    width: 100%;
    left: 0;
}

.limited-height.expanded {
    height: auto;
}

.limited-height.expanded:after {
    background: none;
}

.ob-selling {
    font-size: 1.25rem;
    line-height: 1.5;
    grid-template-columns: 1fr 1fr minmax(25%,300px);
    grid-template-rows: repeat(2, auto);
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
}

.ob-viewing {
    grid-column-start: 2;
    grid-row-start: 2;
    background: var(--green);
}

.ob-broker {
    grid-column-start: 3;
    grid-row: span 2 / span 2;
    align-items: flex-end;
    grid-row-start: 1;
}

.ob-short-facts>.flex {
    flex-wrap: wrap;
    padding: 2.5rem 1.5rem 2.5rem;
    align-items: flex-start;
}

.ob-short-fact-wrapper {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    gap: 0rem;
}

.ob-short-facts>.flex>.ob-short-fact-wrapper>.col {
    flex: 0 0 33.33%;
    padding: 1rem 0 0;
}

.ob-short-facts>.flex>.ob-short-fact-wrapper>.col:last-child {
    padding-right: 0;
}

.ob-short-facts>.flex>.ob-short-fact-wrapper>.col.price {
    flex-basis: 100%;
    font-size: 2rem;
    padding-top: 0;
}

.ob-short-facts {
    font-size: 1rem;
    background: var(--grey);
    grid-column-start: 1;
    grid-row-start: 2;
}

.ob-short-facts h2 {
    font-size: 2rem;
    margin: 0;
    font-family: var(--font-sans);
    /* font-weight: 500; */
}

.ob-short-facts h2+span {
    display: block;
    font-size: 1.25rem;
    color: #777;
}

strong.short-fact-label {
    display: block;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
    color: var(--main-color);
}

.ob-short-fact {
    /* border-top: 1px solid #ddd; */
    /* padding-top: 1rem; */
    font-size: 14px;
    /* white-space: nowrap; */
    color: #777;
}

.ob-short-facts .three-col .col:nth-child(1) .ob-short-fact,
.ob-short-facts .three-col .col:nth-child(2) .ob-short-fact,
.ob-short-facts .three-col .col:nth-child(3) .ob-short-fact {
    border-width: 0;
}

.broker-wrapper {
    background: var(--cherry);
    width: 100%;
    color: #fff;
    flex-wrap: wrap;
}

.broker {
    padding: 0;
    text-align: center;
    flex-wrap: wrap;
}

.broker.extra,
.ob-viewing .broker {
    gap: 1rem;
    padding: 0 1rem 2rem 1.5rem;
    flex-wrap: nowrap;
    align-items: center;
}

.broker.extra .broker-img img,
.ob-viewing .broker .broker-img img {
    border-radius: 50%;
    width: 140px;
}

.broker.extra .broker-info,
.broker.extra a.broker-link {
    font-size: 13px;
    text-align: left;
    padding: 0;
}

.broker.extra h3.broker-header {
    font-size: 1rem;
}

.broker-img {
    /* margin-bottom: 1.5rem; */
}

a.broker-link {
    display: block;
    color: #fff;
    font-size: 14px;
}

.broker-img img {
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: 70%;
       object-position: 70%;
    /* border-radius: 50%; */
    /* width: 155px; */
}

h3.broker-header {
    margin-bottom: .25rem;
    font-size: 1.5rem;
}

.broker-title {
    margin-bottom: 0.5rem;
    color: #fff;
    font-size: 13px;
    opacity: .75;
    line-height: 1rem;
}

.broker-info {
    font-size: 15px;
    padding: 2rem;
}

.ob-short-facts+.ob-short-facts {
    margin-top: 1rem;
}

.viewing {
    padding: 2.5rem;
    font-size: 15px;
}

h2.viewing-header {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.viewing-item {
    display: flex;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.viewing-date {
    background: url(../images/date.svg) no-repeat 0 2px / 1rem;
    padding-left: 1.5rem;
}

.viewing-txt {
    flex-basis: 100%;
    font-size: 13px;
    color: #777;
    padding: .25rem 0 0 1.5rem;
}

/* map */

#map {
    aspect-ratio: 4/2;
    padding-top: 2rem;
}

/* list data */

.row-data {
    display: flex;
    min-width: 100%;
    margin-right: -15px;
    margin-left: -15px;
    padding-top: .25em;
    padding-bottom: .25em;
    flex-wrap: wrap;
    align-items: stretch;
    align-content: stretch;
    text-align: left;
}

.row-data.leader {
    margin: 0;
    overflow-x: hidden;
}

.row-data.leader:before {
    content: "..............................................................................................................................................................................................";
    width: 0;
    white-space: nowrap;
    color: #ccc;
}

.row-data.leader .col, 
.tabs-content .row-data.leader .col+.col span.room, 
button.cf3Mob.cf2Lf6.cf8Oal span.cf1y60 {
    padding: 0;
}

.col.d4 {
    flex: 0 33.33333%;
}

.col.d8 {
    flex: 66.66%;
}

.col.rel-flex {
    flex: 1;
}

.col {
    position: relative;
    padding-right: 1rem;
    padding-left: 1rem;
    flex: 1;
}

.tabs-content .row-data.leader span {
    background-color: #fff;
    padding: 0 10px 0 0;
    z-index: 999;
    position: relative;
}

.row-data.leader .col+.col {
    text-align: right;
}

.text-col,
.association .maincontent-data {
    -moz-column-count: 2;
    column-count: 2;
    -moz-column-gap: 70px;
    column-gap: 70px;
    -moz-column-rule-width: 20px;
    column-rule-width: 20px;
    -moz-column-span: none;
    column-span: none;
    max-width: 1200px;
}

.nobreak {
    page-break-inside: avoid;
    -moz-column-break-inside: avoid;
    break-inside: avoid;
}

.text-col.surroundings .maincontent-data:first-child h3,
.association .maincontent-data:first-child h3 {
    padding-top: 0;
}

.surroundings-map h3 {
    border-width: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

hgroup.surroundings {
    max-width: var(--mw-super);
}

hgroup.surroundings h2 {
    font-size: 2rem;
    border-bottom: 1px solid var(--cherry);
    padding-bottom: 1.5rem;
}

.text-col.surroundings,
.association {
    padding-top: 30px;
}

.data-plain-txt {
    padding: 1rem 0 0;
    word-break: break-word;
    white-space: normal;
}

.comment-box {
    padding: 0 0 0.5rem;
    font-size: 14px;
    color: #777;
}

.col-divider {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: .5rem;
    color: #777;
}

.association .maincontent-data {
    margin: 0 auto;
}

.general-interior h3, .maincontent-data h3, .maincontent-data h4, .docs-link-wrapper h3 {
    margin: 0 0 1rem;
    font-weight: 600;
    border-bottom: 2px solid #ddd;
    padding: 30px 0 10px;
    color: var(--cherry);
    font-size: 1.5rem;
}

li.narrow {
    max-width: 45ch;
}

li.wide {
    max-width: 1200px;
}

/* tabs */

.tabs-menu {
    display: flex;
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 2;
    list-style: none;
    justify-content: center;
    gap: 1rem;
    background: #fff;
}

.tabs-link {
}

.tabs-link:hover {
    opacity: .75;
}

.tabs-link img, .tabs-link svg {
    height: 1.5rem;
    margin: 0 auto .5rem;
}

.tabs-link a {
    white-space: nowrap;
    display: block;
    align-items: center;
    gap: .5rem;
    display: flex;
}

.tabs-link.active a {
    background: var(--main-color);
    color: #eee;
    border-color: var(--main-color);
}

.tabs-content {
    /* min-height: 500px; */
    height: auto!important;
    max-width: var(--mw-super);
    list-style: none;
    position: relative;
    z-index: 1;
}

.tabs-content > li {
    display: none;
    /* min-height: calc(100vh - 94px); */
}

.tabs-content>li.active {
    display: list-item;
}

.tabs-content .row-data.leader span {
    background-color: #fff;
    padding: 0 10px 0 0;
    z-index: 999;
    position: relative;
}

.tabs-content .row-data.leader .col+.col span {
    padding: 0 0 0 10px;
}

/* bids */

.beskrivning .bid {
    flex-basis: 100%;
    padding: 1rem 1rem .5rem 0;
}

.biddhistory {
    position: relative;
    margin-top: 1rem;
    font-size: 14px;
}

.biddhistory details {
    max-width: 350px;
    background: var(--beige-dark);
    -moz-appearance: none;
         appearance: none;
    -webkit-appearance: none;
}

.biddhistory details summary {
    cursor: pointer;
    position: relative;
    border: 1px solid #ddd;
    padding: 0.75rem 1rem .75rem 18px;
    background: hsl(0deg 0% 100% / 50%);
}

.biddhistory summary:before {
    content: '';
    display: block;
    background: transparent url(../images/arrow-down.svg) no-repeat 50% / .75rem;
    width: 1rem;
    height: 1rem;
    position: absolute;
    right: 1rem;
    top: 1rem;
    transition: transform .25s;
}

.biddhistory summary::-webkit-details-marker, .biddhistory summary::marker {
    content: '';
    display: none;
}

.biddhistory details[open] summary:before {
    transform: rotate(180deg);
}

.short-facts .bids-list .row {
    grid-row-gap: 0;
    margin: 0;
}

.bud {
    padding: 0.75rem 1rem;
    margin-top: -1px;
    background: hsl(0deg 0% 100% / 50%);
    border: 1px solid #ddd;
}

.col.bid-col {
    font-size: 14px;
}   

.bid-col:nth-child(1) {
    flex: 0 0 38%;
    padding: 2px 0.5rem 2px 0;
}

.bid-col:nth-child(2) {
    flex: 0 0 25%;
    padding: 2px 0 2px;
    text-align: center;
}

.bid-col:nth-child(3) {
    flex: 0 0 37%;
    padding: 2px 0 2px 0.5rem;
}

/* modals */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none; /* Initially hidden */
    z-index: 999; /* Ensure it sits below the modal but above other content */
}

.booking .modal-header, .interest-modal, .viewing-modal {
    background-color: var(--beige-medium);
}

.interest-modal, .modal, .viewing-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-color: var(--beige-light); */
    display: none;
    overflow: auto;
    z-index: 1000;
}

.booking .modal-header, .interest-modal, .viewing-modal {
    background-color: hsl(0deg 0% 0% / 20%);
}

.close-interest-modal, .close-modal, .close-viewing-modal {
    display: flex;
    position: absolute;
    right: 1rem;
    align-items: center;
    cursor: pointer;
    top: 1rem;
}

.booking-form-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100% - 92px);
    margin-top: -46px;
}

.booking-form {
    max-width: 640px;
    background: #fff;
    padding: 3rem;
    font-size: 15px;
    position: relative;
    border-radius: 4px;
}

h2.booking-header {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.interest {
    font-size: 14px;
}

.interest .row {
    grid-row-gap: .5rem;
    margin: 0 -.5rem;
    display: flex;
    flex-wrap: wrap;
}

.i-wrapper .col, .interest .col {
    padding: 0 .5rem;
}

.interest .w-input, .interest .w-select, .viewing .w-input, .viewing .w-select {
    background-color: var(--green);
    border-radius: 10px;
}

textarea.w-input {
    height: 100px;
}

label.radio-bt-group {
    display: flex;
    align-items: flex-start;
    margin-top: 1rem;
}

span.checkbox-label {
    margin-left: .5rem;
    line-height: 1;
}

/* gallery */

.img-wrapper {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1.5rem;
}

.img-wrapper a {
    display: flex;
    height: 100%;
}

.img-item img {
    -o-object-fit: cover;
       object-fit: cover;
}

.img-wrapper.grid .img-item img {
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.img-wrapper>.img-item:nth-child(1) {
    flex: 0 0 calc(66.66% - .75rem);
}

.img-wrapper>.img-item:nth-child(1) img {
    height: 100%;
}

.fancybox-show-thumbs .fancybox-inner {
    right: 0!important;
    bottom: 95px!important;
}

.fancybox-thumbs {
    top: auto!important;
    width: auto!important;
    bottom: 0!important;
    left: 0;
    right: 0!important;
    height: 135px;
    padding: 10px 10px 5px 10px!important;
    box-sizing: border-box!important;
    background: transparent!important;
}

.fancybox-thumbs__list a {
    background-size: auto 100%;
    transition: all .5s ease;
    margin: 10px!important;
    width: 95px!important;
    height: 95px!important;
}

/* carousel hero */

.dr-scroll-container {
    overflow: hidden;
    background: #fff;
}

.dr-scroll {
    width: 100%;
    height: 100%;
    display: flex;
    transition: transform 0.5s ease;
}

.dr-scroll figure {
    width: 100%;
    display: inline-block;
    flex-shrink: 0;

}

.dr-scroll figure.landscape {
    width: 100%;
}

.more-fp {
    position: absolute;
    z-index: 1;
    right: 0;
    top: 0;
    display: flex;
    height: 100%;
    width: 100px;
    transition: opacity .5s;
    cursor: pointer;
    color: var(--main-color);
    justify-content: center;
}

.more-fp.prev {
    right: auto;
    left: 0;
}

.more-fp img {
    width: 2rem;
}

.more-fp.prev img {
    transform: rotate(180deg);
}

.carousel-dots {
    text-align: center;
    margin-top: 10px;
    position: absolute;
    display: flex;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
}

.carousel-dot {
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
    background: var(--cherry);
    margin: 0 5px;
    cursor: pointer;
    opacity: .25;
}

.carousel-dot.active {
    opacity: 1;
}

/* hero movie */

.hero-movie {
    height: 100%;
}

.hero-movie video {
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: 100%;
}

.video-wrapper,
.video-wrapper-sound {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.video-ratio {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.video-wrapper iframe,
.video-wrapper-sound iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/**************** 

 CUSTOM STYLING 

 ****************/

.w-input, .w-select {
    width: 100%;
    height: 44px;
    color: #333;
    vertical-align: middle;
    background-color: var(--beige-medium);
    border: 1px solid transparent;
    margin-bottom: 10px;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.42857;
    display: block;
}

.wrapper {
    margin: 0;
    position: relative;
}

.nohero .logo-dark {
    display: block;
}

.hero {
    min-height: 100svh;
    position: relative;
    display: flex;
    background-size: cover;
    color: #fff;
    background-image: url(../images/hero.jpg);
}

header.header.nohero {
    position: static;
    background: linear-gradient(180deg, rgba(246,243,239,1) 0%, rgba(246,243,239,0) 100%);
    margin-bottom: 3rem;
}

.nohero nav .menu a {
    color: var(--main-color);
}

.hero video {
    -o-object-fit: cover;
       object-fit: cover;
    height: 100%;
    width: 100%;
    position: absolute;
}

.hero-content {
    background: hsl(0deg 0% 0% / 15%);
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    justify-content: center;
    padding: 6rem 0 0 13%;
}

.hero-content h1, .hero-content h2 {
    font-size: 6rem;
    line-height: 1;
    font-family: var(--font-sans);
    text-transform: uppercase;
}

.hero-content h1>span {
    display: block;
}

span.logo-symbol:after {
    content: './';
    position: absolute;
    right: 4rem;
    bottom: 9rem;
    font-size: 8rem;
    font-family: var(--font-serif);
}

.ham-nav span.logo-symbol:after {
    color: var(--cherry-dark);
}

span.logo-inline {
    font-family: var(--font-serif);
    text-transform: none;
}

span.logo-inline:after {
    content: '/';
    margin: 0 5px 0 3px;
}

.header.nohero a {
    color: var(--cherry);
}

.nohero .ham span {
    background: var(--cherry);
}

.nohero a.animatein {
    color: #ddd;
}



.nav-open .main-menu a.animatein, .nav-open .sub-menu a.animatein {
    animation-name: animatein;
    animation-duration: .8s;
    animation-fill-mode: forwards;
}

@keyframes animatein {
    0% {
        opacity: 0;
        transform:translateX(50px)      
    }
    to {
        opacity: 1;
        transform:translateX(0px)   
    }
}

.animatein:first-child {
    animation-delay: 0.06s;
}
.animatein:nth-child(2) {
    animation-delay: 0.12s;
}
.animatein:nth-child(3) {
    animation-delay: 0.18s;
}
.animatein:nth-child(4) {
    animation-delay: 0.24s;
}
.animatein:nth-child(5) {
    animation-delay: 0.3s;
}
.animatein:nth-child(6) {
    animation-delay: 0.36s;
}
.animatein:nth-child(7) {
    animation-delay: 0.42s;
}

.ol a.oc-link:nth-child(3) img, 
.ol a.oc-link:nth-child(11) img,
.broker-body a.oc-link:nth-child(3) img,
.broker-body a.oc-link:nth-child(11) img {
    aspect-ratio: 1;
}

.grid-sizer {
    width: calc(33.33% - 0rem);
}

/* puffar */

.container {
    max-width: var(--mw-super);
    width: 100%;
}

.puffar {
    display: grid;
    gap: 2rem;
}

.two-col {
    grid-template-columns: repeat(2, 1fr);
}

.three-col {
    grid-template-columns: repeat(3, 1fr);
}

.start .oc-link {
    width: auto;
    padding: 0;
}

.short-fact-label {
    gap: .5rem;
}

.docs-link-wrapper a {
    background: url(../images/ic_doc.svg) no-repeat 0 50% / 1rem;
    padding: 5px 0 5px 1.5rem;
    display: block;
}

.img-item-wrapper {
    flex: 0 0 calc(33.33% - .75rem);
    flex-direction: column;
    gap: 1.5rem;
}

.beskrivning .oc-tag.bid {
    flex-basis: 5rem;
    padding: 5px 0 0;
    position: absolute;
    top: -4rem;
    right: -2rem;
}

a.top {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 9;
    width: 2rem;
    height: 2rem;
}

.body-default .ob-hero-wrapper {
    margin-bottom: 4rem;
}

.body-default .ob-hero-wrapper img {
    object-fit: cover;
    height: 100%;
    width: 100%;
    object-position: 50% 0;
    aspect-ratio: 1254 / 590;

}

.content {
    max-width: var(--mw-sm);
    padding: 0 1rem;
}

.salja-bostad .header,
.ol .header,
.salda .header {
    background: var(--cherry);   
}

.salja-bostad .content-wrapper,
.ol form.controls
 {
    padding-top: 184px;
}

.salja-bostad .content,
.morekonceptet .content {
    max-width: var(--mw-full);
}

/*.salja-bostad .blocks>div {
    align-items: flex-end;
}*/

.salja-bostad .bl-img {
    justify-content: flex-end;
}

.salja-bostad .bl-img img {
    max-width: 440px;
}

.content-intro {
    margin-bottom: 3rem;
}

.puffar {
    grid-template-columns: repeat(3, 1fr);
    max-width: var(--mw-full);
    gap: 1.5rem;
    text-align: center;
    margin-top: 2rem;
}

.puffar.hm {
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 2.5;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    padding-left: 3rem;
    margin-top: 0;
    justify-content: flex-end;
}

.puffar.hm span {
    display: block;
}

.puffar.hm span:first-child {
    font-size: 4rem;
    letter-spacing: -3px;
    line-height: 1;
}

.puffar.hm .puff {
    border-radius: 10px;
    border: 2px solid var(--cherry);
    padding: 2rem 0;
    background: var(--green);
    flex-basis: calc(50% - 1.5rem);
}

.salja-bostad .bl-img .hm-logo img {
    width: 150px;
    margin: 0 auto;
    aspect-ratio: auto;
}

.puffar.hm a.button {
    color: #eee;
}

h2.tag {
    margin-bottom: 1rem;
}

.blocks {
    max-width: var(--mw-full);
}

.blocks+.blocks,
.blocks+.blocks+.blocks {
    margin-top: 3rem;
}

.morekonceptet .blocks {
    margin-top: 7rem;
}

.blocks.wide {
    max-width: var(--mw-super);
}

.blocks>.flex>img {
    flex: 1;
    min-width: 0;
}

.bl-txt, 
.bl-img {
    flex: 0 0 50%;
    font-size: 18px;
    line-height: 1.5;
}

.bl-txt p a {
    color: inherit;
}

.bl-txt ol {
    list-style: decimal;
    padding-left: 18px;
}

.bl-txt,
.blocks:nth-child(even) .bl-img {
    /* padding: 0 3rem 0 0; */
}

.bl-img {
    row-gap: 2rem;
    flex-wrap: wrap;
}

.brokers .bl-img img {
    border-radius: 4px 4px 0 0;
}

.blocks:nth-child(odd) .bl-txt,
.blocks:nth-child(even) .bl-img {
    padding: 0 0 0 5rem;
    order: 2;
}

.bl-txt img {
    max-width: 180px;
    float: right;
    margin: 0 0 2rem 2rem;
}

.bl-txt h3,
.citat h2 {
    font-size: 4rem;
    text-wrap: balance;
}

.bl-txt p {
    /* text-wrap: balance; */
    max-width: 75ch;
    font-size: 1.5rem;
    color: #777;
}

.bl-txt h4 {
    font-weight: 600;
    font-size: 1.5rem;
}

.bl-txt ul + h4, 
.bl-txt ul + p {
    margin-top: 2rem;
}

.content-summary {
    font-size: 1.5rem;
    color: #777;
    text-wrap: balance;
    line-height: 1.5;
}

.morekonceptet .content-summary {
    background: #f6f2ed;
    border-radius: 4px;
    margin: -7rem auto 0;
    position: relative;
    max-width: 800px;
    padding: 3rem;
}

input#gdpr {
    margin-top: 1px;
}

.broker-info .content .blocks:nth-child(2) {
    max-width: var(--mw-md);
}

.broker-info .content .blocks:nth-child(2) .bl-img {
    flex: 0 0 33.33%;
}

.broker-info .content .blocks:nth-child(2) .bl-txt {
    flex: 0 0 66.66%;
}

.br-puff-info img {
    border-radius: 50%;
    -o-object-fit: cover;
       object-fit: cover;
    aspect-ratio: 1/2;
    width: 200px;
    height: 200px;
    margin-bottom: 1rem;
}

.br-puff-info {
    text-align: center;
    margin: auto;
}

.br-puff-info h2 {
    font-size: 1.75rem;
}

.sign img {
    /* width: 100px; */
    margin: 0;
    float: none;
}

.sign span {
    display: block;
    font-size: 14px;
    position: absolute;
    bottom: -32px;
    left: 7px;
    white-space: nowrap;
    text-align: center;
    color: #777;
}

.sign {
    position: relative;
    margin: 1rem 0;
}

.bt-gr:has(.sign) {
    gap: 2.5rem;
}

.puff {
    position: relative;
    border-radius: 6px;
    border: 2px solid transparent;
}

.puff a {
    color: inherit;
}

.puff h3 {
    /* font-size: 36px; */
    margin-bottom: .25rem;
}

.puff a:hover img {
    filter: brightness(1.1);
}

.puff img {
    transition: filter .5s;
    aspect-ratio: 800/1067;
}

.puff .puff-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 1rem 2rem;
    font-size: 14px;
    line-height: 1.5;
}

.puff-single {
    position: relative;
    margin-top: 1rem;
    color: #fff;
    font-size: 1.75rem;
}

.puff-single a {
    color: inherit;
}

.puff-single p {
    line-height: 1.3;
    margin-bottom: 2rem;
}

.puff-single h2 {
    margin-bottom: 1rem;
    font-size: 4rem;
}

.puff-single img {
    aspect-ratio: 796/375;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: 50% 100%;
       object-position: 50% 100%;
}

.puff-single .hero-content {
    padding: 6rem 13% 5rem ;
    justify-content: flex-end;
}

footer {
    background: var(--cherry);
    color: #eee;
    font-size: 1rem;
    flex-direction: column;
    padding: 5rem 0;
    gap: 1rem;
}

.beskrivning footer {
    margin-top: 0;
}

footer a {
    color: inherit;
}

footer address li:nth-child(3) {
    margin-top: 1rem;
}

footer .social {
    gap: 1rem;
    margin-top: 1rem;
}

footer .social img {
    height: 2rem;
}

.ol h1 {
    display: none;
}



.broker-list {
    grid-template-columns: 1fr 1fr;
    max-width: var(--mw-sm);
    gap: 1.5rem;
}

.broker-list h2 {
    font-size: 2rem;
}

.broker-list .bl-txt {
    background: var(--green);
    border-radius: 0 0 4px 4px;
}

.broker-info .content-summary {
    max-width: var(--mw-sm);
}

.input-wrapper {
    gap: 1rem;
}

.input-wrapper>div {
    flex-basis: 50%;
}

.input-gr {
    position: relative;
    display: flex;
    gap: .5rem;
    text-align: left;
    /*align-items: flex-start;*/
    font-size: 14px;
    text-wrap: balance;
    line-height: 1.5;
}

.input-gr label:not(.gdpr) {
    font-size: 13px;
    position: absolute;
    top: -8px;
    line-height: 1;
    background: #fff;
    left: 13px;
    /* border: 1px solid #ddd; */
    border-radius: 4px;
    padding: 3px;
}

.form input[type=text], 
.form textarea,
.form select {
    border: 1px solid #ddd;
    height: 47px;
    display: block;
    width: 100%;
    margin-bottom: 1rem;
    padding: 0 1rem;
    font-size: 14px;
    border-radius: 4px;
    -webkit-appearance: none;
}

.form select {
    margin-bottom: 1.5rem;
    font-weight: 700;
    background: url(../images/arrow-down.svg) no-repeat right 1rem center / 0.75rem;
}

.textarea-gr {
    height: calc(100% - 1rem);
}

.form textarea {
    height: 100%;
    padding-top: 1rem;
}

.input-wrapper .input-gr:nth-child(4) {
    display: none;
}

.kontakt form {
    max-width: var(--mw-sm);
    margin: 0 auto;
}

.content-intro h1 {
    margin-bottom: 2rem;
}

.filter-wrapper {
    justify-content: space-between;
    margin-bottom: 2rem;
}

.slide-container {
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 3rem;
}

.slide-container fieldset {
    width: 100%;
}

.is-checked {
    background-color: var(--cherry-dark);
}

fieldset.slide-wrapper {
    padding: 0 0 2rem;
    position: relative;
}

fieldset.slide-wrapper:nth-child(2) {
    /* padding: 0 1rem 2rem; */
    position: relative;
}

form.controls {
    max-width: var(--mw-full);
    margin: 2rem auto;
}

.filter-form {
    gap: 0.5rem;
}

.irs--round .irs-from, .irs--round .irs-to, .irs--round .irs-single, .irs--round .irs-min, .irs--round .irs-max {
    font-size: 12px;
    background: #ffdf00;
}

.irs--round .irs-handle {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    width: 1.5rem;
    height: 1.5rem;
    top: 1.5rem;
    border-width: 1px;
}

.irs--round .irs-handle.state_hover, .irs--round .irs-handle:hover {
    background-color: transparent;
}

.irs--round .irs-bar, .irs--round .irs-line {
    background: url(/images/irs-line.png) no-repeat 50% / contain;
    height: 1px;
    top: 37px;
    width: 100%!important;
    left: 0!important;
}

.irs--round .irs-min, .irs--round .irs-max {
    visibility: hidden!important;
}

.irs--round .irs-from:before, .irs--round .irs-single:before, .irs--round .irs-to:before {
    border-top-color: var(--cherry);
}

.irs--round .irs-grid-text {
    font-size: 10px;
    color: #999;
}

.irs--round .irs-from, .irs--round .irs-to, 
.irs--round .irs-single {
    color: #fff;
    background: var(--cherry);
}

.irs--round .irs-from {
    /* left: 5px!important; */
}

.irs--round .irs-to, .irs--round .irs-from {top: -8px;}

span.irs-handle.to:after,
span.irs-handle.from:after {
    content: '';
    color: var(--cherry);
    position: absolute;
    left: 5px;
    top: -9px;
    /* font-size: 40px; */
    /* font-weight: 700; */
    /* font-family: var(--font-serif); */
    background: url(/images/slide-line.avif) no-repeat 0 0 / 18px 42px;
    z-index: 99999999;
    height: 42px;
    width: 18px;
}

span.irs-handle.from:after {
    content: '';
    left: -7px;
    /* font-size: 6rem; */
    top: -6px;
    font-weight: 700;
    background: url(/images/slide-circle.avif) no-repeat 0 100% / 24px 12px;
    height: 24px;
    width: 24px;
}

span.irs-handle.to {
    position: relative;
    z-index: 1;
}

.label-sliders {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border-radius: 0 0 5px 5px;
    font-size: 11px;
    padding: 3px 6px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}

.search-wrapper {
    position: relative;
}

.search-wrapper input[type=text] {
    height: 45px;
    font-size: 1rem;
    border: 1px solid #ccc;
    width: 250px;
    border-radius: 10px;
}

.filters-header {
    font-size: 12px;
    background: #fff;
    position: absolute;
    top: -6px;
    left: .5rem;
    line-height: 1;
    padding: 0 .25rem;
    z-index: 1;
}

.fail-message {
    padding-top: 2em;
    display: none;
    text-align: center;
    font-family: futura-pt, sans-serif;
    font-weight: 400;
}

.surroundings-map {
    background: var(--green);
    padding: 7rem 0;
}

.surroundings-map h3 {
    border-width: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

.br-puff img {
    max-width: 230px;
}

.br-puff {
    gap: 2rem;
    align-items: center;
}

.br-puff h2 {
    font-size: 2rem;
    margin: 0 0 .25rem;
}

.br-puff a {
    display: block;
}

.br-puff span {
    display: block;
    margin: 0 0 .5rem;
    color: #777;
}

.tag-header {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 2.25rem;
    margin-bottom: 2rem;
}

.salja-bostad .content-intro h1,
.morekonceptet .content-intro h1 {
    display: none;
}

.saldreferensobjekt .ob-short-facts {
    grid-column: span 2;
}

.saldreferensobjekt .ob-short-facts>.flex>.ob-short-fact-wrapper>.col {
    flex: 1;
}

.saldreferensobjekt .ob-short-facts>.flex>.ob-short-fact-wrapper>.col.price {
    flex-basis: 100%;
}

.status-badge {
    border-radius: 50%;
    display: flex;
    font-size: 24px;
    background: var(--cherry);
    color: #fff;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 2rem;
    top: -1rem;
    font-weight: 500;
    aspect-ratio: 1;
    padding: 1rem;
    text-wrap: balance;
    flex-wrap: wrap;
    max-width: 7rem;
    text-align: center;
}

.broker-body h2.object-header {
    font-size: 3rem;
    margin-bottom: 3rem;
}

.broker-objects {
    background: var(--green);
    padding: 3rem 0;
    border-top: 1px solid #ddd;
    margin-top: 5rem;
}

.broker-objects .search-wrapper input[type=text] {
    background: #fff;
}

.broker-objects .filters-header {
    background: linear-gradient(0deg, white, var(--green));
}

.broker-objects .label-sliders {
    background: var(--green);
}

.morekonceptet .hero-content h1 {
    font-size: 4rem;
    position: absolute;
    bottom: 9rem;
    margin: auto;
    left: 0;
    right: 0;
}

.morekonceptet .hero-content {
    padding: 0;
    text-align: center;
}

.morekonceptet .hero-content h1>span {
    display: inline-block;
    font-family: var(--font-serif);
    text-transform: none;
}

.morekonceptet .puff {
    text-align: left;
    background: #f6f2ed;
    padding: 2rem;
}

.morekonceptet .puff h3 {
    margin-bottom: .5rem;
}

.morekonceptet .puffar {
    margin: 5rem 0;
}

.blocks.m5xroh3s .bl-img {
    display: none;
}

.blocks.m5xroh3s .bl-txt {
    padding-left: 0;
}

.blocks.selling-block .bl-txt {
    order: -1;
}

#object:target:before {
    padding-top: 104px;
    content: "";
    display: block;
}

span.besiktigad {
    position: absolute;
    left: 2rem;
    top: -8rem;
    background: black;
    color: #eee;
    font-size: 15px;
    padding: 13px 1em 14px;
    line-height: 1;
    border-left: .25rem solid var(--cherry);
    border-radius: 0 10px 10px 0;
}

span.besiktigad:before {
    content: '\2714';
    margin-right: .5rem;
}

@media (max-width: 1160px) { 
    span.logo-tag {
        display: block;
        /*margin-top: 2rem;
        font-size: 2rem;*/
    }
}

@media (max-width: 991px) {

    .xwrap{flex-wrap: wrap}
    
    .header {
        /*padding: 3.5rem 2.5rem;*/
    }

    span.logo-tag {
        display: block;
        /*margin-top: 2rem;*/
        font-size: 2rem;
    }

    .ham-nav {
        width: 75vw;
        right: -75vw;
    }

    .ham-nav-wrapper .main-menu span.logo-tag {
        display: inline;
        margin: 0;
        font-size: 1.5rem;
    }

    .hero+.blocks {
        margin-top: 3rem;
    }

    .puff-single .hero-content {
        padding-bottom: 2rem;
    }

    .puff-single .hero-content h1, .puff-single .hero-content h2 {
        font-size: 2rem;
    }

    .puff-single p {
        font-size: 18px;
    }

    .ob-selling {grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(3, 1fr);grid-template-rows: auto;}

    .selling {grid-column: span 2;/* grid-row-start: 1; */}

    .grid-sizer {
        width: 50%;
    }
    .oc-link {
        width: calc(50% - 1.5rem);
    }

    .ob-short-facts {
        grid-row-start: 2;
        grid-column: span 1;
    }

    .ob-viewing {
        grid-column-start: 1;
        grid-row-start: 3;
    }

    .ob-broker {
        grid-row: span 2 / span 2;
        grid-column-start: 2;
        grid-row-start: 2;
        align-items: flex-start;
    }

    .salja-bostad .bl-img img {
        max-width: 220px;
    }

    .bl-txt p {
        font-size: 18px;
    }

    .body-default .ob-hero-wrapper {
        margin-bottom: 2rem;
    }

    .bl-txt {
        flex: 0 0 66.66%;
    }

    .bl-img {
        flex: 0 0 33.33%;
    }

    .content {
        padding: 0 2rem;
    }

    .content-summary {
        font-size: 18px;
    }

    .hero-content {
        padding-left: 2rem;
    }

    .hero-content h1, .hero-content h2 {
        font-size: 5rem;
    }

    .bl-txt h3, .citat h2 {
        font-size: 3rem;
    }

    h2 {
        font-size: 2rem;
    }

    .selling-block .bl-txt {
        flex: 0 0 90%;
    }

    .selling-block .bl-img {
        flex: 0 0 100%;
        justify-content: flex-start;
    }

    .puffar.hm {
        padding: 0;
        justify-content: flex-start;
        margin-top: 2rem;
    }

    .row-data.leader .col {
        flex: 1;
    }

    .saldreferensobjekt .ob-short-facts {
        grid-column: span 1;
    }

    .saldreferensobjekt .ob-short-facts>.flex>.ob-short-fact-wrapper>.col {
        flex: 0 0 33.33%;
    }

    .status-badge {
        right: 2rem;
    }

    .hero-movie-wrapper+.bt-gr {
        position: static;
        padding-top: 1rem;
        transform: none;
        margin: 0 1.5rem;
        max-width: 66.66%;
    }

    .hero-movie-wrapper+.bt-gr a.button {
        background: var(--cherry);
    }

    .ob-hero-wrapper:has(.video-ratio) {
        max-height: none;
    }
}

@media (max-width: 600px) {
    .xmt05{margin-top: .5rem;}
    .xmt1 {margin-top: 1rem;}
    .xmt2 {margin-top: 2rem;}
    .xmt3 {margin-top: 3rem;}
    .xmt4 {margin-top: 4rem;}

    .xmb0 {margin-bottom: 0;}
    .xmb1 {margin-bottom: 1rem;}
    .xmb2 {margin-bottom: 2rem;}
    .xmb3 {margin-bottom: 3rem;}
    .xmb4 {margin-bottom: 4rem;}

    .xmy2 {margin-top: 2rem; margin-bottom: 2rem;}

    .xmx1 {margin-left: 1rem; margin-right: 1rem;}
    .xmx15{margin-left: 1.5rem; margin-right: 1.5rem;}

    .xp0  {padding: 0}

    .xpb0 {padding-bottom: 0}
    .xpb1 {padding-bottom: 1rem}

    .xpt0 {padding-top: 0}
    .xpt1 {padding-top: 1rem}

    .xpx0 {padding-left: 0; padding-right: 0}
    .xpx2 {padding-left: 2rem; padding-right: 2rem}
    .xp15 {padding-left: 1.5rem; padding-right: 1.5rem}

    .col.xs12 {flex: 0 0 100%}

    .w100 {flex-basis: 100%}
    .x1col {grid-template-columns: repeat(1, 1fr);}

    .m-hide {display: none!important;}
    .d-hide {display: flex!important;width: auto;gap: 0;font-size: 14px;font-weight: 600;}

    .wrapper {
        margin: 0;
    }

    ul.tabs-menu {
        overflow-x: auto;
        justify-content: flex-start;
        padding: .5rem 1.5rem;
        gap: 0.75rem;
        margin: 0;
    }

    .text-col, .text-col, .association .maincontent-data {
        -moz-column-count: 1;
             column-count: 1;
    }

    h1 {
        font-size: 2rem;
        margin-bottom: .25rem;
    }

    .selling-title h2 {
        font-size: 0.75rem;
        margin-bottom: 0.25rem;
        display: block;
    }

    .selling-title h2:before {
        content: '';
    }

    .selling-title h3 {
        font-size: 1.25rem;
    }

    .ob-selling {
        font-size: 1rem;
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .selling-title {
        display: block;
    }

    .header {
        padding: 1.5rem;
    }

    .logo, .logo-dark {
        width: 7rem;
    }

    .broker-wrapper {
        border-width: 0;
        padding: 2rem 0;
    }

    .broker {
        gap: 1rem;
        /* margin: auto; */
    }

    .broker-img img {
        max-width: 160px;
        border-radius: 50%;
        margin: 0 auto;
    }

    .ob-short-facts {
        /* background: none; */
    }

    .broker-info {
        font-size: 13px;
        padding: 0;
    }

    .ob-short-facts>.flex {
        padding: 2rem 1rem;
    }

    .ob-short-facts h2 {
        font-size: 1.5rem;
    }

    .ob-short-facts h2+span {
        font-size: 1rem;
        line-height: 1.25;
        margin-top: .25em;
    }

    .ob-short-facts>.flex {
        padding: 2rem;
    }

    .ob-short-facts h2 {
        font-size: 1.5rem;
    }

    .ob-short-facts h2+span {
        font-size: 15px;
        line-height: 1.25;
        margin-top: 0;
    }

    .tabs-link a {
        font-size: 13px;
    }

    .img-caption {
        text-align: center;
        font-size: 14px;
        padding-top: .5rem;
    }

    li.narrow, 
    .text-col,
    .association {
        margin: 0 1.5rem;
        font-size: 14px;
        line-height: 1.5;
    }

    .bid-col:nth-child(1) {
        white-space: nowrap;
    }

    .col.bid-col {
        font-size: 12px;
    }

    .ob-short-facts+.ob-short-facts {
        margin: 0;
    }

    .viewing {
        padding: 2rem;
    }

    .ob-short-facts+.ob-short-facts h2 {
        font-size: 1.25rem;
        background-size: 1.25rem;
    }

    .bt-gr .button {
        justify-content: center;
        flex: 1;
        font-size: 14px;
    }

    .bt-gr .button + .button {
        max-width: 60%;
    }

    #map {
        border-left-width: 0;
        aspect-ratio: 1;
        padding: 0 1.5rem;
    }

    .ol-wrapper {
        padding: 2rem 1rem 1.5rem;
        background: var(--green);
        margin-top: 0;
        grid-template-columns: repeat(2, 1fr);
    }

    .broker-body .ol-wrapper {
        background: none;
    }

    .oc-content h2, .oc-content h3 {
        font-size: 1rem;
        flex-basis: 100%;
    }

    .hero-content h1, .hero-content h2 {
        font-size: 2.5rem;
    }

    .hero-content span {
        padding: .5rem 0 0;
    }

    .ol .hero-content:has(h1+span) {
        align-items: flex-end;
        padding-bottom: 3rem;
    }

    .oc-price {
        flex: 1;
        padding: 0;
    }

    .oc-fact {
        /* flex: 1; */
        /* display: flex; */
        white-space: nowrap;
    }

    .oc-fact:nth-child(2):before, 
    .oc-fact:nth-child(3):before {
        /* content: '|'; */
        /* width: 1rem; */
        /* display: block; */
        /* color: #999; */
    }

    .oc {
        background: #fff;
    }

    .oc-content {
        padding: 2rem 1rem 1rem;
    }

    .oc-content h3 {
        font-size: 12px;
    }

    .oc-content h2 {
        font-weight: 600;
        margin: 4px 0 0;
        font-size: 1.25rem;
    }

    .ol .puffar {
        display: none;
    }

    .selling-title h1 {
        margin-bottom: 1rem;
    }

    .beskrivning .oc-tag.bid {
        font-size: 11px;
        width: auto;
        height: auto;
        padding: .5rem;
        top: -32px;
        right: -2rem;
        border-radius: 0 4px 0 0;
    }

    .ol .hero {
        min-height: 270px;
    }

    .oc-estate {
        font-size: 14px;
    }

    .button.lg {
        font-size: 1rem;
    }

    .hero-content {
        padding: 0 2rem;
    }

    .booking-form-wrapper {
        margin: 1rem;
        display: block;
    }

    .booking-form {
        padding: 3rem 1.5rem 2rem;
        font-size: 14px;
        border-radius: 0;
    }

    span.checkbox-label {
        font-size: 13px;
        line-height: 1.4;
    }

    input#gdpr {
        margin-top: 3px;
    }

    .news-block {
        padding: 2rem 1.5rem 3.5rem;
        margin: 0;
    }

    .news-count-2 a,
    .news-count-3 a,
    .news-count-4 a {
        flex: 0 0 100%;
    }

    .news-count-1 h2 {
        font-size: 1.5rem;
        margin-top: 2rem;
    }

    .news-count-1 p {
        font-size: 1rem;
    }

    .ham-nav {
        width: 100vw;
        top: 0;
        right: -100vw;
        font-size: 18px;
        border-width: 0;
    }

    .ham-nav.nav-open {
        right: 0;
    }

    .ham-nav-wrapper {
        padding: 2.75rem 1.5rem 0;
        align-items: flex-start;
        row-gap: 1rem;
    }

    .content {
        padding: 0 1.5rem;
    }

    .content-summary {
        font-size: 1rem;
        text-wrap: pretty;
        margin-top: 1rem;
    }

    .content-intro {
        margin-bottom: 2rem;
    }

    /*.bl-txt:has(+.bl-img:empty) {
        padding: 2rem 1.5rem!important;
        font-size: 1rem;
    }*/

    .bl-txt h3, .citat h2 {
        font-size: 2rem;
    }

    .blocks, .citat {
        margin: 1.5rem 0;
    }

    .body-default .ob-hero-wrapper {
        margin-bottom: 2rem;
    }

    .bl-txt, .bl-img {
        flex: 0 0 100%;
        font-size: 1rem;
    }

    .blocks:nth-child(even) .bl-txt, .blocks:nth-child(odd) .bl-img {
        padding: 0;
    }

    .bl-txt, .blocks:nth-child(even) .bl-img {
        /* padding: 0; */
        /* margin-bottom: 1.5rem; */
    }

    .bl-txt h4 {
        font-size: 1.25rem;
        padding-top: 0.5rem;
    }

    .blocks.m4ij0isk .bl-txt {
        -moz-column-count: 1;
             column-count: 1;
    }

    .blocks.m4ij0isk .bl-txt br {
        display: none;
    }

    .nohero .ham span {
        background: #333;
    }

    header.header.nohero {
        margin-bottom: 0;
    }

    .guides {
        padding: 2rem 1.5rem;
        grid-template-columns: repeat(1, 1fr);
        gap: 1.5rem;
    }

    .content-divider {
        font-size: 1rem;
        padding: 2rem 1.5rem;
        margin: 0;
    }

    .content-intro img {
        margin: 2rem 0;
    }

    .brokers .blocks:nth-child(even) .bl-txt,
    .brokers .blocks .bl-txt {
        order: 2;
    }

    .brokers .blocks .bl-img,
    .brokers .blocks:nth-child(odd) .bl-img {
        order: 1;
        margin-bottom: 1.5rem;
    }

    .broker-info .content .blocks:nth-child(2) .bl-txt, 
    .broker-info .content .blocks:nth-child(2) .bl-img {
        flex: 0 0 100%;
    }

    .ol .hero-content span {
        padding: .5rem 0;
    }

    .ol .hero-content {
        padding: 0 2em;
    }

    .more-fp {
        width: 4rem;
    }

    .more-fp img {
        width: 1rem;
    }

    .img-wrapper {
        margin: 0 1.5rem;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    h2.viewing-header {
        font-size: 1.5rem;
    }

    .viewing-date {
        background: none;
        padding-left: 0;
        font-size: 14px;
    }

    .viewing-txt {
        padding-left: 0;
    }

    .ob-short-facts>.flex>.ob-short-fact-wrapper>.col {
        flex: 0 0 50%;
        padding: .5rem 0 0;
    }

    .beskrivning .bid {
        font-size: 14px;
        padding: 1rem 0 .5rem;
    }

    .grid.puffar {
        grid-template-columns: repeat(1, 1fr);
        gap: 1.5rem;
        margin-top: 1rem;
    }

    .start .grid.puffar {
        gap: 0;
    }

    .header span.logo-tag {
        display: none;
    }

    .header .ham-nav span.logo-tag {
        display: inline;
    }

    .header a.logo {
        font-size: 2.5rem;
        line-height: 1;
    }

    .main-menu a.animatein {
        font-size: 1.5rem;
    }

    .ham-contact a {
        font-size: 1rem;
        line-height: normal;
    }

    .ham-nav-wrapper .ham-social a {
        padding: 0 .25rem;
    }

    .bl-txt p {
        font-size: 1rem;
    }

    .sign img {
        width: 80px;
    }

    .sign:last-child img {
        width: 70px;
    }

    .sign span {
        font-size: 13px;
        bottom: -1.5rem;
    }

    .sign {
        margin: 0 0 2rem;
    }

    span.logo-symbol:after {
        right: 1.5rem;
        bottom: 3rem;
        font-size: 3rem;
    }

    .hero {
        min-height: 70svh;
    }

    h2 {
        font-size: 1.75rem;
    }

    h2.lg {}

    .oc-link {
        /* padding: 0; */
        width: calc(50% - 1rem);
    }

    .puff img {
        aspect-ratio: 1;
    }

    h3.oc-sub-title {
        font-size: 1.25rem;
    }

    .puff-single {
        margin-top: 1.5rem;
    }

    .puff-single .hero-content {
        position: static;
        padding: 0;
        font-size: 1rem;
        background: #fff;
        color: var(--main-color);
        padding: 1rem 0 0;
    }

    .puff-single h2 {
        font-size: 1.5rem;
        margin-bottom: .5rem;
        text-transform: none;
    }

    .puff-single .hero-content br {
        display: none;
    }

    .puff-single p {
        line-height: 1.5;
        margin-bottom: 1.5rem;
    }

    .puff-single .hero-content span.button {
        padding: .8em 1em 0.9em;
    }

    .grid-sizer {
        width: 50%;
    }

    .ol .puff img,
    .broker-body .puff img {
        aspect-ratio: 800 / 1067;
    }

    .ol h3.oc-sub-title,
    .broker-body h3.oc-sub-title {
        font-size: 12px;
    }

    .oc-facts {
        font-size: 12px;
        gap: 0;
    }

    .start .oc-facts {
        gap: .5rem;
    }

    .ol .oc-fact,
    .broker-body .oc-fact {
        padding: 0 .25rem;
        line-height: 1.5;
    }

    .oc-tag.bid, .oc-tag.soon {
        border-radius: 4px;
        width: auto;
        display: block;
        height: auto;
        line-height: 1;
        padding: .5rem;
        font-size: 10px;
    }

    .oc-tag-wrapper {
        left: .5rem;
        top: .5rem;
        right: auto;
    }

    .general-interior h3, .maincontent-data h3, .maincontent-data h4, .docs-link-wrapper h3 {
        color: var(--main-color);
        font-size: 1.25rem;
    }

    .row-data.leader .sm5, .row-data.leader .sm7 {
        flex: 1;
    }

    .col-divider {
        font-size: 12px;
    }

    hgroup.surroundings h2 {
        font-size: 1.5rem;
    }

    .text-col.surroundings {
        padding-top: 0;
    }

    .broker-list {
        grid-template-columns: 1fr;
    }

    .broker-list h2 {
        font-size: 1.5rem;
    }

    .broker-list .bl-txt {
        font-size: 15px;
    }

    .content-intro h1 {
        margin-bottom: 1rem;
    }

    .input-wrapper>div {
        flex-basis: 100%;
    }

    .kontakt form {margin-top: 0;}

    .input-wrapper {
        flex-wrap: wrap;
        gap: 0;
    }

    .form textarea {
        height: 150px;
    }

    h2.tag {
        font-size: 12px;
        margin-bottom: .5rem;
    }

    .img-wrapper>.img-item:nth-child(1) {
        flex: 0 0 calc(66.66% - .25rem);
    }

    .img-item-wrapper.flex {
        flex: 0 0 calc(33.33% - .25rem);
        flex-direction: column;
        gap: .5rem;
    }

    form.controls {
        margin: 1rem 0 0;
        padding: 0 1rem;
    }

    button.more-filters {
        padding: 0;
        width: 2.5rem;
        background-position: center;
        background-color: #fff;
        background-size: 1.25rem;
    }

    button.more-filters, button.refresh {
        background: url(../images/filter.svg) no-repeat 50% / 1.5rem;
        padding: 0;
        font-size: 1rem;
        display: flex;
        align-items: center;
        border-radius: 10px;
    }

    .sub-filters {
        height: 0;
        transition: height 0.3s ease;
        interpolate-size: allow-keywords;
        padding: 0 1.5rem;
        overflow: hidden;
        margin: 0 -1.5rem;
    }

    .sub-filters.active {
        height: auto;
    }

    .filter-wrapper {
        margin-bottom: 1rem;
    }

    .filter-wrapper .button {
        font-size: 13px;
        padding: .8em 0.75em 0.9em;
    }

    .slide-container {
        flex-wrap: wrap;
        gap: 1.75rem;
        padding-bottom: 1rem;
        padding-top: 1rem;
    }

    fieldset.slide-wrapper {
        flex-basis: 100%;
        padding: 0;
    }

    fieldset.slide-wrapper:nth-child(2) {
        padding: 0;
        position: relative;
    }

    fieldset:has(.status-search) {
        flex-basis: 100%;
    }

    .search-wrapper input[type=text] {
        width: 100%;
    }

    .search-wrapper {
        margin-top: 1.5rem;        
    }

    a.oc-link:nth-child(6) img, a.oc-link:nth-child(11) img {
        aspect-ratio: 800 / 1067;
    }

    a.oc-link:nth-child(3) img,
    .broker-body a.oc-link:nth-child(3) img {
        aspect-ratio: 1;
    }

    .surroundings-map {
        padding: 3rem 0;
    }

    .ham-nav span.logo-symbol:after {
        font-size: 5rem;
        bottom: 4rem;
    }

    .br-puff img {
        max-width: 100%;
        margin: 0;
    }

    .br-puff .left {
        width: 100%;
        text-align: center;
    }

    .br-puff {
        gap: 1.5rem;
    }

    .body-default .ob-hero-wrapper img {
        aspect-ratio: auto;
    }

    .puffar.hm {
        line-height: 1.5;
        padding: 0;
    }

    .hm-logo img {
        width: 10rem;
    }

    .puffar.hm span:first-child {
        font-size: 3rem;
        letter-spacing: -3px;
        color: var(--main-color);
    }

    .broker.extra {
        padding: 2rem 1rem 0 1.5rem;
    }

    .salja-bostad .bl-img {
        order: -1;
    }

    .salja-bostad .bl-img img {
        margin: -2rem -1.5rem 2rem;
        max-width: calc(100% + 3rem);
        aspect-ratio: 1;
        object-fit: cover;
    }

    .salja-bostad .header {
        padding: 1.5rem;
    }

    .tag-header {
        font-size: 1.5rem;
        white-space: nowrap;
        margin-bottom: 0.5rem;
    }

    .blocks+.blocks {
        margin-top: 0;
    }

    .puffar.hm .puff {
        flex-basis: 100%;
        padding: 2rem 1rem;
    }

    .salja-bostad .content-intro h1 {
        display: block;
        /*color: #fff;
        position: absolute;*/
    }

    .ob-viewing,
    .ob-broker {
        width: 100%;
    }

    .status-badge {
        font-size: 14px;
        padding: .5rem;
        max-width: 5rem;
        line-height: 1;
        right: 1.5rem;
        top: -3rem;
    }

    .ol a.oc-link:nth-child(11) img,
    .broker-body a.oc-link:nth-child(11) img {
        aspect-ratio: 800 / 1067;
    }

    .carousel-dots {
        display: none;
    }

    .ob-hero-wrapper .bt-gr {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        white-space: nowrap;
        bottom: 1rem;
    }

    .ob-hero-wrapper a.button {
        background: #7f1b2b4a;
        border-color: #fff;
        font-size: 12px;
    }

    .broker-objects {
        padding: 1rem 0;
        margin-top: 3rem;
    }

    .broker-body h2.object-header {
        font-size: 2rem;
        margin-bottom: 1.5rem;
        text-align: center;
    }

    .header.sticky-header {
        padding: 1.5rem;
    }

    .header.sticky-header.scrolling-up {
        padding: 1.5rem;
    }

    .header.sticky-header.scrolling-up .logo {
        transform: scale(1);
    }

    .hero-movie-wrapper+.bt-gr {
        transform: none;
    }  

    .morekonceptet .puffar {
        grid-template-columns: repeat(1,1fr);
        margin: 2rem 0;
    }

    .morekonceptet .content-summary {
        margin: 0 -1.5rem;
        border-radius: 0;
        padding: 2rem;
    }

    .morekonceptet .blocks {margin: 2rem 0;3rem: 0;}

    .blocks:nth-child(odd) .bl-txt, .blocks:nth-child(2n) .bl-img {
        padding: 3rem 0 0;
    }

    .morekonceptet .blocks+.blocks h2 {
        margin-top: 2rem;
    }

    .blocks.m5xroh3s {
        margin-top: -3rem;
    }

    .morekonceptet .hero-content h1,
    .morekonceptet .hero-content h1>span {
        font-size: 2.5rem;
    } 

    .header.sticky-header .logo {
        transform: none;
    } 

    .salja-bostad .content-wrapper {
        padding-top: 84px;
    }

    span.besiktigad {
        position: static;
        left: 1.5rem;
        font-size: 12px;
        color: var(--main-color);
        background: none;
        padding: 0;
        bottom: -1rem;
        z-index: 999;
        border-width: 0;
        margin: -1rem 0 0.5rem -13px;
        display: block;
    }

    span.besiktigad:before {
        content: '\2714';
        margin-right: .25rem;
    }

    .irs--round .irs-bar, .irs--round .irs-line {
        background: url(/images/irs-line_mob.png) no-repeat 50% / contain;
    }



}