html, body { height: 100vh; min-height: 100vh; }
/* #wrapper { height: 100%; width: 100%; } */

/* move the director arrow around with this setting */
#director { position: absolute; z-index: 9; right: 36px; bottom: 36px; }

/* move the title/caption around with this setting */
#titlespace { /* color: white; */ position: absolute; z-index: 9998; left: 320px; bottom: 36px; max-width: 500px; }

/* exampe how to customize particular slide */
/* #asset-holder-134 .asset-content p { font-size: 27px; line-height: 1.3em; } */

/* example of how to change colors over image - if needed
this is incomplete, you may need to add more rules to make this successful */
/*
#img-container p { color: white; }
#index h1 a, #index a { color: white; }
*/
/* vertical */
html
{
    scroll-snap-type: y mandatory;
    scroll-snap-type: mandatory; /* Firefox */  
    -ms-scroll-snap-type: mandatory; /* IE/Edge */  
    -webkit-scroll-snap-type: mandatory; /* Safari */  
    -webkit-scroll-snap-destination: 100vw 100vh;  
    -webkit-overflow-scrolling: touch; /* important for iOS */
}

/* for testing */
#exhibit { margin: 0; padding: 0; width: 100vw; }
#exhibit .container { margin: 0; padding: 0;  min-height: 100vh; }
#exhibit .container #img-container { margin: 0; }

#index { background: transparent; }

/* scroll snapping */
/* html { scroll-snap-type: y mandatory; } */
#exhibit .asset-holder { scroll-snap-align: start; }

/* location of exhibit content - top and left values will need to be set pertaining to your templates */
#exhibit .container #textspace { display: none; }
#exhibit .container {  }

.asset-holder.landscape { display: block; width: 100%; height: 100vh; position: relative; }
.asset-holder.landscape .asset { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding: var(--margin); }
.asset-holder.landscape .asset .asset-display { width: auto; height: 75vh; }
.asset-holder.landscape .asset .asset-display img { width: auto; max-width: 100%; max-height: 75vh; }
.asset-holder.landscape .asset-text {  }

.asset-holder.portrait { display: block; width: 100%; height: 100vh; position: relative; }
.asset-holder.portrait .asset { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding: var(--margin); }
/* margin creates space between images - height restricts max height */
.asset-holder.portrait .asset .asset-display { max-height: 75vh; margin: 0 12px; }
.asset-holder.portrait .asset .asset-display {  }
/* this max-height should be the same as above - change both */
.asset-holder.portrait .asset .asset-display img { width: auto; max-height: 75vh; }
.asset-holder.portrait .asset .asset-text {  }

/* this version has borders around the image */
.asset-holder.landscape.first .asset { align-items: flex-end; }
.asset-holder.landscape.first .asset .asset-display { width: 100%; height: 90vh; background-position: center center; background-repeat: no-repeat; background-size: cover; }


/* if you want a 'hero' type first image *//*
.asset-holder.landscape.first { display: block; width: 100%; height: 100vh; position: relative; }
.asset-holder.landscape.first .asset { align-items: flex-start; width: 100%; height: 100%; padding: 0; }
.asset-holder.landscape.first .asset .asset-display { width: 100%; height: 90vh; background-position: center center; background-repeat: no-repeat; background-size: cover; } */

.asset-holder .asset .asset-text { padding-right: 2em; }
.asset-holder .asset-text h3.title { display: inline-block; margin-right: 0.25em; }
.asset-holder .asset-text div.caption { display: inline-block; }

/* content part */
.asset-holder.content { display: block; width: 100%; height: 100vh; position: relative; }
.asset-holder.content .asset { display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; }
/* change 'content' font size here */ 
.asset-holder.content .asset .asset-content { height: auto; width: 900px; font-size: 24px; line-height: 1.3em; }

/* target specific portrait images this way */
/*
.asset-holder.portrait #asset_2 .asset_display_1 { padding: 50px 0 0 75px; }
.asset-holder.portrait #asset_2 .asset_display_1 img { height: 50vh;}
*/

/*
.asset-holder.first {  }
.asset-holder.first .asset { align-items: flex-end; }
.asset-holder.first .asset .asset-display { width: 100%; height: 90vh; background-position: center center; background-repeat: no-repeat; background-size: cover; }
*/


/* work these into core */
#index { z-index: 2; }
#exhibit { z-index: 1; }


@media only screen and (max-width: 900px)  
{   
    .asset-holder.landscape .first,
    .asset-holder.portrait .asset,
    .asset-holder.landscape .asset,
    .asset-holder .asset { padding: var(--margin900px); }

    .asset-holder.portrait { display: block; height: initial; }
    .asset-holder.portrait .asset { display: block; height: initial; width: initial; }
    .asset-holder.portrait .asset .asset-display { max-height: initial; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
    .asset-holder.portrait .asset .asset-display img { width: auto; max-width: 100%; max-height: 75vh; }

    .asset-holder.landscape .asset .asset-display { width: auto; max-width: 100%; height: auto; }

    .asset-holder.portrait .asset .asset-display { margin: 0; }

    #exhibit .asset-holder { scroll-snap-align: initial; }
    #exhibit .asset-holder.landscape { scroll-snap-align: start; }
    #exhibit .asset-holder.portrait .asset .asset-display { scroll-snap-align: start; }
}