@font-face{
	font-family: "serif";
	src:url('fonts/liberation-serif/LiberationSerif-Regular.ttf');
	font-weight: normal;
	font-style: normal;
}
@font-face{
	font-family: "serif";
	src:url('fonts/liberation-serif/LiberationSerif-Italic.ttf');
	font-weight: normal;
	font-style: italic;
}
@font-face{
	font-family: "serif";
	src:url('fonts/liberation-serif/LiberationSerif-Bold.ttf');
	font-weight: bold;
	font-style: normal;
}
@font-face{
	font-family: "serif";
	src:url('fonts/liberation-serif/LiberationSerif-BoldItalic.ttf');
	font-weight: bold;
	font-style: italic;
}

@font-face{
	font-family: "headers";
	src:url('fonts/arima-koshi/ArimaKoshi-Medium.otf');
	font-weight: normal;
	font-style: normal;
}
@font-face{
	font-family: "headers";
	src:url('fonts/arima-koshi/ArimaKoshi-ExtraBold.otf');
	font-weight: bold;
	font-style: normal;
}
body{
	margin:0px;
	font-size: 14px;
	font-family: "serif";
	background-color: #ccd1cab3;
	/*background: linear-gradient(to bottom right, #c2c2c2, #fff7f7, #e4e3e3);*/
	word-break: normal;
}
h1{
	font-size: 42px;
	line-height:45px;
	margin-top: 0.3em;
	margin-bottom: 0.3em;
	font-size: 36px;
	font-family: "headers";
	font-weight: bold;
}
h2, h3, h4, h5, h6{
	font-family: "headers";
	font-weight: bold;
	margin-bottom: 0;
	padding-bottom: 0;
}
p{
	margin: 0 0 1em 0; 
}

a, a:visited, a:active{
	color:black;
}
blockquote{
	font-weight:bold;
	font-family: "headers";
	font-weight: normal;
}
code{
	font-family: monospace;
	font-size: 12px;
	padding:0 5px;
}

a, a:active, a:visited{
	color:inherit;
	text-decoration: underline;
}
hr{
	border:0;
	border-bottom:1px solid;
}
em{
	font-style: italic;
}

section{
	width: calc(100% - 4em);
	padding:0 2em;
}
header{
	top:0;
	width: 100%;
	height: auto;
	margin:0 0 5em 0;
	padding:0;
	text-align: left;
}
	#menu{
		width: auto;
		margin:0;
		padding:90px 1em;
		font-size: 5vw;
		line-height: 1.35;
		color:white;
		background-color: #fb4817;
		background: linear-gradient(to bottom, salmon, #ff7f4d, #ccd1cab3);
	}
		#menu.main{
			position: relative;
			z-index: 10;
		}
		#menu a{
			text-decoration: none;
		}
		#menu.main .indent{
			padding-left:60px;
		}
		#menu #subtitle{
			margin:2em 2em 1em 60px;
			font-family: 'serif';
			font-size: 32px;
			font-weight: normal;
			line-height: 1.3;
			color:white;
		}
		#menu img.shape{
			width:20px;
			height: 20px;
			position: absolute;
			opacity: 0.15;
    		filter: alpha(opacity=15); /* For IE8 and earlier */
		}
	#menu select{
		height:5vw;
		vertical-align: middle;
		color:black;
		padding: 0 0 0 1em;
		margin:0 1em;
	}
	#menu.sticky{
		position: fixed;
		font-size: 1.5em;
		width: calc(100% - 2em);
		top:0;
		left:0;
		padding:8px 1em 8px 2em;
		margin:0;
		background-color: #fb4817;
	}
		#menu.sticky{
			z-index: 1;
		}
		#menu.sticky a{
			color:white;
			text-decoration: none;
		}
		#menu.sticky #character{
			display: none;
		}
		#menu.sticky select{
			padding:0;
			height: auto;
			margin:0 0.5em;
		}

#content{
	margin-bottom:5em;
}
	#agenda{
		width: calc(50% - 6.5em);
		float: left; 
		padding: 1em 1.5em 2em 4em;
		margin:0 0 2em 0;
		background-color: #6ade4e;
		color:#3c0e02;
		border-radius: 15px;
	}
		#agenda h2{
			margin-bottom:-1em;
		}
		#agenda h3{
			margin:2em 0 0.5em 0;
		}
		#agenda h3:before{
			content:'⟿';
			margin-left:-1.8em;
			padding-right: 0.5em;
		}
		#agenda strong{
			font-family: "headers";
			font-weight: bold;
			font-size: 130%;
			line-height: 1.2;
		}
	.featured {
		max-width: calc(50% - 1.5em);
		float: left;
		margin:2em 0;
		color:rgb(0, 5, 33);
	}

	.featured:nth-of-type(even) {
		float:right;
	}
	.featured:nth-of-type(odd) {
		clear: left;
	}
	.featured:last-of-type{
		margin-bottom:5em;
	}
	.entry-title{
		border: 0;
		border-radius: 15px 50px;
		background-color: white;
		padding: 2em;
		text-align: center;
	}
		.entry-title a{
			color:#3c0e02;
			text-decoration: none;
		}
	.entry-subtitle{ 
		font-size: 16px;
		line-height: 1.5;
		text-align:left;
		margin:1em 0 2em;
		padding:0 20px;
		color:#3c0e02;
	}
	.entry-category{ 
		font-weight: bold;
	}
	.entry-content #summary p:last-of-type{ 
		display: inline;
	}
	.entry-content #summary a.readmore, .entry-content #summary a.readmore:active, .entry-content #summary a.readmore:visited{ 
		color:#4d4b5d;
	}
	.entry-content{
		font: 18px 'serif';
		line-height: 28px;
		letter-spacing: 0.01em;
		padding:0 20px;
		color:black;
	}
	.entry-content a{
		text-decoration: underline;
	}
	.entry-readmore a{
		text-decoration: underline;
	}
	.entry-tags a{
		font-weight:bold;
		text-decoration: underline;
		color:#3c0e02;
	}

/* article pages */
#content.article{
	max-width: 820px;
	margin:0 0 5em 50px;
}
	#content.article .entry-title{
		margin:3em 3em 2em 2em;
	}
	#content.article .entry-content{
		font-size: 21px;
		line-height: 1.7;
	}

#list{
	margin:3em 0;
	clear: both;
}
	#list ul, #list li{
		list-style: none;
		padding:0;
		margin:2em 0;
	}
	#list .entry-title{
		margin-top:0; /* reset */
		margin-bottom:0; /* reset */
		padding:1em 2em;
	}

footer{
	width: calc(100% - 4em);
	margin:0;
	padding:2em;
	left:0;
	background-color: black;
	color:white;
	clear:both;
}


@media only screen and (orientation:portrait) {
	body {
		
	}
	h1{
		font-size: 26px;
		line-height: 1.4;
	}
	header{
		margin:0 0 2em 0;
	}
	#menu{
		clear:both;
		max-width: 100%;
		padding:1em 1em 1em 1em;
		font-size: 12vw;
	}
		#menu.sticky{
			font-size: 1em;
			padding:0.5em 1em;
		}
		#menu title{
			vertical-align: top;
		}
		#menu.main .indent{
			padding-left:0;
		}
		#menu select{
			height: auto;
		}
		#menu.sticky select{
			float: right;
			position: absolute;
			top: 40px;
			right: 10px;
			padding: 1em;
		}
		#menu.sticky #character{
			display: inline-block;
		}
		#menu #subtitle{
			width: calc(100% - 2em);
			top: 18em;
			left: 1em;
			margin: 2em 1em 1em 1em;
			font-family: 'serif';
			font-size: 22px;
			line-height: 1.6;
		}
		#menu img.shape{
			width: 12px;
			height: 12px;
		}
	#agenda{
		width: calc(100% - 4em);
		margin: 1em 0px;
	}
	.featured{
		max-width: 100%; !important
		clear:both; !important
		float: none;
		margin-top:0;
	}
		.featured:nth-child(even) {
			clear:both; !important
		}
		.entry-title{
			margin:1em 0 0;
			padding:1.5em 1em;
		}
		.entry-content{
			max-width: 100%;
			padding:0;
			font-size: 5vw;
			line-height: 1.7;
		}
	#content.article{
		margin:0 0 2em 0;
		left:0;
	}
		#content.article .entry-title{
			margin:2em 0 0 0;
			padding:1.5em 1em;
		}
		#content.article .entry-content{
			font-size: 20px;
			line-height: 1.6;
		}
	footer{
		padding:1em 2em;
	}
}