/* Colour tokens. Defined in na_Tpl_gen.php ($sTpl['tokens']) — edit values there, not here.
   na_style_mobile.css.php is included at the tail of this file and inherits these. */
:root {
    --c-navy: #1c437c;
    --navy-rgb: 28, 67, 124;
    --c-navy-lift: #1c437c;
    --c-white: #ffffff;
    --surface-page-rgb: 247, 244, 238;
    --surface-page: #f7f4ee;
    --surface-raised: var(--c-white);
    --surface-invert: var(--c-navy);
    --surface-hover: var(--c-navy-lift);
    --surface-band: #d9d6cf;
    --ink: var(--c-navy);
    --ink-accent: var(--c-navy);
    --ink-on-raised: var(--c-navy);
    --ink-invert: var(--c-white);
    --ink-on-accent: var(--c-white);
    --ink-muted: #737373;
    --ink-hover: var(--c-navy-lift);
    --hairline: rgba(var(--navy-rgb), 0.3);
    --hairline-soft: rgba(var(--navy-rgb), 0.25);
    --hairline-invert: rgba(255, 255, 255, 0.25);
    --scrim: rgba(var(--navy-rgb), 0.92);
    --scrim-soft: rgba(var(--navy-rgb), 0.5);
    --accent-focus: #f37021;
    --state-error: #b3261e;
    --state-success: #1e6b34;
}

[data-href] {
    cursor: pointer;
}

input {
    border-radius: 0;
}

@font-face {
    font-family: 'atlas-pro';
    font-weight: 400; /*(regular)*/
    font-style: normal;
    src: url('fonts/atlas-pro-aaa-400.eot');
    src: url('fonts/atlas-pro-aaa-400.eot#iefix') format('embedded-opentype'),
    url('fonts/atlas-pro-aaa-400.woff') format('woff'),
    url('fonts/atlas-pro-aaa-400.ttf') format('truetype');
}

@font-face {
    font-family: 'atlas-pro';
    font-weight: 500; /*(medium)*/
    font-style: normal;
    src: url('fonts/atlas-pro-aaa-500.eot');
    src: url('fonts/atlas-pro-aaa-500.eot#iefix') format('embedded-opentype'),
    url('fonts/atlas-pro-aaa-500.woff') format('woff'),
    url('fonts/atlas-pro-aaa-500.ttf') format('truetype');
}

@font-face {
    font-family: 'atlas-pro';
    font-weight: 700; /*(bold)*/
    font-style: normal;
    src: url('fonts/atlas-pro-aaa-700.eot');
    src: url('fonts/atlas-pro-aaa-700.eot#iefix') format('embedded-opentype'),
    url('fonts/atlas-pro-aaa-700.woff') format('woff'),
    url('fonts/atlas-pro-aaa-700.ttf') format('truetype');
}

html {
    font-family: 'atlas-pro', 'Arial';
    font-size: 13px;
}

body {
    font-family: 'atlas-pro', 'Arial';
    font-size: 13px;
    color: var(--ink);
    background: var(--surface-page);
}

/* bootstrap ships a{color:#428bca}. The dark design coloured most links per
   component and never noticed the rest falling through to that blue; on cream
   it is plainly wrong. Every link in the Figma is navy. */
a {
    color: var(--ink);
}

a:hover, a:focus {
    color: var(--ink-hover);
}

/* the scrollbar plugin sets a black colour on its wrapper, which then leaks
   into anything inside it that does not set its own */
.mCustomScrollbar {
    color: inherit;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: inherit;
    text-decoration: inherit;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover, h1 a:focus, h2 a:focus, h3 a:focus, h4 a:focus, h5 a:focus, h6 a:focus {
    color: inherit;
}

select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}

select::-ms-expand {
    display: none;
}

header .upperHeader {
    background: var(--surface-page);
}

header {
    position: fixed;
    width: 100%;
    top: 0;
left: 0;
    z-index: 9999;
}

/*.wrapper{*/
/*    background: url("../images/mainBg.png") */
 /* top no-repeat;*/
/*}*/
.logoWrap,
.dates {
    line-height: 182px;
    transition: line-height .25s ease-in-out;
    -moz-transition: line-height .25s ease-in-out;
    -webkit-transition: line-height .25s ease-in-out;
}

.fixedPos .bottomHeader {
    background: rgba(var(--surface-page-rgb), 0.9);
}

.logoWrap a {
    display: block;
}

.logoWrap a img {
    max-height: 152px;
    width: auto;
    max-width: 80%;
    transition: all .25s ease-in-out;
}

.dates {
    text-align: center;
    font-size: 32px;
    font-weight: 300;
    color: var(--ink-accent);
}


.dates .date {
    border: 1.5px solid var(--hairline);
    line-height: 1;
    padding: 2px 12px;
    white-space: nowrap;
    vertical-align: super;

    border-radius: 15px;
    background: var(--surface-invert);
    color: var(--ink-invert);
}

@media only screen and (min-width: 1200px) {
    .dates .date {
        padding: 10px 16px;
        vertical-align: initial;
    }

}

/*.dates:before{*/
/*    content: "";*/
/*    position: absolute;*/
/*    top: 0;*/
 /*:0;*/
/*    width: 5px;*/
/*    height: 100%;*/
/*    transform: skew(25deg,0deg);*/
/*    background: #f37322;*/
/*}*/
/*.dates:after{*/
/*    content: "";*/
/*    position: absolute;*/
/*    top: 0;*/
 /*: 90%;*/
/*    width: 220px;*/
/*    height: 100%;*/
/*    background: url('*/
 /*') center center no-repeat;*/
/*    transform: skew(5deg,0deg);*/
/*    background-size: 100% 100%;*/
/*}*/
.topMenu, .mobile-icons {
    /*padding:76px 15px;*/
    padding: 0px 15px;
    height: 182px;
    line-height: 182px;
    transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
}

/* Push .topMenu to the end of the header row.
   Three things had to change before `margin-inline-start: auto` could do
   anything:
     - an auto margin computes to 0 on a floated element, and these are
       bootstrap 3 grid columns, so the row is flexed and the float dropped
     - the row's columns filled it exactly, leaving no free space for auto to
       absorb; the empty column left behind when the dates block was removed
       (8ed1210) is dropped via :empty, so it returns if content is restored
     - at <=479px a later rule set margin-<align>: 15px, which in RTL is
       margin-right — the same physical side margin-inline-start maps to — and
       overrode it. That declaration is gone; auto positions it now. */
header .upperHeader > .container > .row {
    display: flex;
    align-items: center;
}

header .upperHeader > .container > .row > [class*="col-"] {
    float: none;
}

header .upperHeader > .container > .row > .col-sm-4:empty {
    display: none;
}

.topMenu {
    margin-inline-start: auto;
}

.mobile-icons {
    display: none;

}

@media (max-width: 767px) {
    .mobile-icons {
        display: block;
        height: unset;
        line-height: 1;
        float: left;
        padding: 0;
        margin-top: 10px;
        margin-bottom: 20px;
        width: 100%;
    }
}

.topMenu ul, .mobile-icons ul {
    float: right;
    padding: 0;
    margin: 0;
    list-style: none;
}

.mobile-icons ul {
    float: unset;
    line-height: 1;
}

.topMenu ul li, .mobile-icons ul li {
    /*float: */
;
    width: 30px;
    height: 30px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
}

.topMenu ul li + li, .mobile-icons ul li + li {
margin-left: 10px;
}

.topMenu ul li a, .mobile-icons ul li a {
    display: block;
    height: 30px;
    line-height: 30px;
    font-size: 1.125rem;
    position: relative;
}

.topMenu svg, .mobile-icons svg {
    width: 20px;
    height: 30px;
    fill: var(--ink);
}

/* Figma 2537:400 — the social icons are square, self-coloured navy artwork on
   the bare cream bar. No chip, no fill override, no per-icon width: the old
   7px/15px widths existed to squeeze the previous monochrome glyphs into
   coloured squares that no longer exist. */
.topMenu .facebook svg, .topMenu .instagram svg, .topMenu .whatsapp svg,
.mobile-icons .facebook svg, .mobile-icons .instagram svg, .mobile-icons .whatsapp svg {
    width: 28px;
    height: 28px;
}

.langugeWrap a,
.langugeWrap a:hover,
.langugeWrap a:focus {
    color: var(--ink);
    text-decoration: none;
}





.langugeWrap {
    background: var(--surface-page);
}

.bottomHeader {
    background: var(--surface-page);
    /* Figma "Nav border": 1440x1 at the foot of the nav bar */
    border-bottom: 1px solid var(--hairline-soft);
}

.navbar-collapse {
    padding: 0;
}

.searchWrap {
    float: right;
    margin: 5px 0;
    border: 1px solid var(--hairline);
}

.searchWrap input {
    vertical-align: middle;
    height: 36px;
    background: transparent;
    border: 0;
    padding: 7px;
}

.searchWrap input[type="submit"] {
    background: url("../images/searchBtn.png") center center no-repeat;
    background-size: 14px 14px;
    width: 34px;
}

.navbar-nav > li {
    position: relative;
}

.nav > li > a {
    color: var(--ink);
    padding: 15px 25px !important;
    font-size: 1.563rem;
    font-weight: 500;
}

.header-basket {
    width: auto !important;
}

.header-basket a {
    color: var(--ink-accent);

}

.header-basket svg {
    vertical-align: middle;
    fill: var(--ink-accent);
    width: 30px;
    height: 30px;
}

.mainBanner {
    width: 100%;
    height: 100%;
    min-height: 150px;
    position: relative;
    /* background: rgba(var(--navy-rgb), 0.5); */
}

.innerMainBanner {
    width: 100%;
    height: 20%;
    /* the black scrim this carried belonged to the dark design; the Figma hero is a
       clean image on the cream ground with a --surface-band caption bar, no overlay */
}

.movie-carousel-container {
    height: 0;
    font-size: 0;
    padding-bottom: 56.2%;
    background: url(https://www.haifaff.co.il/images/defaults/movie_banner.jpg?120926) no-repeat center center;
    background-size: cover;
}

.owl-carousel .owl-nav .owl-prev.disabled,
.owl-carousel .owl-nav .owl-next.disabled {
    opacity: 0.2;
}

.owl-prev,
.owl-next {
    text-align: center;
    width: 40px;
    height: 85px;
    position: absolute;
    top: calc(50% - 42.5px);
}

.owl-prev {
left: 0;
}

.owl-next {
right: 0;
}

.footerSection1 .owl-prev,
.footerSection3 .owl-prev {
left: - 40px;
}

.footerSection1 .owl-next,
.footerSection3 .owl-next {
right: - 40px;
}

.footerSection3 .owl-stage {
    align-items: center;
    display: flex;
}

.mainBanner .owl-prev {
left: 5%;
}

.mainBanner .owl-next {
right: 5%;
}

.owl-prev:before {
    content: "\00ab";
    color: var(--ink-invert);
    font-size: 60px;
    display: block;
    text-shadow: 0px 2px 0px rgba(var(--navy-rgb), 0.5);
}

.owl-next:before {
    content: "\00bb";
    color: var(--ink-invert);
    font-size: 60px;
    display: block;
    text-shadow: 0 2px 0 rgba(var(--navy-rgb), 0.5);
}

footer .owl-prev:before,
footer .owl-next:before {
    color: var(--ink-accent);
}

.rotatorTxt {
    position: absolute;
    width: 100%;
    bottom: 0;
left: 0%;
    color: var(--ink);
    background-color: var(--surface-band);
padding-left: 15px;
    /*padding-top: 150px;*/
    /*background: linear-gradient(180deg, rgba(var(--surface-page-rgb), 0) 0%, rgba(0,0,0,.7) 72%);*/
}

.rotatorTxt h2 {
    margin: 10px 0;
    font-size: 2.813rem;
    font-weight: 700;
}

.rotatorTxt p {
    font-size: 1.313rem;
}

.rotatorTxt a:hover,
.rotatorTxt a:focus {
    text-decoration: none;
}

.searchMovie {
    padding: 10px;
    border: 2px solid var(--accent-focus);
    background: var(--surface-raised);
}

.searchInputWrap {
    position: relative;
}

.movieListWrap {

    position: absolute;
    top: -9999px;
    opacity: 0;
    background: var(--surface-raised);
    width: 100%;
    box-shadow: 0px 0px 10px 0px rgba(var(--navy-rgb), 0.5);

}

.movieListWrap .scrollerClass {
    height: 175px;
    direction: ltr;
}

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

.movieList li {
    padding: 10px 0;
    margin: 0 10px;
    color: var(--ink-muted);
    font-size: 1.5rem;
    float: left;
    width: calc(100% - 20px);
}

.movieList li + li {
    border-top: 1px solid var(--hairline);
}

.searchMovie input {
    width: 100%;
    color: var(--ink-muted);
    height: 50px;
    padding: 10px;
    font-size: 1.563rem;
}

.searchMovie input[type="text"] {
    background: var(--surface-raised) url("../images/searchBtn_2.png") right 10px center no-repeat;
    background-size: 16px 16px;
    border: 0;
}

.searchMovie input[type="text"]::-webkit-input-placeholder {
    color: var(--ink-muted);
}

.searchMovie input[type="text"]:-moz-placeholder {
    color: var(--ink-muted);
}

.movieListWrap.open {
    top: calc(100% - 1px);
    opacity: 1;
    z-index: 999;
}

.movieList li a {
    width: 47%;
    text-align: center;
    font-size: 1.188rem;
    font-weight: bold;
    color: var(--ink);
    padding: 4px 7px;
}

.movieList li a,
.movieList li a:hover,
.movieList li a:focus {
    text-decoration: none;
}

.movieList li .text {
    margin-bottom: 10px;
    font-size: 1.375rem;
    text-align: left;
    direction: ltr;
}

.movieList li .text strong {
    color: var(--ink);
}

.movieList li .moreDet {
    float: left;
margin-right: 3%;
    background: var(--surface-band);
    color: var(--ink);
}

/* the visible label is a bare text node, so .orderTicket span cannot reach it -
   without a colour here it inherits --ink and is navy on navy at 1.00:1 */
.movieList li .orderTicket {
    float: right;
margin-right: 3%;
    background: var(--surface-invert);
    /* white border so the navy chip reads as a button against the white panel */
    border: 1px solid var(--ink-invert);
    color: var(--ink-invert);
}

.searchMovieDay button {
    width: 100%;
    border-radius: 0;
    border: 0;
    margin-top: 10px;
    height: 50px;
    text-align: left;
    color: var(--ink-muted);
    font-size: inherit;
    background: var(--surface-raised) url("../images/selectBg.png") right 15px center no-repeat;
    background-size: 13px 8px;
    font-size: 1.563rem;
}

.magnific-iframe .mfp-content {
    max-width: 640px !important;
    height: 550px;
}

.magnific-iframe iframe {
    background-color: white;
}

footer .dropdown-menu > li > a:focus, footer .dropdown-menu > li > a:hover {
    text-decoration: underline;
}

.searchMovieDay .dropdown-menu {
    width: 100%;
    box-shadow: 0px 0px 10px 0px rgba(var(--navy-rgb), 0.5);
    background: var(--surface-raised);
    margin-top: 0;
    border-radius: 0;
}

.searchMovieDay .dropdown-menu ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.searchMovieDay .dropdown-menu ul > li > a:hover, .searchMovieDay .dropdown-menu ul > li > a:focus {
    background: transparent;
    color: var(--ink-invert);
    text-decoration: none;
}

.searchMovieDay .dropdown-menu ul > li > a {
    margin: 0 10px;
    padding: 10px 0;
    font-size: 1.438rem;
    font-weight: 700;
    display: block;
    color: var(--ink);
    position: relative;
}

.searchMovieDay .dropdown-menu ul > li > a span {
    width: 40%;
    display: inline-block;
    font-size: 1.438rem;
}

.searchMovieDay .dropdown-menu ul li + li a {
    border-top: 1px solid var(--hairline);
}

.searchMovieDay .dropdown-menu .scrollerClass {
    height: 140px;
    direction: rtl;
}

.searchMovie .mCSB_scrollTools .mCSB_draggerContainer {
    margin: 5px 0;
}

.searchMovie .mCSB_scrollTools {
    width: 9px;
    box-shadow: 0px 0px 15px 0px rgba(var(--navy-rgb), 0.4);
    opacity: 1;
}

.searchMovie .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    border-radius: 0;
    width: 3px;
}

.searchMovie .mCSB_scrollTools .mCSB_draggerRail {
    background-color: transparent;
    border-radius: 0;
}

.searchMovie .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
    background-color: var(--surface-invert);
}

.searchMovie .mCSB_scrollTools .mCSB_draggerRail {
    width: 3px;
}

.searchMovie .mCSB_inside > .mCSB_container {
margin-left: 0;
}

.searchMovie .mCSB_container ul li {
padding-left: 15px;
}

.searchMovie .mCSB_container ul li:hover {
    background: var(--surface-hover);
}

/* The row inverts on hover, so its text inverts with it — but the two buttons
   inside keep their own backgrounds and must be excluded, or the sand
   .moreDet ends up white-on-#d9d6cf at 1.45:1. */
.searchMovie .mCSB_container ul li:hover a:not(.moreDet):not(.orderTicket),
.searchMovie .mCSB_container ul li:hover .text,
.searchMovie .mCSB_container ul li:hover .text strong {
    color: var(--ink-invert);
}

.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
    background-color: var(--surface-invert) !important;
}

.newsWrapper h3 {
    font-weight: 400;
    font-size: 1.875rem;
    color: var(--ink-accent);
    margin: 6px 0 20px;
}

.newsWrapper h3:after {
    content: "\00bb";
    position: absolute;
    font-size: 50px;
    line-height: 28px;
margin-left: 10px;
    direction: ltr;
}

.newsWrapper {
    width: 100%;
    float: left;
}

section.first {
    position: relative;
    padding-bottom: 40px;
    /*background: url("../images/hpNewsBg.png") 105% bottom no-repeat;*/
    /*background-size: auto 101%;*/

}

.newsBox {
    width: 100%;
    float: left;
    direction: ltr;
}

.newsBox:nth-child(n+2) {
    display: none;
}

.newsBox + .newsBox {
    margin-top: 22px;
}

.newsBox .date {
    float: left;
    width: 68px;
    height: 68px;
margin-right: 20px;
    text-align: center;
    background: var(--surface-invert);
    padding: 5px;
    color: var(--ink-invert);
}

.newsBox .date,
.newsBox .date:hover,
.newsBox .date:focus {
    color: var(--ink-invert);
    text-decoration: none;
}

.newsBox .date .day {
    font-size: 2.938rem;
    line-height: 2.938rem;
}

.newsBox .date .month {
    font-size: 1.125rem;
    line-height: 1.125rem;
}

.newsBox .shortTxt {
    float: left;
    width: calc(100% - 88px);
}

.newsBox .shortTxt h4 {
    font-size: 1.313rem;
    font-weight: bold;
    margin: 0 0 10px;
    color: var(--ink);
}

.newsBox .shortTxt h4 a {
    color: var(--ink);
    text-decoration: none;
}

.newsBox .shortTxt h4 a:hover,
.newsBox .shortTxt h4 a:focus {
    text-decoration: underline;
}

/* Figma 2504:853 sets the news summary to #1c437c, not the muted grey.
   --ink-muted is 4.74:1 on white but only 4.32:1 on the cream ground, so it
   is only safe inside a --surface-raised field. */
.newsBox .shortTxt p {
    font-size: 1.125rem;
    margin: 0;
    color: var(--ink);
}

.wrapperBiggerSide {
    margin-top: 15px;
}

.live-shows .row,
.wrapperBiggerSide .row {
    margin-right: 0;
    margin-left: 0;
}

section.first .col-md-7 .row {
    margin: 0 -2px;
}

.catBoxItem,
.catBoxItemGal {
    padding: 2px;
    position: relative;
    overflow: hidden;
    /*cursor:pointer;*/
}

.catBoxItem .imgWrap {
    padding-top: 66%;
}

.catBoxItemGal .imgWrap {
    padding-top: 81%;
}

.catBoxItem.defProp .imgWrap,
.catBoxItemGal.defProp .imgWrap {
    padding-top: 59%;
}

.catBoxItem img,
.catBoxItemGal img {
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    top: 2px;
left: 2px;
    position: absolute;
    object-fit: cover;
}

.hpBoxHeader .hpBoxHeaderTitle {
    font-size: 100%;
}

.hpBoxHeader small {
    font-size: 1.15rem;
    font-weight: 300;
    margin-top: -8px;
    display: block;
}

.catBoxItem > .hpBoxHeader,
.catBoxItemGal > .hpBoxHeader,
.hoverElm {
    width: calc(100% - 4px);
    position: absolute;
left: 2px;
    z-index: 1;
    bottom: 0%;
    transform: translate(0%, 100%);
    transition: transform .25s ease-in-out;
    -moz-transition: transform .25s ease-in-out;
    -webkit-transition: transform .25s ease-in-out;
}

/* the panel slides up over the card photo and its text is --ink-invert, so it
   needs its own scrim; --scrim-soft keeps the image readable behind it. Kept out
   of the shared block above so it cannot reach .hpBoxHeader, which wants --scrim. */
.hoverElm {
    background: var(--scrim-soft);
}

.catBoxItem.open .hoverElm,
.catBoxItemGal.open .hoverElm,
.catBoxItem:hover .hoverElm,
.catBoxItemGal:hover .hoverElm {
    transform: translate(0%, 0%) !important;
    transition: transform .25s ease-in-out;
    -moz-transition: transform .25s ease-in-out;
    -webkit-transition: transform .25s ease-in-out;
}

.catBoxItem.no-link {
    cursor: auto;
}

/* Figma 2504:854 "Movie card": a solid rgba(28,67,124,.92) bar flush to the
   bottom of the image — 36px tall, 14px medium text, 14px side padding. It
   replaces the transparent-to-navy gradient the dark design used. */
.hpBoxHeader {
    color: var(--ink-invert);
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    padding: 8px 14px;
    width: 100%;
left: 0;
    background: var(--scrim);
    position: absolute;
    bottom: 100%;
}

.hpBoxHeader a,
.hpBoxHeader a:hover,
.hpBoxHeader a:focus {
    color: var(--ink-invert);
    text-decoration: none;
}

.hpBoxHeader a:after {
    content: "\00bb";
    font-size: 30px;
    display: inline;
    line-height: 23px;
    vertical-align: bottom;
margin-left: 7px;
    direction: ltr;
}

.hoverElm p {
    font-size: 1.125rem;
    margin: 10px 0;
}

.hoverElm .hpBoxTxt > a {
    width: calc(50% - 5px);
    float: left;
    background: var(--surface-invert);
    font-size: 1.125rem;
    font-weight: bold;
    text-align: center;
    color: var(--ink-invert);
    padding: 10px 5px;
    font-weight: bold;
}

.hoverElm .hpBoxTxt > a,
.hoverElm .hpBoxTxt > a:hover,
.hoverElm .hpBoxTxt > a:focus {
    color: var(--ink-invert);
    text-decoration: none;
}

.hoverElm .hpBoxTxt > a + a {
margin-left: 10px;
}

.hoverElm .hpBoxTxt {
    padding: 0 10px 10px;
    color: var(--ink-invert);
    width: 100%;
    float: left;
    margin-block-start: 10px;
}

.playBtn {
    position: absolute;
    width: 90px;
    height: 90px;
    top: calc(50% - 47px);
    /*bottom:calc(150% + 47px);*/
left: calc(50% - 47px);
    z-index: 1;
}

.catBoxItem .playBtn,
.catBoxItemGal .playBtn {
    width: 50px;
    height: 50px;
    top: 7px;
right: 7px;
left: auto;
    border-radius: 50%;
}

span.arr {
    background: var(--surface-invert);
    width: 30px !important;
    height: 30px;
    position: absolute;
    top: calc(50% - 15px);
right: 0px;
    text-align: center;
    direction: ltr;
    opacity: 0;
    transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;

}

span.arr:before {
    content: "\00bb";
    color: var(--ink-invert);
    font-size: 27px;
    font-weight: 300;
    line-height: 30px;
    direction: ltr;
}

.searchMovieDay .dropdown-menu ul > li:hover > a span.arr {
    opacity: 1;
    transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;

}

.sideToTop {
    margin-top: 15px;
    z-index: 1;
}

@media (min-width: 768px) {
    body.m_hp .sideToTop {
        display: flex;
        gap: 20px;
    }

    body.m_hp .sideToTop > div {
        flex-basis: 50%;
    }
}

.newsletterWrapper {
    float: left;
    width: 100%;
}

.newsletterWrapper h3 {
    font-weight: 300;
    font-size: 1.875rem;
    color: var(--ink-accent);
    margin: 0;
}

.newsletterWrapper h3:after {
    content: "\00bb";
    position: absolute;
    font-size: 50px;
    line-height: 25px;
margin-left: 10px;
    direction: ltr;
}

.newsletterWrapper p {
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    margin-top: 10px;
}

.newsletterWrapper .newsletter-alert {
    font-size: 1.5rem;
    margin-top: 20px;
    overflow: hidden;
    padding: 5px;
    height: 0;
    opacity: 0;
    transition: all 0.3s;
}

.newsletterWrapper .newsletter-alert:not(.show) {
    display: none;
}

.newsletterWrapper .newsletter-alert.show-error {
    opacity: 1;
    height: unset;
    color: var(--state-error);
    border: 2px solid currentColor;
}

.newsletterWrapper .newsletter-alert.show-success {
    opacity: 1;
    height: unset;
    color: var(--state-success);
    border: 2px solid currentColor;
}

#newsletterReg {
    margin-top: 21px;
    display: flex;
}

#newsletterReg input[type="email"] {
    width: 70%;
    height: 40px;
    border: 0;
    text-indent: 8px;
    vertical-align: top;
    font-size: 1.125rem;
    color: var(--ink);
    float: left;
margin-right: 10px;
    direction: ltr;
}

#newsletterReg input[type="email"]::-webkit-input-placeholder {
    color: var(--ink-muted);
}

#newsletterReg input[type="email"]:-moz-placeholder {
    color: var(--ink-muted);
}

#newsletterReg input[type="email"]::placeholder {
    color: var(--ink-muted);
}

#newsletterReg input[type="submit"] {
    width: 29%;
    height: 40px;
    background: var(--surface-invert);
    border: 0;
    font-size: 1.125rem;
    font-weight: bold;
    color: var(--ink-invert);
    vertical-align: top;
    float: left;
}

#newsletterReg input[type="submit"]:disabled {
    cursor: not-allowed;
    /* the sand ground already reads as disabled against the navy enabled state;
       --ink-muted on sand is only 3.27:1 */
    background: var(--surface-band);
    color: var(--ink);
}

.modal-backdrop.in {
    opacity: 0.8;
}

#newsletterModal {

}

#newsletterModal.success .modal-header,
#newsletterModal.success #newsletterRegModal,
#newsletterModal .success-message {
    display: none;
}

#newsletterModal.success .success-message {
    display: flex;
    flex-direction: column;
    gap: 60px;
    height: 100%;
    justify-content: center;
}

#newsletterModal.success .modal-body {
    height: 100%;
}


#newsletterModal .close-modal-success {
    color: var(--ink-invert);
    font-size: 16px;
    font-weight: 700;
    border: none;
    padding: 19px;
    background: var(--surface-invert);
    margin-bottom: 36px;
}

#newsletterModal .modal-header {
    border: none;
}

#newsletterModal .modal-dialog {
    border: 2px solid white;
    background-image: url(https://www.haifaff.co.il/images/newsletter-modal-41.jpg?120926);
    background-position: center 47%;
    color: var(--ink);
    margin: 40% auto;
}

#newsletterModal .close-modal {
    background: transparent;
    border: none;
    height: 17px;
    width: 17px;
    padding: 0;
    margin: 0;
    position: absolute;
    top: -40px;
left: 0;
}

#newsletterModal .close-modal svg {
    fill: var(--ink-invert);
    height: 100%;
    width: 100%;
}

#newsletterModal .modal-content {
    position: relative;
    background: unset;
    height: 100%;
    border: none;
}

#newsletterModal .background-image {
    display: none;
}


#newsletterModal .modal-title {
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    width: 75%;
    margin: 36px auto 0;
}

#newsletterModal .modal-subtitle {
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    margin-top: 12px;
}

#newsletterModal .modal-disclaimer {
    font-size: 12px;
    font-weight: 300;
    margin-top: 12px;
}

#newsletterRegModal {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#ml_modal_email {
    padding: 18px;
    border: none;
    color: black;
    font-size: 18px;
}

#ml_modal_email::placeholder {
    color: var(--ink-muted);
    font-weight: 700;
}

#newsletterRegModal .newsletter-alert:not(.show) {
    display: none;
}

#newsletterRegModal .newsletter-alert {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
}

#newsletterRegModal .newsletter-alert.show-success {
    color: green;
}


#newsletterRegModal input[type="submit"] {
    color: var(--ink-invert);
    font-size: 16px;
    font-weight: 700;
    border: none;
    padding: 19px;
    background: var(--surface-invert);
    margin-bottom: 36px;
}

#newsletterRegModal input[type="submit"]:disabled {
    cursor: not-allowed;
    background: var(--surface-band);
    color: var(--ink-muted);
}

@media only screen and (min-width: 1200px) {
    #newsletterModal .modal-header, #newsletterModal .modal-body {
        width: 70%;
        padding: 15px 55px 40px 0px;
    }

    #newsletterModal .close-modal {
        height: 36px;
        width: 36px;
        top: -50px;
    left: -70px;
    }

    #newsletterModal .background-image {
        display: block;
        width: 200px;
        height: 250px;
        position: absolute;
    right: 10px;
        bottom: 0;
        z-index: -1;
    }

    #newsletterModal .background-image img {
        height: 100%;
        width: 100%;
        object-fit: contain;
    }

    #newsletterModal .modal-dialog {
        width: 734px;
        margin: 10% auto;
    }

    #newsletterModal .modal-title {
        text-align: left;
        font-size: 30px;
        width: unset;
        margin: 15px 0 0;
    }

    #newsletterModal .modal-subtitle {
        text-align: left;
        font-size: 20px;
    }

    #newsletterRegModal input[type="submit"] {
        padding: 16px;
        font-size: 20px;
    }


}

.headerBtn {
    float: right;
    margin: 6px 0;
    padding: 0 20px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    color: var(--ink-accent);
    border: 1px solid var(--hairline);
    font-size: 1.3rem;
    transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
}

.headerBtn:hover,
.headerBtn:focus {
    color: var(--ink-invert);
    background: var(--surface-hover);
    text-decoration: none;
    transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
}

.topMenu .headerBtn {
    position: absolute;
    bottom: 1rem;
    left: 0;
}

.mfp-iframe-holder .mfp-content {
    max-width: 80%;
}

.promoteMovie .col-xl-4,
.promoteMovie .col-xl-8 {
    position: absolute;
    top: 0;
    height: 100%;
}

.promoteMovie .col-xl-4 {
    width: 27%;
left: 0;
    background: rgba(var(--navy-rgb), 0.7);
    z-index: 2;
}

.promoteMovie .col-xl-8 {
    width: 73%;
left: 27%;
}

.promoteMovie .owl-prev {
left: 32%;
}

.promoteMovie .owl-next {
right: 5%;
}

.promoteMovie .owl-item:before {
    content: "";
    background: rgba(var(--navy-rgb), 0.2);
    top: 0;
left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
}

.promoteMovie .owl-item:after {
    content: "";
    width: 100%;
    height: 30%;
    position: absolute;
    bottom: 0px;
left: 0px;
    background: -moz-linear-gradient(270deg, rgba(var(--surface-page-rgb), 0) 0%, rgba(var(--navy-rgb), 1) 100%); /* ff3.6+ */
    background: -webkit-gradient(linear, right top, right bottom, color-stop(0%, rgba(var(--surface-page-rgb), 0)), color-stop(100%, rgba(var(--navy-rgb), 1))); /* safari4+,chrome */
    background: -webkit-linear-gradient(270deg, rgba(var(--surface-page-rgb), 0) 0%, rgba(var(--navy-rgb), 1) 100%); /* safari5.1+,chrome10+ */
    background: -o-linear-gradient(270deg, rgba(var(--surface-page-rgb), 0) 0%, rgba(var(--navy-rgb), 1) 100%); /* opera 11.10+ */
    background: -ms-linear-gradient(270deg, rgba(var(--surface-page-rgb), 0) 0%, rgba(var(--navy-rgb), 1) 100%); /* ie10+ */
    background: linear-gradient(180deg, rgba(var(--surface-page-rgb), 0) 0%, rgba(var(--navy-rgb), 1) 100%); /* w3c */
}

.promoMovieDetails {
    padding: 20px;
}

/* The whole details panel sits on rgba(navy, 0.7) over the slide image, and the
   links block at its foot is opaque navy. Under the dark palette --ink-accent
   was light, so navy ink read fine; on the light palette it is the same navy as
   the panel itself and the text disappeared. Everything in here is on navy, so
   everything in here is --ink-invert. */
.promoMovieDetails h2 {
    font-size: 2rem;
    font-weight: bold;
    color: var(--ink-invert);
    margin: 0 0 30px;
padding-left: 20px;
}

.promoMovieDetails h2 a:hover,
.promoMovieDetails h2 a:focus {
    text-decoration: none;
}

.promoMovieDetails .director {
    font-size: 1.188rem;
    font-weight: bold;
    color: var(--ink-invert);
padding-left: 20px;
}

/* --ink-muted is the grey for de-emphasised text on cream; on the navy panel it
   is 2.6:1 and fails AA, and there is no muted ink for dark grounds. */
.promoMovieDetails .moreInfo {
    font-size: 1.125rem;
    color: var(--ink-invert);
padding-left: 20px;
}

/* The synopsis set no colour of its own and fell through to body{color:var(--ink)},
   which is now navy — invisible on the navy panel. The scroller plugin wraps the
   text in its own divs, so colour the wrapper and let it inherit down. */
.promoMovieDetails .moreTxt {
    margin-top: 30px;

    font-size: 1.313rem;
    color: var(--ink-invert);
    text-align: left;

}

.promoMovieDetails .moreTxt .scrollerClass {
    height: 245px;
    direction: rtl;
}

.promoMovieDetails .linksWrapper {
    position: absolute;
    bottom: 0;
left: 0;
    width: 100%;
    height: 30%;
    background: -moz-linear-gradient(270deg, rgba(var(--navy-rgb), 0) 0%, rgba(var(--navy-rgb), 1) 50%, rgba(var(--navy-rgb), 1) 100%); /* ff3.6+ */
    background: -webkit-gradient(linear, right top, right bottom, color-stop(0%, rgba(var(--navy-rgb), 0)), color-stop(50%, rgba(var(--navy-rgb), 1)), color-stop(100%, rgba(var(--navy-rgb), 1))); /* safari4+,chrome */
    background: -webkit-linear-gradient(270deg, rgba(var(--navy-rgb), 0) 0%, rgba(var(--navy-rgb), 1) 50%, rgba(var(--navy-rgb), 1) 100%); /* safari5.1+,chrome10+ */
    background: -o-linear-gradient(270deg, rgba(var(--navy-rgb), 0) 0%, rgba(var(--navy-rgb), 1) 50%, rgba(var(--navy-rgb), 1) 100%); /* opera 11.10+ */
    background: -ms-linear-gradient(270deg, rgba(var(--navy-rgb), 0) 0%, rgba(var(--navy-rgb), 1) 50%, rgba(var(--navy-rgb), 1) 100%); /* ie10+ */
    background: linear-gradient(180deg, rgba(var(--navy-rgb), 0) 0%, rgba(var(--navy-rgb), 1) 50%, rgba(var(--navy-rgb), 1) 100%); /* w3c */
}

.promoMovieDetails .linksInnerWrapper {
    position: absolute;
    bottom: 40px;
left: 40px;
    width: calc(100% - 80px);
}

.promoMovieDetails .linksInnerWrapper a {
    float: left;
    width: 47%;
    background: var(--surface-invert);
    /* the links block sits on an opaque navy gradient, so a navy button has no
       visible edge; the inverted border is what separates it from the ground */
    border: 1px solid var(--ink-invert);
    color: var(--ink-invert);
    font-size: 1.313rem;
    font-weight: bold;
    padding: 13px 0;
    text-align: center;
    transition: background .25s ease-in-out, color .25s ease-in-out;
    -moz-transition: background .25s ease-in-out, color .25s ease-in-out;
    -webkit-transition: background .25s ease-in-out, color .25s ease-in-out;
}

.promoMovieDetails .linksInnerWrapper a,
.promoMovieDetails .linksInnerWrapper a {
    color: var(--ink-invert);
    text-decoration: none;
}

/* Hover inverts the pair: white ground, navy ink. Scoped to .promoMovieDetails so
   the shared .moreDet / .orderTicket classes keep their own styling elsewhere. */
.promoMovieDetails .linksInnerWrapper a:hover,
.promoMovieDetails .linksInnerWrapper a:focus {
    background: var(--surface-raised);
    color: var(--ink-on-raised);
    text-decoration: none;
}

.promoMovieDetails .linksInnerWrapper .moreDet {
margin-right: 3%;
}

.promoMovieDetails .linksInnerWrapper .orderTicket {
margin-left: 3%;
}

.promoMovieDetails .mCustomScrollBox {
padding-left: 20px;
}

.promoMovieDetails .mCSB_container {
margin-left: 0;
    direction: ltr;
}

/* Pinned to the bottom of the slide, which is where .owl-item:after ramps the
   gradient to fully opaque navy. Title and next-screening line both inherited
   the navy body ink and vanished. */
.headerWrapper {
    position: absolute;
    bottom: 0;
left: 40px;
    z-index: 3;
    color: var(--ink-invert);
}

.promoMovieVideo h3 {
    font-weight: 700;
    margin: 0 0 50px;
}

section.second {
    padding: 40px 0;
    background: var(--surface-page);
}

/*.footerSection1{*/
/*    background: linear-gradient(0deg, rgba(var(--surface-page-rgb), 0) 0%, rgba(var(--navy-rgb), 0.5) 100%);*/
/*}*/
/*.footerSection2{*/
/*    background: -moz-linear-gradient(90deg, rgba(153,218,255,0) 0%, rgba(var(--navy-rgb), 0.92) 100%); /* ff3.6+ */
*

/
/*    background: -webkit-gradient(linear, */
 /* top, */
 /* bottom, color-stop(0%, rgba(var(--navy-rgb), 0.92)), color-stop(100%, rgba(153,218,255,0))); /* safari4+,chrome */
*

/
/*    background: -webkit-linear-gradient(90deg, rgba(153,218,255,0) 0%, rgba(var(--navy-rgb), 0.92) 100%); /* safari5.1+,chrome10+ */
*

/
/*    background: -o-linear-gradient(90deg, rgba(153,218,255,0) 0%, rgba(var(--navy-rgb), 0.92) 100%); /* opera 11.10+ */
*

/
/*    background: -ms-linear-gradient(90deg, rgba(153,218,255,0) 0%, rgba(var(--navy-rgb), 0.92) 100%); /* ie10+ */
*

/
/*    background: linear-gradient(0deg, rgba(153,218,255,0) 0%, rgba(var(--navy-rgb), 0.92) 100%); /* w3c */
*

/
/*    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#99DAFF',GradientType=0 ); /* ie6-9 */
*

/
/*}*/
.footerSection1 .owl-carousel .owl-item {
    text-align: center;
}

.footerSection1 .owl-carousel a {
    display: inline-block;
    position: relative;
}

.footerSection1 .owl-carousel a img {
    display: initial;
}

.innerFooterSection2 {
    float: left;
    width: 100%;
    padding: 50px 0;
    position: relative;
}

.footerBg {
    position: absolute;
right: -2%;
    top: 0;
    height: 100%;
    text-align: right;
}

.footerBg img {
    height: 100%;
    width: auto;
}

/* Figma 2504:886 "Sponsors strip" and 2504:888 "Copyright bar" are both navy.
   NOTE: the sponsor logos are dark-on-transparent PNGs and will need light
   variants to read on navy — asset change, not a CSS one. */
.footerSection3 {
    background: var(--surface-invert);
    color: var(--ink-invert);
    padding: 18px 0;
}

.footerSection4 {
    padding: 15px 0;
    text-align: center;
    background: var(--surface-invert);
    color: var(--ink-invert);
}

.footerSection4 .tycoLogo {
    position: relative;
margin-right: 10px;
}

.footerSection4 .tycoLogo img {
    width: 57px;
    height: auto;
}

.footerSection4 .tycoLogo span {
    position: absolute;
right: 0%;
    width: 150%;
    color: var(--ink-invert);
    opacity: 0;
    transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
}

.footerSection4 .tycoLogo:hover,
.footerSection4 .tycoLogo:focus {
    text-decoration: none;
}

.footerSection4 .tycoLogo:hover span,
.footerSection4 .tycoLogo:focus span {
right: 105%;
    opacity: 1;
    transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
}

.footerSection3 ul {
    margin: 0;
    list-style: none;
    padding: 0;
    text-align: center;
}

/* .footerSection3 .logosCatousel>div{
float:







































































































































left






































































































































;
margin:0 10px;
width: calc(11% - 20px);
line-height: 42px;
text-align: center;
} */
.footerSection3 .logosCatousel a {
    display: inline-block;
    position: relative;

}

.footerSection3 .logosCatousel a img {
    max-height: 50px;
    display: block;
}

.footerSection3 .logosCatousel a img.colorImg {
left: 50%;
    transform: translate(50%, 0%);
    position: absolute;
    opacity: 0;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}

.footerSection3 .owl-item {
    text-align: center;
}

.footerSection3 .logosCatousel a:hover img.colorImg,
.footerSection3 .logosCatousel a:focus img.colorImg {
    opacity: 1;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}

.footerSection3 .logosCatousel a:hover img:not(.colorImg),
.footerSection3 .logosCatousel a:focus img:not(.colorImg) {
    opacity: 0;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}

.footerMenu {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
}

.footerMenu li:first-child h3 a,
.footerMenu li.appLink a {
    font-size: 1.563rem;
    font-weight: bold;
}

.footerMenu li:first-child h3 a,
.footerMenu li.appLink a,
.footerMenu li:first-child h3 a:hover,
.footerMenu li.appLink a:hover,
.footerMenu li:first-child h3 a:focus,
.footerMenu li.appLink a:focus {
    color: var(--ink-hover);
    text-decoration: none;
}

.footerMenu li:first-child h3 a:after,
.footerMenu li.appLink a:after {
    content: "\00bb";
    position: absolute;
    font-size: 30px;
    line-height: 22px;
    left: 0;
    right: 150px;
margin-left: 5px;
    direction: ltr;
}

.footerMenu li h3 {
    font-size: 1.563rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
}

.footerMenu li h3 a,
.footerMenu li h3 a:hover,
.footerMenu li h3 a:focus {
    color: var(--ink);
    text-decoration: none;
}

/*
.footerMenu li:first-child{
    width: 30%;
}
.footerMenu li.dropdown{
    width: 21%;
    float:







































































































































left






































































































































;
    padding: 0 15px;
}*/
.contactDetailes {
    padding: 0;
    margin: 0;
    list-style: none;
}

.contactDetailes li h3 {
    font-size: 1.563rem;
    font-weight: 300;
    color: var(--ink);
    margin: 0;
}

.contactDetailes li a {
    font-size: 1.563rem;
    font-weight: bold;
}

.contactDetailes li a,
.contactDetailes li a:hover,
.contactDetailes li a:focus {
    color: var(--ink-hover);
    text-decoration: none;
}

.contactDetailes li a {
    direction: ltr;
    display: block;
}

.contactDetailes li + li {
    margin-top: 40px;
}

.modal {
    direction: ltr}

.modal-dialog {
    margin: 10% auto;
    width: 680px;
}

.duplicateable > .row > [class*="col-"] {
    margin-bottom: 30px;
}

.div_divider {
    margin: 0 !important;
}

.duplicateable:last-child {
    margin-bottom: 0 !important;
}

.duplicateable .duplicate_btn,
.toNextSection {
    color: var(--ink-accent);
    font-size: 1.1rem;
    height: 46px;
    line-height: 46px;
    margin-top: 26px;
    display: inline-block;
}

.duplicateable .duplicate_btn:hover {
    text-decoration: none;
}

.duplicateable .duplicate_btn i {
    display: inline-block;
    vertical-align: middle;
margin-left: 9px;
    font-size: 1.6rem;
}

.duplicateable .remove_duplicate {
    display: none;
}

.duplicateable + .duplicateable .duplicate {
    display: none;
}

.duplicateable + .duplicateable .remove_duplicate {
    display: block;
}

#register_thanks .modal-dialog {
    width: 389px;
}

.modal-content,
.modal-content {
    box-shadow: none !important;
    border-radius: 0;
    background: var(--surface-raised) url("../images/patternBg.png") right top repeat;

}

.haifaff_modal .modal-header,
#regForOpening .modal-header,
#orderModal .modal-header {
    text-align: center;
    border: 1px solid var(--hairline);
    border-bottom: 0;
}

.haifaff_modal .modal-header .modal-title,
#regForOpening .modal-header .modal-title,
#orderModal .modal-header .modal-title {
    font-size: 1.93rem;
    color: var(--ink-accent);
    direction: ltr;
}

.haifaff_modal .modal-header .close,
#regForOpening .modal-header .close,
#orderModal .modal-header .close {
    background: var(--surface-invert);
    opacity: 1;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 35px;
    margin-top: 0;
    line-height: 30px;
    text-shadow: none;
    position: absolute;
    top: -15px;
right: - 15px;
}

.haifaff_modal .modal-body,
#regForOpening .modal-body,
#orderModal .modal-body {
    background: var(--surface-raised);
    padding: 20px;
    float: left;
    width: 100%;
}

#orderModal.personal-area-modal {
    color: var(--ink);
}

#orderModal.personal-area-modal h3 {
    font-size: 1.2rem;
}

#orderModal.personal-area-modal .buttons {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

#orderModal.personal-area-modal .buttons > * {
    margin-inline-end: 15px;
}

#orderModal.personal-area-modal .buttons > *:last-child {
    margin-inline-end: 0;
}

#orderModal.personal-area-modal a.orderTicket {
    background: var(--surface-invert);
    padding: 10px 20px;
    color: var(--ink-invert);
    height: 100%;
    font-weight: 700;
    font-size: 1.3rem;
}

#orderModal.personal-area-modal a.orderTicket.dark-btn {
    background: var(--surface-invert);
    color: var(--ink-invert);
}


#regForOpening .modal-body {
    color: var(--ink);
    direction: ltr;
    font-size: 1.188rem;
}

#register_thanks .modal-header {
    padding-top: 27px;
    padding-bottom: 27px;
}

#register_thanks .modal-body {
    color: var(--ink);
    font-size: 1.55rem;
    text-align: center;
    padding-top: 31px;
    padding-bottom: 31px;
}

.transparent {
    opacity: 0;
}

.tiny_label, .count_label {
    position: absolute;
    color: var(--ink-accent);
    font-size: 1rem !important;
    bottom: 6px;
right: 9px;
    min-width: initial !important;
    padding: 0 !important;
}

.count_label {
    top: 6px;
right: 7px;
}

[name*="heb"] ~ .tiny_label, [name*="heb"] ~ .count_label {
left: 9px;
right: auto;
}

[name*="eng"].has_tiny_label {
padding-right: 32px !important;
}

[name*="heb"].has_tiny_label {
padding-left: 32px !important;
}

.forms_bottom_border {
    margin: 30px 0 0;
    border-color: var(--hairline);
}

.orderRow {
    display: block;
    background: var(--surface-raised);
    border: 2px solid var(--hairline);
    float: left;
    width: 100%;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 26px;
    direction: ltr;
}

.orderRow + .orderRow {
    margin-top: 20px;
}

.orderRow .date,
.orderRow .mobileWrap > div {
    /*float: */
;
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    padding: 10px 15px;
}

.orderRow .date {
    color: var(--ink-invert);
    background: var(--surface-invert);
    width: 80px;
    font-size: 1.438rem;
    font-weight: 400;
    text-align: center;
}

.orderRow .mobileWrap {
    /*float: */
;
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 85px);
    background: var(--surface-raised);
}

.orderRow .day,
.orderRow .hour {
    width: 71px;
}

.orderRow .bottons {
    /*width: 313px;*/
    padding: 10px 0;
    float: right !important;
}

.movie_screenings .orderRow .bottons {
    float: none !important;
    width: 100%;
    padding: 0 15px 15px;
}

.orderRow .bottons > span {
    margin: 0;
    font-size: 1rem;
    font-weight: 300;
    color: var(--ink-accent);
    line-height: 15px;
    margin-top: 7px;
    display: block;
    float: left;
    width: 100%;
}

.orderRow .bottons > a {
    background: var(--surface-invert);
    padding: 0 10px;
    color: var(--ink-invert);
    height: 100%;
    float: left;
    direction: ltr;

    font-weight: 700;
}

.orderRow .bottons a + a {
margin-left: 10px;
}

.orderRow .bottons a:hover,
.orderRow .bottons a:focus {
    text-decoration: none;
}

.orderRow .bottons a i {
padding-right: 10px;
}

.mobileLocattionWrap {
    float: left;
}

.mobileLocationWrap > .row > a {
    width: 100%;
    padding: 0 15px;
    display: block;
    margin-top: 10px;
}

.mobileLocationWrap > .row > a img {
    width: 100%;
}

.breadcrumb {
    background: transparent;
    margin-bottom: 0;
    padding: 20px 0;
}

.breadcrumb-item {
    /*font-size: 1.154rem;*/
    font-size: 1.3rem;
}

.breadcrumb-item a {
    color: var(--ink-accent);
}

.breadcrumb > .active {
    color: var(--ink);
    font-weight: 700;
}

.breadcrumb > li + li:before {
    color: var(--ink);
    content: ">";
}

.innerPageWrap {
    background: var(--surface-page);
    box-shadow: 0px 0px 30px 0px rgba(var(--navy-rgb), 0.4);
    position: relative;
    float: left;
    width: 100%;
    margin-bottom: 40px;
    padding: 0 15px;
}

.innerPageWrap.defBg {
    background: var(--surface-raised);
    color: var(--ink);
    padding: 0px 15px 20px;
    margin-bottom: 40px;
}

.innerPageWrap.defBg .shareWrap {
    padding: 0;
}

.legoTxt {
    font-size: 1.25rem;
}

.legoTxt img {
    max-width: 100%;
}

.sortCategory {
    padding-top: 40px;
    float: left;
    width: calc(100% - 20px);
    border-bottom: 1px solid var(--hairline);
    margin: 0 10px;
}

.sortCategory.archive-movies {
    float: unset;
}

.categoryText {
    border-bottom: 1px solid var(--hairline);
    padding-bottom: 10px;
    margin-bottom: 30px;
}

.categoryWrapper {
    padding: 20px 20px 0;
    float: left;
    width: 100%;
    border-bottom: 1px solid var(--hairline);
}

.innerPageWrap h1 {
    background: var(--surface-invert);
    padding: 10px 15px;
    display: inline-block;
    position: relative;
    top: -15px;
left: 0px;
    margin: 0;
    font-size: 3.077rem;
    font-weight: 700;
    color: var(--ink-invert);
}

/* tiles carry white labels over a 30% scrim; without a ground of their own the
   ones whose image is missing become navy-at-30%-over-cream and the label
   disappears */
.categoryItem {
    margin-bottom: 20px;
    background: var(--surface-invert);
    border: 1px solid var(--hairline);
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-bottom: calc(100% - 2px);
    display: block;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.categoryWrapper .row > div:not(.catBoxItem),
.catBoxItemGal .row > div:not(.catBoxItem) {
    padding: 0 10px;
}

.categoryWrapper .row {
    margin: 0 -10px;
}

.categoryWrapper .row .no_results {
    padding: 0 10px;
    font-size: 1.5rem;
}

.categoryItem:after {
    content: "";
    position: absolute;
    top: 0;
left: 0;
    width: 100%;
    height: 100%;
    background: rgba(var(--navy-rgb), 0.3);
}

.categoryItem img {
    width: 100%;
    top: 0;
left: 0;
    position: absolute;
    transition: all .2s ease-in-out;
}

.categoryItem:hover img, .categoryItem:focus img {
    transform: scale(1.1);
}

.categoryItem h3 {
    position: absolute;
    top: 50%;
left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    display: block;
    width: 79%;
    z-index: 1;
    font-weight: 500;
    font-size: 1.385rem;
    color: var(--ink-invert);
    margin: 0;

}

#sortForm {
    padding: 0 10px;
    width: calc(100% - 80px);
    margin-bottom: 20px;
}

#sortForm .inputsGroup {
padding-left: 0;
padding-right: 10px;
}

#sortForm .inputsGroup .col-xs-3 {
    padding: 0;
}

#sortForm .inputsGroup:nth-child(even) {
padding-left: 10px;
padding-right: 0px;
}

#sortForm input[type="email"] {
    height: 35px;
    border: 0;
    color: var(--ink-muted);
    text-indent: 15px;
    font-size: 1.154rem;
    width: 100%;
}

#sortForm select {
    height: 35px;
    background: var(--surface-raised) url("../images/selectBg.png") right 7px center no-repeat;
    background-size: 14px 8px;
    border: 0;
    color: var(--ink-muted);
    text-indent: 7px;
    font-size: 1.154rem;
}

#sortForm .submitBtn {
    font-size: 1.154rem;
    font-weight: 700;
    color: var(--ink-invert);
    background: var(--surface-invert);
    height: 35px;
    line-height: 35px;
    text-align: center;
    border: 0;
margin-left: 10px;
}

label.unsubscribe-label {
    font-weight: normal;
    font-size: 1.2em;
    padding: 10px;
}

.sortCategory.unsubscribe h2 {
    background: none;
    padding: 20px 10px;
    text-align: right;
}

#movieName, #movieCat {
    width: 100%;
    margin-bottom: 20px;
}

#movieDate, #movieDirector, #movieCountry, .submitBtn {
    width: calc(50% - 10px);
    float: left;
}

#sortForm select#movieDate {
margin-right: 10px;
    background: var(--surface-raised) url("../images/datePicker.png") right 7px center no-repeat;
    background-size: 17px 14px;
}

#sortForm select#movieDirector {
margin-left: 10px;
}

#sortForm select#movieCountry {
margin-right: 10px;
    background: var(--surface-raised) url("../images/earth.png") right 7px center no-repeat;
    background-size: 18px 18px;
}

.sortCategory h2 {
    /* searchBtn2.png is white, drawn for the old dark ground; the navy copy
       matches the --ink-accent label beneath it on the light palette */
    background: url("../images/searchBtn2_navy.png") top center no-repeat;
    background-size: 28px;
    padding-top: 40px;
    color: var(--ink-accent);
    font-weight: 700;
    text-align: center;
    font-size: 1.385rem;
    margin: 0;
}

.sortCategory .col-xs-1 {
    width: 80px;
}

.shareWrap {
    float: left;
    width: 100%;
    padding: 20px;
}

.a2a_kit a {
    float: left !important;
}

.a2a_kit .a2a_svg {
    border-radius: 0 !important;
    width: 20px;
    height: 20px;
    background-size: contain;
}

.m_movie .breadcrumb {
    padding-bottom: 20px;
}


/**
*** GALLERIES
***************/
/* the tile image is dropped to 50% opacity, so it needs a dark ground to
   composite over — on the cream page it washed out and took the white label
   with it */
.galleries .item {
    border: 1px solid var(--hairline);
    background: var(--surface-invert);
    position: relative;
    display: block;
    margin-bottom: 25px;
}

.galleries.inner .item {
    border: 0;
    margin: 0 -7.5px 5px;
}

.galleries .item img.fade {
    opacity: .5;
}

.galleries.inner .item img.fade {
    opacity: .7;
}

.galleries .item .content_wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: var(--ink-invert);
}

.galleries .item .content_wrap h5 {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 1.75rem;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.galleries .item .content_wrap small {
    position: absolute;
    font-size: 1.15rem;
    bottom: 6px;
left: 6px;
}


.m_movie .mainBanner .owl-stage-outer:after {
    content: "";
    position: absolute;
    bottom: 0;
left: 0;
    width: 100%;
    height: 50%;
    z-index: 1;
    background: -moz-linear-gradient(270deg, rgba(var(--surface-page-rgb), 0) 0%, rgba(var(--navy-rgb), 0.92) 100%);
    background: -webkit-gradient(linear, right top, right bottom, color-stop(0%, rgba(var(--surface-page-rgb), 0)), color-stop(100%, rgba(var(--navy-rgb), 0.92)));
    background: -webkit-linear-gradient(270deg, rgba(var(--surface-page-rgb), 0) 0%, rgba(var(--navy-rgb), 0.92) 100%);
    background: -o-linear-gradient(270deg, rgba(var(--surface-page-rgb), 0) 0%, rgba(var(--navy-rgb), 0.92) 100%);
    background: -ms-linear-gradient(270deg, rgba(var(--surface-page-rgb), 0) 0%, rgba(var(--navy-rgb), 0.92) 100%);
    background: linear-gradient(180deg, rgba(var(--surface-page-rgb), 0) 0%, rgba(var(--navy-rgb), 0.92) 100%);
}

.movieBannerCont .owl-dots {
    position: absolute;
    bottom: 0;
left: 0;
    width: 100%;
    height: 30px;
    text-align: center;

}

.movieBannerCont .owl-dots .owl-dot {
    border: 2px solid var(--surface-invert);
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    margin: 0 2px;
}

.movieBannerCont .owl-dots .owl-dot.active {
    background: var(--surface-invert);
}

.movieHeader {
    position: absolute;
    bottom: 70px;
left: 0;
    width: 100%;
    z-index: 2;
}

.movieHeader h1 {
    text-transform: uppercase;
    margin: 0;
    font-size: 2.813rem;
    color: var(--ink-invert);
    padding: 0 30px;
}

.movieHeader h2 {
    font-size: 1.25rem;
    margin: 0;
    color: var(--ink-invert);
    padding: 0 30px;
    margin-top: 10px;
}

span.eng_title {
    direction: ltr;
    display: inline-block;
}

.tagsWrap,
.showtimesWrap {
    float: left;
    width: 100%;
    background: var(--surface-page);
    padding: 20px;
    position: relative;
}


.tagsWrap ul {
    padding: 0;
    margin: 0;
    list-style: none;
    z-index: 2;
    position: relative;
}

.tagsWrap ul li {
    display: inline-block;
    background: var(--surface-invert);
    margin-bottom: 10px;
margin-right: 6px;
}

.tagsWrap ul li a {
    color: var(--ink-invert);
    text-decoration: none;
    display: block;
    font-size: 1.125rem;
    padding: 4px 8px;
}

.tagsWrap ul li a:hover,
.tagsWrap ul li a:focus {
    text-decoration: none;
    color: var(--ink-invert);
    background: var(--surface-hover);
    transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
}

.showtimesWrap h3 {
    font-size: 1.5rem;
    color: var(--ink-accent);
    margin: 0 0 20px;
    float: left;
    width: 100%;
}

.single-row-movie {
    width: 100% !important;
}

#showtimeItems {
    width: 100%;
}

#showtimeItems .single-row-movie {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


#showtimeItems .single-row-movie .bottons {
    width: auto !important;
    padding: 0 15px;
}

.showtimesWrap .orderRow + h3,
.showtimesWrap #showtimeItems + h3 {
    margin-top: 15px;
}

.orderRow.schedule + .orderRow.schedule {
    margin-top: -1px;
    border-top: 1px;
}

.mobileLocationWrap {
    float: left;
    width: 100%;
    margin-bottom: 10px;
}

.mobileLocationWrap img {
    width: 100%;
    height: auto;
}

.quote {
    margin: 30px 0 15px;
    z-index: 2;
    position: relative;
}

.quote blockquote {
    padding: 0;
    margin: 0;
    border: 0;
    font-size: 2.188rem;
    width: 85%;
}

.quote blockquote footer {
    font-size: 1.25rem;
    color: var(--ink);
}

.m_movie .wrapperBiggerSide .movieWrapper {
    background: var(--surface-raised);
    padding: 15px;
    color: var(--ink);
    font-size: 1.25rem;
    float: left;
    width: 100%;
    margin-bottom: 20px;
}

.movieInfo {
    padding: 10px 15px;
    margin: 0 0 30px;
    list-style: none;
    background: var(--surface-raised);

}

.movieInfo .festival {
    color: var(--ink-accent);
}

.movieInfo li {
    display: inline-block;
    /* The row sits on --surface-raised (white), so the ink has to be the
       on-raised navy. --ink-invert here was white on white: invisible. */
    color: var(--ink-on-raised);
    font-size: 1.063rem;
}

.movieInfo li + li:before {
    content: "|";
    padding: 0 7px;
}

.movieTxt {
    padding: 0 15px;
    font-weight: 400;
}

.movieWrapper hr {
    border-top: 1px solid var(--hairline);
}

.movieDetails {
    padding: 0 15px;
    margin: 0;
    list-style: none;
    font-size: 1.125rem;
}

.movieDetails li + li {
    margin-top: 15px;
}

.movieDetails li span.label_span {
    width: calc(50% - 50px);
    text-align: right;
    color: var(--ink-accent);
    font-weight: 400;
margin-right: 25px;
    display: inline-block;
    vertical-align: top;
}

.movieDetails li span:not(.label_span) {
    width: calc(50% - 50px);
margin-left: 25px;
    display: inline-block;
    font-weight: 400;
}

.directorInfo img {
    width: 100%;
}

.directorInfo h3 {
    margin: 0 0 15px;
    font-size: 1.25rem;
    font-weight: 700;
}

.directorInfo p {
    font-size: 1.125rem;
    font-weight: 400;
}

.movieImage {
    padding: 0 15px;
}

.movieImage img {
    width: 100%;
}

.directorInfo {
    padding: 0 15px;
}

.m_movie .shareWrap {
    padding: 0;
}

.moreMovies {
    float: left;
    width: 100%;
    position: relative;
    margin-bottom: 40px;
}

.moreMovies > h3 {
    color: var(--ink-accent);
    font-weight: 700;
    font-size: 1.5rem;
    margin: 0 0 20px;
}

.allMovies {
    color: var(--ink);
    position: absolute;
    top: 0;
right: 0;
}

.allMovies:hover,
.allMovies:focus {
    color: var(--ink);
    text-decoration: none;
}

.m_movie .sideBanner,
.sideBanners .sideBanner {
    margin-top: 15px;
}

.movieButton {
    position: absolute;
    top: 0;
right: 0;
    z-index: 2;
    padding: 15px;
}

.movieButton a {
    background: var(--surface-invert);
    color: var(--ink-invert);
    font-weight: 700;
    font-size: 1.188rem;
    padding: 10px 15px;
    display: block;
    float: left;
}

.movieButton a:hover,
.movieButton a:focus {
    text-decoration: none;
}

.movieButton .eventTag {
    font-size: 1.188rem;
    padding: 10px 15px;
margin-left: 10px;
}

.addToCalender {
    background: var(--surface-invert) !important;
    color: var(--ink-invert) !important;
}

.orderTicket span,
.addToCalender span {
    color: var(--ink-invert) !important;
}

.orderTicket svg,
.addToCalender svg {
    width: 13px;
    height: 15px;
    fill: var(--ink-invert);
margin-right: 3px;
    vertical-align: middle;
}

.orderTicket.basket-btn svg {
    width: 20px;
    height: 20px;
}

.movieButton a + a {
margin-left: 10px;
    display: inline-block;
}

.schedualHeader {
    margin: 0 15px;
    background: var(--surface-invert);
    position: relative;
    width: calc(100% - 30px);
    float: left;
}

.schedualHeader h1 {
    font-size: 2.813rem;
    color: var(--ink-invert);
    margin: 0;
    padding: 11px 15px;
    width: calc(100% - 290px);
    float: left;
}

.schedualHeader .sortSchedual {
    padding: 18px;
    background: rgba(var(--navy-rgb), 0.1);
    width: 290px;
    float: left;
}

.weekDays {
    position: absolute;
    top: -10px;
right: 50%; width: 55.2%;
    transform: translate(50%, 0%);
}

@media only screen and (min-width: 1600px) {
    .weekDays {
        width: 60%;
    }
}

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

.weekDays ul li {
    display: inline-block;
    background: var(--surface-band);
    width: 50px;
    padding: 0 5px;
    height: 63px;
    position: relative;
    transition: background .25s ease-in-out;
    -moz-transition: background .25s ease-in-out;
    -webkit-transition: background .25s ease-in-out;
}

.weekDays ul li + li {
margin-left: 10px;
}

.weekDays ul li:before {
right: 100%;
    top: 0;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.weekDays ul li:before {
    border-color: rgba(var(--navy-rgb), 0);
    border- right -color: var(--surface-invert);
    border-bottom-color: var(--surface-invert);
    border-width: 5px;
}

.weekDays ul li.open,
.weekDays ul li.active,
.weekDays ul li:hover {
    background: var(--surface-hover);
    transition: background .25s ease-in-out;
    -moz-transition: background .25s ease-in-out;
    -webkit-transition: background .25s ease-in-out;
}

.weekDays ul li a {
    display: block;
}

.weekDays ul li a:hover,
.weekDays ul li a:focus {
    text-decoration: none;
}

.weekDays ul li a span {
    display: block;
    color: var(--ink-muted);
    font-weight: bold;
    text-align: center;
}

.weekDays ul li a span.day {
    font-size: 1.813rem;
    line-height: 40px;
}

.weekDays ul li.active a span.day,
.weekDays ul li.open a span.day,
.weekDays ul li:hover a span.day {
    color: var(--ink-invert);
    text-shadow: 0px 0px 10px rgba(var(--navy-rgb), 0.6);
}

.weekDays ul li a span.date {
    font-size: 0.9375rem;
}

.weekDays ul li.active a span.date,
.weekDays ul li.open a span.date,
.weekDays ul li:hover a span.date {
    color: var(--ink-invert);
}

.weekDays.scrollerClass {

}

#sortSchedual label svg {
    width: 12px;
    height: 12px;
    fill: var(--ink-invert);
    vertical-align: middle;
margin-right: 5px;
}

#sortSchedual label span {
    color: var(--ink-invert);
    font-size: 1.188rem;
    font-weight: 500;
}

#sortSchedual select {
    color: var(--ink);
    font-weight: 500;
    font-size: 1.063rem;
    border: 0;
    width: calc(100% - 85px);
    height: 25px;
    float: right;
    text-indent: 8px;
    position: relative;
    background: var(--surface-raised) url('../images/selectBg_2.png') right 5px center no-repeat;
    background-size: 10px 6px;
}

.schedualSection {
    padding: 40px;
    float: left;
    width: 100%;
    background: var(--surface-raised);
    color: var(--ink);
}


@media only screen and (min-width: 768px) {
    .schedualSection.no-events {
        display: none;
    }

    .schedualSection.even {
        background: var(--surface-band);
    }

    .schedualSection.even .screeningDetailes .tag,
    .schedualSection.even .filter_hall h2 {
        color: var(--ink-on-raised);
        background: var(--surface-raised);
    }

    .schedualSection.even .screeningDetailes h3:after {
        border-color: transparent transparent transparent var(--surface-raised);
    }

    .schedualSection.even .screeningDetailes.open h3:after,
    .schedualSection.even .screeningDetailes:hover h3:after {
        border-color: transparent transparent transparent var(--surface-invert);
    }

    .schedualSection.even .screeningDetailes:hover .tag,
    .schedualSection.even .screeningDetailes.open .tag {
        background: var(--surface-invert);
    }
}


.m_calendar.fixedPos .schedualHeaderWrap {
    position: fixed;
    width: 100%;
    height: 93px;
    top: 146px;
left: 0;
    background: var(--surface-raised);
    padding: 15px;
    z-index: 4;
    box-shadow: 0px 0px 30px 0px rgba(var(--navy-rgb), 0.21);
}

.schedualSection h1 {
    font-size: 1.875rem;
    font-weight: 700;
    margin: 0 0 30px;
}

.schedualSection .row {
    margin: 0 -10px;
}

.screeningHall {
    padding: 0 10px;
    font-weight: 500;
}

.filter_hall h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ink-invert);
    background: var(--surface-invert);
    padding: 7px;
}

.filter .filter_hall.col-md-2 {
    width: 100%;
}

@media only screen and (min-width: 768px) {
    .filter .filter_hall.col-md-2 .screeningDetailes {
        float: left;
        min-height: 1px;
    padding-right: 30px;
        width: 16.66666667%;
    }
}

.screeningDetailes {
    padding-bottom: 15px;
    border-bottom: 1px dashed rgba(var(--navy-rgb), 0.5);
    position: relative;
}

.screeningDetailes .hoverBtn {
    position: absolute;
    width: calc(100% + 20px);
    height: calc(100% + 70px);
left: -10px;
    box-shadow: 0px 0px 10px 0px rgba(var(--navy-rgb), 0.2);
    background: var(--surface-raised);

    top: -9999px;
    opacity: 0;
    z-index: -1;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}

.screeningDetailes.open .hoverBtn,
.screeningDetailes:hover .hoverBtn {
    top: -10px;
    opacity: 1;
    z-index: 2;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}

.screeningDetailes .innerBtnWrap {
    float: left;
    width: 100%;
    padding: 10px;
    position: absolute;
    bottom: 0;
left: 0;
}

.screeningDetailes .innerBtnWrap a {
    float: left;
    width: calc(50% - 5px);
    text-align: center;
    font-weight: 700;
    font-size: 1.077rem;
    color: var(--ink-invert);
    padding: 3px15px;
}

.screeningDetailes .innerBtnWrap a.moreDetailes {
margin-right: 5px;
    color: var(--ink-on-raised);
    background: var(--surface-band);
}

.screeningDetailes .innerBtnWrap a.orderNow {
margin-left: 5px;
    background: var(--surface-invert);
}

.screeningDetailes .hour {
    color: var(--ink-accent);
    font-size: 1.563rem;
    font-weight: 700;
    margin: 5px 0;

}

.screeningDetailes .info {
    font-size: 1rem;
    margin: 5px 0;

}

.screeningDetailes .notes {
    font-size: 0.9375rem;
    color: var(--ink);
    margin-bottom: 5px;
}

.screeningDetailes .infoLabel {
    margin: 5px 0;
}

.screeningDetailes .infoLabel svg {
    width: 12px;
    height: 12px;
    fill: var(--ink-muted);
    display: inline-block;
    vertical-align: middle;
}

.screeningDetailes .tag {
    display: inline-block;
    padding: 2px 5px;
    background: var(--surface-invert);
    font-weight: 700;
    font-size: 0.9375rem;
    margin-top: 10px;
}

.screeningDetailes h3 {
    font-size: 1.438rem;
    font-weight: 500;
    margin: 0;
    position: relative;
    z-index: 1;
}

.screeningDetailes h3 span {
    font-size: 0.9375rem;
    font-weight: 500;
}

.screeningDetailes h3 span:before {
    content: "/";
    padding: 0 5px;
}

.screeningDetailes h3:after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 0 4px 4px;
    border-color: transparent transparent transparent var(--surface-invert);
    display: inline-block;
margin-left: 5px;
}

.screeningDetailes.open .notes,
.screeningDetailes:hover .notes,
.screeningDetailes.open .tag,
.screeningDetailes:hover .tag,
.screeningDetailes.open .infoLabel,
.screeningDetailes:hover .infoLabel,
.screeningDetailes.open h3,
.screeningDetailes:hover h3,
.screeningDetailes.open .info,
.screeningDetailes:hover .info,
.screeningDetailes.open .hour,
.screeningDetailes:hover .hour {
    position: relative;
    z-index: 3;
}

.schedualDaysWrap {
    float: left;
    width: 100%;
    margin-bottom: 40px;
    box-shadow: 0px 0px 30px 0px rgba(var(--navy-rgb), 0.92);
    padding-top: 40px;
    background: var(--surface-raised);
    margin-top: -40px;
}

.m_calendar.fixedPos .schedualWrapper {
    margin-top: 184px;
}

.loader {
    margin: 50px auto 15px;
    font-size: 4px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    position: relative;
    text-indent: -9999em;
    -webkit-animation: load5 1.1s infinite ease;
    animation: load5 1.1s infinite ease;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

.loaderWrap {
    display: block;
    float: left;
    width: 100%;
    text-align: center;
}

.loaderWrap a {
    display: inline-block;
    cursor: pointer;
}

.loaderWrap a:hover {
    text-decoration: none;
}

.loaderWrap i {
    color: var(--ink);
    font-size: 1.5em;
    width: 100%;
    margin-bottom: 5px;
}

.loaderWrap a:hover i {
    animation: bounce-down 800ms ease infinite;
}

.loaderWrap a:hover i.fa-angle-double-up {
    -webkit-animation-direction: reverse; /* Chrome, Safari, Opera */
    animation-direction: reverse;
}

@-webkit-keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

@keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    100% {
        -webkit-transfo rm: rotate(359deg);
        transform: rotate(359deg)
    }
}

@keyframes bounce-down {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    50% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(5px);
    }
}

@-webkit-keyframes bounce-down {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    50% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(5px);
    }
}

.loaderWrap span {
    display: block;
    color: var(--ink);
    font-size: 1.125rem;
    text-align: center;
    margin: 30px 0 50px;

}

.innerPageWrap.defBg .loaderWrap span {
    color: var(--ink);
}

@-webkit-keyframes load5 {
    0%,
    100% {
        box-shadow: 0em -2.6em 0em 0em var(--c-navy), 1.8em -1.8em 0 0em rgba(var(--navy-rgb), 0.2), 2.5em 0em 0 0em rgba(var(--navy-rgb), 0.2), 1.75em 1.75em 0 0em rgba(var(--navy-rgb), 0.2), 0em 2.5em 0 0em rgba(var(--navy-rgb), 0.2), -1.8em 1.8em 0 0em rgba(var(--navy-rgb), 0.2), -2.6em 0em 0 0em rgba(var(--navy-rgb), 0.5), -1.8em -1.8em 0 0em rgba(var(--navy-rgb), 0.7);
    }
    12.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(var(--navy-rgb), 0.7), 1.8em -1.8em 0 0em var(--c-navy), 2.5em 0em 0 0em rgba(var(--navy-rgb), 0.2), 1.75em 1.75em 0 0em rgba(var(--navy-rgb), 0.2), 0em 2.5em 0 0em rgba(var(--navy-rgb), 0.2), -1.8em 1.8em 0 0em rgba(var(--navy-rgb), 0.2), -2.6em 0em 0 0em rgba(var(--navy-rgb), 0.2), -1.8em -1.8em 0 0em rgba(var(--navy-rgb), 0.5);
    }
    25% {
        box-shadow: 0em -2.6em 0em 0em rgba(var(--navy-rgb), 0.5), 1.8em -1.8em 0 0em rgba(var(--navy-rgb), 0.7), 2.5em 0em 0 0em var(--c-navy), 1.75em 1.75em 0 0em rgba(var(--navy-rgb), 0.2), 0em 2.5em 0 0em rgba(var(--navy-rgb), 0.2), -1.8em 1.8em 0 0em rgba(var(--navy-rgb), 0.2), -2.6em 0em 0 0em rgba(var(--navy-rgb), 0.2), -1.8em -1.8em 0 0em rgba(var(--navy-rgb), 0.2);
    }
    37.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(var(--navy-rgb), 0.2), 1.8em -1.8em 0 0em rgba(var(--navy-rgb), 0.5), 2.5em 0em 0 0em rgba(var(--navy-rgb), 0.7), 1.75em 1.75em 0 0em var(--c-navy), 0em 2.5em 0 0em rgba(var(--navy-rgb), 0.2), -1.8em 1.8em 0 0em rgba(var(--navy-rgb), 0.2), -2.6em 0em 0 0em rgba(var(--navy-rgb), 0.2), -1.8em -1.8em 0 0em rgba(var(--navy-rgb), 0.2);
    }
    50% {
        box-shadow: 0em -2.6em 0em 0em rgba(var(--navy-rgb), 0.2), 1.8em -1.8em 0 0em rgba(var(--navy-rgb), 0.2), 2.5em 0em 0 0em rgba(var(--navy-rgb), 0.5), 1.75em 1.75em 0 0em rgba(var(--navy-rgb), 0.7), 0em 2.5em 0 0em var(--c-navy), -1.8em 1.8em 0 0em rgba(var(--navy-rgb), 0.2), -2.6em 0em 0 0em rgba(var(--navy-rgb), 0.2), -1.8em -1.8em 0 0em rgba(var(--navy-rgb), 0.2);
    }
    62.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(var(--navy-rgb), 0.2), 1.8em -1.8em 0 0em rgba(var(--navy-rgb), 0.2), 2.5em 0em 0 0em rgba(var(--navy-rgb), 0.2), 1.75em 1.75em 0 0em rgba(var(--navy-rgb), 0.5), 0em 2.5em 0 0em rgba(var(--navy-rgb), 0.7), -1.8em 1.8em 0 0em var(--c-navy), -2.6em 0em 0 0em rgba(var(--navy-rgb), 0.2), -1.8em -1.8em 0 0em rgba(var(--navy-rgb), 0.2);
    }
    75% {
        box-shadow: 0em -2.6em 0em 0em rgba(var(--navy-rgb), 0.2), 1.8em -1.8em 0 0em rgba(var(--navy-rgb), 0.2), 2.5em 0em 0 0em rgba(var(--navy-rgb), 0.2), 1.75em 1.75em 0 0em rgba(var(--navy-rgb), 0.2), 0em 2.5em 0 0em rgba(var(--navy-rgb), 0.5), -1.8em 1.8em 0 0em rgba(var(--navy-rgb), 0.7), -2.6em 0em 0 0em var(--c-navy), -1.8em -1.8em 0 0em rgba(var(--navy-rgb), 0.2);
    }
    87.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(var(--navy-rgb), 0.2), 1.8em -1.8em 0 0em rgba(var(--navy-rgb), 0.2), 2.5em 0em 0 0em rgba(var(--navy-rgb), 0.2), 1.75em 1.75em 0 0em rgba(var(--navy-rgb), 0.2), 0em 2.5em 0 0em rgba(var(--navy-rgb), 0.2), -1.8em 1.8em 0 0em rgba(var(--navy-rgb), 0.5), -2.6em 0em 0 0em rgba(var(--navy-rgb), 0.7), -1.8em -1.8em 0 0em var(--c-navy);
    }
}

@keyframes load5 {
    0%,
    100% {
        box-shadow: 0em -2.6em 0em 0em var(--c-navy), 1.8em -1.8em 0 0em rgba(var(--navy-rgb), 0.2), 2.5em 0em 0 0em rgba(var(--navy-rgb), 0.2), 1.75em 1.75em 0 0em rgba(var(--navy-rgb), 0.2), 0em 2.5em 0 0em rgba(var(--navy-rgb), 0.2), -1.8em 1.8em 0 0em rgba(var(--navy-rgb), 0.2), -2.6em 0em 0 0em rgba(var(--navy-rgb), 0.5), -1.8em -1.8em 0 0em rgba(var(--navy-rgb), 0.7);
    }
    12.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(var(--navy-rgb), 0.7), 1.8em -1.8em 0 0em var(--c-navy), 2.5em 0em 0 0em rgba(var(--navy-rgb), 0.2), 1.75em 1.75em 0 0em rgba(var(--navy-rgb), 0.2), 0em 2.5em 0 0em rgba(var(--navy-rgb), 0.2), -1.8em 1.8em 0 0em rgba(var(--navy-rgb), 0.2), -2.6em 0em 0 0em rgba(var(--navy-rgb), 0.2), -1.8em -1.8em 0 0em rgba(var(--navy-rgb), 0.5);
    }
    25% {
        box-shadow: 0em -2.6em 0em 0em rgba(var(--navy-rgb), 0.5), 1.8em -1.8em 0 0em rgba(var(--navy-rgb), 0.7), 2.5em 0em 0 0em var(--c-navy), 1.75em 1.75em 0 0em rgba(var(--navy-rgb), 0.2), 0em 2.5em 0 0em rgba(var(--navy-rgb), 0.2), -1.8em 1.8em 0 0em rgba(var(--navy-rgb), 0.2), -2.6em 0em 0 0em rgba(var(--navy-rgb), 0.2), -1.8em -1.8em 0 0em rgba(var(--navy-rgb), 0.2);
    }
    37.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(var(--navy-rgb), 0.2), 1.8em -1.8em 0 0em rgba(var(--navy-rgb), 0.5), 2.5em 0em 0 0em rgba(var(--navy-rgb), 0.7), 1.75em 1.75em 0 0em var(--c-navy), 0em 2.5em 0 0em rgba(var(--navy-rgb), 0.2), -1.8em 1.8em 0 0em rgba(var(--navy-rgb), 0.2), -2.6em 0em 0 0em rgba(var(--navy-rgb), 0.2), -1.8em -1.8em 0 0em rgba(var(--navy-rgb), 0.2);
    }
    50% {
        box-shadow: 0em -2.6em 0em 0em rgba(var(--navy-rgb), 0.2), 1.8em -1.8em 0 0em rgba(var(--navy-rgb), 0.2), 2.5em 0em 0 0em rgba(var(--navy-rgb), 0.5), 1.75em 1.75em 0 0em rgba(var(--navy-rgb), 0.7), 0em 2.5em 0 0em var(--c-navy), -1.8em 1.8em 0 0em rgba(var(--navy-rgb), 0.2), -2.6em 0em 0 0em rgba(var(--navy-rgb), 0.2), -1.8em -1.8em 0 0em rgba(var(--navy-rgb), 0.2);
    }
    62.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(var(--navy-rgb), 0.2), 1.8em -1.8em 0 0em rgba(var(--navy-rgb), 0.2), 2.5em 0em 0 0em rgba(var(--navy-rgb), 0.2), 1.75em 1.75em 0 0em rgba(var(--navy-rgb), 0.5), 0em 2.5em 0 0em rgba(var(--navy-rgb), 0.7), -1.8em 1.8em 0 0em var(--c-navy), -2.6em 0em 0 0em rgba(var(--navy-rgb), 0.2), -1.8em -1.8em 0 0em rgba(var(--navy-rgb), 0.2);
    }
    75% {
        box-shadow: 0em -2.6em 0em 0em rgba(var(--navy-rgb), 0.2), 1.8em -1.8em 0 0em rgba(var(--navy-rgb), 0.2), 2.5em 0em 0 0em rgba(var(--navy-rgb), 0.2), 1.75em 1.75em 0 0em rgba(var(--navy-rgb), 0.2), 0em 2.5em 0 0em rgba(var(--navy-rgb), 0.5), -1.8em 1.8em 0 0em rgba(var(--navy-rgb), 0.7), -2.6em 0em 0 0em var(--c-navy), -1.8em -1.8em 0 0em rgba(var(--navy-rgb), 0.2);
    }
    87.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(var(--navy-rgb), 0.2), 1.8em -1.8em 0 0em rgba(var(--navy-rgb), 0.2), 2.5em 0em 0 0em rgba(var(--navy-rgb), 0.2), 1.75em 1.75em 0 0em rgba(var(--navy-rgb), 0.2), 0em 2.5em 0 0em rgba(var(--navy-rgb), 0.2), -1.8em 1.8em 0 0em rgba(var(--navy-rgb), 0.5), -2.6em 0em 0 0em rgba(var(--navy-rgb), 0.7), -1.8em -1.8em 0 0em var(--c-navy);
    }
}

.m_movie .a2a_kit {
    float: left;
    padding: 0 15px;
}

.eventTag {
    float: right;
    background: var(--surface-band);
    color: var(--ink);
    font-size: 1.063rem;
    padding: 5px 7px;
}

.shareWrap + .eventTag {
    margin-top: -20px;
}

/*.movieBannerCont .owl-carousel .owl-item img,
.innerMainBanner .owl-carousel .owl-item img{
    position: absolute;
    top: 0;
    







































































































































left






































































































































: 0;
}
.movieBannerCont .owl-carousel .owl-item>div{
    padding-top: 56%;
}
.innerMainBanner .owl-carousel .owl-item>div{
    padding-top: 40%;
}*/
.newsItem {
    float: left;
    width: 100%;
    padding: 20px 0;
    border-bottom: 1px solid var(--hairline);
}

.newsItem .col-lg-9,
.newsItem .col-lg-3 {
    padding: 0;
}

.newsItem .col-lg-9 {
padding-left: 15px;
}

.newsItem .col-xs-12 h3,
.newsItem .col-lg-9 h3 {
    color: var(--ink);
    font-weight: 500;
    font-size: 1.563rem;
    margin: 7px 0;
}

.newsItem .col-xs-12 .time,
.newsItem .col-lg-9 .time {
    color: var(--ink-muted);
    font-size: 1.063rem;
    margin: 0 0 5px;
}

.newsItem .col-xs-12 p,
.newsItem .col-lg-9 p {
    color: var(--ink);
    font-weight: 500;
    font-size: 1.188rem;
}

.newsItem .col-xs-12 a,
.newsItem .col-lg-9 a {
    color: var(--ink);
    text-decoration: underline;
    font-weight: 500;
    font-size: 1.188rem;
}

.newsItem .col-xs-12 a:after,
.newsItem .col-lg-9 a:after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 0 4px 4px;
    border-color: transparent transparent transparent var(--surface-invert);
    display: inline-block;
margin-left: 5px;
}

.newsItem .col-lg-3 img {
    width: 100%;
}

.moreNews {
    float: left;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 20px;
}

.moreNews a {
    display: inline-block;
    margin: 50px auto;
    background: var(--surface-invert);
    color: var(--ink-invert);
    font-weight: 700;
    font-size: 1.188rem;
    padding: 10px 15px;
}

.wrapper_404 {
    text-align: center;
    padding: 50px 0;
}

.wrapper_404 h1,
.wrapper_404 h2 {
    font-size: 1.875rem;
    line-height: 2.5rem;
    margin: 0;
    font-weight: 500;
    color: var(--ink);
    padding: 0 15px;
}

.wrapper_404 .searchMovie {
    width: 40%;
    max-width: 90%;
    margin: 0px auto;
    float: none;
}

.arr_404 {
    width: 16px;
    margin: 30px 0;
}

.imag_404 {
    margin: 0 auto 50px;
    display: block;
    max-width: 80%;
}

#confirmOpeningReg input {
    width: calc(50% - 10px);
    float: left;
}

#confirmOpeningReg input[type="text"] {
margin-right: 10px;
    border: 1px solid var(--hairline);
    background: var(--surface-raised);
    height: 40px;
    line-height: 40px;
    text-indent: 8px;
}

#confirmOpeningReg input[type="text"]::-webkit-input-placeholder {
    color: var(--ink-muted);
}

#confirmOpeningReg input[type="text"]:-moz-placeholder {
    color: var(--ink-muted);
}

{
}
#confirmOpeningReg input[type="submit"] {
margin-left: 10px;
    border: 0;
    height: 40px;
    background: var(--surface-invert);
    color: var(--ink-invert);
}

.addwat_hide {
    display: block !important;
}

.no_results {
    min-height: 300px;
}

/*.newsWrapper .scrollerClass{
    height:332px;
    direction: ltr;
}*/
.logoWrap h1 {
    margin: 0;
}

.playBtnJs:focus .playBtn {
    /*box-shadow: 0px 0px 9.5px 0.5px rgba(var(--navy-rgb), 0.3);*/
}

#confirmOpeningReg_level2 .row {
    margin: 0 -10px;
}

#confirmOpeningReg_level2 .row > div {
    padding: 0 10px;
    margin-top: 20px;
}

.ticketType {
    margin-top: -8px !important;
}

#confirmOpeningReg_level2 input {
    font-size: 1.125rem;
    color: var(--ink-muted);
    height: 40px;
    border: 1px solid var(--hairline);
    text-indent: 8px;
    background: var(--surface-raised);
    width: 100%;

}

#confirmOpeningReg_level2 input::-webkit-input-placeholder {
    color: var(--ink-muted);
}

#confirmOpeningReg_level2 input:-moz-placeholder {
    color: var(--ink-muted);
}

#confirmOpeningReg_level2 select {
    height: 40px;
    background: var(--surface-raised) url("../images/selectBg.png") 15px center no-repeat;
    background-size: 14px 8px;
    border: 0;
    color: var(--ink-muted);
    text-indent: 8px;
    font-size: 1.154rem;
    width: 100%;
    border: 1px solid var(--hairline);
}

#confirmOpeningReg_level2 input[type="submit"] {
    font-size: 1.154rem;
    font-weight: 700;
    color: var(--ink-invert);
    background: var(--surface-invert);
    height: 40px;
    line-height: 40px;
    text-align: center;
    border: 0;
}

.binderBottom {
    height: 1px;
    width: 100%;
}


aside.infoSide {
    margin-bottom: 40px;
}

.unsubscribe {
    min-height: 345px;
}

.innerMainBanner .container {
    position: relative;
}

.navContainer {
    position: absolute;
    top: calc(50% - 6px);
right: 4%;
    height: 11px;
    z-index: 2;
    text-align: center;
}

.navContainer button {
    border: 0;
    background: none;
    margin: 0 auto;
    padding: 0;
}

.mainBanner .navContainer button i {
    color: var(--ink-invert);
    text-shadow: -1px 1px 0px rgba(var(--navy-rgb), 0.5);
}

.playCarousel {
    display: none;
}

.played .stopCarousel {
    display: none;
}

.played .playCarousel {
    display: block;
}

iframe[name="google_conversion_frame"] {
    position: absolute;
    top: -9999px
}

.mfp-wrap,
.modal {
    z-index: 999999;
}

.mfp-bg,
.modal-backdrop {
    z-index: 99999;
}

.atcb-link {
    background: url("../images/calenderIcon.png") left center no-repeat;
    background-size: 12px 13px;
padding-left: 20px;
    float: none;
    display: inline-block;
}

#loader {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgb(55, 54, 55);
    top: 0;
left: 0;
    z-index: 999999999999999999999;
    text-align: center;
}

#loader .innerLoader {
    width: 250px;
    height: 97px;
    position: absolute;
left: calc(50% - 165px);
    top: calc(50% - 63.5px);
}

#loader img {
    display: block;
    width: 100%;
    height: 100%;
}

@-webkit-keyframes fillImg {
    0% {
        height: 0;
    }
    100% {
        height: 100%;
    }
}

@-moz-keyframes fillImg {
    0% {
        height: 0;
    }
    100% {
        height: 100%;
    }
}

@-o-keyframes fillImg {
    0% {
        height: 0;
    }
    100% {
        height: 100%;
    }
}

@keyframes fillImg {
    0% {
        height: 0;
    }
    100% {
        height: 100%;
    }
}

@-webkit-keyframes emptyImg {
    0% {
        height: 100%;
    }
    100% {
        height: 0;
    }
}

@-moz-keyframes emptyImg {
    0% {
        height: 100%;
    }
    100% {
        height: 0;
    }
}

@-o-keyframes emptyImg {
    0% {
        height: 100%;
    }
    100% {
        height: 0;
    }
}

@keyframes emptyImg {
    0% {
        height: 100%;
    }
    100% {
        height: 0;
    }
}

#loader img.loaderLogorev {
    position: absolute;
    bottom: 0;
left: 0;
    -webkit-animation: fillImg 2s infinite; /* Safari 4+ */
    -moz-animation: fillImg 2s infinite; /* Fx 5+ */
    -o-animation: fillImg 2s infinite; /* Opera 12+ */
    animation: fillImg 2s infinite;
}

#loader img.loaderLogo {
    -webkit-animation: emptyImg 2s infinite; /* Safari 4+ */
    -moz-animation: emptyImg 2s infinite; /* Fx 5+ */
    -o-animation: emptyImg 2s infinite; /* Opera 12+ */
    animation: emptyImg 2s infinite;
}


/**/
.m_calendar.iframe header,
.m_calendar.iframe footer,
.m_calendar.iframe .breadcrumbContainer {
    display: none;
}

.m_calendar.fixedPos.iframe .schedualHeaderWrap {
    top: 0;
}

.m_calendar.iframe .schedualHeaderWrap {
    /*padding: 15px;*/
}

.m_calendar.iframe .schedualDaysWrap {
    margin-bottom: 0;
}

.m_calendar.iframe .infoSide,
.m_calendar.iframe .breadcrumb {
    display: none;
}

.m_calendar.iframe .wrapper {
    padding: 0;
}

.m_calendar.iframe .weekDays {
    margin-bottom: 0;
}

.m_calendar.iframe .schedualWrapper {
    margin-top: 65px;
}

.m_calendar.iframe .screeningDetailes .innerBtnWrap {
    width: 50%;
}

.downBtn {
    float: left;
    margin: 15px 0;
    padding: 0 20px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    color: var(--ink-invert);
    background: var(--surface-invert);
    font-size: 1.375rem;
    transition: all .150ms ease-in-out;
    -moz-transition: all .150ms ease-in-out;
    -webkit-transition: all .150ms ease-in-out;
}

.downBtn:hover,
.downBtn:focus {
    color: var(--ink-hover);
    border: 1px solid var(--hairline);
    background: transparent;
    text-decoration: none;
}

#contact_us {
    width: 75%;
    margin-top: 50px;
}

.contactWrapper h2 {
    font-size: 1.875rem;
}

.contactWrapper h2 span {
    display: block;
    font-size: 1.25rem;
    margin-top: 10px;
}

.inputWrap {
    position: relative;
}

.contactWrapper .inputWrap {
    margin-bottom: 10px;
}

.contactWrapper .inputWrap label {
    width: 120px;
    display: inline-block;
    vertical-align: top;
    font-size: 1.208rem;
    font-weight: 400;
    margin: 0;
}

.contactWrapper .captcha,
.contactWrapper .inputWrap textarea,
.contactWrapper .inputWrap input {
    display: inline-block;
    vertical-align: top;
}

.contactWrapper .inputWrap input:not([type="checkbox"]):not([type="submit"]) {
    height: 40px;
    line-height: 40px;
    border: 0;
    text-indent: 8px;
    width: 230px;
}

.contactWrapper .inputWrap .checkboxLabelCLick {
    margin: 20px 0;
margin-left: 120px;
    position: relative;
}

.contactWrapper .inputWrap input[type="checkbox"] {
    margin: 0;
    width: 20px;
    height: 20px;
    z-index: 1;
    position: relative;
    opacity: 0;
}

.contactWrapper .inputWrap .chkbx {
    width: 20px;
    height: 20px;
    background: var(--surface-band);
    position: absolute;
    right: 0;
    top: 0;
}

.contactWrapper .inputWrap input[type="checkbox"]:checked + .chkbx {
    background: var(--surface-invert) url("../images/v.png") center center no-repeat;
}

.contactWrapper .inputWrap .checkboxTxt {
    width: calc(100% - 40px);
    line-height: 18px;
    margin-right: 10px;
    color: var(--ink-muted);
    font-size: 1.308rem;
}

.contactWrapper .inputWrap input#subject,
.contactWrapper .inputWrap textarea {
    width: calc(100% - 125px);
}

.contactWrapper .inputWrap .submitBtn {
margin-left: 120px !important;
    margin-bottom: 50px !important;
    background: var(--surface-invert);
    border: 0;
    height: 40px;
    line-height: 40px;
    font-size: 1.692rem;
    font-weight: 700;
    color: var(--ink-invert);
    width: 230px;
}

#contact_us textarea {
    color: black !important;
}

/* the text fields are white, so their ink is black; :not() keeps this off the
   submit button, which is navy and needs the inverted ink its own rule sets */
#contact_us input:not(.submitBtn) {
    color: black !important;
}

.contactWrapper hr {
    border-top: 1px solid var(--hairline);
}

/*OLD FORM*/
.contact_form-Entry {
    width: 95%;
    margin: 0 auto;
}

.contact_form-Entry label {
    font-weight: 500;
    /*width: 160px;*/
    width: 100%;
    float: left;
    font-size: 15px;
}

#registrationForm .movwhere {
    display: none;
}

#registrationForm label {
    float: none;
    display: block;
}

#registrationForm label .inputWrap {
    width: 100%;
padding-right: 0;
}

#registrationForm label input {
    margin-top: 5px;
}

.contact_form-Entry textarea,
.contact_form-Entry input[type="password"],
.contact_form-Entry input[type="text"],
#registrationForm input,
#registrationForm select {
    /*width: calc(100% - 160px);*/
    width: 100%;
    float: left;
    border: 1px solid var(--hairline);
    /*height: 30px;*/
    height: 46px;
    line-height: 30px;
    padding: 5px 10px;
}

.contact_form-Entry input[type="password"],
.contact_form-Entry input[type="text"],
#registrationForm .g-recaptcha {
    width: 100%;
}

#registrationForm select {
    background: var(--surface-raised) url("../images/selectBg.png") 15px center no-repeat;
    background-size: 14px 8px;
}

select {
    cursor: pointer;
}

.radioWrap {
    position: relative;
}

.radioWrap input[type="radio"] {
    width: 13px !important;
    height: 13px !important;
    /*opacity: 0;*/
    /*position: absolute;*/
    top: calc(50% - 6.5px);
left: 0;
    margin: 0;
}

.radioWrap .radio_check {
    width: 13px;
    min-width: initial;
    height: 13px;
    vertical-align: middle;
    display: inline-block;
    border: 1px solid var(--hairline);
    padding: 0;
    float: none;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.radioWrap input[type="radio"]:checked + .radio_check {
    background: var(--surface-invert);
    -webkit-box-shadow: inset 0 0 0 2px var(--surface-raised);
    -moz-box-shadow: inset 0 0 0 2px var(--surface-raised);
    box-shadow: inset 0 0 0 2px var(--surface-raised);
}

#registrationForm fieldset legend {
    font-weight: 500;
    width: 100%;
    font-size: 15px;
    margin-bottom: 12px;
    border: 0;
}

#registrationForm fieldset label {
    margin: 0;
    margin-bottom: 15px;
}

.contact_form-Entry input[type="submit"] {
    width: calc(100% - 160px);
    float: right;
    background: var(--surface-invert);
    height: 40px;
    line-height: 33px;
    font-weight: 700;
    border: 0;
}

.contact_form-Entry textarea {
    height: 144px;
    resize: none;
}

.contact_form-Entry > .row > div,
.contact_form-Entry .matchHeight > div {
    margin-bottom: 30px;
}

.contact_form-Entry p {
    font-weight: 500;
    font-size: 1.1rem;
    line-height: 2rem;
    margin-bottom: 25px;
}

.checkboxWrap label {
    width: 100%;
    position: relative;
}

.checkboxWrap input {
    float: left;
    margin: 0;
margin-right: 7px;
}

.radioWrap label {
    width: auto;
}

.line_contact {
    margin-bottom: 10px;
}

.contact_form-Entry .checkboxWrap {
    position: relative;
    margin-bottom: 20px;
}

input[type='checkbox'], label {
    cursor: pointer;
}

.contact_form-Entry .checkboxWrap input {
    float: none;
    margin: 0;
margin-right: 5px;
    width: 17px !important;
    height: 17px !important;
    /*opacity: 0;*/
    display: inline-block;
    vertical-align: middle;
}

#registrationForm .checkboxWrap input {
    opacity: 0;
}

#registrationForm .radioWrap input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.contact_form-Entry .checkboxWrap .chkbx_v {
    position: absolute;
    top: calc(50% - 8.5px);
left: 0;
    border: 1px solid var(--hairline);
    width: 17px;
    height: 17px;
    min-width: inherit;
    padding: 0;
}

.contact_form-Entry .checkboxWrap input:checked + .chkbx_v {
    background: url(../images/v-dark.png) no-repeat center center;
}

.contact_form-Entry .fileWrap {
    position: relative;
}

input[type="file"]::-webkit-file-upload-button {
    cursor: pointer;
}

.contact_form-Entry .fileWrap input {
    opacity: 0;
    position: relative;
    z-index: 1;
    cursor: pointer;
    width: 204px;
    height: 46px;
}

.contact_form-Entry .fileWrap input:focus + .files_names {
    outline: -webkit-focus-ring-color auto 5px;
}

.contact_form-Entry .fileWrap .files_names {
    position: absolute;
    top: 0;
left: 0;
    border: 1px solid var(--hairline);
    color: var(--ink);
    width: 204px;
    max-width: 100%;
    height: 46px;
    line-height: 44px;
    text-indent: 18px;
    margin: 0 0 15px 0;
    z-index: 0;
    padding-left: 40px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact_form-Entry .fileWrap .files_names:after,
.contact_form-Entry .fileWrap .files_names:before {
    content: '';
    width: 21px;
    height: 1px;
    background: var(--state-success);
    position: absolute;
    top: calc(50% - 1px);
    left: 10px;
}

.contact_form-Entry .fileWrap .files_names:before {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

.contact_form-Entry button[type='submit'] {
    width: 204px;
    max-width: 100%;
    height: 46px;
    background: var(--surface-invert);
    border-radius: 0;
    border: 0;
    font-size: 1.3rem;
    color: var(--ink-invert);
    font-weight: 500;
    margin-top: 34px;
    float: right;
}

.contact_form-Entry .section {
    display: none;
}

.contact_form-Entry .section:nth-of-type(1) {
    display: block
}

.contact_form-Entry .toNextSection {
    color: var(--ink-accent);
    font-size: 1.2rem;
    font-weight: 500;
}

.contact_form-Entry .g-recaptcha {
    margin-top: 30px;
}

.Entry-lable {
    min-height: 21px;
    width: 100px;
    float: left;
}

input.Entry-radio,
input.Entry-radio2 {
margin-right: 13px;

}

.line-Entry {
    border-bottom: 1px solid var(--hairline);
    margin-top: 15px;
    margin-bottom: 14px;
    padding: 10px 0;
    float: left;
    width: 100%;
}

.col-xs-12 span {
    min-width: 160px;
padding-right: 20px;
    float: left;
    font-size: 15px;
}

.col-xs-12 label + label {
margin-left: 20px;
}

.Entry-lable-desc {
    width: 357px;
    float: left;
}

#g-capcha {
    float: left;
}

.line-Entry2 {
    margin-top: 10px;
    float: left;
    width: 100%;
}

.contact_form-Entry h3 {
    border-bottom: 1px solid var(--hairline);
    height: 32px;
    line-height: 30px;
    font-size: 16px;
    color: var(--ink-muted);
    float: left;
    width: 100%;
    margin-top: 20px;
    font-weight: bold;
    margin-bottom: 20px;
}

.line .labellong {
    width: 78%;
}

.line2 .labellong input {
    width: 550px;
    background: none repeat scroll 0 0 var(--surface-raised);
    border: 1px solid var(--hairline);
    color: var(--ink-muted);
    font: 12px Arial, Helvetica, sans-serif;
    height: 19px;
    margin: 0;
    padding: 0;

}

.line2 .lable-textarea {
    float: none;
    width: 100%;
}

.labellong2 textarea {
    width: 92%;
    background: none repeat scroll 0 0 var(--surface-raised);
    border: 1px solid var(--hairline);
    color: var(--ink-muted);
    font: 12px Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    min-height: 140px;
}

.Entry-white {
    border-bottom: 1px solid var(--hairline);
    height: 32px;
    line-height: 30px;
    font-size: 14px;
    color: var(--ink);
    float: left;
    width: 100%;
    margin-top: 40px;
    font-weight: bold;
}

.lable-min {
    float: left;
    font-size: 11px;
    line-height: 30px;
padding-left: 5px;

}

.sideLabel input {
    width: calc(100% - 190px) !important;
}

.radio2 .Entryone {
    width: 120px;
}

.radio3 {
    clear: left;
    border: none;
}

.radio3 .Entryone {
    width: 120px;
}


.authorize {
    border-bottom: 1px dotted var(--hairline);
    border-top: 1px dotted var(--hairline);
    padding: 10px;
    width: 97% !important;
    margin-top: 10px;
}

.Security {
    margin-top: 11px;
}

.Entry {
    color: var(--ink) !important;
}

.jqTransformRadioWrapper {
margin-right: 10px !important;

}

.line .labelone, .line .labeltwo, .line .labelthree, .line .labelfour, .line .labellong {
    float: left;
    width: 100px;
    height: auto !important;
    height: 21px;
    min-height: 21px;
}

.line .labeltwo {
margin-right: 60px;
    width: 190px;
}

.line .labelfour {
    width: 190px;
}

.line .labellong {
    width: 500px;
}

.mt-none {
    margin-top: 0 !important;
}

.mb-none {
    margin-bottom: 0 !important;
}

.formsQuantity {
    list-style-type: circle;
    text-decoration: underline;
    cursor: pointer
}

#addwat_buttons {
    z-index: 9999999 !important;
}

.basket-user {
    text-align: left;
}

.basket-user div#basket-user {
    color: var(--ink-accent);
    font-weight: bold;
}

.basket-user > div {
    display: inline-block;
}

.basket-user button {
    margin: 6px 0;
    padding: 0 20px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    color: var(--ink-invert);
    border: 1px solid var(--surface-invert);
    background: var(--surface-invert);
    font-size: 1.375rem;
    transition: all .25s ease-in-out;
}

.basket-user button:hover {
    color: var(--ink-invert);
    background: var(--surface-hover);
    text-decoration: none;
}

.info-form {
    background: none;
    margin-top: 3rem;
    box-shadow: none;
    background: var(--surface-raised);
}

.info-form label {
    color: var(--ink-muted);
}

.info-form.contactWrapper .inputWrap textarea,
.info-form.contactWrapper .inputWrap input {
    border: 1px solid var(--hairline) !important;
}

#faq-collapse {
    margin-bottom: 50px;
}

@media (min-width: 768px) {
    #faq-collapse {
        max-width: 919px;
        margin-bottom: 150px;
    }
}

/* .faq-panel is --surface-raised, so everything on it takes --ink. These were
   --ink-invert from when the panel was #2B2B2B: white on white, legible only
   on hover. */
.faq-panel-heading {
    color: var(--ink);
    padding: 0;
    border: 0 !important;
    background: none !important;
}

.faq-title > a {
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.faq-panel {
    padding: 21px 30px;
    border: none !important;
    border-radius: 0 !important;
    background-color: var(--surface-raised);
}

.faq-panel:not(:first-child) {
    margin-top: 20px !important;
}

.faq-panel-expand {
    fill: var(--ink);
    width: 14px;
    height: 14px;
}

.faq-panel-collapse {
    fill: var(--ink-accent);
    width: 14px;
    display: none;
    height: 14px;
}

.faq-panel.active .faq-panel-expand {
    display: none;
}

.faq-panel.active .faq-panel-collapse {
    display: block;
}

.faq-panel.active .faq-title-link {
    color: var(--ink-accent);
}

.faq-title-link:focus {
    box-shadow: none !important;
}

.faq-title-link:hover,
.faq-title-link:focus {
    color: var(--ink-hover);
    text-decoration: none;
}

.faq-title-link:hover,
.faq-title-link:focus {
    color: var(--ink-hover);
    text-decoration: none;
}

.faq-title-link:hover svg,
.faq-title-link:focus svg {
    fill: var(--ink-hover);
}

.faq-content {
    padding: 30px 0 20px 0;
}

.faq-video-toggle {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
}

.faq-media {
    width: 170px;
    height: 90px;
    border: thin solid rgba(255, 255, 255, 0.1);
}

.faq-image {
    width: 170px;
    height: 90px;
}

.faq-body {
    padding: 15px 0;
    font-size: 16px;
}

.faq-body p {
    padding: 0;
    margin: 0;
}

.faq-play-img {
    position: absolute;
    width: 50px;
    height: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}

@media (min-width: 768px) {
    .faq-content {
        display: flex;
    }

    .faq-body {
        padding: 0;
        font-size: 14px;
    }

    .faq-media + .faq-body {
        padding: 0 15px;
    }
}

.cart-tag {
    top: -35px;
    left: 50%;
    text-align: center;
    position: absolute;
    z-index: 1;
    transform: translateX(-50%);
}

.cart-tag-chip {
    background: var(--surface-invert);
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 11px;
    color: var(--ink-invert);
    transition: 0.4s all ease;
    white-space: nowrap;
}


.festival-menu-tag {
    background: var(--surface-invert);
    border-radius: 10px;
    padding: 2px 14px;
    font-size: 11px;
    transition: 0.4s all ease;
}

.festival-menu-tag-wrap {
    top: -10px;
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;
    position: absolute;
    z-index: 1;
    display: none;
}

.dropdown.has-tag:after {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    content: "";
    height: 3px;
    width: 55px;
    margin: auto;
    border-radius: 5px;
    background: var(--surface-invert);
    opacity: 1;
    display: none;
    transition: 0.5s ease opacity;
}

@media (min-width: 768px) {
    .festival-menu-tag-wrap,
    .dropdown.has-tag:after {
        display: block
    }
}

.has-tag:hover:after,
.has-tag:focus:after {
    opacity: 0;
}

.dropdown.has-tag:hover .festival-menu-tag,
.dropdown.has-tag:focus .festival-menu-tag {
    color: var(--ink-invert);
    background: var(--surface-hover);
}

.page-heading {
    display: flex;
    font-size: 20px;
    margin-bottom: 30px;
    justify-content: space-between;
}

@media (min-width: 768px) {
    .page-heading {
        font-size: 50px;
    }
}


.page-subtitle {
    font-size: 16px;
}

@media (min-width: 768px) {
    .page-subtitle {
        font-size: 18px;
    }
}

/*live page*/
.live-instructions-link {
    font-weight: 500;
    color: var(--ink);
    font-size: 18px;
    display: flex;
    align-items: center;
    text-decoration: underline;
}

.live-instructions-link:focus,
.live-instructions-link:hover {
    color: var(--ink-hover);
}

.live-instructions-link .svg-help {
    width: 30px;
    height: 30px;
    fill: var(--ink-accent);
margin-right: 10px;
}

.live-shows {
    margin: 50px 0;
}

.live-shows .col-lg-4 {
    padding: 2px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.live-image-wrap {
    position: relative;
    height: 0;
    width: 100%;
    padding-top: 74%;
}

.live-image-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.live-show-image {
    position: absolute;
    top: 0;
    left: 0;
    min-height: 100%;
    min-width: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.live-show {
    overflow: hidden;
    position: relative;
    width: calc(100% - 15px);
    margin-bottom: 15px;
}

.live-show-overlay {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: var(--ink-invert);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: absolute;
    background: transparent linear-gradient(180deg, rgba(var(--navy-rgb), 0) 0%, rgba(var(--navy-rgb), 0.5) 100%) 0% 0% no-repeat padding-box;
}

.live-show-title {
    font-size: 27px;
    margin: 0;
    opacity: 1;
    text-shadow: 1px 1px 0px rgba(var(--navy-rgb), 0.5);
    transition: 0.3s opacity ease;
}

.live-show-subtitle {
    font-size: 14px;
    font-weight: 300;
    opacity: 1;
    min-height: 29px;
    transition: 0.3s opacity ease;
}

.live-show-dates {
    background-color: var(--scrim);
    top: 15px;
    font-size: 20px;
right: 0;
    position: absolute;
    font-weight: 500;
    padding: 6px 15px;
}

.live-show-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s ease all;
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    transform: translate3d(0, 150%, 0);
}

.live-show-details {
    color: var(--ink);
    border: none;
    font-size: 17px;
    font-weight: 500;
    padding: 15px;
    flex-grow: 1;
    background: var(--surface-raised);
    text-align: center;
}

.live-show-purchase {
    color: var(--ink-invert);
    border: none;
    font-size: 17px;
    font-weight: 500;
    padding: 15px;
    text-align: center;
    flex-grow: 1;
    background-color: var(--surface-invert);
}

.live-show-details:hover,
.live-show-details:focus {
    color: var(--ink-invert);
    text-decoration: none;
}

.live-show-purchase:hover,
.live-show-purchase:focus {
    color: var(--ink-invert);
    text-decoration: none;
}

.live-show:hover .live-show-actions,
.live-show.active .live-show-actions {
    transform: translate3d(0, 0, 0);
}

.live-show:hover .live-show-title,
.live-show:hover .live-show-subtitle,
.live-show.active .live-show-title,
.live-show.active .live-show-subtitle {
    opacity: 0;
}

.live-next-screenings {
    margin-top: 100px;
}

.live-section-subtitle {
    font-size: 25px;
    padding-bottom: 20px;
    font-weight: 600;
}

.footer-links {
    display: flex;
    flex-direction: column;
}

.footer-email {

}
/* ---------------------------------------------------------------------------
   Navy buttons: one shared rest/hover treatment.

   Every button whose ground is --surface-invert gets an inverted 1px border.
   On the cream page ground the border is invisible and costs nothing; over a
   photo or a navy panel it is what makes the button read as a button. Hover
   flips the pair, white ground with navy ink AND a navy border, so the shape
   survives on a light ground as well as a dark one.

   Listed explicitly rather than applied to every --surface-invert rule: navy
   BARS and chips (.schedualHeader, .filter_hall h2, .orderRow .date,
   .newsBox .date, .footerSection3/4, .innerPageWrap h1, .categoryItem,
   .tagsWrap li, .owl-dot, the scrollbar draggers, the checkbox/radio ticks)
   are surfaces, not controls, and must not be outlined.
   --------------------------------------------------------------------------- */
#newsletterReg input[type="submit"],
#newsletterModal .close-modal-success,
#newsletterRegModal input[type="submit"],
#orderModal.personal-area-modal a.orderTicket,
#orderModal.personal-area-modal a.orderTicket.dark-btn,
.orderRow .bottons > a,
#sortForm .submitBtn,
.movieButton a,
.screeningDetailes .innerBtnWrap a.orderNow,
.moreNews a,
#confirmOpeningReg input[type="submit"],
#confirmOpeningReg_level2 input[type="submit"],
.downBtn,
.contactWrapper .inputWrap .submitBtn,
.contact_form-Entry input[type="submit"],
.contact_form-Entry button[type='submit'],
.basket-user button,
.live-show-purchase,
.movieList li .orderTicket,
.hoverElm .hpBoxTxt > a,
.promoMovieDetails .linksInnerWrapper a {
    border: 1px solid var(--ink-invert);
    transition: background .25s ease-in-out, color .25s ease-in-out, border-color .25s ease-in-out;
    -moz-transition: background .25s ease-in-out, color .25s ease-in-out, border-color .25s ease-in-out;
    -webkit-transition: background .25s ease-in-out, color .25s ease-in-out, border-color .25s ease-in-out;
}

#newsletterReg input[type="submit"]:hover,
#newsletterReg input[type="submit"]:focus,
#newsletterModal .close-modal-success:hover,
#newsletterModal .close-modal-success:focus,
#newsletterRegModal input[type="submit"]:hover,
#newsletterRegModal input[type="submit"]:focus,
#orderModal.personal-area-modal a.orderTicket:hover,
#orderModal.personal-area-modal a.orderTicket:focus,
.orderRow .bottons > a:hover,
.orderRow .bottons > a:focus,
#sortForm .submitBtn:hover,
#sortForm .submitBtn:focus,
.movieButton a:hover,
.movieButton a:focus,
.screeningDetailes .innerBtnWrap a.orderNow:hover,
.screeningDetailes .innerBtnWrap a.orderNow:focus,
.moreNews a:hover,
.moreNews a:focus,
#confirmOpeningReg input[type="submit"]:hover,
#confirmOpeningReg input[type="submit"]:focus,
#confirmOpeningReg_level2 input[type="submit"]:hover,
#confirmOpeningReg_level2 input[type="submit"]:focus,
.downBtn:hover,
.downBtn:focus,
.contactWrapper .inputWrap .submitBtn:hover,
.contactWrapper .inputWrap .submitBtn:focus,
.contact_form-Entry input[type="submit"]:hover,
.contact_form-Entry input[type="submit"]:focus,
.contact_form-Entry button[type='submit']:hover,
.contact_form-Entry button[type='submit']:focus,
.basket-user button:hover,
.basket-user button:focus,
.live-show-purchase:hover,
.live-show-purchase:focus,
.movieList li .orderTicket:hover,
.movieList li .orderTicket:focus,
.hoverElm .hpBoxTxt > a:hover,
.hoverElm .hpBoxTxt > a:focus,
.promoMovieDetails .linksInnerWrapper a:hover,
.promoMovieDetails .linksInnerWrapper a:focus {
    background: var(--surface-raised);
    color: var(--ink-on-raised);
    border-color: var(--ink-on-raised);
    text-decoration: none;
}

/* This file is include()d at the tail of na_style.css.php and ships in the same response,
   so it already inherits the :root colour tokens. Do not define :root here.
   Token values live in na_Tpl_gen.php ($sTpl['tokens']). */

@media only screen and (min-width: 480px) {
	.mobileBtn {
		display: none;
	}
}

@media only screen and (min-width: 768px) {
	.footerMenu .dropdown-menu {
		position: static;
		display: block !important;
		background: transparent;
		box-shadow: none;
		border: 0;
		width: 100%;
	}

	.footerMenu .dropdown-menu > li > a {
		padding: 0;
		color: var(--ink);
		font-size: 1.125rem;
	}

	.footerMenu .dropdown-menu > li > a:hover, .footerMenu .dropdown-menu > li > a:focus {
		background-color: transparent;
	}

	#orderModal .modal-dialog {
		width: 700px;
	}

	section.first .col-md-8 {
	padding-left: 0;
	}

	section.first .col-md-8 {
	padding-left: 0;
	}

	.fixedPos .logoWrap, .fixedPos .dates {
		line-height: 96px;
	}

	.fixedPos .topMenu {
		line-height: 96px;
		height: 96px;
	}

	.fixedPos .logoWrap a img {
		max-height: 80px;
		transition: all .25s ease-in-out;
		-moz-transition: all .25s ease-in-out;
		-webkit-transition: all .25s ease-in-out;
	}

	.fixedPos .dates:before {
		transform: skew(35deg, 0deg);
	}

	#mainMenu li:hover .dropdown-menu, #mainMenu .open .dropdown-menu, #mainMenu .openFocus .dropdown-menu {
		top: 100%;
		opacity: 1;
		transition: opacity .25s ease-in-out;
		-moz-transition: opacity .25s ease-in-out;
		-webkit-transition: opacity .25s ease-in-out;
	}

	#mainMenu .dropdown-menu {
		border: 0;
		background: var(--surface-invert);
		border-radius: 0;
		display: block !important;
		top: -9999px;
		box-shadow: 0px 10px 10px 0px rgba(var(--navy-rgb), 0.2);
		opacity: 0;
		transition: opacity .25s ease-in-out;
		-moz-transition: opacity .25s ease-in-out;
		-webkit-transition: opacity .25s ease-in-out;
		padding: 0;
	}

	#mainMenu .dropdown-menu > li > a {
		font-size: 1.438rem;
		padding: 10px 20px 10px 30px;
		/* the panel is --surface-invert; without this bootstrap's .dropdown-menu>li>a
		   colour (#333) wins and the items are unreadable on navy */
		color: var(--ink-invert);
	}

	#mainMenu .dropdown-menu > li > a:hover, #mainMenu .dropdown-menu > li > a:focus, #mainMenu .dropdown-menu > li.active > a {
		background: var(--surface-hover);
		color: var(--ink-invert);
	}

	.accessWrapper button {
		padding: 0;
		border: 0;
		background: transparent;
		height: 20px;
		display: block;
		font: initial;
	}

	#mainMenu li .dropdown-menu li .dropdown-menu {
		top: -99999px;
		opacity: 0;
	left: calc(100% + 5px);
		margin: 0;
		background: var(--surface-hover);
	}

	#mainMenu li .dropdown-menu li:hover .dropdown-menu,
	#mainMenu li .dropdown-menu li.open .dropdown-menu,
	#mainMenu li .dropdown-menu li.openFocus .dropdown-menu {
		top: 0px;
	left: calc(100% - 5px);
		margin: 0;
		background: var(--surface-hover);
		z-index: -1;
		opacity: 1;
	}

	/* the level-3 panel already sits on the lift step, so the generic item-hover
	   rule above resolves to the colour the item is on and gives no feedback.
	   Step it back down to the base navy instead. */
	#mainMenu li .dropdown-menu li .dropdown-menu > li > a:hover,
	#mainMenu li .dropdown-menu li .dropdown-menu > li > a:focus,
	#mainMenu li .dropdown-menu li .dropdown-menu > li.active > a {
		background: var(--surface-invert);
		color: var(--ink-invert);
	}

	#mainMenu li .dropdown-menu li.dropdown:hover > a,
	#mainMenu li .dropdown-menu li.dropdown.open > a,
	#mainMenu li .dropdown-menu li.dropdown.openFocus > a {
		/* nests on the navy panel, so it takes the lift step — not --surface-raised,
		   which would be white text on a white ground */
		background: var(--surface-hover);
		color: var(--ink-invert);
	}

	#mainMenu li .dropdown-menu li.dropdown:hover,
	#mainMenu li .dropdown-menu li.dropdown.open,
	#mainMenu li .dropdown-menu li.dropdown.openFocus {
		width: calc(100% + 10px);
	}

	#mainMenu li .dropdown-menu li.dropdown > a:after {
		content: "\00bb";
		position: absolute;
		top: 0px;
	right: 10px;
		color: var(--ink-invert);
		font-size: 32px
	}

	/* Figma 2504:933 — the open/active nav item is the base navy, matching the
	   panel it opens. --surface-hover is the lift step and belongs to the
	   dropdown items, not to the tab above them. */
	.nav li:hover > a, .openFocus > a, .nav .open > a, .nav .open > a:hover, .nav .open > a:focus, .nav > li > a:hover, .nav > li > a:focus {
		background: var(--surface-invert);
		color: var(--ink-invert);
	}

	.schedualDaysWrap {
		margin-top: 22px;
	}

	body {
		padding-top: 190px;
	}
}

@media only screen and (min-width: 991px) {
	body {
		padding-top: 190px;
	}
}

@media only screen and (min-width: 1200px) {
	.schedualDaysWrap {
		margin-top: -40px;
	}

	body {
		padding-top: 232px;
	}
}

/*  */
@media only screen and (max-width: 1600px) {
	#movieDate, #movieDirector, #movieCountry, .submitBtn {
		width: 100%;
		margin: 0 !important;
		margin-top: 10px !important;
	}

	#movieName, #movieCat {
		margin: 0;
	}
}

@media only screen and (max-width: 1500px) {
	.nav > li > a {
		padding: 15px 20px !important;
	}

	.promoteMovie .col-xl-4 {
		width: 30%;
	}

	.promoteMovie .col-xl-8 {
		width: 70%;
	left: 30%;
	}

	.promoteMovie .owl-prev {
	left: 35%;
	}

	.promoMovieDetails h2 {
		margin: 0 0 10px;
	}

	.promoMovieDetails .moreTxt .scrollerClass {
		height: 180px;
	}

	.promoMovieDetails .linksInnerWrapper a {
		font-size: 1.1rem;
	}

	h3.hpBoxHeader {
		width: 100% !important
	}

	.hoverElm .hpBoxTxt > a {
		font-size: 1rem;
	}
}

@media only screen and (min-width: 1200px) and (max-width: 1600px) {
	.schedualHeader h1 {
		padding: 17px 15px;
		font-size: 2rem;
	}

	.weekDays ul li {
		width: 60px;
		height: 60px;
	}

	.weekDays ul li + li {
	margin-left: 5px;
	}

	.weekDays {
		width: 61.5%;
	}

	#sortSchedual label {
		display: none;
	}

	.schedualHeader h1 {
		width: calc(100% - 200px);
	}

	.schedualHeader .sortSchedual {
		width: 200px;
	}

	#sortSchedual select {
		width: 100%;
	}
}

@media only screen and (max-width: 1300px) {
	.footerSection1 .container {
	padding-right: 40px;
	padding-left: 40px;
	}

	.footerSection3 .container {
	padding-right: 40px;
	padding-left: 40px;
	}
}

@media only screen and (max-width: 1200px) {
	.nav > li > a {
		padding: 15px 20px !important;
		font-size: 1.3rem;
	}

	.headerBtn {
		font-size: 1.2rem;
	}

	#mainMenu .dropdown-menu > li > a {
		font-size: 1.2rem;
	}

	.logoWrap, .dates {
		line-height: 140px;
	}

	.topMenu {
		line-height: 140px;
		height: 140px;
	}

	.dates {
		font-size: 2.5rem;
	}

	.dates:before {
		transform: skew(30deg, 0deg);
	}

	.promoteMovie .col-xl-4 {
		width: 35%;
	}

	.promoteMovie .col-xl-8 {
		width: 65%;
	left: 35%;
	}

	.promoteMovie .owl-prev {
	left: 40%;
	}

	.promoMovieDetails {
		padding: 10px;
	}

	.promoMovieDetails h2, .promoMovieDetails .director, .promoMovieDetails .moreInfo {
	padding-left: 20px;
	}

	.promoMovieDetails .linksInnerWrapper {
		bottom: 20px;
	left: 20px;
		width: calc(100% - 40px);
	}

	.promoMovieDetails .moreTxt .scrollerClass {
		height: 160px;
	}

	.footerBg {
	right: - 8%;
	}

	.footerSection3 .logosCatousel a img {
		width: 80%;
		margin: 0 auto;
	}

	#movieName, #movieDirector {
		margin-bottom: 0;
	}

	#sortForm .inputsGroup {
	padding-right: 5px;
	}

	/*#sortForm .inputsGroup + .inputsGroup{padding-









































: 5px;}*/
	.sortCategory h2 {
		margin: 22px 0;
	}

	.movieDetails li span {
		width: calc(100% - 160px);
	}

	.movieHeader {
		bottom: 30px;
	}

	.quote blockquote {
		font-size: 1.7rem;
	}

	.weekDays {
		direction: ltr;
		position: absolute;
		top: 100%;
	right: auto;
	left: 0;
		width: 100%;
		transform: translate(0%, 0%);
		background: var(--surface-page);
		text-align: center;
		z-index: 1;
	}

	.newsItem .col-lg-9 p {
		font-size: 1.09rem;
	}

	.schedualHeader {
		margin: 0;
		width: 100%;
	}

	.weekDays ul li:before {
		content: initial;
	}

	.weekDays ul li + li {
		margin: 0;
	}

	.weekDays ul {
		display: table;
		min-width: 100%;
	}

	.weekDays ul li {
		border: 1px solid var(--hairline);
		display: table-cell;
	}

	.m_calendar.fixedPos .schedualHeaderWrap {
		padding: 0 15px;
		height: 125px;
		background: var(--surface-page);
	}

}

@media only screen and (min-width: 993px) and (max-width: 1199px) {
	.sideToTop {
		margin-top: 17px;
	}

	.rotatorTxt {
	padding-left: 15px;
	}

	.rotatorTxt h2 {
		font-size: 2.5rem;
	}
}

@media only screen and (max-width: 992px) {
	.headerBtn {
		padding: 03px;
		font-size: 0.9rem;
	}

	.nav > li > a {
		padding: 15px 8px !important;
		font-size: 1.2rem;
	}

	.sideToTop {
		margin-top: 15px;
	}

	.first .sideToTop {
		padding: 0 15px;
	}

	.wrapperBiggerSide {
		margin-top: 0;
	}

	.wrapperBiggerSide {
		padding: 0 15px;
	}

	.rotatorTxt h2 {
		font-size: 1.7rem;
	}

	.rotatorTxt p {
		font-size: 1.1rem;
	}

	.newsletterWrapper {
		padding: 0;
		margin: 10px 0;
	}

	#newsletterReg {
		margin-top: 10px;
	}

	.promoMovieDetails {
		display: none;
	}

	.promoteMovie .col-xl-8 {
		width: 100%;
	left: 0;
	}

	.promoteMovie .owl-prev {
	left: 5%;
	}

	.headerWrapper {
	left: 15px;
	}

	.promoMovieVideo h3 {
		margin: 0 0 15px;
	}

	.footerMenu > li:first-child {
		width: 50%;
		margin-bottom: 25px;
	}

	.footerMenu li:not(.appLink), .footerMenu li:not(:first-child) {
		width: 25%;
	}

	.promoMovieVideo h2 {
		font-size: 2rem;
		margin: 0 0 5px;
	}

	/* Below 767px .promoMovieDetails is hidden and this is the only title left,
	   but it is still inside .headerWrapper at the foot of the slide, on the
	   opaque navy end of the .owl-item:after gradient. It set --ink-accent
	   explicitly, so it overrode the white inherited from .headerWrapper. */
	.promoMovieVideo h2 a, .promoMovieVideo h2 a:hover, .promoMovieVideo h2 a:focus {
		color: var(--ink-invert);
		text-decoration: none;
	}

	/*.second>.container .col-xs-12{padding:0;}*/
	/*.sideBanner{width: calc(50% - 10px);float:









































;margin-









































:10px;margin-top: 20px;margin-bottom: 20px;}
    .sideBanner + .sideBanner{margin-









































:0px;margin-









































: 10px;}*/
	.mobileLocationWrap > .row, .hpItemsWrap > .row {
		margin: 0 -5px;
	}

	.mobileLocationWrap > .row > a, .hpItemsWrap > .row > a {
		width: 50%;
		padding: 0 5px;
		float: left;
	}

	.searchMovie {
		float: left;
		width: 100%;
	}

	.breadcrumb {
		padding: 20px 0;
	}

	/*.innerPageWrap h1{









































: 0;top: 0;transform: translate(0%, -50%);}*/
	.innerPageWrap {
		margin-top: 35px;
		margin-bottom: 0px;
	}

	.sortCategory {
		padding-top: 15px;
	}

	.directorInfo img {
		width: 50%;
		margin-bottom: 15px;
	}

	.newsWrapper h3 {
		margin: 10px 0;
	}

	.screeningDetailes:last-child {
		border-bottom: 0;
	}

	.screeningDetailes .hoverBtn {
		position: static;
		opacity: 1;
		box-shadow: none;
		width: 100%;
		height: 24px;
		background: transparent;
	}

	.screeningDetailes .innerBtnWrap {
		position: static;
		padding: 0;
	}
}

@media only screen and (max-width: 767px) {
	.lego-col iframe {
		width: 100%;
		height: auto;
	}

	section.first .col-md-7 .row {
		margin: 0;
	}

	body, html {
		font-size: 12px;
	}

	.logoWrap, .dates {
		line-height: 100px;
	}

	.dates {
		font-size: 1.5rem;
		text-indent: 35px;
	}

	.logoWrap a img {
		max-height: 75px;
	}

	.dates:after {
		transform: skew(-5deg, 0deg);
	left: 95%;
	}

	.topMenu {
		padding: 0px 10px 0;
		text-align: right;
		font-size: 1.375rem;
		line-height: 100px;
		height: 100px;
	}

	.mobilePhoneLink {
		width: 52%;
		line-height: 17px;
		display: inline-block !important;
		vertical-align: middle;
	}

	.footerSection3 .container {
		width: auto;
	}

	.footerSection3 ul li {
		width: 100%;
		margin: 0;
	}

	/* was an <img> (mobileCall.png); now the #icon-call symbol, which carries its
	   own fill="var(--accent-focus)" — do not set fill here, the symbol's own
	   attribute wins over an inherited one and the orange is deliberate.
	   Needs an explicit height: the symbol's viewBox is square (0 0 58 58). */
	.mobilePhoneLink svg {
		width: 15px;
		height: 15px;
		display: block;
		margin: 0 auto 5px;
	}

	.mobilePhoneLink span {
		display: block;
		text-align: center;
	}

	.mobilePhoneLink a {
		display: block;
		color: var(--ink-accent);
		font-weight: bold;
	}

	.bottomHeader .row {
		margin-block-start: 10px;
	}

	.navbar-toggle {
		float: left;
		padding: 9px 0;
		margin: 3px 0;
	margin-right: 10px;
	}

	.navbar-default .navbar-toggle:hover,
	.navbar-default .navbar-toggle:focus {
		background-color: transparent;
	}

	/* open state — the lift step, so the toggle reads as active */
	.navbar-toggle .icon-bar,
	.navbar-default .navbar-toggle .icon-bar {
		background: var(--surface-hover);
		transition: background .25s ease-in-out;
		-moz-transition: background .25s ease-in-out;
		-webkit-transition: background .25s ease-in-out;
	}

	/* closed state (bootstrap adds .collapsed when the menu is shut). This was
	   --surface-raised, i.e. white bars on the cream header — invisible. */
	.navbar-toggle.collapsed .icon-bar,
	.navbar-default .navbar-toggle.collapsed .icon-bar {
		background: var(--surface-invert);
		transition: background .25s ease-in-out;
		-moz-transition: background .25s ease-in-out;
		-webkit-transition: background .25s ease-in-out;
	}

	.menuSpan {
		float: left;
		line-height: 31px;
		margin: 3px 0;
		font-size: 1.4rem;
		font-weight: bold;
	}

	.innerMainBanner .container {
		padding: 0;
	}

	.rotatorTxt p {
		font-size: 1.2rem;
	}

	.rotatorTxt h2 {
		margin: 0 0 5px;
		font-size: 2rem;
	}

	section.first .col-md-8 {
		padding: 0;
	}

	h3.hpBoxHeader {
		width: 100% !important;
		font-size: 1.2rem;
		padding: 12px;
	}

	h3.hpBoxHeader a:after {
		line-height: 15px;
		font-size: 24px;
	}

	.newsBox .date .day {
		margin-bottom: 5px;
		font-size: 2.338rem;
		line-height: 2.338rem;
	}

	.newsBox .date {
		padding: 5px;
		width: 55px;
		height: 55px;
	}

	section.first {
		background: transparent;
		padding: 0;
	}

	.hpItemsWrap {
		float: left;
		padding: 0 15px;
		width: 100%
	}

	.innerPageWrap + .hpItemsWrap {
		padding: 0;
	}

	section.first .col-md-8 .row {
		margin: 0;
	}

	.hpBoxItem {
		padding: 1px;
	}

	.hpBoxItem:before {
		width: calc(100% - 2px);
		top: 1px;
	left: 1px;
	}

	.hpBoxItem:after {
		width: calc(100% - 2px);
		height: calc(100% - 2px);
		bottom: 1px;
	left: 1px;
	}

	.hpBoxItem > h3.hpBoxHeader, .hoverElm {
		width: calc(100% - 2px);
	left: 1px;
	}

	.headerWrapper {
	left: 15px;
	right: 15px;
	}

	.promoMovieVideo h3 {
		margin-bottom: 10px;
		font-size: 1.313rem;
	}

	section.second {
		padding: 10px 0 20px;
	}

	.footerSection3 {
		padding: 18px 0;
	}

	footer .owl-carousel .owl-item img {
		max-width: 80%;
		margin: 0 auto;
	}

	footer .footerSection1 .owl-carousel .owl-item img {
		max-width: 100%;
	}

	.footerBg {
		height: 100px;
	}

	.newsBox + .newsBox {
		margin-top: 10px;
	}

	.innerFooterSection2 {
		padding: 0;
	}

	.footerMenu li:first-child h3 a:after {
		content: initial;
		display: none;
	}

	/* The accordion heading sits on a --surface-invert bar (see the rule below), so its ink has to
	   be inverted in every state. The :hover and :focus selectors are listed explicitly because the
	   desktop rules .footerMenu li h3 a:hover / .footerMenu li.appLink a:hover in na_style.css.php
	   are more specific than the base selector here and would otherwise repaint the text --ink,
	   which is now the same navy as the bar. */
	.footerMenu li:not(.appLink) h3,
	.footerMenu li:not(.appLink) h3 a,
	.footerMenu li:not(.appLink) h3 span,
	.footerMenu li:not(.appLink) h3 a:hover,
	.footerMenu li:not(.appLink) h3 a:focus,
	.footerMenu li:not(.appLink) h3 a:active,
	.footerMenu li:not(.appLink) h3 span:hover,
	.footerMenu li:not(.appLink) h3 span:focus,
	.footerMenu li:not(.appLink).active h3,
	.footerMenu li:not(.appLink).active h3 a,
	.footerMenu li:not(.appLink).active h3 a:hover,
	.footerMenu li:not(.appLink).active h3 a:focus {
		color: var(--ink-invert);
	}

	/* The chevron is a "\00bb" pseudo element with no colour of its own, so it inherits from the
	   span above. Stated explicitly so a future ink change on the span cannot leave it navy on navy. */
	.footerMenu li:not(.appLink) h3 span:after,
	.footerMenu li:not(.appLink) h3 span:hover:after,
	.footerMenu li:not(.appLink).active h3 span:after {
		color: var(--ink-invert);
	}

	/*.footerMenu>li:first-child{width: 70%!important;margin-bottom: 10px;}*/
	.footerMenu li {
		width: 100% !important;
		float: left;
	}

	.footerMenu li:not(.appLink) {
		background: var(--surface-invert);
		padding: 0px;
	}

	/* .footerMenu>li:first-child{background: transparent;}*/
	.footerMenu > li:first-child {
		margin: 0;
	}

	.footerMenu > li:not(.appLink) + li:not(.appLink) {
		/* --surface-hover is the same navy as the bar since the palette flip, so the row
		   separators had vanished; --hairline-invert is the divider for navy grounds */
		border-top: 1px solid var(--hairline-invert);
	}

	.footerMenu li:not(.appLink) h3 span {;
		position: absolute;
		top: 0;
	right: 0px;
		padding: 0 10px;
	}

	.footerMenu li:not(.appLink) h3 span:after {
		content: "\00bb";
		font-size: 30px;
		line-height: 37px;
		direction: ltr;
		font-weight: 300;
	}

	.footerMenu li:not(.appLink).active h3 span {
		-ms-transform: rotate(-90deg);
		-webkit-transform: rotate(-90deg);
		transform: rotate(-90deg);
		color: var(--ink-invert);
	}

	.footerMenu li h3 a {
		padding: 10px;
		display: block;
		width: calc(100% - 37px);
	}

	.footerMenu li.active h3 a {
		color: var(--ink-invert);
	}

	.footerMenu li .dropdown-menu {
		position: static;
		width: 100%;
		border-radius: 0;
		border: 0;
		background: var(--surface-hover) url("../images/patternBg.png") right top repeat;
		padding: 0;
		margin: 0;
	}

	.footerMenu li .dropdown-menu > li > a {
		color: var(--ink-invert);
		padding: 3px 10px;
	}

	.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
		background-color: transparent;
	}

	.contactDetailes {
		padding: 15px 0;
		float: left;
		width: 100%;
	}

	.contactDetailes li {
		background: var(--surface-invert);
		text-align: center;
		padding: 10px;
	}

	.contactDetailes li h3,
	.contactDetailes li a,
	.contactDetailes li a:hover,
	.contactDetailes li a:focus {
		color: var(--ink-invert);
	}

	.contactDetailes li:first-child {
		width: calc(50% - 7px);
		float: left;
	}

	.contactDetailes li + li {
		width: calc(50% - 7px);
		float: right;
		margin: 0;
		direction: ltr;
	}

	.footerSection2 {
		background: transparent;
	}

	.contactDetailes li h3 {
		font-size: 1.4rem;
	}

	.footerSection4 .tycoLogo {
		display: block;
		margin: 0 0 5px;
	}

	.footerSection4 .tycoLogo span {
		display: none;
	}

	.bottomHeader .navbar-collapse {
		position: fixed;
		top: 110px;
		border-top: 0;
	left: -65%;
		z-index: 999;
		background: var(--surface-page);
		background-image: url("../images/patternBg.png");
		background-position: right 50px;
		background-repeat: repeat;
		width: 65%;
		height: 100% !important;
		display: block;
		transition: left .25s ease-in-out;
		-moz-transition: left .25s ease-in-out;
		-webkit-transition: left .25s ease-in-out;
	}

	.bottomHeader .navbar-collapse.in {
	left: 0%;
		transition: left .25s ease-in-out;
		-moz-transition: left .25s ease-in-out;
		-webkit-transition: left .25s ease-in-out;
	}

	.bottomHeader .navbar-collapse .navbar-nav {
		margin: 0;
		height: calc(100% - 58px);
		background: url('https://www.haifaff.co.il/images/mobileMenuBg_eng.png?120926') right top no-repeat;
		background-size: contain;
	}

	.headerBtn {
		font-size: 1.4rem;
		padding: 0 10px;
		display: block;
		float: none;
		width: 100%;
		margin: 0;
		padding: 0 15px !important;
		line-height: 38px;
		background: var(--surface-invert);
		color: var(--ink-invert);
		font-weight: bold;
	}

	#mainMenu .mobileRegLink {
		padding: 10px;
		background: var(--surface-invert);
	}

	#mainMenu .nav > li {
		border-bottom: 2px solid var(--hairline);
		float: left;
		width: 100%;
	}

	#mainMenu .nav > li > a {
		color: var(--ink-accent);
		font-size: 1.5rem;
		width: calc(100% - 50px);
		float: left;
	}

	#mainMenu .nav > li.dropdown .mobileArr {
		position: absolute;
	right: 0px;
		top: 0px;
		width: 50px;
		height: 50px;
		text-align: center;
		z-index: 99;
	}

	#mainMenu .nav > li.dropdown .dropdown-menu .mobileArr {
		width: 50px;
		height: 30px;
		text-align: center;
		z-index: 99;
	}

	#mainMenu .nav > li.dropdown:first-child .mobileArr {
		top: 2px;
	}

	#mainMenu .nav > li.dropdown.openLi > .mobileArr, #mainMenu .nav > li.dropdown.openLi > a {
		background: var(--surface-invert) !important;
		color: var(--ink-invert) !important;
	}

	.navbar-nav .openLi > .dropdown-menu {
		position: static;
		width: 100%;
		float: left;
		margin-top: 0;
		background-color: transparent;
		border: 0;
		-webkit-box-shadow: none;
		box-shadow: none;
		display: block;
	}

	#mainMenu .nav > li.dropdown .mobileArr:after {
		content: ">";
		/* cream drawer ground; the .openLi state below paints a navy chip and
		   re-inverts it there */
		color: var(--ink);
		font-size: 20px;
		line-height: 50px;
		display: block;
		-ms-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	#mainMenu .nav > li.dropdown .dropdown-menu .mobileArr:after {
		line-height: 25px;
	}

	#mainMenu .nav > li.dropdown.openLi > .mobileArr:after {
		-ms-transform: rotate(90deg);
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
	}

	#mainMenu .nav > li:first-child {
		border-top: 1px solid var(--hairline);
	}

	#mainMenu .nav > li:first-child > a {
		border-top: 2px solid var(--hairline);
	}

	.dropdown-menu > li > a {
		white-space: normal;
	}

	.mobilerightHeader {
		padding: 0;
		position: static;
	}

	.accessWrapper {
		width: 40px;
		height: 40px;
		float: left;
	}

	.accessWrapper button {
		background: transparent;
		border: 0;
		width: 100%;
		height: 100%;
	}

	/* sits in .mobileLeftHeader on header .upperHeader, which is --surface-page
	   now; it was --ink-invert from when that bar was #4f4f4f */
	.accessWrapper .icon-access {
		fill: var(--ink);
		width: 15px;
		height: 40px;
	}

	.langugeWrap a {
		width: 40px;
		height: 40px;
		float: left;
		line-height: 40px;
		text-align: center;
		background: var(--surface-invert);
		color: var(--ink-invert);
		font-size: 1.5rem;
	}

	.mobileSearchWrap {
		width: calc(100% - 80px);
		float: left;
		height: 40px;
	}

	.mobileSearchWrap > a {
		display: block;
		background: var(--surface-invert) url("../images/searchBtn_3.png") right 5px center no-repeat;
		background-size: 17px 17px;
		line-height: 40px;
		color: var(--ink-invert);
		font-size: 1.4rem;
		padding: 0 10px;
	}

	.mobileSearchWrap.active > a {
		background: var(--surface-invert) url("../images/searchBtn_3.png") right 5px center no-repeat;
		background-size: 17px 17px;
	}

	.mobileSearchWrap > a:hover, .mobileSearchWrap > a:focus {
		color: var(--ink-invert);
		text-decoration: none;
	}

	.headerSearch:after, .headerSearch:before {
		bottom: calc(100% - 2px);
	right: 60%;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
	}

	.headerSearch:after {
		border-color: rgba(var(--surface-page-rgb), 0);
		border-bottom-color: var(--surface-raised);
		border-width: 10px;
	margin-right: -10px;
	}

	.headerSearch:before {
		border-color: rgba(var(--surface-page-rgb), 0);
		border-bottom-color: var(--surface-raised);
		border-width: 12px;
	margin-right: -12px;
	}

	header .upperHeader {
		background: var(--surface-page);
	}

	.headerSearch {
		position: absolute;
		right: 50%;
		width: calc(100% - 30px);
		top: -9999px;
		z-index: 999;
		transform: translate(50%, 0%);
		background: var(--surface-raised);
		opacity: 0;
		transition: opacity .25s ease-in-out;
		-moz-transition: opacity .25s ease-in-out;
		-webkit-transition: opacity .25s ease-in-out;
	}

	.active .headerSearch {
		top: 155px;
		opacity: 1;
		transition: opacity .25s ease-in-out;
		-moz-transition: opacity .25s ease-in-out;
		-webkit-transition: opacity .25s ease-in-out;
	}

	.footerBg {
		height: 150px;
	right: 0;
	}

	section.first .col-lg-8 {
		padding: 0;
	}

	/* the drawer submenu panel is transparent over the cream drawer, so these
	   items sit on --surface-page, not on a navy panel */
	#mainMenu .dropdown-menu > li > a {
		color: var(--ink);
		padding: 7px 10px !important;
	}

	#mainMenu .dropdown-menu > li > a.dropdown-toggle {
		width: calc(100% - 50px);
	}

	.nav > li > a:hover, .nav > li > a:focus, .nav li:hover > a {
		background: transparent !important;
	}

	header {
		position: relative;
		z-index: 999;
	}

	body:after {
		content: "";
		position: fixed;
		width: 35%;
		height: 100%;
		background: rgba(var(--navy-rgb), 0.5);
		top: 0;
	right: -35%;
		z-index: 1;
		transition: right .25s ease-in-out;
		-moz-transition: right .25s ease-in-out;
		-webkit-transition: right .25s ease-in-out;
	}

	body.open_menu:after {
	right: 0%;
		transition: right .25s ease-in-out;
		-moz-transition: right .25s ease-in-out;
		-webkit-transition: right .25s ease-in-out;
	}

	.modal-dialog {
		width: 94%;
	}

	#orderModal .modal-body .orderRow .bottons {
		width: 100%;
		padding-top: 0 !important;
	}

	#orderModal .modal-body .orderRow .bottons > a, .addtocalendar {
		width: calc(50% - 5px);
		font-size: 1.2rem;
		text-align: center;
		padding: 0 5px;
	}

	.bottomHeader .navbar-collapse {
		top: 140px;
	}

	#orderModal .modal-body .orderRow .date {
		margin: 18px 0;
	}

	.mobilerightHeader {
		padding: 0;
	}

	.mobilerightHeader {
		padding: 0;
		position: static;
	}

	.movieHeader h1 {
		font-size: 2rem;
	}

	.movieBannerCont {
		padding: 0;
	}

	.quote blockquote {
		font-size: 1.7rem;
		width: 100%;
	}

	.quote {
		margin: 15px 0 0px;
	}

	.movieInfo {
		margin: 0 0 15px;
	}

	h1 {
		font-size: 2.5rem !important;
	}

	.innerPageWrap.defBg {
		padding: 0px 15px 20px;
	}

	.innerPageWrap.defBg .shareWrap {
		padding: 0;
	}

	.wrapper_404 .searchMovie {
		width: 60%;
	}

	.schedualHeaderWrap .container {
		padding: 0;
	}

	.schedualHeader h1 {
		padding: 14px 15px;
	}

	.schedualWrapper {
		padding: 0;
		margin-top: 80px;
	}

	.schedualDaysWrap {
		margin-top: 0px;
		padding: 0;
		background: none;
	}

	.m_calendar.fixedPos .schedualWrapper {
		margin-top: 78px;
	}

	.schedualSection {
		padding: 15px 0px;
	}

	.schedualSection h1 {
		display: none;
	}


	.schedualSection:not(.active) {
		display: none;
	}

	.screeningHall {
		padding: 0;
		margin-bottom: 15px;
		background: var(--surface-raised);
	}

	.schedualSection .row {
		margin: 0;
	}

	.screeningDetailes {
		margin: 0 10px;
		padding-bottom: 10px;
	}

	body:not(.m_hp) .sideToTop .searchMovie {
		display: none;
	}

	#showtimeHeader {
		margin-bottom: 0;
		line-height: 21px;
	}

	#showtimeHeader:after {
		content: "\00bb";
		position: absolute;
		font-size: 35px;
		line-height: 18px;
	margin-left: 5px;
		direction: ltr;
	right: 15px;
	}

	#showtimeItems {
		float: left;
		height: 0;
		overflow: hidden;
		opacity: 0;
		transition: opacity .25s ease-in-out;
		-moz-transition: opacity .25s ease-in-out;
		-webkit-transition: opacity .25s ease-in-out;
	}

	#showtimeItems.open {
		margin-top: 15px;
		height: auto;
		opacity: 1;
		transition: opacity .25s ease-in-out;
		-moz-transition: opacity .25s ease-in-out;
		-webkit-transition: opacity .25s ease-in-out;
	}

	.newsWrapper .mobileScroller {
		height: 185px;
		direction: ltr;
	}

	/*.newsWrapper .mobileScroller .mCustomScrollBox{padding-









































left: 25px;}*/
	#confirmOpeningReg_level2 .row > div.pull-right {
		width: 100%;
	}

	.screeningDetailes, .screeningDetailes .notes {
		font-size: 1.1rem;
	}

	.m_calendar.fixedPos .schedualHeaderWrap {
		top: 140px;
	}

	.m_calendar.fixedPos .schedualHeaderWrap {
		padding: 0;
	}

	.footerMenu li.appLink a:after, .footerMenu li:first-child a:after {
		line-height: 19px;
	}

	header {
		position: fixed;
		width: 100%;
		top: 0;
	left: 0;
		z-index: 9999;
	}

	.wrapper {
		padding-top: 140px;
	}

	.newsWrapper h3:after, .newsletterWrapper h3:after {
		line-height: 20px;
	}

	.mCSB_horizontal.mCSB_inside > .mCSB_container {
		margin-bottom: 15px !important;
	}

	.mobileLeftHeader {
		position: static;
	}

	#contact_us {
		width: 100%;
	}

	.second .col-xs-12 {
		padding: 0;
	}

	.contact_form-Entry input[type="submit"] {
		width: 100%;
	}

	.col-xs-12 span {
		width: 100%;
	}

	.duplicateable .duplicate_btn, .toNextSection {
		margin-top: 0;
		line-height: normal;
		height: auto;
		font-size: 1.5rem !important;
	}

	.tiny_label, .count_label {
		width: auto !important;
		font-size: 1.3rem !important;
	}

	.transparent {
		display: none;
	}

	#registrationForm {
		font-size: 1.2em;
	}

	.contact_form-Entry p {
		font-size: 1.3rem;
	}

	#registrationForm .inputWrap {
		margin-bottom: 15px;
	}

	#registrationForm .g-recaptcha {
		width: 100%;
		-webkit-transform: scale(.82);
		transform: scale(.82);
		-webkit-transform-origin: 100% 0;
		transform-origin: 100% 0;
	}

	#registrationForm button[type='submit'] {
		float: left	}

	* {
		outline: none;
	}

	.dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover {
		background-color: rgba(var(--navy-rgb), 0.5);
	}

	.mobileBtn {
		display: block;
		float: right;
		width: 30px;
		height: 30px;
		text-align: center;
		line-height: 30px;
		font-size: 38px;
		color: var(--ink-accent);
		cursor: pointer;
		-ms-transform: rotate(-90deg);
		-webkit-transform: rotate(-90deg);
		transform: rotate(-90deg);
	}

	.sortCategory.open {
		height: 168px;
		transition: all .25s ease-in-out;
		-moz-transition: all .25s ease-in-out;
		-webkit-transition: all .25s ease-in-out;
	}

	.sortCategory {
		cursor: pointer;
	}

	.sortCategory .col-xs-1 {
		width: 100%;
		padding: 0;
	}

	.sortCategory h2 {
		margin: 0 0 10px;
		background-position: left center;
		background-size: 20px 20px;
		display: inline-block;
		padding-top: 0;
		line-height: 30px;
	padding-left: 30px;
	}

	#sortForm {
		width: 100%;
		padding: 0;
	}

	.sortCategory {
		padding-top: 0px;
		height: 35px;
		overflow: hidden;
		transition: all .25s ease-in-out;
		-moz-transition: all .25s ease-in-out;
		-webkit-transition: all .25s ease-in-out;
	}

	.header-basket {
		display: inline-block !important;
		margin: 6px;
		vertical-align: top;
		float: left;
	}

	.mobileSearchWrap {
		display: inline-block !important;
		width: auto !important;
	}

	.mobileSearchWrap > a,
	.mobileSearchWrap > a:active,
	.mobileSearchWrap > a:hover {
		line-height: 0;
		font-size: 0;
		color: transparent;
		width: 26px;
		height: 32px;
		padding: 21px;
		margin: 0;
		background-position: center center !important;
	}

	.langugeWrap {
		display: inline-block !important;
		float: left;
	}

	.accessWrapper {
		float: left;
	}

	.eventsLego img {
		max-width: 100%;
		height: auto;
	}

	.footerBg {
		top: auto;
		bottom: 0;
	}

	.movie-carousel-container {
		position: relative;
	}

	.eventTagMobile {
		position: absolute;
		left: 27px;
		bottom: 10px;
		background: var(--surface-band);
		color: var(--ink);
		z-index: 2;
		padding: 10px 15px;
	}
}

@media only screen and (max-width: 599px) {
	.mobileLocationWrap > .row > a, .hpItemsWrap > .row > a {
		width: 100%;
		padding: 0 5px;
		float: left;
	}

	.dates:after {
	left: 85%;
	}

	.dates {
		text-indent: 10px;
	}

	#orderModal .modal-dialog, #regForOpening .modal-dialog {
		width: 450px;
	}

	.categoryWrapper > .col-xs-4 {
		width: 50%;
	}

	#sortForm .inputsGroup {
		width: 100%;
		padding: 0 !important;
	}

	/*#sortForm .inputsGroup + .inputsGroup{padding-top: 10px!important;}*/
	#movieCat {
		margin-top: 10px;
	}

	/*.weekDays{overflow: hidden;}*/
	#sortSchedual label {
		display: none;
	}

	/*.weekDays ul{display: block;width: auto;}
	.weekDays ul li{float:









































left;display: inline-block;}*/
	.schedualHeader .sortSchedual {
		width: 200px;
	}

	.schedualHeader h1 {
		width: calc(100% - 200px);
	}

	#sortSchedual select {
		width: 100%;
	}

	.downBtn {
		font-size: 1rem;
	}

	.sortCategory.open {
		height: 320px;
	}
}

@media only screen and (max-width: 479px) {
	body, html {
		font-size: 10px;
	}

	.newsWrapper h3:after, .newsletterWrapper h3:after {
		font-size: 35px;
		line-height: 18px;
	margin-left: 5px;
	}

	.logoWrap, .dates {
		line-height: 70px;
	}

	.logoWrap a {
	padding-right: 0px;
	}

	.dates {
		font-size: 1.55rem;
	margin-left: -15px;
	}

	.topMenu {
		padding: 0px 7px 0;
		/* margin-<align> here was margin-right in RTL — the same physical side
		   that margin-inline-start: auto maps to — so it cancelled the auto
		   margin that positions this column. Positioning is the auto margin's
		   job now. */
		line-height: 70px;
		height: 70px;
	}

	#newsletterReg input[type="email"] {
		width: 100%;
	}

	.active .headerSearch {
		top: 125px;
	}

	.dates:after {
	left: 75%;
		transform: skew(-15deg, 0deg);
	}

	.dates {
		text-indent: -5px;
	}

	.mobilePhoneLink {
		width: 95%;
	}

	h3.hpBoxHeader {
		font-size: 1.4rem;
		padding: 7px;
	}

	.hoverElm .hpBoxTxt {
		padding: 0 7px 7px;
	}

	.hoverElm .hpBoxTxt > a + a {
	margin-left: 7px;
	}

	.hoverElm .hpBoxTxt > a {
		width: calc(50% - 3.5px);
		padding: 10px 3px;
		font-size: 0.82rem;
	}

	/* .hpBoxItem{width: 100%;padding:0;margin-bottom: 2px;}
	.hpBoxItem:before{width: 100%;top: 0px;









































left: 0px;}
	.hpBoxItem>h3.hpBoxHeader, .hoverElm{width: 100%;









































left: 0px;}
	.hpBoxItem:after{    bottom: 0px;









































left: 0px;    width: 100%;} */
	.playBtn {
		width: 70px;
		height: 70px;
		top: calc(50% - 37px);
	left: calc(50% - 37px);
	}

	#orderModal .modal-body, #regForOpening .modal-body {
		padding: 10px;
	}

	#orderModal .modal-body .orderRow .date {
		width: 60px;
	}

	#orderModal .modal-body .orderRow .mobileWrap {
		width: calc(100% - 64px);
	}

	#orderModal .modal-body .orderRow .bottons a {
		font-size: 1rem;
	}

	#orderModal .modal-body .orderRow + .orderRow {
		margin-top: 10px;
	}

	#orderModal .modal-body .orderRow .bottons a i {
		display: none;
	}

	#orderModal .modal-dialog, #regForOpening .modal-dialog {
		width: 90%;
	}

	#orderModal .modal-header .close, #regForOpeningl .modal-header .close {
		width: 25px;
		height: 25px;
		top: -9px;
	right: - 9px;
		font-size: 32px;
		line-height: 7px;
	}

	#orderModal .modal-body .orderRow .date,
	#orderModal .modal-body .orderRow .mobileWrap > div {
		padding: 10px;
	}

	#orderModal .modal-body .orderRow .day {
		width: 55px;
	}

	#orderModal .modal-body .orderRow .hour {
		width: 45px;
	}

	.hoverElm p {
		display: none;
	}

	.bottomHeader .navbar-collapse {
		top: 110px;
	}

	.sideBanner {
		width: 100%;
		margin: 10px 0 !important;
	}

	.contactDetailes li {
		padding: 10px 5px;
	}

	.categoryWrapper {
		padding: 20px 0px 0;
	}

	.movieHeader {
		position: static;
	}

	/* Once the header is static it leaves the scrimmed carousel image and sits on the
	   cream page ground, so the white --ink-invert it inherits from the desktop rule
	   would be invisible. Put the title back on navy ink for this breakpoint only. */
	.movieHeader h1 {
		padding: 0 15px;
		margin-top: 10px;
		line-height: 27px;
		color: var(--ink-accent);
	}

	.movieHeader h2 {
		padding: 0 15px;
		margin-bottom: 10px;
		color: var(--ink-accent);
	}

	.movieHeader h2 a {
		color: var(--ink-accent);
	}

	.movieButton {
		position: relative;
		margin-bottom: 30px;
	}

	.movieDetails li label {
		width: 75px;
	margin-right: 30px;
	}

	.movieDetails li span {
		width: calc(100% - 115px);
	}

	.catBoxItem.defProp {
		width: 100%;
	}

	h1 {
		font-size: 1.9rem !important;
	}

	.newsItem > div {
		width: 100%;
	}

	.newsItem .col-lg-9 {
		padding: 0
	}

	.newsItem .col-xs-5 img {
		width: 60%;
	}

	.wrapper_404 .searchMovie {
		width: 90%;
	}

	#confirmOpeningReg input {
		width: 100%;
		margin: 0 !important;
	}

	#confirmOpeningReg input + input {
		margin-top: 10px !important;
	}

	.m_calendar.fixedPos .schedualHeaderWrap {
		top: 110px;
	}

	.movieListWrap .scrollerClass {
		height: 147px;
	}

	.rotatorTxt h2 {
		font-size: 1.5rem;
		padding: 10px 0 0;
	}

	.wrapper {
		padding-top: 160px;
	}

	.sortCategory {
		width: 100%;
		margin: 0;
	}

	.navContainer {
	right: 10px; margin-top: 2px;
	}

	#loader .innerLoader {
		width: 150px;
		height: 57px;
	left: calc(50% - 75px);
		top: calc(50% - 28.5px);
	}

	.downBtn {
		height: auto; /*line-height:19px;*/
	}

	.downBtn {
		font-size: 1.3rem;
	}

	.contactWrapper .inputWrap input:not([type="checkbox"]), .contactWrapper .inputWrap textarea {
		width: 100% !important;
	}

	.contactWrapper .inputWrap .checkboxLabelCLick, .contactWrapper .inputWrap .submitBtn {
	margin-left: 0 !important;
	}

	.contactWrapper .inputWrap label {
		margin-bottom: 10px;
	}

	#contact_us {
		margin-top: 15px;
	}

	.eventTagMobile {
		bottom: 80px;
	}

	.movieButton {
		text-align: center;
		margin-bottom: 0;
	}

	.movieButton a {
		float: none;
		display: inline-block;
	}
}

@media only screen and (max-width: 400px) {
	.contact_form-Entry input[type="text"], .contact_form-Entry input[type="password"], .contact_form-Entry textarea, .radioWrap label {
		width: 100%;
	}

	.sideLabel input {
		width: calc(100% - 30px) !important;
	}

	.col-xs-12 label + label {
	margin-left: 0;
	}
}

@media only screen and (max-width: 360px) {
	.mobilePhoneLink {
		width: 100%;
	}

	.dates:after {
	left: 70%;
	}

	.playBtn {
		width: 50px;
		height: 50px;
		top: calc(50% - 27px);
	left: calc(50% - 27px);
	}

	.categoryWrapper > .col-xs-4 {
		width: 100%;
	}

	.mobileSearchWrap > a {
		font-size: 1.1rem;
	}

	.moreMovies .hpBoxItem {
		width: 100%;
	}

	.newsItem .col-xs-5 img {
		width: 100%;
	}

	.schedualHeader .sortSchedual {
		width: 150px;
		padding: 10px;
	}

	.schedualHeader h1 {
		width: calc(100% - 150px);
	}

	.schedualHeader h1 {
		padding: 12px 5px;
	}

	.rotatorTxt h2 {
		font-size: 1.2rem;
	}

	.first .catBoxItem .hoverElm .hpBoxTxt > a {
		padding: 10px 1px;
		font-size: 0.9rem;
	}

	.addtocalendar {
		margin-bottom: 10px;
	}

	#orderModal .modal-body .orderRow .bottons > a, .addtocalendar {
		width: 100%;
	}

	.g-recaptcha {
		width: 100% !important;
		transform: scale(0.86);
		-webkit-transform: scale(0.86);
		transform-origin: 100% 0;
		-webkit-transform-origin: 100% 0;
	}

	.contact_form-Entry .g-recaptcha {
		transform-origin: 0% 0;
		-webkit-transform-origin: 0% 0;
	}

}