/* Breakpoints */

/* Max-width: 360px */
@media (max-width: 360px) {
  .control-button {
    top: 39%;
  }
}

/* Max-width: 480px */
@media (max-width: 480px) {
  .movie-card__thumb img {
    height: 6em;
  }

  .banner-section {
    padding-top: 180px;
    padding-bottom: 20px;
  }

  .banner-section .container {
    height: 100px;
    padding: 0;
  }

  .banner-section .banner-content .title {
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 30px;
  }

  .banner-section .banner-content .sub-title {
    font-weight: 600;
    font-size: 15px;
    position: relative;
  }

  .banner-section .container .row {
    position: absolute;
    bottom: 0;
    width: 100%;
  }

  .header {
    position: static;
  }

  .reel-card__thumb img {
    height: 220px;
  }

  [data-section="most_viewed_item"] {
    display: none;
  }

  .movie-card .movie-card__meta {
    display: none;
  }

  .movie-card__content {
    padding: 2px;
  }

  .movie-card__content a {
    font-size: 15px;
  }

  .star-avatar {
    width: 110px;
    height: 160px;
  }

  .header-search-form.no-wrap {
    margin-bottom: 12px;
  }

  .comment-section.active {
    display: block;
    transform: translateY(0);
    position: absolute !important;
  }

  .control-button {
    top: 39%;
  }
}

/* Detect vertical screens */
@media screen and (orientation: portrait) {
  .video-player {
    width: 100%;
    height: auto !important;
  }

  .plyr__video-wrapper {
    flex-basis: content;
  }
}

/* Small devices (portrait tablets and large phones, 600px and below) */
@media (max-width: 600px) {
  /* No specific styles defined */
  .control-button {
    top: 43%;
  }
}

/* Medium devices (landscape tablets and small desktops, 768px and below) */
@media (max-width: 768px) {
  .control-button {
    top: 44%;
  }
  /* No specific styles defined */
}

/* Large devices (desktops and laptops, 992px and below) */
@media (max-width: 992px) {
  .control-button {
    top: 45.5%;
  }
  /* No specific styles defined */
}

/* Extra large devices (large desktops, 1200px and below) */
@media (max-width: 1200px) {
  .container {
    max-width: 1400px;
  }
}

/* Ultra large devices (wider than 1200px) */
@media (min-width: 1201px) {
  .banner-section .container {
    height: 440px;
    padding: 0 10%;
  }

  .banner-section .container .row {
    position: absolute;
    bottom: 0;
    width: 100%;
  }

  .reel-card__thumb img {
    height: 420px;
  }

  .video-section,
  .search-section {
    padding-left: 10%;
    padding-right: 10%;
  }

  .movie-card__content {
    padding: 5px;
  }

  .header-search-form.no-wrap {
    margin: 0;
  }

  .control-button {
    top: 46%;
  }
}