/*
  * Theme Name:   mg
  * Theme URI:    
  * Author:       Jeremy Pautz
  * Author URI: http://jeremypautz.com
  * Version:      1.0.0
  * Text Domain:  mg
  * Description: Mongerson Gallery theme
  * License: GNU General Public License v2 or later
  * License URI: http://www.gnu.org/licenses/gpl-2.0.html
  * Tags: one-column, two-columns
  * 
  * adobe-garamond-pro
  * futura-pt
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
body {
	font-family:'futura-pt';
	/*font-family:'Futura LT W01 Medium';*/
	font-weight: 100;
	line-height: 1;
}
h1, h2, h3, h4, h5, h6 {
	font-weight: 500;
	line-height: 1.25;
}
h1, h2, h3 {
	margin: 0 0 0.625em 0;
}
h4, h5, h6 {
	margin: 0 0 0.4em 0;
}
h1 {font-size: 2em;}
h2 {font-size: 1.8em;}
h3 {font-size: 1.6em;}
h4 {font-size: 1.4em;}
h5 {font-size: 1.2em;}
h6 {font-size: 1em;}

ol, ul {
	list-style: none;
}
.entry-content ol,
.page-content ol,
.entry-content ul,
.page-content ul {
	padding: 0 0 1.25em 1.25em;
	line-height: 1.25;
} 
.entry-content ol,
.page-content ol {
	list-style: decimal;
}
.entry-content ul,
.page-content ul {
	list-style: disc;
}
.entry-content li,
.page-content li {
	padding: 0 0 0.5rem 0;
}
p {
	padding: 0 0 1.25em 0;
	line-height: 1.4;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
a {
	color: #222;
	text-decoration: none;
	transition: 0.3s;
}
a:hover {
	color: #999;
	text-decoration: underline;
}
.entry-content a {
	text-decoration: underline;
}
img {
	max-width: 100%;
	height: auto;
}
strong, b {
	font-weight: 500;
}
em, i {
	font-style: italic;
}
small {
	font-size: 0.8em;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
label {
	display: block;
	margin: 0;
	padding: 0 0 0.25em 0;
	color: #222;
	font-size: 1em;
}
input,
textarea {
	width: 100%;
    	max-width: 100%;
    	background-color: #ffffff;
    	border: 1px solid #cccccc;
    	border-radius: 0;
    	padding: 0.625em 0.5em 0.5em 0.5em;
   	-webkit-box-sizing: border-box;
   	        box-sizing: border-box;
    	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    	        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    	color: #555555;
    	font-size: 0.875em;
    	line-height: 1.3;
}
input[type="submit"],
button {
	box-sizing: border-box;
	font-weight: 300;
	cursor: pointer;
}
/**********************
BASIC STRUCTURE
**********************/
.site {
	position: relative;
}
.home .site {
	height: 100vh;
	overflow-x: hidden;
	overflow-y: auto;
	transform-style: preserve-3d;
	perspective: 2px;
	-webkit-overflow-scrolling: touch;
}
.page-main {
	opacity: 1;
	transition: all 0.15s ease-out;
}
.page-main[data-transition="fadein"] {
	opacity: 0;
}
.cf:before,
.cf:after {
	content: '';
	display: table;
}
.cf:after {
	clear: both;
}
.section-header {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	width: 100%;
}
.section-header:first-child,
.exhibitions + .section-header {
	padding: 2em 0;
}
.home .section-header:first-child {
	padding: 4em 0;
}
.section-heading {
	border-bottom: 0.125rem solid #999;
	margin: 0;
	padding: 0;
	color: #999;
	font-weight: 300;
	letter-spacing: 0.125em;
	text-transform: uppercase;
}
[class*="embed-wrapper-"] {
	position: relative;
	overflow: hidden;
}
.embed-wrapper-16x9 {
	padding-top: 56.25%;
}
[class*="embed-wrapper-"] iframe,
[class*="embed-wrapper-"] video {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.text-centered {
	text-align: center;
}
.post-thumbnail img {
	display: block;
}
/*****************
REQUIRED WP CLASSES
*****************/
.wp-caption {}
.wp-caption-text {}

.alignright {
	float: right;
	margin: 0 0 1rem 1rem;
}
.alignleft {
	float: left;
	margin: 0 1rem 1rem 0;
}
.aligncenter {
	display: block;
	margin: 1rem auto;
}

.gallery-caption {}

.bypostauthor {}

.sticky {}

/******************
 * SITE HEADER
 *****************/ 
.site-header {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
	background-color: #FFF;
	position: relative;
	z-index: 1;
	padding: 1em;
}
.site-title {
	max-width: 15.375rem;
	margin: 0;
	font-size: 1.5em;
	letter-spacing: 0.75rem;
	text-align: center;
	text-transform: uppercase;
}
.logo-gallery {
	color: #999;
}
.site-title a {
	color: #222;
	text-decoration: none;
}
.menu-toggle {
	width: 3em;
	height: 3em;
	-moz-appearance: none;
	-webkit-appearance: none;
	flex: none;
	position: relative;
	border: 0;
	margin: 0;
	padding: 0;
	box-shadow: none;
	overflow: hidden;
	font-size: 1em;
}
.menu-toggle::before,
.menu-toggle-bar,
.menu-toggle::after {
	content: '';
	display: block;
	width: 141%;
	height: 2px;
	background-color: #000;
	position: absolute;
	left: 0;
	transform: translate3d(0,0,0) rotate(0deg);
	opacity: 1;
	transition: all 0.2s;
}
.menu-toggle::before {
	top: 0;
	transform-origin: left center;
}
.menu-toggle-bar {
	width: 100%;
	top: calc(50% - 1px);
	transform-origin: center;
}
.menu-toggle::after {
	bottom: 0;
	transform-origin: left center;
}
.menu-toggle.close-menu::before {
	transform: rotate(45deg);
}
.close-menu .menu-toggle-bar {
	transform: rotate(45deg);
	opacity: 0;
}
.menu-toggle.close-menu::after {
	transform: rotate(-45deg);
}
.menu-toggle:focus {
	box-shadow: 0 0 2px 2px hsla(180, 50%, 50%, 0.5);
	outline: 0;
}
.main-navigation {
	width: 100%;
}
.main-navigation,
.main-nav {
	display: none;
}
.main-navigation.visible,
.main-nav.visible {
	display: block;
}
.main-nav a {
	display: inline-block;
	position: relative;
	padding: 1em;
	letter-spacing: 0.125em;
	line-height: 1;
	text-transform: uppercase;
	transition: color 0.3s;
}
.main-nav a:hover {	
	text-decoration: none;
}
.current-menu-item a {
	font-weight: 500;
}
/*.current-menu-item a::before,
.current-menu-item a::after{
	content: '';
	display: block;
	width: 0.25rem;
	position: absolute;
	top: 0.625rem;
	bottom: 0.75rem;
	border: solid #999;
	border-width: 1px 0;
}
.current-menu-item a::before {
	left: 0;
	border-left-width: 1px;
}
.current-menu-item a::after {
	right: 0;
	border-right-width: 1px;
}*/
@media screen and (min-width: 38em) {
	.site-title {
		max-width: none;
		font-size: 2em;
	}
}
@media screen and (min-width: 50em) {
	.site-header {
		display: block;
		padding: 1em 0 0 0;
	}
	.site-title {
		margin: 0 0 0.5rem 0;
	}
	.menu-toggle {
		display: none;
	}
	.main-navigation {
		display: block;
	}
	.main-nav {
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
	}
	.main-nav a {
		display: block;
	}
}

/*****************
BASIC PAGE
*****************/
.page-header {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	width: 100%;
	position: relative;
}
.page-title {
	max-width: 48rem;
	border-bottom: 0.125rem solid #999;
	margin: 0 auto;
	padding: 2rem 0 0 0;
	color: #999;
	font-weight: 300;
	letter-spacing: 0.125em;
	text-transform: uppercase;
}
/*.post-thumbnail + .page-title {
	width: 100%;
	position: absolute;
	top: calc(50% - 5vw);
	right: 0;
	margin: 0;
	color: #FFF;
	font-size: 10vw;
	font-weight: 400;
	letter-spacing: 0.125em;
	text-align: center;
	text-shadow: 0 0.125rem 0 hsla(0, 0%, 0%, 0.4);
	text-transform: uppercase;
}*/
.page-content {
	max-width: 48em;
	margin: 0 auto;
	padding: 2em;
}
/*****************
HOME
*****************/
.hero {
	height: 56.25vw;
	position: relative;
	overflow: hidden;
	transform: translateZ(0) scale(1);
}
@media screen and (min-width: 50em) {
	.hero {
		transform: translateZ(-1px) scale(1.5);
	}
}
.hero-image {
	width: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	opacity: 0;
	transition: opacity 0.5s;
}
.hero-image.visible {
	opacity: 1;
	z-index: 2;
}
.featured-info {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	background-color: #FFF;
	position: relative;
	padding: 0 0 2em 0;
	z-index: 2;
	transform: translateZ(0) scale(1);
}
.hero-text {
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 3;
}
/*****************
ARTISTS
*****************/
.artists {
	padding: 0 2em 2em 2em;
}
.artist {
	margin: 0 0 2em 0;
}
.single-artist .artist {
	max-width: 56em;
	margin: 0 auto;
	padding: 2em;
}
.single-artist {
	
}
.artist img {
	display: block;
}
.artist-name {
	font-weight: 300;
}
.single .artist-name {
	margin: 0 0 0.5rem 0;
}
.single-work .artist-name {
	margin: 0;
	font-size: 1.25em;
}
.artists .artist-name {
	font-size: 1.25em;
}
.artist-lifespan {
}
.notable-sales-listings .artist-lifespan {
	padding: 0 0 0.125rem 0;
}
@media screen and (min-width: 30em) {
	.artists {
		display: flex;
		flex-flow: row wrap;
		justify-content: flex-start;
	}
	.artist {
		flex: 0 0 calc(50% - 2em);
		margin: 1em;
	}
}
@media screen and (min-width: 48em) {
	.artist {
		flex: 0 0 calc(33.3% - 2em);
	}
}
@media screen and (min-width: 64em) {
	.artist {
		flex: 0 0 calc(25% - 2em);
	}
}
/*****************
EXHIBITIONS
*****************/
.exhibition {
}
.archive .exhibition {
	margin: 0 0 3em 0;
}

.exhibition-header {		
	position: relative;	
}
.exhibition-image{
	display: block;
	width: 100%;
}
.exhibition-title {
	position: absolute;
	right: 0.5rem;
	bottom: 0;
	margin: 0;
	color: #FFF;
	font-size: 8vw;
	font-weight: 300;
	text-align: right;
	text-shadow: -0.125vw 0.125vw 0 hsla(0, 0%, 0%, 0.5);
}
.exhibition-title.dark {
	color: #000;
}
.exhibition-993 .exhibition-title,
.exhibition-994 .exhibition-title {
	font-size: 6vw;
}
.exhibition-subtitle {
	display: block;
	font-size: 4vw;
}
.exhibition-excerpt {
	
}
.exhibition-content {
	max-width: 48em;
	margin: 0 auto;
	padding: 2em;
}

.latest.exhibition .exhibition-title {
	position: relative;
	bottom: 0; 
	right: 0;
	margin: 0 0 0.625em 0;
	color: #222;
	font-size: 1.6em;
	text-align: left;
	text-shadow: none;
}
.latest.exhibition .exhibition-subtitle {
	font-size: 0.8em;
}
.latest.exhibition .exhibition-content {
	padding: 2em 0;
}
.latest.exhibition {
	padding: 0 2em 2em 2em;
}
@media screen and (min-width: 52.1em) {

	.latest.exhibition {
		display: flex;
		flex: 0 0 100%;
		justify-content: space-between;
		align-items: center;
		padding: 0 2em;
	}
	.latest.exhibition .exhibition-image {
		flex: 0 0 calc(40% - 1em);
	}

	.latest.exhibition .exhibition-content {
		flex: 0 0 calc(60% - 1em);
	}
}


/*****************
WORKS
*****************/
.works,
.works-by-artist,
.notable-sales-listings {
	padding: 2em;
}
.notable-sales-listings {
	max-width: 56em;
    margin: 0 auto;
	font-family: 'adobe-garamond-pro', serif;
}
.works .works-by-artist {
	width: 100%;
	padding: 2em 0;
}
.works-by-artist .artist-name {
	width: 100%;
	margin: 0 0 0.25rem 0;
}
.work {
}
.single-work .work {
	max-width: 48em;
	margin: 0 auto;
	padding: 2em 2em 4em 2em;
}
.sold.work {
	position: relative;
	padding: 0 0 2em 0;
}
.single-artist .sold.work::after {
	content: 'sold';
	background-color: hsla(0, 0%, 0%, 0.8);
	position: absolute;
	top: 0;
	right: 0;
	padding: 0.5rem;
	color: #FFF;
}
.work-title {
	font-weight: 300;
}
.sold .artist-name {
	margin: 0.125rem 0;
	padding: 0;
}
.sold .work-title {
	margin: 0 0 0.125rem 0;
}
.single-work .work-title {
	margin: 0;
	font-size: 1.25em;
}
.notable-sales-listings .work-title {
	font-style: italic;
	font-weight: 300;
}
.work-info {
	padding: 0 0.25rem;
	line-height: 1.25;
}
.single-work .work-info {
	padding: 0.5em 0.25em;
}
.works .navigation {
	width: 100%;
}

@media screen and (min-width: 40em) {
	.works-by-artist {
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		
	}
	.works-by-artist .work {
		flex: 0 0 calc(50% - 2em);
		margin: 1em;
	}
	.works .work-title,
	.works-by-artist .work-title {
		font-size: 1.25em;
	}
	.sold.work {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		align-items: flex-start;
		padding: 2em 0;
	}
	.sold.work:first-child {
		padding-top: 0;
	}
	.sold .post-thumbnail {
		flex: 0 0 calc(60% - 1em);
	}
	.sold .work-info {
		flex: 0 0 calc(40% - 1em);
	}
}
@media screen and (min-width: 48em) {
	.works-by-artist .work {
		flex: 0 0 calc(33.3% - 2em);
	}
}
@media screen and (min-width: 64em) {
	.works-by-artist .work {
		flex: 0 0 calc(25% - 2em);
	}

}

/*****************
NEWS
*****************/
.posts {
	padding: 2em;
}
.post {
	max-width: 48em;
	margin: 0 auto;
	padding: 2em;
}
.posts .post {
	border: solid #999;
	border-width: 0 0 1px 0;
	margin: 0 auto 2em auto;
	padding: 0 0 1em 0;
}
.posts .post:last-child {
	border-width: 0;
}
.entry-title {
	margin: 0.25rem 0;
	font-weight: 300;
}
.entry-pubdate {
	display: block;
}
.entry-content {
	width: 100%;
	flex: none;
	margin: 1em 0 0 0;
}
.post-navigation {
	max-width: 52em;
	margin: 0 auto;
	padding: 2em;
}
.nav-links {
	display: flex;
	flex-flow: row-reverse wrap;
	justify-content: space-between;
	align-items: center;
}

@media screen and (min-width: 50em) {
	.posts .post {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		align-items: center;
	}
	.posts .post-thumbnail {
		flex: 0 0 calc(25% - 1em);
	}
	.posts .post-thumbnail + .entry-header {
		flex: 0 0 calc(75% - 1em);
	}

}
/*****************
SITE FOOTER
*****************/
.site-footer {
	padding: 1em 2em;
}
.contact-info {
	font-size: 0.8em;
	line-height: 1.4;
	text-transform: uppercase;
}
.contact-info span {
	display: block;
}
@media screen and (min-width: 50em) {
	.contact-info {
		letter-spacing: 0.125em;
		text-align: center;
	}
	.contact-info span {
		display: inline-block;
	}
	.contact-info span::after {
		content: '\a0|';
	}
	.contact-info:last-child::after {
		content: '\a0';
	}
}

/*****************
ACCESSIBILITY
*****************/
.screen-reader-text {
	border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	-webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	        box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-weight: bold;
	height: auto;
	line-height: normal;
	padding: 15px 23px 14px;
	position: absolute;
	left: 5px;
	top: 5px;
	text-decoration: none;
	width: auto;
	z-index: 100000; /* Above WP toolbar */
}