@import url("https://p.typekit.net/p.css?s=1&k=abg0smv&ht=tk&f=37387.37389.37392&a=2826771&app=typekit&e=css");

@font-face {
	font-family: "kiro";
	src: url("https://use.typekit.net/af/cb5988/00000000000000003b9b12dd/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff2"), url("https://use.typekit.net/af/cb5988/00000000000000003b9b12dd/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff"), url("https://use.typekit.net/af/cb5988/00000000000000003b9b12dd/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("opentype");
	font-display: auto;
	font-style: normal;
	font-weight: 300;
}

@font-face {
	font-family: "kiro";
	src: url("https://use.typekit.net/af/30fd2a/00000000000000003b9b12df/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"), url("https://use.typekit.net/af/30fd2a/00000000000000003b9b12df/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"), url("https://use.typekit.net/af/30fd2a/00000000000000003b9b12df/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
	font-display: auto;
	font-style: normal;
	font-weight: 400;
}

@font-face {
	font-family: "kiro";
	src: url("https://use.typekit.net/af/69d5b6/00000000000000003b9b12e2/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"), url("https://use.typekit.net/af/69d5b6/00000000000000003b9b12e2/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"), url("https://use.typekit.net/af/69d5b6/00000000000000003b9b12e2/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
	font-display: auto;
	font-style: normal;
	font-weight: 700;
}


* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: "kiro", sans-serif;
}

body {
	background-color: #000000;
	height: 100vh;

}
.orevan {
	position: absolute;
	bottom: 20px;
	color: #fff !important
}

.orevan img{
	width: 250px;
}

.background{
	background-image: url('./img/background.jpg');
	background-size: contain;
	background-position: right;
	background-repeat: no-repeat;	
}

.users {
	color: #fff;
	background: #fff;
	padding: 20px;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-image: linear-gradient(45deg,#251a42 , #251a42 130%);
	transition: .3s;
}

.users .login,
.users .reg {
	width: 60%;
	transition: all .3s;
}

.users h1 {
	font-size: 50px;
	margin-bottom: 0;
}

.users p {
	color: #ffffff;
}

.users .input {
	display: block;
	width: 100%;
	margin-top: 20px;
	position: relative;
}

.users .input span:first-of-type {
	position: absolute;
	top: 8px;
}

.users .input span.eye {
	position: absolute;
	top: 8px;
	right: 10px;
	cursor: pointer;
}

.users .input input {
	border: none;
	border-bottom: 1px solid #fff;
	background: transparent;
	padding: 8px;
	padding-left: 30px;
	color: #fff;
	width: 100%;
}

/* Style for Django form fields */
.users .input input[type="email"] {
	border: none;
	border-bottom: 1px solid #fff;
	background: transparent;
	padding: 8px;
	padding-left: 30px;
	color: #fff;
	width: 100%;
}

.users .input input[type="email"]:focus {
	border-bottom: 2px solid #F7D303;
	box-shadow: 0 2px 4px rgba(247, 211, 3, 0.3);
}

.users .input input::placeholder {
	color: rgba(255, 255, 255, .5);
	transition: .3s;
}

.users .input input:focus::placeholder {
	color: transparent;
}

.users input:focus {
	outline: none;
	border-bottom: 0px solid #d07500;
}

.users input:focus svg {
	color: #fff;
}

.users button {
	background: #e5b926;
	width: 100%;
	color: #121212;
	letter-spacing: 0.125em;
	font-size: 16px;
	padding: 10px 20px;
	margin-top: 25px;
	cursor: pointer;
	font-weight: 600;
	text-transform: uppercase;
	transition: .3s;
	border: 0px solid #e5b926;
}

.users .swap {
	color: #fff;
	margin-top: 20px;
	display: inline-block;
}

.users .swap .link {
	color: #F7D303;
	font-weight: bold;
	transition: .3s;
	cursor: pointer;
	margin-left: 10px;
}

.hvr-sweep-to-right {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
	-webkit-transition-property: color;
	transition-property: color;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

.hvr-sweep-to-right:before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: linear-gradient(90deg, #d07500, #d07500, #d07500);
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transform-origin: 0 50%;
	transform-origin: 0 50%;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.hvr-sweep-to-right:hover,
.hvr-sweep-to-right:focus,
.hvr-sweep-to-right:active {
	color: white;
}

.hvr-sweep-to-right:hover:before,
.hvr-sweep-to-right:focus:before,
.hvr-sweep-to-right:active:before {
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
}

.hideSec {
	transform: translateX(-100%);
}

.error {
	color: #b00;
	display: none;
	margin-top: 10px;
}

.users .input select {
	border: none;
	border-bottom: 1px solid #fff;
	background-color: transparent;
	padding: 8px;
	padding-left: 30px;
	color: #fff;
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;

	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
	background-position: right 0.5rem center;
	background-repeat: no-repeat;
	background-size: 1.5em 1.5em;
	padding-right: 2.5rem;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.users .input select:focus {
	outline: none;
	border-bottom: 1px solid #fa9a4d;
}

.users .input select option[disabled] {
	color: rgba(255, 255, 255, .5);
}

.users .input select option {
	background-color: #292e37;
	color: #fff;
}

/* input:invalid {
    border-bottom: 2px solid red !important;
} */

@media(max-width:1399px) {
	.users .login,
	.users .reg {
		padding-top: 100px !important;
	}
}

@media(max-width:1200px) {
	.users {
		height: auto !important;
	}
	.users .login,
	.users .reg {
		height: auto !important;
		padding-top: 40px !important;
	}
}

@media(max-width:768px) {
	body {
		background-position: 55%;
	}

	.users {
		width: 100%;
	}

	.users .login,
	.users .reg {
		height: auto !important;
	}
}