/*
	* Gridless version 2.0

	* Credit is left inline and big thanks to Nicolas Gallagher and Jonathan Neal

	* Across this document we use safe CSS hacks: http://mathiasbynens.be/notes/safe-css-hacks
	* Selectors beggining with an underscore (_selector: property) target only IE6
	* Selectors beggining with an asterisk (*selector: property) target only IE6 and IE7
*/

/* HTML5 display definitions
---------------------------------------- */

@font-face {
    font-family: 'Union';
    src: url('fonts/Union-Italic.eot');
    src: url('fonts/Union-Italic.eot?#iefix') format('embedded-opentype'),
        url('fonts/Union-Italic.woff2') format('woff2'),
        url('fonts/Union-Italic.woff') format('woff'),
        url('fonts/Union-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Union';
    src: url('fonts/Union-Regular.eot');
    src: url('fonts/Union-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/Union-Regular.woff2') format('woff2'),
        url('fonts/Union-Regular.woff') format('woff'),
        url('fonts/Union-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal; 
}


article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

/* Corrects inline-block not defined in IE6/7/8 and FF3 */
audio, canvas, video {
	display: inline-block;
	*display: inline;
	*zoom: 1;
}

audio:not([controls]) {
	display: none;
}

/* Ensures content is hidden from all presentations, including screenreaders */
[hidden] {
	display: none;
	visibility: hidden;
}

/* Base structure
---------------------------------------- */

/*
	* The body will work like a 'div#wrapper' (for this to work, the 'body' needs to have a set width)

	* To add a background to the PAGE, set it in the 'html' element
	* To add a background to the WRAPPER, set it in the 'body' element
*/
html {
	height: 100%;
	font-size: 110%;
	overflow-y: scroll; /* Force a scrollbar in non-IE */
	-webkit-text-size-adjust: 100%; /* Prevent iOS text size adjust on orientation change without disabling user zoom */
	-ms-text-size-adjust: 100%;
}

body {
	margin: 0 auto;
	min-height: 100%;
}

/* Fonts settings based on the 100E2R standard: http://www.informationarchitects.jp/en/100e2r/ */
body, button, input, select, textarea {
	font: 1em/1.625 Georgia, serif;
	color: #222; /* Full black on white is too much contrast, #222 is a better default */
}

/* Add and/or remove tags as your baseline grid needs */
p, blockquote, q, pre, address, hr, code, samp, dl, ol, ul, form, table, fieldset, menu, h4, h5, h6, img, figure, figcaption, button, hr {
	margin: 0 0 1.625em;
}

/* Headings/small
---------------------------------------- */

/*
	* Font sizes are based on the golden ratio of 16
	* See this for the modular scale: ow.ly/5jGl6
	* Line-heights and margins are adjusted to keep a 26px (1.625em) vertical rhythm across elements
*/

h1, h2, h3, h4, h5, h6 {
	font-family: Palatino, 'Palatino Linotype', 'Book Antiqua', FreeSerif, Georgia, serif;
	font-size: 1em;
	font-weight: bold;
}

h1 {
	font-size: 4.25em; /* 68px */
	line-height: 1.1471em;
	margin: 0 0 0.3824em;
}

h2 {
	font-size: 2.625em; /* 42px */
	line-height: 1.2381em;
	margin: 0 0 0.619em;
}

h3 {
	font-size: 1.625em; /* 26px */
	line-height: 1em;
	margin: 0 0 1em;
}

small {
	font-size: 0.625em; /* 10px */
	margin: 0 0 2.6em;
}

/* Preformatted text and code
---------------------------------------- */

/* Allows line wrapping of 'pre' */
pre {
	white-space: pre;
	white-space: pre-wrap;
	word-wrap: break-word;
}

pre, code, kbd, samp {
	font: 1em/1.625em Menlo, Consolas, 'DejaVu Sans Mono', Monaco, 'Courier New', Courier, monospace;
}

/* Tables
---------------------------------------- */

table {
	border-collapse: collapse;
	border-spacing: 0;
}

th {
	text-align: left;
}

tr, th, td {
	padding-right: 1.625em;
}

/* Forms
---------------------------------------- */

form {
	margin: 0;
}

fieldset {
	border: 0;
	padding: 0;
}

textarea {
	overflow: auto;
	vertical-align: top;
}

legend {
	border: 0;
	*margin-left: -7px;
}

button, input, select, textarea {
	vertical-align: baseline;
	*vertical-align: middle;
}

button, input {
	line-height: normal;
	*overflow: visible;
}

button, input[type="button"], input[type="reset"], input[type="submit"] {
	cursor: pointer;
	-webkit-appearance: button;
}

input[type="checkbox"], input[type="radio"] {
	box-sizing: border-box;
}

input[type="search"] {
	-webkit-appearance: textfield;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}

input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

button::-moz-focus-inner, input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

/* Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7 */
table button, table input {
	*overflow: auto;
}

/* Quotes
---------------------------------------- */

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

blockquote, q, cite {
	font-style: italic;
}

blockquote {
	padding-left: 1.625em;
	border-left: 1px solid #ddd;
}

blockquote > p {
	padding: 0;
}

/* Lists
---------------------------------------- */

ul, ol {
	list-style-position: inside;
	padding: 0;
}

li ul, li ol {
	margin: 0 1.625em;
}

dl dd {
	margin-left: 1.625em;
}

/* Links
---------------------------------------- */

a, a:visited {
	text-decoration: none;
	color: #06c;
}

a {
	border-bottom: 2px solid transparent;
	transition: border-bottom 0.6s;
}

a:hover {
	border-bottom: 2px solid;
}

a:focus {
	outline: thin dotted;
}

/* Better CSS outline suppression: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active {
	outline: none;
}

/* Figures
---------------------------------------- */

figure {
	margin: 0;
}

/* Embedded content
---------------------------------------- */

img, object, video {
	max-width: 100%; /* Automatically scales images larger than the container. Consider this first: http://unstoppablerobotninja.com/entry/fluid-images/ */
	/* _width: 100%; /* IE6 doesn't support max-width, so we just use width. If the image is larger than the container, just uncomment this. If it is smaller than the container, uncomment and change the 100% value to an absolute one */
}

img {
	border: 0;
	-ms-interpolation-mode: bicubic; /* Improve IE's resizing of images: css-tricks.com/ie-fix-bicubic-scaling-for-images */
}

/* Corrects overflow displayed oddly in IE9 */
svg:not(:root) {
	overflow: hidden;
}

/* Abbreviations
---------------------------------------- */

abbr[title], dfn[title] {
	border-bottom: 1px dotted;
	cursor: help;
}

/* Marked/inserted/deleted text
---------------------------------------- */

mark {
	background: #ff0;
}

ins {
	text-decoration: none;
	background: #ff9;
}

del {
	text-decoration: line-through;
}

/* Others
---------------------------------------- */

hr {
	display: block;
	height: 1px;
	border: 0;
	border-bottom: 1px solid #ddd;
}

strong, b, dt {
	font-weight: bold;
}

dfn {
	font-style: italic;
}

var, address {
	font-style: normal;
}

/* Position 'sub' and 'sup' without affecting line-height: gist.github.com/413930 */
sub, sup {
	font-size: 0.625em;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

/* Helper classes
---------------------------------------- */

/*
	* Micro clearfix hack, more semantically titled with 'group'
	* Source: nicolasgallagher.com/micro-clearfix-hack/
*/
.group:before, .group:after {
	content: "";
	display: table;
}

.group:after {
	clear: both;
}

.group {
	*zoom: 1;
}

/* Primary styles
---------------------------------------- */

#products {margin-top: 70px;padding-top:0px;}
.item {float:left;width:50%;position:relative;} 

x.popover {cursor: url("http://mystic-sister.ca/nose.png"), auto !important;} 

.popover {position: absolute;top:0px;width:96%;bottom:8%;background:red;display:none;}
.item:hover .popover {display:block;}
.item img {width:96%;margin-bottom:8% !important;} 
.popover span {display:inline-block;padding:4%;}
.popover img.warn {float:left !important;width: 80px !important;margin-top:10px !important;margin-bottom:6px !important;position:relative !important;}
.ml {position:absolute;bottom:3%;left:4%;}
.ing li {list-style-type: none;padding-bottom:4px;padding-top:5px;border-bottom:2px white solid;font-size:1vw;line-height:1vw;}
.ing li:last-child {border:0px !important;}
.desc {display:block;position:absolute;left:51%;right:0%;top:8%;}
.ing {display:block;position:absolute;left:0%;width:30%;top:8%;}
.desc span,.texty {font-size:1.15vw;padding:0px;line-height:1.35vw;}

.cart-thumb {width: 140px !important;transform:rotate(96deg) skew(6deg) translate(-52px,0%);position:absolute;}

.item-count {width:50px;appearance:none !important;border:2px solid red !important;background: transparent;} 

.hidden {
	opacity:0;
	pointer-events: none;
}

.input-group.hidden {
	opacity:1;
}
.input-group.hidden .minus-item,
.input-group.hidden .plus-item {
	opacity:0;
}

.input-group.hidden .item-count {
	border:0px !important;
}

.input-group.hidden::before {
	content: "×";
}
.input-group.hidden::after {
	content: "=";
}

#order-now,#send-order {
	appearance: none !important;
	background: red;
	color: white !important;
	float: right;
	border: 0px !important;
	padding: 6px;
	padding-bottom: 5px;
}

.checkout-notice a,.sc-notice a{
	color: white !important;
	border-bottom: 2px solid white !important;
}

.checkout-notice,.sc-notice {
	display: block;
	background: red;
	padding: 12px;
	color: white !important;
	width: 33% !important;
	float: right !important;
	margin: 0px !important;

	line-height: 1.25;
    font-size: small;
}

.disable {pointer-events: none;}

#name,#email {
	appearance: none !important;
	background: transparent !important;
	border: 0px !important;
	border-bottom: 2px solid red !important;
	display: inline-block;
	width: 100%;
	color: red !important;
}

#checkout textarea {display: none;} 

#checkout form div {
 width: 30%;
 float: left;
 margin-right: 3%;
}

table button {
	appearance: none !important;
	background: transparent !important;
	border: 0px !important;
}

table {width:100% !important;}
.input-group,.delete-item {
	  position: relative;
    top: 14px;

}
tr {border-bottom: 2px solid red;}

.item img {
    float:left;
}

#products .item:nth-child(even) img {
    float:right;
}

#products .item:nth-child(even) .popover {
    left:4%;
}

@media only screen and (max-width: 768px) {
	.item {float:left;width:100%;position:relative;cursor:pointer;} 
	.item img {width:100% !important;margin-bottom:8% !important;} 
	.popover {left:0px !important;position: absolute;top:0px;width:100% !important;bottom:8%;background:red;display:none;}
	.popover img.warn {width: 65px !important;}
	.ing li {font-size:1.8vw;line-height:1.8vw;}
	.desc span,.texty {font-size:2vw;padding:0px;line-height:2.25vw;}
}

.texty {font-size:14px !important;} 

.popover img {    
	position: absolute;
    width: 100% !important;
}


@media only screen and (max-width: 500px) {
	section {padding:0px !important;}
	.item img {width:100% !important;margin-bottom:0% !important;} 
	#about-panel .item img {margin-bottom: 20px !important;}
	.popover {position: absolute;top:0px;width:100%;bottom:0%;background:red;display:none;}
	.item {-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */}

nav {padding-left: 20px !important;padding-right: 20px !important;}                                  

}

.order-panel * {font-family: Union !important;}


.lock {
	overflow: hidden !important;
}

 #about-panel {
 	position: fixed;
 	top:0px;
 	bottom:0px;
 	left:0px;
 	right:0px;
 	background: white;
 	z-index: 999999;
 	display:none;
 	overflow: auto !important;
 	padding:4%;
 	color: red !important;
 }

.add-to-cart {
	font-size: 12px !important;margin-left:6px !important;
	padding-top: 4px;border: 0px !important;position:relative;top:-2px;
}

nav button {font-family: "Union" !important;appearance:none !important;background:transparent !important;border:0px !important;
border-bottom: 2px solid transparent !important;transition: border-bottom 0.6s;
padding:0px !important;margin:0px !important;}

nav button:hover {
	border-bottom: 2px solid !important;
}

  .order-panel {
 	position: fixed;
 	top:0px;
 	bottom:0px;
 	left:0px;
 	right:0px;
 	background: white;
 	z-index: 999999;
 	display:none;
 	overflow: auto !important;
 	padding:4%;
 }

* {
	color: red !important;
	box-sizing: border-box !important;
	font-family: Union;
	font-kerning: normal;
	outline: none !important;
	letter-spacing: .01em;
	-webkit-font-smoothing: antialiased;
}

* .popover,* .popover *  {color: white !important;font-family: Union !important;}

* #about-panel,* #about-panel *  {color: #494038 !important;font-family: Union !important;}

.material-icons {
	font-size: inherit; 
	font-size: inherit !important;
    line-height: inherit !important;
    position: relative;
    top: 2px;
}

a {font-family: Union !important;color:red !important;}

img {
	max-width: 9999%;
	display: block;
	margin: 0px;
}

.left {float:left;}
.right {float:right;}

.Left {float:left;}
.Right {float:right;}

section {
	padding: 4%;
	line-height: 1.4;
	position: relative;
}

section::after {
  content: "";
  clear: both;
  display: table;
}

nav {
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	background: white;
	height: 70px;
	line-height: 70px;
	padding-left: 4%;
	padding-right: 4%;
	z-index: 999999;
}

#scrim {
	left: 0px;
	width: 100%;
	position: absolute;
	top: -499px;
	height: 500px;
	background: #F0FAF1;
	z-index: 9999999;
}

#hero {
	text-align: center;
	font-weight: normal !important;
	margin-top: 0px;
	margin-bottom: 60px;
	position: relative;
	z-index: 9999999;
}

#hero2 {
	display:none;
	position: absolute;
	top: 50%;
	transform: translate(0,-50%);
	left: 0px;
	width: 100%;
	text-align: center;
	font-weight: normal !important;
	margin-top: 0px;
	margin-bottom: 0px;
	z-index: -1;
}

.stuck #hero2 {
	display: block;
}

#header {
	margin-top: 30px;
}

p {
	margin-bottom: 0px;
}

.project-image {
	width: calc(50% + 2%);
}

.project-details {
	width: calc(50% - 6%);
}

.project-image img {
	width: 100% !important;
	height: auto !important;
}

.project-padding {
	position: relative;
}

.project-details.Left .project-padding {
	padding-right: 10%;
}

.project-details.Right .project-padding {
	padding-left: 10%;
}

.project-details.Right {
	position: absolute;
	right: 4%;
	top: 50%;
	transform: translate(0,-50%); 
}

.project-details.Left {
	position: absolute;
	left: 4%;
	top: 50%;
	transform: translate(0,-50%); 
}

h2 {
    line-height: 1.0em;
    margin: 0 0 0.2em;
}

.button {
	display: inline-block;
	border: 1px solid !important;
	padding: 4px 12px 3px 8px;
	margin-top: 20px;
}

.nopacity {
	opacity: 0;
}

#email-sm {
	display:none;
}

.grid-sizer,
.grid-item {
	width: calc(50% - 2%);
	float: left;
	margin-bottom: 0%;
}
.gutter-sizer {
	width: 4%;
}
.double {
	width: 100%;
}

.single-section {
	margin-top: 30px;
}

.grid-item img {
	width: 100%;
	height: auto;
}

.grid-item {
	margin-bottom: 4%;
}

.project-long img {
	width: 100% !important;
	height: auto !important;
}

div.project-long p:first-child img {
	margin-bottom: 14px;
}

div.project-long p:last-child img {
	margin-top: 14px;
}

.project-single-title {
    margin-top: 3%;
    margin-bottom: 4%;
    display: inline-block;
    float: right;
}

.project-grid {
	margin-top: 4%;
}

.project-sections img,
.project-sections h2 {
	cursor: pointer;
}

.project-sections,
.project-sections img,
.single-section img {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

#mobile-bio {
	display: none;
}

#bio a,#mobile-bio a {
	overflow-wrap: break-word;
  	word-wrap: break-word;
}

.theyear {
    display: inline-block;
    margin-left: 8px;
}


/* Media queries
---------------------------------------- */

/* The media queries included in here are only placeholder. Modify them as your content requires */


@media only screen and (min-width: 1500px) {
	#email,#cv {
		font-size: 24px;
	}
	#hero2 {
		font-size: 36px;
	}
}

@media only screen and (min-width: 1300px) {
	html {
		font-size: 1.3vw;
	}
}


@media only screen and (max-width: 900px) {
	html {
		font-size: 94%;
	}
}

@media only screen and (max-width: 850px) {
	x#email {display:none;}
	#email-sm {display:inline-block;}
	html {
		font-size: 92%;
	}
}

@media only screen and (max-width: 768px) {
	html {
		font-size: 90%;
	}
	.project-details.Left,.project-details.Right {
		float: left;
		width: 100%;
		position: relative;
		top: auto;
		right: auto;
		left: auto;
		transform: none;
		padding-bottom: 40px;
	}
	.project-image.Left,.project-image.Right {
		float: right;
		width: 100%;
	}
	.project-details.Left .project-padding,.project-details.Right .project-padding {
		padding-left: 0px;
		padding-right: 0px;
	}
	.grid-sizer,
	.grid-item {
		width: 100%;
		float: left;
		margin-bottom: 0%;
	}
	.gutter-sizer {
		width: 0px;
	}
	.grid-item {
		margin-bottom: 40px;
	}
	#mobile-bio {
		display: block;
	}
	#bio {
		display: none;
	}
	section {
		padding: 40px;
	}
	.project-single-title {
	    margin-top: 30px;
	    margin-bottom: 40px;
	}
	nav {
		padding-left: 40px;
		padding-right: 40px;
	}

}

@media only screen and (max-width: 320px) {
	#email-sm, #cv {
		display: none;
	}
}


/* Print styles
---------------------------------------- */

/* Print styles inlined to avoid extra HTTP connection */

@media print {
	* {
		background: transparent !important;
		color: black !important; /* Black prints faster: sanbeiji.com/archives/953 */
		text-shadow: none !important;
		filter: none !important;
		-ms-filter: none !important;
	}

	a, a:visited {
		text-decoration: underline;
	}

	a[href]:after {
		content: " (" attr(href) ")";
	}

	abbr[title]:after {
		content: " (" attr(title) ")";
	}

	/* Do not show javascript and internal links */
	a[href^="javascript:"]:after, a[href^="#"]:after {
		content: "";
	}

	/* Printing Tables: css-discuss.incutio.com/wiki/Printing_Tables */
	thead {
		display: table-header-group;
	}

	tr, img {
		page-break-inside: avoid;
	}

	@page {
		margin: 0.5cm;
	}

	p, h2, h3 {
		orphans: 3;
		widows: 3;
	}

	h2, h3 {
		page-break-after: avoid;
	}
}

.show-cart td.thumbcell {width:150px !important;}

@media only screen and (max-width: 750px) {
#checkout form div {width: 100% !important;margin:0px !important;}
.show-cart td,.show-cart td.thumbcell {display:block;width:100% !important;}
.cart-thumb {right: 0px;top: 30px;}
.sub,.subtitle {display:none !important;}
#checkout form div.checkout-notice {margin-top:52px !important;}
.sc-notice {width: 100% !important;}
}