.section-home-parallax {
	background-color: @black;

	.parallax-video {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.floater {
		.box-sizing;
		.enable-click;
		background-color: @white;
		width: 100%;
		max-width: 450px;
		padding: 32px;

		@media @bp_768 {
			padding: 44px;
		}

		&.loading {
			position: relative;

			&:before {
				z-index: 10;
			}

			&:after {
				z-index: 9;
			}

		}

		&.forgot-password {

			@media @bp_768 {
				min-height: 370px;
			}
		}

		&.log-in {

			.divider {
				margin-top: 6px;
			}
		}

		h2 {
			.font-size(20);
			font-weight: 600;
			padding-bottom: 12px;
			letter-spacing: 0.4px;

			@media @bp_768 {
				.font-size(28);
				padding-bottom: 26px;
			}

			& + p {
				padding-top: 0;
				margin-top: 0;
			}
		}

		.top-benefits {
			.font-size(12);
			line-height: 18px;
			padding-bottom: 16px;

			@media @bp_768 {
				.font-size(14);
				line-height: 24px;
				padding-bottom: 26px;
			}

			li {
				margin-top: 4px;
				background-position: left top 4px;
				background-repeat: no-repeat;
				background-size: 12px;
				background-image: url('../images/svg/checkmark-red.svg');
				padding-left: 22px;

				@media @bp_768 {
					padding-left: 30px;
					background-size: 15px;
					margin-top: 6px;
					background-position: left top 6px;
				}

				&:first-child {
					margin-top: 0;
				}
			}
		}

		.actions {
			overflow: hidden;

			.item {
				.font-size(0);
				padding: 6px 0;
				line-height: 1;
			}

			.divider {
				.font-size(10);
				display: inline-block;
				position: relative;
				padding: 0 16px;
				text-transform: uppercase;
				color: #929699;
				line-height: 1;

				@media @bp_768 {
					.font-size(12);
					height: 14px;
				}

				&:before,
				&:after {
					content: "";
					position: absolute;
					top: 50%;
					margin-top: -1px;
					height: 1px;
					background-color: #E7E7E7;
				}

				&:before {
					right: 100%;
					left: -300px;
				}

				&:after {
					left: 100%;
					right: -300px;
				}
			}
		}

		.switcher {
			.font-size(11);
			display: block;
			font-weight: 400;
			color: #808080;
			padding-top: 8px;

			@media @bp_768 {
				.font-size(12);
			}

			a {
				.text-decoration-ink;
				color: #808080;

				&.blue {
					text-decoration: none;
					color: @blue;

					&:hover,
					&:active {
						color: @blue-roll;
					}
				}
			}
		}

		.btn-back {
			.font-size(0);
			background-position: left center;
			background-repeat: no-repeat;
			background-size: 12px;
			background-image: url('../images/svg/arrow-back-red.svg');
			width: 22px;
			height: 16px;
			margin-right: 6px;
			vertical-align: middle;
			margin-top: -2px;

			@media @bp_768 {
				background-size: 16px;
			}
		}

		.form-row {
			padding: 11px 0;

			&.has-error {

				input[type="text"],
				input[type="email"],
				input[type="password"] {
					border-color: @red;
				}

				.error-msg {
					display: block;
				}
			}
		}

		.error-msg {
			padding-top: 13px;
			line-height: 1;
			margin-bottom: -8px;

			&.general {
				text-align: center;
				padding: 6px 0;
			}
		}

		.password-wrapper {
			position: relative;

			.btn-password-toggle {
				position: absolute;
				top: 0;
				right: 0;
				z-index: 1;
			}
		}
	

		input[type="text"],
		input[type="email"],
		input[type="password"] {
			.box-sizing;
			.font-size(12);
			border: 1px solid #E0E3E5;
			width: 100%;
			height: 40px;
			color: @black;
			line-height: 1;
			padding: 0 24px;
			background-color: @white;
			color: @black;

			@media @bp_768 {
				.font-size(14);
				height: 50px;
				background-size: 25px;
			}
		}
	}

	.wrapper {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: calc(~'100vh - 50px');
		overflow: hidden;
		max-width: 1474px;
		margin: 0 auto;
		overflow: visible;

		@media @bp_768 {
			height: calc(~'100vh - 70px');
		}

		@media @bp_1200 {
			height: calc(~'100vh - 90px');
		}
		
		.scene {
			position: relative;
			width: 100%;
			height: 100%;
			background-color: @black;
		}

		.scene-layer {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			height: 100%;
		}

		.layer {
			position: absolute;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.layer-icons-lines-left {
			top: 20%;
			left: -5%;

			img {
				max-width: 400px;
			}
		}

		.layer-icons-lines-right {
			top: 3%;
			right: -10%;

			img {
				max-width: 400px;
			}
		}

		.layer-guitar-guy {
			filter: blur(2px);
			top: 8%;
			right: -6%;

			img {
				max-width: 300px;
			}
		}

		.layer-singer {
			top: 20%;
			left: 20%;

			img {
				max-width: 400px;
			}
		}

		.layer-waves {
			top: 30%;
			left: -10%;
			right: -10%;
		}

		.layer-linkin-park {
			bottom: -10%;
			left: 40%;

			img {
				max-width: 650px;
			}
		}

		.layer-dj {
			bottom: -5%;
			right: -30%;
			max-width: 1200px;
		}

		.layer-it-guy {
			bottom: -5%;
			left: -5%;
			max-width: 650px;
		}

		.layer-icons-top-left {
			top: 5%;
			left: 5%;
		}

		.layer-icons-bottom-left {
			bottom: 8%;
			left: 25%;
		}

		.layer-icons-top-right {
			top: 8%;
			right: 15%;
		}

		.layer-0 {
			top: 50%;
			left: 50%;
			width: 600px;
			height: 200px;
			margin: -100px 0 0 -300px;
			box-shadow: none;

			.floater {
				background-color: @white;
			}
		}
	}
}