/* if you want to center text with this format */
/*
#exhibit .container { width: auto; text-align: center; }
#exhibit #slideshow { margin: 0 auto; }
#exhibit #slideshow .captioning,
#exhibit #slideshow .textspace { text-align: left; }
*/

/* margin bottom should account for space to title caption as well */
#exhibit #slideshow { position: relative; margin-bottom: 100px; }

/* distance under navigation */
#exhibit #slide-nav { margin-bottom: 0.5em; }

/* change the text of the nav here */
#exhibit #slide-nav a.slide-previous:after { content: 'Previous' }
#exhibit #slide-nav a.slide-next:after { content: 'Next' }
#exhibit #slide-nav a.slide-next:before { content: ' - ' }
#exhibit #slide-nav a.slide-previous,
#exhibit #slide-nav a.slide-next { text-decoration: none; }
#exhibit #slide-nav a.slide-previous:hover,
#exhibit #slide-nav a.slide-next:hover { opacity: 0.5; }

/* change dividers and basic spacing */
#slide-nav-spacer { }
#slide-divider { padding: 0 12px; }
#slide-divider:before { content: ' | '; }
#slide-count { }
#slide-count-divider:before { content: ' : ' }
#slide-total { }

#slideshow.navtype-1 #slide-counter-holder { display: none; }
#slideshow.navtype-0 #slide-counter-holder { position: absolute; z-index: 305; top: 12px; left: 12px; background: transparent; padding: 3px 6px; display: inline-block; opacity: 0; transition: opacity 0.2s ease-in-out; }
#slideshow.navtype-0 #slide-counter-holder.active { opacity: 1; transition: opacity 0.2s ease-in-out; }

#slideshow.navtype-0 a.slide-previous
{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 20%;
    width: 40%;
    z-index: 310;
}
#slideshow.navtype-0 a.slide-previous:hover
{
    cursor: url(/ndxzsite/img/hlarr.cur), auto; /*IE & Edge*/
    cursor: url(/ndxzsite/img/hlarr.svg) 32 31, auto; /*Rest browsers*/
}
#slideshow.navtype-0 a.slide-next
{
    position: absolute;
    right: 0;
    top: 0;
    bottom: 20%;
    width: 40%;
    z-index: 311;
}
#slideshow.navtype-0 a.slide-next:hover
{
    cursor: url(/ndxzsite/img/harr.cur), auto; /*IE & Edge*/
    cursor: url(/ndxzsite/img/harr.svg) 32 31, auto; /*Rest browsers*/
}

#active-count {  }
#total-count {  }
/* counter separator - you can change */
#total-count:before { content: ' : '; }

/* width of the text space */
#textspace { max-width: 900px; }
#textspace.after { margin-top: 1em; }
#textspace.before { margin-bottom: 3em; }

#img-container { position: relative; }

#exhibit #slideshow .asset-holder { /* max-width: 100%; max-height: 100%; */ }
#exhibit #slideshow .asset-holder { position: absolute; top: 0; left: 0; line-height: 0; opacity: 0; visibility: hidden; transition: all 0.3s ease-in-out; }
#exhibit #slideshow .asset-holder .asset { display: inline-block; }
#exhibit #slideshow #slideshow-counter { position: absolute; top: 21px; left: 21px; width: 50px; z-index: 2; }
#exhibit #slideshow .asset-holder.active { z-index: 101; opacity: 1; visibility: visible; display: block; 
    transition: all 0.3s ease-in-out; }

/* you can fully adjust all of these but remember that they add up together */
#exhibit #slideshow .spacer { margin-bottom: 3vmin; /* height: 50px; */ }
#exhibit #slideshow .captioning { margin-top: 6px; line-height: 1.3em; }
#exhibit #slideshow .title {  }
#exhibit #slideshow .caption {  }

/* video - probably don't need to touch these */
#exhibit #slideshow .asset-holder .asset .youtube { position: relative; width: 100%; height: 100%; }
#exhibit #slideshow .asset-holder .asset .youtube iframe 
{ position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    z-index: 8; 
}

#exhibit #slideshow .asset-holder.first .asset .youtube { position: relative; width: 100%; height: 100%; }
#exhibit #slideshow .asset-holder.first .asset .youtube iframe 
{ position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    z-index: 8; 
}

#exhibit #slideshow .asset-holder .asset .img-portrait { max-width: auto; max-height: 100%; }
#exhibit #slideshow .asset-holder .asset .img-landscape { max-width: 100%; height: auto; }
#exhibit #slideshow .asset-holder .asset .img-square { max-width: 100%; height: auto; }


/* 75% for basic 4:3 ratio - you can change this as you wish with % */
#exhibit #slideshow:after { padding-bottom: 75%; display: block; content: ''; }
#exhibit #slideshow .asset-holder { width: 100%; height: 100%; }
#exhibit #slideshow .asset-holder .asset { width: 100%; height: 100%; }
#exhibit #slideshow .asset-holder .asset img 
{ 
    max-height: 100%; 
    cursor: url(/ndxzsite/img/harr.cur), auto; /*IE & Edge*/
    cursor: url(/ndxzsite/img/harr.svg) 32 31, auto; /*Rest browsers*/
}


@media only screen and (max-width: 900px)  
{ 
	#exhibit #slideshow { position: relative; }
    #exhibit #slideshow .asset-holder { display: block; opacity: 1; position: relative; max-height: none !important; max-width: none !important; height: auto !important; }
    #exhibit #slide-nav { display: none; }
    #exhibit #slideshow .asset-holder .asset img { width: 100%; height: auto; }
    #exhibit #slideshow .asset-holder .asset .youtube { width: 100%; height: auto; }

    #slideshow.navtype-0 a.slide-previous,
    #slideshow.navtype-0 a.slide-next { display: none;}
    #slideshow.navtype-0 #slide-counter-holder { display: none; }
}