@charset "UTF-8";
/* Links, Buttons,... */
/* Fließtext, Subtext, Marker, Input-Felder,... */
/* Trenner, Nav-Links, Button-Text,... */
/* nur content-bg! */
/* nur body-bg! */
/* wallpaper body-bg */
/*
██████   █████  ███████ ██  ██████ ███████
██   ██ ██   ██ ██      ██ ██      ██
██████  ███████ ███████ ██ ██      ███████
██   ██ ██   ██      ██ ██ ██           ██
██████  ██   ██ ███████ ██  ██████ ███████
*/
/*** BASICS (_base.scss) ***/
/* Trennlinie */
/* Wallpaper (_wallpaper.scss) */
/* Kinoheld iframe */
/* Cookie-Bar (_base.scss) */
/* Social-Icons im Header (_base.scss) */
/* Header-BG bei Wallpaper */
/* Kino-Logo im Head */
/* left, center, right */
/* Head-Slider (_head-slider.scss) */
/* Überschriften (_base.scss) */
/* ab 768px Breite des Viewports */
/* Fließtext (_base.scss) */
/* Content (_base.scss) */
/* Formulare (_base.scss) */
/* Buttons (_base.scss) */
/* 404-Icon (!-Zeichen) (_base.scss) */
/* Seitenwechsler vor zurück und Seitennummer (Gästebuch, Archive) (_base.scss) */
/* Footer (_base.scss) */
/*
███    ██  █████  ██    ██ ██  ██████   █████  ████████ ██  ██████  ███    ██
████   ██ ██   ██ ██    ██ ██ ██       ██   ██    ██    ██ ██    ██ ████   ██
██ ██  ██ ███████ ██    ██ ██ ██   ███ ███████    ██    ██ ██    ██ ██ ██  ██
██  ██ ██ ██   ██  ██  ██  ██ ██    ██ ██   ██    ██    ██ ██    ██ ██  ██ ██
██   ████ ██   ██   ████   ██  ██████  ██   ██    ██    ██  ██████  ██   ████
*/
/*** HAUPT-NAVIGATION (_nav.scss) ***/
/* horizontale Navigation */
/* Trenner */
/* line-height für Finger-Touch. z.B. auf Tablet */
/* line-height für Mausbedienung */
/* Trenner */
/* kann auch eine Grafik sein */
/* Höhe Navigationskarussell */
/* Mobile-Nav */
/* Trennlinie */
/* kann auch eine Grafik sein */
/* vertikale Navigation */
/* Trennlinie */
/* kann auch eine Grafik sein */
/*
██   ██  ██████  ███    ███ ███████     ██ ███████ ██    ██ ███████ ███    ██ ████████
██   ██ ██    ██ ████  ████ ██         ██  ██      ██    ██ ██      ████   ██    ██
███████ ██    ██ ██ ████ ██ █████     ██   █████   ██    ██ █████   ██ ██  ██    ██
██   ██ ██    ██ ██  ██  ██ ██       ██    ██       ██  ██  ██      ██  ██ ██    ██
██   ██  ██████  ██      ██ ███████ ██     ███████   ████   ███████ ██   ████    ██
*/
/*** HOME/EVENT-SEITE (_events.scss) ***/
/* Home/Event-Seite (_events.scss) */
/* Home/Event-Detail-Seite (_events.scss) */
/* Rahmen um Thumbnails bei Bildergalerie */
/*
██████  ██████   ██████   ██████  ██████   █████  ███    ███ ███    ███
██   ██ ██   ██ ██    ██ ██       ██   ██ ██   ██ ████  ████ ████  ████
██████  ██████  ██    ██ ██   ███ ██████  ███████ ██ ████ ██ ██ ████ ██
██      ██   ██ ██    ██ ██    ██ ██   ██ ██   ██ ██  ██  ██ ██  ██  ██
██      ██   ██  ██████   ██████  ██   ██ ██   ██ ██      ██ ██      ██
*/
/*** PROGRAMM-SEITEN ***/
/* Filter (_filter.scss) */
/* movie-poster-box (_program-grid.scss) */
/* movie-tec-icon (2D, 3D, rechts am Plakat eingeklinkt) (_program-grid.scss) */
/* movie-series-box (Filmreihen-Box auf Plakat) (_program-grid.scss) */
/* movie-fsk-tec-box (Box unter Plakat mit FSK, DBOX, DOLBY, etc) (_program-grid.scss) */
/* Button Info/Tickets (_program-grid.scss) */
/* alternative Grid-Darstellung (_program-grid.scss) */
/* $movie-box-list (Programm-Listendarstellung) (_program-list.scss) */
/* Trennlinie */
/* movie-times-table (Programm-Listendarstellung, Zeitentabelle) (_program-list.scss) */
/* Programm-Detail-Seite (_movie-details.scss) */
/* (z.B. Buttons DBOX, ATMOS, THX,...)  */
/* posterSlider, poster-slider (_posterslider.scss) */
/*
████████ ██████   █████  ██ ██      ███████ ██████  ██████  ██       █████  ██    ██ ███████ ██████
   ██    ██   ██ ██   ██ ██ ██      ██      ██   ██ ██   ██ ██      ██   ██  ██  ██  ██      ██   ██
   ██    ██████  ███████ ██ ██      █████   ██████  ██████  ██      ███████   ████   █████   ██████
   ██    ██   ██ ██   ██ ██ ██      ██      ██   ██ ██      ██      ██   ██    ██    ██      ██   ██
   ██    ██   ██ ██   ██ ██ ███████ ███████ ██   ██ ██      ███████ ██   ██    ██    ███████ ██   ██
*/
/*** TRAILERPLAYER (video.scss) ***/
/* Trennlinie */
/* äußere Kante des Playlist-Kastens */
/*
███████ ██ ███    ██ ████████ ██████  ██ ████████ ████████ ███████ ██████  ██████  ███████ ██ ███████ ███████
██      ██ ████   ██    ██    ██   ██ ██    ██       ██    ██      ██   ██ ██   ██ ██      ██ ██      ██
█████   ██ ██ ██  ██    ██    ██████  ██    ██       ██    ███████ ██████  ██████  █████   ██ ███████ █████
██      ██ ██  ██ ██    ██    ██   ██ ██    ██       ██         ██ ██      ██   ██ ██      ██      ██ ██
███████ ██ ██   ████    ██    ██   ██ ██    ██       ██    ███████ ██      ██   ██ ███████ ██ ███████ ███████
*/
/*** EINTRITTSPREISE (_entryprice.scss) ***/
/* fira-sans-condensed-regular - latin */
@font-face {
  font-family: "Fira Sans Extra Condensed";
  font-style: normal;
  font-weight: 400;
  src: local(""), url("../../../fonts/fira-sans-extra-condensed-v5-latin-regular.woff2") format("woff2"), url("../../../fonts/fira-sans-extra-condensed-v5-latin-regular.woff") format("woff");
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* fira-sans-extra-condensed-700 - latin */
@font-face {
  font-family: "Fira Sans Extra Condensed";
  font-style: normal;
  font-weight: 700;
  src: local(""), url("../../../fonts/fira-sans-extra-condensed-v5-latin-700.woff2") format("woff2"), url("../../../fonts/fira-sans-extra-condensed-v5-latin-700.woff") format("woff");
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-regular - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  src: url("../../../fonts/roboto-v27-latin-700.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-regular - latin */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src: local(""), url("../../../fonts/open-sans-v23-latin-regular.woff2") format("woff2"), url("../../../fonts/open-sans-v23-latin-regular.woff") format("woff");
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-700 - latin */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  src: local(""), url("../../../fonts/open-sans-v23-latin-700.woff2") format("woff2"), url("../../../fonts/open-sans-v23-latin-700.woff") format("woff");
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
.movieSlide, .event-poster-box, .fotoGallery, .btn, .slider, #openFixTicket, table.movie-times-table td a, .cinema-logo, .movie-poster {
  transition: transform 0.3s ease !important; /* Sanfte Animation */
}

.movieSlide:hover, .event-poster-box:hover, .fotoGallery:hover, .btn:hover, .slider:hover, #openFixTicket:hover, table.movie-times-table td a:hover, .cinema-logo:hover, .movie-poster:hover {
  transform: scale(1.05); /* vergrößert um 5% */
  z-index: 999;
}

html {
  font-size: 15px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.2);
}

body {
  background: #0c050c;
  background-image: url("../img/body_bg.jpg");
  background-size: 100%;
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: "Open Sans", sans-serif;
  font-size: 1rem;
  color: white;
}

img {
  border-radius: 15px;
}

#programNavButtons {
  background: #d11935;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 22;
  height: 60px;
  line-height: 3.8;
  text-align: center;
  border-top: 5px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.49);
}
#programNavButtons a {
  font-weight: bold;
  color: white;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  padding: 10px 15px;
}
#programNavButtons a:last-child {
  border-right: 0;
}
#programNavButtons a.active {
  background: rgba(0, 0, 0, 0.2);
}
@media only screen and (min-width: 768px) {
  #programNavButtons {
    display: none;
  }
}

div#wallpaper-container {
  overflow: hidden;
}

.main {
  background: rgba(0, 0, 0, 0.7);
  margin-top: 0px;
}
@media only screen and (min-width: 500px) {
  .main {
    max-width: 1400px;
    border-radius: 15px;
  }
}

.overlayCloseIcon {
  fill: white;
  position: absolute;
  top: 20px;
  right: 20px;
  width: 35px;
  height: 35px;
  cursor: pointer;
}

#openFixTicket {
  position: fixed;
  right: 0;
  transition: right 0.2s ease-in-out;
  bottom: 80px;
  z-index: 100;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.5882352941);
  font-size: 1.4rem;
  padding: 10px;
  border-radius: 10px 0px 0px 10px;
  background: #d11935 !important;
  transition: all 0.3s ease !important;
}

#openFixTicket:hover {
  background: rgba(209, 25, 53, 0.95) !important;
}

@media (min-width: 768px) {
  #openFixTicket {
    bottom: 50px;
    padding: 20px;
  }
}
#fixTicket_overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  right: -100%;
  font-size: 1rem;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 1000;
  cursor: pointer;
  overflow-y: scroll;
  transition: right 0.2s ease-in-out;
  padding: 25px;
  /* Sanfter Übergang für die rechte Eigenschaft */
}
@media only screen and (min-width: 768px) {
  #fixTicket_overlay {
    width: 450px;
    height: 100%;
    bottom: 0;
  }
}

#resetFixTicket {
  margin-bottom: 50px;
  margin-top: 5px;
  display: block;
  font-size: 0.9rem;
}

/* Stile, wenn das Overlay sichtbar ist */
#fixTicket_overlay.show {
  right: 0;
  /* Verschieben des Overlays auf den Bildschirm */
}

#fixTicket_content {
  max-width: 800px;
}

#fixTicket_content h3 {
  -webkit-text-fill-color: white;
  background: none;
  -webkit-background-clip: text;
  color: white;
  border: none;
}

.custom-dropdown {
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  margin-bottom: 10px;
}

.custom-select-trigger {
  background: #d11935;
  border: none;
  border-radius: 10px;
  color: white;
  cursor: pointer;
  padding: 10px 20px;
}

.custom-options {
  display: none;
  position: absolute;
  top: 120%;
  left: 0;
  right: 0;
  color: white;
  background: #191919;
  z-index: 2;
}

.custom-dropdown.opened .custom-options {
  display: block;
}

.custom-option {
  padding: 10px;
  cursor: pointer;
}

.custom-option:hover {
  color: white;
  background-color: rgba(209, 25, 53, 0.5);
}

#fixTicketSubmitBtn {
  cursor: pointer;
}

.ticketOverlayCloseIcon {
  fill: white;
  position: absolute;
  top: 60px;
  right: 60px;
  width: 35px;
  height: 35px;
  cursor: pointer;
}

.chevronDown {
  max-width: 13px;
  color: #ffffff !important;
}

.custom-select-trigger {
  position: relative;
  /* display: flex;
     justify-content: space-between; */
}

.custom-select-trigger::after {
  content: "";
  /* Notwendig, damit das Pseudo-Element erzeugt wird, aber es trägt keinen Text */
  display: inline-block;
  font-size: 10px;
  content: "▼";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.custom-select-trigger:hover::after {
  opacity: 0.5;
  /* Ändert die Farbe des Icons beim Hover (optional) */
}

.custom-select-trigger.is-open::after {
  content: "▲";
  /* Chevron up */
}

#whatIsUrDesire.inactive,
#fixTicketSubmitBtn.inactive {
  display: none;
}

#whatIsUrDesire h3 {
  margin-bottom: 20px;
}

.chooseType {
  display: inline-block;
  border: 3px solid #d11935;
  padding: 10px 20px;
  border-radius: 10px;
  color: white;
  font-weight: bold;
}

.chooseType:hover {
  opacity: 0.5;
  color: rgb(179, 179, 179);
}

#resetFixTicket {
  font-weight: bold;
  color: gray;
}
#resetFixTicket:hover {
  color: white;
}

.container-fluid {
  clear: both !important;
}

.content-bg {
  background: none;
  padding-top: 15px;
  border: 0;
  border-radius: 15px;
  box-shadow: 0;
}

h1 {
  font-family: "Roboto", sans-serif;
  font-size: 30px;
  font-weight: 400;
  color: white;
  text-shadow: 0;
  margin-top: 20px;
  margin-bottom: 10px;
  margin-left: 15px;
  border: none;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  h1 {
    font-size: 40px;
    text-align: left;
  }
}

.vertical h1 {
  margin-left: 0;
}

h2,
h3 {
  font-family: "Roboto", sans-serif;
  text-shadow: none;
  font-size: 25px;
  font-weight: bold;
  border: none;
  margin-top: 0px;
}
@media only screen and (min-width: 768px) {
  h2,
  h3 {
    font-size: 30px;
  }
}

h4 {
  font-weight: bold;
}

h2,
h3,
h4 {
  overflow: hidden;
  text-overflow: ellipsis;
}

h1,
h2,
h3,
h4 {
  line-height: 1.3;
}

a {
  transition: all 0.1s linear;
}

a,
a:hover,
a:focus {
  text-decoration: none;
  color: #d11935;
}

a:focus {
  outline: 0;
}

::-moz-focus-inner {
  border: 0;
}

p {
  margin-bottom: 1rem;
}

.back-link {
  margin-top: 30px;
  display: block;
}

.margin-lr-0 {
  margin-left: 0;
  margin-right: 0;
}

.padding-lr-0 {
  padding-left: 0;
  padding-right: 0;
}

@media only screen and (min-width: 768px) {
  .padding-r-0 {
    padding-right: 0;
  }
}

.no-border {
  border: 0;
}

@media (min-width: 1600px) {
  .col-xl-3 {
    width: 25%;
  }
  .col-xl-2 {
    width: 20%;
  }
  .col-xl-5 {
    width: 50%;
  }
  .col-xl-10 {
    width: 80%;
  }
}
.content-text a {
  color: #d11935;
}
.content-text a:hover {
  color: white;
}

.subtext {
  font-size: 0.85rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.65);
}
.subtext span {
  color: white;
}

.movie-text {
  text-align: justify;
}

.fsk-icon {
  font-size: 1.7rem;
  position: relative;
  left: -5px;
  bottom: -5px;
}

.divider {
  border-bottom: 1px solid rgba(198, 37, 0, 0.3);
  width: calc(100% - 30px);
  margin: 0 0 30px 15px;
  padding: 0;
}

#kinoheld-widget {
  background: rgba(0, 0, 0, 0.7);
  padding: 0px 10px;
}

#atradaFrame {
  height: 1000px;
}

/* Recaptcha v.1 */
#recaptchatable {
  background-color: white;
}

#recaptcha_logo {
  display: none;
}

/* Werbebanner */
.crossbanner-top,
.crossbanner-bottom {
  margin-bottom: 20px;
}
@media only screen and (min-width: 992px) {
  .crossbanner-top,
  .crossbanner-bottom {
    height: 105px !important;
    margin-bottom: 15px;
  }
}
.crossbanner-top img,
.crossbanner-bottom img {
  width: 100%;
}
@media only screen and (min-width: 992px) {
  .crossbanner-top img,
  .crossbanner-bottom img {
    max-width: 728px;
  }
}

@media only screen and (min-width: 993px) {
  .wallpaper .crossbanner-top,
  .wallpaper .crossbanner-bottom {
    height: 85px !important;
  }
}
@media only screen and (min-width: 1100px) {
  .wallpaper .crossbanner-top,
  .wallpaper .crossbanner-bottom {
    height: 90px !important;
  }
}
@media only screen and (min-width: 1200px) {
  .wallpaper .crossbanner-top,
  .wallpaper .crossbanner-bottom {
    height: 95px !important;
  }
}
@media only screen and (min-width: 1300px) {
  .wallpaper .crossbanner-top,
  .wallpaper .crossbanner-bottom {
    height: 100px !important;
  }
}
@media only screen and (min-width: 1400px) {
  .wallpaper .crossbanner-top,
  .wallpaper .crossbanner-bottom {
    height: 105px !important;
  }
}
.wallpaper .crossbanner-top img,
.wallpaper .crossbanner-bottom img {
  width: 100%;
}
@media only screen and (min-width: 992px) {
  .wallpaper .crossbanner-top img,
  .wallpaper .crossbanner-bottom img {
    max-width: none;
  }
}
@media only screen and (min-width: 1400px) {
  .wallpaper .crossbanner-top img,
  .wallpaper .crossbanner-bottom img {
    max-width: 728px;
  }
}

@media only screen and (min-width: 993px) {
  .vertical .crossbanner-top,
  .vertical .crossbanner-bottom {
    height: 90px !important;
  }
}
@media only screen and (min-width: 1000px) {
  .vertical .crossbanner-top,
  .vertical .crossbanner-bottom {
    height: 95px !important;
  }
}
@media only screen and (min-width: 1100px) {
  .vertical .crossbanner-top,
  .vertical .crossbanner-bottom {
    height: 100px !important;
  }
}
@media only screen and (min-width: 1200px) {
  .vertical .crossbanner-top,
  .vertical .crossbanner-bottom {
    height: 105px !important;
  }
}
.vertical .crossbanner-top img,
.vertical .crossbanner-bottom img {
  width: 100%;
}
@media only screen and (min-width: 992px) {
  .vertical .crossbanner-top img,
  .vertical .crossbanner-bottom img {
    max-width: none;
  }
}
@media only screen and (min-width: 1200px) {
  .vertical .crossbanner-top img,
  .vertical .crossbanner-bottom img {
    max-width: 728px;
  }
}

@media only screen and (min-width: 993px) {
  .vertical.wallpaper .crossbanner-top,
  .vertical.wallpaper .crossbanner-bottom {
    height: 95px !important;
  }
}
@media only screen and (min-width: 1000px) {
  .vertical.wallpaper .crossbanner-top,
  .vertical.wallpaper .crossbanner-bottom {
    height: 100px !important;
  }
}
@media only screen and (min-width: 1100px) {
  .vertical.wallpaper .crossbanner-top,
  .vertical.wallpaper .crossbanner-bottom {
    height: 105px !important;
  }
}
@media only screen and (min-width: 1200px) {
  .vertical.wallpaper .crossbanner-top,
  .vertical.wallpaper .crossbanner-bottom {
    height: 65px !important;
  }
}
@media only screen and (min-width: 1300px) {
  .vertical.wallpaper .crossbanner-top,
  .vertical.wallpaper .crossbanner-bottom {
    height: 75px !important;
  }
}
@media only screen and (min-width: 1400px) {
  .vertical.wallpaper .crossbanner-top,
  .vertical.wallpaper .crossbanner-bottom {
    height: 85px !important;
  }
}
@media only screen and (min-width: 1500px) {
  .vertical.wallpaper .crossbanner-top,
  .vertical.wallpaper .crossbanner-bottom {
    height: 90px !important;
  }
}
@media only screen and (min-width: 1600px) {
  .vertical.wallpaper .crossbanner-top,
  .vertical.wallpaper .crossbanner-bottom {
    height: 100px !important;
  }
}
@media only screen and (min-width: 1700px) {
  .vertical.wallpaper .crossbanner-top,
  .vertical.wallpaper .crossbanner-bottom {
    height: 105px !important;
  }
}
.vertical.wallpaper .crossbanner-top img,
.vertical.wallpaper .crossbanner-bottom img {
  width: 100%;
}
@media only screen and (min-width: 992px) {
  .vertical.wallpaper .crossbanner-top img,
  .vertical.wallpaper .crossbanner-bottom img {
    max-width: none;
  }
}
@media only screen and (min-width: 1700px) {
  .vertical.wallpaper .crossbanner-top img,
  .vertical.wallpaper .crossbanner-bottom img {
    max-width: 728px;
  }
}

.crossbanner-bottom,
.crossbanner-top {
  position: relative;
}

.crossbanner-bottom {
  margin-top: 15px;
  margin-bottom: 0px !important;
}
@media only screen and (min-width: 992px) {
  .crossbanner-bottom {
    margin-top: 0px;
  }
}

@media only screen and (min-width: 992px) {
  .wallpaper .crossbanner-bottom {
    margin-top: 15px !important;
  }
}
@media only screen and (min-width: 1400px) {
  .wallpaper .crossbanner-bottom {
    margin-top: 0px !important;
  }
}

@media only screen and (min-width: 992px) {
  .vertical .crossbanner-bottom {
    margin-top: 15px !important;
  }
}
@media only screen and (min-width: 1200px) {
  .vertical .crossbanner-bottom {
    margin-top: 0px !important;
  }
}

@media only screen and (min-width: 992px) {
  .vertical.wallpaper .crossbanner-bottom {
    margin-top: 15px !important;
  }
}
@media only screen and (min-width: 1700px) {
  .vertical.wallpaper .crossbanner-bottom {
    margin-top: 0px !important;
  }
}

.bannerLink {
  position: static;
}

.banner {
  position: absolute;
  left: 0;
}
@media only screen and (min-width: 992px) {
  .banner {
    left: calc(50% - 364px);
    top: 15px;
  }
}

@media only screen and (min-width: 992px) {
  .wallpaper .banner {
    left: 0;
    top: 0;
  }
}
@media only screen and (min-width: 1400px) {
  .wallpaper .banner {
    left: calc(50% - 364px);
    top: 15px;
  }
}

@media only screen and (min-width: 992px) {
  .vertical .banner {
    left: 0;
    top: 0;
  }
}
@media only screen and (min-width: 1200px) {
  .vertical .banner {
    left: calc(50% - 364px);
    top: 15px;
  }
}

@media only screen and (min-width: 992px) {
  .vertical.wallpaper .banner {
    left: 0;
    top: 0;
  }
}
@media only screen and (min-width: 1700px) {
  .vertical.wallpaper .banner {
    left: calc(50% - 364px);
    top: 15px;
  }
}

.bannerShowActive {
  opacity: 1 !important;
  z-index: 10;
}

.bannerShowInactive {
  opacity: 0;
}

.bannerShowFade {
  z-index: 11;
  opacity: 0;
  transition: opacity 0.3s ease-in !important;
}

.homeContent .crossbanner-top {
  margin-top: -15px;
  margin-bottom: 30px;
}

.homeContent .crossbanner-bottom {
  height: 70px;
}
@media only screen and (min-width: 500px) {
  .homeContent .crossbanner-bottom {
    height: 90px;
  }
}
@media only screen and (min-width: 600px) {
  .homeContent .crossbanner-bottom {
    height: 100px;
  }
}
@media only screen and (min-width: 700px) {
  .homeContent .crossbanner-bottom {
    height: 115px;
  }
}
@media only screen and (min-width: 800px) {
  .homeContent .crossbanner-bottom {
    height: 130px;
  }
}
@media only screen and (min-width: 900px) {
  .homeContent .crossbanner-bottom {
    height: 140px;
  }
}

#cookie-bar {
  color: white;
  background: white;
  text-align: center;
  padding: 15px;
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 100;
  opacity: 0.95;
  box-shadow: 0 -2px 8px 0 rgba(0, 0, 0, 0.27);
}
@media only screen and (min-width: 870px) {
  #cookie-bar {
    padding: 20px 15px 0px 15px;
  }
}
#cookie-bar p {
  margin-bottom: 0;
}
#cookie-bar .cb-enable {
  float: right;
  width: 100%;
  margin-top: 10px;
}
@media only screen and (min-width: 870px) {
  #cookie-bar .cb-enable {
    width: auto;
    margin-top: -5px;
    margin-bottom: 15px;
  }
}

/* header */
header {
  position: relative;
  text-align: center;
  margin-top: 10px;
}
@media only screen and (min-width: 768px) {
  header {
    margin-top: 0;
  }
}

.wallpaper header {
  background: none;
}

header.trailerplayer_title {
  margin-top: 0;
}

header picture {
  position: relative;
  z-index: 1;
}

.cinema-logo {
  width: 85%;
  max-width: 450px;
  margin: 50px 0 20px 0;
  border-radius: 0;
  filter: drop-shadow(2px 4px 6px rgb(0, 0, 0));
}
@media only screen and (min-width: 768px) {
  .cinema-logo {
    margin: 30px 0 20px 0;
    max-width: 600px;
  }
}

.wallpaper .cinema-logo {
  margin-top: 25px;
}
@media only screen and (min-width: 768px) {
  .wallpaper .cinema-logo {
    margin: 30px 0 15px 0;
    max-width: 320px;
  }
}

div#sublogo-txt {
  color: white;
  font-size: 1rem;
  margin-top: -18px;
  margin-bottom: 20px;
  text-shadow: 0 4px 7px rgb(0, 0, 0);
}
@media only screen and (min-width: 500px) {
  div#sublogo-txt {
    font-size: 1.3rem;
  }
}
@media only screen and (min-width: 768px) {
  div#sublogo-txt {
    font-size: 1.5rem;
  }
}
@media only screen and (min-width: 992px) {
  div#sublogo-txt {
    font-size: 1.8rem;
    margin-top: -38px;
  }
}

.social-icons {
  position: absolute;
  top: 6px;
  font-size: 1.4rem;
  z-index: 12;
}
.social-icons a {
  color: white;
  background: #d11935;
  padding: 8px;
  border: none;
  border-radius: 0 0 15px 15px;
}
.social-icons a:hover {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(209, 25, 53, 0.8);
}

#social-icons-inner {
  display: none;
}
@media only screen and (min-width: 768px) {
  #social-icons-inner {
    right: 15px;
    display: block;
  }
}

#social-icons-outer {
  right: 0px;
}
@media only screen and (min-width: 768px) {
  #social-icons-outer {
    display: none;
  }
}

.social-links {
  display: table;
  margin-top: 20px;
  margin-bottom: 10px;
}

#logo-twitter {
  margin-right: 5px;
  padding: 8px 2px 8px 8px;
}

#logo-twitter-big {
  margin-right: 5px;
  padding: 8px 2px 8px 8px;
}

.form-control {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  border: none;
  box-shadow: none;
  border-radius: 15px;
  font-size: 1rem;
}
.form-control:focus {
  outline: none;
  box-shadow: none;
  border-color: white;
  box-shadow: none;
}
.form-control::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.form-control:-moz-placeholder {
  /* Firefox 18- */
  color: rgba(255, 255, 255, 0.5);
}
.form-control::-moz-placeholder {
  /* Firefox 19+ */
  color: rgba(255, 255, 255, 0.5);
}
.form-control:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.form-error-message {
  color: #d11935;
}

.btn {
  font-size: 1rem;
  transition: all 0.3s ease;
}
.btn:hover, .btn:focus, .btn:active, .btn:active:focus {
  outline: none;
  color: white;
  background-color: #FCEFD6;
  border-color: #FCEFD6;
  box-shadow: none;
}

.btn-default {
  color: white;
  background-color: #d11935;
  border: none;
  box-shadow: none;
  border-radius: 15px;
}
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default:active:hover {
  color: rgba(255, 255, 255, 0.8);
  background-color: rgba(209, 25, 53, 0.8);
  border: none;
  box-shadow: none;
}

.btn-default.disabled {
  background-color: rgba(255, 255, 255, 0.5);
  border: none;
}

.icon-404 {
  font-size: 10rem;
  opacity: 0.8;
  padding: 0 0 10px 10px;
  color: rgba(209, 25, 53, 0.5);
}

#paging {
  text-align: center;
}
#paging a {
  margin: 0 3px 0 3px;
  padding: 5px 15px 7px 15px;
  border: 1px solid #d11935;
  border-radius: 15px;
  line-height: 60px;
  font-weight: bold;
}
#paging a:hover {
  background: #d11935;
  color: white;
}
#paging .guestbookNavigation.inactive {
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.4);
  cursor: default;
}
#paging .guestbookNavigation.inactive:hover {
  background: none;
}
#paging #page-number {
  font-weight: bold;
  margin: 0 3px 0 3px;
  padding: 5px 15px 7px 15px;
  border: 1px solid #d11935;
  border-radius: 15px;
  line-height: 60px;
  background: #d11935;
  color: white;
}

/* footer */
footer {
  text-align: center;
  padding: 45px 15px 40px 15px;
  clear: both;
  background: none;
  margin-top: 10px;
}

#foot-text {
  width: 100%;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
}

footer a {
  color: white;
}

footer a:hover {
  color: rgba(255, 255, 255, 0.5);
}

/* imports */
/*
██   ██  ██████  ██████  ██ ███████  ██████  ███    ██ ████████  █████  ██      ███████     ███    ██  █████  ██    ██ ██  ██████   █████  ████████ ██  ██████  ███    ██
██   ██ ██    ██ ██   ██ ██    ███  ██    ██ ████   ██    ██    ██   ██ ██      ██          ████   ██ ██   ██ ██    ██ ██ ██       ██   ██    ██    ██ ██    ██ ████   ██
███████ ██    ██ ██████  ██   ███   ██    ██ ██ ██  ██    ██    ███████ ██      █████       ██ ██  ██ ███████ ██    ██ ██ ██   ███ ███████    ██    ██ ██    ██ ██ ██  ██
██   ██ ██    ██ ██   ██ ██  ███    ██    ██ ██  ██ ██    ██    ██   ██ ██      ██          ██  ██ ██ ██   ██  ██  ██  ██ ██    ██ ██   ██    ██    ██ ██    ██ ██  ██ ██
██   ██  ██████  ██   ██ ██ ███████  ██████  ██   ████    ██    ██   ██ ███████ ███████     ██   ████ ██   ██   ████   ██  ██████  ██   ██    ██    ██  ██████  ██   ████
*/
/*
Carousel-cell bekommt per default einen overflow hidden, um submenues zu verbegen,
welcher bei Hover aufgehoben wird. Da es ein div ist und nicht dynamich die Höhe varieren kann,
muss eine Höhe im div der Klasse Viewport definiert werden.
Die Breite des Git-Rasters wird manuell auf 5% 90% 5% angepasst.
Unterliste (Subemnues) bekommen dispaly:hidden und per :hover display:block
*/
div.nav {
  z-index: 10;
  margin-bottom: 0 !important;
}
@media only screen and (min-width: 768px) {
  div.nav {
    margin-bottom: 0 !important;
    height: 45px;
  }
}

#menu-ul {
  display: none;
}

.carousel {
  outline: none;
}

div.nav .carousel-cell {
  overflow: hidden;
  height: 45px;
  line-height: 45px;
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  font-weight: regular;
}

div.nav .carousel-cell:hover {
  box-shadow: none;
}

div.nav .carousel-cell a {
  border-right: 0;
  padding: 0 10px;
  display: block;
  color: white;
  white-space: nowrap;
}
div.nav .carousel-cell a:hover {
  background: #8d1e2f;
  color: white;
}

div.nav .carousel-cell a.navpointActive {
  color: white !important;
  background: #8d1e2f;
}

div.nav .carousel-cell:last-child a {
  border-right: none;
}

div.nav .carousel-cell:hover {
  overflow: visible;
  height: auto;
}

div.nav .flickity-viewport {
  height: 50px;
  overflow: hidden;
}

div.nav div#carousel-container {
  display: none;
}
@media only screen and (min-width: 768px) {
  div.nav div#carousel-container {
    display: block;
  }
}

div.nav div#carousel-container .col-sm-10 {
  width: 90%;
  height: 45px;
  padding: 0px;
}

div.nav div#carousel-container .col-sm-1 {
  width: 5%;
  padding: 0px;
}

div.nav div#carousel-container ul {
  list-style: none;
  padding-left: 0px;
}

div.nav div#carousel-container li {
  background-color: rgba(209, 25, 53, 0.9);
}

div.nav .carousel-cell ul {
  display: none;
  margin-bottom: 0;
  font-size: 1.2rem;
  line-height: 2.5rem;
}
@media only screen and (min-width: 992px) {
  div.nav .carousel-cell ul {
    line-height: 2rem;
  }
}

div.nav .carousel-cell ul li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
div.nav .carousel-cell ul li:last-child {
  border: none;
}

div.nav .carousel-cell:hover ul {
  display: block;
  opacity: 0.97;
}

div.nav .carousel-cell ul a:hover {
  color: white;
  background-color: #8d1e2f;
}

div.nav div#carousel-container {
  text-align: left !important;
}

/*** stickyHeader ***/
.nav {
  position: relative;
  z-index: 1;
  height: 0;
  transform: translate3d(0, 0, 0);
}
@media only screen and (min-width: 768px) {
  .nav {
    background: rgba(209, 25, 53, 0.9);
    box-shadow: none;
  }
}

.vertical.wallpaper .nav {
  background: none;
}

.header, .nav {
  text-align: center;
}

.content {
  width: 600px;
  margin: 10px auto 100px;
}

div.nav.sticky {
  position: fixed !important;
  width: 100%;
  left: 0;
  top: 1px;
  z-index: 100;
  border-top: 0;
  transform: translate3d(0, -1px, 0);
  transition: padding 0.3s ease-in;
}

/* nav-scroll-left/right */
#nav-scroll-left, #nav-scroll-right {
  z-index: 1;
  height: 45px;
}

#nav-scroll-left {
  background-image: none;
  text-align: center;
}

#nav-scroll-right {
  background-image: none;
  text-align: center;
}

#nav-scroll-left a, #nav-scroll-right a {
  opacity: 1;
  transition: all 0.3s linear;
  font-size: 1.1rem;
  position: relative;
  top: 11px;
  color: white;
}
#nav-scroll-left a:hover, #nav-scroll-right a:hover {
  color: rgba(255, 255, 255, 0.5) !important;
}

#nav-scroll-right.inactive a, #nav-scroll-left.inactive a {
  opacity: 0;
  transition: all 0.3s linear;
}

/*
███    ███  ██████  ██████  ██ ██      ███████     ███    ██  █████  ██    ██ ██  ██████   █████  ████████ ██  ██████  ███    ██
████  ████ ██    ██ ██   ██ ██ ██      ██          ████   ██ ██   ██ ██    ██ ██ ██       ██   ██    ██    ██ ██    ██ ████   ██
██ ████ ██ ██    ██ ██████  ██ ██      █████       ██ ██  ██ ███████ ██    ██ ██ ██   ███ ███████    ██    ██ ██    ██ ██ ██  ██
██  ██  ██ ██    ██ ██   ██ ██ ██      ██          ██  ██ ██ ██   ██  ██  ██  ██ ██    ██ ██   ██    ██    ██ ██    ██ ██  ██ ██
██      ██  ██████  ██████  ██ ███████ ███████     ██   ████ ██   ██   ████   ██  ██████  ██   ██    ██    ██  ██████  ██   ████
*/
div.nav .navbar-toggler {
  z-index: 1;
  color: white;
  background: #d11935;
  padding: 6px 8px;
  border: none;
  border-radius: 0 0 15px 15px;
  height: 40px;
  width: 40px;
}
div.nav .navbar-toggler:hover {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(209, 25, 53, 0.8);
}

div.nav.open {
  background: rgba(209, 25, 53, 0.95) !important;
  transition: background 0.35s linear, height 0.65s ease-in 200ms;
  height: 100%;
  position: fixed;
  width: 100% !important;
  left: 0;
  top: 0;
  z-index: 100;
  overflow-y: scroll;
}

#menu-ul {
  margin-top: 30px;
  text-align: left;
}
@media only screen and (min-width: 768px) {
  #menu-ul {
    display: none;
  }
}

div.nav #menu-ul ul {
  list-style: none;
  padding-left: 30px;
  padding-right: 15px;
}
div.nav #menu-ul ul ul {
  padding-left: 15px;
}

div.nav #menu-ul ul li {
  visibility: hidden;
  opacity: 0;
  text-decoration: none;
  font-family: "Roboto", sans-serif;
}
div.nav #menu-ul ul li a {
  font-size: 1.7rem;
  font-weight: regular;
  line-height: 2.8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  display: block;
  color: white;
}
div.nav #menu-ul ul li:first-child a {
  border-top: 0;
}
div.nav #menu-ul ul li a.mobileNavActive {
  color: rgba(255, 255, 255, 0.5);
}

div.nav #menu-ul ul.subNavigation a {
  border: none;
  font-size: 1.5rem;
}

div.nav.open #menu-ul ul li {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.25s ease-in;
}

div.nav.open #menu-ul ul ul li {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.25s ease-in;
}

div.nav.open #menu-ul ul li:nth-child(1) {
  transition-delay: 300ms;
}

div.nav.open #menu-ul ul li:nth-child(2) {
  transition-delay: 350ms;
}

div.nav.open #menu-ul ul li:nth-child(3) {
  transition-delay: 400ms;
}

div.nav.open #menu-ul ul li:nth-child(4) {
  transition-delay: 450ms;
}

div.nav.open #menu-ul ul li:nth-child(5) {
  transition-delay: 500ms;
}

div.nav.open #menu-ul ul li:nth-child(6) {
  transition-delay: 550ms;
}

div.nav.open #menu-ul ul li:nth-child(7) {
  transition-delay: 600ms;
}

div.nav.open #menu-ul ul li:nth-child(8) {
  transition-delay: 650ms;
}

div.nav.open #menu-ul ul li:nth-child(9) {
  transition-delay: 700ms;
}

div.nav.open #menu-ul ul li:nth-child(10) {
  transition-delay: 750ms;
}

div.nav.open #menu-ul ul li:nth-child(11) {
  transition-delay: 800ms;
}

div.nav.open #menu-ul ul li:nth-child(12) {
  transition-delay: 850ms;
}

div.nav.open #menu-ul ul li:nth-child(13) {
  transition-delay: 900ms;
}

div.nav.open #menu-ul ul li:nth-child(14) {
  transition-delay: 950ms;
}

div.nav.open #menu-ul ul li:nth-child(15) {
  transition-delay: 1000ms;
}

div.nav.open #menu-ul ul li:nth-child(16) {
  transition-delay: 1050ms;
}

div.nav.open #menu-ul ul li:nth-child(17) {
  transition-delay: 1100ms;
}

div.nav.open #menu-ul ul li:nth-child(18) {
  transition-delay: 1150ms;
}

div.nav.open #menu-ul ul li:nth-child(19) {
  transition-delay: 1200ms;
}

div.nav.open #menu-ul ul li:nth-child(20) {
  transition-delay: 1250ms;
}

div.nav.open #menu-ul ul li:nth-child(21) {
  transition-delay: 1300ms;
}

div.nav.open #menu-ul ul li:nth-child(22) {
  transition-delay: 1350ms;
}

div.nav.open #menu-ul ul li:nth-child(23) {
  transition-delay: 1400ms;
}

#menu-ul ul li:hover ul {
  display: block;
}

/* Animation (mobile Navigation) */
.animate {
  transition: all 0.3s ease-in-out;
}

.navbar-toggler {
  position: relative;
  z-index: 100;
  cursor: pointer;
  width: 80px;
  top: 0px;
  display: block;
}

@media only screen and (min-width: 768px) {
  .navbar-toggler {
    display: none;
  }
  #carousel-container {
    display: block;
  }
}
.navbar-toggler > span {
  position: absolute;
  top: 27%;
  right: 30%;
  width: 18px;
  height: 16px;
  background-image: url(../img/toggler.svg);
  background-repeat: no-repeat;
  background-position: 0 0;
  transition: transform 0.3s ease-out 0s;
  transform: rotate(0deg);
}

div.nav.open .navbar-toggler > span {
  background-position: 0 -16px;
  transform: rotate(-180deg);
}

/*
██    ██ ███████ ██████  ████████ ██ ██   ██  █████  ██      ███████     ███    ██  █████  ██    ██ ██  ██████   █████  ████████ ██  ██████  ███    ██
██    ██ ██      ██   ██    ██    ██ ██  ██  ██   ██ ██      ██          ████   ██ ██   ██ ██    ██ ██ ██       ██   ██    ██    ██ ██    ██ ████   ██
██    ██ █████   ██████     ██    ██ █████   ███████ ██      █████       ██ ██  ██ ███████ ██    ██ ██ ██   ███ ███████    ██    ██ ██    ██ ██ ██  ██
 ██  ██  ██      ██   ██    ██    ██ ██  ██  ██   ██ ██      ██          ██  ██ ██ ██   ██  ██  ██  ██ ██    ██ ██   ██    ██    ██ ██    ██ ██  ██ ██
  ████   ███████ ██   ██    ██    ██ ██   ██ ██   ██ ███████ ███████     ██   ████ ██   ██   ████   ██  ██████  ██   ██    ██    ██  ██████  ██   ████
*/
.nav-vertical > nav {
  display: none;
}

@media only screen and (min-width: 768px) {
  .nav-vertical > nav {
    display: block;
  }
}
.nav-vertical > nav {
  background: none;
  color: white;
  border-radius: 15px;
  padding: 10px 15px;
  margin-top: 0px;
}
.nav-vertical > nav ul {
  list-style-type: none;
  padding: 0px;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 2.5rem;
}
.nav-vertical > nav ul li {
  border-bottom: 0;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.65);
  font-family: "Roboto", sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-vertical > nav ul div.active {
  border-bottom: none;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-vertical > nav ul ul.subnav-vertical > li {
  border-bottom: none;
  font-size: 1.2rem;
  line-height: 1.8rem;
}
.nav-vertical > nav ul ul {
  padding-left: 10px;
}
.nav-vertical > nav ul a {
  color: white;
}
.nav-vertical > nav ul a:hover {
  color: #d11935;
}
.nav-vertical > nav ul .navpointActive {
  color: #d11935;
  pointer-events: none;
}

.nav-vertical > nav ul ul.subnav-vertical li {
  height: 0px;
  transition: height 0.2s ease-out;
}

.nav-vertical > nav ul li:hover ul.subnav-vertical li {
  height: 30px;
  transition: height 0.2s ease-out;
}

@media only screen and (min-width: 768px) {
  .vertical div.nav {
    display: none;
  }
}

#slider-carousel {
  margin: 0 auto 0 auto;
  overflow: hidden;
  max-width: 1400px;
}
@media only screen and (min-width: 768px) {
  #slider-carousel {
    margin: 0px auto 0px auto;
  }
}

div#slider-carousel div.slider {
  width: 100%;
  margin: 0 5px;
  background-size: 100%;
}
div#slider-carousel div.slider img {
  width: 100%;
}

@media only screen and (min-width: 500px) {
  div#slider-carousel div.slider {
    width: 500px;
    height: 166px;
  }
}
@media only screen and (min-width: 1460px) {
  div#slider-carousel div.slider {
    width: 900px;
    height: 298px;
  }
}
#slider-carousel {
  background: none;
  box-shadow: none;
  padding: 10px 0px 10px 0px;
  border-radius: 5px;
}

#slider-carousel:focus {
  outline: none !important;
}

div#slider-carousel div.slider div.slider-text {
  position: absolute;
  bottom: 8px;
  color: white;
  text-align: center;
  width: 100%;
}

div#slider-carousel div.slider {
  overflow: hidden;
  border-radius: 5px;
}

div#slider-carousel div.slider div.slider-text p {
  margin: 0px;
  text-shadow: 2px 1px 0px rgba(0, 0, 0, 0.5);
}

.slider-color-gradient {
  background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.6) 96%);
  height: 100%;
}

div.slider-poster {
  width: 23.5%;
  float: left;
}

div.slider-scene-text {
  width: 76.5%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  float: right;
  position: relative;
}
div.slider-scene-text .slider-scene-text-inner {
  height: initial;
  color: white;
  position: absolute;
  bottom: 8px;
}
div.slider-scene-text p {
  margin: 0;
  padding: 0;
  text-shadow: 2px 1px 0px rgba(0, 0, 0, 0.5);
  padding-left: 1rem;
}

.slider-hl {
  font-size: 1.2rem;
  line-height: 1.3rem;
  font-weight: bold;
  margin-bottom: 4px !important;
}

.slider-txt {
  line-height: 1.2rem;
}

/* filter-box */
.filter-box {
  margin-bottom: 15px;
}

.filter-btn-box {
  background: 0;
  padding: 15px 0px 5px 0px;
  border-radius: 15px;
  box-shadow: none;
  border-top: none;
  border-bottom: none;
}

.filter-day-switch {
  display: inline-block;
}

.filter-day-switch-btn,
.filter-tec-switch-btn,
.filter-grid-switch-btn,
.filter-day-switch-btn:focus,
.filter-tec-switch-btn:focus,
.filter-grid-switch-btn:focus {
  margin-right: 5px;
  margin-bottom: 10px;
  font-weight: bold;
  padding: 5px 12px 5px 12px;
  color: white;
  background: rgba(209, 25, 53, 0);
  border: 1px solid rgba(209, 25, 53, 0.8);
  border-radius: 15px;
  vertical-align: middle;
  display: inline-block;
}

.filter-day-switch-btn:hover,
.filter-day-switch-btn.active,
.filter-tec-switch-btn:hover,
.filter-tec-switch-btn.active {
  background-color: #d11935;
  color: white;
}

.filter-day-switch .dropdown-menu {
  background-color: rgba(209, 25, 53, 0.95);
  border-radius: 15px;
  font-size: 1rem;
  border: none;
  top: 100%;
}

.filter-day-switch .dropdown-menu a {
  color: white;
  font-weight: bold;
  line-height: 3rem;
}
.filter-day-switch .dropdown-menu a:hover {
  color: white;
  background-color: rgba(0, 0, 0, 0.3);
}
@media only screen and (min-width: 992px) {
  .filter-day-switch .dropdown-menu a {
    line-height: 1.2rem;
  }
}

.filter-day-switch .dropdown-menu li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.filter-day-switch .dropdown-menu li:last-child {
  border: none;
}

@media screen and (max-width: 390px) {
  .filter-day-switch,
  .filter-day-switch .dropdown-menu,
  .filter-day-switch-btn {
    width: 100%;
    text-align: center;
  }
}
/* filter-grid-switch */
@media screen and (min-width: 768px) {
  .filter-grid-switch {
    text-align: right;
  }
}

.filter-grid-switch-btn {
  color: white;
  background: rgba(209, 25, 53, 0);
  border: 1px solid rgba(209, 25, 53, 0.8);
}

.filter-grid-switch-btn:hover,
.filter-grid-switch-btn.active {
  background: #d11935;
  color: white;
}

a.filter-tec-switch-btn.notavailable {
  display: none;
}

/* program-box > movie-box */
.program-box-grid {
  margin-top: 10px;
}

.movie-box {
  margin-bottom: 20px;
}

.movie-poster-box {
  overflow: hidden;
  position: relative;
  background: rgba(255, 255, 255, 0.1);
}

.movie-poster-box-2 {
  position: relative;
  background: rgba(255, 255, 255, 0.1);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.movie-poster {
  width: 100%;
  border-radius: 10px 10px 0 0;
}

.movie-poster-box img {
  height: 100%;
}

img.fade-in {
  opacity: 1;
  transition: opacity 0.6s ease-in;
}

img.posterShowActive {
  opacity: 1 !important;
  z-index: 10;
}

img.posterShowInactive {
  opacity: 0;
}

img.posterShowFade {
  z-index: 11;
  opacity: 0;
  transition: opacity 0.3s ease-in !important;
}

.movie-tec-icon-box {
  position: absolute;
  top: 10px;
  right: 5px;
  width: 30px;
  z-index: 12;
}

.movie-tec-icon {
  background: #d11935;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25);
  border-radius: 15px;
  font-weight: bold;
  width: 32px;
  font-family: "Roboto", sans-serif;
  font-size: 19px;
  line-height: 25px;
  padding: 3px 0px 2px 5px;
  color: white;
  margin-bottom: 7px;
}

.movie-tec-icon.omu {
  font-size: 12px;
  padding: 3px 0px 2px 3px;
}

.movie-tec-icon.hfr {
  font-size: 15px;
}

.movie-cinemascope-color-gradient {
  position: absolute;
  bottom: 0;
  background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 90%);
  padding-top: 30px;
  width: 100%;
  text-align: center;
}

.movie-cinemascope-text {
  margin-bottom: 10px;
  padding: 0 30px;
}
.movie-cinemascope-text p {
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  padding: 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.movie-cinemascope-hl {
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.3rem;
  margin-bottom: 4px !important;
}

.movie-cinemascope-txt {
  line-height: 1.2rem;
}

.movie-series-box {
  position: absolute;
  bottom: 0;
  padding: 5px;
  width: 100%;
  text-align: center;
  background: rgba(0, 0, 0, 0.7);
  font-weight: bold;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 12;
}

#playingTodaySliderContainer .movie-series-box {
  position: relative;
  background: #d11935;
  border-radius: 15px;
  margin-top: -23px;
}

.movie-series-box-2 {
  padding: 5px 0;
  width: 100%;
  text-align: center;
  background: rgba(0, 0, 0, 0.7);
  font-weight: bold;
  color: rgba(255, 255, 255, 0.9);
  overflow: hidden;
}

.movie-fsk-tec-box {
  height: 30px;
  font-size: 1.2rem;
  line-height: 30px;
  text-align: center;
  color: white;
  background: #d11935;
  overflow: hidden;
}

.movie-fsk-tec-box span {
  margin-right: 3px;
}

.movie-fsk-tec-box span:last-child {
  margin-right: 0;
}

a.btn-info-tickets, div.btn-info-tickets {
  background: white;
  display: block;
  color: #d11935;
  text-align: center;
  padding: 10px 5px;
  line-height: 1.1rem;
  font-size: 0.95rem;
  font-weight: bold;
  border-radius: 0px 0px 15px 15px;
  z-index: 15;
}

a.btn-info-tickets:hover {
  background: rgba(255, 255, 255, 0.8);
  color: #d11935;
}

li.outOfRange {
  display: none;
}

.movie-text-box > h3 > span {
  margin-left: 6px;
  font-size: 1.2rem;
}

.program-info-box {
  padding: 0 0 10px 0;
  margin-bottom: 30px;
  border-bottom: 1px solid rgba(198, 37, 0, 0.3);
}

.movie-box-list {
  padding-bottom: 10px;
  margin-bottom: 30px;
  border-bottom: 1px solid rgba(198, 37, 0, 0.3);
}
.movie-box-list:last-child {
  padding-bottom: 0px;
  margin-bottom: 10px;
  border-bottom: none;
}

.movie-poster-box-list {
  padding-left: 0;
  width: 140px;
  position: relative;
  margin-right: 30px;
  margin-bottom: 20px;
}
.movie-poster-box-list .movie-tec-icon-box {
  position: absolute;
  top: 10px;
  right: -10px;
  width: 30px;
}
@media only screen and (min-width: 768px) {
  .movie-poster-box-list {
    width: 235px;
  }
}

.mtt-inner {
  overflow: auto;
  width: 100%;
  padding-top: 10px;
  position: relative;
  min-width: 140px;
}
@media only screen and (min-width: 1080px) {
  .mtt-inner {
    width: auto;
  }
}
@media only screen and (min-width: 1260px) {
  .mtt-inner {
    padding-top: 0px;
  }
}

.mtt-scroll {
  overflow-x: auto;
  overflow: -moz-scrollbars-none;
  width: 100%;
  padding-bottom: 10px;
}

.mtt-top {
  max-width: 690px;
  margin: 0px 0px 20px 25px;
  display: none;
}
@media only screen and (min-width: 1260px) {
  .mtt-top {
    display: block;
    min-width: 325px;
  }
}

.mtt-bottom {
  width: 100%;
  display: block;
  margin-bottom: 12px;
}
@media only screen and (min-width: 1080px) {
  .mtt-bottom {
    width: auto;
  }
}
@media only screen and (min-width: 1260px) {
  .mtt-bottom {
    display: none;
  }
}
@media only screen and (min-width: 1080px) {
  .mtt-bottom .table-nav {
    margin-left: 235px;
  }
}

.movie-times-table {
  background: none;
}

.posterShow {
  height: 230px;
}
@media only screen and (min-width: 768px) {
  .posterShow {
    height: 360px;
  }
}

body.vertical .posterShow {
  height: 230px;
}
@media only screen and (min-width: 1300px) {
  body.vertical .posterShow {
    height: 360px;
  }
}

body.wallpaper:not(.vertical) .posterShow {
  height: 230px;
}
@media only screen and (min-width: 1240px) {
  body.wallpaper:not(.vertical) .posterShow {
    height: 360px;
  }
}

body.wallpaper.vertical .posterShow {
  height: 230px;
}
@media only screen and (min-width: 2100px) {
  body.wallpaper.vertical .posterShow {
    height: 360px;
  }
}

/* breakpoints programm-list, if nav vertical (start) */
@media only screen and (min-width: 768px) {
  .vertical .movie-poster-box-list {
    width: 140px;
  }
}
@media only screen and (min-width: 1300px) {
  .vertical .movie-poster-box-list {
    width: 235px;
  }
}

.vertical .mtt-inner {
  width: 100%;
  padding-top: 10px;
}
@media only screen and (min-width: 768px) {
  .vertical .mtt-inner {
    width: auto;
  }
}
@media only screen and (min-width: 1520px) {
  .vertical .mtt-inner {
    padding-top: 0px;
  }
}

.vertical .mtt-top {
  display: none;
}
@media only screen and (min-width: 1520px) {
  .vertical .mtt-top {
    display: block;
  }
}

.vertical .mtt-bottom {
  width: 100%;
  display: block;
}
@media only screen and (min-width: 768px) {
  .vertical .mtt-bottom {
    width: auto;
  }
}
@media only screen and (min-width: 1520px) {
  .vertical .mtt-bottom {
    display: none;
  }
}
@media only screen and (min-width: 1080px) and (max-width: 768px) {
  .vertical .mtt-bottom .vertical .table-nav {
    margin-left: 0;
  }
}

/* breakpoints programm-list, if nav vertical (end) */
table.movie-times-table {
  width: 100%;
}
table.movie-times-table td, table.movie-times-table th {
  border-right: 1px solid rgba(209, 25, 53, 0.3);
  padding: 8px 5px;
  min-width: 95px;
  text-align: center;
}
table.movie-times-table td:last-child, table.movie-times-table th:last-child {
  border-right: none;
}
@media only screen and (min-width: 992px) {
  table.movie-times-table td, table.movie-times-table th {
    padding: 3px 5px;
  }
}
table.movie-times-table td.table-tec, table.movie-times-table th.table-tec {
  padding: 3px 5px;
}
table.movie-times-table td div, table.movie-times-table th div {
  display: block;
  padding: 0px 20px 0px 10px;
}
table.movie-times-table td a, table.movie-times-table th a {
  display: inline-block;
  padding: 3px 20px 3px 10px;
  border-radius: 15px;
  background-color: #d11935;
  color: white;
}
table.movie-times-table td a:hover, table.movie-times-table th a:hover {
  background-color: white;
  color: #d11935;
}
table.movie-times-table td a:before, table.movie-times-table td div:before, table.movie-times-table th a:before, table.movie-times-table th div:before {
  font-family: icomoon;
  content: "\e939";
  font-size: 1rem;
  margin-right: 0.4rem;
  white-space: nowrap;
}
table.movie-times-table td div:before, table.movie-times-table th div:before {
  visibility: hidden;
}

td.table-marker,
th.table-marker {
  background: rgba(120, 120, 120, 0.22);
}

th.table-head {
  font-weight: bold;
}

td.table-tec {
  border-top: 1px solid rgba(209, 25, 53, 0.3);
  border-bottom: 1px solid rgba(209, 25, 53, 0.3);
}

tr.table-tr-tec {
  height: 27px;
}

td.table-tec-genre.table-tec {
  background-color: rgba(209, 25, 53, 0.44);
  color: white;
  font-weight: bold;
}

.table-tec-position {
  position: absolute;
  background-color: rgba(209, 25, 53, 0.44);
  color: white;
  width: 100%;
  text-align: center;
  line-height: 29px;
  font-weight: bold;
  border-radius: 15px;
}

.table-tec-icon {
  margin: 0px 4px;
}

.table-nav {
  margin-top: 10px;
  margin-bottom: 0;
  text-align: center;
}
.table-nav p {
  font-size: 0.85rem;
  display: inline;
}
.table-nav a {
  display: inline;
}
.table-nav a.inactive {
  color: rgba(209, 25, 53, 0.5);
}
.table-nav a.scrleft, .table-nav a.scrright {
  position: relative;
  top: 4px;
  font-size: 1.3rem;
}

div.table-tec-position span {
  margin-left: 5px;
  margin-right: 3px;
}

div.table-tec-position {
  border-bottom: 1px solid rgba(209, 25, 53, 0.3);
  border-top: 1px solid rgba(209, 25, 53, 0.3);
}

table {
  border-collapse: initial;
}

/*** SCROLLBAR STYLING ***/
/* Webkit */
::-webkit-scrollbar {
  height: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
}

::-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
}

::-WebKit-scrollbar, body {
      -WebKit-appearance: none;
}

/* IE */
.mtt-scroll {
  scrollbar-base-color: rgba(209, 25, 53, 0.1);
  scrollbar-3dlight-color: rgba(198, 37, 0, 0.1);
  scrollbar-highlight-color: rgba(198, 37, 0, 0.1);
  scrollbar-track-color: white;
  scrollbar-arrow-color: rgba(209, 25, 53, 0.1);
  scrollbar-shadow-color: rgba(209, 25, 53, 0.1);
  scrollbar-dark-shadow-color: rgba(209, 25, 53, 0.1);
}

.movie-details-box > h3 > span {
  margin-left: 6px;
  font-size: 1.2rem;
}

.movie-scene-pic, .movie-scene-pic-first {
  width: 100%;
  margin: 5px 0 0 0;
}

div.pageDetail movie-details-box {
  width: calc(100% - 270px);
  margin-left: 270px;
}

.movie-series-banner {
  background: rgba(0, 0, 0, 0.7);
  text-align: center;
  padding: 4px 0;
  position: absolute;
  width: 100%;
  bottom: 35px;
}

img.movie-scene-pic:nth-of-type(2) {
  margin-top: 20px;
}

img.fotoGallery {
  cursor: pointer;
}

.trailer-player-movie-details {
  width: 100%;
  margin: 15px 0 15px 0;
}
@media only screen and (min-width: 1200px) {
  .trailer-player-movie-details {
    max-width: 45%;
    margin: 0 0 15px 30px;
  }
}

.fbw-seal {
  width: 70px;
  margin-bottom: 5px;
}

.tec-icon {
  font-size: 1.5rem;
  padding: 4px 10px;
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  border-radius: 15px;
  margin-right: 5px;
}

#additionalPlayingTimes {
  border-top: 1px solid rgba(198, 37, 0, 0.3);
  padding-top: 30px;
}

#comment-box {
  margin-top: 20px;
}
#comment-box #rating-average {
  font-size: 1.2rem;
  margin-top: 5px;
}
#comment-box .comment {
  margin: 20px 0;
}
#comment-box .comment-header {
  border-bottom: 1px solid rgba(198, 37, 0, 0.3);
  margin-bottom: 5px;
}

@media only screen and (min-width: 768px) and (max-width: 1200px) {
  body div.pageDetail article#trailer-container {
    max-width: 100%;
    margin-left: 0px;
  }
}
@media only screen and (min-width: 1240px) {
  body.wallpaper div.pageDetail article#trailer-container {
    max-width: 100%;
    margin-left: 0px;
  }
}
@media only screen and (min-width: 993px) and (max-width: 1240px) {
  body.wallpaper div.pageDetail article#trailer-container {
    max-width: 100%;
    margin-left: 0px;
  }
}
#movieCommentForm {
  margin-top: 30px;
}
#movieCommentForm .checkbox {
  margin-top: 0px !important;
}

.comment-email-box {
  margin-top: 15px;
}
@media only screen and (min-width: 768px) {
  .comment-email-box {
    margin-top: 0;
  }
}

#comment-submit {
  margin: 15px 0;
}

/*
	Ratings Stars
	(with as little code as possible)
*/
.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
  text-align: left;
  font-size: 1.35rem;
  margin: 0 0 15px 0;
}

.rating > span {
  display: inline-block;
  position: relative;
  width: 1.1em;
  cursor: pointer;
}

.rating > span:hover,
.rating > span:hover ~ span {
  color: transparent;
}

.rating > span:hover:before, .rating > span:hover ~ span:before, .rating > span:focus:before, .rating > span:focus ~ span:before, .rating > span.rating-selected:before, .rating > span.rating-selected ~ span:before {
  content: "★";
  position: absolute;
  left: 0;
  color: #d11935;
}

.amountNumber {
  margin: 0 5px;
  position: relative;
  top: 1px;
}

.trailer-player-details {
  width: 100%;
  margin: 15px 0 15px 0;
}

@media only screen and (min-width: 1200px) {
  .trailer-player-details {
    max-width: 100%;
  }
}
/* programm-table */
.mtt-movie-details {
  margin: 30px 0;
}
@media only screen and (min-width: 1080px) {
  .mtt-movie-details {
    width: auto;
  }
}
@media only screen and (min-width: 1260px) {
  .mtt-movie-details {
    display: block !important;
  }
}
@media only screen and (min-width: 1080px) {
  .mtt-movie-details .table-nav {
    margin-left: 0;
  }
}
.mtt-movie-details .table-nav p {
  border-top: 0px !important;
}

/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
/*
	Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
*/
/* pswp = photoswipe */
.pswp {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
  touch-action: none;
  z-index: 1500;
  -webkit-text-size-adjust: 100%;
  /* create separate layer, to avoid paint on window.onscroll in webkit/blink */
  -webkit-backface-visibility: hidden;
  outline: none;
}
.pswp * {
  box-sizing: border-box;
}
.pswp img {
  max-width: none;
}

/* style is added when JS option showHideOpacity is set to true */
.pswp--animate_opacity {
  /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
  opacity: 0.001;
  will-change: opacity;
  /* for open/close transition */
  transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
}

.pswp--open {
  display: block;
}

.pswp--zoom-allowed .pswp__img {
  /* autoprefixer: off */
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

.pswp--zoomed-in .pswp__img {
  /* autoprefixer: off */
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: grab;
}

.pswp--dragging .pswp__img {
  /* autoprefixer: off */
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing;
}

/*
	Background is added as a separate element.
	As animating opacity is much faster than animating rgba() background-color.
*/
.pswp__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  will-change: opacity;
}

.pswp__scroll-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.pswp__container,
.pswp__zoom-wrap {
  touch-action: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

/* Prevent selection and tap highlights */
.pswp__container,
.pswp__img {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
}

.pswp__zoom-wrap {
  position: absolute;
  width: 100%;
  transform-origin: left top;
  /* for open/close transition */
  transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
}

.pswp__bg {
  will-change: opacity;
  /* for open/close transition */
  transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
}

.pswp--animated-in .pswp__bg,
.pswp--animated-in .pswp__zoom-wrap {
  transition: none;
}

.pswp__container,
.pswp__zoom-wrap {
  -webkit-backface-visibility: hidden;
}

.pswp__item {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
}

.pswp__img {
  position: absolute;
  width: auto;
  height: auto;
  top: 0;
  left: 0;
}

/*
	stretched thumbnail or div placeholder element (see below)
	style is added to avoid flickering in webkit/blink when layers overlap
*/
.pswp__img--placeholder {
  -webkit-backface-visibility: hidden;
}

/*
	div element that matches size of large image
	large image loads on top of it
*/
.pswp__img--placeholder--blank {
  background: #222;
}

.pswp--ie .pswp__img {
  width: 100% !important;
  height: auto !important;
  left: 0;
  top: 0;
}

/*
	Error message appears when image is not loaded
	(JS option errorMsg controls markup)
*/
.pswp__error-msg {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 14px;
  line-height: 16px;
  margin-top: -8px;
  color: #CCC;
}

.pswp__error-msg a {
  color: #CCC;
  text-decoration: underline;
}

/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */
/*

	Contents:

	1. Buttons
	2. Share modal and links
	3. Index indicator ("1 of X" counter)
	4. Caption
	5. Loading indicator
	6. Additional styles (root element, top bar, idle state, hidden state, etc.)

*/
/*

	1. Buttons

 */
/* <button> css reset */
.pswp__button {
  width: 44px;
  height: 44px;
  position: relative;
  background: none;
  cursor: pointer;
  overflow: visible;
  -webkit-appearance: none;
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
  float: right;
  opacity: 0.75;
  transition: opacity 0.2s;
  box-shadow: none;
}
.pswp__button:focus, .pswp__button:hover {
  opacity: 1;
}
.pswp__button:active {
  outline: none;
  opacity: 0.9;
}
.pswp__button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

/* pswp__ui--over-close class it added when mouse is over element that should close gallery */
.pswp__ui--over-close .pswp__button--close {
  opacity: 1;
}

.pswp__button,
.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
  background: url(/img/shared/photoswipe/default-skin.png) 0 0 no-repeat;
  background-size: 264px 88px;
  width: 44px;
  height: 44px;
}

@media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
  /* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */
  .pswp--svg .pswp__button,
  .pswp--svg .pswp__button--arrow--left:before,
  .pswp--svg .pswp__button--arrow--right:before {
    background-image: url(/img/shared/photoswipe/photoswipe-skin.svg);
  }
  .pswp--svg .pswp__button--arrow--left,
  .pswp--svg .pswp__button--arrow--right {
    background: none;
  }
}
.pswp__button--close {
  background-position: 0 -44px;
}

.pswp__button--share {
  background-position: -44px -44px;
}

.pswp__button--fs {
  display: none;
}

.pswp--supports-fs .pswp__button--fs {
  display: block;
}

.pswp--fs .pswp__button--fs {
  background-position: -44px 0;
}

.pswp__button--zoom {
  display: none;
  background-position: -88px 0;
}

.pswp--zoom-allowed .pswp__button--zoom {
  display: block;
}

.pswp--zoomed-in .pswp__button--zoom {
  background-position: -132px 0;
}

/* no arrows on touch screens */
.pswp--touch .pswp__button--arrow--left,
.pswp--touch .pswp__button--arrow--right {
  visibility: hidden;
}

/*
	Arrow buttons hit area
	(icon is added to :before pseudo-element)
*/
.pswp__button--arrow--left,
.pswp__button--arrow--right {
  background: none;
  top: 50%;
  margin-top: -50px;
  width: 70px;
  height: 100px;
  position: absolute;
}

.pswp__button--arrow--left {
  left: 0;
}

.pswp__button--arrow--right {
  right: 0;
}

.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
  content: "";
  top: 35px;
  background-color: rgba(0, 0, 0, 0.3);
  height: 30px;
  width: 32px;
  position: absolute;
}

.pswp__button--arrow--left:before {
  left: 6px;
  background-position: -138px -44px;
}

.pswp__button--arrow--right:before {
  right: 6px;
  background-position: -94px -44px;
}

/*

	2. Share modal/popup and links

 */
.pswp__counter,
.pswp__share-modal {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pswp__share-modal {
  display: block;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding: 10px;
  position: absolute;
  z-index: 1600;
  opacity: 0;
  transition: opacity 0.25s ease-out;
  -webkit-backface-visibility: hidden;
  will-change: opacity;
}

.pswp__share-modal--hidden {
  display: none;
}

.pswp__share-tooltip {
  z-index: 1620;
  position: absolute;
  background: #FFF;
  top: 56px;
  border-radius: 2px;
  display: block;
  width: auto;
  right: 44px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  transform: translateY(6px);
  transition: transform 0.25s;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}
.pswp__share-tooltip a {
  display: block;
  padding: 8px 12px;
  color: #000;
  text-decoration: none;
  font-size: 14px;
  line-height: 18px;
}
.pswp__share-tooltip a:hover {
  text-decoration: none;
  color: #000;
}
.pswp__share-tooltip a:first-child {
  /* round corners on the first/last list item */
  border-radius: 2px 2px 0 0;
}
.pswp__share-tooltip a:last-child {
  border-radius: 0 0 2px 2px;
}

.pswp__share-modal--fade-in {
  opacity: 1;
}
.pswp__share-modal--fade-in .pswp__share-tooltip {
  transform: translateY(0);
}

/* increase size of share links on touch devices */
.pswp--touch .pswp__share-tooltip a {
  padding: 16px 12px;
}

a.pswp__share--facebook:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  top: -12px;
  right: 15px;
  border: 6px solid rgba(0, 0, 0, 0);
  border-bottom-color: #FFF;
  -webkit-pointer-events: none;
  -moz-pointer-events: none;
  pointer-events: none;
}
a.pswp__share--facebook:hover {
  background: #3E5C9A;
  color: #FFF;
}
a.pswp__share--facebook:hover:before {
  border-bottom-color: #3E5C9A;
}

a.pswp__share--twitter:hover {
  background: #55ACEE;
  color: #FFF;
}

a.pswp__share--pinterest:hover {
  background: #CCC;
  color: #CE272D;
}

a.pswp__share--download:hover {
  background: #DDD;
}

/*

	3. Index indicator ("1 of X" counter)

 */
.pswp__counter {
  position: absolute;
  left: 0;
  top: 0;
  height: 44px;
  font-size: 13px;
  line-height: 44px;
  color: #FFF;
  opacity: 0.75;
  padding: 0 10px;
}

/*

	4. Caption

 */
.pswp__caption {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  min-height: 44px;
}
.pswp__caption small {
  font-size: 11px;
  color: #BBB;
}

.pswp__caption__center {
  text-align: left;
  max-width: 420px;
  margin: 0 auto;
  font-size: 13px;
  padding: 10px;
  line-height: 20px;
  color: #CCC;
}

.pswp__caption--empty {
  display: none;
}

/* Fake caption element, used to calculate height of next/prev image */
.pswp__caption--fake {
  visibility: hidden;
}

/*

	5. Loading indicator (preloader)

	You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR

 */
.pswp__preloader {
  width: 44px;
  height: 44px;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -22px;
  opacity: 0;
  transition: opacity 0.25s ease-out;
  will-change: opacity;
  direction: ltr;
}

.pswp__preloader__icn {
  width: 20px;
  height: 20px;
  margin: 12px;
}

.pswp__preloader--active {
  opacity: 1;
}
.pswp__preloader--active .pswp__preloader__icn {
  /* We use .gif in browsers that don't support CSS animation */
  background: url(/img/shared/photoswipe/preloader.gif) 0 0 no-repeat;
}

.pswp--css_animation .pswp__preloader--active {
  opacity: 1;
}
.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
  animation: clockwise 500ms linear infinite;
}
.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
  animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
}
.pswp--css_animation .pswp__preloader__icn {
  background: none;
  opacity: 0.75;
  width: 14px;
  height: 14px;
  position: absolute;
  left: 15px;
  top: 15px;
  margin: 0;
}
.pswp--css_animation .pswp__preloader__cut {
  /*
  	The idea of animating inner circle is based on Polymer ("material") loading indicator
  	 by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
  */
  position: relative;
  width: 7px;
  height: 14px;
  overflow: hidden;
}
.pswp--css_animation .pswp__preloader__donut {
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border: 2px solid #FFF;
  border-radius: 50%;
  border-left-color: transparent;
  border-bottom-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  background: none;
  margin: 0;
}

@media screen and (max-width: 1024px) {
  .pswp__preloader {
    position: relative;
    left: auto;
    top: auto;
    margin: 0;
    float: right;
  }
}
@keyframes clockwise {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes donut-rotate {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(-140deg);
  }
  100% {
    transform: rotate(0);
  }
}
/*

	6. Additional styles

 */
/* root element of UI */
.pswp__ui {
  -webkit-font-smoothing: auto;
  visibility: visible;
  opacity: 1;
  z-index: 1550;
}

/* top black bar with buttons and "1 of X" indicator */
.pswp__top-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 44px;
  width: 100%;
}

.pswp__caption,
.pswp__top-bar,
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
  -webkit-backface-visibility: hidden;
  will-change: opacity;
  transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
}

/* pswp--has_mouse class is added only when two subsequent mousemove events occur */
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
  visibility: visible;
}

.pswp__top-bar,
.pswp__caption {
  background-color: rgba(0, 0, 0, 0.5);
}

/* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */
.pswp__ui--fit .pswp__top-bar,
.pswp__ui--fit .pswp__caption {
  background-color: rgba(0, 0, 0, 0.3);
}

/* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */
.pswp__ui--idle .pswp__top-bar {
  opacity: 0;
}
.pswp__ui--idle .pswp__button--arrow--left,
.pswp__ui--idle .pswp__button--arrow--right {
  opacity: 0;
}

/*
	pswp__ui--hidden class is added when controls are hidden
	e.g. when user taps to toggle visibility of controls
*/
.pswp__ui--hidden .pswp__top-bar,
.pswp__ui--hidden .pswp__caption,
.pswp__ui--hidden .pswp__button--arrow--left,
.pswp__ui--hidden .pswp__button--arrow--right {
  /* Force paint & create composition layer for controls. */
  opacity: 0.001;
}

/* pswp__ui--one-slide class is added when there is just one item in gallery */
.pswp__ui--one-slide .pswp__button--arrow--left,
.pswp__ui--one-slide .pswp__button--arrow--right,
.pswp__ui--one-slide .pswp__counter {
  display: none;
}

.pswp__element--disabled {
  display: none !important;
}

.pswp--minimal--dark .pswp__top-bar {
  background: none;
}

div#posterSlider div.movieSlide {
  height: 155px;
  width: 110px;
  position: relative;
}

div#posterSlider div.movieSlide img {
  width: 100px;
  height: 91%;
}

div#posterSlider {
  margin: 0 0 15px 0;
  overflow: hidden;
  background-color: rgba(209, 25, 53, 0);
  padding: 10px;
}

div#posterSlider:focus {
  outline: none;
}

div.movieSlide.active img {
  border: 5px solid #d11935;
  border-bottom: 0;
}

div#posterSlider .movie-tec-icon-box {
  position: absolute;
  top: 7px;
  right: 5px;
  width: 17px;
}

div#posterSlider .movie-tec-icon {
  width: 17px;
  height: 17px;
  line-height: normal;
  font-size: 11px;
  padding: 2px 0px 0px 2px;
  border-radius: 10px;
}

div#posterSlider .movie-tec-icon.omu {
  font-size: 7px !important;
  padding: 0px 0px 0px 1px !important;
  line-height: 19px;
}

div#posterSlider .movie-tec-icon.hfr {
  font-size: 10px !important;
  padding: 0px 0px 0px 1px !important;
  line-height: 19px;
}

div#posterSlider .movie-fsk-tec-box {
  position: absolute;
  bottom: 15px;
  height: 15px;
  width: 100px;
  font-size: 0.8rem;
  line-height: 1.1rem;
  text-align: center;
  background: rgba(209, 25, 53, 0.7);
  color: white;
  overflow: hidden;
}

div#posterSlider .movie-fsk-tec-box span {
  margin-right: 3px;
}

div#posterSlider .movie-fsk-tec-box span:last-child {
  margin-right: 0;
}

div#posterSlider .movie-series-box {
  position: relative;
  height: 15px;
  width: 100px;
  font-size: 0.8rem;
  line-height: 1.1rem;
  text-align: center;
  background: white;
  color: #d11935;
  padding: 0 5px;
  border-radius: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  margin-top: 5px;
}

/* event-box-container */
@media only screen and (min-width: 992px) {
  .event-box-container:nth-child(odd) {
    border-right: 1px solid rgba(198, 37, 0, 0.3);
    margin-bottom: 30px;
  }
}

.wallpaper .event-box-container:nth-child(odd) {
  border-right: none;
  margin-bottom: 0;
}
@media only screen and (min-width: 1600px) {
  .wallpaper .event-box-container:nth-child(odd) {
    border-right: 1px solid rgba(198, 37, 0, 0.3);
    margin-bottom: 30px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .vertical .event-box-container {
    width: 100%;
  }
}

.vertical .event-box-container:nth-child(odd) {
  border-right: none;
  margin-bottom: 0;
}
@media only screen and (min-width: 1200px) {
  .vertical .event-box-container:nth-child(odd) {
    border-right: 1px solid rgba(198, 37, 0, 0.3);
    margin-bottom: 30px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1999px) {
  .vertical.wallpaper .event-box-container {
    width: 100%;
  }
}

.vertical.wallpaper .event-box-container:nth-child(odd) {
  border-right: none;
  margin-bottom: 0;
}
@media only screen and (min-width: 2000px) {
  .vertical.wallpaper .event-box-container:nth-child(odd) {
    border-right: 1px solid rgba(198, 37, 0, 0.3);
    margin-bottom: 30px;
  }
}

/* event-divider */
@media only screen and (min-width: 992px) {
  .event-divider {
    border-bottom: 1px solid rgba(198, 37, 0, 0.3);
    width: calc(100% - 30px);
    margin: 0 0 30px 15px;
    padding: 0;
  }
}

.wallpaper .event-divider {
  display: none;
}
@media only screen and (min-width: 1600px) {
  .wallpaper .event-divider {
    display: block;
    border-bottom: 1px solid rgba(198, 37, 0, 0.3);
    width: calc(100% - 30px);
    margin: 0 0 30px 15px;
    padding: 0;
  }
}

.vertical .event-divider {
  display: none;
}
@media only screen and (min-width: 1200px) {
  .vertical .event-divider {
    display: block;
    border-bottom: 1px solid rgba(198, 37, 0, 0.3);
    width: calc(100% - 30px);
    margin: 0 0 30px 15px;
    padding: 0;
  }
}

.vertical.wallpaper .event-divider {
  display: none;
}
@media only screen and (min-width: 2000px) {
  .vertical.wallpaper .event-divider {
    display: block;
    border-bottom: 1px solid rgba(198, 37, 0, 0.3);
    width: calc(100% - 30px);
    margin: 0 0 30px 15px;
    padding: 0;
  }
}

.event-container.clearfix:last-child .col-xs-12.event-divider {
  display: none;
}

/* event-box */
.event-box {
  padding-bottom: 30px;
  margin: 0 0 30px;
  border-bottom: 1px solid rgba(198, 37, 0, 0.3);
}
@media only screen and (min-width: 992px) {
  .event-box {
    margin: 0;
    padding-bottom: 0px;
    border: none;
  }
}

.wallpaper .event-box {
  padding-bottom: 30px;
  margin: 0 0 30px;
  border-bottom: 1px solid rgba(198, 37, 0, 0.3);
}
@media only screen and (min-width: 1600px) {
  .wallpaper .event-box {
    margin: 0;
    padding-bottom: 0px;
    border: none;
  }
}

.vertical .event-box {
  margin: 0 0 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(198, 37, 0, 0.3);
}
@media only screen and (min-width: 1200px) {
  .vertical .event-box {
    margin: 0;
    padding-bottom: 0px;
    margin: 0;
    border: none;
  }
}

.vertical.wallpaper .event-box {
  margin: 0 0 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(198, 37, 0, 0.3);
}
@media only screen and (min-width: 2000px) {
  .vertical.wallpaper .event-box {
    margin: 0;
    padding-bottom: 0px;
    margin: 0;
    border: none;
  }
}

:last-child.event-container article:nth-of-type(even) .event-box {
  border: none;
  margin: 0;
}

/* event-text-inner */
.event-text-inner p:last-child {
  margin-bottom: 0;
}

/* event-poster-box */
.event-poster-box {
  padding-left: 0;
  width: 235px;
  height: 332px;
  overflow: hidden;
  position: relative;
  margin-right: 30px;
  margin-bottom: 20px;
  text-align: center;
  float: none !important;
}
.event-poster-box .movie-tec-icon-box {
  position: absolute;
  top: 10px;
  right: -10px;
  width: 30px;
}
@media only screen and (min-width: 400px) {
  .event-poster-box {
    width: 140px;
    height: 200px;
    padding-bottom: 0px;
    float: left !important;
  }
}
@media only screen and (min-width: 768px) {
  .event-poster-box {
    width: 235px;
    height: 332px;
  }
}

@media only screen and (min-width: 400px) {
  .eventPosterShow {
    height: 200px;
  }
}
@media only screen and (min-width: 768px) {
  .eventPosterShow {
    height: 332px;
  }
}

@media only screen and (min-width: 400px) {
  body.vertical .eventPosterShow {
    height: 200px;
  }
}
@media only screen and (min-width: 992px) {
  body.vertical .eventPosterShow {
    height: 332px;
  }
}

@media only screen and (min-width: 400px) {
  body.wallpaper:not(.vertical) .eventPosterShow {
    height: 200px;
  }
}
@media only screen and (min-width: 768px) {
  body.wallpaper:not(.vertical) .eventPosterShow {
    height: 332px;
  }
}
@media only screen and (min-width: 992px) {
  body.wallpaper:not(.vertical) .eventPosterShow {
    height: 200px;
  }
}
@media only screen and (min-width: 1200px) {
  body.wallpaper:not(.vertical) .eventPosterShow {
    height: 332px;
  }
}

@media only screen and (min-width: 400px) {
  body.wallpaper.vertical .eventPosterShow {
    height: 200px;
  }
}
@media only screen and (min-width: 1600px) {
  body.wallpaper.vertical .eventPosterShow {
    height: 332px;
  }
}

.event-details-box h3 {
  overflow: visible;
}
@media only screen and (min-width: 400px) {
  .event-details-box h3 {
    overflow: hidden;
  }
}

@media only screen and (min-width: 992px) {
  .wallpaper .event-poster-box {
    width: 140px;
  }
}
@media only screen and (min-width: 1200px) {
  .wallpaper .event-poster-box {
    width: 235px;
  }
}

@media only screen and (min-width: 768px) {
  .vertical .event-poster-box {
    width: 140px;
  }
}
@media only screen and (min-width: 992px) {
  .vertical .event-poster-box {
    width: 235px;
  }
}

@media only screen and (min-width: 992px) {
  .vertical.wallpaper .event-poster-box {
    width: 140px;
  }
}
@media only screen and (min-width: 1600px) {
  .vertical.wallpaper .event-poster-box {
    width: 235px;
  }
}

/* event-poster-box-wide */
.event-poster-box-wide {
  padding-left: 0;
  width: 100%;
  position: relative;
  margin-right: 30px;
  margin-bottom: 20px;
  text-align: center;
  float: none;
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .event-poster-box-wide {
    width: 400px;
    float: left;
  }
}
@media only screen and (min-width: 1250px) {
  .event-poster-box-wide {
    width: 400px;
    float: left;
  }
}

.wallpaper .event-poster-box-wide {
  width: 100%;
  float: none;
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .wallpaper .event-poster-box-wide {
    width: 400px;
    float: left;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
  .wallpaper .event-poster-box-wide {
    width: 400px;
    float: left;
  }
}
@media only screen and (min-width: 2100px) {
  .wallpaper .event-poster-box-wide {
    width: 400px;
    float: left;
  }
}

.vertical .event-poster-box-wide {
  width: 100%;
  float: none;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .vertical .event-poster-box-wide {
    width: 400px;
    float: left;
  }
}
@media only screen and (min-width: 1600px) {
  .vertical .event-poster-box-wide {
    width: 400px;
    float: left;
  }
}

.vertical.wallpaper .event-poster-box-wide {
  width: 100%;
  float: none;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .vertical.wallpaper .event-poster-box-wide {
    width: 400px;
    float: left;
  }
}
@media only screen and (min-width: 1600px) and (max-width: 1999px) {
  .vertical.wallpaper .event-poster-box-wide {
    width: 400px;
    float: left;
  }
}
@media only screen and (min-width: 2550px) {
  .vertical.wallpaper .event-poster-box-wide {
    width: 400px;
    float: left;
  }
}

@media only screen and (min-width: 400px) {
  body.wallpaper:not(.vertical) .event-poster-box {
    height: 200px;
    margin-bottom: 1rem !important;
  }
}
@media only screen and (min-width: 768px) {
  body.wallpaper:not(.vertical) .event-poster-box {
    height: 332px;
  }
}
@media only screen and (min-width: 992px) {
  body.wallpaper:not(.vertical) .event-poster-box {
    height: 200px;
  }
}
@media only screen and (min-width: 1200px) {
  body.wallpaper:not(.vertical) .event-poster-box {
    height: 332px;
  }
}

/* btn-events */
.btn-events {
  margin: 15px 0 0 0;
}

/* trailer-player-box */
.trailer-player-box {
  text-align: center;
  background-color: rgba(255, 255, 255, 0.2);
  background-image: none;
  background-size: cover;
}

.trailer-player-box article {
  margin-left: auto;
  margin-right: auto;
}

.trailer-player-events {
  width: 100%;
  margin-bottom: 30px;
}

.homePlayerHeadlineSubtext {
  margin-bottom: -5px;
}

/* responsive-video (z.B. Youtube) */
.responsive-video {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 0;
  height: 0;
  overflow: hidden;
}

.responsive-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

div.event-container div.event-text-inner button {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40%;
}

/* Gewinnspiel / Umfrage */
#a1, #a2, #a3, #a4, #u1, #u2, #u3, #u4, #u5, #u6, #u7, #u8, #u9, #u10 {
  margin-right: 5px;
}

.contest-answers-box fieldset {
  margin-bottom: 20px;
}

.contest-answers-box label {
  display: inline;
  font-weight: normal;
}

#contest-submit {
  margin-top: 15px;
}

#contest-foottext {
  margin-top: 20px;
}

/* Event-Detail-Seite */
.event-box-detail {
  border: 0;
  padding-bottom: 0;
  margin-bottom: 15px !important;
}

.event-thumb-box {
  margin-top: 30px;
  clear: both;
}

.event-thumb {
  width: 135px;
  height: 135px;
  float: left;
  border: 1px solid white;
  background-size: cover;
  margin: 10px;
  overflow: hidden;
  display: block;
}

.event-box-detail .event-poster-box-wide {
  width: 100%;
  text-align: center;
}
.event-box-detail .event-poster-box-wide img {
  margin-bottom: 6px;
  width: 100%;
}
@media only screen and (min-width: 600px) {
  .event-box-detail .event-poster-box-wide {
    width: 300px;
    float: left;
    margin-right: 30px;
  }
}
@media only screen and (min-width: 992px) {
  .event-box-detail .event-poster-box-wide {
    width: 400px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1600px) {
  .wallpaper .event-box-detail .event-poster-box-wide {
    width: 300px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1600px) {
  .vertical.wallpaper .event-box-detail .event-poster-box-wide {
    width: 300px !important;
  }
}

.vertical .event-box-detail .event-poster-box-wide {
  width: 100%;
  float: none;
}
@media only screen and (min-width: 600px) {
  .vertical .event-box-detail .event-poster-box-wide {
    width: 300px !important;
    float: left;
  }
}
@media only screen and (min-width: 992px) {
  .vertical .event-box-detail .event-poster-box-wide {
    width: 400px !important;
    float: left;
  }
}

.entryprice-box {
  overflow-x: auto;
}

.price-table {
  width: 100%;
  line-height: 1.8rem;
}
.price-table td {
  padding: 5px;
  margin: 5px;
}

.price-table-head {
  font-size: 1.2rem;
  border-bottom: 1px solid rgba(198, 37, 0, 0.3);
  background: rgba(255, 255, 255, 0.1);
}

.price-table-field-title {
  font-weight: bold;
}

.price-table-label, .price-table-price, .price-table-price-head, .price-table-description {
  border-bottom: 1px solid rgba(198, 37, 0, 0.3);
}

.price-table-price-head, .price-table-price {
  min-width: 100px;
  text-align: right;
  vertical-align: top;
}

.price-table-price-head {
  font-size: 0.9rem;
  font-weight: bold;
}

.price-table-field-desc {
  font-weight: normal;
}

.table-notice {
  margin-top: 30px;
}

.price-align {
  text-align: center;
}

.subsite-picture-box {
  width: 100%;
  text-align: center;
}
.subsite-picture-box img {
  margin-bottom: 15px;
  width: 100%;
}
@media only screen and (min-width: 600px) {
  .subsite-picture-box {
    width: 300px;
    float: left;
    margin-right: 30px;
  }
}
@media only screen and (min-width: 992px) {
  .subsite-picture-box {
    width: 400px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1600px) {
  .wallpaper .subsite-picture-box {
    width: 300px;
  }
}

.subsite-text-box {
  margin-bottom: 15px;
}

.partner-container > article {
  margin-bottom: 15px;
  border-bottom: 1px solid rgba(198, 37, 0, 0.3);
  width: calc(100% - 30px);
  margin: 0 0 15px 15px;
  padding: 0 0 15px 0;
}
.partner-container > article:last-child {
  border-bottom: 0;
  margin-bottom: 0;
}

.partner-picture-box {
  width: 100%;
}
.partner-picture-box img {
  margin-bottom: 15px;
  width: 100%;
}
@media only screen and (min-width: 600px) {
  .partner-picture-box {
    width: 300px;
    float: right;
    margin-left: 30px;
  }
}
@media only screen and (min-width: 992px) {
  .partner-picture-box {
    width: 400px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1600px) {
  .wallpaper .partner-picture-box {
    width: 300px;
  }
}

.partner-text-box {
  margin-bottom: 15px;
}

.partner-textlink {
  margin-top: 15px;
  display: block;
}

.contact-text-box {
  margin-bottom: 15px;
}
@media only screen and (min-width: 768px) {
  .contact-text-box {
    width: 30%;
    float: left;
  }
}

.contact-form-box {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .contact-form-box {
    width: 70%;
    float: left;
    padding-left: 30px;
  }
}

.wallpaper .contact-form-box {
  width: 100%;
  padding-left: 0;
}
@media only screen and (min-width: 1200px) {
  .wallpaper .contact-form-box {
    width: 70%;
    float: left;
    padding-left: 30px;
  }
}

.vertical .contact-form-box {
  width: 100%;
  padding-left: 0;
}
@media only screen and (min-width: 992px) {
  .vertical .contact-form-box {
    width: 70%;
    float: left;
    padding-left: 30px;
  }
}

.vertical.wallpaper .contact-form-box {
  width: 100%;
  padding-left: 0;
}
@media only screen and (min-width: 1600px) {
  .vertical.wallpaper .contact-form-box {
    width: 70%;
    float: left;
    padding-left: 30px;
  }
}

#contact-maps {
  margin: 30px 0;
}

.newsletter-text-box {
  margin-bottom: 30px;
}

.imprint-text-box {
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(198, 37, 0, 0.3);
}
.imprint-text-box:first-child {
  padding-bottom: 30px;
}
.imprint-text-box:last-child {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

.guestbook-text-box {
  margin-bottom: 30px;
  padding-bottom: 15px;
}
.guestbook-text-box:last-child {
  border-top: 1px solid rgba(198, 37, 0, 0.3);
  margin-top: -40px;
  padding-bottom: 0;
  margin-bottom: 0;
}
.guestbook-text-box .checkbox {
  margin-top: 0 !important;
  margin-bottom: 15px !important;
}

.guestbook-entry-box {
  margin-bottom: 30px;
}

.guestbook-entry-title {
  border-bottom: 1px solid rgba(198, 37, 0, 0.3);
  padding-bottom: 5px;
  margin-bottom: 5px;
}
.guestbook-entry-title span {
  color: #d11935;
}

.guestbook-entry-comment {
  margin-top: 10px;
  margin-left: 10px;
  font-style: italic;
}
.guestbook-entry-comment span {
  color: #d11935;
  font-weight: bold;
}

.cinema-hall-container > article {
  border-bottom: 1px solid rgba(198, 37, 0, 0.3);
  width: calc(100% - 30px);
  margin: 0 0 30px 15px;
  padding: 0 0 15px 0;
}
.cinema-hall-container > article:last-child {
  border-bottom: 0;
  margin-bottom: 0;
}

.cinema-hall-tech-icons {
  font-size: 1.4rem;
  margin-top: 10px;
}
.cinema-hall-tech-icons span {
  margin-right: 8px;
}
.cinema-hall-tech-icons span:last-child {
  margin-right: 0;
}

/*  Wallpaper css */
body.wallpaper {
  background-position: 0 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #000;
  font-family: "Open Sans", sans-serif;
  font-size: 1rem;
  color: white;
}

body.wallpaper.vertical .navbar-toggler,
body.wallpaper.vertical div.nav {
  display: block;
}

body.wallpaper #wallpaper {
  width: 100%;
  margin-top: 50%;
  background-image: url("../img/body_bg.jpg");
  background-position: top center;
  background-repeat: no-repeat;
  background-color: #0c050c;
}
@media only screen and (min-width: 768px) {
  body.wallpaper #wallpaper {
    margin-top: 30%;
  }
}

#wallpaper {
  padding-top: 0px;
  position: static;
}
@media only screen and (min-width: 768px) {
  #wallpaper {
    padding-top: 0px;
  }
}

body.wallpaper div.nav {
  position: fixed;
  top: 0;
  width: 100%;
}

body.wallpaper #wallpaperLink {
  width: 100%;
  position: absolute;
  top: 0;
}

@media screen and (min-width: 992px) {
  body.wallpaper:not(.vertical) {
    background-position: 0 0;
  }
  body.wallpaper:not(.vertical) #wallpaper {
    width: 62.5%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 9.5%;
  }
}
@media screen and (min-width: 768px) {
  body.wallpaper:not(.vertical) {
    background-position: 0 0;
  }
  body.wallpaper #wallpaper {
    margin-top: 50%;
  }
  body.wallpaper:not(.vertical) div.nav {
    position: relative;
  }
}
@media screen and (min-width: 1200px) {
  body.wallpaper.vertical {
    background-position: 0 0;
    background-attachment: fixed;
  }
  body.wallpaper #wallpaper {
    width: 62.5%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 9.5%;
  }
  body.wallpaper div.nav {
    position: initial;
  }
}
/* breakpoints programm-list, if nav horizontal */
@media only screen and (min-width: 768px) {
  body.wallpaper .movie-poster-box-list {
    width: 140px;
  }
}
@media only screen and (min-width: 1240px) {
  body.wallpaper .movie-poster-box-list {
    width: 235px;
  }
}
@media only screen and (max-width: 1200px) and (min-width: 768px) {
  body.wallpaper div.pageDetail .movie-details-box {
    width: 100%;
    margin-left: 0;
  }
}
body.wallpaper .mtt-inner {
  width: 100%;
  padding-top: 10px;
}

@media only screen and (min-width: 1630px) {
  body.wallpaper .mtt-inner {
    width: auto;
  }
}
@media only screen and (min-width: 2020px) {
  body.wallpaper .mtt-inner {
    padding-top: 0;
  }
}
body.wallpaper .mtt-top {
  display: none;
}

@media only screen and (min-width: 2020px) {
  body.wallpaper .mtt-top {
    display: block;
  }
}
body.wallpaper .mtt-bottom {
  width: 100%;
  display: block;
}

@media only screen and (min-width: 1630px) {
  body.wallpaper .mtt-bottom {
    width: auto;
  }
}
@media only screen and (min-width: 2020px) {
  body.wallpaper .mtt-bottom {
    display: none;
  }
}
@media only screen and (min-width: 1080px) and (max-width: 1630px) {
  body.wallpaper .mtt-bottom .table-nav {
    margin-left: 0;
  }
}
/* breakpoints programm-list, if nav vertical */
@media only screen and (min-width: 768px) {
  body.wallpaper.vertical .movie-poster-box-list {
    width: 140px;
  }
}
@media only screen and (min-width: 1600px) {
  body.wallpaper.vertical .movie-poster-box-list {
    width: 235px;
  }
}
@media only screen and (max-width: 1600px) and (min-width: 768px) {
  body.wallpaper.vertical div.pageDetail .movie-details-box {
    width: 100%;
    margin-left: 0;
  }
}
body.wallpaper.vertical .mtt-inner {
  width: 100%;
  padding-top: 10px;
}

@media only screen and (min-width: 1980px) {
  body.wallpaper.vertical .mtt-inner {
    width: auto;
  }
}
@media only screen and (min-width: 2440px) {
  body.wallpaper.vertical .mtt-inner {
    padding-top: 0;
  }
}
body.wallpaper.vertical .mtt-top {
  display: none;
}

@media only screen and (min-width: 2440px) {
  body.wallpaper.vertical .mtt-top {
    display: block;
  }
}
body.wallpaper.vertical .mtt-bottom {
  width: 100%;
  display: block;
}

@media only screen and (min-width: 1980px) {
  body.wallpaper.vertical .mtt-bottom {
    width: auto;
  }
}
@media only screen and (min-width: 2440px) {
  body.wallpaper.vertical .mtt-bottom {
    display: none;
  }
}
@media only screen and (min-width: 1080px) and (max-width: 1980px) {
  body.wallpaper.vertical .mtt-bottom .table-nav {
    margin-left: 0;
  }
}
@media only screen and (min-width: 1200px) {
  body.wallpaper.vertical div.nav {
    display: none;
  }
}
/* Links, Buttons,... */
/* Fließtext, Subtext, Marker, Input-Felder,... */
/* Trenner, Nav-Links, Button-Text,... */
/* nur content-bg! */
/* nur body-bg! */
/* wallpaper body-bg */
/*
██████   █████  ███████ ██  ██████ ███████
██   ██ ██   ██ ██      ██ ██      ██
██████  ███████ ███████ ██ ██      ███████
██   ██ ██   ██      ██ ██ ██           ██
██████  ██   ██ ███████ ██  ██████ ███████
*/
/*** BASICS (_base.scss) ***/
/* Trennlinie */
/* Wallpaper (_wallpaper.scss) */
/* Kinoheld iframe */
/* Cookie-Bar (_base.scss) */
/* Social-Icons im Header (_base.scss) */
/* Header-BG bei Wallpaper */
/* Kino-Logo im Head */
/* left, center, right */
/* Head-Slider (_head-slider.scss) */
/* Überschriften (_base.scss) */
/* ab 768px Breite des Viewports */
/* Fließtext (_base.scss) */
/* Content (_base.scss) */
/* Formulare (_base.scss) */
/* Buttons (_base.scss) */
/* 404-Icon (!-Zeichen) (_base.scss) */
/* Seitenwechsler vor zurück und Seitennummer (Gästebuch, Archive) (_base.scss) */
/* Footer (_base.scss) */
/*
███    ██  █████  ██    ██ ██  ██████   █████  ████████ ██  ██████  ███    ██
████   ██ ██   ██ ██    ██ ██ ██       ██   ██    ██    ██ ██    ██ ████   ██
██ ██  ██ ███████ ██    ██ ██ ██   ███ ███████    ██    ██ ██    ██ ██ ██  ██
██  ██ ██ ██   ██  ██  ██  ██ ██    ██ ██   ██    ██    ██ ██    ██ ██  ██ ██
██   ████ ██   ██   ████   ██  ██████  ██   ██    ██    ██  ██████  ██   ████
*/
/*** HAUPT-NAVIGATION (_nav.scss) ***/
/* horizontale Navigation */
/* Trenner */
/* line-height für Finger-Touch. z.B. auf Tablet */
/* line-height für Mausbedienung */
/* Trenner */
/* kann auch eine Grafik sein */
/* Höhe Navigationskarussell */
/* Mobile-Nav */
/* Trennlinie */
/* kann auch eine Grafik sein */
/* vertikale Navigation */
/* Trennlinie */
/* kann auch eine Grafik sein */
/*
██   ██  ██████  ███    ███ ███████     ██ ███████ ██    ██ ███████ ███    ██ ████████
██   ██ ██    ██ ████  ████ ██         ██  ██      ██    ██ ██      ████   ██    ██
███████ ██    ██ ██ ████ ██ █████     ██   █████   ██    ██ █████   ██ ██  ██    ██
██   ██ ██    ██ ██  ██  ██ ██       ██    ██       ██  ██  ██      ██  ██ ██    ██
██   ██  ██████  ██      ██ ███████ ██     ███████   ████   ███████ ██   ████    ██
*/
/*** HOME/EVENT-SEITE (_events.scss) ***/
/* Home/Event-Seite (_events.scss) */
/* Home/Event-Detail-Seite (_events.scss) */
/* Rahmen um Thumbnails bei Bildergalerie */
/*
██████  ██████   ██████   ██████  ██████   █████  ███    ███ ███    ███
██   ██ ██   ██ ██    ██ ██       ██   ██ ██   ██ ████  ████ ████  ████
██████  ██████  ██    ██ ██   ███ ██████  ███████ ██ ████ ██ ██ ████ ██
██      ██   ██ ██    ██ ██    ██ ██   ██ ██   ██ ██  ██  ██ ██  ██  ██
██      ██   ██  ██████   ██████  ██   ██ ██   ██ ██      ██ ██      ██
*/
/*** PROGRAMM-SEITEN ***/
/* Filter (_filter.scss) */
/* movie-poster-box (_program-grid.scss) */
/* movie-tec-icon (2D, 3D, rechts am Plakat eingeklinkt) (_program-grid.scss) */
/* movie-series-box (Filmreihen-Box auf Plakat) (_program-grid.scss) */
/* movie-fsk-tec-box (Box unter Plakat mit FSK, DBOX, DOLBY, etc) (_program-grid.scss) */
/* Button Info/Tickets (_program-grid.scss) */
/* alternative Grid-Darstellung (_program-grid.scss) */
/* $movie-box-list (Programm-Listendarstellung) (_program-list.scss) */
/* Trennlinie */
/* movie-times-table (Programm-Listendarstellung, Zeitentabelle) (_program-list.scss) */
/* Programm-Detail-Seite (_movie-details.scss) */
/* (z.B. Buttons DBOX, ATMOS, THX,...)  */
/* posterSlider, poster-slider (_posterslider.scss) */
/*
████████ ██████   █████  ██ ██      ███████ ██████  ██████  ██       █████  ██    ██ ███████ ██████
   ██    ██   ██ ██   ██ ██ ██      ██      ██   ██ ██   ██ ██      ██   ██  ██  ██  ██      ██   ██
   ██    ██████  ███████ ██ ██      █████   ██████  ██████  ██      ███████   ████   █████   ██████
   ██    ██   ██ ██   ██ ██ ██      ██      ██   ██ ██      ██      ██   ██    ██    ██      ██   ██
   ██    ██   ██ ██   ██ ██ ███████ ███████ ██   ██ ██      ███████ ██   ██    ██    ███████ ██   ██
*/
/*** TRAILERPLAYER (video.scss) ***/
/* Trennlinie */
/* äußere Kante des Playlist-Kastens */
/*
███████ ██ ███    ██ ████████ ██████  ██ ████████ ████████ ███████ ██████  ██████  ███████ ██ ███████ ███████
██      ██ ████   ██    ██    ██   ██ ██    ██       ██    ██      ██   ██ ██   ██ ██      ██ ██      ██
█████   ██ ██ ██  ██    ██    ██████  ██    ██       ██    ███████ ██████  ██████  █████   ██ ███████ █████
██      ██ ██  ██ ██    ██    ██   ██ ██    ██       ██         ██ ██      ██   ██ ██      ██      ██ ██
███████ ██ ██   ████    ██    ██   ██ ██    ██       ██    ███████ ██      ██   ██ ███████ ██ ███████ ███████
*/
/*** EINTRITTSPREISE (_entryprice.scss) ***/
/*!
Video.js Default Styles (http://videojs.com)
Version 4.12.0
Create your own skin at http://designer.videojs.com
*/
/* SKIN
================================================================================
The main class name for all skin-specific styles. To make your own skin,
replace all occurrences of 'vjs-default-skin' with a new name. Then add^ your new
skin name to your video tag instead of the default skin.
e.g. <video class="video-js my-skin-name">
*/
.vjs-cp-skin {
  color: #ffffff;
}

/* Custom Icon Font
--------------------------------------------------------------------------------
The control icons are from a custom font. Each icon corresponds to a character
(e.g. "\e001"). Font icons allow for easy scaling and coloring of icons.
*/
@font-face {
  font-family: "VideoJS";
  src: url("/fonts/vjs.eot");
  src: url("/fonts/vjs.eot?#iefix") format("embedded-opentype"), url("/fonts/vjs.woff") format("woff"), url("/fonts/vjs.ttf") format("truetype"), url("/fonts/vjs.svg#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}
/* Base UI Component Classes
--------------------------------------------------------------------------------
*/
/* Slider - used for Volume bar and Seek bar */
.vjs-cp-skin .vjs-slider {
  /* Replace browser focus highlight with handle highlight */
  outline: 0;
  position: relative;
  cursor: pointer;
  padding: 0;
  /* background-color-with-alpha */
  background-color: #333333;
  background-color: rgba(51, 51, 51, 0.9);
}

.vjs-cp-skin .vjs-slider:focus {
  /* box-shadow */
  box-shadow: 0 0 2em #ffffff;
}

.vjs-cp-skin .vjs-slider-handle {
  position: absolute;
  /* Needed for IE6 */
  left: 0;
  top: 0;
}

.vjs-cp-skin .vjs-slider-handle:before {
  font-family: VideoJS;
  font-size: 1em;
  line-height: 1;
  text-align: center;
  text-shadow: 0em 0em 1em #fff;
  position: absolute;
  top: 0;
  left: 0;
  /* Rotate the square icon to make a diamond */
  /* transform */
  transform: rotate(-45deg);
}

/* Control Bar
--------------------------------------------------------------------------------
The default control bar that is a container for most of the controls.
*/
.vjs-cp-skin .vjs-control-bar {
  /* Start hidden */
  display: none;
  position: absolute;
  /* Place control bar at the bottom of the player box/video.
  If you want more margin below the control bar, add more height. */
  bottom: 0px;
  /* Use left/right to stretch to 100% width of player div */
  left: 0px;
  right: 0px;
  /* Height includes any margin you want above or below control items */
  height: 3em;
  /* background-color-with-alpha */
  /*background-color: #07141e;
  background-color: rgba(7, 20, 30, 0.7);*/
}

/* Show the control bar only once the video has started playing */
.vjs-cp-skin.vjs-has-started .vjs-control-bar {
  display: block;
  /* Visibility needed to make sure things hide in older browsers too. */
  visibility: visible;
  opacity: 1;
  /* transition */
  transition: visibility 0.1s, opacity 0.1s;
}

/* Hide the control bar when the video is playing and the user is inactive  */
.vjs-cp-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
  display: block;
  visibility: hidden;
  opacity: 0;
  /* transition */
  transition: visibility 0.5s, opacity 0.5s;
}

.vjs-cp-skin.vjs-controls-disabled .vjs-control-bar {
  display: none;
}

.vjs-cp-skin.vjs-using-native-controls .vjs-control-bar {
  display: none;
}

/* The control bar shouldn't show after an error */
.vjs-cp-skin.vjs-error .vjs-control-bar {
  display: none;
}

/* Don't hide the control bar if it's audio */
.vjs-audio.vjs-cp-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
  opacity: 1;
  visibility: visible;
}

/* IE8 is flakey with fonts, and you have to change the actual content to force
fonts to show/hide properly.
	- "\9" IE8 hack didn't work for this
	- Found in XP IE8 from http://modern.ie. Does not show up in "IE8 mode" in IE9
*/
@media \0 screen {
  .vjs-cp-skin.vjs-user-inactive.vjs-playing .vjs-control-bar :before {
    content: "";
  }
}
/* General styles for individual controls. */
.vjs-cp-skin .vjs-control {
  outline: none;
  position: relative;
  float: left;
  text-align: center;
  margin: 0;
  padding: 0;
  height: 3em;
  width: 4em;
}

/* Font button icons */
.vjs-cp-skin .vjs-control:before {
  font-family: VideoJS;
  font-size: 1.5em;
  line-height: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

/* Replacement for focus outline */
.vjs-cp-skin .vjs-control:focus:before, .vjs-cp-skin .vjs-control:hover:before {
  text-shadow: 0em 0em 1em #ffffff;
}

.vjs-cp-skin .vjs-control:focus {
  /*  outline: 0; */
  /* keyboard-only users cannot see the focus on several of the UI elements when
  this is set to 0 */
}

/* Hide control text visually, but have it available for screenreaders */
.vjs-cp-skin .vjs-control-text {
  /* hide-visually */
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/* Play/Pause
--------------------------------------------------------------------------------
*/
.vjs-cp-skin .vjs-play-control {
  width: 5em;
  cursor: pointer;
}

.vjs-cp-skin .vjs-play-control:before {
  content: "\e001";
}

.vjs-cp-skin.vjs-playing .vjs-play-control:before {
  content: "\e002";
}

/* Playback toggle
--------------------------------------------------------------------------------
*/
.vjs-cp-skin .vjs-playback-rate .vjs-playback-rate-value {
  font-size: 1.5em;
  line-height: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.vjs-cp-skin .vjs-playback-rate.vjs-menu-button .vjs-menu .vjs-menu-content {
  width: 4em;
  left: -2em;
  list-style: none;
}

/* Volume/Mute
-------------------------------------------------------------------------------- */
.vjs-cp-skin .vjs-mute-control, .vjs-cp-skin .vjs-volume-menu-button {
  cursor: pointer;
  float: right;
}

.vjs-cp-skin .vjs-mute-control:before, .vjs-cp-skin .vjs-volume-menu-button:before {
  content: "\e006";
}

.vjs-cp-skin .vjs-mute-control.vjs-vol-0:before, .vjs-cp-skin .vjs-volume-menu-button.vjs-vol-0:before {
  content: "\e003";
}

.vjs-cp-skin .vjs-mute-control.vjs-vol-1:before, .vjs-cp-skin .vjs-volume-menu-button.vjs-vol-1:before {
  content: "\e004";
}

.vjs-cp-skin .vjs-mute-control.vjs-vol-2:before, .vjs-cp-skin .vjs-volume-menu-button.vjs-vol-2:before {
  content: "\e005";
}

.vjs-cp-skin .vjs-volume-control {
  width: 5em;
  float: right;
}

.vjs-cp-skin .vjs-volume-bar {
  width: 5em;
  height: 0.6em;
  margin: 1.1em auto 0;
}

.vjs-cp-skin .vjs-volume-level {
  position: absolute;
  top: 0;
  left: 0;
  height: 0.5em;
  /* assuming volume starts at 1.0 */
  width: 100%;
  background: grey url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat;
}

.vjs-cp-skin .vjs-volume-bar .vjs-volume-handle {
  width: 0.5em;
  height: 0.5em;
  /* Assumes volume starts at 1.0. If you change the size of the
  handle relative to the volume bar, you'll need to update this value
  too. */
  left: 4.5em;
}

.vjs-cp-skin .vjs-volume-handle:before {
  font-size: 0.9em;
  top: -0.2em;
  left: -0.2em;
  width: 1em;
  height: 1em;
}

/* The volume menu button is like menu buttons (captions/subtitles) but works
		a little differently. It needs to be possible to tab to the volume slider
		without hitting space bar on the menu button. To do this we're not using
		display:none to hide the slider menu by default, and instead setting the
		width and height to zero. */
.vjs-cp-skin .vjs-volume-menu-button .vjs-menu {
  display: block;
  width: 0;
  height: 0;
  border-top-color: transparent;
}

.vjs-cp-skin .vjs-volume-menu-button .vjs-menu .vjs-menu-content {
  height: 0;
  width: 0;
}

.vjs-cp-skin .vjs-volume-menu-button:hover .vjs-menu, .vjs-cp-skin .vjs-volume-menu-button .vjs-menu.vjs-lock-showing {
  border-top-color: rgba(7, 40, 50, 0.5);
  /* Same as ul background */
}

.vjs-cp-skin .vjs-volume-menu-button:hover .vjs-menu .vjs-menu-content, .vjs-cp-skin .vjs-volume-menu-button .vjs-menu.vjs-lock-showing .vjs-menu-content {
  height: 2.9em;
  width: 10em;
}

/* Progress
--------------------------------------------------------------------------------
*/
.vjs-cp-skin .vjs-progress-control {
  position: absolute;
  left: 0;
  right: 0;
  width: auto;
  font-size: 0.4em;
  height: 1em;
  /* Set above the rest of the controls. */
  top: -1em;
  /* Shrink the bar slower than it grows. */
  /* transition */
  transition: all 0.4s;
}

/* On hover, make the progress bar grow to something that's more clickable.
		This simply changes the overall font for the progress bar, and this
		updates both the em-based widths and heights, as wells as the icon font */
.vjs-cp-skin:hover .vjs-progress-control {
  font-size: 0.4em;
  /* Even though we're not changing the top/height, we need to include them in
  the transition so they're handled correctly. */
  /* transition */
  transition: all 0.2s;
}

/* Box containing play and load progresses. Also acts as seek scrubber. */
.vjs-cp-skin .vjs-progress-holder {
  height: 100%;
}

/* Progress Bars */
.vjs-cp-skin .vjs-progress-holder .vjs-play-progress, .vjs-cp-skin .vjs-progress-holder .vjs-load-progress, .vjs-cp-skin .vjs-progress-holder .vjs-load-progress div {
  position: absolute;
  display: block;
  height: 100%;
  margin: 0;
  padding: 0;
  /* updated by javascript during playback */
  width: 0;
  /* Needed for IE6 */
  left: 0;
  top: 0;
}

.vjs-cp-skin .vjs-play-progress {
  /*
  	Using a data URI to create the white diagonal lines with a transparent
  		background. Surprisingly works in IE8.
  		Created using http://www.patternify.com
  	Changing the first color value will change the bar color.
  	Also using a paralax effect to make the lines move backwards.
  		The -50% left position makes that happen.
  */
  /*
  background: #66a8cc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat;
  */
  background: #ffffff;
  box-shadow: 0px 0px 3px #ffffff;
}

.vjs-cp-skin .vjs-load-progress {
  background: #646464;
  background: rgba(255, 255, 255, 0.2);
}

/* there are child elements of the load progress bar that represent the
	 specific time ranges that have been buffered */
.vjs-cp-skin .vjs-load-progress div {
  background: #787878;
  background: rgba(255, 255, 255, 0.1);
}

.vjs-cp-skin .vjs-seek-handle {
  width: 1.5em;
  height: 100%;
}

.vjs-cp-skin .vjs-seek-handle:before {
  padding-top: 0.1em;
}

/* Live Mode
--------------------------------------------------------------------------------
*/
.vjs-cp-skin.vjs-live .vjs-time-controls, .vjs-cp-skin.vjs-live .vjs-time-divider, .vjs-cp-skin.vjs-live .vjs-progress-control {
  display: none;
}

.vjs-cp-skin.vjs-live .vjs-live-display {
  display: block;
}

/* Live Display
--------------------------------------------------------------------------------
*/
.vjs-cp-skin .vjs-live-display {
  display: none;
  font-size: 1em;
  line-height: 3em;
}

/* Time Display
--------------------------------------------------------------------------------
*/
.vjs-cp-skin .vjs-time-controls {
  font-size: 1em;
  /* Align vertically by making the line height the same as the control bar */
  line-height: 3em;
}

.vjs-cp-skin .vjs-current-time {
  float: left;
}

.vjs-cp-skin .vjs-duration {
  float: left;
}

/* Remaining time is in the HTML, but not included in default design */
.vjs-cp-skin .vjs-remaining-time {
  display: none;
  float: left;
}

.vjs-time-divider {
  float: left;
  line-height: 3em;
}

/* Fullscreen
--------------------------------------------------------------------------------
*/
.vjs-cp-skin .vjs-fullscreen-control {
  width: 3.8em;
  cursor: pointer;
  float: right;
}

.vjs-cp-skin .vjs-fullscreen-control:before {
  content: "\e000";
}

/* Switch to the exit icon when the player is in fullscreen */
.vjs-cp-skin.vjs-fullscreen .vjs-fullscreen-control:before {
  content: "\e00b";
}

/* Big Play Button (play button at start)
--------------------------------------------------------------------------------
Positioning of the play button in the center or other corners can be done more
easily in the skin designer. http://designer.videojs.com/
*/
.vjs-cp-skin .vjs-big-play-button {
  left: 0.5em;
  top: 0.5em;
  font-size: 2em;
  display: block;
  z-index: 2;
  position: absolute;
  width: 3em;
  height: 2.6em;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  opacity: 1;
  /* Need a slightly gray bg so it can be seen on black backgrounds */
  /* background-color-with-alpha */
  /*background-color: #07141e;
  background-color: rgba(7, 20, 30, 0.7);*/
  /*border: 0.1em solid #3b4249;*/
  /* border-radius */
  border-radius: 0.8em;
  /* box-shadow */
  /*-webkit-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
  -moz-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
  box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);*/
  /* transition */
  transition: all 0.4s;
}

/* Optionally center */
.vjs-cp-skin.vjs-big-play-centered .vjs-big-play-button {
  /* Center it horizontally */
  left: 50%;
  margin-left: -1.5em;
  /* Center it vertically */
  top: 50%;
  margin-top: -1.4em;
}

/* Hide if controls are disabled */
.vjs-cp-skin.vjs-controls-disabled .vjs-big-play-button {
  display: none;
}

/* Hide when video starts playing */
.vjs-cp-skin.vjs-has-started .vjs-big-play-button {
  display: none;
}

/* Hide on mobile devices. Remove when we stop using native controls
		by default on mobile  */
.vjs-cp-skin.vjs-using-native-controls .vjs-big-play-button {
  display: none;
}

.vjs-cp-skin:hover .vjs-big-play-button, .vjs-cp-skin .vjs-big-play-button:focus {
  outline: 0;
  border-color: #fff;
  /* IE8 needs a non-glow hover state */
  /*background-color: #505050;
  background-color: rgba(50, 50, 50, 0.75);*/
  /* box-shadow */
  /*-webkit-box-shadow: 0 0 3em #ffffff;
  -moz-box-shadow: 0 0 3em #ffffff;
  box-shadow: 0 0 3em #ffffff;*/
  /* transition */
  transition: all 0s;
}

.vjs-cp-skin .vjs-big-play-button:before {
  content: "\e001";
  font-family: VideoJS;
  /* In order to center the play icon vertically we need to set the line height
  to the same as the button height */
  line-height: 2.6em;
  /*text-shadow: 0.05em 0.05em 0.1em #000;*/
  text-align: center;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
}

.vjs-error .vjs-big-play-button {
  display: none;
}

/* Error Display
--------------------------------------------------------------------------------
*/
.vjs-error-display {
  display: none;
}

.vjs-error .vjs-error-display {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.vjs-error .vjs-error-display:before {
  content: "X";
  font-family: Arial;
  font-size: 4em;
  color: #666666;
  /* In order to center the play icon vertically we need to set the line height
  to the same as the button height */
  line-height: 1;
  text-shadow: 0.05em 0.05em 0.1em #000;
  text-align: center;
  vertical-align: middle;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -0.5em;
  width: 100%;
}

.vjs-error-display div {
  position: absolute;
  bottom: 1em;
  right: 0;
  left: 0;
  font-size: 1.4em;
  text-align: center;
  padding: 3px;
  background: #000000;
  background: rgba(0, 0, 0, 0.5);
}

.vjs-error-display a, .vjs-error-display a:visited {
  color: #F4A460;
}

/* Loading Spinner
--------------------------------------------------------------------------------
*/
.vjs-loading-spinner {
  /* Should be hidden by default */
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 4em;
  line-height: 1;
  width: 1em;
  height: 1em;
  margin-left: -0.5em;
  margin-top: -0.5em;
  opacity: 0.75;
}

/* Show the spinner when waiting for data and seeking to a new time */
.vjs-waiting .vjs-loading-spinner, .vjs-seeking .vjs-loading-spinner {
  display: block;
  /* only animate when showing because it can be processor heavy */
  /* animation */
  animation: spin 1.5s infinite linear;
}

/* Errors are unrecoverable without user interaction so hide the spinner */
.vjs-error .vjs-loading-spinner {
  display: none;
  /* ensure animation doesn't continue while hidden */
  /* animation */
  animation: none;
}

.vjs-cp-skin .vjs-loading-spinner:before {
  content: "\e01e";
  font-family: VideoJS;
  position: absolute;
  top: 0;
  left: 0;
  width: 1em;
  height: 1em;
  text-align: center;
  text-shadow: 0em 0em 0.1em #000;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}
/* Menu Buttons (Captions/Subtitles/etc.)
--------------------------------------------------------------------------------
*/
.vjs-cp-skin .vjs-menu-button {
  float: right;
  cursor: pointer;
}

.vjs-cp-skin .vjs-menu {
  display: none;
  position: absolute;
  bottom: 0;
  left: -1.5em;
  /* (Width of vjs-menu - width of button) / 2 */
  width: 0em;
  height: 0em;
  margin-bottom: 3em;
  border-left: 2em solid transparent;
  border-right: 2em solid transparent;
  border-top: 1.55em solid #000000;
  /* Same width top as ul bottom */
  border-top-color: rgba(7, 40, 50, 0.5);
  /* Same as ul background */
}

/* Button Pop-up Menu */
.vjs-cp-skin .vjs-menu-button .vjs-menu .vjs-menu-content {
  display: block;
  padding: 0;
  margin: 0;
  position: absolute;
  width: 10em;
  bottom: 1.5em;
  /* Same bottom as vjs-menu border-top */
  max-height: 15em;
  overflow: auto;
  left: -5em;
  /* Width of menu - width of button / 2 */
  /* background-color-with-alpha */
  background-color: #07141e;
  background-color: rgba(7, 20, 30, 0.7);
}

.vjs-cp-skin .vjs-menu-button:hover .vjs-control-content .vjs-menu, .vjs-cp-skin .vjs-control-content .vjs-menu.vjs-lock-showing {
  display: block;
}

/* prevent menus from opening while scrubbing (FF, IE) */
.vjs-cp-skin.vjs-scrubbing .vjs-menu-button:hover .vjs-control-content .vjs-menu {
  display: none;
}

.vjs-cp-skin .vjs-menu-button ul li {
  list-style: none;
  margin: 0;
  padding: 0.3em 0 0.3em 0;
  line-height: 1.4em;
  font-size: 1.1em;
  text-align: center;
  text-transform: uppercase;
}

.vjs-cp-skin .vjs-menu-button ul li.vjs-selected {
  background-color: rgba(209, 25, 53, 0.9);
}

.vjs-cp-skin .vjs-menu-button ul li:focus, .vjs-cp-skin .vjs-menu-button ul li:hover, .vjs-cp-skin .vjs-menu-button ul li.vjs-selected:focus, .vjs-cp-skin .vjs-menu-button ul li.vjs-selected:hover {
  outline: 0;
  color: white;
  /* background-color-with-alpha */
  background-color: #ffffff;
  background-color: rgba(209, 25, 53, 0.9);
}

s .vjs-cp-skin .vjs-menu-button ul li.vjs-menu-title {
  text-align: center;
  text-transform: uppercase;
  font-size: 5em;
  line-height: 2em;
  padding: 0;
  margin: 0 0 0.3em 0;
  cursor: default;
}

.vjs-menu-title.vjs-res-menu-title {
  font-weight: bold !important;
}

/* Subtitles Button */
.vjs-cp-skin .vjs-subtitles-button:before {
  content: "\e00c";
}

/* Captions Button */
.vjs-cp-skin .vjs-captions-button:before {
  content: "\e008";
}

/* Chapters Button */
.vjs-cp-skin .vjs-chapters-button:before {
  content: "\e00c";
}

.vjs-cp-skin .vjs-chapters-button.vjs-menu-button .vjs-menu .vjs-menu-content {
  width: 24em;
  left: -12em;
}

/* Replacement for focus outline */
/*
REQUIRED STYLES (be careful overriding)
================================================================================
When loading the player, the video tag is replaced with a DIV,
that will hold the video tag or object tag for other playback methods.
The div contains the video playback element (Flash or HTML5) and controls,
and sets the width and height of the video.

** If you want to add some kind of border/padding (e.g. a frame), or special
positioning, use another containing element. Otherwise you risk messing up
control positioning and full window mode. **
*/
.video-js {
  background-color: #000;
  position: relative;
  padding: 0;
  /* Start with 10px for base font size so other dimensions can be em based and
  easily calculable. */
  font-size: 10px;
  /* Allow poster to be vertically aligned. */
  vertical-align: middle;
  /*  display: table-cell; */
  /*This works in Safari but not Firefox.*/
  /* Provide some basic defaults for fonts */
  font-weight: normal;
  font-style: normal;
  /* Avoiding helvetica: issue #376 */
  font-family: Arial, sans-serif;
  /* Turn off user selection (text highlighting) by default.
  The majority of player components will not be text blocks.
  Text areas will need to turn user selection back on. */
  /* user-select */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* Playback technology elements expand to the width/height of the containing div
		<video> or <object> */
.video-js .vjs-tech {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when
	 checking fullScreenEnabled. */
.video-js:-moz-full-screen {
  position: absolute;
}

/* Fullscreen Styles */
body.vjs-full-window {
  padding: 0;
  margin: 0;
  height: 100%;
  /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */
  overflow-y: auto;
}

.video-js.vjs-fullscreen {
  position: fixed;
  overflow: hidden;
  z-index: 1000;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
  /* IE6 full-window (underscore hack) */
  _position: absolute;
}

.video-js:-webkit-full-screen {
  width: 100% !important;
  height: 100% !important;
}

.video-js.vjs-fullscreen.vjs-user-inactive {
  cursor: none;
}

/* Poster Styles */
.vjs-poster {
  display: none;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  cursor: pointer;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.vjs-poster img {
  display: block;
  margin: 0 auto;
  max-height: 100%;
  padding: 0;
  width: 100%;
}

/* Hide the poster after the video has started playing */
.video-js.vjs-has-started .vjs-poster {
  display: none;
}

/* Don't hide the poster if we're playing audio */
.video-js.vjs-audio.vjs-has-started .vjs-poster {
  display: block;
}

/* Hide the poster when controls are disabled because it's clickable
		and the native poster can take over */
.video-js.vjs-controls-disabled .vjs-poster {
  display: none;
}

/* Hide the poster when native controls are used otherwise it covers them */
.video-js.vjs-using-native-controls .vjs-poster {
  display: none;
}

/* Text Track Styles */
/* Overall track holder for both captions and subtitles */
.video-js .vjs-text-track-display {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 3em;
  right: 0;
  pointer-events: none;
}

/* Captions Settings Dialog */
.vjs-caption-settings {
  position: relative;
  top: 1em;
  background-color: #000;
  opacity: 0.75;
  color: #FFF;
  margin: 0 auto;
  padding: 0.5em;
  height: 15em;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  width: 40em;
}

.vjs-caption-settings .vjs-tracksettings {
  top: 0;
  bottom: 2em;
  left: 0;
  right: 0;
  position: absolute;
  overflow: auto;
}

.vjs-caption-settings .vjs-tracksettings-colors, .vjs-caption-settings .vjs-tracksettings-font {
  float: left;
}

.vjs-caption-settings .vjs-tracksettings-colors:after, .vjs-caption-settings .vjs-tracksettings-font:after, .vjs-caption-settings .vjs-tracksettings-controls:after {
  clear: both;
}

.vjs-caption-settings .vjs-tracksettings-controls {
  position: absolute;
  bottom: 1em;
  right: 1em;
}

.vjs-caption-settings .vjs-tracksetting {
  margin: 5px;
  padding: 3px;
  min-height: 40px;
}

.vjs-caption-settings .vjs-tracksetting label {
  display: block;
  width: 100px;
  margin-bottom: 5px;
}

.vjs-caption-settings .vjs-tracksetting span {
  display: inline;
  margin-left: 5px;
}

.vjs-caption-settings .vjs-tracksetting > div {
  margin-bottom: 5px;
  min-height: 20px;
}

.vjs-caption-settings .vjs-tracksetting > div:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  min-height: 0;
}

.vjs-caption-settings label > input {
  margin-right: 10px;
}

.vjs-caption-settings input[type=button] {
  width: 40px;
  height: 40px;
}

/* Hide disabled or unsupported controls */
.vjs-hidden {
  display: none !important;
}

.vjs-lock-showing {
  display: block !important;
  opacity: 1;
  visibility: visible;
}

/*  In IE8 w/ no JavaScript (no HTML5 shim), the video tag doesn't register.
		The .video-js classname on the video tag also isn't considered.
		This optional paragraph inside the video tag can provide a message to users
		about what's required to play video. */
.vjs-no-js {
  padding: 2em;
  color: #ccc;
  background-color: #333;
  font-size: 1.8em;
  font-family: Arial, sans-serif;
  text-align: center;
  width: 30em;
  height: 15em;
  margin: 0 auto;
}

.vjs-no-js a, .vjs-no-js a:visited {
  color: #F4A460;
}

div.vjs-live-controls.vjs-control {
  display: none;
}

div.vjs-res-button.vjs-menu-button.vjs-control {
  text-align: left;
  width: 3em;
}

div.vjs-next-control.vjs-control {
  display: none;
}

/* -----------------------------------------------------------------------------
The original source of this file lives at
https://github.com/videojs/video.js/blob/master/src/css/video-js.less */
@media screen and (max-width: 450px) {
  .vjs-time-divider {
    display: none;
  }
  .vjs-duration-display {
    display: none;
  }
  div.vjs-duration-vjs-time-controls.vjs-control {
    display: none;
  }
  div.vjs-duration.vjs-time-controls.vjs-control {
    display: none;
  }
}
#trailer-container {
  box-sizing: border-box;
}

.trailerplayer_details {
  box-sizing: border-box;
  position: relative;
}

.trailerplayer_details .videocontainer {
  padding-bottom: 56.25%;
}

.trailerplayer_details .videocontainer .vjs-playlist-item {
  position: absolute;
}

.trailerplayer_details .video_wrap {
  display: none;
}

.trailerplayer_details .video_wrap.active {
  display: block;
}

.trailerplayer_details video {
  z-index: 0;
}

.trailerplayer_details .vjs-control-bar {
  z-index: 20;
}

/*
You are free to style the button however you wish. I plan to use
an icon from my site's own icon font to make it more visible. These
are just basic styles to make it look ok with plain text.
*/
/* Position the button */
.vjs-res-button {
  float: right;
  line-height: 3em;
}

/* Don't show hover effects on title */
ul li.vjs-menu-title.vjs-res-menu-title:hover {
  cursor: default;
  background-color: transparent;
  color: white;
  box-shadow: none;
}

/* Needed to keep text visible in video.js 4.9 */
.vjs-res-button .vjs-control-text {
  width: auto;
  height: auto;
  clip: auto;
}

#trailer-container {
  position: relative;
}

header.trailerplayer_title {
  position: absolute;
  top: 0px;
  z-index: 21;
}

div.trailerplayer_playlist {
  float: left;
  margin-left: -210px;
}

#tpmb {
  background: RGBA(0, 0, 0, 0.6);
  border-radius: 0 0 15px 0;
  width: 40px;
  height: 40px;
  float: right;
  z-index: 1;
  position: relative;
  cursor: pointer;
}

#tpmb span {
  background: URL("/img/shared/videoPlayer/sign.svg");
  width: 20px;
  background-size: 100%;
  height: 20px;
  position: absolute;
  background-repeat: no-repeat;
  top: 12px;
  left: 8px;
}

#trailer-fsk {
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 1;
  color: white;
  background: RGBA(0, 0, 0, 0.6);
  font-size: 0.8rem;
  border-radius: 0 0 0 15px;
  padding-left: 10px;
  padding: 8px;
  text-align: center;
  padding-right: 15px;
  line-height: 14px;
}

#trailer-fsk span {
  font-weight: bold;
}

#vjs-playlist-list-container {
  background: RGBA(0, 0, 0, 0.6);
  color: white;
  position: relative;
  max-height: 250px;
  overflow: hidden;
  border-radius: 0 0 15px 0;
}

#vjs-playlist-list li.display-none {
  display: none;
}

#scroll-top {
  position: absolute;
  top: 0px;
  height: 35px;
  margin-left: -20px;
  width: 100%;
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000000 10%, #000000 90%, rgba(0, 0, 0, 0) 100%);
  text-align: center;
  display: none;
  padding-top: 6px;
}

#scroll-bottom {
  position: absolute;
  bottom: 0px;
  height: 35px;
  margin-left: -20px;
  width: 100%;
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000000 10%, #000000 90%, rgba(0, 0, 0, 0) 100%);
  text-align: center;
  padding-top: 6px;
}

.navigate-button {
  display: block;
  cursor: pointer;
}
.navigate-button img {
  width: 20px;
}

body ul#vjs-playlist-list li.video-selected a {
  color: white !important;
  font-weight: bold;
  text-transform: uppercase;
}

#vjs-playlist-list li a {
  color: white;
  text-decoration: none;
  line-height: 2.5rem;
  font-size: 0.9rem;
  display: block;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

#vjs-playlist-list li a:hover {
  color: white;
}

#vjs-playlist-list {
  padding: 20px;
  margin: 0px;
  list-style: none;
  padding-top: 10px;
}

/*
			  Player Skin Designer for Video.js
			  http://videojs.com

			  To customize the player skin edit
			  the CSS below. Click "details"
			  below to add comments or questions.
			  This file uses some SCSS. Learn more
			  at http://sass-lang.com/guide)

			  This designer can be linked to at:
			  http://codepen.io/heff/pen/EarCt/left/?editors=010
			*/
.vjs-menu li:focus, .vjs-menu li:hover {
  background-color: #000;
}

.video-js:hover .vjs-big-play-button, .video-js .vjs-big-play-button:focus {
  background-color: rgba(209, 25, 53, 0.9);
  border-color: white;
}

.video-js .vjs-time-tooltip, .video-js .vjs-mouse-display:after, .video-js .vjs-play-progress:after {
  background-color: white;
}

.video-js {
  /* The base font size controls the size of everything, not just text.
      All dimensions use em-based sizes so that the scale along with the font size.
      Try increasing it to 15px and see what happens. */
  font-size: 12px;
  /* The main font color changes the ICON COLORS as well as the text */
  color: white;
}

/* The "Big Play Button" is the play button that shows before the video plays.
			   To center it set the align values to center and middle. The typical location
			   of the button is the center, but there is trend towards moving it to a corner
			   where it gets out of the way of valuable content in the poster image.*/
.vjs-default-skin .vjs-big-play-button {
  /* The font size is what makes the big play button...big.
      All width/height values use ems, which are a multiple of the font size.
      If the .video-js font-size is 10px, then 3em equals 30px.*/
  font-size: 3em;
  /* We're using SCSS vars here because the values are used in multiple places.
      Now that font size is set, the following em values will be a multiple of the
      new font size. If the font-size is 3em (30px), then setting any of
      the following values to 3em would equal 30px. 3 * font-size. */
  /* 1.5em = 45px default */
  line-height: 1.5em;
  height: 1.5em;
  width: 3em;
  /* 0.06666em = 2px default */
  border: 0.06666em solid white;
  /* 0.3em = 9px default */
  border-radius: 0.3em;
  /* Align center */
  left: 50%;
  top: 50%;
  margin-left: -1.5em;
  margin-top: -0.75em;
}

/* The default color of control backgrounds is mostly black but with a little
			   bit of blue so it can still be seen on all-black video frames, which are common. */
.video-js .vjs-control-bar, .video-js .vjs-big-play-button, .video-js .vjs-menu-button .vjs-menu-content {
  /* IE8 - has no alpha support */
  background-color: #000;
  /* Opacity: 1.0 = 100%, 0.0 = 0% */
  background-color: rgba(198, 37, 0, 0.9);
}

/* Slider - used for Volume bar and Progress bar */
.video-js .vjs-slider {
  background-color: #f33432;
  background-color: rgba(255, 255, 255, 0.7);
}

/* The slider bar color is used for the progress bar and the volume bar
			   (the first two can be removed after a fix that's coming) */
.video-js .vjs-volume-level, .video-js .vjs-play-progress, .video-js .vjs-slider-bar {
  background: rgba(209, 25, 53, 0.9);
}

/* The main progress bar also has a bar that shows how much has been loaded. */
.video-js .vjs-load-progress {
  /* For IE8 we'll lighten the color */
  background: ligthen(#f33432, 25%);
  /* Otherwise we'll rely on stacked opacities */
  background: rgba(255, 255, 255, 0.7);
}

/* The load progress bar also has internal divs that represent
			   smaller disconnected loaded time ranges */
.video-js .vjs-load-progress div {
  /* For IE8 we'll lighten the color */
  background: ligthen(#f33432, 50%);
  /* Otherwise we'll rely on stacked opacities */
  background: rgba(198, 37, 0, 0.9);
}

/* Klaro Cookie Consent */
#klaro h1.title {
  text-shadow: none !important;
  color: black !important;
  border: 0 !important;
  padding-left: 0 !important;
  background-color: none !important;
  background: none !important;
  position: relative !important;
}

.klaro .cookie-modal .cm-btn.cm-btn-info, .klaro .context-notice .cm-btn.cm-btn-info, .klaro .cookie-notice .cm-btn.cm-btn-info {
  background-color: black !important;
  color: white !important;
}

.klaro .cookie-modal .cm-btn.cm-btn-success, .klaro .context-notice .cm-btn.cm-btn-success, .klaro .cookie-notice .cm-btn.cm-btn-success {
  background-color: black !important;
}

.cm-footer-buttons > button, .cn-buttons > button, .cn-ok > button {
  border: none !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 19px !important;
  padding: 10px !important;
}

button.cm-btn-danger {
  background: gray !important;
  border: none !important;
  color: white !important;
}

/* Vertical Nav height */
@media only screen and (max-width: 767px) {
  .nav-vertical {
    min-height: 0px !important;
  }
}
/* Social Links auf Detailseite */
.social-links {
  font-size: 1.4rem;
}
.social-links a {
  margin-right: 13px;
}

/* Home todaySlider */
.playingTime {
  color: rgba(255, 255, 255, 0.9) !important;
}

.movie-tec-icon.hfrDreiD {
  font-size: 14px;
  line-height: 15px;
  padding: 3px 1px 2px 2px;
  text-align: center;
}

/* Headslieder improvements */
div#slider-carousel div.slider {
  width: 100%;
  margin: 0 5px;
  background-size: cover;
  background-position: center;
}
div#slider-carousel div.slider img {
  width: 100%;
}

@media only screen and (min-width: 500px) {
  div#slider-carousel div.slider {
    width: 500px;
    height: 219px;
  }
}
@media only screen and (min-width: 1460px) {
  div#slider-carousel div.slider {
    width: 900px;
    height: 395px;
  }
}
div.slider-poster {
  width: 31%;
}

div.slider-scene-text {
  width: 69%;
}

.slider-color-gradient {
  height: 100%;
}

/* Barrierefreier Tab-Button */
.skip-link {
  position: absolute;
  left: 1rem;
  top: 1rem;
  transform: translateY(-200%);
  background-color: #ff017e;
  color: #ffffff !important;
  padding: 0.5em 1em;
  font-weight: bold;
  border: 2px solid #ffffff;
  border-radius: 6px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.45);
  text-decoration: none;
  z-index: 9999;
  transition: transform 0.3s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* cookiebar 2020 */

/*# sourceMappingURL=main.css.map*/