@import url(//fonts.googleapis.com/earlyaccess/cwtexhei.css);
*{
    font-family: 'cwTeXHei', sans-serif;
    box-sizing: border-box;
}
body{
    padding: 0;
    margin: 0;
}
::-webkit-scrollbar {
    display: none;
}
body>header {
    background-position-y:33%; 
    padding: 20px 0 0 0;
    width: 100%;
    height: 50vh;
/*    position:relative;*/
}
header h1{
/*    position:absolute;*/
    font-size: 3em;
    text-align: center;
    display: block;
    margin-top: 17vh;
/*    left: calc(100vw/2);*/
}
h1{
    font-size: 2.3em;
}
h2 {
    font-size: 2em;
}
h3 {
    font-size: 1.5em;
}
h4 {
    font-size: 1.2em;
}
h5 {
    font-size: 1em;
}
header a {
    color: white;
    text-decoration: none;
}
body>footer{
    background: #000;
    width: 100%;
    color: white;
    text-align: center;
    padding: 10px 0;
}

/**
inspired by https://codepen.io/philhoyt/pen/ujHzd
*/

body>nav
{
    line-height: 0;
    position: relative;
    display: block;
}
body>nav::before {
    height: 100%;
    z-index: -1;
    content: " ";
    display: block;
    position: absolute;
    width: 100vw;
    top: 0;
    left: calc((100% - 100vw) /2);
    background-color: #f6f6f6;
}

body>nav ul
{
	list-style: none;
	position: relative;
	display: inline-block;
	margin: 0;
	padding: 0;
}

body>nav ul a,
body>nav ul span
{
	display:block;
	color:#333;
	text-decoration:none;
	font-weight:700;
	font-size:15px;
	line-height:2em;
	padding:15px;
}

body>nav ul li
{
	position:relative;
	float:left;
	margin:0;
	/*padding:15px 0;*/
}

body>nav ul li.current-menu-item
{
	background:#ddd
}

body>nav ul li:hover
{
	background:#cccccc
}

body>nav ul ul
{
	display:none;
	position:absolute;
	top:100%;
	left:0;
	background:#f6f6f6;
	padding:0
}

body>nav ul ul li
{
	float:none;
	width:250px
}
body>nav ul ul a, 
body>nav ul ul span{
    padding:20px 15px;
    line-height: 120%;
}

body>nav ul li:hover > ul
{
	display:block;
    z-index: 1;
}

body>nav a:hover {
    color: black;
}

[sidebarjs] [sidebarjs-container]{
    overflow-y: scroll;
}
sidebarjs nav{
    position: relative;
}
sidebarjs nav ul {
    margin: 0;
    padding-left: 20px;
}
sidebarjs nav li {
    margin: 0;
    list-style: none;
}
sidebarjs nav ul::before {
    content: "";
    display: block;
    content: "";
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    height: 1px;
    border-bottom: #ddd 1px solid;
}
sidebarjs nav li::after {
    content: "";
    display: block;
    content: "";
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    height: 1px;
    border-bottom: #ddd 1px solid;
}
sidebarjs nav li a {
    display: inline-block;
    height: 40px;
    padding: 10px 0;
    color: black;
    text-decoration: none;
    position: relative;
}
sidebarjs nav li a::after {
    content: "";
    display: block;
    position: absolute;
    border-bottom: #aaa 1px solid;
    width: 100%;
    bottom: 12px;
}
sidebarjs nav li span {
    display: inline-block;
    height: 40px;
    line-height: 40px;
}

#transfer-url-to-trelolo {
    position: relative;
/*    background: #eee;*/
    text-align: center;
    padding: 40px 0;
}
#transfer-url-to-trelolo::before{
    background: #eee;
    width: 100vw;
    height: 100%;
    content: " ";
    display:block;
    position: absolute;
    z-index: -1;
    top: 0;
    left: calc((100% - 100vw)/2);
}

#transfer-url-to-trelolo input{
    text-align: center;
    display: block;
    width: 50%;
    margin: 0 auto 10px;
    
}
.url-to-trelolo{
    background: #eee;
}


/**
  main
*/

body>main {
    margin: 60px auto 0;
}

main img{
    max-width: 100%;
}

/*
inspired by https://codepen.io/palimadra/pen/lKgDd
*/
blockquote {
    font-family: Georgia, serif;
    font-size: 18px;
    font-style: italic;
    margin: 0.25em 0;
    padding: 0.25em 40px;
    line-height: 1.45;
    position: relative;
    color: #383838;
}

blockquote:before {
    display: block;
    content: "\201C";
    font-size: 80px;
    position: absolute;
    left: -20px;
    top: -20px;
    color: #7a7a7a;
}

blockquote cite {
    color: #999999;
    font-size: 14px;
    display: block;
    margin-top: 5px;
}
 
blockquote cite:before {
    content: "\2014 \2009";
}

/** RWD mobile menu */

.hamburger {
    position: absolute;
    top: 26px;
    right: 10px;
    width: 32px;
    height: 32px;
    cursor: pointer;
}



.hamburger>div {
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 4px;
  background: #FCFCFC;
}

.hamburger>div:before {
  top: -12px;
}

.hamburger>div:after {
  top: 12px;
}

.hamburger>div:before,
.hamburger>div:after {
  content: '';
  position:absolute;
  width: 32px;
  height: 4px;
  background:#FCFCFC;
  right: 0;
}



/** 
  RWD Begin
*/

@media only screen and (max-width: 767px) {
    body>* {
        width: 100%;
    }
    main {
        padding: 0 20px;
    }
    main>p{
        width: calc(100% - 40px);
    }
    main img{
        max-width: calc(100% - 40px);
    }
    body>nav{
        display: none;
    }
}


@media only screen and (min-width: 768px) {
    body>*{
        width: 720px;
        margin: 0 auto;
    }
    .hamburger {
        display: none;
    }
}

/**
  RWD End
*/