/*
Theme Name: WordsMatter
Theme URI: http://21beats.com/theme/wordsmatter/
Author: 21Beats
Author URI: http://21beats.com
Description: WordsMatter is a simple, clear theme that designed for your writings. Responsive and text-focused design allows for a consistent, glorious experience, regardless of whether your readers arrive by phone, tablet, laptop, or desktop computer. WordsMatter focused on simplicity and cared about how your words is displayed. We know what's important, neither flashy animation nor meaningless pictures, it's your words, your thoughts, and the world in your mind, that matter the most. The fonts we selected, the layout we designed, just making your words best for reading.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: white, light, one-column, fixed-layout, responsive-layout, custom-header, custom-menu, editor-style, featured-images, sticky-post, theme-options, threaded-comments, translation-ready
Text Domain: wordsmatter
*/


/**
 * Table of Contents
 *
 * 1.0 - Reset
 *   1.1 - Basic
 *   1.2 - Typography
 *   1.3 - Elements
 *   1.4 - Form
 * 2.0 - General
 * 3.0 - Header
 *   3.1 - Bar
 *   3.2 - Hero
 * 4.0 - Main
 *   4.1 - Main Class
 *   4.2 - Page Header
 *   4.3 - Not Found
 *   4.4 - Attachment
 * 5.0 - Post
 *   5.1 - Post Header
 *   5.2 - Post Content
 *   5.3 - Post Footer
 * 6.0 - Comments
 * 7.0 - Post Navigation
 * 8.0 - Posts Pagination
 * 9.0 - Footer
 * 10.0 - Media
 *   10.1 - Image
 *   10.2 - Gallery
 *   10.3 - Playlist
 */


/* 1.0 Reset
------------------------------------------------------------ */

/* 1.1 Basic */

body, label, button, input, textarea, table, .wp-caption-text, .wp-playlist { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Open Sans', 'Helvetica Neue', sans-serif; }
body { background: #fff; color: rgba(0,0,0,.8); font-size: 18px; line-height: 1.4; -webkit-font-smoothing: antialiased; margin: 0; }
header, footer, nav, main, article, section, figure { display: block; }

@media ( max-width: 768px ) {
	body { -webkit-tap-highlight-color: transparent; }
}

/* 1.2 Typography */

h1, h2, h3, h4, h5, h6, p { margin-top: 0; margin-bottom: 0; }
blockquote { border-left: 3px solid rgba(0,0,0,.8); font-style: italic; margin: 0 0 0 -23px; padding: 0 0 0 20px; }
pre, code { font-family: Consolas, monospace; font-size: 17px; }
pre { background: #f5f5f5; margin: 0; padding: 25px; overflow: auto; }

@media ( max-width: 768px ) {
	pre, code { font-size: 15px; }
}

/* 1.3 Elements */

hr { background: rgba(0,0,0,.2); border: 0; width: 60px; height: 1px; margin: 70px auto; }
iframe, embed { width: 100%; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
ul, ol { margin: 0; padding: 0; }

table { border-collapse: collapse; border-spacing: 0; width: 100%; }
td, th, caption { border: solid #e9e9e9; border-width: 1px 0; }
td, th { font-size: 18px; padding: 16px 12px; }
th { text-align: left; }
caption { border-bottom: 0; color: rgba(0,0,0,.4); font-size: 11px; text-transform: uppercase; letter-spacing: 3px; line-height: 25px; padding: 16px 12px; }

a { color: rgba(0,0,0,.8); text-decoration: none; }
a:hover, a:active { outline: 0; }

@media ( max-width: 768px ) {
	hr { margin: 50px auto; }
	th, td { font-size: 16px; padding: 12px 10px; }
}

/* 1.4 Form */

fieldset { border: 1px solid rgba(0,0,0,.1); margin: 0; padding: 20px; }
button, input, textarea { border: 1px solid rgba(0,0,0,.1); box-sizing: border-box; color: inherit; font-size: inherit; margin: 0; padding: 5px; outline: 0; }
button, input[type=button], input[type=reset], input[type=submit] { background: none; border-radius: 3px; cursor: pointer; }

@media ( max-width: 768px ) {
	input, textarea { background-image: -webkit-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0)); }
	input[type=search], input[type=button], input[type=reset], input[type=submit] { -webkit-appearance: none; }
	input[type=file], textarea { width: 100%; }
}


/* 2.0 General
------------------------------------------------------------ */

.col, .pagination, .post-navigation .nav-links { max-width: 680px; margin-left: auto; margin-right: auto; }
.text-hidden, .says, .screen-reader-text { position: absolute; clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; overflow: hidden; }

.logo, .title, .post-title, .post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6 { font-family: 'Ek Mukta', Helvetica, Arial, Tahoma, sans-serif; }
.post-content, .comment-form-comment textarea, .comment-content p { font-family: 'PT Serif', Cambria, Georgia, Times, serif; }

@media ( max-width: 768px ) {
	.col, .pagination, .post-navigation .nav-links { padding-left: 20px; padding-right: 20px; }
}


/* 3.0 Header
------------------------------------------------------------ */

/* 3.1 Bar */

.bar { position: relative; height: 64px; z-index: 10; }

.logo { float: left; max-width: 50%; white-space: nowrap; overflow: hidden; }
.logo a { display: block; font-size: 22px; font-weight: 500; letter-spacing: -.2px; line-height: 64px; margin-left: 20px; }
.logo a, .logo a:hover { color: rgba(0,0,0,.8); }

.burger { float: right; position: relative; border: 0; width: 32px; height: 64px; margin-left: -5px; margin-right: 15px; padding: 0; }
.burger div { display: flex; flex-direction: column; align-items: center; }
.burger span { background: rgba(0,0,0,.8); width: 17px; height: 2px; margin: 2px 0; }
.burger.open span:nth-child(1) { transform: rotate(45deg); }
.burger.open span:nth-child(2) { transform: rotate(45deg); background: transparent; margin: -4px; }
.burger.open span:nth-child(3) { transform: rotate(-45deg); }
.live .burger:after { display: block; }
.burger:after { content: ''; display: none; position: absolute; bottom: -12px; right: 9px; background: #fff; box-shadow: -1px -1px 1px -1px rgba(0,0,0,.45); width: 14px; height: 14px; transform: rotateZ(45deg); z-index: 10; }

.live .nav { visibility: visible; opacity: 1; }
.nav { visibility: hidden; opacity: 0; position: absolute; top: 68px; right: 13px; background: #fff; box-shadow: 0 0 1px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.1); border-radius: 3px; width: 220px; }
.menu { display: flex; flex-direction: column; padding-top: 12px; padding-bottom: 12px; list-style: none; }
.menu a { display: block; font-size: 15px; padding: 8px 25px; overflow: hidden; }
.menu a:hover, .menu .current-menu-item a { color: rgba(0,0,0,.4); }

.search-icon { display: none; }
.search-form { float: right; position: relative; margin-top: 14px; margin-right: 18px; }
.search-field { border: 1px solid rgba(0,0,0,.1); border-radius: 30px; font-size: 14px; height: 36px; padding-left: 32px; padding-right: 16px; }
.search-submit { position: absolute; top: 0; left: 0; background: url(img/search-submit.svg) 8px 8px no-repeat !important; background-size: 22px !important; border: 0; text-indent: -9999px; width: 32px; height: 36px; padding: 0; vertical-align: middle; }

.bar .post-edit-link { float: right; border: 1px solid rgba(0,0,0,.1); border-radius: 30px; color: rgba(0,0,0,.4); font-size: 14px; line-height: 34px; margin-top: 14px; margin-right: 11px; padding: 0 15px; }
.bar .post-edit-link:hover { border-color: rgba(0,0,0,.3); color: rgba(0,0,0,.6); }

@media ( max-width: 768px ) {
	.bar { min-width: 320px; height: 56px; }
	.logo a { line-height: 52px; }
	.burger { height: 56px; margin-left: -10px; }
	.burger:after { bottom: -8px; }

	.live, .show { overflow-y: scroll; }
	.live, .live body, .live .header, .live .bar,
	.show, .show body, .show .header, .show .bar { height: 100%; }
	.live .hero, .live .main, .live .footer,
	.show .hero, .show .main, .show .footer { display: none; }
	.nav { position: absolute; top: 56px; left: 0; border-radius: 0; box-shadow: 0 0 1px rgba(0,0,0,.35); width: 100%; }
	.menu { padding-top: 20px; padding-bottom: 20px; }
	.menu a { font-size: 17px; padding-top: 12px; padding-bottom: 12px; }

	.search-icon { display: block; position: relative; float: right; background: url(img/search-icon.svg) center no-repeat; width: 32px; height: 32px; margin-top: 11px; margin-right: 15px; cursor: pointer; }
	.show .search-icon:after, .show .search-form { display: block; }
	.search-icon:after { content: ''; display: none; position: absolute; bottom: -21px; right: 10px; background: #fff; box-shadow: -1px -1px 1px -1px rgba(0,0,0,.45); width: 14px; height: 14px; transform: rotateZ(45deg); z-index: 10; }
	.search-form { display: none; position: absolute; top: 56px; left: 0; box-shadow: 0 -1px 0 rgba(0,0,0,.1); text-align: center; width: 100%; margin-top: 0; margin-right: 0; padding: 20px 0; }
	.search-field { font-size: 15px; width: 280px; height: 42px; }
	.search-submit { margin-top: 22px; margin-left: 50%; transform: translateX(-140px); }
	.bar .post-edit-link { font-size: 12px; line-height: 30px; margin-top: 12px; margin-right: 15px; padding: 0 10px; }
}

/* 3.2 Hero */

.hero { margin-bottom: 20px; }
.bg-fill { padding-bottom: 420px; }
.hero-bg { background-position: center; background-repeat: no-repeat; background-size: cover; }

.cover { display: flex; align-items: center; position: absolute; top: 0; left: 0; background-color: rgba(0,0,0,.2); width: 100%; height: 100%; }
.brand { text-align: center; padding-top: 20px; padding-bottom: 30px; }
.title a { color: #fff; font-size: 70px; line-height: 1; }
.description { color: rgba(255,255,255,.6); font-size: 17px; }

@media ( max-width: 768px ) {
	.hero { margin-bottom: 5px; }
	.bg-fill { padding-bottom: 240px; }
	.brand { padding-bottom: 25px; }
	.title a { font-size: 45px; }
	.description { font-size: 14px; margin-top: -4px; }
}


/* 4.0 Main
------------------------------------------------------------ */

/* 4.1 Main Class */

.entry .main, .page .main { min-height: calc(100vh - 175px); }
.single .main { min-height: calc(100vh - 135px); }
.entry.home:not(.paged) .main { min-height: calc(100vh - 615px); }

/* 4.2 Page Header */

.page-header { padding-top: 30px; padding-bottom: 30px; }
.page-title { font-size: 32px; font-weight: 400; margin-left: -2px; }
.search .page-title { font-size: 50px; }
.page-title span { display: block; color: rgba(0,0,0,.4); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin-left: 2px; }
.page-description { margin-top: 10px; margin-bottom: 5px; }
.page-description p { color: rgba(0,0,0,.6); font-size: 13px; line-height: 1.7; }
.page-description a { color: rgba(0,0,0,.4); }
.page-description a:hover { color: rgba(0,0,0,.6); }

.author-header { background: #fafafa; padding-top: 50px; padding-bottom: 50px; margin-bottom: 10px; }
.author-header .author-info { border-top: 0; min-height: 80px; padding-top: 0; padding-bottom: 0; }
.author-header .author-title { font-size: 22px; line-height: 33px; }
.author-header .author-desc { font-size: 15px; line-height: 21px; }

@media ( max-width: 768px ) {
	.page-header { padding-top: 20px; padding-bottom: 20px; }
	.page-title { font-size: 24px; margin-left: 0; }
	.search .page-title { font-size: 40px; }
	.page-title span { margin-left: .5px; }
	.page-description { margin-top: 5px; margin-bottom: 0; }
	.page-description p { font-size: 12px; line-height: 1.6; }

	.author-header { padding-top: 30px; padding-bottom: 30px; margin-bottom: 5px; }
	.author-header .author-info { min-height: 60px; }
	.author-header .author-avatar .avatar { width: 60px; height: 60px; }
	.author-header .author-title { font-size: 18px; line-height: 23px; }
	.author-header .author-desc { font-size: 13px; line-height: 16px; }
}

/* 4.3 Not Found */

.not-found { text-align: center; }
.not-found .page-header { padding-bottom: 5px; }
.not-found .page-title { font-weight: 700; margin-left: -10px; }
.not-found p { font-size: 11px; color: rgba(0,0,0,.4); text-transform: uppercase; letter-spacing: 1.5px; line-height: 1.8; }

.content-none .page-header { padding-top: 25vh; }
.home .content-none { padding-top: 50px; padding-bottom: 30px; }
.home .content-none a { display: inline-block; border: 1px solid rgba(0,0,0,.6); margin-top: 8px; padding: 1px 9px; }

.error-404 .page-header { padding-top: 20vh; }
.error-404 .page-title { font-size: 150px; color: rgba(0,0,0,.1); line-height: 1; }

@media ( max-width: 768px ) {
	.not-found .page-title { margin-left: -5px; }
	.not-found p { letter-spacing: 1px; line-height: 1.5; width: 80vw; margin-left: auto; margin-right: auto; }
	.home .content-none { padding-top: 60px; padding-bottom: 40px; }
	.home .content-none a { margin-top: 10px; padding: 3px 8px 2px; }
	.error-404 .page-title { font-size: 130px; }
}

/* 4.4 Attachment */

.single-attachment .main { background: rgba(0,0,0,.9); }
.single-attachment .post-title { color: rgba(255,255,255,.4); font-size: 16px; font-weight: 400; letter-spacing: .2px; text-align: center; margin-top: 0; margin-bottom: 25px; margin-left: 0; padding-top: 55px; }
.single-attachment .post-content { position: relative; padding-bottom: 60px; }
.single-attachment .figure { margin-top: 0; margin-bottom: 0; }
.single-attachment .figure img { margin: 0 auto; }

.image-navigation a { position: absolute; top: 50%; color: rgba(255,255,255,.1); font-size: 60px; font-family: sans-serif; transform: translateY(-90%) scaleY(2); transition: color .3s; }
.image-navigation a:hover { color: rgba(255,255,255,.8); }
.image-navigation .nav-previous a { left: -100px; }
.image-navigation .nav-next a { right: -100px; }
.image-navigation .nav-previous a:before { content: '<'; }
.image-navigation .nav-next a:before { content: '>';  }

@media ( max-width: 768px ) {
	.image-navigation a { color: #fff; font-size: 36px; text-shadow: 0 0 1px rgba(0,0,0,.8); transform: translateY(-120%) scaleY(2); opacity: .4; }
	.image-navigation .nav-previous a { left: 10px; }
	.image-navigation .nav-next a { right: 10px; }
}


/* 5.0 Post
------------------------------------------------------------ */

/* 5.1 Post Header */

.blog .post:first-child .post-header, .author .post:first-of-type .post-header { border-top: 0; }
.entry .post-header { border-top: 1px solid rgba(0,0,0,.1); padding-top: 18px; }
.sticky-post { display: inline-block; border: 1px solid rgba(0,0,0,.4); color: rgba(0,0,0,.6); font-size: 10px; text-transform: uppercase; letter-spacing: 2px; margin-top: 15px; margin-bottom: 5px; padding: 2px 8px 2px 10px; }
.post-thumb { margin-top: 22px; margin-bottom: 22px; }
.entry .post-title { font-size: 32px; margin-top: 15px; margin-bottom: 12px; }

.post-img { margin-left: auto; margin-right: auto; }
.post-img-full { margin-top: 0; margin-bottom: 80px; }
.post-img-out { margin-top: 50px; margin-bottom: 50px; }
.post-img-col { margin-top: 50px; margin-bottom: 65px; }
.post-title { font-size: 38px; letter-spacing: -1.1px; line-height: 1.1; word-wrap: break-word; margin-top: 40px; margin-bottom: 15px; margin-left: -2px; }

@media ( max-width: 768px ) {
	.entry .post-header { padding-top: 8px; }
	.sticky-post { letter-spacing: .8px; margin-bottom: 2px; padding: 3px 5px 2px 6px; }
	.post-thumb { margin-top: 20px; margin-bottom: 20px; }
	.entry .post-title { font-size: 28px; margin-top: 10px; margin-bottom: 10px; }

	.post-img-full { margin-bottom: 60px; }
	.post-img-out { margin-top: 40px; margin-bottom: 40px; }
	.post-img-col { margin-top: 35px; margin-bottom: 50px; border: solid transparent; border-width: 0 20px; }
	.post-title { font-size: 28px; margin-top: 30px; }
}

/* 5.2 Post Content */

.post-content { font-size: 20px; line-height: 1.7; word-wrap: break-word; }
.page .post-content { padding-bottom: 50px; }
.entry .post-content { font-size: 18px; letter-spacing: .05px; line-height: 1.6; margin-bottom: 0; }
.entry .post-content p, .entry .post-content ul, .entry .post-content ol, .entry .post-content li { margin-bottom: 0; }

.post-content h1, .post-content h2 { letter-spacing: -1.1px; line-height: 1.1; }
.post-content h3, .post-content h4 { letter-spacing: -1px; line-height: 1.2; }
.post-content h5, .post-content h6 { letter-spacing: -.3px; line-height: 1.3; }
.post-content h1, .post-content h2 { margin-bottom: 15px; }
.post-content h3, .post-content h4, .post-content h5, .post-content h6 { color: rgba(0,0,0,.4); font-weight: 400; margin-bottom: 10px; }
.post-content h1 { font-size: 38px; margin-top: 80px; }
.post-content h2 { font-size: 34px; margin-top: 50px; }
.post-content h3 { font-size: 30px; margin-top: 35px; }
.post-content h4 { font-size: 26px; }
.post-content h5 { font-size: 20px; }
.post-content h6 { font-size: 18px; }

.post-content p, .post-content ul, .post-content ol { margin-bottom: 30px; }
.post-content ul, .post-content ol { padding-left: 22px; }
.post-content li { margin-bottom: 15px; }
.post-content li > ul , .post-content li > ol { margin-top: 15px; margin-bottom: 0; }
.post-content pre, .post-content table, .figure { margin-top: 45px; margin-bottom: 45px; }

.post-content.col p a { display: inline-block; background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,.6) 50%) 0 25px repeat-x; background-size: 2px 2px; }

.frame { margin-left: auto; margin-right: auto; }
.alignleft, .alignright { width: 75%; margin-top: 10px; margin-bottom: 20px; }
.alignleft { float: left; margin-left: -160px; margin-right: 30px; }
.alignright { float: right; margin-right: -160px; margin-left: 30px; }

.post-password-form { position: relative; }
.post-password-form input[type=password] { width: 100%; height: 46px; padding: 10px; }
.post-password-form input[type=submit] { position: absolute; right: 0; bottom: 0; background: rgba(0,0,0,.6); border: 0; border-left: 15px solid #fff; border-radius: 0; box-shadow: -1px 0 0 rgba(0,0,0,.1); color: #fff; font-size: 15px; text-transform: uppercase; letter-spacing: 2px; line-height: 26px; padding: 10px 20px; }
.post-password-form input[type=submit]:hover { background: rgba(0,0,0,.65); }
.post-password-form input[type=submit]:active { background: rgba(0,0,0,.7); }

.page-links { text-align: center; margin-bottom: 30px; }
.page-links span { display: inline-block; color: rgba(0,0,0,.2); font-weight: 700; height: 32px; width: 32px; }
.page-links a { display: inline-block; }
.page-links a span { color: rgba(0,0,0,.5); }
.page-links a span:hover { color: rgba(0,0,0,.8); }

@media ( max-width: 1060px ) {
	.alignleft, .alignright { width: 60%; }
	.alignleft { margin-left: 0; }
	.alignright { margin-right: 0; }
}

@media ( max-width: 768px ) {
	.post-content { font-size: 18px; line-height: 1.6; }
	.entry .post-content { letter-spacing: 0; line-height: 1.5; }
	.post-content h1 { font-size: 28px; margin-top: 60px; }
	.post-content h2 { font-size: 26px; margin-top: 40px; }
	.post-content h3 { font-size: 22px; margin-top: 30px; }
	.post-content h4 { font-size: 20px; }
	.post-content h5 { font-size: 18px; }
	.post-content h6 { font-size: 16px; }

	.post-content p, .post-content ul, .post-content ol { margin-bottom: 20px; }
	.post-content li { margin-bottom: 10px; }
	.post-content li > ul , .post-content li > ol { margin-top: 10px; }
	.post-content pre, .post-content table, .figure { margin-top: 35px; margin-bottom: 35px; }

	.post-content.col p a { background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,.6) 50%) 0 22px repeat-x; background-size: 2px 2px; }
	.alignleft, .alignright { float: none; width: auto; margin: 35px auto; }
	.post-password-form input[type=password] { border-radius: 0; }

	.page-links { margin-top: 35px; margin-bottom: 35px; }
	.page-links span { height: 40px; width: 40px; }
	.page-links a span, .page-links a span:hover { color: rgba(0,0,0,.6); }
}

/* 5.3 Post Footer */

.post-footer { font-size: 14px; }
.entry .post-footer { height: 20px; margin-top: 15px; margin-bottom: 33px; }
.entry .post-footer a { color: rgba(0,0,0,.4); }
.entry .post-footer a:hover { color: rgba(0,0,0,.6); }
.entry .post-date, .author-link { float: left; }
.entry .post-date { margin-top: 0; margin-bottom: 0; }
.entry .author-link a { font-weight: 700; margin-right: 10px; }
.entry .post-edit-link, .comments-link { float: right; }
.entry .post-edit-link { margin-left: 10px; }

.post-categories:after, .post-tags:after { content: ''; display: table; clear: both; }
.post-categories a, .post-tags a { float: left; color: rgba(0,0,0,.6); line-height: 32px; margin-bottom: 10px; margin-right: 10px; }
.post-categories a:hover, .post-tags a:hover { color: rgba(0,0,0,.9); }
.post-categories { margin-bottom: 15px; }
.post-categories li { list-style: none; }
.post-categories a { border-bottom: 1px solid rgba(0,0,0,.4); }
.post-categories a:hover { border-color: rgba(0,0,0,.6); }
.post-tags a { background: #fafafa; border: 1px solid rgba(0,0,0,.05); border-radius: 3px; padding: 0 15px; }
.post-tags a:hover { border-color: rgba(0,0,0,.15); color: rgba(0,0,0,.8); }
.post-date { color: rgba(0,0,0,.4); letter-spacing: -.2px; margin-top: 10px; margin-bottom: 60px; }

.author-info { display: flex; align-items: center; border-top: 1px solid rgba(0,0,0,.05); padding-top: 25px; padding-bottom: 50px; }
.author-avatar { margin-right: 15px; }
.author-avatar .avatar { border-radius: 100%; }
.author-content { flex: 1; }
.author-title { font-size: 17px; margin-bottom: 5px; }
.author-title a:hover { color: rgba(0,0,0,.5); }
.author-desc { color: rgba(0,0,0,.6); font-size: 14px; line-height: 18px; }

@media ( max-width: 768px ) {
	.post-footer { font-size: 12px; }
	.entry .post-footer { margin-top: 10px; margin-bottom: 18px; }
	.entry .author-link a { margin-right: 6px; }
	.post-categories a, .post-tags a { font-size: 13px; }
	.post-date { margin-bottom: 40px; }
	.author-info { padding-bottom: 40px; }
	.author-desc { font-size: 13px; }
}


/* 6.0 Comments
------------------------------------------------------------ */

.comments-area { padding-top: 20px; padding-bottom: 40px; }
.comments-title { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; padding-bottom: 8px; }

.comment-list { list-style: none; }
.comment-body { position: relative; border-top: 1px solid rgba(0,0,0,.1); padding-top: 35px; padding-bottom: 35px; }
.comment-list .children { list-style: none; }
.comment-list .children > li { padding-left: 30px; }

.bypostauthor .comment-author:after { content: '\2615'; color: rgba(0,0,0,.4); vertical-align: text-top; }
.comment-author { font-size: 14px; line-height: 18px; }
.comment-author .avatar { float: left; border-radius: 100%; width: 36px; height: 36px; margin-right: 10px; }
.comment-metadata { line-height: 18px; height: 18px; }
.comment-metadata a { color: rgba(0,0,0,.4); font-size: 12px; }
.comment-metadata a:hover { color: rgba(0,0,0,.6); }
.comment-edit-link { margin-left: 5px; }

.comment-content { line-height: 1.6; margin-top: 20px; }
.comment-reply-link { position: absolute; top: 35px; right: 0; border: 1px solid rgba(0,0,0,.1); border-radius: 3px; color: rgba(0,0,0,.4); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; padding: 4px 7px; }
.comment-reply-link:hover { border-color: rgba(0,0,0,.3); color: rgba(0,0,0,.6); }

.comment-navigation { border-top: 1px solid rgba(0,0,0,.1); padding-top: 35px; padding-bottom: 35px; }
.comment-navigation a { display: block; border: 1px solid rgba(0,0,0,.1); border-radius: 3px; color: rgba(0,0,0,.4); font-size: 14px; line-height: 34px; padding: 0 15px; }
.comment-navigation a:hover { border-color: rgba(0,0,0,.3); color: rgba(0,0,0,.6); }
.comment-navigation .nav-previous { float: left; }
.comment-navigation .nav-next { float: right; }
.comment-navigation .nav-previous a:before { content: '\2190'; margin-right: 2px; }
.comment-navigation .nav-next a:after { content: '\2192'; margin-left: 2px; }
.comment-navigation:after { content: ''; display: table; clear: both; }

.comment-respond { position: relative; margin-top: -5px; padding-bottom: 40px; }
.comment-reply-title { float: right; font-size: 0; }
.comment-reply-title small a { color: rgba(0,0,0,.6); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.comment-reply-title small a:hover { color: rgba(0,0,0,.9); }

.comment-notes { display: none; }
.logged-in-as { color: rgba(0,0,0,.3); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; }
.logged-in-as a { color: rgba(0,0,0,.3); }
.logged-in-as a:hover { color: rgba(0,0,0,.6); }

.comment-form textarea, .comment-form input { border-color: rgba(0,0,0,.08); width: 100% !important; font-size: 17px; padding: 10px 8px; }
.comment-form textarea { letter-spacing: -.04px; line-height: 1.6; }
.comment-form label { display: block; color: rgba(0,0,0,0.6); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin-top: 15px; margin-bottom: 5px; }
.logged-in .comment-form-comment label { display: none; }
.comment-form-comment label { margin-top: 0; }
.comment-form label .required { color: #f50; }
.comment-form-url { margin-bottom: 5px; }
.form-submit input[type=submit] { background: rgba(0,0,0,.6); border-radius: 3px; color: #fff; font-size: 15px; text-transform: uppercase; letter-spacing: 2px; line-height: inherit; margin-top: 20px; padding-top: 11px; padding-bottom: 11px; }
.logged-in .form-submit input[type=submit] { margin-top: 15px; }
.form-submit input[type=submit]:hover { background: rgba(0,0,0,.65); }
.form-submit input[type=submit]:active { background: rgba(0,0,0,.7); }

@media ( max-width: 768px ) {
	.comments-area { padding-bottom: 25px; }
	.comment-body { padding-top: 25px; padding-bottom: 25px; }
	.comment-list .children > li { padding-left: 15px; }

	.comment-author { font-size: 13px; line-height: 16px; }
	.comment-author .avatar { width: 32px; height: 32px; }
	.comment-metadata { line-height: 16px; height: 16px; }
	.comment-edit-link { margin-left: 2px; }

	.comment-content { font-size: 16px; line-height: 1.6; margin-top: 15px; }
	.comment-reply-link { top: 25px; }
	.comment-navigation a { font-size: 13px; padding: 0 10px; }

	.logged-in-as { letter-spacing: .5px; }
	.comment-form textarea, .comment-form input { border-radius: 0; font-size: 15px; }
	.form-submit input[type=submit] { background: rgba(0,0,0,.65); font-size: 12px; padding-top: 12px; padding-bottom: 12px; }
	.form-submit input[type=submit]:active { background: rgba(0,0,0,.75); }
}


/* 7.0 Post Navigation
------------------------------------------------------------ */

.post-navigation { border-top: 1px solid rgba(0,0,0,.06); padding-top: 40px; padding-bottom: 40px; }
.post-navigation .nav-previous, .post-navigation .nav-next { margin-top: 36px; margin-bottom: 36px; }
.post-navigation .meta-nav { display: block; color: rgba(0,0,0,.6); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.post-navigation .post-title { display: block; font-size: 30px; font-weight: 700; margin-top: 10px; }

@media ( max-width: 768px ) {
	.post-navigation { padding-top: 25px; padding-bottom: 25px; }
	.post-navigation .post-title { font-size: 28px; }
}


/* 8.0 Posts Pagination
------------------------------------------------------------ */

.pagination { border-top: 1px solid rgba(0,0,0,.06); text-align: center; padding-top: 40px; }
.pagination .page-numbers { display: inline-block; line-height: 40px; width: 40px; height: 40px; margin-left: 5px; margin-right: 5px; }
.pagination .page-numbers:not(.dots):not(.current):hover { color: rgba(0,0,0,.4); }
.pagination .current { background: #fafafa; border: 1px solid rgba(0,0,0,.05); border-radius: 100%; color: rgba(0,0,0,.3); }
.pagination .dots { line-height: 32px; vertical-align: top; }
.pagination .prev, .pagination .next { vertical-align: top; overflow: hidden; }
.pagination .prev:before, .pagination .next:before { display: inline-block; font-size: 24px; line-height: 38px; height: 40px; width: 40px; }
.pagination .prev:before { content: '\2190'; }
.pagination .next:before { content: '\2192'; }

@media ( max-width: 768px ) {
	.pagination { padding-top: 30px; }
	.pagination .page-numbers { display: none; margin-left: 8px; margin-right: 8px; }
	.pagination .current, .pagination .prev, .pagination .next { display: inline-block; }
	.pagination .current { color: rgba(0,0,0,.2); }
	.pagination .prev:before, .pagination .next:before { line-height: 44px; }
}


/* 9.0 Footer
------------------------------------------------------------ */

.entry .footer { margin-top: 40px; }
.footer { background: #fafafa; border-top: 1px solid rgba(0,0,0,.03); padding-top: 25px; padding-bottom: 25px; }
.footer .col { line-height: 1; height: 20px; }
.footer a { color: rgba(0,0,0,.3); font-size: 12px; margin-right: 5px; }
.footer a:last-child { margin-right: 0; }
.footer a:hover { color: rgba(0,0,0,.5); text-decoration: underline; }

@media ( max-width: 768px ) {
	.entry .footer { margin-top: 30px; }
	.footer { padding-top: 18px; padding-bottom: 20px; }
	.footer a { letter-spacing: -.2px; margin-right: 2px; }
}


/* 10.0 Media
------------------------------------------------------------ */

/* 10.1 Image */

.hero, .frame, .post-thumb, .post-img { position: relative; }
.fill { background: rgba(0,0,0,.05); }
.hero, .small-image { overflow: hidden; }
.hero-bg, .image img, .image, .small-image, .zoom-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.hero-bg, .image img { visibility: hidden; opacity: 0; }
.hero .blurry, .image .blurry { -webkit-filter: blur(20px); transform: scale(1.1, 1.1); }
.hero .loaded, .image .loaded { visibility: visible; opacity: 1; transition: visibility 0s linear 0s, opacity .4s 0s; }
.hero .blurry-hidden, .image .blurry-hidden { visibility: hidden; opacity: 0; transition: visibility 0s linear .5s, opacity .1s .4s; }

.zoom-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #fff; opacity: 0; transition: opacity .3s; z-index: 20; }
.zoom-overlay-open .zoom-overlay { opacity: 1; }
.zoom-image, .zoom { transition: .3s !important; z-index: 30; }
img[data-action=zoom] { cursor: zoom-in; }
.zoom { cursor: zoom-out; }

.wp-caption-text { color: rgba(0,0,0,.6); font-size: 14px; line-height: 1.4; text-align: center; padding-top: 10px; }

/* 10.2 Gallery */

.gallery { border: 1px solid rgba(0,0,0,.1); margin-top: 45px; margin-bottom: 45px; padding: 15px; }
.gallery-item { display: inline-block; box-sizing: border-box; width: 100%; padding: 1px; vertical-align: middle; }
.gallery-columns-1 .gallery-item { max-width: 100%; }
.gallery-columns-2 .gallery-item { max-width: 50%; }
.gallery-columns-3 .gallery-item { max-width: 33.33333%; }
.gallery-columns-4 .gallery-item { max-width: 25%; }
.gallery-columns-5 .gallery-item { max-width: 20%; }
.gallery-columns-6 .gallery-item { max-width: 16.66666%; }
.gallery-columns-7 .gallery-item { max-width: 14.28571%; }
.gallery-columns-8 .gallery-item { max-width: 12.5%; }
.gallery-columns-9 .gallery-item { max-width: 11.11111%; }
.gallery-item img { margin: 0 auto; }
.gallery-caption { padding-bottom: 10px; }
.gallery-columns-6 .gallery-caption, .gallery-columns-7 .gallery-caption, .gallery-columns-8 .gallery-caption, .gallery-columns-9 .gallery-caption { display: none; }

@media ( max-width: 768px ) {
	.gallery { margin-top: 35px; margin-bottom: 35px; padding: 10px; }
}

/* 10.3 Playlist */

.wp-playlist, .wp-audio-shortcode, .wp-video { margin-top: 45px !important; margin-bottom: 45px !important; }
.wp-playlist { border: 1px solid rgba(0,0,0,.1) !important; padding: 25px !important; }
.wp-playlist-item-title { font-size: 15px !important; }
.wp-playlist-item-artist { font-size: 13px !important; }
.wp-playlist-current-item { margin-top: 5px; }
.wp-playlist-current-item .wp-playlist-item-title { font-weight: 700; }
.wp-playlist-item-album { color: rgba(0,0,0,.4); font-size: 12px !important; font-style: normal !important; }
.wp-playlist-item-artist { color: rgba(0,0,0,.6); text-transform: none !important; }
.wp-playlist-tracks { margin-top: 20px !important; }
.wp-playlist-item { border-bottom: 0 !important; padding: 10px 0 !important; }
.wp-playlist-item:last-child { padding-bottom: 2px !important; }
.wp-playlist-item-length { top: 10px !important; }

@media ( max-width: 768px ) {
	.wp-playlist, .wp-audio-shortcode, .wp-video { margin-top: 35px !important; margin-bottom: 35px !important; }
	.wp-playlist { padding: 20px !important; }
}