.main-component {
	width: 100%;
	height: 650px;
	border: 0px;
	float: left; 
	box-sizing: border-box;  
	clear: both;
	}

.submission-form-container {
	position:absolute;
	width: auto;
	height:auto; 
	left: calc(50% - 160px);     
	} 

form {
	position: absolute;
	text-align: center;
	background: #fff;
	min-width: 310px;
	7878height: 607px; height: auto; 
	min-height: 607px;
	border-radius: 5px;
	padding: 30px 20px 0 20px;
	box-sizing: border-box; 
  	78787878border: 1px dashed #303030; padding-bottom: 25px !important;
	111box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.25);/**OPTION # 1**/
 	222box-shadow: 0 0 0 1.5px #226741, 0 0 0 5.5px #fff, inset 0 0 0 1.5px #226741, 0 2px 5px 7px rgba(0, 0, 0, 0.5), inset 0 0 0 3px #fff, inset 0 0 100vw 100vw beige;/**OPTION # 2**/
  	78787878box-shadow: 0 0 0 1.5px #226741, 0 0 0 2.5px #fff, inset 0 0 0 1.5px #226741, 0 1px 2px 3px rgba(0, 0, 0, 0.5), inset 0 0 0 1px #fff, inset 0 0 100vw 100vw beige;/**OPTION # 3**/
	box-sizing: border-box;  
	clear: both;
	}

.submission-paragraph {
	font-weight: 100 !important;
	text-transform: uppercase !important;
	font-size: 14px !important;
	color: #303030 !important; 
	margin-top: 5px !important;
	margin-bottom: 10px !important;
	}

.submission-paragraphp > span {
	padding-top: 3px !important;
	display: block !important;
	font-weight: 400 !important;
	font-size: 9px !important; 
}

.h3-header { 
	font-weight: bold;
	font-size: 18px !important;
	text-transform: uppercase !important;
	color: #303030 !important; 
	margin-top: 1px !important;
	margin-bottom: 10px !important; 
}

input,
button{ 
	outline: none !important; 
}

.ourEfforts {
	border: none !important;
	background: #303030 !important;
	width: auto !important;
	height: 25px !important;
	font-size: 12px !important;
	color: #fff !important;
	text-transform: uppercase;
	margin-bottom: 20px !important;
	/**CENTER SINGLE LINE TEXT HORIZONTALLY AND VERTICALLY**/
		text-align: center;
		vertical-align: middle;
		line-height: 25px;  /* The same as your div height */

	}

button.form-btn {
	position: absolute;
	width: 50%;
	height: 42px;
	bottom: 0;
	border: 0;
	font-size: 16px;
	text-transform: uppercase;
	cursor: pointer;  
}

button.form-btn.sx {
	left: 0;
	border-radius: 0 0 0 5px;
	background-color: rgb(0, 140, 186);
	color: #fff;
	transition:all 0.3s linear; 
}

button.form-btn.sx:hover {
	background-color: #003366;
	color: #fff;
  	border: 1pt dashed #303030;
  	box-shadow:0 0 0 0.5px #226741, 0 0 0 2.5px #fff, inset 0 0 0 1.5px #226741, 0 1px 2px 3px rgba(0, 0, 0, 0.5), inset 0 0 0 1px #fff;
}

button.form-btn.sx.back {
	background-color: rgb(0, 140, 186);
	transition:all 0.3s linear;
}

button.form-btn.sx.back:hover {
	background-color: #003366;
  	border: 1pt dashed #303030;
  	box-shadow:0 0 0 0.5px #226741, 0 0 0 2.5px #fff, inset 0 0 0 1.5px #226741, 0 1px 2px 3px rgba(0, 0, 0, 0.5), inset 0 0 0 1px #fff;
	}

button.form-btn.dx {
	right: 0;
	border-radius: 0 0 5px 0;
	background-color: #303030;
	color: #fff; 
}





/**********************************************************************************/
::-webkit-input-placeholder {
   	color: #303030;
	}

:-moz-placeholder {
   	color: #303030;
}

::-moz-placeholder {
   	color: #303030; 
}

:-ms-input-placeholder {  
   	color: #303030;
}
/********************************************************************************************************/








.toContribute{
	z-index: 1;
	transform: perspective(100px) translate3d(100px, 0px, -30px);
	opacity: 0.5; 
	}

.shareContent {
	z-index: 2;
}

.active-dx{
	animation-name: foregrounding-dx;
	animation-duration: 0.9s;
	animation-fill-mode: forwards;
}

.active-sx{
	animation-name: foregrounding-sx;
	animation-duration: 0.9s;
	animation-fill-mode: forwards;
}

.inactive-dx{
	animation-name: overshadowing-dx;
	animation-duration: 0.9s;
	animation-fill-mode: forwards;
}

.inactive-sx{
	animation-name: overshadowing-sx;
	animation-duration: 0.9s;
	animation-fill-mode: forwards;
}

@keyframes overshadowing-dx {
	0%{
		z-index:2;
		transform: perspective(100px) translate3d(0px, 0px, 0px);
		opacity: 1;
		box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.25);
	}
	100%{
		z-index: 1;
		transform: perspective(100px) translate3d(100px, 0px, -30px);
		opacity: 0.5;
		box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.25);
	}
}

@keyframes overshadowing-sx {
	0%{
		z-index:2;
		transform: perspective(100px) translate3d(0px, 0px, 0px);
		opacity: 1;
		box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.25);
	}
	100%{
		z-index: 1;
		transform: perspective(100px) translate3d(-100px, 0px, -30px);
		opacity: 0.5;
		box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.25);
	}
}

@keyframes foregrounding-dx {
	0%{
		z-index:1;
		transform: perspective(100px) translate3d(100px, 0px, -30px);
		opacity: 0.5;
	}
	50%{
		z-index:2;
		transform: perspective(100px) translate3d(400px, 0px, -30px);
	}
	100%{
		z-index:2;
		transform: perspective(100px) translate3d(0px, 0px, 0px);
		opacity: 1;
	}
}

@keyframes foregrounding-sx {
	0%{
		z-index:1;
		transform: perspective(100px) translate3d(-100px, 0px, -30px);
		opacity: 0.5;
	}
	50%{
		z-index:2;
		transform: perspective(100px) translate3d(-400px, 0px, -30px);
	}
	100%{
		z-index:2;
		transform: perspective(100px) translate3d(0px, 0px, 0px);
		opacity: 1;
	}
}