/**
 * @author Hakim El Hattab
 */


/*********************************************
 * FONT-FACE DEFINITIONS
 *********************************************/

@font-face {
	font-family: 'League Gothic';
	src: url('../assets/fonts/leaguegothic/league_gothic-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}


/*********************************************
 * GLOBAL STYLES
 *********************************************/

html, body {
	padding: 0;
	margin: 0;
	overflow: hidden;
	
	/*font-family: 'Crimson Text', Times, 'Times New Roman', serif;
	font-size: 36px;*/
	
	background: #ccc;
	color: #333;
	
	width: 100%;
	height: 100%;
	
	background-image: -webkit-gradient(
		radial, 
		50% 50%, 0, 
		50% 50%, 1000, 
		from(rgba(245,245,245,1.0)), 
		to(rgba(100,100,100,1.0))
	);
	background-image: -moz-radial-gradient(
		50% 50% 90deg,
		rgba(245,245,245,1.0) 0%, 
		rgba(100,100,100,1.0) 100%
	);
	
}


/*********************************************
 * HEADERS
 *********************************************/
 /*
h1, h2, h3, h4 {
	margin: 0 0 20px 0;
	font-family: 'League Gothic', Arial, Helvetica, sans-serif;
	line-height: 0.9em;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #222;
	text-shadow: 0px 0px 2px #fff, 0px 0px 4px #bbb;
}

h1 { font-size: 136px; 	}
h2 { font-size: 76px;	}
h3 { font-size: 56px;	}
h4 { font-size: 36px;	}

h1.inverted,
h2.inverted,
h3.inverted,
h4.inverted {
	color: #fff;
	text-shadow: 0px 0px 2px #fff, 0px 0px 2px #888;
}
*/


/*********************************************
 * SLIDES
 *********************************************/
#main {
	position: absolute;
	width: 1000px;
	height: 750px;
	
	left: 50%;
	top: 50%;
	margin-left: -500px;
	margin-top: -375px;
	
	text-align: center;
	
	-webkit-perspective: 600px;
 	-webkit-perspective-origin: 50% 25%;
}

#main>section,
#main>section>section {
	display: none;
	
	position: absolute;
	width: 100%;
	height:100%;
	min-height: 600px;
	
	-webkit-transform-style: preserve-3d;
	
	-webkit-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 
	   -moz-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 
	     -o-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 
	        transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
}

#main section.past {
	display: block;
	opacity: 0;
	
	-webkit-transform: 	translate3d(-100%, 0, 0) 
						rotateY(-90deg) 
						translate3d(-100%, 0, 0);
}

#main section.present {
	display: block;
}

#main section.future {
	display: block;
	opacity: 0;
	
	-webkit-transform: 	translate3d(100%, 0, 0) 
						rotateY(90deg) 
						translate3d(100%, 0, 0);
}

#main section>section.past {
	display: block;
	opacity: 0;
	
	-webkit-transform: 	translate3d(0, -50%, 0) 
						rotateX(70deg) 
						translate3d(0, -50%, 0);
}
#main section>section.future {
	display: block;
	opacity: 0;
	
	-webkit-transform: 	translate3d(0, 50%, 0) 
						rotateX(-70deg) 
						translate3d(0, 50%, 0);
}


/*********************************************
 * DEFAULT ELEMENT STYLES
 *********************************************/

#main>section {
	text-shadow: 0px 0px 2px #fff, 0px 0px 4px #bbb;
	/*
	font-weight: 600;
	*/
}

/*
ol {
	list-style: decimal;
	list-style-position: inside;
}

li, p {
	margin-bottom: 10px;
}

a:not(.image) {
	color: #1b6263;
	text-decoration: none;
	border-bottom: 1px dashed rgba(0,0,0,0.3);
	padding: 1px 3px;
}
	
	a:not(.image):hover {
		color: #fff;
		background: #2fa794;
		text-shadow: none;
		border: none;
	}
*/

img.cool {
	margin: 30px 0 0 0;
	background: rgba(255,255,255,0.12);
	border: 4px solid #eee;
	
	-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
	   -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
	        box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
	
	-webkit-transition: all .11s linear;
	   -moz-transition: all .11s linear;
	     -o-transition: all .11s linear;
	        transition: all .11s linear;
}

	a.image:hover img {
		background: rgba(255,255,255,0.2);
		
		-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
		   -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
		        box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
	}


/*********************************************
 * Takazudo defined below
 *********************************************/
body, select, input, textarea { 
	font-family:'VL Pゴシック', 'VL PGothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Arial, Helvetica, sans-serif;
}
html.os-win body,html.os-win select,html.os-win input,html.os-win textarea { 
	/*
		os-win will be attached via js.
		windows' Hiragino rendering is awful.
	*/
	font-family:'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
}
a{
	color:#484f8c;
}
#main>section {
	font-size:2.5em;
	line-height:1.4;
}
#main>section > section:not(:last-child) {
	background-repeat:no-repeat;
	background-position:100% 100%;
	background-image:url(arrow.png);
}
h1,h2,h3,h4,h5,h6{
	font-weight:bold;
}
#mod-pager-prev,
#mod-pager-next{
	position:absolute;
	top:200px;
	bottom:200px;
	width:100px;
	z-index:10000;
}
#mod-pager-prev{
	left:0;
}
#mod-pager-next{
	right:0;
}


.mod-page{
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	top:0;
}
	.mod-page > div{
		display:table;
		width:100%;
		height:100%;
	}
	.mod-page > div > div{
		display:table-cell;
		text-align:left;
		vertical-align:top;
		padding:10px 30px;
	}

/* title */

.mod-page.title{
	font-family: 'Crimson Text', Times, 'Times New Roman', serif;
}
	.mod-page.title > div > div{
		text-align:center;
		vertical-align:middle;
		font-size:1em;
	}
		.mod-page.title h1{
			font-size:4.25em;
			font-family: 'League Gothic', Arial, Helvetica, sans-serif;
			text-shadow: 0px 0px 2px #fff, 0px 0px 4px #bbb;
			line-height: 0.9em;
			letter-spacing: 0.02em;
			padding:0 0 .125em;
			text-transform: uppercase;
			text-align:center;
			width:960px;
			margin:0 auto;
		}
		.mod-page.title p{
		}
		.mod-page.title p.note{
			color:rgba(0,0,0,.5);
		}

/* break */

.mod-page.break{
}
	.mod-page.break > div > div{
		text-align:center;
		vertical-align:middle;
		font-size:2em;
	}
		.mod-page.break p{
		}


/* plain */

.mod-page.plain{
}
	.mod-page.plain > div > div{
	}
		.mod-page.plain em{
			color:orange;
		}
		.mod-page.plain .sideImgR{
			float:right;
			margin:0 0 20px 20px;
		}
		.mod-page.plain h1{
			font-size:1.5em;
			line-height:1.2;
			padding:0 0 .4em;
			/* text-shadow: #000 0 5px 5px ; */
		}
		.mod-page.plain h2{
			font-size:1.1em;
			padding:.25em 0 .25em;
		}
		.mod-page.plain pre{
			font-size:.75em;
			background:#fff;
			color:#333;
			margin:0 0 .75em;
			border-radius:6px;
			padding:.5em .8em;
			text-align:left;
			text-shadow:none;
			word-break:break-all;
		}
			.mod-page.plain pre em{
				color:#f00;
			}
		.mod-page.plain h1 + pre{
			margin-top:.5em;
		}
		.mod-page.plain p{
			padding:0 0 .5em;
		}
		.mod-page.plain p.c{
			text-align:center;
		}
		.mod-page.plain p.copy{
			text-align:center;
			font-size:.5em;
			margin:-1em 0 0;
		}
		.mod-page.plain p.smaller{
			font-size:.8em;
		}
		.mod-page.plain ul{
			padding:0 0 .5em;
			margin:0 0 0 1.25em;
			list-style-type:disc;
		}
			.mod-page.plain ul ul{
				margin-top:.25em;
				margin-bottom:.25em;
			}
				.mod-page.plain ul ul li{
					padding:0;
				}
			.mod-page.plain ul.relaxed li{
				padding-bottom:.5em;
			}
				.mod-page.plain ul.relaxed ul{
					margin-top:.1em;
					margin-bottom:0;
					padding-bottom:0;
				}
				.mod-page.plain ul.relaxed ul li{
					padding-bottom:0;
				}
		.mod-page.plain ol{
			padding:.25em 0 .5em;
			margin:0 0 0 2em;
			list-style-type:decimal;
		}
			.mod-page.plain ol.relaxed li{
				padding-bottom:.5em;
			}
		.mod-page.plain .importantBlock{
			background:#fff;
			color:#333;
			font-size:1.1em;
			padding:1.5em 0;
			margin:.25em 0 0;
			text-align:center;
			color:#f00;
			border-radius:6px;
		}
		.mod-page.plain .hImgs{
			text-align:center;
			padding:0 0 .75em;
		}
			.mod-page.plain .hImgs img{
				vertical-align:middle;
			}
			.mod-page.plain .hImgs span{
				display:inline-block;
				vertical-align:middle;
			}
				.mod-page.plain .hImgs span img{
					margin:0 0 10px;
					display:block;
				}


	.mod-page.plain.c > div > div{
		vertical-align:middle;
		text-align:center;
	}

/* fullphoto */

.mod-page.fullphoto.h{
	display:block;
	position:absolute;
	top:0;
	bottom:0;
	right:0;
	left:0;
}
	.mod-page.fullphoto.h > div > div{
		padding:0;
		display:block;
		position:absolute;
		height:100%;
		width:2000px;
		margin:0 0 0 -1000px;
		text-align:center;
		left:50%;
	}
		.mod-page.fullphoto.h img{
			display:block;
			height:100%;
			margin:0 auto;
		}
		.mod-page.fullphoto.h p{
			position:absolute;
			right:0;
			bottom:0;
			font-size:.3em;
			padding:.25em 10px;
			opacity:.5;
			border-radius:4px 4px 0 0;
		}
		.mod-page.fullphoto.h p.white{
			background:#fff;
			color:#000;
		}
			.mod-page.fullphoto.h p.white a{
				color:#000;
			}
		.mod-page.fullphoto.h p.black{
			background:#000;
			color:#fff;
		}
			.mod-page.fullphoto.h p.black a{
				color:#fff;
			}

/* whiteCanvas */

.mod-page.whiteCanvas{
	color:#333;
	background:rgba(255,255,255,.8);
	border-radius:10px;
	text-shadow:none;
}
	.mod-page.whiteCanvas > div > div{
		padding:0;
		vertical-align:middle;
		text-align:center;
	}
	.mod-page.whiteCanvas .fullWImg{
	}
		.mod-page.whiteCanvas .fullWImg img{
		}
	.mod-page.whiteCanvas .fullHImg{
		position:absolute;
		top:20px;
		bottom:40px;
		left:0;
		right:0;
	}
		.mod-page.whiteCanvas .fullHImg img{
			display:block;
			height:100%;
			margin:0 auto;
		}
	.mod-page.whiteCanvas .iphonePortlait{
		position:relative;
	}
		.mod-page.whiteCanvas .iphonePortlait .base{
		}
			.mod-page.whiteCanvas .iphonePortlait .base img{
				height:700px;
			}
		.mod-page.whiteCanvas .iphonePortlait .over{
			position:absolute;
			left:50%;
			top:135px;
			width:1px;
		}
			.mod-page.whiteCanvas .iphonePortlait .over div{
				width:300px;
				position:absolute;
				left:-150px;
				top:0;
				height:440px;
				overflow:hidden;
			}
			.mod-page.whiteCanvas .iphonePortlait .over img{
				display:block;
				margin:0 auto;
			}
	.mod-page.whiteCanvas .h{
		padding:0 0 .5em;
		margin:-0.5em 0 0;
	}

/* index */

.mod-page.index{
}
	.mod-page.index > div > div{
		vertical-align:middle;
	}
		.mod-page.index ul{
			list-style-type:none;
			margin:0 40px;
			padding:0;
			font-size:.8em;
		}
			.mod-page.index ul li{
				margin:0;
				padding:.25em 20px;
				text-align:center;
				margin:20px 0;
				border-radius:6px;
				background:#fff;
				color:#333;
				opacity:.4;
			}
			.mod-page.index ul li.current{
				font-size:1.35em;
				opacity:8;
				padding-top:.5em;
				padding-bottom:.5em;
			}