/*
* The Graphical Thread - http://graphicalthread.com.au
* CSS by Conor Doyle.
* This stylesheet contains media queries for larger screens.
* For base styles (mobile first, smaller screens) see style.css file
* Note: Some inline media queries relating to the background image appear in header.php

BREAKPOINTS

* 550:
Logo size & tagline increase
Front-page image grid adjusts to 2 columns
Menu appears in Footer
* 700:
Footer margin increases affecting logo, hamburger & main/archive page titles 
Headings increase
Article paragraph font-size increases slightly
* 1000
Headings increase
* 1200
Front-page image grid adjusts to 3 columns
Journal index post intros adjust to horizontal display (img floats left, text floats right)
*1300
Archive sidebar re-positions to left side of screen
Archive/Search page titles appear in sidebar - mobile version hidden
Class "archive-search-category-container" initializes to accommodate sidebar
*/

@media only screen and (min-width: 550px) {
.logo {
	width: 180px;
	margin-bottom: -1.25em;
}
h6 {
	margin-left: 0;
	font-size: 9px;
	letter-spacing: 0.04em;
}
.grid-sizer,
.grid-item {
  width: calc(50% - 1em);
}
.menu-footer {
	display: block;
}
.instagram-post {
    display: inline-block;
    text-align: center;
		max-width: 500px;
    width: 100%;
    height: 100%;
}
}
@media only screen and (min-width: 700px) {
/* Increase the margins on foreground header items to 3em. */
.logo-container {
	top: 3em;
	left: 3em;
}
.menubar-mobile {
	top: 3em;
	right: 3em;
}
h1 {
	font-size: 1em;
	bottom: 0.75em;
}
.h1-left {
	left: 3em;
}
.h1-right {
	right: 3em;
}	
h2 {
	font-size: 2.5em;
}
.h2-404-search {
	font-size: 2em;
}
article p, .content p {
	font-size: 1.125em;
}
.post-intro-container:hover .h2-single:after {
	content:'';
	background: #29a9e1;
	border-radius: 100%;
	width: 35px;
	height: 35px;
	margin-top: 0.3em;
}
.h2-sitemap {
	margin-bottom: 0.75em;

}
.h3-sitemap {
	font-size: 1.25em;
	background-color: #212121;
}
.sitemap-date {
	margin-top: -5.5em;
	margin-bottom: 1em;
	font-size: 1em;
}
.date-author {
	margin-bottom: 5em;
	padding-bottom: 5em;
}
/* extend pushy menu to 350px */
.pushy {
	width: 350px;
}
.pushy-left {
  -webkit-transform: translate3d(-350px, 0, 0);
  -ms-transform: translate3d(-350px, 0, 0);
  transform: translate3d(-350px, 0, 0);
}
.pushy-open-left #container,
.pushy-open-left .push {
  -webkit-transform: translate3d(350px, 0, 0);
  -ms-transform: translate3d(350px, 0, 0);
  transform: translate3d(350px, 0, 0);
}
.pushy-right {
  -webkit-transform: translate3d(350px, 0, 0);
  -ms-transform: translate3d(350px, 0, 0);
  transform: translate3d(350px, 0, 0);
}
.map-title {
	font-weight: bold;
	/*color: #403000;*/
	color: black;
	font-size: 14px;
	vertical-align: text-top;
	margin-left: 0.5em;
	margin-right: 2em;
	display: inline;
}
.map-data {
	margin-right: 0;
}
.share {
	text-align: left;
	margin-top: -4.5em;
	margin-bottom: 1.25em;
	display: block;
	position: relative;
}
.fb-like-container {
	margin-bottom: -4.5em;
	margin-top: 1.25em;
	text-align: right;
	display: block;
	height: 1.75em;
}
.share-mobile-container {
	display: none;
}
.page-title-mobile {
	right: 3em;
}
.content-single-promo {
	width: 48%;
}
.promo-left {
	margin-right: 2%;
}
.promo-right {
	margin-left: 2%;
}
.h2-single-promo {
	font-size: 1.25em;
}
.category-tag-area {
	margin-top: 5em;
}
}
@media only screen and (min-width: 1000px) {
h2 {
	font-size: 3.5em;
}
.h2-index, .h2-archive {
	font-size: 2.5em;
}
.h2-404-search {
	font-size: 2em;
}
.post-intro-container:hover .h2-single:after {
	content:'';
	background: #29a9e1;
	border-radius: 100%;
	width: 40px;
	height: 40px;
	margin-top: 0.4em;
}
.h2-sitemap {
	padding-top: 0.25em;
	padding-bottom: 0;
	margin-bottom: 0.5em;
}
.h3-sitemap {
	font-size: 2em;
	margin-top: 2em;
	padding-bottom: 1em;
	margin-bottom: -2em;
}
.sitemap-date {
	margin-top: -5.25em;
	margin-bottom: 3em;
}
.sitemap-date-post {
	margin-top: 0;
	margin-bottom: 0;
}
}
@media only screen and (min-width: 1200px) {
.grid-sizer,
.grid-item {
  width: calc(33.333% - 1em);
  margin-left: 0.5em;
  margin-right: 0.5em;
  margin-bottom: 1em;
  background-color: #9f072e;
}
.h2-index {
	float: right;
	width: calc(50% - 1em);
	font-size: 1.5em;
	text-align: left;
}
.p-index {
	float: right;
	width: calc(50% - 1.5em);
}
.post-img-index {
	float: left;
	text-align: left;
	margin-right: 20px;
	width: 50%;
	margin-top: 0.5em;
}
.post-img-single {
	width: 100%;
	margin: 0;
}
}
@media only screen and (min-width: 1300px) {
.archive-search-category-container {
	overflow: inherit;
	position: relative;
	width: 64em;
	height: 100%;
	float: right;
}
.content-archive {
	margin: initial;
	max-width: 48em;
	padding-left: 5em;
	padding-right: 5em;
	margin-right: 3em;
	border-top: 1px solid gray;
	margin-left: auto;
}
.widget-area {
	width: calc(100% - 70em);
	padding-left: 3em;
	padding-right: 3em;
}
.widget-title {
	text-align: left;
}
.widget-area .sid li a {
	text-align: left;
}
.page-title {
	display: block;
	text-align: left;
	position: relative;
	font-size: 1em;
	margin-top: 1em;
	font-weight: normal;
	font-style: italic;
}
.page-title-mobile {
	display: none;
}
.iframe-container-external-file {
    position: relative;
	height: auto;
	width: 100%;
	margin-top: 2em;
	margin-bottom: 2em;
	display: block;
}
.iframe-container-panorama iframe {
    border: none;
}
.widget-area p {
	display:  block;
	font-size: 0.75em;
	color: gray;
	font-style: italic;
	text-align: left;
}
}