/* UNIVERSAL STYLES */


/* Remove browser defaults */
* {
	margin: 0;
	padding: 0;
	border: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* Prevent weird bg problems on mobile Safari */

html, body {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	height: 100%;

}

button:focus {outline:0 !important;}

/* BODY */

/* When the width gets sufficiently small, we should remove the upper margin.  Sadly, CSS bugs out here and we need to use a workaround. */


body {
	padding: 0rem 0rem 0rem 0rem;
	overflow-y: overlay;
	overflow-x: auto;
	margin: 0 0 0 0;
	background: rgb(248, 240, 235);
	color: rgb(50, 31, 21);
	font-family: 'pt-sans', sans-serif;
}


/* SECTION / DIV */

.belowFold {
	padding: 2em 0% 4em 0%;
	margin-bottom: 1em;
	/* Gradient from http://lea.verou.me/ */
	background: 
		linear-gradient(135deg, #F8F0EB 25%, transparent 25%) -50px 0,
		linear-gradient(225deg, #F8F0EB 25%, transparent 25%) -50px 0,
		linear-gradient(315deg, #F8F0EB 25%, transparent 25%),
		linear-gradient(45deg, #F8F0EB 25%, transparent 25%);
	background-size: 100px 100px;
	background-attachment: scroll;
	background-color: #FAF4F0;
	width: 100%;
	margin: 0;
	height: 100%;
	overflow: hidden;
	position: relative;
}


/* HEADER */

header {
	font-size: 1em;
	letter-spacing: .05em;
	position: absolute;
	top: 0;
	left: 0;
	text-align: center;
	width: 100%;
	z-index: 4;
}

header ul {
	margin: 0;
	padding: 0;
	display: inline-block;
}

header li {
	color: rgb(72, 69, 34);
	font-family: 'Fjalla One', sans-serif;
}

header #mainMenu {
	background: rgba(248, 240, 235,.8);
	width: 100%;
}

header #mainMenu li {
	display: inline-block;
	text-transform: uppercase;
	padding: 0em .9em;
}

header #smallMenu {
	display: none;
}

header #smallMenu a {
	-webkit-transition: -webkit-transform .5s;
	-moz-transition: -moz-transform .5s;
	transition: transform .5s;
}

header #smallMenu a:hover, a:focus {
	color: rgb(139, 45, 59);
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	transform: scale(1.05);
	-webkit-transform-origin-x: left;
	-moz-transform-origin-x: left;
	transform-origin-x: left;
}

@media (min-height: 28rem) and (max-width: 50rem) {
	header #smallMenu {
		background: rgba(248, 240, 235,.8);
		-webkit-transition: width 0.6s, height .6s, border-radius .6s, background-color 1.1s;
		-moz-transition: width 0.6s, height .6s, border-radius .6s, background-color 1.1s;
		transition: width 0.6s, height .6s, border-radius .6s, background-color 1.1s;
		-webkit-transition-delay: .6s, 0s, 0s, 1s;
		-moz-transition-delay: .6s, 0s, 0s, 1s;
		transition-delay: .6s, 0s, 0s, 1s;
		text-align: right;
		overflow: hidden;
		font-size: 1.1em;
	}



	#smallMenu.contracted {
		margin: 0 0 0 auto;
		background: rgba(248, 240, 235,.8);
		width: 4em;
		height: 4em;
		border-bottom-left-radius: .4em;
	}

	#smallMenu.expanded {
		width: 16rem;
		max-width: 90vw;
		height: 60rem;
		max-height: 100vh;
		background: rgb(248, 240, 235);
		/*border-left: 2px solid rgb(72, 69, 34);
		border-bottom: 2px solid rgb(72, 69, 34);*/
		border-top-left-radius: .4em;
		-webkit-transition-delay: .6s, 0s, .2s, 0s;
		-moz-transition-delay: .6s, 0s, .2s, 0s;
		transition-delay: .6s, 0s, .2s, 0s;
		box-shadow: 0px 0px 1px 2px rgb(72, 69, 34);
		overflow-y: auto;
	}

	.slideToTheLeft {
		-webkit-transform: translateX(-14rem);
		transform: translateX(-14rem);
		-webkit-transition: -webkit-transform .7s .4s cubic-bezier(.63,-.03,.5,.94);
		-moz-transition: -moz-transform .7s .4s cubic-bezier(.63,-.03,.5,.94);
		transition: transform .7s .4s cubic-bezier(.63,-.03,.5,.94);
	}

	.slideToTheRight {
		-webkit-transform: translateX(0rem);
		transform: translateX(0rem);
		-webkit-transition: -webkit-transform .7s 0 cubic-bezier(.63,0.0,.84,.82);
		-moz-transition: -moz-transform .7s 0 cubic-bezier(.63,0.0,.84,.82);
		transition: transform .7s 0 cubic-bezier(.63,0.0,.84,.82);
	}


	#smallMenu #smallMenuBottom {
		-webkit-transition: all 2s;
		-moz-transition: all 2s;
		transition: all 2s;
		transition-delay: 2s;
	}

	#smallMenuBottom a {
		padding-top: .51em;
		padding-bottom: .51em;
	}

	#smallMenu.contracted #smallMenuBottom {
		-webkit-transform: translateX(40rem);
		transorm: translateX(40rem);
		-webkit-transition: -webkit-transform .7s 0s cubic-bezier(.29,.67,.09,.82);
		-moz-transition: -moz-transform .7s 0s cubic-bezier(.29,.67,.09,.82);
		transition: transform .7s 0s cubic-bezier(.29,.67,.09,.82);
	}
	#smallMenu.expanded #smallMenuBottom {
		-webkit-transform: translateX(.5rem);
		transorm: translateX(.5rem);
		-webkit-transition: -webkit-transform .8s .15s cubic-bezier(.29,.67,.09,.82);
		-moz-transition: -moz-transform .8s 0 .15s cubic-bezier(.29,.67,.09,.82);
		transition: transform .8s 0 .15s cubic-bezier(.29,.67,.09,.82);
	}

	header #smallMenu li {
		width: 100%;
		list-style-type: none;
		letter-spacing: .02em;
		word-spacing: .08em;
		font-size: 1.4em;
		padding-left: 0;
	}

	#smallMenu.contracted #menuShowLink {
		width: 100%;
		height: 3em;
		border-bottom: 2px solid transparent;
		text-align: left;
	}

	#smallMenu.contracted li:not(#menuShowLink) {
		opacity: 1;
		text-align: left;
		margin: .4em 0;
	}

	#smallMenu.expanded li:not(#menuShowLink) {
		opacity: 1;
		text-align: left;
		margin: .4em 0;
	}

	header #smallMenu li a {
		display: inline-block;
		padding-left: .7em;
		letter-spacing: .04em;
		width: 100%;
	}

	#smallMenu #menuShowLink a {
		padding-top: .2em;
		padding-bottom: .2em;
	}


	#smallMenu #menuShowLink a {
		height:100%;
	}

	#smallMenu #menuShowLinkText {
		display: none;
	}

	#smallMenu .icon-menu-down, #smallMenu .icon-menu-up {
		font-size: 1.7em;
	}

	#smallMenu.expanded #menuShowLink {
		border-bottom: 2px solid rgb(72, 69, 34);
		text-align: left;
		height: 3em;
	}




	#smallMenu #menuShowLinkText {
		height: 0;
		width: 0;
		display: inline-block;
		visibility: hidden;
	}

}

/* landscape mode menu */

@media (max-height: 28rem) and (max-width: 50rem) {
	header #smallMenu {
		background: rgba(248, 240, 235,.8);
		-webkit-transition: width 0.5s, height .15s;
		-moz-transition: width 0.5s, height .15s;
		transition: width 0.5s, height .15s;
		-webkit-transition-delay: 0, .6s;
		-moz-transition-delay: 0, .6s;
		transition-delay: 0, .6s;
		text-align: right;
		font-size: 1.2em;
	}

	#smallMenu.contracted {
		margin: 0 0 0 auto;
		width: 4em;
		height: 4em;
		border-bottom-left-radius: 1em;
	}

	#smallMenu.expanded {
		width: 100vw;
		height: 16rem;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		background: rgba(248, 240, 235,.9);
		/*border-left: 2px solid rgb(72, 69, 34);
		border-bottom: 2px solid rgb(72, 69, 34);*/
		border-bottom-left-radius: 2px;
		-webkit-transition-delay: .2s, 0s;
		-moz-transition-delay: .2s, 0s;
		transition-delay: .2s, 0s;
		box-shadow: -1px 1px 1px 1px rgb(72, 69, 34);
	}


	.slideToTheLeft {
		-webkit-transform: translateY(16rem); /* May need to be adjusted later */
		-moz-transform: translateX(0rem);
		transform: translateY(16rem);
		-webkit-transition: -webkit-transform .5s;
		-moz-transition: -moz-transform .5s;
		transition: transform .5s;
	}

	.slideToTheRight {
		-webkit-transform: translateX(0rem);
		-moz-transform: translateX(0rem);
		transorm: translateX(0rem);
		-webkit-transition: -webkit-transform .7s .4s;
		-moz-transition: -moz-transform .7s .4s;
		transition: transform .7s .4s;
	}


	#smallMenu #smallMenuBottom {
		-webkit-transition: all 2s;
		-moz-transition: all 2s;
		transition: all 2s;
		transition-delay: 2s;
	}

	#smallMenuBottom a {
		padding-top: .2em;
		padding-bottom: .2em;
		display: inline-block;
		width: 100%;
	}

	header #smallMenu li {
		list-style-type: none;
		letter-spacing: .02em;
		word-spacing: .02em;
		font-size: 1.4em;
		-webkit-transition: all 0.5s .3s;
		-moz-transition: all 0.5s .3s;
		transition: all 0.5s .3s;
		padding-left: 0;
		display: inline-block;
	}


	#smallMenu.contracted li:not(#menuShowLink) {
		opacity: 0;
		-webkit-transition-delay: .1s;
		-moz-transition-delay: .1s;
		transition-delay: .1s;
	}

	#smallMenu.expanded li:not(#menuShowLink) {
		opacity: 1;
		width: 40%;
		margin: 0 3.333%;
		text-align: left;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	header #smallMenu li a {
		display: inline-block;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	#smallMenu #menuShowLink a {
		padding-top: .2em;
		padding-bottom: .5em;
		width: 100%;
	}

	#smallMenu.contracted #menuShowLink {
		padding-left: .7em;
	}

	#smallMenu.contracted #menuShowLinkText {
		display: none;
		border-bottom: 2px solid transparent;
	}

	#smallMenu.contracted .icon-menu-down, #smallMenu.expanded .icon-menu-up {
		font-size: 1.7em;
	}


	#smallMenu.expanded #menuShowLink {
		border-bottom: 2px solid rgb(72, 69, 34);
		text-align: center;
		display: block;
	}

	#smallMenu.expanded #menuShowLink a {
		padding-right: 7%; /* roughly offset the illusion of not being centered */
	}

	#smallMenu.expanded #menuShowLinkText {
		display: inline;
		line-height: 1;
		font-size: 1.5em;
	}

}

.backToTopLink {
	font-size: .8em;
}

@media (min-width: 50rem) {
	/* the browsers glitch out if the menu is open while the window is resized. This should fix the problem. */
	.slideToTheLeft {
		-webkit-transform: translate(0rem, 0rem);
		-moz-transform: translate(0rem, 0rem);
		transform: translate(0rem, 0rem);
		-webkit-transition: -webkit-transform .5s;
		-moz-transition: -moz-transform .5s;
		transition: transform .5s;
	}
	.backToTopLink { /* still show for screenreaders */
		height: 0;
		width: 0;
		overflow: hidden;
		display: block;
	}
}

@media (min-width: 70rem) and (max-width: 85rem) {
	header li {
		padding: .2em 1.5rem;
	}
}

@media (min-width: 50rem) and (max-width: 70rem) {
	header li {
		padding: .2em .5rem;
	}
}

/*
@media(max-width: 80rem) {
	html {
		padding-top: 0rem !important;
		margin-top: 0rem !important;
	}
	body {
		padding-top: 0rem;
		margin-top: 0rem;
	}
	header li:first-of-type {
		border-left-width: .1em;
	}
	header li {
		width: 33%;
	}
	header {
		position: relative;
		height: auto;
		margin-top: 0;
		padding-top: .7rem;
	}
}
*/
@media(max-width:50rem) {
	header {
		position: fixed;
		text-align: right;
		pointer-events: none;
	}
	header #mainMenu {
		display: none;
	}
	header #smallMenu {
		display: inline-block;
		pointer-events: auto;
	}
}

header li a {
	color: rgb(72, 69, 34);
	margin: 0;
	text-decoration: none;
	cursor: pointer;
}
#mainMenu li a {
	display: inline-block;
	padding: .3em .1em .2em .1em;
	transition: border .3s, color .3s;
}
#mainMenu li a:not(.menuIcon) {
	border-bottom: .3em solid rgba(139,45,59, 0);
}
#mainMenu li a.currentPageLink:not(.menuIcon) {
	border-bottom: .3em solid rgb(72, 69, 34);
}
#mainMenu li a:hover:not(.menuIcon) {
	border-bottom: .3em solid rgb(139,45,59);
	margin-bottom: 0em;
}
#mainMenu li a.menuIcon {
	font-size: 1.4em;
	min-width: 2em;
	padding: .2em .4em .5em .6em;
	margin: 0em 0em -.3em 0em;
	color: rgb(50, 31, 21);
	line-height: .7;
	font-weight: bold;
}
#mainMenu li a.menuIcon:hover {
	color: rgb(139,45,59);
}

/* FOOTER */

footer {
	text-align: right;
	width: 100%;
	font-size: .75em;
	clear: both;
}
footer ul {
	text-align: left;
	display: block-inline;
	margin-left: auto;
	margin-top: 2.5rem;
	padding-right: .75%;
	padding-bottom: .2rem;
	list-style-type: none;
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;
}
footer small {
	text-align: left;
}
footer a {
	color: #395561;
	font-weight: 500;
	text-decoration: none;
}
footer a:hover {
	color: rgb(139,45,59);
}

/* SPLASH STYLES */

.splash {
	position: relative;
	transition: height .7s cubic-bezier(.37,-0.09,.33,1.01);
}

@media(min-height: 40rem) {
	.splash:not(#homeSplash) .splashText {
		position: fixed;
		bottom: 25%;
		text-align: center;
		background-color: #FAF4F0;
		background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, #F8F0EB 35px, #F8F0EB 70px);
		border: 1.5em solid #F8F0EB;
	}
}

@media(max-height: 40rem) {
	.splash:not(#homeSplash) {
		height: 14em;
		padding-top: 6em;
		padding-bottom: 4em;
	}
	.splash:not(#homeSplash) .splashText {
		position: relative;
		margin: 0;
	}
}
@media(min-height: 40rem) and (max-height: 60rem) {
	.splash:not(#homeSplash) {
		height: 17em;
		padding-top: 6em;
		padding-bottom: 4em;
		margin-bottom: -5.5em;
	}
	.splash:not(#homeSplash) .splashText {
		padding: 2em 0;
	}
}
@media(min-height: 60rem) {
	.splash:not(#homeSplash) {
		height: 20em;
		padding-top: 6em;
		padding-bottom: 4em;
		margin-bottom: -5.5em;
	}
	.splash:not(#homeSplash) .splashText {
		padding: 2em 0;
	}
}
@media(max-height: 10rem) {
	.splash:not(#homeSplash) .splashText {
		display: none;
		margin: 0;
	}
}

.splashText {
	background: rgb(248, 240, 235);
	background: rgba(248, 240, 235, .7);
	background-attachment: fixed;
	width: 100%;
}

.splash p, #animatingParagraph {
	font-size: 1.2em;
	max-width: 90em !important;
	margin: 0 5rem 0 19rem;
	word-spacing: .15em;
	line-height: 2.3;
	width: 80%;
	text-align: left;
}
.splash p:last-child {
	margin-bottom: 5rem;
}

.splash p:after, #animatingParagraph:after {
	content: '';
	clear: both;
}

.splash p .firstWords, #animatingParagraph .firstWords {
	font-size: 1.5em;
	font-family: 'Bitter', 'Fjalla One', sans-serif;
	color: rgb(139,45,59);
	font-weight: bold;
	letter-spacing: 0em;
	line-height: 1.4;
	word-spacing: .3em;
	text-transform: uppercase;
}


/* PAGE SPECIFIC NAV (MOBILE) */

@media (min-width: 50em) {
	#mobilePageNavGrouping {
		display: none;
	}
}
@media (max-width: 50em) {
	#mobilePageNavGrouping {
		display: block;
	}
}


/* H(n) */

h1,h2,h3 {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1 {
	font-family: 'quatro-slab', sans-serif;
	color: rgb(72, 69, 34);
	font-weight: normal;
	font-size: 4em;
	margin: 2% 0;
	word-spacing: .24em;
	line-height: 1.9;
}
h2 {
	font-size: 1.9em;
	font-family: 'Bitter', 'Arvo', serif;
	margin: 0;
	letter-spacing: .01em;
	word-spacing: .35em;
	color: rgb(250, 244, 240);
	padding: .5em .1em .5em .1em;
	margin-top: .5em;
	margin-bottom: .5em;
	font-weight: normal;
	text-transform: lowercase;
	text-align: center;
}
h3 {
	font-family: 'Fjalla One', sans-serif;
	text-align: center;
	font-size: 1.55em;
	letter-spacing: .05em;
	word-spacing: .05em;
	padding: 0;
	margin: 0;
	margin-top: 2em;
	margin-bottom: 2em;
	color: rgb(72, 69, 34);
	text-transform: uppercase;
	transition: transform .2s;
}

h4 {
	background: rgb(72, 69, 34);
	color: rgb(243, 235, 227);
	font-family: 'Fjalla One', sans-serif;
	text-align: center;
	font-size: 1.4em;
	text-transform: uppercase;
	letter-spacing: .03em;
	word-spacing: .03em;
	padding: 3em 2em 5em 2em;
	line-height: 1.7;
	font-weight: bold;
}

h5 {
	font-family: 'Bitter', 'Arvo', serif;
	font-size: 1.05em;
	font-weight: 500;
	color: rgb(72, 69, 34);
	padding: 1em 0em 1em 0em;
	margin-top: 1.5em;
	margin-bottom: 1.75em;
	line-height: 1.7;
	letter-spacing: .03em;
	word-spacing: .03em;
	text-align: center;
}

h6 {
	font-family: 'Fjalla One', sans-serif;
	font-style: italic;
	font-size: 1.1em;
	font-weight: normal;
}

/* LIST */

.belowFold ul {
	font-size: 1em;
	line-height: 1.8;
	font-family: 'Fjalla One', sans-serif;
	position: relative;
	z-index: 1;
}
.belowFold ul li {
	margin-bottom: .05em;
}
.belowFold ul li:last-child {
	margin-bottom: 1em;
}

.belowFold ul.iconHeaded {
	list-style: none;
	padding-left: 0;
	padding-right: .5em;
}
.belowFold ul.iconHeaded li {
	margin-left: 4.8em;
	text-indent: -1.5em;
}
.belowFold ul.iconHeaded span[class^="icon-"] {
	color: rgb(139,45,59);
	margin-right: .3em;
	letter-spacing: 0;
	word-spacing: 0;
}

.pageSpecificNav > ul > li {
	margin-bottom: 1.1em;
	display: block;
	text-indent: 0 !important;
	margin-left: 0 !important;
}

.pageSpecificNav .soloChild li {
	width: 90%;
}

.pageSpecificNav .iconHeaded .iconHeaded li {
	width: 40%;
	display: inline-block;
	list-style: none;
	list-style-type: none;
	margin: 0 auto!important;
	text-indent: 0!important;
}

.pageSpecificNav .iconHeaded .iconHeaded {
	width: 100%;
	text-align: center;
	font-variant: small-caps;
}

.pageSpecificNav li {
	text-transform: capitalize;
}
.pageSpecificNav li a {
	padding: .15em;
	display: inline-block;
}

#mobilePageNavGrouping .column1center {
	margin: 0;
}

/* PARAGRAPH STYLES */

p, #animatingParagraph {
	font-family: 'fira-sans', serif;
	font-size: 1rem;
	line-height: 2.4;
	word-spacing: .05rem;
	font-weight: 400;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
	max-height: 99999px;
	z-index: 1;
	backface-visibility: hidden;
}

.bodyColumn p {
	margin-bottom: 1.25em;
	position: relative;
}

/* IMAGE STYLES */


/* COLUMN STYLES */


.bodyColumn {
	text-align: center;
	position: relative;
}

.bodyColumn.column2 {
	float: left;
	width: 39%;
	margin: 3rem 3% 1rem 8%;
}

.bodyColumn.floatR {
	float: right;
	margin-left: 3%;
	margin-right: 8%;
}

.bodyColumn .inner {
	padding: 2em 3em;
	background: rgba(250, 244, 240, .7);
	transition: background-color .5s;
	border: 3px solid rgb(250, 244, 240);
	border-radius: .4rem;
}

.bodyColumn .inner:hover {
	background: rgb(250, 244, 240);
}

/* On the normal layout, we want header columns to not fill the screen and to be slightly indented */

.bodyColumn.headerColumn:first-child {
	padding-top: 1.5rem;
}

.bodyColumn.headerColumn {
	float: left;
	width: 100%;
	padding-top: 3rem;
	margin: 0;
}

.bodyColumn.headerColumn .inner {
	background: linear-gradient(to bottom, #484522 0%,#4f4b25 100%) rgb(72, 69, 34);
	border-radius: 0rem;
	width: 100%;
	padding: 5rem;
}


@media screen and (max-width: 50rem) {
	h2 {
		color: rgb(72, 69, 34);
	}
	.bodyColumn.headerColumn .inner {
		background: rgb(250, 244, 240);
		padding: 1.5em .5em;
	}
}



.bodyColumn.column1center {
	float: left;
	width: 48%;
	margin: 3rem 26% 1rem 26%;
	text-align: justify;
	padding: 1em 2em 1em 2em;
}
.bodyColumn.fullPageCol {
	padding-left: 0;
	padding-right: 0;
	margin: 2rem 0 2rem 0;
	width: 100%;
}
.bodyColumn.fullPageCol .inner {
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
	width: 100%;
}
.bodyColumn.column2 .inner {
	text-align: justify;
}

.bodyColumn.column2 .inner p {
	margin-left: 0;
	margin-right: 0;
}

/* only show the "tell me more" button at full opacity if the user is hovering over the relevant column */

.bodyColumn .tellMeMore {
	display: block;
	margin: 0 auto;
}

@media screen and (min-width: 50em) {
	.bodyColumn .tellMeMore {
		opacity: .5;
		transition: opacity .2s ease;
	}
	.bodyColumn:hover .tellMeMore {
		opacity: 1;
	}

}



/* ASIDE DECORATION STYLES */


.bodyColumn aside {
	position: absolute;
	bottom: 30%;
	font-size: 10em;
	z-index: 0;
	opacity: 1;
	color: rgb(247, 238, 232);
	width: 90%;
	margin-right: 10%;
	text-align: center;
	transform: rotateZ(-10deg);
	transition: transform .5s;
}

.bodyColumn:hover aside {
	transform: rotateZ(10deg);
}



/* FORM STYLES */

form  {
	text-align: center;
	position: relative;
	z-index: 1;
}

form *:focus {
	outline: none;
}

form ul {
	list-style-type: none;
	list-style-position: outside;
	margin: 0;
	padding: 0;
}
form ul li {
	padding: 1em;
	position: relative;
}

form label {
	display: inline-block;
	float: left;
	margin-top: .3em;
	padding: .1em;
	font-size: 1em;
	padding-right: 1em;
	width: 30%;
	text-align: right;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

form label.labelForTextArea {
	width: 100%;
	text-align: center;
	margin-bottom: .9em;
}

form input {
	height: 2.5em;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 70%;
	font-family: 'Bitter', 'Arvo', serif;
	font-size: .95em;
	letter-spacing: .01em;
	color: rgb(50, 31, 21);
	word-spacing: .02em;
	line-height: 1.7;
	padding: .5em .8em .4em .8em;
	margin-bottom: 0em;
	background: rgb(248, 240, 235);
	border: 0px solid black;
	border-radius: .4rem;
	-moz-box-shadow: 1px 1px .2px .2px rgba(50, 31, 21, .5);
	-webkit-bot-shadow: 1px 1px .2px .2px rgba(50, 31, 21, .5);
	box-shadow: 1px 1px .2px .2px rgba(50, 31, 21, .5);
}
form input:after {
	content: '';
	clear: both;
}

form input:focus, form textarea:focus {
	background: rgb(243,239,236);
}

form textarea {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 98%;
	margin: 0 auto;
	border: 0px solid black;
	border-radius: .4rem;
	padding: .6em .6em;
	font-family: 'Bitter', 'Arvo', serif;
	color: rgb(50, 31, 21);
	font-size: .92em;
	letter-spacing: .02em;
	word-spacing: .05em;
	line-height: 1.8;
	background: rgb(248, 240, 235);
	-moz-box-shadow: 1px 1px .2px .2px rgba(50, 31, 21, .5);
	-webkit-bot-shadow: 1px 1px .2px .2px rgba(50, 31, 21, .5);
	box-shadow: 1px 1px .2px .2px rgba(50, 31, 21, .5);
}

.tellMeMore {
	text-align: center;
}

button {
	color: rgb(243,235,227);
	font-family: 'Fjalla One', sans-serif;
	font-size: 1.05em;
	margin: 0 auto;
	margin-top: 2em;
	border: 0px solid rgb(139,45,59);
	padding: .45em .7em .35em .5em;
	background: linear-gradient(to bottom, #8B2D3B 0%,#993240 100%) rgb(139,45,59);
	border-radius: .4rem;
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: .1em;
	word-spacing: .05em;
	cursor: pointer;
	transition: background .15s ease;
}

button:focus {
	outline:0;
	background: rgb(72, 69, 34);
}

form button {
	font-size: 1.15em;
	margin-top: 0;
}
button:hover {
	background: linear-gradient(to bottom, #484522 0%,#4f4b25 100%) rgb(72, 69, 34);
}

/* LOGO STYLE */

.logoAndName, .grapesAndName {
	font-weight: 500;
	color: rgb(139,45,59);
}
h2 .logoAndName, h2 .grapesAndName {
	font-weight: normal;
	color: rgb(72, 69, 34);
	text-transform: none;
}

h2 .logoAndName .tightenedLogoLetters, h2 .grapesAndName .tightenedLogoLetters {
	letter-spacing: .15em;
}

h2 .logoAndName span[class^="icon-"]:after, h2 .grapesAndName span[class^="icon-"]:after {
	content: "";
	font-size: .2em;
}

/* ICON STYLES */

.icon-custom {
	font-family: icomoon; /* :before is not always loaded quickly enough on page load, so manual entry is sometimes nec */
}

:not(.icon-headed) span[class^="icon-"], :not(.unShadowed) span[class^="icon-"] {
	text-shadow: .05px .05px .02px;
}

span[class^="icon-"]:after {
	content: "\00a0"; /*= */
	font-size: .2em;
}
#smallMenu span[class^="icon-"]:before {
	width: .7em;
}
#smallMenu span[class^="icon-"]:after {
	font-size: 1.2em;
	margin-right: .2em;
}

/* INLINE TEXT STYLES */


strong {
	letter-spacing: .05em;
	color: rgb(139,45,59);
	font-weight: 500;
}


.bodyColumn a {
	color: #395561;
	transition: color .08s ease;
	text-decoration: none;
	font-weight: 500;
}
.bodyColumn a:hover {
	color: rgb(139,45,59);
}

.column1center .firstWords {
	font-variant: small-caps;
	font-size: 1.1em;
	color: #211;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: .09em;
	margin-right: .05em;
}

/* MODAL STYLES */

#blurShader {
	pointer-events: none;
	position: fixed;
	visibility: hidden;
	opacity: 0;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(50, 31, 21, .25);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	z-index: 1000;
}

#blurShader.show {
	opacity: 1;
	visibility: visible;
}


/*only blur on computers/laptops*/

@media screen and (min-width: 60em) {
	.belowFold {
		-webkit-filter: initial;
		-moz-filter: initial;
		filter: initial;
		transition: all .3s 0s;
	}
	.belowFold.blurred {
		-webkit-transform: translate3d(0,0,0);
		-webkit-filter: blur(2px);
		-moz-filter: blur(2px);
		filter: blur(2px);
		transition: all .1s .45s !important;
	}
}

.modal.detached {
	visibility: hidden;
	pointer-events: none;
	position: fixed;
	padding: 0 0 0 0;
	top: 10%;
	left: 20%;
	right: 20%;
	float: left;
	z-index: 2000;
	font-size: .95em;
}

.modal.detached.small {
	top: 30%;
	bottom: 30%;
}

.modal.detached.show {
	visibility: visible;
	pointer-events: auto;
}

.modal.detached > div {
	border: .2em solid rgb(72, 69, 34);
	-webkit-transform: translateX(-20%);
	-moz-transform: translateX(-20%);
	-ms-transform: translateX(-20%);
	transform: translateX(-20%);
	width: 100%;
	opacity: 0;
	-webkit-transition: all .3s cubic-bezier(0.25, 0.5, 0.5, 0.9); /* effect adapted from tympanus.net */
	-moz-transition: all .3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
	transition: all .3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
	z-index: 12;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background: rgb(243, 235, 227);
	float: left;
}

.modal.detached .menu {
	width: 100%;
	text-align: center;
	padding: 0em .5em 0em .5em;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background: rgb(72, 69, 34);
}

.modal.detached .menu ul {
	list-style: none;
	text-align: center;
	overflow: hidden;
}

.modal.detached .menu li {
	display: inline-block;
	border-top: .2em solid rgb(243, 235, 227);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.modal.detached .menu li:hover {
	background: rgb(139,45,59);

}


.modal.detached .menu a {
	font-family: 'Fjalla One', sans-serif;
	font-size: 1.0em;
	text-decoration: none;
	color: rgb(243, 235, 227);
	display: inline-block;
	border: 0px solid rgb(139,45,59);
	padding: .8em .8em .8em .8em;
	margin: 0 .075em;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: .1em;
	word-spacing: .05em;
	cursor: pointer;
}

.modal.detached .content {
	display: none;
	width: 60%;
	max-height: 35em;
	margin: 2em 20% 1em 20%;
	float: right;
	overflow-y: auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.modal.detached.small .content {
	height: auto;
}

.modal.detached.swipeFromRight > div {
	-webkit-transform: translateX(20%);
	-moz-transform: translateX(20%);
	-ms-transform: translateX(20%);
	transform: translateX(20%);	
}

.modal.detached.show > div {
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
	opacity: 1;
}

.modal.detached p {
	margin-top: .2em;
	margin-bottom: 1.3em;
	font-size: .98em;
}

.modalCloseButton {
	position: absolute;
	top: -.9rem;
	right: -.9rem;
	width: 42px;
	height: 42px;
	padding-top: 1px;
	font-size: 18px;
	padding-bottom: 2px;
	text-decoration: none;
	border: 3px solid rgb(72, 69, 34);
	font-weight: bold;
	color: rgb(243, 235, 227);
	background: rgb(139,45,59);
	text-align: center;
	border-radius: 50%;
	-webkit-transition: all .1s ease;
	-moz-transition: all .1s ease;
	-ms-transition: all .1s ease;
	transition: all .1s ease;
}

.modalCloseButton:hover {
	border: .2em solid rgb(243, 235, 227);
}

/* Mobile "modal" functionality */

.modal.attached {
	position: absolute;
	-webkit-transform: translateX(-120%);
	-moz-transform: translateX(-120%);
	-ms-transform: translateX(-120%);
	transform: translateX(-120%);	
	-webkit-transition: -webkit-transform .4s ease;
	-moz-transition: -moz-transform .4s ease;
	-ms-transition: -ms-transform .4s ease;
	transition: transform .4s ease;
	width: 100%;
	float: left;
	border: .75em solid rgb(72, 69, 34);
	border-bottom-width: 1em;
}

.modal.attached.show {
	position: relative;
	-webkit-transform: initial;
	-moz-transform: initial;
	-ms-transform: initial;
	transform: initial;	
}

.modal.attached h4 {
	padding: 2.25em .75em 1em .75em;
	font-size: 1.2em;
}

.modal.attached nav {
	display: none;
}

.modal.attached .content {
	padding: 0 .7em;
}

.modal.attached p {
	font-size: .9em;
}

.modal.attached .modalCollapseButton {
	color: rgb(139,45,59);
	text-decoration: none;
	font-size: 1.4em;
	display: block;
	text-align: center;
	padding: .5em;
	margin-bottom: .5em;
}
.modal.attached .modalCollapseButton.topVersion {
	color: rgb(243, 235, 227);
	background-color: rgb(72, 69, 34);
	margin-bottom: 0em;
}
.modal.attached .modalCollapseButton.topVersion:hover, .modal.attached .modalCollapseButton.topVersion:focus {
	color: rgb(139,45,59);
}

.modal.attached .modalCollapseButton:hover, .modal.attached .modalCollapseButton:focus {
	color: rgb(72, 69, 34);
}



/* STYLES FOR HOME PAGE */

/* SPLASH */

#homeSplashBody {
	background: url(img/vineyard.jpg) no-repeat fixed; 
	margin: 0;
	padding: 0;
	height: 100%;
	background-size: cover;
}

#homeSplash {
	height: 100%;
	position: relative;
}

#homeSplashBody header #mainMenu {
	background: url(img/vineyard_blurred.jpg) no-repeat fixed;
	background-size: cover;
}



#homeSplashText {
	background: transparent;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


#homeSplashText #animatingParagraph {
	text-align: left;
	margin-left: 10%;
	margin-right: 30%;
	margin-top: 55vh;
	padding: 1.5em 0 1.75em 0;
	max-width: 100%;
	position: relative;
	font-size: 1.25em;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
	-webkit-transition: -webkit-transform 2s cubic-bezier(0.015, 0.665, 0.155, 0.885);
	-moz-transition: -moz-transform 2s cubic-bezier(0.015, 0.665, 0.155, 0.885);
	transition: transform 2s cubic-bezier(0.015, 0.665, 0.155, 0.885);
	-webkit-text-size-adjust: none; /* so annoying */
}


#homeSplashBG {
	background: url(img/vineyard_blurred.jpg) no-repeat fixed;
	position: relative;
	background-size: cover;
}

#homeSplashBody footer, #homeSplashBody footer a {
	color: rgba(239,228,216,.6);
}

#homeSplashBody footer ul {
	position: absolute;
	bottom: 0;
	right: 0;
}

/* The animations are hard on phones and tablets, so we want to hide them when the
screen is too narrow. */
@media (min-width: 70rem) {
	#animatingParagraph.fullOpacity {
		opacity: 1;
	}
	#homeSplashText #animatingParagraph.offsetLeftP {
		-webkit-transform: translateX(-250%);
		-moz-transform: translateX(-250%);
		-ms-transform: translateX(-250%);
		transform: translateX(-250%);
	}

	#animatingParagraph {
		opacity: .9;
		-webkit-transition: opacity .8s swing;
		-moz-transition: opacity .8s swing;
		transition: opacity .8s swing;
	}
	.ttAnimateText {
		opacity: 0.7;
		-webkit-transition: -webkit-filter 1.2s cubic-bezier(0.25, 0.5, 0.5, 0.9), opacity .9s cubic-bezier(0.25, 0.5, 0.5, 0.9);
		-moz-transition: -moz-filter 1.2s cubic-bezier(0.25, 0.5, 0.5, 0.9), opacity .9s cubic-bezier(0.25, 0.5, 0.5, 0.9);
		transition: filter 1.2s cubic-bezier(0.25, 0.5, 0.5, 0.9), opacity .9s cubic-bezier(0.25, 0.5, 0.5, 0.9);
		-webkit-filter: blur(1.6px);
		-moz-filter: blur(1.6px);
		filter: blur(1.6px);
	}
	.ttAnimateText.ttAnimateFinalClass {
		opacity: 1;
		-webkit-filter: initial;
		-moz-filter: initial;
		filter: initial;
	}
}
/*.ttAnimateText {
	color: #555;
	-webkit-transition: all .2s cubic-bezier(0.25, 0.5, 0.5, 0.9);
	-moz-transition: all .2s cubic-bezier(0.25, 0.5, 0.5, 0.9);
	transition: all .2s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}
.ttAnimateText.ttAnimateFinalClass {
	color: #222;
}*/
/*.ttAnimateText {
	-webkit-filter: blur(2px);
	-moz-filter: blur(2px);
	filter: blur(2px);
	-webkit-transition: all .2s cubic-bezier(0.25, 0.5, 0.5, 0.9);
	-moz-transition: all .2s cubic-bezier(0.25, 0.5, 0.5, 0.9);
	transition: all .2s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}
.ttAnimateText.ttAnimateFinalClass {
	-webkit-filter: blur(0px);
	-moz-filter: blur(0px);
	filter: blur(0px);
}*/

/* PAGE SPECIFIC BGS */

@media (max-width: 600px) {
	#productsSplash {
		background: url(img/wine_barrels_600.jpg);
	}
	#philosophySplash {
		background: url(img/man_wine_and_book_600.jpg);
	}
	#aboutSplash {
		background: url(img/cork_600.jpg);
	}
	#portfolioSplash {
		background: url(img/corks_600.jpg);
	}
	#contactSplash {
		background: url(img/people_on_roof_600.jpg);
	}
	#teamSplash {
		background: url(img/wine_bar_workers_600.jpg);
	}
}

@media (min-width: 601px) and (max-width: 1300px) {
	#productsSplash {
		background: url(img/wine_barrels_1300.jpg) bottom center ;
	}
	#philosophySplash {
		background: url(img/man_wine_and_book_1300.jpg) bottom center ;
	}
	#aboutSplash {
		background: url(img/cork_1300.jpg) bottom center ;
	}
	#portfolioSplash {
		background: url(img/corks_1300.jpg) bottom center ;
	}
	#contactSplash {
		background: url(img/people_on_roof_1300.jpg) bottom center ;
	}
	#teamSplash {
		background: url(img/wine_bar_workers_1300.jpg) center center ;
	}
}

@media (min-width: 1301px) {
	#aboutBody {
		background: url(img/cork_1300.jpg) no-repeat bottom center fixed;
		background-size: cover;
	}
	#philosophyBody {
		background: url(img/man_wine_and_book_1300.jpg) no-repeat bottom center fixed;
		background-size: cover;
	}
	#productsBody {
		background: url(img/wine_barrels_1300.jpg) no-repeat bottom center fixed;
		background-size: cover;
	}
	#portfolioBody {
		background: url(img/corks_1300.jpg) no-repeat bottom center fixed;
		background-size: cover;
	}
	#contactBody {
		background: url(img/people_on_roof_1300.jpg) no-repeat bottom center fixed;
		background-size: cover;
	}
	#teamBody {
		background: url(img/wine_bar_workers_1300.jpg) no-repeat bottom center fixed;
		background-size: cover;
	}
	#aboutBody .splashText, #aboutBody #mainMenu {
		background: url(img/cork_blurred_1300.jpg) no-repeat bottom center fixed;
		background-size: cover;
	}

	#philosophyBody .splashText, #philosophyBody #mainMenu {
		background: url(img/man_wine_and_book_blurred_1300.jpg) no-repeat bottom center fixed;
		background-size: cover;
	}

	#portfolioBody .splashText, #portfolioBody #mainMenu {
		background: url(img/corks_blurred_1300.jpg) no-repeat bottom center fixed;
		background-size: cover;
	}

	#productsBody .splashText, #productsBody #mainMenu {
		background: url(img/wine_barrels_blurred_1300.jpg) no-repeat bottom center fixed;
		background-size: cover;
	}

	#contactBody .splashText, #contactBody #mainMenu {
		background: url(img/people_on_roof_blurred_1300.jpg) no-repeat bottom center fixed;
		background-size: cover;
	}

	#teamBody .splashText, #teamBody #mainMenu {
		background: url(img/wine_bar_workers_blurred_1300.jpg) no-repeat bottom center fixed;
		background-size: cover;
	}
}
/* Allow the image to load in progressively */

#aboutBody.largeScreen {
	background: url(img/cork.jpg) no-repeat bottom center fixed,
				url(img/cork_1300.jpg) no-repeat bottom center fixed;
	background-size: cover, cover;
}
#philosophyBody.largeScreen {
	background: url(img/man_wine_and_book.jpg) no-repeat bottom center fixed,
				url(img/man_wine_and_book_1300.jpg) no-repeat bottom center fixed;
	background-size: cover, cover;
}
#productsBody.largeScreen {
	background: url(img/wine_barrels.jpg) no-repeat bottom center fixed,
				url(img/wine_barrels_1300.jpg) no-repeat bottom center fixed;
	background-size: cover, cover;
}
#portfolioBody.largeScreen {
	background: url(img/corks.jpg) no-repeat bottom center fixed,
				url(img/corks_1300.jpg) no-repeat bottom center fixed;
	background-size: cover, cover;
}
#contactBody.largeScreen {
	background: url(img/people_on_roof.jpg) no-repeat bottom center fixed,
				url(img/people_on_roof_1300.jpg) no-repeat bottom center fixed;
	background-size: cover, cover;
}
#teamBody.largeScreen {
	background: url(img/wine_bar_workers.jpg) no-repeat bottom center fixed,
				url(img/wine_bar_workers_1300.jpg) no-repeat bottom center fixed;
	background-size: cover, cover;
}

/* CONTACT STYLES */


/* SCREEN CHANGES: DEFAULT PAGE STYLES */


@media (max-width: 100rem) {	
	.belowFold {
		width: 100%;
		margin-left: 0;
		margin-top: 0;
		border-radius: 0px;
		box-shadow: none;
	}

	/* If our screen in rems gets too small, we want to make these columns fill the content area */
	
	.bodyColumn.column2 {
		width: 43%;
		margin-left: 3.5%;
		margin-right: 3.5%;
	}

	.bodyColumn.column2.floatR {
		width: 43%;
		margin-left: 3.5%;
		margin-right: 3.5%;
	}

	/* Once we expand the 2-column layout, we want these to fill the screen.*/
	.bodyColumn.headerColumn {
		width: 100%;
		margin-left: 0;
	}
	.bodyColumn.headerColumn .inner {
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: 0;
		margin-right: 0;
		border-radius: 0px;
		width: 100%;
	}
}

@media (max-width: 75rem) {

	/* When we expand the column2's, we also want the column1's to expand as well */
	.bodyColumn.column1center {
		width: 90%;
		margin-left: 5% !important;
		margin-right: 5% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.bodyColumn.column1center .inner {
		padding-left: 3em;
		padding-right: 3em;
	}
}


/* If our screen size (in ems) is too small, then we want to turn off justification in the columns. Also reduce padding for the cols.*/

@media (max-width: 70rem) {
	.headerColumn {
		margin-right: 0 !important;
		margin-left: 0 !important;
	}
	.headerColumn .inner {
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.headerColumn .inner {
		margin: 0;
		padding: 0;
		width: 100% !important;
	}
	/* And the modal window content needs less padding. */
	.modal.detached .content {
		width: 90%;
		margin-left: 5%;
		margin-right: 5%;
	}
}

@media (max-width: 50rem) {
	.bodyColumn.column2 .inner {
		text-align: left;
	}
	.bodyColumn.column1center {
		text-align: left;
	}
	.bodyColumn p {
		letter-spacing: .01em;
	}
	h1 {
		margin-left: .3em;
		margin-right: .3em;
		font-size: 1.8em;
		text-align: center;
	}
	h2 {
		font-size: 1.6em;
	}
	h3 {
		font-size: 1.3em;
		padding-right: 0.5em; /* icons give illusion of headers not being centered; padding to offset this. */
	}

}

@media (max-width: 42rem) {
	p {
		font-family: "Lato", "Fjalla One", sans-serif;
		line-height: 1.5;
	}
	.bodyColumn .inner {
		background: transparent;
	}
	.bodyColumn .inner:hover {
		background: transparent;
	}
	.bodyColumn.column2 {
		width: 94%;
		margin-left: 3%;
		margin-right: 3%;
	}
	.bodyColumn.headerColumn {
		padding-top: 0px;
	}
	.bodyColumn h2 {
		margin-bottom: 0;
		margin-top: 1em;
	}
	.bodyColumn.textColumn {
		margin-top: 0;
		margin-bottom: 0;
	}
	.bodyColumn.column2.floatR {
		width: 94%;
		margin-left: 3%;
		margin-right: 3%;
	}
}


@media (max-width: 30rem) {
	.bodyColumn.column1center, .bodyColumn.column2 {
		width: 100% !important;
		margin-top: 1rem !important;
		margin-bottom: .5rem;
		margin-left: 0% !important;
		margin-right: 0% !important;
		margin-top: 0% !important;
	}
	.bodyColumn.column1center .inner, .bodyColumn.column2 .inner {
		padding-right: 3%;
		padding-left: 3%;
	}
	.belowFold {
		width: 100%;
		margin-left: 0;
		margin-top: 0;
		border-radius: 0px;
	}
}

/* HOME SPECIFIC WINDOW SIZE CHANGES */

/* When the width gets sufficiently narrow, we need to shrink our splash bg and borderto portfolio */

@media (max-width: 65rem) {
	#homeSplashText {
		font-size: 75%;
	}
	.splash p {
		width: auto !important;
	}
}

@media (max-width: 50rem) {
	#homeSplashText #animatingParagraph {
		margin-top: 35%;
	}


	.splash #animatingParagraph .firstWords {
		font-size: 1.4em;
	}

	#homeSplashBG {
		background-image: none;
		background: rgba(248, 240, 235, .7) !important;
	}
	#homeSplashBody header #smallMenu.contracted {
		background-image: none;
		background: rgba(248, 240, 235, .7);
	}
}

@media (max-width: 40rem) and (max-height: 25rem) {
	#homeSplashText #animatingParagraph {
		margin-top: 3.5rem;
	}
}

@media (max-width: 40rem) {

	#homeSplashText {
		position: relative;
		padding: 1rem 0 1.5rem 0;
		margin: .2rem 0;
		width: 100%;
	}
	.splash p {
		margin-left: 5% !important;
		margin-right: 5% !important;
	}
	#homeSplashBody footer ul {
		position: relative;
		margin-top: 1em;
	}
}