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

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }

a, b, h5, h4, h3, h2, h1 {
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
}

h4, h5, h3, h2, h1 {
  color: rgb(64, 105, 239);
}

img, video {
  border-radius: 10px;
  width: 100%
}

.sticky-navbar {
  background-color: rgb(255, 255, 255);
  border: 0px solid rgb(204, 204, 204); 
  box-shadow: 0px 5px 6px rgb(179, 179, 179);
  opacity: 1;
  padding-top: 1%;
}

/* start css slideshow fotos */

  .mySlides {
    display: none
  }

  .slideshow-container {
    width: 100%;
  }

/* einde css slideshow fotos */


@media (orientation:landscape) {
  body {
  background-color: rgb(242,242,242) !important;
  background-image: url('../img/logo/bg-cp.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: left;
  background-size: 100% 100%;
  }
  
  #wrapper {
    z-index: 10;
    width: 104%; 
    margin-left: -2%;
    padding: 1%;
    padding-left: 1.7%;
    overflow-x: scroll;
    position: sticky;
    top: 0%;
  }
  
  #innerwrapper {
    width: 100%;
  }
  
  .mnlogo {
  width: 4%;
  transition: 0.3s;
  }
  
  .mnlogo:hover {
  width: 3.5%;
  margin-right: 0.25%;
  margin-left: 0.25%;
  }
  
  #navmob {
    display: none;
  }
  
  #bd-container {
    width: 60%;
    margin-left: 20%;
  }
  
  #logo {
    width: 266px;
  }
  
  #nav1 {
    margin-right: 0.5%;
    margin-top: 1%;
  }
  
  #wnvliegen {
    width: 99.5%; 
    height: auto;
    margin-right: 0.5%;
    border-radius: 5px;
    padding: 5px; 
    border: 1px solid rgb(204, 204, 204); 
    box-shadow: 2px 2px 5px rgb(179, 179, 179);
  }
  
  #welniet {
    font-size: 1.1vw;
  }
  
  #main-1 {
    width: 100%;
    margin-top: 0%;
    display: flex;
    flex-direction: row;
  }
  
  #main-1-text {
    width: 100%;
    margin-top: 0%;
    display: none;
    flex-direction: row;
  }
  
  #main-2 {
    width: 100%;
    margin-top: 0%;
    display: flex;
    flex-direction: row;
  }
  
  #flex-box {
    width: 33%;
    margin-top: 0.5%;
    margin-right: 0.5%;
    border-radius: 5px;
    padding: 5px; 
    border: 0px solid rgb(204, 204, 204); 
    box-shadow: 2px 2px 5px rgb(179, 179, 179);
  }
  
  #flex-box-1 {
    border: 0px solid rgba(0, 0, 0, 0.1);
    width: 33%;
    margin-top: 1%;
    margin-right: 0.5%;
    border-radius: 5px;
    transition: width 0.5s;
    transition-delay: 0s;
  }
  
  #flex-box-1:hover {
    width: 200%;
    transition-delay: 1.2s;
  }
  
  #flex-box-11 {
    border: 0px solid rgba(0, 0, 0, 0.1);
    width: 50%;
    margin-top: 1%;
    margin-right: 0.5%;
    transition: width 0.5s, height 0.5s;
  }
  
  #flex-box-11:active {
    width: 200%;
  }
  
  #flex-box-2 {
    width: 100%;
    margin-top: 1%;
    margin-right: 0.5%;
  }
  
  #flex-box-3 {
    width: 100%;
    margin-top: 0%;
    margin-right: 0.5%;
  }
  
  #flex-box-7 {
    width: 14%;
    margin-top: 0.5%;
    margin-right: 0.5%;
    border-radius: 5px;
    padding: 5px; 
    border: 0px solid rgb(204, 204, 204); 
    box-shadow: 2px 2px 5px rgb(179, 179, 179);
    overflow: hidden;
  }
  
  #flex-box-8 {
    width: 100%;
    margin-top: 0.5%;
    margin-right: 0.5%;
    border-radius: 5px;
    padding: 5px; 
    border: 0px solid rgb(204, 204, 204); 
    box-shadow: 2px 2px 5px rgb(179, 179, 179);
    overflow: hidden;
  }
  
  #flex-box-weer {
    width: 100%;
    margin-top: 0.5%;
    margin-right: 0.5%;
    border-radius: 5px;
    padding: 5px; 
    border: 0px solid rgb(204, 204, 204); 
    box-shadow: 2px 2px 5px rgb(179, 179, 179);
    overflow: hidden;
  }
  
  #flex-box-quad {
    width: 100%;
    margin-top: 0.5%;
    margin-right: 0.5%;
    border-radius: 5px;
    padding: 5px; 
    border: 0px solid rgb(204, 204, 204); 
    box-shadow: 2px 2px 5px rgb(179, 179, 179);
    overflow: hidden;
  }
  
  table {
      border-collapse: collapse;
      width: 100%;
    }

    td, th {
      border: 0px solid #dddddd;
      text-align: left;
      padding: 8px;
    }

    tr:nth-child(even) {
      background-color: #e6e6e6;
    }
    
/* start css slideshow fotos */

  .dot {
    cursor: pointer;
    width: 2.5%;
    margin-left: 6px;
    display: inline-block;
    transition: background-color 0.6s ease;
  }

  .active, .dot:hover {
    content: url("../img/logo/dotred.png");
  }

  .fade {
    animation-name: fade;
    animation-duration: 1.5s;
  }

  @keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
  }

  #buttonbar {
    width: 100%;
    text-align: center;
    }
    
/* einde css slideshow fotos */

}


@media (orientation:portrait) {
  body {
  background-color: rgb(242,242,242) !important;
  background-image: url('../img/logo/bg-mob.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: left;
  background-size: 100% 100%;
  }
  
  .novispor{
    display: none;
  }
  
  #wrapper {
    z-index: 10;
    width: 100%;
    margin-left: 0%;
    margin-top: 1%;
    padding: 2%;
    padding-left: 4%;
    overflow-x: scroll;
    margin-top: 1%;
    margin-right: 0.5%;
    position: sticky;
    top: 0%;
  }
  
  #innerwrapper {
    width: 180%;
  }
  
  .mnlogo {
  width: 6.3%;
  }
  
  #bd-container {
    width: 100%;
  }
  
  #logo {
    width: 266px;
  }
  
  #logorechts {
    display:none;
  }
  
  #wnvliegen {
    width: 92%; 
    height: auto;
    margin-left: 4%;
    padding: 5px;
    border: 1px solid rgb(204, 204, 204); 
    box-shadow: 2px 2px 5px rgb(179, 179, 179);
  }
  
  #main-1 {
    width: 100%;
    display: flex;
    flex-direction: column;
    
  }
  
  #main-2 {
    width: 100%;
    display: none;
    flex-direction: column;
  }
  
  #flex-box {
    border: 0px solid rgba(0, 0, 0, 0.1);
    width: 92%;
    margin-left: 4%;
    margin-top: 1%;
    border-radius: 5px;
    padding: 5px; 
    border: 0px solid rgb(204, 204, 204); 
    box-shadow: 2px 2px 5px rgb(179, 179, 179);
  }
  
  #flex-box-1 {
    border: 0px solid rgba(0, 0, 0, 0.1);
    width: 92%;
    margin-left: 4%;
    margin-top: 1%;
  }
  
  #flex-box-11 {
    border: 0px solid rgba(0, 0, 0, 0.1);
    width: 92%;
    margin-left: 4%;
    margin-top: 1%;
  }
  
  #flex-box-2 {
    border: 0px solid rgba(0, 0, 0, 0.1);
    width: 92%;
    margin-left: 4%;
    margin-top: 1%;
  }
  
  #flex-box-3 {
    width: 92%;
    margin-left: 4%;
    margin-top: 0%;
  }
  
  #flex-box-7 {
    border: 0px solid rgba(0, 0, 0, 0.1);
    width: 92%;
    margin-left: 4%;
    margin-top: 1%;
    border-radius: 5px;
    padding: 5px; 
    border: 0px solid rgb(204, 204, 204); 
    box-shadow: 2px 2px 5px rgb(179, 179, 179);
    overflow: hidden;
  }
  
  #flex-box-8 {
    border: 0px solid rgba(0, 0, 0, 0.1);
    width: 92%;
    margin-left: 4%;
    margin-top: 1%;
    border-radius: 5px;
    padding: 5px; 
    border: 0px solid rgb(204, 204, 204); 
    box-shadow: 2px 2px 5px rgb(179, 179, 179);
    overflow: hidden;;
  }
  
  #flex-box-weer {
    border: 0px solid rgba(0, 0, 0, 0.1);
    width: 92%;
    margin-left: 4%;
    margin-top: 1%;
    border-radius: 5px;
    padding: 5px; 
    border: 0px solid rgb(204, 204, 204); 
    box-shadow: 2px 2px 5px rgb(179, 179, 179);
    overflow: hidden;;
  }
  
  #flex-box-quad {
    border: 0px solid rgba(0, 0, 0, 0.1);
    width: 92%;
    margin-left: 4%;
    margin-top: 1%;
    border-radius: 5px;
    padding: 5px; 
    border: 0px solid rgb(204, 204, 204); 
    box-shadow: 2px 2px 5px rgb(179, 179, 179);
    overflow: hidden;;
  }
  
  .hidmpty {
    display: none;
  }
  
  table {
      border-collapse: collapse;
      width: 100%;
    }

    td, th {
      border: 0px solid #dddddd;
      text-align: left;
      padding: 6px;
      padding-left: 0px;
    }

    tr:nth-child(even) {
      background-color: #e6e6e6;
    }
    
/* start css slideshow fotos */

  .dot {
    cursor: pointer;
    width: 7.0%;
    margin-left: 2px;
    display: inline-block;
    transition: background-color 0.6s ease;
  }

  .active, .dot:hover {
    content: url("../img/logo/dotred.png");
  }

  .fade {
    animation-name: fade;
    animation-duration: 1.5s;
  }

  @keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
  }

  #buttonbar {
    width: 100%;
    text-align: center;
    }
  
/* einde css slideshow fotos */

}

/* einde landscape - portrait */