@media (max-width: 1365px) {
#poster-item {
    height: 200px;
}
}
@media (max-width: 1265px) {
#poster-item {
    height: 180px;
}
}
@media (max-width: 1165px) {
#poster-item {
    height: 115px;
}
}
@media (max-width: 1000px) {
nav {
      font-size: 16pt;
}
#poster-item {
    height: 100px;
}
h1 {
    font-size: 40pt;
}
.dropdown .dropBtn {
    font-size: 16pt;
}
.item-container {
    margin: 100px;
        grid-template-columns: repeat(25, 90px);
    grid-template-rows: repeat(20, 90px);
}
}

@media (max-width: 900px) {
nav {
      font-size: 14pt;
}
#poster-item {
    display: none;
}
h1 {
    font-size: 35pt;
}
h4{
    font-size: 12pt;
}
p1 {
        font-size: 12pt;
}
.mini-window {
    left: calc(1250px - 40vw);
    min-width: 80vw;
}
.dropdown .dropBtn {
    font-size: 14pt;
}
.item-container {
    margin: 220px;
        grid-template-columns: repeat(25, 80px);
    grid-template-rows: repeat(20, 80px);
}
}

@media  (max-width: 750px) { 
nav {
    height: auto;
    
}
.item-container {
    margin: 280px;
        grid-template-columns: repeat(25, 75px);
    grid-template-rows: repeat(20, 75px);
}
h1 {
    font-size: 30pt;
}
.container-buttons {
    margin-top: 40px;
}


.page-button {
    font-size: 17pt;
    width: 140px;
}

#information {
    grid-column: 2 / 6;
    grid-row: 1;
}
#image-container {
    grid-column: 2 / 6;
    grid-row: 2;
}#images-gallery1 {
    display: flex;
    grid-column: 2 / 6;
    grid-row: 3;
            flex-wrap: wrap;
}
.grid-gal img{
    max-width: calc((90vw - 21px )/ 3);
}
.hidden_vertical {
    display: none;
}
.reveal_vertical {
  display: block;
}
.work-page .dropBtn {
    position: absolute;
    top: 40px;
    left: 5vw;
}
}


@media  (max-width: 600px) { 
h1 {
    font-size: 25pt;
}
h4 {
        font-size: 10pt;
}
#information p1 {
        font-size: 10pt;
}
.item-container {
    margin: 380px;
        grid-template-columns: repeat(25, 65px);
    grid-template-rows: repeat(20, 65px);
}
.page-button {
    font-size: 15pt;
    width: 130px;
    height: fit-content;
}

}
@media (orientation: portrait) and (max-width: 600px){
    nav ul {
        display: none;
    }
        .container-buttons {
       display: none;
    }
    .mini-window {
        left: calc(1250px - 45vw);
        min-width: 90vw;
        max-height: 25000px;
        height: fit-content;
        padding-bottom: 25px;
        top: 1325px;
    }
    .welcome {
background-color:  #c7d4d1a9;
        min-height: fit-content;
        height: fit-content;
        position: relative;
    }
    h1 {
        padding: 5px;
        font-size: 18pt;
    }
    .window {
        margin: 0;
    }
    #hidden-nav {
        position: absolute;
        display: block;
top: 3px;
left: 3px;
    }
    #hiddenDrop {
        display: none;
    }
    .container {
  display: inline-block;
  cursor: pointer;
}
.dropContent {
    background-color: #a59483;

}
.dropContent a {
        color: black;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}
#img-about {
    margin: 0 auto;
    float: none;
}
.information_mobile {
    display: block;
    width: calc(100% - 50px );
    background-color: #c7d4d1a9;
    margin: 0 25px;
        border-radius: 8px;
}
.mobile {
    margin: 0 20px;
    padding-bottom: 40px;
}
.item-container {
    margin-top: 700px;
    grid-template-rows: repeat(40, 65px);
}
#visions {
        grid-column: 8 / 15;
        grid-row: 32;
}
#insect {
        grid-column: 16 / 20;
    grid-row: 5;
}
#title_unknown {
    grid-column: 17 / 22;
    grid-row: 8;
}
#ono {
    grid-column: 16 / 20;
    grid-row: 12;
}
#altar {
    grid-column: 8 / 12;
    grid-row: 26;
}
#blad {
    grid-column: 8 / 12;
    grid-row: 17;
}
#werkkleding {
    grid-column: 8 / 11;
    grid-row: 9;
}
#sefarn {
    grid-column: 16 / 20;
    grid-row: 30;
}
#zw {
    grid-column: 16 / 24;
    grid-row: 20;
}
}

@media (orientation: portrait) and (max-width: 390px){
    h1 {
font-size: 15pt;
    }
    .work-page .dropBtn {
    position: absolute;
    top: 43px;
    left: 3vw;
}
    p {
font-size: 12pt;

    }
    .bar1, .bar2, .bar3 {
  width: 22px;
  height: 2px;
  background-color: #333;
  margin: 5px 0;
  transition: 0.4s;
}
.container {
    margin: 4px 1px;
}
}