@-ms-viewport{
  width: device-width;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .content {
      display: none;
  }
  .container {
      width: 98%;
      display: flex;
      flex-wrap: wrap;
  }
  .box {
      width: 98%;
      border-radius: 6px;
      padding: 3px;
      border: 2px solid white;
      margin-top: 5px;
      text-align: center;
  }
  div.posters{
      margin: auto;
      padding: 0px;
      text-align: center;
  }
  img.poster {
      width: 40%;
      height: auto;
  }
  .title {
      font-weight: bold;
      font-size: 1.5em;
  }
  .date {
    text-align: center;
    font-weight: bold;
    font-size: 1.75em;
    color: yellow;
  }
  .note {
      font-weight: bold;
      font-size: 1.0em;
      color: yellow;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .content {
      display: none;
  }
  .container {
      width: 100%;
      display: flex;
      flex-wrap:wrap;
      margin: auto;
      margin-top: 20px;
      padding: 0px;
      border: 0px solid white;
  }
    .box {
      width: calc(98% / 3);
      border-radius: 4px;
      /*height: 275px;*/
      border: 1px solid white;
      margin: auto;
      margin-top: 5px;
      text-align: center;
      background-color: black;
      padding: 3px 0px;
  }
  /*.box:nth-child(odd){
    background-image: linear-gradient(darkgrey, dimgrey);
  }
  .box:nth-child(even){
    background-image: linear-gradient(dimgrey, darkgrey)
  }*/
  div.posters{
      margin: auto;
      padding: 0px;
      text-align: center;
  }
  img.poster {
      width: 45%;
      height: auto;
  }
  .title {
      font-weight: bold;
      font-size: 1em;
      color: white;
      padding-top: 5px;
  }
  .date {
    text-align: center;
    font-weight: bold;
    font-size: 1.25em;
    color: yellow;
    padding: 3px 0px;
  }
  .note {
      font-weight: bold;
      font-size: 0.8em;
      color: yellow;
  }
}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .content {
      display: none;
  }
  .container {
      width: 100%;
      max-width: 1200px;
      display: flex;
      flex-wrap:wrap;
      margin: auto;
      margin-top: 20px;
      padding: 0px;
      border: 0px solid white;
  }
    .box {
      width: calc(98% / 4);
      border-radius: 4px;
      /*height: 300px;*/
      border: 1px solid white;
      margin: auto;
      margin-top: 5px;
      text-align: center;
      background-color: black;
      padding: 5px 0px;
  }
  /*.box:nth-child(odd){
    background-image: linear-gradient(darkgrey, dimgrey);
  }
  .box:nth-child(even){
    background-image: linear-gradient(dimgrey, darkgrey)
  }*/
  div.posters{
      margin: auto;
      padding: 0px;
      text-align: center;
  }
  img.poster {
      width: 45%;
      height: auto;
  }
  .title {
      font-weight: bold;
      font-size: 1.00em;
      color: white;
      padding: 2px 0px;
  }
  .date {
    text-align: center;
    font-weight: bold;
    font-size: 1.25em;
    color: yellow;
    padding-top: 3px;
  }
  .note {
      font-weight: bold;
      font-size: 0.8em;
      color: yellow;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
}

ul {
  list-style-type: none;
  margin-left: 0px;
  margin-top: 0px;
  padding-left: 5px;
}
li {
  padding-top:3px;
}
a.tickets {
		border: 1px solid black;
		border-radius: 5px;
		padding: 8px 12px;
		background-color: red;
		color: white;
		font-family: arial, helvetica, sans-serif;
		font-weight: bold;
		font-size: 1em;
    text-decoration: none;
}
a.tickets:hover {
    background-color: white;
    color: red;
}