body { overflow-x: hidden !important; max-width: 100vw; }
/* make it scrollable */
/* body { overflow-x: scroll !important; } */

/* set height of images - vh (% vertical height) values should be the same */
#horizontal #textspace .innerspace { height: 75vh; /* max-height: 700px; */ }
#horizontal .asset-holder .asset img,
#horizontal .asset-holder { max-height: 75vh; }

/* vertical positoin of images - top:flex-start, center:center, bottom:flex-end */
#horizontal { align-items: flex-start; }
/* #horizontal { align-items: center; } */

/* right margin/divider of image container */
#horizontal .asset-holder { width: auto; margin-right: 36px; }
#horizontal .asset-holder .asset { line-height: 0; position: relative; }
#horizontal .asset-holder .asset a img { height: 100%; }
/* this can force all images to be same height - if needed */
/* #horizontal .asset-holder .asset a img { height: 800px; width: auto; } */

/* change textspace width and right margin here */
#horizontal #textspace { width: 350px; line-height: 1.4em; }
#horizontal #textspace .innerspace { margin-right: 21px; line-height: 1.4em; }

/* titles captions settings - under images */
#horizontal .captioning { height: 50px; line-height: 1.4em; overflow: visible; }
#horizontal .captioning h3 { margin-top: 3px; }

/* you can set the container to push first image off page
but you should set a blank image at the end so the second to last
image is visible */
/* #exhibit .container { padding-left: 75%; } */


/* NOT RECOMMEND TO CHANGE THINGS BELOW */
#exhibit { height: 100vh; } /* some themes might need this setting */
#exhibit .container { height: 100%; position: relative; top: 0; left: 0; }
#exhibit .container #img-container { position: relative; height: 100%; display: flex; justify-content: flex-start; align-items: center; }
#horizontal { display: flex; flex-wrap: nowrap; position: absolute; z-index: 1; height: 100%; line-height: 0; top: 0; transition: all .5s easeInOutExpo !important; }

#horizontal .extra-click { display: none; position: absolute; z-index: 900; right: 18px; top: 18px; width: 24px; height: 24px; }
#horizontal .asset-holder .asset:hover .extra-click { display: block; }
#horizontal .extra-click a { display: block; width: 24px; height: 24px; background: transparent url(/ndxzsite/img/henlarge.svg) no-repeat center center; }
#horizontal.horizontal-2 .extra-click a { background: transparent url(/ndxzsite/img/hlink.svg) no-repeat center center; }

#horizontal .asset-holder .asset img:hover
{
    cursor: url(/ndxzsite/img/hlarr.cur), auto; /*IE & Edge*/
    cursor: url(/ndxzsite/img/hlarr.svg) 32 31, auto; /*Rest browsers*/
}

/* at the moment the video width is arbitrary */
#horizontal .youtube, #horizontal .vimeo { width: 700px; height: 100%; position: relative; }
#horizontal .youtube:after { display: block; content: ''; padding-bottom: 60vh;  }
#horizontal .youtube iframe, #horizontal .vimeo iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

/* mp4 is really problematic because of scaling - unsure at the momment */
#horizontal .mp4 { width: 700px; height: 100%; position: relative; }
#horizontal .mp4 video { width: 100%; height: 100%; }


@media only screen and (max-width: 900px) 
{ 
    #exhibit { width: 100vw; padding-left: 0; }
    #exhibit .container { display: block; height: auto; align-items: left; }
    #horizontal { display: block; height: auto; position: relative; }
    #horizontal .asset-holder { height: auto; margin-right: 0; max-height: none; margin-bottom: 4vmin; }
    #horizontal .asset-holder .asset { line-height: 0; height: auto; }
    #horizontal .asset-holder .asset img { max-height: none; width: 100%; height: auto; }
    #horizontal #textspace { width: auto; }
    #horizontal #textspace .innerspace { margin-right: 0; height: auto; }
    #horizontal .asset-holder .asset img:hover { cursor: pointer; }

    #horizontal .youtube, #horizontal .vimeo { width: 100%; height: auto; position: relative; }
    #horizontal .youtube:after { display: block; content: ''; padding-bottom: 60vh;  }
    #horizontal .youtube iframe, #horizontal .vimeo iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

    #horizontal .asset-holder .asset:hover .extra-click { display: none; }
    #horizontal .extra-click { display: none; }
}