/*
* The Graphical Thread - http://graphicalthread.com.au
* CSS by Conor Doyle.
* This stylesheet contains all base custom styles (small screens).
* These are adapted for larger screens in the style-responsive.css file

* LOGO FONT:
* Aharoni, ("graphical": 36pt, -70av approx) ("thread": )

* COLOUR SCHEME:
* logo black: hex #2a2a2a / (rgb: 42, 42, 42)
* logo crimson: hex #9F072E / rgb(159,7,46)
* main background (non-front-page): hex #2a2a2a / rgb(42,42,42)
* archive sidebar & category/tag padding: hex #212121 / rgb(33,33,33) (alt: #252525 / rgb(37,37,37))
* archive dark band: hex #191919 / rgb(25,25,25)
* light gray in Footer text (pre-hover menu items): hex #e5e5e5 / rgb(229,229,229)
* light gray in Footer text (sitemap / developer): hex #b3b3b1 / rgb(179,179,177)
* standard black, white & gray (borders in posts & archive) feature throughout
* alternative black in mobile menu: hex #191919 / rgb(10,10,9)
* footer: hex #080808 / rgb(8,8,8)

MOBILE MARGIN:
8% each side.
*/

body {
	margin: 0;
	padding: 0;
	font-family: 'Open Sans', sans-serif;
	background-color: black; /* fallback */
	background-color: #080808;
	color: white;
}
.loading-cover {
	position: fixed; 
	top: 0em;
	left: 0;
	height: 100%; 
	width: 100%; 
	background-color: black;
	z-index: 10; 
	font-size: 60px; 
	margin: 0 auto;
	text-align: center;
}
.loading-cover-gallery {
	position: absolute; 
	top: 0;
	left: 0;
	height: 100%; 
	width: 100%; 
	background-color: black;
	z-index:2; 
	font-size: 60px; 
	margin: 0 auto;
	text-align: center;
}
strong {
	font-weight: 700;
}
/*
--------------------------------------------------------------------------------
HEADER
--------------------------------------------------------------------------------
* ensure margin-top of header = height of bg-title-contast */
header {
	margin-top: 40vh;
	position: relative;
	}
/* contrast window containing large title text on background */
.bg-contrast {
	position: fixed;
	top: 0;
	left: 0;
	height: 40vh;
	display: block;
	text-align: left;
	width: 100%;
	margin: 0;
}
 /* home page logo */
.logo-container {
	height: auto;
	width: auto;
	display: inline-block;
	position: fixed;
	top: 2em;
	left: 2em;
}
/* Like previous but ensures the logo and menu hamburger remain on top on the front page even when scrolled */
.logo-container-front {
	z-index: 11;
}
.logo {
	width: 160px;
	margin-bottom: -1.25em;
}
#title {
	padding-top: 9em;
	margin-top: -9em;
}
/* If background image is set to "map" */
.map {
	font-size: 9px;
	background-color: gray;
	font-family: sans-serif;
	padding-top: 1em;
	padding-bottom: 0.9em;
	padding-left: 1.5em;
	padding-right: 1.5em;
	line-height: 1.5em;
	top: 0em;
	right: -4.5em;
	position: absolute;
	display: inline-block;
	width: auto;
	font-weight: normal;
	letter-spacing: 0.0625em;
	margin-right: 4.5em;
	text-decoration: none;
	text-align: right;
	z-index: 2;
}
.map-title {
	display: none;
}
.map-data {
	color: black;
	font-size: 10px;
	vertical-align: text-top;
	margin-right: 2.75em;
}
.full-screen {
	width: 3em;
	-ms-transform: scale(0.7, 0.7); /* IE 9 */
    -webkit-transform: translateZ(0) scale(0.7, 0.7); /* Safari */
    transform: scale(0.7, 0.7);
    opacity: 0.7;
	vertical-align: middle;
	position: absolute;
	bottom: 0.2em;
	right: 1em;
	transition: all 0.125s ease-out;
}
.map:hover .full-screen {
	-ms-transform: scale(0.9, 0.9); /* IE 9 */
    -webkit-transform: translateZ(0) scale(0.9, 0.9); /* Safari */
    transform: scale(0.9, 0.9);
 	 opacity: 1.0;
	transition: all 0.125s ease-in;
}
/*
--------------------------------------------------------------------------------
NAVIGATION
--------------------------------------------------------------------------------
* NOTE: Mobile "pushy" navigation styled in pushy.css
*/
nav {
	/* background-color: rgba(228,103,37,0.9);
	box-shadow: 0 0 7px rgba(0, 0, 0, .1); */
	font-weight: normal;
	padding-left: 5%;
	padding-right: 5%;
	width: 90%;
	height: auto;
}
ul {
	padding: 0;
	margin: 0;
	position: relative;
	display: block;
}
.ul-vertical-center {
	padding-bottom: 1em;
	top: 50%;
  	transform: translate(0, -50%);
}
/* Space between sub-menu headings (mobile) */
ul .sub-menu {
	padding-bottom: 0;
	padding-top: 0;
}
.menu-footer {
	display: none;
	width: 100%;
	margin-bottom: 1.25em;
}
.menu-footer ul li {
	display: inline;
}
.menu-footer ul li a {
	text-decoration: none;
	letter-spacing: 0.05em;
	color: #e5e5e5;
	margin-left: 1.125em;
	margin-right: 1.125em;
	font-size: .75em;
}
.menu-footer ul li a:hover {
	position: relative;
	color: white;
}
.menu-footer ul li a:hover:after {
	content:'';
	background: #9f072e;
	border-radius: 100%;
	margin-top: 0em;
	width: 10px;
	height: 10px;
	display: inline-block;
	right: -1.25em;
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	animation-name: link;
	-webkit-animation-name: link; /* Chrome, Safari, Opera */
    animation-duration: 1s;
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
	-webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}	
@keyframes link {
    0%{ 
    opacity: 0;
    	 }
    100%{ 
    opacity: 1;	
    	 }
}
/*
--------------------------------------------------------------------------------
SOCIAL MEDIA LINKS / SHARE BUTTONS
--------------------------------------------------------------------------------
*/
.social {
	margin-bottom: -0.5em;
}
.inbutton-link {
	display: inline-block;
	height: 30px;
	width: 30px;
	background: url('../images/logo-link-in.png') bottom;
	background-size: 30px 60px;
	background-repeat: no-repeat;
	margin-left: 0.25em;
	margin-right: 0.25em;
}
.inbutton-link:hover {
	background-position: 0 0;
}
.ggbutton-link {
	display: inline-block;
	height: 30px;
	width: 30px;
	background: url('../images/logo-link-gg.png') bottom;
	background-size: 30px 60px;
	background-repeat: no-repeat;
	margin-left: 0.25em;
	margin-right: 0.25em;
}
.ggbutton-link:hover {
	background-position: 0 0;
}
.fbbutton-link {
	display: inline-block;
	height: 30px;
	width: 30px;
	background: url('../images/logo-link-fb.png') bottom;
	background-size: 30px 60px;
	background-repeat: no-repeat;
	/* FB logo is narrow, so reduced margins */
	margin-left: 0.125em;
	margin-right: 0.125em;
}
.fbbutton-link:hover {
	background-position: 0 0;
}
.mapbutton-link {
	display: inline-block;
	height: 30px;
	width: 30px;
	background: url('../images/logo-link-map.png') bottom;
	background-size: 30px 60px;
	background-repeat: no-repeat;
	/* Map logo is narrow, so reduced margins */
	margin-left: 0.125em;
	margin-right: 0.125em;
}
.mapbutton-link:hover {
	background-position: 0 0;
}
.pinbutton-link {
	display: inline-block;
	height: 30px;
	width: 30px;
	background: url('../images/logo-link-pin.png') bottom;
	background-size: 30px 60px;
	background-repeat: no-repeat;
	margin-left: 0.25em;
	margin-right: 0.25em;
}
.pinbutton-link:hover {
	background-position: 0 0;
}
.igbutton-link {
	display: inline-block;
	height: 30px;
	width: 30px;
	background: url('../images/logo-link-ig.png') bottom;
	background-size: 30px 60px;
	background-repeat: no-repeat;
	margin-left: 0.25em;
	margin-right: 0.25em;
}
.igbutton-link:hover {
	background-position: 0 0;
}
.ytbutton-link {
	display: inline-block;
	height: 30px;
	width: 30px;
	background: url('../images/logo-link-yt.png') bottom;
	background-size: 30px 60px;
	background-repeat: no-repeat;
	margin-left: 0.25em;
	margin-right: 0.25em;
}
.ytbutton-link:hover {
	background-position: 0 0;
}
/* share button container (posts only) on desktop - top of post article */
.share, .fb-like-container {
	display: none;
}
/* share button container (posts only) on mobile - bottom of screen */
.share-mobile-container {
	position: fixed;
	left: 0;
	bottom: 0;
	height: 30px;
	background: #2a2a2a;
	width: 84%;
	padding-left: 8%;
	padding-right: 8%;
	padding-top: 0.125em;
	opacity: 0;
}
.share-mobile {
	position: relative;
	width: 25%;
	margin-right: -0.26em;
	text-align: center;
	display: inline-block;
}
.share-mobile-fb {
	background-color: #3B5A9A;
}
.share-mobile-in {
	background-color: #117BB8;
}
.share-mobile-gg {
	background-color: #DF4B38;
}
.share-mobile-tw {
	background-color: #29a9e1;
}
/* share buttons */
.fbbutton-share {
	display: inline-block;
	height: 30px;
	width: 30px;
	background: url('../images/social-share-fb.png') bottom;
	background-size: 30px 60px;
	background-repeat: no-repeat;
}
.fbbutton-share:hover {
	background-position: 0 0;
}
.inbutton-share {
	display: inline-block;
	height: 30px;
	width: 30px;
	background: url('../images/social-share-in.png') bottom;
	background-size: 30px 60px;
	background-repeat: no-repeat;
}
.inbutton-share:hover {
	background-position: 0 0;
}
.ggbutton-share {
	display: inline-block;
	height: 30px;
	width: 30px;
	background: url('../images/social-share-gg.png') bottom;
	background-size: 30px 60px;
	background-repeat: no-repeat;
}
.ggbutton-share:hover {
	background-position: 0 0;
}
.twbutton-share {
	display: inline-block;
	height: 30px;
	width: 30px;
	background: url('../images/social-share-tw.png') bottom;
	background-size: 30px 60px;
	background-repeat: no-repeat;
}
.twbutton-share:hover {
	background-position: 0 0;
}
.button-space {
	margin-right: 32px;
}
/*
--------------------------------------------------------------------------------
HEADINGS
--------------------------------------------------------------------------------
*/
h1 {
	font-size: 1em;
	bottom: 0.25em;
	position: absolute;
	font-weight: normal;
	letter-spacing: 0.0625em;
	opacity: 1;
}
.h1-left {
	left: 2em;
}
.h1-left:before {
	content:'';
	background: #9f072e;
	border-radius: 100%;
	margin-bottom: -0.06em;
	width: 16px;
	height: 16px;
	display: inline-block;
	margin-right: 0.375em;
}
.h1-right {
	right: 2em;
}
.h1-right:after {
	content:'';
	background: #9f072e;
	border-radius: 100%;
	margin-bottom: -0.125em;
	width: 16px;
	height: 16px;
	display: inline-block;
	margin-left: 0.375em;
}
.h1-white {
	color: white;
}
.h1-black {
	color: black;
}
.h1-purple {
	color: #9f072e;
}
.h1-down {
	animation-name: down;
    -webkit-animation-name: down; /* Chrome, Safari, Opera */
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
    animation-duration: 1s;
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
	-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
    animation-fill-mode: forwards;  
}
@keyframes down {
    0%{ 
    opacity: 1;
    	 }
    100%{ 
    opacity: 0;	
    	 }
}
.h1-up {
	animation-name: up;
    -webkit-animation-name: up; /* Chrome, Safari, Opera */
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
    animation-duration: 1s;
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
    -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
    animation-fill-mode: forwards;
}
@keyframes up {
    0%{ 
    opacity: 0;
    	 }
    100%{ 
    opacity: 1;	
    	 }
}
/* article post title */
h2 {
	margin-top: 0;
	font-size: 1.5em;
	padding: 0;
	font-weight: 700;
}
.h2-sitemap {
	color: #e5e5e5;
	background-color: #212121;
	padding: 0.5em 1em;
	margin-top: 1.25em;
}
.h2-sitemap a:hover {
	color: white;
}
.h2-home {
	font-size: 1em;
}
.h2-single, .h2-archive, .h2-index {
	margin-bottom: 0;
	color: #e5e5e5;
}
.h2-single a {
	border-bottom: 2px solid #2a2a2a;
	-webkit-transition: border 0.25s ease-out;
	-moz-transition: border 0.25s ease-out;
	transition: border 0.25s ease-out;
	transform: translateZ(0) scale(1.0,1.0);
	-webkit-transform: translateZ(0) scale(1.0,1.0);
}
.post-intro-container {
	position: relative;
}
.post-intro-container:hover .h2-single{
	color: white;
}
/* article inline paragraph title */
h3, h3 a {
	font-size: 1.25em;
	text-align: left;
	font-weight: bold;
	padding-top: 1em;
	padding-bottom: 0em;
}
/* h3 for sitemap */
.h3-sitemap {
	font-size: 1.125em;
	text-align: center;
	color: #e5e5e5;
	background-color: #212121;
	padding: 0 1em 2em 1em;
	margin-bottom: -3em;
	margin-top: 2em;
}
.h3-sitemap a {
	text-align: center;
}
.h3-sitemap a:hover {
	color: white;
}
/* post author and date */
h4 {
	font-size: 1em;
	line-height: 1.5em;
	font-weight: normal;
	text-align: left;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
	display: inline-block;
	margin-left: 0.75em;
	vertical-align: middle;
}
/* footer copyright */
h5 {
	font-size: 1em;
	line-height: 1.5em;
	font-weight: normal;
	text-align: center;
	margin-bottom: 0;
	padding: 0;
}
/* tag under logo on home page */
h6 {
	margin-left: 0px;
	font-family: 'Open Sans', sans-serif;
	line-height: 1.25em;
	font-weight: bold;
	letter-spacing: 0.04em;
	color: #666666;
	font-size: 8px;
	margin-bottom: 0;
}
.h6-charcoal {
	color: #666666;
}
.h6-white {
	color: white;
}
.h6-black {
	color: black;
}
/*
--------------------------------------------------------------------------------
CONTENT
--------------------------------------------------------------------------------
*/
main {
	width: auto;
	background-color: #2a2a2a;
	position: relative;
	z-index: 1;
}
.main-front {
	background-color: black;
}
#container {
	background-color: #2a2a2a;
	z-index: 1;
	position: relative;
	height: 100%;
	overflow: hidden;
}
.content {
	margin: 0 auto;
	text-align: center;
	padding-left: 8%;
	padding-right: 8%;
	max-width: 60em;
	height: auto;
	padding-bottom: 5em;
	padding-top: 5em;
	clear: both;
	position: relative;
}
.article-post {
	max-width: 60em;
}
.article-post-comments {
	margin-bottom: -2em;
}
article p, .content p {
	font-size: 1.0625em;
	line-height: 1.5em;
	text-align: center;
	margin-bottom: 1.5em;
}
.article-post p {
	text-align: left;
	margin-bottom: 2em;
}
.article-post p a {
	background-color: #212121;
	padding: 0 0.25em;
	margin: 0;
	color: white;
	border-radius: 0.25em;
	font-weight: normal;
	text-decoration: underline;
	text-decoration-style: solid;
	-webkit-text-decoration-style: solid;
	-moz-text-decoration-style: solid;
	-webkit-text-decoration-color: #9F072E; /* Code for Firefox */
    -moz-text-decoration-color: #9F072E; /* Code for Firefox */
    text-decoration-color: #9F072E;
}
.article-post p a:hover {
	color: white;
	background-color: black; /* fallback */
	background-color: #080808;
}
.content-single-promo {
	text-align: left;
	display: inline-block;
	height: auto;
	position: relative;
	width: 100%;
	margin: 1em 0% 1em 0%;
}
.h2-single-promo {
	font-size: 1em;
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 1em 1.5em 1em 1.5em;
	background-color: rgba(42,42,42,0.4);
	text-align: center;
	margin: 0;
	width: calc(100% - 3em);
	/*border-radius: 0 0.5em 0 0;*/
	-webkit-transition: background-color 0.25s ease-out;
	-moz-transition: background-color 0.25s ease-out;
	transition: background-color 0.25s ease-out;
	transform: translateZ(0) scale(1.0,1.0);
	-webkit-transform: translateZ(0) scale(1.0,1.0);
}
.promo-date {
	font-size: 0.75em;
	color: gray;
	text-align: left;
	font-weight: bold;
	-webkit-transition: color 0.25s ease-out;
	-moz-transition: color 0.25s ease-out;
	transition: color 0.25s ease-out;
	transform: translateZ(0) scale(1.0,1.0);
	-webkit-transform: translateZ(0) scale(1.0,1.0);
}
.content-single-promo:hover .h2-single-promo {
	background-color: rgba(42,42,42,0.5);
	-webkit-transition: background-color 0.25s ease-in;
	-moz-transition: background-color 0.25s ease-in;
	transition: background-color 0.25s ease-in;
	transform: translateZ(0) scale(1.0,1.0);
	-webkit-transform: translateZ(0) scale(1.0,1.0);
}
.content-single-promo:hover .h2-single-promo:after {
	content:'';
	background-color: #9f072e;
	border-radius: 100%;
	width: 19px;
	height: 19px;
	display: inline-block;
	margin-left: 0.25em;
	margin-top: 0.25em;
	position: absolute;
	vertical-align: middle;
	animation-name: link;
	-webkit-animation-name: link; /* Chrome, Safari, Opera */
    animation-duration: 1s;
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
	-webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.content-single-promo:hover .promo-date {
	color: white;
	-webkit-transition: color 0.25s ease-in;
	-moz-transition: color 0.25s ease-in;
	transition: color 0.25s ease-in;
	transform: translateZ(0) scale(1.0,1.0);
	-webkit-transform: translateZ(0) scale(1.0,1.0);
}
.content-index, .content-archive {
	border-top: 1px solid gray;
	padding-bottom: 3em;
	position: relative;
	max-width: 60em;
}
.content-sitemap {
	border-top: 1px solid gray;
	padding-bottom: 10em;
	position: relative;
	max-width: 60em;
}
.content-archive:nth-child(1), .content-index:nth-child(1) {
	border-top: none;
}
.content-archive p, .content-index p, .content-single-promo p {
	text-align: left;
}
.content a {
	color: inherit;
	text-decoration: none;
	position: relative;
	display: inline-block;
	margin-bottom: 1em;
}
.address-link:hover:after {
	content:'';
	background: #9f072e;
	border-radius: 100%;
	margin-bottom: -0.06em;
	width: 16px;
	height: 16px;
	right: -1.375em;
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	animation-name: link;
	-webkit-animation-name: link; /* Chrome, Safari, Opera */
    animation-duration: 1s;
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
	-webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
	right: -1.375em;
}
/* orange buttons linking to other content pages */
.button-link {
	font-size: 0.75em;
	font-weight: bold;
	color: rgb(228,103,37);
	display: inline-block;
	margin-top: 1em;
	text-decoration: none;
	padding: 0.5em;
	border: 0.125em solid rgb(228,103,37);
	font-family: "Open Sans", sans-serif;
	-webkit-transition: all 0.25s ease-out;
	-moz-transition: all 0.25s ease-out;
	transition: all 0.25s ease-out;
	transform: translateZ(0) scale(1.0,1.0);
	-webkit-transform: translateZ(0) scale(1.0,1.0);
	}
.button-link:hover {
	color: white;
	background-color: rgb(228,103,37);
	-webkit-transition: all 0.25s ease-in;
	-moz-transition: all 0.25s ease-in;
	transition: all 0.25s ease-in;
	transform: translateZ(0) scale(1.0,1.0);
	-webkit-transform: translateZ(0) scale(1.0,1.0);
}
/*
----------------------------------
home (front-page) specific content
----------------------------------
Intro text on home page - dividing header and image grid */
.home-intro {
	padding-top: 1em;
	padding-bottom: 1em;
	background-color: black;
	max-width: none;
	z-index: 3;
	position: relative;
}
.home-intro h2 {
	font-size: 1em;
	padding: 0;
	margin: 0;
	font-weight: normal;
}
/* Three flashing dot preloader for image grid */
.preloader {
	margin-top: 6em;
	font-size: 0.25em;
	opacity: 0;
}
.preloader1 {
	animation-name: square1;
	-webkit-animation-name: square1; /* Chrome, Safari, Opera */
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
    animation-duration: 1s;
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
	-webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
@keyframes square1 {
    0%{ 
    opacity: 0;
    	 }
    50%{ 
    opacity: 1;	
    	 }
   100%{ 
    opacity: 0;	
    	 }
}
.preloader2 {
	animation-name: square2;
	-webkit-animation-name: square2; /* Chrome, Safari, Opera */
    animation-delay: 1.125s;
    -webkit-animation-delay: 1.125s;
    animation-duration: 1s;
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
	-webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
@keyframes square2 {
    0%{ 
    opacity: 0;
    	 }
    50%{ 
    opacity: 1;	
    	 }
   100%{ 
    opacity: 0;	
    	 }
}
.preloader3 {
	animation-name: square3;
	-webkit-animation-name: square3; /* Chrome, Safari, Opera */
    animation-delay: 1.25s;
    -webkit-animation-delay: 1.25s;
    animation-duration: 1s;
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
	-webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
@keyframes square3 {
    0%{ 
    opacity: 0;
    	 }
    50%{ 
    opacity: 1;	
    	 }
   100%{ 
    opacity: 0;	
    	 }
}
/* Image columns on home page - CSS from masonry (David DeSandro, MIT licence) */
.grid {
	margin: 0 auto;
	background-color: black;
	width: calc(100% - 1em);
	margin-left: 0.5em;
	margin-right: 0.5em;
	margin-top: -1em;
}
/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}
/* ---- .grid-item ---- */
.grid-sizer,
.grid-item {
  width: calc(100% - 1em);
  margin-left: 0.5em;
  margin-right: 0.5em;
  margin-bottom: 1em;
  background-color: #8B3795;
}
.grid-item {
  float: left;
}
.grid-item:hover .home-img {
	opacity: 0.7;
	-webkit-transition: opacity 0.25s ease-in;
	-moz-transition: opacity 0.25s ease-in;
	transition: opacity 0.25s ease-in;
	transform: translateZ(0) scale(1.0,1.0);
	-webkit-transform: translateZ(0) scale(1.0,1.0);
	cursor: pointer;
}
.grid-item img a:active, .grid-item a:focus { 
 outline: none;
}
/* Image features within columns on home page */
.home-img {
	will-change: opacity;
	-moz-will-change: opacity;
	opacity: 1.0;
	-webkit-transition: 0.25s ease-out;
	-moz-transition: 0.25s ease-out;
	transition: 0.25s ease-out;
	display: block;
	width: 100.1%;
	transform: translateZ(0) scale(1.0,1.0);
	-webkit-transform: translateZ(0) scale(1.0,1.0);
	background-color: black;
}
.home-img-container:hover .home-img {
	opacity: 0.7;
	-webkit-transition: opacity 0.25s ease-in;
	-moz-transition: opacity 0.25s ease-in;
	transition: opacity 0.25s ease-in;
	transform: translateZ(0) scale(1.0,1.0);
	-webkit-transform: translateZ(0) scale(1.0,1.0);
	cursor: pointer;
	}
/* Home page image captions */
.project {
	opacity: 0;
	color: white;
	font-weight: normal;
	background: rgba(159,7,46,0.2);
	text-align: center;
	position: absolute;
	width: 94%;
	padding-left: 3%;
	padding-right: 3%;
	line-height: 1.5em;
	top: calc(50% - 0.75em);
	transform: translate(0, -50%);
	display: block;
	font-size: 1.125em;
	text-shadow: 2px 2px 8px #9f072e;
	webkit-transition: all 1s ease-out;
	-moz-transition: all 1s ease-out;
	transition: all 1s ease-out;
	transform: translateZ(0) scale(1.0,1.0);
	-webkit-transform: translateZ(0) scale(1.0,1.0);
	pointer-events: none;
}
.grid-item:hover .project {
	top: calc(50% - 0.75em);
	opacity: 1;
	webkit-transition: all 0.25s ease-in;
	-moz-transition: all 0.25s ease-in;
	transition: all 0.25s ease-in;
	transform: translateZ(0) scale(1.0,1.0);
	-webkit-transform: translateZ(0) scale(1.0,1.0);
	transition-delay: 1.25s;
	webkit-transition-delay: 1.25s;
	-moz-transition-delay: 1.25s;
}
.project:hover {
	top: calc(50% - 0.75em);
	opacity: 1;
	cursor: pointer;
}
/*
----------------------------------
journal specific content
----------------------------------
* Note: Affects these templates: index.php / archive.php / search.php category.php / tag.php / entry.php entry-summary.php / sidebar.php */
.post-img {
	width: auto;
	height: auto;
	max-width: 100%;
	display: block;
	margin: 0 auto;
	text-align: center;
}
.post-img-archive {
	margin-top: 1.5em;
}
.date-author {
	margin-bottom: 3em;
	padding-bottom: 3em;
	border-bottom: 1px solid gray;
}
.author-link {
	font-weight: bold;
}
.gravatar {
	vertical-align: top;
}
figure {
	margin: 2em 0;
	color: gray;
}
.figure-img-bg {
	background-color: none;
	width: 100%;
	height: 100%;
	display: block;
	-webkit-transition: 1s ease-out;
	-moz-transition: 1s ease-out;
	transition: 1s ease-out;
}
.figure-img-bg:hover {
	background-color: #9f072e;
	
}
figure a img {
	will-change: opacity;
	-moz-will-change: opacity;
	opacity: 1.0;
	-webkit-transition: 0.25s ease-out;
	-moz-transition: 0.25s ease-out;
	transition: 0.25s ease-out;
	display: block;
	transform: translateZ(0) scale(1.0,1.0);
	-webkit-transform: translateZ(0) scale(1.0,1.0);
}
figure a img:hover {
	will-change: opacity;
	-moz-will-change: opacity;
	opacity: 0.7;
	-webkit-transition: opacity 0.25s ease-in;
	-moz-transition: opacity 0.25s ease-in;
	transition: opacity 0.25s ease-in;
	transform: translateZ(0) scale(1.0,1.0);
	-webkit-transform: translateZ(0) scale(1.0,1.0);
}
figure a:active, figure a:focus { 
 outline: none;
}
.content figure a {
	margin-bottom: 0;
}
.caption {
	font-size: 0.9em;
	margin-top: 0.25em;
	line-height: 1.6em;
	color: gray;
	display: inline-block;
	border-bottom: 1px solid gray;
	background-color: #2a2a2a;
}
.iframe-container {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
	margin-top: 2em;
	margin-bottom: 2em;
}
.iframe-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}
.iframe-container-external-file {
  	display: none;
}
/* sidebar */
.widget-area {
	position: relative;
	width: 90%;
	background-color: #212121;
	height: inherit;
	display: inline-block;
	padding-left: 5%;
	padding-right: 5%;
	text-align: center;
	margin-bottom: -4000px;
    padding-bottom: 4000px;
}
.widget-title {
	text-align: center;
}
.widget-title-center {
	text-align: center;
}
.archive-meta-mobile {
	font-size: 0.75em;
	color: gray;
	font-style: italic;
	text-align: center;
	font-weight: bold;
	padding-top: 3em;
	background: blue;
}
.widget-area p {
	display: none;
}
.sid li a {
	color: #b3b3b1;
	text-decoration: none;
	display: block;
	margin-bottom: 1.25em;
	text-align: center;
}
.sid li a:hover {
	color: white;
}
.sid li a:hover:after {
	content:'';
	background: #9f072e;
	border-radius: 100%;
	width: 16px;
	height: 16px;
	display: inline-block;
	margin-left: 0.375em;
	margin-top: 0.25em;
	position: absolute;
	vertical-align: middle;
	animation-name: link;
	-webkit-animation-name: link; /* Chrome, Safari, Opera */
    animation-duration: 1s;
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
	-webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.sid-center li a {
	text-align: center;
}
/* Page titles for category tag & yearly archives & searches */
.page-title {
	display: none;
}
.page-title-mobile {
	position: absolute;
	font-size: 1em;
	text-align: center;
	margin-top: 1em;
	right: 2em;
	font-weight: normal;
	font-style: italic;
}
.archive-link {
	display: inline-block;
	font-size: 1em;
}
.archive-link:before {
	content:'';
	background:url('../images/archive-icon.png');
	background-size: cover;
	margin-top: -0.4em;
	width: 20px;
	height: 20px;
	margin-right: 8px;
	display: inline-block;
	vertical-align: middle;
}
.archive-link:hover:after {
	content:'';
	background-color: #9f072e;
	border-radius: 100%;
	width: 20px;
	height: 20px;
	margin-left: 0.375em;
	margin-top: 0.25em;
	position: absolute;
	vertical-align: middle;
	animation-name: link;
	-webkit-animation-name: link; /* Chrome, Safari, Opera */
    animation-duration: 1s;
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
	-webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.article-footer {
	background-color: #212121;
	height: auto;
	padding-top: 2em;
	margin: 0 auto;
	text-align: center;
	position: relative;
	padding: 1em 8% 2em 8%;
}
.article-footer a {
	color: #e5e5e5;
	text-decoration: none;
}
.article-footer a:hover {
	color: white;
}
.article-footer-archive-link {
	background-color: #191919;
}
.promo-container {
	max-width: 60em;
	margin: 0 auto;
}
.navigation {
	border-top: 1px solid black;
	position: relative;
	text-align: center;
	width: auto;
	height: auto;
	clear: both;
	padding: 2em 0 2em 0;
	margin: 0 auto;
	margin-left: 8%;
	margin-right: 8%;
}
.navigation a {
	color: #e5e5e5;
	text-decoration: none;
}
.navigation a:hover {
	color: white;
}
.link-img {
	margin-top: 0.5em;
}
.excerpt-date {
	font-style: italic;
	color: gray;
}
.excerpt-read {
	border-radius: 0.25em;
	margin-left: 0.5em;
	padding: 0.25em 0.5em;
	font-size: 0.75em;
	color: white;
	white-space: nowrap;
	background-color: #191919;
	text-transform: uppercase;
}
.post-intro-container:hover .excerpt-read {
	background-color: black; /* fallback */
	background-color: #080808;
}
.excerpt-text {
	color: #e5e5e5;
	position: relative;
}
/*.post-intro-container:hover .h2-single:after, */
.post-intro-container:hover .excerpt-text:after {
	content:'';
	background-color: #9f072e;
	border-radius: 100%;
	width: 20px;
	height: 20px;
	display: inline-block;
	margin-left: 0.25em;
	margin-top: 0.25em;
	position: absolute;
	vertical-align: middle;
	animation-name: link;
	-webkit-animation-name: link; /* Chrome, Safari, Opera */
    animation-duration: 1s;
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
	-webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.post-intro-container:hover .h2-single,
.post-intro-container:hover .h2-archive,
.post-intro-container:hover .h2-index,
.post-intro-container:hover .excerpt-text {
	color: white;
}
.social-count {
	left: 30px;
	padding-left: 2px;
	padding-right: 2px;
	width: 28px;
	position: absolute;
	display: inline-block;
	font-size: 1em;
	font-weight: bold;
	height: 30px;
	line-height: 30px;
	text-align: center;
}
.social-count-fb {
	background-color: #3B5A9A;
}
.social-count-in {
	background-color: #117BB8;
}
.social-count-gg {
	background-color: #DF4B38;
}
.social-count-tw {
	background-color: #9f072e;
}
.social-count-total {
	width: 100px;
	text-align: left;
	font-weight: normal;
	position: relative;
	vertical-align: top;
	font-size: 0.9em;
	left: 0;
}
.tag-category-title {
	display: inline;
}
.category-tag-area {
	margin-top: 3em;
	padding-top: 3.5em;
	margin-bottom: -1.5em;
	border-top: 1px solid gray;
}
.category-tag-area-comments {
	margin-bottom: 3.5em;
}
.post-categories {
	font-size: 0.75em;
	text-align: center;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}
.post-categories li {
	display: inline;
	position: relative;
	font-weight: bold;
}
.post-categories li a {
	background-color: gray;
	padding: 0.5em 1em;
	color: white;
	border-radius: 2em;
	margin: 0.25em 0.25em;
	font-weight: normal;
	text-transform: uppercase;
	-webkit-transition: background-color 0.25s ease-out;
	-moz-transition: background-color 0.25s ease-out;
	transition: background-color 0.25s ease-out;
	transform: translateZ(0) scale(1.0,1.0);
	-webkit-transform: translateZ(0) scale(1.0,1.0);
}
.post-categories li a:hover {
	background-color: black; /* fallback */
	background-color: #080808;
	-webkit-transition: background-color 0.25s ease-in;
	-moz-transition: background-color 0.25s ease-in;
	transition: background-color 0.25s ease-in;
	transform: translateZ(0) scale(1.0,1.0);
	-webkit-transform: translateZ(0) scale(1.0,1.0);
}
/*
----------------------------------
sitemap specific content
----------------------------------
*/
.sitemap-date {
	margin-top: -4.5em;
	margin-bottom: 2em;
	font-size: 0.75em;
	color: gray;
}
.sitemap-date-post {
	font-size: 0.75em;
	color: gray;
}
/*
--------------------------------------------------------------------------------
FOOTER
--------------------------------------------------------------------------------
*/
footer {
	background-color: black; /* fallback */
	background-color: #080808;
	box-shadow: 0 0 7px rgba(0, 0, 0, .1);
	height: auto;
	font-family: "Open Sans", sans-serif;
	font-weight: 300;
	font-size: 0.92em;
	color: white;
	padding-top: 2em;
	padding-bottom: 2em;
	margin-bottom: -0.125em;
	padding-left: 5%;
	padding-right: 5%;
	text-align: center;
	clear: both;
	position: relative;
	z-index: 2;
}
.tagline {
	padding-left: 8%;
	padding-right: 8%;
	max-width: 34em;
	margin: 0 auto;
	font-size: 0.75em;
	margin-top: 2em;
	margin-bottom: -1em;
}
.sitemap-link {
	padding-left: 8%;
	padding-right: 8%;
	max-width: 34em;
	margin: 0 auto;
	font-size: 0.75em;
	color: #b3b3b1;
}
.sitemap-link a {
	text-decoration: none;
	color: inherit;
}
.sitemap-link a:hover {
	color: white;
}
.square {
	width: 7px;
	height: 7px;
	display: inline;
	margin-left: 0.25em;
	margin-right: 0.25em;
}
video {
    width: 100%;
}

/*
video { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100vw;
    min-height: 100vh;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
 background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat;
  background-size: cover;
  transition: 1s opacity;
}*/
.stopfade { 
   opacity: .5;
}
/*
--------------------------------------------------------------------------------
404 / 410 / Search
--------------------------------------------------------------------------------
*/
.h2-404-search {
	font-size: 1.5em;
}
/*
--------------------------------------------------------------------------------
INSTAGRAM SOCIAL PAGE
--------------------------------------------------------------------------------
*/
main .content .instagram-post iframe[style] {
    min-width: 200px !important;
}
/*
--------------------------------------------------------------------------------
APID circles
--------------------------------------------------------------------------------
*/
.footer-circle {
	display: inline-block; 
	height: 0.75em; 
	width: 0.75em; 
	margin: initial 0.25em; 
	background: #9f072e; 
	border-radius: 100%;
}