/* exo-2-200 - vietnamese_latin-ext_latin_cyrillic-ext_cyrillic */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/exo-2-v20-vietnamese_latin-ext_latin_cyrillic-ext_cyrillic-200.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/exo-2-v20-vietnamese_latin-ext_latin_cyrillic-ext_cyrillic-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/exo-2-v20-vietnamese_latin-ext_latin_cyrillic-ext_cyrillic-200.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/exo-2-v20-vietnamese_latin-ext_latin_cyrillic-ext_cyrillic-200.woff') format('woff'), /* Modern Browsers */
       url('../fonts/exo-2-v20-vietnamese_latin-ext_latin_cyrillic-ext_cyrillic-200.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/exo-2-v20-vietnamese_latin-ext_latin_cyrillic-ext_cyrillic-200.svg#Exo2') format('svg'); /* Legacy iOS */
}

/* exo-2-regular - vietnamese_latin-ext_latin_cyrillic-ext_cyrillic */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/exo-2-v20-vietnamese_latin-ext_latin_cyrillic-ext_cyrillic-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/exo-2-v20-vietnamese_latin-ext_latin_cyrillic-ext_cyrillic-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/exo-2-v20-vietnamese_latin-ext_latin_cyrillic-ext_cyrillic-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/exo-2-v20-vietnamese_latin-ext_latin_cyrillic-ext_cyrillic-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/exo-2-v20-vietnamese_latin-ext_latin_cyrillic-ext_cyrillic-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/exo-2-v20-vietnamese_latin-ext_latin_cyrillic-ext_cyrillic-regular.svg#Exo2') format('svg'); /* Legacy iOS */
}

/* exo-2-700 - vietnamese_latin-ext_latin_cyrillic-ext_cyrillic */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/exo-2-v20-vietnamese_latin-ext_latin_cyrillic-ext_cyrillic-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/exo-2-v20-vietnamese_latin-ext_latin_cyrillic-ext_cyrillic-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/exo-2-v20-vietnamese_latin-ext_latin_cyrillic-ext_cyrillic-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/exo-2-v20-vietnamese_latin-ext_latin_cyrillic-ext_cyrillic-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/exo-2-v20-vietnamese_latin-ext_latin_cyrillic-ext_cyrillic-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/exo-2-v20-vietnamese_latin-ext_latin_cyrillic-ext_cyrillic-700.svg#Exo2') format('svg'); /* Legacy iOS */
}

/* exo-2-800 - vietnamese_latin-ext_latin_cyrillic-ext_cyrillic */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/exo-2-v20-vietnamese_latin-ext_latin_cyrillic-ext_cyrillic-800.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/exo-2-v20-vietnamese_latin-ext_latin_cyrillic-ext_cyrillic-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/exo-2-v20-vietnamese_latin-ext_latin_cyrillic-ext_cyrillic-800.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/exo-2-v20-vietnamese_latin-ext_latin_cyrillic-ext_cyrillic-800.woff') format('woff'), /* Modern Browsers */
       url('../fonts/exo-2-v20-vietnamese_latin-ext_latin_cyrillic-ext_cyrillic-800.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/exo-2-v20-vietnamese_latin-ext_latin_cyrillic-ext_cyrillic-800.svg#Exo2') format('svg'); /* Legacy iOS */
}




html body {
    font-family: 'Exo 2', sans-serif;
    min-width: 360px;
    background: rgb(212, 212, 212);
}
a, a:hover {
    color: unset;
    transition: all .3s;
}
br {
    line-height:50%;
}
h1 {
    font-size: 2.1rem;
    font-weight: 900;
    line-height: 1.1;
    color: white;
    margin: 0;
}
p, li {
    font-size: 1.2rem;
    line-height: 1.8rem;
}
ul {
    padding-left: 0;
}
main {
    min-height: 50vh;
    padding-bottom: 2.2rem;
}
nav a {
    text-decoration: none;
}
nav.navbar-expand-lg {
    padding: 1.5rem 1rem 1.5rem 1.5rem;
    overflow: hidden;
}
nav.navbar a {
    font-size: 1.2rem;
}

.navbar-dark .navbar-nav .nav-link {
    color: rgb(255,255,255);
    text-align: center;
    text-shadow: 1px 1px 1px hsl(0, 0%, 0.8%);
    font-weight: 600;
    mix-blend-mode: screen;
}
.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgb(255, 255, 255)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
#navbarToggler {
    transition: 0.2s all;
}
.navbar .nav-item span.btn {
    background:white; 
    font-size: 1.2rem;
    text-shadow: none;
}


.container .wrap a, .desc.wrap a {
    text-decoration: underline;
}
.header {
    padding-bottom: 2rem;
}
.start .header {
    padding-bottom: .5rem;
}

.navbar-nav.mr-auto.justify-content-end {
    flex-grow: 1;
} 

#overlay {
    position: fixed;
    width: calc( 100% - 3rem );
    background: rgba(93, 240, 102, 0.8);
    padding: 3rem;
    z-index: 1000;
    border: solid 1rem white;
}
#overlay h1 {
    font-weight: 800;
    margin-bottom: 1rem
}
#overlay h2 {
    color:black;
    font-weight: 400;
}
#overlay h2 a{
    text-decoration: underline;
}

#hint {
    background:white; 
    text-align:center; 
    margin-bottom: 1rem;
    padding: .5rem;
}
#hint a {
    line-height: 1.2;
    text-decoration: underline;
}

#schedule {
    padding: 0 1.5rem 2rem 1.5rem;
}
.logos {
    float:right;
    padding: 10px 0;
    mix-blend-mode: multiply;
    text-align: right;
    /* Chrome bug: doesn't multiply transparent img */
    will-change: opacity;
}
.logos img:first-child {
    margin-right: 30px;
}
.desc {
    padding-top: 2rem;
    padding-bottom: 1.3rem;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}
.desc h3 {
    font-weight: 800;
}
.desc h4 p {
    font-size: 1.5rem;
    line-height: 2.3rem;
}
.desc p.meta {
    font-weight: 700;
    margin-bottom: .5rem;
    -ms-hyphens: none;
    -webkit-hyphens: none;
    hyphens: none;
}
.desc img {
    width: 100%;
}
.desc.wrap a.btn {
    padding: .5rem 1.5rem;
    line-height: 1.5em;
    font-family: inherit;
    font-size: inherit;
    border: 0;
    font-weight: 600;
    margin-top: 1rem;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.9);
    transition: color .15s ease-out, background-color .15s ease-out;
    border-radius: 2px;
    text-decoration: none;
}
.btn.focus, .btn:focus {
    box-shadow: 0 0 0 .2rem rgba(0, 0, 0, 0.25);
}


#archive section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
} 
#archive section::after {
    content: "";
    flex: auto;
}
#archive section a {
    width: calc(20% - .5rem);
    margin-bottom: .5rem;
    margin-right: .5rem;
} 
#archive img {
    width: 100%;
}


#club #agenda {
    width: calc(40% - 3rem);
    float: left;
}
#club #frame {
    float: left;
}


#default p, #club p{
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}


#featured {
    display: flex;
    flex-wrap: wrap;
}
#featured > div {
    border-bottom: 1px solid white;
}
#event, #join, #newsletter, #riddle, #default, #club, #season {
    padding-top: 2rem;
}
#event .text p {
    font-size: 1.7rem;
    line-height: 2.4rem;
    hyphens: auto;
    -ms-hyphens: auto;
}
#movie h2.ot {
    margin-top: -.5rem;
}
#movie #featured {
    min-height: 25vh;
}
#movie .movie picture:before {
        background-image: url(../images/shade.png);
        background-attachment: fixed;
        content: " ";
        height: 100%;
        position: absolute;
        width: 100%;
        left: 0;
        top: 0;
        z-index: 4;
}
#prevnext {
    display: flex;
    width: 100%;
    margin-left: 0;
}
#prevnext > div{
    padding: 1.5rem;
    flex: 50%;
}
#prev, #next {
    display: flex;
}
#prev a, #next a {
    align-items: baseline;
    font-size: 1.2rem;
    font-weight: 800;
}
#prev {
    justify-content: flex-start;
}
#next {
    justify-content: flex-end;
}

@media (max-width: 576px) {
    #event .text p {
        font-size: 1.2rem;
        line-height: 1.8rem;
    }
}


.title {
    position: absolute;
    top: 0;
    padding: 1.1rem 1.5rem;
    z-index: 5;
    width: 100%;
}
.movie {
    position: relative;
    width: 100%;
}
.movie h1, .movie h2 {
    display: inline-block;
    margin-bottom: 1rem;
    margin-right: 12px;
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1;
    color: white;
}
.header h2 {
    font-weight: 800;
    color: white;
    margin-top: .5rem;
}
.movie h2 a {
    text-decoration: underline;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    letter-spacing: -.7pt;
}
.movie h2 a:hover {
    letter-spacing: 0;
}
.movie h2.ot {
    display: inline-block;
    font-weight: 200;
    line-height: 1.2;
    font-size: 2.6rem;
}
.movie h3.meta {
    display: inline-block;
    font-weight: 700;
    margin: 1rem 0;
}
.movie picture img, .movie picture source {
    object-fit: cover;
    /* place picture behind first title 
    margin-top: -173px;*/
}
.ot {
    font-weight: 200;
    margin-bottom: 10px;
}
.white-box {
    background:white; 
    padding: 1.2rem 1.5rem .5rem 1.5rem; 
    margin-bottom: 1.5rem
}
.wrap {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    padding-top: 1rem;
}

#season .movie h2 a {
    font-size: 2.3rem;
    }
#season .movie h2.ot {
    font-size: 2.1rem;
}

.start #frame .wrap {
    column-count: 2;
    padding-bottom: 1.2rem;
}
.start #frame .wrap p {
    break-inside: avoid-column;
}


.grid-item picture img { 
    width: 400px;
}
.grid-item--width2 { 
    width: 800px; 
}


/* Form page */

input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border:none;
    border-radius: 0;
    font-size: 1em;
    width: 100%
  }


input[type='checkbox']:checked,
input[type='checkbox']:not(:checked),
input[type='radio']:checked,
input[type='radio']:not(:checked) {
    content:' ';
    display: inline-block;
    width: 17px;
    height: 17px;
    position: relative;
    top: 1px;
    border: 1px solid #bbb;
    background: white;
    margin-right: .5rem;
}

input[type=radio]:checked,
input[type=radio]:not(:checked) {
    border-radius: 30px;
}

input[type='checkbox']:hover,
input[type='radio']:hover {
    background:#ddd;
    box-shadow: inset 0 0 0 2px white;
}


#gallery .d-flex {
  gap: 1.5rem;
}

#gallery .d-flex a {
  width: calc( 25% - .5rem);
} 

#gallery .d-flex a img {
  width: 100%;
}


/* Kirby pagination */

.pagination-item.left {
    margin-right: 15px;
}
.pagination-item.right {
    margin-left: 15px;
}
.pagination-item div.circle {
    position: relative;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    color: #202452;
    border-bottom: 0;
    border: 2px solid currentColor;
}
.is-inactive .pagination-item div.circle {
    color: #adadad;
    border: 2px solid currentColor;
    background: transparent;
}
.is-inactive {
    mix-blend-mode: multiply;
}
.pagination-item svg {
    position: relative;
    top: 50%;
    display: block;
    margin: -5px auto 0;
    width: 24px;
    height: 12px;
}
.pagination-item path {
    fill: currentColor;
}

::selection {
    background: white; /* WebKit/Blink Browsers */
}
::-moz-selection {
    background: white; /* Gecko Browsers */
}


@media (min-width: 1500px) {

    .start #frame .wrap {
        column-count: 3;
    }

}


@media (max-width: 1199px) {
    div.desc img {
        margin-bottom: 2rem;
    }
}


@media (max-width: 768px) {
    p, li {
        font-size: 1.1rem;
        line-height: 1.6rem;
    }
    .start h2 {
        font-size: 2.1rem;
    }
    .start .movie h2 span.ot {
        font-size: 1.6rem; 
     }
    .start #frame .wrap {
        column-count: 1;
    }
    h3 {
        font-size: 1.2rem;
    }
    .start h4 {
        font-size: 1.2rem;
    }
    #navbarToggler {
        border-bottom: solid 1px white;
        padding-bottom: 1rem;
    }
    #archive section a {
        width: calc(50% - .5rem);
        margin-bottom: 1rem;
    }
    #club #agenda, #club #frame {
        width: 100%;
        float: none;
    }
    #overlay {
        padding: 1.5rem;
        position: absolute;
    }
    #overlay h1 {
        font-size: 2rem;
    }
    #overlay h2 {
        font-size: 1.5rem;
    }
    div.movie:nth-child(3n+3):before {
        background-image: none;
    }
}

@media (max-width: 575px), (min-aspect-ratio: 90/100) and (max-width: 768px) {
    main {
            padding-bottom: 1rem;
    }
    #schedule .movie {
        padding-bottom: 1.5rem;
    }
    #movie #featured > div {
        border-bottom: none;
    }
    #movie .desc {
        padding-top: 1.5rem;
    }

    #movienight .desc {
        border-bottom: 1px solid white;
    }
    .movie picture img, .movie picture source {
        z-index: 5;
        position: relative;
        width: calc(100% - 2rem);
        margin-left: 1rem;
    }
    .navbar-brand svg {
        width: 100%;
    }
    .title {
        position: relative;
        box-shadow: none;
        overflow: hidden;
    }
    .logos {
        display: flex;
        flex-wrap: wrap;
    }
    .logos img:first-child {
        width: 30%;
        margin: 10px 24px 10px 0;
    }
    .logos img:last-child {
        width: 52%;
    }

    #archive section a {
        width: 100%;
        margin-bottom: 1rem;
    }
    
    div.movie:nth-child(even):before {
        background-image: url(../images/shade.png);
        background-attachment: fixed;
        content: " ";
        height: 100%;
        position: absolute;
        width: 100%;
        left: 0;
        top: 0;
        z-index: 4;
    }
    /**
    div.movie:nth-child(3n+3):before {
        background-image: none;
    }
    */
}

@media (max-width: 402px) {
    .navbar-brand {
        width: 77%;
    }
    .movie h1, .movie h2 {
       font-size: 2.4rem;
    }
    h3 {
       font-size: 1.3rem;
    }
}

@media (min-width: 576px) and (max-aspect-ratio: 90/100) {
    .movie picture img, .movie picture source {
        object-position: 50% 35%;
        width: 100%;
        overflow: hidden;
        height: 50vh;
        /* place picture behind first title 
        margin-top: -173px;*/
    }
}
@media (min-width: 576px) {
    .movie picture:before {
        background-image: url(../images/shade.png);
        background-attachment: fixed;
        content: " ";
        height: 100%;
        position: absolute;
        width: 100%;
        left: 0;
        top: 0;
        z-index: 4;
    }
}

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav {
        align-items: center;
        justify-content: space-around;
        flex-grow: 1;
    }
    #movie .movie h1, #movie .movie h2 {
        font-size: 4rem;
    }
    #movie .movie .ot {
        font-size: 2.5rem;
    }
    .movie h2 a {
        font-size: 3.2rem;
    }
    .movie h4 {
        font-size: 1.75rem;
    }
    .movie picture img, .movie picture source {
        object-position: 50% 35%;
        height: 66vh;
        width: 100%;
        overflow: hidden;
        /* place picture behind first title 
        margin-top: -173px;*/
    }
    #season .movie picture img, #season .movie picture source {
        height: 35vh;
    }
}