@font-face {
	font-family: 'SuisseIntl';
	src: url('./font/SuisseIntl-Regular-WebXL.woff') format('woff');
	font-weight:normal;
}
@font-face {
	font-family: 'SuisseIntl';
	src: url('./font/SuisseIntl-SemiBold-WebXL.woff') format('woff');
	font-weight:600;
}
@font-face {
	font-family: 'SuisseIntl';
	src: url('./font/SuisseIntl-Bold-WebXL.woff') format('woff');
	font-weight:bold;
}

@font-face {
	font-family: 'fontello';
	src: url('./font/fontello.woff') format('woff');
}

@font-face {
font-family: 'socialicons';
src: url('./font/socialicons.woff?96659974') format('woff');
}
.footer-socialicons a{margin-right:8px;}



body,html{
	height:100%;
}

body{
	-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
	line-height:1.6;

	/*in style.css*/
	/*background:#242529; 
	color:#fff;*/
}


/* in style.css
a:link { text-decoration: none; color: inherit; }
a:visited { text-decoration: none; opacity:0.3; }
a:hover { text-decoration: underline; }
a:active { text-decoration: none; opacity:0.3; }
*/




/* #index */

#index{
	background:inherit;/*body bg*/
	color:inherit;/*body text*/
	width:240px;
	-webkit-text-size-adjust: 100%;
	-webkit-overflow-scrolling: touch;
}

.container { /* both index and exhibit */
	padding: 50px;
	height:100%;
	box-sizing:border-box;
}

#index a, #index a:visited{
	color:inherit;
}

#index ul.section li a{
	opacity:0.33;
	white-space: nowrap;
}
#index ul.section li a:hover{
	opacity:1;
}

/*active*/
li.active a:link, li a.active, li.active a:hover, li a.active, li.active a:active, li a.active, 
li.active a:visited, li a.active, li span.active, #index ul.section li.active a:link, 
#index ul.section li.active a:hover, #index ul.section li.active a:active, #index ul.section li.active a:visited
{ 
	font-weight: normal;
	color:inherit;
	opacity:1;

	border-bottom: 1px solid #fff;
	border-bottom-color: currentColor;
	display: inline-block;
	line-height: 1;
}




#index ul.section{
	margin-top: 30px;
}
#index h1 a{
	color:inherit;
	/*font-weight: bold;*/
	font-family:'SuisseIntl';
}

#index ul.section li.exhibit_title:hover { text-indent: 0px; }


#index ul li sup.new_exhibit:before {color: #F53C84;font-size:10px;position:relative;top:1px;left:1px;transform: translate3d(0,0,0);}


#index .exhibit_link a{ /* external link */
	position:relative;
	
}
#index .exhibit_link a:after{
	font-family: 'fontello';
	font-size:13px;
	content:'';
	 display: inline-block;position:relative;top: -2px;left:0px;margin-left:4px;
}




.bot{
	font-size:12px;
	margin-top: 34px;
}
.bot a:hover{
	text-decoration:none;
}

.mobile-menu{
	display:none;
}




/* exhibit side */


#exhibit{
	margin-left:240px;
	height:auto;

}

#exhibit, #exhibit .container{
	position:relative;
}
#exhibit iframe, #exhibit p, code, blockquote {
	max-width:100%;
}

.youtube_holder .picture:after{
	content:'';
/**/
	background:url('data:image/svg+xml; utf8, <svg height="48" version="1.1" viewBox="0 0 68 48" width="68"     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  ><path fill="#ff0000" fill-opacity="1" class="ytp-large-play-button-bg" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path><path d="M 45,24 27,14 27,34" fill="#fff"></path></svg>');

	background-size: 68px 48px;
	display:block;
	position:absolute;
	width:68px;
	height:48px;
	top: 50%;
	left: 50%;
	margin-top:-23px;
	margin-left:-34px;
	z-index:2;
	pointer-events: none;
}








/*reset format's css (visual_index) */

.format-visual_index #img-container .picture_holder {
	width: auto !important;
	height: auto !important;
	margin-right: 40px;
	margin-bottom: 40px;
}
.format-visual_index #img-container {
	margin-right: -40px;
}
.format-visual_index #img-container:after {
content:'.';
display:block;width:0;height:0;visibility:hidden;clear:both;
}


.format-visual_index #img-container .picture_holder img{
	vertical-align: top;
}
.format-visual_index #ndxz-media img{
	max-width: 100%;
	height: auto;
}

.format-visual_index #img-container .captioning{
	width:auto;
	height:auto;
	margin-top:10px;

}

.format-visual_index .title {
	font-size: 0.75em;
	font-style: normal;
 /* display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;*/
    /**/overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.visual-index-pagination:after{
content:'.';
display:block;width:0;height:0;visibility:hidden;clear:both;
}
#exhibit .visual-index-pagination a{
	text-decoration:none;
}
.visual-index-pagination-next{
float:right;
}
.visual-index-pagination .visual-index-pagination-next:before{
	content:'Next ' ;
}
.visual-index-pagination .visual-index-pagination-next:after{
	content:'→' ;position:relative;top:-1px;
}
.visual-index-pagination .visual-index-pagination-prev:before{
	content:'← ' ;position:relative;top:-1px;
}
.visual-index-pagination .visual-index-pagination-prev:after{
	content:'Prev' ;
}

/*  liquid 3 col visual_index  innerWinth of #img-container 100% = 300pxPhoto*3col + 40pxPhotoMargin*2 +40(negative margin-right) =1020   */
/*  screen100% = 240pxIndex + 50px*2Gutter + 300pxPhoto*3col + 40pxPhotoMargin*2  */
/*@media screen and (max-width: 1320px) {*/
@media screen and (max-width: 1340px) { /* 1320px + scrollbar20px */
	.format-visual_index #img-container .picture_holder {
		width: 29.41%  !important; /* 300px / 1020px  */
		margin-right: 3.92%; /* 40px / 1020px */
		margin-bottom: 3.92%; /* 40px / 1020px */
	}
	.format-visual_index #img-container .picture {
		width:auto !important;
	}
	.format-visual_index #img-container .picture_holder img{
		width:100%;
		height:auto;
	}
	.format-visual_index #img-container {/*100%=980= innerWinth of .container*/
	    margin-right: -4.08%;/* -40px / 980px (negative margin)*/
	}
	.format-visual_index #img-container .captioning{
		    margin-top: 3.33%;/* 10px / 300px */
	}
}

@media screen and (max-width: 480px) {
	.format-visual_index #img-container .picture_holder {
		width: calc((100% - 12px) / 3) !important;
		margin-right: 4px;
		margin-bottom: calc(4px );
	}
	.format-visual_index #img-container .picture {
		width:auto !important;
	}
	.format-visual_index #img-container .picture_holder img{
		width:100%;
		height:auto;
	}
	.format-visual_index #img-container {
	   	 margin-right: -4px;
	}
	.format-visual_index #img-container .captioning{
		margin-top: 4px;
		margin-bottom: 4px;
	}
}


@media screen and (max-width: 480px) {
	.format-visual_index .title {
		font-size: 0.69em;
	}
}



/* media */
#ndxz-media img{
	max-width: 100%;
	height: auto;
	
}


/* overlay #dialog   */
#dialog #pic-holder{
	height: 100%;
	width:100%;
	position:fixed;top:0;left:0;
}
#dialog #pic-holder img{
	max-width:90%;
	max-height:90%;
	width:auto;
	height:auto;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
#inner-top, #inner-bot, #dialog .the-content, .dialog-content  {z-index: auto !important;}
#inner-top, #inner-bot{z-index:9504 !important;}
.dark-dialog #dialog-toggle{
	background:transparent;
}
#dialog #pic-holder a:hover{
	opacity:1;
}



/* format-no_thumbs*/

.format-no_thumbs .nothumb img{
	max-width:100%;
	width:100%;
	cursor:zoom-in;
	/*reset*/
	display:inline;
}
.format-no_thumbs .nothumb {
	margin-bottom: 1em;
	display: inline-block;
	max-width:100%;
	/*reset*/
	float:none;
	padding:0;
}

.format-no_thumbs .nothumb a:hover{
	opacity:1;
}



@media screen and (max-width: 700px) {
	html,body{height:100%;}

	#index{
		position:fixed;
		transform: translateX(-100%);
		width:100%;
		z-index: 10;
		transition: all  0.3s ease;
		box-sizing:border-box;

	}
	body.show-menu #index{
		transform: translateX(0%);
	}

	#exhibit{
		margin-left:0;
		width: 100%;
		box-sizing:border-box;
		position:relative;

		overflow:hidden;


	}
	body.show-menu #exhibit{
		max-height:100%;
		overflow:hidden;
	}


	.container { 
		padding:0px;
		
	}
	#index .container { 
		padding:20px 10px;
	}
	#exhibit .container { 
		padding:20px 10px;position:relative;

	}


	#exhibit p, code, blockquote { 
		max-width:100%;
	}
	#img-container .picture_holder{
		max-width:100%;
		width:100% !important;
		overflow:hidden;
		margin-bottom: 20px;
		height:auto !important;
	}
	#img-container .picture{
		width:100% !important;
		height:auto !important;
	}
	.picture img{
		width:100% !important;
		height:auto !important;
		vertical-align: top;
	}
	#exhibit iframe{
		max-width:100%;
	}


	.mobile-menu{
		display:block;
		position:fixed;
		width: 46px;
		height: 46px;
		background: white;
		background: #000;
		bottom: 10px;
		right: 10px;
		z-index: 10;


	}

	.mobile-menu span{
		background:black;
		background: #fff;
		display:block;
		width:30px;
		margin-left:8px;
		height:2px;
		vertical-align: top;
		position:relative;
		top:22px;transition: all  0.3s ease;
	}
	.mobile-menu span:before,.mobile-menu span:after{
		content:'';
		background:inherit;
		display:block;
		width:100%;
		height:100%;
		vertical-align: top;
		position:absolute;;
		top:6px;
		background:black;
		background: #fff;
		transition: all  0.3s ease;
	}
	.mobile-menu span:after{
		top:-6px;
	}
	body.show-menu  .mobile-menu{
filter: invert(00%);
	}
	body.show-menu  span{
		background:transparent;
	}
	body.show-menu .mobile-menu span:before{
		transform: translateY(-6px)  rotate(135deg);
	}
	body.show-menu .mobile-menu span:after{
		transform: translateY(6px) rotate(-135deg);
	}

}