/** * Template Name: CINEMATEK HERO HEADER 2024 - v0.0.2.5 * Template URL: https://www.cinematek.be * Author: CINEMATEK **/ :root { --primary: 051,204,255; --CINEMATEK-color: rgba(var(--primary), 1); --CINEMATEK-backgroundcolor: rgba(var(--primary),.3); --CINEMATEK-secondary: rgba(var(--primary),.7); --CINEMATEK-light: rgba(var(--primary),.1); --info: var(--CINEMATEK-color); --warning: var(--CINEMATEK-color); --success: #55c800; --danger: #cc3300; --light: #fff; --dark: #000; --gray: #4e4e4e; --lightgray: #c7c7c7; --blue: #33ccff; /* Dec Jan Feb */ /* 051,204,255 */ --green: #55c800; /* Maa Apr Mei */ /* 085,200,000 */ --pink: #FF5A96; /* Jun Jul Aug */ /* 255,090,150 */ --orange: #ff7800; /* Sep Okt Nov */ /* 255,120,000 */ --breakpoint-xs: 0; --breakpoint-sm: 576px; --breakpoint-md: 768px; --breakpoint-lg: 992px; --breakpoint-xl: 1200px; --breakpoint-xxl: 1900px; } body.dark-theme {--Main-color: rgba(0,0,0);--Bg-color: rgba(255,255,255); --gray: #afafaf;--lightgray: #c7c7c7;--Main-transparent: rgba(0,0,0,.9);--Bg-transparent: rgba(255,255,255,.9);} body.dark-theme .googleMaps {filter: invert(90%)} body.dark-theme .logoBlack {filter: invert(100%)} body.light-theme {--Main-color: rgba(255,255,255);--Bg-color: rgba(0,0,0); --Main-transparent: rgba(255,255,255,.9);--Bg-transparent: rgba(0,0,0,.9);} @media (prefers-color-scheme: dark) {body {--Main-color: rgba(0,0,0);--Bg-color: rgba(255,255,255)}} @media (prefers-color-scheme: light) {body {--Main-color: rgba(255,255,255);--Bg-color: rgba(0,0,0)}} @media print {body {background-color: none;--Main-color: rgba(255,255,255);--Bg-color: rgba(0,0,0)}} /*-------------------------------------------------------------- # FONTS --------------------------------------------------------------*/ /* CINEMATEK */ @font-face {font-family: "cinematek";src:url("../fonts/cinematek-webfont.woff2") format("woff2"),url("../fonts/cinematek-webfont.woff") format("woff");font-weight: normal;font-style: normal;unicode-range:"U+0043", "U+0049", "U+004e", "U+0045", "U+004d", "U+", " U+0054", "U+0045", "U+004b"} /* CINEMATEK Archer font */ @font-face {font-family: "Archer";src:url("../fonts/woff2/ArcherSSm-Book-Pro_Web.woff2") format("woff2"),url("../fonts/woff/ArcherSSm-Book-Pro_Web.woff") format("woff");font-weight: normal;font-style: normal;font-feature-settings: "ss01", "ss02", "ss20"} @font-face {font-family: "ArcherItalic";src:url("../fonts/woff2/ArcherSSm-BookItalic-Pro_Web.woff2") format("woff2"),url("../fonts/woff/ArcherSSm-BookItalic-Pro_Web.woff") format("woff");font-weight: normal;font-style: normal;font-feature-settings: "ss01", "ss02", "ss20"} @font-face {font-family: "ArcherBold";src:url("../fonts/woff2/ArcherSSm-Bold-Pro_Web.woff2") format("woff2"),url("../fonts/woff/ArcherSSm-Bold-Pro_Web.woff") format("woff");font-weight: 800;font-style:normal;font-feature-settings: "ss01", "ss02", "ss20"} @font-face {font-family: "ArcherBoldItalic";src:url("../fonts/woff2/ArcherSSm-BoldItalic-Pro_Web.woff2") format("woff2"),url("../fonts/woff/ArcherSSm-BoldItalic-Pro_Web.woff") format("woff");font-weight: 800;font-style: normal;font-feature-settings: "ss01", "ss02", "ss20"} @font-face {font-family: "ArcherMedium";src:url("../fonts/woff2/ArcherSSm-Medium-Pro_Web.woff2") format("woff2"),url("../fonts/woff/ArcherSSm-Medium-Pro_Web.woff") format("woff");font-weight: 700;font-style: normal;font-feature-settings: "ss01", "ss02", "ss20"} @font-face {font-family: "ArcherMediumItalic";src:url("../fonts/woff2/ArcherSSm-MediumItalic-Pro_Web.woff2") format("woff2"),url("../fonts/woff/ArcherSSm-Medium-Pro_Web.woff") format("woff");font-weight:700;font-style: normal;font-feature-settings: "ss01", "ss02", "ss20"} @font-face {font-family: "ArcherSemibold";src:url("../fonts/woff2/ArcherSSm-Semibold-Pro_Web.woff2") format("woff2"),url("../fonts/woff/ArcherSSm-Semibold-Pro_Web.woff") format("woff");font-weight: 600;font-style: normal;font-feature-settings: "ss01", "ss02", "ss20"} @font-face {font-family: "ArcherSemiboldItalic";src:url("../fonts/woff2/ArcherSSm-SemiboldItalic-Pro_Web.woff2") format("woff2"),url("../fonts/woff/ArcherSSm-SemiboldItalic-Pro_Web.woff") format("woff");font-weight: 600;font-style: normal;font-feature-settings: "ss01", "ss02", "ss20"} @font-face {font-family: "ArcherLight";src:url("../fonts/woff2/ArcherSSm-Light-Pro_Web.woff2") format("woff2"),url("../fonts/woff/ArcherSSm-Light-Pro_Web.woff") format("woff");font-weight: lighter;font-style: normal;font-feature-settings: "ss01", "ss02", "ss20"} @font-face {font-family: "ArcherLightItalic";src:url("../fonts/woff2/ArcherSSm-LightItalic-Pro_Web.woff2") format("woff2"),url("../fonts/woff/ArcherSSm-LightItalic-Pro_Web.woff") format("woff");font-weight: lighter;font-style: normal;font-feature-settings: "ss01", "ss02", "ss20"} /*-------------------------------------------------------------- # General --------------------------------------------------------------*/ html {scroll-behavior: smooth} body {background-color:var(--Main-color);color:var(--Bg-color);font-family:"Archer",sans-serif;font-size: clamp(0.99rem, 0.9498rem + 0.1717vw, 1.15rem);line-height:1.65rem; text-wrap: pretty} section {margin-right:1px;margin-left:1px;display:block; width:100%} a {color: #fff; color:var(--Bg-color);text-decoration: none; hyphens:none !important} ::selection {background-color:var(--CINEMATEK-backgroundcolor);} p > a, #main li > a {color: #33ccff; color:var(--CINEMATEK-color);text-decoration: underline; hyphens:none;} section#events a:not(.btn) {text-decoration: underline} section#events a.compil_list-link {text-decoration: none;} section#events a.compil_list-link:hover h5 {color: #fff; color:var(--Bg-color);text-decoration: none} p,.plain {font-family:"Archer"; min-width:10ch;hyphens:auto;} small, .smaller, .light {font-family:"ArcherLight" !important} strong, .bold, .screening__time, b {font-family: "Archerbold"} .medium {font-family: "ArcherMedium"} .semi, .medium > strong, dl > strong {font-family: "ArcherSemibold";hyphens:none;} .line-height {line-height:1} .small, small, .smaller {line-height:initial} .smaller {font-size:98%} .smallest {font-size:70%} .Italic {font-family:"ArcherItalic";hyphens:none;} .BoldItalic {font-family:"ArcherBoldItalic";hyphens:none;} .MediumItalic {font-family:"ArcherMediumItalic";hyphens:none;} .SemiItalic {font-family:"ArcherSemiboldItalic";hyphens:none;} .Light {font-family:"ArcherLight" !important; } .LightItalic {font-family:"ArcherLightItalic";hyphens:none;} .text-dark {color: #fff; color:var(--Bg-color)!important;} blockquote {font-family: "ArcherMedium";margin:2rem auto; padding:2.5rem 2rem} blockquote.citation {max-width:50ch;font-size:120%;line-height:2.25rem; hanging-punctuation: first last;} blockquote:not(.special, .boxed) > p::before {content:"«\00a0";font-family:"Archer"} blockquote:not(.special, .boxed) > p::after {content:"\00a0»";font-family:"Archer"} blockquote.special p > a:link {color: #fff;color: var(--Bg-color)} .CINEMATEK {font-family: "cinematek",sans-serif;font-weight: normal !important;font-style: normal !important;text-transform: uppercase !important;hyphens:none;} h1,h2,h3,h4,h5,h6 {font-family:"ArcherSemibold";font-weight: normal;color: #33ccff;color: var(--CINEMATEK-color);line-height:1; hyphens:none;} :is(h1,h2,h3,h4,h5,h6) a {color: #33ccff;color: var(--CINEMATEK-color);text-decoration: underline; text-decoration-style: dotted; hyphens:none;} :is(h1,h2,h3,h4,h5,h6) a:hover {color: #fff;color: var(--Bg-color);text-decoration: none; hyphens:none;} :is(h1,h2,h3,h4,h5,h6).subtitle {font-family: "ArcherMedium";font-feature-settings: "smcp", "c2sc";color: #000; color: var(--Bg-color); padding: 2rem 0 1rem 0; hyphens:none;} :is(h1,h2,h3,h4,h5,h6) + .subtitle {padding: 0 0 1rem 0; hyphens:none;} .interviewer {font-family: "ArcherMedium";font-style: italic;color: #000; color: var(--Bg-color);font-size:105%;padding: 2.25rem 0.5rem 1.95rem 0.5rem; margin-bottom:0; min-width:10ch; hyphens:none;} :is(h1,h2,h3,h4,h5,h6,.subtitle) + .interviewer {padding-top: .5rem } span.alt, .alt {font-feature-settings: "aalt"} span.case, .case {font-feature-settings: "case"; hyphens:none;} span.num, .num {font-feature-settings: "tnum"; hyphens:none;} sup {hyphens:none;} sub {font-feature-settings: "subs"; hyphens:none;} .smallcaps {font-feature-settings: "smcp", "c2sc"; hyphens:none;} hr:not(.separator) {padding-bottom:1rem; margin-top:2rem} hr.separator {padding-bottom:1rem; margin-top:1rem;min-width: 100%;clear: both} hr.separator + .mainTitle, hr.separator + .mainTitle > .subtitle {padding-top:0; margin-top:0} :where(h1,h2,h3,h4,h5) span {font-weight: lighter;font-family:"ArcherMedium"; hyphens:none;} /*--/ lists /--*/ #main ul li::marker {font-family:"ArcherLight";font-size: smaller;font-variant-numeric:oldstyle-nums} #main ul:not(.navbar-nav) li::marker {content: "–\00a0"} #main ol:not(.carousel-indicators) {list-style: none; counter-reset: li; max-width:85ch} #main ol:not(.carousel-indicators) li::before {content: counter(li);font-family:"Archer";font-feature-settings: "salt";font-size:larger;display: inline-block; width: 2rem;position: relative;top: 2px;margin-left: -2rem;padding-right: 2rem;} #main ol:not(.carousel-indicators) li {counter-increment: li} #main ul ul, #main ol:not(.carousel-indicators) ul {padding-left:1.5rem} #main ul:not(.list-group-flush) li {padding:0;margin:.25rem 0} dd > :is(h1,h2,h3,h4,h5,h6).subtitle {font-family: "ArcherSemibold";font-size: clamp(0.8rem, 0.55rem + 0.8vw, 1.25rem);padding: 1rem 0 .25rem 0} /*--/ links /--*/ a:hover, a.active, .navbar a.active {color: #33ccff;color: var(--CINEMATEK-color);text-decoration: none} a:focus, .nav-link:focus {text-decoration: #33ccff solid 1px;text-decoration:var(--CINEMATEK-color)} input:not(#searchFormInput)::placeholder, :not(#searchFormInput)::placeholder, option {color: #33ccff;color: var(--CINEMATEK-color) !important} h1.link a {text-decoration:none} body.light-theme #related .footnotes a[href$=".pdf"]::after { content:url(../icons/pdf-Black.svg) } #related .footnotes a[href$=".pdf"]::after { content:url(../icons/pdf-White.svg) } body.light-theme #related .footnotes a[target="_blank"]::after, body.light-theme #related .footnotes a[href^="https"]::after, body.light-theme #related .footnotes a[href^="http"]::after { content:url(../icons/iconLink-Black.svg) } #related .footnotes [target="_blank"]::after, #related .footnotes a[href^="https"]::after, #related .footnotes a[href^="http"]::after { content:url(../icons/iconLink-White.svg) } body.light-theme #related .footnotes a[href*="youtube"]::after { content:url(../icons/iconYoutubeBlack.svg) } #related .footnotes a[href*="youtube"]::after { content:url(../icons/iconYoutube.svg) } body.light-theme #related .footnotes a[href*="vimeo"]::after { content:url(../icons/iconVimeoBlack.svg) } #related .footnotes a[href*="vimeo"]::after { content:url(../icons/iconVimeo.svg) } body.light-theme #related .footnotes a[href*="dailymotion"]::after { content:url(../icons/iconDailymotionBlack.svg) } #related .footnotes a[href*="dailymotion"]::after { content:url(../icons/iconDailymotion.svg) } #related .footnotes a::after {vertical-align: text-top; padding-left:.25rem;display:inline-block;width: 1.25rem; height: 1.25rem;border-radius:0} /*--/ colors /--*/ .text-color {color: #33ccff; color: var(--CINEMATEK-color)} .text-colormuted {color: rgba(var(051,204,255),.7); color: var(--CINEMATEK-secondary) !important} a.text-color:hover, a.text-color:focus {color: #fff; color: var(--Bg-color); hyphens:none;} a.text-color:focus {border-bottom: #fff solid 1px;border-color:var(--Bg-color);text-decoration: none} .text-nocolor {color: #fff; color: var(--Bg-color);} input {accent-color: var(--CINEMATEK-color)} .muted {opacity: .5} .bg-color {background-color: #33ccff; background-color: var(--CINEMATEK-color)} a.bg-color:hover, button.bg-color:hover, input.bg-color:hover {color: #fff; color: var(--Main-color);background-color: #000; background-color: var(--Bg-color)} .bg-main {background-color: #fff; background-color: var(--Bg-color)} a.bg-main:hover, button.bg-main:hover {background-color: #000; background-color: var(--Main-color)} .bg-second {background-color: #000; background-color: var(--Main-color)} a.bg-second:hover, button.bg-second:hover {background-color: #fff; background-color: var(--Bg-color)} .bg-backgroundcolor {background-color: rgba(051,204,255, .3);background-color: var(--CINEMATEK-backgroundcolor) !important} .bg-backgroundcolor a:hover, a.bg-backgroundcolor:hover, button.bg-backgroundcolor:hover {background-color: #33ccff; background-color: var(--CINEMATEK-color)} button.bg-color, input.bg-color, a.bg-color {color: #fff; color: var(--Bg-color)} button.bg-color, input.bg-color, a.bg-color {border: 1px solid; border-color: #33ccff; border-color: var(--CINEMATEK-color)} button.bg-color:hover, input.bg-color:hover, a.bg-color:hover {color: #33ccff; color: var(--CINEMATEK-color)} button.bg-color:focus, input.bg-color:focus, a.bg-color:focus,.btn-group .btn:focus,.btn-group .btn:hover {color: #33ccff; color: var(--CINEMATEK-color);background-color: #fff; background-color: var(--Bg-color);box-shadow: 0 0 0 3px var(--Bg-color) !important} .btn-primary, .badge-primary {background-color: #33ccff; background-color: var(--CINEMATEK-color)} /*--/ border /--*/ .border-top-main {border-top: 1px solid #000; border-top: 1px solid var(--Main-color)} .border-top-bg {border-top: 1px solid #fff; border-top: 1px solid var(--Bg-color)} .border-top-solid {border-top: 1px solid #fff; border-top: 1px solid var(--Bg-color)} .border-top-solid-2 {border-top: 3px solid #fff; border-top: 3px solid var(--Bg-color)} .border-bottom-solid {border-bottom: 1px solid #fff; border-bottom: 1px solid var(--Bg-color)} .border-bottom-solid-2 {border-bottom: 3px solid #fff; border-bottom: 3px solid var(--Bg-color)} hr, .border-top-dashed {border-top: 1px dashed #fff; border-top: 1px dashed var(--Bg-color)} .border-top-dotted {border-top: 1px dotted #fff; border-top: 1px dotted var(--Bg-color)} .border-bottom-dashed {border-bottom: 1px dashed #fff; border-bottom: 1px dashed var(--Bg-color)} .border-bottom-dotted {border-bottom: 1px dotted #fff; border-bottom: 1px dotted var(--Bg-color)} .border-color {border-color: #33ccff; border-color: var(--CINEMATEK-color)} .border-plain {border-color: #fff; border-color: var(--Main-color) !important} .border-gray {border-color: #afafaf; border-color: var(--lightgray) !important} .border-dark {border-color: #000000; border-color: var(--Bg-color) !important} .border-white {border-color: #fff !important} .border-black {border-color: #000000 !important} /*--/ btn-group /--*/ .btn-group .btn {background-color: #33ccff;background-color: var(--CINEMATEK-color);border: 1px solid #000; border: 1px solid var(--Main-color)} .btn-group .btn:hover {color: #000; color: var(--Main-color);background-color: #33ccff;background-color: var(--CINEMATEK-color)} .btn-group .btn.active {color: #33ccff;color: var(--CINEMATEK-color);background-color: rgba(051,204,255, .35);background-color: var(--CINEMATEK-backgroundcolor)} .btn-group .btn.active:focus {color: #000; color: var(--Bg-color); outline: none; box-shadow: none} .btn--inactive {text-align: center;vertical-align:middle;padding: .25em .5em;font-size: 1rem; border: 1px solid; border-color: #33ccff; border-color: var(--CINEMATEK-color);color: #33ccff;color: var(--CINEMATEK-color);background-color: rgba(051,204,255, .35);background-color: var(--CINEMATEK-backgroundcolor)} .card-deck.dossiersHomepage > div.card > div.card-footer > a.btn {color: #fff; color: var(--main-color)} .card-deck.dossiersHomepage > div.card > div.card-footer > a.btn:hover {background-color: #33ccff;background-color: var(--CINEMATEK-color);color: #000; color: var(--Bg-color)} /*-------------------------------------------------------------- # General BOOTSTRAP BOOTSTRAP --------------------------------------------------------------*/ @media (min-width: 1900px) {.container{max-width: 1900px} .h1, h1 {font-size: 3.5rem;font-family: "ArcherSemibold"}} .lead {font-size: clamp(1.15rem, 0.55rem + 0.8vw, 1.35rem);line-height:155%;margin-bottom: 1.5rem;hyphens:none;} /*--/ BOOTSTRAP nav /--*/ .dropdown-item {display:inline-block;width: auto;white-space: unset;font-family: "ArcherSemibold"; color: #33ccff; color: var(--CINEMATEK-color)} a.dropdown-item {font-family: "ArcherMedium"; color: #fff; } .col-form-label-sm {line-height:1; padding-top:0} .form-check-input {margin-top:0} /* .form-control-sm {height: calc(1.5em + .75rem + 5px);} */ .form-control-sm {height: auto !important;} /*--/ BOOTSTRAP pagination /--*/ @media (min-width: 576px) {.page-item .page-link {border-radius: 0 !important; text-decoration:none !important; text-wrap:nowrap;}} .page-item .page-link {border-radius: 0 !important; text-decoration:none !important;height:100% } .page-link {color: #33ccff; color: var(--CINEMATEK-color); background:transparent;order: 1px solid; border-color: #33ccff; border-color: var(--CINEMATEK-color);color: #33ccff;border-radius: 0;align-content:center} .page-item:first-child .page-link {margin-left:0} .page-item:last-child .page-link {margin-right:-1px} .active a.page-link {color: #000; color: var(--Main-color) !important;text-decoration:none !important; text-decoration-style:none } .page-item.disabled .page-link {background-color: rgba(051,204,255, .35);background-color: var(--CINEMATEK-backgroundcolor); border-color: #33ccff; border-color: var(--CINEMATEK-color);} .page-item.active .page-link, .page-link:hover, a.page-link:hover {color: #000; color: var(--Main-color)!important;border-color: #33ccff; border-color: var(--CINEMATEK-color); background-color: #33ccff; background-color: var(--CINEMATEK-color)} a.page-link:focus {color: #fff; color: var(--Bg-color);border-color: #33ccff; border-color:var(--CINEMATEK-color);box-shadow: 0 0 0 3px var(--CINEMATEK-color) !important; text-decoration:none !important; } /*--/ BOOTSTRAP cards /--*/ .card a.btn:not(.todayFL) {font-size:.75rem; border:0} .card, .list-group-item, .card-footer {border-left: 0; border-right:0;border-top: 0; border-bottom:0;background-color: unset; border-radius:0 !important} .card {border-color: #fff; border-color: var(--Bg-color)} .card .card-text:not(.semi) strong {font-family: "ArcherSemibold", sans-serif} .card-text, .intro-text {text-wrap: balance;} .card :is(h1,h2,h3,h4,h5,h6) a, #counter h1 a {text-decoration: none !important} .card :is(h1,h2,h3,h4,h5,h6) a:hover { color: #fff;color: var(--Bg-color);text-decoration: none !important} .card, .card:not(.special) img, card:not(.special) .card-header:first-child, card:not(.special) .card-footer:last-child, .card:not(.special) .list-group-item, .card-header, .card-header:first-child {border-radius:0} #navFooter > div > div > h5 {font-size: clamp(0.95rem, 0.005rem + 1.0667vw, 1.35rem);} .card-img-top {padding-bottom:.5rem} .card-img-bottom {padding-top:0;padding-bottom:0} .card-header {background-color:unset;border-bottom: 0;border-top: 0; padding-left: 0;padding-right: 0;padding-top: .25rem;padding-bottom: .25rem} #cycli .card-header, .event_footer .card, .restored .card-header {background-color:unset;border-bottom: 0;border-top: 2px solid #fff;border-top: 2px solid var(--Bg-color);padding-top: .25rem;padding-bottom: .25rem} #cycli .restoration-columns .restored .card-header {border-top: 1px solid #fff;border-top: 1px solid var(--Bg-color);} .card-title {margin:0;font-family: "ArcherMedium", sans-serif;line-height: 1.1 rem;padding-top: 0;padding-bottom: 0;hyphens:none;} p.card-title a {text-decoration: none;color: #fff; color: var(--Bg-color);hyphens:none;} p.card-title a:hover, .card.restored > a:hover {color: #33ccff; color: var(--CINEMATEK-color);hyphens:none;} .card-title.smallcaps {line-height: 1rem !important;padding-top:.25rem;hyphens:none;} .card-body {padding-left: 0;padding-right: 0;padding-top: 0;padding-bottom: 0;border-bottom: 0; border-top: 0} #related .card-body {padding: .25em .5em;text-wrap: balance;} .card-footer {font-size:.7rem;padding:0; border-top: 0;hyphens:none;} .card-footer:last-child {border-bottom: 1px solid;color: #fff;color: var(--Bg-color);border-radius:0;hyphens:none;} .restoration-columns .card-footer:last-child {border:none;} .restoration-columns .card-footer:last-child a.btn {color: #fff; color: var(--Main-color);background-color: #000;background-color: var(--Bg-color);} .restoration-columns .card-footer:last-child a.btn:hover {color: #33ccff; color: var(--CINEMATEK-color);} .boxcard .card-footer:last-child {border-bottom: 0} .card-deck .card-footer:last-child {background-color: #fff;background-color: var(--Bg-color);color: #000; color: var(--Main-color)} section#events .card ul.list-group.list-group-flush li.list-group-item:not(.subtitle), .filmdetails {font-size:.75rem !important;line-height:1.05rem !important;color: #fff; color: var(--Bg-color);} .list-group-item + .list-group-item {border-top: 1px dotted} .card-footer .card-text {font-size:.65rem;text-align:right;padding: .1rem .35rem;hyphens:auto;} .card .card-date {font-family: "Archerbold", sans-serif; color: #fff; color: var(--Bg-color);border-bottom: 1px dashed;font-size:85%;text-wrap:nowrap;} .card p.card-date {font-size:93%;} .card .card-date a {text-decoration:none;color: #000; color: var(--Bg-color)} .card .card-date a:hover {color: #33ccff; color: var(--CINEMATEK-color)} .card .pastevent a:hover {color: #000; color: var(--Bg-color)} .grid .card-footer a:focus, .grid .card-footer a:hover {color: #fff; color: var(--Main-color);background-color: #000;background-color: var(--Bg-color);text-decoration: none} .grid .card-footer a:focus, .grid .card-footer a:hover {color: #fff; color: var(--Main-color)} .card-body p:is(.card-text,.card-title):not(.small, small), #events div.card-body.clearfix > p:not(.small, small), .event_head p:is(.card-text,.card-title):not(.small, small) {font-size: .95rem;line-height: 1.55rem;color: #fff;color: var(--bg-color)} .card-deck, .card-deck .card {margin-right: 0;margin-left: 0} .card-deck .card-header {border-top: 1px solid;border-bottom: 0;border-radius:0} .card-deck .list-group-item:focus, .card-deck .list-group-item:hover {color: #fff; color: var(--Bg-color);background-color: rgba(051,204,255, .35);background-color: var(--CINEMATEK-backgroundcolor);text-decoration: none} .card-deck .list-group-item a:focus, .card-deck .list-group-item a:hover {color: #fff; color: var(--Bg-color)} .restored h4.card-title {font-size: clamp(0.8rem, 0.55rem + 0.8vw, 1.4rem);} @media (min-width: 576px) {.card-deck {margin-right: -.25rem;margin-left: -.25rem}.card-deck .card {margin-right: .25rem;margin-left: .25rem}} @media (min-width: 1200px) {.card-deck {margin-right: -.5rem;margin-left: -.5rem}.card-deck .card {margin-right: .5rem;margin-left: .5rem}} @media (min-width: 576px) and (max-width: 1000px) { .card-deck .card-body p.card-text,.card-deck .card-header,.card-deck .card-body h6 {font-size:small; line-height:1.2; } .card-deck .card-body h4 {font-size:1em; line-height:1.2; } } @media (max-width: 576px) {#todayFL h2 {font-size:1.5em; line-height:1; } #todayFL h4 {font-size:1em; line-height:1; } #todayFL h6 {font-size:.7em; line-height:1; } } .grid .card {margin-bottom: 2rem} .grid .card {border-top: 0;border-bottom: 0; border-left: 0; border-right:0;border-style: solid} .grid:not(.restoration-columns) .card-footer {font-size:.7rem;padding:0; border-top: 1px dotted } .grid .list-group-item, .event_notice .list-group-item, .card .list-group-item {border-top: 0; border-bottom: 0; padding:0} /* @media (min-width: 576px) {.card-columns {-webkit-column-count: 1;-moz-column-count: 1;column-count: 1;-webkit-column-gap: 1rem;-moz-column-gap: 1rem;column-gap: 1rem}} @media (min-width: 768px) {.card-columns {-webkit-column-count: 2;-moz-column-count: 2;column-count: 2;-webkit-column-gap: 1.1rem;-moz-column-gap: 1.1rem;column-gap: 1.1rem}} @media (min-width: 1000px) {.card-columns {-webkit-column-count: 3;-moz-column-count: 3;column-count: 3;-webkit-column-gap: 1.25rem;-moz-column-gap: 1.25rem;column-gap: 1.25rem}} @media (min-width: 1380px) {.card-columns {-webkit-column-count: 4;-moz-column-count: 4;column-count: 4;-webkit-column-gap: 1.5rem;-moz-column-gap: 1.5rem;column-gap: 1.5rem}} @media (min-width: 2000px) {.card-columns {-webkit-column-count: 5;-moz-column-count: 5;column-count: 5;-webkit-column-gap: 2rem;-moz-column-gap: 2rem;column-gap: 2rem}} */ @media (min-width: 992px) {.dossiers-columns {-webkit-column-count: 2;-moz-column-count: 2;column-count: 2;}} @media (min-width: 1920px) {.dossiers-columns {-webkit-column-count: 3;-moz-column-count: 2;column-count: 2;}} @media (min-width: 2000px) {.dossiers-columns {-webkit-column-count: 4;-moz-column-count: 3;column-count: 3;}} /*------/ highlighted cards /------*/ .card.special {background-color: rgba(var(051,204,255),.5); background-color: var(--CINEMATEK-secondary);padding:0} .card.special.pastevent {background-color: #c7c7c7; background-color: var(--lightgray)} .card.special .card-body, .card.special .card-header {padding-left: .5rem; padding-right: .5rem} .card.special :is(h1,h2,h3,h4,h5,h6) { color: #fff !important;color: var(--Bg-color) !important} .card.special a { color: #000;color: var(--Bg-color)} .grid .card.boxcard {padding:.5rem;border: 1px solid #fff; border-color: var(--Bg-color)} @media (min-width: 768px) { span.boxed, .boxed {border: 1px solid} span.boxed > div.event_head > div > div {border: none !important} span.special, span.special > div.event_head > div.event_footer, span.special > div.event_head > div.event_details .card {background-color: rgba(var(051,204,255),.5); background-color: var(--CINEMATEK-light) !important} span.special > div.event_head > div > div {border: none !important; background: none} } /*------/ past event cards /------*/ div.card.pastevent, .pastevent {opacity:.7} div.card.pastevent img {filter: grayscale(100%);} div.card.pastevent > div.card-header._cyclus-card > h4 > a, div.card.pastevent > div.card-body > h5 > a, div.card.pastevent > div.card-body > a > h5 {color: #4e4e4e; color: var(--gray)} div.card.pastevent > div.card-footer > a {background-color: #c7c7c7; background-color: var(--lightgray)} div.card.pastevent > div.card-body > p > i.text-color {color: #4e4e4e; color: var(--gray)} .grid .card.pastevent.boxcard {border-color:color: #4e4e4e; color: var(--gray)} /*------/ BTSRP colors /------*/ .text-danger,.alert-danger,.alert-primary, a.link-alert {color: var(--danger) !important} .bg-danger, .badge-danger, .btn-danger {background-color: var(--danger) !important} .border-danger {border-color: var(--danger)!important} .text-success,.alert-success, a.link-succes {color: var(--success) !important} .bg-success, .badge-success, .btn-success {background-color: var(--success) !important} .border-success { border-color: var(--success) !important} .text-info,.alert-info,a.link-info {color: var(--info) !important} .bg-info, .badge-info, .btn-info {background-color: var(--info) !important} .border-info {border-color: var(--info)!important} .text-warning,.alert-warning,a.link-warning {color: var(--warning) !important} .bg-warning, .badge-warning, .btn-warning {background-color: var(--warning) !important} .border-warning {border-color: var(--warning)!important} .bg-primary {background-color: #33ccff; background-color: var(--CINEMATEK-color) !important} .text-white, a.text-white {color: #fff; color: var(--Main-color)} .text-black, a.text-black {color: #000; color: var(--Bg-color)} .text-gray, a.text-gray, .text-muted, a.text-muted {color: #4e4e4e;color: var(--gray)} /*------/ BTSRP Links /------*/ a:focus,p a:focus {outline: none;box-shadow: none; text-decoration: underline;text-decoration-color: var(--CINEMATEK-color);text-decoration-style: dotted} a.text-primary:hover {color: var(--Bg-color) !important} a.card-link {color: #33ccff; color: var(--CINEMATEK-color)} a.card-link:hover {color: #000; color: var(--Main-color)} .list-group-item.active, .list-group-item.active a {z-index: 2;color: #fff; color: var(--Bg-color);background-color: #33ccff; background-color: var(--CINEMATEK-color);border-color: #33ccff;border-color: var(--CINEMATEK-color)} dl {padding: .5rem 0} * ~ dl {margin-top:4rem} p + h2.semi {margin-top:4rem} .mainTitle + dl, dl + dl, hr + dl {margin-top:0;padding-top:0} hr + blockquote.card {margin-top:0 !important} /*------/ Buttons & Forms /------*/ .btn {border: none;border-radius: 0;padding: .25em .5em;color: #fff; color: var(--Bg-color)} .btn:focus, .btn:hover {color: #33ccff; color: var(--CINEMATEK-color); outline:none; box-shadow: none} .btn-primary:hover {background-color:var(--Bg-color); border-color:var(--Bg-color)} .checkbox label .toggle,.checkbox-inline .toggle{margin-left:-20px;margin-right:5px} .form-control:focus, .custom-select:focus {color: #33ccff; color: var(--CINEMATEK-color);border-color: #33ccff; border-color:var(--CINEMATEK-color);box-shadow: 0 0 0 3px var(--CINEMATEK-color) !important} .custom-select {border-radius: 0;border-color: #33ccff; border-color:var(--CINEMATEK-color)} .form-text {margin-bottom:1rem} .btn-primary.disabled, .btn-primary:disabled {background-color: #33ccff; background-color: var(--CINEMATEK-color); border-color:#33ccff; border-color: var(--CINEMATEK-color);} #sorting > a.sortBtn > span, #accordeon > .sortBtn > span {transition: .4s;display: inline-block;} #accordeon > .sortBtn:not(.collapsed) > span {transform: rotate(90deg);} #sorting > a.sortBtn:hover > span, #accordeon > .sortBtn:hover > span {transform: rotate(90deg);} #sorting > a.sortBtn:active > span, #accordeon > .sortBtn:active > span {transform: rotate(90deg);} .nav-sticky {box-shadow:0 8px 12px -6px rgba(0,0,0, .02);background-color: #000;background-color: var(--Main-color) !important} @media (min-width: 576px) {.nav-sticky {padding-top:10rem;}} @media (max-width: 768px) {.nav-sticky {top:calc(10vmax + 2rem)}} /*------/ Darkmode switch /------*/ .switch {position: relative;display: inline-flex;vertical-align:middle;width: 24px;height: 14px} .switch input {opacity: 0;width: 0;height: 0} label.switch, .dropdown-filter li.dropdown-item label {margin-bottom:0; display:inline-flex; align-items:baseline} .slider {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;-webkit-transition: .4s;transition: .4s} .slider::before {position: absolute;content: "";height: 10px;width: 10px;left: 1px;bottom: 1px;background-color: #fff;-webkit-transition: .4s;transition: .4s} input:focus + .slider {box-shadow: 0 0 1px var(--CINEMATEK-color)} input:checked + .slider::before {background-color: #fff;;-webkit-transform: translateX(9px);-ms-transform: translateX(9px);transform: translateX(9px)} .slider.round {border-radius: 16px;border: 1px solid #fff} .slider.round::before {border-radius: 50%;} /*------/ Switch /------*/ #GeneralSwitch .slider.round {border-color: var(--Bg-color)} #GeneralSwitch .slider::before {background-color: var(--Bg-color)} #GeneralSwitch label.switch {margin-bottom:4px} #GeneralSwitch {font-size: 1rem} span.disabled {opacity:.5} /*--/ images /--*/ .bg-image {width:100%;height:100vh;object-fit:cover;background-repeat: no-repeat;background-size: cover;background-position: center center;pointer-events: none !important} img {pointer-events: none !important;height:auto;max-width: 100%} iframe.googleMaps {margin: 4rem 0} figure.float-left {float: left;margin-right: 1rem;} figure.float-right {float: right;margin-left: 1rem;} figure.matrixFigure.float-left, figure.matrixFigure.float-right ~ :is(figure, img) {clear: right;} @media (min-width: 1920px) {.viewportImg {max-width:40vw;}} figure:not(.matrixFigure, figure.float-left, figure.float-right, .inlineImg-center) {float: left;margin-top:2.25rem; margin-bottom:2rem;margin-right: 1rem;} figure:not(.matrixFigure) ~ figure:not(.matrixFigure) {float: left;margin-right: 1rem; } figure:not(.matrixFigure, figure.float-left, figure.float-right, .inlineImg-center) ~ figure:not(.matrixFigure, figure.float-left, figure.float-right, .inlineImg-center):first-child {clear:left} figure:not(.matrixFigure, figure.float-left, figure.float-right, .inlineImg-center) ~ figure:not(.matrixFigure, figure.float-left, figure.float-right, .inlineImg-center) ~ *:not(figure) {clear:left} .inlineImg-center {float: none;margin: auto } figcaption,.figure-caption {font-size: 78%;line-height:1.2;margin-top:.5rem;text-align:left; color: #4e4e4e;color: var(--gray); display:inline-block; width:100%} figure.inlineImg-center > img {width: 100%;height: auto;} figure.float-left > img, figure.float-right > img {width:100%} @media (max-width: 576px) {figure ~ * {clear:left};figure.float-left, figure.float-right, .inlineImg-center {width:100%}} @media (min-width: 768px) {figure.float-left, figure.float-right, .inlineImg-center {max-width:45vw}} @media (max-width: 768px) {figure.inlineImg-center, figure.float-left, figure.float-right, figure > img {float: none !important; height:auto !important; width:100%} figure ~ figure {float: none!important;margin-right: 0; } figure:not(.matrixFigure) {position: relative;padding-bottom: 75%} figure > img {padding-bottom:unset;height: auto !important} figure > iframe {position: absolute;top: 0;left: 0;width: 100% !important;height: 100% !important}} @media (min-width: 1920px) {figure.float-left, figure.float-right, .inlineImg-center {max-width:30vw} figure.matrixFigure.float-left, figure.matrixFigure.float-right {max-width:30vw}} /*--/ video figure /--*/ figure:has(> iframe) {float:none !important; text-align:center} /*-------------------------------------------------------------- # Nav Bar --------------------------------------------------------------*/ .navbar {font-family:"ArcherSemibold", sans-serif;} #mainNav a {color: #fff} #mainNav a:hover, .active a {color: #33ccff; color: var(--CINEMATEK-color)} /*--/ navbar-brand /--*/ .navbar-brand {margin: 0 2rem 0 0} #CINEMATEK {text-transform: uppercase;font-family: "cinematek";font-size:49px; transition: all .5s ease-in-out} a#CINEMATEK{color:var(--CINEMATEK-color); z-index:1} a#CINEMATEK:hover {color: #fff !important} .CINEMATEKlogo {text-transform: uppercase;font-family: "cinematek";font-size:2em;line-height: .8;color: #33ccff; color:var(--CINEMATEK-color)} .navbar-b.navbar-popup #CINEMATEK {color: #000; transition: color 250ms ease-in-out} .navbar-b.navbar-popup a#CINEMATEK:hover {color: #33ccff; color:var(--CINEMATEK-color) !important} @media (min-width: 576px) {.navbar-b .navbar-nav .nav-link {padding-left: 1.25rem;padding-right:0} li.show a.nav-link {position: relative;text-decoration:underline;text-decoration-style: solid;text-decoration-color: #fff}} .navbar-b {background-color: rgba(0, 0, 0, 0); padding-top: 2.5rem;transition: all .5s ease-in-out;box-shadow: 0px -20px 9px 20px rgba(0, 0, 0, 0)} .navbar-b.navbar-reduce, .navbar-trans {max-height: calc(10vmax + 1rem);background-color: rgba(0, 0, 0, .9);box-shadow: 0px -20px 9px 25px rgba(0, 0, 0, .6);padding-bottom: .5rem;transition: all .5s ease-in-out;-webkit-backdrop-filter: blur(2px);backdrop-filter: blur(2px)} .navbar-b.navbar-reduce .nav-item {position: relative;padding-left: 0} /*--/ navSidebar /--*/ #navSidebar {font-size: .95rem} #navSidebar a.nav-link { color: #fff; padding: 0} .navbar-b a#showSearch {background: url(../icons/searchWhite.svg) center center no-repeat;background-size: contain} .navbar-b a#showCart {background: url(../icons/cartWhite.svg) center center no-repeat;background-size: contain} a.navIcons, a.text-hide {text-indent: -1000em;overflow: hidden;display: inline-block;margin-right: 5px;width: 1rem;height: 1rem;opacity: 1} #searchFormInput {width:85vmax;font-size: clamp(3rem, -2rem + 20vw, 10rem); line-height: .958em;color: #fff;text-align: center;border:none;background: transparent;outline:none} form.searchfield span {display: flex;justify-content: center;flex-direction: row;height: 100%} .collapsed form.searchfield {display: block;position: absolute;width: 100%;height:100vh;right: 0;left:0;top: 0;margin:0;padding:0;background-color: rgba(0, 0, 0, 1);z-index:-1;opacity: 0;transition: opacity 250ms ease-in-out} .collapsing form.searchfield, .collapsed form.searchfield {opacity: 1;background-color: rgba(0, 0, 0, .9);transition: opacity 250ms ease-in-out;-webkit-backdrop-filter: blur(2px);backdrop-filter: blur(2px)} #navSidebar a#switchLang:hover, #navSidebar a#showCart:hover, #navSidebar a#showSearch:hover {opacity: .5} #navSidebar #showCart, #navSidebar #switchLang {opacity: 1;transition: opacity 250ms ease-in-out;vertical-align: middle} #navSidebar.search-popup a#showCart,#navSidebar.search-popup a#switchLang, #navSidebar.search-popup label.switch {opacity: 0; transition: opacity 250ms ease-in-out; cursor:none} #navSidebar.search-popup a#showSearch {background-image: none} #navSidebar.search-popup a#showSearch, .dropdown-filter a.close {padding: 1rem;position: relative;overflow: visible;outline: 0} #navSidebar.search-popup a#showSearch span, .dropdown-filter a.close span {display: inline-block;background-color:#fff;height: 3px;width: 25px;margin-top: 4px;margin-bottom: 4px;transform: rotate(0deg);left: 0;opacity: 1} #navSidebar.search-popup a#showSearch span:nth-child(1), .dropdown-filter a.close span:nth-child(1) {position: absolute;left: 12px;top: 10px;transform: rotate(135deg)} #navSidebar.search-popup a#showSearch span:nth-child(2), .dropdown-filter a.close span:nth-child(2) {position: absolute;left: 12px;top: 10px;transform: rotate(-135deg)} .close:not(:disabled):not(.disabled):focus, .close:not(:disabled):not(.disabled):hover, .dropdown-filter a.close:not(:disabled):not(.disabled) {opacity: 100;} .dropdown-filter a.close:hover span:nth-child(1) {transform: rotate(-135deg);background-color: #33ccff; background-color:var(--CINEMATEK-color)} .dropdown-filter a.close:hover span:nth-child(2) {transform: rotate(135deg);background-color: #33ccff; background-color:var(--CINEMATEK-color)} #scrollspy-body.list-group {width:100%;height: 60vh; overflow-y: auto;box-sizing: content-box;} /*--/ filterDropdown navbar /--*/ .dropdown-filter .dropdown-item {text-align:left; } .navbar-a {background-color: rgba(0, 0, 0, 0); padding-top: 2.5rem;box-shadow: 0px -20px 9px 20px rgba(0, 0, 0, 0)} .dropdown-filter.show {overflow:clip} .dropdown-filter .dropdown-item label {margin:0} .dropdown-filter ul {margin: 0 0 3rem 0; overflow:scroll;font-size: 80%; } /*--/ media responsive navbar /--*/ @media (max-width: 576px) {.dropdown-filter {width:100%}} @media (min-width: 576px) {.dropdown-filter {left: 50vw; width:50vw} .sticky-top {z-index:1}} @media (max-width: 768px) {.navbar-b #CINEMATEK {font-size: 30px}#navSidebar .navbar-nav {flex-direction:row}#navSidebar .navbar-nav .nav-item {padding-left: 10px}#navSidebar ul.navbar-nav li.nav-item {padding-left:.75rem}.navbar-b {padding-top: 2rem;padding-bottom: 1rem}} @media (min-width: 768px) {.dropdown-filter {left: 60vw; width:40vw}#mainNav {padding: 2rem 2rem}.navbar.navbar-reduce, .navbar.navbar-trans {padding-bottom: 1.5rem}.navbar #navSidebar {padding: .5rem 2rem} .navbar-b.navbar-reduce #navSidebar, .navbar.navbar-trans #navSidebar {margin: 0}} @media (min-width: 768px) and (orientation: landscape) {.dropdown-filter {left: 55vw; width:45vw};#mainNav {padding: 2rem 4rem}.navbar #navSidebar {padding: .5rem 4rem}} @media (min-width: 1200px) { .dropdown-filter {left: 70vw; width:30vw}} @media (min-width: 1920px) {.navbar-b #CINEMATEK {font-size: 85px}.navbar-b {font-size: clamp(1.85rem, 1.7667rem + 0.2667vw, 2rem);padding-top:4rem}.navbar-b.navbar-reduce, .navbar.navbar-trans {font-size: 1.75rem;padding-top: 2.25rem}.navbar-b.navbar-reduce #CINEMATEK, .navbar.navbar-trans #CINEMATEK {font-size: 50px}.navbar #navSidebar {font-size: 20px}a.navIcons {width: 1.25rem;height: 1.25rem}} .navbar-b .navbar-nav .dropdown-menu, .navbar-b .dropdown-menu {z-index:1030;transform:translateX(100%);transition: transform 1s cubic-bezier(.25,1,.25,1),opacity .25s ease;opacity: 1; background-color: rgba(0, 0, 0, 1);height: 100vh; width: 100%;left: 0; top: 0;visibility: hidden; display: inline-block; position: fixed;margin: 0; padding: 0;border-radius:0} /*--/ dropdown popup responsive navbar /--*/ .navbar-b .dropdown-menu ul {justify-content:center;} .navbar-b .dropdown-menu ul, .dropdown-filter ul {display: flex; flex-direction: column;height: 100%;width: 100%; padding:2rem; overflow:scroll;padding-top: calc(9vmax + .5rem)}} #mainNav .dropdown-menu ul li {list-style-type:none;text-transform: uppercase;font-size: 2.5rem} .dropdown-filter ul {justify-content: top;} @media (min-width: 768px) { .dropdown-item {margin-bottom: 1.75rem}.navbar-b .navbar-nav .dropdown-menu, .navbar-b.dropdown-popup .dropdown-menu.show {left: 20%;background-color: rgba(0, 0, 0, .7);box-shadow: 0px 6px 9px 0px rgba(0, 0, 0, 0.6);-webkit-backdrop-filter: blur(2px);backdrop-filter: blur(2px)}#mainNav .dropdown-menu ul li, #mainNav .dropdown-item {font-family: "ArcherMedium";font-size: 2.5rem} } @media (max-width: 576px) { .navbar-b {height:calc(10vmax + 1rem);padding-top: 2rem;padding-bottom: 1rem}#navbarDefault a.nav-link, .navbar-b.navbar-popup #navSidebar a.nav-link, .navbar-b.navbar-popup #navbarDefault a.nav-link {color: #000}.navbar-b.dropdown-popup #navSidebar, .navbar-b.dropdown-popup #navSidebar .slider, .navbar-b.dropdown-popup #navSidebar .slider::before {visibility: hidden;transition:none}#navbarDefault a.nav-link, .navbar-popup #navbarDefault a.nav-link {font-size:1.5rem;padding-left: 0} #navbarDefault ul.popup-menu { background-color: rgba(255, 255, 255, 0.7);color: #000;opacity: 0; width:100%; height:100vh;position:fixed;left:0;top:0;display: flex;flex-direction: column;align-items: center;justify-content: center;z-index:-1;transition: opacity 250ms ease-in-out !important;-webkit-backdrop-filter: blur(2px);backdrop-filter: blur(2px)} .navbar-popup #navbarDefault ul.popup-menu {opacity: 1} .navbar-b.navbar-popup #navbarDefault a.nav-link:hover, .navbar-b.navbar-popup #navbarDefault a.nav-link:focus {color: #33ccff; color: var(--CINEMATEK-color) !important;font-size: 2.5rem;transition: all 250ms ease} .navbar-b.navbar-popup #navSidebar:not(.search-popup) #showSearch {background: url(../icons/searchBlack.svg) center center no-repeat; background-size: contain} .navbar-b.navbar-popup a#showCart {background: url(../icons/cartBlack.svg) center center no-repeat; background-size: contain} .navbar-b.navbar-popup #navSidebar:not(.search-popup) .slider.round {border: 1px solid #000} .navbar-b.navbar-popup #navSidebar:not(.search-popup) .slider::before {background-color: #000} #navSidebar ul.navbar-nav li.nav-item {padding-left: 1rem} #mainNav .dropdown-menu ul li,#mainNav .dropdown-item {font-size: 1em;text-align:center} } /*--/ Filter toggler, dropdown & close /--*/ .dropdown-filter.collapsed {transform:translateX(100%);transition: transform .5s cubic-bezier(.25,1,.25,1);transition-delay: unset;z-index:1055;opacity: 100;background-color: rgba(0, 0, 0, .8) !important;box-shadow:0px 6px 9px 0px rgba(0, 0, 0, 0.6);-webkit-backdrop-filter: blur(2px);backdrop-filter: blur(2px);height: 100%; right: 0; top: 0;display: inline-block; position: fixed;margin: 0; padding: 0} .dropdown-filter.collapsed.show {transform:translateX(0);transition: transform .5s cubic-bezier(.25,1,.25,1);transition-delay: unset;z-index:1055;opacity: 100;visibility: visible; } .dropdown-filter li.dropdown-item {list-style-type:none;font-size: 1rem; margin:0 0 0.25rem 0; text-wrap:nowrap} #sorting {width: 50%} @media (max-width: 768px) { #navbarFilter, #sorting {width: 100%} #filterNav #GeneralSwitch, #filterNav a {font-size: 85%} .dropdown-filter ul {justify-content: start} } @media (min-width: 768px) {#navSidebar ul.navbar-nav li.nav-item {padding-left: 1em}} /*--/ Navbar-reduce /--*/ .navbar-b.navbar-reduce .nav-link, .navbar-b.dropdown-popup .dropdown-item {text-transform: uppercase} .navbar-b.navbar-reduce .nav-link:before {background-color: #33ccff; background-color: var(--CINEMATEK-color)} .navbar-b.navbar-reduce .show > .nav-link,.navbar-b.navbar-reduce .active > .nav-link,.navbar-b.navbar-reduce .nav-link.show,.navbar-b.navbar-reduce .nav-link.active {color: #33ccff; color: var(--CINEMATEK-color)} .navbar-b.navbar-reduce .navbar-brand {color: #33ccff; color: var(--CINEMATEK-color)} /*--/ Navbar toggler, dropdown & close /--*/ .navbar-b .navbar-brand {color: #000;font-size: 1.6rem} .navbar-b .navbar-nav .dropdown-item .dropdown-menu,.navbar-b .dropdown .dropdown-menu,.navbar-b .dropdown-btn .dropdown-menu {transform: translateX(100%);visibility: visible !important} .navbar-b .navbar-nav .dropdown-item.show .dropdown-menu,.navbar-b .dropdown.show .dropdown-menu,.navbar-b .dropdown-btn.show .dropdown-menu {transform: translateX(0px);visibility: visible !important} a.dropdown-item::after {content: "\00a0>";font-family: "Archer"; color: #33ccff; color: var(--CINEMATEK-color)} .navbar-b .dropdown-menu a.dropdown-item:hover {background-color:transparent;color: #33ccff;color: var(--CINEMATEK-color);transition: all 500ms ease;text-decoration: underline} a.dropdown-item:focus {background-color: #33ccff; background-color: var(--CINEMATEK-color); border-radius:.1rem} .dropdown-item:focus, .dropdown-item:hover {background-color: transparent;color: #33ccff; color: var(--CINEMATEK-color);} .navbar-b .dropdown-menu .dropdown-item.active {background-color: #33ccff; background-color: var(--CINEMATEK-color)} .navbar-b .dropdown-menu ul li:first-child {padding-bottom:1rem;} .navbar-b .dropdown-menu ul li:first-child a {color: #33ccff; color: var(--CINEMATEK-color)} .navbar-b .dropdown-menu ul li:first-child a:focus {color: #fff;} .navbar-b.navbar-popup .navbar-toggler span {background-color: #000} .navbar-b.dropdown-popup .navbar-toggler span, #navSidebar.search-popup a#showSearch span {background-color: #fff} .navbar-b.dropdown-popup .navbar-toggler, #navSidebar.search-popup a#showSearch span {z-index: 19999} .dropdown-toggle::after {display:none} .navbar-toggler {position: relative;margin: .3125rem 0;padding:0} .navbar-toggler:focus,.navbar-toggler:active,.navIcons:focus,.navIcons:active {outline: 0 !important;box-shadow:none} .navbar-toggler span {display: block;background-color: #fff;height: 3px;width: 25px;margin-top: 4px;margin-bottom: 4px;transform: rotate(0deg);right: 0;opacity: 1} .navbar-toggler span:nth-child(1),.navbar-toggler span:nth-child(3),#navSidebar.search-popup a#showSearch span,.dropdown-filter a.close span {transition: transform .35s ease-in-out} .navbar-toggler:not(.collapsed) span:nth-child(1), .dropdown-filter:not(.collapsed) a.close span:nth-child(1) {position: absolute;right: 0;top: .25rem;transform: rotate(135deg);opacity: 0.9} .navbar-toggler:not(.collapsed) span:nth-child(2) {height: 12px; visibility: hidden; background-color: transparent} .navbar-toggler:not(.collapsed) span:nth-child(3), .dropdown-filter:not(.collapsed) a.close span:nth-child(2) {position: absolute; right: 0; top: .25rem;transform: rotate(-135deg);opacity: 0.9} /*--/ Nav Breadcrumbs /--*/ .crumb {font-size: 1rem;font-feature-settings: "smcp", "c2sc";font-family: "ArcherSemibold";line-height:1.95rem;margin-bottom: 1.5rem;color: #fff; color: var(--Bg-color)} .crumb > a {text-decoration: none;color: #fff; color: var(--Bg-color)} .crumb > a:hover {color: #33ccff; color: var(--CINEMATEK-color)} .crumb > a:nth-child(2)::before {content: " > ";font-family:"ArcherLight"} /*-------------------------------------------------------------- # Intro Section --------------------------------------------------------------*/ .intro, #Hero {height: 100vh;position: relative;color: #fff; margin: 0; background-color:#000} .intro-content {text-align: left;position: absolute;left:1.75rem;right:1.75rem;bottom: 6rem;padding: 0;z-index:1; -ms-user-select: none; -webkit-user-select: none; user-select: none;cursor: pointer;} a.intro-link {cursor:pointer;z-index:999} a.hero-link {ursor:pointer;z-index:1000; display:block} @media (min-width: 576px) {.carousel-control-next, .carousel-control-prev {width:5%}} .img-gradient {z-index: index -1000} .img-gradient::before {content:"";width:100vw; height:100vh;background: radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.8));background-blend-mode: darken;opacity: .8;z-index: 1;display: block;position: absolute;top: 0;left: 0} .img-gradient::after {content: "";width: 100vw;height: 40vh;background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));background-blend-mode: darken;opacity: .7;z-index: 1;display: block;position: absolute;bottom: 0;left: 0} .intro-title {font-family:"ArcherBold", sans-serif;color: #33ccff; color: var(--CINEMATEK-color);font-size: 11vmin;line-height:10vmin;max-width: 16ch;margin-bottom:.25rem;} h3.intro-title {font-size: 8vmin;line-height:8vmin;margin-bottom:.25rem;max-width: 20ch} .intro-subtitle {color: #fff;font-family:"ArcherMedium", sans-serif;font-size: 4.3vmin;line-height:4vmin;margin-bottom:.25rem;margin-top: .5rem;} p.intro-subtitle {font-family:"ArcherMedium", sans-serif;font-size: 3.5vmin;line-height:4.5vmin;margin-bottom:.25rem;} .hero-subtitle, p.intro-txt {color: #33ccff; color: var(--CINEMATEK-color);} .intro-date {color: #fff !important;font-size: 4.5vmin;line-height:normal;font-family:"ArcherSemibold", sans-serif;margin-bottom:.25rem;} .intro-title span, .intro-subtitle span, .intro-date span {font-family:"Archer", sans-serif} .intro-dossier-date {font-size: 2vmin;line-height:normal;font-family:"ArcherMediumItalic", sans-serif;} .intro-dossier-date span {font-family:"ArcherItalic", sans-serif} .date span {font-family:"ArcherMedium", sans-serif} @media (max-width: 576px) {.intro-subtitle {font-size: 4vmin;line-height:4.2vmin}.intro-date, .intro-dossier-date {font-size: 4.5vmin;margin-top: .25rem}.intro-txt {font-size:87%;padding-top:.5rem;padding-bottom:1rem;max-width:35ch;} p.lead {margin-bottom: 2.5rem;padding-top:1.25rem}.img-gradient::before {opacity: 1}.img-gradient::after {opacity: 1;height: 60vh}} @media (min-width: 576px) {.intro-content {bottom:4rem;left:2.5rem;right:2.5rem}.intro-txt {padding-bottom: 2rem;padding-top:.5rem;padding-bottom:3.5rem;max-width:60ch;}} @media (min-width: 992px) {.intro-content {left:4rem;right:4rem;bottom:2rem} .intro-txt {font-size:100%;padding-top:1rem;max-width:80ch;}} @media (min-width: 1200px) {h3.intro-title {font-size: 6vmin;max-width: 50ch}.intro-title {max-width: 50ch} .intro-txt {font-size:120%;line-height:1.6;padding-top:1rem;padding-bottom:4.5rem;max-width:115ch;}} /*-------------------------------------------------------------- # Footer NavBar --------------------------------------------------------------*/ footer {color: var(--Bg-color);width: 100%;margin-right: auto;margin-left: auto;max-width: calc((100vw - 30px))} @media (min-width:576px) {footer {max-width: calc((100vw - 20%))} footer {padding: 1rem 2rem}} footer :is(h5,h6) {text-transform: uppercase} footer h5 {font-family:"ArcherSemibold";color: #fff; color: var(--Bg-color)} #navFooter > div > div > ul.small {font-size: 97%} footer li {padding-bottom: .5em} footer a { color: #fff;color: var(--Bg-color);text-decoration: none} footer a:hover,footer input.submit:hover,footer a:focus,footer input.submit:focus {color: #33ccff; color: var(--CINEMATEK-color)} footer .active a {text-decoration: underline; text-decoration-style: solid} footer fieldset {overflow: hidden} footer input,footer input:focus {border: 1px solid;padding: .25em .5em} .form-control {border: 1px solid #33ccff; border-color: var(--CINEMATEK-color);;padding: .25em .5em;border-radius: 0} footer nav a[href="/"] {color: var(--Bg-color)} /* Footer Social Icons */ #footerSocial a {text-indent: -1000em;overflow: hidden;width: 2rem;height: 2rem;background-position: center center;background-repeat: no-repeat;background-size: contain;display: block;margin-bottom: 1rem} #footerSocial li {text-decoration: none;list-style-type:none} ul#footerSocial li {margin: calc(2vw)} #footerSocial .facebook {background-image: url("../icons/iconFacebook.svg")} #footerSocial .instagram {background-image: url("../icons/iconInstagram.svg")} #footerSocial .youtube {background-image: url("../icons/iconYoutube.svg")} #footerSocial .twitter {background-image: url("../icons/iconTwitter.svg")} #footerSocial .linkedin {background-image: url("../icons/iconLinkedIn.svg")} #footerSocial .vimeo {background-image: url("../icons/iconVimeo.svg")} #footerSocial .mailchimp {background-image: url("../icons/iconMailchimp.svg")} #footerSocial .bluesky {background-image: url("../icons/iconBlueskyWhite.svg")} #footerSocial .mastodon {background-image: url("../icons/iconMastodonWhite.svg")} #footerSocial .letterbox {background-image: url("../icons/iconLetterboxdWhite.svg")} body.light-theme #footerSocial .facebook {background-image: url("../icons/iconFacebookBlack.svg")} body.light-theme #footerSocial .instagram {background-image: url("../icons/iconInstagramBlack.svg")} body.light-theme #footerSocial .youtube {background-image: url("../icons/iconYoutubeBlack.svg")} body.light-theme #footerSocial .twitter {background-image: url("../icons/iconTwitterBlack.svg")} body.light-theme #footerSocial .linkedin {background-image: url("../icons/iconLinkedInBlack.svg")} body.light-theme #footerSocial .vimeo {background-image: url("../icons/iconVimeoBlack.svg")} body.light-theme #footerSocial .mailchimp {background-image: url("../icons/iconMailchimpBlack.svg")} body.light-theme #footerSocial .bluesky {background-image: url("../icons/iconBlueskyBlack.svg")} body.light-theme #footerSocial .mastodon {background-image: url("../icons/iconMastodonBlack.svg")} body.light-theme #footerSocial .letterbox {background-image: url("../icons/iconLetterboxdBlack.svg")} @media (min-width:576px) { ul.footer-menu { display: flex; justify-content: flex-start; width: 100%; margin: 0 0 1rem 0; padding: 0; } ul.footer-menu:first-of-type {margin-right:1rem} ul.footer-menu li { flex: 0 1 auto; /* Default */ list-style-type: none; text-align: left; padding-right:1rem; } } #footerSocial li a {width: 30px;height: 30px} @media (min-width:376px) {ul#footerSocial li {margin: calc(1.5vw)}} @media (min-width:768px) {ul#footerSocial li {margin: 0} #footerSocial {float:right}} @media screen and (max-width:576px) {#footerSocial li a {width: 20px;height: 20px}} @media screen and (max-width: 768px) {#footerSocial {position: relative;padding: 0;text-align: center}#footerSocial li, #footerSocial li a {display: inline-block}#footerSocial a {margin: .5rem 0}footer h5 {font-size: clamp(0.8rem, 0.55rem + 0.8vw, 1.25rem);}} @media (max-width: 1200px) {footer h5 {font-size: clamp(0.8rem, 0.55rem + 0.8vw, 1rem);}footer h6 {font-size: clamp(0.75rem, 0.55rem + 0.8vw, .8rem);}} @media (min-width: 1200px) {footer .small {font-size: 90%; line-height:1.25rem}} /*-------------------------------------------------------------- # Main section --------------------------------------------------------------*/ #main, #homepage {width: 100%;margin-right: auto;margin-left: auto;max-width: calc((100vw - 30px));background-color: var(--Main-color)} #homepage > .row {padding-top:3vmax} #mainEvent, #maincalendar {width: 100%;margin-right: auto;margin-left: auto;padding-top:0 !important;max-width: calc((100vw - 30px))} :is(#main, #homepage, #mainEvent, #maincalendar) .row p:not(.form-group) > :last-child { margin-bottom: 0 !important} @media (min-width: 576px) {#main > .row, #homepage > .row {padding-top:10vmax}} @media (min-width:576px) {#main, #homepage, #maincalendar, #mainEvent {max-width: calc((100vw - 20%))}} .mainTitle {margin: 0 0 1rem 0;scroll-margin-top: calc(1vh + 8rem)} .mainTitle:not(:first-child) {margin-top: 3rem;} @media all and (min-width: 576px){main{width: calc((100vw - 20%)) !important;max-width: 1920px !important; }} /*-------------------------------------------------------------- # ICONS svg --------------------------------------------------------------*/ span.icon, a.icon {vertical-align: middle;font-size:inherit;display:inline-flex;text-indent: -1000em;overflow: hidden;background-position: center center;background-repeat: no-repeat;background-size: contain; width: 1.25rem; height: 1.25rem;border-radius:0; padding:0;/* margin-top: -.35rem; */} .card-date span.icon {margin:0} .ledoux {background-image: url("../icons/LEDOUX-white.svg")} body.light-theme .ledoux {background-image: url("../icons/LEDOUX.svg")} .plateau {background-image: url("../icons/PLATEAU-white.svg")} body.light-theme .plateau {background-image: url("../icons/PLATEAU.svg")} .foyer {background-image: url("../icons/foyer-white.svg")} body.light-theme .foyer {background-image: url("../icons/foyer.svg")} span.flagey {background-image: url('../icons/FLAGEY-white.svg')} body.light-theme .flagey {background-image: url('../icons/FLAGEY.svg')} .piano {background-image: url("../icons/piano-white.svg");margin-top: -.35rem} body.light-theme .piano {background-image: url("../icons/piano.svg")} a.btnCart{font-size: 3rem !important;background: url("../icons/cartWhite.svg") center center no-repeat;background-size: contain} body.light-theme a.btnCart {background: url("../icons/cartBlack.svg") center center no-repeat;background-size: contain} button.btnCart {border:none;background: url("../icons/cartWhite.svg") center center no-repeat;background-size: contain} body.light-theme button.btnCart {border:none;background: url("../icons/cartBlack.svg") center center no-repeat;background-size: contain} button.btnAt {border:none;background: url("../icons/at-white.svg") center center no-repeat;background-size: contain; vertical-align: middle;} body.light-theme button.btnAt {border:none;background: url("../icons/at-solid.svg") center center no-repeat;background-size: contain} a.text-hide, a.text-hide:hover, button.text-hide, button.text-hide:hover {text-indent: -1000em;overflow: hidden;display: inline-block;width: 1.25rem;height: 1.25rem;opacity: 1;color: transparent !important} button.text-hide, button.text-hide:hover {margin-right: 5px;} /*-------------------------------------------------------------- # Event detail page --------------------------------------------------------------*/ .event_head {z-index:1;top: 0;position: -webkit-sticky;position: sticky;height: auto;display: flex;flex-direction: column;padding: 18vh 0 0 0;background-color: #000;background-color: var(--Main-color);box-shadow: 0 8px 12px -6px rgba(0,0,0, .05);hyphens: none;} @media (min-width:576px) {.event_body {position:relative ;z-index:-1} } .event_notice {position:relative; display:contents} .group_notice {display:flex} .event_img {z-index:-1;height: -webkit-fit-content;height: -moz-fit-content;height: fit-content;flex-direction: column} .event_img figure {width:100%} .event_img img {z-index:-1;height: auto;width:100%;margin-bottom: 1rem;position: relative} .event_img figure img {margin-bottom: 0} .notice, .notice + p:not(.small) {font-family: "ArcherMedium";font-size:90%; line-height:1.85;padding-top: .5rem} #events p.lead.semi + p {font-size: 1.25rem; line-height:2rem;margin-bottom: 1.5rem;hyphens:none;font-family: "ArcherSemibold";} .event_footer {margin:0; padding-bottom: .5rem; background-color: #000;background-color: var(--Main-color)} .event_footer .card {padding-top:0} .event_footer a.btnCart {margin-top:0;} .event_details .card {background-color: #000;background-color: var(--Main-color)} .event_details p.small {margin-bottom:.5rem} @media (min-width: 880px) { .event_img {margin: 0 2rem 0 1rem;width:50vw; max-width: 960px;} .event_details .event_img {margin: 10vh 2rem 0 1rem;} .event_details {display: flex;position: relative;flex-direction: row-reverse;align-items:baseline;padding: 10vh 0 0 0} .group_details {display: flex;position: relative;flex-direction: row-reverse;align-items:flex-start;padding: 20vh 0 0 0} .group-event > .event_details {align-items:flex-start} .event_head,.event_body {box-shadow: none;margin: 0;padding: 0;position: unset} .event_notice {display:flex;flex-direction: column; width:50vw;min-height:100vh; top: 0; position: -webkit-sticky;position: sticky;justify-content: center;align-content: center} .group_notice { width:90vw;} .event_details .card {margin-top: 1rem}.notice {font-family: "ArcherMedium";font-size:90%; line-height:1.85;margin:0; padding: .5rem 0}} @media (max-height: 576px) and (orientation: landscape) {.event_notice, .group_notice {justify-content: start;overflow: scroll} .group-event .event_img {padding: 20vh 0} @media (min-width: 1200px) {.notice {font-size:100%;line-height:1.95}.event_details p.small {font-size: 85%;line-height: 1.2rem; margin-bottom:0}} @media (min-width:576px) {.event_img{padding-top: 20vh} .group_details .event_img {padding-top: 0} } @media (min-height:1200px) {.event_img {padding-top: 10vh}.event_notice {padding: 20vh 0} }} /*-------------------------------------------------------------- # Publications & Dossiers --------------------------------------------------------------*/ .sticky {top:calc(10vmax + 2rem);background-color: #000;background-color: var(--Main-color);hyphens: auto;} .sticky H1 {font-size:1.5rem;hyphens: auto;} #scrollspy-body a.list-group-item {padding:.5rem 0;margin-left:.75rem; border:none; max-width:20ch; line-height:1.2} #scrollspy-body a.list-group-item.active {font-family: "ArcherBold";background:transparent;color: #33ccff; color:var(--CINEMATEK-color)} #scrollspy-body a.list-group-item.active::before {content:"> ";margin-left: -.75rem;} @media (max-width: 768px) {.scrollspy {top: 0;z-index:2;padding-top:calc(10vmax + 2rem);padding-bottom:1rem;position: -webkit-sticky;position: sticky;background-color: #000;background-color: var(--Main-color);box-shadow: 0 8px 12px -6px rgba(0,0,0, .02)}} @media (max-width: 768px) { #scrollspy-body a.list-group-item {padding:0} .mainTitle {scroll-margin-top: calc(50vmax + 1rem)}} @media (max-width: 475px) {#scrollspy-body {display: none}.scrollspy{padding-bottom:0}} .counter-group {margin: 5rem auto;} .sticky > p.intro-text {font-size: clamp(0.75rem, 0.4rem + 0.6vw, 1.15rem);line-height:120%} .counterCol {margin-top:1rem; margin-bottom:1rem;text-align: center} p.counter-text {font-family: "ArcherSemibold";font-feature-settings: "smcp", "c2sc";margin-bottom: 0;text-align: center !important;} /*-------------------------------------------------------------- # PROGRAMMA --------------------------------------------------------------*/ .film p.card-title > .lead {line-height:1.4rem} .film p.card-title, p.film__director {line-height:1.1rem} .film p.card-title > .film__details {font-size: 60%;} /*--/ INTRO Programma /--*/ #collapse-heading > div > .arrow {transition: 0.5s; display:inline-block;} #collapse-heading > div > div {text-align:right;} #collapse-heading:is(.collapsed) > div > div::After {content: attr(data-descr); font-family:"ArcherMedium";font-size: small;} #collapse-heading > div > .arrow {font-size:.9rem;} @media (max-width:576px) {#collapse-heading > div > .arrow {font-size:.9rem;} } #collapse-heading:not(.collapsed) > div > .arrow {transform: rotate(180deg);} #collapse-heading:is(.collapsed) > div > .arrow {transform: rotate(0deg); } #collapse-heading > div > div {position: relative; width:100%;} #collapse-heading > div > div:hover { animation: arrow .3s infinite; animation-direction: alternate; } @keyframes arrow { 0% {top: 0px;} 100% {top: 5px;} } @media (max-width: 576px) { #collapse-heading > div > div {animation: arrow .3s infinite;animation-direction: alternate; text-align:left;} #collapse-heading:is(.collapsed) > div > div::After {content: attr(data-descr); font-family:"ArcherMedium";} #collapse-heading:not(.collapsed) > div > .arrow {transform: rotate(180deg);} @keyframes arrow { 0% {top: 0px;} 100% {top: 5px;} }} /*-------------------------------------------------------------- # calendar #maincalendar + #today homepage --------------------------------------------------------------*/ #maincalendar a.screening p {margin-bottom: 0} #maincalendar .screening-date {background-color: rgba(051,204,255, .3);background-color: var(--CINEMATEK-backgroundcolor)} #maincalendar a.special, #today a.special {background-color: rgba(var(051,204,255),.5);background-color: var(--CINEMATEK-secondary)} #maincalendar a.special .text-color, #today a.special .text-color {color: #fff;color: var(--Bg-color)} #maincalendar a:not(.btn):hover, #today a:not(.btn):hover {color: #33ccff;color: var(--CINEMATEK-color); background-color: rgba(051,204,255, .35);background-color: var(--CINEMATEK-backgroundcolor)} #maincalendar a:focus, #maincalendar a.special:hover,#today a.special:hover {color: #fff;color: var(--Bg-color);background-color: #33ccff;background-color: var(--CINEMATEK-color)} #maincalendar a:hover .text-color, #maincalendar a:focus .text-color, #today a:hover .text-color, #today a:focus .text-color {color: #fff;color: var(--Bg-color)} #maincalendar .screening-date-group:is(.screening--inactive) a:not(.btn), #today a :is(h1,h2,h3,h4,h5,h6, .special) {color: #fff; color: var(--Bg-color);} #maincalendar .screening-date-group:is(.screening--inactive) a:not(.btn) {background-color: #e7e7e7} #today a:not(.btn):first-child {border-top: 1px solid var(--Bg-color)} #today a:not(.btn):last-of-type {border-bottom: 1px solid var(--Bg-color)} h4.date {white-space:nowrap;font-size:1rem;} @media (min-width: 1200px) {h4.date {white-space:nowrap;font-size: 1.3rem;}} /* calendar */ .screenings {border-top: 2px solid var(--Bg-color); border-bottom: 3px solid var(--Bg-color)} .screening-date {border-top: 1px solid var(--Bg-color); border-bottom: 1px solid var(--Bg-color)} .screening:nth-child(n+2 of :not(.screening--hidden)) {border-top: 1px dashed var(--Bg-color)} .screening:first-of-type, .screening:only-child, .screening:only-of-type {border: none;} .screening--hidden,.program-filter--hidden {display: none;} .screening-date-group--hidden {display: none;} #maincalendar screening--inactive, #maincalendar .screening--inactive .screening-elements {color: #4e4e4e;color: var(--gray); opacity:.6} #maincalendar .screening--inactive .text-color {color: #000;color: var(--Main-color); opacity: 1} #maincalendar .screening--inactive .screening-elements a.special {background-color: #4e4e4e;background-color: var(--gray) !important; opacity:.7} #maincalendar .screening--inactive .screening-elements a.special:hover, #maincalendar .screening--inactive a:hover {background-color: #4e4e4e;background-color: var(--gray) !important;opacity:1} #maincalendar .screening--inactive .screening-date {color: #4e4e4e;color: var(--gray)) ;background-color: #4e4e4e;background-color: var(--gray);} #maincalendar .screening--inactive .screening-date h2 {color: #000;color: var(--Main-color); opacity:.6} #maincalendar .screening--inactive {background-color: #c7c7c7; background-color: var(--lightgray); opacity:.9} #calendar .film__cast{display: none;} /* inactive ticketmatic */ .btnCart--disabled {opacity: .4 !important;} @media all and (min-width: 768px){.event-ticketmatic{position: absolute;top: 0;right: 0;bottom: 0;width: 3rem !important;background-position: center !important;height: 100% !important;background-size: 1.3125rem !important;}} .alert-soldout {color: var(--danger)} .alert-cancelled, a:hover .alert-cancelled {color: var(--danger)} #todayFL a {border: none !important;} /* calendar filters */ .calendar--filter {z-index:1;top: 0;position: -webkit-sticky;position: sticky;height: auto;display: flex;flex-direction: column;margin:0;padding: 9rem 0 1.25rem 0;background-color: #000;background-color: var(--Main-color);box-shadow: 0 8px 12px -6px rgba(0,0,0, .02)} .search {position:relative;height: calc(1.5em + .75rem + 2px);transition: width 450ms cubic-bezier(.25,.25,0,1);padding: 8px 0} .search-expanded {position:relative;height: calc(1.5em + .75rem + 2px);padding: 8px 0} a.search__submit, a.search__submit:hover {margin-right: 0;width:calc(var(--size) - 8px)} .search__input {border: 0;border-radius: 0;outline: 0;z-index: 2;position: absolute;top: 0;bottom: 0;left: 0;width: 70%;opacity: 0;cursor: pointer;padding: 0 .5rem;background: transparent;} .search__select {border: 0;flex-grow: 1;outline: 0;z-index: 2;position: absolute;top: 0;bottom: 0;right:0;width: 30%;opacity: 0;cursor: pointer;padding: 0 .5rem;} .search__submit {margin-left: auto;margin-right: 0;padding: 0;background: 0;border: 0;cursor: pointer;transition: background 200ms ease-out;color: var(--CINEMATEK-color);} .search__input {opacity: 0;z-index: initial;} .search__select {opacity: 0;z-index: initial; font-size:90%; height:auto} .search__submit {width:calc(var(--size) - 8px);background: url(../icons/searchWhite.svg) center center no-repeat;background-size: contain} body.light-theme .search__submit {width:calc(var(--size) - 8px);background: url(../icons/searchBlack.svg) center center no-repeat;background-size: contain} .search__input:focus {z-index:1;box-shadow: 0 0 0 3px var(--CINEMATEK-color) !important; } .search:focus-within .search__select, .search-expanded .search__select {opacity: 1;outline: 0;color:#fff;background-color: #33ccff;background-color: var(--CINEMATEK-color);border: 2px solid var(--CINEMATEK-color); } .search:focus-within .search__input, .search-expanded .search__input {opacity: 1;outline: 0;width:70%;border: 1px solid var(--CINEMATEK-color);background-color: #fff} .search__input::placeholder {color: #33ccff;color: var(--CINEMATEK-color)} @media (min-width: 768px) {.search__select {right: 0;}.search:focus-within .search__input, .search-expanded .search__input {}.search__select { font-size:100%}} @media (max-width: 576px) {.custom-select, .form-control-md, .col-form-label-sm {font-size: 75%}.form-check-input {margin-top:-.15rem}} @media (max-width: 570px) {.carrier--Type{padding-top:1rem !important} } /*-------------------------------------------------------------- # MASONRY GRID Components --------------------------------------------------------------*/ .grid {} /* clear fix */ .grid:after {content: '';display: block;clear: both;} /* ---- .grid-item ---- */ .grid-item {width: 100% ;margin-bottom:1rem; padding: 0 .5rem 0 0} @media screen and (min-width: 768px) {.grid-item { width: 48% }} @media screen and (min-width: 1200px) {.grid-item { width: 32.333%; }} @media screen and (min-width: 1950px) {.grid-item { width: 19.333%; }} /*-------------------------------------------------------------- # BTSRP Components --------------------------------------------------------------*/ /* BTSRP carousel Nav & Hero header carousel */ .carousel-control-prev, .carousel-control-prev-icon {z-index:999;left: 0; border: none;background-image:none;cursor: url("../icons/arrowLeft.svg") 0 29, auto !important} .carousel-control-next, .carousel-control-next-icon {z-index:999;right: 0;border: none;background-image:none;cursor: url("../icons/arrowRight.svg") 70 29, auto !important} .carousel-indicators {height: 8px;position: absolute;left:unset;bottom: 1rem;right: 1rem;margin:0} .carousel-indicators .active {background-color: #33ccff; background-color: var(--CINEMATEK-color)} #headerCarousel .carousel-indicators {bottom: 6rem;right: 1rem} .imgCarousel .carousel-indicators {} .imgCarousel .carousel-indicators li {border-color: #fff} .imgCarousel .carousel-indicators .active {background-color: #fff} .imgCarousel .carousel-caption figcaption {padding:1rem; color: #fff} .carousel-indicators li {display: inline-block;width: 4px;height: 4px;margin: 0 3px;overflow: hidden} .carousel-indicators li {display: block;width: 5px;height: 5px;border-radius: 50%;cursor: pointer;background-color: transparent;outline: none;border-color: #33ccff; border: 1px var(--CINEMATEK-color) solid} @media (min-width: 576px) {.carousel-indicators li {width: 10px;height: 10px;margin: 0 8px}.carousel-indicators li button {width: 8px;height: 8px}} .carousel-caption {position: absolute;right: 1rem;bottom: 1rem;left: 1rem;z-index: 10;padding-top: 0;padding-bottom: 0;text-align: left} @media (max-width: 375px) {.imgCarousel .carousel-indicators {opacity: .75}} @media (min-width: 375px) {#headerCarousel .carousel-indicators {bottom: 5rem;right: 1rem}} @media (min-width: 576px) {#headerCarousel .carousel-indicators {bottom: 3rem;right: 2rem}} @media (min-width: 768px) {#headerCarousel .carousel-indicators {bottom:4rem;right: 2rem}.carousel-indicators li {width: 8px;height: 8px;margin: 0 5px}.carousel-indicators li button {width: 8px;height: 8px}} /* BTSRP accordion */ #today a.accordion:focus {text-decoration: none} /*------/ BTSRP tooltips /------*/ .tooltip-inner {font-family: "Archerbold", sans-serif; font-weight:400;font-style: normal;color: #fff;color: var(--Bg-color);background-color: rgba(051,204,255, .7);background-color: var(--CINEMATEK-secondary);-webkit-backdrop-filter: blur(4px);backdrop-filter: blur(4px); -webkit-backdrop-filter: contrast(60%); backdrop-filter: contrast(60%);} .bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {border-bottom-color: rgba(051,204,255, .7);border-bottom-color: var(--CINEMATEK-secondary);-webkit-backdrop-filter: blur(3px);backdrop-filter: blur(3px)} .bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before {border-top-color: rgba(051,204,255, .7);border-top-color:var(--CINEMATEK-secondary);-webkit-backdrop-filter: blur(3px);backdrop-filter: blur(3px)} .bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before {border-right-color: rgba(051,204,255, .7);border-right-color:var(--CINEMATEK-secondary);-webkit-backdrop-filter: blur(3px);backdrop-filter: blur(3px)} .bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before {border-left-color: rgba(051,204,255, .7);border-left-color:var(--CINEMATEK-secondary);-webkit-backdrop-filter: blur(3px);backdrop-filter: blur(3px)} @media (max-width: 576px) {.tooltip {visibility: hidden}} /*-------------------------------------------------------------- # PRINT --------------------------------------------------------------*/ @media print { body {-webkit-print-color-adjust: exact;margin: 0; padding:0;} footer {display:none;margin: 0; padding:0;} #calendar {width: 100%; margin: 0 !important; padding:0 !important; float: none;} .calendar > .row:first-of-type { margin-top: 0 !important} @page { margin: 1cm } .program-filter, .calendar--filter {display:none; padding:0; margin:0} .screenings { margin-top: 0} a.screening:link, a.screening:visited, a.screening {text-decoration:none;} .screening--inactive {opacity: 1 !important} .plateau, .ledoux {background-image:none !important} button.btnCart {background-image:none !important; display:none} span.screening__location {overflow:visible; text-indent:0;border:none !important} .piano {background:url("https://cinematek.be/build/icons/piano.svg") no-repeat !important; display: inline-block !important;max-width: 100% !important;border:none;} .screening-date-group {margin-top: 2cm;page-break-after:always} } /*-------------------------------------------------------------- # PRINT END --------------------------------------------------------------*/ /* search */ .search-amount{font-size: 62.5%;} .search__search-form{overflow: initial;align-items: center;} .search__search-form .search__input{ position: relative; padding: 8px; width: initial; flex: 1; margin-right: 1rem; } .search__search-form .search__submit{ width: 1.25rem; height: 1.25rem;} .search-nav{ margin-bottom: 1.5rem;} .search-expanded{font-size: 1rem;} .partner-group__partners{padding: 0;padding-inline-start: 0 !important;} .partner-group__partner{display: inline-block;margin-right: .25rem !important;} .partner-group__partner::marker{display: none;content: "";} .no-results{ margin: 3rem 0; display: none; } .no-results--active{ display: block; } /*-------------------------------------------------------------- # ONLY DEMO PURPOSE --------------------------------------------------------------*/ #overview[data-arrange="thematic"] { visibility: hidden;display:none} #overview[data-arrange="overview"] { visibility:visible;} #thematic[data-arrange="overview"] { visibility: hidden;display:none} #thematic[data-arrange="thematic"] { visibility:visible;}