/* elements */
:root {

}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
	height: 100%;
}


body {
    --body-text-color: #000;
    --background-color: #CCC;
    --link-color: #000;
    --link-hover-color: #fff;
    --sans-link-color: #fff;
    --sans-link-hover-color: #ddd;
    --spektrix-link-color: #fff;
    --spektrix-link-hover-color: #ddd;
    --exhibitions-color: #fff;
    --films-color: #F00;
    --learning-color: #0C0;
    --live-color: #00F;
    --digital-color: #F0F;
    --ica-daily-color: #FF0;
    --transition-duration: 5s;
    --font-size: 17px;
    --line-height-rate: 1;
    --line-height-base: 1.24;
    --letter-spacing: 0;
    --cursor: auto;

	margin: 0;
/*	width: 100%;*/
/*	height: 100%;*/
/*    display: flex;*/
/*    flex-direction: column;*/
    font-family: "Computer Modern Serif", serif;
	
    
	-webkit-font-smoothing: subpixel-antialiased;
	-webkit-text-size-adjust: 100%;

    background-color: var(--background-color);
    color: var(--body-text-color);
    font-size: var(--font-size);
    line-height: calc( var(--line-height-base) * var(--line-height-rate) );

    transition: background-color var(--transition-duration), color var(--transition-duration);
    letter-spacing: var(--letter-spacing);
    cursor: var(--cursor);
}

body[ica-color-theme='dark'] {
    --body-text-color: #fff;
    --background-color: #1e1e1e;
    --link-color: #ddd;
    --sans-link-color: #ff0;
    --sans-link-hover-color: #fff;
    --body-link-color: #ffff66;
    --live-color: #3c96ff;
    --spektrix-link-color: #1BF;
/*    --spektrix-link-hover-color: #ddd;*/
}
body[ica-cursor-size='1'],
body[ica-cursor-size='1'] label
{
    cursor: url(/media/png/cursor-1.png), auto;
}
body[ica-cursor-size='2'],
body[ica-cursor-size='2'] label
{
    cursor: url(/media/png/cursor-2.png), auto;
}
body[ica-cursor-size='3'],
body[ica-cursor-size='3'] label
{
    cursor: url(/media/png/cursor-3.png), auto;
}
body[ica-cursor-size='1'] input:not([type="checkbox"]),
body[ica-cursor-size='1'] textarea,
body[ica-cursor-size='1'] #docket-date:focus, 
body[ica-cursor-size='1'] #docket-search:focus
{
    cursor: url(cursor-1.png), auto;
}
body[ica-cursor-size='2'] input:not([type="checkbox"]),
body[ica-cursor-size='2'] textarea,
body[ica-cursor-size='2'] #docket-date:focus, 
body[ica-cursor-size='2'] #docket-search:focus
{
    cursor: url(cursor-2.png), auto;
}
body[ica-cursor-size='3'] input:not([type="checkbox"]),
body[ica-cursor-size='3'] textarea,
body[ica-cursor-size='3'] #docket-date:focus, 
body[ica-cursor-size='3'] #docket-search:focus
{
    cursor: url(cursor-3.png), auto;
}

body[ica-cursor-size='1'] a,
body[ica-cursor-size='1'] #x-or-arrow,
body[ica-cursor-size='1'] #docket-date,
body[ica-cursor-size='1'] #docket-search,
body[ica-cursor-size='1'] .in-stock button,
body[ica-cursor-size='1'] .select-donation,
body[ica-cursor-size='1'] .checkmark,
body[ica-cursor-size='1'] #isTaxpayer_checkbox,
body[ica-cursor-size='1'] #film-holder,
body[ica-cursor-size='1'] #film-play,
body[ica-cursor-size='1'] #cinema3-password-form input[type="submit"],
body[ica-cursor-size='1'] #gallery-ex,
body[ica-cursor-size='1'] #gallery-prev,
body[ica-cursor-size='1'] #gallery-next,
body[ica-cursor-size='1'] .menu-icon,
body[ica-cursor-size='1'] .confirm-top-banner,
body[ica-cursor-size='1'] #social a > img,
body[ica-cursor-size='1'] #menu ~ #logo.anniversary,
body[ica-cursor-size='1'] .pointer
{
    cursor: url(/media/png/pointer-1.png), pointer;
}
body[ica-cursor-size='2'] a,
body[ica-cursor-size='2'] #x-or-arrow,
body[ica-cursor-size='2'] #docket-date,
body[ica-cursor-size='2'] #docket-search,
body[ica-cursor-size='2'] .in-stock button,
body[ica-cursor-size='2'] .select-donation,
body[ica-cursor-size='2'] .checkmark,
body[ica-cursor-size='2'] #isTaxpayer_checkbox,
body[ica-cursor-size='2'] #film-holder,
body[ica-cursor-size='2'] #film-play,
body[ica-cursor-size='2'] #cinema3-password-form input[type="submit"],
body[ica-cursor-size='2'] #gallery-ex,
body[ica-cursor-size='2'] #gallery-prev,
body[ica-cursor-size='2'] #gallery-next,
body[ica-cursor-size='2'] .menu-icon,
body[ica-cursor-size='2'] .confirm-top-banner,
body[ica-cursor-size='2'] #social a > img,
body[ica-cursor-size='2'] .pointer
{
    cursor: url(/media/png/pointer-2.png), pointer;
}
body[ica-cursor-size='3'] a,
body[ica-cursor-size='3']  #x-or-arrow,
body[ica-cursor-size='3']  #docket-date,
body[ica-cursor-size='3']  #docket-search,
body[ica-cursor-size='3']  .in-stock button,
body[ica-cursor-size='3']  .select-donation,
body[ica-cursor-size='3']  .checkmark,
body[ica-cursor-size='3']  #isTaxpayer_checkbox,
body[ica-cursor-size='3']  #film-holder,
body[ica-cursor-size='3']  #film-play,
body[ica-cursor-size='3']  #cinema3-password-form input[type="submit"],
body[ica-cursor-size='3']  #gallery-ex,
body[ica-cursor-size='3']  #gallery-prev,
body[ica-cursor-size='3']  #gallery-next,
body[ica-cursor-size='3']  .menu-icon,
body[ica-cursor-size='3'] .confirm-top-banner,
body[ica-cursor-size='3'] #social a > img,
body[ica-cursor-size='3'] .pointer
{
    cursor: url(/media/png/pointer-3.png), pointer;
}
body.colorThemeTransition a
{
    transition: background var(--transition-duration), color var(--transition-duration);
}
body[ica-font-family="sans"],
body[ica-font-family="sans"] *
{
    font-family: 'icadiatype', Helvetica, sans-serif !important;
}
body[ica-font-family="serif"],
body[ica-font-family="serif"] *
{
    font-family: 'Computer Modern Serif', times new roman, serif !important;
}
body[ica-font-family="serif"] .typography.menu-icon *,
body[ica-font-family="serif"] .typography-menu-wrapper *
{
    font-family: 'icadiatype', Helvetica, sans-serif !important;
}
img {
	width: 100%;
	border: 0;
	border-style: none;
}
a
{
/*    transition: background-color var(--transition-duration), color var(--transition-duration);*/
}
a:link,
a:visited {
    color: var(--link-color);
    text-decoration: none;
}

a:hover {
    color: var(--link-color);
}

a:active {
 	color:transparent;
}

a img {
    border: 0;
}

b {    
    font-family: 'grotesque_mtbold', 'Helvetica Bold', sans-serif;
    font-weight: normal;
    letter-spacing: calc(var(--letter-spacing) - 0.04em);
}

ul {
	list-style-type: none;
	padding-left: 20px;
	margin: 0px;
}

li {
    list-style-type: none;
}

li.active {
    color: #AAA;
}

li.active .year {
    color: #FFF;
    border-bottom: 2px solid;
}

li.month.active a {
  color: #AAA;
}

aside {
    /* 
        matches .caption.sans 
    */
    margin-top: 10px;
    margin-bottom: 10px;
/*    font-size: 13px;*/
    font-size: 0.76em;
/*    line-height: 16px;*/
    line-height: calc(1.23 * var(--line-height-rate));
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* id */

#alert {
    /*position: fixed;*/
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    padding: 15px;
    padding-top: 70px;
    padding-left: 20%;
    padding-right: 20%;
    color: #000;
    background-color: #FF0;
    text-align: center;
    z-index: 1000;
}
#alert.alert-bw{
    background-color: #fff;
    padding-left: 10%;
    padding-right: 10%;
}
#alert.alert-red{
    background-color: #F00;
    padding-left: 10%;
    padding-right: 10%;
    color: #fff;
}
#alert.alert-red a{
    color: #fff;
}

#alert a {
    color: #000;
    border-bottom: 2px solid;
}


/* spektrix */
/*#spektrix-bar-wrapper{
    position: absolute;
    height: 70px;
    z-index: 1001;
    width: 100vw;
    max-width: 100%;
    left: 0;
    top: 0;

}*/
#spektrix-bar {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 70px;
  background-color: #FF0;
  z-index: 1001;
/*  overflow: hidden;*/
  padding: 10px;
  font-size:0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: opacity .5s;
}

#spektrix-bar > .icons-container
{
    position: fixed;
    top: 10px;
    letter-spacing: 0;
}

.membership #spektrix-bar {
  background-color: #fff;
}

#see-all.category.sans.exhibitions a {
    color: #FFF;
    color: var(--exhibitions-color);
}

#see-all.category.sans.films a {
    color: #F00;
    color: var(--films-color);
}

#see-all.category.sans.learning a {
    color: #0C0;
    color: var(--learning-color);
}

#see-all.category.sans.live a {
    color: var(--live-color);
}

#ica {
    position: relative;
    top: 0px;
    width: 100%;
    padding-top: 60px;
    /* padding-left: 20px;
    padding-right: 20px; */
    text-align: center;
    color: #000;
}

#viewport {
    width: 800px;
    margin: auto;
    margin-top: 0px;
    text-align: left;
    transition: opacity .5s;
}

.category > #viewport {
  width: 800px;
}

.resources > #viewport {
  display: flex;
  justify-content: space-around;
  width: 1000px;
}

#viewport #detail-body,
#viewport #detail-side {
    width: 50%;
    padding: 20px;
}

#viewport #detail-body.category {
    margin-left: initial;
    margin-right: initial;
    width: auto;
}

#docket {
    margin-top: initial;
    padding-bottom: 70px;
/*    flex: 1 0 auto;*/
    margin-left: 30px;
    margin-right: 30px;
    transition: opacity .5s;
}
#docket:after
{
    content: "";
    clear:both;
    height: 0;
    display: block;
}
#docket.exhibitions,
#docket.films,
#docket.learning,
#docket.live,
#docket.digital,
#docket.category {
    margin-top: initial;
    padding-bottom: 75px;
}

/*#docket.category .programme-header{
    padding-top: 42px;
    padding-bottom: 21px;
    padding-left: 0;
    margin: 0 20px;
    font-size: 28px;
}*/

/* descriptions under /films categories, e.g. */
#docket.category .programme-description{
    display: none;
    /*
    padding-left: 20px;
    padding-bottom: 21px;
    */
}

.viewing-menu #main-container,
.viewing-search #main-container,
.viewing-calendar #main-container
{
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    height: 100vh;
}

.viewing-menu #docket,
.viewing-calendar #docket,
.viewing-search #docket
{
    display: none;
    position: fixed;
    z-index: 1;
    /*margin-left: -37.5%;*/
    /*opacity: 0;*/
}
.viewing-menu.displaying-content #docket
{
    display: block;
    position: static;
    margin-left: 30px;
    /*opacity: 1;*/
}
.viewing-menu #title,
.viewing-calendar #title,
.viewing-search #title
{
    display: none;
}
.viewing-menu.displaying-content #title,
.viewing-calendar.displaying-content #title,
.viewing-search.displaying-content #title
{
    display: block;
}
.category-section
{
    margin-top:-50px;
    padding-top:50px;
    margin-bottom: 70px;
}
.category-section:last-child
{
    margin-bottom: 0px;
}
#docket.category .category-section:nth-of-type(2) .programme-header{
    /*margin-top: 0;
    border-top: 0;*/
}
.sub_category .item.digital .season-item
{
    /*display: none;*/
}
#docket.films .season-item
{
    /*display: none;*/
}

#ladder {
    position: relative;
    display: block;
    height: 100%;
    width: 100%;
    min-width: 200px;
    text-align: left;
    vertical-align: top;
    padding: 0px;
    padding-bottom: 100px;
}

#ladder .subhead {
    /* display: none; */
    /* margin-bottom: initial; */
}

/*
/* ? */
#ladder .head {
    text-align: center;
}

/* ? */
#ladder .subhead {
    width: initial;
}

#ladder .subhead.exhibitions {
    color: #FFF;
}

#ladder .subhead.films {
    color: #F00;
}

#ladder .subhead.learning {
    color: #0F0;
}

#ladder .subhead.live {
    color: #00F;
}

#ladder .subhead.digital {
    color: #F0F;
}

#films .item.season .time:after {
    content:"FILM FESTIVAL";
}

#learning .item.season .time:after {
    content:"EVENTS & FILMS";
}

#season-id {
    width: 50%;
    margin-top: 1em;
}

#detail-body {
    display: inline-block;
    vertical-align: top;
    float: initial;
    padding: 0px;
    width: 100%;
    min-width: 200px;
    /* z-index: 1; */
}

#detail-body.films {
    width: 100%;
}

#detail-body .json p {
  margin-top: 0px;
  margin-bottom: 0px;
}

.resources #detail-body {
    float: left;
}

#detail-images {
    width: initial;
}

#detail-side {
    display: inline-block;
    vertical-align: top;
    padding: 0px;
    width: 100%;
    /* z-index: -1; */
}

#detail-side .item {
    width: 100%;
}

#detail-side ul {
    padding-left: 0px;
}

.resources #detail-side {
    float: left;
    /* margin-top: 1em; */
}

#detail-resources {
}

#control-ladder {
    position: absolute;
    right: 0px;
    width: 50%;
}

#book-now a {
    background-color: #BBB;
    color: #CCC;
    opacity: 0.25;
}

#book-now a:hover {
    background-color: #FFF;
    color: #CCC;
    opacity: 0.25;
}

#films-image,
#films-image a,
#films-image img,
#films-trailer a,
#films-trailer img,
#films-trailer video {
    display: block;
}

#films-trailer {
    display: none;
    animation-name: fade-in;
    animation-duration: 1s;
}

#trailer-control {
    display: inline-block;
    float: right;
    text-align: right;
    margin-top: 1em;
}

#trailer-control img {
    display: inline-block;
    vertical-align: middle;
    width: 22px;
}

#colophon {
    display: inline-block;
    width: 50%;
}

#colophon p {
    margin-top: 0em;
    margin-bottom: 0em;
}

#colophon.caption {
    margin-top: 21px;
    margin-bottom: 0px;
}

#multibuy {
  /* padding-top: 1em; */
}

#multibuy a {
  display: inline-block;
}

#multibuy em {
  font-style: normal;
}

#conversation em {
  font-style: normal;
}

#sponsor_logo img {
    width: 150px;
    height: auto;
    padding: 10px;
}

#sponsor_logo img:first-of-type {
    padding-left: 0px;
}

#row.select:hover, .row.select:hover {
    background: #FF0;
}

/*#detail-side #row, #detail-side .row {
    display: none;  closed
}*/

/*#detail-side .members #row, #detail-side .members .row {
    display: block;  closed
}
*/
#footer {
    display: none;
    position: relative;
    bottom: initial;
    left: initial;
    flex-shrink: initial;
    margin-top: 100px;
    padding: 10px;
    opacity: 0.5;
}

#funders {
    display: inline-block;
    position: fixed;
    bottom: 7px;
    left: 7px;
    flex-shrink: 0;
    padding-top: 0px;
    padding-bottom: 5px;
    padding-right: 0px;
    width: 280px;
}

#funders img {
    display: inline-block;
    width: initial;
    height: 60px;
    vertical-align: middle;
}



#footer-menu {
    display: inline-block;
    margin-left: 10px;
    margin-top: 10px;
}

#footer-menu a {
    color: #000;
}

#footer-menu div {
    display: inline-block;
    margin-left: 0px;
    margin-right: 20px;
}

#logo {
    animation-name: blur;
    animation-duration: 2.5s;
    /*
    animation-name: breathe;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
    */
}

#spinner {
  display: none;
  width: 21px;
}

/* firefox needs explicit width */
#logo img.w {
    width: 112px;
}

#x {
    position: fixed;
    top: 0px;
    right: 0px;
    width: 70px;
    height: 70px;
    z-index: 1001;
    background-image: url(../../media/svg/x-6-k.svg);
}
#x.arrow
{
    background-image: url(../../media/svg/arrow-back-6-k.svg);
}
#x a
{
    width: 100%;
    height: 100%;
    display: block;
}

.color-reversed #x,
body[ica-color-theme='dark'] #x
{
     background-image: url(../../media/svg/x-6-w.svg); 
}
.color-reversed #x.arrow,
body[ica-color-theme='dark'] #x.arrow
{
     background-image: url(../../media/svg/arrow-back-6-white.svg);
}
body[ica-color-theme='dark'] #spektrix-bar #x
{
    background-image: url(../../media/svg/x-6-k.svg); 
}
#x-or-arrow {
    cursor: pointer;
}
body[ica-color-theme='dark'] #spektrix-bar .menu-icon > .icon-wrapper.dark-icon
{
    opacity: 0;
}
body[ica-color-theme='dark'] #spektrix-bar .menu-icon > .icon-wrapper.light-icon
{
    opacity: 1;
}
.viewing-menu #footer
{
    display: block;
}
#docket-date::selection, #docket-search::selection {
  background: #fff; /* WebKit/Blink Browsers */
}

#docket-date::-moz-selection, #docket-search::-moz-selection {
  background: #fff; /* Gecko Browsers */
}

#docket-date, #docket-search {
  cursor: pointer;
  opacity: 1.0;
}

#docket-date:focus, #docket-search:focus {
  outline: none;
  cursor: text;
}

#docket-date-small-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    margin-top: -50px;
    padding: 20px;
    font-size: 18px;
    line-height: 20px;
    text-align: center;
    z-index: 1000;
    color: #FFF;
}

#picker {
  display: none;
}
#search-header {
    margin-top: auto;
    margin-bottom: auto;
    padding-top: initial;
    padding-bottom: initial;
}


/* submenu */
#submenu {
    position: absolute;
    right: 10px;
    margin-top: 100px;     /* closed */
    top: 26px;
    z-index: 1002;  
}

#submenu ul > li {
    display: inline-block;
    margin-right: 1em;
}

#submenu a {
    color: #FFF;    /* closed */
}

#submenu.padded {
  right: 60px;
}

#login {
    position: absolute;
    right: 16px;
    top: 26px;
    z-index: 1000;
}

#login.padded {
    padding-right: 60px;
}

#sku-selector-container, #shipping-selector-container {
  position: relative;
}

#sku-selector-container:after, #shipping-selector-container:after {
  content: "";
  width: 50px;
  height: 50px;

  position: absolute;
  right: 5px;
  bottom: 0px;
  pointer-events: none;

  background: transparent url('https://buy.ica.art/ica/resources/bracket-down-6-k.svg') no-repeat;
}

/* spektrix widgets */
.show-login {
  display: none !important;
}
.hide-login {
  display: inline-block !important;
}

spektrix-logged-in-status[logged-in="true"] ~ .show-login {
  display: inline-block !important;
}
spektrix-logged-in-status[logged-in="true"] ~ .hide-login {
  display: none !important;
}

@media screen and (max-width: 500px) {
  .hide-login {
    display: block !important;
  }

  spektrix-logged-in-status[logged-in="true"] ~ .show-login {
    display: block !important;
  }
}

/* class */

.mono {
    font-family: 'ocrbmedium', 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
    /*    font-size: 13px;*/
    font-size: 0.76em;
}

.mono-italic {
    font-family: 'Computer Modern Typewriter', 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
    font-style: italic;
}

.mono-italic-subhead {
    font-family: 'Computer Modern Typewriter', 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
    font-style: italic;
    /*    font-size: 20px;*/
    font-size: 1.18em;
}

.mono-normal {
    font-family: 'Computer Modern Typewriter', 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
    font-style: normal;
}

.sans {
    font-family: 'grotesque_mtregular', Helvetica, sans-serif;
    font-weight: normal;
}

.sans a {
    /* border-bottom: 2px solid #FFF; */
    color: #FFF;
    color: var(--sans-link-color);
}

.sans a:hover {
    color: #DDD;
    color: var(--sans-link-hover-color);
}

.sans a:active {
    color: transparent;
}

.sans-bold {
    font-family: 'grotesque_mtbold', 'Helvetica Bold', sans-serif;
    font-weight: normal;
}

.sans.smallcaps {
    font-size: 14px;
}

.anchor {
  display: block;
  position: relative;
  top: -70px;
  visibility: hidden;
}

.head {
    top: 0px;
    width: 100%;
    padding-top: 70px;
    padding-left: 60px;
    padding-right: 60px;
    padding-bottom: 40px;
    text-align: center;
    /*    font-size: 44px;*/
    font-size: 2.59em;
    /*    line-height: 46px;*/
    line-height: calc( 1.05 * var(--line-height-rate));
    color: var(--body-text-color);
    z-index:900;
}
#docket #title, 
#docket .head
{
    padding-left: 20px;
    padding-right: 20px;
}

.head.sans {
    padding-top: 42px;
    padding-bottom: 38px;
}

.head.ica-red-membership {
    background-color:#F00;
}

/*
    ** fix **
    better specified once not several times for font
*/

.head.exhibitions {
    position: initial;
    font-family: 'Computer Modern Typewriter', 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
    font-style: italic;
}

.head.films {
    position: initial;
    font-family: 'domcasualmedium', 'Computer Modern Typewriter', 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
}

.head.learning {
    position: initial;
    font-family: "mtdbt2f-z", Helvetica, Arial, sans-serif;
    font-style: normal;
}

.head.live {
    position: initial;
    font-family: 'ocrbmedium', 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
}

.head.digital {
    position: initial;
    font-family: 'lorestwelve_narrow', 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
    
}
.emperor .head.digital {
    position: initial;
    font-family: 'emperor-eight', 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
}
.dot .head.digital {
    position: initial;
    font-family: 'enhanced_dot_digital-7regular', 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
}

.head.category {
    position: initial;
    font-family: 'grotesque_mtregular', Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
}
.head a {
    transition: color var(--transition-duration);
}
#title.head.sub_category.digital{
    position: initial;
    font-family: 'lorestwelve_narrow', 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
    font-size: 48px;
    
}
.emperor #title.head.sub_category.digital{
    position: initial;
    font-family: 'emperor-eight', 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
    font-size: 80px;
}
.dot #title.head.sub_category.digital{
    /*position: initial;*/
    font-family: 'enhanced_dot_digital-7regular', 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
    font-size: 50px;
}

.cinema-3_detail #title.head.sub_category.digital a{
    color: #F0F;
}


.head.category.exhibitions a {
    color: #FFF;
    color: var(--exhibitions-color);
}

.head.category.films a {
    color: #F00;
    color: var(--films-color);
}

.head.category.learning a {
    color: #0C0;
    color: var(--learning-color);
}

.head.category.live a {
    color: #00F;
    color: var(--live-color);
}

.head.category.ica-daily a,
.head.category.ica-daily-archive a{
    color: #FF0;  /*comment out when Digital is live */
    color: var(--ica-daily-color);
}
.head.category.digital a{
    color: #F0F;
    color: var(--digital-color);
}
.programme-header {
    /* text-align: center; */
    margin-top: 1em;
    margin-bottom: 1em;
    padding-left: 20px;
    padding-bottom: 1px;
}


.fold {
    top: 0px;
    position: -webkit-sticky;
    position: sticky;
}

.item {
    position: relative;
    width: 100%;
    white-space: normal;
    text-align: left;
    width: 400px;
    padding: 20px;
    vertical-align: top;
    display: inline-block;
}

.item.other .title {
  position: initial;
  font-family: 'grotesque_mtregular', Helvetica, sans-serif;
  font-style: normal;
  font-weight: normal;
}

.item.exhibitions .title {
    font-family: 'Computer Modern Typewriter', 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
    font-style: italic;
/*    font-size: 20px;*/
    font-size: 1.18em;
    line-height: calc(0.85 * var(--line-height-base) * var(--line-height-rate));
}

.item.films .title {
    font-family: 'domcasualmedium', 'Computer Modern Typewriter', 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
/*    font-size: 19px;*/
    font-size: 1.12em;
    line-height: calc( 0.89 * var(--line-height-base) * var(--line-height-rate) ); 
}

.item.learning .title {
    font-family: "mtdbt2f-z", Helvetica, Arial, sans-serif;
    font-style: normal;
/*    font-size: 19px;*/
    font-size: 1.12em;
    margin-top: -1px;
    margin-bottom: 1px;
    line-height: calc( 0.89 * var(--line-height-base) * var(--line-height-rate) );
}

.item.live .title {
    font-family: 'ocrbmedium', 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
/*    font-size: 16px;*/
    font-size: 0.94em;
/*    line-height: 21px;*/
    line-height: calc( 1.32 * var(--line-height-rate));
    margin-top: -2px;
    margin-bottom: 2px;
}

.item.digital .title,
#docket.digital .item .title,
.cinema-3 .item .title
{
    font-family: 'lorestwelve_narrow', 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
    /*font-style: normal;*/
/*    font-size: 18px;*/
    font-size: 1.06em;
    /*baseline-shift: 2px;*/
}
.cinema-3 .time
{
    display: none;
}
.home .item.digital .title {
    margin-top: -6px;
}
.home.calendar-container .item.digital .title {
    margin-top: 0;
}

.emperor .item.digital .title,
.emperor #docket.digital .item .title
{
    font-family: 'emperor-eight', 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
    /*font-style: normal;*/
/*    font-size: 32px;*/
    font-size: 1.88em;
}
.dot .item.digital .title,
.dot #docket.digital .item .title
{
    font-family: 'enhanced_dot_digital-7regular', 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
    /*font-style: normal;*/
/*    font-size: 20px;*/
    font-size: 1.18em;
}

.item.digital .date,
#docket.digital .item .date {
    padding-top: 4px;
    color: #FFF;
}

.item.join .title
{
/*    font-size: 18px;*/
    font-size: 1.06em;
    line-height: calc( 1 * var(--line-height-rate));
    margin-top: -2px;
    margin-bottom: 3px;
}

.psuedo-title
{
    visibility: hidden;
}


.item.season .time span {
    display: none;
}

/* subhead dev */

.subhead-exhibitions {
    font-family: 'Computer Modern Typewriter', 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
    font-style: italic;
/*    font-size: 20px;*/
    font-size: 1.18em;
}

.subhead-films {
    font-family: 'domcasualmedium', 'Computer Modern Typewriter', 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
/*    font-size: 19px;*/
    font-size: 1.12em;
}

.subhead-learning {
    font-family: "mtdbt2f-z", Helvetica, Arial, sans-serif;
    font-style: normal;
/*    font-size: 19px;*/
    font-size: 1.12em;
    margin-top: -1px;
    margin-bottom: 1px;
}

.subhead-live {
    font-family: 'ocrbmedium', 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
/*    font-size: 16px;*/
    font-size: 0.94em;
/*    line-height: 18px;*/
    line-height: calc( 1.13 * var(--line-height-rate));
    margin-top: -2px;
    margin-bottom: 3px;
}

.subhead-generic {    
    font-family: "Computer Modern Serif", serif;
    font-size: var(--font-size);
    line-height: calc( 1.06 * var(--line-height-rate));
    font-family: 'ocrbmedium', 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
    margin-top: -2px;
    margin-bottom: 3px;
}

/* end subhead dev */

.season, .season-item {
}

.floater {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    padding-bottom: 50px;
}

.title {
    display: block;
}

/* spektrix */
.spektrix iframe {
  margin-top: 70px;
}

.spektrix #submenu a {
/*  color: var(--sans-link-color);*/
    color: #000;
}

.bookstore.resources button,
.editions.resources button {
  width: 100%;
  height: 100px;

  font-size: inherit;
  line-height: inherit;
  text-align: left;
  margin-bottom: 4px;

  background-color: #DDD;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  border-radius: 0px;
  border: none;

  padding: 10px;
  padding-bottom: 70px;
  margin-bottom: 10.5px;

  pointer-events: none;

  color: #AAA;
}

.in-stock button {
  color: #000 !important;
  cursor: pointer;
  pointer-events: unset !important;
}

.in-stock button:hover {
  background-color: #ff0;
}

.bookstore.resources select,
.editions.resources select {
  border: none;
  border-radius: 0px;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  background-color: #fff;

  height: 50px;
  width: 100%;

  font-size: inherit;
  line-height: inherit;

  border: none;

  padding: 10px;
  box-sizing: border-box;

  display: block;

  border-radius: 0px;
  margin-bottom: 4px;

}

.merchandise-description-full {
  margin-top: 1em;
  margin-bottom: 1em;
}

/* overwrite spektrix underline to be smaller */
.merchandise-description-full .UnderlineText {
/*  font-size: 14px;*/
    font-size: 0.82em;
/*  line-height: 16px;*/
/*    line-height: 1.14em;*/
    line-height: calc( 1.14 * var(--line-height-rate));
  display: inline-block;
}

/* spektrix italicize */
.merchandise-description-full .ItalicText {
  font-style: italic;
}

/* spektrix  */
.merchandise-description-full .BoldText {
  font-family: 'grotesque_mtbold', sans-serif;
}

/* red (bold italic) */
.merchandise-description-full .ItalicText > .BoldText {
  color: #F00;
  font-family: inherit;
  font-style: normal;
}

/* ? */
/* scrolls off-screen on desktop */
.exhibition-title {
    position: relative;
    /* display: inline-block; */
    padding: 10px;
}

.subhead {
    text-transform: capitalize;
    margin-bottom: 1em;
}

.subhead a {
    color: var(--link-color);
    border-bottom: 2px solid;
}
.subhead a:hover{
    color: initial;
}
#menu .subhead a
{
    border-bottom: none;
}
.subhead.exhibitions a {
    color: #FFF;
    color: var(--exhibitions-color);
}

.subhead.films a {
    color: #F00;
    color: var(--films-color);
    /*
    color: #FFF;
    background-color: #F00;
    padding: 5px 5px 1px 5px;
    */
}

.subhead.learning a {
    color: #0C0;
    color: var(--learning-color);
    /*
    color: #FFF;
    background-color: #0F0;
    padding: 5px 5px 1px 5px;
    */
}

.subhead.live a {
    color: #00F;
    color: var(--live-color);
    /*
    color: #FFF;
    background-color: #00F;
    padding: 5px 5px 1px 5px;
    */
}

.subhead.ica-daily a,
.subhead.ica-daily-archive a {
    color: #FF0;  /*comment out when Digital is live */
    color: var(--ica-daily-color);
    /*
    color: #000;
    background-color: #FF0;
    padding: 5px 5px 0px 5px;
    */
}
.subhead.digital a{
    color: #F0F; 
    color: var(--digital-color);
}

.date {
     display: block; 
    /*display: none; */
}

.time {
    display: inline-block;
    float: right;
    font-family: 'ocrbmedium', 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
/*    font-size: 13px;*/
    font-size: 0.76em;
}

.performance-list .date {
    display: inline-block;
    width: 40%;
}

.performance-list .venue {
    display: inline-block;
    text-transform: uppercase;
    font-family: 'ocrbmedium', 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
/*    font-size: 13px;*/
    font-size: 0.76em;
}

.performance-list .time {
    display: inline-block;
}

.location {
    display: inline-block;
    float: right;
    font-style: italic;
}

.description {
    display: block;
}

.caption {
    margin-top: calc(1em + 10px);
    margin-bottom: calc(1em + 10px);
/*    font-size: 14px;*/
    font-size: 0.82em;
/*    line-height: 16px;*/
    line-height: calc( 1.14 * var(--line-height-rate));
}
.caption:first-child
{
    margin-top: 0;
}
.sans .caption,
.caption.sans
{
    font-size: 0.76em;
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.caption.sans
{
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: calc( 1.23 * var(--line-height-rate));
}
.caption > .caption
{
    font-size: inherit;
}
.indent {
  margin-left: 3rem;
}

.column-container-container {
	display: inline;
}

.column-container {
	position: relative;
    display: block;
	vertical-align: top;
    width: 100%;
	white-space: initial;
	padding: 20px;
    padding-bottom: 0px;
}

.hide.column-container {
	display: none;
}

.column-container > p:last-child {
	margin-bottom: 0px;
}

.column-container:last-child {
	padding-bottom: 20px;
}

.column-container-container:last-child {
	padding-bottom: 44vw;
}

.img-container {
    padding-top: 10px;
    padding-bottom: 10px;
}

/*
.img-container[style] {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
*/

.img-container-thumb {
    padding-top: 10px;
    /* padding-bottom: 10px; */
}
.thumbnail-is-video .img-container-thumb
{
    pointer-events: none;
}

.sub-menu.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    padding-top: 20px;
    padding-bottom: 10px;
    padding-left: 50px;
    background: #CCC;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%; /*16:9*/
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.pdf {
    width: 33%;
}

.performance-list {
    border-bottom: 1px solid #999;
    width: 100%;
    display: block; 
    /*display: none; closed*/
    margin-bottom: 1em;
}

.performance-list .performance {
    border-top: 1px solid #999;
    padding-top: 8px;
    margin-bottom: 4px;
}

.performance-list .performance.past {
  border-color: #999;
}

#row.select.select,
.row.select
{
    margin-bottom: 1em;
}

.multimedia div {
    /* margin-top: 1em; */
    margin-top: 21px;
}

/* donations */
.select-donation {
  width: 100%;
  height: 100px;
  background-color: #ddd;

  text-align: center;
  border: none;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  display: flex;
  justify-content: space-around;

  font-size: 1.5em;
  margin-bottom: 4px;
    padding-top: 34px;

  cursor: pointer;
}

.select-donation:hover {
  background-color: #fff;
}

.select-donation:hover a {
  color: #000;
}

.select-donation a {
  color: #000;
}

.date-picker, .calendar-picker, .search-picker {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

/* redundantly in views/date-picker b/c manipulated by js */
.date-option, .search-option {
  display: none;
  width: 60px;
  margin-left: 10px;
  margin-right: 10px;
}
.search-option
{
    width: auto;
}
.input-option {
  /* display: none; */
}

.arrow-option {
  /* display: none; */
}

.animationdone.date-picker:hover > .arrow-option {
  display: block;
}

.search-picker:hover > .arrow-option {
  display: block;
}

.date-picker:not(.animationdone) > .input-option {
  display: block;
}

[tabindex] {
   outline: none !important;
}

.v-centre {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.line {
    display: inline-block;
}

.hide {
    display: none;
}

.show {
    display: block;
    /* filter: blur(10px); */
}

.column-container-container:last-child > .column-container {
	padding-bottom: 30vw;
}

.load-more {
    display: none; /* closed */
}

.signature {
    display: block;
    text-transform: initial;
    text-align: right;
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    /* width: 460px; */
    width: initial;
    height: 0;
}

#detail-resources .video-wrapper {
    width: initial;
}

.video-wrapper.fourxthree {
    padding-bottom: 75%; /* 4:3 */
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}
.float-left {
    float: left;
}

.float-container:after
{
    content: '';
    display: block;
    clear: both;
    height: 0;
}

.debug {
    background-color: #FFF;
    opacity: 0.5;
}

.clear {
    clear: both;
}

.white {
  color: #fff;
}

.red {
    color: #F00;
}

.green {
    color: #0C0;
}

.blue {
    color: #00F;
}

.grey {
    color: #999;
}

.black {
    color: #000;
}

.black a {
    color: var(--link-color);
}

.dontbreak {
    display:inline-block;
}

/* 3/22 */
/* twitter title*/
.timeline-Header{
    display: none;
}
/* 3/30 */
/* solve diffrent line-height*/
font[face = "Helvetica, sans-serif"] span{
    display:block;
}
/* stack the blocks on the homepage */
/* variable $isHome is added in head.php */
/* when true, <body> gets a class 'home' */
/* also, in docket.php, a javascript code will add two */
/* div.home_item_column, and put .ica-daily in the left column */
/* and the rest in the right one*/
.home_item_column{
    display: inline-block;
    width: 49.5%;
    vertical-align: top;
}
/* list on /join page */
.list-item{
    margin-left: 1.1em;
    text-indent: -1.1em;
}
.caption .list-item, .caption .list-item{
    margin-left: .65em;
    text-indent: -.65em;
}

input.signup_style{
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    outline: none;
    width: 100%;
    border: 0px;
    height: 50px;
    padding: 10px;
    margin-bottom: 2px;
    background: #DDD;
    box-sizing: border-box;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
}

#custom_error{
    margin-top: 5px;
}
#custom_field[value = '£']{
    color: #BBB;
}
#custom_field[value = '£']:focus{
    color: #000;
}
#stripe_form{
    display: none;
}
#isTaxpayer_checkbox_ctner > div{
    display: inline-block;
    vertical-align: top;
    position: relative;
}
#isTaxpayer_checkbox_ctner > div:first-child{
    width: 30px;
    margin-right: 10px;
}
#isTaxpayer_checkbox_ctner > div:last-child{
    width: calc(100% - 40px);
}
.computer_modern_title{
    font-family: 'Computer Modern Typewriter', 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
    font-style: italic;
/*    font-size: 20px;*/
    font-size: 1.18em;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 15px;
  width: 15px;
  background-color: #eee;
  border-radius: 50%;
  pointer-events: none;
}
#isTaxpayer_checkbox{
    position: absolute;
    opacity: 0;
    cursor: pointer;
    margin: 0;
    width: 15px;
    height: 15px;
}
#isTaxpayer_checkbox:checked ~ .checkmark {
  background-color: #000;
}


/* lockdown cinema */
body.color-reversed{
    --background-color: #000;
    --body-text-color: #fff;
}

body.color-reversed a{
    color: #FF0;
}

body.color-reversed .sans a:hover{
    color: #FFF;
}
body.color-reversed .subhead.films a{
    color: #F00;
}
body.color-reversed .subhead-link
{
    color: #ccc;
}
body.color-reversed .subhead-link.active
{
    color: #fff;
    border-bottom:2px solid #fff;
}
.color-reversed .item .title{
    color: #F0F;
}
#cinema_temp_title{
    width: 200px;
}

#viewport.cinema-viewport{
    display: block;
}
#film-holder
{
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
    /*border: 1px solid #fff;*/
    cursor: pointer;
    box-shadow: 0 0 60px rgba(255, 255, 255, .35);
}
#film-holder.played{
    /*border-color: transparent;*/
    box-shadow: none;
}

#film-holder div{
    text-align: left;

    /*width: 75%;*/
}
#film-player iframe{
    display: block;
    margin:0;
    padding:0;
    border: none;
}
#opening-animation{
    display: block;
    width: 102%;
    position: absolute;
    top:0;
    left:-1%;
    opacity: 0;
    pointer-events: none;
}
#film-mask{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #111;
    pointer-events: none;
    
}
#film-play{
    width: 120px;
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    cursor: pointer;
}
.played #film-play{
    display: none;
}
.dull.playing #detail-body,
.dull.playing #detail-side,
.dull.playing #alert,
.dull.playing #title,
.dull.playing #submenu
{
    transition: opacity 1s;
    opacity: .15;
}
.dull.playing #dev-icon,
.dull.playing #menu ~ #logo{
    transition: opacity 1s;
    opacity: .25;
}
#cinema3-password-form{
    width: 400px;
    max-width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #000;
}
#cinema3-password-form input {
    /* form input[type="text"] {*/
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    outline: none;
    width: 100%;
    border: 0px;
    height: 50px;
    padding: 10px;
    margin-bottom: 2px;
    background: #DDD;
    box-sizing: border-box;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
}

#cinema3-password-form input[type="submit"] {
    text-align: left;
    background-color: #ddd;
    
    padding-bottom: 90px;
    cursor: pointer;
}

#cinema3-password-form input[type="submit"]:hover {
    background-color: #ff0;
}
#cinema3-error{
    /*margin-top: 215px;*/
    /*text-align: center;*/
}
body.vimeo #film-play,
body.vimeo #film-mask{
    display: none;
}

#cinema-password-holder
{
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /*margin-bottom: 20px;*/
    /*border: 1px solid #fff;*/
    padding-top: 1px;
    box-shadow: 0 0 60px rgba(255, 255, 255, .35);
    cursor: initial;
}

#cinema-error-holder
{
    margin-bottom: 20px;
}
/*  gallery  */

#gallery {
  position: fixed;
  width: 100%;
  height: 100%;

  /* to be even above membership btn*/
  z-index: 10001;
  
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: none;
  /*backdrop-filter: blur(2px);*/
  /*background-color: #FFF;*/

}
.viewingGallery #gallery{
    display: initial;
}
.viewingGallery #x
{
    display: none;
}
#gallery-ex,
#gallery-prev,
#gallery-next {
  position: fixed;
  width: 70px;
  height: 70px;
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
}

#gallery-prev,
#gallery-next {
  top: 50%;
  transform: translateY(-50%);
}
#gallery-ex {
  top: 0px;
  right: 0px;
  background-image: url(/media/svg/x-6-k.svg);
}

#gallery-prev {
  left: 0px;
  background-image: url(/media/svg/arrow-back-6-k.svg);
}

#gallery-next {
  right: 0px;
  background-image: url(/media/svg/arrow-forward-6-k.svg);
}

body[ica-color-theme="dark"] #gallery-ex,
body.color-reversed #gallery-ex
{
    background-image: url(/media/svg/x-6-w.svg);
}

body[ica-color-theme="dark"] #gallery-prev,
body.color-reversed #gallery-prev
{
    background-image: url(/media/svg/arrow-back-6-white.svg);
}

body[ica-color-theme="dark"] #gallery-next,
body.color-reversed #gallery-next
{
    background-image: url(/media/svg/arrow-forward-6-white.svg);
}

#img-gallery {
  position: fixed;
  max-height: 90%;
  max-width: 90%;
  width: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#img-gallery[ratio = "flat"] {
  width: 90%;
  height: auto;
}
#img-gallery[ratio = "thin"] {
  height: 90%;
  width: auto;
}

#img-gallery-caption {
  position: fixed;
  max-height: 90%;
  max-width: 90%;
/*  font-size:10px;*/
  font-size:0.59em;
/*  line-height:12px;*/
  line-height: calc( 1.2 * var(--line-height-rate));
  bottom: 2%;
  left: 50%;
  transform: translate(-50%, -2%);
}
/* 3/19 body will gain .viewingGallery when gallery is on. 
several things at the backgorund then be blurred*/
.viewingGallery #docket,
.viewingGallery #membership-btn,
.viewingGallery .menu-icons,
.viewingGallery #logo,
.viewingGallery #dev-icon,
.viewingGallery #title{
  filter:-webkit-blur(10px);
  filter:blur(10px);
}
/* 3/19 since the background is not fully covered by gallery
scrolling might be fine because the user can tarck what happens when scrolling.
body won't gain .preventScroll anymore, but I save it here just in case. */
.preventScroll{
  width:100vw;
  height:100vh;
  max-width: 100%;
  overflow: hidden;
}
.ica-daily-archive.pinned .date,
.ica-daily.pinned .date,
.ica-daily.pinned .title,
.cinema-3.pinned .date,
.join .date {
    opacity: 0;
}
.ica-daily .season-item, 
.ica-daily .date,
#docket.content-programme .season-item,
#docket.content-programme .date
{
    display: none;
}
/*  end gallery  */

.hide-sign-up #signup-btn{
    display: none;
}

.sans .subhead-link
{
    margin-right: 20px;
    color: var(--link-color);
}

.subhead-link:last-of-type
{
    margin-right: 0px;
}
.subhead-link.active
{
    border-bottom: 2px solid;
}
.subhead-link.active:hover
{
    color: var(--link-color);
}
.isFilterLike.sans .subhead-link
{
    color: #fff;
}
.isFilterLike.sans .subhead-link:hover
{
    color: #ddd;
}
.isFilterLike .subhead-link.active
{
    border-bottom: 2px solid #fff;
}

#docket.exhibitions .performance-list
{
    display: none;
}
body.loading #viewport,
body.loading #spektrix-bar,
body.loading #dev-icon
{
    opacity: 0;
}

body.loading #signup-btn
{
    display: none;
}
#loading-content
{
    text-align: center;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none;
}
body.loading #loading-content
{
    display: block;
}
#loading-icon
{
    width: 50px;
}

.item-info
{
    display: flex;
}
.title-container
{
    flex:1;
}
.time
{
    text-align:right;
}

body[ica-color-theme="dark"] .light-mode-only,
body[ica-color-theme="light"] .dark-mode-only
{
    display: none;
}
/* body[ica-color-theme="dark"] .img-container-thumb img
{
    background-color: #ccc;
} */
#menu ~ #logo.anniversary,
.illusion
{
    transition: background var(--transition-duration);
}
.color-theme-icon
{
/*    transition: transform var(--transition-duration), background 0 .5;*/
}
.icon-wrapper
{
    transition: opacity var(--transition-duration);
}
a.menu-text-icon
{
    /* transition: color var(--transition-duration); */
}
.typography-menu-section.border-btn,
.border-btn
{
    border: 2px solid;
    display: inline-block;
    padding: 5px 10px;
    margin: 5px;
}
.typography-menu-section.border-btn
{
    float: right;
    margin-top: 20px;
}

/* @animation */

@keyframes fade-in {
    from {opacity: 0.0;}
    to {opacity: 1.0;}
}

@keyframes fade-out {
    from {opacity: 1.0;}
    to {opacity: 0.0;}
}

@keyframes breathe {
    from {opacity: 0.25;}
    to {opacity: 0.75;}
}

@keyframes blink {
    from {opacity: 0.0;}
    to {opacity: 1.0;}
}

@keyframes blur {
    from {filter: blur(10px);}
    to {filter: blur(0px);}
}

@keyframes blur-more {
    from {filter: blur(3px);}
    to {filter: blur(0px);}
}

@keyframes color-gradient {
    0%  {color: #F00;}
    50%  {color: #0F0;}
    100%   {color: #00F;}
}

@keyframes glow {
    0% {text-shadow: 0px 0px 0px #000;}
    100% {text-shadow: 0px 0px 5px #0F0;}
}


@media screen and (max-width: 1100px) {
    #submenu
    {
/*        text-align: right;*/
        
    }
    .category #submenu ul > li{
        display: block;
    }
    #submenu.padded
    {
/*        right: auto;*/
        right: calc( (100vw - 800px)/2 );
        text-align: right;
    }
    
}



/* for cinema 3, if video full width */
@media screen and (max-width: 1000px) {
    .head
    {
        padding-left: 40px;
        padding-right: 40px;
    }
    .cinema .resources > #viewport
    {
        width: auto;
    }
    .cinema #viewport #detail-body,
    .cinema #viewport #detail-side
    {
        width: 49.5%;
    }

    .top-banner
    {
        padding-top: 70px;
        padding-left: 40px;
        padding-right: 40px;
    }

}

/* 400(width of .item) * 2 + 30(side margin of #docket) * 2  */
@media screen and (max-width: 860px) {
    #viewport{
        width: auto;
    }
    #docket.home .item,
    .item
    {
        width: 50%;
    }
    #docket.category #filter,
    #docket.category #filter-2,
    #docket.home #filter,
    #docket.home #filter-2
    {
/*        width: auto;*/
    }
    .resources > #viewport,
    .category > #viewport
    {
        width: auto;
    }
    #submenu.padded
    {
        right: 30px
    }
}


/* mobile */



/* vertical iPad / horizontal iPhone */

@media screen and (max-width: 768px) {

    #viewport {
        margin: 0px;
        margin-top: 0px;
        width: 100%;
        perspective: 18000px;
        perspective-origin: 50% 200px;
        padding-bottom: 100px;
    }
    
	.column-container-container {
		display: block;
	}
	.column-container-container:last-child {
		padding-bottom: 44vw;
	}
	.column-container {
		width: 50vw;
	}
	.column-container-container:last-child > .column-container {
		padding-bottom: 0px;
	}
    #docket[category="films"] #submenu.padded
    {
        margin-top: 120px;
    }
    #title,
    .date-title:first-child {
        margin-top: 50px;
        /* Without banner: none */
    }
    
}

/* vertical iPhone */

@media screen and (max-width: 500px) {

    #viewport {
        margin: 0px;
        margin-top: 0px;
        width: 100%;
        perspective: 18000px;
        perspective-origin: 50% 200px;
        padding-bottom: 100px;
    }
    .home #viewport,
    .home #ladder
    {
        padding-bottom: 25px;
    }

    .resources > #viewport, .category > #viewport {
      display: initial;
      justify-content: initial;
      width: 100%;
    }

    #viewport #detail-body,
    #viewport #detail-side
     {
    /* #viewport #detail-resources { */
        margin-left: initial;
        margin-right: initial;

        width: inherit;
        padding: 0px;
        
    }
    #viewport #detail-side
    {
        margin-top: 1.5em;
    }

    #viewport #detail-resources {
      position: absolute;
    }

    #ica {
      padding-top: 80px;
    }

    .magnifying-glass.menu-icon {
        /* position: absolute; */
    }

    .menu-icon.calendar-icon {
      /* position: absolute; */
    }

    .head {
      padding-top: 70px;
/*      padding-bottom: 0px;*/
    }

    .head.fold {
        padding-bottom: 50px;
    }

    .head.unsticky {
        position: initial;
        padding-top: 80px;
    }

    .head.category {
        /* margin-bottom: 1em; */
    }

    #alert {
        padding-left: 15px;
        padding-right: 15px;
        z-index:1000;
    }

    .item,
    #docket.home .item {
        display: block;
        padding-left: 0;
        padding-right: 0;
        width: initial;
        /* padding: initial; */
    }
    .home_item_column {
        display: initial;
        width: initial;
        /* padding: initial; */
    }

    /* .category .item.films {
        display: initial;
        width: 100%;
        vertical-align: initial;
    } */

    .subhead {
        margin-bottom: initial;
    }

    #detail-body .subhead,
    .home .subhead
    {
        margin-bottom: 1em;
    }

    .dontbreak {
        display:inline;
    }

    #submenu {
      position: initial;
    }
    #submenu,
    #docket[category="films"] #submenu.padded
    {
        margin-top: 0;
    }
    #submenu.padded {
        text-align: left;
    }

    #submenu ul {
      padding: 0px;
      /* text-align: center; */
    }
    #submenu ul > li {
      display: block;
      /* margin-bottom: 1em; */
    }

    .programme-header {
        /* display: none;     */
        padding-left: 0px;
    }

    .load-more {
      padding: 0;
    }

    #filter {
        padding-left: 0;
        padding-bottom: initial;
    }
    .select-donation {
      width: calc(100vw - 60px);
    }

    .indent {
      margin-left: 0px;
    }
    #film-holder{
        padding:0;
    }
    .cinema #docket{
        padding-top: 40px;
        padding-bottom: 160px;
    }
    .cinema #viewport #detail-body, 
    .cinema #viewport #detail-side{
        width: initial;
    }
    #film-play{
        pointer-events: none;
    }
    .sans .subhead-link
    {
        margin-right: 0;
    }
    .sans .subhead-link:after
    {
        content: " ";
        display: block;
        margin-bottom: 5px;
    }
    .sans .subhead-link:last-of-type:after
    {
        display: none;
    }
    .spektrix #submenu a
    {
        color: var(--spektrix-sans-link-color);
    }
    #x{
        width: 40px;
        height: 40px;
        top: 10px;
        right: 10px;
    }
}

/* vertical iPhone 5 */

@media screen and (max-width:330px) {

    /* iphone 5 */

    .head {
/*        font-size: 38px;*/
        font-size: 2.23em;

/*        line-height: 39px;*/
        line-height: calc( 1.03 * var(--line-height-rate));
        padding-left: initial;
        padding-right: initial;
    }
    #home-btn
    {
        display: none;
    }
    #login-btn
    {
        right: auto;
        left: 150px;
    }
}



/* grid */



/* 3-column */
@media screen and (min-width: 1450px) {
    #docket.category > #viewport {
      width: 1200px;
    }

}

@media screen and (min-width: 1850px) {

    #docket:not(.resources) > #viewport {
        width: 1200px;
    }

    #docket.category > #viewport {
      width: 1600px;
    }

}

/* 4-column */

@media screen and (min-width: 2300px) {

    #docket:not(.resources) > #viewport {
        width: 1600px;
    }

    #docket.category > #viewport {
      width: 2000px;
    }
}