@font-face {
	font-family: 'Source Sans Pro';
	font-style: normal;
	font-weight: 200;
	src: local('Source Sans Pro ExtraLight'), local('SourceSansPro-ExtraLight'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3i94_wlxdr.ttf) format('truetype');
}
@font-face {
	font-family: 'Source Sans Pro';
	font-style: normal;
	font-weight: 300;
	src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwlxdr.ttf) format('truetype');
}
* {
	*   box-sizing: border-box;
	*     margin: 0;
	*       padding: 0;
	*         font-weight: 300;
	*         }
	*         body {
		*           font-family: "Source Sans Pro", sans-serif;
		*             color: white;
		*               font-weight: 300;
		*               }
		*               body ::-webkit-input-placeholder {
			*                 /* WebKit browsers */
			font-family: "Source Sans Pro", sans-serif;
			color: white;
			font-weight: 300;
		}
		body :-moz-placeholder {
			/* Mozilla Firefox 4 to 18 */
			font-family: "Source Sans Pro", sans-serif;
			color: white;
			opacity: 1;
			font-weight: 300;
		}
		body ::-moz-placeholder {
			/* Mozilla Firefox 19+ */
			font-family: "Source Sans Pro", sans-serif;
			color: white;
			opacity: 1;
			font-weight: 300;
		}
		body :-ms-input-placeholder {
			/* Internet Explorer 10+ */
			font-family: "Source Sans Pro", sans-serif;
			color: white;
			font-weight: 300;
		}
		.wrapper {
			background: #50a3a2;
			background: linear-gradient(to bottom right, #424242 0%, #000000 100%);
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
		.wrapper.form-success .container h1 {
			-webkit-transform: translateY(85px);
			transform: translateY(85px);
		}
		.container {
			max-width: 600px;
			margin: 0 auto;
			height: 400px;
			text-align: center;

			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			height: 100%;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			justify-content: center;
		}
		.container h1 {
			font-size: 40px;
			font-family: "Source Sans Pro", sans-serif;
			color: white;
			transition-duration: 1s;
			transition-timing-function: ease-in-put;
			font-weight: 200;
		}
		form {
			padding: 40px 0;
			position: relative;
			z-index: 2;
		}
		form input {
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
			outline: 0;
			border: 1px solid rgba(255, 255, 255, 0.4);
			background-color: rgba(255, 255, 255, 0.2);
			width: 250px;
			border-radius: 3px;
			padding: 10px 15px;
			margin: 0 auto 10px auto;
			display: block;
			text-align: center;
			font-size: 18px;
			color: white;
			transition-duration: 0.25s;
			font-weight: 300;
		}
		form input:hover {
			background-color: rgba(255, 255, 255, 0.4);
		}
		form input:focus {
			background-color: white;
			width: 300px;
			color: #000000;
		}
		form button {
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
			outline: 0;
			background-color: white;
			border: 0;
			padding: 10px 15px;
			color: #000000;
			border-radius: 3px;
			width: 250px;
			cursor: pointer;
			font-size: 18px;
			transition-duration: 0.25s;
		}
		form button:hover {
			background-color: #f5f7f9;
		}
		.bg-redlines {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
		}
		.bg-redlines li {
			position: absolute;
			list-style: none;
			display: block;
			width: 10px;
			height: 1000px;
			background-color: rgba(255, 0, 0, 0.15);
			bottom: -160px;
			-webkit-animation: square 25s infinite;
			animation: square 25s infinite;
			transition-timing-function: linear;
		}
		.bg-redlines li:nth-child(1) {
			left: 10%;
		}
		.bg-redlines li:nth-child(2) {
			left: 20%;
			width: 10px;
			height: 800px;
			-webkit-animation-delay: 2s;
			animation-delay: 2s;
			-webkit-animation-duration: 17s;
			animation-duration: 17s;
		}
		.bg-redlines li:nth-child(3) {
			left: 25%;
			-webkit-animation-delay: 4s;
			animation-delay: 4s;
		}
		.bg-redlines li:nth-child(4) {
			left: 40%;
			width: 10px;
			height: 600px;
			-webkit-animation-duration: 22s;
			animation-duration: 22s;
			background-color: rgba(255, 0, 0, 0.25);
		}
		.bg-redlines li:nth-child(5) {
			left: 70%;
		}
		.bg-redlines li:nth-child(6) {
			left: 80%;
			width: 10px;
			height: 420px;
			-webkit-animation-delay: 3s;
			animation-delay: 3s;
			background-color: rgba(255, 0, 0, 0.2);
		}
		.bg-redlines li:nth-child(7) {
			left: 32%;
			width: 10px;
			height: 500px;
			-webkit-animation-delay: 7s;
			animation-delay: 7s;
		}
		.bg-redlines li:nth-child(8) {
			left: 55%;
			width: 10px;
			height: 200px;
			-webkit-animation-delay: 15s;
			animation-delay: 15s;
			-webkit-animation-duration: 40s;
			animation-duration: 40s;
		}
		.bg-redlines li:nth-child(9) {
			left: 25%;
			width: 10px;
			height: 100px;
			-webkit-animation-delay: 2s;
			animation-delay: 2s;
			-webkit-animation-duration: 40s;
			animation-duration: 40s;
			background-color: rgba(255, 0, 0, 0.3);
		}
		.bg-redlines li:nth-child(10) {
			left: 90%;
			width: 10px;
			height: 160px;
			-webkit-animation-delay: 11s;
			animation-delay: 11s;
		}
		@-webkit-keyframes square {
			0% {
				-webkit-transform: translateY(0);
				transform: translateY(0);
			}
			100% {
				-webkit-transform: translateY(-700px) rotate(600deg);
				transform: translateY(-700px) rotate(600deg);
			}
		}
		@keyframes square {
			0% {
				-webkit-transform: translateY(0);
				transform: translateY(0);
			}
			100% {
				-webkit-transform: translateY(-700px) rotate(600deg);
				transform: translateY(-700px) rotate(600deg);
			}
		}