/**
* Template Name: CINEMATEK HERO HEADER 2021 - v0.0.7
* 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),.05);

--info: var(--CINEMATEK-color);
--warning: var(--CINEMATEK-color);
--success: #3cff00;
--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;}
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)}
@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: 500;font-style: normal;font-feature-settings: "ss01", "ss02", "ss20"}
@font-face {font-family: "Archer";src:url("../fonts/woff2/ArcherSSm-BookItalic-Pro_Web.woff2") format("woff2"),url("../fonts/woff/ArcherSSm-BookItalic-Pro_Web.woff") format("woff");font-weight: 500;font-style: italic;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: "ArcherBold";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: italic;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: 600;font-style: normal;font-feature-settings: "ss01", "ss02", "ss20"}
@font-face {font-family: "ArcherMedium";src:url("../fonts/woff2/ArcherSSm-MediumItalic-Pro_Web.woff2") format("woff2"),url("../fonts/woff/ArcherSSm-Medium-Pro_Web.woff") format("woff");font-weight: 600;font-style: italic;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: 700;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: 400;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: 1.1rem;line-height:1.65rem}
section {margin-right:0;margin-left:0;display:block; width:100%}
a {color: #fff; color:var(--Bg-color);text-decoration: none}
p > a, #main li > a {color: #33ccff; color:var(--CINEMATEK-color);text-decoration: underline}
section#events a:not(.btn) {text-decoration: underline}
p,.plain {font-family:"Archer"; min-width:10ch}
small, .light {font-family:"ArcherLight"}
strong, .bold {font-family: "Archerbold"}
.medium {font-family: "ArcherMedium"}
.semi, .medium > strong, dl > strong  {font-family: "ArcherSemibold"}
.line-height {line-height:1}
.small, small {line-height:initial}

blockquote {font-family: "ArcherMedium";margin:2rem auto; padding:2.5rem 2rem}
blockquote.citation {max-width:50ch;font-size:120%;line-height:2.25rem}
blockquote:not(.special) > p::before {content:"«\00a0";font-family:"Archer"}
blockquote:not(.special) > 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}

h1,h2,h3,h4,h5,h6 {font-family:"ArcherBold";font-weight: 800;color: #33ccff;color: var(--CINEMATEK-color);line-height:1}
:is(h1,h2,h3,h4,h5,h6) a {color: #33ccff;color: var(--CINEMATEK-color);text-decoration: underline; text-decoration-style: dotted}
:is(h1,h2,h3,h4,h5,h6) a:hover {color: #fff;color: var(--Bg-color);text-decoration: 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}

:is(h1,h2,h3,h4,h5,h6) + .subtitle {padding: 0 0 1rem 0}

.interviewer {font-family: "ArcherMedium";font-style: italic;color: #000; color: var(--CINEMATEK-color);font-size:125%;padding: 2.25rem 0.5rem 1.95rem 0.5rem; margin-bottom:0; max-width:80ch;min-width:10ch}

:is(h1,h2,h3,h4,h5,h6,.subtitle) + .interviewer {padding: .5rem 0 .15rem 0}

span.alt, .alt {font-feature-settings: "aalt"}
span.case, .case {font-feature-settings: "case"}
span.num, .num {font-feature-settings: "tnum"}
sup {font-feature-settings: "sups"}
sub {font-feature-settings: "subs"}
.smallcaps {font-feature-settings: "smcp", "c2sc"}

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}

:is(h1,h2,h3,h4,h5,h6) span {font-family: "Archer"}

/*--/  lists /--*/
#main ul, #main ol:not(.carousel-indicators) {padding-inline-start: 0}
@media (min-width: 576px) {#main ul:not(.list-group-flush), #main ol:not(.carousel-indicators) {padding-inline-start: 2ch}}

#main ul li::marker {font-family:"ArcherLight";font-size: smaller;font-variant-numeric:oldstyle-nums}
#main ul 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:1.15rem;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}

/*--/  colors /--*/
.text-color {color: #33ccff; color: var(--CINEMATEK-color)}
a.text-color:hover, a.text-color:focus {color: #fff; color: var(--Bg-color)}
a.text-color:focus {border-bottom: #fff solid 1px;border-color:var(--Bg-color);text-decoration: none}

.bg-color {background-color: #33ccff; background-color: var(--CINEMATEK-color)}
a.bg-color:hover, button.bg-color:hover, input.bg-color:hover {background-color: #fff; 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}

/*--/  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-bottom-solid {border-bottom: 1px solid #fff; border-bottom: 1px 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(--Bg-color) !important}
.border-gray {border-color: #afafaf; border-color: var(--lightgray) !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}

/*--------------------------------------------------------------
# General BOOTSTRAP BOOTSTRAP
--------------------------------------------------------------*/
@media (min-width: 1900px) {.container{max-width: 1900px} .h1, h1 {font-size: 3.5rem;font-family: "ArcherSemibold"}}
.lead {line-height:2rem;margin-bottom: 1.5rem}
/*--/ 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; color: var(--Bg-color);}
.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);}

/*--/ BOOTSTRAP pagination /--*/
.page-link {color: #33ccff; color: var(--CINEMATEK-color); background:transparent}
.page-item.active a.page-link {text-decoration:none !important; text-decoration-style:none}
.page-item.disabled .page-link {background:transparent}
.page-item.active .page-link, .page-link:hover {color: #fff; color: var(--Bg-color);border-color: #33ccff; border-color: var(--CINEMATEK-color); background-color: #33ccff; background-color: var(--CINEMATEK-color)}
.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}


/*--/ 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 :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}

.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 {background-color:unset;border-bottom: 0;border-top: 2px solid #fff;border-top: 2px solid var(--Bg-color);padding-left: 0;padding-right: 0;padding-top: .25rem;padding-bottom: .25rem}

.card-title {margin:0;font-family: "ArcherMedium", sans-serif;padding-top: 0;padding-bottom: 0}
.card-title.smallcaps {line-height: 1.2rem !important}
.card-body {padding-left: 0;padding-right: 0;padding-top: .5rem;padding-bottom: .75rem;border-bottom: 0; border-top: 0}
.card-footer {font-size:.7rem;padding:0; border-top: 0}
.card-footer:last-child {border-bottom: 2px solid;color: #fff;color: var(--Bg-color);border-radius:0}
.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) {font-size:.75rem !important;line-height:1.05rem !important} 
.list-group-item + .list-group-item {border-top: 1px dotted}

.card-footer .card-text {font-size:.65rem;text-align:right;padding: .1rem .35rem}
.card .card-date {font-family: "ArcherSemibold", sans-serif; color: #fff; color: var(--Bg-color);border-bottom: 1px dashed}

.card-columns .card-footer:focus, .card-columns .card-footer:hover {color: #000; color: var(--Bg-color);background-color: #fff;background-color: var(--Bg-color);text-decoration: none}
.card-columns .card-footer a:focus, .card-columns .card-footer a:hover {color: #000; color: var(--Main-color)}

.card-body p:is(.card-text,.card-title), .event_head p:is(.card-text,.card-title) {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)}

@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}}

.card-columns .card {margin-bottom: 2rem}
.card-columns .card {border-top: 0;border-bottom: 0; border-left: 0; border-right:0;border-style: solid}
.card-columns .card-footer {font-size:.7rem;padding:0; border-top: 1px dotted }
.card-columns .list-group-item, .event_notice .list-group-item {border-top: 0; border-bottom: 0; padding:0} 

@media (min-width: 576px) {.card-columns {-webkit-column-count: 2;-moz-column-count: 2;column-count: 2;-webkit-column-gap: 1rem;-moz-column-gap: 1rem;column-gap: 1rem}}
@media (min-width: 768px) {.card-columns {-webkit-column-count: 3;-moz-column-count: 3;column-count: 3;-webkit-column-gap: 1.1rem;-moz-column-gap: 1.1rem;column-gap: 1.1rem}}
@media (min-width: 992px) {.card-columns {-webkit-column-gap: 1.25rem;-moz-column-gap: 1.25rem;column-gap: 1.25rem}}
@media (min-width: 1200px) {.card-columns {-webkit-column-gap: 1.5rem;-moz-column-gap: 1.5rem;column-gap: 1.5rem}}
@media (min-width: 1900px) {.card-columns {-webkit-column-count: 4;-moz-column-count: 4;column-count: 4;-webkit-column-gap: 2rem;-moz-column-gap: 2rem;column-gap: 2rem}}


/*------/ highlighted cards /------*/
.card.special {background-color: rgba(var(051,204,255),.5); background-color: var(--CINEMATEK-secondary)}
.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;color: var(--Bg-color)}

.card-columns .card.boxcard {padding:.5rem;border: 1px solid #fff; border-color: var(--Bg-color)}

/*------/ 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;transition-duration:0ms;color: #fff; color: var(--Bg-color)}
.btn:focus, .btn:hover {color: #33ccff; color: var(--CINEMATEK-color); outline:none; box-shadow: none}

.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}

/*------/ 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 {margin-bottom:0}
.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%}

/*--/ images /--*/
.bg-image {width:100%;height:100vh;object-fit:cover;background-repeat: no-repeat;background-size: cover;background-position: center center}
img {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;}

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;}
figcaption,.figure-caption {font-size: 78%;line-height:1.2;margin-top:.5rem;text-align:left; color: #4e4e4e;color: var(--gray)}
figure.inlineImg-center > img {width: 100%;height: auto;}



@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:30vw}}

@media (max-width: 768px) {figure.inlineImg-center, figure.float-left, figure.float-right, figure > img {float: none !important; height:auto !important; width:100%; margin-bottom:1rem !important} 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 {max-width:40vw}figure.matrixFigure.float-left, figure.matrixFigure.float-right {max-width:30vw}}

/*--------------------------------------------------------------
# Nav Bar
--------------------------------------------------------------*/
.navbar {font-family:"ArcherSemibold", sans-serif;font-size: .9rem}
.navbar a {color: #fff}
.navbar a:hover, .active a {color: #33ccff; color: var(--CINEMATEK-color)}

/*--/ navbar-brand /--*/
.navbar-brand {margin-right: 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: 20vmin; 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 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 {padding: 1rem;position: relative;overflow: visible;outline: 0}
#navSidebar.search-popup a#showSearch span:nth-child(1) {position: absolute;left: 12px;top: 10px;transform: rotate(135deg);opacity: 0.9}
#navSidebar.search-popup a#showSearch span:nth-child(2) {position: absolute;left: 12px;top: 10px;transform: rotate(-135deg);opacity: 0.9}


/*--/ media responsive navbar /--*/
@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) {.navbar {padding: 2rem 2rem}.navbar.navbar-reduce, .navbar.navbar-trans {padding-bottom: 1.5rem}.navbar #navSidebar {padding: .5rem 2rem}/* .navbar-b #CINEMATEK {font-size: 35px}.navbar-b {font-size: 1rem;padding-top: 2.5rem}.navbar-b.navbar-reduce, .navbar.navbar-trans {font-size: .9rem} */.navbar-b.navbar-reduce #navSidebar, .navbar.navbar-trans #navSidebar {margin: 0}}
@media (min-width: 768px) and (orientation: landscape) {.navbar {padding: 2rem 4rem}.navbar #navSidebar {padding: .5rem 4rem}}
@media (min-width: 1920px) {.navbar-b #CINEMATEK {font-size: 85px}.navbar-b {font-size: 2.25rem;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 {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-menu.show {opacity: 1; background-color: rgba(0, 0, 0, .9) !important;-webkit-backdrop-filter: blur(2px);backdrop-filter: blur(2px);height: 100%; width: 100%;left: 0; top: 0;visibility: visible; display: inline-block; position: fixed;margin: 0; padding: 0}
.navbar-b .dropdown-menu ul {display: flex; justify-content: center;flex-direction: column;height: 100%;width: 100%; padding:2rem}
.navbar-b .dropdown-menu ul li, .dropdown-item {list-style-type:none;text-transform: uppercase;font-size: 2.5rem}
@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)}.navbar-b .dropdown-menu ul li, .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:100%;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}
.dropdown-item {padding: .25rem 0; margin-bottom: .35rem}
.navbar-b .dropdown-menu ul li, .dropdown-item {font-size: 1em;text-align:center}
}
@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}
/* .dropdown-item::after {content: "\00a0:";font-family: "Archer"} */
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 {transition: transform .35s ease-in-out}
.navbar-toggler:not(.collapsed) 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) {position: absolute; right: 0; top: .25rem;transform: rotate(-135deg);opacity: 0.9}

/*--/ Nav Breadcrumbs /--*/
.crumb {font-size: 1.25rem;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}
.intro-content {text-align: left;position: absolute;left:1.75rem;right:1.75rem;bottom: 6rem;padding: 0;z-index:3}
a.intro-link {cursor:pointer;z-index:999}

.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}
h3.intro-title {font-size: 8vmin;line-height:8vmin;margin-bottom:.15rem;max-width: 20ch}

.intro-subtitle {font-family:"ArcherMedium", sans-serif;font-size: 4vmin;line-height:4vmin;margin-bottom:.25rem}
.intro-date {font-size: 4.5vmin;line-height:normal;font-family:"ArcherSemibold", sans-serif;margin-top: 1rem;}
.intro-title span, .intro-subtitle span, .intro-date span {font-family:"Archer", sans-serif}

@media (max-width: 576px) {.intro-subtitle {font-size: 4vmin;line-height:4.2vmin}.intro-date {font-size: 4.5vmin;margin-top: .25rem}.intro-txt {font-size:87%;padding-top:.5rem;padding-bottom:1rem;max-width:35ch;} p.lead {font-size: 5vmin;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}ul#footerSocial {padding-right:15px}}
footer :is(h5,h6) {text-transform: uppercase}
footer h5 {color: #fff; color: var(--Bg-color)}

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)}
.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 {position: absolute;right: 0;top: 0}
#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: 2rem}
#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")}

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")}

@media (min-width:376px) {ul#footerSocial li  {margin: calc(3.5vw)}}
@media (min-width:576px) {ul#footerSocial li {margin: 1em}}

@media screen and (max-width: 750px) {#footerSocial {position: relative;padding: 0;display: flex;justify-content: center}#footerSocial li, #footerSocial li a {display: inline-block}#footerSocial li a {width: 30px;height: 30px}#footerSocial a {margin: .5rem 0}footer h5 {font-size: 1rem}}
@media (max-width: 1200px) {footer h5 {font-size: 1rem}footer h6 {font-size:.75rem}.small {font-size: 75%; line-height:1rem}}
@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)}
#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 3rem 0;scroll-margin-top: calc(1vh + 6rem)}
.mainTitle:not(:first-child) {margin-top: 3rem;}

/*--------------------------------------------------------------
# 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")}

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}

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)}
.event_body {position:relative ;z-index:-1} 
.event_notice {position:relative; display:contents}

.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 {font-family: "ArcherMedium";font-size:90%; line-height:1.85;padding-top: .5rem}

.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;margin-left:1rem}
.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;max-width:50vw}.event_details {display: flex;position: relative;flex-direction: row-reverse;align-items:baseline}.event_head,.event_body {box-shadow: none;margin: 0;padding: 0;position: unset}.event_notice {display:flex;flex-direction: column; max-width:50vw;min-height:100vh; top: 0; position: -webkit-sticky;position: sticky;justify-content: center;align-content: center}
.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 {justify-content: start;overflow: scroll}}
@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}}
@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);}
#scrollspy-body a.list-group-item {padding:.5rem 0; border:none; max-width:20ch; line-height:1.2}
#scrollspy-body a.list-group-item.active {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:1;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;}
.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}
p.film__director {line-height:1.2rem}

/*--------------------------------------------------------------
# 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) !important}
#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) !important}
#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 a:not(.btn), #today a :is(h1,h2,h3,h4,h5,h6, .special) {color: #fff; color: var(--Bg-color)}
#maincalendar a:not(.btn):first-child, #today a:not(.btn):first-child {border-top: 1px solid var(--Bg-color)}
#maincalendar a:not(.btn):last-of-type, #today a:not(.btn):last-of-type {border-bottom: 1px solid var(--Bg-color)}
#todayFL a {border: none !important;}
.calendar--filter {z-index:1;top: 0;position: -webkit-sticky;position: sticky;height: auto;display: flex;flex-direction: column;margin:0;padding: 18vh 0 1.25rem 0;background-color: #000;background-color: var(--Main-color);box-shadow: 0 8px 12px -6px rgba(0,0,0, .02)}
.search {--size: 25px;display: flex;overflow: hidden;position:relative;width: var(--size);height: calc(1.5em + .75rem + 2px);transition: width 450ms cubic-bezier(.25,.25,0,1);padding: 8px 0}
.search-expanded {--size: 25px;display: flex;overflow: hidden;position:relative;width: var(--size);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;right: 0;width: calc(100% - var(--size));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;left: calc(55% - var(--size));width: 100%;opacity: 0;cursor: pointer;padding: 0 .5rem;background: transparent;}
.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:focus-within, .search-expanded {width: 100%;}
.search__input {opacity: 0;z-index: initial;width: var(--size)}
.search__select {opacity: 0;z-index: initial;width: 45%; font-size:90%; height:auto}

.form-check-input:disabled~.col-form-label-sm, .form-check-input:disabled, .screening--inactive {color: #4e4e4e;color:var(--gray); opacity:.8}
body.dark-theme .form-check-input:disabled {opacity:.3}

.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 {outline: 0;box-shadow: none !important;border: 1px solid var(--CINEMATEK-color)}
.search:focus-within .search__select, .search-expanded .search__select {opacity: 1;outline: 0;box-shadow: none !important;color:#fff;background-color: #33ccff;background-color: var(--CINEMATEK-color);border: 1px solid var(--CINEMATEK-color); background: var(--CINEMATEK-color) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right .75rem center/8px 10px no-repeat}
.search:focus-within .search__input, .search-expanded .search__input {opacity: 1;outline: 0;box-shadow: none !important;width: calc(55% - var(--size));border: 1px solid var(--CINEMATEK-color);background-color: #fff}
.search__input::placeholder {color: #33ccff;color: var(--CINEMATEK-color)}
@media (min-width: 768px) {.search__select {left: calc(70% - var(--size))}.search:focus-within .search__input, .search-expanded .search__input  {width: calc(70% - var(--size))}.search__select {width: 30%; 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} }
/*--------------------------------------------------------------
# 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  {bottom: 2.75rem;right:  1.75rem}
.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(10px);backdrop-filter:blur(10px)}
.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(10px);backdrop-filter:blur(10px)}
.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(10px);backdrop-filter: blur(10px)}
.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(10px);backdrop-filter: blur(10px)}
.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(10px);backdrop-filter: blur(10px)}
@media (max-width: 576px) {.tooltip {visibility: hidden}}


/* Temporary */
@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}
}