CSS Document
/*      Voor alle pagina's      */

*, *::after, *::before {
  box-sizing:border-box;  
  margin: 0;
  padding: 0;
}

/*      font      */

@font-face {
  font-family: "Woodford Bourne"; 
  src: url("//db.onlinewebfonts.com/t/ab5835bc2eba54dbb5012336606a5edc.eot"); 
  src: url("//db.onlinewebfonts.com/t/ab5835bc2eba54dbb5012336606a5edc.eot?#iefix") format("embedded-opentype"), 
  url("//db.onlinewebfonts.com/t/ab5835bc2eba54dbb5012336606a5edc.woff2") format("woff2"), 
  url("//db.onlinewebfonts.com/t/ab5835bc2eba54dbb5012336606a5edc.woff") format("woff"), 
  url("//db.onlinewebfonts.com/t/ab5835bc2eba54dbb5012336606a5edc.ttf") format("truetype"), 
  url("//db.onlinewebfonts.com/t/ab5835bc2eba54dbb5012336606a5edc.svg#WoodfordBournePROW01-Rg") format("svg"); 
}

@font-face {
  font-family: "Woodford Bourne Thin"; 
  src: url("//db.onlinewebfonts.com/t/a9fb206b2885ac22d2d6c9dc4a789ace.eot"); 
  src: url("//db.onlinewebfonts.com/t/a9fb206b2885ac22d2d6c9dc4a789ace.eot?#iefix") format("embedded-opentype"), 
  url("//db.onlinewebfonts.com/t/a9fb206b2885ac22d2d6c9dc4a789ace.woff2") format("woff2"), 
  url("//db.onlinewebfonts.com/t/a9fb206b2885ac22d2d6c9dc4a789ace.woff") format("woff"), 
  url("//db.onlinewebfonts.com/t/a9fb206b2885ac22d2d6c9dc4a789ace.ttf") format("truetype"), 
  url("//db.onlinewebfonts.com/t/a9fb206b2885ac22d2d6c9dc4a789ace.svg#WoodfordBournePROW01-Light") format("svg"); 
}

/*      einde font       */

/*      body       */

body {
  font-family: 'Woodford Bourne', sans-serif;
  color: black;
  font-size: 1em;
  font-weight: 400;
  position: relative;
  text-align: center;
  line-height: 1.5em;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

::-webkit-scrollbar {
  width: 0.5em;
}

::-webkit-scrollbar-thumb {
  background: #232323;
}

::-webkit-scrollbar-track {
  background: white;
}

:root {
  --brownred: #e34309;
  --lightgrey: #eaeaea;
}
/*    deze bron geraadpleegd om css variabelen te kunnen gebruiken: https://www.w3schools.com/css/css3_variables.asp    */

a {
  text-decoration: none;
  color: black;
}

img, video {
  max-width: 100%;
  height: auto;
  }

h3 {
  letter-spacing: 0.1em;
  font-family: 'Woodford Bourne Thin', sans-serif;
  font-size: 0.9em;
  font-weight: normal;
  padding: 1em 0 1em 0;
  line-height: 1.22em;
  max-width: 80%;
  text-align: center;
  align-items: center;
  margin: auto;
  margin-bottom: 0.5em;
}

ul {
  list-style-type: none;
}

li{
overflow: hidden;
padding-left: 0;
}

hr {
  display: block;
  margin: 0 10em;
  color: #695340;
}

header nav ul li:hover, #homepagina ul:nth-of-type(1) li a:hover, #homepagina article:nth-of-type(1) a:hover, #homepagina > a:nth-of-type(2):hover, 
.tour-dates-more:hover, .link-more:hover, .listen-music:hover, #homepagina section:nth-of-type(1) a ul:hover, #homepagina section:nth-of-type(1) a ul:hover, #homepagina ul button:hover,
footer ul li img:hover, footer > a:hover, #top:hover{
  background: var(--brownred);
  color: white;
  border: none;
  transition: ease-in-out .3s; 
  cursor: pointer;
}

header a:nth-of-type(1):active, header nav ul li:active, #homepagina ul:nth-of-type(1) li a:active, #homepagina article:nth-of-type(1) a:active, #homepagina > a:nth-of-type(2):active, 
.tour-dates-more:active, .link-more:active, .listen-music:active, #homepagina section:nth-of-type(1) a ul:active, #homepagina section:nth-of-type(1) a ul:active, #homepagina ul button:active,
footer ul li img:active, footer > a:active  {
  background: #de8564;
  color: white;
  outline: none;
  border: none;
}

header a:nth-of-type(1):focus, header nav ul li:focus, #homepagina ul:nth-of-type(1) li a:focus, #homepagina article:nth-of-type(1) a:focus, #homepagina > a:nth-of-type(2):focus, 
.tour-dates-more:focus, .link-more:focus, .listen-music:focus, #homepagina section:nth-of-type(1) a ul:focus, #homepagina section:nth-of-type(1) a ul:focus, #homepagina ul button:focus,
footer ul li img:focus, footer > a:focus {
  outline: none !important;
  border: 0.3em solid darkred !important;
}

#top {
  display: none;
  position: fixed;
  bottom: 1em;
  right: 1em;
  border: none;
  color: white;
  background: var(--brownred);
  padding: 0.5em;
  font-family: 'Woodford Bourne', sans-serif;
  font-size: 1em;
}

/*       einde body       */

/*      begin header      */

#homepagina header {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100vw;
  background: white;
  height: 5em;
}

header {
  position: fixed;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100vw;
  background: white;
  height: 5em;
}

header img {
  max-width: 70vw;
  margin: 1.5em 1.5em 1.5em 1.5em;
}

/*      begin nav      */

nav ul {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform:translateX(100%);
  transition: 0.5s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: 0;
  background: white;
}

nav button {
  background: none;
  background-image: url('../images/SVG/Button.svg');
  background-repeat: no-repeat;
  border: none;
  appearance: none;
  outline: none;
  cursor: pointer;
  position: fixed;
  top: 2vh;
  right: 3vh;
  height: 5vh;
  width: 10vw;
  z-index: 1;
  transition-duration: 0.3s;
}

nav a {
  display: block;
  line-height: 100%;
  font-size: 1.2em;
  margin: 0.4rem auto;
  padding: 0.5em 0;
  border: none;
}

nav.toonNav ul {
  transform:translateX(0%);
  transition: 0.5s;
}

nav.toonNav button {
  background-image: url('../images/SVG/Kruis.svg');
  transition-duration: 0.3s;
}

/* codepen Mediaqueries oefening 3 geraadpleegd voor de nav */
/*      einde nav     */

/*      einde header      */

/*       begin footer       */

footer {
  position: static;
  bottom: 0;
  right: 0;
  left: 0;
}

footer ul {
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 15vh;
  max-width: 100%;
  margin: 0;
  padding-left: 1.5em;
}

footer ul a li {
  margin-right: 4em;
}

footer ul a li img {
  height: 3vh;
}

footer ul a {
  background: none;
}

footer > a {
  background: #e0e0e0;
  max-width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.6875em 1.875em 1.625em 1.8125em;
  font-size: 1em;
  font-style: normal;
  font-weight: 400;
}

footer p {
  text-align: center;
  font-size: 0.625em;
}

/*      einde footer       */

/*      time, datum       */

time {
  letter-spacing: 0.1em;
  font-family: 'Woodford Bourne Thin', sans-serif;
  font-size: 0.9em;
  font-weight: normal;
  padding: 1em 0 1em 0;
  line-height: 1.22em;
  max-width: 80%;
  text-align: center;
  align-items: center;
  margin: auto;
  margin-bottom: 0.5em;
}

/*      einde time, datum       */ 

/*      home pagina       */

.h2-home {
  letter-spacing: 0.1em;
  font-family: 'Woodford Bourne Thin', sans-serif;
  font-size: 2em; 
  font-weight: lighter;
  padding: 3em 0 2.5em 0;
  line-height: 1.22em;
}

/*      slider      */
/* #homepagina > ul:nth-of-type(1) li.klikt-rechts {
  animation: slider-rechts;
  animation-duration: .5s;
  animation-fill-mode: forwards;
} */

/* @keyframes slider-rechts {
  0% {
    background-image: url(../images/slider-2.webp);
  }
  33% {
    background-image: url(../images/slider-3.webp);
  }
  66% {
    background-image: url(../images/slider-1.webp);
  }
  99% {
    background-image: url(../images/slider-2.webp);
  }
} */

/* @keyframes slider-rechts {
  0% {
    transform: translateX(0);
  }
  33% {
    transform: translateX(-100%);
  }
  66% {
    transform: translateX(-200%);
  }
  99% {
    transform: translateX(-300%);
  }
} */

/*    Code wat ik geprobeerd heb om de slider werkend te krijgen    */



#homepagina > ul:nth-of-type(1) button.klikt, #homepagina > ul:nth-of-type(2) button.klikt {
  animation-name: pijltje-groter;
  animation-duration: .5s;
}

@keyframes pijltje-groter {
  0% {
    transform:scale(1);
  }
  50% {
    transform: scale(5);
    color: black;
  }
  55% {
    transform: rotate(180deg);
    color: black;
  }
  100% {
    transform: scale(1);
  }
}

#homepagina > ul:nth-of-type(1) button, #homepagina > ul:nth-of-type(1) li a {
  position: absolute;
  top: 45vh;
  background: none;
  border: none;
  color: white;
  font-size: 2em;
  appearance: none;
  outline: none;
  animation-name: onthul-pijltje;
  animation-duration: 2s;
  animation-iteration-count: 1;
}

@keyframes onthul-pijltje {
  0% {
    opacity: 0;
  }
  80% {
    opacity: 0.5;
  }
  85% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.7;
  }
  95% {
    opacity: 0.85;
  }
  100% {
    opacity: 1;
  }
}

#homepagina > ul:nth-of-type(1) button:nth-of-type(2) {
  position: absolute;
  right: 0%;
}

#homepagina > ul:nth-of-type(1) {
  width: 300%;
  overflow-x: scroll;
  white-space: nowrap;
  display: block;
  max-width: 100%;
  padding: 0;
  margin: 0;
}

#homepagina > ul:nth-of-type(1) li {
  height: 90vh;
  width: 100%;
  display: inline-block;
  margin: 0;
  vertical-align: top;
/* Het element is uitgelijnd met de bovenkant van het hoogste element op de lijn 
Bron:  https://www.w3schools.com/cssref/pr_pos_vertical-align.asp*/
  align-items: center;
  background: url('../images/slider-3.webp');
}

#homepagina > ul:nth-of-type(1) li a {
  font-family: 'Woodford Bourne Thin', sans-serif;
  border: solid 0.0625em white;
  border-radius: 0.3125em;
  padding: 0.6em 1.5em;
  font-size: 0.9em;
  background: white;
  color: black;
}

#homepagina > ul:nth-of-type(1) li:nth-of-type(1) {
  width: 100%;
  background: url('../images/slider-3.webp');
  background-size: cover;
  background-repeat: no-repeat;
}

#homepagina > ul:nth-of-type(1) li:nth-of-type(2) {
  width: 100%;
  background: url('../images/slider-2.webp');
  background-size: cover;
  background-repeat: no-repeat;
}

#homepagina > ul:nth-of-type(1) li:nth-of-type(3) {
  width: 100%;
  background: url('../images/slider-1.webp');
  background-size: cover;
  background-repeat: no-repeat;
}

/*       einde slider       */

/*      video img       */

#homepagina > a:nth-of-type(1) img{
  padding: 0 0 7.5em;
}
/*      einde video img       */

/*      homepagina moral panic      */

#homepagina > article:nth-of-type(1) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: space-between;
  align-items: center;
  margin-bottom: 1em;
}

#homepagina > article:nth-of-type(1) img {
  width: 80%;
}

#homepagina > article:nth-of-type(1) h2 {
  margin: 0.75em 0 2em 0;
  padding: 0;
}

#homepagina > article:nth-of-type(1) a {
  font-family: 'Woodford Bourne Thin', sans-serif;
  border: solid 0.0625em #232323;
  border-radius: 0.3125em;
  padding: 0.6em 1.5em;
  font-size: 0.9em;
  margin: 1.25em 0 3.125em 0;
}

#homepagina > a:nth-of-type(2) {
  font-family: 'Woodford Bourne Thin', sans-serif;
  border: solid 0.0625em #232323;
  border-radius: 0.3125em;
  padding: 0.6em 1.5em;
  font-size: 0.9em;
  display: inline-block;
  margin: 5em 0;
  width: 10em;
}

/*      einde homepagina moral panic      */

/*      homepagina tour dates       */

#homepagina > section:nth-of-type(1) {
  width: 100%;
  background: #232323;
  color: white;
  font-family: 'Woodford Bourne', sans-serif;
  font-weight: 400;
  height: 110vh;
}

#homepagina > section:nth-of-type(1) li {
  padding-bottom: 0.5em;
  margin-left: -2em;
}

#homepagina > section:nth-of-type(1) ul li:nth-of-type(4) {
  font-weight: 700;
}

.tour-dates-more {
  font-family: 'Woodford Bourne Thin', sans-serif;
  border: solid 0.0625em white;
  border-radius: 0.3125em;
  padding: 0.6em 1.5em;
  font-size: 0.9em;
  background: white;
  color: black;
}

/*      einde homepagina tour dates      */

/*       homepagina news en videos       */

#homepagina section:nth-of-type(2) article, #homepagina section:nth-of-type(3) article {
  display: inline-block;
  margin: 0 2em;
  vertical-align: top;
  align-items: center;
  margin-left: 1em;
}

#homepagina section:nth-of-type(2) article img, #homepagina section:nth-of-type(3) article img {
  max-width: 100%;
}

#homepagina section:nth-of-type(2) article h3, #homepagina section:nth-of-type(3) article h3 {
  white-space: initial;
}

#homepagina > section:nth-of-type(2) div, #homepagina > section:nth-of-type(3) div {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  display: block;
  flex-direction: column;
  width:100%;
  max-width: 100vw;
  padding: 0 0 1em 0;
}

#homepagina > section:nth-of-type(3) {
  background: var(--lightgrey);
}

#homepagina > section:nth-of-type(3) div article {
  display: inline-block;
  margin: 0 2em;
  vertical-align: top;
  align-items: center;
  margin-left: 1em;
}

.link-more {
  display: flex;
  justify-content: center;
  max-width: 11em;
  font-family: 'Woodford Bourne Thin', sans-serif;
  border: solid 0.0625em black;
  border-radius: 0.3125em;
  padding: 0.6em 1.5em;
  font-size: 0.9em;
  margin: 2em auto;
  margin-bottom: 6em;
}

/*      einde homepagina news en videos      */

/*      homepagina 2 afbeeldingen      */

.twee-images {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.twee-images div:nth-of-type(1) {
  background: var(--lightgrey);
  width: 100%;
}

.twee-images div:nth-of-type(1) img {
  margin: 8em 2em 6em 2em;
  width: 80%;
}

.twee-images div:nth-of-type(2) {
  background: black;
  width: 100%;
}

.twee-images div:nth-of-type(2) img {
  margin: 6em 2em 6em 2em;
  width: 80%;
}



/*       einde homepagina 2 afbeeldingen       */

/*      homepagina shop       */

#homepagina section:nth-of-type(4) ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
}

#homepagina section:nth-of-type(4) a {
  display: inline-block;
  max-width: 11em;
  font-family: 'Woodford Bourne Thin', sans-serif;
  border: solid 0.0625em #232323;
  border-radius: 0.3125em;
  padding: 0.6em 1.5em;
  font-size: 0.9em;
  margin: 1.25em 0 3.125em 0;
}

#homepagina section:nth-of-type(4) p {
  font-weight: bold;
  font-size: 1em;
}

#homepagina section:nth-of-type(4) ul {
  padding: 0;
  margin: 0;
}

/*      einde homepagina shop       */

/*      music pagina      */

/*      music pagina moral panic album       */

.h2-music {
  letter-spacing: 0.4em;
  font-family: 'Woodford Bourne Thin', sans-serif;
  font-size: 2em;
  font-weight: normal;
  padding: 5em 0 2.5em 0;
  line-height: 1.22em;
}

#music-pagina section:nth-of-type(1) {
  background: var(--lightgrey);
  text-align: center;
}

#music-pagina section:nth-of-type(1) img {
  max-width: 80%;
}

#music-pagina section:nth-of-type(1) img {
  width: 80vw;
}

#music-pagina section:nth-of-type(1) article {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 0;
}

.listen-music {
  font-family: 'Woodford Bourne Thin', sans-serif;
  border: solid 0.0625em #232323;
  border-radius: 0.3125em;
  padding: 0.6em 1.5em;
  font-size: 0.9em;
  margin: 1.25em 0 3.125em 0;
  background: white;
  max-width: 11em;
}

ol {
  align-items: center;
  padding: 0 0 1.25em 0;
  font-family: 'Woodford Bourne', sans-serif;
  font-style: normal;
  font-size: 0.94em;
  font-weight: 400;
}

ol li {
  list-style-position: inside;
}

/*      einde music pagina moral panic album      */

/*       music pagina albums onder elkaar       */

#music-pagina section:nth-of-type(2) article {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: space-between;
  align-items: center;
}

#music-pagina > section:nth-of-type(2) article div:nth-of-type(1) {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#music-pagina > section:nth-of-type(2) {
  background: var(--lightgrey);
  text-align: center;
  width: calc(100% -2rem);
}

#music-pagina > section:nth-of-type(2) img {
  width: 80%;
}

#music-pagina > section:nth-of-type(2) article:last-of-type {
  border: none;
  margin-bottom: 0;
}

#music-pagina section {
  background: var(--lightgrey);
  display: block;
}

.h2-music-kleiner {
  letter-spacing: 0.1em;
  font-family: 'Woodford Bourne Thin', sans-serif;
  font-size: 1.9em;
  font-weight: normal;
  padding: 0;
  margin: 0.75em 0 2em 0;
  line-height: 1.22em;
}

#music-pagina section:nth-of-type(2) article div div {
  flex-flow: row wrap !important;
  align-content: space-between;
  justify-content: center;
  width: 180%;
}

#music-pagina section:nth-of-type(2) article div div a {
  margin: 0.2em;
  padding: 0.4375em 1.25em;
  min-width: 20%;
}

#music-pagina section:nth-of-type(2) article div div a img {
  margin-right: 0.5em;
  width: 0.85vw;
}

/*      einde music pagina albums onder elkaar       */

@media (max-width: 991px) {
 
  /*      homepagina header       */

  #homepagina header {
  position: fixed;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100vw;
  background: white;
  height: 9vh;
  }

  nav ul li a.selected {
    color: var(--brownred);
  }

  /*      einde homepagina header       */

  /*      homepagina slider       */

  #homepagina > ul:nth-of-type(1) li a {
    position: relative;
    top: 70%;
  }

  /*      einde homepagina slider       */
  
  /*      homepagina moral panic      */

  #homepagina > article:nth-of-type(1) img {
    min-width: 50vw;
  }  

  /*       einde homepagina moral panic       */

  /*      homepagina tour dates      */

  #homepagina > section:nth-of-type(1) {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  #homepagina > section:nth-of-type(1) ul {
    color: white;
    max-width: 100%;
    border-bottom: 0.001em solid rgba(124, 124, 124, 0.25);
  }

  .tour-dates-more {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    font-family: 'Woodford Bourne Thin', sans-serif;
    font-size: 0.9em;
    border: solid 0.0625em white;
    color: black;
    margin: 3em auto; 
    max-width: 11em;
  }

  /*      einde homepagina tour dates      */

  /*      homepagina news en videos      */

  #homepagina section:nth-of-type(2) article, #homepagina section:nth-of-type(3) article {
    width: 90%;
  }

  /*      einde homepagina news en videos       */

  /*      homepagina shop       */

  #homepagina section:nth-of-type(4) img {
    max-width: 85%;
  }

  /*      einde homepagina shop       */

  hr {
    margin: 0 1.5em;
  }

  /*      music pagina moral panic album      */

  #music-pagina section:nth-of-type(1) article {
    justify-content: center;
    align-content: space-between;
    margin-bottom: 4em;
  }

  #music-pagina section:nth-of-type(1) img {
    min-width: 50vw;
  }

  /*      einde music pagina moral panic album      */

  /*      music pagina albums onder elkaar      */

  #music-pagina section:nth-of-type(2) > img {
    min-width: 50vw;
  }

  #music-pagina section:nth-of-type(2) article div div {
    width: 100%;
    flex-flow: row wrap !important;
    align-content: space-between;
    justify-content: center;
    margin-bottom: 5em;
  }

  #music-pagina section:nth-of-type(2) article div div a {
    min-width: 50%;
    padding: 0.5em 0.05em;
    margin: 0.5em 0;
  }
  
  #music-pagina section:nth-of-type(2) article div div a img {
    margin-right: 0.5em;
    width: 0.8em;
  }

  /*      einde music pagina albums onder elkaar      */

  /* footer  */

  footer ul a li {
    margin-right: 2em;
    }

  /* einde footer */
}

@media (min-width: 992px) {
  /*      begin header       */

  header img {
    padding-left: 2em;
  }

  /*      einde header      */

  /*      begin nav       */
  
  nav {
    order: 0;
    padding-right: 2em;
  }
  
  nav button {
   display: none; 
  }
  
  nav ul {
    position: relative;
    transform:translateX(0);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background: none;
    padding: 0;
    font-size: 0.9em;
  }

  nav ul li {
    padding: 1em;
  }

  /* codepen Mediaqueries oefening 3 geraadpleegd voor de nav */
  /*      einde nav       */

  /*      homepagina slider       */

  #homepagina > ul:nth-of-type(1) li a {
    position: relative;
    top: 70%;
  }

  #homepagina > ul:nth-of-type(1) li:nth-of-type(1) {
    width: 100%;
    background: url('../images/slider1-landscape.webp');
    background-size: cover;
    background-repeat: no-repeat;
  }
  
  #homepagina > ul:nth-of-type(1) li:nth-of-type(2) {
    width: 100%;
    background: url('../images/slider2-landscape.jpg');
    background-size: cover;
    background-repeat: no-repeat;
  }
  
  #homepagina > ul:nth-of-type(1) li:nth-of-type(3) {
    width: 100%;
    background: url('../images/slider3-landscape.webp');
    background-size: cover;
    background-repeat: no-repeat;
  }

  /*      einde homepagina slider      */

  /*      homepagina video img        */

  #homepagina > a:nth-of-type(1) img{
    min-width: 100%;
  }

  /*      einde homepagina video img      */

  /*      homepagina moral panic      */

  #homepagina > article:nth-of-type(1) {
    justify-content: space-around;
    align-content: center;
    align-items: center;
    margin-bottom: 1em;
  }

  #homepagina > article:nth-of-type(1) img {
    max-width: 30%;
  }

  #homepagina > a:nth-of-type(2) {
    display: inline-block;
    left: calc(50% - 7em);
  }

  /*      einde homepagina moral panic      */

  /*      homepagina tour dates       */

  #homepagina > section:nth-of-type(1) {
    background: #232323;
    color: white;
    height: 70vh;
  }

  #homepagina > section:nth-of-type(1) h2 {
    letter-spacing: 0.4em;
  }

  #homepagina > section:nth-of-type(1) ul {
    color: white;
    display: flex;
    flex-direction: row;
    font-family: 'Woodford Bourne', sans-serif;
    font-weight: 400;
    padding: 0.5em 0;
    border-bottom: 0.001em solid rgba(124, 124, 124, 0.25);
  }

  #homepagina > section:nth-of-type(1) ul li:nth-of-type(1) {
    width: 20%;
    order: 1;
  }

  #homepagina > section:nth-of-type(1) ul li:nth-of-type(2) {
    width: 35%;
    order: 2;
  }

  #homepagina > section:nth-of-type(1) ul li:nth-of-type(3) {
    width: 25%;
    order: 3;
  }

  #homepagina > section:nth-of-type(1) ul li:nth-of-type(4) {
    width: 20%;
    order: 4;
  }

  .tour-dates-more {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    margin: auto;
    margin-top: 5em;
    max-width: 11em;
  }

  /*      einde homepagina tour dates       */

  /*      homepagina news en videos       */

  #homepagina section:nth-of-type(2) article, #homepagina section:nth-of-type(3) article {
    width: 40%; 
  }

  /*      einde homepagina news en videos       */

  /*      homepagina 2 afbeeldingen       */

  .twee-images {
    width: 100%;
    height: auto;
    flex-wrap: nowrap;
  }

  .twee-images div:nth-of-type(1), .twee-images div:nth-of-type(2) {
    width: 100%;
  }
  
  .twee-images div:nth-of-type(2) img {
    margin: 8em 2em 6em 2em;
  }

  /*      einde homepagina 2 afbeeldingen       */

  /*      homepagina shop       */

  #homepagina section:nth-of-type(4) ul {
    display: flex;
    flex-wrap: nowrap;
  }

  #homepagina section:nth-of-type(4) img {
    max-width: 90%;
  }

  /*       einde homepagina shop      */

  /*      music pagina moral panic album      */

  #music-pagina section:nth-of-type(1) article {
    width: 90%;
    justify-content: space-around;
    align-content: center;
    padding: 2rem 1rem 2rem;
  }

  #music-pagina section:nth-of-type(1) img {
    max-width: 30%;
  }

  /*       einde music pagina moral panic album       */


  /* music pagina albums onder elkaar */

  #music-pagina section:nth-of-type(2) article:nth-of-type(odd) img  {
    order: 1;
    /* de volgorde van de afbeelding en de tekst aanpassen met order */
  }
  /* om de oneven artikelen te selecteren volgende bron geraadpleegd: https://stackoverflow.com/questions/5080699/how-can-i-style-even-and-odd-elements */
  
  #music-pagina section:nth-of-type(2) article:nth-of-type(odd) div {
    order: 0;
    /* de volgorde van de afbeelding en de tekst aanpassen met order */
  }

  #music-pagina section:nth-of-type(2) article {
    justify-content: space-around;
    align-content: center;
    align-items: center;
    margin-bottom: 1em;
    padding: 2rem 1rem 2rem;
  }

  #music-pagina section:nth-of-type(2) img {
    max-width: 30%;
  }

  #music-pagina section:nth-of-type(2) article div {
    width: 20%;
  }

  /*      einde music pagina albums onder elkaar      */
}