@font-face {
    font-family: 'myriad_proregular';
    src: url('myriad_pro_regular-webfont.woff2') format('woff2'),
         url('myriad_pro_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'avenir_regularregular';
    src: url('avenir_regular-webfont.woff2') format('woff2'),
         url('avenir_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'avenirblack';
    src: url('avenir_black-webfont.woff2') format('woff2'),
         url('avenir_black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'avenirlight';
    src: url('avenir_light-webfont.woff2') format('woff2'),
         url('avenir_light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'avenirheavy';
    src: url('avenir_heavy-webfont.woff2') format('woff2'),
         url('avenir_heavy-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'myriad_probold';
    src: url('myriad_pro_bold-webfont.woff2') format('woff2'),
         url('myriad_pro_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

html {
      box-sizing: border-box;
      overflow-x: hidden;    
    overflow-y: visible;
    max-width: 100% ;
    display: flex;
   

}

body { margin: 0; padding: 0; background-color: white; }

ul.menu {  list-style-type: none; display: inline; padding: 0px; margin-top: 40px; float: left; }
li.menu { color: #3a7484; margin-bottom: 6px; font-size: 14px; font-family: myriad_proregular; margin-top: 13px;  }

.li-header {  color: #3a7484; margin-bottom: 6px; font-size: 14px; font-family: myriad_probold;}

ul {font-family: avenir_regularregular; font-weight: 300;}

ul.popmenu { list-style-type: none;  }
li.popmenu { margin-top: 12px;}

.firstpopmenu {padding-top: 50px;}

.kruisje { margin-right: 30px; float: right; font-size: 30px; cursor: pointer}


.image-curve { border-radius: 10% 12% 16% 9% / 15em; }
.image-photo { width:100%; border-radius: 10% 12% 16% 9% / 15em; }


.logo {float: left; }

.rows { position:relative; float: left; width: 100%; }
.black { background-color: black; color: azure;}
.white { background-color: white; }
.brown { background-color: #826863;}
.image { background-image: url(background-01.jpg); background-size:     cover; 
    background-repeat:   no-repeat;
    background-position: center center;
border-radius: 100px 50px 200px 50px;}



.wrap { margin-left: 15%; margin-right: 15%; margin-top: 20px; margin-bottom: 120px}
.wrapmenu { margin-left: 7%; margin-right: 7%; margin-top: 30px; margin-bottom: 30px}
.wrapform { margin-left: 15%; margin-right: 15%; margin-top: 70px; margin-bottom: 80px}
.bigwrap { margin-left: 15%; margin-right: 15%; margin-top: 80px; margin-bottom: 80px }

.columns { display: grid;
    grid-gap: 70px;
    grid-template-columns: repeat(3, 26%);
    }

.duocolumns { display: grid;
    grid-gap: 70px;
    grid-template-columns: repeat(2, 47%);
    }

.menucolumns { display: grid;
    grid-gap: 50px;
    grid-template-columns: repeat(5, 16%);
    }

.full-width { position: relative; }

.duo { grid-column: span 2}
.trio { grid-column: span 3; grid-gap: 30px;}

img { margin: 10px; float: left; }
img.klein { margin: 0px; margin-bottom: 15px; }


p {  font-family: avenir_regularregular; font-weight: 300; }

label {  font-family: avenir_regularregular; font-weight: 300; }
h2 {  font-family: avenir_regularregular; margin-top: 30px; font-size: 18px; color: floralwhite; }
h3 {  font-family: avenirheavy; margin-top: 30px; font-size: 18px; color: black; }
h1 { font-family: avenirlight; line-height: 1.5;  color: floralwhite; max-width: 450px; padding-top: 10px; padding-bottom: 10px;}
.bold { font-family: avenirheavy; padding-top: 20px }
p2 { font-family: avenir_regularregular; font-weight: 200; font-size: 10px; width: 100%; color: floralwhite; letter-spacing: 0.5; float: left; margin-bottom: 10px}
p3 { font-family: avenir_regularregular; font-weight: 200; font-size: 13px; width: 100%; color: floralwhite; letter-spacing: 0.5;}
.logo-footer { margin-bottom: 10px;}
.center { display: flex;
        
        justify-content: center; }
.phone {font-family: avenirheavy; font-size: 16px; color: floralwhite;}
.phone:hover { color:aliceblue; }
.popli-header {font-size: 18px;}


a { color: #3a7484; margin-bottom: 6px; font-size: 14px; font-family: myriad_proregular; text-decoration: none; }
a.menu {opacity: 1;}
a.footerurls {  font-family: avenir_regularregular; font-weight: 200; font-size: 10px; width: 100%; color: floralwhite; letter-spacing: 0.5; text-decoration: underline; }
a.footerurls:hover {  font-family: avenir_regularregular; font-weight: 200; font-size: 10px; width: 100%; color:antiquewhite; letter-spacing: 0.5; text-decoration: underline; }

a.afspraak-klik { font-size: 20px;}

a:hover {color: #204f5c;}

.button {  color: #3a7484; padding: 15 50 15 50; border-radius: 5px; font-family: avenirblack; background-color: #fef9c9; line-height: 30px; text-align: center; }
.button:hover {  color: #204f5c;  }

.opacitybutton { opacity: 0.8;}
.opacitybutton:hover { opacity: 1;}

.menuknop { display: none;}

.menuscreen { height: 100vh; width: 100%; background-color: white; 
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  overflow-x: hidden; /* Disable horizontal scroll */
  
    display: none;}

.blink_me {
  animation: blinker 2s linear infinite;
}

.formcontainer { width: 400px; margin: 0px auto;}
.formcontainer input {
  width: 100%;
  clear: both;
}
.formcontainer textarea {
  width: 100%;
  clear: both;
    font-size:14px; font-family: Nunito Sans; font-weight: 300
}

input, label {
    display:block;
    margin-top: 10px;
}

.fillerblack { position:relative; float: left; width: 100%; height: 1%; background-color: #826863;  }

input { height: 30px; font-size:14px; font-family: Nunito Sans; font-weight: 300 }

button { margin-top: 20px;}



#map {
  height: 400px; /* The height is 400 pixels */
  width: 100%; /* The width is the width of the web page */
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}


@media only screen and (max-width: 800px) {
  .columns { display: grid;
    grid-gap: 40px;
    grid-template-columns: repeat(1, 100%);
    }
    .duocolumns { display: grid;
    grid-gap: 40px;
    grid-template-columns: repeat(1, 100%);
    }
    .brown {padding-top: 50px;}
   .duo { grid-column: span 1} 
    .trio { grid-column: span 1} 
    .menu-left { display: none;}
    p { font-size: 14px;}
    ul { padding-left: 20; }
    img.logo { width: 80px;}
    
    li { font-size: 14px; }
    .wrap { margin-left: 10%; margin-right: 10%; margin-top: 20px; margin-bottom: 50px}
    .bigwrap { margin-left: 15%; margin-right: 15%; margin-top: 40px; margin-bottom: 100px }
    h1 { font-size: 22px}
    .formcontainer { width: 300px; margin: 0px auto;}
    .menukolom { display: none;}
    .menuknop {display: inline;}
    .button {  color: #3a7484; padding: 15 20 15 20; border-radius: 5px; font-family: avenirblack; background-color: #fef9c9; line-height: 30px; font-size: 14px;}
    .wrapmenu {margin-top: 10px; margin-bottom: 10px;}
    .image-photo { width:70%; border-radius: 10% 12% 16% 9% / 15em; }
    .menuknop-afbeelding {margin: 0px; margin-left: -20px; margin-top: 50px; cursor: pointer;}
    .menucolumns { display: grid;
    grid-gap: 30px;
    grid-template-columns: repeat(3, 30%);
        
    
    }
  }

}