/* //////////////////////////////////////////////////////////////////////////

   Hoshi 1.6.1

   //////////////////////////////////////////////////////////////////////////
    
   Normalize.css
   --------------------
   1.General
   2.Header
   3.Featured
   4.Masonry
   5.Post
   6.Next/Prev Post
   7.Author & Tag
   8.Footer
   9.Disqus
   10.Hack IE
   11.RWD
   12.Colors

   --------------------------------------------------------------------------
   Normalize.css
   --------------------------------------------------------------------------
   Version : 8.0.1
   Website : necolas.github.io/normalize.css
   Repo    : github.com/necolas/normalize.css
   Author  : Nicolas Gallagher
   License : MIT
   -------------------------------------------------------------------------- */
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{overflow:visible;box-sizing:content-box;height:0}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{text-decoration:underline;text-decoration:underline dotted;border-bottom:none}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type='button'],[type='reset'],[type='submit']{-webkit-appearance:button}button::-moz-focus-inner,[type='button']::-moz-focus-inner,[type='reset']::-moz-focus-inner,[type='submit']::-moz-focus-inner{padding:0;border-style:none}button:-moz-focusring,[type='button']:-moz-focusring,[type='reset']:-moz-focusring,[type='submit']:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{display:table;box-sizing:border-box;max-width:100%;padding:0;white-space:normal;color:inherit}progress{vertical-align:baseline}textarea{overflow:auto}[type='checkbox'],[type='radio']{box-sizing:border-box;padding:0}[type='number']::-webkit-inner-spin-button,[type='number']::-webkit-outer-spin-button{height:auto}[type='search']{outline-offset:-2px;-webkit-appearance:textfield}[type='search']::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

/* --------------------------------------------------------------------------
   1.General
   -------------------------------------------------------------------------- */
html,
body {
   height: 100%;
   max-height: 100%;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

body {
   font-family: 'Inter', sans-serif;
   font-weight: normal;
   word-wrap: break-word;
   color: #3f3c48;
   -webkit-font-feature-settings: 'kern' 1;
   -ms-font-feature-settings: 'kern' 1;
   font-feature-settings: 'kern' 1;
}

@supports (font-variation-settings: normal) {
  body { font-family: 'Inter var', sans-serif; }
}

/* Link
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a,
a:focus,
a:hover {
   text-decoration: none;
   outline: 0;
}

a {
   -webkit-transition: all .2s;
   transition: all .2s;
}

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1 {
   font-size: 45px;
   letter-spacing: -1px;
}

h2 {
   font-size: 35px;
}

h3 {
   font-size: 30px;
}

h4 {
   font-size: 25px;
}

h5 {
   font-size: 22px;
}

h6 {
   font-size: 20px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-weight: normal;
   line-height: 1.45;
   margin: 5px 0 25px;
   -webkit-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
   -ms-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
   font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
}

h6 {
   font-weight: normal;
}

p {
   margin: 0 0 24px;
   -webkit-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
   -ms-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
   font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
}

strong {
   font-weight: bold;
}

/* iframe
–––––––––––––––––––––––––––––––––––––––––––––––––– */
iframe {
   max-width: 100%;
}

/* img
–––––––––––––––––––––––––––––––––––––––––––––––––– */
img {
   vertical-align: middle;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
}

/* List
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ol,
ul {
   padding-left: 45px;
}

ul,
ol,
dl {
   margin: 0 0 23px 0;
   -webkit-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
   -ms-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
   font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
}

ol ol,
ul ul,
ul ol,
ol ul {
   margin: 0 0 .4em 0;
   padding-left: 2em;
}

dl dt {
   font-weight: bold;
   float: left;
   clear: left;
   overflow: hidden;
   width: 180px;
   margin-bottom: 1em;
   text-align: right;
   white-space: nowrap;
   text-overflow: ellipsis;
}

dl dd {
   margin-bottom: 1em;
   margin-left: 200px;
}

li {
   margin: .4em 0;
}

li li {
   margin: 0;
}

li > p:last-of-type {
   margin-bottom: 0;
}

/* hr
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
   display: block;
   height: 1px;
   margin: 3.2em 0;
   padding: 0;
   border: 0;
}

/* Mark
–––––––––––––––––––––––––––––––––––––––––––––––––– */
mark {
   color: #fff;
}

/* Blockquote
–––––––––––––––––––––––––––––––––––––––––––––––––– */
blockquote {
   margin: 0 0 0 5px;
   padding: 0;
   border-left: solid 2px;
}

/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.kg-code-card {
   min-width: 100%;
   margin: 0 0 1.75em;
}

.kg-code-card pre {
   margin: 0;
}

.kg-code-card figcaption {
   font-size: 12px;
   line-height: 1.3;
   display: block;
   width: 100%;
   margin-top: 5px;
}

code {
   font-size: .85em;
   padding: 1px 3px;
   white-space: pre-wrap;
   background-color: #eee;
   -webkit-font-feature-settings: 'liga' 0;
   -ms-font-feature-settings: 'liga' 0;
   font-feature-settings: 'liga' 0;
}

pre {
   font-size: .9em;
   overflow: auto;
   box-sizing: border-box;
   width: 100%;
   margin: 0 0 1.75em 0;
   padding: 10px;
   white-space: pre;
   background-color: #eee;
}

pre code {
   font-size: inherit;
   padding: 0;
   white-space: pre-wrap;
   border: none;
   background: transparent;
}

/* kbd
–––––––––––––––––––––––––––––––––––––––––––––––––– */
kbd {
   font-size: .9em;
   font-weight: bold;
   display: inline-block;
   margin-bottom: .4em;
   padding: 1px 8px;
   color: #666;
   border: solid 1px #999;
   background: #f4f4f4;
   text-shadow: #fff 0 1px 0;
}

/* Table
–––––––––––––––––––––––––––––––––––––––––––––––––– */
table {
   box-sizing: border-box;
   width: 100%;
   max-width: 100%;
   margin: 1.75em 0;
   background-color: transparent;
   -webkit-border-horizontal-spacing: 0;
   -webkit-border-vertical-spacing: 0;
}

table th,
table td {
   line-height: 20px;
   padding: 8px;
   text-align: left;
   vertical-align: top;
}

table th {
   color: #000;
}

table caption + thead tr:first-child th,
table caption + thead tr:first-child td,
table colgroup + thead tr:first-child th,
table colgroup + thead tr:first-child td,
table thead:first-child tr:first-child th,
table thead:first-child tr:first-child td {
   border-top: 0;
}

table table table {
   background-color: #fff;
}

table tbody > tr:nth-child(odd) > td,
table tbody > tr:nth-child(odd) > th {
   background-color: #eee;
}

table.plain tbody > tr:nth-child(odd) > td,
table.plain tbody > tr:nth-child(odd) > th {
   background: transparent;
}

/* Input, textarea, select
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input,
textarea,
select {
   font-size: 14px;
   line-height: 1.6;
   width: 50%;
   margin: 0 0 5px 0;
   padding: 6px 9px;
   -webkit-transition: all .2s;
   transition: all .2s;
   border: 1px solid #eee;
   outline: 0;
   background-color: #fff;
   box-shadow: none;
   -webkit-appearance: none;
}

input:focus,
textarea:focus {
   border: 1px solid;
   outline: none;
   outline-width: 0;
   background: #fff;
}

textarea {
   width: 100%;
   min-width: 250px;
   max-width: 100%;
   height: auto;
   min-height: 80px;
}

select {
   line-height: 30px;
   width: 50%;
   height: 30px;
}

/* Button
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button {
   font-size: 12px;
   line-height: 13px;
   display: inline-block;
   width: 50%;
   min-height: 35px;
   margin: 0 0 5px 0;
   padding: 6px 9px;
   cursor: pointer;
   -webkit-transition: all .2s;
   transition: all .2s;
   text-align: center;
   text-decoration: none;
   letter-spacing: 1px;
   text-transform: uppercase;
   border: 1px solid;
   outline: none;
   text-shadow: none;
}

/* Selection
–––––––––––––––––––––––––––––––––––––––––––––––––– */
::-moz-selection {
   background: #eee;
}

::selection {
   background: #eee;
}

/* Wrapper
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.site-wrapper {
   background-attachment: fixed;
   background-position: center;
   background-size: cover;
}

.site-wrapper .site-overlay {
   background: -webkit-linear-gradient(rgba(255, 249, 223, .75), rgba(87, 136, 211, .85));
   background: linear-gradient(rgba(255, 249, 223, .75), rgba(87, 136, 211, .85));
   background-attachment: fixed;
}

.site-container {
   min-height: 100vh;
   margin: 0 auto;
   background: #383545;
}

/* Clearfix
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.clearfix:before,
.clearfix:after {
   display: table;
   content: '';
}

.clearfix:after {
   clear: both;
}

/* --------------------------------------------------------------------------
   2.Header
   -------------------------------------------------------------------------- */
.main-header {
   overflow: hidden;
}

.main-header .blog-information,
.main-header h1.title a,
.main-header a:hover,
.main-menu a:hover,
.main-menu ul li.current-menu-item a {
   color: #fff;
}

.main-header .blog-information {
   max-width: 100%;
   padding: 45px 0 60px;
   text-align: center;
}

.main-header .wrap {
   margin: 0 auto;
}

.main-header .logo img {
   display: block;
   box-sizing: border-box;
   width: auto;
   height: 60px;
   margin: 0 auto;
   margin-bottom: 10px;
}

.main-header h1.title {
   font-size: 35px;
   font-weight: 300;
   margin: 0 2%;
   letter-spacing: 3px;
}

.main-header h1.title a {
   font-weight: bold;
   letter-spacing: 8px;
   text-transform: uppercase;
}

.main-header h2.description {
   font-size: 16px;
   font-weight: bold;
   line-height: 1.5;
   width: 90%;
   max-width: 350px;
   margin: 10px auto 0;
   padding: 0;
   letter-spacing: 1px;
}

/* Menu
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.main-menu {
   width: 100%;
   padding: 25px 0 0 0;
   text-align: center;
   line-height: 36px;
}

.main-menu ul {
   padding: 0;
   list-style: none;
}

.main-menu li {
   display: inline;
   margin: 0;
   padding: 0 1%;
   white-space: nowrap;
}

.main-menu a {
   font-size: 12px;
   font-weight: bold;
   margin: 0;
   padding: .8% 20px;
   -webkit-transition: all .2s;
   transition: all .2s;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   border-bottom: solid 2px;
}

.main-menu a:hover,
.main-menu li.current-menu-item a {
   border-bottom: solid 2px;
}

/* Mobile
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.toggle-button {
   width: 50px;
   height: 50px;
   margin: 10px;
   border: none;
}

.toggle-button svg {
   width: 24px;
   margin-bottom: -3px;
   fill: #eeedea;
}

.slideout-menu {
   position: fixed;
   z-index: 0;
   top: 0;
   bottom: 0;
   display: none;
   overflow-y: scroll;
   width: 256px;
   min-height: 100vh;
   -webkit-overflow-scrolling: touch;
}

.slideout-menu ul {
   padding: 20px 0;
   list-style: none;
}

.slideout-menu a {
   font-size: 18px;
   font-weight: bold;
   line-height: 2;
   margin: 0;
   padding: .8% 0;
   list-style: none;
   -webkit-transition: all .2s;
   transition: all .2s;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   border-bottom: solid 2px;
}

.slideout-menu a:hover,
.slideout-menu ul li.current-menu-item a {
   color: #fff;
}

.slideout-menu li.current-menu-item a {
   border-bottom: solid 2px;
}

.slideout-menu .footer-title-description {
   font-size: 16px;
   font-weight: bold;
   margin: 0 22px;
   border-top: solid 2px;
}

.slideout-menu-left {
   left: 0;
}

.slideout-menu-right {
   right: 0;
}

.slideout-panel {
   position: relative;
   z-index: 1;
   min-height: 100vh;
   background-color: #fff;
   will-change: transform;
}

.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
   overflow: hidden;
}

.slideout-open .slideout-menu {
   display: block;
}

/* --------------------------------------------------------------------------
   3.Featured
   -------------------------------------------------------------------------- */
.featured-top .overlay-featured {
   background-color: rgba(40, 40, 50, .55);
}

.featured-top .content {
   position: relative;
   width: 100%;
   margin: 0;
   -webkit-transition: all .2s;
   transition: all .2s;
   background: center;
}

.featured-top .left {
   display: table;
   float: left;
   width: 55%;
   padding: 0 1% 0 10%;
   text-align: left;
}

.featured-top .overlay-featured,
.featured-top .content,
.featured-top .left {
   height: 200px;
}

.featured-top .right {
   float: right;
   width: 20%;
   margin-right: 10%;
}

.featured-top h2 {
   font-size: 35px;
   font-weight: lighter;
   line-height: 1.3;
   display: table-cell;
   vertical-align: middle;
   letter-spacing: 1px;
   text-transform: uppercase;
}

.featured-top h2 .author {
  font-size: 23px;
}

.featured-top q { 
  display: inline;
}

.featured-top q:before { 
  content: open-quote;
}

.featured-top q:after { 
  content: close-quote;
}

.featured-top h2 a {
   color: #fff;
   border-bottom: solid 2px transparent;
}

.featured-top .right a {
   font-size: 16px;
   font-weight: bold;
   position: absolute;
   top: 50%;
   padding: 15px 50px 15px 50px;
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
   text-align: center;
   letter-spacing: 3px;
   text-transform: uppercase;
   border: solid 6px;
   border-radius: 0;
   box-shadow: none;
}

.featured-top .right a:hover {
   border: solid 6px;
}

/* --------------------------------------------------------------------------
   4.Masonry
   -------------------------------------------------------------------------- */
.masonry-wrapper {
   display: block;
   padding-bottom: 20px;
}

#masonry {
   opacity: 0;
}

#masonry .item-appear {
   margin: 0;
}

.item-content {
   width: 60%;
   padding: 90px 20% 100px;
}

.item-content span {
   font-size: 12px;
   letter-spacing: 1px;
   text-transform: uppercase;
}

.item-meta {
   line-height: 1.2;
}

.item-content h2 {
   margin-top: 15px;
}

.item-content h2 a {
   border-bottom: solid 2px transparent;
}

.item-content h2 a:hover {
   border-bottom: solid 2px;
}

.item-image {
   overflow: hidden;
}

.item-image img {
   width: 100%;
   -webkit-transition: -webkit-transform .35s ease-in-out;
   transition: -webkit-transform .35s ease-in-out;
   transition: transform .35s ease-in-out;
   transition: transform .35s ease-in-out, -webkit-transform .35s ease-in-out;
}

.item-image img:hover {
   -webkit-transform: scale(1.07);
   transform: scale(1.07);
}

.item-content .item-excerpt {
   font-size: 15px;
   line-height: 1.5;
}

.item-content .item-more {
   font-size: 12px;
   font-weight: bold;
   letter-spacing: 1px;
   text-transform: uppercase;
}

.blog-date {
   font-size: 12px;
   letter-spacing: 1px;
   text-transform: uppercase;
}

#masonry .tag-hash-gold h2 a:hover,
#masonry .tag-hash-dark h2 a:hover,
#masonry .tag-hash-red h2 a:hover,
#masonry .tag-hash-blue h2 a:hover,
#masonry .tag-hash-green h2 a:hover,
#masonry .tag-hash-yellow h2 a:hover,
#masonry .tag-hash-violet h2 a:hover {
   opacity: 1;
   border-bottom: solid 2px;
}

#masonry .tag-hash-gold a:hover,
#masonry .tag-hash-dark a:hover,
#masonry .tag-hash-red a:hover,
#masonry .tag-hash-blue a:hover,
#masonry .tag-hash-green a:hover,
#masonry .tag-hash-yellow a:hover,
#masonry .tag-hash-violet a:hover {
   opacity: .5;
}

/* --------------------------------------------------------------------------
   5.Post
   -------------------------------------------------------------------------- */
.post {
   background-color: #fff;
}

.page-wrap {
   padding-bottom: 12%;
}

.post {
   line-height: 1.7;
   overflow: hidden;
   padding: 0;
}

.post-wrap .post-header {
   line-height: 1.2;
}

.post-wrap .post-header span {
   font-size: 12px;
   letter-spacing: 1px;
   text-transform: uppercase;
}

.post .post-image {
   position: relative;
   width: 100%;
   height: 400px;
   margin: 0;
   background: center;
}

.post .post-wrap {
   width: 52%;
   margin: 0 24%;
   padding: 6% 0 8%;
}

.post .post-wrap {
   padding: 6% 0 12%;
}

.post .post-title {
   line-height: 1.4;
   margin: 15px 50px 30px 0;
}

.post .post-wrap hr {
   width: 50px;
   height: 2px;
   margin: 60px 0 25px 0;
   border: none;
}

.post-content img {
   max-width: 100%;
   margin: 15px 0 40px;
}

.js-reframe {
   margin-top: 15px;
}

.post-content p {
   font-size: 18px;
   line-height: 1.8;
}

.post-content p sup {
   padding-left: 1px;
}

.footnotes {
   padding: 20px 0;
}

.footnotes p,
.footnotes li {
   font-size: 14px;
   line-height: 1.4;
}

.post-content blockquote,
.post-content blockquote p {
   font-size: 26px;
   line-height: 1.5;
}

.post-content blockquote {
   font-weight: lighter;
   font-style: italic;
   margin: 40px 0;
   padding: 0 5% 0 30px;
}

.post-content blockquote a {
   font-weight: normal;
}

.post-wrap .post-meta {
   padding: 5px 0 30px;
}

.post-author {
   font-size: 12px;
   line-height: 1.4;
   float: left;
   width: 60%;
   padding-top: 2px;
   text-align: left;
   letter-spacing: 1px;
   text-transform: uppercase;
}

/* Share
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.post-share {
   position: relative;
   float: right;
   width: 38%;
   padding-right: 2%;
   text-align: right;
}

.post-share a {
   display: inline-block;
   margin: 0 0 20px 15px;
}

.post-share svg {
   width: 18px;
   -webkit-transition: all .2s;
   transition: all .2s;
   fill: #cac9cd;
}

.post-share .twitter svg:hover {
   fill: #55acee;
}

.post-share .facebook svg:hover {
   fill: #3b5998;
}

/* Share — copy link
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.post-share input {
   display: block;
   cursor: default;
   opacity: 0;
   color: transparent;
   border: none;
   outline: none;
   background: transparent;
}

.post-share .copy-link:not(:active) ~ .copied {
   -webkit-transition: opacity 10s step-end;
   transition: opacity 10s step-end;
}

.post-share .copy-link:active ~ .copied {
   opacity: 1;
}

.post-share .copied {
   font-size: 12px;
   position: absolute;
   top: -13px;
   opacity: 0;
}

.post-share .copy-link {
   cursor: pointer;
}

.post-share .copy-link svg {
   width: 19px;
   margin-bottom: 2px;
}

/* Tags
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.post-tag {
   font-size: 11px;
   margin: 65px 0 25px;
   letter-spacing: 1px;
   text-transform: uppercase;
}

.post-tag a {
   display: inline-block;
   margin: 10px 10px 0 0;
   padding: 5px;
   border: solid 1px;
}

.post-tag a:hover {
   border: solid 1px;
}

/* Koenig Editor
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.kg-image-card,
.kg-gallery-card,
.kg-embed-card {
   margin: 50px 0;
   text-align: center;
}

.kg-image-card img,
.kg-gallery-card img {
   margin-bottom: 0 !important;
}

.kg-image-card figcaption,
.kg-gallery-card figcaption,
.kg-embed-card figcaption {
   font-size: 14px;
   line-height: 1.3;
   display: block;
   width: 100%;
   margin-top: 5px;
   
}

.kg-embed-card .js-reframe {
   margin-bottom: 0;
}

.kg-gallery-card .kg-gallery-container {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   flex-direction: column;
   margin: 15px auto;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
}

.kg-gallery-card .kg-gallery-row {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   flex-direction: row;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
   -ms-flex-direction: row;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
}

.kg-gallery-card .kg-gallery-image img {
   display: block;
   width: 100%;
   height: 100%;
   margin: 0;
}

.kg-gallery-card .kg-gallery-row:not(:first-of-type) {
   margin: 15px 0 0 0;
}

.kg-gallery-card .kg-gallery-image:not(:first-of-type) {
   margin: 0 0 0 15px;
}

/* RWD Koenig Images
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (min-width:680px) {
   .kg-image-card.kg-width-wide img {
      max-width: 110%;
      margin-left: -5%;
   }

   .kg-gallery-card .kg-gallery-container {
      width: 110%;
      margin-left: -5%;
   }

}

@media (max-width:767px) {
   .kg-image-card,
   .kg-gallery-card,
   .kg-embed-card {
      margin: 35px 0;
   }

}

@media (max-width:679px) {
   .kg-image-card.kg-width-full img {
      max-width: 126%;
      margin: 0 -13% !important;
   }

}

@media (min-width:680px) and (max-width:767px) {
   .kg-image-card.kg-width-full img {
      max-width: 125%;
      margin: 0 -12.5%;
   }

}

@media (min-width:768px) and (max-width:1023px) {
   .kg-image-card.kg-width-full img {
      width: 155%;
      max-width: 155%;
      margin: 0 -27.5%;
   }

}

@media (min-width:1024px) and (max-width:1199px) {
   .kg-image-card.kg-width-full img {
      width: 173%;
      max-width: 173%;
      margin: 0 -36.5%;
   }

}

@media (min-width:1200px) and (max-width:1399px) {
   .kg-image-card.kg-width-full img {
      width: 1175px;
      max-width: 1175px;
      margin: 0 -36.5%;
   }

}

@media (min-width:1400px) {
   .kg-image-card.kg-width-full img {
      width: 1285px;
      max-width: 1285px;
      margin: 0 -46.5%;
   }

}

/* --------------------------------------------------------------------------
   6.Next/Prev Post
   -------------------------------------------------------------------------- */
.read-next .next-post .link-text,
.read-next .previous-post .link-text,
.read-next .next-post .read-next-text,
.read-next .previous-post .read-next-text,
.read-next .next-post,
.read-next .previous-post {
   -webkit-transition: all .2s;
   transition: all .2s;
}

.read-next {
   position: relative;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   padding-bottom: 12%;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
}

.read-next .next-post,
.read-next .previous-post {
   position: relative;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   display: block;
   overflow: hidden;
   min-width: 50%;
   min-width: 50%;
   background: center;
   background-size: cover;
   -webkit-box-flex: 1;
   -ms-flex-positive: 1;
   flex-grow: 1;
}

.next-post .read-next-text,
.previous-post .read-next-text {
   display: block;
}

.next-post .read-next-text {
   padding: 0 50px 0 30px;
   text-align: right;
}

.previous-post .read-next-text {
   padding: 0 30px 0 50px;
   text-align: left;
}

.read-next .next-post .read-next-text,
.read-next .previous-post .read-next-text {
   min-height: 140px;
   padding-top: 30px;
   padding-bottom: 21px;
   letter-spacing: 1px;
   background: rgba(0, 0, 0, .4);
}

.read-next .next-post .read-next-text:hover,
.read-next .previous-post .read-next-text:hover {
   background: rgba(0, 0, 0, .6);
}

.read-next .next-post.no-image .read-next-text,
.read-next .previous-post.no-image .read-next-text {
   background-color: transparent;
}

.read-next .next-post .link-text,
.read-next .previous-post .link-text {
   font-size: 12px;
}

.read-next .next-post h3,
.read-next .previous-post h3 {
   font-size: 18px;
   margin-top: 5px;
}

.read-next .next-post,
.read-next .previous-post,
.read-next .next-post .link-text,
.read-next .previous-post .link-text,
.read-next .next-post h3,
.read-next .previous-post h3 {
   font-weight: bold;
   text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   7.Author & Tag
   -------------------------------------------------------------------------- */
.featured-wrapper {
   display: table;
   float: left;
   width: 80%;
   margin: 0;
   padding: 0 10% 0 10%;
}

.featured-wrapper .tag-name,
.featured-wrapper .tag-description,
.featured-wrapper .author-image,
.featured-wrapper .author-description,
.featured-wrapper .author-social {
   display: table-cell;
   height: 200px;
   vertical-align: middle;
}

.featured-wrapper .tag-name {
   width: 30%;
}

.featured-wrapper .tag-description {
   line-height: 1.4;
   width: 70%;
   padding-left: 5%;
   text-align: left;
}

.featured-wrapper .author-image {
   display: block;
   width: 130px;
   height: 130px;
   margin-top: 35px;
   margin-right: 40px;
   border-radius: 50%;
   background-position: center center;
   background-size: cover;
}

.featured-wrapper .author-bio {
   font-size: 15px;
   line-height: 1.4;
   margin-top: 10px;
}

.featured-wrapper .author-description {
   width: 60%;
}

/* Social icons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.featured-wrapper .author-social {
   width: 40%;
   text-align: right;
}

.featured-wrapper .author-social a {
   margin-left: 5px;
}

.featured-wrapper .author-social svg {
   width: 21px;
   height: 21px;
   margin-bottom: -2px;
   -webkit-transition: all .2s;
   transition: all .2s;
}

.featured-wrapper .icons {
   display: table-cell;
   width: 40px;
   height: 40px;
   text-align: center;
   vertical-align: middle;
   border-radius: 50%;
}

/* --------------------------------------------------------------------------
   8.Footer
   -------------------------------------------------------------------------- */
.main-footer {
   width: 90%;
   margin: 0 auto;
   text-align: center;
}

/* Pagination
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.pagination {
   font-size: 12px;
   font-weight: bold;
   position: relative;
   display: block;
   height: 60px;
   margin: 4% 0 10%;
   padding: 0;
   text-align: center;
   letter-spacing: 1px;
   text-transform: uppercase;
}

.pagination .newer-posts,
.pagination .older-posts {
   position: absolute;
}

.pagination .newer-posts {
   left: 40px;
}

.pagination .older-posts {
   right: 40px;
}

.pagination svg {
   display: inline-block;
   width: 12px;
   margin-bottom: 2px;
   -webkit-transition: all .2s;
   transition: all .2s;
}

.pagination .older-posts:hover svg {
   -webkit-transform: translateX(3px);
   transform: translateX(3px);
}

.pagination .newer-posts:hover svg {
   -webkit-transform: translateX(-3px);
   transform: translateX(-3px);
}

/* Subscribe
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.subscribe {
   padding: 0 0 6%;
}

.subscribe h3,
.subscribe button {
   font-size: 20px;
   margin: 5px 0 15px;
   padding: 10px 0;
   letter-spacing: 3px;
   text-transform: uppercase;
}

.subscribe .subscribe-email {
   width: 40%;
   margin-bottom: 16px;
   text-align: center;
   letter-spacing: 1px;
}

.subscribe button {
   font-weight: bold;
   text-transform: uppercase;
   border: none;
   background: transparent;
}

.subscribe .form-control,
.subscribe input[type=email],
.subscribe textarea {
   font-size: 18px;
   height: 20px;
   padding: 20px;
   border: solid 6px;
   border-radius: 0;
   background: transparent;
}

.subscribe-email::-webkit-input-placeholder {
   color: #888;
}

.subscribe-email::-moz-placeholder {
   color: #888;
}

.subscribe-email:-ms-input-placeholder {
   color: #888;
}

.subscribe-email:-moz-placeholder {
   color: #888;
}

.subscribe .form-control:focus,
.subscribe input[type=email]:focus,
.subscribe textarea:focus {
   border: 6px solid;
}

/* Social icons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.footer-social {
   display: inline-block;
   margin: 0 0 10px;
   padding: 0;
}

.footer-social a {
   margin: 0 8px;
}

.footer-social svg {
   width: 19px;
   height: 19px;
   -webkit-transition: all .2s;
   transition: all .2s;
}

/* Description
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.footer-title-description {
   font-weight: bold;
   line-height: 1.5;
   max-width: 300px;
   margin: 0 auto;
   padding: 20px 0 23px;
   letter-spacing: 1px;
}

.footer-title-description a {
   font-size: 16px;
}

.footer-title-description span {
   font-size: 13px;
}

.footer-copyright {
   font-size: 13px;
   line-height: 1.5;
   padding-bottom: 45px;
   letter-spacing: 1px;
}

/* --------------------------------------------------------------------------
   9.Discus
   -------------------------------------------------------------------------- */
#disqus_thread {
   width: 52%;
   margin: 0 24%;
   padding: 6% 0 10%;
}

@media (max-width:780px) {
   #disqus_thread {
      width: 80% !important;
      margin: 0 10% !important;
   }

}

@media (max-width:1024px) {
   #disqus_thread {
      width: 65%;
      margin: 0 17.5%;
   }

}

/* --------------------------------------------------------------------------
   10.Hack IE
   -------------------------------------------------------------------------- */
@media all and (-ms-high-contrast:none), (-ms-high-contrast:active) {
   .read-next .next-post,
   .read-next .previous-post {
      width: 50%;
   }

   @media (max-width:680px) {
      .read-next .next-post,
      .read-next .previous-post {
         width: 100%;
      }

   }

   .site-wrapper {
      background-attachment: scroll;
   }

   .site-wrapper .site-overlay {
      background: -webkit-linear-gradient(rgb(255, 249, 223), rgb(88, 132, 191));
      background: linear-gradient(rgb(255, 249, 223), rgb(88, 132, 191));
      background-attachment: scroll;
   }

   .post .post-wrap hr {
      float: left;
      width: 50px;
      height: 2px;
      margin: 60px 100% 25px 0;
      border: none;
      background: #bd9b61;
   }

}

_:-ms-lang(x),_:-webkit-full-screen,.site-wrapper .site-overlay {
   background-attachment: scroll;
}

_:-ms-lang(x),_:-webkit-full-screen,.post .post-wrap hr {
   float: left;
   width: 50px;
   height: 2px;
   margin: 60px 100% 25px 0;
   border: none;
   background: #bd9b61;
}

/* --------------------------------------------------------------------------
   11.RWD
   -------------------------------------------------------------------------- */
@media (max-width:320px) {
   .item-image {
      display: none;
   }

}

@media (min-width:580px) {
   .slideout-panel {
      margin-left: 0;
      will-change: auto;
   }

   .slideout-menu {
      left: -256px;
      display: block;
   }

   .mobile-menu-wrap,
   .toggle-button {
      display: none;
   }

}

@media (max-width:580px) {
   html {
      height: auto;
   }

   .post-author {
      width: 100%;
   }

   .item {
      width: 100%;
   }

   .post-header time,
   .featured-wrapper .author-social,
   .main-menu {
      display: none;
   }

   .featured-wrapper,
   .featured-top .left {
      width: 95% !important;
      padding: 0 2.5% 0 2.5% !important;
   }

   .featured-wrapper h2 {
      display: block;
      margin: 0;
   }

   .post .post-wrap .post-meta-hr hr {
      width: 16%;
      margin: 50px 42% 25px 42%;
   }

   .post-content blockquote,
   .post-content blockquote p {
      font-size: 16px !important;
      line-height: 1.5;
   }

   p {
      margin: 0 0 18px;
   }

   .featured-wrapper h2,
   .post-share,
   .post-author,
   .post-tag {
      text-align: center;
   }

   .post-share {
      width: 100%;
      margin: 50px 0 20px;
      padding: 0;
   }

   .post-share a {
      margin-right: 10px;
      margin-left: 10px;
   }

   .post-tag a {
      margin: 10px 5px;
   }

   .footer-copyright {
      line-height: 1.5;
      width: 80%;
      margin: 0 auto;
   }

}

@media (max-width:680px) {
   .post .post-image {
      height: 250px;
   }

   .post .post-title {
      margin-right: 0;
   }

   .main-header h1.title {
      font-size: 28px;
   }

   .main-header h2.description {
      font-size: 14px;
      line-height: 1.7 !important;
   }

   .subscribe {
      padding: 0 0 60px;
   }

   .subscribe h3 {
      line-height: 1.6;
      padding: 0;
   }

   .subscribe-email {
      width: 70% !important;
   }

   .blog-date {
      display: inline-block;
   }

   .main-header .blog-information {
      padding: 20px 0 30px;
   }

   .post-content img {
      margin: 20px 0;
   }

   .pagination {
      margin: 10px 0 40px;
   }

   .pagination .older-posts {
      right: 10%;
   }

   .pagination .newest-posts {
      left: 10%;
   }

   .page-number {
      display: none;
   }

   .read-next {
      flex-direction: column;
      text-align: center;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
   }

   .read-next .next-post,
   .read-next .previous-post {
      width: 100%;
   }

   .read-next .next-post .read-next-text,
   .read-next .previous-post .read-next-text {
      min-height: 60px;
      padding: 45px 0 40px;
      padding-right: 5%;
      padding-left: 5%;
      text-align: center;
   }

   ol,
   ul,
   .footnotes ol {
      padding-left: 22px !important;
   }

}

@media (max-width:768px) {
   .pagination {
      margin: 30px 0 40px;
   }

   h1 {
      font-size: 30px;
   }

   h2 {
      font-size: 25px;
   }

   h3 {
      font-size: 21px;
   }

   h4 {
      font-size: 18px;
   }

   h5 {
      font-size: 16px;
   }

   h6 {
      font-size: 16px;
   }

   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
      line-height: 1.3 !important;
      margin: 10px 0 15px;
   }

   .item-content {
      width: 70%;
      padding: 30px 15% 40px;
   }

   .post-content p {
      font-size: 15px;
      line-height: 1.5;
   }

   .footnotes p {
      font-size: 14px;
      line-height: 1.4;
   }

   .post-content blockquote,
   .post-content blockquote p {
      font-size: 22px;
      line-height: 1.4;
   }

   .post-content blockquote {
      padding: 0 5% 0 20px !important;
   }

   .featured-wrapper .tag-name h2 {
      display: block;
      margin: 0;
      text-align: center;
   }

   .featured-top .right,
   .featured-wrapper .author-bio,
   .featured-wrapper .tag-description {
      display: none;
   }

   .featured-wrapper,
   .featured-top .left {
      width: 80%;
      padding: 0 10%;
   }

   .featured-top .left {
      text-align: center;
   }

   .post .post-wrap {
      width: 80% !important;
      margin: 0 10% !important;
   }

}

@media (max-width:1024px) {
   .featured-wrapper {
      table-layout: fixed;
   }

   .featured-wrapper h2 {
      word-break: break-word;
   }

   .featured-wrapper .author-image {
      display: none;
   }

   .featured-wrapper .author-social {
      width: 30%;
   }

}

@media (min-width:768px) and (max-width:1024px) {
   .post .post-wrap {
      width: 65%;
      margin: 0 17.5%;
   }

}

@media (min-width:1024px) and (max-width:1400px) {
   .post .post-wrap {
      width: 58%;
      margin: 0 21%;
   }

}

@media (min-width:580px) and (max-width:1200px) {
   .item {
      width: 50%;
   }

}

@media (min-width:1200px) and (max-width:1400px) {
   .site-container {
      width: 1170px;
   }

   .item {
      width: 585px;
   }

}

@media (min-width:1400px) {
   .site-container {
      width: 1280px;
   }

   .item {
      width: 640px;
   }

}

/* --------------------------------------------------------------------------
   12.Colors
   -------------------------------------------------------------------------- */

/* Masonry
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#masonry {
   color: #3f3c48;
}

#masonry .item-appear {
   background-color: #fafafa;
}

#masonry .tag-hash-gray {
   background-color: #eee;
}

#masonry .tag-hash-gold {
   background-color: #bd9b61;
}

#masonry .tag-hash-dark {
   background-color: #1e2531;
}

#masonry .tag-hash-red {
   background-color: #e0584e;
}

#masonry .tag-hash-blue {
   background-color: #1985a1;
}

#masonry .tag-hash-green {
   background-color: #1a936f;
}

#masonry .tag-hash-yellow {
   background-color: #d18317;
}

#masonry .tag-hash-violet {
   background-color: #843b62;
}

#masonry .tag-hash-gold,
#masonry .tag-hash-dark,
#masonry .tag-hash-red,
#masonry .tag-hash-blue,
#masonry .tag-hash-green,
#masonry .tag-hash-yellow,
#masonry .tag-hash-violet,
#masonry .tag-hash-gold a,
#masonry .tag-hash-dark a,
#masonry .tag-hash-red a,
#masonry .tag-hash-blue a,
#masonry .tag-hash-green a,
#masonry .tag-hash-yellow a,
#masonry .tag-hash-violet a,
#masonry .tag-hash-gold h2 a:hover,
#masonry .tag-hash-dark h2 a:hover,
#masonry .tag-hash-red h2 a:hover,
#masonry .tag-hash-blue h2 a:hover,
#masonry .tag-hash-green h2 a:hover,
#masonry .tag-hash-yellow h2 a:hover,
#masonry .tag-hash-violet h2 a:hover {
   color: #f8f8f8;
}

#masonry .tag-hash-gold h2 a:hover,
#masonry .tag-hash-dark h2 a:hover,
#masonry .tag-hash-red h2 a:hover,
#masonry .tag-hash-blue h2 a:hover,
#masonry .tag-hash-green h2 a:hover,
#masonry .tag-hash-yellow h2 a:hover,
#masonry .tag-hash-violet h2 a:hover {
   border-bottom-color: #f8f8f8;
}

/* Color
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.featured-top .right a,
.read-next .next-post,
.read-next .previous-post,
.read-next .next-post .link-text,
.read-next .previous-post .link-text,
.read-next .next-post h3,
.read-next .previous-post h3,
.featured-wrapper,
.subscribe .form-control:focus,
.subscribe input[type=email]:focus,
.subscribe textarea:focus,
.subscribe h3 {
   color: #eeedea;
}

.post-share a,
.post-share .copied {
   color: #cac9cd;
}

.slideout-menu a,
.slideout-menu ul li.current-menu-item a:hover,
.slideout-menu .footer-title-description,
.slideout-menu .footer-copyright,
.main-menu ul li.current-menu-item a:hover,
.main-menu a,
.post-tag a,
.kg-code-card figcaption,
.kg-image-card figcaption,
.kg-gallery-card figcaption,
.kg-embed-card figcaption {
   color: #b0b0b0;
}

.post-content blockquote {
   color: #737179;
}

.main-header h2.description,
.pagination,
.pagination .newer-posts,
.pagination .older-posts,
.main-footer,
.main-footer a,
.subscribe button:hover,
.subscribe .form-control,
.subscribe input[type=email],
.subscribe textarea {
   color: #888;
}

a:hover,
.item-content h2 a,
.post .post-wrap {
   color: #3f3c48;
}

a,
.post-tag a:hover,
.pagination .newer-posts:hover,
.pagination .older-posts:hover,
.footer-copyright a:hover,
.footer-title-description a:hover {
   color: #bd9b61;
}

/* Border
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button {
   border-color: #eee;
}

.subscribe .form-control:focus,
.subscribe input[type=email]:focus,
.subscribe textarea:focus {
   border-color: #fafafa;
}

.featured-top .right a:hover {
   border-color: #eeedea;
}

.post-tag a {
   border-color: #d8d8d8;
}

input:focus,
textarea:focus,
.featured-top .right a,
.post-tag a:hover,
.subscribe .form-control,
.subscribe input[type=email],
.subscribe textarea {
   border-color: #bd9b61;
}

.slideout-menu .footer-title-description {
   border-top-color: #b0b0b0;
}

.featured-top h2 a:hover {
   border-bottom-color: #eee;
}

.slideout-menu a,
.main-menu a {
   border-bottom-color: #383545;
}

.main-menu a:hover {
   border-bottom-color: #615f69;
}

.item-content h2 a:hover {
   border-bottom-color: #3f3c48;
}

.main-menu li.current-menu-item a,
.slideout-menu li.current-menu-item a {
   border-bottom-color: #bd9b61;
}

blockquote {
   border-left-color: #bd9b61;
}

/* Background
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.disqus {
   background-color: #f8f9fa;
}

.featured-wrapper .icons {
   background-color: #eeedea;
}

.featured-bg,
.read-next .next-post:hover,
.read-next .previous-post:hover {
   background-color: #1e2531;
}

.slideout-menu {
   background-color: #383545;
}

mark,
.toggle-button,
button,
.post .post-wrap hr,
.read-next .next-post,
.read-next .previous-post,
.featured-wrapper-bg {
   background-color: #bd9b61;
}

/* svg fill
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.pagination .older-posts svg,
.pagination .newer-posts svg {
   fill: #888;
}

.featured-wrapper .author-social svg:hover,
.pagination .older-posts:hover svg,
.pagination .newer-posts:hover svg,
.footer-social svg:hover {
   fill: #bd9b61;
}

.footer-social svg {
   fill: #eeedea;
}

.post-share .copy-link:hover svg,
.featured-wrapper .author-social svg {
   fill: #3f3c48;
}