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

@font-face {
  font-family: "Neutra Text Book";
  src: url(../fonts/NeutraText-Book.otf);
}



body {
  font-family: "Neutra Text Book";
  font-size: 23px;
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
}


/* De stijlveranderingen tussen de 4 albums. */
body.v1 {
  background: url("../images/backgroundV1.jpg") no-repeat center fixed;
  background-size: cover;
}

body.v2 {
  background: url("../images/backgroundV2.jpg") no-repeat center fixed;
  background-size: cover;
}

body.v3{
  background: url("../images/backgroundV3.jpg") no-repeat center fixed;
  background-size: cover;
}

body.v4 {
  background: url("../images/backgroundV4.jpg") no-repeat center fixed;
  background-size: cover;
}

.v1 .button1, .v1 .button2 {
  background: #DECCC8;
}

.v1 .button1:hover, .v1 .button1:focus, .v1 .button2:hover, .v1 .button2:focus {
  cursor: pointer;
  background: rgba(255, 255, 255, .4)
}

.v2 .button1, .v2 .button2 {
  background: #214D27;
}

.v2 .button1:hover, .v2 .button1:focus, .v2 .button2:hover, .v2 .button2:focus {
  cursor: pointer;
  background: rgba(255, 255, 255, .4)
}

.v4 .button1, .v4 .button2 {
  background: #AE2D19;
}

.v4 .button1:hover, .v4 .button1:focus, .v4 .button2:hover, .v4 .button2:focus {
  cursor: pointer;
  background: rgba(255, 255, 255, .4)
}


/* Fade in laden pagina */
body span:nth-of-type(1) {
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 100;
  top: 0;
  transition: .8s;
}

.flash {
  background-color: rgba(255, 255, 255, 1);
}

.fade {
  background-color: rgba(255, 255, 255, 0);
  visibility: hidden;
}

.disabled {
  display: none;
}




/* ----- Header ----- */
header {
  text-align: center;
}

h2 {
  margin-top: 34.5px;
}


/* Navigatie */
nav {
  font-size: .9em;
  width: 100%;
  margin: 2em 0 6em 0;
}

nav ul{
  display: flex;
  justify-content: center;
  list-style: none;

  padding: 0px 8px;
}

nav li {
  padding: 0 .5em;
  letter-spacing: .01em;
  transform: scale(1, .9);
}

nav a {
  color: white;
  text-decoration: none;
}

nav a:hover, nav a:focus {
  color: #999;
}


/* Header images */
#homePage header img {
  filter: invert(100%);
  display: block;
  margin: 1.5em auto 0 auto;
  width: 400px;
  max-width: 70%;
}



/* --- Begin van de main ----  */
main {
  text-align: center;
}


/* ---- Section 1 ---- */

/* Button 1: Give me a Sound */
/* dit had gewoon button moeten zijn maar dat breekt de buttons van tourpage en waarschijnlijk geen tijd meer om dat nu te fixen */
.button1, .button2 {
  font-family: "Neutra Text Book";
  font-weight: 900;
  display: block;
  margin: 1.5em auto 0 auto;
  width: 400px;
  height: 70px;
  max-width: 90%;
  line-height: 65px;
  font-size: 23px;
  color: white;
  letter-spacing: .2em;
  text-transform: uppercase;

  border: 3px solid #fff;
  border-radius: 50px;
  border-color: #007edb #62721d #4c4c4c #af2023;

  background: #0A1115;
  transition: .3s;
}

.button1:hover, .button1:focus {
  cursor: pointer;
  background: rgba(255, 255, 255, .4)
}

#soundButton:hover, #soundButton:focus {
  transform: scale(1.05, 1.03);
}



/* Container section 1 -- kreeg het niet voor elkaar met article??? */
section:nth-of-type(1) div:first-child {
  position: relative;

  width: 80%;
  margin: auto auto;
}


/* Back en Next knoppen */

/* Maakt img wit */
main button img {
  filter: invert(100%);
}

/* Spiegelt eerste knop */
div button:nth-of-type(1) img {
  transform: scaleX(-1);
}

div button.button1 {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 3.5em;
  height: 3.5em;
  border-radius: 50%;

  margin: 0;
}

/* Positie knop 1 */
div button:nth-of-type(1) {
  position: absolute;
  z-index: 3;
  left:10%;
  top: 50%;
  transform: translateY(-50%);
}

/* Positie knop 2 */
div button:nth-of-type(2) {
  position: absolute;
  z-index: 3;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
}

/* Zet de knoppen aan de rand vast zodat ze meegaan met de video */
@media (max-width: 1080px) {
  div button:nth-of-type(1) {
    left: 0;
  }

  div button:nth-of-type(2) {
    right: 0;
  }
}

/* Maakt de knoppen kleiner op kleine schermen */
@media (max-width: 650px) {
  div button.button1 {
    width: 2.5em;
    height: 2.5em;
  }

  main button img {
    transform: scale(.75);
  }

  div button:nth-of-type(1) img {
    transform: scale(-.75)
  }
}


/* Video */
div div {
  position: relative;
  margin: 1.5em auto 0 auto;
  width: 600px;
  max-width: 90%;
}

/* Alleen de active video zal zictbaar zijn */
video {
  width: 100%;
  display: none;
}

video.active {
  display: inline;
}

/* 4 spans over video heengezet als onzichtbare buttons */
section:nth-of-type(1) span {
  position: absolute;
  height: 50%;
  width: 50%;
  z-index: 2;
  cursor: pointer;
}

section:nth-of-type(1) span:nth-of-type(1) {
  top: 0;
  left: 0;
}

section:nth-of-type(1) span:nth-of-type(2) {
  top: 0;
  left: 50%;
}

section:nth-of-type(1) span:nth-of-type(3) {
  top: 50%;
  left: 0;
}

section:nth-of-type(1) span:nth-of-type(4) {
  top: 50%;
  left: 50%;
}



/* ---- Section 2 ---- */

/* Album storepages nav */
#redirect {
  display: flex;

  width: 1280px;
  max-width: 90%;
  margin: 1.5em auto 0 auto;
  list-style: none;
}

#redirect li {
  flex-grow: 1;
  line-height: 60px;

  position: relative;
}

/* Zorgt voor de bolletjes in de elementen */
#redirect li::before {
  content: "";
  border: 2px solid black;
  background-color: white;
  border-radius: 25px;;
  width: 10px;
  height: 10px;

  position: absolute;
  left: 50%;
  top: -7px;
  transform: translateX(-50%);
}

/* Actieve album groter */
#redirect li.active::before {
  border: 4px solid black;
  width: 20px;
  height: 20px;

  top: -10px
}

/* Border kleuren */
#redirect li:first-of-type {
  color: #007edb;
  border-top: 4px solid #007edb;
}

#redirect li:nth-of-type(2) {
  color: #62721d;
  border-top: 4px solid #62721d;
}

#redirect li:nth-of-type(3) {
  color: #fff;
  border-top: 4px solid #fff;
}

#redirect li:last-of-type {
  color: rgba(175, 32, 35, .6);
  border-top: 4px solid rgba(175, 32, 35, .6);  
}

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


/* Button 2: mailing list */
.button2 {
  height: 60px;
  line-height: 55px;
  font-size: 23px;
  letter-spacing: .2em;

  border-color: #fff;
  box-shadow: 5px 5px 0 0 #909090;

  transform: translate(-.2em, -.2em);
}

.button2:hover, .button2:focus {
  transform: translate(0, 0);
  box-shadow: 0 0 0 0 #909090;
  background: rgba(255, 255, 255, .4);
  cursor: pointer;
}

/* Button 2 responsiveness */
@media(max-width: 360px) {
  .button2 {
    font-size: 20px;
  }
}

@media(max-width: 395px) {
  .button2 {
    height: 3.2em;
    line-height: 1.5em;
  }
}



/* ---- Section 3 ---- */

/* YouTube videos */
/* De video clips werden niet geaccepteerd in iframe dus het plaatje verwijst je door naar yt */
article {
  position: relative;
}

/* Achtergrond foto */
article img {
  margin: 1.5em auto 0 auto;
  max-width: 90%;
  filter: brightness(50%);
}

/* De video titel */
article h2 {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  width: 75%;
}

/* Play button */
article a {
  position: absolute;
  top: 52%;
  left: 50%;
  
  transform-origin: left;
  transform: translateX(-50%);
  transition: .3s;

  border: 3px solid white;
  border-radius: 50%;
  
}

article a:hover, article a:focus {
  cursor: pointer;
  transform: scale(1.1) translateX(-50%);
  background-color: black;
}

/* Img in play button */
article a img {
  margin: 10px;
  filter: invert(100%);

  transform: translate(3px, 2px);
}

/* Responsiveness play button en titel */
@media(max-width: 1150px) {
  article a {
    top: 55%;
  }
}

@media(max-width: 855px) {
  article a {
    top: 50%;
    transform: translate(-50%, -25%);
  }

  article h2 {
    top: 20%;
    font-size: 1em;
  }
}

@media(max-width: 500px) {
  article h2 {
    top: 15%;
  }

  article a {
    transform: translate(-50%, -25%) scale(.8);
  }
}

@media(max-width: 390px) {
  article h2 {
    visibility: hidden;
  }
}


/* Button 2 */
section:nth-of-type(3) .button2 {
  width: 580px;
  max-width: 90%;
  margin-bottom: 1.5em;
}

@media(max-width: 432px) {
  section:nth-of-type(3) .button2 {
    font-size: 22px;
  }
}

@media(max-width: 375px) {
  section:nth-of-type(3) .button2 {
    font-size: 23px;
  }
}

@media(max-width: 321px) {
  section:nth-of-type(3) .button2 {
    font-size: 22px;
  }
}




/* ----- TOUR PAGE ----- */

/* ---- Header ---- */
#tourPage header img {
  display: block;
  margin: 1.5em auto 0 auto;
  max-width: 90%;
}

#tourPage header img:last-of-type {
  margin: 0 auto 0 auto;
}



/* ---- Main ---- */

#tourPage h2 {
  border-bottom: solid white 2px;
  padding-bottom: .3em;
  width: 1200px;
  max-width: 90%;
  margin: 1.5em auto 0 auto;
}

/* Zorgt voor meer ruimte tussen de 2 lists */
#tourPage h2:nth-of-type(2) {
  margin-top: 3em;
}

#tourPage main ul {
  width: 1200px;
  max-width: 90%;
  margin: 1em auto 0 auto;
  
  list-style: none;
  font-size: 20px;

  display: flex;
  flex-wrap: wrap;
}

 #tourPage main ul li {
  flex-basis: 33%;
  margin-top: 2em;
  justify-content: space-between;
  text-align: center;
} 

@media(max-width: 860px) {
  #tourPage main ul li {
    flex-basis: 50%;
  }
}

@media(max-width: 450px) {
  #tourPage main ul li {
    flex-basis: 100%;
  }
}

#tourPage li p {
  text-transform: none;
}

#tourPage li button {
  text-transform: capitalize;
  font-family: "Neutra Text Book";
  font-size: 20px;
  font-weight: 900;
  color: black;
  
  background-color: white;
  border-color: transparent;
  border-radius: 1.5em;
  padding: .5em;
  margin-top: .5em;
}

#tourPage li button:hover, #tourPage li button:focus {
  color: white;
  background-color: black;
  cursor: pointer;
}



/* ---- Footer ---- */

footer {
  background-color: #0a0a0a;
  border-top: 3px solid white;
  margin-top: 5em;

  display: flex;
  flex-wrap: wrap;
}

footer ul {
  display: flex;
  list-style: none;
  flex-wrap: wrap;
}

/* Zet tweede ul aan de rechterkant */
footer ul:last-of-type {
  margin-left: auto;
  margin-right: 1.5em;
}

footer ul:last-of-type li+li {
  margin-left: .5em;
}

footer li {
  margin: .5em .2em .5em .2em;
  text-transform: capitalize;
}

footer a {
  font-size: 15px;
  text-decoration: none;
  color: white;
}

footer a:hover, footer a:focus {
  color: #999;
}

/* Responsive footer */
/* Zet eerst de twee uls onder elkaar */
@media(max-width: 1210px) {
    footer ul {
    justify-content: center;
    flex-basis: 100%;
  }

  footer ul:last-of-type {
    margin-right: 0;
  }

  footer ul:last-of-type li {
    margin-top: 0;
  }
}

/* Zet vervolgends content tweede ul onder elkaar */
@media(max-width: 780px) {
  footer ul:last-of-type li {
    flex-basis: 100%;
    text-align: center;
  }

  footer ul:last-of-type li+li {
    margin-left: .2em;
  }
}