* { box-sizing: border-box; }

body {
  font-family: 'Work Sans', sans-serif;
  background-color: #000000;
  color: #BFC0C4;
}

/* For parallax effect */
main {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-perspective: 1px;
  perspective: 1px;
}

/* For parallax effect */
#main-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 53em;
  -webkit-transform: translateZ(0) scale(1);
  transform: translateZ(0) scale(1);
}

section {
  margin: 0 5vw;
}

#main-menu {
  position: fixed;
  top: 0;
  padding: 0 6vw 0.15em 6vw;
  background-color: #000000;
  z-index: 100;
  width: 100vw;
  border-bottom: 1px solid #4a4a4a;
}

#main-menu > ul {
  list-style-type: none;
  display: flex;
  justify-content: space-between;
  font-family: 'Arimo', sans-serif;
  text-transform: uppercase;
  transform: scaleX(1.1);
  letter-spacing: 0.13em;
  word-spacing: 0.5em;
  max-width: 1050px;
}

#main-menu > ul > li {
  display: inline-block;
  max-width: 12em;
  line-height: 1.7em;
}

a {
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1px solid #ffffff;
}

ul > li > a, a:hover {
  border-bottom: none;
}

ul > li > a:hover, ul > li.current > a {
  border-bottom: 2px solid #ffffff !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Arimo', sans-serif;
  text-transform: uppercase;
  transform: scaleX(1.1);
  letter-spacing: 0.13em;
  word-spacing: 1em;
  display: inline-block;
  margin-left: 7vw;
  line-height: 2em;
  color: #ffffff;
}

h1 {
  padding-top: 3em;
  font-size: 2.8em;
  max-width: 16em;
}

#subpage0 > h1 {
  font-size: 3.8em;
  max-width: 11em;
}

p {
  font-size: 0.9em;
  line-height: 2.4em;
  font-weight: 300;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  margin-bottom: 1.6em;
}

em, strong {
  color: #ffffff;
  letter-spacing: 0.03em;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

#media, #behind  {
  margin-right: 4em;
  max-width: 33vw;
  display: flex;
  flex-direction: column;
  align-items: center;

  /* For parallax effect */
  position: absolute;
  padding: 7vw 0 8vw 0;
  top: 0;
  left: 100vw;
  right: 0;
  bottom: 0;
  -webkit-transform: translateZ(-1px) scale(2);
  transform: translateZ(-1px) scale(2);
}

#media {
  padding-top: 10vw;
} 


div.mediablock {
  display: inline-block;
  width: auto;
  max-width: 33vw;
  font-size: 0.76em;
  background-color: #000000;
  border-left: 0.8em solid #000000;
  z-index: 99;
  padding-right: 0.8em;
  margin-bottom: 5em;
}

div.blank + div.mediablock {
  margin-top: 7em;
}

div.blank { border: none !important }
div.blank * { border: none !important }


div.mediablock > h3 {
  display: inline-block;
  font-size: 1.8em;
  line-height: 1.6em;
  margin-left: 1em;
  padding-bottom: 0.5em;
  border-bottom: 1px solid #ffffff;
}

div.mediablock.longtitle > h3 {
  font-size: 1.5em;
  word-spacing: 0.1em;
}

img {
  max-width: 22vw;
  max-height: 26vw;
}

div.landscape, div.landscape > img {
  width: 550px;
  max-width: 33vw;
}

div.portait, div.portait > img {
  height: 550px;
  max-height: 40vw;
  object-fit: cover;
} 

div.landscape.behind, div.landscape.behind img {
  max-width: 58vw;
  max-height: 34vw;
  width: 760px;
  height: auto;
}

div.portrait.behind, div.portrait.behind img {
  max-width: 34vw;
  max-height: 58vw;
  height: 760px;
  width: auto;
}

div.spotify > * {
  right: 0;
  max-width: 300px;
}

.caption {
  line-height: 1.85em;
  padding: 0.4em 0 1.2em 0;
}

div.mediablock.hascaption {
  border-bottom: 1px solid #4a4a4a;
}

div.mediablock.listoflinks > ul {
  list-style-type: none;
  display: flex;
  justify-content: space-between;
  font-family: 'Arimo', sans-serif;
  text-transform: uppercase;
  transform: scaleX(1.1);
  letter-spacing: 0.13em;
  word-spacing: 0.5em;
  flex-direction: column;
  align-items: flex-start;
  font-size: 1.8em;
  line-height: 3em;
}

div.mediablock.listoflinks > .caption {
  margin-left: 4.2vw;
}

div.mediablock.listoflinks > ul > li {
  padding-left: 2vw;
}

div#mediablock2 { margin-top: 24em; }
div#mediablock3 { margin-top: 11em; }

footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 0.8em;
  border-top: 1px solid #4a4a4a;
  padding: 1vw 5vw 5vw 5vw;
  width: 100vw;
}

footer p {
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

footer h2 {
  font-size: 0.8em;
  padding: 0.7em 1.4em 0 0;
  margin-left: 2.8em;
}

a.backtotop {
  font-size: 1.4em;
  text-decoration: none;
  border-bottom: none;
  cursor: pointer;
}


/* RESPONSIVE STYLES */

@media all and (min-width: 1251px) {
  div#mediablock0 img { 
    margin-left: -4em; 
  }
}

@media all and (max-width: 1250px) {
  #media { 
    left: calc(2200px - 70vw);
    margin-top: 7vw;
  }
  div.mediablock.video { width: calc(34vw - 50px); }
  div.mediablock.video > iframe {
    width: calc(34vw - 50px);
    height: calc(24vw - 24px);
  }
}

@media all and (max-width: 1150px) {
  #main-content { 
    width: 70vw; 
    max-width: 70vw;
  }
  #media { 
    left: 100vw;
    right: 0;
    margin-right: -40vw;
    align-items: flex-end; 
  }

  div.mediablock > h3, div.mediablock.longtitle > h3 { font-size: 1.3em; }
  div.mediablock.listoflinks { margin-left: 2vw; }
  div.mediablock.listoflinks > ul { font-size: 1.5em; }
  div.mediablock.listoflinks > ul > li { padding-left: 0; }
  div.mediablock.listoflinks > .caption {  margin-left: 2.3vw; }
  

}

@media all and (max-width: 1000px) {
  h1 {
    padding-top: 4.8vw;
    font-size: 5vw;
    max-width: 70vw;
  }

  #subpage0 > h1 {
    padding-top: calc(11vw + 60px);
    font-size: 6.1vw;
    max-width: 18vw;
  }
  div.mediablock.video { 
    width: 36vw !important;
    margin-right: 5vw;
  }
  div.mediablock.video > iframe {
    width: 36vw;
    height: 22vw;
  }
}

@media all and (max-width: 975px) {
  div.mediablock.spotify iframe { 
    width: calc(34vw - 50px);
  }

  #media {
    margin-top: calc(6vw - 120px);
  }

  div.mediablock.listoflinks { 
    margin-right: calc(6vw - 40px);
  }

  div.mediablock.listoflinks > ul { 
    padding: 0 0 0 1em;
    margin: 0;
  }

  div.mediablock.listoflinks > ul > li {
    padding-right: 0;
  } 

  div.mediablock.listoflinks > .caption {  
    margin-left: 0.6em; 
  }

  div.landscape.behind, div.landscape.behind img {
    max-width: 52vw;
    max-height: 30vw;
  }
  
  div.portrait.behind, div.portrait.behind img {
    max-width: 30vw;
    max-height: 52vw;
  } 

  div:first-of-type.landscape.behind, div:first-of-type.landscape.behind img {
    max-width: 78vw;
    max-height: 45vw;
  }
  
  div:first-of-type.portrait.behind, div:first-of-type.portrait.behind img {
    max-width: 45vw;
    max-height: 78vw;
  } 
}

@media all and (max-width: 850px) {
  div.mediablock > h3, div.mediablock.longtitle > h3 { font-size: 1.1em; width:calc(34vw - 50px);  }
  div.mediablock.video { 
    width: calc(34vw - 20px); 
    margin-right: 0;
  }
  div.mediablock.video > iframe {
    width: calc(34vw - 20px);
    height: calc(24vw - 15px);
  }
  
  div.mediablock.listoflinks { margin-right: 4vw; }
  #main-content { margin-left: -3vw; }
  div.mediablock.longtitle > h3 { font-size: 1em !important; }
  h1 { font-size: 4.5vw; }
  .caption { font-size: 0.95em; }
  footer { padding-left: 2vw }
}

@media all and (max-width: 750px) {
  #main-menu, div.mediablock > h3, div.mediablock.longtitle > h3, div.mediablock.listoflinks > ul { font-size: 2.45vw; }
  #media {
    margin-left: -8vw;
    width: 40vw;
  }
  div.mediablock.spotify iframe { width: calc(37vw - 15px); } 
  div:first-of-type.landscape.behind, div:first-of-type.landscape.behind img {
    max-width: 100vw;
    max-height: 75vw;
  }
  
  div:first-of-type.portrait.behind, div:first-of-type.portrait.behind img {
    max-width: 75vw;
    max-height: 100vw;
  } 

  div.mediablock.listoflinks { 
    margin-right: -3vw;
  }

  footer { flex-direction: column; }
  footer h2 { 
    padding: 0 0 1em 15em;
    margin: -2.5em 0 0 0;
  }
  footer p:not(.copyright) {
    padding: 0 0 0 0;
    margin: 0 0 6em 15em;
  }
}

@media all and (max-width: 620px) {
  
  #main-content, #media {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 97vw;
    max-width: 97vw;
    -webkit-transform: none;
    transform: none;
    margin: 0 1vw 2vw 2vw;
    padding: 0;
  }

  #media {
    width: 97vw;
    max-width: 97vw;
    align-items: center;
    align-content: stretch;
    flex-direction: row;
    flex-wrap: wrap;
  }

  div.mediablock {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    max-width: 92vw;
    width: 92vw;
    font-size: 0.76em;
    background-color: none;
    border-left: none;
    padding-right: 0.8em;
    margin: 0 0 2vw 2vw;
  }

  section {
    margin: 0 5vw 0 1vw;
  }

  div.mediablock > * {
    max-width: 92vw;
    width: 92vw;
  }
  
  div.mediablock.listoflinks {
    border-bottom: 3px solid #ffffff;
    padding-bottom: 5vw;
    margin-bottom: 12vw;
  }
  
  div.mediablock.listoflinks ul { 
    max-width: 80vw;
    width: 80vw;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
  }

  div.mediablock.listoflinks li {
    font-size: 3.2vw;
    margin: 1vw 2vw;
  }

  div.mediablock.listoflinks .caption { display: none; }
  div.mediablock img, div.behind img { display: none; }
  div:first-of-type.behind img { display: inline-block; }

  div.mediablock.spotify > iframe { 
    max-width: 92vw;
    width: 92vw;
    min-width: 70vw;
  } 

  .caption { font-size: 1.1em; margin-top: 1em; }

  div.blank { display: none; }
  div.blank + div.mediablock { margin-top: 0; }
  div.mediablock > h3, div.mediablock.longtitle > h3 { 
    max-width: 83vw;
    width: 83vw;
    font-size: 4.1vw !important; 
    margin-top: 5vw;
    margin-left: 1vw;
    padding-left: 0;
  }
  div.mediablock.video { 
    padding: 0;
    margin: 0;
    width: 90vw !important; 
    max-width: 90vw;
  }
  div.mediablock.video > iframe {
    max-width: 92vw;
    width: 92vw;
    height: 60vw;
  }

  h1 { padding-top: 14vw; }

}

@media all and (max-width: 550px) {
  #main-menu { padding: 0 1vw 0.15em 0; }
  h1 { font-size: 1.66em; max-width: 90vw }
  #subpage0 > h1 { font-size: 1.9em;  }
}

@media all and (max-width: 450px) {
  footer h2 { 
    padding: 0 0 0 5vw;
    margin: 1em 0 0 0;
  }
  footer p:not(.copyright) {
    padding: 0 0 0 5vw;
    margin: 0 0 0 0;
  }
}