/** Set `margin-bottom` to maintain vertical rhythm */
.highlight { margin-bottom: 15px; }

/** Clearfix */
/** Icons */
.icon > svg { display: inline-block; width: 16px; height: 16px; vertical-align: middle; }
.icon > svg path { fill: #828282; }

/*====================================================
	Importing bootstrap less files
====================================================*/
/*====================================================
	COLOR VARIABLE FOR THEME
====================================================*/
/* common */
/*====================================================
	common styles
====================================================*/
html, body { color: #505050; line-height: 1.75em; background: #ebebeb; position: relative; font-family: "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "WenQuanYi Micro Hei", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif; }

h1, h2, h3, h4, h5, h6 { font-weight: 400; color: #303030; }

h1 { font-size: 3em; }

h2 { font-size: 2.5em; }

h3 { font-size: 2em; }

h4 { font-size: 1.5em; }

h5 { font-size: 1em; }

h6 { font-size: 0.75em; }

a { color: #e67e22; outline: none; }

a:hover { color: #e67e22; }

a:active, a:focus, a img { outline: none; }

.btn { padding: 7px 14px; border-radius: 2px; }

.btn-default { border: 1px solid #e67e22; background: #e67e22; color: #ffffff; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }

.btn-default:hover { border: 1px solid #303030; background: #303030; color: #ffffff; }

.btn-default:focus { outline: none; }

.btn-default[disabled] { border: 1px solid #303030; background: #303030; color: #ffffff; }

input[type="search"], input[type="text"], input[type="url"], input[type="email"], textarea { padding: 7px 7px; border: 1px solid #ebebeb; border-radius: 2px; -webkit-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; }

input[type="search"]:focus, input[type="text"]:focus, input[type="url"]:focus, input[type="email"]:focus, textarea:focus { border: 1px solid #e67e22; outline: none; }

blockquote { border-left: 4px solid #e67e22; }

pre { padding: 0; background: none; border: none; }

::-moz-selection { color: #ffffff; background: #e67e22; text-shadow: none; }

::selection { color: #ffffff; background: #e67e22; text-shadow: none; }

/** Syntax highlighting styles */
.highlight { background: #fff; }
.highlighter-rouge .highlight { background: #eef; }
.highlight .c { color: #998; font-style: italic; }
.highlight .err { color: #a61717; background-color: #e3d2d2; }
.highlight .k { font-weight: bold; }
.highlight .o { font-weight: bold; }
.highlight .cm { color: #998; font-style: italic; }
.highlight .cp { color: #999; font-weight: bold; }
.highlight .c1 { color: #998; font-style: italic; }
.highlight .cs { color: #999; font-weight: bold; font-style: italic; }
.highlight .gd { color: #000; background-color: #fdd; }
.highlight .gd .x { color: #000; background-color: #faa; }
.highlight .ge { font-style: italic; }
.highlight .gr { color: #a00; }
.highlight .gh { color: #999; }
.highlight .gi { color: #000; background-color: #dfd; }
.highlight .gi .x { color: #000; background-color: #afa; }
.highlight .go { color: #888; }
.highlight .gp { color: #555; }
.highlight .gs { font-weight: bold; }
.highlight .gu { color: #aaa; }
.highlight .gt { color: #a00; }
.highlight .kc { font-weight: bold; }
.highlight .kd { font-weight: bold; }
.highlight .kp { font-weight: bold; }
.highlight .kr { font-weight: bold; }
.highlight .kt { color: #458; font-weight: bold; }
.highlight .m { color: #099; }
.highlight .s { color: #d14; }
.highlight .na { color: #008080; }
.highlight .nb { color: #0086B3; }
.highlight .nc { color: #458; font-weight: bold; }
.highlight .no { color: #008080; }
.highlight .ni { color: #800080; }
.highlight .ne { color: #900; font-weight: bold; }
.highlight .nf { color: #900; font-weight: bold; }
.highlight .nn { color: #555; }
.highlight .nt { color: #000080; }
.highlight .nv { color: #008080; }
.highlight .ow { font-weight: bold; }
.highlight .w { color: #bbb; }
.highlight .mf { color: #099; }
.highlight .mh { color: #099; }
.highlight .mi { color: #099; }
.highlight .mo { color: #099; }
.highlight .sb { color: #d14; }
.highlight .sc { color: #d14; }
.highlight .sd { color: #d14; }
.highlight .s2 { color: #d14; }
.highlight .se { color: #d14; }
.highlight .sh { color: #d14; }
.highlight .si { color: #d14; }
.highlight .sx { color: #d14; }
.highlight .sr { color: #009926; }
.highlight .s1 { color: #d14; }
.highlight .ss { color: #990073; }
.highlight .bp { color: #999; }
.highlight .vc { color: #008080; }
.highlight .vg { color: #008080; }
.highlight .vi { color: #008080; }
.highlight .il { color: #099; }

/* post */
/*====================================================
	main post area
====================================================*/
.post { padding: 35px; background: #ffffff; margin-bottom: 35px; position: relative; overflow: hidden; }

.post .featured { position: absolute; background: #e67e22; color: #ffffff; text-align: center; top: -12px; right: -32px; width: 80px; height: 40px; line-height: 54px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }

.post .featured i { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }

.post .post-head { text-align: center; }

.post .post-head .post-title { margin: 0; font-size: 2.5em; line-height: 1em; }

.post .post-head .post-title a { color: #303030; }

.post .post-head .post-title a:hover, .post .post-head .post-title a:focus { color: #e67e22; text-decoration: none; }

.post .post-head .post-meta { color: #959595; margin: 14px 0 0px; }

.post .post-head .post-meta span { margin: 0px 7px; white-space: nowrap; }

.post .featured-media { margin-top: 30px; overflow: hidden; }

.post .featured-media img { width: 100%; }

.post .post-content { margin: 30px 0; }

.post .post-footer { margin-top: 30px; border-top: 1px solid #ebebeb; padding: 21px 0 0; }

.post .post-footer .tag-list { color: #959595; line-height: 28px; }

.post .post-footer .tag-list a { color: #959595; margin-left: 7px; }

.post .post-footer .tag-list a:hover { color: #e67e22; }

/* post content */
/*==================================================== main post content
====================================================*/
.post-content { font: 400 18px/1.62 "Georgia", "Xin Gothic", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei", sans-serif; color: #444443; }

.post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6 { font-family: "Georgia", "Xin Gothic", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei", "SimSun", sans-serif; color: #222223; }

.post-content h1 { font-size: 1.8em; margin: 0.67em 0; }

.post-content > h1 { margin-top: 0; font-size: 2em; }

.post-content h2 { font-size: 1.5em; margin: 0.83em 0; }

.post-content h3 { font-size: 1.17em; margin: 1em 0; }

.post-content h4, .post-content h5, .post-content h6 { font-size: 1em; margin: 1.6em 0 1em 0; }

.post-content h6 { font-weight: 500; }

.post-content p { margin-top: 0; margin-bottom: 1.46em; }

.post-content a { word-wrap: break-word; -moz-text-decoration-color: rgba(0, 0, 0, 0.4); text-decoration-color: rgba(0, 0, 0, 0.4); }

.post-content a:hover { -moz-text-decoration-color: rgba(0, 0, 0, 0.6); text-decoration-color: rgba(0, 0, 0, 0.6); }

.post-content a img { /* Remove border on IE */ border: none; }

.post-content strong, .post-content b { font-weight: 700; color: #222223; }

.post-content em, .post-content i { font-style: italic; color: #222223; }

.post-content img { max-width: 100%; height: auto; margin: 0.2em 0; }

.post-content figure { position: relative; clear: both; outline: 0; margin: 10px 0 30px; padding: 0; min-height: 100px; }

.post-content figure img { display: block; max-width: 100%; margin: auto auto 4px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.post-content figure figcaption { position: relative; width: 100%; text-align: center; left: 0; margin-top: 10px; font-weight: 400; font-size: 14px; color: #666665; }

.post-content figure figcaption a { text-decoration: none; color: #666665; }

.post-content hr { display: block; width: 50%; height: 1px; border: 0 none; border-top: #dededc 1px solid; margin: 3.2em auto; padding: 0; }

.post-content blockquote { margin: 0 0 1.64em 0; border-left: 3px solid #e67e22; padding-left: 12px; color: #666664; }

.post-content blockquote a { color: #666664; }

.post-content ul, .post-content ol { margin: 0 0 24px 6px; padding-left: 16px; }

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

.post-content ol { list-style-type: decimal; }

.post-content li { margin-bottom: 0.2em; }

.post-content li ul, .post-content li ol { margin-top: 0; margin-bottom: 0; margin-left: 14px; }

.post-content li ul { list-style-type: disc; }

.post-content li ul ul { list-style-type: circle; }

.post-content li p { margin: 0.4em 0 0.6em; }

.post-content .unstyled { list-style-type: none; margin: 0; padding: 0; }

.post-content code, .post-content tt { color: #808080; font-size: 0.96em; background-color: #f9f9f7; padding: 1px 2px; border: 1px solid #dadada; border-radius: 3px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; word-wrap: break-word; }

.post-content pre { margin: 1.64em 0; padding: 7px; border: none; border-left: 3px solid #dadada; padding-left: 10px; overflow: auto; line-height: 1.5; font-size: 0.96em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: #4c4c4c; background-color: #f9f9f7; }

.post-content pre code, .post-content pre tt { color: #4c4c4c; border: none; background: none; padding: 0; }

.post-content table { width: 100%; max-width: 100%; border-collapse: collapse; border-spacing: 0; margin-bottom: 1.5em; font-size: 0.96em; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.post-content th, .post-content td { text-align: left; padding: 4px 8px 4px 10px; border: 1px solid #dadada; }

.post-content td { vertical-align: top; }

.post-content tr:nth-child(even) { background-color: #efefee; }

.post-content iframe { display: block; max-width: 100%; margin-bottom: 30px; }

.post-content figure iframe { margin: auto; }

.post-content table pre { margin: 0; padding: 0; border: none; background: none; }

@media (min-width: 1100px) { .post-content blockquote { margin-left: -24px; padding-left: 20px; border-width: 4px; }
  .post-content blockquote blockquote { margin-left: 0; }
  .post-content figure img { margin: 0 0 4px; }
  .post-content figure figcaption { position: absolute; left: -172px; width: 150px; top: 0; text-align: right; margin-top: 0; }
  .post-content figure figcaption:before { width: 25%; margin-left: 75%; border-top: 1px solid #dededc; display: block; content: ""; margin-bottom: 10px; } }
.windows .post-content { font-size: 16px; font-family: "Georgia", "SimSun", sans-serif; }

/* header */
/*====================================================
	header
====================================================*/
.main-header { text-align: center; padding: 42px 0; background: #ffffff; }
.main-header .branding { font-size: 3.5em; color: #303030; }
.main-header .branding:hover { text-decoration: none; }
.main-header .branding img { max-width: 100%; width: 100px; }
.main-header .slogan, .main-header .article-title { color: #ffffff; font-size: 36px; }
.main-header canvas { position: absolute; top: 0; left: 0; }

.home-template .main-header { padding-top: 62px; padding-bottom: 62px; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; background-position: 0 0; }

/* main-navigation */
.main-navigation { text-align: center; background: #ffffff; border-top: 1px solid #ebebeb; margin-bottom: 35px; border-bottom: 2px solid #e1e1e1; }

.main-navigation .menu { padding: 0; margin: 0; }

.main-navigation .menu li { list-style: none; display: inline-block; position: relative; }

.main-navigation .menu li.nav-current { border-bottom: 2px solid #e67e22; margin-bottom: -2px; }

.main-navigation .menu li a { color: #505050; line-height: 4em; display: block; padding: 0 21px; }

.main-navigation .menu li:hover > a { color: #e67e22; text-decoration: none; }

.main-navigation .menu li ul { visibility: hidden; background: #ffffff; text-align: left; padding: 7px 0px; margin: 0; position: absolute; left: 0; top: 120%; width: 200px; z-index: 999; opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; }

.main-navigation .menu li ul li { display: block; margin: 0; }

.main-navigation .menu li ul li a { line-height: 2.5em; color: #505050; }

.main-navigation .menu li ul:hover > a { color: #e67e22; }

.main-navigation .menu li:hover ul { visibility: visible; opacity: 1; filter: alpha(opacity=100); top: 100%; }

@media (max-width: 767px) { .main-navigation { text-align: left; }
  .main-navigation .menu li { display: block; }
  .main-navigation .menu li:hover > a { color: #e67e22; text-decoration: none; }
  .main-navigation .menu li ul { visibility: visible; padding: 0px 0px 0px 20px; margin: 0; position: relative; top: 0; width: 100%; opacity: 1; filter: alpha(opacity=100); } }
/* navbar */
.navbar-header { text-align: center; }

.navbar-header i { height: 56px; line-height: 56px; font-size: 2em; cursor: pointer; }

@media (min-width: 768px) { .nav-toggle-button { display: none; } }
/* cover*/
/*====================================================
	Tag page & author page cover
====================================================*/
.cover { text-align: center; background: #ffffff; padding: 35px; margin-bottom: 35px; }

.cover .tag-name { margin-top: 0; }

.cover .post-count { margin-top: 7px; color: #959595; }

.cover .avatar { width: 100px; height: 100px; border-radius: 50%; }

.cover .meta-info { color: #959595; }

.cover .meta-info span { margin: 0 7px; }

.cover .meta-info span i { margin-right: 7px; }

.cover .bio { margin-top: 7px; }

/* sidebar */
/*====================================================
	sidebar
====================================================*/
.sidebar .widget { background: #ffffff; padding: 21px 30px; }

.main-footer .widget { padding: 0px 30px; }

.widget { margin-bottom: 35px; }

.widget .title { margin-top: 0; padding-bottom: 7px; border-bottom: 1px solid #ebebeb; margin-bottom: 21px; position: relative; }

.widget .title:after { content: ""; width: 90px; height: 1px; background: #e67e22; position: absolute; left: 0; bottom: -1px; }

.widget .recent-post .recent-single-post { border-bottom: 1px dashed #ebebeb; padding-bottom: 14px; margin-bottom: 14px; }

.widget .recent-post .recent-single-post:last-child { margin-bottom: 0; }

.widget .recent-post .recent-single-post .post-title { color: #505050; -webkit-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; }

.widget .recent-post .recent-single-post .post-title:hover { color: #e67e22; text-decoration: none; }

.widget .recent-post .recent-single-post .date { color: #959595; }

.widget .tag-cloud a { border: 1px solid #ebebeb; padding: 2px 7px; color: #959595; line-height: 1.5em; display: inline-block; margin: 0 7px 7px 0; -webkit-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; }

.widget .tag-cloud a:hover { color: #ffffff; background: #e67e22; border: 1px solid #e67e22; text-decoration: none; }

.widget .social { padding: 0; margin: 0; }

.widget .social li { display: inline-block; margin: 0 2px 5px 0; text-align: center; }

.widget .social li a i { width: 35px; height: 35px; line-height: 35px; border: 1px solid #ebebeb; color: #959595; -webkit-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; }

.widget .social li:hover i { color: #ffffff; background: #e67e22; border: 1px solid #e67e22; }

.widget .newsletter .input-group { margin-bottom: 10px; display: block; }

.widget .newsletter .input-group .email, .widget .newsletter .input-group btn { width: 100%; }

.widget .ad { text-align: center; }

.widget .ad img { max-width: 100%; }

/* author */
/*====================================================
	about author and comment
====================================================*/
.about-author { background: #ffffff; padding: 35px; margin-bottom: 35px; }

.about-author .avatar { width: 100px; height: 100px; border-radius: 50%; background-color: #000; }

.about-author .details { margin-left: 114px; }

.about-author .author { font-size: 1.5em; margin-bottom: 7px; }

.about-author .author a:hover { text-decoration: none; }

.about-author .meta-info { color: #959595; margin-bottom: 7px; }

.about-author .meta-info span { margin-right: 14px; white-space: nowrap; }

.about-author .meta-info span i { margin-right: 7px; }

/* prev and next link */
.prev-next-wrap { margin-bottom: 35px; text-align: center; }

@media (max-width: 767px) { .prev-next-wrap a { display: block; } }
/* pagination */
/*====================================================
	pagination
====================================================*/
.pagination { margin: 0 0 35px; text-align: center; display: block; }

.pagination a { text-align: center; display: inline-block; color: #ffffff; background: #e67e22; border-radius: 2px; }

.pagination a a:hover { background: #505050; text-decoration: none; color: #ffffff; }

.pagination a i { width: 36px; height: 36px; line-height: 36px; }

.pagination .page-number { background: #e67e22; color: #ffffff; margin: 0 3px; display: inline-block; line-height: 36px; padding: 0 14px; border-radius: 2px; }

/* footer */
/*====================================================
	footer
====================================================*/
.main-footer { background: #202020; padding: 35px 0 0; color: #959595; }

.main-footer .widget .title { color: #ffffff; border-bottom: 1px solid #303030; }

.main-footer .widget .tag-cloud a { border: 1px solid #303030; }

.main-footer .widget .tag-cloud a:hover { border: 1px solid #e67e22; }

.main-footer .widget .friend-links a { border: none; }

.main-footer .widget .friend-links a:hover { border: none; }

.main-footer .widget .friend-links hr { margin: 1em 0; border-top: 1px dashed #303030; }

.main-footer .widget .recent-post .recent-single-post { border-bottom: 1px dashed #303030; }

.main-footer .widget .recent-post .recent-single-post .post-title { color: #959595; }

.main-footer .widget .recent-post .recent-single-post .post-title:hover { color: #e67e22; }

.main-footer .widget .recent-post .recent-single-post .date { color: #505050; }

.copyright { background: #111; font-size: 13px; text-align: center; color: #555555; padding-top: 28px; padding-bottom: 28px; border-top: 1px solid #303030; }

.copyright span { margin: 0 .5em; }

.copyright a { color: #555555; }

#back-to-top { position: fixed; right: 10px; bottom: 10px; background: rgba(230, 126, 34, 0.6); color: #ffffff; text-align: center; border-radius: 2px; z-index: 1; display: none; }

#back-to-top:hover { background: #e67e22; }

#back-to-top i { width: 30px; height: 30px; line-height: 30px; }

.article-tags { position: relative; background-color: #ffffff; padding: 40px 30px 30px 20px; margin-bottom: 35px; }
.article-tags .tag-meta { position: absolute; left: 8px; top: -8px; width: 160px; background-color: #e67e22; text-align: center; padding: 5px 10px; }
.article-tags .tag-meta:before { content: ""; position: absolute; top: 0; right: -8px; border-color: transparent transparent #826C00 #826C00; border-style: solid; border-width: 4px; width: 0; height: 0; }
.article-tags .tag-meta h2 { display: inline; font-size: 16px; color: #ffffff; }

.tech-radar { position: relative; background-color: #ffffff; padding: 50px 30px 30px 20px; margin-bottom: 35px; }
.tech-radar .tag-radar { position: absolute; left: -8px; top: 10px; width: 160px; background-color: #e67e22; text-align: center; padding: 5px 10px; }
.tech-radar .tag-radar:before { content: ""; position: absolute; top: -8px; left: 0; border-color: transparent #826C00 #826C00 transparent; border-style: solid; border-width: 4px; width: 0; height: 0; }
.tech-radar .tag-radar h2 { display: inline; font-size: 16px; color: #ffffff; }