.gate-header{
	padding: 2rem;
	position: absolute;}

	@media only screen and (max-width: 481px) {
		.gate-header{
			padding: 1rem;}
	}

	.site-branding img{
		max-width: 64px;
		height: auto;
		border-radius: 100px;}

.gate-container{
	display: flex;
	width: 100%;
	min-height: 100vh;}

	@media only screen and (max-width: 481px) {
		.gate-container{
			flex-direction: column;}
	}

	@media only screen and (min-width: 482px) and (max-width: 822px) {
		.gate-container{
			flex-direction: column;}
	}

	.gate-intro{
		width: 50vw;
		padding: 8rem 4rem 2rem 8rem;}

		@media only screen and (max-width: 481px) {
			.gate-intro{
				width: auto;
				padding: 6rem 1rem 1rem 1rem;}
		}

		@media only screen and (min-width: 482px) and (max-width: 822px) {
			.gate-intro{
				width: auto;
				padding: 8rem 2rem 2rem 2rem;}
		}

		@media only screen and (min-width: 823px) and (max-width: 1199px) {
			.gate-intro{
				padding: 8rem 2rem 2rem 2rem;
				width: 50vw;}
		}

 		@media only screen and (min-width: 1366px){
			.gate-intro{
				width: 48vw;
				padding: 8rem 8rem 2rem 8rem;}
		}

		@media only screen and (min-width: 1920px) {
			.gate-intro{
				width: 50vw;
				padding: 16rem 8rem 8rem 16rem;}
			}

		.gate-intro h2{
			font-size: 2.4rem;
			line-height: 140%;
			margin: 0 0 2rem 0;
			letter-spacing: 0rem;
			font-weight: 600;
			transition: var(--s-object-apperance-animation);
			opacity: 0;
			transform: translateY(7%);}

		/* Animation  */
		.gate-intro.visible h2{
			opacity: 1;
			transform: translateY(0%);
			transition-delay: 0.4s;}

			@media only screen and (max-width: 481px) {
				.gate-intro h2{
					font-size: 1.8rem;
					margin-bottom: 1rem;}
			}

			@media only screen and (min-width: 482px) and (max-width: 822px) {
				.gate-intro h2{
					font-size: 2.25rem;
					margin-bottom: 1.25rem;}
			}

			@media only screen and (min-width: 823px) and (max-width: 1124px) {
				.gate-intro h2{
					font-size: 2.25rem;}
			}

		.gate-intro h3{
			font-size: 1.25rem;
			font-weight: var(--h2-font-weight);
			line-height: 160%;
			margin: 0 0 1.25rem 0;
			opacity: 0;
			color: var(--dark-grey-color);
			transition: var(--s-object-apperance-animation);
			transform: translateY(25%);}

		/* Animation  */
		.gate-intro.visible h3{
			opacity: 1;
			transform: translateY(0%);
			transition-delay: 0.5s;}

			@media only screen and (max-width: 481px) {
				.gate-intro h3{
					font-size: 1rem;
					margin: 0 0 0.75rem 0;}
			}

			@media only screen and (min-width: 482px) and (max-width: 822px) {
				.gate-intro h3{
					font-size: 1.15rem;}
			}

			@media only screen and (min-width: 823px) and (max-width: 1124px) {
				.gate-intro h3{
					font-size: 1.15rem;}
			}

		.gate-intro p{
			font-size: 0.75rem;
			line-height: 160%;
			margin: 2rem 0 2rem 0;
			letter-spacing: 0rem;
			color: var(--dark-grey-color);
			font-weight: 400;
			opacity: 0;
			transition: var(--s-object-apperance-animation);
			transform: translateY(25%);}

		/* Animation  */
		.gate-intro.visible p{
			opacity: 1;
			transform: translateY(0%);
			transition-delay: 0.6s;}

		.gate-intro form{
			opacity: 0;
			transition: var(--s-object-apperance-animation);
			transform: translateY(20%);}

		/* Animation  */
		.gate-intro.visible form{
			opacity: 1;
			border: none;
			transform: translateY(0%);
			transition-delay: 0.5s;}

			.gate-inputs{
				display: flex;
				flex-direction: row;}

			.gate-validation{
				visibility: hidden;
				height: 0;
		        opacity: 0;
				color: #f1420c;
				margin: 1rem 0 0 0;
				font-size: 1.25rem;
				transition: var(--s-object-apperance-animation);
				transform: translateY(20%);}

				.gate-validation.incorrect_password{
					height: auto;
					margin: 1rem 0 0 0;
					transform: translateY(0%);
					opacity: 1;
					visibility: visible;}

					@media only screen and (max-width: 481px) {
						.gate-validation{
							font-size: 1rem;
							margin: 0 0 0.75rem 0;}
					}

					@media only screen and (min-width: 482px) and (max-width: 822px) {
						.gate-validation{
							font-size: 1.15rem;}
					}

					@media only screen and (min-width: 823px) and (max-width: 1124px) {
						.gate-validation{
							font-size: 1.15rem;}
					}

		
		@media only screen and (max-width: 481px) {
			.gate-intro input{
				font-size: 1rem !important;
				width: 100%;}
		}

		@media only screen and (min-width: 482px) and (max-width: 822px) {
			.gate-intro input{
				font-size: 1.15rem !important;
			}
		}

		.gate-intro input[type=submit],
		.gate-intro input[type=password]{
			transition: all 0.5s cubic-bezier(0.25,1,0.22,1);
			font-size: 1.25rem;
			font-family: var(--font-family-primary);
			font-weight: 400;
			width: auto;
			margin: 1rem 0 0 0;
			border: 0;
			background-color: var(--gray-color);
			color: var(--black-color);
			border-radius: 100rem !important;
			padding: 1rem 2rem;}

		.gate-intro input[type=submit]:focus{
			outline: 0px;}

		.gate-intro input[type=password]{
			margin-right: 1rem;
			width: 20vw;}

		.gate-intro input[type=password]:focus{
			box-shadow: inset 0px 0px 0px 2px #000;
			outline-offset: 0px;
			color: var(--black-color);
			outline: 2px;}

			@media only screen and (max-width: 481px) {
				.gate-intro input[type=password]{
					width: 100%;}
			}

			@media only screen and (min-width: 482px) and (max-width: 822px) {
				.gate-intro input[type=password]{
					width: 100%;}
			}

			@media only screen and (min-width: 823px) and (max-width: 1124px)  {
				.gate-intro input[type=password]{
					width: 100%;}
			}

		.gate-intro input[type=submit]:hover{
			background-color: var(--gray-color);
			color: var(--black-color);}
			

	.gate-wallpaper{
		width: 50vw;
		background-repeat: no-repeat;
		background-position: center;
		background-size: auto 110vh;
		transition: var(--xl-object-apperance-animation);
		opacity: 0;}

		@media only screen and (max-width: 481px) {
			.gate-wallpaper{
				width: 100%;
				height: 50vh;
				background-size: auto 65vh;}
		}

		@media only screen and (min-width: 482px) and (max-width: 822px) {
			.gate-wallpaper{
				background-size: auto 65vh;}
		}

		@media only screen and (min-width: 482px) and (max-width: 822px) {
			.gate-wallpaper{
				width: 100%;
				height: 50vh;}
		}

		@media only screen and (min-width: 1366px){
			.gate-wallpaper{
				width: 55vw;}
		}

		@media only screen and (min-width: 1920px){
			.gate-wallpaper{
				width: 50vw;}
		}

		/* Animation  */
		.gate-wallpaper.visible{
			opacity: 1;
			background-size: auto 100vh;
			transition-delay: 0.7s;}

		@media only screen and (max-width: 481px) {
			.gate-wallpaper.visible{
				background-size: cover;}
		}

		@media only screen and (min-width: 482px) and (max-width: 822px) {
			.gate-wallpaper.visible{
				background-size: cover;}
		}