/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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 {
	border: 0;
	font-size: 14px;
	font: inherit;
	line-height: 1.2;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/**
Fonts
*/
@font-face {
	font-family: EsmeraldaPro;
	src: url("../fonts/Esmeralda ProWeb.eot");
}

@font-face {
	font-family: EsmeraldaPro;
	src: url("../fonts/Esmeralda ProWeb.woff") format("woff");
}

.a1 {

	-ms-font-feature-settings: 		'ss01' 1;
	-webkit-font-feature-settings: 	'ss01' 1;
	-o-font-feature-settings: 		'ss01' 1;
	font-feature-settings: 			'ss01' 1;
}
.a2 {
	-moz-font-feature-settings: 	'ss02=1';
	-ms-font-feature-settings: 		'ss02' 1;
	-webkit-font-feature-settings: 	'ss02' 1;
	-o-font-feature-settings: 		'ss02' 1;
	font-feature-settings: 			'ss02' 1;
}
.a3 {
	-moz-font-feature-settings: 	'ss03=1';
	-ms-font-feature-settings: 		'ss03' 1;
	-webkit-font-feature-settings: 	'ss03' 1;
	-o-font-feature-settings: 		'ss03' 1;
	font-feature-settings: 			'ss03' 1;
}
.a4 {
	-moz-font-feature-settings: 	'ss04=1';
	-ms-font-feature-settings: 		'ss04' 1;
	-webkit-font-feature-settings: 	'ss04' 1;
	-o-font-feature-settings: 		'ss04' 1;
	font-feature-settings: 			'ss04' 1;
}
.a5 {
	-moz-font-feature-settings: 	'ss05=1';
	-ms-font-feature-settings: 		'ss05' 1;
	-webkit-font-feature-settings: 	'ss05' 1;
	-o-font-feature-settings: 		'ss05' 1;
	font-feature-settings: 			'ss05' 1;
}
/**
 * Utility Classes
 */
.clear {
	clear: both;
}
.clearfix:after{
	clear:both;
	content: '';
	display: block;
}
.hidden  { 
    display:none;
	visibility:hidden;
}
.offscreen,
.accessLabel  {
	display: block;
	left: -999999px;
	position: absolute;
	top: -999999px;
}
.hidden {
	display: none;
	visibility: hidden;
}
.noWrap {
	white-space: nowrap;
}
em {
	font-style: italic;
}
a{
	cursor: pointer;
	text-decoration: none;
}
/* Make sure embeds and iframes fit their containers */
embed,
iframe,
object {
	max-width: 100%;
}
input[type='text'],
input[type='email'],
input[type='submit']{
	background: none;
	border: none;
	color: #fff;
	color: #fff;
	font-family: 'EsmeraldaPro', serif;
	font-size: 18px; 
	font-weight: 400;
	line-height: 18px;
	outline: none;
	text-align: center; 
	-webkit-font-smoothing: antialiased;
	appearance: none;
	-webkit-appearance: none;
}
input::-webkit-input-placeholder {	color: #fff; text-transform: uppercase; text-align: center; font-size: 16px; line-height: normal; }
input:-moz-placeholder {			color: #fff; text-transform: uppercase; text-align: center; font-size: 16px; line-height: normal; }
input::-moz-placeholder {			color: #fff; text-transform: uppercase; text-align: center; font-size: 16px; line-height: normal; }
input:-ms-input-placeholder {  		color: #fff; text-transform: uppercase; text-align: center; font-size: 16px; line-height: normal; }
/**
General
*/
* {
	font-family: 'EsmeraldaPro', serif;
}
body,
html {
	color: #fff;
	font-family: 'EsmeraldaPro', serif;
	position:relative;
	height: 100%;
	min-height: 670px;
	min-width: 768px;
	width: 100%;
	-webkit-font-smoothing: antialiased;
	background: #bce3e0 url(../images/bg-gradient.jpg) no-repeat;
	background-size: 100% auto;
	background-size: cover;
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	/*background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNiY2UzZTAiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNjg5OTk1IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-radial-gradient(33.3% 50%,circle closest-side,  #bce3e0 0%, #689995 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#bce3e0), color-stop(100%,#689995));
	background: -webkit-radial-gradient(33.3% 50%,circle closest-side,  #bce3e0 0%,#689995 100%);
	background: -o-radial-gradient(33.3% 50%,circle closest-side,  #bce3e0 0%,#689995 100%);
	background: -ms-radial-gradient(33.3% 50%,circle closest-side,  #bce3e0 0%,#689995 100%);
	background: radial-gradient(33.3% 50%,circle closest-side,  #bce3e0 0%,#689995 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bce3e0', endColorstr='#689995',GradientType=1 ); */
}
#content {
	height: 100%;
	min-height: 670px;
	min-width: 768px;
	overflow: hidden;
	position: relative;
	width: 100%;
}
span.rule {
	background: url(../images/rule-intro.png) no-repeat;
	display: block;
	height: 1px;
	margin: 20px auto;
	width: 168px;
}
/**
Loading
*/
#loading {
	background-size: 100% auto;
	background-size: cover;
	height: 100%;
	min-height: 690px;
	min-width: 768px;
	overflow: hidden;
	position: absolute;
	width: 100%;
	z-index: 4;
	background: #acd5d1; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNhY2Q1ZDEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNjg5OTk1IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-radial-gradient(center, ellipse cover,  #acd5d1 0%, #689995 100%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#acd5d1), color-stop(100%,#689995)); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover,  #acd5d1 0%,#689995 100%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover,  #acd5d1 0%,#689995 100%); /* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover,  #acd5d1 0%,#689995 100%); /* IE10+ */
	background: radial-gradient(ellipse at center,  #acd5d1 0%,#689995 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#acd5d1', endColorstr='#689995',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
}
	#loading-inner {
		height: 200px;
		width: 140px;
		padding-top: 128px;
		position: absolute;
		left: 50%;
		margin-left: -70px;
		margin-top: -100px;
		top: 50%;
	}
	#loading-inner #loading-ornament {
		height: 114px;
		width: 140px;
		position: absolute;
		left: 50%;
		margin-left: -70px;
		top: 0;
	}
	#loading-inner p {
		font-size: 28px;
		text-align: center;
	}
/**
Diarama
*/
#landing {
	background: #bce3e0 url(../images/bg-gradient.jpg) no-repeat;
	background-size: 100% auto;
	background-size: cover;
	height: 100%;
	min-height: 690px;
	min-width: 768px;
	overflow: hidden;
	position: absolute;
	width: 100%;
	z-index: 3;
}
	#landing-scenery {
		position: absolute;
		height: 100%;
		width: 100%;
	}
		#landing-scenery #landing-ground {
			position: absolute;
			bottom: 0;
			right: 0;
			min-width: 100%
		}
		#landing-scenery #landing-tree {
			position: absolute;
			bottom: 80px;
			right: 5%;
			min-height: 80%;
			width: auto;
		}
	#landing-header-wrapper {
		position: absolute;
		top: 15%;
		min-width: 450px;
		width: 40%;
	}
	#landing #landing-header {
		/*background: #689995;
		background: rgba(104, 153, 149, .7);*/
		border-radius: 10px;
		margin: 0 auto;
		padding: 30px 30px 57px;
		position: relative;
		text-align: center;
		width: 380px;
	}
		#landing #landing-header h1,
		#landing #landing-header strong {
			font-size: 28px;
		}
		#landing #landing-header strong {
			display: inline-block;
			margin-bottom: 14px;
			width: 100%;
		}
		#landing #landing-header span.rule {
			margin: 15px auto 17px;
		}
		#landing #landing-header h2 {
			font-size: 18px;
			line-height: 27px;
		}
		#landing #landing-header a#enter-button {
			background: url(../images/enter-link.png) no-repeat;
			color: #a62913;
			display: block;
			height: 125px;
			line-height: 14px;
			left: 140px;
			padding: 48px 0 0 2px;
			position: absolute;
			text-align: center;
			text-transform: uppercase;
			width: 154px;
			box-sizing: border-box;
			-moz-box-sizing: border-box;
		}
			.backgroundsize #landing #landing-header a#enter-button {
				background-image: url(../images/enter-link-retina.png);
				background-size: 154px auto;
			}
			#landing #landing-header a#enter-button.clickable {
				cursor: pointer;
				transition: .3s;
				-webkit-transition: .3s;
			}
			#landing #landing-header a#enter-button > span {
				font-size: 18px;
				line-height: 14px;
			}
			#landing #landing-header a#enter-button.clickable:hover {
				margin-top: -3px;
			}
			#landing #landing-header a#enter-button.clickable:hover > span {
				/*border-bottom: 1px solid #a62913;*/
			}

/**
Footer
*/
#site-footer {
	position: absolute;
	bottom: 5px;
	right: 14px;
	z-index: 3;
}
	#footer-navigation {
		height: 139px;
		position: relative;
	}
		#footer-navigation a {
			display: block;
			float: right;
			transition: .5s;
			-webkit-transition: .5s;
		}
		#footer-navigation #gifts-of-impact {
			height: 139px;
			position: relative;
			width: 168px;
		}
			#footer-navigation #gifts-of-impact img {
				height: auto;
				max-width: 100%;
				position: relative;
			}
			#footer-navigation #gifts-of-impact #shop-cta-wrapper {
				overflow: hidden;
				position: absolute;
				right: 50%;
				width: 0;
				transition: 		width .7s .5s cubic-bezier(0.550, 0.055, 0.675, 0.190);
				-webkit-transition: width .7s .5s cubic-bezier(0.550, 0.055, 0.675, 0.190);
			}
			#footer-navigation #gifts-of-impact:hover #shop-cta-wrapper {
				transition: 		width .7s cubic-bezier(0.250, 0.460, 0.450, 0.940);
				-webkit-transition: width .7s cubic-bezier(0.250, 0.460, 0.450, 0.940);
			}
				#footer-navigation #gifts-of-impact #shop-cta {
					background: #fff;
					background: rgba(255, 255, 255, .8);
					border-radius: 6px;
					height:80px;
					margin-top: 28px;
					padding: 8px 90px 8px 11px;
					width: 680px;
					box-sizing: border-box;
					-moz-box-sizing: border-box;
				}
				/*#footer-navigation #gifts-of-impact #shop-cta #shop-now-snipe {
					background: #689894;
					border-radius: 31px;
					color: #fff;
					display: block;
					float: left;
					font-size: 18px;
					height: 62px;
					line-height: 17px;
					margin-right: 14px;
					padding-top: 14px;
					text-align: center;
					width: 62px;
					box-sizing: border-box;
					-moz-box-sizing: border-box;
				}*/
				#footer-navigation #gifts-of-impact #shop-cta #shop-now-snipe:hover {
					background: #a62913;
				}
				#footer-navigation #gifts-of-impact #shop-cta p {
					color: #a62913;
					font-size: 18px;
					line-height: 22px;
					margin-top: -2px;
					text-align: center;
				}
					#footer-navigation #gifts-of-impact #shop-cta p span {
						text-transform: uppercase;
					}
					#footer-navigation #gifts-of-impact #shop-cta p span:hover {
						text-decoration: underline;
					}
		#footer-navigation #me-to-we {
			background: url(../images/me-to-we-link.png) no-repeat;
			height: 113px;
			width: 83px;
			position: relative;
			top: 9px;
		}
			.backgroundsize #footer-navigation #me-to-we {
				background-image: url(../images/me-to-we-link-retina.png);
				background-size: auto 113px;
			}
		#footer-navigation #me-to-we:hover {
			margin-top: -3px;
		}
/**
Modal
*/
.modal-wrapper {
	background: rgba(0,0,0,.75);
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
}
.modal-background {
	position: absolute;
	width:100%;
	height:100%;
}
.modal {
	background: #699995;
	border-radius: 10px;
	left: 50%;
	padding: 40px;
	position: absolute;
	top: 50%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}
/**
Ornament Form
*/

#ornament-form {
	height: 620px;
	margin: -310px 0 0 -419px;
	padding: 28px 40px 40px;
	width: 838px;
	background: #bce3e0; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNiY2UzZTAiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNjg5OTk1IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-radial-gradient(75% 50%,circle closest-side,  #96bfbb 0%, #689995 100%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#96bfbb), color-stop(100%,#689995)); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(75% 50%,circle closest-side,  #96bfbb 0%,#689995 100%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(75% 50%,circle closest-side,  #96bfbb 0%,#689995 100%); /* Opera 12+ */
	background: -ms-radial-gradient(75% 50%,circle closest-side,  #96bfbb 0%,#689995 100%); /* IE10+ */
	background: radial-gradient(75% 50%,circle closest-side,  #96bfbb 0%,#689995 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#96bfbb', endColorstr='#689995',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
}
	#ornament-form header {
		text-align: center;
	}
		#ornament-form header h1 {
			font-size: 34px;
			margin-bottom: 12px;
		}
			#ornament-form header h1 #on-the {
				background: url(../images/on-the.png);
				display: inline-block;
				width: 80px;
				height: 39px;
				vertical-align: text-bottom;
			}
			.backgroundsize #ornament-form header h1 #on-the {
				background: url(../images/on-the-retina.png);
				background-size: 80px auto
			}
		#ornament-form header h2 {
			font-size: 18px;
			line-height: 22px;
		}
#input-list {
	display: block;
	float: left;
	font-size: 0;
	padding-top: 62px;
	text-align: center;
	width: 330px;
}
	#input-list li {
		float:left;
		font-size: 14px;
		margin-bottom: 14px;
		text-align: left;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
	}
		#input-list #ornament-fname-wrapper,
		#input-list #ornament-lname-wrapper {
			width: 50%;
		}
		#input-list #ornament-fname-wrapper {
			padding-right: 7px;
		}
		#input-list #ornament-lname-wrapper {
			padding-left: 7px;
		}
		#input-list #newsletter-inputs {
			overflow: hidden;
		}
			#input-list #ornament-email-wrapper,
			#input-list #ornament-zip-wrapper {
				float: left;
				padding-bottom: 14px;
				/*opacity: 0;*/
				box-sizing: border-box;
				-moz-box-sizing: border-box;
			}
			#input-list #ornament-email-wrapper {
				width: 185px;
				padding-right: 7px;
			}
			#input-list #ornament-zip-wrapper {
				width: 144px;
				padding-left: 7px;
			}
		#input-list li h3 {
			font-size: 21px;
		}
		#input-list li p {
			font-size: 16px;
			line-height: 18px;
			margin-bottom: 14px;
		}
		#ornament-form label {
			display: none;
		}
			#input-list label.error {
				font-size: 13px;
				margin-left: 7px;
			}
			#input-list  .ornament-email-wrapper label.error {
				font-size: 11px;
			}
		#input-list input[type='text'],
		#input-list input[type='email'] {
			background: #97c1bc;
			border-radius: 6px;
			border: none;
			color: #fff;
			display: block;
			height: 40px;
			padding: 0 14px;
			width: 100%;
			-webkit-box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.6);
			-moz-box-shadow:    inset 0px 0px 5px rgba(0, 0, 0, 0.6);
			box-shadow:         inset 0px 0px 5px rgba(0, 0, 0, 0.6);
			box-sizing: border-box;
			-moz-box-sizing: border-box;
		}
			#input-list input[type='text']#ornament-code {
				height: 54px;
				font-size: 30px;
				line-height: 28px;
			}
			#input-list input[type='text']#ornament-code::-webkit-input-placeholder {	font-size: 24px; line-height: 38px;}
			#input-list input[type='text']#ornament-code:-moz-placeholder {				font-size: 24px; line-height: 38px;}
			#input-list input[type='text']#ornament-code::-moz-placeholder {			font-size: 24px; line-height: 38px;}
			#input-list input[type='text']#ornament-code:-ms-input-placeholder {  		font-size: 24px; line-height: 38px;}
			#input-list input[type='text']#ornament-zip {
				
			}
		.explanatory-link {
			border-bottom: 1px dashed #97C0BC;
			color: #97C0BC;
			display: inline-block;
			padding-bottom: 5px;
		}
		#input-list label#newsletter-checkbox-wrapper {
			display: block;
			font-size: 0;
		}
		#newsletter-checkbox,
		#newsletter-copy {
			display: block;
			float: left;
			font-size: 12px;
		}
			#newsletter-checkbox {
				margin: 7px 0 0;
				width: 20px;
			}
			#newsletter-copy {
				width: 308px;
			}
#ornament-visual-wrapper {
	float:right;
	padding: 40px 0 0 10px;
	width: 50%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}
#ornament-visual {
	background: url(../images/form-ornament.png) no-repeat;
	height: 278px;
	padding-top: 1px;
	width: 324px;
	margin: 0 auto 38px;
}
	.backgroundsize #ornament-visual {
		background-image: url(../images/form-ornament-retina.png);
		background-size: 324px auto;
	}
	#ornament-visual #donor-name{
		font-size: 62px;
		margin-top: 107px;
		padding: 0 30px;
		letter-spacing: 1px;
		line-height: 1;
		text-align: center;
		display: block;
	}
	#ornament-form-submit {
		background: #fff url(../images/bg-hang-your-ornament.jpg) center center no-repeat;
		border-radius: 6px;
		color: #689995;
		cursor: pointer;
		display: block;
		font-size: 22px;
		height: 72px;
		line-height: 28px;
		margin: 0 auto;
		text-transform: uppercase;
		width: 184px;
		transition: opacity 1s;
		-webkit-transition: opacity 1s;
	}
	.backgroundsize #ornament-form-submit {
		background-image: url(../images/bg-hang-your-ornament-retina.jpg);
		background-size: auto 46px;
	}
		#ornament-form-submit.inactive {
			cursor: default;
			opacity: .5;
		}
/**
Error Message
*/
#ornament-error {
	display: none;
	margin: -222px 0 0 -298px;
	padding: 36px 40px 65px;
	text-align: center;
	width: 596px;
}
	#ornament-error header {
		margin: 0 auto 28px;
		max-width: 500px;
	}
	#ornament-error header h1 {
		font-size: 40px;
		text-transform: uppercase;
	}
	#ornament-error header h2 {
		font-size: 26px;
		margin-bottom: 24px;
	}
	#ornament-error header span.rule {
		margin-bottom: 22px;
	}
	#ornament-error header p {
		font-size: 18px;
		line-height: 21px;
		margin-bottom: 12px;
	}
	#ornament-error nav a {
		background: #fff;
		border-radius: 6px;
		color: #689995;
		display: inline-block;
		font-size: 16px;
		height: 40px;
		letter-spacing: 1px;
		margin: 0 14px;
		padding: 11px 17px 0;
		text-align: center;
		text-transform: uppercase;
		vertical-align: top;
		-webkit-font-smoothing: subpixel-antialiased;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
	}
	#message-phone a.cta-metowe, 
	#ornament-error nav a.cta-metowe {
		background: #fff url(../images/visit-me-to-we.png) center center no-repeat;
		width: 216px;
	}
		.backgroundsize #message-phone a.cta-metowe, 
		.backgroundsize #ornament-error nav a.cta-metowe {
			background-image: url(../images/visit-me-to-we-retina.png);
			background-size: auto 13px;
		}
/**
Giving Tree
*/
#giving-tree-wrapper {
	height: 100%;
	width: 100%;
	overflow: hidden;
	position: absolute;
}
#data-column-wrapper {
	position: absolute;
	height: 100%;
	padding-bottom: 200px;
	right: 0;
	z-index: 2;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}
#data-column {
	padding: 15px 34px 0 0;
	position: absolute;
	right: 0;
	text-align: center;	
	width: 200px;
}
	#data-column .data-section {
		background: url(../images/rule-intro.png) top center no-repeat;
		padding: 12px 0;
		position: relative;
	}
		#data-column #impact-counter {
			background: 
				url(../images/rule-intro.png) top center no-repeat,
				url(../images/rule-intro.png) bottom center no-repeat;
			padding: 9px 0 11px;
		}
		#data-column #impacts-infographic-wrapper {
			background: none;
		}
	#data-column h1 {
		background: url(../images/me-to-we-giving-tree-headline.png) center center no-repeat;
		display: inline-block;
		height: 88px;
		margin-bottom: 6px;
		width: 154px;
	}
		.backgroundsize #data-column h1 {
			background-image: url(../images/me-to-we-giving-tree-headline-retina.png);
			background-size: 154px auto;
		}
	#data-column h2 {
		display: block;
		font-size: 18px;
		text-transform: uppercase;
	}
	#data-column #hang-your-ornament-section {
		height: 100px;
		padding: 6px 0 5px;
	}
	#hang-your-ornament {
		background: url(../images/hang-your-ornament-button.png) no-repeat;
		color: #a62913;
		display: block;
		font-size: 20px;
		height: 100px;
		letter-spacing: 2px;
		line-height: 25px;
		padding: 25px 19px 0 27px;
		width: 192px;
		text-align: center;
		text-transform: uppercase;
		transition: .5s;
		-webkit-transition: .5s;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
	}
		#hang-your-ornament:hover {
			margin-top: -2px;
		}
		.backgroundsize #hang-your-ornament {
			background-image: url(../images/hang-your-ornament-button-retina.png);
			background-size: auto 100px;
		}
	#data-column #impact-count {
		display: block;
		font-size: 70px;
		line-height: 60px;
		padding-bottom: 10px;
	}
	#data-column img {
		height: auto;
		max-width: 75%;
	}
	#social-list {
		font-size: 0;
		padding-top: 6px;
	}
	#social-list li  {
		display: inline-block;
		margin: 0 10px;
	}
		#social-list a{
			background: url(../images/sprite.png) no-repeat;
			display: inline-block;
			height: 23px;
			width: 24px;
		}
			.backgroundsize #social-list a {
				background-image: url(../images/sprite-retina.png);
				background-size: auto 50px;
				transition: 		opacity .5s;
				-webkit-transition: opacity .5s;
			}
				.backgroundsize #social-list a:hover {
					opacity: .5;
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
				}
			#social-list a#share-facebook {
				padding-right: 3px
			}
			#social-list a#share-twitter {
				background-position: -50px 0;
				height: 20px;
				width: 28px;
			}
			#social-list a#share-pinterest {
				background-position: -100px 0;
				width: 24px;
			}
/**
Share CTA
*/
#share-cta {
	background: url(../images/bg-share-cta.png) no-repeat;
	display: none;
	height: 92px;
	margin: 16px -14px 0 0;
	opacity: 0;
	padding-top: 11px;
	position: absolute;
	right: 100%;
	top: 0;
	width: 287px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}
	#share-cta p {
		color: #689894;
		display: block;
		font-size: 14px;
		text-align: center;
		width: 258px;
		line-height: 22px;
	}
		#share-cta p strong {
			font-size: 20px;
			line-height: 26px;
			text-transform: uppercase;
		}
/**
Background
*/
.landscape-element {
	position: absolute;
	bottom: 0;
}
#background {
	bottom: 0;
	padding: 0 50px;
	position: absolute;
	width: 100%;
}
	#left-mountain {
		background: url(../images/left-mountain.png) bottom left no-repeat;
		height: 337px;
		left: 0;
		width: 1161px;
	}
	#center-mountain {
		background: url(../images/center-mountain.png) bottom left no-repeat;
		height: 220px;
		left: 10%;
		width: 713px;
	}
	#right-mountain {
		background: url(../images/right-mountain.png) 240px 0 no-repeat;
		width: 1158px;
		height: 317px;
	}
/**
Mid-ground
*/
#mid-ground {
	bottom: 0;
	height: 100%;
	padding-right: 240px;
	position: absolute;
	width: 100%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}
	#tree-wrapper {
		height: 100%;
		position: relative;
		width: 100%;
	}
	#tree {
		bottom: 0;
		width: auto;
		position: absolute;
		height: 90%;
		margin-left: -390px;
		max-height: 850px;
		left: 50%;
	}
		#tree img{
			display: block;
			position: absolute;
			width: auto;
			height: 100%;
			/*max-height: 850px;*/
		}
	#tree #hung-ornament-wrapper {
		height: 500px;
		position: absolute;
		width: 100%;
		/*min-width: 767px;
		min-height: 500px;*/
		top: 0;
		-webkit-tap-highlight-color: transparent;
	}
		#tree #hung-ornament-wrapper svg {
			position: relative;
		}
		#tree #hung-ornament-wrapper .ornament {
			background: url(../images/mini-ornament.png) no-repeat;
			display: block;
			height: 14px;
			position: absolute;
			width: 18px;
			cursor: pointer;
			z-index: 0;
		}
			.backgroundsize #tree #hung-ornament-wrapper .ornament {
				background-image: url(../images/mini-ornament-retina.png);
				background-size: 18px 14px;
			}
		#tree #hung-ornament-wrapper .ornament.new-ornament {
			opacity: 0;
			top: 0;
			/*transition: 		.7s;
			-webkit-transition: .7s;*/
		}
			#tree #hung-ornament-wrapper .ornament.new-ornament.dropped {
				opacity: 1;
			}
			#tree #hung-ornament-wrapper .ornament.hovered {
				z-index: 2;
			}
		#tree #hung-ornament-wrapper .ornament.new-ornament,
		#tree #hung-ornament-wrapper .ornament.hovered {
			background: url(../images/mini-ornament-hover.png) no-repeat;
		}
			.backgroundsize #tree #hung-ornament-wrapper .ornament.new-ornament,
			.backgroundsize #tree #hung-ornament-wrapper .ornament.hovered {
				background: url(../images/mini-ornament-hover-retina.png) no-repeat;
				background-size: 18px 14px;
			}
		#ornament-hover {
			background: url(../images/ornament-hover.png) no-repeat;
			display: block;
			height: 187px;
			font-size: 31px;
			left: 20%;
			margin: -164px 0 0 -76px;
			padding: 74px 0 14px;
			position: absolute;
			text-align: center;
			top: 70%;
			width: 203px;
			z-index: 1;
			box-sizing: border-box;
			-moz-box-sizing: border-box;
		}
			#ornament-hover.long-name {
				padding-top: 80px;
				font-size: 20px;
			}
			.backgroundsize #ornament-hover {
				background-image: url(../images/ornament-hover-retina.png);
				background-size: 203px auto;
			}
/**
Impact Key
*/
#impact-key-wrapper {
	z-index: 2;
}
	#impact-key {
		left: 50%;
		margin: -330px 0 0 -220px;
		position: absolute;
		text-align: center;
		top: 50%;
		width: 440px;
	}
		#impact-key header {
			background: url(../images/rule-key.png) bottom center no-repeat;
			margin-bottom: 28px;
			padding-bottom: 20px;
		}
		#impact-key header h2 {
			font-size: 31px;
			line-height: 36px;
		}
		#impact-key-list {
			margin: 0 33px;
			text-align: left;
		}
		#impact-key-list li {
			margin-bottom: 15px;
		}
		#impact-key-list li p {
			font-size: 18px;
			margin-top: -6px;
		}
		#impact-key-list li:before{
			background: url(../images/key-sprite.png) no-repeat;
			content: '';
			display: block;
			float: left;
			width: 48px;
			margin-right: 10px;
			height: 50px;
		}
			.backgroundsize #impact-key-list li:before{
				background: url(../images/key-sprite-retina.png) no-repeat;
				background-size: auto 100px;
			}
		#impact-key-list li#key-notebook:before {
			background-position: -50px 0;
		}
		#impact-key-list li#key-mama:before {
			background-position: -94px 0;
		}
		#impact-key-list li#key-environment:before {
			background-position: -150px 0;
		}
		#impact-key-list li#key-carbon:before {
			background-position: -200px 0;
		}
		#impact-key-list li#key-pesticide:before {
			background-position: -250px 0;
		}
		#impact-key-list li#key-connect:before {
			background-position: -300px 0;
		}
		#impact-key footer {
			background: url(../images/rule-key.png) top center no-repeat;
			font-size: 14px;
			line-height: 15px;
			padding-top: 24px;
		}
		#impact-key footer a {
			display: block;
		}
		#impact-key footer #ftc-logo {
			height: auto;
			margin-bottom: 8px;
			width: 66px;
		}

/**
Touch
*/
.touch #shop-cta-wrapper {
	display: none !important;
}

@media all and ( max-width: 1450px ), ( min-height: 1000px ){
	/**
	Landing
	*/
	#landing #landing-header {
		background: rgba(104, 153, 149, .95);
		-webkit-box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.15);
		-moz-box-shadow:    0px 0px 14px rgba(0, 0, 0, 0.15);
		box-shadow:         0px 0px 14px rgba(0, 0, 0, 0.15);
	}
}
@media all and (max-width: 1200px ){
	#landing-header-wrapper {
		left: 28px;
	}
}
@media all and (min-height: 840px ){
	#data-column-inner {
		position: relative;
		height: 100%;
	}
	#data-column {
		top: 50%;
		margin-top: -300px;
	}
}
@media all and (max-height: 780px ){
	/*#tree {
		height: 98%;
		max-height: 98%;
		min-height: 98%;
	}*/
	#data-column #impact-count {
		font-size: 54px;
		line-height: 40px;
	}
	#impacts-infographic-wrapper {
		display: none !important;
	}
}
@media all and (max-width: 1100px ){

	#tree {
		height: 700px;
		margin-left: -350px;
	}
}
@media all and (max-width: 1000px ){
	/**
	Architecture
	*/
	#content {
		min-height: 946px;
	}
	/**
	Landing
	*/
	#landing {
		background-position: center center;
	}
	#landing-header-wrapper {
		left: auto;
		position: relative;
		margin: 0 auto;
		width: 380px;
	}
	#landing-scenery #landing-tree {
		left: 50%;
		margin-left: -350px;
		right: auto;
		min-height: 0;
		height: auto;
		width: 700px;
	}
	/**
	Form
	*/
	#ornament-form {
		top: auto;
		margin: 100px 0 0 -350px;
		height: auto;
		width: 700px;
	}
	#ornament-form header h2 {
		padding: 0 28px;
	}
	#ornament-form header h2 br {
		display: none;
	}
	#input-list {
		width: 50%;
	}
	#newsletter-copy {
		width: 270px;
	}
	#input-list li h3 {
		font-size: 19px;
	}
	#newsletter-copy br {
		display: none;
	}
	#input-list #ornament-email-wrapper, 
	#input-list #ornament-zip-wrapper {
		width: 50%;
	}
	/**
	Interactive
	*/
	#mid-ground {
		padding: 0;
	}
	#center-mountain {
		display: none !important;
	}
	#data-column {
		padding: 15px 0 0 0;
		top: 0;
		right: auto;
		width: 100%;
	}
	.backgroundsize #data-column h1{
		display: inline-block !important;
		width: 100%;
	}
	#hang-your-ornament:hover {
		margin-top: 0;
	}
	#data-column-wrapper {
		height: auto;
		position: static;
		padding: 0;
		width: 100%;
	}
		 #data-column-inner {

		 }
	
	#data-column {
		margin: 0;
	}
		#data-column .data-section {
			display: inline-block !important;
			width: 200px;
		}
		#data-column .data-section {
			background: none;
		}
		#data-column #impact-counter,
		#data-column #impacts-infographic-wrapper {
			display: none !important;
		}
}



