body, html {
  height: 100%;
}

?* {
  box-sizing: border-box;
}


div.page {
    width: 100%;
    height: 125%;
    margin: auto;
    background-image: url("../images/movieFrame.1440x1080.4x3.jpg");
    background-size: 100% 100%;
}

h1 {
    text-align: center;
    position: static;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    padding-top: 12vh;
    /* padding-top: 10vw; */
    /* font-family: "Haetten", sans-serif; */
    font-family: 'Girassol';
    font-size: 5.15vw;
}

div.ib {
    text-align: center;
    position: absolute;
    left: 40%;
    right: 50%;
    top: 55%;
    transform: translate(-50%, -50%);
    width: 65%;
    padding-top: 68vh;
    display: inline-block;
    margin: 10vmin;
}

div.ib > img {
    padding: 1vmin 3.5vmin;
}


div.flxO {
    margin: auto;
    width: 65%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 68vh;
    column-gap: 5vmin;
    margin-bottom: 2vh;
    vertical-align: middle;
}

div.flx {
    margin: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0 4px;
    width: 65%;
    padding-top: 68vh;
    vertical-align: middle;
}

img.next {
    width: 35vmin;
    /*
    margin: 2.5vmin 5vmin;
    padding: 1.5vmin;
    */
    vertical-align: middle;
}


/* Films, Dates & Announcements */
h6 {
    /* font-family: "Broadway", sans-serif;*/
    /* font-family: 'Abril Fatface'; */
    font-family: 'Chango';
    font-weight: 900;
    font-size: 3.25vmin;
    margin: .2vmin;
    padding: .2vmin;
}

h6.firm {
    margin-top: 3vw;
    padding: 10px;
    /*font-family: "Broadway", sans-serif;*/
    /* font-family: 'Abril Fatface'; */
    font-family: 'Chango';
    font-weight: 900;
    font-size: 3.0vmin;
    border: 6px dashed green;
    text-align: center;
}

h6.tentative {
    margin-top: 1.5vw;
    padding: 3px;
    /*font-family: "Broadway", sans-serif;*/
    /* font-family: 'Abril Fatface'; */
    font-family: 'Chango';
    /* font-family: sans-serif; */
    font-weight: 900;
    font-size: 2.5vmin;
    border: 5px dotted #FF8C00;
    text-align: center
}

h6.cancelled {
    margin-top: 1.5vw;
    padding: 3px;
    /*font-family: "Broadway", sans-serif;*/
    /* font-family: 'Abril Fatface'; */
    font-family: 'Chango';
    font-weight: 900;
    font-size: 1vmin;
    border: 4px double red;
    text-align: center;
}

table.next {
    position: absolute;
    left: 49%;
    top: 55%;
    transform: translate(-50%, -50%);
    width: 35vmin;
    /*
    see following link to explain next two settings:
    https://stackoverflow.com/questions/10663267/css-link-not-clickable-when-using-absolute-position
    */
    z-index: 10; 
    pointer-events: all;
}

figure {
    margin: 10px;
}

img {
    border: 3px solid black;
    width: 35vmin;
    height: auto;
}

img.neon {
    border: none;
}

img.message {
    max-height: 200px;
    height: 20vmin;
    width: auto;
}

table.next > img {
    border: none;
}


figcaption{
    margin-top: 1vmin;
    text-align: center;
    font-family: sans-serif;
    font-size: 2.05vmin;
    font-weight: bold;
    width: 15vmin;
}


/* COMING */
div#coming {
    margin: auto;
    width: 75%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 1.0vh;
    column-gap: 0px;
    margin-bottom: 2vh;
}

div#coming > table {
    /*margin: .5vh 1vw; */ /* NS EW */
    /* width: 36%; */
    /*
    margin: 0;
    width: .1vw;
    height: .1vh;
    */
    display: inline-block;
}

div#coming > table > tr > td {
    vertical-align: middle;
    text-align: center;
}

div#coming > table > tr > td > figure {
    vertical-align: middle;
    display: inline-block;
}

div#coming > table > tr > td > p {
    vertical-align: middle;
    display: inline-block;
}

h6.sm {
    /*font-family: "Broadway", sans-serif;*/
    /* font-family: 'Abril Fatface'; */
    font-family: 'Chango';
    font-weight: 100;
    font-size: 1.35vw;
    margin: .05vmin;
}

p.sm {
    /*font-family: "Broadway", sans-serif;*/
    font-family: 'Abril Fatface';
    /* font-family: 'Chango'; */
    /* font-weight: 200; */
    /* font-size: 1.35vw; */
    margin: .02vmin;
    font-size: 1.35vw;
}

img.sm { 
    max-width: 335px; 
    width: 35vmin;
    height: auto;
}

figcaption.coming {
    margin-top: 1vmin;
    text-align: center;
    font-family: sans-serif;
    font-size: 2.05vmin;
    font-weight: bold;
    width: auto;
}

/* Movie Night */
/*
div#mn {
    margin: 5vh 20vw;
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: space-evenly;
}
*/

div#mn{
    width: 65%;
    margin: auto;
}

div.column {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    padding: 0 2px;
}

div.row {
    flex: 45%;
    max-width: 50%;
    padding: 0 4px;
    margin: auto;
}

.column p {
    border: 1px dashed black;
    padding: 4px;
    margin-top: 8px;
    vertical-align: middle;
    font-size: 2.25vmin;
}

.row p {
    border: 1px dashed black;
    padding: 4px;
    margin-top: 8px;
    vertical-align: middle;
    font-size: 2.25vmin;
}

.flgrow {
    flex-grow: 8;
}

h2.h2 {
    text-align: center;
    position: static;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    padding-top: 1vh;
    font-size: 1.25vw;
    width: 60vmin;
}


div#mn > h3 {
    font-size: 2vmin; 
    text-align: center; 
    color: blue; 
    margin: 1.5vmin;
}


/* Pay As You Exit */

div#pay {
    margin: auto;
    padding: 0;
    width: 64%;
}

div#pay > h2 {
    text-align: center;
    font-size: 3.5vw;
    margin: 0vh;
    padding: 0vh;
    line-height: 1em;
}

div#pay > p {
    text-align: left;
    font-size: 2vw;
    margin: 3vh 0;
}

/* About */

/*
div#about {
    margin: auto;
    margin-left: 25vmin;
    width: 65%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 1.0vh;
    column-gap: 0px;
    margin-bottom: 2vh;
    display: inline-block;
}
*/

div#about {
    padding: 5vh 17vw;
    padding-top: 0;
    width: 65%;
    margin-left: auto;
    margin-right: auto;
}

div.photos {
    width: 20vmin;
}

/*
div.photos > figure {
    width: 20vmin;
}
*/

div.dir2 {
    margin-left: 2vmin;
}

div.dir2 > p {
    font-size: 2.25vmin;
}

/*
div.txt {
    width: 35%;
}

div.txt > p {
    font-size: 2.5vmin;
}

/* Parking */

div#parking {
    margin-left: auto;
    margin-right: auto;
    padding: 5vh 5vw;
    padding-top: 0;
    width: 60%;
}

div#parking > p {
    font-size: 2.5vh;
}

div#parking > li {
    font-size: 1.5vh;
}

div.twocol {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
}

div.map  {
    width: 40vmin;
}

div.map > figure > figcaption  {
    width: 40vmin;
}

div.dir {
    margin-left: 5vmin;
    width: 35vmin;
}

div.distances  {
    width: 50vmin;
}

div.distances > figure > figcaption  {
    width: 50vmin;
}

/*
@font-face {
    font-family: "Haetten";
    src: url('./fonts/HATTEN.TTF') format('truetype');
}

@font-face {
    font-family: "Broadway";
    src: url('./fonts/BROADW.TTF') format('truetype');
}
*/