@charset "UTF-8";
/* CSS Document */

  body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #000000;
  }

  html {
    scroll-behavior: smooth;
  }
  
  h1, h2, h3, h4, h5, h6, .text, .banner-text, .text-review, .rating, .naam {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
  }

  h1 {
    font-size: 60px;
    color: #fff;
    text-align: center;
    font-weight: 800;
  }

  h2 {
    font-size: 40px;
    color: #ffffff;
    font-weight: 800;
  }

  h3 {
    font-size: 20px;
    color: #ffffff;
    font-weight: 800;
  }

  p.aside-text {
    font-size: 16px;
  }

  p, #myBtn {
    font-family: 'Open Sans', sans-serif;
  }

  p {
    font-size: 18px;
    color: #ffffff;
    font-weight: 300;
    margin: 0;
  }

  /* READ MORE BUTTON */
    #more {
      display: none;
    }

    #myBtn {
      font-size: 14px;
      color: #ffffff;
      font-weight: 300;
      margin: 0;
      padding: 10px 15px;
      background: none;
      border: 1px solid #202020;
      margin-top: 25px;
    }

  @media only screen and (max-width: 1000px) {
    h1 {
      font-size: 40px;
    }

    h2 {
      font-size: 35px;
    }
  }

  @media only screen and (max-width: 600px) {
    h1, h2 {
      font-size: 25px;
    }
  }

  h5 {
    color: #ffffff;
    font-weight: 800;
    font-size: 35px;
    text-align: center;
    text-transform: uppercase;
  }

  h6 {
    color: #fff;
    font-weight: 600;
    font-size: 20px;
  }

  p, a {
    font-family: 'Open Sans', sans-serif;
    color: #ffffff;
  }
  
  a {
    text-decoration: none;
  }
  
  li {
    list-style: none;
  }


  
  /* NAVBAR */

  .top-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: #000000;
    color: #FFF;
    height: 50px;
    padding: 15px 12.5% 15px 15px;
  }
  
  .menu {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  .top-nav .menu li a {
    color: #fff;
  }
  
  .menu > li {
    margin: 0 1rem;
    overflow: hidden;
  }
  
  .menu-button-container {
    display: none;
    height: 100%;
    width: 30px;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  #menu-toggle {
    display: none;
  }
  
  .menu-button,
  .menu-button::before,
  .menu-button::after {
    display: block;
    background-color: #fff;
    position: absolute;
    height: 4px;
    width: 30px;
    transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
    border-radius: 2px;
  }
  
  .menu-button::before {
    content: '';
    margin-top: -8px;
  }
  
  .menu-button::after {
    content: '';
    margin-top: 8px;
  }
  
  #menu-toggle:checked + .menu-button-container .menu-button::before {
    margin-top: 0px;
    transform: rotate(405deg);
  }
  
  #menu-toggle:checked + .menu-button-container .menu-button {
    background: rgba(255, 255, 255, 0);
  }
  
  #menu-toggle:checked + .menu-button-container .menu-button::after {
    margin-top: 0px;
    transform: rotate(-405deg);
  }
  
  @media (max-width: 700px) {
    .menu-button-container {
      display: flex;
    }

    .menu {
      position: absolute;
      top: 0;
      margin-top: 70px;
      left: 0;
      flex-direction: column;
      width: 100%;
      justify-content: center;
      align-items: center;
    }

    #menu-toggle ~ .menu li {
      height: 0;
      margin: 0;
      padding: 0;
      border: 0;
      transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    }
    #menu-toggle:checked ~ .menu li {
  
      height: 2.5em;
      padding: 0.5em;
      transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    }
    
    .menu > li {
      display: flex;
      justify-content: center;
      margin: 0;
      padding: 0.5em 0;
      width: 100%;
      color: white;
      background-color: #000;
    }

    .menu > li:not(:last-child) {
      border-bottom: 1px solid #000;
    }
  }


  /* LOGO */

#logo {
    font-size: 32px;
    padding-left: 15%;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
  }
  
  /* NAVBAR MENU */
  
.menu {
    display: flex;
    font-size: 18px;
  }
  
.menu li:hover {
    transition: 0.3s ease;
  }
  
.menu li {
    padding: 5px 14px;
    transition: 0.3s ease;
  }

nav .menu li a {
  color: #ffffff;
}


/*  SLIDER  */

.mySlides {
  display: none;
}

.img-slides {
  vertical-align: middle;
  filter: brightness(65%);
}

.slideshow-container {
  width: 100%;
  position: relative;
  margin: 0;
  background-color: #000000;
  z-index: -1;
}

/* CAPTION */
.text {
  color: #f2f2f2;
  font-size: 40px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
  font-weight: 800;
}

/* FADE ANIMATION */
.fade {
  animation-name: fade;
  animation-duration: 5s;
}

@keyframes fade {
  0% {opacity: 0}
  15% {opacity: 1}
  85% {opacity: 1}
  100% {opacity: 0}
}

/* SLIDESHOW SMALLER SCREEN TEXT */
@media only screen and (max-width: 700px) {
  .text {font-size: 20px}
}



/* MOVIES */

.movie-container {
  display: grid;
  column-gap: 10px;
  row-gap: 10px;
  justify-items: stretch;
  width: 75%;
  grid-template-columns: 33% 33% 33%;
  margin: 50px auto 50px auto;
}

@media only screen and (max-width: 1500px) {
  .movie-container {
    grid-template-columns: 50% 50%;
  }
}

@media only screen and (max-width: 1000px) {
  .movie-container {
    grid-template-columns: 100%;
  }
}

.movie-container .grid-item {
  padding: 500px 50px 25px 50px;
}

/* MOVIE IMAGES BACKGROUND */

.asteroid, .barbie, .riceboy, .oppenheimer, .roterhimmel, .yuni, .lastnight, .numb, .passages {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-clip: border-box;
}

.asteroid {
  background-image: url("../img/AsteroidCity_scaled_v.jpg");
}

.barbie {
  background-image: url("../img/Barbie_scaled_v.jpg");
}

.riceboy {
  background-image: url("../img/RiceboySleeps_scaled_v.jpg");
}

.oppenheimer {
  background-image: url("../img/Oppenheimer_scaled_v.jpg");
}

.roterhimmel {
  background-image: url("../img/RoterHimmel_scaled_v.jpg");
}

.yuni {
  background-image: url("../img/Yuni_scaled_v.jpg");
}

.lastnight {
  background-image: url("../img/LastNightOfAmore_scaled_v.jpg");
}

.numb {
  background-image: url("../img/Numb_scaled_v.jpg");
}

.passages {
  background-image: url("../img/Passages_scaled_v.jpg");
}

/* FOOTER */

footer {
  display: grid;
  column-gap: 25px;
  justify-items: stretch;
  width: 75%;
  grid-template-columns: 100%;
  padding: 50px 0;
  margin: 0 auto;
  border-top: 1px solid #202020;
}

#query {
  padding: 10px;
  border-radius: 0px;
  font-size: 15px;
  background: #000000;
  border: 1px solid #202020;
  color: #ffffff;
  width: 35%;
}

footer .footer {
  text-align: center;
}


/* BANNER */

.banner {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
}

.film-content {
  display: grid;
  column-gap: 50px;
  row-gap: 50px;
  justify-items: stretch;
  width: 75%;
  grid-template-columns: 65% 35%;
  margin: 50px auto 50px auto;
}

@media only screen and (max-width: 1000px) {
  .film-content {
    grid-template-columns: 100%;
  }
}

.aside {
  border: 1px solid #202020;
  padding: 50px;
}

.pt-25 {
  padding-top: 25px;
}

/* FILM PHOTOS */

.photos {
    display: grid;
    column-gap: 10px;
    row-gap: 10px;
    justify-items: stretch;
    width: 75%;
    grid-template-columns: 16.6% 16.6% 16.6% 16.6% 16.6% 16.6%;
    margin: 0 auto 50px auto;
}

.text-detailpage {
  display: grid;
  justify-items: stretch;
  width: 75%;
  grid-template-columns: 100%;
  margin: 0 auto 25px auto;
}

.b-one, .b-two, .b-three, .b-four, .b-five, .b-six, .a-one, .a-two, .a-three, .a-four, .a-five, .a-six {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 75px;
}

@media only screen and (max-width: 1200px) {
  .b-one, .b-two, .b-three, .b-four, .b-five, .b-six, .a-one, .a-two, .a-three, .a-four, .a-five, .a-six {
    padding: 50px;
  }
}

@media only screen and (max-width: 1000px) {
  .photos {
    grid-template-columns: 33.3% 33.3% 33.3%;
  }
}

@media only screen and (max-width: 500px) {
  .photos {
    grid-template-columns: 50% 50%;
  }
}

.b-one {
  background-image: url("../img/barbie/1.jpeg");
}

.b-two {
  background-image: url("../img/barbie/2.webp");
}

.b-three {
  background-image: url("../img/barbie/3.jpeg");
}

.b-four {
  background-image: url("../img/barbie/4.jpeg");
}

.b-five {
  background-image: url("../img/barbie/5.webp");
}

.b-six {
  background-image: url("../img/barbie/6.jpeg");
}

/* BARBIE CAST PICTURES */

.c-one, .c-two, .c-three, .c-four, .c-five, .c-six, .ac-one, .ac-two, .ac-three, .ac-four, .ac-five, .ac-six {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 150px 75px;
}

@media only screen and (max-width: 1200px) {
  .c-one, .c-two, .c-three, .c-four, .c-five, .c-six, .ac-one, .ac-two, .ac-three, .ac-four, .ac-five, .ac-six {
    padding: 125px 50px;
  }
}

.c-one {
  background-image: url("../img/cast/margot.jpeg");
}

.c-two {
  background-image: url("../img/cast/ryan.jpg");
}

.c-three {
  background-image: url("../img/cast/america.jpg");
}

.c-four {
  background-image: url("../img/cast/kate.jpeg");
}

.c-five {
  background-image: url("../img/cast/michael.jpg");
}

.c-six {
  background-image: url("../img/cast/ariana.jpeg");
}

/* REVIEWS */

span.text-review, span.rating, span.naam, input.review-text, textarea.review-msg {
  color: #ffffff;
}

.reviews {
  display: grid;
  column-gap: 50px;
  row-gap: 25px;
  justify-items: stretch;
  width: 75%;
  grid-template-columns: 50% 50%;
  margin: 0 auto 50px auto;
  padding: 50px 0;
  border-top: 1px solid #202020;
  border-bottom: 1px solid #202020;
}

@media only screen and (max-width: 700px) {
  .reviews {
    grid-template-columns: 100%;
  }

  .pt-mobile {
    padding-top: 25px;
  }

}

span.text-review {
  font-weight: 800;
  font-size: 20px;
}

span.naam {
  font-weight: 800;
  font-size: 20px;
}

span.rating {
  font-weight: 100;
  text-transform: uppercase;
  font-size: 16px;
}

span.plr {
  font-family: 'Montserrat', sans-serif;
  font-weight: 100;
  padding: 0 10px;
  color: #ffffff;
}

/* WRITE A REVIEW */

.writeareview {
  display: grid;
  column-gap: 50px;
  row-gap: 25px;
  justify-items: stretch;
  width: 75%;
  grid-template-columns: 50% 50%;
  margin: 0 auto 50px auto;
}

.beoordeling {
  margin-top: 35px;
}

.review-text, .review-msg {
  font-family: 'Montserrat', sans-serif;
  font-weight: 100;
  font-size: 15px;
  background-color: #000000;
  border: 1px solid #202020;
  padding-left: 15px;
}

.review-msg {
  width: 100%;
  padding-top: 15px;
}

.review-text {
  background-color: #000000;
  border: 1px solid #202020;
  height: 50px;
  width: 85%
}

.review-submit {
  font-size: 14px;
  color: #ffffff;
  font-weight: 300;
  margin: 0;
  padding: 10px 15px;
  background: none;
  border: 1px solid #202020;
  margin-top: 10px;
}

@media only screen and (max-width: 700px) {
  .writeareview {
    grid-template-columns: 100%;
  }

  .review-text {
    width: 100%;
  }

  .beoordeling {
    margin-top: 25px;
  }

  .review-submit {
    margin-top: 25px;
  }
}

/* ASTEROID CITY */

.a-one {
  background-image: url("../img/asteroidcity/1.png");
}

.a-two {
  background-image: url("../img/asteroidcity/2.jpeg");
}

.a-three {
  background-image: url("../img/asteroidcity/3.jpeg");
}

.a-four {
  background-image: url("../img/asteroidcity/4.webp");
}

.a-five {
  background-image: url("../img/asteroidcity/5.jpeg");
}

.a-six {
  background-image: url("../img/asteroidcity/6.png");
}

/* CAST PICTURES ASTEROID CITY */

.ac-one {
  background-image: url("../img/cast_asteroidcity/jason.jpg");
}

.ac-two {
  background-image: url("../img/cast_asteroidcity/grace.jpeg");
}

.ac-three {
  background-image: url("../img/cast_asteroidcity/scarlett.jpg");
}

.ac-four {
  background-image: url("../img/cast_asteroidcity/ed.jpeg");
}

.ac-five {
  background-image: url("../img/cast_asteroidcity/tilda.jpeg");
}

.ac-six {
  background-image: url("../img/cast_asteroidcity/tom.jpg");
}

/* ACTOR DETAIL PAGE */ 
/* MARGOT ROBBIE */

.acteur-content {
  display: grid;
  column-gap: 50px;
  row-gap: 50px;
  justify-items: stretch;
  width: 75%;
  grid-template-columns: 30% 70%;
  margin: 50px auto 50px auto;
}

.actor-detail {
  padding: 25px;
  border-right: 1px solid #202020;
  border-left: 1px solid #202020;
  border-bottom: 1px solid #202020;
}

.mr-one, .mr-two, .mr-three, .mr-four, .mr-five, .mr-six {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 75px;
}

@media only screen and (max-width: 1200px) {
  .mr-one, .mr-two, .mr-three, .mr-four, .mr-five, .mr-six {
    padding: 50px;
  }
}

.mr-one {
  background-image: url("../img/margotrobbie_detailpage/pic1.webp");
}

.mr-two {
  background-image: url("../img/margotrobbie_detailpage/pic2.jpeg");
}

.mr-three {
  background-image: url("../img/margotrobbie_detailpage/pic3.jpeg");
}

.mr-four {
  background-image: url("../img/margotrobbie_detailpage/pic4.webp");
}

.mr-five {
  background-image: url("../img/margotrobbie_detailpage/pic5.jpeg");
}

.mr-six {
  background-image: url("../img/margotrobbie_detailpage/pic6.jpeg");
}

.mrf-one, .mrf-two, .mrf-three, .mrf-four, .mrf-five, .mrf-six {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 150px 75px;
}

@media only screen and (max-width: 1200px) {
  .mrf-one, .mrf-two, .mrf-three, .mrf-four, .mrf-five, .mrf-six {
    padding: 125px 50px;
  }
}

.mrf-one {
  background-image: url("../img/margotrobbie_detailpage/film1.jpg");
}

.mrf-two {
  background-image: url("../img/margotrobbie_detailpage/film2.jpg");
}

.mrf-three {
  background-image: url("../img/margotrobbie_detailpage/film3.jpeg");
}

.mrf-four {
  background-image: url("../img/margotrobbie_detailpage/film4.jpg");
}

.mrf-five {
  background-image: url("../img/margotrobbie_detailpage/film5.jpeg");
}

.mrf-six {
  background-image: url("../img/margotrobbie_detailpage/film6.jpg");
}

/* JASON SCHWARTZMAN */

.j-one, .j-two, .j-three, .j-four, .j-five, .j-six {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 75px;
}

@media only screen and (max-width: 1200px) {
  .j-one, .j-two, .j-three, .j-four, .j-five, .j-six {
    padding: 50px;
  }
}

.j-one {
  background-image: url("../img/jason_detailpage/pic1.webp");
}

.j-two {
  background-image: url("../img/jason_detailpage/pic2.jpeg");
}

.j-three {
  background-image: url("../img/jason_detailpage/pic3.jpg");
}

.j-four {
  background-image: url("../img/jason_detailpage/pic4.jpg");
}

.j-five {
  background-image: url("../img/jason_detailpage/pic5.jpeg");
}

.j-six {
  background-image: url("../img/jason_detailpage/pic6.jpg");
}


.jf-one, .jf-two, .jf-three, .jf-four, .jf-five, .jf-six {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 150px 75px;
}

@media only screen and (max-width: 1200px) {
  .jf-one, .jf-two, .jf-three, .jf-four, .jf-five, .jf-six {
    padding: 125px 50px;
  }
}

.jf-one {
  background-image: url("../img/jason_detailpage/film1.jpg");
}

.jf-two {
  background-image: url("../img/jason_detailpage/film2.jpg");
}

.jf-three {
  background-image: url("../img/jason_detailpage/film3.jpg");
}

.jf-four {
  background-image: url("../img/jason_detailpage/film4.jpg");
}

.jf-five {
  background-image: url("../img/jason_detailpage/film5.webp");
}

.jf-six {
  background-image: url("../img/jason_detailpage/film6.jpg");
}

/* FILM INPUT */

.film-input {
  display: grid;
  column-gap: 50px;
  row-gap: 25px;
  justify-items: stretch;
  width: 75%;
  grid-template-columns: 20% 60% 20%;
  margin: 50px auto 50px auto;
}

.pb-25 {
  padding-bottom: 50px
}

@media only screen and (max-width: 1150px) {
  .film-input {
    grid-template-columns: 100%;
  }

  .pb-25 {
    padding-bottom: 25px;
  }
}

.filminput-text {
  width: 100%;
  font-family: 'Montserrat', sans-serif;
  font-weight: 100;
  font-size: 15px;
  background-color: #000000;
  border: 1px solid #202020;
  padding: 10px 0 10px 15px;
}

.mb-20 {
  margin-bottom: 20px;
}

/* ABOUT ME */ 

.school-photos {
  display: grid;
  column-gap: 10px;
  row-gap: 10px;
  justify-items: stretch;
  width: 75%;
  grid-template-columns: 33.3% 33.3% 33.3%;
  margin: 0 auto 50px auto;
}

.school-one, .school-two, .school-three {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 150px 75px;
}

@media only screen and (max-width: 700px) {
  .school-one, .school-two, .school-three {
    padding: 125px 40px;
  }
}

@media only screen and (max-width: 500px) {
  .school-one, .school-two, .school-three {
    padding: 125px 50px;
  }

  .school-photos {
    grid-template-columns: 100%;
  }
}

.school-one {
  background-image: url("../img/aboutme/school1.jpg");
}

.school-two {
  background-image: url("../img/aboutme/school2.jpg");
}

.school-three {
  background-image: url("../img/aboutme/school3.jpeg");
}

.cat-one, .cat-two, .cat-three, .cat-four, .cat-five, .cat-six {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 150px 75px;
}

@media only screen and (max-width: 1200px) {
  .cat-one, .cat-two, .cat-three, .cat-four, .cat-five, .cat-six {
    padding: 125px 50px;
  }
}

.cat-one {
  background-image: url("../img/aboutme/pic1.JPG");
}

.cat-two {
  background-image: url("../img/aboutme/pic2.jpg");
}

.cat-three {
  background-image: url("../img/aboutme/pic3.jpg");
}

.cat-four {
  background-image: url("../img/aboutme/pic4.jpg");
}

.cat-five {
  background-image: url("../img/aboutme/pic5.JPG");
}

.cat-six {
  background-image: url("../img/aboutme/pic6.JPG");
}