*{
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

body{
  font-family: arial;
  background-color:#e8eaed;
}

/*instellingen voor het navigatiemenu (op pc scherm)*/
nav{
  background: #fff;
  color: #000;
  display: flex;
  justify-content: space-between;
  width:100%;
  height:80px;
}

nav .mainMenu {
  display: flex;
  list-style-type: none;
  margin-right: 60px;
}

nav .mainMenu li a {
  display: inline-block;
  padding: 10px;
  color: #000;
  font-size: 0.9rem;
  margin-top: 35px;
  text-decoration: none;
  width: 127px;
}

nav .mainMenu li a:hover{
  color:#black;
  display:inline-block;
  padding:10px;
  border-radius:10px;
}

nav .openMenu{
  font-size: 2rem;
  margin: 20px;
  display: none;
  cursor: pointer;
}

nav .mainMenu .closeMenu , icons i {
  font-size: 2rem;
  display: none;
  cursor: pointer;
}

/*drop down menu "works" (enkel voor pc scherm)*/
/*drop down "in"*/
ul li ul {
  display:none;
  margin-left: 0px;
  list-style-type: none;
}

/*drop down*/
ul li:hover ul {
  display:block;
  list-style-type: none;
  background:#fff;
}

/*drop down hover*/
a:hover{
  background:#e8eaed;
}

/*submenu "works" niet zichtbaar op pc*/
.mainMenu_smallScreen {
  display: none;
}



/*afbeelding homepagina op pc scherm*/
/*.img-straat_thailand {
    height: 600px;
    background-image: url(img/4.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 250px;
    margin-top: 50px;
}*/

/*kleine tekst copyright*/
/*small {
  color: grey;
  font-weight:10;
  font-size: 0.7rem;
  margin-left: 250px;
  font-family: Garamond;
}*/


/*apple iphone SE2020 750px*, vieuwport size 320/
/*apple iphone 640px*/
/*apple iphone7 vieuwport size 375*/

/*Instellingen voor navigatiemenu op een gsm scherm*/
@media (min-width: 365px) and (max-width: 800px) {
  nav .mainMenu {
    height: 60vh;
    position: fixed;
    top: 0;
    right: 0;
    left: 0px;
    z-index: 10;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    transition: top 1s ease;
    display: none;
    margin-right: 0px;

  }

  nav .mainMenu .closeMenu {
    display: block;
    position: absolute;
    top: 20px;
    right: 20px;
  }

  nav .openMenu {
    display: block;
  }

  nav .mainMenu li a:hover {
    background:#e8eaed;
    font-size: 0.9rem;
  }

  .icons i {
    display: inline-block;
    padding: 12px;
  }

  ul li ul li {
    display: none;
  }

/*submenu works op een gsm scherm; andere configuratie*/
/*drop down op gsm scherm wordt een nieuwe pagina*/
/*submenu "works"*/
    .mainMenu_smallScreen{
      margin-left: 90px;
      margin-top: 100px;
      text-decoration: none;
      display: block;
      list-style-type: none;
    }

/*submenu "works", tekst*/
    .mainMenu_smallScreen li a{
      margin-left: 80px;
      padding: 10px;
      text-decoration: none;
      display: block;
      color: black;
      font-size: 0.9rem;
      font-family: Garamond;
    }

/*submenu "works", hover*/
     .mainMenu_smallScreen li a:hover{
      background: rgba(255, 255, 255);
      color:#black;
      display:inline-block;
      padding:10px;
      border-radius:10px;
    }



  .column {
    float: left;
    width: 170%;
  }
}


/*afbeelding homepagina op gsm scherm*/
  /*  .img-straat_thailand {
            width: 90%;
            height: 220px;
            background-image: url(img/4.jpg);
            background-size: contain;
            background-repeat: no-repeat;
            margin-left: 25px;
            margin-top: 75px;
            margin-right: 50px;
    }

    small {
      color: grey;
      margin-left: 26px;
      margin-top: 0px;
    }*/

@media (min-width: 200px) and (max-width: 365px) {
nav .mainMenu {
  height: 60vh;
  position: fixed;
  top: 0;
  right: 0;
  left: 0px;
  z-index: 10;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #ffffff;
  transition: top 1s ease;
  display: none;
  margin-right: 0px;

}

nav .mainMenu .closeMenu {
  display: block;
  position: absolute;
  top: 20px;
  right: 20px;
}

nav .openMenu {
  display: block;
}

nav .mainMenu li a:hover {
  background:#e8eaed;
  font-size: 0.9rem;
}

.icons i {
  display: inline-block;
  padding: 12px;
}

ul li ul li {
  display: none;
}

/*submenu works op een gsm scherm; andere configuratie*/
/*drop down op gsm scherm wordt een nieuwe pagina*/
/*submenu "works"*/
  .mainMenu_smallScreen{
    margin-left: 80px;
    margin-top: 100px;
    text-decoration: none;
    display: block;
    list-style-type: none;
  }

/*submenu "works", tekst*/
  .mainMenu_smallScreen li a{
    margin-left: 80px;
    padding: 10px;
    text-decoration: none;
    display: block;
    color: black;
    font-size: 0.9rem;
    font-family: Garamond;
  }

/*submenu "works", hover*/
   .mainMenu_smallScreen li a:hover{
    background: rgba(255, 255, 255);
    color:#black;
    display:inline-block;
    padding:10px;
    border-radius:10px;
  }



.column {
  float: left;
  width: 170%;
}
}

/*afbeelding homepagina op gsm scherm*/
  /*.img-straat_thailand {
          width: 90%;
          height: 220px;
          background-image: url(img/4.jpg);
          background-size: contain;
          background-repeat: no-repeat;
          margin-left: 25px;
          margin-top: 75px;
          margin-right: 50px;
  }

  small {
    color: grey;
    margin-left: 26px;
    margin-top: 0px;
    font-family: Garamond;
  }*/



/*afbeelding Homepagina*/

/*zonder dit komt er nergens een foto op de homepagine*/
@media (min-width: 100px) and (max-width: 2500px) {
.img-straat_thailand {

        background-image: url(img/4.jpg);
        background-size: contain;
        background-repeat: no-repeat;

      }
  }
/*afbeelding homepagina op gsm scherm*/
@media (min-width: 200px) and (max-width: 365px) {
.img-straat_thailand {
        width: 90%;
        height: 220px;
        /*background-image: url(img/4.jpg);
        background-size: contain;
        background-repeat: no-repeat;*/
        margin-left: 25px;
        margin-top: 75px;
        margin-right: 50px;
}

small {
  color: grey;
  margin-left: 26px;
  margin-top: 0px;
  font-family: Garamond;
  font-size: 10px;
}
}

@media (min-width: 250px) and (max-width: 310px) {
.img-straat_thailand {
        width: 90%;
        height: 150px;
        /*background-image: url(img/4.jpg);
        background-size: contain;
        background-repeat: no-repeat;*/
        margin-left: 25px;
        margin-top: 75px;
        margin-right: 50px;
}

small {
  color: grey;
  margin-left: 26px;
  margin-top: 0px;
  font-family: Garamond;
  font-size: 10px;
}
}

/*apple iphone SE2020 750px*, vieuwport size 320*/

@media (min-width: 310px) and (max-width: 330px) {
.img-straat_thailand {
        width: 90%;
        height: 180px;
        /*background-image: url(img/4.jpg);
        background-size: contain;
        background-repeat: no-repeat;*/
        margin-left: 25px;
        margin-top: 75px;
        margin-right: 50px;
}

small {
  color: grey;
  margin-left: 26px;
  margin-top: 0px;
  font-family: Garamond;
  font-size: 10px;
}
}

/*apple iphone Ipad mini 768px (mijn Iphone 7)*/

@media (min-width: 330px) and (max-width: 380px) {
.img-straat_thailand {
        width: 90%;
        height: 220px;
        /*background-image: url(img/4.jpg);
        background-size: contain;
        background-repeat: no-repeat;*/
        margin-left: 25px;
        margin-top: 75px;
        margin-right: 50px;
}

small {
  color: grey;
  margin-left: 26px;
  margin-top: 0px;
  font-family: Garamond;
  font-size: 10px;
}
}

/*apple iphone Ipad mini 768px + gsm ozlem*/

@media (min-width: 380px) and (max-width: 405px) {
.img-straat_thailand {
        width: 90%;
        height: 235px;
        /*background-image: url(img/4.jpg);
        background-size: contain;
        background-repeat: no-repeat;*/
        margin-left: 20px;
        margin-top: 75px;
        margin-right: 50px;
}

small {
  color: grey;
  margin-left: 26px;
  margin-top: 0px;
  font-family: Garamond;
  font-size: 10px;
}
}

@media (min-width: 405px) and (max-width: 412px) {
.img-straat_thailand {
        width: 90%;
        height: 240px;
        /*background-image: url(img/4.jpg);
        background-size: contain;
        background-repeat: no-repeat;*/
        margin-left: 25px;
        margin-top: 75px;
        margin-right: 50px;
}

small {
  color: grey;
  margin-left: 26px;
  margin-top: 0px;
  font-family: Garamond;
  font-size: 10px;
}
}

@media (min-width: 412px) and (max-width: 470px) {
.img-straat_thailand {
        width: 90%;
        height: 240px;
        /*background-image: url(img/4.jpg);
        background-size: contain;
        background-repeat: no-repeat;*/
        margin-left: 25px;
        margin-top: 75px;
        margin-right: 50px;
}

small {
  color: grey;
  margin-left: 26px;
  margin-top: 0px;
  font-family: Garamond;
  font-size: 10px;
}
}

@media (min-width: 470px) and (max-width: 500px) {
.img-straat_thailand {
        width: 90%;
        height: 280px;
        /*background-image: url(img/4.jpg);
        background-size: contain;
        background-repeat: no-repeat;*/
        margin-left: 25px;
        margin-top: 75px;
        margin-right: 50px;
}

small {
  color: grey;
  margin-left: 26px;
  margin-top: 0px;
  font-family: Garamond;
  font-size: 10px;
}
}

@media (min-width: 500px) and (max-width: 545px) {
.img-straat_thailand {
        width: 90%;
        height: 320px;
        /*background-image: url(img/4.jpg);
        background-size: contain;
        background-repeat: no-repeat;*/
        margin-left: 25px;
        margin-top: 75px;
        margin-right: 50px;
}

small {
  color: grey;
  margin-left: 26px;
  margin-top: 0px;
  font-family: Garamond;
  font-size: 10px;
}
}



@media (min-width: 545px) and (max-width: 760px) {
.img-straat_thailand {
        width: 90%;
        height: 340px;
        /*background-image: url(img/4.jpg);
        background-size: contain;
        background-repeat: no-repeat;*/
        margin-left: 25px;
        margin-top: 75px;
        margin-right: 50px;
}

small {
  color: grey;
  margin-left: 26px;
  margin-top: 0px;
  font-family: Garamond;
  font-size: 10px;
}
}

@media (min-width: 760px) and (max-width: 800px) {
.img-straat_thailand {
        width: 90%;
        height: 460px;
        /*background-image: url(img/4.jpg);
        background-size: contain;
        background-repeat: no-repeat;*/
        margin-left: 25px;
        margin-top: 75px;
        margin-right: 50px;
}

small {
  color: grey;
  margin-left: 26px;
  margin-top: 0px;
  font-family: Garamond;
  font-size: 10px;
}
}



/*afbeelding homepagina op ipad pro 1024*/
@media (min-width:800px) and (max-width:1030px){
  .img-straat_thailand {
          width: 90%;
          height: 500px;
          /*background-image: url(img/4.jpg);
          background-size: contain;
          background-repeat: no-repeat;*/
          margin-left: 75px;
          margin-top: 75px;
  }
  small {
    color: darkgrey;
    margin-left: 75px;
    margin-top: 0px;
    font-size: 10px;
  }
}





/*afbeelding homepagina op ipad air third generation_screen 10,5-inch*/
@media (min-width:1100px) and (max-width:1120px){
  .img-straat_thailand {
          width: 90%;
          height: 450px;
          /*background-image: url(img/4.jpg);
          background-size: contain;
          background-repeat: no-repeat;*/
          margin-left: 200px;
          margin-top: 75px;
  }
  small {
    color: darkgrey;
    margin-left: 200px;
    margin-top: 0px;
    font-size: 10px;
  }
}

/*@media (min-width:1120px) and (max-width:1300px){
  .img-straat_thailand {
          width: 90%;
          height: 600px;
          background-image: url(img/4.jpg);
          background-size: contain;
          background-repeat: no-repeat;
          margin-left: 100px;
          margin-top: 75px;
  }
  small {
    color: darkgrey;
    margin-left: 100px;
    margin-top: 0px;
  }
}*/

/*Mac Book Pro 13,3 inch 1300 -> 1400*/
@media (min-width:1120px) and (max-width:1500px){
  .img-straat_thailand {
          width: 90%;
          height: 600px;
          /*background-image: url(img/4.jpg);
          background-size: contain;
          background-repeat: no-repeat;*/
          margin-left: 100px;
          margin-top: 75px;
  }
  small {
    color: darkgrey;
    margin-left: 100px;
    margin-top: 0px;
    font-size: 10px;
  }
}

/*Pc Bib Gent 1800 -> 1900*/
@media (min-width:1500px) and (max-width:2000px){
  .img-straat_thailand {
          width: 90%;
          height: 650px;
          /*background-image: url(img/4.jpg);
          background-size: contain;
          background-repeat: no-repeat;*/
          margin-left: 100px;
          margin-top: 75px;
  }
  small {
    color: darkgrey;
    margin-left: 100px;
    margin-top: 0px;
    font-size: 10px;
  }
}

/*naam in de navigatiebar*/
nav .logo{
  margin: 6px;
  font-size: 1.2rem;
  cursor: pointer;
  margin-top: 40px;
  margin-left: 30px;
}

/*titels bij de reeksen*/
.titel {
  font-family: Garamond;
}

/*lettertypes "p"*/
/*p1 {
  font-size: 3.2rem;
  font-weight:none;
  font-family: arial;
  color: #000000;
  margin-left: 100px;
  text-decoration: none;
}*/





/*marges voor de tekst bij contact & about*/

/*bij alle computers 50px van de linkerrand*/
p2 {
  font-size: 14px;
  font-weight:none;
  font-family: Garamond;
  color: black;
  padding: 0 10px;
  float:left;
  margin-left: 50px;
  margin-right: 600px;
}

/*Galaxy fold*/
@media (min-width:250px) and (max-width:300px){
p2 {
  font-size: 14px;
  font-weight:none;
  font-family: Garamond;
  color: black;
  padding: 0 10px;
  float:left;
  margin-left: 50px;
  margin-right: 50px;
  }
}

@media (min-width:300px) and (max-width:375px){
p2 {
  font-size: 14px;
  font-weight:none;
  font-family: Garamond;
  color: black;
  padding: 0 10px;
  float:left;
  margin-left: 30px;
  margin-right: 30px;
  }
}


/*gsm Ozlem*/
@media (min-width:380px) and (max-width:400px){
p2 {
  font-size: 14px;
  font-weight:none;
  font-family: Garamond;
  color: black;
  padding: 0 10px;
  float:left;
  margin-left: 50px;
  margin-right: 50px;
  }
}



@media (min-width:400px) and (max-width:420px){
p2 {
  font-size: 14px;
  font-weight:none;
  font-family: Garamond;
  color: black;
  padding: 0 10px;
  float:left;
  margin-left: 50px;
  margin-right: 50px;
  }
}

@media (min-width:420px) and (max-width:800px){
p2 {
  font-size: 14px;
  font-weight:none;
  font-family: Garamond;
  color: black;
  padding: 0 10px;
  float:left;
  margin-left: 50px;
  margin-right: 50px;
  }
}

/*p3 {
  font-size: 1rem;
  font-weight:none;
  font-family: arial;
  color: black;
  padding: 0 60px;
  padding-top: 50px;
}*/

/*Facebook, Instagram & email icon op de contactpagina*/
/* Facebook */
.fa-facebook {
  color: black;
  transform: scale(1.3);
  text-decoration: none;
}

/* Instagram */
.fa-instagram {
  color: black;
  transform: scale(1.3);
  text-decoration: none;
}

/* E-mail */
.fa-envelope {
  color: black;
  transform: scale(1.3);
  text-decoration: none;
}

/*Facebook, instagram hover*/
.fa-facebook:hover {color: rgb(128,128,128);} /*(0,110,255)*/
.fa-instagram:hover {color: rgb(128,128,128);} /*(255,0,191)*/
.fa-envelope:hover {color: rgb(128,128,128);} /*(255,0,191)*/


/*structuur afbeeldingen op pc*/
    .row {
      padding-left: 60px;
      padding-top: 0px;/*70*/
    }

    .row > .column {
      padding:0 8px;
      margin-top: 60px;
    }

    .row:after {
      content: "";
      display: table;
      clear: both;
    }

    .column {
      float: left;
      width: 250px;
    }
    .titel {
      padding-top: 40px;
      padding-left: 70px;
      color: darkgrey;
    }

/*structuur afbeeldingen op GSM*//*310 tot 330*/

@media (min-width: 200px) and (max-width: 350px) {
    .column {
      float: left;
      width: 300px;
      margin-left: 0px;
      margin-top: 70px;
    }
    .row {
      padding-left: 5px;
      padding-top: 0px;
    }
    .titel {
      padding-top: 50px;
      padding-left: 10px;
    }
}

@media (min-width: 350px) and (max-width: 370px) {
    .column {
      float: left;
      width: 350px;
      margin-left: 0px;
      margin-top: 70px;
    }
    .row {
      padding-left: 5px;
      padding-top: 0px;
    }
    .titel {
      padding-top: 50px;
      padding-left: 10px;
    }
}

@media (min-width: 370px) and (max-width: 800px) {

    .column {
      float: left;
      width: 360px;
      margin-left: 0px;
      margin-top: 70px;
    }
    .row {
      padding-left: 5px;
      padding-top: 0px;
    }
    .titel {
      padding-top: 50px;
      padding-left: 10px;
    }
}



/*Pop UP van de afbeeldingen*/
    /* The Modal (background) */
    .modal {
      display: none;
      position: fixed;
      z-index:1;
      padding-top: 40px;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: white;
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(247,247,247,0.9); /* Black w/ opacity LightBlue: 204,231,232*/
    }



    /* Modal Content */
    .modal-content {
      position: relative;
      background-color: #fefefe;
      margin: auto;
      padding: 0;
      width: 75%;
      max-width: 1200px;

    }

    /* The Close Button */
    .close {
      color: grey;
      position: absolute;
      top: 10px;
      right: 0px;
      left:1350px;
      font-size: 35px;
      font-weight: none;
    }

    .close:hover,
    .close:focus {
      color: #999;
      text-decoration: none;
      cursor: pointer;
    }

    .mySlides {
      display: none;
    }

    .cursor {
      cursor: pointer;
    }

    /* Next & previous buttons */
    .prev,
    .next {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: auto;
      padding: 16px;
      margin-top: -50px;
      color: darkgrey;
      font-weight: bold;
      font-size: 20px;
      transition: 0.6s ease;
      border-radius: 0 3px 3px 0;
      user-select: none;
      -webkit-user-select: none;
    }

    /* Position the "next button" to the right */
    .next {
      right: -60px; /*-60*/
      border-radius: 3px 0 0 3px;
    }

    /* Position the "previous button" to the right */
    .prev {
      right: 1100px; /*1100*/
      border-radius: 3px 0 0 3px;
    }

/*iphone7_screen 4,7inch*/
@media (min-width:300px) and (max-width:375px){
    /* Position the "next button" to the right */
    .next {
          right: -40px; /*-60*/
          border-radius: 3px 0 0 3px;
    }

    /* Position the "previous button" to the right */
    .prev {
          right: 275px; /*1100*/
          border-radius: 3px 0 0 3px;
        }
    /* On hover, add a black background color with a little bit see-through */
    .prev:hover,
    .next:hover {

          background-color: rgba(255,255,255, 0.8);
        }
    .close {
          left:300px;
          top: 80px;
        }
    .modal {
          padding-top: 140px;
        }

      }

      /*Samsung Galaxy 20S+, GSM Ozlem*/
      @media (min-width:375px) and (max-width:400px){
          /* Position the "next button" to the right */
          .next {
                right: -40px; /*-60*/
                border-radius: 3px 0 0 3px;
          }

          /* Position the "previous button" to the right */
          .prev {
                right: 285px; /*1100*/
                border-radius: 3px 0 0 3px;
              }
          /* On hover, add a black background color with a little bit see-through */
          .prev:hover,
          .next:hover {

                background-color: rgba(255,255,255, 0.8);
              }
          .close {
                left:325px;
                top: 80px;
              }
          .modal {
                padding-top: 140px;
              }
            }

/*iphone11_screen 6,1-inch*/
@media (min-width:400px) and (max-width:414px){
    /* Position the "next button" to the right */
    .next {
            right: -40px; /*-60*/
            border-radius: 3px 0 0 3px;
          }

    /* Position the "previous button" to the right */
    .prev {
            right: 307px; /*1100*/
            border-radius: 3px 0 0 3px;
          }
    /* On hover, add a black background color with a little bit see-through */
    .prev:hover,
    .next:hover {
            background-color: rgba(255,255,255, 0.8);
          }
    .close {
            left:340px;
            top: 90px;
          }
    .modal {
            padding-top: 140px;
          }
        }

/*ipad air third generation_screen 10,5-inch*/
@media (min-width:1100px) and (max-width:1112px){
    /* Position the "next button" to the right */
    .next {
            right: -50px; /*-60*/
            border-radius: 3px 0 0 3px;
          }

    /* Position the "previous button" to the right */
    .prev {
            right: 838px; /*1100*/
            border-radius: 3px 0 0 3px;
          }
    /* On hover, add a black background color with a little bit see-through */
    .prev:hover,
    .next:hover {
            background-color: rgba(255,255,255, 0.8);
          }
    .close {
            left:1000px;
            top: 50px;
          }
    .modal {
            padding-top: 100px;
          }
        }


/*laptop twin*/
@media (min-width:1530px) and (max-width:1560px){
      /* Position the "next button" to the right */
      .next {
              right: -50px; /*-60*/
              border-radius: 3px 0 0 3px;
            }

      /* Position the "previous button" to the right */
      .prev {
              right: 1150px; /*1100*/
              border-radius: 3px 0 0 3px;
            }
      /* On hover, add a black background color with a little bit see-through */
      .prev:hover,
      .next:hover {

                background-color: rgba(255,255,255, 0.8);
                  }
      .close {
                left:1400px;
                top: 50px;
                  }
      .modal {
                padding-top: 100px;
                  }
                }

/*PC bib Gent*/
@media (min-width:1500px) and (max-width:2100px){
       /* Position the "next button" to the right */
       .next {
             right: -60px; /*-60*/
             border-radius: 3px 0 0 3px;
             }

        /* Position the "previous button" to the right */
        .prev {
              right: 1220px; /*1150*/
              border-radius: 3px 0 0 3px;
              }
        /* On hover, add a black background color with a little bit see-through */
        .prev:hover,
        .next:hover {

                     background-color: rgba(255,255,255, 0.8);
                    }
        .close {
               left:1600px;/*1400*/
               top: 50px;
               }
        .modal {
                padding-top: 100px;
               }
             }

             /* Number text (1/3 etc) */
             .numbertext {
               color: darkgrey;
               font-size: 12px;
               padding: 8px 12px;
               position: absolute;
               top: 0;
             }

             img {
               margin-bottom: -50px;
               margin-left: 0px;
               margin-right: 0px;
             }

             .caption-container {
               text-align: center;
               background-color: black;
               padding: 2px 16px;
               color: white;
             }

             .demo {
               opacity: 0.6;
             }

             .active,
             .demo:hover {
               opacity: 1;
             }

             img.hover-shadow {
               transition: 0.3s;
             }

             .hover-shadow:hover {
               box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
               filter:custom()(100%);
               transform: scale(1.08);
             }