/*************/
/* Global    */
/*************/
@font-face { font-family: 'KatrinaScript'; src: url('/css/webfont/KatrinaScript.eot?#iefix') format('embedded-opentype'), url('/css/webfont/KatrinaScript.otf') format('opentype'), url('/css/webfont/KatrinaScript.woff') format('woff'), url('/css/webfont/KatrinaScript.ttf') format('truetype'), url('/css/webfont/KatrinaScript.svg#KatrinaScript') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'HelveticaNow'; src:  url('/css/webfont/HelveticaNowDisplay-Regular.eot?#iefix') format('embedded-opentype'),url('/css/webfont/HelveticaNowDisplay-Regular.woff') format('woff'), url('/css/webfont/HelveticaNowDisplay-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; }

body {  font-family: "HelveticaNow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-weight: 400; font-size:18px;line-height:30px;font-style: normal;  color: #333; margin: 0;  }
:root { --base-spacing: calc(2rem + 2vw); --color-graygreen: #C3D0CE;--color-darkblue: #353549; --color-orange: #F47E71;--color-lightgraygreen: #eaeceb;--text-color: #333; }

p { margin: 0 }
a {color:#333}

#container { height: 100vh; margin: 0 auto; margin-top:110px}

h1,h2, h3, h4 { margin-bottom: 15px; font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
h1 { font-size: clamp(4rem, 6vw, 6rem); font-weight: bold; line-height: 1; margin-top: 20px }
h2 { font-size: 40px; font-weight: bold;  }
h3 { font-size: 40px; font-weight: 500;line-height: 40px;  margin-top: 0 ;margin-bottom:30px}
h4 { font-size: 16px; font-weight: bold; }

.basetitle span { -webkit-text-fill-color: transparent; -webkit-text-stroke: 0.01em; display: block }

.textblock.nopadding.col1 { padding-top: 0; padding-bottom: 0 }

.scaletxt.normalsize { font-size:1rem}

*, *::before, *::after { box-sizing: border-box; }
.wrapper { position:relative;overflow:hidden}
.wrapper:not(.fullwidth) { max-width: 1200px; margin: 0 auto; }


.colordarkblue{background: var(--color-darkblue)}
.colorgraygreen{background: var(--color-graygreen)}
.colorlightgraygreen{background: var(--color-lightgraygreen)}
.itemgray .listrow, .itemgray .photoitem { background: var(--color-lightgraygreen) }
.itemlightgraygreen .listrow { background: var(--color-lightgraygreen) }
.itemdarkblue .listrow { background: var(--color-darkblue);color:#fff }
.itemgraygreen .listrow { background: var(--color-graygreen) }
.itemorange .listrow { background: var(--color-orange) }

.wrapper.backdarkblue { background: var(--color-darkblue) }
.wrapper.backlightgraygreen { background: var(--color-lightgraygreen) }
.wrapper.backgraygreen { background: var(--color-graygreen) }
.wrapper.orange { background: var(--color-orange) }
.wrapper.nomargin .listrow { margin: 0 auto!Important }
.wrapper.fullwidth { width: 100%; max-width: none }
.wrapper.limitedwidth { width: 100%;max-width:1200px;margin: 0 auto}

.titlewhite h2, .titlewhite h3, .titlewhite h4 { color: #fff }
.aligncenter,.aligncenter h2, .aligncenter h3, .aligncenter h4 { text-align: center }
.alignright, .alignright h2, .alignright h3, .alignright h4 { text-align: right }

/*************/
/*  Menubar  */
/*************/
header { position: fixed; display: flex; background: #fff; color: #333; width: 100%; z-index: 10; overflow: visible; min-height: 110px; top: 0;  }
    header .logo { background: url("logo_living-inn.svg") no-repeat; position: absolute; width: 200px; height:95px; display: flex;  margin-left: 20px }
.navbar { position: relative; max-width: 1200px; margin: 0 auto; padding-top: 10px; width: 100%; z-index: 10; border-bottom: 1px solid #fff }
    .navbar .voorelkaar { position: absolute; right: 20px; bottom: 15px; margin-left: auto;  font-size: 1.25rem; color: var(--color-graygreen) }
        .navbar .voorelkaar strong {color:#333 }
        .navbar .headertop { position: absolute; right: 20px; top: 0 }
        .navbar .headertop a { color: #fff; text-decoration: none; padding: 0.75rem 1rem; display: inline-block; border-right: 1px solid #333; font-size: 0.8rem; }
            .navbar .headertop a:hover { color: #333 }
            .navbar .headertop .icon:hover svg { fill: var(--color-graygreen) }
.scrolled .navbar:before { position: absolute; left: 50%; top: 0; height: 100%; width: 200vw; content: ""; background: #fff; transform: translateX(-50%); z-index: -1; }
.headertop .icon svg { height: 15px; vertical-align: middle; border: none; }


/* Complete menu */
@media only screen and (min-width: 950px) {
    .navbar .touch { display: none; line-height: 30px; }
    .navbar .menu { display: flex; gap: 20px; position: absolute;  left: 250px; bottom: 12px; list-style: none; margin: 0; }
        .navbar .menu ul { list-style: none; position: relative; }
        .navbar .menu li { position: relative; }
            .navbar .menu li:hover .submenu { display: block; }
        .navbar .menu a { text-decoration: none; color: #333; font-weight: 500;  position: relative; font-size: 0.9rem; }
        .navbar .menu .active a, .navbar .menu > li:hover > a { border-bottom: solid 2px #333 }
        .navbar .menu .submenu { display: none; position: absolute; top: 100%; left: 0; background: #fff; padding: 10px; border-radius: 5px; white-space: nowrap; width: 100%; top: 56px }
            .navbar .menu .submenu a { color: #ed2d23; display: block; padding: 5px 0; font-weight: 500; }
                .navbar .menu .submenu a:hover { color: #333 }
            .navbar .menu .submenu:before { position: absolute; left: 50%; top: 0; height: 100%; width: 200vw; content: ""; background: #fff; transform: translateX(-50%); z-index: -1; }
}




/* header 1*/
/*.container { width: 100%; }*/

.singleimageheader .top-banner { display: block; position: relative; height: 60vw; height: 45vw; background-color: var(--color-graygreen); margin-bottom: 10vw }
.singleimageheader .text-block { position: absolute; left: 20px; top: 10px; width: 50% }
.singleimageheader h1 { font-size: 28px; color: #fff; font-weight: 600; line-height: 1.3; }
.singleimageheader .color-block.navy { position: absolute; top: 0; right: 0; height: 30vw; width: 50%; background-color: var(--color-darkblue) ;}
.singleimageheader .singleheaderimage { position: absolute; width: 80%; top:80px; left: 0 }


.doubleimageheader .top-banner { display: block; position: relative; height: 60vw;  background-color: var(--color-graygreen); }
.doubleimageheader .text-block { position: absolute; left: 20px; top:46vw;  }
.doubleimageheader h1 { font-size: 28px; color: #fff; font-weight: 600; line-height: 1.3;margin-top:0 }
.doubleimageheader .color-block.navy { position: absolute; top: 0; right: 0; height: 30vw; width: 50%; background-color: var(--color-darkblue) ; }
.doubleimageheader .singleheaderimage { position: absolute; height: 45vw; bottom: 0; left: 20px; top: 0; max-width: 80%; }
.doubleimageheader .headersubimage { position: absolute; width:25%; bottom: 0; left: 70%; top: 25vw }

@media only screen and (max-width: 950px) {
    .navbar .voorelkaar { display: none }
    .navbar .touch { display: flex; line-height: 30px; position: absolute; right: 20px; color: #333; bottom: 20px; }
        .navbar .touch .hamburgermenu { width: 40px; display: block; position: relative }
            .navbar .touch .hamburgermenu > span { margin: 7px; display: block; height: 2px; background: #333; }
    .navbar .menu { position: absolute; top: 25px; padding: 0; display: none; width: 100%; top: 88px; display: none; width: 100%; left: 0px; }
        .navbar .menu li { padding: 0; left: 0px; display: block; padding-left: 4%; width: 100%; background: var(--color-darkblue);font-size:20px;line-height:70px;text-align:center}
        .navbar .menu > li.active a { color: var(--color-orange) }
        .navbar .menu li > a { text-decoration: none; line-height: 30px; color: #fff }
            .navbar .menu li > a:hover { color: #ccc}

.doubleimageheader h1{font-size:20px}
}

/*.image-block { position: relative; display: flex; justify-content: center; }
    .image-block img { width: 100%; height: auto; display: block; }
.overlay-color.left { position: absolute; bottom: 0; left: 0; width: 20%; height: 100px; background-color: var(--color-graygreen); }
.overlay-color.right { position: absolute; bottom: 0; right: 0; width: 20%; height: 100px; background-color: #ffffff; }*/
/* Carrousel*/
.carousel { display: flex; transition: transform 0.5s ease; will-change: transform; }
.carousel-wrapper .arrow { position: absolute; top: 50%; transform: translateY(-50%); background-color: white; border: none; font-size: 1.5rem; cursor: pointer; padding: 0.75rem; border-radius: 0.5rem; /* afgeronde hoeken */ box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* zachte schaduw */ z-index: 10; color: #2b2b2b; /* donkergrijze pijl */ display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
.carousel-wrapper .arrow.left { left: 10px; }
.carousel-wrapper .arrow.right { right: 10px; }
.textimagecombi .carousel { display: flex; transition: transform 0.5s ease-in-out; width: 100%; }
    .textimagecombi .carousel .listrow { flex: 0 0 100%; /* Each listrow is exactly one full-width slide */ box-sizing: border-box; }

.alignleft .block { position: absolute; top: 50%; left: 5%;  padding: 1rem 1.5rem; text-align: left }
.aligncenter .block { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);  padding: 1rem 1.5rem; text-align: center;  }
.alignright .block { position: absolute; top: 50%; right: 5%; padding: 1rem 1.5rem; text-align: left }

.imageonly .photoitem { min-width: 100%; box-sizing: border-box; position:relative}
.imageonly .block{position: absolute;  left: 50%;  top: 50%;  text-align: center;  transform: translate(-50%, -50%);}
.photoitem img { width: 100%; height: auto; display: block; }
@media (max-width: 1000px) {
    .carousel-container { height: auto; min-height: 75vh; }
}

/*  videoheader */
.embed-container { position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 ratio */ height: 0; overflow: hidden; }
    .embed-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }



.textimagecombi .listrow .photoitem { flex: 1 1 50%; display: flex; justify-content: center; align-items: center; transition: transform 0.2s ease-out; transform-origin: center center; }
.textimagecombi .listrow .scaletxt { flex: 1 1 50%; padding: 20px 40px; display: inline;}


/*************/
/* TextBlock */
/*************/
.textblock { display: flex; flex-wrap: wrap; width: 100%; padding: 50px; gap: 20px; max-width: 1200px }
    .textblock.col1.alignleft { max-width: 1200px; padding-left: 20px }
    .textblock.alignleft > div { max-width: 800px }
    .textblock > span { flex: 1 1 400px; min-width: 250px; flex-direction: column; align-hitems: center; position: relative }
    .textblock.col1 { margin: 0 auto; padding: 50px 0; flex: 0 0 66.6666666667%; max-width: 700px; }
        .textblock.col1 h2 { line-height: 1.1; margin-bottom: 0.25em; }
    .textblock.col2 { display: flex; flex-wrap: wrap; max-width: 1200px; gap: 40px; margin: 0 auto; }
        .textblock.col2:not(.fullimg) > .photoitem, .textblock.col2:not(.fullimg) > .column { flex: 0 0 45% }
        .textblock.col3 { display: flex; max-width: 1200px; gap: 0; margin: 0 auto; }
    .textblock.col4 { display: flex; max-width: 1200px; gap: 20px; margin: 0 auto; }
        .textblock.col4 > span { flex: 1 1 200px; min-width: 200px; }
        .textblock.col4 > img { flex: 1 1 200px; min-width: 200px; }
/*
        .textblock.col2.headerleft h3, .textblock.col3.headerleft h3, .textblock.col4.headerleft h3, .textimagecombi.headerleft h3 { text-align: left }*/
    .textblock.title { margin-bottom: 0 }
    .textblock.col3.photo, .textblock.col4.photo { gap: 5px }

    .textblock.col2.specimg:not(.fullimg) > .photoitem>div {  padding-left: 160px;width:100%;padding-bottom:0 }
        .textblock.col2.specimg:not(.fullimg) > .photoitem .slideimageholder { position: absolute; left: 0;top:50% ;transform: translate(0, -50%);}

        .textblock.nopadding { column-gap: 0; }
        .textblock.nopadding > span { padding: 0 }
            .textblock.nopadding > span.scaletxt { padding: 20px }
    .textblock.nobottommargin { margin-bottom: 0 }

    .textblock .slogan h3 { margin: 0; font-size: 35px; line-height: 35px; margin-left: 30px; display: block; }
.specimg .listrow > div img, .listrow > img { max-width: 100%; object-fit: cover; height: auto; width: 50%; margin: 0 2rem 0 auto; display: table; transition: 0.2s; }
.specimg h2 { line-height:35px;}
.listrow.inview > div img, .listrow.inview > img { transform: translateY(1rem); }
/*    .textblock a, .scaletxt a { displgay: inline-block; color: #ed2d23; text-decoration: none; mkin-height: 150px; dispglay: inline-block; width: 100%; }*/
.scadddletxt a { position: absolute; left: 40px; bottom: 20px; }
.scaletxt a, .block a, a.rounded,.rounded { display: inline-block; background-color: var(--color-darkblue); color: var(--color-lightgraygreen); padding: 0.45em 1em; font-weight: 500; border-radius: 999px; text-decoration: none; text-align: center; transition: background-color 0.3s ease, color 0.3s ease;margin-right:10px ;margin-bottom:10px;}
.rounded a{color:var(--color-lightgraygreen)}

        .textblock a .arrow, .scaletxt a .arrow { width: 2rem; border-top: 2px solid currentColor; display: inline-block; vertical-align: middle; margin-left: 1em; position: relative; transition: 0.2s;  }
         a:hover .arrow { width: 3rem; }
         a .arrow:after { border: 2px solid currentColor; border-top-width: 2px; border-left-width: 2px; border-left-width: 0; border-top-width: 0; content: ""; display: inline-block; height: auto; padding: 2.5px; position: absolute; right: 0; top: 50%; width: auto; transition: 0.1s; transform: translateY(-4.5px) rotate(-45deg); }
    .textblock.screenwide { max-width: none }
    .textblock.fullimg { padding: 0; max-width: none }
.textimagecombi:not(.fullimg) .listrow { display: flex; flex-wrap: wrap; width: 100%; min-height: 400px; align-items: flex-start; padding: calc(var(--base-spacing) * 1) var(--base-spacing); margin: 40px auto; max-width: 1200px; }
.textimagecombi .listrow .scaletxt { flex: 1 1 50%; padding: 20px 40px; display: inline; padding-bottom:80px }
    .textimagecombi .listrow .scaletxt h3 {  font-size: 2rem; margin-top:35px; line-height: 1; }
.textimagecombi .listrow .photoitem { flex: 0 0 55%;  display: flex; justify-content: center; align-items: center; transition: transform 0.2s ease-out; transform-origin: center center; }

.textimagecombi.photoright .listrow {flex-direction: row-reverse;}

.textimagecombi .listrow .scaletxt { flex: 0 0 45%; padding: 20px 40px 80px 40px; display: block;  }
.multicoltxt { }
.textblock.col3 .column { flex: 1 1 calc(33.333% - 2rem);  box-sizing: border-box; }
.companylink { border-bottom: 1px solid #333; padding-bottom: 30px; border: 2px solid #fff; padding-left:10px;min-height:15px}
.companylink p { color: #333; font-size: 15px }
    .companylink:hover { border: 2px solid var(--color-darkblue);}
        .companylink:hover p { font-size: 18px }

  /*      h2:before, h3:before { content: ""; display: block; height: 15px; width: 0; background: currentColor; transition: width 0.4s ease-out; margin-bottom: 0; }
h3:before { margin-bottom: 0.5em; height: 10px; }*/
h2.headerlinegrow:before, h3.headerlinegrow:before { width: 1.5em; max-width: 60px }

.textimage2col { display: flex; flex-wrap: wrap; gap: 20px; }
    .textimage2col .photohalf { position: absolute; right: 0; height: 100%;display:block }
.textimage2col .headerlinegrow{height:auto}
    /*.textimage2col .listrow { display: flex; flex: 0 0 50%; box-sizing: border-box; background: #ddd;*/ /* just for clarity */ /*overflow: hidden; position: relative; }*/
    .textimage2col .photoitem { flex: 1; mrax-width: 50%; overflow: hidden; position: relative; background: var(--color-orange) ;  min-width: 500px;}
        .textimage2col .photoitem .scaletxt { fdont-size: 18px; ldine-height: 20px }
        .textimage2col .photoitem img { widgth: 200%; /* stretch image */ height: 100%; object-fit: cover; objgect-position: left center; /* show only the left part */ display: block; transform: translateX(50%); /* tweak if needed */ }
    .textimage2col .scaletxt { flex: 1; padding: 20px; display: flex; flex-direction: column; justify-content: center; margin-right:35%}
    .textimage2col h3 { color:#fff;}
    .textimage2col .toptitle { font-size: 23px;font-weight:600;margin-bottom:70px; }

        .textimage2col .photoitem:nth-child(2n+1) { background: var(--color-graygreen) }
    /* parallax effect */
    .listrow { position: relative; overflow: hidden; }

.scaletxt { position: relative; transition: transform 0.1s ease-out; will-change: transform; }


.scaldetxt { position: relative; z-index: 2; transition: transform 0.2s linear; }
.textimagecombi .listrowwide .photoitem { flex: 1 1 50%; display: flex; justify-content: center; align-items: center; transition: transform 0.2s ease-out; transform-origin: center center; }
.textimagecombi .listrow .photoitem img { max-width: 100%; height: auto; display: block; transition: transform 330ms ease-in-out; max-height: 500px; width: auto; }

.box { transition: transform 330ms ease-in-out; }
/*.textimagecombi:not(.backcolor2) .listrowwide:nth-child(odd) { background-color: #ed2d23; }*/
.textimagecombi.unevenrowlayout .listrow:nth-child(even) {  flex-direction: row-reverse; }
    .textimagecombi.unevenrowlayout .listrow:nth-child(even) .listrow { flex-direction: row-reverse }


.textblock.newsitems { display: flex; flex-wrap: wrap; gap: 1rem; padding-left: 0; padding-right: 0;  }
    .textblock.newsitems h3 { font-size:1.25rem;padding-left:20px;padding-top:20px}
    .textblock.newsitems .link {position:absolute;left:20px;bottom:10px ;font-size:15px}
    .textblock.newsitems .item { display: flex; flex-direction: column; width: calc(33.333% - 1rem); position: relative; padding-bottom: 40px; background-color: var(--color-lightgraygreen); text-decoration: none; color: inherit; }
        .textblock.newsitems .item:nth-child(1) { width: calc(66.666% - 1rem); }
    .textblock.newsitems .newsphoto { width: 100%; height: 300px; overflow: hidden; display: flex; justify-content: center; align-items: center; }
        .textblock.newsitems .newsphoto img { width: 100%; height: 100%; object-fit: cover; display: block;pagdding-top:20px }


.image-wrapper { position: relative; width: 100%; height: 100%; }
.photoitem { overflow: hidden }
    .photoitem img { width: 100%; height: auto; object-fit: cover; transform: scale(1); transition: transform 2s ease; display: block; }
/*.photoitem img { width: 100%; height: auto; display: block; transition: transform 0.3s ease; }*/
.textblock a:hover .photoitem img, .textimagecombi .listrow .photoitem:hover img { transform: scale(1.1); }
.imagecorner .photitem img { }

.textblock .iconlist { }
    .textblock .iconlist > span { border-top: 2px solid #eee; padding: 10px 0 10px 80px; display: block }
    .textblock .iconlist .columnicon { display: inline-block; margin-left: -65px; position: absolute }
        .textblock .iconlist .columnicon svg { width: 50px; color:var(--color-darkblue)}
    .textblock .iconlist h3 { margin-top: 0; padding-top: 0; font-weight: 600 }
.textcolor1 { font-size: 1.5rem; }
.textblock:not(.fullimg) .photoitem, .scaletxt { flex: 1; padding: 30px; display: flex; fdont-size: 1.5rem; }
.textblock:not(.fullimg) .photoitem {fodnt-size:18px;lidne-height:20px }

    .textblock .photoitem a { position: absolute; bottom: 50px; left: 0px }
.textblock.specimg .photoitem > div { width: 70%; padding-bottom: 100px; height: 100%; position: relative }
.textblock.specimg .photoitem .slideimageholder { height: auto; display: table; transform: translateY(1rem); transition: 0.2s; overflow: hidden; margin-bottom: 1rem; }
    .aaaatextblock.specimg .photoitem .slideimageholder:before { position: absolute; left: 0; right: 0; top: 50%; bottom: 0; background: #000; content: ""; z-index: -1; transition: 0.2s; }
.textblock.specimg  .photoitem:hover .slideimageholder:before { top: 40% }
.aaaatextblock.specimg .photoitem:hover .slideimageholder img { transform: translateY(0); transition: 0.2s; }
.textblockwide.fullimg { position: relative; display: block; height: 100vh; width: 100%; overflow: hidden; }
    .textblockwide.fullimg .listrowwide { padding: 0 }
    .textblockwide.fullimg .photoitem { top: 0; left: 0; height: 100%; width: 100%; z-index: 0; padding: 0 }
        .textblockwide.fullimg .photoitem img { height: 100vh; width: 100%; object-fit: cover; object-position: center; display: block; padding: 0 }
    .textblockwide.fullimg .scaletxt { width: 500px; left: 20px; top: 40px; position: absolute; color: #fff; align-items: unset }
        .textblockwide.fullimg .scaletxt h3 { font-size: clamp(4rem, 6vw, 6rem); font-weight: bold; line-height: 55px; }




/* Carrousel*/
.headertitlebox{position:absolute;left:0;top:0;width:100%;height:100%;padding-bottom:56.25%;color:#fff}
.slidecarousel { width: 100%;height:100%;  position: relative; overflow: hidden }
.slidecarousel h1{font-family:"KatrinaScript"}
.carousel-slide .headertitle, .basetitlebox { position: absolute; top: 40%; left: 10%; colror: white; z-index: 9; display: block; font-size: clamp(4rem, 6vw, 6rem); line-height: 0.9; }
.basetitlebox { position: absolute; tfop: 40%; lefft: 0;left:0; corlor: white; z-index: 9; display: block; width: 100%; }
.basetitle { madx-width: 1200px; madrgin: 0 auto; font-size: clamp(4rem, 6vw, 6rem); line-height: 0.9; paddding-left: 40px ;left:10%;position:absolute}
    .basetitle:before {  display: block; height: 0.18em; margin-bottom: 0.25em; width: 0.5em; transform: scale(0, 1); transform-origin: top left; transition: 0.66s 0.66s; transform: scale(1) !important; background: currentcolor; margin-top: -30px }
    .basetitle p { font-size: 1.5rem; margin-top: 0 }
.basetitlebox .basetitle{width:100%;left:0;text-align:center;}
.basetitlebox .basetitle h1{font-family:"Sora";font-size:50px}
.carousel-slide { position: absolute; top: 0; width: 100%; height: 100%; left: 100%; z-index: 1; transition: left 1s ease-in-out; overflow: hidden; }
    .aaaaaacarousel-slide .headertitle { -webkit-text-fill-color: transparent; -webkit-text-stroke: 0.01em; margin-top: 0; }
    .carousel-slide.active { left: 0; z-index: 2; }
    .carousel-slide.prev-static { left: 0; z-index: 1; }
    .slddddidecarousel:not(.photoright)  .carousel-slide img { position: absolute; top: 0; left: 50%; transform: translateX(-50%) scale(1.15); height: 100%; width: auto; max-width: none; object-fit: cover; transition: transform 8s ease; }
  .slidecarousel:not(.photoright)  .carousel-slide img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center center;
            transition: transform 8s ease;
        }    

/* Alle slides starten rechts buiten beeld, zónder transition */
.carousel-slide {position: absolute;  inset: 0;  transform: translateX(100%);  transition: none;}

/* Alleen de binnenkomende (actieve) slide animeert naar links */
.carousel-slide.active {  transform: translateX(0);  transition: transform 800ms ease; }

/* Only active OR prev-static slides zoom out */
  .slidecarousel:not(.photoright)   .carousel-slide.active img,
  .slidecarousel:not(.photoright)   .carousel-slide.prev-static:not(.photoright) img { transform: trjjjjanslateX(-50%) scale(1); }
 .slidecarousel.photoright  .carousel-slide img { position: absolute; top: 0; left: 0; transform: transnlateX(-25%) scale(1.15); height: 100%; width: auto; max-width: none; object-fit: cover; transition: transform 8s ease; }
  .slidecarousel.photoright   .carousel-slide.active img,
     .slidecarousel.photoright  .carousel-slide.prev-static img { transform: translateX(-25%) scale(1); }
.whiteback .basetitle { color: var(--color-vibrantred) }

@media (max-width: 1000px) {
    .carousel-container { height: auto; min-height: 75vh; }
.textblock.col2:not(.fullimg) > .photoitem{min-width:100%}
.textblock.col2:not(.fullimg) > .photoitem .headerlinegrow{height:auto}

}

.textblock.col1.limitedwidth{max-width:1200px;padding:15px}
.textblock > div {
  flex: 1 1 100%;
}
.contactcol {
   display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 20px;
}

.contactcol table{width:calc(100% - 40px);margin: 20px}
.contactcol table input,.contactcol table textarea{width:100%;padding:10px;border: 2px solid var(--color-darkblue);border-radius: 19px;}
.contactcol span {
  flex: 1 1 0;
  min-width: min(350px, 100%);
}
.contactcol .outlineblock{display:block;padding:20px 30px;border: 2px solid #333;text-align:center;max-width:200px;margin: 0 auto 50px;}
.contactcol .rounded{text-align:center}
.contactcol table input::placeholder, .contactcol table textarea::placeholder{font-family: "HelveticaNow";color:var(--color-darkblue)}



/*  videoheader */
.embed-container { position: relative;
  width: 100%;
  height: 100vh;
  padding-bottom: 56.25%;
  overflow: hidden; }
    .embed-container iframe {  --videoRatio: calc(16 / 9); /* CHANGE THIS IF THE VIDEO CHANGES */
    padding: 0;
    margin: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative; }


.video-wrap {
    --videoRatio: calc(16 / 9); /* CHANGE THIS IF THE VIDEO CHANGES */
    padding: 0;
    margin: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
}
.video-wrap.is-ready::before {
  opacity: 0;
  transition-delay: 0.4s; /* poster blijft iets langer staan */
}
/* Poster bovenop */
.video-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--poster);
  background-size: cover;
  background-position: center;
  z-index: 2;
  opacity: 1;
  transition: opacity 1.2s ease-in-out;
  will-change: opacity;
}

/* iframe fade-in */
.___video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  will-change: opacity;
  z-index: 1;
}

.video-wrap iframe {
  padding: 0;
    margin: 0;
    position: relative;
    --w: 100vw;
    --h: calc(var(--w) / var(--videoRatio));
    height: var(--h);
    width: var(--w);
    top: calc(50% - (var(--h) / 2));
    left: 0;
    width: var(--w);
    height: var(--h);}

/* Zodra klaar → video in, poster uit */
.video-wrap.is-ready iframe { opacity: 1; }
.video-wrap.is-ready::before { opacity: 0; }

@supports not (aspect-ratio: 1/1) {
  .video-wrap { height: 0; padding-top: 56.25%; }
}

@media (max-width: 800px) {
  

.carousel-slide .headertitle, .basetitlebox {top:50%}

}
   /* Maximum aspect ratio */
@media (max-aspect-ratio: 16/9) {/*the viewport is too narrow for the full video */
  .video-wrap iframe {
    --h: 100vh;
    --w: calc(var(--h) * var(--videoRatio));
    top: 0;
    left: calc(50% - (var(--w) / 2));
  }
}
@media (max-width: 700px) {
.basetitle h1, .carousel-slide .headertitle {font-size: clamp(3rem, 4vw, 4rem);line-height:1.3}
.basetitle h1{line-height:1}
    .carousel-content h1 { font-size: 1.5rem; }
    .carousel-content a { font-size: 0.75rem; }
}


@media (max-width: 700px) {
.textimage2col.textimagecombi{display:block}
.textimage2col .photohalf{position:relative;}
.textimage2col .photohalf img{height:300px;text-align:center;width: 50%;  margin-left: 25%;padding-top:30px}
.textimage2col .photoitem img{transform:translateX(0%);height:auto}
.textimage2col .scaletxt {margin-right:0}

}


h2 span, h3 span { -webkit-text-fill-color: transparent; -webkit-text-stroke: 0.01em; }

.photoitem {}
.photoitem h3{height:100px}
.photoitem .slideimageholder{margin-bottom:20px}


.textblock.textlist .photoitem { position: relative; flex: 1 1 calc((100% - 80px) / 2); box-sizing: border-box; font-size: 15px; min-height: 400px; padding-bottom: 100px; }
.textblock.textlist h2 {font-size:30px;line-height:35px }
.textblock.textlist.col3 .photoitem { flex: 1 1 calc((100% - 80px) / 3); }
.textblock.textlist.col4 .photoitem { flex: 1 1 calc((100% - 80px) / 4); }
    .textblock.textlist .photoitem > div { height: 100%; display: flex; flex-direction: column; justify-content: space-between; }

.textblock.textlist .slideimageholder { margin-top: auto; /* pushes image to the bottom of content block */ }

.textblock.textlist a:last-of-type { position: absolute; left: 30px; bottom: 20px; }
.textimagecombi.nopadding .listrow{padding:0}

.textimagecombi.imagecorner:not(.fullimg) .listrow { padding: 0; }

.textimagecombi.imagecorner .listrow .photoitem { align-self: stretch;  width: auto; height: 100%; justify-content: flex-start; margin: 0; padding: 0; }

.textimagecombi.imagecorner .listrow .photoitem img { height: 100%; width: auto; object-fit: cover; display: block; }

.vertalign .scaletxt{ align-self: center; }

/* accordion */
.faqIDfaq { list-style: none; padding: 0; width: 100% }
    .faqIDfaq h3 { margin-bottom: 0; color: #333; text-align: left; font-size: 18px; }
    .faqIDfaq li.q { cursor: pointer; background: var(--color-graygreen); color: white; padding: 10px; margin: 5px 0; font-weight: bold; display: flex; justify-content: space-between; align-items: center; position: relative; }
        .faqIDfaq li.q::after { content: "▼"; font-size: 16px; transition: transform 0.3s ease-in-out; }
        .faqIDfaq li.q:hover h3 { color: #fff }
    .faqIDfaq li.a { display: none; padding: 10px; border-left: 4px solid var(--color-graygreen); margin-bottom: 5px; }
        .faqIDfaq li.a a { border: none; padding: 0; font-weight: normal; text-decoration: underline }

/* Footer*/
.footer, .footerbar {  color: #333; padding: 15px; margin-bottom: 0; width: calc(100% - 30px); font-size: 1.15rem; max-width: calc(1440px + 4rem); margin: 0 auto; fofnt-family: "Rubik", "Lora"; text-align: left }

.footer .footerlogo { background: url("logo_living-inn.svg") no-repeat; margin:0 auto; width: 30%; min-width:250px; height: 295px; display: flex; margin-top:60px }
.footer.col4 { display: flex; gap: 10px;    flex-wrap: wrap;}
    .footer.col4 span { flex: 1; padding: 20px; min-width:200px }
 .footer.col4 span:first-child{min-width:300px;}
.footer h3 {font-size:15px;margin-bottom:0 ;margin-top: 25px;}
    .footer span .smlinks { padding: 0; margin: 0 }
    .footer .icon {  text-decoration: none; padding: 10px; display: inline-block; font-size: 0.8rem; width: 40px; height: 40px; background-color: #fff; border-radius: 50%; display: inline-flex; justify-content: center; align-items: center;margin-right:10px }
        .footer .icon:hover { background: var(--color-orange); color:#fff}
        .footer .icon svg { height: 15px; vertical-align: middle; border: none; }
    .footer.outaligntext { display: flex; justify-content: space-between; }
        .footer.outaligntext  {  text-decoration: none; font-size: 13px }
    .footer.centertext { display: flex; justify-content: center; /* centers the sub-div horizontally */ }
    .footer.centertext > div { display: flex; align-items: center; gap: 0.5rem;font-size:13px }
    .footer .logoroozenvanhoppe { background: url("Logo_roozenVanHoppe.svg") no-repeat;  width: 100px; height: 25px; display: inline-block; margin-right:20px}

/*.footerwide { background: #fff }
.footer, .footerbar { background: #fff; color: #ed2d23; padding: 15px; margin-bottom: 0; width: calc(100% - 30px); font-size: 1.15rem; max-width: calc(1440px + 4rem); margin: 0 auto }
.footerbar { display: flex; max-width: 1200px; font-weight: bold; font-size: 1rem }
.textblock.footer { padding: calc(var(--base-spacing) * 2) 0; }
.footer > span > span { width: 50%; display: inline-block; vertical-align: top }
.footer a, .footerbar a { text-decoration: none !important; background-image: linear-gradient(to right, currentColor, currentColor); background-position: 0% 100%; background-repeat: no-repeat; background-size: 0% 1px; transition: background-size 0.3s; }
    .footer a:focus, .footer a:hover, .footerbar a:focus, .footerbar a:hover { color: tomato; background-size: 100% 1px; }
.footer h4 { color: #ed2d23; font-size: 1.75rem;  font-weight: bold; margin: 2rem 0 1rem; }
.footerheader { font-size: clamp(4rem, 5vw, 5rem); font-weight: bold; line-height: 0.9; margin-top: -0.2em; color: #333 }
    .footerheader:before { content: ""; display: block; height: 0.18em; margin-bottom: 0.25em; width: 0.5em; transform: scale(0, 1); transform-origin: top left; transition: 0.66s 0.66s; background: #ed2d23; transform: scale(1) !important; }

*/

@media (max-width: 700px) {
h3{font-size:30px;line-height:30px;margin-bottom:10px}
.textimagecombi .listrow .scaletxt,.textblock.multicoltxt {padding:15px;display:block}
    .textimagecombi:not(.fullimg) .listrow,.textblock:not(.fullimg) .photoitem, .scaletxt{display:block;padding:0}
.textblock:not(.fullimg) .photoitem{display:block;}
.textblock.col2.specimg h3{text-align:center}
.textblock.col2.specimg:not(.fullimg) > .photoitem > div{padding-left:0}
.textblock.col2.specimg:not(.fullimg) > .photoitem .slideimageholder{position:relative;transform:none;top:0;left:50%;transform:translate(-50%,0)}
.footer.col4{display:block;}
.doubleimageheader .headersubimage{display:none}
.singleimageheader .text-block{width:80%;z-index:100}
.alignright, .alignright h2, .alignright h3, .alignright h4 {text-align:left}
.navbar .headertop{display:none}
.textimage2col .photoitem{min-width:0}
}