@import '/webfonts/ss-social-circle.css';

body {
	font-family: 'Inconsolata', 'Courier New', 'Courier';
}
a {
	text-decoration: underline;
}
ul {
	list-style: square;
}
blockquote {
	border-left-width: 3px;
}

@keyframes blink {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink {
  to {
    visibility: hidden;
  }
}



pre > code {
	background-color: transparent;
    border: none;
    padding: 0;
    font-weight: initial;
}
pre.code-block {
	margin: 2rem 0 3rem;
}
pre.code-block > code {
	font-family: 'Inconsolata', 'Courier New', 'Courier';
	/*font-family: 'PF Din Mono';*/
	line-height: 0;
}

.homepage-actions {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 14px;
}

.site-header {
	height: 320px;
    position: relative;
}
.site-header a,
.site-navigation a {
	text-decoration: none;
}
.site-header.site-header-mini {
	height: auto;
	min-height: 86px;
}
.site-header.site-header-follow {
	height: 20px;
	position: fixed;
	top: -14px;
	left: 0;
	right: 0;
}


.site-header-background {
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;
}
.palette-image {
	height: 100%;
	width: 100%;
	background-size: cover;
}
.palette-color {
	height: 100%;
	display: inline-block;
}
.palette-color-1 {
	padding-right: 55%;
	background-color: #2B2E4A;
}
.palette-color-2 {
	padding-right: 20%;
	background-color: #E84545;
}
.palette-color-3 {
	padding-right: 15%;
	background-color: #903749;
}
.palette-color-4 {
	padding-right: 10%;
	background-color: #53354A;
}
.site-header .site-navigation {
	padding: 14px;
}
.site-button {
	font-family: 'DINNextLTPro-Bold', 'Avenir', 'Arial';
	font-weight: 900;
    font-style: italic;
	font-size: 32pt;
	line-height: 32pt;
	color: black;
	background-color: white;
	padding: 10px 18px 6px 14px;
	display: inline-block;
	float: left;
	margin-right: 6px;
}
.page-button {
	font-family: 'DINNextLTPro-Bold', 'Avenir', 'Arial';
	font-weight: 900;
	font-size: 16pt;
	line-height: 15pt;
	letter-spacing: 1px;
	color: white;
	background-color: black;
	padding: 8px;
	margin: 11px 6px;
	display: block;
	float: left;
}
.page-button-text {
	display:inline-block;
}
.site-button:hover {
	color: black;
}
.page-button:hover {
	color: white;
}
.page-button.on {
	margin-bottom: 0;
}
.page-button.on .page-button-text {
	padding-bottom: 2px;
	border-bottom: 3px solid white;
}

.blog-post {
	font-size: 1.1em;
	margin-top: 80px;
}
.blog-post p {
	text-align: justify;
}
.blog-post a {
	font-weight: bold;
}
.blog-post h2 {
	font-family: 'DINNextLTPro-Bold', 'Avenir', 'Arial';
	font-weight: 900;
	font-size: 3.2rem;
	line-height: 1em;
	margin: 0;
}
.blog-post .subtitle {
	font-family: 'DINNextLTPro-Bold', 'Avenir', 'Arial';
	text-align: left;
	font-weight: normal;
	color: #999;
	font-size: 1.6em;
	line-height: 1;
}
.blog-post .date {
	font-weight: bold;
}
.blog-post header {
	margin: 40px 0;
}
.blog-post h3 {
	font-family: 'DINNextLTPro-Bold', 'Avenir', 'Arial';
	line-height: 1em;
	margin-top: 40px;
	text-transform: uppercase;
	font-size: 1.8rem;
}
.blog-post h4 {
	font-family: 'DINNextLTPro-Bold', 'Avenir', 'Arial';
	line-height: 1em;
	margin-top: 40px;
	text-transform: uppercase;
	font-size: 1.3rem;
}
.blog-post .post-image {
	margin: .4rem 0 1rem;
}
.blog-post .post-image.post-image-half {
	max-width: 67%;
	max-height: 60%;
	margin: 2rem auto;
	display: block;
}
.blog-post .thumbnail-solo .thumbnail {
	margin-left: auto;
	margin-right: auto;
	display: block;
}
.blog-post .thumbnail-gallery .thumbnail {
	height: 120px;
}

.blog-post-list {
	min-height: 500px;
}
.blog-post-list h2 {
	font-family: 'DINNextLTPro-Bold', 'Avenir', 'Arial';
	font-weight: 900;
	font-size: 2.0rem;
	line-height: 1em;
	text-transform: uppercase;
	margin-top: 40px;
}
.blog-post-list ul {
	list-style: none;
}
.blog-post-list li {
	font-size: 1.2em;
	line-height: 1em;
	margin-bottom: 20px;
}
.blog-post-list li .post-title {
	font-weight: 900;
}
.blog-post-list li .meta {
	color: #999;
}

.site-footer {
	color: #999;
	border-top: 1px solid #999;
	padding: 10px 6px;
	margin: 50px 0 0;
}
.site-footer .ss-icon {
	font-size: 1.2em;
	color: #999;
}
.site-footer .ss-icon:hover {
	color: #222;
}



@media screen and (max-width: 40em) {

	.site-header {
		height: auto;
		min-height: 188px;
		padding-bottom: 50px;
	}
	.site-header.site-header-mini {
		min-height: 138px;
		padding-bottom: 0;
	}
	.site-button {
		float: none;
		display: block;
	}
	.page-button {
		margin: 11px 5px 0;
	}
	.blog-post {
		margin-top: 40px;
		font-size: inherit;
	}
	.blog-post h3, .blog-post-list h3 {
		font-size: 1.5rem;
	}
	.blog-post h2 {
		font-size: 2.3rem;
	}

}