@import url(https://fonts.googleapis.com/css?family=Raleway:100,300,400,500,700,900);
@import url(https://fonts.googleapis.com/css?family=Cabin:400,700);
@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro);

nav.nolegacy { display: none; }
.jsOn nav.nolegacy { display: inline-block; }

body, input, select, textarea {
	font-family: "Raleway", "Open Sans", Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
	font-family: "Raleway", "Open Sans", Helvetica, sans-serif;
}
.page-content {
	font-family: "Cabin", "Open Sans", Helvetica, sans-serif;
}
code, pre {
	font-family: "Source Code Pro", "Courier New", monospace;
}


#blogtab {
	position: absolute;
	right: 0;
	background-color: #2e3842;
	color: #fff;
	font-weight: 900;
	letter-spacing: 0.225em;
	text-transform: uppercase;
	line-height: 1.2em;
	font-size: 1.5vw;
	padding: 1em 1em 1em 1em;
	-webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	transform: rotate(270deg);
	transform-origin: right bottom;
}

#banner .more {
	display: block;
}

#lang {
	height: inherit;
	line-height: inherit;
	position: absolute;
	font-size: 0.8em;
	left: 1em;
	top: 0;
}
#lang a {
	border-bottom: none;
}

.portraitleft {
	width: 16em;
	float: left;
	margin: 1.5em 1.5em 1.5em 0;
	border-style: solid;
	border-width: 3px;
	border-color: #000;
}

.portraitright {
	width: 16em;
	float: right;
	margin: 1.5em 0 1.5em 1.5em;
	border-style: solid;
	border-width: 3px;
	border-color: #000;
}

.wrapper {
	padding: 5vw 0 4vw 0;
}

.readon {
	padding: 0.2em 0 0 0.5em;
	height: 1.1em;
}

@media (max-width: 736px) {
	header.major p {
		font-size: 2.1vw !important;
	}
}

@media (max-width: 1300px) {
	h2 {
		font-family: 'Raleway' !important;
		font-style: normal;
		font-weight: 300;
		font-size: 4vw;
		line-height: 1.3em;
		text-transform: none;
		letter-spacing: 0.1em;
	}
}

@media (min-width: 1300px) {
	h2 {
		font-family: 'Raleway' !important;
		font-style: normal;
		font-weight: 300;
		font-size: 3em;
		line-height: 1.3em;
		text-transform: none;
		letter-spacing: 0.1em;
	}
}


header.major h2 {
	padding-bottom: 0.5em;
	border-bottom: 0;
	text-align: center;
}

header.major p:after {
	font-weight: 100;
	content: '\00BB';
	font-size: 2.5em;
	line-height: 0.1em;
	margin-left: 0.15em;
	vertical-align: -0.1em;
}

#banner {
	padding: 0;
	height: 100vh;
}

#banner p {
	margin: 0 10vw 0 10vw;
	line-height: 2em;
}

#banner blockquote {
	margin: 0 10vw 0 10vw;
	font-size: 1.5vw;
	line-height: 2em;	
	font-weight: 500;
	quotes: initial;
	font-style: initial;
	text-transform: uppercase;
	letter-spacing: 0.225em;
}

#banner blockquote:before {
	color: #ccc;
	content: '\201C';
	font-size: 4em;
	line-height: 0.1em;
	margin-right: 0.15em;
	vertical-align: -0.4em;
}

#banner blockquote:after {
	color: #ccc;
	content: '\201D';
	font-size: 4em;
	line-height: 0.1em;
	margin-left: 0.15em;
	vertical-align: -0.4em;
}

#banner p.small-right {
	padding: 3em 0 0 0;
	text-align: right;
	font-size: 1vw;
	font-weight: 400;
}

#banner:after {
	background: #eee;
	color: #000;
}

#banner .more:after {
	background-image: url("images/arrow-sv.svg");
}

body {
	background: #eee;
	color: #000;
}

#header, #footer {
	background: #eee;
	color: #000;
}

#footer .copyright {
	color: #000;
}

#footer .icons a {
	 color: #000;
}

#header nav > ul > li > a {
	color: #000;
}

#header nav > ul > li > a.menuToggle:after {
	background-image: url("images/bars-sv.svg");
}

.button {
	margin: 10%;
	padding: 1.2em;
	white-space: normal;
	height: inherit;
	line-height: 1.5em;
	display: table;
}
	
.wrapper.style6 {
	height: 500px;
}

.wrapper.style6 header.major p {
	color: #eee;
	margin: 0 25vw 2em 25vw;
	font-family: 'Raleway' !important;
	font-size: 1.6vw;
	line-height: 2em;
}


.special p {
	margin: 0.5em 10vw 1em 10vw;
	text-align: center;
}


h1 {
	font-size: 3vw;
	line-height: 1.9em;
}

.wrapper > .inner {
	margin: 0;
	width: 100%;
}

.wrapper h1, h2, h3 {
	margin: 0.5em 10% 1em 10%;
}


.wrapper li {
	margin: 0 10% 0 10%;
	text-align:justify;
}

.wrapper.style1 {
	height: 40vw;
	background-color: #406d82;
	background-image: url("/images/kalligrafi.jpg");
	background-size: cover;
	background-repeat: no-repeat;
}

.wrapper.style2 {
	height: 40vw;
	background-color: #c58d06;
}

.wrapper.style2 input[type="submit"]:hover,
.wrapper.style2 input[type="reset"]:hover,
.wrapper.style2 input[type="button"]:hover,
.wrapper.style2 button:hover,
.wrapper.style2 .button:hover {
	background-color: rgba(255, 255, 255, 0.075);
}

.wrapper.style3 {
	height: 40vw;
	background-color: #2e3842;
	background-image: url("/images/karesansui.jpg");
	background-size: cover;
	background-repeat: no-repeat;
}

.wrapper.style1 .button,
.wrapper.style2 .button,
.wrapper.style3 .button,
.wrapper.style4 .button,
.wrapper.style5 .button,
.wrapper.style6 .button {
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25);
	color: #eee;
}

.wrapper.style4 {
	height: 40vw;
	background-color: #406d82;
	background-image: url("/images/origami.jpg");
	background-size: cover;
	background-repeat: no-repeat;
}

.wrapper.style5 {
	height: 40vw;
	background-color: #c58d06;
}

.wrapper.style5 input[type="submit"]:hover,
.wrapper.style5 input[type="reset"]:hover,
.wrapper.style5 input[type="button"]:hover,
.wrapper.style5 button:hover,
.wrapper.style5 .button:hover {
	background-color: rgba(255, 255, 255, 0.075);
}

.wrapper.style5 header.major p {
	color: #eee;
	margin: 2em 6vw 2em 6vw;
	font-family: 'Raleway' !important;
	font-size: 1.8vw;
	line-height: 2em;
}

.wrapper.style6 {
	height: 40vw;
	background-color: #2e3842;
	background-image: url("/images/omkirei.jpg");
	background-size: 100%;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: left bottom;
}


.wrapper.style1 header.major p,
.wrapper.style2 header.major p, 
.wrapper.style3 header.major p, 
.wrapper.style4 header.major p {
	color: #eee;
	margin: 0 8vw 2em 8vw;
	font-family: 'Raleway' !important;
	font-size: 1.7vw;
	line-height: 1.8em;
}

.wrapper.style1 header.major h2,
.wrapper.style2 header.major h2, 
.wrapper.style3 header.major h2, 
.wrapper.style4 header.major h2, 
.wrapper.style5 header.major h2,
.wrapper.style6 header.major h2 {
	color: #eee;
	border-color: #eee;
	max-width: 85%;
}


.wrapper a {
	border-bottom: none;
}

.logodiv {
	width: 100%;
}


.logoimg {
	display: block;
	margin-right: auto;
	margin-left: auto;
	opacity: 0;
}

.notice {
	margin-left: auto;
	margin-right: auto;
	display: table;
}

header.pageheader .logoimg {
	margin-top: 10px;
	height: 30px;
}

header .logoimg {
	margin-top: 20vh;
	height: 10vh;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

header.smaller .logoimg {
	margin-top: 10px;
	height: 30px;
	opacity: 1;
}

#main > header {
	height: 40vw;
	padding: 10vw 10vw 10vw 10vw;
	background-image: none;
	background-attachment: scroll;
}

blockquote {
	border-left: none;
}

#menu {
	background: gray;
}

#fadeinlogo {
	animation: fadein 1s;
	-moz-animation: fadein 1s; /* Firefox */
	-webkit-animation: fadein 1s; /* Safari and Chrome */
	-o-animation: fadein 1s; /* Opera */
}
@keyframes fadein {
	from {
		opacity:0;
	}
	to {
		opacity:1;
	}
}
@-moz-keyframes fadein { /* Firefox */
	from {
		opacity:0;
	}
	to {
		opacity:1;
	}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
	from {
		opacity:0;
	}
	to {
		opacity:1;
	}
}
@-o-keyframes fadein { /* Opera */
	from {
		opacity:0;
	}
	to {
		opacity: 1;
	}
}


/*
 * Article header styling
 */

.page-header {
	background-image: none;
	background-color: #c58d06;
}

.page-title {
	margin: 0 1em 0 1em;
	text-align: center;
}

#main > header.page-header h1 {
	font-size: 4vw;
	font-weight: 300;
	color: #eee;
	text-transform: initial;
}

#main > header.page-header h2 {
	margin: 0 1em 0 1em;
	font-size: 120%;
	font-weight: 700;
	color: #eee;
	text-transform: none;
	text-align: center;
}


/*
 * Article content styling
 */

.page-content {
	margin: 0.5em 10vw 1em 10vw;
	text-align: justify;
	font-weight: 400;
}

.page-content h1, h2, h3 {
	margin: 0 0 0 0;
	padding: 0.5em 0 0.5em 0;
	color: inherit;
	text-align: left;
}

.page-content h1 {
	font-size: 160%;
	font-weight: 900;
	text-transform: uppercase;
}

.page-content h2 {
	font-size: 140%;
	font-weight: 700;
	text-transform: none;
}

.page-content h3 {
	font-size: 100%;
	font-weight: 700;
	text-transform: none;
}

.page-content p {
	text-indent: 0em;
	margin-bottom: 1em;
}

.page-content p + p {
	text-indent: 1em;
}

.page-content li {
	margin-left: 1em;
	text-align: left;
}

.page-content ul ul {
	list-style-type: square;
}

.page-content ol ol {
	list-style-type: upper-roman;
}

.page-content blockquote p {
	text-indent: 0em;
}

.page-content a {
	border-bottom: dotted 1px;
	color: inherit;
	text-decoration: none;
}

strong, b {
	color: #000;
	font-weight: 700;
}


/*
 * Blog index styling
 */

.blogindex-content {
	background-color: #c58d06;
	color: #eee;
}

.blogindex-content ul.actions {
	text-align: center;
	padding: 1em 0 2em 0;
}

.blogindex-content li {
	display: block;
	padding: 0 0 2em 0;
}

.blogindex-meta {
	font-weight: 300;
	font-size: 80%;
}

.blogindex-title {
	font-size: 160%;
	font-weight: 700;
	text-transform: uppercase;
	color: #eee;
	padding: 0.5em 0 0.5em 0;
	text-align: left;
}

.blogindex-excerpt p {
	font-size: 100%;
	font-weight: 400;
	text-align: justify;
	margin: 0 0 0 0;
}

.blogindex-more {
	padding: 1em 0 0 0;
	text-align: right;
}


/*
 * Error pages
 */

.error404 {
	text-align: center;
	padding: 0.5em;
}

.error404 div.actions {
	display: inline-block;
	padding: 0.5em;
}