*, :before, :after {
  box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}


body {
    color: #111;
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    background-color: #fff;
    display: block;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;

}

@font-face { font-family: Shree714; src: url('Shree714.ttc'); }
p.text1{

  padding-top: 10px;
  width: 80%;
  font-family: Shree714;
  text-align: center;
  margin: auto;

}

p.text2{


  width: 80%;
  font-family: Shree714;
  margin: auto;
  padding-top:10px;

}

p.text3{


  width: 80%;
  font-family: Shree714;
  margin: auto;
  padding-top:10px;

}

h1{

  text-align:center;
  font-size: 25px;
  padding-top: 10px;
  margin: auto;
  font-family: Shree714;
}

h2{

  text-align:center;
  font-size: 25px;
  padding-top: 10px;
  margin: auto;
  font-family: Shree714;
  width: 100%
}

.footer{

 flex-shrink: 0;
  width: 100%;
  background: whitesmoke;
  margin-top: 20px;
  bottom: 0;

}

.footer p {

  font-size: 10px;
  text-align: left;
  margin-left: 10%;
  line-height: 40px;


}





.geudobouw-bar--container{

align-items: center;
display: flex;
height: 60px;
justify-content: space-between;
margin: 0 auto;
position: fixed;
width: 100%;
background-color: white;
z-index: 100;
top:0;


}

.geudobouw-bar--container a.icon {
  position: absolute;
  top: 0;
  width: 50px;
  height: 44px;}




.pages.responsive a {
  float: none;
  display: block;
  text-align: left;
  color: black;
  text-decoration: none;
  padding: 10px 15px;

}

.pages.responsive{

  position: relative;
  display: inline-block;
  padding-top: 60px;
  margin-bottom: -60px;


}

.pages {


  width: 100%;
  height: auto;
  display: none;

}

.geudobouw-bar--main-naviagation{

  background: white;
  width: 100%;
  height: 100%;
  display: none;
  border-color: black;
  text-align: center;
  margin-top: 120px;

}

.geudobouw-bar--main-naviagation a {



   list-style-type: none;
   margin: 0;
   padding: 0;
   overflow: hidden;
   display: inline-block;
   margin-left: auto;
   margin-right: auto;
   color: black;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
   font-size: 17px;


}

.geudobouw-bar--main-naviagation a:hover {
    background-color: whitesmoke;
    color: black;
}

.geudobouw-bar--logo{

  display: block;
  flex: none;
  left: 50%;
  line-height: 1;
  margin-left: -65px;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 130px;}


.geudobouw-bar--logo img {

  margin-top: 6px;
  width: 100%;
  height: 80%;


}

.geudobouw-bar--mobile-naviagation{

  width: 50px;
  height: 44px;

}

svg.mobile-naviagation-action-icon {
  width: 100%;
  height: 100%;
}
.st0{fill:#FFFFFF;}
.st1{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}



.geudobouw-mainpage{

margin-top: 60px;
width: 100%;
height: auto;
flex: 1 0 auto;


}

.geudobouw-mainpage-img{


  width: 100%;
  height: 220px;

}

.geudobouw-mainpage-img img{


width: 100%;
height: 100%;


}









.container {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-template-rows: minmax(min-content, max-content);
    width: 100%;
    height: auto;
    margin: auto;
    padding-left: 5px;
    padding-right: 5px;
    padding-top:5px;

}

.figure{


  display: inline-block;
  margin-left: auto;
  margin-right: auto;


}



.container img {
width: 100%;
height: 100px;
object-fit: cover;
}

.form {
  margin-top: 60px;
  display: block;
  width: 80%;
  margin-left: auto;
  margin-right: auto;


}

.inputs input {
  height: 25px;
  width: 49%;
  margin-top: 10px;
  margin-bottom: 10px;


}

.message textarea {
  height: 200px;
width: 100%;
margin-top: 10px;
margin-bottom: 10px;

}

.submit input{

  width: 100%;
}


@media screen and (min-width: 668px) {

  .geudobouw-mainpage{ width:100%; display: block; margin-left:auto; margin-right:auto;}
  .geudobouw-mainpage-img {height: 30%;}
  .geudobouw-mainpage-text{ width:80%; display: block; margin-left:auto; margin-right:auto; margin-top:20px;}
  .container {width: 80%}
  .container { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));}
  .container img {width: 100%}
  }

  @media screen and (min-width: 1024px) {

    .geudobouw-mainpage{ width:100%; display: block; margin-left:auto; margin-right:auto;}
    .geudobouw-mainpage-img {height: 40%;}
    .geudobouw-mainpage-text{ width:70%; display: block; margin-left:auto; margin-right:auto; margin-top:30px;}
    .container {width: 70%}
    .geudobouw-mainpage-text-zwembad { width: 60%; display: block; margin-left: auto; margin-right: auto;}
    .geudobouw-mainpage-text-zwembad h1 {margin-top: 30px;}
    .container {grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));}
    .container img {width: 100%}
    }

  @media only screen and (min-width : 1224px) {
    .geudobouw-mainpage{ width:100%; display: block; margin-left:auto; margin-right:auto; margin-top: 120px;}
    .geudobouw-mainpage-img {height: 55%;}
    .geudobouw-mainpage-text{ width:50%; display: block; margin-left:auto; margin-right:auto; margin-top:30px; margin-bottom: 50px;}
    .geudobouw-bar--mobile-naviagation {display: none;}
    .geudobouw-bar--main-naviagation {display: inline-block;}
    .geudobouw-mainpage-text-zwembad { width: 50%; display: block; margin-left: auto; margin-right: auto;}
    .geudobouw-mainpage-text-zwembad h1 {margin-top: 30px;}
    .container { grid-template-columns: repeat(auto-fit, minmax(100px, 100px));}
    .container img {width: 100px}

  }

    @media only screen  and (min-width : 1424px) {
        .geudobouw-mainpage-img {height: 55%;}

}

    @media only screen  and (min-width : 1624px) {
        .geudobouw-mainpage-img {height: 60%;}

}
    @media only screen  and (min-width : 1824px) {
      .geudobouw-mainpage{ width:100%; display: block; margin-left:auto; margin-right:auto; margin-top: 120px;}
      .geudobouw-mainpage-img {height: 410; width:40%; display: block; margin-left:auto; margin-right:auto;}
      .geudobouw-mainpage-text{ width:30%; display: block; margin-left:auto; margin-right:auto; margin-top:30px; margin-bottom: 50px;}
      .geudobouw-bar--mobile-naviagation {display: none;}
      .geudobouw-bar--main-naviagation {display: inline-block;}
      .footer p {margin-left: 33%}
      .geudobouw-mainpage-text-zwembad { width: 50%; display: block; margin-left: auto; margin-right: auto;}
      .geudobouw-mainpage-text-zwembad h1 {margin-top: 30px;}
      .container {width:40% ;grid-template-columns: repeat(auto-fit, minmax(100px, 100px));}
      .container img {width: 100px}



    }



.uploaderform {

  margin-top: 60px;
}


.uploadpicture{

  width:100px;
  height: 100px;

  margin-left: auto;
  margin-right: auto;
      display: block;



}

.picselecter{

  display: block;
  margin-left: auto;
  margin-right: auto;


}

.selectervalue{
margin-left: 8%;

}

.selectertext {

  display: block;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  font-size: 16px;

}

.submitbtn{
  display: block;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;

background-color: inherit;
border: 1 px;
}


.space {

  width: 100%;
  height: 100px;
  text-align: center;
  margin-top: 20px;


}

.CameraIcon {

  width: 50px;
    top: 125;
    position: fixed;
    float: right;
    margin-left: 270px;
    display: inline-block;


}




.CameraIcon img {

  width: 50px;
  height: 50px;

}

.CameraIcon[type="file"] {
    display: none;
}


.loginform {

  display: block;
  width: 100%;
  height: 200px;
}

.loginfield{


    display: block;
    line-height: 1.2;
    margin-top: 10px;
    font-size: 16px;
    background: transparent;
    outline: none;
    border: none;
    overflow: visible;
    width: 100%;
}

.loginbtn{

  height: 40px;
  border-radius: 20px;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  display: block;
  color: white;
  margin-top: 10px;
  font-size: 20px;
  background-color: transparent;
  border: none;
  overflow: visible;
  line-height: 2.5;


}



.wrap-input-login{

  margin-top: 40px;
  position: relative;
  border-bottom: 2px solid;
  margin-bottom: 40px;
  width: 70%;
  height: 30px;
  display: block;
  margin-left: auto;
  margin-right: auto;



}

.wrap-btn-login{

  background-color: rgb(0,180,242);
  position: relative;
  margin-bottom: 40px;
  width: 40%;
  height: 50px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-transform: uppercase;
  border-radius:  20px;
  line-height: 3.3;
  margin-top: 80px;


}

label {

margin-top:40px;
height: 100px;
display: block;

}

#uploadpage{
  margin-top: 100px;
}

#deletepage{
  margin-top: 100px;
  display: none;

}

.maps{

  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  margin-bottom: 50px;



}