/* DEFAULTS
  Author: Primosite

  Marenhoeve (site157)
  
----------------------------------------------------- */
@import "marenhoeve-vars-v2.0.css";

* {margin:0;padding:0;}

/* STRUCURE */
html{font: 16px /1.5 'Lato', sans-serif;color:#555555;}
html, body {height:100%;min-height:100%;}

#container-wrapper {min-height:100vh;}
#container {display:flex;flex-flow:column;justify-content:space-between;min-height:100vh;display:flex;flex-flow:column;}

/* extraW */
.content .xlocations-wrapper > .xlocations
{width:var(--defaultW);max-width:var(--extraW);margin:0 auto;padding-bottom:var(--dubbleMarginW);}

/* mainW */
#header,
#headerlinks,
#menu,
#footer,
.content > .editpiclist,
.content .emailform-body,
.catalog  .product,
.productfolder-wrapper .tagtype-wrapper,
.content > .ps-form,
.content > .schoolguide,
.content > .siteparameters,
.home-xlocations,
.content .tagvalues {width:var(--defaultW);max-width:var(--mainW);margin:0 auto;}

/* contentW */
.content > .emailform-wrapper > .emailform-form,
.content > .error-wrapper,
.homesection-schoolguide .text:not(.intro),
.home-xlocations-wrapper > .text,
.content > .information-wrapper .information,
.content > .schoolguide-wrapper .paragraph,
.content .product > .text,
.content > .psform-wrapper,
.content .taggroup,
.content .xlocations-wrapper > .text {width:var(--defaultW);max-width:var(--contentW);margin:0 auto;}

/* loginW */
.content > .actionform
{width:var(--defaultW);max-width:var(--loginW);margin:0 auto;padding-bottom:var(--dubbleMarginW);}

.content #error .errortext,
.content #error .homelink
{width:var(--defaultW);max-width:var(--subContentW);margin:0 auto;padding-bottom:var(--dubbleMarginW);}

#header-wrapper {
  position:fixed;top:0;width:100%;
  background-color:var(--beige);z-index:3;
  box-shadow:var(--boxShadowBlack);}

#header {}

#version {
  position:absolute;top:1em;left:50%;margin-left:-20px;
  width:40px;height:40px; border-radius:50%;font-weight:var(--fontBold);
  display:flex;align-items:center;justify-content:center;
  background:var(--orange);color:white;z-index:4;
  display:none;
}

#logo {
  width:var(--logoW);
  position:absolute;left:1rem;top:1rem;z-index:3;
}
#logo img {width:100%;}
#payoff {}

#nav-trigger {display:none;}

#headerlinks-wrapper {background-color:var(--darkOrange);padding:1rem 0}
#header-nav ul.level1 {display:flex;flex-flow:row wrap;justify-content: flex-end;}
#header-nav a {color:white;text-decoration:none;display:block;white-space:nowrap;text-transform:uppercase;
  font-weight:var(--fontBold);font-size:var(--font-1);}
#header-nav a:before {color:inherit;}

#header-nav li.level1 {margin-left:2em;}
#header-nav li {position:relative;}
#header-nav li > div {
  display:none;position:absolute;right:0;background-color:var(--orange);
  padding:1em;}
#header-nav li:hover > div {display:block;}
#header-nav li.level2 {margin-bottom:.5em;}

#menu-wrapper {padding:1rem 0;}
.menu li {list-style:none;}
#sitemenu-nav ul.level1 {margin-left:var(--logoW);margin-top:.70rem;
  display:flex;flex-flow:row wrap;justify-content:space-between;}
#sitemenu-nav li.level1 {text-align:center;margin:0 0 0 1em;}
#sitemenu-nav a {color:var(--green);text-decoration:none;font-weight:var(--fontBold);white-space:nowrap}

#content-wrapper {flex-grow:1;}

#banner {width:100%;height:var(--bannerH);margin-bottom:2em;
  display:flex;align-items:center;justify-content:center;
  background-size: cover;
  background-position:50%;
  background-repeat:no-repeat; 
}

#footer-wrapper {min-height:var(--footerH);/*! margin-top:2em; */background-color:var(--green);
  border-bottom:solid var(--dubbleMarginW) var(--darkGreen);}
#footer *,
#footer *:before {color:white;}

#footer {padding:2em 0;position:relative;display:flex;flex-flow:row wrap;justify-content:space-between;}
#footer > * {margin-bottom:1em;}
#footer .editwrapper {position:absolute;top:0;}
#footer .contactdata {flex-basis:25%;align-self:flex-start;}

#partners:before {content:"Partner";display:block;text-align:center;
  font-size:var(--font5);font-weight:var(--fontBold);}
#partners li {margin:0 1em .5em;}
#partners .image {width:150px;height:120px;display:inline-block;
  background-size:100%;
  background-position: 50%;
  background-repeat: no-repeat;
}
#partners ul.menu {display:flex;}
#copyright {text-align:center;padding:1em 0;font-size:var(--font-1);}

/* DEFAULTS */
:focus {outline:none;}
h1,h2,h3,h4,h5,h6 {margin-bottom:1em;}
h1 {font-family:"Noto Serif", serif;color:white;
  font-size:var(font10);font-weight:var(--fontRegular);
  background-color:var(--darkOrange);display:inline-block;padding:0 .5em;}
#container-wrapper.hasbanner h1 {position:absolute;margin:-2em 0 0 1em;z-index:2;}
h2 {font-size:var(--font10);font-weight:var(--fontBold);}

.content a,
#footer a {color:inherit;text-decoration:underline dotted;text-underline-offset:.25em;}
.content a:hover,
#footer a:hover {;text-decoration:underline solid;}

a img {border:none;}
.cta > a,
a.cta,
a.more {display:inline-block;padding:.5em 1em;color:var(--darkOrange);border:solid 2px;text-decoration:none;}

.cta> a:hover,
a.cta:hover,
a.more:hover,
a.more:hover:before {background-color:var(--darkOrange);border-color:var(--darkOrange);color:white;text-decoration:none;}

[class^="icon-"]:before, 
[class*=" icon-"]:before {text-decoration:none!important;color:var(--darkOrange);}

.menu li[class^="icon-"]:before, 
.menu li[class*=" icon-"]:before {display:none;}

.image {line-height:1;background-size:cover;background-position:50%;}
.image img, a img {max-width:100%;max-height:100%;display:block;margin:0 auto;}

.contactdata {min-width:220px;display:flex;flex-flow:row wrap;margin-bottom:2em;}
.contactdata > * {flex-basis:100%;}
.contactdata .name {font-weight:var(--fontBold);font-size:112.5%;margin-bottom:.5em;}
.contactdata .zip {flex-basis:60px;margin-right:.5em;margin-bottom:1em;}
.contactdata .city {flex-basis:60px;}
.contactdata .country {margin-bottom:1em;}

.content button {font-size:112.5%;border-radius:3px;background-color:var(--darkOrange);color:#fff;}
.content button:hover {box-shadow:var(--boxShadow);}
.content button.submit,
.content button[type="submit"] {background:white;color:var(--darkOrange);border:solid 2px;}
.content button.submit:hover,
.content button[type="submit"]:hover {background:var(--darkOrange);border-color:var(--darkOrange);color:white;box-shadow:none;}
.content ul, 
.content ol {margin: 0 2em;}
.content ul ul, 
.content ol ol {margin: 0 1em;}
.content li {clear:left;}
.content p,#footer p {margin: .5em 0;}
.content strong {font-weight:bold;}
.content blockquote {font-size:12px;}
.content table {width:100%;}
.content th {text-align:left;}
.content td {vertical-align:top;}

.content .relatedlinks {margin-bottom:2em;}
.content .relatedlink {display:flex;flex-flow:column;align-items:center;}
.content .relatedlink .text {font-weight:var(--fontBold);}
.content .relatedlinks .imagelink {border:none;}
.content .text {margin-bottom:1em;}
.content .alert {margin-bottom:1em;color:red;}
.ps-alerttext {text-align:left;}
.ps-alerttext p {margin-bottom:.5rem;color:var(--green);}
.ps-alerttext strong {font-size:112.5%}
.ps-alerttext h2 {margin-bottom:0;color:var(--orange);}
.ps-alertbutton {
  border-radius:5px;
  background-color:white;color:var(--orange);
  font-size:112.5%;border:solid 1px var(--orange);
}
.ps-alertbutton:hover {
  background-color:var(--orange);color:white;
}

.errortext {padding-top:3em;}

#content #message {width:448px;position:absolute;left:240px;top:118px;padding:10px 5px;text-align:center;font-size:18px;color:#323232;border:solid 1px #CF9B00;background:#FFDD48 url(/images/layout/attention.png) no-repeat 15px 50%;}
.grecaptcha-branding {margin-top:10em;}

/* swiper */
.swiper-button-prev,
.swiper-button-next {color:var(--darkOrange)!important;font-weight:var(--fontBlack);}

/* (EMAIL)FORMS
--------------------------------------------------*/
.ps-form h1 {margin-left:0;}

.emailform label {color:var(--darkGrey);font-size:var(--font0);text-shadow:1px 1px 1px white}
.emailform-body {display:flex;flex-flow:row wrap;justify-content:center;align-items:flex-start;}
.emailform-body > * {flex-basis:var(--subContentW);flex-grow:1;}

.emailform.booking .aantal_overnachtingen {flex-basis:170px;min-width:170px;}


/* EDITPICLIST
--------------------------------------------------*/
.editpiclist .pictures {display:flex;flex-flow:row wrap;margin:0 -1em;}
.editpiclist .pictures .picture {flex-basis:calc(50% - 4em);margin:1em;padding:1em;background-color:#eee;height:auto;}
.editpiclist .pictures {display:flex;flex-flow:row wrap;}
.editpiclist .picture {position:relative;flex-basis: 300px;min-width:300px;flex-grow:1;}
.editpiclist .picture .text {position:absolute;width:calc(100% - 32px);color:#fff;bottom:10px;text-align:center;
    font-family:'Poppins',sans-serif;font-weight:200;color:#fff;text-shadow:0px 0px 4px #000;
  font-size:min(3vw,30px)
}
#content .editpiclist .image,
#content .editpiclist img {height:auto}

/* HOMEPAGE
--------------------------------------------------*/
.content > .homepage {position:relative;}
.home-header {position:absolute;z-index:1;top:4em;right:0;padding:1em;
  display:flex;flex-flow:column-reverse;align-items:flex-end;}
#content .home-header h1 {font-size:var(--font10);margin:0;padding-left:4em;osition:relative;}
.homepage .payoff {font-size:var(--font4);text-transform:uppercase;color:white;ext-shadow:var(--textShadow);text-align:right;}
.home-map iframe {display:block;height:500px;}
.homesection {position:relative;}

/* home-pictures */
.home-pictures .pictures {margin-bottom:0;}

/* home-products */
.home-catalog {padding:2em 0 2em;}
.home-products {display:flex;flex-flow:row wrap;justify-content:center;}
.home-product-wrapper {flex-basis:var(--cardW);margin:var(--halfMarginW);position:relative;}
.home-product h2 {position:absolute;top:3em;right:1em;font-size:var(--font2);text-transform:uppercase;color:white;
  background-color:var(--orange);padding:1em;opacity:.8}
.home-product .image {height:200px;background-size:100%;background-position:50%;
  background-size:100%;transition: .5s background-size .0s;}
.home-product[href]:hover .image {background-size:110%;transition: .5s background-size .0s;}

/* home-schoolguide */
.homesection-schoolguide .editwrapper {position:absolute;}
.homesection-schoolguide .schoolguide {display:flex;flex-flow:row wrap;}
.homesection-schoolguide .schoolguide .image {flex-basis:45%;min-width:var(--minW);flex-grow:1;height:auto;}
.homesection-schoolguide .schoolguide .intro-wrapper {flex-basis:45%;min-width:var(--minW);background-color:var(--green);
  font-size:var(--font3);color:white;margin:0;padding:12em 2em 4em;flex-grow:1;}
.homesection-schoolguide .schoolguide .intro {max-width:var(--subContentW);}
.homesection-schoolguide .schoolguide .text:not(.intro) {flex-basis:var(--contentW);padding:2em 1em 0;}

/* home-products */
.home-xlocations-wrapper {background:var(--tintGrey);padding:2em 0;}
.home-xlocations-wrapper > .text {}
.home-xlocations {display:flex;flex-flow:row wrap;justify-content:center;}
.home-xlocation-wrapper {flex-basis:var(--sCardW);margin:var(--halfMarginW);position:relative;}
.home-xlocation h2 {
  position:absolute;width:calc(100% - 2em);bottom:var(--marginW);left:0;
  margin:0;font-size:var(--font0);text-transform:uppercase;color:white;
  background-color:var(--darkOrange);padding:.5em 1em;opacity:.95}
.home-xlocation .image {height:40vw;max-height:150px;background-position:50%;
  background-size:auto 100%;transition: .5s background-size .0s;}
.home-xlocation[href]:hover .image {background-size:auto 120%;transition: .5s background-size .0s;}


/* INFORMATION
--------------------------------------------------*/
#content > .information {}

/* LIBRARY
--------------------------------------------------*/
.library .folders {display:flex;flex-flow:row wrap;justify-content:center;margin:0 -1em;}
.library .folder {flex-basis:calc((100% / 2) - 2em);margin:1em;}
.library .embedcode {display:flex;flex-flow:row wrap;}
.library .embedcode h4 {flex-basis:100%;margin:0;font-style:italic;}
.library .embedcode textarea {width:300px;height:2em;flex-grow:1;}
span.doctype {display:inline-block;width:2em;text-align:center;padding:0 .5em;margin-right:.5em;background-color:#666;color:#fff;}
span.doctype.doc {background-color:blue;}
span.doctype.pdf {background-color:red;}

/* LINKOVERVIEW
--------------------------------------------------*/
.linkoverview .navigations {display:flex;flex-flow:row wrap;justify-content:space-between;margin:0 -.5em;}
.linkoverview .navigation {flex-basis:calc((100% / 5) - 1em);margin:.5em .5em 2em;}
.linkoverview .image img {border:solid 1px #eee;}

/* NEWS
--------------------------------------------------*/
.newsindex-wrapper h1:first-letter {text-transform:uppercase;}
.newsindex h1 {flex-basis:100%;}
.newsindex h1 span {flex-basis:100%;color:#009FE3;font-size:75%}
.newsindex h1 span:before {content:" // ";}
.columns .newsindex > .text {color:#d43a3e;font-size:125%;text-align:center;}
.shortnewsitems {display:flex;flex-flow:row wrap;margin:0 -1em;}
.shortnewsitem-wrapper {flex-basis:calc((100% / 3) - 2em);margin:1em;position:relative;display:flex;}
.shortnewsitem-wrapper > .editwrapper {position:absolute;top:0;left:0;}
.shortnewsitem {background:#e3f5fc;display:flex;flex-flow:column;justify-content:space-between;}
.shortnewsitem {width:100%;} /* IE */
.shortnewsitem h2,.shortnewsitem .more {padding:12px;text-align:center;}
.shortnewsitem .image {overflow:hidden;}
.shortnewsitem .date {display:flex;justify-content:center;}
.shortnewsitem .date > span {margin:0 .25em;} 
.newsitem {display:flex;flex-flow:row wrap;justify-content:space-between;position:relative;}
.newsitem .sharethis {margin-top:2em;}
.newsitem .editwrapper {position:absolute;}
.newsitem > .image {flex-basis:calc(50% - .5em);}
.newsitem-intro {flex-basis:calc(50% - .5em);}
.newsitem h1,
.newsitem h2 {flex-basis:100%;}
.newsitem h2 {color:#d43a3e;}
.newsitem .intro.text {font-size:14px;}
.newsitem .date {font-size:14px;font-style:italic;}

/* PICTURES
--------------------------------------------------*/
.pictures {}
.picture-wrapper {position:relative;}
.picture-wrapper .editwrapper {position:absolute;}
.picture-wrapper h3 {
  position:absolute;top:1rem;left:0;width:100%;margin:0;text-align:center;
  color:white;font-size:var(--font12);font-weight:var(--fontBold);text-shadow:var(--textShadow);
  font-variant:small-caps;
}
.picture .image {width:100%;height:var(--pictureH);
  background-size:cover;background-position:50%;}

/* PRODUCTS
--------------------------------------------------*/
.productfolder-wrapper {position:relative;}
.productfolder-wrapper > h1 {position:absolute;top:2em;left:30%;z-index:1;font-size:var(--font10);}
.productfolder-wrapper > .editwrapper {position:absolute;z-index:1;}
.productfolder {display:flex;flex-flow:row wrap;position:relative;}
.productfolder > * {background-color:var(--green);color:white;}
.productfolder > .text {flex-basis:20%;flex-grow:1;padding:8em 2em 6em 6em;margin:0;text-align:right;}
.productfolder > .text h2 {font-size:var(--font5);font-weight:var(--fontLight);}
.productfolder > .image {flex-basis:45%;flex-grow:3;min-height:600px;}

.productprices {display:flex;flex-flow:row wrap;justify-content:center;margin:1em -1em;}
.price-wrapper {display:flex;flex-flow:column;margin:.5rem;flex-basis:160px;position:relative;}
.price-wrapper:before {background-color:var(--tintBlue);text-align:center;padding:0px 0 100px;font-weight:var(--fontBold);}
.price-wrapper.price:before {content:" ";}
.price-wrapper.price2:before {content:" ";}
.price-wrapper.price3:before {content:" ";}

.price-wrapper>.price {width:100%;display:flex;flex-flow:column;align-items:center;justify-content:center;
  background-color:var(--tintGreen);color:white;width:120px;height:120px;border-radius:50%;border:solid 5px white;
  position:absolute;top:20px;left:50%;margin-left:-65px;z-index:1;font-size:var(--font5);
}
.price-wrapper>.price:after {content:"Per nacht";font-size:var(--font2);}
.en .price-wrapper>.price:after {content:"Per night";}
.price-wrapper .pricecomment {padding-top:50px;}
.price-wrapper .pricecomment ul {list-style:none;margin-left:0;font-size:var(--font-3);}

.product .buttons {
  text-align:center;font-size:125%;
  display:flex;justify-content:center;
  margin-bottom:2rem;
}

/* SCHOOLGUIDE
--------------------------------------------------*/
.schoolguide-wrapper .image {height:var(--bannerH);
  background-size:cover;
  background-position:50%;
}
.schoolguide-wrapper.hasimage > h1 {margin-top:-2em;}
.schoolguide-wrapper .level2 > .paragraph{background-color:white;position: relative;z-index:1;}
.schoolguide-wrapper .paragraph-wrapper.level2 {}

.paragraph-wrapper.level3 {background-color:var(--tintGrey);}

.paragraph-wrapper.level3 {display:flex;flex-flow:row wrap;justify-content:center;align-items:center;}
.paragraph-wrapper.level3:nth-child(even) {flex-direction:row-reverse}
.paragraph-wrapper.level3 > .paragraph {flex-basis:var(--subContentW);margin:2em;}
.paragraph-wrapper.level3 > .image {flex-basis:var(--asideW);width:var(--asideW);height:var(--asideW);
  margin:2em; border-radius:50%;
  background-color:var(--darkGreen); 
}

/* SITEMAP
--------------------------------------------------*/
.sitemap {display:flex;flex-flow:row wrap;justify-content:space-between;margin:1px 0;}
.sub-sitemap {margin:0 1px 1px;background:#eee;padding:1em;flex-grow:1;}
.sub-sitemap h1:first-letter {text-transform:uppercase;}

.sitemap li {display:flex;flex-flow:row wrap;}
.sitemap li div.submenu {flex-basis:100%;margin-left:1em;}

/* TAGS
--------------------------------------------------*/
#content .tagvalues {display:flex;flex-flow:row wrap;margin:0 0 2em;justify-content:center}
.tagvalues > * {flex-basis:var(--xsCardW);margin:0;}
.tagvalue {display:flex;flex-flow:column;align-items:center;text-align:center;}
.tagvalue > h3 {order:2;
  font-size:var(--font0);font-weight:var(--fontRegular);color:var(--green);
  margin-top:1em;font-style:italic;}
.tagvalue > .image {padding:0 2em}

/* VIDEO
--------------------------------------------------*/
.ps-video {display:inline-block;}
.vjs-poster {background-size:cover!important}

/* XLOCATIONS
--------------------------------------------------*/
.xlocations {margin-top:2rem;margin-bottom:2rem;height:34em!important;}
.xlocation-wrapper {
  width:var(--cardW)!important;
  position:relative;
  background-color:var(--tintBlue);  
}
.xlocation-wrapper .editwrapper {position:absolute;}
.xlocation-wrapper h3 {
  background-color:var(--darkOrange);color:white;padding:.5em;margin:0 0 0;text-align:center;
  display:flex;align-items:center;justify-content:center;
}
.xlocation {display:flex;flex-flow:column;height:100%;}
.xlocation > .xlocation-body {width:100%;flex-grow:1;}
.xlocation .more {align-self: center;margin-bottom:1rem;}


.xlocation-wrapper .image {flex-basis:150px;min-height:150px;background-size:100%;background-position:50%;
  background-size:100%;transition: .5s background-size .0s;}
.xlocation[href]:hover .image {background-size:110%;transition: .5s background-size .0s;}
.xlocation .text {padding:1em;color:black;}