/* gallery */
.gallery ul { list-style-type: none; margin: 0 -12px 0 -12px; padding: 0; }
.gallery li { display: block; float: left; width: 33.3%; box-sizing: border-box; margin: 0; padding: 0 12px 24px 12px; }
.gallery li:nth-child(3n+1) { clear: both; }
.gallery li a { text-decoration: none; display: block; }
.gallery li a img { border: 0; display: block; }
.gallery .content { width: 100%; display: table; }
.gallery:after { display: block; clear: both; content: ""; font-size: 0; line-height: 0; }


/* gmap */
.gmapwrapper { width: 100%; }
.gmapwrapper .text { margin-top: 12px; }
.gmap { width: 100%; height: 300px; }

/* audio, video */
audio { width: 100%; }
video { max-width: 100%; }


.video_iframe { }
.video_iframe .content { background: #000000; display: block; position: relative; }
.video_iframe .stage { overflow: hidden; position: relative; } /* margin: 0 20% 0 20%;  */
.video_iframe .h { width: 0px; height: 0px; margin-bottom: 56.1%; } /* margin-bottom: 56.1%;  margin-bottom: 66%; */
.video_iframe iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.video_iframe .text { margin-top: 12px; }


.video { }
.video .content { display: block; position: relative; background: #000000; }
.video .stage { overflow: hidden; position: relative; } /* margin: 0 20% 0 20%;  */
.video .text { margin-top: 12px; }


/* sliding */
.sliding { overflow: hidden; }
.sliding .slide { background-color: #fff; width: 100%; }
/*
.sl_type_carousel .slide { width: 33.3%; }
.sl_type_carousel .container { margin: 0 -12px 0 -12px; }
.sl_type_carousel .slide { width: 33.3%; padding: 0 12px 0 12px; }
*/


.sliding .controls a { display: inline-block; text-align: center; padding: 5px; font-size: 40px; line-height: 40px; text-decoration: none; color: #aaaaaa; }
.sliding .controls a:hover { text-decoration: none; color: #888888; }
.sliding .controls a.disabled { color: #dddddd; }
.sliding .controls a.active { color: #888888;  }

/* controls outside */
.sliding .controls { padding: 12px 32px 32px 32px; position:relative; text-align: center; }
.sliding .controls .pagi { display: inline-block; }
.sliding .controls .navi { display: block; position:absolute; top: 12px; }
.sliding .controls .prev { left: 0; }
.sliding .controls .next { right: 0; }

/* controls inside / on slide (in viewport) */
/*
.sliding .container { z-index: 0; }
.sliding .controls { position: absolute; top: 50%; left: 0; width: 100%; margin-top: -32px; }
.sliding .controls a { padding: 12px; }
.sliding .prev { display: block; float: left; }
.sliding .next { display: block; float: right; }
.sliding div.pagi { position: absolute; left: 0; bottom: 0; width: 100%; text-align:center; }
.sliding div.pagi a { display: inline-block; text-align: center; padding: 5px; font-size: 40px; line-height: 40px; text-decoration: none; color: #aaaaaa; }
.sliding div.pagi a:hover { text-decoration: none; color: #888888; }
.sliding div.pagi a.active { color: #888888;  }
*/
/*
WebFeatures.config.sliding_standard.initSliding = function() { // JS to move controls into viewport (navi left right, pagi at bottom of slide)
	// Move navi inside viewport
	var v = El.el('> .frame > .viewport', this.elem);
	var c = El.el('> .frame > .controls', this.elem);
	if (c) {
		El.add(c, 'bottom', v);
		var p = El.el('span.pagi', c);
		El.add(El.create('div', { 'class': 'pagi' }, p), 'bottom', v);
	}
}
WebFeatures.config.sliding_standard.getNavigationLabel = function(s, type) { return (type == 'prev' ? '' : ''); };
*/

/* ... slding width sliding as controls... */
.sliding .controls .container { margin-left: -5px; margin-right: -5px; }
.sliding .controls .slide { width: 20%; }
.sliding .controls .slide a { display: block; }
.sliding .controls .slide img { display: block; }



@media screen and (max-width: 620px) {
    .gallery li { width: 50%; }
    .gallery li:nth-child(3n+1) { clear: none; }
    .gallery li:nth-child(2n+1) { clear: both; }
	
	.video_iframe .stage { margin: 0; overflow: hidden; }
}


@media screen and (max-width: 420px) {
    .gallery li { width: 100%; }
}