@font-face {
    font-family: sketch;
    src: url("/fonts/KGSecondChancesSketch.ttf");
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -50%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeInLittleDown {
  from {
    opacity: 0;
    transform: translate3d(0, -5%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-5%, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
	transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
  }
}

body {
	background-color: #f5f5f5;
	font-size: 16px;
	font-family: "微软雅黑","PT Sans", sans-serif;
	line-height: 1.8;
	text-rendering: geometricPrecision;
	-webkit-font-smoothing: antialiased;
	color: #5a5a5a;
}

@media (max-width: 400px) {
	body{
		font-size: 12px;
	}
}

/* typography */
h1, h2, h3, h4, h5, h6{
	font-weight: 700;
	margin: 0.83em 0;
	color: #2a2a2a;
}
ol{
	margin: 0.5em auto ;
}

.page h2, .article h2{
	position: relative;
	margin: 0.5em auto;
}

.page h3, .article h3{
	position: relative;
}

.article h2:before, .page h2:before {
	font-weight: 600;
    position: absolute;
    top: 0;
    left: -15px;
    content: '#';
    color: #D63E0A;
}

.article h3:before {
    position: absolute;
    top: 3px;
    left: -20px;
    content: '📎';
	font-size: 0.9em;
    color: #D63E0A;
}

@media (max-width: 400px) {
	.article h2:before, .page h2:before {
		left: -10px;
	}
	.article h3:before {
		left: -15px;
	}
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	color: #2a2a2a;
}

p {
	margin: 0;
	padding: 0;
}
h1 { 
	font-size: 1.8em;
}
h2 { 
	font-size: 1.2em;
	font-weight: 500;
}

h3{
	font-size: 1.2em;
}

h4, h5, h6{
	font-size: 1.1em;
}

hr {
  border-width: 0;
  border-top: 1px solid #E1E1E1; }

blockquote {
	margin: 1em 0;
	padding: 0 0.8em 0 1.2em;
    border-left: 4px solid #ddd;
}

blockquote cite {
	margin-left: 0.25em;
}

a {
  text-decoration: none;
  color: #2a2a2a;;
}

a:hover {
  color: #D63E0A;
}

/* code */
code {
	padding: 3px;
	background-color: #b6d2c7;
	border-radius: 2px;
	font-size: 14px;
}

pre code {
	display: inline-block;
	overflow: auto;
	padding: 0;
	border-radius: 0px;
	margin-left: 1em;
	margin-top: 0.5em;
	font-size: 16px;
}

figure.highlight {
	margin: 0;
	width: 100%;
	background-color: #b6d2c7;
}

.highlight figcaption {
	padding-left: 1em;
	padding-top: 0.5em;
	font-family: Courier New, Courier, monospace;
}

.highlight figcaption span {
	margin-right: 0.5em;
}

pre .marked {
	background-color: #D0AFAF;
}

.highlight table{
	width: 100%;
	border: none;
}

.highlight td{
	padding: 0;
	border: none;
}

.highlight .line {
	margin-left: 0.5em;
	padding-left: 0.25em;
}

.highlight .gutter {
	width: 1.5em;
	padding-right: 0.5em;
	text-align: center;
	border-right: 1px solid #999;
}

.highlight .comment,.highlight .quote{color:#a0a1a7;font-style:italic}
.highlight .doctag,.highlight .keyword,.highlight .formula{color:#a626a4}
.highlight .section,.highlight .name,.highlight .selector-tag,.highlight .deletion,.highlight .subst{color:#e45649}
.highlight .literal{color:#0184bb}
.highlight .string,.highlight .regexp,.highlight .addition,.highlight .attribute,.highlight .meta-string{color:#50a14f}
.highlight .built_in,.highlight .class .highlight .title{color:#c18401}
.highlight .attr,.highlight .variable,.highlight .template-variable,.highlight .type,.highlight .selector-class,.highlight .selector-attr,.highlight .selector-pseudo{color:#986801}
.highlight .symbol,.highlight .bullet,.highlight .link,.highlight .meta,.highlight .selector-id,.highlight .title{color:#4078f2}
.highlight .emphasis{font-style:italic}.highlight .strong{font-weight:bold}
.highlight .link{text-decoration:underline}
.highlight .number{color: #f5871f}

pre {
	margin: 0.25em;
	background-color: #b6d2c7;
	width: 100%;
}

/* label */
label {
	display: inline-block;
	border-radius: 1em;
	font-weight: bold;
	padding: 0 5px 0 0;
	font-size: 0.9em;
}

label a{
	color: #488BAF;
	
}

label a:hover{
	color: #488BAF;
	text-shadow: 1px 1px #eee;
}

/* image */
img {
	height: auto;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* Container */

.container {
	position: relative;
	width: 100%;
	margin: 0 auto;
	max-width: 860px;
	padding: 0 20px;
	box-sizing: border-box; 
	animation-name: fadeInLeft;
	animation-duration: 0.5s;
	animation-fill-mode: both;
}

.container:first-child {
	margin: 9em auto 0 auto;
}

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 85%;
    padding: 0; 
	}
}

/* Header */
/* ------------------------------------------ */
.header {
	background-color: white;
	padding: 1.2em 0;
	border-bottom: 0.5px solid #D63E0A;
	box-shadow: 0px 1px 2px 0px #aaa;
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
	width: 100%;
	justify-content: center;
	align-items: center;
	max-height: 5em;
	animation-name: fadeInDown;
	animation-duration: 1s;
  	animation-fill-mode: both;
}

.header .header-logo {
	flex: 1;
	flex-grow:1;
}

.header * {
	text-align: center;
	margin: 0 auto;
}

.header .header-title {
	flex: 1;
	flex-grow:1;
	font-size: 2em;
	/*font-family: Palatino,"Palatino Linotype","Palatino LT STD","Book Antiqua",Georgia,serif;*/
	font-family: sketch;
	font-stretch: ultra-expanded;
	/*font-style: italic;*/
}

@media (min-width: 1000px) {

}

/* Footer */

.footer {
	margin: 3em 0 1em;
	animation-name: fadeInLeft;
	animation-duration: 0.5s;
    animation-fill-mode: both;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.footer-logo {
	font-family: sketch;
	margin: 0.5em 0 0;
	font-size: 3em;
}

.footer-social {
	display: flex;
}

.footer-social-item {
	margin: 0 1em;
	font-size: 0.7em;
}

.footer a {
	color: #D63E0A;
}

.footer-social-item a {
	color: #2a2a2a;
}

.footer-social-item a:hover {
	color: #D63E0A;
}

/* Navigator */
/* ------------------------------------------ */

#header-menu-container {
	display: none;
}

#header-menu-container .menu-icon {
	border-radius: 50%;
		border: 1px solid #eee;
		padding: 8px;
		height: 1.9em;
		width: 1.9em;
}

.menu-item:hover a{
	color: #D63E0A;
}

#header-menu-container .menu-name {
	font-size: 0.9em;
	padding: 3px 0;
}

#footer-menu-container {
	display: flex;
	position: fixed;
	bottom: 0;
	right: 0;
	width: 100%;
	padding: 0.5em 0;
	text-align: center;
	background-color: white;
	align-items: center;
	justify-content: space-around;
	border-top: 0.5px solid #D63E0A;
	box-shadow: 0px -1px 3px -1px rgba(170, 175, 173, 0.61);
	animation-name: fadeInUp;
	animation-duration: 1s;
	animation-fill-mode: both;
}

#footer-menu-container .menu-name {
	font-size: 0.7em;
}

#footer-menu-container .menu-icon img {
	width: 2.2em;
}

.menu {
	display: flex;
	align-items: center;
	justify-content: space-around;
}

#header-menu-container .menu-item {
	margin: 0;
}

#header-menu-container .menu-item {
	margin-right: 3em;
}

#header-menu-container .menu-item:last-child {
	margin-right: 5em;
}

#header-menu-container .menu {
	justify-content: flex-end;
}

.menu-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-bottom: 0;
	height: 3em;
}

.menu * {
	line-height: 1.2;
	text-align: center;
}

.menu-icon {
		flex:1;
		flex-grow: 1;
		margin-top: auto;
}

#footer-menu-container nav {
	flex: 1;
}

@media (min-width: 1000px) {

	#header-menu-container {
		display: block;
		flex: 1;
	}
	#footer-menu-container {
		display: none;
	}
}

/* Index intro */

.index-intro {
	margin: 0 auto 2em auto;
	text-align: center;
	font-family: Palatino,"Palatino Linotype","Palatino LT STD","Book Antiqua",Georgia,serif;
	font-size: 1.1em;
}

/* Card */
/* ------------------------------------------ */

.Card {
	display: flex;
	align-items: flex-start;
	background-color: white;
	border-radius: 2px;
	box-shadow: 0.5px 0.5px 3px -0.5px rgba(170, 175, 173, 0.61);
	margin: 0.5em;
	min-height: 12em;
	font-size: 14px;
}

.Card-archive {
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	background-color: white;
	border-radius: 2px;
	box-shadow: 0.5px 0.5px 3px -0.5px rgba(170, 175, 173, 0.61);
	min-height: 7em;
}

.Card-archive .Card-title {
	flex-grow: 1;
	padding-top: 0;
}

.Card-archive .Card-body {
	margin: 1em;
}

.Card-archive .Card-meta {
	font-size: 0.8em;
}

.Card-figure {
  	margin: 1.5em 1.5em;
}

.Card-figure img {
  	width: 3em;
}

.Card-body {
	flex: 1;
	flex-direction: column;
	margin: 0 0.7em;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	height: 90%;
}

.Card-title {
	padding-top: 0.6em;
	flex-grow: 1;
	animation-name: fadeInLeft;
	animation-duration: 0.5s;
    animation-fill-mode: both;
	margin-right: 1em;
}

.Card-title h2{
	margin-bottom: 0;
	font-size: 1.2em;
}

.Card-title label{
	font-size: 0.8em;
}

.Card-meta {
	animation-name: fadeInLeft;
	animation-duration: 0.5s;
	animation-fill-mode: both;
	margin-bottom: 1.5em;
}

.Card-excerpt{
	padding-top: 1.8em;
	animation-name: fadeInLeft;
	animation-duration: 0.5s;
	animation-fill-mode: both;
	flex-grow: 1;
	justify-content: center;
	flex: 1;
	margin-right: 1em;
}

.Card div.Card-excerpt-notouch {
	padding-top: 0.5em;
	display: block;
}

.Card .Card-title {
	display: block;
}

.Card-excerpt {
	display: none;
}

.Card .Card-meta {
	display: block;
}

.Card-hover:hover .Card-title{
	display: none;
}
.Card-hover:hover .Card-excerpt{
	display: block;
}
.Card-hover:hover .Card-meta{
	display: none;
}

/* Pagination */
/* ------------------------------------------ */

.pagination {
	display: flex;
	align-items: center;
	justify-content: center;
}

.pagination-item a, .pagination-item span{
	border-radius: 50%;
	box-shadow: 0.5px 0.5px 3px -0.5px rgba(170, 175, 173, 0.61);
	text-align: center;
	height: 1.7em;
	width: 1.7em;
	display: inline-block;
	vertical-align: middle;
	padding: 0.25em;
	margin: 0 4px;
}

.pagination-item a{
	color: #D63E0A;
}

/* Video */

.video-container {
	max-width: 100%;
	width: auto;
	height: auto;
}

/* Gallery */

.article-gallery {
	width: 95%;
	display: flex;
	align-items: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	margin: 0 auto;
}

.article-gallery-item {
	flex-basis: 15%;
	margin: 0 0.25em;
	display: block;
}

.article-gallery-item a {
  /* set the desired width/height and margin here */
  position: relative;
  width: 100px;
  height: 100px;
  overflow: hidden;
  display: inline-block;
  border-radius: 5px;
}
.article-gallery-item a img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  max-width: none;
  width: auto;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
  border-radius: 5px;
}
.article-gallery-item a img.portrait {
  width: 100%;
  height: auto;
}

/* Article */
/* ------------------------------------------ */
.article {
	width: 55%;
	margin: 7.5em auto 0 auto;
	animation-name: fadeInLeft;
	animation-duration: 0.5s;
  	animation-fill-mode: both;
	background: #f0f6fa;
	padding: 10px 30px 30px 30px;
	font-size: 18px;
}

.article a {
	color: #D63E0A;
}

.article img {
	width: auto;
	display: inline-block;
	max-width:100%; height:auto;
}

.article-header {
	display: flex;
	align-items: center;
	justify-content: center;
}

.article-logo {
	margin-right: 1em;
}

.article-logo img {
	width: 2.5em;
}

.article-title{
	flex: 1;
	margin: 0;
}

h1.article-title a{
	color: #2a2a2a;
}

@media (max-width: 1000px) {
	.article {
		width: 90%;
		margin: 7em auto;
		background: #fff;
		padding: 0;
	}
}

/* Page */

.page {
	width: 55%;
	margin: 9em auto;
	animation-name: fadeInLeft;
	animation-duration: 0.5s;
    animation-fill-mode: both;
}

.page a {
	color: #D63E0A;
}

.page ul, .page ol {
	margin-left: -2em;
}

@media (max-width: 1000px) {
	.page {
		width: 90%;
		margin: 9em auto;
		text-align: justify;
	}
}

/* tag cloud */

.tag-cloud {
	width: 60%;
	margin: 0 auto;
}

@media(max-width: 800px) {
	.tag-cloud {
		width: 90%;
		margin: 0 auto;
	}
}

#search {
	width: 100%;
	display: flex;
}

#search input {
	flex: 1;
	margin-right: 0.5em;
}

.search-container {
	margin: 12em auto 0 auto;
	position: relative;
	width: 100%;
	max-width: 860px;
	padding: 0 20px;
	box-sizing: border-box; 
	animation-name: fadeInLeft;
	animation-duration: 0.5s;
	animation-fill-mode: both;
}

.search-container form {
	background-color: white;
	border-radius: 5px;
	height: 38px;
}

.search {
	background-color: white;
	border-radius: 5px;
	height: 38px;
	display: flex;
}

.search input {
	flex: 1;
}

.search-container button {
	border-radius: 0px;
	background-color: white;
	border: none;
	margin: 0;
	padding: 0 1em;
}


.search-container input {
	border-radius: 0px;
	background-color: white;
	border: none;
	padding: 6px 10px;
	box-shadow: none;
	margin: 0;
}

.search-container input:focus {
	border-radius: 0px;
	background-color: white;
	border: none;
}

.search-container button:focus {
	border-radius: 0px;
	background-color: white;
	border: none;
}

.article-desc{
	overflow: hidden;
	margin-bottom: 10px;
}
.article-desc .date-author{
	float: left;
	margin-right: 10px;
}
.article-desc .tags a{
	margin-right: 5px;
}