* {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  font-family: "Lora", serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.1em;
}

a {
  color: #000;
  font-weight: bold;
  text-decoration: none;
}

h1, h2, a {
  color: #990000;
  text-decoration: none;
}

h1.title {
  padding: 1.5em 0 1em 0;
}

p {
  padding-bottom: 2em;
}

p:last-child {
  padding-bottom: 0;
}

img, video {
  width: 100%;
}

small {
  font-size: 0.85em;
}

.normal {
  font-style: normal;
  font-weight: normal;
}

.right {
  float: right;
}

/*set content Width*/
.content {
  width: 55em;
  margin: 0 auto;
  padding: 2em 0;
  clear: both;
}

.smallcontent {
  width: 650px;
  margin: 0 auto;
  padding: 10em 0;
  clear: both;
}

.ps {
  padding: 50px;
}

iframe {
  background: #000;
  margin: 50px 0;
}

header {
  height: 100%;
  width: 100%;
  font-size: 1.1em;
}
header > div.background-fader {
  position: absolute;
  top: 0;
  left: 0;
  background-position: 50% 50%;
  background-size: cover;
  height: 100%;
  width: 100%;
}
header .content {
  padding: 30px 0;
  position: relative;
  width: 80%;
  z-index: 100;
}
header #logo, header nav {
  display: inline-block;
}
header #logo {
  text-align: center;
}
header #logo h1 {
  font-size: 1.3em;
}
header #logo h1::first-letter {
  color: #333399;
}
header #logo h1 span:nth-of-type(2) {
  color: #2e2e7f;
}
header #logo h1 span:nth-of-type(3) {
  color: #8387c1;
}
header #logo h1 span:nth-of-type(4) {
  color: #6c0f0f;
}
header #logo h1 span:nth-of-type(5) {
  color: #a21d21;
}
header #logo h1 span:nth-of-type(6) {
  color: #e37b25;
}
header #logo h1 span:nth-of-type(7) {
  color: #bb6b29;
}
header #logo h1 span:nth-of-type(8) {
  color: #bb8b2d;
}
header #logo h1 span:nth-of-type(9) {
  color: #9362a9;
}
header #logo h1 span:nth-of-type(10) {
  color: #8c3995;
}
header #logo h1 span:nth-of-type(11) {
  color: #c02029;
}
header #logo h1 span:nth-of-type(12) {
  color: #a21e22;
}
header #logo h1 span:nth-of-type(13) {
  color: #cc4a57;
}
header #logo h1 span:nth-of-type(14) {
  color: #bf697d;
}
header #logo h1 span:nth-of-type(15) {
  color: #821b18;
}
header #logo h1 span:nth-of-type(16) {
  color: #c32126;
}
header #logo h1 span:nth-of-type(17) {
  color: #e54325;
}
header #logo h1 span:nth-of-type(18) {
  color: #7f2135;
}
header #logo h1 span:nth-of-type(19) {
  color: #c55454;
}
header #logo small {
  color: #990000;
  text-align: center;
  font-size: 0.8em;
  font-weight: 600;
}
header nav {
  float: right;
  padding-top: 5px;
}
header nav li {
  color: #990000;
  cursor: pointer;
  display: inline-block;
  font-size: 0.8em;
  font-weight: 600;
  margin: 0 0 0 20px;
  text-transform: uppercase;
}
header nav li.active {
  padding-bottom: 2px;
  border-bottom: 1px solid #990000;
}

#lamentations-of-judas-last-film header,
#lamentations-of-judas-last-biography header,
#lamentations-of-judas-contact header {
  height: auto;
}

#lamentations-of-judas-last-biography .header-image {
  background: url(images/Lamentations-of-Judas-biography.jpg) 0% 30%;
  background-size: cover;
  height: 700px;
}
#lamentations-of-judas-last-biography #biography .content {
  padding: 0;
  width: 80%;
}
#lamentations-of-judas-last-biography #biography .caption {
  padding-top: 5px;
}
#lamentations-of-judas-last-biography #biography .caption small:last-child {
  float: right;
}

#lamentations-of-judas-last-film .header-image {
  background: url(images/Lamentations-of-Judas-film.jpg) 100% 60%;
  background-size: cover;
  height: 500px;
}
#lamentations-of-judas-last-film .darkmode .content {
  padding: 2.5em 0;
  font-size: 2em;
  font-weight: bold;
  width: 1100px;
}
#lamentations-of-judas-last-film .logo img {
  width: auto;
}

#lamentations-of-judas-contact .header-image {
  background: url(images/Lamentations-of-Judas-contact-us.jpg) 0% 60%;
  background-size: cover;
  height: 860px;
}

blockquote {
  text-align: center;
}
blockquote.content {
  width: 100%;
}
blockquote.grey {
  background: #ccc;
}
blockquote.grey .content {
  padding: 2.5em 0;
}
blockquote.grey .content h2 {
  font-style: italic;
  font-weight: 600;
  padding-bottom: 0.5em;
}
blockquote.grey .content h3 {
  font-weight: 500;
  font-size: 20px;
}
blockquote.darkmode {
  background: #000;
  color: #fff;
  font-size: 1.8em;
  font-weight: bold;
}
blockquote.red {
  background: #7f2135;
  color: #fff;
  text-align: left;
}
blockquote.quote {
  margin: 0 auto;
  padding: 2em;
  font-size: 1.2em;
}
blockquote.miguel {
  font-size: 7em;
  padding: 0 0 0.2em 0;
}
blockquote.poster .content {
  padding: 0;
  text-align: center;
}
blockquote.poster .content img {
  width: 48%;
}

main section {
  /* Tribute */
}
main section#dear .content {
  padding: 0;
}
main section#dear .header-image, main section .tribute .header-image, main section .film .header-image {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 80px auto;
}
main section#dear .header-image small, main section .tribute .header-image small, main section .film .header-image small {
  display: block;
  text-align: left;
}
main section .brother {
  background: #9ab4a7;
}
main section .brother .smallcontent {
  padding: 150px 0 190px 0;
}
main section .de-volkskrant {
  width: 530px;
}
main section .margje {
  background: #b45b12;
}
main section .lightblue {
  background: #5e92cf;
  color: #fff;
  font-style: italic;
  margin: 5em 0;
  text-align: center;
  font-size: 1.2em;
}
main section .lightblue small {
  font-style: normal;
}
main section .lightblue .content {
  padding: 6em 0;
}
main section .brown {
  background: #c7b299;
}
main section .brown .content {
  padding: 0 0 5em 0;
}
main section .minou-norouzi small {
  font-size: 0.7em;
}
main section .minou-norouzi .smallcontent {
  padding: 10em 0 2em 0;
}
main section .minou-norouzi .smallcontent:last-child {
  padding: 2em 0 10em 0;
}
main section .minou-norouzi .thinred {
  font-size: 1.6em;
  padding: 1.5em 0;
}
main section .thinred {
  background: #c42126;
  color: #fff;
}
main section .gold {
  background: #ba8c2d;
}
main section .pary-el-qalqili video {
  padding: 0 !important;
}
main section .pary-el-qalqili .caption {
  font-weight: 500;
  font-style: italic;
}
main section .pary-el-qalqili p span {
  font-style: italic;
  font-weight: bold;
}
main section .pary-el-qalqili .quote {
  width: auto;
}
main section .hiroishi {
  background: #e4b4b6;
}
main section .hiroishi .smallcontent {
  padding: 0;
  width: 40%;
}
main section .hiroishi .smallcontent img {
  display: block;
  margin-left: auto;
  margin-right: 0;
}
main section .hiroishi video {
  padding: 2em 0;
}
main section .hiroishi .content {
  padding: 0 0 2em 0;
}
main section .dutch-academy .smallcontent {
  width: 500px;
}
main section .darkmode {
  background: #000;
  color: #fff;
}
main section .darkmode .content {
  font-size: 7em;
  padding: 0 0 0.2em 0;
}
main section .miguel a {
  color: #000;
  font-weight: normal;
}
main section .miguel img {
  width: auto;
  display: block;
  margin-left: auto;
  margin-right: 0;
}
main section .orange {
  background: #e37a25;
  margin: 10em 0 2em 0;
}
main section .orange audio {
  padding: 0 0 2em 0;
}
main section .pieter {
  color: #e37b25;
  padding: 150px 0 0 0;
}
main section .pieter h2 {
  color: #e37b25;
  font-size: 5em;
  font-weight: normal;
}
main section .pieter article {
  float: left;
  width: 50%;
}
main section .pieter article:lang(english) {
  float: right;
}
main section .chris-de-koning .content {
  padding: 10em 0;
}
main section .chris-de-koning .content .right {
  padding: 2em 0;
  display: block;
  text-align: right;
  float: none;
}
main section .navyblue {
  background: #2667b4;
  color: #fff;
}
main section .ernest-mannah h3 {
  padding: 60px 0 0 0;
}
main section .grey {
  background: #b7b7b7;
}
main section .Utrechtsedwarsstraat {
  color: #c42126;
  display: grid;
}
main section .Utrechtsedwarsstraat h2 {
  font-size: 2.4em;
}
main section .Utrechtsedwarsstraat h2 small {
  font-size: 0.5em;
}
main section .Utrechtsedwarsstraat .gallery-grid:first-child > div {
  padding: 0 3% 0 0;
  float: left;
  width: 31%;
  font-size: 0.8em;
}
main section .Utrechtsedwarsstraat .gallery-grid:first-child > div.gallery-last-div {
  padding: 0;
}
main section .Utrechtsedwarsstraat .gallery-grid:first-child > div:first-child {
  padding-top: 5em;
}
main section .Utrechtsedwarsstraat .gallery-grid:first-child > div:nth-child(3) {
  padding-top: 50px;
}
main section .Utrechtsedwarsstraat .gallery-grid:nth-child(2) {
  display: block;
  clear: both;
  padding: 3em 0 0 0;
}
main section .Utrechtsedwarsstraat .gallery-grid:nth-child(2) > div {
  float: left;
  padding: 0 3% 0 0;
  width: 20%;
  font-size: 0.8em;
}
main section .Utrechtsedwarsstraat .gallery-grid:nth-child(2) > div:first-child {
  margin-top: -110px;
}
main section .Utrechtsedwarsstraat .gallery-grid:nth-child(2) > div:nth-child(2) {
  margin-top: 50px;
}
main section .Utrechtsedwarsstraat .gallery-grid:nth-child(2) > div:nth-child(3), main section .Utrechtsedwarsstraat .gallery-grid:nth-child(2) > div.gallery-last-div {
  width: 25%;
}
main section .Utrechtsedwarsstraat .gallery-grid:nth-child(2) > div.gallery-last-div {
  padding: 0;
  margin-top: -80px;
}
main section .sandra-kruisbrink {
  margin: 2em 0 0 0;
}
main section .sandra-kruisbrink .content {
  font-style: italic;
}
main section .sandra-kruisbrink .content span {
  font-style: normal;
  font-weight: normal;
}
main section .amsterdam-team {
  color: #a21e22;
}
main section .darkgold {
  background: #a36209;
}
main section .annemarie {
  color: #fff;
  display: grid;
  margin: 10em 0 0 0;
}
main section .annemarie .content {
  padding-top: 0;
}
main section .annemarie-video video {
  display: inline-block;
  width: 60%;
}
main section .annemarie-video div {
  width: 39%;
  text-align: right;
  display: inline-block;
}
main section .annemarie-video div h2 {
  color: #fff;
  padding-bottom: 20px;
  text-transform: uppercase;
  font-weight: normal;
}
main section .annemarie-image {
  margin-top: 80px;
}
main section .annemarie-image img {
  float: right;
  width: 50%;
}
main section h1.title {
  font-size: 4.7em;
  font-weight: 500;
  text-align: center;
}
main section h3 {
  font-size: 1.5em;
  font-style: italic;
}
main section video {
  display: block;
  margin: 0 auto;
}
main section#synopsis .content, main section#director-note .content {
  padding: 0 0 150px 0;
}
main section#cast-crew .crew-image {
  background: url(images/Lamentations-of-Judas-Cast-Crew.jpg) 100% 60%;
  background-size: cover;
  height: 800px;
}
main section#credits blockquote.lightblue {
  background: #b5d9f3;
  color: #cc3333;
  margin: 0;
  font-size: 1em;
  font-style: normal;
}
main section#credits blockquote.lightblue span {
  color: #993333;
}
main section#credits blockquote.lightblue p {
  font-size: 0.9em;
}
main section#credits blockquote.red {
  margin: 0;
  text-align: center;
}
main section#contact .smallcontent {
  padding: 5em 0;
  width: 60%;
}
main section#contact .smallcontent > div {
  width: 49%;
  display: inline-block;
  text-align: center;
}
main section#contact .smallcontent .all-contacts {
  color: #b45b12;
}
main section#contact .smallcontent .all-contacts a {
  color: #b45b12;
}
main section#contact .smallcontent .film-contacts {
  color: #990000;
}
main p.poster-caption {
  font-size: 0.6em;
  padding-left: 10px;
}
main #scrollToTop {
  position: fixed;
  background: #e1e1e1;
  color: #fff;
  font-size: 1.5em;
  right: 20px;
  bottom: 5%;
  padding: 0.3em 0.4em 0 0.4em;
}

@media only screen and (max-width: 1250px) {
  header .content, .content, .smallcontent,
main section .miguel img,
main section .Utrechtsedwarsstraat .gallery-grid > div {
    width: 90%;
  }

  header .content {
    width: 95%;
  }

  header nav li {
    font-size: 0.7em;
  }

  img, video {
    width: 100%;
  }

  main section#synopsis iframe {
    height: 530px;
  }
}
@media only screen and (max-width: 1100px) {
  header #logo, header nav {
    display: block;
    float: none;
    text-align: center;
  }

  header nav {
    padding-top: 1em;
  }

  #lamentations-of-judas-last-biography .header-image {
    background-position: 90% 30%;
  }

  #lamentations-of-judas-last-film .darkmode .content {
    width: 100%;
  }
  #lamentations-of-judas-last-film .header-image {
    background-position: 0;
  }
  #lamentations-of-judas-last-film blockquote.poster .content img {
    width: 80%;
  }
  #lamentations-of-judas-last-film .logo img {
    width: 100%;
  }
  #lamentations-of-judas-last-film #cast-crew .crew-image {
    background-position: 50% 60%;
  }

  #lamentations-of-judas-contact .header-image {
    background-position: 50% 60%;
  }

  main section h1.title {
    font-size: 3em;
  }
  main section .hiroishi .smallcontent {
    width: 50%;
  }
  main section#synopsis iframe {
    height: 470px;
  }
  main section#contact .smallcontent {
    width: 100%;
  }
}
@media only screen and (max-width: 700px) {
  main section .Utrechtsedwarsstraat .gallery-grid:nth-child(2) {
    display: block;
    clear: both;
    padding: 5em 0 0 0;
  }
  main section .hiroishi .smallcontent {
    width: 70%;
  }
  main section#contact .smallcontent div {
    width: 100%;
    padding-bottom: 5em;
  }
  main section .annemarie-video video {
    width: 100%;
  }
  main section .annemarie-video div {
    width: 100%;
  }
  main section#synopsis iframe {
    height: 300px;
  }
}
@media only screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }

  header nav li {
    margin: 0 0 0 10px;
  }

  #lamentations-of-judas-last-biography .header-image {
    background-position: 70% 30%;
  }

  #lamentations-of-judas-last-film blockquote.poster .content img {
    width: 100%;
  }

  #lamentations-of-judas-contact .header-image {
    background-position: 70% 60%;
  }

  #lamentations-of-judas-last-biography #biography .caption small:last-child {
    float: none;
    display: block;
  }

  main section .de-volkskrant {
    width: 90%;
  }
  main section .hiroishi .smallcontent {
    padding: 0;
    width: 90%;
  }
  main section .dutch-academy .smallcontent {
    width: 90%;
  }
  main section .darkmode .content {
    font-size: 5em;
  }
  main section .Utrechtsedwarsstraat .gallery-grid > div {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 0 2em 0 !important;
  }
  main section .Utrechtsedwarsstraat .gallery-grid:nth-child(2) {
    padding: 0;
  }
  main section .annemarie p, main section .annemarie video, main section .annemarie img {
    width: 100%;
  }
  main section .annemarie img {
    padding: 2em 0;
  }
  main section#synopsis iframe {
    height: 230px;
  }
}
/* ==========================================================================
   Print styles
   ========================================================================== */
@media print {
  * {
    display: none;
  }
}

/*# sourceMappingURL=stylesheet.css.map */