/* Orginal: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_searchbar3 */
nav>.searchbar {
  display: none;
  width: stretch;
  overflow: hidden;
  width: 100%;
  text-align: center;
  margin-top: 0.625em;
  background-color: #d3d3d3;
}

nav>.searchbar a {
  display: block;
  color: black;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 1.063rem;
}

nav>.searchbar a:hover {
  background-color: #ddd;
  color: black;
}

nav>.searchbar a.active {
  background-color: #2196F3;
  color: white;
}

nav>.searchbar button {
  padding: 6px 10px;
  margin-top: 0.5em;
  background: #ddd;
  font-size: 1.063rem;
  border: none;
  cursor: pointer;
}

nav>.searchbar button:hover {
  background: #ccc;
}

nav>.searchbar input[type=text] {
  padding: 6px;
  margin-top: 0.5em;
  font-size: 1.063rem;
  border: none;
}

main>.searchbar-lower {
  width: stretch;
  overflow: hidden;
  width: 100%;
  text-align: center;
  margin-top: 0.625em;
}

main>.searchbar-lower a {
  display: block;
  color: black;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 1.063rem;
}

main>.searchbar-lower a:hover {
  background-color: #ddd;
  color: black;
}

main>.searchbar-lower a.active {
  background-color: #2196F3;
  color: white;
}

main>.searchbar-lower button {
  padding: 6px 10px;
  margin-top: 0.5em;
  background: #ddd;
  font-size: 1.063rem;
  border: none;
  cursor: pointer;
}

main>.searchbar-lower button:hover {
  background: #ccc;
}

main>.searchbar-lower input[type=text] {
  padding: 6px;
  margin-top: 0.5em;
  font-size: 1.063rem;
  border: none;
}

main>#filmer,main>#filmer-desktop {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

main>section>h2 {
  text-align: center;
}

main>section>ul {
  list-style-type: none;
  display: flex;
  justify-content: center;
}

main>#filmer-desktop {
  display: none;
}

main>section>ul>li {
  margin: 0 -1.25em;
}

@media screen and (min-width: 600px) {
  nav>.searchbar {
    display: unset;
  }

  nav>.searchbar input[type=text] {
    width: 355px;
  }

  main>.searchbar-lower {
    display: none;
  }

  main>#filmer,main>#filmer-desktop {
    flex-direction: unset;
  }

  main>section>ul {
    display: unset;
  }

  main>section>ul>li {
    margin: 3.75em 0;
  }

  main>section>ul>li>figure {
    margin: 0 0.625em;
  }

  main>iframe {
    max-width: 608px;
  }
}

@media screen and (min-width: 1024px) {
  nav>.searchbar {
    padding-left: 10px;
  }

  nav>.searchbar input[type=text] {
    width: 770px;
  }

  main>#filmer {
    display: none;
  }

  main>#filmer-desktop {
    display: flex;
  }

  main>section>ul>li>figure {
    margin: 0 1.25em;
  }
}

@media screen and (min-width: 2560px) {

  main>.searchbar-lower {
    display: none;
  }

  main>#filmer {
    flex-direction: unset;
  }

  main>section>ul {
    display: unset;
  }

  main>section>ul>li {
    margin: 60px 0px;
  }

  main>section>ul>li>figure {
    margin: 0px 10px;
  }

  main>iframe {
    max-width: 608px;
  }
}