/*
      Author: Primosite

      Oude Gracht Groep
      site122

      VARIABLES
*/
@import "ogg-vars-v2.0.css";

* {margin:0;padding:0;quotes: "“" "”" "‘" "’";}

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

#container {padding-top:134px;}
#header-wrapper {box-shadow:var(--boxShadowDark);position:fixed;top:0;left:0;
  width:100%;background-color:white;z-index:3;}

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

/* mainW */
#footer,
#sitemenu-nav,
.content > .editpiclist,
.content > .emailform-wrapper,
.catalog  .products,
.productfolder-wrapper .tagtype-wrapper,
.content > .ps-form,
.content > .sitemap,
.content > .siteparameters,
.content .tagvalues {width:var(--defaultW);max-width:var(--mainW);margin:0 auto;}

/* contentW */
.content > .emailform-wrapper > .emailform-form,
.content > .faces-wrapper,
.homesection-schoolguide .text:not(.intro),
.home-xlocations-wrapper > .text,
.content > .information-wrapper .information,
.content > .schoolguide-wrapper,
.content .product > *,
.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 {height:var(--headerH);position:relative;
  display:flex;flex-flow:row wrap;justify-content:flex-start;align-items:center;  
  background-color:white;}
#version {position:absolute;top:.25em;left:1em;color:white;z-index:2;text-transform:uppercase;}

#logo-wrapper {display:flex;flex-flow:row wrap;align-items:flex-end;padding:.5rem;}
#logo {width:var(--logoW);margin-right:.5rem;}

#payoff {font-family:"Caveat";font-size:var(--font3);color:var(--orange);}

#icon {width:var(--iconW);position:absolute;left:47.5%;top:1rem;margin-left:var(--negHalfIconW);z-index:3;}
#icon img {max-width:100%;
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.6));}

/* nav */
#nav-trigger {display:none;}
#nav {flex-basis:100%;}
#nav li {list-style: none;}
#menu {background-color:var(--red);padding:.25rem 0}
#sitemenu-nav {font-size:var(--font-1);}
#sitemenu-nav a {color:white;text-decoration:none;display:block;padding:.25em;text-underline-offset:3px}
#sitemenu-nav a[href]:hover,
#sitemenu-nav a.active{
  text-decoration:underline;
  text-decoration-thickness: 2px;
  text-underline-offset:.3em;
}
#sitemenu-nav a.nohef {}
#sitemenu-nav a.level1 {font-variant:small-caps;font-weight:var(--fontBold);}

#header-nav ul.level1 {display:flex;flex-flow:row wrap;}
#header-nav a {color:var(--red);text-decoration:none;display:block;white-space:nowrap;text-transform:uppercase;
  font-weight:var(--fontLight);font-size:var(--font-1);}
#header-nav *:before {color:inherit;}
#header-nav li.level1 {margin-right:1.5em;color:white;}
#header-nav li {position:relative;}
#header-nav li > div {display:none;position:absolute;left:0;background-color:white;padding:1em;
box-shadow:var(--boxShadow);}
#header-nav li:hover > div {display:block;}
#header-nav li.level2 {margin-bottom:.5em;color:var(--red);}

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

/* banner */
#banner {height:var(--bannerH);width:100%;
  display:flex;align-items:flex-end;justify-content:center;position:relative;
}
#banner > .editwrapper {position:absolute;left:1rem;top:1rem;z-index:1;}
#banner > .image {width:100%;height:var(--bannerH);position:absolute;}
#banner > .text {opacity:.9;
  position:relative;padding:2rem 4vw 2rem 5vw;margin:0 2vw 3rem;background-color:var(--red);color:var(--pink);
  flex-basis:clamp(var(--minW),60vw,var(--contentW));font-size:var(--font0);
  border-radius:5px;letter-spacing:1px;font-style:italic;
}
#banner > .text:before,
#banner > .text:after {font-size:300%;line-height:1;font-weight:var(--fontBlack);
  position:absolute;
}
#banner > .text:before {content:open-quote;top:1rem;left:.5rem;}
#banner > .text:after {content:close-quote;bottom:0;right:1.5rem;}

/* submenu */
#submenu-trigger {display:none;}
#submenu {padding-top:2rem;background:var(--orange);flex-basis:var(--asideW);min-width:var(--asideW);}
#submenu li {list-style:none;margin:0 1em;}
#submenu a {font-weight:var(--fontBold);color:white;
  text-decoration:none;display:block;padding:.5em 1em;}
#submenu a:hover,
#submenu a.active{
  text-decoration:underline;
  text-decoration-thickness: 2px;
  text-underline-offset:.3em;
}

/* footer */
#footer-wrapper {min-height:var(--footerH);background-color:var(--red);
  border-bottom:solid var(--marginW) var(--orange);}
#footer *,
#footer *:before {color:white;}

#footer {padding:1em 0 0;position:relative;
  display:flex;flex-flow:row wrap;justify-content:space-between;align-items:flex-end;}
#footer > * {margin-bottom:1em;}
#footer .editwrapper {position:absolute;top:0;}
#footer .contactdata {flex-basis:25%;align-self:flex-start;
  display:flex;flex-flow:row wrap;
}
#footer .contactdata .address {flex-basis: auto;margin-right:.5em;}
#footer .contactdata .address:after {content:",";}
#footer .menu li {list-style:none;}
#copyright {text-align:center;padding:1em 0;font-size:var(--font-1);}

/* DEFAULTS */
:focus {outline:none;}
h1,h2,h3,h4,h5,h6 {margin-bottom:.5em;}
h1 {font-family:"Noto Serif", serif;color:white;
  font-size:var(--font10);font-weight:var(--fontRegular);
  background-color:var(--orange);display:inline-block;padding:0 .5em;}
#container-wrapper.hasbanner h1 {margin-top:1em;}
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;}
a.cta,a.more {display:inline-block;padding:.5em 1em;color:var(--orange);border:solid 2px;text-decoration:none;}
a.cta:hover,a.more:hover,a.more:hover:before {background-color:var(--orange);color:white;text-decoration:none;}

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

.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;}
.face-wrapper .image img {border-radius:.5rem;}
.contactdata > * {flex-basis:100%;}
.contactdata > *:before {margin-right:.5em;color:var(--red);font-variant:small-caps;}
.contactdata .icon-linkedin,
.icon-linkedin:before {color:var(--blue);}
.contactdata .name {font-weight:var(--fontBold);font-size:112.5%;margin-bottom:.5em;}
.contactdata .zip {flex-basis:60px;margin-right:.5em;}
.contactdata .city {flex-basis:60px;}
.contactdata .country {margin-bottom:1em;}
.contactdata .coc:before {content:"kvk";}

.content button {font-size:112.5%;border-radius:3px;background-color:var(--orange);color:#fff;}
.content button:hover {box-shadow:var(--boxShadow);}
.content button.submit,
.content button[type="submit"] {background:white;color:var(--orange);border:solid 2px;}
.content button.submit:hover,
.content button[type="submit"]:hover {background:var(--orange);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 ul li::marker {
  line-height:1;
  font-size:1.25em;
  color:var(--orange);
}
.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 {font-weight:var(--fontBold);display:flex;flex-flow:row wrap;}

.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;}

/* (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;}

/* EDITPICLIST
--------------------------------------------------*/
.editpiclist .pictures {display:flex;flex-flow:row wrap;margin:0 -1em;}
.editpiclist .pictures .picture {flex-basis:40%;flex-grow:1;margin:1em;}
.editpiclist .picture h2 {margin-bottom:0;font-size:var(--font4)}
.editpiclist .picture .text {font-family:'Poppins',sans-serif;font-size:var(--font-2);margin-top:.5em;}

/* FACES
--------------------------------------------------*/
.faces-wrapper .department {margin-bottom:1rem;}
.face-wrapper {display:flex;flex-flow:row wrap;margin-bottom:1rem}
.face-wrapper > .editwrapper {position:absolute;}
.face-wrapper > .image {flex-basis:100px;margin-right:1rem;}
.face-wrapper > .face {min-width:var(--minW);}
.face .fn {font-weight:var(--fontBlack);}
.face .function  {font-style:italic;}

/* 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-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;min-height:var(--bannerH);}
.homesection-schoolguide .schoolguide .intro-wrapper {flex-basis:30%;min-width:var(--minW);background-color:var(--orange);
  font-size:var(--font1);line-height:2;letter-spacing:3px;color:white;margin:0;padding:5vw;flex-grow:1;}
.homesection-schoolguide .schoolguide .intro {max-width:var(--contentW);}
.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;
  margin:2em 0 0;}
.home-xlocation-wrapper {flex-basis:var(--sCardW);margin:var(--halfMarginW);position:relative;}
.home-xlocation h2 {position:absolute;width:calc(100% - 2em);bottom:var(--halfMarginW);left:0;margin:0;font-size:var(--font2);text-transform:uppercase;color:white;
  background-color:var(--green);padding:1em;opacity:.8}
.home-xlocation .image {height:25vw;max-height:150px;background-position:50%;
  background-size:100%;transition: .5s background-size .0s;}
.home-xlocation[href]:hover .image {background-size:110%;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 {display:flex;flex-flow:row wrap;justify-content:center;}
.picture-wrapper {flex-basis:var(--cardW);position:relative;display:flex;flex-flow:column;margin:var(--halfMarginW);}
.picture-wrapper .editwrapper {position:absolute;}
.picture-wrapper h3 {background-color:var(--orange);color:white;padding:.5em;margin:0 0 2px;text-align:center;flex-grow:1;
  display:flex;align-items:center;justify-content:center;
}
.picture .image {width:100%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;align-items:center;position:relative;}
.productfolder > * {background-color:var(--green);color:white;}
.productfolder > .text {flex-basis:25%;flex-grow:1;padding:6em 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:1em;flex-basis:200px;position:relative;}
.price-wrapper:before {background-color:var(--tintGrey);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(--green);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(--font0);}

.product .pictures {max-width:100%;}
.product .buttons {text-align:center;font-size:125%;}

/* SCHOOLGUIDE
--------------------------------------------------*/
.content > .schoolguide-wrapper {padding-bottom:2rem;}
.schoolguide-wrapper.hasimage > h1 {position:absolute;margin:2em;}

.schoolguide-wrapper .paragraph-wrapper.hasimage {
  display:flex;flex-flow:row wrap;/*! justify-content:center; */align-items:flex-start}
.schoolguide-wrapper .paragraph-wrapper.hasimage > *  {order:9;}
.schoolguide-wrapper .paragraph-wrapper.hasimage .paragraph {flex-basis:var(--minW);flex-grow:1;}
.schoolguide-wrapper .paragraph-wrapper.hasimage .image {
  min-height:120px;
  margin:1rem 0 0;
  background-size:100%;
  background-position:50%;
  background-repeat:no-repeat;
}

.subsidiary .paragraph-wrapper.level2 {padding:2rem 0;border-bottom:solid 1px var(--orange);}
.subsidiary .relatedlinks {margin:0;}
.subsidiary img {max-width:var(--minW);margin:0;}

.schoolguide-wrapper .level2 > .paragraphs {display:flex;flex-flow:row wrap;justify-content:center;}
.paragraph-wrapper.level3 {position:relative;
  flex-basis:140px;max-width:220px;flex-grow:1;
  margin:.25rem;padding:.5rem;}
.paragraph-wrapper.level3 .editwrapper {position:absolute;left:0;top:0;}
.paragraph-wrapper.level3 h3 {display:none;}
.paragraph-wrapper.level3 .image {
  background-size:100%;
  background-position:50%;
  background-repeat:no-repeat;
}

/* SITEMAP
--------------------------------------------------*/
.content > .sitemap {display:flex;flex-flow:row wrap;justify-content:space-between;}
.content .sub-sitemap {margin:0 1px 1px;flex-grow:1;}
.content .sub-sitemap h1:first-letter {text-transform:uppercase;}
.content .sitemap li {display:flex;flex-flow:row wrap;}
.content .sitemap li div.submenu {flex-basis:100%;margin-left:.5em;}

/* 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(--font-1);margin-top:1em;}
.tagvalue > .image {padding:0 2em}

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

/* XLOCATIONS
--------------------------------------------------*/
.xlocations {display:flex;flex-flow:row wrap;margin:0 -1em;justify-content:center;}
.xlocation-wrapper {flex-basis:var(--asideW);position:relative;display:flex;flex-flow:column;margin:1em;
  box-shadow:var(--boxShadow);
}
.xlocation-wrapper .editwrapper {position:absolute;}
.xlocation-wrapper h3 {background-color:var(--orange);color:white;padding:.5em;margin:0 0 0;text-align:center;flex-grow:1;
  display:flex;align-items:center;justify-content:center;
}
.xlocation-wrapper .image {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;font-size:var(--font0);}