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

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

.breadcrumb {
  font-size: 14px;
  padding-top: 5px;
  color: #797979 !important;
  float: left;
}

a.backtofilm {
  font-weight: 300;
  font-family: 'Open Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6, .text, span.text-review, span.naam {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    margin: 0;
    color: #ffffff;
}

p {
    font-family: 'Open Sans', sans-serif;
    color: #ffffff;
    font-weight: 300;
}

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

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

a {
    text-decoration: none;
    color: #ffffff;
}
  
li {
    list-style: none;
}

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

@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;
  }
}

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

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

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

.nomargin {
  margin: 0;
}

/* NAV BAR */

.dropdown-item:focus, .dropdown-item:hover {
    background-color: #000000;
}

.container-fluid {
    max-width: 75%;
}

a.nav-link, a.navbar-brand {
    margin-right: 25px;
    color: #ffffff;
}

a.navbar-brand {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
}

a.nav-link, a.dropdown-item {
  font-family: 'Open Sans', sans-serif;
}

.navbar-expand-lg {
    margin-top: 15px;
    margin-bottom: 15px;
}

.navbar-toggler {
    border: 0px solid;
}

/* SLIDESHOW */ 


.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}
  }

/* 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;
}


/* MOVIES */

.movie-container {
    padding-top: 50px;
    width: 75%;
    margin: auto;
}

.movies {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-clip: border-box;
    padding: 500px 50px 25px 50px;
}

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

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

.riceboysleeps {
    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");
}

/* FILM CONTENT */

.film-content {
  max-width: 75%;
  margin: 0 auto;
  padding: 50px 0;
}

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

@media only screen and (max-width: 768px) {
  .aside {
    margin-top: 25px;
  }

  .padding-right {
    padding-right: 0px;
  }

  .padding-left {
    padding-left: 0px;
  }
}

.padding-right {
  padding-right: 25px;
}

.padding-left {
  padding-left: 25px;
}

.text-detailpage {
  width: 75%;
  margin: 0 auto 25px auto;
}

.photos {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-clip: border-box;
}

@media only screen and (max-width: 1200px) {
  .sfeer-ac-1, .sfeer-ac-2, .sfeer-ac-3, .sfeer-ac-4, .sfeer-ac-5, .sfeer-ac-6, .sfeer-b-1, .sfeer-b-2, .sfeer-b-3, .sfeer-b-4, .sfeer-b-5, .sfeer-b-6 {
    padding: 50px;
  }

  .cast-ac-1, .cast-ac-2, .cast-ac-3, .cast-ac-4, .cast-ac-5, .cast-ac-6, .cast-b-1, .cast-b-2, .cast-b-3, .cast-b-4, .cast-b-5, .cast-b-6 {
    padding: 125px 50px;
  }

}

.sfeer-ac-1, .sfeer-ac-2, .sfeer-ac-3, .sfeer-ac-4, .sfeer-ac-5, .sfeer-ac-6, .sfeer-b-1, .sfeer-b-2, .sfeer-b-3, .sfeer-b-4, .sfeer-b-5, .sfeer-b-6 {
  padding: 75px;
}

.cast-ac-1, .cast-ac-2, .cast-ac-3, .cast-ac-4, .cast-ac-5, .cast-ac-6, .cast-b-1, .cast-b-2, .cast-b-3, .cast-b-4, .cast-b-5, .cast-b-6 {
  padding: 150px 75px;
}

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

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

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

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

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

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



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

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

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

.cast-ac-4 {
  background-image: url("../img/cast_asteroidcity/ed.jpg");
}

.cast-ac-5 {
  background-image: url("../img/cast_asteroidcity/tilda.jpg");
}

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



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

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

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

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

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

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



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

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

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

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

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

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


/* REVIEWS */

.reviews {
  padding: 50px 0;
  border-top: 1px solid #202020;
  border-bottom: 1px solid #202020;
}

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

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;
  font-family: 'Montserrat', sans-serif;
}

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

@media only screen and (max-width: 768px) {
  .pt-mobile {
    padding-top: 25px;
  }

}

/* REVIEW */

.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) {
  .review-text {
    width: 100%;
  }

  .beoordeling {
    margin-top: 25px;
  }

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

/* ACTOR PAGE */

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

/* MARGOT ROBBIE */

.mr-one, .mr-two, .mr-three, .mr-four, .mr-five, .mr-six {
  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 {
  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 */

.j-one, .j-two, .j-three, .j-four, .j-five, .j-six {
  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 {
  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 */

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

@media only screen and (max-width: 1150px) {
  .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;
}

/* OVER MIJ */

.cat-one, .cat-two, .cat-three, .cat-four, .cat-five, .cat-six {
  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");
}

.school-one, .school-two, .school-three {
  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");
}




/* FOOTER */

footer {
  padding: 50px 0;
  border-top: 1px solid #202020;
  margin-top: 50px;
}