/*!
 * Login Stylesheet
 */
 
@import url('../fonts/aeonik-web/aeonik-web.css');




/* = Standards
-----------------------------------------------*/

*{
	box-sizing:border-box !important;
	text-align:left !important;
}

	html,
	body{
		min-width:320px !important;

		background-color:#000000 !important;
        color:#FFFFFF !important;
        font-family:'Aeonik', sans-serif !important;
        font-size:20px !important;
        font-weight:300 !important;
        line-height:1.4 !important;
	}
	
	body.login,
	body#error-page{
		background-color:#000000 !important;

		width:100% !important;
		height:auto !important;
		min-height:100% !important;

		display:grid;
		position:relative;

		margin:0px auto;
		padding:20px 30px 56px;
		border:0px none;

		grid-template-columns:minmax(0, 1fr);
		grid-template-rows:auto -webkit-min-content -webkit-min-content auto;
		grid-template-rows:auto min-content min-content auto;
		-moz-column-gap:200px;
		     column-gap:200px;
		row-gap:50px;
	}

	@media screen and (min-width:480px){
		body.login,
		body#error-page{
			max-width:480px !important;
			padding-bottom:90px;
		}
	}
	@media screen and (min-width:768px){
		body.login,
		body#error-page{
			max-width:768px !important;
			padding-bottom:90px;
		}
	}
	@media screen and (min-width:992px){
		body.login,
		body#error-page{
			max-width:992px !important;
			padding-bottom:117px;
			grid-template-columns:-webkit-min-content auto;
			grid-template-columns:min-content auto;
		}
	}
	@media screen and (min-width:1200px){
		body.login,
		body#error-page{
			max-width:1200px !important;
			padding-bottom:141px;
		}
	}
	@media screen and (min-width:1440px){
		body.login,
		body#error-page{
			/* max-width:1440px !important; */
			padding-bottom:169px;
		}
	}
	/* @media screen and (min-width:1600px){ */
		body.login,
		body#error-page{
			/* max-width:1600px !important; */
			padding-bottom:188px;
		}


	/* Login Text Section */
	#login-text{
		grid-column:1;
		grid-row:2;
		align-self:center;

		width:100%;
		height:auto;

		display:block;
		position:relative;

		text-align:left;

		margin:0px auto;
		padding:0px;
		border:0px none;
	}
	@media screen and (min-width:992px){
		#login-text{
			grid-column:1;
			grid-row:2;
		}
	}

		#login-text h1{
			color:#FFFFFF;
			font-size:1.6rem;
			font-weight:400;
			line-height:1.05;
			white-space:nowrap;

			margin:0px auto;
			padding:0px;
			border:0px none;
		}
			@media screen and (min-width:992px){
				#login-text h1{
					font-size:2.4rem;
				}
			}

		#login-text h1 span{
			display:block;

			font-size:3rem;
		}
			@media screen and (min-width:480px){
				#login-text h1 span{
					font-size:5rem;
				}
			}
			@media screen and (min-width:992px){
				#login-text h1 span{
					font-size:4.4rem;
				}
			}
			@media screen and (min-width:1200px){
				#login-text h1 span{
					font-size:5.4rem;
				}
			}

		#login-text p{
			color:#FFFFFF;
			font-size:1rem !important;
			line-height:1.4 !important;

			margin:30px auto 0px !important;
			padding:0px;
		}


	/* Login Form Wrapper */
	#wlcms-login-wrapper,
	.wp-die-message{
		grid-column:1;
		grid-row:3;
		align-self:center;

		width:100%;
		height:auto;

		display:block;
		position:relative;

		text-align:left;

		margin:0px auto !important;
		padding:0px;
		border:0px none;
	}
	@media screen and (min-width:992px){
		#wlcms-login-wrapper,
		.wp-die-message{
			grid-column:2;
			grid-row:2;
		}
	
		#wlcms-login-wrapper::before,
		.wp-die-message::before{
			background-color:#FFFFFF;

			width:1px;
			height:100%;
			
			display:block;
			position:absolute;
			left:-100px;
			top:50%;

			transform:translateY(-50%);
			
			content:'';
		}
	}

		#wlcms-login-wrapper #login{
			width:100%;
			height:auto;

			display:block;
			position:relative;

			margin:0px auto;
			padding:0px;
			border:0px none;
		}

			/* Hide Logo */
			#login h1{
				display:none
			}

			/* Login Form */
			#login #loginform,
			#login #lostpasswordform{
				background-color:transparent !important;

				width:100% !important;
				height:auto !important;

				display:block !important;
				position:relative !important;
				z-index:0 !important;

				margin:0px auto !important;
				padding:0px !important;
				border:0px none !important;
			}
			
				/* Labels */
				#login #loginform label,
				#login #lostpasswordform label{
					background-color:#FFFFFF;

					width:auto;
					height:auto;

					display:inline-block;
					position:relative;
					
					color:#000000;
					font-size:1rem;
					font-weight:400;
					
					margin:0px;
					padding:0.5rem 0.75rem;
					border:0px none;
				}

				/* Inputs */
				#login #loginform input[type=text],
				#login #loginform input[type=password],
				#login #lostpasswordform input[type=text]{
					background-color:transparent;

					width:100%;
					height:auto;

					color:#FFFFFF;
					font-size:1rem;
					font-family:'Aeonik', sans-serif;
					font-weight:400;

					padding:0.5rem 0.75rem;

					margin:0px auto 20px !important;
					border:1px solid #FFFFFF;
					border-radius:0px;
					box-shadow:none !important;
				}
					#login #loginform input[type=text]:hover,
					#login #loginform input[type=password]:hover,
					#login #lostpasswordform input[type=text]:hover{
						background-color:rgba(255, 255, 255, 0.05);
					}
					#login #loginform input[type=text]:focus,
					#login #loginform input[type=text]:focus-visible,
					#login #loginform input[type=password]:focus,
					#login #loginform input[type=password]:focus-visible,
					#login #lostpasswordform input[type=text]:focus,
					#login #lostpasswordform input[type=text]:focus-visible{
						background-color:transparent;
						border-color:#1CDBBC;
						border-radius:0px;
						outline:1px solid rgba(255, 255, 255, 0);
						outline-offset:-1px;
					}

						#login #loginform input[type=text]::-webkit-input-placeholder,
						#login #loginform input[type=password]::-webkit-input-placeholder,
						#login #lostpasswordform input[type=password]::-webkit-input-placeholder{
							color:rgba(255, 255, 255, 0.25);
						}
						#login #loginform input[type=text]::-moz-placeholder,
						#login #loginform input[type=password]::-moz-placeholder,
						#login #lostpasswordform input[type=password]::-moz-placeholder{
							color:rgba(255, 255, 255, 0.25);
						}
						#login #loginform input[type=text]:-ms-input-placeholder,
						#login #loginform input[type=password]:-ms-input-placeholder,
						#login #lostpasswordform input[type=password]:-ms-input-placeholder{
							color:rgba(255, 255, 255, 0.25);
						}
						#login #loginform input[type=text]::-ms-input-placeholder,
						#login #loginform input[type=password]::-ms-input-placeholder,
						#login #lostpasswordform input[type=password]::-ms-input-placeholder{
							color:rgba(255, 255, 255, 0.25);
						}
						#login #loginform input[type=text]::-webkit-input-placeholder, 
						#login #loginform input[type=password]::-webkit-input-placeholder,
						#login #lostpasswordform input[type=password]::-webkit-input-placeholder{
							color:rgba(255, 255, 255, 0.25);
						}
						#login #loginform input[type=text]::-moz-placeholder, 
						#login #loginform input[type=password]::-moz-placeholder,
						#login #lostpasswordform input[type=password]::-moz-placeholder{
							color:rgba(255, 255, 255, 0.25);
						}
						#login #loginform input[type=text]:-ms-input-placeholder, 
						#login #loginform input[type=password]:-ms-input-placeholder,
						#login #lostpasswordform input[type=password]:-ms-input-placeholder{
							color:rgba(255, 255, 255, 0.25);
						}
						#login #loginform input[type=text]::-ms-input-placeholder, 
						#login #loginform input[type=password]::-ms-input-placeholder,
						#login #lostpasswordform input[type=password]::-ms-input-placeholder{
							color:rgba(255, 255, 255, 0.25);
						}
						#login #loginform input[type=text]::-webkit-input-placeholder, #login #loginform input[type=password]::-webkit-input-placeholder, #login #lostpasswordform input[type=password]::-webkit-input-placeholder{
							color:rgba(255, 255, 255, 0.25);
						}
						#login #loginform input[type=text]::-moz-placeholder, #login #loginform input[type=password]::-moz-placeholder, #login #lostpasswordform input[type=password]::-moz-placeholder{
							color:rgba(255, 255, 255, 0.25);
						}
						#login #loginform input[type=text]:-ms-input-placeholder, #login #loginform input[type=password]:-ms-input-placeholder, #login #lostpasswordform input[type=password]:-ms-input-placeholder{
							color:rgba(255, 255, 255, 0.25);
						}
						#login #loginform input[type=text]::-ms-input-placeholder, #login #loginform input[type=password]::-ms-input-placeholder, #login #lostpasswordform input[type=password]::-ms-input-placeholder{
							color:rgba(255, 255, 255, 0.25);
						}
						#login #loginform input[type=text]::placeholder,
						#login #loginform input[type=password]::placeholder,
						#login #lostpasswordform input[type=password]::placeholder{
							color:rgba(255, 255, 255, 0.25);
						}

					#login #loginform .button.wp-hide-pw{
						color:#FFFFFF !important;
						text-align:center;

						padding:0px;
						border:none !important;
						box-shadow:none !important;
					}

					#login #loginform .button.wp-hide-pw:hover{
						color:#1CDBBC !important;
					}

						#login #loginform .button.wp-hide-pw .dashicons{
							width:24px;
							height:24px;

							position:absolute;
							top:50%;
							left:50%;
							bottom:auto;
							right:auto;
							transform:translateX(-50%) translateY(-50%);

							font-size:24px;
						}

				/* Button styling */
				#login #loginform input[type=submit],
				#login #lostpasswordform input[type=submit]{
					background-color:#FFFFFF;
	
					width:auto;
					height:auto;
	
					display:inline-block;
					position:relative;
					z-index:0;
	
					color:#000000;
					font-size:1rem;
					font-weight:400;
					line-height:1.0;
	
					margin:10px 0px 0px;
					padding:0.75rem 1.15rem;
					border:2px solid #FFFFFF;
		
					border-radius:1.35rem;
				}
	
				#login #loginform input[type=submit]:hover,
				#login #lostpasswordform input[type=submit]:hover{
					background-color:#1CDBBC;
					border-color:#1CDBBC;
				}

				#login #loginform input[type=submit]:focus,
				#login #loginform input[type=submit]:focus-visible,
				#login #lostpasswordform input[type=submit]:focus,
				#login #lostpasswordform input[type=submit]:focus-visible{
					outline-color:#1CDBBC;
				}


			/* Remember Box */
			#login p.forgetmenot{
				margin-top:5px !important;
			}
			#login p.forgetmenot label{
				background-color:transparent !important;
				color:#FFFFFF !important;
				font-size:0.8rem !important;
				padding:0px !important;
			}
					
			/* Message */
			#login p.message,
			#login #login_error{
				background-color:rgba(255, 255, 255, 0.2) !important;
				color:#FFFFFF !important;
				font-size:0.8rem;
				font-weight:400;
				line-height:1.2;
				margin:0px auto 20px !important;
				padding:0.5rem 0.75rem !important;
				border:0px none !important;
			}
				#login p.message a,
				#login #login_error a{
					color:#FFFFFF !important;
				}
			#login #login_error{
				background-color:#E48888 !important;
				margin:-20px auto 20px !important;
			}
					
			/* Back to blog Link */
			#login p#backtoblog{
				display:none !important;
			}

			/* Forgotten password Link */
			#login p#nav{
				margin:0px !important;
				padding:0px !important;
				margin-top:-20px !important;
				display:inline-block;
				position:relative !important;
				z-index:10 !important;
			}
				#login p#nav a{
					color:#FFFFFF !important;
					font-weight:400;
					text-decoration:underline;
				}

			#login #lostpasswordform + p#nav{
				margin-top:-36px !important;
			}
				#login #lostpasswordform + p#nav::before{
					content:'Back to ';
				}
				#login #lostpasswordform + p#nav::after{
					content:' form';
				}


			/* Logout Message */
			.wp-die-message{
				height:100%;
				font-size:1rem !important;
				line-height:1.4 !important;

				display:grid;
				align-content:center;
				align-items:center;
			}

				.wp-die-message p{
					width:100%;
					height:auto;

					text-indent:-9999px;

					display:block;
					position:relative;
					
					font-size:1rem !important;
					font-weight:bold;
					line-height:1.4 !important;
					text-align:left;

					margin:0px auto !important;
				}

					.wp-die-message p a{
						background-color:#FFFFFF;
		
						width:auto;
						height:auto;
		
						display:block;
						position:absolute;
						z-index:0;
		
						color:#000000;
						font-size:1rem;
						font-weight:400;
						line-height:1.0;
						text-decoration:none;
						text-indent:0px;
						text-transform:capitalize;
		
						margin:0px;
						padding:0.75rem 1.15rem;
						border:2px solid #FFFFFF;
			
						border-radius:1.35rem;
				}
					.wp-die-message p a:hover{
						background-color:#1CDBBC;
						border-color:#1CDBBC;
					}



		/* Lottie: Horizontal Right */
		#login-track{
			width:100%;
			max-width:1920px;
			height:auto;

			display:block;
			position:absolute;
			bottom:0px;
			left:50%;
			transform:translateX(-50%);

			z-index:10;
		}
		
			#login-track::before{
				background-color:#FFFFFF;

				width:100vw;
				height:1px;
		
				display:block;
				position:absolute;
				top:0px;
				left:50%;
				transform:translateX(-50%);
		
				margin:0px auto;
				padding:0px;
				border:0px none;

				content:'';
			}

			#login-track .lottieElement{
				width:100%;
				height:auto;
		
				display:block;
				position:relative;
		
				margin:0px auto;
				padding:0px;
				border:0px none;
			}
		
				#login-track .lottieElement .lottie{
					width:100%;
					height:100%;
		
					display:block;
					position:absolute;
					z-index:20;
			
					margin:0px auto;
					padding:0px;
					border:0px none;
				}

					#login-track .lottieElement .lottie lottie-player{
						width:100%;
						height:100%;
		
						display:block;
						position:absolute;
						top:0px;
						left:0px;
					}
		
				#login-track .lottieElement .background{
					width:100%;
					height:100%;
		
					display:block;
					position:absolute;
					z-index:10;
			
					margin:0px auto;
					padding:0px;
					border:0px none;
				}
				
				#login-track .lottieElement::after{
					width:100%;
					height:0px;
		
					display:block;
					position:relative;
					z-index:0;
		
					margin:0px auto;
					padding:0px 0px 11.7484%;
					border:0px;
		
					content:'';
				}