body, html {
	margin: 0;
	padding: 0
}
body.ab_body {
	font-family: ff-yoga-web-pro,Georgia,serif;
	background: #fff;
	color: #000
}
.clear, .clearfix, .ab_clear, .ab_clearfix {
	clear: both
}
.ab_article {
	max-width: 768px;
	margin: 0 auto;
	padding: 2em
}

.ab_article p, .ab_article div:not(.ab_post_meta) {
	font-size: 15px;
	line-height: 1.5em;
}

.thin-border {
	border-bottom: thin solid #c9c9c9;
	margin-bottom: 0.3em;
}

.ab_article .ab_post_meta {
	font-size: 90%;
	color: #999;
}

.ab_article .ab_post_author {
	font-weight: bold;
	margin-bottom: -0.2rem;
}

.ab_article .ab_post_author span {
	font-weight: normal;
}

.ab_article .ab_post_date {
	font-size: 70%;
	margin-bottom: 
}

.ab_article .ab_post_meta.right {
	float: right
}
.ab_article h1.ab_post_title {
	line-height: 1.25em;
	margin-bottom: 0.5em;
}
.ab_article a {
	color: #39f;
	text-decoration: none;
}
.ab_article a img, .ab_article a:active, .ab_article a:focus, .ab_article a:hover {
	text-decoration: none
}
.ab_article img, .ab_article figure img, .ab_article figure[style]{
	width: 100% !important;
	height: auto;
	margin:0;
}
.ab_article .wp-caption-text, .ab_article blockquote {
	color: #999
}
.ab_article blockquote {
	margin-left: 1em;
	border-left: 2px solid #aaa;
	padding-left: 1em
}
.ab_article table {
	border: none;
	border-spacing: 0
}
.ab_article table th {
	background-color: #ddd;
	border-left: 1px solid #999
}
.ab_article table th:first-of-type {
	border-left: 0
}
.ab_article table tr:nth-child(even) {
	background-color: #f4f4f4
}
.ab_article table td {
	border-top: 1px solid #999;
	border-left: 1px solid #999
}
.ab_article table td:first-of-type {
	border-left: 0
}
.ab_article .media-container {
	width: 100% !important
}
.ab_article .media-container embed, .ab_article .media-container img, .ab_article .media-container object, .ab_article .media-container video {
	max-width: 100% !important;
	height: auto !important
}

@media screen and (max-width:480px) {
	.ab_article {
		padding: 2em 1em;
		padding-top: 1em;
	}
	.gallery .gallery-item {
		width: 100% !important
	}
	.gallery .gallery-item img {
		width: 100%;
		height: auto
	}
}
.gallery {
	margin-bottom: 20px
}
.gallery-item {
	float: left;
	margin: 0 4px 4px 0;
	overflow: hidden;
	position: relative
}
.gallery-columns-1 .gallery-item {
	max-width: 100%
}
.gallery-columns-2 .gallery-item {
	max-width: 48%;
	max-width: -webkit-calc(46%);
	max-width: calc(46%)
}
.gallery-columns-3 .gallery-item {
	max-width: 32%;
	max-width: -webkit-calc(29.299999999999997%);
	max-width: calc(29.299999999999997%)
}
.gallery-columns-4 .gallery-item {
	max-width: 23%;
	max-width: -webkit-calc(21%);
	max-width: calc(21%)
}
.gallery-columns-5 .gallery-item {
	max-width: 19%;
	max-width: -webkit-calc(16%);
	max-width: calc(16%)
}
.gallery-columns-6 .gallery-item {
	max-width: 15%;
	max-width: -webkit-calc(12.7%);
	max-width: calc(12.7%)
}
.gallery-columns-7 .gallery-item {
	max-width: 13%;
	max-width: -webkit-calc(10.28%);
	max-width: calc(10.28%)
}
.gallery-columns-8 .gallery-item {
	max-width: 11%;
	max-width: -webkit-calc(8.5%);
	max-width: calc(8.5%)
}
.gallery-columns-9 .gallery-item {
	max-width: 9%;
	max-width: -webkit-calc(7.1%);
	max-width: calc(7.1%)
}
.gallery-columns-1 .gallery-item:nth-of-type(1n), .gallery-columns-2 .gallery-item:nth-of-type(2n), .gallery-columns-3 .gallery-item:nth-of-type(3n), .gallery-columns-4 .gallery-item:nth-of-type(4n), .gallery-columns-5 .gallery-item:nth-of-type(5n), .gallery-columns-6 .gallery-item:nth-of-type(6n), .gallery-columns-7 .gallery-item:nth-of-type(7n), .gallery-columns-8 .gallery-item:nth-of-type(8n), .gallery-columns-9 .gallery-item:nth-of-type(9n) {
	margin-right: 0
}
.gallery-columns-1.gallery-size-medium figure.gallery-item:nth-of-type(1n+1), .gallery-columns-1.gallery-size-thumbnail figure.gallery-item:nth-of-type(1n+1), .gallery-columns-2.gallery-size-thumbnail figure.gallery-item:nth-of-type(2n+1), .gallery-columns-3.gallery-size-thumbnail figure.gallery-item:nth-of-type(3n+1) {
	clear: left
}
.gallery-caption {
	background-color: rgba(0, 0, 0, .7);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	color: #fff;
	font-size: 12px;
	line-height: 1.5;
	margin: 0;
	max-height: 50%;
	opacity: 0;
	padding: 6px 8px;
	position: absolute;
	bottom: 0;
	left: 0;
	text-align: left;
	width: 100%
}
.gallery-caption:before {
	content:"";
	height: 100%;
	min-height: 49px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%
}
.gallery-item:hover .gallery-caption {
	opacity: 1
}
.gallery-columns-7 .gallery-caption, .gallery-columns-8 .gallery-caption, .gallery-columns-9 .gallery-caption {
	display: none
}
@charset "";
/*!
TYPEPLATE
URL ........... http://typeplate.com
VERSION ....... 1.1.3
Github ........ https://github.com/typeplate/bower
AUTHORS ....... Dennis Gaebel (@gryghostvisuals) & Zachary Kain (@zakkain)
LICENSE ....... Creative Commmons Attribution 3.0 (http://creativecommons.org/licenses/by/3.0)
LICENSE URL ... https://github.com/typeplate/bower/blob/master/license.txt
*/
@font-face {
  font-family: "Ampersand";
  src: local("Georgia"), local("Garamond"), local("Palatino"), local("Book Antiqua");
  unicode-range: U+0026; }
@font-face {
  font-family: "Ampersand";
  src: local("Georgia");
  unicode-range: U+270C; }
body {
  word-wrap: break-word; }
pre code {
  word-wrap: normal; }
/**
 * Dropcap Sass @include
 * Use the following Sass @include with any selector you feel necessary.
 *
	@include dropcap($dropcap-float-position, $dropcap-font-size, $dropcap-font-family, $dropcap-txt-indent, $dropcap-margin, $dropcap-padding, $dropcap-color, $dropcap-line-height, $dropcap-bg);
 *
 * Extend this object into your custom stylesheet. Let the variables do the work.
 *
 */
html {
  font: normal 100%/1.65 serif; }
body {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;
  color: #444444; }
small {
  font-size: 65%; }
h1, h2, h3, h4, h5, h6 {
  text-rendering: optimizeLegibility;
  line-height: 1;
  margin-top: 0; }
.tera {
  font-size: 117px;
  font-size: 7.3125rem;
  margin-bottom: 0.22564px;
  margin-bottom: 0.22564rem; }
.giga {
  font-size: 90px;
  font-size: 5.625rem;
  margin-bottom: 0.29333px;
  margin-bottom: 0.29333rem; }
.mega {
  font-size: 72px;
  font-size: 4.5rem;
  margin-bottom: 0.36667px;
  margin-bottom: 0.36667rem; }
.alpha, h1 {
  font-size: 24px;
  font-size: 1.5rem;
  margin-bottom: 1.1px;
  margin-bottom: 1.1rem; }
.beta, h2 {
  font-size: 22px;
  font-size: 1.375rem;
  margin-bottom: 1.2px;
  margin-bottom: 1.2rem; }
.gamma, h3 {
  font-size: 20px;
  font-size: 1.25rem; }
.delta, h4 {
  font-size: 19px;
  font-size: 1.1875rem;
  margin-bottom: 1.38947px;
  margin-bottom: 1.38947rem; }
.epsilon, h5 {
  font-size: 18.5px;
  font-size: 1.15625rem;
  margin-bottom: 1.42703px;
  margin-bottom: 1.42703rem; }
.zeta, h6 {
  font-size: 18px;
  font-size: 1.125rem;
  margin-bottom: 1.46667px;
  margin-bottom: 1.46667rem; }

abbr,
acronym,
blockquote,
code,
dir,
kbd,
listing,
plaintext,
q,
samp,
tt,
var,
xmp {
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  -o-hyphens: none;
  hyphens: none; }
pre code {
  white-space: -moz-pre-wrap;
  white-space: pre-wrap; }
pre {
  white-space: pre; }
code {
  white-space: pre;
  font-family: monospace; }
/**
 * Abbreviations Markup
 *
	<abbr title="hyper text markup language">HMTL</abbr>
 *
 * Extend this object into your markup.
 *
 */
abbr {
  font-variant: small-caps;
  font-weight: 600;
  text-transform: lowercase;
  color: gray; }
  abbr[title]:hover {
    cursor: help; }
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #222222; }
p + .drop-cap {
  text-indent: 0;
  margin-top: 0; }
.drop-cap:first-letter {
  float: left;
  margin: inherit;
  padding: inherit;
  font-size: 4em;
  font-family: inherit;
  line-height: 1;
  text-indent: 0;
  background: transparent;
  color: inherit; }
/**
 * Lining Definition Style Markup
 *
	<dl class="lining">
		<dt><b></b></dt>
		<dd></dd>
	</dl>
 *
 * Extend this object into your markup.
 *
 */
.lining dt,
.lining dd {
  display: inline;
  margin: 0; }
.lining dt + dt:before,
.lining dd + dt:before {
  content: "\A";
  white-space: pre; }
.lining dd + dd:before {
  content: ", "; }
.lining dd:before {
  content: ": ";
  margin-left: -0.2rem; }
/**
 * Dictionary Definition Style Markup
 *
	<dl class="dictionary-style">
		<dt><b></b></dt>
			<dd></dd>
	</dl>
 *
 * Extend this object into your markup.
 *
 */
.dictionary-style dt {
  display: inline;
  counter-reset: definitions; }
  .dictionary-style dt + dt:before {
    content: ", ";
    margin-left: -0.2rem; }
.dictionary-style dd {
  display: block;
  counter-increment: definitions; }
  .dictionary-style dd:before {
    content: counter(definitions,decimal) ". "; }
/**
 * Blockquote Markup
 *
		<figure>
			<blockquote cite="">
				<p></p>
			</blockquote>
			<figcaption>
				<cite>
					<small><a href=""></a></small>
				</cite>
			</figcaption>
		</figure>
 *
 * Extend this object into your markup.
 *
 */
/**
 * Pull Quotes Markup
 *
	<aside class="pull-quote">
		<blockquote>
			<p></p>
		</blockquote>
	</aside>
 *
 * Extend this object into your custom stylesheet.
 *
 */
.pull-quote {
  position: relative;
  padding: 1em; }
  .pull-quote:before, .pull-quote:after {
    height: 1em;
    opacity: 0.5;
    position: absolute;
    font-size: 4em;
    color: #dc976e; }
  .pull-quote:before {
    content: '“';
    top: 0;
    left: 0; }
  .pull-quote:after {
    content: '”';
    bottom: 0;
    right: 0; }

figure[style] {
   text-align: center;
}

iframe {
	width: 100%;
    height: auto;
}

.ab_article > div { 
	width: 100%;
    height: auto;   
}

/**
 * Figures Markup
 *
	<figure>
		<figcaption>
			<strong>Fig. 4.2 | </strong>Type Anatomy, an excerpt from Mark Boulton's book<cite title="http://designingfortheweb.co.uk/book/part3/part3_chapter11.php">"Designing for the Web"</cite>
		</figcaption>
	</figure>
 *
 * Extend this object into your markup.
 *
 */
/**
 * Footnote Markup : Replace 'X' with your unique number for each footnote
 *
	<article>
		<p><sup><a href="#fn-itemX" id="fn-returnX"></a></sup></p>
		<footer>
			<ol class="foot-notes">
				<li id="fn-itemX"><a href="#fn-returnX">↩</a></li>
			</ol>
		</footer>
	</article>
 *
 * Extend this object into your markup.
 *
 */