@charset "utf-8";
/**
 * reset
 */
	html, body, div, span, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	abbr, address, cite, code,
	del, dfn, em, img, ins, kbd, q, samp,
	small, strong, sub, sup, var,
	b, i,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, figcaption, figure, 
	footer, header, hgroup, menu, nav, section, summary,
	time, mark, audio, video {
		 margin:0;
		 padding:0;
		 border:0;
		 outline:0;
		 font-size:100%;
		 vertical-align:baseline;
		 background:transparent;
	}
	article,aside,canvas,details,figcaption,figure,
	footer,header,hgroup,menu,nav,section,summary { 
		 display:block;
	}
	del { text-decoration: line-through; }
	abbr[title], dfn[title] {
		 border-bottom:1px dotted #000;
		 cursor:help;
	}
	table {
		 border-collapse:collapse;
		 border-spacing:0;
	}
	hr{ display:none; }
	input, select { vertical-align:middle; }
	*{ list-style-type:none; }

/**
 * font-face
 */

	/*
		font "SYMBOL SIGNS" was designed by Sander Baumann
		http://www.fontsquirrel.com/fonts/Symbol-Signs
	*/
	@font-face {
		font-family: 'SymbolSignsBasisset';
		src: local('Symbol Signs Basis set'), local('SymbolSigns-Basisset'), url('../fonts/symbol-signs.ttf') format('truetype');
	}
	@font-face {
		font-family: 'VL ゴシック';
		src: local('VL ゴシック'), url('../fonts/VL-Gothic-Regular.ttf') format('truetype');
	}
	@font-face {
		font-family: 'VL Pゴシック';
		src: local('VL Pゴシック'), url('../fonts/VL-PGothic-Regular.ttf') format('truetype');
	}

/**
 * base
 */
	html,body{
		/* necessary to enable bg gradient? */
		overflow:hidden;
		width:100%;
		height:100%;
		font-size:30px;
		line-height:1.4;
		background:#000;
		color:#fff;
	}
	html,body,input,textarea,button{
		font-family:'VL Pゴシック','メイリオ',Meiryo, sans-serif;
	}
	a{
		color:#fff;
	}

	/*
		erase all styles about elems not in view
		this seems to increase performance
	*/
	div.page:not(.onView),
	div.page:not(.onView) *{
		display:none !important;
		background:none !important;
		border:none !important;
		border-radius:none !important;
		transition:none !important;
		-webkit-transition:none !important;
		-webkit-background-size: auto !important;
		float:none !important;
		-webkit-animation-name: none !important;
		-webkit-animation-iteration-count:0 !important;
	}
	.symbol{
		font-family:'SymbolSignsBasisset',sans-serif;
		display:inline-block;
		padding:0 .2em 0 .4em;
		-webkit-transform:scale(1.8);
	}
	.clear{
		clear:both;
	}
	.nowrap{
		white-space:nowrap;
		display:inline-block;
	}
	.x0\.25{ transform:scale(0.25); -webkit-transform:scale(0.25); }
	.x0\.5{ transform:scale(0.5); -webkit-transform:scale(0.5); }
	.x1\.5{ transform:scale(1.5); -webkit-transform:scale(1.5); }
	.x2{ transform:scale(2); -webkit-transform:scale(2); }
	.x2\.5{ transform:scale(2.5); -webkit-transform:scale(2.5); }
	.x3{ transform:scale(3); -webkit-transform:scale(3); }
	.x4{ transform:scale(4); -webkit-transform:scale(4); }
	.x5{ transform:scale(5); -webkit-transform:scale(5); }
	.x6{ transform:scale(5); -webkit-transform:scale(6); }

	.align.right{ text-align:right; }
	.align.center{ text-align:center; }
	.align.left{ text-align:left; }

	em{
		font-style:normal;
		color:orange;
		text-shadow:0 0 4px rgba(0,0,0,1);
	}
	blockquote{
		background:#111;
		color:#fff;
		border:1px solid #333;
		font-size:.8em;
		padding:1.5% 2%;
		margin:0 0 .75em;
	}
	.vImgs{
	}
		.vImgs img{
			display:block;
			margin:.5em 0;
		}
	.hImgs{
		text-align:center;
		padding:0 0 .5em;
	}
		.hImgs img{
		}
	.hImgs.l{
		text-align:left;
	}
	ul.bullet{
		margin:0 0 0 1.5em;
	}
		ul.bullet li{
			list-style-type: disc;
			padding:0 0 .2em .3em;
		}
	pre.code{
		background:#111;
		color:#fff;
		border:1px solid #fff;
		font-size:.8em;
		padding:1.5% 2%;
		margin:0 0 .75em;
	}
	pre.code:last-child{
		margin-bottom:0;
	}
		pre.code code{
			font-family:'VL ゴシック',sans-serif;
		}
		pre.code em{
		}
	pre.code.wide{
		margin-right:-25px;
		margin-left:-25px;
	}

/**
 * modules for $.presentation
 */
	/**
	 * .mod-pager
	 */
	@-webkit-keyframes 'pagerReveal' {
		from{ opacity:1; }
		to{ opacity:0; }
	}
	.mod-pager{
		position:fixed;
		z-index:9999;
		top:0;
		left:0;
		right:0;
		height:1.75em;
		text-align:center;
		font-family: 'SymbolSignsBasisset', sans-serif;
		font-size:1.5em;
		opacity:0;
		transition:opacity .3s;
		-o-transition:opacity .3s;
		-moz-transition:opacity .3s;
		-webkit-transition:opacity .3s;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
		-webkit-animation-name: 'pagerReveal';
		-webkit-animation-iteration-count:1;
		-webkit-animation-duration:1s;
	}
	.mod-pager:hover{
		opacity:1;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	}
		.mod-pager li{
			position:absolute;
			top:0;
		}
		.mod-pager li#pager-L{
			left:0;
		}
		.mod-pager li#pager-R{
			right:0;
		}
			.mod-pager li a{
				line-height:1;
				text-decoration:none;
				float:left;
				color:#000;
				font-weight:bold;
				padding:0 .1em .2em .3em;
				text-decoration:none;
				background:rgb(255,255,255);
				border-radius:.4em;
				margin:.2em;
			}

	/**
	 * .mod-pageNum
	 */
	.mod-pageNum{
		position:fixed;
		z-index:9999;
		bottom:0;
		left:0;
		right:0;
		font-size:.5em;
		padding:0 0 .2em;
		text-align:center;
	}

	/**
	 * .mod-page
	 */
	.mod-page{
		position:fixed;
		left:0;
		top:0;
		width:100%;
		height:100%;
		display:table;
		background:#222;
	}
	.mod-page.transition{
		/* class "transition" will be attached by JavaSript */
		transition:all .5s;
		-o-transition:all .5s;
		-moz-transition:all .5s;
		-webkit-transition:all .5s;
	}
		.mod-page > div{
			display:table-cell;
			vertical-align:middle;
			text-align:center;
			padding:40px 60px;
		}
	.mod-page.center{
		opacity:1;
		left:0;
		transform:rotate(0deg);
		-webkit-transform:rotate(0deg);
		z-index:101;
	}
	.mod-page.left{
		left:-200%;
		opacity:0;
		transform:rotate(-60deg) skew(30deg);
		-webkit-transform:rotate(-60deg) skew(30deg);
	}
	.mod-page.right{
		left:200%;
		opacity:0;
		transform:rotate(60deg) skew(-30deg);
		-webkit-transform:rotate(60deg) skew(-30deg);
	}

	/**
	 * .mod-page.top
	 */
	.mod-page.top{
		background:#1d1d1d;
	}
		.mod-page.top > div{
			padding:0;
		}
			@-webkit-keyframes 'o' {
				from{ -webkit-transform: rotate(0); }
				to{ -webkit-transform: rotate(360deg); }
			}
			.mod-page.top h1{
				background:#222;
				font-size:3.5em;
				padding:.6em 0 .6em;
				width:100%;
			}
				.mod-page.top h1 span{ display:block; }
				.mod-page.top h1 span:nth-child(1){ line-height:1.3; }
				.mod-page.top h1 span:nth-child(2){ font-size:.5em; padding:.3em 0 0; }
				.mod-page.top h1 span span{
					display:inline-block;
					-webkit-animation-name: 'o';
					-webkit-animation-iteration-count:infinite;
					-webkit-animation-timing-function: linear;
					-webkit-animation-duration:1s;
				}
			.mod-page.top > div div{
				position:relative;
				width:800px;
				height:10px;
				margin:50px auto 0;
			}
				.mod-page.top p{
					position:absolute;
					right:0;
					top:0;
					font-size:1.5em;
				}
				.mod-page.top img{
					position:absolute;
					left:5%;
					top:-30px;
					width:100px;
				}

	/**
	 * .mod-page.plain
	 */
	.mod-page.plain{
	}
		.mod-page.plain > div{
			vertical-align:top;
			text-align:left;
		}
			.mod-page.plain > div > h2{
				font-weight:bold;
				font-size:1.75em;
				padding:0 0 .5em;
			}
			.mod-page.plain > div > h3{
				font-size:1.25em;
				padding:0 0 .25em;
			}
			.mod-page.plain > div > p{
				padding:0 0 .75em;
			}
			.mod-page.plain > div > ul{
				padding:0 0 .5em;
			}
				.mod-page.plain > div > ul li{
					padding:0 0 .25em .1em;
					margin:0 0 0 1.75em;
					list-style-type:disc;
				}
			.mod-page.plain > div > ol{
				padding:0 0 .5em;
			}
				.mod-page.plain > div > ol li{
					padding:0 0 .25em .1em;
					margin:0 0 0 1.75em;
					list-style-type:decimal;
				}
			.mod-page.plain > div > .sideImgR{
				float:right;
				margin:0 0 25px 30px;
			}

	/**
	 * .mod-page.sectionStart
	 */
	.mod-page.sectionStart{
	}
		.mod-page.sectionStart ul{
			font-size:.8em;
			line-height:1.3;
			position:fixed;
			right:0;
			top:0;
			width:35%;
			height:100%;
			box-align:left;
			-webkit-box-align:left;
			box-orient:vertical;
			-webkit-box-orient:vertical;
			box-pack:center;
			-webkit-box-pack:center;
			display:box;
			display:-webkit-box;
			letter-spacing:-.1em;
			text-align:left;
		}
			.mod-page.sectionStart ul li{
				border-bottom:1px solid #fff;
				padding:.5em 0 .5em 0;
				opacity:.5;
			}
			.mod-page.sectionStart ul li:last-child{
				border-bottom:none;
			}
			.mod-page.sectionStart ul li.current{
				z-index:2;
				background:#fff;
				color:#000;
				-webkit-transform:scale(1.1);
				opacity:1;
				border-radius:.2em 0 0 .2em;
				padding-left:.5em;
			}
		.mod-page.sectionStart h2{
			position:fixed;
			right:40%;
			top:0;
			height:100%;
			width:60%;
			box-align:center;
			-webkit-box-align:center;
			box-pack:end;
			-webkit-box-pack:end;
			display:box;
			display:-webkit-box;
			text-align:right;
			font-size:2em;
		}

	/**
	 * .mod-page.shout
	 */
	.mod-page.shout{
		font-size:1.5em;
	}
		.mod-page.shout > div{
		}
			.mod-page.shout h2{
				text-align:center;
			}
			.mod-page.shout > div > p{
				display:block;
			}
			.mod-page.shout > div > ul{
				padding:0 0 0 1em;
			}
				.mod-page.shout > div > ul li{
					list-style-type:disc;
				}
				.mod-page.shout > div > ul li.old{
					opacity:.2;
				}
				.mod-page.shout > div > ul li strong{
					font-weight:bold;
				}
	
	/**
	 *.mod-page.exampleStage
	 */
	.mod-page.exampleStage{
		background:#000;
		display:block;
		border:5px solid #333;
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
	}
		.mod-page.exampleStage > div{
			display:block;
			padding:0;
			text-align:left;
			vertical-align:top;
			padding:40px 60px;
		}

/**
 * other modules
 */
.mod-draftImg{
	width: 800px;
	height: 300px;
	margin:1.5em auto 0;
}
	.mod-draftImg img{
		display:block;
		width:800px;
		-webkit-transform: rotate(5deg);
	}
.mod-dontbugme{
	padding:20px 0 0;
}
	@-webkit-keyframes 'omg' {
		from{ -webkit-transform: translateX(0); }
		33%{ -webkit-transform: translateX(10px); }
		66%{ -webkit-transform: translateX(-10px); }
		to{ -webkit-transform: translateX(0); }
	}
	.mod-dontbugme img{
		-webkit-animation-name: 'omg';
		-webkit-animation-iteration-count:infinite;
		-webkit-animation-duration:.3s;
		width:600px;
		display:block;
		margin:0 auto;
	}
.mod-happyhappy{
	padding:20px 0 0;
}
	@-webkit-keyframes 'happyhappy' {
		from{ -webkit-transform: translateY(0); }
		33%{ -webkit-transform: translateY(10px); }
		66%{ -webkit-transform: translateY(-10px); }
		to{ -webkit-transform: translateY(0); }
	}
	.mod-happyhappy img{
		-webkit-animation-name: 'happyhappy';
		-webkit-animation-iteration-count:infinite;
		-webkit-animation-duration:.1s;
		height:300px;
		display:block;
		margin:0 auto;
	}
.mod-pikachu{
	-webkit-animation-name: 'pikachu';
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-duration:.8s;
}
	@-webkit-keyframes 'pikachu' {
		from{ color:red; }
		33%{ color:yellow }
		66%{ color:blue; }
		to{ color:red; }
	}
.mod-referenceList{
	font-size:.7em;
}
	.mod-referenceList dt{
	}
	.mod-referenceList dd{
		font-size:.9em;
		padding:0 0 .4em;
	}

/**
 * examples
 */

.example.transition1{
	text-align:center;
	font-size:2em;
	padding:.5em 0 0;
}
	.example.transition1 a{
		display:inline-block;
		padding:3px 8px;
		margin:0 8px;
		color:#000;
		background-color:#ff0000;
	}
	.example.transition1 a:hover{
		background-color:#00ff00;
	}

.example.transition2{
	text-align:center;
	font-size:2em;
	padding:.5em 0 0;
}
	.example.transition2 a{
		display:inline-block;
		padding:3px 8px;
		margin:0 8px;
		color:#000;
		background-color:#ff0000;
		-webkit-transition:background-color 1s;
	}
	.example.transition2 a:hover{
		background-color:#00ff00;
	}

.example.transition3{
	padding:.5em 0 0;
	text-align:center;
}
	.example.transition3 img{
		vertical-align:top;
		border-width:5px;
		border-style:solid;
		border-color:#ffffff;
		height:200px;
	}
	.example.transition3 a{
		opacity:1;
		display:inline-block;
		border:1px solid #999999;
		margin:0 .5em;
	}
	.example.transition3 a:hover{
		opacity:0.3;
	}
	.example.transition3 a:nth-child(2){
		-webkit-transition:opacity 0.5s;
	}

.example.transition4{
	text-align:center;
}
	.example.transition4 div{
		padding:0 0 1em;
	}
	.example.transition4 input[type=button]{
		padding: .5em 1em;
		font-weight:bold;
		font-size:18px;
	}
	.example.transition4 img{
		-webkit-transition:all .5s;
		width:250px;
		height:250px;
	}
	.example.transition4 img.dietOK{
		width:100px;
		height:300px;
	}
	.example.transition4 img.normal{
		width:250px;
		height:250px;
	}
	.example.transition4 img.dietNG{
		width:800px;
		height:200px;
	}

.example.transitionComplicated{
	width:500px;
	height:500px;
	position:relative;
	background:#d3af75;
	border-top-left-radius:100px;
	border-top-right-radius:100px;
	border-bottom-right-radius:50px;
	border-bottom-left-radius:50px;
	-webkit-transition:
		width 1s,
		height .5s,
		border-top-left-radius 1.5s,
		border-top-right-radius 1.5s,
		border-bottom-right-radius .3s,
		border-bottom-left-radius .3s;
}
	.example.transitionComplicated > div{
		position:absolute;
	}
	.example.transitionComplicated > div:nth-child(1){
		left:20%;
		top:20%;
		width:100px;
		height:100px;
		background:#fff;
		border-radius:50px;
		-webkit-transition: left 2s;
	}
		.example.transitionComplicated > div:nth-child(1) > div{
			position:absolute;
			right:10%;
			bottom:10%;
			width:40px;
			height:40px;
			background:#000;
			border-radius:50px;
			-webkit-transition:
				right .2s,
				bottom .2s,
				width .1s,
				height .1s;
		}
	.example.transitionComplicated > div:nth-child(2){
		right:20%;
		top:20%;
		width:100px;
		height:100px;
		background:#fff;
		border-radius:50px;
		-webkit-transition: right 2s;
	}
		.example.transitionComplicated > div:nth-child(2) > div{
			position:absolute;
			left:10%;
			top:10%;
			width:40px;
			height:40px;
			background:#000;
			border-radius:50px;
			-webkit-transition:
				left .2s,
				top .2s,
				width .1s,
				height .1s;
		}
	.example.transitionComplicated > div:nth-child(3){
		left:20%;
		bottom:20%;
		width:60%;
		background:#f00;
		border-radius:300px/100px;
		color:#f00;
		font-size:1px;
		text-align:center;
		-webkit-transition:
			bottom .2s,
			color .5s,
			font-size .5s,
			line-height .5s;
	}
.example.transitionComplicated:hover{
	width:800px;
	height:300px;
	border-top-left-radius:500px;
	border-top-right-radius:500px;
	border-bottom-right-radius:10px;
	border-bottom-left-radius:10px;
}
	.example.transitionComplicated:hover > div:nth-child(1){
		left:30%;
	}
		.example.transitionComplicated:hover > div:nth-child(1) > div{
			right:50%;
			bottom:50%;
			width:15px;
			height:15px;
		}
	.example.transitionComplicated:hover > div:nth-child(2){
		right:30%;
	}
		.example.transitionComplicated:hover > div:nth-child(2) > div{
			left:50%;
			top:50%;
			width:20px;
			height:20px;
		}
	.example.transitionComplicated:hover > div:nth-child(3){
		bottom:5%;
		background:#f00;
		border-radius:300px/100px;
		font-size:1.5em;
		line-height:2;
		color:#fff;
	}

.example.translate1{
	width:700px;
	height:400px;
	background:#fff;
	border:1px solid #000;
	position:relative;
	margin:0 auto;
}
	.example.translate1 img{
		border:1px solid #000;
		position:absolute;
		left:50px;
		bottom:50px;
		width:150px;
	}
	.example.translate1 img:nth-child(1){
		opacity:.5;
	}
	.example.translate1 img:nth-child(2){
		-webkit-transform: translateX(400px);
	}
.example.translate2{
	width:700px;
	height:400px;
	background:#fff;
	border:1px solid #000;
	position:relative;
	margin:0 auto;
}
	.example.translate2 img{
		border:1px solid #000;
		position:absolute;
		left:50px;
		bottom:50px;
		width:150px;
	}
	.example.translate2 img:nth-child(1){
		opacity:.5;
	}
	.example.translate2 img:nth-child(2){
		-webkit-transform: translateY(-160px);
	}

.example.scale1{
	width:700px;
	height:400px;
	background:#fff;
	border:1px solid #000;
	position:relative;
	margin:0 auto;
}
	.example.scale1 img{
		border:1px solid #000;
		position:absolute;
		left:275px;
		top:120px;
		width:150px;
	}
	.example.scale1 img:nth-child(1){
		-webkit-transform: scale(2);
	}
	.example.scale1 img:nth-child(2){
		opacity:.5;
	}

.example.rotate1{
	width:700px;
	height:400px;
	background:#fff;
	border:1px solid #000;
	position:relative;
	margin:0 auto;
}
	.example.rotate1 img{
		border:1px solid #000;
		position:absolute;
		left:250px;
		top:110px;
		width:150px;
	}
	.example.rotate1 img:nth-child(1){
		-webkit-transform: rotate(30deg);
	}

.example.skew1{
	width:700px;
	height:400px;
	background:#fff;
	border:1px solid #000;
	position:relative;
	margin:0 auto;
}
	.example.skew1 img{
		border:1px solid #000;
		position:absolute;
		left:250px;
		top:100px;
	}
	.example.skew1 img:nth-child(1){
		-webkit-transform: skew(30deg);
	}

.example.transformCombination1{
	width:700px;
	height:300px;
	background:#fff;
	border:1px solid #000;
	position:relative;
	margin:60px auto 0;
}
	.example.transformCombination1 img{
		border:1px solid #000;
		position:absolute;
		left:50px;
		bottom:50px;
	}
	.example.transformCombination1 img:nth-child(1){
		opacity:.5;
	}
	.example.transformCombination1 img:nth-child(2){
		-webkit-transform: translateX(400px) rotate(330deg) scale(1.5);
	}

.example.transformCombination2{
	width:700px;
	height:300px;
	background:#fff;
	border:1px solid #000;
	position:relative;
	margin:60px auto 0;
}
	.example.transformCombination2 img{
		border:1px solid #000;
		position:absolute;
		left:50px;
		bottom:50px;
		-webkit-transition:all .5s;
	}
	.example.transformCombination2:hover img{
		-webkit-transform: translateX(400px) rotate(330deg) scale(1.5);
	}

.example.textsizeChg1{
	line-height:1.5;
	padding:40px 0 0;
	font-size:16px;
}
	.example.textsizeChg1 ul{
		float:right;
		padding:0 0 10px;
	}
		.example.textsizeChg1 ul li{
			float:left;
			padding:0 0 0 4px;
		}
			.example.textsizeChg1 ul li a{
				display:inline-block;
				background:#fff;
				color:#333;
				font-weight:bold;
				text-decoration:none;
				padding:.5em 0;
				width:3em;
				text-align:center;
			}
	.example.textsizeChg1 p{
		clear:both;
		font-size:130%;
		-webkit-transition: font-size .2s;
	}
	.example.textsizeChg1 p.s{ font-size: 100%; }
	.example.textsizeChg1 p.m{ font-size: 130%; }
	.example.textsizeChg1 p.l{ font-size: 160%; }

.example.accordion1{
	padding:40px;
	font-size:80%;
	line-height:1.5;
}
	.example.accordion1 a{
		text-decoration:none;
	}
	.example.accordion1 a:hover{
		text-decoration:underline;
	}
	.example.accordion1 > ul{
		width:300px;
	}
		.example.accordion1 > ul > li{
			padding:0 0 2px;
		}
			.example.accordion1 > ul > li > a{
				display:block;
				background:#555;
				color:#fff;
				padding:.5em 1em .7em;
				border-radius:.5em;
				position:relative;
				-webkit-transition:
					background-color .3s,
					-webkit-transform .2s;
			}
			.example.accordion1 > ul > li > a:hover{
				background:#777;
				-webkit-transform:scale(1.05);
				z-index:3;
			}
				.example.accordion1 > ul > li > ul{
					margin:0 0 0 1em;
					height:0;
					overflow:hidden;
					-webkit-transition:
						height .2s,
						opacity .5s,
						left .3s;
					opacity:0;
					position:relative;
					left:-200px;
				}
				.example.accordion1 > ul > li:hover > ul{
					height:8em;
					padding-top:.5em;
					padding-bottom:.5em;
					opacity:1;
					left:0;
				}
					.example.accordion1 > ul > li > ul > li{
						border-top:1px solid #999;
					}
					.example.accordion1 > ul > li > ul > li:first-child{
						border-top:none;
					}
						.example.accordion1 > ul > li > ul > li > a{
							color:#fff;
							display:block;
							font-size:1em;
							line-height:2em;
						}

.example.accordion2{
	padding:40px 40px 40px 400px;
	font-size:80%;
	line-height:1.5;
}
	.example.accordion2 a{
		text-decoration:none;
	}
	.example.accordion2 a:hover{
		text-decoration:underline;
	}
	.example.accordion2 > ul{
		width:300px;
	}
		.example.accordion2 > ul > li{
			padding:0 0 2px;
			outline:2px solid red;
		}
			.example.accordion2 > ul > li > a{
				display:block;
				background:#555;
				color:#fff;
				padding:.5em 1em .7em;
				border-radius:.5em;
				position:relative;
				-webkit-transition:
					background-color 3s,
					-webkit-transform 2s;
			}
			.example.accordion2 > ul > li > a:hover{
				background:#777;
				-webkit-transform:scale(1.05);
				z-index:3;
			}
				.example.accordion2 > ul > li > ul{
					margin:0 0 0 1em;
					height:0;
					overflow:hidden;
					-webkit-transition:
						height 2s,
						opacity 5s,
						left 3s;
					opacity:0;
					position:relative;
					left:-200px;
					outline:2px solid orange;
				}
				.example.accordion2 > ul > li:hover > ul{
					height:8em;
					padding-top:.5em;
					padding-bottom:.5em;
					opacity:1;
					left:0;
				}
					.example.accordion2 > ul > li > ul > li{
						border-top:1px solid #999;
					}
					.example.accordion2 > ul > li > ul > li:first-child{
						border-top:none;
					}
						.example.accordion2 > ul > li > ul > li > a{
							color:#fff;
							display:block;
							font-size:1em;
							line-height:2em;
						}

.example.blocknav1{
	padding:40px;
	font-size:80%;
}
	.example.blocknav1 ul{
	}
		.example.blocknav1 ul li{
		}
			.example.blocknav1 a{
				display:inline-block;
				line-height:100px;
				font-size:30px;
				width:100px;
				text-align:center;
				background:#555;
				color:#fff;
				width:100px;
				height:100px;
				box-sizing:border-box;
				-webkit-box-sizing:border-box;
				-moz-box-sizing:border-box;
				border:1px solid #666;
				border-radius:10px;
			}
			.example.blocknav1 a:hover{
				background:#777;
			}
	.example.blocknav1 > ul{
	}
	.example.blocknav1 > ul:after{content:''; display:block; clear:both;}

		.example.blocknav1 > ul > li{
			float:left;
			padding:1px;
			position:relative;
		}
			.example.blocknav1 > ul > li > a{
			}
			.example.blocknav1 > ul > li ul{
				position:absolute;
				left:-102px;
				top:-102px;
				width:306px;
				height:306px;
				z-index:-1;
				opacity:0;
				-webkit-transform:scale(0);
				-webkit-transition:
					-webkit-transform .2s,
					opacity .2s;
			}
			.example.blocknav1 > ul > li:hover ul{
				z-index:2;
				opacity:1;
				-webkit-transform:scale(.6);
			}
			.example.blocknav1 > ul > li:hover a:not(:hover){
				background:#222;
			}
			.example.blocknav1 > ul > li > a{
				-webkit-transition:
					-webkit-transform .5s;
			}
			.example.blocknav1 > ul > li:hover > a{
				position:relative;
				z-index:3;
				-webkit-transform:scale(.6);
			}
				.example.blocknav1 > ul > li ul li{
					float:left;
					padding:1px;
					position:relative;
				}
				.example.blocknav1 > ul > li:hover ul li{
				}
				.example.blocknav1 > ul > li ul li:nth-child(4){
					margin-right:102px;
				}

.example.blocknav1x{
	padding:200px 0 0 400px;
	font-size:80%;
	-webkit-transform: scale(2);

}
	.example.blocknav1x ul{
	}
		.example.blocknav1x ul li{
		}
			.example.blocknav1x a{
				display:inline-block;
				line-height:100px;
				font-size:30px;
				width:100px;
				text-align:center;
				background:#555;
				color:#fff;
				width:100px;
				height:100px;
				box-sizing:border-box;
				-webkit-box-sizing:border-box;
				-moz-box-sizing:border-box;
				border:1px solid #666;
				border-radius:10px;
			}
			.example.blocknav1x a:hover{
				background:#777;
			}
	.example.blocknav1x > ul{
	}
	.example.blocknav1x > ul:after{content:''; display:block; clear:both;}

		.example.blocknav1x > ul > li{
			float:left;
			padding:1px;
			position:relative;
		}
			.example.blocknav1x > ul > li > a{
				outline:2px solid red;
			}
			.example.blocknav1x > ul > li ul{
				outline:2px solid orange;
				position:absolute;
				left:-102px;
				top:-102px;
				width:306px;
				height:306px;
				z-index:-1;
				opacity:0;
				-webkit-transform:scale(0);
				-webkit-transition:
					-webkit-transform 2s,
					opacity 2s;
			}
			.example.blocknav1x > ul > li:hover ul{
				z-index:2;
				opacity:1;
				-webkit-transform:scale(.6);
			}
			.example.blocknav1x > ul > li:hover a:not(:hover){
				background:#222;
			}
			.example.blocknav1x > ul > li > a{
				-webkit-transition:
					-webkit-transform .5s;
			}
			.example.blocknav1x > ul > li:hover > a{
				position:relative;
				z-index:3;
				-webkit-transform:scale(.6);
			}
				.example.blocknav1x > ul > li ul li{
					float:left;
					padding:1px;
					position:relative;
				}
				.example.blocknav1x > ul > li:hover ul li{
				}
				.example.blocknav1x > ul > li ul li:nth-child(4){
					margin-right:102px;
				}

.example.sidenav1{
	line-height:1.5;
	font-size:60%;
	padding:40px 0 0;
}
	.example.sidenav1 a{
		display:block;
		background:#555;
		color:#fff;
		padding:.5em 1em .7em;
		border-radius:.5em;
		position:relative;
		-webkit-transition:
			background-color .3s,
			-webkit-transform .2s;
	}
	.example.sidenav1 a > span{
		position:absolute;
		right:0;
		top:0;
		padding:.5em 1em 0 0;
	}
	.example.sidenav1 a:hover{
		background:#777;
		-webkit-transform:scale(1.05);
		z-index:3;
	}
	.example.sidenav1 ul{
		width:220px;
	}
	.example.sidenav1 ul li{
		position:relative;
		padding:0 1px 1px 0;
	}
	.example.sidenav1 ul li ul{
		position:absolute;
		opacity:0;
		top:0;
		left:100%;
		z-index:-1;
		-webkit-transition: opacity .5s, left .5s;
	}
	.example.sidenav1 ul li > ul > li > a{
		color:#555;
		-webkit-transform: scale(.5) rotate(-360deg);
		-webkit-transition: color 1s, -webkit-transform .2s;
	}
	.example.sidenav1 ul li:hover > a{
		background: #777;
	}
	.example.sidenav1 ul li:hover > ul > li > a{
		color:#fff;
		-webkit-transform: scale(1) rotate(0);
	}
	.example.sidenav1 ul li:hover > ul > li a:hover{
		-webkit-transform: scale(1.05) rotate(0);
	}
	.example.sidenav1 ul li:hover > ul{
		left:100%;
		z-index:1;
		opacity:1;
	}
.example.sidenav1x{
	line-height:1.5;
	font-size:60%;
	padding:40px 0 0;
}
	.example.sidenav1x a{
		display:block;
		background:#555;
		color:#fff;
		padding:.5em 1em .7em;
		border-radius:.5em;
		position:relative;
		-webkit-transition:
			background-color 3s,
			-webkit-transform 2s;
	}
	.example.sidenav1x a > span{
		position:absolute;
		right:0;
		top:0;
		padding:.5em 1em 0 0;
	}
	.example.sidenav1x a:hover{
		background:#777;
		-webkit-transform:scale(1.05);
		z-index:3;
	}
	.example.sidenav1x ul{
		width:220px;
	}
	.example.sidenav1x ul li{
		position:relative;
		padding:0 1px 1px 0;
		outline:2px solid red;
	}
	.example.sidenav1x ul li ul{
		position:absolute;
		opacity:0;
		top:0;
		left:100%;
		z-index:-1;
		-webkit-transition: opacity 5s, left 5s;
		outline:6px solid orange;
	}
	.example.sidenav1x ul li > ul > li > a{
		color:#555;
		-webkit-transform: scale(.5) rotate(-360deg);
		-webkit-transition: color 1s, -webkit-transform 2s;
	}
	.example.sidenav1x ul li:hover > a{
		background: #777;
	}
	.example.sidenav1x ul li:hover > ul > li > a{
		color:#fff;
		-webkit-transform: scale(1) rotate(0);
	}
	.example.sidenav1x ul li:hover > ul > li a:hover{
		-webkit-transform: scale(1.05) rotate(0);
	}
	.example.sidenav1x ul li:hover > ul{
		left:100%;
		z-index:1;
		opacity:1;
	}
.example.sidenav1-content{
	position:absolute;
	left:270px;
	top:0;
	height:100%;
	width:100%;
}
.example.rotatedNav{
	padding:40px;
}
	.example.rotatedNav *{
	}
	.example.rotatedNav ul{
	}
	.example.rotatedNav ul:after{content:''; display:block; clear:both;}

		.example.rotatedNav ul li{
			margin:0 0 3px;
			width:100px;
			height:500px;
			float:left;
		}
			.example.rotatedNav ul li a{
				display:block;
				width:380px;
				background-image: -webkit-gradient(
					linear,
					left top,
					left bottom,
					color-stop(0%, rgba(255,255,255,0)),
					color-stop(100%, rgba(255,255,255,.5))
				);
				color:#000;
				text-align:right;
				line-height:35px;
				font-size:30px;
				padding:105px 20px 10px 0;
				/* orig top:65px */
				-webkit-transform-origin:0 0;
				-webkit-transform:rotate(270deg) translateX(-500px);
				-webkit-transition:all .2s;
				position:relative;
				border-radius:0 0 20px 0;
			}
			.example.rotatedNav ul li:nth-child(1) a{ z-index:10; }
			.example.rotatedNav ul li:nth-child(2) a{ z-index:9; }
			.example.rotatedNav ul li:nth-child(3) a{ z-index:8; }
			.example.rotatedNav ul li:nth-child(4) a{ z-index:7; }
			.example.rotatedNav ul li:nth-child(5) a{ z-index:6; }
			.example.rotatedNav ul li:nth-child(6) a{ z-index:5; }

			.example.rotatedNav ul li a:hover{
				padding-top:140px;
			}
.example.rotatedNavEx{
	padding:40px;
}
	.example.rotatedNavEx *{
	}
	.example.rotatedNavEx ul{
		margin:0 auto;
		width:680px;
	}
	.example.rotatedNavEx ul:after{content:''; display:block; clear:both;}

		.example.rotatedNavEx ul li{
			margin:0 0 3px;
			width:100px;
			height:500px;
			float:left;
		}
			.example.rotatedNavEx ul li a{
				display:block;
				width:380px;
				background-image: -webkit-gradient(
					linear,
					left top,
					left bottom,
					color-stop(0%, rgba(255,255,255,0)),
					color-stop(100%, rgba(255,255,255,.5))
				);
				color:#000;
				text-align:right;
				line-height:35px;
				font-size:30px;
				padding:105px 20px 10px 0;
				/* orig top:65px */
				-webkit-transform-origin:0 0;
				-webkit-transform:rotate(270deg) translateX(-500px);
				-webkit-transition:all .2s;
				position:relative;
				border-radius:0 0 20px 0;
			}
			.example.rotatedNavEx ul li:nth-child(1) a{ z-index:10; }
			.example.rotatedNavEx ul li:nth-child(2) a{ z-index:9; }

			.example.rotatedNavEx ul li a:hover{
				padding-top:140px;
			}

		.example.rotatedNavEx ul li.n{
			margin:200px 80px 0 0;
		}
			.example.rotatedNavEx ul li.n a{
				-webkit-transform:none;
			}
		.example.rotatedNavEx ul li.r{
			margin:0 0 0 300px;
		}
			.example.rotatedNavEx ul li.r a{
			}

.example.poppo1{
}
	@-webkit-keyframes 'pigeon1' {
		from{ -webkit-transform: translateX(0); }
		33%{ -webkit-transform: translateX(10px); }
		66%{ -webkit-transform: translateX(-10px); }
		to{ -webkit-transform: translateX(0); }
	}
	.example.poppo1 img{
		-webkit-animation-name: 'pigeon1';
		-webkit-animation-iteration-count:infinite;
		-webkit-animation-duration:.1s;
		width:400px;
	}
.example.poppo1.sub{
	margin:0 auto;
	text-align:center;
}
	.example.poppo1.sub img{
		width:200px;
	}
.example.jsAnimation1{
	position:relative;
	height:80px;
	padding:60px;
	margin:30px 0 20px;
	border:1px solid #fff;
}
	.example.jsAnimation1 div{
		position:absolute;
		left:60px;
		top:60px;
		width:200px;
		padding:.5em 0;
		text-align:center;
		background:#fff;
		color:#000;
	}
	.example.jsAnimation1 button{
		position:absolute;
		right:10px;
		bottom:10px;
		font-size:100%;
		padding:.2em .5em;
	}
.example.jsAnimation2{
	position:relative;
	height:80px;
	padding:60px;
	margin:30px 0 20px;
	border:1px solid #fff;
}
	.example.jsAnimation2 div{
		position:absolute;
		left:60px;
		top:60px;
		width:200px;
		padding:.5em 0;
		text-align:center;
		background:#fff;
		color:#000;
		-webkit-transition: left 1s;
	}
	.example.jsAnimation2 div.toRight{
		left:400px;
	}
	.example.jsAnimation2 button{
		position:absolute;
		right:10px;
		bottom:10px;
		font-size:100%;
		padding:.2em .5em;
	}
.example.jsAnimation3{
	position:relative;
	height:80px;
	padding: 20px 60px;
	margin:30px 0 20px;
	border:1px solid #fff;
}
	@-webkit-keyframes 'toRight' {
		from{ left:60px }
		to{ left:400px }
	}
	.example.jsAnimation3 div{
		position:absolute;
		left:60px;
		top:20px;
		width:200px;
		padding:.5em 0;
		text-align:center;
		background:#fff;
		color:#000;
	}
	.example.jsAnimation3 div.toRight{
		left:400px;
		-webkit-animation-name: 'toRight';
		-webkit-animation-iteration-count:1;
		-webkit-animation-duration:1s;
	}
	.example.jsAnimation3 button{
		position:absolute;
		right:10px;
		bottom:10px;
		font-size:100%;
		padding:.2em .5em;
	}
.example.fademenuMini{
	outline:2px solid red;
	padding:.4em;
	font-size:60%;
}
	.example.fademenuMini ul{
		padding:.5em 0 .8em;
		-webkit-animation-name: 'menuReveal';
		-webkit-animation-iteration-count:infinite;
		-webkit-animation-duration:1s;
		outline:2px solid orange;
	}
	.example.fademenuMini ul:after{content:''; display:block; clear:both;}

		@-webkit-keyframes 'menuReveal' {
			from{ opacity:0; -webkit-transform: translateY(3em); }
			to{ opacity:1; -webkit-transform: translateY(0); }
		}
		.example.fademenuMini li{
			float:left;
			padding:0 1em 0 0;
			font-size:150%;
		}
		.example.fademenuMini li a{
			color:#fff;
		}
@-webkit-keyframes 'imgReveal' {
	from{
		opacity:0;
		-webkit-transform: translateY(-100px);
	}
	to{
		opacity:1;
		-webkit-transform: translateY(0);
	}
}
.example.animatedGalleryMini{
}
	.example.animatedGalleryMini div{
		margin:0 auto;
		width:240px;
		-webkit-animation-name: 'imgReveal';
		-webkit-animation-iteration-count:infinite;
		-webkit-animation-duration:1s;
	}
		.example.animatedGalleryMini img{
		}
.example.tagFallMini{
	position:absolute;
	left:60px;
	right:60px;
	top:10%;
	text-align:center;
	font-size:50%;
}
	@-webkit-keyframes 'tagFall' {
		from{
			-webkit-transform: translateY(0) rotate(0) scale(0) skewY(0);
		}
		30%{
			-webkit-transform: translateY(0) rotate(-720deg) scale(.5) skewY(0);
		}
		93%{
			-webkit-transform: translateY(600px) rotate(0) scale(4) skewY(0);
		}
		to{
			-webkit-transform: translateY(600px) rotate(0) scale(4) skewY(90deg);
		}
	}
	.example.tagFallMini a{
		background:#fff;
		color:#000;
		text-decoration:none;
		display:inline-block;
		padding:.2em .5em;
		margin:0 4px 4px 0;
		opacity:.25;
		-webkit-animation-name: 'tagFall';
		-webkit-animation-iteration-count:infinite;
		-webkit-animation-duration:5s;
	}
	.example.tagFallMini a:hover{
		-webkit-animation-play-state:paused;
		background:#000;
		color:#fff;
	}

@-webkit-keyframes 'man1' {
	from{
		width:500px;
		height:500px;
		border-top-left-radius:100px;
		border-top-right-radius:100px;
		border-bottom-right-radius:50px;
		border-bottom-left-radius:50px;
	}
	50%{
		width:800px;
		height:300px;
		border-top-left-radius:500px;
		border-top-right-radius:500px;
		border-bottom-right-radius:10px;
		border-bottom-left-radius:10px;
	}
	to{
		width:500px;
		height:500px;
		border-top-left-radius:100px;
		border-top-right-radius:100px;
		border-bottom-right-radius:50px;
		border-bottom-left-radius:50px;
	}
}
.example.animationComplicated{
	width:500px;
	height:500px;
	margin:0 auto;
	position:relative;
	background:#d3af75;
	border-top-left-radius:100px;
	border-top-right-radius:100px;
	border-bottom-right-radius:50px;
	border-bottom-left-radius:50px;
	-webkit-animation-name: 'man1';
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-duration:1s;
}
	.example.animationComplicated > div{
		position:absolute;
	}
	@-webkit-keyframes 'man2' {
		from{ left:20%; }
		70%{ left:30%; }
		to{ left:20%; }
	}
	.example.animationComplicated > div:nth-child(1){
		left:20%;
		top:20%;
		width:100px;
		height:100px;
		background:#fff;
		border-radius:50px;
		-webkit-animation-name: 'man2';
		-webkit-animation-iteration-count:infinite;
		-webkit-animation-duration:.8s;
	}
		@-webkit-keyframes 'man3' {
			from{right:10%; bottom:10%; width:40px; height:40px;}
			70%{ right:50%; bottom:50%; width:15px; height:15px; }
			to{right:10%; bottom:10%; width:40px; height:40px;}
		}
		.example.animationComplicated > div:nth-child(1) > div{
			position:absolute;
			right:10%; bottom:10%; width:40px; height:40px;
			background:#000;
			border-radius:50px;
			-webkit-animation-name: 'man3';
			-webkit-animation-iteration-count:infinite;
			-webkit-animation-duration:.7s;
		}
	@-webkit-keyframes 'man4' {
		from{ -webkit-transform: scale(1); }
		70%{ -webkit-transform: scale(1.4); }
		to{ -webkit-transform: scale(1); }
	}
	.example.animationComplicated > div:nth-child(2){
		right:20%;
		top:20%;
		width:100px;
		height:100px;
		background:#fff;
		border-radius:50px;
		-webkit-animation-name: 'man4';
		-webkit-animation-iteration-count:infinite;
		-webkit-animation-duration:2s;
	}
		.example.animationComplicated > div:nth-child(2) > div{
			position:absolute;
			left:30%;
			top:30%;
			width:40px;
			height:40px;
			background:#000;
			border-radius:50px;
			-webkit-transition:
				left .2s,
				top .2s,
				width .1s,
				height .1s;
		}
	.example.animationComplicated > div:nth-child(3){
		left:20%;
		bottom:20%;
		width:60%;
		background:#f00;
		border-radius:300px/100px;
		color:#f00;
		font-size:1px;
		text-align:center;
		-webkit-transition:
			bottom .2s,
			color .5s,
			font-size .5s,
			line-height .5s;
	}
		.example.animationComplicated:hover > div:nth-child(2) > div{
			left:50%;
			top:50%;
			width:20px;
			height:20px;
		}
	.example.animationComplicated:hover > div:nth-child(3){
		bottom:5%;
		background:#f00;
		border-radius:300px/100px;
		font-size:.8em;
		line-height:2;
		color:#fff;
	}
.example.buruburuForm1{
	padding:0 0 40px;
}
	.example.buruburuForm1 *{
		font-size:100%;
	}
	.example.buruburuForm1 form{
		background:#fff;
		padding:40px;
		color:#000;
	}
		.example.buruburuForm1 input{
			border:2px solid #999;
			-webkit-transition: all .5s;
			padding:.1em;
		}
		.example.buruburuForm1 span{
			padding:0 0 0 10px;
			color:#f00;
			opacity:0;
			-webkit-transition: all .5s;
		}
	.example.buruburuForm1 form.invalid{
	}
		.example.buruburuForm1 form.invalid input{
			outline:4px solid red;
			-webkit-animation-name: 'shake';
			-webkit-animation-iteration-count:3;
			-webkit-animation-duration:.1s;
		}
		.example.buruburuForm1 form.invalid span{
			opacity:1;
		}
	@-webkit-keyframes 'shake' {
		from{ -webkit-transform: translateX(0); }
		33%{ -webkit-transform: translateX(8px); }
		66%{ -webkit-transform: translateX(-8px); }
		to{ -webkit-transform: translateX(0); }
	}
.example.superCoolForm{
	padding:0 0 40px;
}
	.example.superCoolForm *{
		font-size:100%;
	}
	.example.superCoolForm form{
		background:#fff;
		padding:40px;
		color:#000;
	}
		.example.superCoolForm input{
			border:2px solid #999;
			-webkit-transition: all .5s;
			padding:.1em;
		}
		.example.superCoolForm span{
			padding:0 0 0 10px;
			color:#f00;
			opacity:0;
			-webkit-transition: all .5s;
		}
	.example.superCoolForm form.invalid{
	}
		.example.superCoolForm form.invalid input{
			outline:4px solid red;
			-webkit-animation-name: 'superCoolShake';
			-webkit-animation-iteration-count:300;
			-webkit-animation-duration:.1s;
		}
		.example.superCoolForm form.invalid span{
			opacity:1;
		}
	@-webkit-keyframes 'superCoolShake' {
		from{ -webkit-transform: translateX(0) rotate(0); }
		33%{ -webkit-transform: translateX(8px) rotate(10deg); }
		66%{ -webkit-transform: translateX(-8px) rotate(-10deg); }
		to{ -webkit-transform: translateX(0) rotate(0); }
	}
.example.scaledMenu{
	float:left;
	padding:0 40px 0 0;
}
	.example.scaledMenu ul{
		width:300px;
		font-size:.8em;
	}
		.example.scaledMenu li{
			padding:0 0 4px;
		}
			.example.scaledMenu li a{
				display:block;
				background:#555;
				color:#fff;
				padding:.5em 1em .7em;
				border-radius:.5em;
				position:relative;
				-webkit-transition:
					background-color .3s,
					-webkit-transform .2s;
			}
			.example.scaledMenu li a:hover,
			.example.scaledMenu li a:focus{
				background:#777;
				-webkit-transform:scale(1.05);
				z-index:3;
			}
.example.fadeGallery{
	padding:30px 0 0;
	overflow:hidden;
}
	@-webkit-keyframes "toEnd" {
		from { opacity:1; -webkit-transform:scale(1); }
		to { opacity:0; -webkit-transform:scale(0); }
	}
	.example.fadeGallery div{
		width:380px;
		height:380px;
		margin:0 auto;
		position:relative;
	}
	.example.fadeGallery div img{
		position:absolute;
		left:0;
		top:0;
		cursor:pointer;
	}
	.example.fadeGallery div img.toEnd{
		-webkit-animation-name: 'toEnd';
		-webkit-animation-duration: .5s;
		/-webkit-animation-timing-function: linear;
	}
.mod.draftImg{
	width: 800px;
	height: 300px;
	margin:1.5em auto 0;
}
	.mod.draftImg img{
		display:block;
		width:800px;
		-webkit-transform: rotate(5deg);
	}
.example.oanime{
}
	.example.oanime h2{
		font-size:2.75em;
		width:100%;
		padding:.3em 0 .25em;
		text-align:center;
	}
		.example.oanime h2 span{ display:block; }
		.example.oanime h2 span:nth-child(1){ line-height:1.3; }
		.example.oanime h2 span:nth-child(2){ font-size:.5em; padding:.3em 0 0; }
		.example.oanime h2 span span{
			display:inline-block;
			-webkit-animation-name: 'o';
			-webkit-animation-iteration-count:infinite;
			-webkit-animation-timing-function: linear;
			-webkit-animation-duration:1s;
		}
	.example.oanime p{
	}