/*
	Theme Name: WP-Mix
	Description: Custom theme for WP-Mix.com
	Theme URI: https://perishablepress.com/shapespace/
	Author: Jeff Starr
	Author URI: https://monzillamedia.com/
	Version: 1.0
	License: Copyright 2017 Monzilla Media
*/

@font-face {
	font-family: Changa; 
	font-style: normal; font-weight: 400; font-display: swap;
	src: local('Changa One'), local('ChangaOne'), 
		 url('fonts/changa.woff2') format('woff2'), 
		 url('fonts/changa.woff')  format('woff');
		 }
@font-face {
	font-family: Merriweather;
	font-style: normal; font-weight: 400; font-display: swap;
	src: local('Merriweather Sans'), local('MerriweatherSans-Regular'), 
		 url('fonts/merriweather.woff2') format('woff2'),
		 url('fonts/merriweather.woff')  format('woff');
		 }
@font-face {
	font-family: Merriweather;
	font-style: normal; font-weight: 700; font-display: swap;
	src: local('Merriweather Sans Bold'), local('MerriweatherSans-Bold'), 
		 url('fonts/merriweather-bold.woff2') format('woff2'),
		 url('fonts/merriweather-bold.woff')  format('woff');
		 }
@font-face {
	font-family: Merriweather;
	font-style: italic; font-weight: 400; font-display: swap;
	src: local('Merriweather Sans Italic'), local('MerriweatherSans-Italic'), 
		 url('fonts/merriweather-italic.woff2') format('woff2'),
		 url('fonts/merriweather-italic.woff')  format('woff');
		 }

html { margin: 0; padding: 0; overflow-y: scroll; }
body { margin: 0; padding: 0; line-height: 1.8; color: #7f716d; color: rgba(127,113,109,0.9); font-family: Merriweather, sans-serif; }

.box  { box-sizing: border-box; width: 100%; overflow: hidden; }
.wrap { box-sizing: border-box; width: 100%; overflow: hidden; max-width: 960px; margin: 0 auto; padding: 20px 10px; }

.cols { width: 100%; overflow: hidden; }
.cols-3 { width: 33.333%; box-sizing: border-box; float: left; padding: 20px; }

.star { font-size: 80%; color: rgba(196,196,187,0.7); }

@media (max-width: 980px) {
	
	.cols-3 { width: 100%; float: none; }
	.cols ul { display: inline-block; }
	
}
@media (max-width: 980px) and (min-width: 600px) {
	
	.wrap { padding: 20px 10%; }
		
}

/* general */

a { color: #7a4a50; color: rgba(107,54,62,0.9); border: 0; text-decoration: none; transition: all 0.1s ease; }
a:hover { color: #6b363e; color: rgba(107,54,62,1.0); }

img { display: inline-block; height: auto; max-width: 100%; vertical-align: middle; border: 0; }
.post-img-wrap { margin: 30px 0; }

h1, h2, h3, h4, h5 { font-family: Changa, sans-serif; -moz-osx-font-smoothing: grayscale; }

li > ul, li > ol { margin-bottom: 0; }

strong { color: rgba(39,34,45,0.7); }

input { font-family: Merriweather, sans-serif; }

blockquote { position: relative; margin: 40px 40px 40px 60px; color: rgba(39,34,45,0.7); font: bold 24px/36px Georgia, serif; }
blockquote:before { display: block; content: '\201C'; position: absolute; left: -60px; top: -5px; color: rgba(39,34,45,0.3); font: 120px/120px Impact, sans-serif; }

abbr[title], acronym[title], time { 
	cursor: help !important; border-bottom: 1px dotted #7f716d !important; border-color: rgba(127,113,109,0.3) !important; text-decoration: none !important; 
	}

table { 
	box-sizing: border-box; width: 100%; border-collapse: collapse; margin: 30px 0 40px 0; 
	vertical-align: middle; border-radius: 1px; box-shadow: 0 20px 25px -20px rgba(0,0,0,0.7);
	}
table th, table td { padding: 15px; line-height: 1.4; font-size: 13px; text-align: left; border: 1px solid #ededea; }
table th { background-color: #ededea; text-shadow: 1px 1px 1px #fff; }

/* code */

code, .code { font-size: 14px; vertical-align: baseline; font-family: Monaco, MonacoRegular, monospace; }
pre {
	position: relative; overflow: auto; margin: 30px 0 40px 0; 
	color: #c5c8c6; background-color: #1d1f21; border-radius: 2px; box-shadow: 0 20px 25px -20px rgba(0,0,0,0.7);
	}
pre code, .hljs, .nohighlight { 
	display: block; padding: 20px; line-height: 1.6; overflow-x: auto; white-space: pre;
	color: #c5c8c6; background-color: #1d1f21; 
	}
.code { padding: 3px; color: #777; background-color: #F2F1F0; /* color: #fff; background-color: rgba(127,113,109,0.7); */ border-radius: 1px; vertical-align: middle; }
table .code { padding: 0; line-height: 1.4; font-size: 13px; color: rgba(39,34,45,0.7); background-color: transparent; border-radius: 0; }

.code-title {
	position: absolute; top: 0; right: 0; padding: 5px 10px; cursor: help; font: 12px/16px Monaco, MonacoRegular, monospace;
	color: #eee; background-color: #3c3843; background-color: rgba(255,255,255,0.1);
	}

a code, a .code { color: #7a4a50; color: rgba(107,54,62,0.9); background-color: transparent; text-shadow: 1px 1px 1px rgba(255,255,255,0.5); }
a code:hover, a .code:hover { color: #fff; text-shadow: none; }

/* header */

.header {
	height: 400px; line-height: 14px; font-size: 14px; text-align: center; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,0.3);
	background-color: #333; background-image: url(img/bg-header.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover;
	/* background-attachment: fixed; */
	}
.header a { color: #fff; border: 0; text-decoration: none; }
.header h1, .header h1 a { box-sizing: border-box; display: inline-block; border-radius: 1px; cursor: pointer; }
.header h1:hover, .header h1 a:hover { background-color: rgba(255,255,255,0.1); }
.header h1 { margin: 40px 0 20px 0; padding: 5px; text-shadow: 0 2px 3px rgba(0,0,0,0.4); transition: all 0.3s ease; -webkit-font-smoothing: antialiased; }
.header h1 a { height: 60px; padding: 0 15px; line-height: 60px; font-size: 48px; }
.header .wrap div { position: relative; left: 15px; display: inline-block; }
.header img { position: absolute; z-index: 1; left: -35px; top: 53px; width: 50px; height: 50px; }
.header p { margin: 0; }
.header form, .header input { box-sizing: border-box; display: inline-block; border: 0; border-radius: 1px; outline: none; background-color: rgba(255,255,255,0.1); }
.header form { width: 310px; margin: 20px 0 15px 0; padding: 5px 0; }
.header input { width: 300px; margin: 0; padding: 8px 10px; font-size: 14px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,0.3); }
.header input:-webkit-autofill { text-shadow: none; }
.header ul { margin: 0; padding: 0; }
.header li, .header li a { box-sizing: border-box; display: inline-block; border-radius: 1px; cursor: pointer; }
.header li:hover, .header li a:hover { background-color: rgba(255,255,255,0.1); }
.header li { margin: 2px 0; padding: 4px; transition: all 0.3s ease; }
.header li a { height: 24px; padding: 0 5px; line-height: 24px; }
.header ::-webkit-input-placeholder { color: rgba(255,255,255,0.7); }
.header ::-moz-placeholder          { color: rgba(255,255,255,0.7); }
.header :-ms-input-placeholder      { color: rgba(255,255,255,0.7); }
.header :-moz-placeholder           { color: rgba(255,255,255,0.7); }
.header ::placeholder               { color: rgba(255,255,255,0.7); }

/* content */

.content { position: relative; z-index: 1; box-shadow: 0 0 16px 0 rgba(0,0,0,0.9); }
.content-main { box-sizing: border-box; width: 620px; padding: 10px; float: left; margin: 0 0 20px 0; background-color: rgba(255,255,255,0.9); border-radius: 1px; }
.content-side { box-sizing: border-box; width: 310px; padding: 10px 10px 10px 20px; float: right; margin: 0; }
.content-post { position: relative; width: auto; overflow: hidden; word-wrap: break-word; }
.content-post:last-child { margin-bottom: 20px; }

.archive .content-post h2 { font-size: 26px; line-height: 1.4; }

@media (max-width: 980px) {
	
	.content-main { width: 100%; }
	.content-side { width: 100%; }
	
}

/* single */

.singular .content-post h2, 
.singular .content-post h3, 
.singular .content-post h4 { line-height: 1.4; color: #27222d; color: rgba(39,34,45,0.9); }
.singular .content-post h2 { font-size: 36px; margin-top: 15px; }
.singular .content-post h3 { font-size: 28px; }
.singular .content-post h4 { font-size: 20px; }

.post-meta { position: relative; width: 100%; overflow: hidden; }
.post-meta-avatar { float: left; width: 80px; }
.post-meta .avatar { border-radius: 50%; }
.post-meta-infos { float: left; width: -moz-calc(100% - 80px); width: -webkit-calc(100% - 80px); width: calc(100% - 80px); }
.post-meta-infos ul { margin-left: 0; padding-left: 0; list-style: none; font: 13px/1.3 'Helvetica Neue', Helvetica, Arial, sans-serif; text-transform: uppercase; }
.post-meta-infos li { margin: 5px 0; }

.the-content ul, .the-content ol { margin: 25px 0 35px 0; }
.the-content li { margin: 5px 0; }
.the-content a { padding: 3px; border-radius: 1px; background-color: rgba(107,54,62,0.1); text-shadow: 1px 1px 1px rgba(255,255,255,0.5); }
.the-content a:hover { color: #fff; background-color: rgba(107,54,62,0.9); text-shadow: none; }

.update {
	margin: 30px 0 40px 0; padding: 20px; font-size: 14px; text-shadow: none; border-radius: 1px;
	color: #fff; background-color: #5A5A56; box-shadow: 0 20px 25px -20px rgba(0,0,0,0.7);
	background-image: linear-gradient(to right, #5A5A56, #B3B3B1);
	}
.update * { text-shadow: none; }
.update strong { color: #fff; }
.the-content .update a { color: #fff; text-shadow: none; background-color: rgba(255,255,255,0.1); }
.the-content .update a:hover { background-color: rgba(255,255,255,0.2); }
.update code { font-size: 14px; color: #F0F0F0; background-color: rgba(255,255,255,0.05); }

.author-photo { float: left; width: 75px; height: 75px; margin: 5px 25px 25px 0; border-radius: 50%; }

.learn-more a { display: inline-block; vertical-align: middle; border: 0; margin: 0 10px 0 0; }
.learn-more a img { display: block; }

/* archive */

.archive-view { margin: 40px 0 0 0; padding: 0 0 40px 80px; background-image: url(img/cup.png); background-repeat: no-repeat; background-size: 50px 50px; }
.archive-view h2, .archive-view p, .archive-page { 
	margin: 5px 0; text-transform: uppercase; word-break: break-all; font: 13px/1.3 'Helvetica Neue', Helvetica, Arial, sans-serif;
	}
.archive-view h2 span { 
	padding: 3px 5px; text-transform: initial; color: rgba(39,34,45,0.7); background-color: rgba(255,204,0,0.1); border-radius: 1px;
	font: 13px/13px Monaco, MonacoRegular, monospace; 
	}
.searchform { margin: 30px 0; vertical-align: middle; }
.searchform label { display: inline-block; margin-right: 5px; }
.searchform input { display: inline-block; width: 300px; padding: 8px 10px; font-size: 14px; }

/* side */

.widget { margin: 0 0 40px 0; }
.widget h3 { font-size: 24px; line-height: 1.4; color: #27222d; color: rgba(39,34,45,0.7); }
.widget ul { font-size: 14px; }
.subs { padding: 0 0 20px 0; }
.popular a { padding: 3px; background-color: rgba(255,204,0,0.1); }

/* news */

.news a, .news a img { display: block; width: 125px; height: 125px; margin: 0; padding: 0; border: 0; vertical-align: top; }
.news a { display: inline-block; margin: 0 12px 12px 0; opacity: 0.9; box-shadow: 0 1px 7px 0 rgba(0,0,0,0.7); }
.news a:nth-child(5), .news a:nth-child(6) { margin-bottom: 0; }
.news a:nth-child(even) { margin-right: 0; }
.news a:hover { opacity: 1.0; }

@media (max-width: 980px) {
	
	.news a:nth-child(5), .news a:nth-child(6), .news a:nth-child(even) { margin: 0 12px 12px 0; }
	
}

/* nav */

.nav-post { margin: 40px 0; }
.nav-prev, .nav-next, .nav-paged { display: inline-block; margin: 0 0 4px 0; }
.nav-prev a, .nav-next a, .nav-paged a, .nav-paged span { 
	display: inline-block; padding: 10px 15px; color: #fff; border-radius: 1px; 
	background-color: #7a4a50; background-color: rgba(107,54,62,0.9);
	}
.nav-post a:hover { background-color: #6b363e; background-color: rgba(107,54,62,1.0); }
.nav-paged .current { background-color: transparent; color: #7a4a50; color: rgba(107,54,62,0.9); font-weight: 700; }

.nav-link { 
	position: fixed; z-index: 999; top: 50%; left: 10px; width: 40px; height: 40px; margin: -20px 0 0 0;
	border-radius: 40px; font: 40px/35px Changa, sans-serif; text-align: center; cursor: pointer;
	color: #fff; color: rgba(255,255,255,0.8); background-color: #ccc; background-color: rgba(107,54,62,0.2);
	}
.nav-link:hover { color: #fff; background-color: rgba(107,54,62,0.3); }
.nav-link-next { left: auto; right: 10px; }

/* tooltips */

.tooltip { 
	display: none; position: absolute; z-index: 1000; max-width: 400px; padding: 10px; 
	color: #fff; background-color: #000; background-color: rgba(0,0,0,0.7); border-radius: 1px; 
	}

@media (max-width: 500px) {
	
	.tooltip[class] { display: none !important; }
	
}

/* top */

.top { 
	position: fixed; z-index: 999; bottom: 10px; right: 10px; width: 40px; height: 40px; 
	font-size: 16px; font-weight: 700; line-height: 40px; text-align: center; text-transform: uppercase;
	border: none; border-radius: 40px; color: rgba(0,0,0,0.3); background-color: rgba(255,255,255,0.3); cursor: pointer;
	}
.top:hover { border: none; color: rgba(0,0,0,0.7); background-color: rgba(255,255,255,0.7); }

/* twitter */

.tweet {
	position: fixed; z-index: 999; bottom: 10px; left: 10px; width: 36px; height: 36px; opacity: 0.7; cursor: pointer; text-indent: -9999em; 
	background-image: url(img/twitter.png); background-repeat: no-repeat; background-position: center center; background-size: 36px 36px;
}
.tweet:hover { opacity: 1.0; }

/* footer */

.footer { 
	color: #ededea; vertical-align: middle;
	background-color: #333; background-image: url(img/bg-footer.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover;
	}
.footer a { color: #ededea; border-bottom: 1px solid #ededea; border-color: rgba(196,196,187,0.3); }
.footer a:hover { color: #fff; border-color: rgba(196,196,187,0.7); }

.footer .cols-3:first-child { padding-right: 40px; }
.footer .cols h5 { margin: 20px 0; font-size: 24px; -webkit-font-smoothing: antialiased; }
.footer .cols p { margin-bottom: 25px; }

.footer .social { display: inline-block; overflow: hidden; margin: 0 5px 0 0; vertical-align: top; }
.footer .social:last-child { width: 70px; margin: 0; }
.footer .social .fb-like span[style] { vertical-align: top !important; }
.fb-page { border-radius: 1px; box-shadow: 0 2px 12px 0 rgba(0,0,0,0.7); }

.footer .credits p { margin: 40px 0; font-size: 12px; text-align: center; }

/* mailchimp */

.subs label { display: none; }
.subs .mc-field-group input {
	box-sizing: border-box; display: inline-block; width: 262px; margin: 0; padding: 8px 10px; font-size: 14px; outline: none;
	color: #7f716d; color: rgba(127,113,109,0.9); background-color: #ededea; background-color: rgba(196,196,187,0.3); border: 0; border-radius: 1px; 
	}
.subs .mc-field-group-name { margin: 5px 0; }
.subs .button {
	box-sizing: border-box; display: inline-block; width: 100px; height: 40px; margin: 0; padding: 0; line-height: 30px; font-size: 14px; outline: none; cursor: pointer;
	color: #fff; background-color: #7a4a50; background-color: rgba(107,54,62,0.9); border: 0; border-radius: 1px;
	}
.subs .button:hover { background-color: #6b363e; background-color: rgba(107,54,62,1.0); }

.subs .response { margin: 10px 0; line-height: 16px; font-size: 12px; }
.subs .response.response-success { color: #548e54; }
.subs .response.response-error   { color: #993333; }

.subs #mc_embed_signup div.mce_inline_error {
	box-sizing: border-box; width: 262px !important; margin: 0 !important; padding: 10px !important; line-height: 12px; font-size: 12px;
	background-color: #7a4a50 !important; background-color: rgba(107,54,62,0.9) !important; border: 0 !important; border-radius: 1px;
	}

/* feed stats */

.feed p { margin-left: 20px; font-size: 14px; }
.sfs-subscriber-count, .sfs-count, .sfs-count span, .sfs-stats { -webkit-box-sizing: initial; -moz-box-sizing: initial; box-sizing: initial; }
.sfs-subscriber-count { width: 88px; overflow: hidden; height: 26px; margin-left: 20px; color: #424242; font: 9px Verdana, Geneva, sans-serif; letter-spacing: 1px; }
.sfs-count { width: 86px; height: 17px; line-height: 17px; margin: 0 auto; background: #ccc; border: 1px solid #909090; border-top-color: #fff; border-left-color: #fff; }
.sfs-count span { display: inline-block; height: 11px; line-height: 12px; margin: 2px 1px 2px 2px; padding: 0 2px 0 3px; background: #e4e4e4; border: 1px solid #a2a2a2; border-bottom-color: #fff; border-right-color: #fff; }
.sfs-stats { font-size: 6px; line-height: 6px; margin: 1px 0 0 1px; word-spacing: 2px; text-align: center; text-transform: uppercase; }

/* select text */

*::-webkit-selection { background-color: #7a4a50; background-color: rgba(107,54,62,0.9); color: #fff; text-shadow: none; }
*::-moz-selection    { background-color: #7a4a50; background-color: rgba(107,54,62,0.9); color: #fff; text-shadow: none; }
*::selection         { background-color: #7a4a50; background-color: rgba(107,54,62,0.9); color: #fff; text-shadow: none; }

/* ALL YOUR CODE ARE BELONG TO POETRY */