@media all and (max-width: 480px) {
  /* div#screen {
    margin-top: 20vw;
  } */

  img#banner {
    left: 0vw;
  }




  h1.screen_title {
    margin-top: 0vw;
    margin-bottom: 0vw;
  }

  img#icon {
    margin-top: -6vw;
  }

  div#button_header {
    display: none;
  }

  /************************************************ QUERY ************************************************/

  section#query_area {
    position: relative;
    z-index: 2;
    display: block;
    width: 60vw;
    left: 50vw;
    margin-left: -30vw;
  }

  input {
    background-color: transparent;
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0px;
    border-bottom-color: grey;
    height: 3.6vw;
    margin-left: auto;
    margin-right: auto;
    width: 60vw;
    color: grey;
    font-size: 3.6vw;
  }

  a#validate_button {
    display: block;
    text-align: center;
    margin-top: 8vw;
    margin-bottom: 8vw;
    font-size: 3.6vw;
  }

  a.action {
    display: block;
    margin-top: 6vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2vw;
    width: 30vw;
    color: grey;
    font-size: 3.5vw;
    border-radius: 2vw;
    padding: 1.8vw;
    background-color: rgb(20, 20, 20);
    text-decoration: none;
  }

  a.action:hover {
    cursor: pointer;
    color: white;
  }

  a#message {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 2vw;
    width: 50vw;
    color: white;
    text-align: center;
    font-size: 3.6vw;
  }

  /************************************************ RESULT ************************************************/

  section#list {
    position: relative;
  }

  section.folder,
  section.author {
    padding-top: 2vw;
    margin-top: 71vw;
  }

  h1#web_site {
    width: 100vw;
    margin-left: 0vw;
    margin-bottom: -5vw;
    text-align: center;
  }

  section#result {
    position: relative;
    z-index: 5;
  }

  /*********************************************** THUMBNAIL ***********************************************/

  a.title {
    position: relative;
    z-index: 10;
    margin-left: 5.4vw;
    color: white;
    font-size: 2.5vw;
    text-decoration: none;
  }

  div.pager_container {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: -1vw;
  }

  div.pager_container:hover {
    cursor: pointer;
  }

  div.pager,
  div.pager_slideshow {
    display: inline-block;
    width: 3vw;
    height: 3vw;
    margin-left: 0.6vw;
    margin-right: 0.6vw;
    border-radius: 50%;
    background: rgb(120, 120, 120);
  }

  div.pager {
    display: none;
  }

  /* div.scrolling_container {
    position: relative;
  }

  div.list_container {
    margin-top: 0vw;
    margin-left: 4.5vw;
    margin-bottom: 2.5vw;

    overflow-y: hidden;
    white-space: nowrap;
  } */

  div.thumbnail {
    display: inline-block;
    position: relative;
    z-index: 10;
    margin: 1vw;
  }

  div.thumbnail.panorama {
    margin-right: 0.8vw;
    margin-left: 0.8vw;
  }

  div.thumbnail.rounded {
    margin-right: 3vw;
    margin-left: 3vw;
  }

  ._1 {
    width: 90vw;
    height: 18vw;
    border-radius: 1vw;
  }

  .panorama {
    width: 44vw;
    height: 24.75vw;
    border-radius: 2vw;
  }
  .rounded {
    width: 25vw;
    height: 25vw;
    margin-left: 0vw;
    border-radius: 50%;
  }

  /*  INFO  */

  div.info.panorama {
    display: none;
    position: absolute;
    /*  because div has also "format" class but should not have height  */
    font-size: 1.6vw;
    width: 21.2vw;
    height: 6vw;
    margin-left: 0vw;
    margin-top: -6.4vw;
    border-radius: 0vw 0vw 0.5vw 0.5vw;
    color: black;
    background: linear-gradient(
      0.25turn,
      rgb(120, 200, 170),
      rgb(160, 200, 80)
    );
    opacity: 0.9;
  }

  div.line_1.series {
    font-family: Karrik-Regular, Arial, Helvetica, sans-serif;
    margin-top: 0vw;
    margin-left: 0.5vw;
  }

  div.line_2.series {
    margin-left: 0.5vw;
    font-size: 1vw;
  }

  div.line_3.series {
    position: relative;
    margin-left: 17.5vw;
    font-size: 1.4vw;
  }

  div.info.rounded {
    display: none;
    position: absolute;
    font-size: 3.5vw;
    width: 26vw;
    height: 26vw;
    margin-left: -0.5vw;
    margin-top: -26vw;
    border-radius: 50%;
    text-align: center;
    color: white;
    background-color: rgb(0, 0, 0, 0.8);
  }

  div.line_1.channel {
    margin-top: 9vw;
  }

  /*  ARROWS  */

  img.arrow_container {
    display: none;
    position: absolute;
    z-index: 10;
    width: 15vw;
    height: 15vw;
  }

  img.arrow_container.panorama {
    margin-top: -25vw;
  }

  img.arrow_container.left {
    display: none;
  }

  img.arrow_container.left {
    left: -2vw;
  }

  img.arrow_container.right {
    right: -2vw;
  }
}