body {
  height:100%;
  padding: 0;
  margin:0;
  font-family: "Trebuchet MS";
  line-height: 1.2em;
  font-size:100%;
  background:#009900;
}

h3 { text-align:left; }

#header {
  background:#E3F473;
  background-image:url(../foto%27s/welkom/head.webp);
  background-repeat:no-repeat;
  background-position:right center;
  width:100%;
  margin:0;
  padding:0;
}

#container #header img {
  text-align:center;
  width:100%;
  max-width:407px;
  height:auto;
}

#footer {
  left:0;
  bottom:0;
  width:100%;
}

#content {
  max-width:1900px;
  margin:20px auto;
}

#zijkant {
  float:left;
  width:155px;
  background:#E3F473;
  text-align:center;
  padding:20px 0;
}

.main {
  background:#009900;
  font-size:24px;
  line-height:1.2em;
  float:left;
  margin:0 0 20px 1%;
  padding:0;
  width:80%;
}

.main .textArea {
  padding:20px;
  color:#fff;
  font-size:100%;
}

.main .textArea p {
  font-size:large;
  color:#fff;
}

.passend {
  max-width:100%;
}

.main .textArea div {
  text-align:center;
}

div a img {
  width:80%;
  height:80%;
}

.img {
  width:100%;
  max-width:300px;
  height:auto;
  float:left;
  margin:0 10px 10px 0;
}

/*==============TABLET LAYOUT==============*/
@media screen and (max-width: 768px) {
  .main {
    margin:0 0 20px 1%;
    clear:both;
    width:98%;
  }

  #zijkant {
    clear:both;
    width:100%;
  }

  #zijkant .textArea {
    margin:0;
  }
}

/*==============TELEFOON LAYOUT==============*/
@media screen and (max-width: 480px) {
  body {
    font-size:110%;
  }

  .main {
    margin:0;
    width:100%;
  }
}

/* Foto vergroten */
article, aside, figure, footer, header, hgroup, menu, nav, section {
  display:block;
}

.textArea p img {
  text-align:left;
  margin-right:5px;
}

.textArea p img:hover {
  height:20%;
  width:20%;
  filter:blur(0);
  border:#000 solid 1px;
  box-shadow:10px 10px 10px rgb(0 0 0 / 0.5);
  transform:scale(1.75);
  transform-origin:top right;
}

/*==================== TABEL 1 ====================*/
/* Normale tabel */
.meststoffen-schema {
  width:100%;
  border-collapse:collapse;
  background:#e3f473;
  color:#000;
}

.meststoffen-schema th,
.meststoffen-schema td {
  border:1px solid #000;
  padding:8px;
  text-align:left;
}

.meststoffen-schema thead {
  background:#930609;
  color:#fff;
}

/* Mobiel */
@media screen and (max-width: 768px) {

  .meststoffen-schema,
  .meststoffen-schema tbody,
  .meststoffen-schema tr,
  .meststoffen-schema td {
    display:block;
    width:100%;
  }

  .meststoffen-schema thead {
    display:none;
  }

  .meststoffen-schema tr {
    margin-bottom:15px;
    border:2px solid #930609;
    background:#e3f473;
  }

  .meststoffen-schema td {
    position:relative;
    padding-left:45%;
    border:1px solid #ccc;
    min-height:24px;
  }

  .meststoffen-schema td:nth-child(1)::before {
    content:"Gewasgroep";
    font-weight:bold;
    position:absolute;
    left:10px;
  }

  .meststoffen-schema td:nth-child(2)::before {
    content:"Root+";
    font-weight:bold;
    position:absolute;
    left:10px;
  }

  .meststoffen-schema td:nth-child(3)::before {
    content:"MR1";
    font-weight:bold;
    position:absolute;
    left:10px;
  }

  .meststoffen-schema td:nth-child(4)::before {
    content:"MR2";
    font-weight:bold;
    position:absolute;
    left:10px;
  }

  .meststoffen-schema td:nth-child(5)::before {
    content:"Calgreen";
    font-weight:bold;
    position:absolute;
    left:10px;
  }
}

/*==================== TABEL 2 ====================*/
.meststoffen-tabel {
  width:100%;
  border-collapse:collapse;
  background:#e3f473;
  color:#000;
}

.meststoffen-tabel th,
.meststoffen-tabel td {
  border:1px solid #000;
  padding:8px;
  text-align:left;
}

.meststoffen-tabel thead {
  background:#930609;
  color:#fff;
}

/* Mobiel */
@media screen and (max-width: 768px) {

  .meststoffen-tabel,
  .meststoffen-tabel tbody,
  .meststoffen-tabel tr,
  .meststoffen-tabel td {
    display:block;
    width:100%;
  }

  .meststoffen-tabel thead {
    display:none;
  }

  .meststoffen-tabel tr {
    margin-bottom:15px;
    border:2px solid #930609;
    background:#e3f473;
  }

  .meststoffen-tabel td {
    position:relative;
    padding-left:45%;
    border:1px solid #ccc;
    min-height:24px;
  }

  .meststoffen-tabel td:nth-child(1)::before {
    content:"Product";
    font-weight:bold;
    position:absolute;
    left:10px;
  }

  .meststoffen-tabel td:nth-child(2)::before {
    content:"Mag mengen?";
    font-weight:bold;
    position:absolute;
    left:10px;
  }

  .meststoffen-tabel td:nth-child(3)::before {
    content:"Bladspuiten?";
    font-weight:bold;
    position:absolute;
    left:10px;
  }

  .meststoffen-tabel td:nth-child(4)::before {
    content:"Opmerking";
    font-weight:bold;
    position:absolute;
    left:10px;
  }
}