#StayNotified{
	height:100%;
	width:100%;
	position:fixed;
	left:0px;
	top:0px;
	z-index:10;
	transform:translate(0%,-100%);
	transition-delay:.2s;
}
#StayNotified::before{
	content:"";
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	z-index:0;
	background-color:rgba(0,0,0,.4);
	backdrop-filter:blur(0px);
	opacity:0;
	transition:opacity .2s, backdrop-filter .2s;
}
#StayNotifiedDrawer{
	width:100%;
	max-width:464px;
	position:fixed;
	top:0px;
	left:100%;
	z-index:10;
	background-color:var(--white);
	height:100%;
	transform:translate(0,0);
	transition:transform .2s ease-in;
}
#StayNotifiedDrawer--Header{
	width:100%;
	height:56px;
	display:flex;
	flex-flow:row nowrap;
	align-items:center;
	justify-content:flex-start;
	position:relative;
	border-bottom:1px solid var(--lightGrey);
	padding:0 0 0 32px;
}
#StayNotifiedDrawer--Body{
	width:100%;
	box-sizing:border-box;
	padding:32px;
	position:relative;
}
.__headerLabel{
	font:var(--tech);
	font-weight:400;
	font-size:1.8em;
	text-transform:uppercase;
}
.__headerClose{
	position:absolute;
	right:0px;
	top:50%;
	transform:translate(0%,-50%);
	height:56px;
	width:56px;
	color:var(--black);
	cursor:pointer;
}
.__headerClose *{
	cursor:pointer;
}
.__iconClose{
	height:42px;
	width:42px;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%) rotate(45deg) scale(.6);
	transition:opacity .2s ease-in;
	opacity:.5;
}
.__iconClose::before,
.__iconClose::after{
	height:3px;
	width:75%;
	background-color:currentColor;
	border-radius:1px;
	content:"";
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
}
.__iconClose::after{
	transform:translate(-50%,-50%) rotate(90deg);
}
.__headerClose:hover .__iconClose{
	opacity:1;
}
#StayNotifiedDrawer--Body .drawerHeron{
	height:60px;
	width:39px;
	margin-bottom:12px;
}
#StayNotifiedDrawer--Body form{
	padding:24px 0;
}
#StayNotifiedDrawer--Body h3,
#StayNotifiedDrawer--Body h4
{
	font:var(--display);
	text-transform:uppercase;
	font-size:3.2em;
}
#StayNotifiedDrawer--Body h4{
	width:100%;
	text-align:left;
	font-size:2.8em;
}
#StayNotifiedDrawer--Body p{
	font:var(--tech);
	font-size:1.5em;
	font-weight:400;
	color:var(--blackGrey);
	text-transform:uppercase;
	margin-bottom:12px;
}

.__doneMessage{
	padding:32px 0 24px 0;
}
.__inputWrapper{
	width:100%;
	height:56px;
	position:relative;
	margin-bottom:20px;
}
.__inputWrapper input[type="email"]{
	box-sizing:border-box;
	border:1px solid var(--midGrey);
	width:100%;
	height:100%;
	padding:0 13px;
	font:var(--tech);
	font-weight:400;
	color:var(--midGrey);
	font-size:1.4em;
	transition:border .1s ease-in, padding .1s ease-in;
	border-radius:0px;
}
.__inputWrapper input[type="email"]:focus,
.__inputWrapper.__hasContent input[type="email"]{
	outline:none;
	border:2px solid var(--blackGrey);
	color:var(--blackGrey);
	padding:0 12px;
}
.__inputWrapper input[type="checkbox"]{
	position:absolute;
	left:-1000px;
	top:50%;
	transform:translate(-50%,0);
	opacity:0;
}
.__inputWrapper input[type="checkbox"] + label{
	display:flex;
	flex-flow:row wrap;
	align-items:flex-start;
	justify-content:flex-start;
	padding:0 32px;
	position:relative;
	width:100%;
	min-height:24px;
}
.__inputWrapper input[type="checkbox"] + label a{
	text-decoration:underline;
}
.__inputWrapper input[type="checkbox"] + label .__checkBox{
	height:24px;
	width:24px;
	box-sizing:border-box;
	position:absolute;
	left:0px;
	top:0px;
	transition:border .1s ease-in;
	border:1px solid var(--midGrey);
}
.__inputWrapper input[type="checkbox"] + label .__checkBox::after{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	height:calc(100% - 6px);
	width:calc(100% - 6px);
	content:"";
	opacity:0;
	background-color:var(--blackGrey);
	transition:opacity .2s ease-in;
}
.__inputWrapper input[type="checkbox"] + label .__labelContents{
	font:var(--tech);
	font-size:1.5em;
	font-weight:400;
	color:var(--blackGrey);
}

.__inputWrapper input[type="checkbox"]:checked + label .__checkBox{
	border:2px solid var(--blackGrey);
}
.__inputWrapper input[type="checkbox"]:checked + label .__checkBox::after{
	opacity:1;
}
.__inputWrapper input[type="checkbox"]:checked + label .__labelContents{}

.__inputWrapper button.button{;
	width:100%;
	cursor:pointer;
}
.__inputWrapper button.button *{
	cursor:pointer;
}
.__inputWrapper button .buttonLabel{
	width:100%;
	font:var(--tech);
	font-weight:400;
	font-size:1.6em;
}
.__inputWrapper.__hasError input,
.__inputWrapper.__hasError input[type="checkbox"] + label .__checkBox{
	border-color:var(--coralRed);
}
#StayNotifiedDrawer--Spinner{
	position:absolute;
	left:0px;
	top:0px;
	z-index:1;
	height:100%;
	width:100%;
	background-color:rgba(255,255,255,.4);
	backdrop-filter:blur(0px);
	transform:translate(100%,0%);
	opacity:0;
	transition:transform 0s, opacity .2s ease-in, backdrop-filter .3s ease-in;
	transition-delay:.2s,0s,0s;
}
.__showSpinner #StayNotifiedDrawer--Spinner{
	transform:translate(0%,0%);
	backdrop-filter:blur(4px);
	opacity:1;
	transition-delay:0s,0s,0s;
}
.__showNotifiedDrawer #StayNotified{
	transform:translate(0%,0%);	
	transition-delay:0s;
}
.__showNotifiedDrawer #StayNotified::before{
	opacity:1;
	backdrop-filter:blur(14px);
}
.__showNotifiedDrawer #StayNotifiedDrawer{
	transform:translate(-100%,0);
}
@media only screen and (max-width: 1024px) {
	.__inputWrapper button .buttonLabel{
		font-size:1.3em;
	}
	.__inputWrapper input[type="checkbox"] + label{
		padding:0 0 0 32px;
		width:initial;
	}

}