html, body { height: 100vh; min-height: 100vh; }
/* scroll snapping */
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 */ 
}

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

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

/* not sure about this one - useful? */
#exhibit { margin: 0; padding: 0; }
#exhibit .container { margin: 0; padding: 0; }

#index { background: transparent; }

/* scroll snapping */
#exhibit .asset-holder { scroll-snap-align: start; overflow-y: scroll; }
#exhibit .container { padding: 0; }

/* location of exhibit content - top and left values will need to be set pertaining to your templates */
#exhibit .container #textspace { position: absolute; z-index: 5; top: var(--margin); /* left: var(--margin); */ left: 321px; width: 650px; }
#exhibit .container { position: relative; }

.background-1 .asset-holder { display: block; width: 100vw; height: 100vh; position: relative; }
.background-1 .asset-holder .asset { display: block; width: 100vw; height: 100vh; background-position: center center; background-repeat: no-repeat; background-size: cover; }
/* left value may need adjusting */
.background-1 .asset-holder .asset .asset-text { position: absolute; z-index: 2; left: 321px; bottom: 36px; max-width: 500px; text-align: left; }

/* change title/caption parts here */
.background-1 .asset-holder .asset .asset-text h3.title { display: inline-block; }
.background-1 .asset-holder .asset .asset-text div.caption { display: inline-block; }

.background-1 .arrow-down { transform: rotate(135deg); position: absolute; z-index: 2; width: 32px; height: 32px; bottom: 36px; left: calc(50% - 16px); }
.background-1 .arrow-down:before { height: 0px; /* tail height */ }


@media only screen and (max-width: 900px)  
{ 
    #director { right: 21px; bottom: 21px; }
    #titlespace { /* color: white; */ left: 21px; bottom: 21px; }
    #exhibit .container #textspace { top: 100px; left: 21px; width: auto; }

    .background-1 .asset-holder .asset .asset-text { left: 21px; bottom: 21px; text-align: left; }
    .background-1 .arrow-down { left: initial; bottom: 21px; right: 21px; width: 16px; height: 16px; }
}