/* cmsms stylesheet: reset modified: 14-01-20 14:11:23 */
body { 
 -webkit-animation: bugfix infinite 1s;
}
 @-webkit-keyframes bugfix { 
                from { padding: 0; } 
                to { padding: 0; }  
            }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, /*sup,*/ tt, var,
b, u, i, center,
dl, dt, dd, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
html{
height:100%;
}
body {
line-height: 1;
min-height:100%;
position:relative;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* cmsms stylesheet: De Rietkraag basis modified: 13-04-20 09:11:20 */
html {
  font-size: 14px;
}
body {
  font-family: "open sans", sans-serif;
  color: #444;
}

strong {
    font-weight: bold;
}

header {
    display: grid;
    justify-content: center;
    grid-template: "logo" auto
                 "hamburger" auto
                 "menu" auto
                 "hbanner" auto
                 / 1fr;
    color: white;
    font-size: 12px;
    font-weight: 600;
    padding-top: 6px;
    background: white;
    border-bottom: 1px solid #4c4d4c;
}

.logo {
  background-color: white;
  display: flex;
  justify-content: center;
  grid-area: logo;
}
.logo img {
    width: 300px;
}

.hamburger {
   grid-area: hamburger;   
   justify-self: center;
   width: 100%;
   display: flex;
   justify-content: center;
   background: #5e7d9c;
}
.hamburger > div {
    padding-top: 4px;
    cursor: pointer;
}

.hamburger div div {
   width: 20px;
   height: 4px;
   margin-bottom: 5px;
   background-color: white;
   /*border-radius: 10%/50%;*/
}

.menu {
    grid-area: menu;
}

.hbanner {
    grid-area: hbanner;
}

main {
    display: grid;
    padding: 20px 5vw 0;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
}

.plattegronden main {
    padding: 20 px 0 0;
}

main p {
    margin: 2em 0;
}
    
.contact main {
    display: block;
    padding: 0;
}

main ul {
    padding-left: 15px;
}

main ul li {
    list-style-type: disc;
    list-style-position:outside;
}

main img {
    border-radius: 15px;
    width: 100%;
    height: auto;
    -webkit-box-shadow: 0px 0px 8px 2px rgba(163,163,163,1);
    -moz-box-shadow: 0px 0px 8px 2px rgba(163,163,163,1);
    box-shadow: 0px 0px 8px 2px rgba(163,163,163,1);
    margin-top: 5px;
}

.home .content a:link, .home .content a:visited {
    color: #a43414;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
}
.home .content a:hover {
    color: #aa8c4c;
}
.bijlagen ul li {
    font-weight: 600;
}
.bijlagen .content ul li a, .bijlagen .content ul li a:visited {
    color: #a43514;
    text-decoration: none;
}
.bijlagen .content ul li a:hover {
    color: #aa8c4c;
}
main h1 {
    font-style: italic;
}
h1 {
   font-weight: 600;
   font-size: 21px;
   margin: 14px 0;
}
h2 {
   font-weight: bold;
   font-size: 18px;
   margin: 10px 0;
}

.home .content h1 {
    margin-bottom: 0;
}
.home .content p:first-of-type {
    margin-top: 0;
    text-align: right;
}
.tarieven main h2 {
    font-size: 12px;
    padding: 25px 0 0;
    line-height: 16px;
}
.tarieven main p {
    margin: 0;
}
.content, .content2 {
   line-height: 28px;
}

footer {
   border-top: 1px solid black;
   display: grid;
   grid-template: "contact plaatje" auto
                  "email email"   auto
                  "fbanner fbanner"  auto
                  / max-content 1fr;
   background: #eaeaea;
   padding: 15px 5vw 0;
   border-top: 1px solid #4c4d4c;
}

.fcontact {
   grid-area: contact;
   font-weight: 600;
   font-size: 12px;
   line-height: 1.6em;
   padding-right: 15px;
   text-align: right;
}
.fcontact h1 {
    font-weight: 500;
}
.plaatje {
    grid-area: plaatje;
}
.plaatje img {
    border-radius: 100%;
}
.email {
   grid-area: email;
   font-size: 12px;
   line-height: 1.6em;
   padding-top: 10px;
}
.email strong {
    font-weight: 600;
    color: #a43514;
}
.email a {
    text-decoration: none;
    color: #a43514;
}
.fbanner {
   display: flex;
   flex-wrap: wrap;
   grid-area: fbanner;
   justify-content: space-between;
   border-top: 1px solid #999;
   font-size: 11px;
   color: #999;
   margin-top: 7px;
   padding-top: 4px;
   margin-left: -5px; /*In verband met paddings tussen .fbanner divs*/
   line-height: 1.5em;
}
.fbanner div {
    padding-left: 5px;
}

.rechten a, .webdesign a {
    text-decoration: none;
    color: #999;
}

.containercontact2 {
    border-top: 1px solid #444;
}
.contacteerstesectie {
    padding: 40px 5vw;
}
.contacteerstesectie h2, .contacttweedesectie h2 {
    margin: 25px 0 0;
    font-size: 16px;
}
.contacteerstesectie p, .contacttweedesectie p {
    margin: 0 0 1em;
}
.contacttweedesectie {
    padding: 40px 5vw;
    line-height: 28px;
}
.contacteerstesectie address {
    color: #4a6f53;
    font-weight: 600;
    font-style: italic;
}
.contacteerstesectie a[href^="mailto:"] {
    color: #a43514;
    font-weight: 600;
    font-style: italic;
    text-decoration: none;
}
.contacteerstesectie a[href^="mailto:"]:hover {
    color: #aa8c4c;
}
.contacttweedesectie h2 {
    color: #579cb9;
}

.contact .content4 h2:first-of-type {
    margin-top: 0;
}

.plattegrond ol {
    list-style-type: decimal;
    font-size: 12px;
    width: 160px;
    float: left;
}

.plattegrond .content p img {
    width: 225px;
}

/*achtergrondkleuren*/

.vwr main,
.tarieven main,
.tuinen main,
.plattegrond main,
.fotogallerij {
    background: #c8d2ca; /* grijsgroen */
}

.doelstelling main,
.de-rietkraag main,
.activiteiten main {
    background: #dbedf5; /* lichtblauw */
}

.uitgangspunten main,
.leeftijd main,
.woningen main {
    background: #e2cdcb; /* grijsroze */
}

.overleg-vergadering main,
.vrijwilligers main,
.type-woningen main,
.ontmoetingshuis main {
    background: #cfcfcf; /* grijs */
}

.home main,
.bijlagen main,
.wijk main,
.plattegronden main,
.beheer main,
.ervaringen main {
    background: #d1dce6; /* grijsblauw */
}

.containercontact1 {
    background: #e4ebe4;
}
.containercontact2 {
    background: #edf6fb;
}

/* einde achtergrondkleuren */

#map1 {
    width: 300px;
    border-radius: 15px;
}
#map1 img {
    border-radius: 0;
    box-shadow: initial;
}

.type-woningen .content a {
    text-decoration: none;
    color: #a43514;
}
.type-woningen .content a:hover {
    color: #aa8c4c;
}

.type-woningen h2 {
    font-size: 14px;
    margin: 2em 0 .7em;
}

.plattegronden main {
    display: block;
}

.plattegronden .kop1 h1 {
    margin: 20px 0 35px;
}

.plattegronden .wrapper {
    width: 320px;
    margin: 0 auto;
}
.plattegronden .content p {
    margin: 0;
}

.plattegronden .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    flex-direction: column;
    align-content: space-between;
    height: 1384px;
}
.plattegronden .container p {
    border-radius: 5px;
    margin: .7em 0;
}

.plattegronden-inhoud img {
    cursor: pointer;
}

.plattegronden-inhoud {
    height: 556px;
    width: 320px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: space-between;
}

.plattegronden-inhoud img,
.plattegronden-inhoud p {
    width: 155px;
    box-sizing: border-box;
}
.plattegronden-inhoud img {
    box-shadow: 0px 0px 1px 1px rgb(163, 163, 163);
    margin-bottom: 6px;
}
.plattegronden-inhoud p {
    border: 1px solid #444;
    padding: 2px 5px 4px;
    font-size: 11px;
    line-height: 16px;
    margin-top: 2px;
}

.tuinen .content2 img {
    cursor: pointer;
}

.ervaringen strong {
    line-height: 3em;
}
.cookies, .uitgangspunten {
    display: flex;
    flex-direction: column;
}

.cookies main, .uitgangspunten main {
    flex-grow: 1;
}

/* image popup pagina plattegronden */
.show {
    z-index: 999;
    display: none;
}
.show .overlay {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.66);
    position: absolute;
    top: 0;
    left: 0;
}
.show .img-show {
    /*width: 600px;
    height: 400px;*/
    background: transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    overflow: hidden;
}
.img-show span {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 99;
    cursor: pointer;
}
.img-show img {
    /*width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;*/
    width: 320px;
    box-shadow: initial;
}
/* einde image popup pagina plattegronden */

@media screen and (max-width: 350px) {
    .hamburger > div {
        position: relative;
        left: 16px;
    }
}

@media screen and (min-width: 375px) {
    .plattegronden .wrapper {
        width: 370px;
        margin: 0 auto;
    }
    .plattegronden .container {
        height: 1384px;
        justify-content: flex-start;
    }
    .plattegronden-inhoud {
        height: 622px;
        width: 370px;
    }
    .plattegronden-inhoud img,
    .plattegronden-inhoud p {
        width: 181px;
    }
}
@media screen and (min-width: 482px) {
    .img-show img {
        width: 482px;
    }
}
@media screen and (min-width: 652px) {
    footer {
           grid-template: "contact plaatje email" auto
                  "fbanner fbanner fbanner"  auto
                  / max-content 140px 1fr;
    }
    .email {
        align-self: end;
        padding-bottom: 30px;
    }
}
@media screen and (min-width: 660px) {
   main {
      grid-template:    ". kop1    ........ ." auto
                        ". content content2 ." auto
                        / 1fr 280px 280px 1fr;
      grid-column-gap: 40px;
      padding-top: 20px;
      justify-content: center;
      padding: 30px 0 70px;
   }
   
   .home main, 
   .uitgangspunten main,
   .tarieven main,
   .ervaringen main,
   .fotogallerij main,
   .activiteiten main,
   .cookies main {
       grid-template: ". content . " auto
                      / 1fr 660px 1fr;
   }
   .kop1 {
       grid-area: kop1;
   }
   
   .content {
      grid-area: content;
   }

   .content2 {
      grid-area: content2;
   }
   .plattegronden .container {
       height: 1384px;
   }
   
}

@media screen and (min-width: 800px) {
   .hamburger {
      display: none;
   }
   main {
      grid-template:    ". kop1    ........ ." auto
                        ". content content2 ." auto
                        / 1fr 360px 360px 1fr;
      grid-column-gap: 50px;
      padding-top: 20px;
      justify-content: center;
      padding: 30px 0 70px;
   }

   .home main, 
   .uitgangspunten main,
   .tarieven main,
   .ervaringen main,
   .fotogallerij main,
   .activiteiten main,
   .cookies main {
       grid-template: ". content . " auto
                      / 1fr 800px 1fr;
   }
   
   .containercontact1 {
       background: ;
   }
   .contacteerstesectie {
       display: grid;
       grid-template: "kop1    ........" auto
                      "content content2" auto
                      / 370px 360px;
       grid-column-gap: 40px;
       margin: 0 auto;
       padding: 40px 15px;
       width: 800px;
   }
   .contacttweedesectie {
       display: grid;
       grid-template: "kop1     ........" auto
                      "content3 content4" auto
                      / 370px 370px;
       grid-column-gap: 40px;
       margin: 0 auto;
       padding: 40px 15px;
       width: 800px;
   }

   .kop1 {
       grid-area: kop1;
   }
   
   .content {
      grid-area: content;
   }

   .content2 {
      grid-area: content2;
   }
   
   .content3 {
       grid-area: content3;
   }
   .content4 {
       grid-area: content4;
   }
   footer {
      grid-template-columns: min-content 116px minmax(auto, 500px);
      grid-template-rows: auto auto;
      grid-template-areas: "contact plaatje email"
                           "fbanner fbanner fbanner";
      justify-content: center;
      padding: 40px 15px 0;
   }
   
   .fcontact {
        padding-right: 20px;
        text-align: right;
   }
   
   .email {
        padding: 0 0 15px 20px;
        align-self: end;
   }
   
   .fbanner {
       border-top: 1px solid #999;
       margin-top: 10px;
       display: flex;
       justify-content: space-between;
       padding: 6px 0;
   }
   
   #map1 {
       width: auto;
       margin-top: 34px;
   }
   
    .plattegrond .content p img {
        margin-right: -10px;
    }
    
    .plattegronden .wrapper {
        width: 800px;
    }
    .plattegronden .container {
        height: 715px;
        justify-content: space-between;
    }
    
}

@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles go here */

     .hbanner div {
         display: inline-block;
         width: 25%;
     }
     .content, 
     .content2, 
     .kop1 {
         margin: 0 auto;
         max-width: 800px;
     }
     .contact main {
         background: #e4ebe4;
     }
     footer {
         margin-top: 40px;
     }
     .fcontact, .plaatje, .email {
         display: inline-block;
     }
     .fcontact {
         width: 35vw;
     }
     .plaatje {
         width: 116px;
     }
     .email {
         width: 40vw;
     }
}

@supports not (display:grid) {
     .hbanner div {
         display: inline-block;
         width: 25%;
     }
     .content, 
     .content2, 
     .kop1 {
         margin: 0 auto;
         max-width: 800px;
     }
     .contact main {
         background: #e4ebe4;
     }
     footer {
         margin-top: 40px;
     }
     .fcontact, .plaatje, .email {
         display: inline-block;
     }
     .fcontact {
         width: 35vw;
     }
     .plaatje {
         width: 116px;
     }
     .email {
         width: 40vw;
     }
}
/* cmsms stylesheet: Nav modified: 05-06-20 12:57:22 */
.menu-mobiel {
    position: absolute;
    min-height: 100%;
    top: 0;
    left: 0;
    z-index: 10000;
}

.menu-mobiel > ul > li > a {
    font-weight: 900;
}
.menu, .menu-mobiel {
   display: none;
   background: #5e7d9c;
}
.menu ul, .menu-mobiel ul {
   list-style: none;
}

.menu > ul, .menu-mobiel > ul {
   display: flex;
   flex-direction: column;
   padding: 15px;
}
.menu > ul > li, .menu-mobiel > ul > li {
    padding: 7px 0;
    font-size: 14px;
}

.menu ul li a, .menu-mobiel ul li a {
   text-decoration: none;
   color: white;
}
.menu ul li:hover ul, .menu-mobiel ul li:hover ul {
    display: block;
}
.menu ul li ul li, .menu-mobiel ul li ul li {
    padding: 3px 0 3px 7px;
    font-size: 12px;
}
.sluitmobielmenu {
    display: flex;
    justify-content: flex-end;
}
.sluitmobielmenu img {
    padding: 8px 8px 0 0;
    width: 16px;
    height: 16px;
}

@media screen and (min-width: 420px) {
    .menu-mobiel > ul > li {
        padding: 11px 0;
    }
    
    .menu-mobiel ul li ul li {
        padding: 5px 0 5px 10px;
    }
}

@media screen and (min-width: 800px) {
    .menu-mobiel {
        display: none !important;
    }
    .menu {
        display: flex;
        justify-content: center;
        background: #5e7d9c;
        width: 100%;
    }
    .menu > ul {
        flex-direction: row;
        margin: 0 ;
        justify-content: space-between;
        width: 800px;
        padding: 0;
        height: auto;
    }
    .menu > ul > li {
       padding: 0;
       position: relative;
       font-size: 12px;
    }
    .menu > ul > li:hover {
        background: #c16639;
    }
    .menu > ul > li > a {
        padding: 14px 14.616659px;
        display: block;
    }
    .menu ul li ul {
        display: none;
        position: absolute;
        left: 0;
        background-color: #5e7d9c;
    }
    
    .menu ul li ul li {
        padding: 0;
        min-width: 101px;
        white-space: nowrap;
    }
    .menu ul li ul li:hover {
        background: #c16639;
    }
    .menu ul li ul li a {
        padding: 6px 14px;
        display: block;
    }
    .menu ul li ul li:first-child {
        margin-top: 3px;
    }
    .menu ul li ul li:last-child {
        margin-bottom: 4px;
    }
    
    .current, .current li.current {
        background: #c16639;
    }
}
/* cmsms stylesheet: banner modified: 28-01-20 10:50:20 */
.hbanner {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-template-areas: "image3";
	grid-auto-columns: 0;
}

.hbanner div img {
	padding: 0;
	margin: 0;
	width: 100%;
	display: block;
}

.image1 {
	grid-area: image1;
}
.image2 {
	grid-area: image2;
}
.image3 {
	grid-area: image3;
}
.image4 {
	grid-area: image4;
}
.image5 {
	grid-area: image5;
}

@media screen and (min-width: 400px) {
	.hbanner {
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "image2 image3";
	}
}

@media screen and (min-width: 600px) {
	.hbanner {
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-areas: "image2 image3 image4";
	}
}

@media screen and (min-width: 800px) {
	.hbanner {
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-template-areas: "image1 image2 image3 image4";
	}
}
/* cmsms stylesheet: Nieuws modified: 03-03-20 12:56:01 */
.nieuws {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: -30px;
}

.activiteiten .content {
    padding: 0 15px;
}

.NewsSummary {
    width: 290px;
    -webkit-box-shadow: 2px 2px 5px 0px #bbb;
    -moz-box-shadow: 2px 2px 5px 0px #bbb;
    box-shadow: 2px 2px 5px 0px #bbb;
    background: #edf3f6;
    border: 1px solid #bbb;
    margin-bottom: 40px;
    padding: 15px;
    line-height: 1.5;
}

.NewsSummary img {
    width: 232px;
    border-radius: initial;
    -webkit-box-shadow: initial;
    -moz-box-shadow: initial;
    box-shadow: initial;
    border: 1px solid #999;
}

hr {
    border: 1px solid #ccc;
}

.nextorprev {
    text-align: right;
    color: #c16639;
    font-weight: 900;
    font-size: 14px;
}

.nextorprev a {
    text-decoration: none;
    color: #5e7d9c;
    font-weight: 900;
    font-size: 16px;
}
#NewsPostDetailReturnLink a{
    text-decoration: none;
    color: #c16639;
    font-weight: 900;
}

.NewsSummaryLink a{
    text-decoration: none;
    color: #5e7d9c;
    font-weight: 900;
    font-size: 16px;
    line-height: 1.2;
}
.NewsSummaryPostdate, .NewsSummaryMorelink {
    text-align: right;
    line-height: 1;
}

.NewsSummaryPostdate {
    color: #888;
}

.NewsSummaryMorelink a {
    text-decoration: none;
    color: #c16639;
    font-weight: 600;
}

.fulldetail {
    background: #edf3f6;
    border: 1px solid #bbb;
    padding: 15px;
    line-height: 1.5;
}

.fulldetail img {
    width: 232px;
    border-radius: initial;
    -webkit-box-shadow: initial;
    -moz-box-shadow: initial;
    box-shadow: initial;
    border: 1px solid #999;
}
#NewsPostDetailTitle {
    font-size: 16px;
    color: #5e7d9c;
    font-weight: 900;
}

@media screen and (max-width: 360px) {
    .NewsSummary {
        width: 260px;
    }
    .activiteiten .content {
        padding: 0;
    }
}


@media screen and (min-width: 800px) {
    .nieuws {
        justify-content: space-between;
    }
    .detailheader {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
    }
    #NewsPostDetailTitle {
        max-width: 600px;
    }
    #NewsPostDetailDate {
        flex-shrink: 0;
        position: relative;
        top: 3px;
    }
}