/*-------------------------------------media query's-------------------------------------*/

@media (max-width: 1400px) {
  /*******homepage*******/
  h1,
  .masthead-title {
    font-size: 36pt;
  }

  .masthead {
    height: 400px;
  }

  .filter {
    grid-column: 2 / span 10;
  }

  .artwork1 {
    grid-column: 2 / span 5;
  }

  .artwork2 {
    grid-column: 7 / span 5;
  }

  .arrowup {
    margin-right: 10%;
  }

  /*******contact*******/
  .data {
    grid-column: 3 / span 8;
    font-style: italic;
    margin-top: 0;
    display: block;
  }

  .contactform {
    grid-column: 3 / span 8;
    display: block;
  }

  .icons {
    display: inline-block;
    width: 40px;
    margin-right: 2%;
    vertical-align: middle;
  }

  .icontext {
    display: inline-block;
    padding: 0% 0 5% 0;
  }

  .contactform form {
    padding-top: 5%;
  }
  /*******over mij*******/
  .pagename {
    grid-column: 2 / span 10;
  }

  .headshot {
    height: 250px;
    grid-column: 2 / span 3;
  }

  .biography {
    grid-column: 5 / span 7;
  }

  .textblock {
    grid-column: 2 / span 10;
  }

  .smallheading {
    grid-column: 2 / span 10;
  }

  .download {
    grid-column: 2 / span 3;
  }
  /*******productendiensten*******/
  .subtext {
    grid-column: 3 / span 8;
    text-align: left;
  }

  .listitem {
    margin-left: 8%;
  }

  /*******bakkerijmuseum*******/
  .mainimage,
  .mainimagebig {
    grid-column: 2 / span 10;
  }

  .extraimage {
    grid-column: 2 / span 3;
  }

  .describingtext {
    grid-column: 5 / span 7;
  }

  /*******mottowaaijenberg*******/
  .imagegroup {
    grid-column: 2 / span 10;
  }
  /*******cellotrio*******/
  .cellotext {
    grid-column: 2 / span 10;
  }
  .celloresult {
    grid-column: 3 / span 11;
  }

  .cellodescribingtext {
    grid-column: 14 / span 9;
  }
}

/*-------------------------------------media query 2-------------------------------------*/
@media (max-width: 1100px) {
  /*******homepage*******/
  h1,
  .masthead-title {
    font-size: 32pt;
  }

  .masthead {
    height: 300px;
  }

  .masthead-text {
    margin-top: 10%;
  }
  /*******over mij*******/
  .biography {
    grid-column: 6 / span 6;
    margin-top: auto;
    margin-bottom: auto;
  }

  p,
  label,
  input::placeholder,
  textarea::placeholder,
  td,
  .button,
  ul li {
    font-size: 14pt;
  }

  nav ul li {
    font-size: 16pt;
  }
  h2,
  th,
  .pagename,
  .smallheading {
    font-size: 21pt;
  }

  /*******productendiensten*******/
  .subtext {
    grid-column: 2 / span 10;
    text-align: left;
  }

  .aligned {
    grid-column: 2 / span 10;
  }

  table {
    grid-column: 2 / span 10;
  }
}

/*-------------------------------------media query 3-------------------------------------*/
@media (max-width: 900px) {
  /*-----hamburgermenu-----*/
  label[for="hamburger"] {
    display: block;
    padding-left: 20px;
  }
  header nav ul li {
    display: none !important;
  }
  .menu-open header nav ul li {
    padding-top: 5%;
    display: block !important;
    float: none;
    background-color: #edf6f9;
    padding-bottom: 5%;
    padding-right: 20px;
    border-bottom: 2px solid #272932;
  }

  .menu-open header .nav-container {
    width: 350px;
    background: #edf6f9;
  }

  .menu-open .nav-container {
    height: 100%;
    display: block;
  }

  .menu-open .hamburgermenu {
    vertical-align: center;
    padding-top: 27px;
    padding-bottom: 27px;
  }

  .menu-open label[for="hamburger"] {
    display: block;
    padding-left: 20px;
    border-bottom: 2px solid #272932;
  }

  /*******homepage*******/
  h1,
  .masthead-title {
    font-size: 28pt;
  }

  .masthead-text {
    grid-column: 2 / span 4;
    text-align: left;
  }

  .masthead {
    height: 200px;
  }

  .masthead-title {
    padding: 0;
  }

  .mastheadresponsive {
    display: none;
  }

  .imgmastheadarrow {
    display: none;
  }

  .twelverowgrid {
    grid-template-columns: repeat(6, 1fr);
  }

  .filter {
    grid-column: 2 / span 4;
    padding: 0 0 20px 0;
  }

  .artwork1 {
    grid-column: 2 / span 4;
    padding: 0 0 4px 0;
  }

  .artwork2 {
    grid-column: 2 / span 4;
    padding: 0 0 4px 0;
  }

  .arrowup {
    margin-right: 20%;
  }

  .arrow {
    height: 75px;
  }
  /*******contact*******/
  .heading {
    grid-column: 2 / span 4;
    text-align: left;
  }

  .data {
    grid-column: 2 / span 4;
    padding-top: 5%;
  }

  .contactform {
    grid-column: 2 / span 4;
  }

  .icons {
    display: none;
  }

  .icontext {
    display: inline-block;
    padding: 0% 0 2% 0;
  }
  /*******over mij*******/
  .biography {
    grid-column: 2 / span 4;
    padding-bottom: 2%;
  }

  .headshot {
    height: 200px;
    margin-top: 5%;
  }

  .textblock {
    grid-column: 2 / span 4;
  }

  .skills {
    margin-top: 5%;
    padding-top: 5%;
    padding-bottom: 5%;
  }

  .download {
    grid-column: 2 / span 2;
  }
  /*******productendiensten*******/
  .subtext {
    grid-column: 2 / span 4;
    text-align: left;
  }

  .listitem {
    margin-left: 10%;
  }

  .aligned {
    grid-column: 2 / span 4;
  }

  table {
    grid-column: 2 / span 4;
  }
  /*******bakkerijmuseum*******/
  .pagename {
    text-align: left;
    grid-column: 2 / span 4;
  }

  .zoomedin {
    grid-column: 2 / span 4;
    display: block;
  }

  .mainimagebig {
    display: none;
  }

  .extraimage {
    grid-column: 2 / span 2;
    display: block;
  }

  .atticimage {
    width: 80%;
  }

  .describingtext {
    grid-column: 2 / span 4;
    display: block;
    margin: 0;
    padding-top: 2%;
  }
  /*******mottowaaijenberg*******/
  .imagegroup {
    display: block;
    grid-column: 2 / span 4;
  }

  .image1,
  .imagebigger {
    padding-right: 0px;
  }

  .image3 {
    padding-left: 0px;
  }

  .image1,
  .image2,
  .image3 {
    width: 70%;
    padding-bottom: 10px;
  }

  /*******cellotrio*******/
  .cellotext {
    grid-column: 2 / span 4;
  }

  .gridrow24 {
    grid-template-columns: repeat(6, 1fr);
    padding: 0;
  }

  .celloresult {
    grid-column: 2 / span 4;
    display: block;
    padding: 5% 0 5% 0;
  }

  .cellodescribingtext {
    grid-column: 2 / span 4;
    display: block;
    margin: 0;
  }

  /*******nostalgie*******/
  .mainimage {
    grid-column: 2 / span 4;
  }

  .imagebigger {
    padding-bottom: 10px;
  }
}

@media (max-width: 650px) {
  /******************header*******************************/
  /*-----logoicoon ipv tekst-----*/
  .logo-title {
    display: none;
  }

  .logoimage-title {
    display: block;
    width: 60px;
  }

  .logo {
    opacity: 100%;
  }

  /*******homepage*******/
  .masthead-text {
    grid-column: 1 / span 6;
    text-align: left;
  }

  .twelverowgrid {
    padding: 0 5% 0 5%;
  }

  .masthead-title {
    padding: 0;
  }
  .filter {
    grid-column: 1 / span 6;
  }

  .artwork1 {
    grid-column: 1 / span 6;
  }

  .artwork2 {
    grid-column: 1 / span 6;
  }
  .arrowup {
    margin-right: 5%;
  }

  /*******contact*******/
  .heading {
    grid-column: 1 / span 6;
  }

  .data {
    grid-column: 1 / span 6;
  }

  .contactform {
    grid-column: 1 / span 6;
  }

  /*******over mij*******/

  .biography {
    grid-column: 1 / span 6;
  }

  .headshot {
    grid-column: 1 / span 6;
  }

  .textblock {
    grid-column: 1 / span 6;
  }

  .skills {
    margin-top: 5%;
    padding-top: 5%;
    padding-bottom: 5%;
  }

  .smallheading {
    grid-column: 1 / span 6;
  }

  .download {
    grid-column: 1 / span 3;
  }
  /*******productendiensten*******/
  .subtext {
    grid-column: 1 / span 6;
    text-align: left;
  }

  .aligned {
    grid-column: 1 / span 6;
  }

  table {
    grid-column: 1 / span 6;
  }

  /*******bakkerijmuseum*******/
  .pagename {
    text-align: left;
    grid-column: 1 / span 6;
  }

  .zoomedin {
    grid-column: 1 / span 6;
  }

  .extraimage {
    grid-column: 1 / span 2;
    display: block;
  }

  .atticimage {
    width: 100%;
  }

  .describingtext {
    grid-column: 1 / span 6;
  }
  /*******mottowaaijenberg*******/
  .imagegroup {
    grid-column: 1 / span 6;
  }

  /*******cellotrio*******/

  .gridrow24 {
    padding: 0 5% 0 5%;
  }

  .celloresult {
    grid-column: 1 / span 6;
  }

  .cellodescribingtext {
    grid-column: 1 / span 6;
  }

  .cellotext {
    grid-column: 1 / span 6;
  }

  .mainimage {
    grid-column: 1 / span 6;
  }
}