/* ROOT */
:root {
  --darkgreen: #5f6f52;
  --lightgreen: #a9b388;
  --beige: #fefae0;
  --brown: #423121;
  --alert: #aa0000;

  --maxwidth: 1200px;
}


/* GENERAL */
@font-face {
  font-family: Futuranormal;
  src: url('futuranormal.ttf');
}

html {
  font-size: 100%;
}

body {
  background-color: var(--beige);
  font-size: 1rem;
  color: #000000;
  font-family: Futuranormal, Arial;
}

.header {
  padding: .25rem .25rem .6rem .25rem;
  color: var(--darkgreen);
  background-color: var(--beige);
  text-align: center;
  max-width: var(--maxwidth);
  margin: auto;
}

.main {
  background-color: #ffffff;
  text-align: left;
  max-width: var(--maxwidth);
  padding-bottom: 1.2rem;
  margin: auto;
}

.footer {
  max-width: var(--maxwidth);
  margin: 0rem auto 2.5rem auto;
}

.footer-text {
  background-color: var(--lightgreen);
  color: var(--brown);
  font-size: .8rem;
  text-align: center;
  font-weight: bold;
  padding: .2rem;
}

.no_scroll {
  overflow: hidden;
}



/* NAVIGATION MENU */
.navbar {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  max-width: var(--maxwidth);
  margin: auto;
  width: 100%;
}

.menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: var(--lightgreen);
  top: 0;
}

.menu a {
  color: var(--beige);
  text-align: center;
  padding: 1rem 1rem;
  text-decoration: none;
  float: left;
  display: block;
  font-size: 1.1rem;
}

.menu-dropdown {
  float: left;
  overflow: hidden;
}

.menu a:hover, .menu a:active, .menu-dropdown:hover, .menu-dropdown:active {
  color: var(--beige);
  background-color: var(--darkgreen);
}  

.menu-dropdown:hover .menu-dropdown-content {
  display: block;
}

.menu-dropdown .dropbtn {
  border: none;
  outline: none;
  color: var(--beige);
  padding: 1rem 1rem;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  font-size: 1.1rem;
  cursor: pointer;
}  

.menu-dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--beige);
  min-width: 10rem;
  box-shadow: 0rem .5rem 1.5rem 0rem rgba(0,0,0,0.2);
  z-index: 1;
}  

.menu-dropdown-content a {
  color: var(--lightgreen);
  padding: 1rem 1.2rem;
  text-decoration: none;
  display: block;
  text-align: left;
  float: none;
}  

.menu .hamburger {
  display: none;
  font-size: 1.2rem;
}

.menu .title {
  text-align: center;
  padding: 1rem;
  color: var(--beige);
  display: none;
  font-size: 1.1rem;
}

.language_nl, .language_uk {
  float: right;
  display: block;
  padding: 1.15rem;
  width: 2rem;
  height: 1.2rem;
  cursor: pointer;
}

.language_nl {
  content: url("/files/site/flag_nl.svg");
}

.language_uk {
  content: url("/files/site/flag_uk.svg");
}

.language_nl:hover, .language_uk:hover {
  background-color: var(--darkgreen);
}

.language_nl:hover {
  content: url("/files/site/flag_uk.svg");
}

.language_uk:hover {
  content: url("/files/site/flag_nl.svg");
}



/* PAGE CONTENT */
.main_content {
  padding: 1.5rem 2.5rem;
}


img.left, img.right {
  max-width: 200px;
  max-height: 200px;
  object-fit: contain;
  border: 3px solid #ffffff;
}

img.left {
  float: left;
  margin: 1.2rem .8rem .8rem 0;
}

img.right {
  float: right;
  margin: 1.2rem 0 .8rem .8rem;
}

img.single {
   margin-left: 200px;
}

.divider-horizontal {
  width: 100%;
  height: .25rem;
  background-color: var(--brown);
  margin: .5rem 0 .5rem 0;
  display: block;
  clear: both;
}

a {
  color: var(--lightgreen);
  text-decoration: none;
  display: inline
}

h2 {
  color: var(--lightgreen);
  font-size: 1.5rem;
  font-weight: normal;
  margin: 2rem 0 .5rem 0;
}

h3 {
  color: var(--lightgreen);
  font-size: 1.2rem;
  font-weight: normal;
  margin: .8rem 0 0 0;
}

.album {
  padding: .8rem;
  display: flex;
}

.album-photos, .album-pages {
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
}

.album-photos img, .album-pages img {
  margin: .8rem;
  border-radius: .8rem;
  object-fit: cover;
  cursor: pointer;
}

.album-photos img {
  width: 15rem;
  height: 15rem;
}

.album-pages img {
  width: 15rem;
  height: 21rem;
}

.gallery {
  z-index: 100;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
  overflow-x: scroll;
  scroll-behavior: none;
  scroll-snap-type: x mandatory;
  display: none;
  background: rgba(0, 0, 0, 0.9);
  cursor: pointer;
  scrollbar-width: none;
}

.gallery::-webkit-scrollbar { 
    display: none;
}

.gallery-slide {
  z-index: 101;
  flex: 0 0 100%;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  position: relative;
  scroll-snap-align: center;
  cursor: default;
}

.gallery-slide figure {
  max-width: 90%;
  max-height: 90%;
}

.gallery-slide img {
  z-index: 102;
  width: 100%;
  height: 100%;
  display: block;
}

.gallery-slide figcaption {
  z-index: 102;
  caption-side: bottom;
  color: var(--beige);
  background-color: var(--darkgreen);
  padding: .25rem;
  text-align: center;
}

.gallery-previous, .gallery-next {
  z-index: 103;
  position: absolute;
  width: 4rem;
  height: 4rem;
  border-radius: 3rem;;
  background: var(--lightgreen);
  text-align: center;
  color: var(--beige);
  background-position: center;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  cursor: pointer;
}

.gallery-previous {
  left: 2%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E");
}

.gallery-next {
  right: 2%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E");
}

.open_gallery:hover {
  cursor: pointer;
  border: 3px solid var(--lightgreen);
}

.grid {
  padding: .8rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.grid-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 3px solid #ffffff;
  border-style: solid;
  padding: 1.5rem;
  color: var(--darkgreen);
}

.grid-item img {
  width: 13.5rem;
}

.list {
  padding: .8rem;
}

.list-item {
  border: 3px solid #ffffff;
  border-style: solid;
  padding: 1rem;
  overflow: hidden;
}

.list-item {
  display: flex;
  flex-direction: row;
}

.list-item > div {
  margin-left: 2rem;
}

.item-date, .item-number, .item-origin, .item-title {
  padding-top: 1rem;
  font-size: .8rem;
  font-weight: bold;
}

.item-date::before, .item-number::before, .item-origin::before, .item-title::before {
  display: block;
  margin-bottom: .3rem;
  color: #000000;
  font-size: .7rem;
  font-weight: normal;
}

.item-date_nl::before {
  content: "Publicatiedatum: ";
}

.item-number_nl::before {
  content: "Publicatie: ";
}

.item-origin_nl::before {
  content: "Gepubliceerd door: ";
}

.item-title_nl::before {
  content: "Titel: ";
}

table.k-toppen {
  margin-top: .5rem;
}  

td.k-name {
  width: 20%;
  padding: 0 .5rem 1.2rem 0;
  font-weight: bold
}  

td.k-date {
  width: 15%;
  padding: 0 .5rem 1.2rem 0;
}  

td.k-height {
  width: 10%;
  padding: 0 .5rem 1.2rem 0;
}  

td.k-descr {
  padding-bottom: 1.2rem;
}  

div.camera {
  display: table;
  margin: .8rem 0;
}  

.intern-flexbox {
  display: flex;
}  

.intern-index {
  float: left;
  background-color: var(--brown);
  padding: .5rem .8rem .5rem .8rem;
  margin: 0 0.5rem 0 0;
  flex: 0 0 20%;
  cursor: pointer;
}  

.intern-index-title {
  color: var(--beige);
  font-size: 1rem;
  vertical-align: top;
  font-weight: bold;
  text-align: left;
  margin: .8rem 0 2rem 0;
}  

.intern-index-title:hover {
  color: var(--lightgreen);
}    

.intern-index-date {
  text-align: right;
  font-weight: normal;
  font-size: 1rem;
  margin-top: .5rem;
}  

.divider-vertical {
  flex: 0 0 .25rem;
  background-color: var(--brown);
  margin: 0 .5rem 0 .5rem;
}  

.intern-blog {
  padding: .5rem .8rem .5rem .8rem;
  margin: 0 .5rem 0 0;
  height: 100%;
  flex: 80%;
  min-width: 0;
}  

.intern-blog-item {
  display: block;
  margin-bottom: 2.5rem;
  clear: both;
}  

.otm-flexbox {
  display: flex;
  flex-direction: row;
  width: 100%;
}  

.otm-flexbox-item {
  width: 30%;
  text-align: center;
  clear: both;
}  

.otm-flexbox-item img{
  width: 100%;
}  

form {
  margin: 3rem auto;
}  

label {
  color: var(--lightgreen);
  margin-bottom: .4rem;
  display: block;
}  

input, textarea {
  font-size: 1rem;
  font-family: Futuranormal;
  color: var(--brown);
  width: 100%;
  padding: 1rem;
  border: .06rem solid var(--brown);
  border-radius: .5rem;
  box-sizing: border-box;
  margin-bottom: 1rem;
  resize: none;
  outline: none;
}  

input:focus, textarea:focus {
  border: .15rem solid var(--brown);
}  

textarea {
  height: 15rem;
}  

input[type=submit] {
  font-size: 1.5rem;
  font-family: Futuranormal;
  background-color: var(--lightgreen);
  color: var(--beige);
  padding: .5rem;
  border: none;
  border-radius: .5rem;
  cursor: pointer;
}  

input[type=submit]:hover {
  background-color: var(--darkgreen);
}  

.youtube {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;
  margin-top: 4rem;
}

.youtube_iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}




/* RESPONSIVE */

@media screen and (max-width: 1200px) {
  div.otm-flexbox {
    flex-direction: column;
  }

  div.otm-flexbox-item {
    width: 100%;
  }

  .main_content {
    padding: 1.5rem;
  }

  .album-photos img {
    width: 12rem;
    height: 12rem;
  }

  .album-pages img {
    width: 12rem;
    height: 17rem;
  }
}

@media screen and (max-width: 800px) {
  .menu a, .menu-dropdown .dropbtn, .topbar {
    display: none;
  }

  .menu a.hamburger, .menu.responsive a.hamburger {
    float: left;
    display: block;
    padding: 1rem 1rem;
  }

  .menu .title, .menu.responsive .title {
    display: block;
  }

  .menu.responsive {
    position: relative;
    padding: 0;
    margin: 0;
  }

  .menu.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  
  .menu.responsive .menu-dropdown {
    float: none;
  }

  .menu.responsive .menu-dropdown-content {
    position: relative;
    margin-left: .7rem;
  }

  .menu-dropdown.responsive:hover .menu-dropdown-content {
    display: block;
  }

  .menu.responsive .menu-dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }

  .album {
    padding: .4rem;
  }

  .album-photos img {
    width: 9rem;
    height: 9rem;
  }

  .album-pages img {
    width: 9rem;
    height: 12.5rem;
  }

  div.intern-index {
    margin: 0rem;
  }

  div.intern-index-title {
    font-size: .7rem;
  }

  div.intern-index-date {
    font-size: .7rem;
  }

  div.divider-vertical {
    display: none;
  }
}

@media screen and (max-width: 650px) {
  .album-photos img {
    width: 7.5rem;
    height: 7.5rem;
  }

  .album-pages img {
    width: 7.5rem;
    height: 10.5rem;
  }
}