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

/* move the director arrow around with this setting */
#director { position: fixed; z-index: 4; 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; }
*/

/* not sure about this one - useful? */
#exhibit { margin: 0; padding: 0; }
#exhibit .container { margin: 0; padding: 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 { position: absolute; z-index: 5; top: var(--margin); /* left: var(--margin); */ left: 321px; width: 650px; }
#exhibit .container { position: relative; }

.vhslides-0 .asset-holder.first { display: block; width: 100vw; height: 100vh; position: relative; }
.vhslides-0 .asset-holder.first .asset { display: block; width: 100vw; height: 100vh; background-position: center center; background-repeat: no-repeat; background-size: cover; }
/* left value may need adjusting */
.vhslides-0 .asset-holder.first .asset-text { position: absolute; z-index: 2; left: 321px; bottom: 36px; max-width: 300px; text-align: left; }
/* you can make it a 'hero' by adjusting the height of this one */
/* .vhslides-0 .asset-holder.first .asset { height: 70vh; } */

.vhslides-0 .asset-holder { display: block; width: 100vw; height: 100vh; position: relative; }
.vhslides-0 .asset-holder .asset { display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; }
.vhslides-0 .asset-holder .asset .asset-display { position: absolute; z-index: 1; top: 100px; left: 150px; right: 150px; bottom: 150px; background-position: center center; background-repeat: no-repeat; background-size: contain; }
.vhslides-0 .asset-holder .asset-text { position: absolute; z-index: 2; left: 20%; right: 20%; bottom: 36px; text-align: center; width: auto; }

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

#img-container.vhslides-1 { display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: nowrap; }

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

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

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


.asset-holder .asset-video { display: flex; justify-content: center; align-items: center; }
.asset-holder .asset-video .youtube { position: relative; width: 900px; }
.asset-holder .asset-video .youtube:after { padding-bottom: 62.5%; display: block; content: ''; }
.asset-holder .asset-video .youtube iframe 
{ position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    z-index: 8; 
}

.asset-holder.first .asset-video .youtube { width: 100vw; }
.asset-holder.first .asset-video .youtube:after { padding-bottom: 100vh; }
.asset-holder .asset-video .mp4 video {
    position: relative;
    top: 0; left: 0;
    width: 900px;
    height: 100%;
    z-index: 1;
    object-fit: cover !important;
}
.asset-holder.first .asset-video .mp4 video { width: 100vw; height: 100vh; }

/* work these into core */
#index {  }
#exhibit {  }


@media only screen and (max-width: 900px)  
{ 
    #director { right: 21px; bottom: 21px; }
    .vhslides-0 .asset-holder .asset .asset-display,
    .vhslides-1 .asset-holder .asset .asset-display { top: 21px; left: 21px; right: 21px; bottom: 50px; }
    .vhslides-0 .asset-holder .asset .asset-text,
    .vhslides-1 .asset-holder .asset .asset-text { left: 21px; right: 21px; bottom: 21px; }
    .asset-holder.content .asset .asset-content { height: auto; width: 100%; padding: 0 21px }
    .asset-holder .asset-video .mp4 video { width: 100%; }
    .vhslides-0 .asset-holder.first .asset-text { left: 21px; bottom: 21px; max-width: auto; text-align: left; }
    .vhslides-0 .arrow-down { bottom: 21px; left: initial; right: 21px; }
    .vhslides-1 .asset-holder.first .asset-text { left: 21px; bottom: 21px; max-width: auto; text-align: left; }
    .asset-holder.content .asset .asset-content { font-size: 16px; }
}