@font-face {
  font-family: 'Open Sans';
  src: url(fonts/OpenSans-Regular.ttf); }

@font-face {
  font-family: 'Open Sans';
  font-weight: 600;
  src: url(fonts/OpenSans-SemiBold.ttf); }

@font-face {
  font-family: 'Open Sans';
  font-weight: bold;
  src: url(fonts/OpenSans-Bold.ttf); }

* {
  font-family: 'Open Sans', Arial, sans-serif; }

.tabs {
  display: flex;
  flex-direction: row;
  border-bottom: 3px solid rgba(20, 30, 60, 0.6);
  justify-content: space-evenly;
  margin: 20px 0; }
  .tabs .tab {
    text-transform: uppercase;
    font-size: 28px;
    color: white;
    font-weight: bold;
    text-shadow: 0 1px 2px black;
    cursor: pointer;
    padding: 2px 16px;
    text-shadow: 0 1px 2px black, 0 0 3px black, 0 0 2px black;
    box-shadow: inset 0 -22px 0 rgba(20, 30, 60, 0.2); }
    .tabs .tab.tab--show {
      color: #ffe395;
      box-shadow: inset 0 -22px 0 rgba(20, 30, 60, 0.6);
      display: inline-block; }
  @media screen and (max-width: 1279px) {
    .tabs {
      display: block; } }

.tab-panes {
  position: relative; }

.tab-pane {
  display: none;
  min-height: 600px;
  margin-bottom: 40px;
  opacity: 0;
  padding-top: 1px;
  transition: opacity 0.3s linear, transform 0.3s linear;
  transform: translateX(0px); }
  .tab-pane.tab-pane--show {
    display: block;
    opacity: 1;
    transition: opacity 0 ease; }
  .tab-pane.tab-pane--shift-left {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transform: translateX(-100px);
    pointer-events: none; }
  .tab-pane.tab-pane--shift-right {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transform: translateX(100px);
    pointer-events: none; }

a.pick {
  cursor: pointer;
  padding: 1px 12px;
  box-shadow: inset 0 -12px 0 rgba(20, 30, 60, 0.3);
  font-size: 19px; }
  a.pick.pick--show {
    color: #ffe395;
    box-shadow: inset 0 -12px 0 rgba(20, 30, 60, 0.7); }

.pane-set .pane {
  display: none; }
  .pane-set .pane.pane--show {
    display: block; }

time {
  background: white;
  width: 54px;
  height: 54px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  color: black;
  text-shadow: none !important;
  text-align: center; }
  time .day {
    line-height: 24px;
    font-size: 26px;
    font-weight: 600; }
  time .month {
    line-height: 13px;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bold; }
  time .year {
    line-height: 12px;
    font-size: 12px;
    font-weight: bold; }
  time .time__special {
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: 2px solid #a2f8ad;
    border-radius: 5px; }

time.time--event, .event-anime time {
  background: #a2d7f8; }

time.time--movie, .event-movie time {
  background: #9af3aa; }

time.time--new-series, .event-new-series time, figure time {
  background: #f8dda2; }

time.time--online, .event-online time {
  background: #97abf3; }

time.time--cinema, .event-cinema time {
  background: #f8b3a2; }
  time.time--cinema .time__special, .event-cinema time .time__special {
    border-color: #f8b3a2; }

time.time--convention, .event-convention time {
  background: #f8a2ed; }

time.time--news, .news time {
  background: #a2f8ad; }

time.time--social, .event-social time {
  background: #a2f8ad; }

/* Basic layouts */
.one > * {
  max-width: 600px;
  margin: 0 auto; }

.lr {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 32px; }

.rl {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 32px; }

.lre {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0 20px; }

.c3e {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px; }

@media screen and (min-width: 1280px) {
  .lr > *, .lr > * > .box:first-child, .rl > *, .rl > * > .box:first-child, .lre > *, .lre > * > .box:first-child {
    margin-top: 0; } }

@media screen and (max-width: 1279px) {
  .lr, .rl, .lre, .c3e {
    display: block; }
    .lr > *, .rl > *, .lre > *, .c3e > * {
      margin-top: 1em !important; } }

/* Specific layouts */
.series-grid {
  display: grid; }
  @media screen and (min-width: 640px) {
    .series-grid {
      grid-template-columns: 1fr 1fr; } }
  @media screen and (min-width: 1280px) {
    .series-grid {
      grid-gap: 32px; }
      .series-grid figure.series--large, .series-grid figure.series--large img.series-picture {
        height: 392px; } }
  @media screen and (min-width: 640px) and (max-width: 1279px) {
    .series-grid {
      grid-gap: 20px; }
      .series-grid figure.series--large, .series-grid figure.series--large img.series-picture {
        height: 380px; } }
  @media screen and (max-width: 639px) {
    .series-grid {
      display: flex;
      flex-direction: column;
      gap: 20px; } }
  @media screen and (min-width: 640px) {
    .series-grid.series-grid--large-first {
      grid-template-rows: 2fr 1fr;
      grid-auto-rows: 1fr;
      grid-template-areas: "one one"; }
      .series-grid.series-grid--large-first figure:first-child {
        grid-area: one;
        height: 360px;
        padding-right: 252px; }
        .series-grid.series-grid--large-first figure:first-child, .series-grid.series-grid--large-first figure:first-child img.series-picture {
          height: 360px; }
        .series-grid.series-grid--large-first figure:first-child figcaption {
          padding: 20px; }
          .series-grid.series-grid--large-first figure:first-child figcaption h3 {
            font-size: 26px; } }

figure.series--right {
  position: relative;
  background: rgba(40, 60, 120, 0.4);
  background: linear-gradient(90deg, rgba(40, 60, 120, 0.4), rgba(40, 60, 120, 0.7));
  border-radius: 2px;
  margin: 0;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
  height: 180px;
  padding-right: 126px; }
  body.night figure.series--right {
    background: rgba(20, 30, 60, 0.4);
    background: linear-gradient(90deg, rgba(20, 30, 60, 0.4), rgba(20, 30, 60, 0.7)); }
  figure.series--right figcaption {
    padding: 1px 5px 1px 13px;
    text-align: left;
    color: white;
    font-weight: bold;
    font-size: 17px;
    text-shadow: 0 1px 1px black; }
    figure.series--right figcaption h3 {
      margin-top: 8px;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical; }
    figure.series--right figcaption .info-line {
      position: absolute;
      left: 13px;
      bottom: 13px;
      margin: 0;
      display: grid;
      grid-template-columns: 54px 54px 54px;
      grid-gap: 13px; }
      figure.series--right figcaption .info-line > * {
        display: inline-block;
        width: 54px;
        height: 54px; }
    figure.series--right figcaption time {
      position: absolute;
      bottom: 13px;
      left: 13px; }
  figure.series--right > img.series-picture {
    position: absolute;
    top: 0;
    right: 0;
    height: 180px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px; }
  figure.series--right.series--small-title figcaption h3 {
    -webkit-line-clamp: 2;
    text-overflow: ellipsis; }
  figure.series--right.series--large {
    padding-right: 252px; }
    figure.series--right.series--large, figure.series--right.series--large img.series-picture {
      height: 360px; }
    figure.series--right.series--large figcaption {
      padding: 20px; }
      figure.series--right.series--large figcaption h3 {
        font-size: 26px; }

.series-grid figure figcaption .movie-time {
  display: none;
  height: 54px; }
  .series-grid figure figcaption .movie-time .movie-weekday {
    font-size: 14px;
    text-transform: uppercase;
    margin: 0.1em 0 0 0;
    color: #9af3aa; }
  .series-grid figure figcaption .movie-time .movie-start-time {
    font-size: 22px;
    color: white;
    margin: 0; }

.series-grid figure figcaption img.rating-img {
  position: absolute;
  bottom: 13px;
  right: 136px;
  width: 54px;
  height: 54px; }

.series-grid figure figcaption p.movie-ident {
  font-size: 14px;
  text-transform: uppercase;
  margin: 0.5em 0 0 0;
  color: #9af3aa; }
  .series-grid figure figcaption p.movie-ident + h3 {
    margin-top: 1px; }

.series-grid figure figcaption p.series-ident {
  font-size: 14px;
  text-transform: uppercase;
  margin: 0.5em 0 0 0; }
  .series-grid figure figcaption p.series-ident + h3 {
    margin-top: 1px; }

.series-grid figure figcaption p.starting {
  position: absolute;
  left: 13px;
  bottom: 59px;
  font-size: 14px;
  text-transform: uppercase; }

.series-grid figure.movie {
  background: rgba(20, 40, 100, 0.6);
  background: linear-gradient(90deg, rgba(20, 40, 100, 0.6), #142864);
  box-shadow: none; }
  .series-grid figure.movie:after {
    content: "";
    display: block;
    position: absolute;
    top: -8px;
    bottom: -8px;
    left: -8px;
    right: -8px;
    border: 4px solid rgba(20, 40, 100, 0.7);
    border-radius: 8px; }
  body.night .series-grid figure.movie {
    background: rgba(5, 10, 40, 0.6);
    background: linear-gradient(90deg, rgba(5, 10, 40, 0.6), #050a28); }
  .series-grid figure.movie figcaption h3 {
    height: 80px;
    -webkit-line-clamp: 3; }
  .series-grid figure.movie .movie-info {
    position: absolute;
    left: 80px;
    bottom: 24px; }
    .series-grid figure.movie .movie-info p {
      margin: 0.1em 0;
      font-size: 22px; }

.series-grid figure .rating-hover {
  left: 20%;
  right: auto; }
  .series-grid figure .rating-hover .rating__tag {
    left: 78px; }

html {
  min-height: 100%; }

body {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-attachment: fixed;
  transition: background-image 2s ease-in-out; }
  body.day {
    background-color: #468fe2; }
  body.night {
    background-color: #080c80; }

/* Site furniture */
.btn {
  display: block;
  margin-bottom: 10px;
  cursor: pointer;
  background: none;
  border: 0 none; }
  .btn i {
    display: inline-block;
    width: 60px;
    height: 60px;
    border-radius: 30px;
    box-shadow: 0 1px 2px black;
    -webkit-appearance: none;
    appearance: none;
    border: 0 none;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; }
    .btn i + span {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0; }
  .btn span {
    display: inline-block;
    color: white;
    font-weight: bold;
    border-left-width: 0;
    border-radius: 20px;
    padding: 7px 50px;
    vertical-align: middle;
    margin-left: -6px;
    box-shadow: 1px 1px 1.4px rgba(0, 0, 0, 0.7); }

.box.box--button {
  padding-right: 256px; }
  .box.box--button .btn {
    position: absolute;
    top: 20px;
    right: 20px; }

#logo {
  position: fixed;
  top: 5px;
  left: 5px;
  max-height: 98vh; }

#section-social {
  position: fixed;
  top: 20px;
  right: 20px; }
  @media (max-width: 1280px) {
    #section-social .btn i {
      width: 40px;
      height: 40px; } }
  #section-social .btn span {
    display: none; }

#section-discord {
  padding: 8px 20px; }
  #section-discord h2, #section-discord h3, #section-discord p {
    margin: 8px 0; }
  #section-discord h2 {
    color: #f8dda2; }
  #section-discord .btn.btn-discord {
    position: absolute;
    top: 20px;
    right: 20px; }

.btn-mail i {
  background-color: #ed3b41;
  background-image: url("images/mail.svg"); }

.btn-twitter i {
  background-color: #1da1f2;
  background-image: url("images/tw_icon.png"); }

.btn-twitter-broken {
  position: fixed;
  bottom: 10px; }
  .btn-twitter-broken i {
    background-color: #1da1f2;
    background-image: url("images/tw_icon_broken.png"); }
  .btn-twitter-broken i {
    height: 40px;
    border-radius: 30px / 20px; }

.btn-fb i {
  background-color: #4267b2;
  background-image: url("images/fb_icon.png"); }

.btn-discord i {
  background-color: #5165F6;
  background-image: url("images/discord.gif"); }

.btn-discord span {
  background: #5165F6; }

.btn-recommendations span {
  background: #047848; }

.btn-recommendations span {
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2), 0 1px 2px black; }

#main-title {
  display: none; }

main {
  margin-left: auto;
  margin-right: auto;
  padding-left: 200px;
  padding-right: 90px;
  max-width: 1024px; }

h1, h2, h3, h4 {
  color: white;
  font-weight: bold;
  text-shadow: 0 1px 2px black; }

h1 {
  font-size: 48px;
  font-weight: 600;
  margin: 0; }

h2 {
  text-transform: uppercase;
  font-size: 20px;
  margin-top: 0.8em; }
  h2.underline {
    font-size: 28px;
    box-shadow: inset 0 -22px 0 rgba(20, 30, 60, 0.5);
    text-shadow: 0 1px 2px black, 0 0 3px black, 0 0 2px black;
    display: inline-block;
    padding: 2px 10px; }

h3 {
  font-size: 19px; }
  h3 em {
    font-size: 24px;
    font-style: normal;
    margin-right: 4px; }
  h3.big {
    padding-left: 10px;
    font-size: 26px;
    margin-bottom: 20px;
    margin-top: 15px; }

a#home-link {
  display: block;
  margin: 1em 0;
  color: white;
  text-decoration: none;
  font-weight: bold;
  text-shadow: 0 1px 2px black;
  padding: 1px 6px;
  box-shadow: inset 0 -12px 0 rgba(20, 30, 60, 0.4); }
  a#home-link img {
    height: 15px;
    vertical-align: middle; }

.box {
  padding: 5px 27px;
  background: rgba(40, 60, 120, 0.7);
  border-radius: 2px;
  margin-top: 2em;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
  position: relative; }
  body.night .box {
    background: rgba(20, 30, 60, 0.5); }
  .box p {
    color: white;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    font-weight: 600; }
  .box h2:first-child {
    margin-top: 0.6em; }

#section-announce {
  background: white;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.8), rgba(245, 245, 245, 0.5)); }
  #section-announce h2 {
    color: black;
    margin-top: 0.6em;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); }
  #section-announce .content p {
    font-weight: 600;
    font-size: 16px; }
    #section-announce .content p.p--icon {
      padding-left: 50px;
      margin: 26px 0; }
      #section-announce .content p.p--icon .icon {
        display: block;
        float: left;
        margin-top: -8px;
        margin-left: -50px; }
      #section-announce .content p.p--icon img.icon {
        height: 40px;
        width: 40px; }
    #section-announce .content p .entry-fee {
      width: 36px;
      height: 36px;
      border-radius: 20px;
      border: 2px solid #b09010;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
      background: #fff8e0;
      text-align: center;
      line-height: 36px;
      font-weight: bold; }
  #section-announce #announce-date {
    position: relative;
    padding-left: 100px;
    margin-top: 20px;
    margin-bottom: 20px;
    min-height: 82px; }
    #section-announce #announce-date time {
      position: absolute;
      left: 0;
      top: 0;
      height: 82px;
      width: 82px;
      background: #f8dda2; }
      #section-announce #announce-date time .day {
        font-size: 46px;
        line-height: 46px; }
      #section-announce #announce-date time .month {
        font-size: 24px;
        line-height: 24px; }
    #section-announce #announce-date .announce-date-side {
      padding-top: 4px;
      color: black;
      font-size: 20px;
      line-height: 30px;
      font-weight: 600; }

#section-next-meeting, #section-next-social {
  position: relative; }
  #section-next-meeting h2, #section-next-social h2 {
    margin-top: 0.6em;
    margin-bottom: 3px;
    color: #f8dda2; }
  #section-next-meeting h3, #section-next-social h3 {
    margin-top: 1em; }
  #section-next-meeting .next-social-title, #section-next-social .next-social-title {
    color: #a2f8ad; }

.focus-date {
  position: relative;
  padding-left: 100px;
  margin-top: 20px;
  min-height: 76px; }
  .focus-date time {
    position: absolute;
    left: 0;
    top: 0;
    height: 82px;
    width: 82px; }
    .focus-date time .day {
      font-size: 46px;
      line-height: 46px; }
    .focus-date time .month {
      font-size: 24px;
      line-height: 24px; }
  .focus-date .focus-date-side {
    padding-top: 4px;
    color: white;
    font-size: 32px;
    line-height: 36px;
    font-weight: bold;
    text-shadow: 0 1px 2px black; }

#about {
  position: relative;
  padding: 6px 70px 6px 0; }
  #about .content {
    margin: -10px 0; }
  #about .content p {
    font-weight: 600;
    font-size: 16px;
    color: white; }
    #about .content p.p--icon {
      padding-left: 50px;
      margin: 26px 0; }
      #about .content p.p--icon .icon {
        display: block;
        float: left;
        margin-top: -8px;
        margin-left: -50px; }
      #about .content p.p--icon img.icon {
        height: 40px;
        width: 40px; }
    #about .content p a, #about .content p a:visited {
      color: white; }
    #about .content p .entry-fee {
      width: 36px;
      height: 36px;
      border-radius: 20px;
      border: 2px solid #b08010;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
      background: #fff8e0;
      text-align: center;
      line-height: 36px;
      font-weight: bold;
      color: black; }

.btn-where-when {
  position: absolute;
  top: 0;
  right: 0; }
  .btn-where-when i {
    background-color: white;
    background-image: url("images/pin.svg"); }
  .btn-where-when span {
    background: none;
    box-shadow: none;
    padding: 7px 0;
    display: block;
    text-align: center; }

#section-leaflets {
  padding-top: 60px; }
  #section-leaflets img {
    height: 430px;
    margin-right: -200px;
    box-shadow: 0 2px 3px black; }
  #section-leaflets #leaflet1 {
    transform: rotate(-0.03turn); }
  #section-leaflets #leaflet2 {
    transform: rotate(-0.01turn); }
  #section-leaflets #leaflet3 {
    transform: rotate(0.01turn); }

#section-now-showing {
  margin: 2em 0;
  position: relative; }
  #section-now-showing.section-now-showing-hiatus #now-showing {
    opacity: 0.2; }
  #section-now-showing .hiatus-overlay {
    position: absolute;
    top: 40%;
    left: 100px;
    right: 100px;
    min-height: 30px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 2px;
    box-shadow: 0 0 150px black, 0 0 80px black;
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: 20px; }

p.series-ident {
  font-size: 14px;
  text-transform: uppercase;
  margin: 0; }
  p.series-ident, article.event p.series-ident {
    color: #f8dda2; }
  p.series-ident + h3 {
    margin-top: 3px; }

#now-showing {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px; }
  #now-showing figure {
    box-shadow: 0 2px 3px black;
    position: relative;
    margin: 0 auto;
    min-height: 450px; }
    #now-showing figure img.series-picture {
      z-index: 1;
      opacity: 0; }
      #now-showing figure img.series-picture.show {
        opacity: 1; }
    #now-showing figure#slot1 {
      margin: 0 auto 0 0; }
    #now-showing figure#slot2 {
      margin: 0 auto 0 auto; }
    #now-showing figure#slot3 {
      margin: 0 0 0 auto; }
    #now-showing figure.hide {
      display: none; }
    #now-showing figure figcaption {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 8px 60px 8px 10px;
      background: rgba(0, 0, 0, 0.5);
      min-height: 55px;
      color: white;
      text-shadow: 0 0.5px 2px black;
      font-size: 18px;
      font-weight: bold;
      z-index: 3; }
      #now-showing figure figcaption p.movie-ident {
        font-size: 14px;
        text-transform: uppercase;
        margin: 0;
        color: #9af3aa; }
        #now-showing figure figcaption p.movie-ident + h3 {
          margin-top: 3px; }
    #now-showing figure img.rating-img {
      position: absolute;
      bottom: 8px;
      right: 8px;
      z-index: 4;
      width: 54px;
      height: 54px; }
    #now-showing figure a.play {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      text-align: center;
      line-height: 450px;
      cursor: pointer;
      transition: opacity 0.6s ease-out;
      opacity: 0;
      z-index: 2;
      background: rgba(0, 0, 0, 0.5);
      color: white;
      font-weight: bold;
      text-shadow: 0 1px 1px black; }
    #now-showing figure:hover a.play {
      transition: opacity 0.2s ease-out;
      opacity: 1; }
    #now-showing figure .rating-hover {
      right: 5px; }
      #now-showing figure .rating-hover .rating__tag {
        right: 21px; }

.history-week {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 40px; }

/*
figure#recommendation {
  margin: 0;
  height: 360px;
  padding: 0;

  figcaption {
    padding: 20px 270px 0 20px;

    h3 {
      font-size: 22px;
    }
  }

  > img {
    position: absolute;
    top: 0;
    right: 0;
    width: 252px;
    height: 360px;

    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
  }
}
*/
.rating-hover {
  display: none;
  position: absolute;
  bottom: -52px;
  right: 0;
  background: black;
  border-radius: 3px;
  padding: 2px;
  border: 1px solid #333;
  box-shadow: 0 2px 6px black;
  z-index: 1000; }
  .rating-hover.rating-hover--show {
    display: block; }
  .rating-hover span {
    display: block;
    border: 2px solid white;
    border-radius: 2px;
    padding: 3px 7px;
    color: white;
    font-weight: normal;
    white-space: nowrap; }
  .rating-hover.rating-hover-15 span {
    border-color: #FFA4F2; }
  .rating-hover.rating-hover-12 span {
    border-color: #FFC673; }
  .rating-hover.rating-hover-pg span {
    border-color: #FFFE89; }
  .rating-hover.rating-hover-u span {
    border-color: #A6FFA5; }
  .rating-hover .rating__tag {
    position: absolute;
    top: -10px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid black; }

.vpick {
  list-style: none; }
  .vpick li {
    padding: 0;
    display: block;
    clear: both;
    margin: 0.5em 0;
    cursor: pointer; }
    .vpick li a {
      padding: 5px 15px 5px 5px;
      color: white;
      font-weight: bold;
      text-shadow: 0 1px 2px black; }
      .vpick li a.pick-show {
        padding-right: 12px;
        border-right: 3px solid white;
        border-radius: 3px;
        background: rgba(0, 0, 0, 0.3); }

.pick-pane {
  display: none; }
  .pick-pane.pick-pane-show {
    display: block; }

a.trailer {
  background-image: url(images/play-button.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 54px;
  height: 54px;
  box-shadow: 0 1px 2px black;
  border-radius: 2px; }

article {
  position: relative;
  padding-left: 70px;
  margin-bottom: 20px;
  min-height: 55px; }
  article time {
    position: absolute;
    top: 0;
    left: 0; }
  article.box {
    padding-left: 85px;
    padding-top: 15px; }
    article.box time {
      top: 16px;
      left: 16px; }
  article h3, article.event p {
    color: white;
    font-weight: bold;
    text-shadow: 0 1px 1px black;
    margin: 0 0 1px 0; }
  article h3 {
    font-size: 19px; }
  article p {
    margin: 0.5em 0;
    font-size: 16px;
    color: white;
    text-shadow: 0 1px 1px black, 0 0 40px black; }
  article a {
    color: white; }
  article.event-anime .event-detail h3 {
    color: #a2d7f8; }
  article.event-social time .time__special {
    border-color: #a2f8ad; }
  article.event-social .event-detail h3 {
    color: #a2f8ad; }
  article.event-cinema .event-detail h3 {
    color: #f8b3a2; }
  article.event-skip time span {
    color: #b00; }

#events-list {
  margin-top: 0;
  padding: 2px 27px 5px 18px; }
  #events-list article:nth-child(n+11) {
    display: none; }

article.event {
  margin: 1em 0 1.5em 0;
  clear: left; }

.event-detail {
  clear: right; }
  .event-detail:after {
    content: "";
    display: block;
    clear: both; }
  .event-detail img {
    float: right;
    margin-left: 10px;
    margin-right: -10px;
    max-height: 100px;
    box-shadow: 0 1px 3px black; }
  .event-detail + .event-detail {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: 10px;
    padding-top: 10px;
    margin-left: -30px;
    margin-right: -10px;
    padding-right: 10px; }

#news-more-switch {
  text-align: center; }
  h2 + #news-more-switch {
    margin-top: -60px; }
  #news-more-switch .btn-news-more {
    margin: 0 auto 15px; }
    #news-more-switch .btn-news-more i {
      background-color: white;
      background-image: url("images/pin.svg"); }
    #news-more-switch .btn-news-more span {
      background: rgba(0, 0, 0, 0.4);
      border-radius: 20px; }
  #news-more-switch.hide {
    display: none; }

#news-more {
  display: none; }
  #news-more.show {
    display: block; }

#twitter-box {
  background-color: rgba(255, 255, 255, 0.5);
  background-image: url(images/twitterbg.png);
  background-size: 100% auto;
  border-radius: 3px;
  backdrop-filter: blur(30px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }

.timeline-Header {
  display: none; }

.float-right {
  position: absolute;
  top: 14%;
  right: 1em;
  display: block; }

#blanket {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease-in;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7); }
  #blanket.show {
    display: block;
    opacity: 1; }
  #blanket.hide {
    display: block;
    opacity: 0; }

#map-overlay {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease-in;
  position: fixed;
  z-index: 100;
  top: 10px;
  left: 20px;
  right: 20px;
  bottom: 20vh; }
  #map-overlay.show {
    display: block;
    opacity: 1; }
  #map-overlay.hide {
    display: block;
    opacity: 0; }

#map-inner {
  position: relative;
  margin: 0 auto;
  background: white;
  border-radius: 3px;
  box-shadow: 0 3px 5px black;
  max-width: 1000px;
  height: 100%;
  padding: 10px; }
  #map-inner iframe {
    width: 100%;
    height: 100%; }

#map-close {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 36px;
  height: 36px;
  border-radius: 30px;
  background: #ed3b41;
  box-shadow: 0 1px 2px black;
  text-align: center;
  color: white;
  font-weight: bold;
  font-size: 36px;
  line-height: 36px;
  cursor: pointer; }

header.top10pick {
  height: 170px; }

.top10pick + .top10pick {
  margin-top: 1.3em; }

.top10pick h2 {
  margin-top: 0.8em; }

.top10pick a.pick-list {
  display: flex;
  flex-direction: row;
  align-items: center; }
  .top10pick a.pick-list img {
    width: 60px;
    height: 60px;
    border-radius: 60px;
    margin-right: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }
  .top10pick a.pick-list span {
    display: inline-block; }

.top10pick .vpick {
  padding: 0;
  margin: 0 -30px 0 -10px; }

#top10results {
  margin-top: 1em; }

.top10 > h3 img {
  margin-top: -16px;
  width: 60px;
  height: 60px;
  border-radius: 60px;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }

.top10 ul {
  list-style: none;
  padding: 0;
  margin: 0; }

.top10 .anime {
  clear: both;
  margin-top: 1em;
  height: 156px;
  padding: 12px; }
  .top10 .anime img.top10-pic {
    float: right;
    margin: -12px -12px 0 12px;
    width: 126px;
    height: 180px; }
  .top10 .anime .top10-index img {
    display: inline-block;
    width: 36px;
    height: 36px;
    margin-right: -8px;
    border-radius: 40px;
    vertical-align: bottom; }
  .top10 .anime .top10-index span {
    display: inline-block;
    color: #f8dda2;
    font-weight: bold;
    width: 36px;
    height: 36px;
    border-radius: 36px;
    line-height: 36px;
    text-align: center;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
  .top10 .anime h4 {
    margin: 2px 0;
    font-size: 19px; }
  .top10 .anime.anime-index-1 .top10-index span {
    background: #f8dda2;
    color: black; }
  .top10 .anime.anime-index-1:after {
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: 2px solid #f8dda2;
    border-radius: 5px; }
  .top10 .anime.anime-index-2 .top10-index span, .top10 .anime.anime-index-3 .top10-index span {
    border: 2px solid #f8dda2;
    margin-top: -2px;
    margin-bottom: -2px; }
  .top10 .anime.anime-index-2:after, .top10 .anime.anime-index-3:after {
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: 1px solid #f8dda2;
    border-radius: 5px; }

.top10-genre-intro {
  margin-top: 1rem; }
  .top10-genre-intro h3 {
    margin: 0.7rem 0; }

.top10-genres {
  line-height: 30px; }
  .top10-genres a {
    cursor: pointer; }
  .top10-genres.top10-genres-big {
    line-height: 42px; }
    .top10-genres.top10-genres-big a {
      font-size: 18px;
      padding: 6px 16px;
      border-radius: 20px; }
      .top10-genres.top10-genres-big a.genre.genre-selected:before {
        border-radius: 20px; }

body.genre-filter #top10random, body.list-filter #top10random {
  display: none; }

body.genre-filter .pick-pane {
  display: block; }

#clear-genre {
  display: none;
  margin: 6px 0;
  background: white;
  background: linear-gradient(#ffffff, #e0e0e0);
  padding: 3px 10px;
  border-radius: 2px;
  box-shadow: 0 2px 3px black;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer; }

body.genre-filter .anime {
  display: none; }

body.genre-filter #clear-genre {
  display: inline-block; }

.genre {
  color: white;
  font-weight: 600;
  display: inline-block;
  white-space: nowrap;
  margin-right: 6px;
  padding: 1px 6px;
  border-radius: 3px;
  line-height: 20px;
  font-size: 13px;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.6); }
  .genre.genre-selected {
    position: relative;
    outline: 2px solid black; }
    .genre.genre-selected:before {
      content: "";
      display: block;
      pointer-events: none;
      position: absolute;
      top: -5px;
      left: -5px;
      right: -5px;
      bottom: -5px;
      border: 2px solid white;
      border-radius: 8px; }

.genre.genre-number1 {
  background: #aa8c00; }

body.genre-filter.genre-filter-number1 .anime.anime-genre-number1 {
  display: block; }

.genre.genre-thriller {
  background: maroon; }

body.genre-filter.genre-filter-thriller .anime.anime-genre-thriller {
  display: block; }

.genre.genre-romance {
  background: #a01000; }

body.genre-filter.genre-filter-romance .anime.anime-genre-romance {
  display: block; }

.genre.genre-sports {
  background: #b46e00; }

body.genre-filter.genre-filter-sports .anime.anime-genre-sports {
  display: block; }

.genre.genre-action {
  background: olive; }

body.genre-filter.genre-filter-action .anime.anime-genre-action {
  display: block; }

.genre.genre-crime {
  background: #601000; }

body.genre-filter.genre-filter-crime .anime.anime-genre-crime {
  display: block; }

.genre.genre-drama {
  background: #207400; }

body.genre-filter.genre-filter-drama .anime.anime-genre-drama {
  display: block; }

.genre.genre-comedy {
  background: green; }

body.genre-filter.genre-filter-comedy .anime.anime-genre-comedy {
  display: block; }

.genre.genre-adventure {
  background: #006000; }

body.genre-filter.genre-filter-adventure .anime.anime-genre-adventure {
  display: block; }

.genre.genre-sci-fi {
  background: #006060; }

body.genre-filter.genre-filter-sci-fi .anime.anime-genre-sci-fi {
  display: block; }

.genre.genre-music {
  background: #6000a0; }

body.genre-filter.genre-filter-music .anime.anime-genre-music {
  display: block; }

.genre.genre-shounen {
  background: #008cb4; }

body.genre-filter.genre-filter-shounen .anime.anime-genre-shounen {
  display: block; }

.genre.genre-mecha {
  background: #008060; }

body.genre-filter.genre-filter-mecha .anime.anime-genre-mecha {
  display: block; }

.genre.genre-isekai {
  background: #004080; }

body.genre-filter.genre-filter-isekai .anime.anime-genre-isekai {
  display: block; }

.genre.genre-slice-of-life {
  background: navy; }

body.genre-filter.genre-filter-slice-of-life .anime.anime-genre-slice-of-life {
  display: block; }

.genre.genre-mystery {
  background: #6e0060; }

body.genre-filter.genre-filter-mystery .anime.anime-genre-mystery {
  display: block; }

.genre.genre-war {
  background: #a00020; }

body.genre-filter.genre-filter-war .anime.anime-genre-war {
  display: block; }

.genre.genre-dark {
  background: #202020; }

body.genre-filter.genre-filter-dark .anime.anime-genre-dark {
  display: block; }

.genre.genre-first {
  background: green; }

body.genre-filter.genre-filter-first .anime.anime-genre-first {
  display: block; }

@media (min-width: 1470px) {
  a#home-link {
    font-size: 18px;
    float: left;
    margin-top: 2em;
    margin-left: -100px; } }

@media (min-width: 1281px) {
  #now-showing figure, #now-showing figure img.series-picture {
    width: 315px;
    height: 450px; }
  header#header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 40px; }
    header#header > div {
      display: flex;
      flex-direction: column;
      justify-content: space-between; }
    header#header section {
      flex: 1 0 auto; } }

@media (max-width: 1280px) {
  #now-showing figure {
    min-height: auto; }
    #now-showing figure, #now-showing figure img.series-picture {
      width: 22vw;
      margin-bottom: -5px; }
  .btn-where-when {
    right: 5px; }
  .top10 .anime img.top10-pic {
    margin-left: 5px; }
  .anime h4 {
    font-size: 17px; }
  .top10-genres {
    line-height: 28px; }
  #next-showing {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 20px; } }

@media (min-width: 801px) {
  body[bg='day-1'] {
    background-image: url(images/day-1.jpg); }
  body[bg='day-2'] {
    background-image: url(images/day-2.jpg); }
  body[bg='day-3'] {
    background-image: url(images/day-3.jpg); }
  body[bg='day-4'] {
    background-image: url(images/day-4.jpg); }
  body[bg='day-5'] {
    background-image: url(images/day-5.jpg); }
  body[bg='day-6'] {
    background-image: url(images/day-6.jpg); }
  body[bg='night-1'] {
    background-image: url(images/night-1.jpg); }
  body[bg='night-2'] {
    background-image: url(images/night-2.jpg); }
  body[bg='night-3'] {
    background-image: url(images/night-3.jpg); }
  body[bg='night-4'] {
    background-image: url(images/night-4.jpg); }
  body[bg='night-5'] {
    background-image: url(images/night-5.jpg); }
  body[bg='night-6'] {
    background-image: url(images/night-6.jpg); }
  body[bg='night-7'] {
    background-image: url(images/night-7.jpg); }
  body[bg='night-8'] {
    background-image: url(images/night-8.jpg); }
  body[bg='night-9'] {
    background-image: url(images/night-9.jpg); } }

@media (max-width: 800px) {
  body[bg='day-1'] {
    background-image: url(images/sm-day-1.jpg); }
  body[bg='day-2'] {
    background-image: url(images/sm-day-2.jpg); }
  body[bg='day-3'] {
    background-image: url(images/sm-day-3.jpg); }
  body[bg='day-4'] {
    background-image: url(images/sm-day-4.jpg); }
  body[bg='day-5'] {
    background-image: url(images/sm-day-5.jpg); }
  body[bg='day-6'] {
    background-image: url(images/sm-day-6.jpg); }
  body[bg='night-1'] {
    background-image: url(images/sm-night-1.jpg); }
  body[bg='night-2'] {
    background-image: url(images/sm-night-2.jpg); }
  body[bg='night-3'] {
    background-image: url(images/sm-night-3.jpg); }
  body[bg='night-4'] {
    background-image: url(images/sm-night-4.jpg); }
  body[bg='night-5'] {
    background-image: url(images/sm-night-5.jpg); }
  body[bg='night-6'] {
    background-image: url(images/sm-night-6.jpg); }
  body[bg='night-7'] {
    background-image: url(images/sm-night-7.jpg); }
  body[bg='night-8'] {
    background-image: url(images/sm-night-8.jpg); }
  body[bg='night-9'] {
    background-image: url(images/sm-night-9.jpg); }
  #logo {
    display: none; }
  #main-title {
    display: block; }
  main {
    padding-left: 10px;
    padding-right: 80px; }
  #now-showing {
    display: block; }
    #now-showing figure {
      display: block;
      width: auto;
      margin-bottom: 1em !important; }
      #now-showing figure img.series-picture {
        width: 100%; }
  section#section-discord .btn.btn-discord {
    position: revert; }
  #map-overlay {
    left: 10px;
    right: 10px;
    bottom: 30px; }
  .box.box--button {
    padding-right: 10px; }
    .box.box--button .btn {
      position: revert; } }

@media (max-width: 600px) {
  figure#recommendation {
    display: grid;
    grid-template-areas: "top" "bottom";
    height: auto; }
    figure#recommendation figcaption {
      grid-area: bottom; }
    figure#recommendation img {
      grid-area: top;
      position: revert; } }

.slideshow {
  margin-top: 2em;
  position: relative;
  overflow: hidden;
  width: 492px;
  height: 277px;
  flex: 0 0 277px !important;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5); }
  .slideshow .slideshow-slider {
    position: absolute;
    top: 0;
    left: 0;
    transition: left 0.6s ease-in-out, top 0.6s ease-in-out; }
    .slideshow .slideshow-slider .row {
      display: flex;
      flex-direction: row; }
    .slideshow .slideshow-slider img {
      width: 492px;
      height: 277px; }
  .slideshow.pos1 .slideshow-slider {
    left: 0;
    top: 0; }
  .slideshow.pos2 .slideshow-slider {
    left: -492px;
    top: 0; }
  .slideshow.pos3 .slideshow-slider {
    left: -492px;
    top: -277px; }
  .slideshow.pos4 .slideshow-slider {
    left: 0;
    top: -277px; }