@import url("http://fonts.cdnfonts.com/css/netflix-sans");
@import url("http://fonts.cdnfonts.com/css/netflix-sans");
html {
  font-size: 100%;
  box-sizing: border-box;
  height: 100%;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  background-color: black;
  color: white;
  line-height: 1.3;
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: "Netflix Sans", sans-serif;
  width: 100%;
}

body header {
  height: 150vw;
  background-image: url("https://pyxis.nymag.com/v1/imgs/9d6/af9/9729d1d29d1a6cae70558b80f09c81c0a5-11-stranger-things-s2.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
}
body header .header-container .header-mobile {
  margin: 0px 30px;
  display: flex;
  justify-content: space-between;
}
body header .header-container .header-mobile .logo img {
  padding-top: 15px;
  width: 35px;
}
body header .header-container .header-mobile h4 {
  font-size: 15px;
  font-weight: 400;
}
body header .header-detail {
  margin: 140vw 50px 0 50px;
  display: flex;
  justify-content: space-between;
}
body header .header-detail p {
  margin: 0;
  font-size: 10px;
}
body header .header-detail .my-List {
  text-align: center;
}
body header .header-detail .my-List .fa-plus {
  margin-bottom: 10px;
  text-align: center;
  font-weight: 300;
  font-size: 20px;
}
body header .header-detail .play {
  height: 40px;
  display: inline-flex;
  background-color: white;
  color: black;
  padding: 5px 20px 10px 20px;
  border-radius: 5px;
}
body header .header-detail .play p {
  font-size: 15px;
  font-weight: 500;
  margin-top: 5px;
}
body header .header-detail .play .fa-play {
  font-size: 20px;
  margin: 5px 10px 0 0;
}
body header .header-detail .info {
  text-align: center;
}
body header .header-detail .info .fa-info-circle {
  margin-bottom: 10px;
  font-size: 20px;
}
body header .header-desktop {
  display: none;
  justify-content: space-between;
  background-color: black;
  width: 100%;
  padding: 20px 30px;
  position: fixed;
  z-index: 9999;
}
body header .header-desktop h4 {
  font-size: 1vw;
  font-weight: 500;
  margin: 5px 20px 0 0;
}
body header .header-desktop .logo {
  margin-right: 20px;
}
body header .header-desktop .logo img {
  width: 5vw;
}
body header .header-desktop img {
  width: 30px;
  height: 30px;
}
body header .header-desktop .fas {
  margin-right: 20px;
  margin-top: 7px;
}
body header .header-desktop .left {
  display: flex;
}
body header .header-desktop .right {
  display: flex;
}
body header .about-movie {
  position: absolute;
  top: 40%;
  left: 10%;
  display: none;
}
body header .about-movie h1 {
  font-size: 50px;
}
body header .about-movie .component {
  display: flex;
}
body header .about-movie .component .play {
  height: 40px;
  display: inline-flex;
  margin-right: 20px;
  background-color: white;
  color: black;
  padding: 5px 20px 10px 20px;
  border-radius: 5px;
}
body header .about-movie .component .play p {
  font-size: 15px;
  font-weight: 500;
  margin-top: 5px;
}
body header .about-movie .component .play .fa-play {
  font-size: 20px;
  margin: 5px 10px 0 0;
}
body header .about-movie .component .info {
  text-align: center;
  height: 40px;
  display: inline-flex;
  background-color: darkgray;
  color: #fff;
  padding: 5px 20px 10px 20px;
  border-radius: 5px;
}
body header .about-movie .component .info p {
  font-size: 15px;
  font-weight: 500;
  margin-top: 5px;
}
body header .about-movie .component .info .fa-info-circle {
  font-size: 20px;
  margin: 5px 10px 0 0;
}
body section {
  margin-bottom: 100px;
}
body section .menu-bottom {
  position: fixed;
  bottom: 0.1px;
  width: 100%;
  scroll-margin-top: 5rem;
  padding: 5px 30px;
  background-color: black;
  z-index: 9999;
}
body section .menu-bottom .modal {
  display: flex;
  justify-content: space-between;
  text-align: center;
  overflow: auto;
}
body section .menu-bottom .modal .fas {
  font-size: 15px;
  font-weight: 300;
}
body section .menu-bottom .modal p {
  font-size: 10px;
  margin-top: 5px;
}
body article {
  margin-left: 8px;
}
body article .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: black;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
body article .swiper-slide img {
  display: block;
  height: 50vw;
  object-fit: cover;
}
body article .backdrop img {
  height: 20vw;
}
body #last {
  height: 300px;
}

@media all and (min-width: 1020px) {
  body header {
    background-image: url("https://occ-0-2794-2219.1.nflxso.net/dnm/api/v6/6AYY37jfdO6hpXcMjf9Yu5cnmO0/AAAABXq_vQJf0hxGmUQqHnb8nXwpz8iEmzC2upISv1MYxfE2kXO-IouDyL-TuAAkSqEn-iPui5s3ax8In2XqquIQkQ7L7csL.jpg?r=a42");
    background-size: 100%;
    height: 650px;
  }
  body header .header-container .header-mobile {
    display: none;
  }
  body header .header-detail {
    display: none;
  }
  body header .header-desktop {
    display: flex;
  }
  body header .header-desktop h4 {
    margin-top: 2.5%;
    font-size: 1.5vw;
  }
  body header .header-desktop .right {
    margin-top: 1%;
  }
  body header .header-desktop .fas {
    margin-top: 5%;
    font-size: 1.5vw;
  }
  body header .header-desktop .logo img {
    width: 10vw;
    height: 5vw;
  }
  body header .header-desktop img {
    margin-top: 1%;
  }
  body header .about-movie {
    display: block;
  }
  body section {
    display: none;
  }
  body article .swiper-slide img {
    height: 30vw;
  }
  body article .swiper-slide {
    flex-shrink: 100;
  }
  body article .backdrop img {
    height: 15vw;
  }
}