#wrapper {
	-moz-animation: wrapper 3s forwards;
	-webkit-animation: wrapper 3s forwards;
	-ms-animation: wrapper 3s forwards;
	animation: wrapper 3s forwards;
	height: 100%;
	left: 0;
	opacity: 0;
	position: fixed;
	top: 0;
	width: 100%;
}

/* BG */

#bg {
	-moz-animation: bg 60s linear infinite;
	-webkit-animation: bg 60s linear infinite;
	-ms-animation: bg 60s linear infinite;
	animation: bg 60s linear infinite;
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
/* Set your background with this */

	background: #348cb2 url("images/bg.jpg") bottom left;
	background-repeat: repeat-x;
	height: 100%;
	left: 0;
	opacity: 1;
	position: fixed;
	top: 0;
}


/* Main */

#main {
	height: 100%;
	left: 0;
	position: fixed;
	text-align: center;
	top: 0;
	width: 100%;
}

	#main:before {
		content: '';
		display: inline-block;
		height: 100%;
		margin-right: 0;
		vertical-align: middle;
		width: 1px;
	}

/* Header */


#header {
	-moz-animation: header 1s 2.25s forwards;
	-webkit-animation: header 1s 2.25s forwards;
	-ms-animation: header 1s 2.25s forwards;
	animation: header 1s 2.25s forwards;
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	cursor: default;
	display: inline-block;
	opacity: 0;
	position: relative;
	text-align: center;
	top: -1em;
	vertical-align: middle;
	width: 90%;
}

	#header h1 {
		font-size: 4.35em;
		font-weight: 900;
		letter-spacing: -0.035em;
		line-height: 1em;
	}

	#header p {
		font-size: 1.25em;
		margin: 0.75em 0 0.25em 0;
		opacity: 0.75;
	}

	#header nav {
		margin: 1.5em 0 0 0;
	}

		#header nav li {
			-moz-animation: nav-icons 0.5s ease-in-out forwards;
			-webkit-animation: nav-icons 0.5s ease-in-out forwards;
			-ms-animation: nav-icons 0.5s ease-in-out forwards;
			animation: nav-icons 0.5s ease-in-out forwards;
			-moz-backface-visibility: hidden;
			-webkit-backface-visibility: hidden;
			-ms-backface-visibility: hidden;
			backface-visibility: hidden;
			-moz-transform: translate3d(0,0,0);
			-webkit-transform: translate3d(0,0,0);
			-ms-transform: translate3d(0,0,0);
			transform: translate3d(0,0,0);
			display: inline-block;
			height: 5.35em;
			line-height: 5.885em;
			opacity: 0;
			position: relative;
			top: 0;
			width: 5.35em;
		}

			#header nav li:nth-child(1) {
				-moz-animation-delay: 2.5s;
				-webkit-animation-delay: 2.5s;
				-ms-animation-delay: 2.5s;
				animation-delay: 2.5s;
			}

			#header nav li:nth-child(2) {
				-moz-animation-delay: 2.75s;
				-webkit-animation-delay: 2.75s;
				-ms-animation-delay: 2.75s;
				animation-delay: 2.75s;
			}

			#header nav li:nth-child(3) {
				-moz-animation-delay: 3s;
				-webkit-animation-delay: 3s;
				-ms-animation-delay: 3s;
				animation-delay: 3s;
			}

			#header nav li:nth-child(4) {
				-moz-animation-delay: 3.25s;
				-webkit-animation-delay: 3.25s;
				-ms-animation-delay: 3.25s;
				animation-delay: 3.25s;
			}

			#header nav li:nth-child(5) {
				-moz-animation-delay: 3.5s;
				-webkit-animation-delay: 3.5s;
				-ms-animation-delay: 3.5s;
				animation-delay: 3.5s;
			}

			#header nav li:nth-child(6) {
				-moz-animation-delay: 3.75s;
				-webkit-animation-delay: 3.75s;
				-ms-animation-delay: 3.75s;
				animation-delay: 3.75s;
			}

			#header nav li:nth-child(7) {
				-moz-animation-delay: 4s;
				-webkit-animation-delay: 4s;
				-ms-animation-delay: 4s;
				animation-delay: 4s;
			}

			#header nav li:nth-child(8) {
				-moz-animation-delay: 4.25s;
				-webkit-animation-delay: 4.25s;
				-ms-animation-delay: 4.25s;
				animation-delay: 4.25s;
			}

			#header nav li:nth-child(9) {
				-moz-animation-delay: 4.5s;
				-webkit-animation-delay: 4.5s;
				-ms-animation-delay: 4.5s;
				animation-delay: 4.5s;
			}

			#header nav li:nth-child(10) {
				-moz-animation-delay: 4.75s;
				-webkit-animation-delay: 4.75s;
				-ms-animation-delay: 4.75s;
				animation-delay: 4.75s;
			}

		#header nav a {
			-webkit-tap-highlight-color: transparent;
			-webkit-touch-callout: none;
			border: 0;
			display: inline-block;
		}

			#header nav a:before {
				-moz-transition: all 0.2s ease-in-out;
				-webkit-transition: all 0.2s ease-in-out;
				-ms-transition: all 0.2s ease-in-out;
				transition: all 0.2s ease-in-out;
				border-radius: 100%;
				border: solid 1px #fff;
				display: block;
				font-size: 1.75em;
				height: 2.5em;
				line-height: 2.5em;
				position: relative;
				text-align: center;
				top: 0;
				width: 2.5em;
			}

			#header nav a:hover {
				font-size: 1.1em;
			}

				#header nav a:hover:before {
					background-color: rgba(255, 255, 255, 0.175);
					color: #fff;
				}

			#header nav a:active {
				font-size: 0.95em;
				background: none;
			}

				#header nav a:active:before {
					background-color: rgba(255, 255, 255, 0.35);
					color: #fff;
				}

			#header nav a span {
				display: none;
			}

/* Footer */

#footer {
	background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%);
	background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%);
	background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%);
	background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%);
	bottom: 0;
	cursor: default;
	height: 6em;
	left: 0;
	line-height: 8em;
	position: absolute;
	text-align: center;
	width: 100%;
}

/* Wide */

@media screen and (max-width: 1680px) {

	/* Basic */

		body, input, select, textarea {
			font-size: 13pt;
		}

	/* BG */

		@-moz-keyframes bg {
			0% {
				-moz-transform: translate3d(0,0,0);
				-webkit-transform: translate3d(0,0,0);
				-ms-transform: translate3d(0,0,0);
				transform: translate3d(0,0,0);
			}

			100% {
				-moz-transform: translate3d(-1500px,0,0);
				-webkit-transform: translate3d(-1500px,0,0);
				-ms-transform: translate3d(-1500px,0,0);
				transform: translate3d(-1500px,0,0);
			}

}

	@-webkit-keyframes bg {
		0% {
			-moz-transform: translate3d(0,0,0);
			-webkit-transform: translate3d(0,0,0);
			-ms-transform: translate3d(0,0,0);
			transform: translate3d(0,0,0);
		}

		100% {
			-moz-transform: translate3d(-1500px,0,0);
			-webkit-transform: translate3d(-1500px,0,0);
			-ms-transform: translate3d(-1500px,0,0);
			transform: translate3d(-1500px,0,0);
		}
		}

	@-ms-keyframes bg {
		0% {
			-moz-transform: translate3d(0,0,0);
			-webkit-transform: translate3d(0,0,0);
			-ms-transform: translate3d(0,0,0);
			transform: translate3d(0,0,0);
		}

		100% {
			-moz-transform: translate3d(-1500px,0,0);
			-webkit-transform: translate3d(-1500px,0,0);
			-ms-transform: translate3d(-1500px,0,0);
			transform: translate3d(-1500px,0,0);
		}
	}

	@keyframes bg {
		0% {
			-moz-transform: translate3d(0,0,0);
			-webkit-transform: translate3d(0,0,0);
			-ms-transform: translate3d(0,0,0);
			transform: translate3d(0,0,0);
		}

		100% {
			-moz-transform: translate3d(-1500px,0,0);
			-webkit-transform: translate3d(-1500px,0,0);
			-ms-transform: translate3d(-1500px,0,0);
			transform: translate3d(-1500px,0,0);
		}
	}

	#bg {
		background-size: 1500px auto;
		width: 4500px;
	} }

/* Normal */

@media screen and (max-width: 1280px) {

	/* Basic */

		body, input, select, textarea {
			font-size: 12pt;
		}

	/* BG */

		@-moz-keyframes bg {
			0% {
				-moz-transform: translate3d(0,0,0);
				-webkit-transform: translate3d(0,0,0);
				-ms-transform: translate3d(0,0,0);
				transform: translate3d(0,0,0);
			}

			100% {
				-moz-transform: translate3d(-750px,0,0);
				-webkit-transform: translate3d(-750px,0,0);
				-ms-transform: translate3d(-750px,0,0);
				transform: translate3d(-750px,0,0);
			}

}

	@-webkit-keyframes bg {
		0% {
			-moz-transform: translate3d(0,0,0);
			-webkit-transform: translate3d(0,0,0);
			-ms-transform: translate3d(0,0,0);
			transform: translate3d(0,0,0);
		}

		100% {
			-moz-transform: translate3d(-750px,0,0);
			-webkit-transform: translate3d(-750px,0,0);
			-ms-transform: translate3d(-750px,0,0);
			transform: translate3d(-750px,0,0);
		}
		}

	@-ms-keyframes bg {
		0% {
			-moz-transform: translate3d(0,0,0);
			-webkit-transform: translate3d(0,0,0);
			-ms-transform: translate3d(0,0,0);
			transform: translate3d(0,0,0);
		}

		100% {
			-moz-transform: translate3d(-750px,0,0);
			-webkit-transform: translate3d(-750px,0,0);
			-ms-transform: translate3d(-750px,0,0);
			transform: translate3d(-750px,0,0);
		}
	}

	@keyframes bg {
		0% {
			-moz-transform: translate3d(0,0,0);
			-webkit-transform: translate3d(0,0,0);
			-ms-transform: translate3d(0,0,0);
			transform: translate3d(0,0,0);
		}

		100% {
			-moz-transform: translate3d(-750px,0,0);
			-webkit-transform: translate3d(-750px,0,0);
			-ms-transform: translate3d(-750px,0,0);
			transform: translate3d(-750px,0,0);
		}
	}

	#bg {
		background-size: 750px auto;
		width: 2250px;
	} }

/* Mobile */

@media screen and (max-width: 736px) {

	/* Basic */

		body {
			min-width: 320px;
		}

		body, input, select, textarea {
			font-size: 11pt;
		}

	/* BG */

		@-moz-keyframes bg {
			0% {
				-moz-transform: translate3d(0,0,0);
				-webkit-transform: translate3d(0,0,0);
				-ms-transform: translate3d(0,0,0);
				transform: translate3d(0,0,0);
			}

			100% {
				-moz-transform: translate3d(-300px,0,0);
				-webkit-transform: translate3d(-300px,0,0);
				-ms-transform: translate3d(-300px,0,0);
				transform: translate3d(-300px,0,0);
			}

}

	@-webkit-keyframes bg {
		0% {
			-moz-transform: translate3d(0,0,0);
			-webkit-transform: translate3d(0,0,0);
			-ms-transform: translate3d(0,0,0);
			transform: translate3d(0,0,0);
		}

		100% {
			-moz-transform: translate3d(-300px,0,0);
			-webkit-transform: translate3d(-300px,0,0);
			-ms-transform: translate3d(-300px,0,0);
			transform: translate3d(-300px,0,0);
		}
		}

	@-ms-keyframes bg {
		0% {
			-moz-transform: translate3d(0,0,0);
			-webkit-transform: translate3d(0,0,0);
			-ms-transform: translate3d(0,0,0);
			transform: translate3d(0,0,0);
		}

		100% {
			-moz-transform: translate3d(-300px,0,0);
			-webkit-transform: translate3d(-300px,0,0);
			-ms-transform: translate3d(-300px,0,0);
			transform: translate3d(-300px,0,0);
		}
	}

	@keyframes bg {
		0% {
			-moz-transform: translate3d(0,0,0);
			-webkit-transform: translate3d(0,0,0);
			-ms-transform: translate3d(0,0,0);
			transform: translate3d(0,0,0);
		}

		100% {
			-moz-transform: translate3d(-300px,0,0);
			-webkit-transform: translate3d(-300px,0,0);
			-ms-transform: translate3d(-300px,0,0);
			transform: translate3d(-300px,0,0);
		}
	}

	#bg {
		background-size: 300px auto;
		width: 900px;
	}

/* Header */

	#header h1 {
		font-size: 2.5em;
	}

	#header p {
		font-size: 1em;
	}

	#header nav {
		font-size: 1em;
	}

		#header nav a:hover {
			font-size: 1em;
		}

		#header nav a:active {
			font-size: 1em;
		} }

/* Mobile (Portrait) */

@media screen and (max-width: 480px) {

	/* BG */

		@-moz-keyframes bg {
			0% {
				-moz-transform: translate3d(0,0,0);
				-webkit-transform: translate3d(0,0,0);
				-ms-transform: translate3d(0,0,0);
				transform: translate3d(0,0,0);
			}

			100% {
				-moz-transform: translate3d(-412.5px,0,0);
				-webkit-transform: translate3d(-412.5px,0,0);
				-ms-transform: translate3d(-412.5px,0,0);
				transform: translate3d(-412.5px,0,0);
			}

}

	@-webkit-keyframes bg {
		0% {
			-moz-transform: translate3d(0,0,0);
			-webkit-transform: translate3d(0,0,0);
			-ms-transform: translate3d(0,0,0);
			transform: translate3d(0,0,0);
		}

		100% {
			-moz-transform: translate3d(-412.5px,0,0);
			-webkit-transform: translate3d(-412.5px,0,0);
			-ms-transform: translate3d(-412.5px,0,0);
			transform: translate3d(-412.5px,0,0);
		}
		}

	@-ms-keyframes bg {
		0% {
			-moz-transform: translate3d(0,0,0);
			-webkit-transform: translate3d(0,0,0);
			-ms-transform: translate3d(0,0,0);
			transform: translate3d(0,0,0);
		}

		100% {
			-moz-transform: translate3d(-412.5px,0,0);
			-webkit-transform: translate3d(-412.5px,0,0);
			-ms-transform: translate3d(-412.5px,0,0);
			transform: translate3d(-412.5px,0,0);
		}
	}

	@keyframes bg {
		0% {
			-moz-transform: translate3d(0,0,0);
			-webkit-transform: translate3d(0,0,0);
			-ms-transform: translate3d(0,0,0);
			transform: translate3d(0,0,0);
		}

		100% {
			-moz-transform: translate3d(-412.5px,0,0);
			-webkit-transform: translate3d(-412.5px,0,0);
			-ms-transform: translate3d(-412.5px,0,0);
			transform: translate3d(-412.5px,0,0);
		}
	}

	#bg {
		background-size: 412.5px auto;
		width: 1237.5px;
	}

/* Header */

	#header nav {
		padding: 0 1em;
	} }


	.forms-section {width: 100%; display: flex;flex-direction: column;justify-content: center;align-items: center;overflow: auto;position: fixed;left: 50%;top: 50%;height: 100%;transform: translate(-50%, -50%);}.section-title {font-size: 42px;letter-spacing: 1px;color: #fff;padding-top: 70px;margin-bottom: 30px;font-family: "lato", sans-serif;text-transform: uppercase;}.forms {display: flex;align-items: flex-start;margin-top: 30px;font-family: "lato", sans-serif;/* overflow: auto; *//* position: fixed; *//* left: 0; *//* top: 0; *//* height: 100%; */}.form-wrapper {animation: hideLayer .3s ease-out forwards;}.form-wrapper.is-active {animation: showLayer .3s ease-in forwards;}@keyframes showLayer {50% {z-index: 1;}100% {z-index: 1;}}@keyframes hideLayer {0% {z-index: 1;}49.999% {z-index: 1;}}.switcher {position: relative;cursor: pointer;display: block;margin-right: auto;margin-left: auto;padding: 0;text-transform: uppercase;font-family: inherit;font-size: 16px;letter-spacing: .5px;color: #999;background-color: transparent;border: none;outline: none;transform: translateX(0);transition: all .3s ease-out;}.form-wrapper.is-active .switcher-login {color: #fff;transform: translateX(170px);}.form-wrapper.is-active .switcher-signup {color: #fff;transform: translateX(-170px);}.underline {position: absolute;bottom: -5px;left: 0;overflow: hidden;pointer-events: none;width: 100%;height: 2px;}.underline::before {content: '';position: absolute;top: 0;left: inherit;display: block;width: inherit;height: inherit;background-color: currentColor;transition: transform .2s ease-out;}.switcher-login .underline::before {transform: translateX(101%);}.switcher-signup .underline::before {transform: translateX(-101%);}.form-wrapper.is-active .underline::before {transform: translateX(0);}.form {overflow: hidden;min-width: 450px;margin-top: 50px;padding: 30px 35px;border-radius: 5px;transform-origin: top;opacity: 0.4;}.form-login {animation: hideLogin .3s ease-out forwards;}.form-wrapper.is-active .form-login {animation: showLogin .3s ease-in forwards;border: 2px solid #bbd2ff;box-shadow: 0px 0px 70px 0px #00000073;opacity: 1;}@keyframes showLogin {0% {background: #d7e7f1;transform: translate(40%, 10px);}50% {transform: translate(0, 0);}100% {background-color: #fffffff5;transform: translate(35%, -20px);}}@keyframes hideLogin {0% {background-color: #fff;transform: translate(35%, -20px);}50% {transform: translate(0, 0);}100% {background: #d7e7f1;transform: translate(40%, 10px);}}.form-signup {animation: hideSignup .3s ease-out forwards;}.form-wrapper.is-active .form-signup {animation: showSignup .3s ease-in forwards;border: 2px solid #bbd2ff;box-shadow: 0px 0px 70px 0px #00000073;opacity: 1;}@keyframes showSignup {0% {background: #d7e7f1;transform: translate(-40%, 10px) scaleY(.8);}50% {transform: translate(0, 0) scaleY(.8);}100% {background-color: #fff;transform: translate(-35%, -20px) scaleY(1);}}@keyframes hideSignup {0% {background-color: #fff;transform: translate(-35%, -20px) scaleY(1);}50% {transform: translate(0, 0) scaleY(.8);}100% {background: #d7e7f1;transform: translate(-40%, 10px) scaleY(.8);}}.form fieldset {position: relative;opacity: 0;margin: 0;padding: 0;border: 0;transition: all .3s ease-out;}.form-login fieldset {transform: translateX(-50%);}.form-signup fieldset {transform: translateX(50%);}.form-wrapper.is-active fieldset {opacity: 1;transform: translateX(0);transition: opacity .4s ease-in, transform .35s ease-in;}.form legend {position: absolute;overflow: hidden;width: 1px;height: 1px;clip: rect(0 0 0 0);}.input-block {margin-bottom: 20px;}.input-block label {font-size: 14px;color: #414141;}.input-block input {display: block;width: 100%;margin-top: 8px;padding-right: 15px;padding-left: 15px;font-size: 16px;line-height: 40px;color: #3b4465;background: #ffffff;border: 1px solid #cddbef;border-radius: 5px;}.form [type='submit'] {opacity: 0;display: block;min-width: 120px;margin: 30px auto 10px;font-size: 14px;line-height: 40px;font-weight: 800;border-radius: 25px;border: none;transition: all .3s ease-out;text-transform: uppercase;}.form-wrapper.is-active .form [type='submit'] {opacity: 1;transform: translateX(0);transition: all .4s ease-in;}.btn-login {color: #fbfdff;background: #008fd5;transform: translateX(-30%);}.btn-signup {color: #008fd5;background: #fbfdff;box-shadow: inset 0 0 0 2px #008fd5;transform: translateX(30%);}