/* all specific controls are prefixed within the container .e_ */

	/* styling */
	.e_esc {
		position:fixed;
		z-index:10;
		left:0;
		top:0;
		width:0%;
		height:100%;
		background:rgba(0,0,0,0.0);
		transition:background .25s .25s ease-in-out, width 0s .25s linear;
		}
	.e_esc.e_collect_active {
		background:rgba(0,0,0,0.5);
		width:100%;
		height:100%;
		}
	.e_esc.e_collect_active.e_collect_closed {
		background:rgba(0,0,0,0.0);
		width:0%;
		height:100%;
		transition:background .25s .0s ease-in-out, width 0s .25s linear;
		}
	
	.e_collect {
		position:fixed;
		z-index:11;
		left:-37%;
		top:calc(50% - 120px);
		width:37%;
		height:300px;
		padding:30px 30px;
		color:white;
		transition:all .75s cubic-bezier(0.86,0,0.07,1);
		}
	.e_collect_clip {
		position:absolute;
		top:50%;
		left:0;
		width:100%;
		height:200px;
		padding:0;	
		}
	.e_collect_textvar {
		position:absolute;
		bottom:-50px;
		width:100%;
		left:0;
		height:100%;
		z-index:1;
		background:#009100;
		opacity:0;
		transition:bottom .75s .5s cubic-bezier(0.86,0,0.07,1), opacity .75s 0.55s cubic-bezier(0.86,0,0.07,1);
		}
	.e_collect_clip h2 {
		font-size:1.8em;
		font-weight:normal;
		text-transform:uppercase;
		width:100%;
		padding:30px 80px 20px 30px;
		opacity:0;
		transition:all .75s 1s cubic-bezier(0.86,0,0.07,1);
		font-weight:600;
		}
	.e_collect_clip p {
		padding:0 60px 30px 30px;
		opacity:0;
		transition:all .75s 1.25s cubic-bezier(0.86,0,0.07,1);
	}	
	.e_close {
		position:absolute;
	  	z-index:2;
		top:40px;
		right:-15px;
		transform-origin: 0 0;
	  	transform: rotate(90deg);
		width:40px;
		height:30px;
	  	padding-top:7px;
		background: url(../img/e_collect_close_icon.svg) left center no-repeat;
		color:white;
		font-size:11px;
	  	text-indent:32px;
	  	letter-spacing:1px;
		font-weight:600;
	  	transition:color .15s ease;
	  	}
	.e_close:hover {
		color:black;
		}

	.e_collect a {
		cursor:pointer;
		}
	
	.e_collect span {
		padding:0px;
	}
		
	/* states */	
	.e_collect.e_collect_active {
		left:0;
		}
	.e_collect.e_collect_active.e_collect_closed {
		left:-37%;
		}
	.e_collect.e_collect_active .e_collect_textvar {
		bottom:200px;
		height:auto;	
		opacity:1;
		}
	.e_collect.e_collect_active .e_collect_clip h2, .e_collect.e_collect_active .e_collect_clip p {
		opacity:1;
		}


	/* collection form */
	.e_collect form {
		position:absolute;
		left:0;
		bottom:0;
		width:100%;
		height:50%;
		background:rgba(0,0,0,0.7);
		padding:0 30px;
		display:flex;
		flex-wrap:wrap;
		align-items:center;
		z-index:3;
		}
	.e_collect form fieldset {
		width:100%;
		}
	.e_collect form input {
		display:block;
		float:left;
		width:calc(100% - 110px);
		height:48px;
		line-height:48px;
		padding:0 18px;
		background:white;
		color:black;
		font-size:1.3em;
		font-weight: 700;
		text-transform: uppercase;
		-webkit-appearance: none;
		border-radius:0;
		}
	.e_collect form input[type="submit"] {
		width:75px;
		margin-bottom:10px;
		cursor:pointer;
		overflow:hidden;
		text-indent:-999em;
		background:#009100 url(../img/e_collect_mail_icons.svg) center center no-repeat;
		transition:all .3s ease;
		}		
	.e_collect form input[type="submit"]:hover, 
	.e_collect form input[type="submit"]:focus,
	.e_collect form input[type="submit"]::-moz-focus-inner {
		background-position:calc(50% + 3px) center;
		width:80px;
		border:0 !important;
		outline:0 !important;
		box-shadow: none !important;
		background-color: #cd1414;
		}
	.e_collect form p {
		width:100%;
		clear:both;
		line-height:1.2em;
		font-size:1em;
		}			
	.e_collect form a {
		color:#bbb;
		transition:all .3s linear;
		}
	.e_collect form a:hover {
		color:#fff;
		}
		
	/* tray icon */				
	.e_collect_icon {
		position:absolute;
		top:50%;
		right:0;
		width:0;
		height:40px;
		overflow:hidden;
		text-indent:-999em;
		background:#009100 url(../img/e_collect_mail_icon.svg) calc(100% - 12px) center no-repeat;
		transition:all .5s cubic-bezier(0.86,0,0.07,1);
		}

	.e_collect_icon:after {
		content:'';
		position:absolute;
		top:0;
		left:8px;
		width:20px;
		height:40px;
		overflow:hidden;
		text-indent:-999em;
		background: url(../img/e_collect_mail_icon_whoosh.svg) center no-repeat;
		transition:all .5s cubic-bezier(0.86,0,0.07,1);
		opacity:0;
		
		}
	.e_collect_icon:hover:after {
		opacity:1;
		}	
	.e_collect_closed .e_collect_icon {
		right:-48px;
		width:48px;
		}
	.e_collect_closed .e_collect_icon:hover {
		right:-68px;
		width:68px;
		background-color: #cd1414;
		}
	

/* 	replace with bootstrap includes here */

@media (max-width: 992px) { 
	
	.e_collect form input {
		width:calc(100% - 80px);
		}	
	.e_collect_clip h2 {
		font-size:1.5em;
		padding:20px 80px 20px 20px;
		}
	.e_collect_clip p {
		padding:0 80px 30px 20px;
		}
	.e_collect form {
		padding:20px 20px;
		}	
	}

@media (max-width: 768px), (max-height: 500px) {

	.e_collect {
		width:calc(100% - 20px);
		left:calc(-100% + 20px);
		top:calc(50% - 100px);
		}
	.e_collect.e_collect_closed, 
	.e_collect.e_collect_active.e_collect_closed {
		left:calc(-100% + 20px);
		}
	.e_collect_clip h2 {
		font-size:1.5em;
		padding:20px 55px 10px 20px;
		}
	.e_collect_clip p {
		padding:0 55px 20px 20px;
		}
	.e_close {
		top:25px;
		right:-25px;
	  	}
	.e_close:hover {
		color:white;
		}
	}