/*---------- MAIN SignUp---------------*/
.mainSignup {
	position: relative;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	min-height: 68vh;
	overflow: hidden;
	display: flex;
	margin-top: -60px;
	
}

.mainSignupBack {
	position: absolute;
	top: 60px;
	left: 0;
	right: 0;
	bottom: 60px;
	background: url("/tempimg/SignBack.png");
	background-size: cover;
	background-position: right center;
	/*background-attachment: fixed;*/
	opacity: 1;
}

.mainSignupContent {
	position: relative;
	margin-top: 0;
	margin-left: 60%;
	margin-right: 6%;
	padding: 110px 2vw 100px 2vw;
	background-color: rgba(var(--color-dark-bg-rgb), 0.7);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	overflow: hidden;
	border-radius: 10% 0px 10% 0px;
}

.mainSignupContent h2,
.mainSignupContent h4,
.mainSignupContent p {
	position: relative;
	z-index: 2;
	color: #fff !important;
	width: 100%;
}

.mainSignupContent h2 {
	margin: 0px 0px 20px 0px;
}

.mainSignupContent h4 {
	margin: 0px 0px 20px 0px;
}

.mainSignupContent p {
	margin: 0px 0px 30px 0px;
	font-size: 24px;
}

.mainSignupForm {
	position: relative;
	z-index: 2;
	width: 100%;
}

.mainSignupForm .form-control {
	width: 100%;
	height: 46px;
	padding: 10px 14px;
	font-size: 24px;
	margin-bottom: 20px;
	border-radius: 4px;
}

.mainSignupForm button {
	width: 100%;
}
/* =========================================================
   MAIN SIGNUP
   MOBILE / TABLET
========================================================= */

@media(max-width: 991px) {

	.mainSignup {
		position: relative;

		width: 100%;

		min-height: auto;

		margin: 0;

		padding: 60px 0 !important;

		display: block;

		overflow: hidden;

		background-color: var(--color-background-light);
	}


	.mainSignupBack {
		position: absolute;

		top: 0;
		right: 0;
		bottom: 0;
		left: 0;

		width: 100%;
		height: 100%;

		background-image: url("/tempimg/SignBack.png");

		background-size: cover;

		background-position: center center;

		background-repeat: no-repeat;

		opacity: 1;
	}


	.mainSignupContent {
		position: relative;

		width: auto;

		margin: 0 5%;

		padding:
			50px
			28px
			55px
			28px;

		display: flex;

		flex-direction: column;

		align-items: flex-start;

		justify-content: center;

		background-color:
			rgba(
				var(--color-dark-bg-rgb),
				.78
			);

		border-radius:
			45px
			0
			45px
			0;

		overflow: hidden;

		box-sizing: border-box;

		z-index: 2;
	}


	.mainSignupContent h4 {
		width: 100%;

		margin:
			0
			0
			15px
			0;
	}


	.mainSignupContent h2 {
		width: 100%;

		margin:
			0
			0
			20px
			0;
	}


	.mainSignupContent p {
		width: 100%;

		margin:
			0
			0
			28px
			0;

		font-size: 21px;

		line-height: 1.45;
	}


	.mainSignupForm {
		width: 100%;
	}


	.mainSignupForm .form-control {
		width: 100%;

		height: 46px;

		margin:
			0
			0
			16px
			0;

		font-size: 20px;

		box-sizing: border-box;
	}


	.mainSignupForm button {
		width: 100%;
	}


	.signBubbles {
		top: 0;
		right: 0;

		width: 100%;
		height: 100%;
	}

}
/* =========================================================
   FLOATING WATERCOLOR DOTS
========================================================= */

.signBubbles {
	position: absolute;
	top: 0;
	right: 0;

	/* Wider so a few dots drift farther toward center */
	width: 58%;
	height: 100%;

	overflow: hidden;
	pointer-events: none;

	z-index: 2;
}


.signBubble {
	position: absolute;
	display: block;
	height: auto;

	opacity: 0;

	animation-name: signbubbleFloat;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}


/* =========================================================
   INDIVIDUAL DOTS
========================================================= */

.signBubble.b1 {
	right: 5%;
	bottom: 5%;
	width: 19px;

	animation-duration: 24s;
	animation-delay: -4s;
}

.signBubble.b2 {
	right: 15%;
	bottom: 13%;
	width: 30px;

	animation-duration: 29s;
	animation-delay: -17s;
}

.signBubble.b3 {
	right: 27%;
	bottom: 4%;
	width: 14px;

	animation-duration: 26s;
	animation-delay: -9s;
}

.signBubble.b4 {
	right: 39%;
	bottom: 19%;
	width: 13px;

	animation-duration: 31s;
	animation-delay: -23s;
}

.signBubble.b5 {
	right: 49%;
	bottom: 7%;
	width: 21px;

	animation-duration: 27s;
	animation-delay: -13s;
}

.signBubble.b6 {
	right: 21%;
	bottom: 32%;
	width: 17px;

	animation-duration: 33s;
	animation-delay: -28s;
}

.signBubble.b7 {
	right: 57%;
	bottom: 25%;
	width: 11px;

	animation-duration: 28s;
	animation-delay: -20s;
}

.signBubble.b8 {
	right: 34%;
	bottom: 42%;
	width: 24px;

	animation-duration: 35s;
	animation-delay: -7s;
}

.signBubble.b9 {
	right: 9%;
	bottom: 48%;
	width: 13px;

	animation-duration: 30s;
	animation-delay: -25s;
}


/* =========================================================
   FLOAT ANIMATION
========================================================= */

@keyframes signbubbleFloat {

	/* Brief invisible pause before appearing */
	0% {
		transform: translate3d(0, 70px, 0);
		opacity: 0;
	}

	10% {
		transform: translate3d(3px, 45px, 0);
		opacity: 0;
	}

	18% {
		opacity: .42;
	}

	35% {
		transform: translate3d(-12px, -65px, 0);
		opacity: .48;
	}

	55% {
		transform: translate3d(8px, -170px, 0);
		opacity: .44;
	}

	72% {
		transform: translate3d(-8px, -280px, 0);
		opacity: .36;
	}

	86% {
		transform: translate3d(10px, -370px, 0);
		opacity: .18;
	}

	92% {
		opacity: .36;
	}

	/* Gives a little dead time before the loop repeats */
	100% {
		transform: translate3d(-4px, -430px, 0);
		opacity: .0;
	}

}