@charset "UTF-8";
/*abstracts*/
/*
0 - 320px:      Smaller mobile phones
320 - 360px:    Medium mobile phones
360 - 480px:    Biger mobile phones
480 - 768px:    Tablet portrait
768 - 1024px:   Tablet landscape
[1200 - 1800] is where our normal styles apply
1800px + :      Big desktop

$breakpoint arguement choices:
- s-phone
- m-phone
- b-phone
- tab-port
- tab-land
- big-desktop

ORDER: Base + typography > general layout + grid > page layout > components

1em = 16px
*/
/*
Think of variables as a way to store information that you want to reuse throughout your stylesheet. 
You can store things like colors, font stacks, or any CSS value you think you'll want to reuse. 
Sass uses the $ symbol to make something a variable. Here's an example:

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}
*/
/*base*/
/*div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation: myfirst 5s linear 2s infinite alternate;
  }
  */
@keyframes example {
  0% {
    background-color: red;
    left: 0px;
    top: 0px; }
  25% {
    background-color: yellow;
    left: 200px;
    top: 0px; }
  50% {
    background-color: blue;
    left: 200px;
    top: 200px; }
  75% {
    background-color: green;
    left: 0px;
    top: 200px; }
  100% {
    background-color: red;
    left: 0px;
    top: 0px; } }

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
  list-style-type: none; }

html {
  font-size: 62.5% !important;
  color: #ffffff;
  font-family: "Roboto", sans-serif;
  text-shadow: 1px 1px #000;
  margin: 0 !important; }
  @media only screen and (max-width: 20em) {
    html {
      font-size: 37.5%; } }
  @media only screen and (max-width: 64em) {
    html {
      font-size: 56.25%; } }
  @media only screen and (min-width: 112.5em) {
    html {
      font-size: 75%; } }
  html body {
    box-sizing: border-box;
    background-color: #000;
    width: 100%; }
    html body .container {
      padding: 7rem 5rem;
      width: 100%; }
      html body .container:first-child {
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0; }
      @media only screen and (max-width: 64em) {
        html body .container {
          padding: 7rem 0; } }
    html body a {
      text-decoration: none;
      color: #ffffff;
      cursor: pointer; }
    html body article:not(:first-child) {
      margin-bottom: 1rem; }

main {
  min-height: 650px !important; }

/*“Web typography” refers to the appearance of all the text on your website. It includes basic 
CSS text properties like what font to use and whether it should be italic or not, but typography 
is much more than that. It’s about the space between and around letters, words, and lines. It’s 
the size of different runs of text in relation to one another, and the history behind each font family.

https://www.internetingishard.com/html-and-css/web-typography/
*/
/* !!!!___ Use % rather than px for all layout-related lenghts (including pictures) ___!!!! */
.logo_title p {
  font-weight: 400;
  color: #ffa500;
  text-align: end;
  margin: 0;
  font-size: 2rem;
  letter-spacing: -1px; }
     @media only screen and (max-width: 30em) {
         .logo_title p {
             font-size: 1.6rem;
         }
     }

h3 {
  font-weight: 400;
  color: #d4d4d4;
  font-size: 1.5rem; }

p {
  font-size: 1.3rem;
  color: #d4d4d4; }

.background__info p {
  font-size: 1.6rem; }
   @media only screen and (max-width: 30em) {
       .background__info p {
  font-size: 1.5rem; }
   }

.header h2, .header .main-header {
  font-size: 2.4rem;
  letter-spacing: 1.3px;
  font-weight: 400;
  color: #bbb;
  text-transform: uppercase; }
  @media only screen and (max-width: 30em) {
    .header h2, .header .main-header {
      font-size: 2.3rem; } }

.grid__item--info h3 {
  text-align: center; }
  @media only screen and (max-width: 30em) {
    .grid__item--info h3 {
      font-size: 1.4rem; } }
  @media only screen and (max-width: 22.5em) {
    .grid__item--info h3 {
      font-size: 1.2rem; } }

.grid__item--info li {
  font-size: 1.4rem; }
  @media only screen and (max-width: 30em) {
    .grid__item--info li {
      font-size: 1.2rem; } }
  @media only screen and (max-width: 22.5em) {
    .grid__item--info li {
      font-size: 1.1rem; } }

.grid__item--info .imdb {
  font-size: 1.7rem;
  min-width: 70px;
  text-shadow: none;
  padding: 0 10px;}
  @media only screen and (max-width: 30em) {
    .grid__item--info .imdb {
      font-size: 1.4rem; } }
  @media only screen and (max-width: 22.5em) {
    .grid__item--info .imdb {
      font-size: 1.2rem; } }

.grid__item--info span {
  font-size: 1.5rem; }
  @media only screen and (max-width: 30em) {
    .grid__item--info span {
      font-size: 1.4rem; } }
  @media only screen and (max-width: 22.5em) {
    .grid__item--info span {
      font-size: 1.2rem; } }

.item__info {
  letter-spacing: 0.3px; }

.item__date {
  font-size: 1.6rem;
  background-image: url("/images/container-bg.jpg");
  background-size: fit;
  background-repeat: no-repeat;
  background-position: center center; }

.filter__menu--button {
  font-size: 1.8rem;
  font-weight: bold;
  color: #d4d4d4; }

/*----------------------------filter---------------------------------------*/
/* -----------------------------the-movies ------------------------------------ */
.the-movie .flex-box .single-page-movie-title {
  font-size: 8rem;
  letter-spacing: 0.4rem;
  text-shadow: #aca8a8b0 0.1rem 0.1rem;
  text-transform: uppercase;
  margin: 0;
  padding-bottom: 10px; }
  @media only screen and (min-width: 53.6em) {
    .the-movie .flex-box .single-page-movie-title {
      font-size: 6rem; } }
  @media only screen and (max-width: 64em) {
    .the-movie .flex-box .single-page-movie-title {
      font-size: 4rem; } }
  @media only screen and (max-width: 30em) {
    .the-movie .flex-box .single-page-movie-title {
      font-size: 3rem; } }

.the-movie .flex-box__item--info p,
.the-movie .flex-box__item--info span {
  font-size: 1.8rem; }
  @media only screen and (max-width: 30em) {
    .the-movie .flex-box__item--info p,
    .the-movie .flex-box__item--info span {
      font-size: 1.6rem; } }
  @media only screen and (max-width: 20em) {
    .the-movie .flex-box__item--info p,
    .the-movie .flex-box__item--info span {
      font-size: 1.5rem; } }

.the-movie .flex-box__item--info p {
  font-weight: bold; }

.the-movie .flex-box__item--description p {
  font-size: 1.6rem;
  text-shadow: #000 0.1rem 0.1rem; }

.the-movie .flex-box__item--cast ul li {
  font-size: 1.4rem; }

.the-movie .flex-box__item--functions button,
.the-movie .flex-box__item--functions a {
  font-size: 150%;
  color: #000;
  font-weight: bold;
  text-shadow: none; }
  @media only screen and (max-width: 30em) {
    .the-movie .flex-box__item--functions button,
    .the-movie .flex-box__item--functions a {
      font-size: 130%; } }
  .the-movie .flex-box__item--functions button:hover,
  .the-movie .flex-box__item--functions a:hover {
    text-shadow: #2c2c2cb0 0.1rem 0.1rem; }

/* -----------------------------register ------------------------------------ */
.register .flex-box__item:nth-child(2) {
  font-size: 150%; }
  .register .flex-box__item:nth-child(2) h3 {
    font-size: 150%; }

/* -----------------------------register ------------------------------------ */
/*Utility classes are meant to do only one thing, and do it well. They are designed to be simple,
 composable and re-usable, allowing for easy and fast development. While a CSS system based on utility 
 classes alone is not desirable, having a set of utility classes that allow you to quickly put together 
 templates is great.

 https://blog.mariano.io/css-utility-classes-how-to-use-them-effectively-d61ee00dad2d
 
Common Use Cases
*I find utility classes really helpful for:
*Margin/padding
*Text (colors, size, styles)
*Common Background Colors
*Hiding/Showing stuff
*Display (block, inline-block)

Naming utility classes
To separate utility classes from component classes, it’s good to namespace them. I use the .u- namespace.
You can also shorthand most properties for faster coding. Here are a couple I use:
*p/m for margin/padding
*t/r/l/b for top/right/left/bottom
*v/h for vertical/horizontal
*bg for background
*/
.no-padding {
  padding: 0 !important; }

.width-50 {
  width: 50%; }
  @media only screen and (max-width: 30em) {
    .width-50 {
      width: 100%; } }

.width-100 {
  width: 100%; }

.image-size, .image-size img {
  height: 23.6rem;
  width: 17rem; }
  @media only screen and (max-width: 64em) {
    .image-size, .image-size img {
      height: 22.6rem;
      width: 15.6rem; } }
  @media only screen and (max-width: 48em) {
    .image-size, .image-size img {
      width: 14rem; } }
  @media only screen and (max-width: 30em) {
    .image-size, .image-size img {
      height: 6rem;
      width: 8.1rem; } }

.flex-box {
  background-color: #0f1010; }

.a-center {
  align-items: center; }

.country-flag {
  background-size: cover;
  background-position: center center; }

.eng {
  background-image: url("https://paulcivilka.com/moviesclub/wp-content/uploads/2024/07/flag-gb.jpg"); }

.en {
  background-image: url("https://paulcivilka.com/moviesclub/wp-content/uploads/2024/07/flag-gb.jpg"); }

.fra {
  background-image: url("https://paulcivilka.com/moviesclub/wp-content/uploads/2024/07/flag-fr.jpg"); }

.spa {
  background-image: url("https://paulcivilka.com/moviesclub/wp-content/uploads/2024/07/flag-sp.jpg"); }

.fr {
  background-image: url("https://paulcivilka.com/moviesclub/wp-content/uploads/2024/07/flag-fr.jpg"); }

.sp {
  background-image: url("https://paulcivilka.com/moviesclub/wp-content/uploads/2024/07/flag-sp.jpg"); }

.grid__item {
  background-image: url("../images/container-bg.jpg");
  background-size: fit;
  background-repeat: no-repeat;
  background-position: center center; }

.invisible {
  visibility: hidden !important; }

.disabled-link {
  pointer-events: none;
  cursor: default; }

.page-title {
  height: 4rem;
  width: 100%;
  background-color: #0f1010;
  justify-content: center;
  align-items: center;
  padding: 3.5rem 0; }
  .page-title h1 {
    font-size: 250%;
    font-weight: 400;
    letter-spacing: 0.1rem; }

.overflow-hidden {
  overflow: hidden; }
  @media only screen and (max-width: 30em) {
    .overflow-hidden {
      overflow: auto;
      padding-bottom: 20rem; } }

.post-paginaition {
  margin-top: 25px; }

.pagination {
  width: 100%;
  justify-content: center;
  align-content: center;
  padding-top: 1.5rem;
  text-align: center; }
  .pagination a {
    font-size: 1.7rem;
    background-color: #202020d5;
    margin: 0 0.3rem;
    padding: 1rem; }
    .pagination a:hover {
      color: #ffa500;
      background-color: #aca8a8b0; }
    @media only screen and (max-width: 30em) {
      .pagination a:nth-child(7), .pagination a:nth-child(8), .pagination a:nth-child(9), .pagination a:nth-child(10), .pagination a:nth-child(11) {
        display: none; } }
  .pagination span {
    font-size: 1.7rem;
    justify-content: center;
    align-items: center; }

/*components*/
button {
  cursor: pointer; }

.btn {
  width: 8.3rem;
  color: #ffffff;
  font-size: 1.1rem;
  text-align: center;
  margin-left: 0.5rem; }
  .btn__green {
    background-color: #4caf5080;
    cursor: pointer; }
    .btn__green:hover {
      background-color: #65d86980; }
    @media only screen and (max-width: 30em) {
      .btn__green {
        width: 3rem; } }
  .btn__blue {
    background-color: #01579b; }
  .btn__transparent {
    cursor: pointer;
    font-size: 1.3rem;
    background-color: #2c2c2cb0; }
    .btn__transparent:hover {
      color: #bbb; }

.btn-login {
  background-color: #58b658;
  font-size: 1.7rem;
  padding: 0.8rem 3.5rem;
  border-radius: 0.7rem;
  transition: 0.2s; }
  @media only screen and (max-width: 30em) {
    .btn-login {
      padding: 0.7rem 3rem; } }
  @media only screen and (max-width: 22.5em) {
    .btn-login {
      padding: 0.5rem 2.5rem; } }
  .btn-login:hover {
    background-color: #5ca05c; }

form .input-form {
  padding-top: 2rem;
  width: 400px;
  margin-left: auto;
  margin-right: auto;
  /* Set a style for all buttons */ }
  @media only screen and (max-width: 30em) {
    form .input-form {
      width: 80vw; } }
  form .input-form label {
    display: block;
    font-size: 1.5rem;
    width: 100%; }
  form .input-form a {
    color: #aca8a8b0; }
    form .input-form a:hover {
      color: #ffa500; }
  form .input-form input[type="email"],
  form .input-form input[type="password"] {
    width: 100%;
    padding: 1rem 2rem;
    margin: 0.8rem 0;
    display: inline-block;
    border: 0.1rem solid #ccc;
    box-sizing: border-box;
    border-radius: 0.5rem;
    font-size: 150%; }
    form .input-form input[type="email"]:focus,
    form .input-form input[type="password"]:focus {
      outline: none; }
  form .input-form button {
    background-color: #58b658;
    color: white;
    padding: 1rem 2rem;
    margin: 0.8rem 0;
    border: none;
    cursor: pointer;
    width: 100%;
    border-radius: 0.5rem;
    font-size: 180%;
    letter-spacing: 0.2rem;
    text-shadow: #000 0.1rem 0.1rem; }
  form .input-form button:hover {
    opacity: 0.8; }

/* The Modal (background) */
.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 3;
  /* Sit on top */
  padding-top: 5rem;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: black;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
  /* Modal Content */ }
  .modal .modal-content {
    position: relative;
    background-color: #ffffff;
    margin: auto;
    padding: 0;
    border: 0.1rem solid #888;
    -webkit-box-shadow: -0.3px 0.6rem 3.5rem 0.9rem rgba(224, 32, 32, 0.75);
    -moz-box-shadow: -0.3px 0.6rem 3.5rem 0.9rem rgba(224, 32, 32, 0.75);
    box-shadow: -0.3px 0.6rem 3.5rem 0.9rem rgba(224, 32, 32, 0.75) !important;
    width: 50%;
    height: 45rem;
    box-shadow: 0 0.4rem 0.8rem 0 rgba(0, 0, 0, 0.2), 0 0.6rem 2rem 0 rgba(0, 0, 0, 0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
    /* Add Animation */
    /* The Close Button */ }
    @media only screen and (max-width: 64em) {
      .modal .modal-content {
        width: 70%;
        height: 60rem; } }
    @media only screen and (max-width: 30em) {
      .modal .modal-content {
        width: 99%;
        height: 50rem; } }

@-webkit-keyframes animatetop {
  from {
    top: -30rem;
    opacity: 0; }
  to {
    top: 0;
    opacity: 1; } }

@keyframes animatetop {
  from {
    top: -30rem;
    opacity: 0; }
  to {
    top: 0;
    opacity: 1; } }
    .modal .modal-content .close {
      color: red;
      position: absolute;
      right: 2rem;
      top: 0.2rem;
      font-size: 2.8rem;
      font-weight: bold; }
      .modal .modal-content .close:hover, .modal .modal-content .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer; }
    .modal .modal-content .modal-header {
      height: 4rem;
      padding-top: 1rem;
      background-color: #58b658;
      text-transform: uppercase;
      text-shadow: #000 0.1rem 0.1rem;
      text-align: center; }
      @media only screen and (max-width: 30em) {
        .modal .modal-content .modal-header {
          height: 7rem; } }
      .modal .modal-content .modal-header h2 {
        font-size: 200%;
        color: white;
        letter-spacing: 0.1rem; }
        @media only screen and (max-width: 30em) {
          .modal .modal-content .modal-header h2 {
            width: 80%;
            margin-left: auto;
            margin-right: auto;
            padding-top: 1rem;
            padding-bottom: 0.5rem; } }
    .modal .modal-content .modal-body {
      padding: 0.2rem 1.6rem; }
      @media only screen and (max-width: 64em) {
        .modal .modal-content .modal-body {
          flex-wrap: wrap;
          flex-direction: column; } }
      .modal .modal-content .modal-body img {
        width: fit;
        overflow: hidden; }
        @media only screen and (max-width: 64em) {
          .modal .modal-content .modal-body img {
            margin-left: auto;
            margin-right: auto; } }
        @media only screen and (max-width: 30em) {
          .modal .modal-content .modal-body img {
            height: 150px; } }
      .modal .modal-content .modal-body .input-form label {
        color: #000;
        text-shadow: none; }
        .modal .modal-content .modal-body .input-form label a {
          color: #2c2c2cb0;
          margin-bottom: 10px; }
          .modal .modal-content .modal-body .input-form label a:hover {
            color: #ffa500; }
      .modal .modal-content .modal-body .input-form .end {
        justify-content: flex-end; }

.Modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9000;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  cursor: pointer; }

.Modal-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%; }
  .Modal-box > .video-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100vw;
    max-width: 177.78vh;
    height: 56.25vw;
    max-height: 100vh;
    margin: auto;
    overflow: hidden; }
    .Modal-box > .video-container > iframe,
    .Modal-box > .video-container > object,
    .Modal-box > .video-container > embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }

.Modal-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 9001;
  padding: 0.5rem 1rem;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  text-transform: uppercase;
  background-color: rgba(0, 0, 0, 0.85); }

.Modal-cancel-overflow {
  overflow: hidden; }

@media only screen and (max-width: 30em) {
  #myModal2 {
    padding-top: 10rem; } }

@media only screen and (max-width: 30em) {
  #myModal2 .modal-content {
    height: 25rem;
    width: 96vw; } }

/*layout*/
#more-button {
  font-size: 1.4rem;
  display: flex;
  justify-content: center;
  align-self: center;
  border-style: none;
  color: #ffffff;
  background-color: #2c2c2cb0;
  margin: 0 2rem 0 0;
  height: 40px;
  width: 80px;
  padding: 10px;
  border-radius: 0.5rem;
  transition: 0.4s;
  cursor: pointer; }
  #more-button:hover {
    background-color: #aca8a8b0;
    background-color: #aca8a8b0;
    color: white; }
  #more-button:focus {
    outline: none; }

#grow {
  height: 0;
  overflow: hidden;
  transition: height 0.4s; }

#filter {
  display: flex;
  justify-content: center;
  background-color: #202020d5;
  padding: 0.4rem 0;
  transition: 0.3s; }
  #filter .filter__menu {
    display: flex;
    justify-content: center; }
  #filter .filter__search {
    display: flex;
    justify-content: center;
    align-items: center; }
    #filter .filter__search input {
      width: 40vw;
      height: 34px;
      padding: 10px;
      margin: 0.8rem 0;
      border: none;
      outline: none;
      font-size: 16px;
      border-radius: 5px 0 0 5px;}
      @media only screen and (max-width: 48em) {
        #filter .filter__search input {
          width: 60vw; } }
      @media only screen and (max-width: 30em) {
        #filter .filter__search input {
          width: 80vw; } }
    #filter .filter__search--button {
      height: 34px;
      width: 50px;
      border-top-right-radius: 2rem;
      border-bottom-right-radius: 2rem;
      border: none;
      cursor: pointer; }

header {
  background-image: url("../images/header-bg.jpg");
  background-size: 92.5%;
  background-repeat: no-repeat;
  background-position: center top;
  margin-left: auto;
  margin-right: auto; }
  header .top-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin: 1rem 0 4rem 0; }
    @media only screen and (max-width: 48em) {
      header .top-header {
        margin-bottom: 2rem;
        padding: 0.5rem; } }
    header .top-header__logo {
      flex-direction: column;
      align-items: start; }
      header .top-header__logo img {
        height: 75px;
        width: 100%; }
    header .top-header__sign-in {
      display: flex;
      align-items: center;
      padding: 1.5rem; }
      @media only screen and (max-width: 48em) {
        header .top-header__sign-in {
          display: none; } }
  header #top-nav {
    display: flex;
    align-items: center;
    width: 100%;
    height: 5rem;
    background-color: #2020207c;
    padding-left: 30px; }
    @media only screen and (max-width: 53.5em) {
      header #top-nav {
        display: none; } }
    header #top-nav .nav-list {
      display: flex;
      width: 100%;
      align-items: center; }
      header #top-nav .nav-list li {
        line-height: 5rem;
        position: relative;
        text-align: center; }
        header #top-nav .nav-list li:hover > .sub-menu {
          top: 5rem;
          opacity: 1;
          visibility: visible; }
          @media only screen and (max-width: 48em) {
            header #top-nav .nav-list li:hover > .sub-menu {
              top: 0; } }
        header #top-nav .nav-list li .free-movies {
          background-color: #5ca05c;
          text-align: center; }
        header #top-nav .nav-list li a {
          display: block;
          color: #eee;
          padding: 0 1.5rem;
          font-size: 1.6rem;
          transition: color 650ms; }
          header #top-nav .nav-list li a span {
            width: 1.6rem;
            height: 1.1rem;
            display: inline-block;
            margin-right: 0.5rem; }
          header #top-nav .nav-list li a:hover {
            background-color: #01579b; }
      header #top-nav .nav-list .sub-menu {
        width: 17rem;
        display: block;
        position: absolute;
        border-top: 0.3rem solid transparent;
        background-color: #181b21fc;
        z-index: 999;
        top: 10rem;
        transition: all 605ms ease;
        opacity: 0;
        visibility: hidden; }
        header #top-nav .nav-list .sub-menu::before {
          content: "";
          position: absolute;
          top: -2.5rem;
          left: 3rem;
          border: 1.2rem solid transparent;
          border-bottom-color: #01579b; }
        header #top-nav .nav-list .sub-menu li {
          line-height: 5rem; }
          header #top-nav .nav-list .sub-menu li:hover > .sub-menu {
            left: 100%;
            top: 0 !important;
            opacity: 1;
            visibility: visible; }
        header #top-nav .nav-list .sub-menu .sub-menu {
          top: 20rem;
          border-top: none;
          border-left: 0.3rem solid #01579b;
          top: 0;
          left: 180%;
          width: auto;
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          /* Four equal columns */
          gap: 3px;
          /* Adjust the gap between items as needed */ }
          header #top-nav .nav-list .sub-menu .sub-menu::before {
            top: 0.9rem;
            left: -2.5rem;
            border: 1.2rem solid transparent;
            border-right-color: #01579b; }
          header #top-nav .nav-list .sub-menu .sub-menu li {
            border: solid #6a606061 1px;
            min-width: 120px;
            text-align: center; }
  @media only screen and (min-width: 53.6em) {
    header .mobile-menu {
      display: none; } }
  header .mobile-menu .burger-menu {
    font-size: 40px;
    cursor: pointer;
    text-align: center;
    z-index: 1; }
  header .mobile-menu .nav-container {
    height: 100%;
    width: 0;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #333;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    z-index: 99; }
  header .mobile-menu .mobile-nav-list li {
    position: relative; }
  header .mobile-menu .mobile-nav-list a {
    display: block;
    color: #ffffff;
    padding: 0 1.5rem;
    font-size: 1.5rem !important;
    transition: color 650ms; }
    header .mobile-menu .mobile-nav-list a span {
      width: 1.6rem;
      height: 1.1rem;
      display: inline-block;
      margin-right: 0.5rem; }
    header .mobile-menu .mobile-nav-list a:hover {
      background-color: #01579b; }
  header .mobile-menu .mobile-nav-list .sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    transition: 0.4s; }
    header .mobile-menu .mobile-nav-list .sub-menu a {
      padding-left: 25px; }
    header .mobile-menu .mobile-nav-list .sub-menu .submenu-toggle::after {
      content: '\25BC';
      float: right;
      margin-right: 20px; }
    header .mobile-menu .mobile-nav-list .sub-menu .submenu-open .submenu {
      display: block;
      transition: 0.4s; }
    header .mobile-menu .mobile-nav-list .sub-menu .submenu-open .submenu-toggle::after {
      content: '\25B2'; }
  @media only screen and (max-width: 53.5em) {
    header .mobile-menu .top-header__sign-in {
      display: block;
      text-align: center; }
      header .mobile-menu .top-header__sign-in a {
        font-size: 1.6rem !important; } }
  header .mobile-menu .free-movies, header .mobile-menu .menu-item-375 {
    background-color: #5ca05c !important; }
  header .mobile-menu .nav-container a {
    padding: 10px 15px;
    text-decoration: none;
    font-size: 25px;
    color: #ffffff;
    display: block;
    transition: 0.3s; }
  header .mobile-menu .close-btn {
    position: absolute;
    top: 20px;
    right: 25px;
    font-size: 30px;
    cursor: pointer; }

.flex-box,
.flex {
  display: flex; }
  .flex-box__wrap,
  .flex__wrap {
    flex-wrap: wrap; }
  .flex-box__item,
  .flex__item {
    display: flex; }
  .flex-box .col-lg-8,
  .flex .col-lg-8 {
    display: flex;
    width: 70%;
    justify-content: flex-start;
    margin: 0.5rem 0;
    padding: 2rem 0; }
  .flex-box .col-lg-6,
  .flex .col-lg-6 {
    display: flex;
    width: 50%; }
    @media only screen and (max-width: 64em) {
      .flex-box .col-lg-6,
      .flex .col-lg-6 {
        width: 80%; } }
    @media only screen and (max-width: 30em) {
      .flex-box .col-lg-6,
      .flex .col-lg-6 {
        width: 100%; } }
  .flex-box .col-lg-4,
  .flex .col-lg-4 {
    display: flex;
    width: 30%;
    justify-content: flex-end;
    margin: 0.5rem 0;
    padding-bottom: 2rem;
    padding: 2rem 0; }
  .flex-box .f-dir-col,
  .flex .f-dir-col {
    flex-direction: column; }
    @media only screen and (max-width: 30em) {
      .flex-box .f-dir-col,
      .flex .f-dir-col {
        flex-direction: initial; } }
  @media only screen and (max-width: 30em) {
    .flex-box .two-chars,
    .flex .two-chars {
      width: 3ch;
      overflow: hidden;
      white-space: nowrap;
      padding-left: 0.1rem;
      letter-spacing: 0.3rem; } }

@media only screen and (max-width: 30em) {
  .flex-box {
    flex-wrap: wrap; } }

.imdb {
  background-color: #e2bc00b3;
  font-weight: bold;
  border-radius: 0.3rem;
  display: inline-block;
  color: #000;
  padding: 0rem 0.2rem; }
  .imdb span {
    background-color: transparent !important; }
  @media only screen and (max-width: 30em) {
    .imdb {
      display: flex;
      justify-content: center;
      align-items: center;
      align-self: center;
      align-content: center;
      height: 46px; } }

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1rem;
  width: 100%; }
  @media only screen and (max-width: 64em) {
    .grid {
      grid-template-columns: repeat(3, 1fr); } }
  @media only screen and (max-width: 48em) {
    .grid {
      grid-template-columns: repeat(2, 1fr); } }
  @media only screen and (max-width: 30em) {
    .grid {
      grid-template-columns: repeat(1, 1fr); } }
  .grid__item {
    filter: brightness(90%) grayscale(30%); }
    .grid__item:hover {
      filter: brightness(115%) grayscale(0); }
    .grid__item--poster div {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      border-top-left-radius: 0.5rem;
      border-bottom-left-radius: 0.5rem; }
      @media only screen and (max-width: 30em) {
        .grid__item--poster div {
          background-size: fit;
          background-repeat: no-repeat;
          background-position: center center; } }
    .grid__item--info {
      width: 100%;
      justify-content: space-between;
      flex-direction: column;
      align-items: center;
      position: relative;}
      @media only screen and (max-width: 30em) {
        .grid__item--info {
          align-items: flex-start; } }
      .grid__item--info h3 {
        margin-top: 0.5rem;
        padding: 0 0.3rem;
        text-align: left; }
        @media only screen and (max-width: 30em) {
          .grid__item--info h3 {
            padding-left: 1rem;
            position: relative;
            margin-top: 0.2rem; } }
      .grid__item--info ul {
        list-style-type: none;
        text-align: center; }
        @media only screen and (max-width: 30em) {
          .grid__item--info ul {
            display: flex;
            flex-wrap: wrap; } }
        .grid__item--info ul li {
          text-align: center;
          margin: 0.5rem; }
          @media only screen and (max-width: 30em) {
            .grid__item--info ul li:nth-child(1), .grid__item--info ul li:nth-child(3), .grid__item--info ul li:nth-child(4) {
              position: absolute;
              top: 50%;
              left: 20%; }
            .grid__item--info ul li:nth-child(1) {
              left: 67%; } }
  @media only screen and (max-width: 30em) and (max-width: 30em) {
    .grid__item--info ul li:nth-child(1) {
      left: 50%; } }
          @media only screen and (max-width: 30em) {
            .grid__item--info ul li:nth-child(3) {
              left: 45%; } }
  @media only screen and (max-width: 30em) and (max-width: 30em) {
    .grid__item--info ul li:nth-child(3) {
      left: 50%;
      display: none; } }
          @media only screen and (max-width: 30em) {
            .grid__item--info ul li:nth-child(4) {
              left: 21%; } }
  @media only screen and (max-width: 30em) and (max-width: 30em) {
    .grid__item--info ul li:nth-child(4) {
      left: 1%; } }
          .grid__item--info ul li .country-flag {
            width: 1.6rem;
            height: 1.1rem;
            display: inline-block;
            margin-left: 0.5rem; }
      .grid__item--info span {
        background-color: #2020207c;
        width: 100%;
        text-align: center;
        padding: 0.5rem; }
        .grid__item--info span button {
          background-color: transparent;
          border: none;
          font-size: 1.6rem;
          color: #d4d4d4; }
      @media only screen and (max-width: 30em) {
        .grid__item--info .watch-button {
          display: none; } }

footer .credentials {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  background-color: #1f1f1f;
  margin-top: 10rem;
  padding: 1rem; }
  @media only screen and (max-width: 30em) {
    footer .credentials p {
      font-size: 1.1rem; } }

/*pages*/
.index-article-header .col-lg-8, .index-article-header .col-lg-4 {
  padding: 3rem 1rem; }

.header {
  padding: 0.2rem 1rem; }
  .header a {
    display: flex;
    justify-content: center;
    align-self: center;
    align-content: center;
    align-items: center; }
    .header a span {
      padding: 0.7rem; }
    @media only screen and (max-width: 30em) {
      .header a:nth-child(3) {
        display: none; } }

@media only screen and (max-width: 30em) {
  .most-recent .most-recent_mob_col {
    flex-direction: column; } }

.most-recent .f-dir-col {
  flex-direction: column; }

@media only screen and (max-width: 30em) {
  .most-recent .flex-box__item {
    width: 100%; } }

.most-recent .header {
  padding: 2rem 1.5rem; }

.most-recent .background {
  background-image: url("https://www.news-medical.net/image.axd?picture=2019%2F4%2FLaboratory.jpg");
  background-size: cover;
  background-position: center center;
  min-height: 30rem;
  text-align: center;
  align-items: flex-end; }
  .most-recent .background__info {
    background-color: #202020d5;
    padding: 1.5rem 0.7rem 0.7rem;
    width: 100%; }

.most-recent .item {
  filter: brightness(80%);
  border: #181b21fc solid 0.1px; }
  .most-recent .item:hover {
    filter: brightness(115%);
    background-color: #2020207c; }
  .most-recent .item:nth-child(even) {
    background-color: #2020207c; }
  .most-recent .item__poster {
    background-size: contain;
    background-position: center center;
    height: 6.1rem;
    width: 6.5rem; }
    @media only screen and (max-width: 30em) {
      .most-recent .item__poster {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        height: 6rem;
        width: 10.1rem; } }
    .most-recent .item__poster:nth-child(even) {
      background-color: #2020207c; }
  .most-recent .item__date {
    justify-content: center;
    align-items: center;
    height: 6rem;
    width: 14rem; }
    .most-recent .item__date:nth-child(even) {
      background-color: #2020207c; }
  .most-recent .item__info {
    width: 100%;
    justify-content: center;
    flex-direction: column;
    padding-left: 2rem;
    padding-top: 1rem; }
    .most-recent .item__info .country-flag {
      width: 1.6rem;
      height: 1.1rem;
      display: inline-block;
      margin-left: 0.5rem; }
    .most-recent .item__info h3 .country-flag {
      width: 1.6rem;
      height: 1.1rem;
      display: inline-block;
      margin-right: 0.5rem; }
    .most-recent .item__info p {
      font-weight: 200;
      line-height: 3.4rem; }

/*
[class*="item"] {
    display: flex; 
    justify-content: center;
    flex-basis: 22%
}
*/
article:nth-child(2) .flex-box, article:nth-child(3) .flex-box, article:nth-child(5) .flex-box, article:nth-child(6) .flex-box {
  margin-bottom: 1rem; }

.login {
  background-color: #000 !important;
  height: 53rem; }
  .login .flex-box {
    justify-content: center;
    background-color: #000; }
  .login .input-form :nth-child(3) a {
    justify-content: flex-end; }
  .login .input-form :nth-child(4) {
    padding-top: 2rem; }
  .login .input-form :nth-child(6) {
    text-align: center; }

.register {
  background-color: #000 !important;
  height: 53rem; }
  .register .flex-box {
    background-color: #000; }
    @media only screen and (max-width: 48em) {
      .register .flex-box__item {
        justify-content: center;
        align-content: center;
        margin-left: auto;
        margin-right: auto; } }
    .register .flex-box__item:first-child {
      width: 30vw;
      padding-left: 2rem; }
      @media only screen and (max-width: 48em) {
        .register .flex-box__item:first-child {
          width: 80vw; } }
    .register .flex-box__item:nth-child(2) {
      flex-direction: column;
      align-items: flex-start;
      width: 65vw;
      padding-top: 3rem; }
      @media only screen and (max-width: 48em) {
        .register .flex-box__item:nth-child(2) {
          width: 80vw; } }
      .register .flex-box__item:nth-child(2) h3 {
        padding-bottom: 1.5rem; }
      .register .flex-box__item:nth-child(2) ol {
        padding-left: 2rem; }
        .register .flex-box__item:nth-child(2) ol li {
          list-style-type: disc;
          padding-bottom: 0.8rem; }

.forgot-password {
  background-color: #000 !important;
  height: 53rem; }
  .forgot-password .flex-box {
    justify-content: center;
    background-color: #000; }

.movies .flex-box {
  flex-wrap: wrap;
  justify-content: space-between; }
  .movies .flex-box a {
    cursor: pointer;
    height: 34rem;
    width: 15%; }
    @media only screen and (max-width: 64em) {
      .movies .flex-box a {
        width: 25%;
        height: 30rem; } }
    @media only screen and (max-width: 48em) {
      .movies .flex-box a {
        width: 30%;
        height: 28rem; } }
    @media only screen and (max-width: 30em) {
      .movies .flex-box a {
        height: 17rem;
        width: 28%;
        margin-left: auto;
        margin-right: auto; } }
  .movies .flex-box .image-size {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
    height: 100%;
    width: 100%; }

.the-movie {
  background-color: #aca8a8b0;
  width: 100%; }
  .the-movie .flex-box {
    flex-direction: row;
    height: 80vh;
    position: relative;
    background-image: url("../images/parasite-poster22.png");
    background-size: fit;
    background-repeat: no-repeat;
    background-position: right 12rem;
    z-index: 1; }
    @media only screen and (max-width: 30em) {
      .the-movie .flex-box {
        padding-top: 5rem; } }
    @media only screen and (max-width: 64em) {
      .the-movie .flex-box {
        background-position: center center; }
        .the-movie .flex-box .col-lg-4 {
          width: 50%; } }
    @media only screen and (max-width: 30em) {
      .the-movie .flex-box {
        background-size: contain;
        background-position: center bottom; }
        .the-movie .flex-box .col-lg-4 {
          width: 80%; } }
    .the-movie .flex-box__item {
      flex-direction: column;
      margin: 9rem 0 0 5rem; }
      @media only screen and (max-width: 30em) {
        .the-movie .flex-box__item {
          margin: 9rem 0 0 0; } }
      .the-movie .flex-box__item--info {
        display: flex;
        display: row;
        padding-bottom: 2rem;
        gap: 30px;
        padding-left: 5px;
        align-items: center; }
        @media only screen and (max-width: 30em) {
          .the-movie .flex-box__item--info {
            gap: 0;
            justify-content: space-between; } }
        .the-movie .flex-box__item--info p,
        .the-movie .flex-box__item--info span {
          margin-right: 2.5rem; }
          @media only screen and (max-width: 20em) {
            .the-movie .flex-box__item--info p,
            .the-movie .flex-box__item--info span {
              margin-right: 2rem; } }
        .the-movie .flex-box__item--info :nth-child(4),
        .the-movie .flex-box__item--info :nth-child(5) {
          border: #ffffff solid 0.2rem;
          border-radius: 0.5rem;
          padding: 0.2rem 0.5rem 0.1rem; }
      .the-movie .flex-box__item--description {
        padding-bottom: 2rem;
        z-index: 2; }
        .the-movie .flex-box__item--description p {
          width: 40vw; }
          @media only screen and (max-width: 64em) {
            .the-movie .flex-box__item--description p {
              width: 70vw; } }
          @media only screen and (max-width: 30em) {
            .the-movie .flex-box__item--description p {
              width: 100%; } }
      .the-movie .flex-box__item--cast {
        margin-bottom: 2rem; }
        .the-movie .flex-box__item--cast ul li {
          margin-bottom: 0.2rem; }
      .the-movie .flex-box__item--functions {
        margin-top: 3rem; }
        .the-movie .flex-box__item--functions button,
        .the-movie .flex-box__item--functions a {
          margin-right: 2rem;
          padding: 1rem;
          border-radius: 0.5rem;
          background-color: #ffffff;
          border: #ffffff solid 0.2rem; }
          .the-movie .flex-box__item--functions button:hover,
          .the-movie .flex-box__item--functions a:hover {
            border: #2c2c2cb0 solid 0.2rem; }
      .the-movie .flex-box__item--vote {
        display: flex;
        position: relative;
        justify-content: center;
        width: 90%;
        left: 100%; }
        @media only screen and (max-width: 64em) {
          .the-movie .flex-box__item--vote {
            justify-content: flex-end;
            left: 20%;
            bottom: 5%;
            gap: 40px;} }
        @media only screen and (max-width: 30em) {
          .the-movie .flex-box__item--vote {
            left: 5%;
            bottom: 7%; } }
        .the-movie .flex-box__item--vote button {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          background-color: transparent;
          border: none;
          outline: none;
          color: #ffffff; }
        .the-movie .flex-box__item--vote span {
          font-size: 2rem; }
        .the-movie .flex-box__item--vote img {
          height: 100%; }
  .the-movie #movie-bg {
    background-size: cover;
    background-position: center;
    padding: 20px;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8));
    background-color: #aca8a8b0; }

@media only screen and (max-width: 48em) {
  .category-latest-6 {
    gap: 20px; } }

@media only screen and (max-width: 30em) {
  .category-latest-6 {
    gap: 10px; } }