.loginPage {
	min-width: 320px;
	min-height: 480px;
	height: 100%;
	overflow-y: scroll;
}

	.loginPage .topBarWrapper {
		position: fixed;
		z-index: 9999;
		height: 60px;
		width: 100%;
		top: 0;
		background: white;
		border-bottom: 1px solid rgba(0,0,0,0.25);
		box-shadow: 0px 4px 11px 3px rgba(0,0,0,0.25);
	}

		.loginPage .topBarWrapper .innerWrapper {
			position: relative;
			margin: auto;
			width: 100%;
			height: 100%;
		}

			.loginPage .topBarWrapper .innerWrapper .meshLogo {
				position: absolute;
				left: 15%;
				height: 35px;
				width: 100px;
				margin-right: 10.5%;
				top: 50%;
				transform: translateY(-50%);
			}

			.loginPage .topBarWrapper .innerWrapper .buttonDefault {
				width: 100px;
				transition: all 0.6s;
			}

			.loginPage .topBarWrapper .innerWrapper .buttonHolder {
				position: absolute;
				right: 15%;
				margin-left: auto;
				min-width: 215px;
				overflow: hidden;
				top: 50%;
				transform: translateY(-50%);
			}

			.loginPage .topBarWrapper .innerWrapper .loginButton {
				margin-right: 15px;
				margin-left: 115px;
			}

				.loginPage .topBarWrapper .innerWrapper .loginButton.out {
					margin-left: -115px;
				}

			/* TODO: remove this after landing page is complete */
			.loginPage .topBarWrapper .innerWrapper .signUpButton {
				display: none;
			}

				.loginPage .topBarWrapper .innerWrapper .signUpButton.out {
					margin-left: -115px;
				}

			.loginPage .topBarWrapper .innerWrapper .loginBackButton {
				margin-left: auto;
			}

				.loginPage .topBarWrapper .innerWrapper .loginBackButton.out {
					margin-right: -100px;
				}

	.loginPage .section1 {
		position: relative;
		border-bottom: 1px solid rgba(0,0,0,0.25);
		width: 100%;
		height: 92%;
		overflow: hidden;
		background: linear-gradient(to right, rgba(2, 15, 24, 0.1) 0%, rgba(2, 15, 24, 1) 90%), url(../img/login-bg.jpg) no-repeat;
		background-size: cover;
		background-position: center;
	}

		.loginPage .section1 .hexagonBackground {
			position: absolute;
			height: 110%;
			width: 2100px;
			margin-top: -2%;
			margin-left: -1%;
		}

			.loginPage .section1 .hexagonBackground .hexagonRow {
				height: 91px;
				width: 100%;
				cursor: default;
			}

				.loginPage .section1 .hexagonBackground .hexagonRow .hexagonHolder {
					position: relative;
					display: inline-block;
					width: 2.5%;
					height: 100%;
					transition: opacity 1s linear;
				}

					.loginPage .section1 .hexagonBackground .hexagonRow .hexagonHolder.out {
						opacity: 0;
						transition: opacity 1s linear;
					}

					.loginPage .section1 .hexagonBackground .hexagonRow .hexagonHolder .counter {
						font-size: 12px;
						position: absolute;
					}

					.loginPage .section1 .hexagonBackground .hexagonRow .hexagonHolder svg {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%) scale(2.2);
						transition: transform 0.5s linear;
						overflow: visible;
					}

					.loginPage .section1 .hexagonBackground .hexagonRow .hexagonHolder .backgroundHexagonImage.active {
						transition: transform 0.2s linear;
						transform: translate(-50%, -50%) scale(2.1);
					}

					.loginPage .section1 .hexagonBackground .hexagonRow .hexagonHolder .backgroundHexagonImage polygon {
						transition: stroke 0.8s, stroke-width 0.8s, stroke-opacity 0.8s;
						stroke: rgba(200, 200, 255, 0);
						stroke-width: 0.3px;
						stroke-opacity: 0.5;
					}

					.loginPage .section1 .hexagonBackground .hexagonRow .hexagonHolder .backgroundHexagonImage.active polygon {
						stroke: rgba(255, 255, 255, 0.9);
						stroke-width: 0.05px;
						stroke-opacity: 0.7;
					}

					.loginPage .section1 .hexagonBackground .hexagonRow .hexagonHolder svg.innerHexagonImage {
						position: absolute;
					}

						.loginPage .section1 .hexagonBackground .hexagonRow .hexagonHolder svg.innerHexagonImage path {
							fill: white;
						}

					.loginPage .section1 .hexagonBackground .hexagonRow .hexagonHolder svg.innerHexagonImage {
						width: 35%;
					}

						.loginPage .section1 .hexagonBackground .hexagonRow .hexagonHolder svg.innerHexagonImage.meshlogo {
							width: 51%;
							margin-left: -3%;
							margin-top: -3%;
						}

							.loginPage .section1 .hexagonBackground .hexagonRow .hexagonHolder svg.innerHexagonImage.meshlogo path {
								fill: #0E9AEF !important;
							}

		.loginPage .section1 .content {
			position: absolute;
			left: 48%;
			top: 33%;
			width: 40%;
			min-height: 37%;
			padding: 1.5%;
			background: rgba(0, 0, 0, 0.70);
			color: white;
			transition: all 0.6s linear;
			overflow: hidden;
		}

			.loginPage .section1 .content.out {
				position: absolute;
				top: 12.5%;
				left: 35%;
				width: 30%;
				height: 75%;
				background: rgba(0, 0, 0, 0.80);
				padding: 0;
			}

			.loginPage .section1 .content .heading {
				font-size: 1.6vw;
				margin-bottom: 20px;
				transition: all 0.3s linear;
			}

				.loginPage .section1 .content .heading.out {
					opacity: 0;
				}

			.loginPage .section1 .content .textContent {
				font-size: 1vw;
				transition: opacity 0.3s linear;
			}

				.loginPage .section1 .content .textContent.out {
					opacity: 0;
				}

			.loginPage .section1 .content .loginForm {
				position: absolute;
				width: 100%;
				top: 0;
				height: 0;
				transition: opacity 0.3s linear, height 0.15s linear;
				overflow: hidden;
			}

				.loginPage .section1 .content .loginForm.out {
					opacity: 0;
					visibility: hidden;
				}

				.loginPage .section1 .content .loginForm.in {
					transition: opacity 0.3s linear;
					opacity: 1;
					height: 100%;
				}

				.loginPage .section1 .content .loginForm .row1 {
					height: 40%;
					position: relative;
					width: 80%;
					margin-left: 10%;
				}

					.loginPage .section1 .content .loginForm .row1 .meshLogo {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						width: 80%;
						height: 80%;
					}

				.loginPage .section1 .content .loginForm .row2 {
					height: 30%;
					width: 65%;
					margin-left: 18.5%;
				}

					.loginPage .section1 .content .loginForm .row2 input {
						outline: 0;
						border-width: 0 0 1px;
						border-color: white;
						color: white;
						background: transparent;
						width: 90%;
						margin-left: 5%;
						margin-bottom: 5px;
						padding: 30px 0 5px 0;
						font-size: 18px;
					}

						.loginPage .section1 .content .loginForm .row2 input:-webkit-autofill,
						.loginPage .section1 .content .loginForm .row2 input:-webkit-autofill:hover,
						.loginPage .section1 .content .loginForm .row2 input:-webkit-autofill:focus
						.loginPage .section1 .content .loginForm .row2 textarea:-webkit-autofill,
						.loginPage .section1 .content .loginForm .row2 textarea:-webkit-autofill:hover
						.loginPage .section1 .content .loginForm .row2 textarea:-webkit-autofill:focus,
						.loginPage .section1 .content .loginForm .row2 select:-webkit-autofill,
						.loginPage .section1 .content .loginForm .row2 select:-webkit-autofill:hover,
						.loginPage .section1 .content .loginForm .row2 select:-webkit-autofill:focus {
							transition: background-color 5000s ease-in-out 0s;
							-webkit-text-fill-color: #fff !important;
							background-color: white !important;
						}

					.loginPage .section1 .content .loginForm .row2 passwordInput {
						margin-top: 7%;
					}

					.loginPage .section1 .content .loginForm .row2 .userNameLabel {
						margin-left: 5%;
						font-size: 14px;
					}

					.loginPage .section1 .content .loginForm .row2 .passwordLabel {
						margin-left: 5%;
						font-size: 14px;
					}

				.loginPage .section1 .content .loginForm .row3 {
					height: 20%;
					width: 80%;
					margin-top: 10%;
					margin-left: 10%;
				}

					.loginPage .section1 .content .loginForm .row3 .loginButton {
						margin: auto;
						display: block;
						font-size: 0.8vw;
						border-radius: 50px;
						padding: 2% 4%;
					}

					.loginPage .section1 .content .loginForm .row3 .forgotPasswordLink {
						font-size: 13px;
						text-decoration: underline;
						cursor: pointer;
						margin: auto;
						display: block;
						width: 50%;
						text-align: center;
						margin-top: 3%;
					}

						.loginPage .section1 .content .loginForm .row3 .forgotPasswordLink:hover {
							color: #b0b0b0;
						}

	.loginPage .section2 {
		position: relative;
		display: none; /* TODO: take out once landing page is ready*/
		width: 100%;
		height: 100%;
		transition: height 0.6s;
		overflow: hidden;
		background: white;
	}

		.loginPage .section2.out {
			height: 0%;
		}

		.loginPage .section2 .backgroundImage {
			position: absolute;
			height: 100%;
			width: 80%;
			background: linear-gradient(to right, rgba(2, 15, 24, 0.1) 0%, rgba(2, 15, 24, 0.25) 90%), url(https://media.istockphoto.com/photos/large-modern-warehouse-picture-id664595066?s=2048x2048) no-repeat;
			background-size: cover;
			background-position: center;
			left: 40%;
			opacity: 0.95;
		}

		.loginPage .section2 .innerContent {
			position: relative;
			display: flex;
			overflow: hidden;
			width: 100%;
			height: 100%;
		}

			.loginPage .section2 .innerContent:after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 85%;
				height: 100%;
				background: #FFFFFF;
				-webkit-transform-origin: 100% 0;
				-ms-transform-origin: 100% 0;
				transform-origin: 100% 0;
				-webkit-transform: skew(-37deg);
				-ms-transform: skew(-37deg);
				transform: skew(-37deg);
				box-shadow: 0px 20px 50px 50px rgba(0, 0, 0, 0.4);
			}

			.loginPage .section2 .innerContent .textArea {
				display: flex;
				align-items: center;
				justify-content: space-around;
				width: 35%;
				height: 100%;
				position: absolute;
				left: 19%;
				z-index: 99;
			}

				.loginPage .section2 .innerContent .textArea .textWrapper h1 {
					color: #0E9AEF;
				}

					.loginPage .section2 .innerContent .textArea .textWrapper h1:nth-of-type(n+2) {
						margin-top: 6%;
					}

	.loginPage .section3 {
		position: relative;
		display: none; /* TODO: take out once landing page is ready*/
		height: 90%;
		background: white;
		width: 100%;
		height: 100%;
		overflow: hidden;
		transition: height 0.6s;
		opacity: 0.95;
		overflow: hidden;
	}

		.loginPage .section3.out {
			height: 0%;
		}

		.loginPage .section3 .backgroundImage {
			position: absolute;
			height: 100%;
			width: 55%;
			background: linear-gradient(to right, rgba(2, 15, 24, 0.1) 0%, rgba(2, 15, 24, 0.25) 90%), url(https://media.istockphoto.com/photos/cardboard-boxes-on-conveyor-belt-at-distribution-warehouse-picture-id875013806?s=2048x2048) no-repeat;
			background-size: cover;
			background-position: center;
			left: -15%;
		}

		.loginPage .section3 .innerContent {
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 100%;
			margin-left: 15%;
		}

			.loginPage .section3 .innerContent:before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 2400px;
				height: 100%;
				background: #FFFFFF;
				-webkit-transform-origin: 100% 0;
				-ms-transform-origin: 100% 0;
				transform-origin: 100% 0;
				-webkit-transform: skew(20deg);
				-ms-transform: skew(20deg);
				transform: skew(20deg);
				box-shadow: 0px 20px 50px 50px rgba(0, 0, 0, 0.4);
			}

			.loginPage .section3 .innerContent .signUpWrapper {
				position: absolute;
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 100%;
				width: 50%;
				background: white;
				z-index: 999;
				left: 25%;
			}

				.loginPage .section3 .innerContent .signUpWrapper .textArea {
					width: 40%;
				}

					.loginPage .section3 .innerContent .signUpWrapper .textArea .subheading {
						font-size: 24px;
					}

					.loginPage .section3 .innerContent .signUpWrapper .textArea .heading {
						margin-top: 10px;
						font-size: 32px;
					}

				.loginPage .section3 .innerContent .signUpWrapper .signUpForm {
					width: 50%;
					transition: opacity 0.3s ease-in-out;
				}

					.loginPage .section3 .innerContent .signUpWrapper .signUpForm.out {
						opacity: 0;
					}

					.loginPage .section3 .innerContent .signUpWrapper .signUpForm .rowHolder {
						width: 100%;
					}

						.loginPage .section3 .innerContent .signUpWrapper .signUpForm .rowHolder .formInput {
							padding: 19px 20px 10px 0px;
							font-size: 20px;
							margin: 30px 0 7px 0;
							width: 100%;
							outline: none;
							font-family: 'Roboto', Helvetica, sans-serif;
							-webkit-appearance: none;
							-moz-appearance: none;
							background: transparent;
							border: none;
							border-bottom: solid 1px black;
						}

							.loginPage .section3 .innerContent .signUpWrapper .signUpForm .rowHolder .formInput.invalid {
								border-bottom: solid 1px red;
								margin: 2px 0 7px 0;
							}

						.loginPage .section3 .innerContent .signUpWrapper .signUpForm .rowHolder .requiredHolder {
							display: flex;
							align-items: center;
							height: 15px;
							margin-bottom: 10px;
						}

							.loginPage .section3 .innerContent .signUpWrapper .signUpForm .rowHolder .requiredHolder .requiredImg {
								display: flex;
								align-items: center;
								margin-right: 10px;
								width: 15px;
								height: 15px;
								border-radius: 3px;
								padding: 2px;
								background: red;
							}

								.loginPage .section3 .innerContent .signUpWrapper .signUpForm .rowHolder .requiredHolder .requiredImg path {
									fill: white;
								}

							.loginPage .section3 .innerContent .signUpWrapper .signUpForm .rowHolder .requiredHolder .requiredText {
								color: gray;
								font-size: 12px;
							}

					.loginPage .section3 .innerContent .signUpWrapper .signUpForm .buttonDefault {
						width: 150px;
						height: 50px;
						font-size: 20px;
						margin-top: 30px;
					}

				.loginPage .section3 .innerContent .signUpWrapper .signUpSuccess {
					width: 40%;
					height: 40%;
					opacity: 0;
					transition: opacity 0.3s ease-in-out;
				}

					.loginPage .section3 .innerContent .signUpWrapper .signUpSuccess.in {
						opacity: 1;
					}


					.loginPage .section3 .innerContent .signUpWrapper .signUpSuccess .checkmark {
						width: 170px;
						height: 170px;
						stroke: green;
						stroke-dashoffset: 745.74853515625;
						stroke-dasharray: 745.74853515625;
						animation: dash 2s ease-out forwards;
					}

					.loginPage .section3 .innerContent .signUpWrapper .signUpSuccess .successText {
						margin-top: 40px;
						font-size: 26px;
					}

	.loginPage .footerSection {
		height: 8%;
		background: white;
		width: 100%;
		border-top: 1px solid rgba(0,0,0,0.05);
	}

		.loginPage .footerSection .innerContent {
			position: relative;
			height: 100%;
			width: 70%;
			margin: auto;
		}

		.loginPage .footerSection .privacyPolicy {
			color: gray;
			right: 0;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
		}

		.loginPage .footerSection .copyright {
			color: gray;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
		}

#modalBody .forgotPasswordText {
	width: 80%;
	margin: auto;
	margin-bottom: 40px;
}

@keyframes dash {
	0% {
		stroke-dashoffset: 745.74853515625;
	}

	100% {
		stroke-dashoffset: 0;
	}
}

/* Section 2 and 3 at various screen sizes */
@media (max-width: 2000px) {
	.loginPage .section2 .backgroundImage {
		width: 93%;
	}

	.loginPage .section2 .innerContent:after {
		width: 95%;
	}
}

@media (max-width: 1400px) {
	.loginPage .section2 .backgroundImage {
		width: 100%;
	}

	.loginPage .section2 .innerContent:after {
		width: 110%;
	}

	.loginPage .section2 .innerContent .textArea .textWrapper .heading {
		font-size: 2vw;
	}

	.loginPage .section2 .innerContent .textArea .textWrapper .content {
		font-size: 1vw;
	}
}

/* Tablets */
@media (max-width: 1024px) {
	.loginPage .section1 .content {
		position: absolute;
		left: 10%;
		top: 10%;
		width: 80%;
		height: 80%;
		background: rgba(0, 0, 0, 0.70);
		color: white;
		transition: all 0.6s linear;
		padding: 5%;
		overflow: hidden;
	}

		.loginPage .section1 .content.out {
			left: 10%;
			top: 10%;
			width: 80%;
			height: 80%;
		}

		.loginPage .section1 .content .heading {
			font-size: 5.25vw;
			margin-bottom: 20px;
			transition: opacity 0.3s linear;
		}

		.loginPage .section1 .content .textContent {
			font-size: 2.55vw;
			transition: opacity 0.3s linear;
		}

		.loginPage .section1 .content .loginForm .row1 {
			height: 20%;
			width: 90%;
			margin-left: 5%;
			margin-top: 2%;
		}

		.loginPage .section1 .content .loginForm .row2 {
			height: 45%;
			width: 90%;
			margin-left: 5%;
			margin-top: 0;
		}

		.loginPage .section1 .content .loginForm .row3 {
			height: 25%;
			width: 90%;
			margin-left: 5%;
			margin-top: 0;
		}

			.loginPage .section1 .content .loginForm .row3 .loginButton {
				margin: auto;
				display: block;
				font-size: 2vw;
				border-radius: 50px;
				padding: 2% 4%;
			}

			.loginPage .section1 .content .loginForm .row3 .forgotPasswordLink {
				font-size: 13px;
				text-decoration: underline;
				cursor: pointer;
				margin: auto;
				display: block;
				width: 50%;
				text-align: center;
				margin-top: 3%;
			}

		.loginPage .section1 .content, .loginPage .section1 .content.out {
			background: rgba(0, 0, 0, 0.90);
		}

	.loginPage .section1 .content {
		margin: auto;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		height: 65%;
		padding: 8%;
	}

		.loginPage .section1 .content.out {
			margin: auto;
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			height: 72%;
			width: 82%;
		}

	.loginPage .section2 .innerContent {
		position: relative;
		display: flex;
		overflow: hidden;
		width: 100%;
		height: 100%;
		background: white;
	}

		.loginPage .section2 .innerContent:after {
			content: '';
			visibility: hidden;
		}

		.loginPage .section2 .innerContent .textArea {
			width: 70%;
		}

			.loginPage .section2 .innerContent .textArea .textWrapper .heading {
				font-size: 3vw;
			}

			.loginPage .section2 .innerContent .textArea .textWrapper .content {
				font-size: 2vw;
			}

	.loginPage .section3 .innerContent {
		position: relative;
		display: flex;
		overflow: hidden;
		width: 100%;
		height: 100%;
		background: white;
		margin-left: 0;
	}

		.loginPage .section3 .innerContent:before {
			content: '';
			visibility: hidden;
			width: 0;
			height: 0;
		}

	.loginPage .section3 .signUpWrapper {
		width: 100%;
		padding: 10%;
	}

	.loginPage .section3 .innerContent .signUpWrapper {
		flex-direction: column;
		justify-content: space-around;
		width: 100%;
		left: 0;
	}

		.loginPage .section3 .innerContent .signUpWrapper .textArea {
			width: 80%;
		}

		.loginPage .section3 .innerContent .signUpWrapper .signUpForm {
			width: 80%;
		}
}

/* Phones */
@media (max-width: 500px) {
	.loginPage .section1 .content .heading {
		font-size: 5.5vw;
		margin-bottom: 20px;
		transition: opacity 0.3s linear;
	}

	.loginPage .section1 .content .textContent {
		font-size: 4.5vw;
		transition: opacity 0.3s linear;
	}

	.loginPage .topBarWrapper .innerWrapper .meshLogo {
		left: 11%;
	}

	.loginPage .topBarWrapper .innerWrapper .buttonHolder {
		min-width: 115px;
		right: 2%;
	}

		.loginPage .topBarWrapper .innerWrapper .buttonHolder .loginButton {
			margin-right: 30px;
		}

	.loginPage .topBarWrapper .innerWrapper .loginButton.out {
		margin-left: -115px;
	}

	.loginPage .topBarWrapper .innerWrapper .loginBackButton {
		margin-right: 30px;
	}

	.loginPage .topBarWrapper .innerWrapper .signUpButton {
		display: none;
	}

	.loginPage .section1 .content .loginForm .row2 input {
		font-size: 5vw;
	}

	.loginPage .section1 .content .loginForm .row3 {
		margin-top: 15%;
	}

		.loginPage .section1 .content .loginForm .row3 .loginButton {
			font-size: 4.5vw;
			padding: 5% 8%;
		}

	.loginPage .section1 .hexagonBackground {
		transform: scale(0.5) rotateZ(90deg) translate(0, 1500px);
	}

		.loginPage .section1 .hexagonBackground .hexagonRow .hexagonHolder svg.innerHexagonImage {
			transform: scale(2.2) rotateZ(-90deg) translate(25%, -25%);
		}

			.loginPage .section1 .hexagonBackground .hexagonRow .hexagonHolder svg.innerHexagonImage.meshlogo {
				margin-top: 2%;
			}

	.loginPage .footerSection .privacyPolicy {
		font-size: 3.5vw;
	}

	.loginPage .footerSection .copyright {
		font-size: 3.5vw;
	}

	.loginPage .section1 .content,
	.loginPage .section1 .content.out {
		background: rgba(0, 0, 0, 0.90);
	}

	.loginPage .section2 .innerContent .textArea .textWrapper .heading {
		font-size: 4vw;
	}

	.loginPage .section2 .innerContent .textArea .textWrapper .content {
		font-size: 3vw;
	}
}

.setPasswordHolder {
	background: #04273C url(../img/login-bg.jpg) no-repeat;
	background-size: cover;
	height: 100%;
	width: 100%;
}