@font-face {
    font-family: 'Interstate Light Cond Regular'; 
    src: url('./css/fonts/Interstate Light Cond Regular.otf');
    /*src: url('./fonts/Roboto/Roboto-Bold.ttf')  format("ttf");*/
}
@font-face {
    font-family: 'interstate-black'; 
    src: url('./css/fonts/interstate-black.ttf');
}
@font-face {
    font-family: 'Interstate-Bold-cond'; 
    src: url('./css/fonts/interstate-bold-cond-58b64162258ca.otf');
}

*{
	margin: 0;
	padding: 0;
	overflow: hidden;
	font: normal normal normal 18px/1.4em 'Interstate Light Cond Regular',arial, sans-serif;
}

:root{
	--primary: #007A43;
	--secondary: #EAAB00;
}

body{
	width: 100%;
	height: 100vh;
}

#content{
	position: relative;
	height: 100%;
	width: 100%;
}

.d-none{
	display: none;
}

a.link-home
,span.link-reset{
	outline: none;
	text-decoration: none;
	color: #fff;
	cursor: pointer;

}


.toggle-form{
	cursor: pointer;
	font-size: 1.3rem;
	font-weight: 500;
	font-family: 'Interstate-Bold-cond',arial, sans-serif;
}
.link-reset{
	font-family: 'Interstate Light Cond Regular',arial, sans-serif;
}

a.link-home:hover,
span.toggle-form:hover,
span.link-reset:hover{
	color: var(--secondary);
	text-decoration: none;
}

span.link-reset{
	font-size: .8rem;
	letter-spacing: 2px;
}

.toggle-form.active{
	color: var(--secondary) !important;
	/*color: var(--secondary);*/
}

.form-control,
button{ 
	border: none;
	border-radius: 2rem !important;
}

button.btn-warning{
	color: #fff !important;
	display: flex;
	justify-content: center;
	align-items: center;
}

.left-side{
	display: none;
}
.right-side{
	position: relative;
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: var(--primary);
}
.form-wrapper{
	position: relative;
	background: var(--primary);
	height: 100%;
	width: 100%;
	border-top-left-radius: 5rem;		
	border-bottom-left-radius: 5rem;		
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.link-home{
	position: absolute;
	top: 1rem;
	left: 1rem;
	cursor: pointer;
	color: #fff;
	display: flex;
	align-items: center;
}

.button-default{
	background: var(--secondary)!important;
}

@media (min-width: 768px) { 
	
	#content{
		position: relative;
		height: 100%;
		width: 100%;
		display: flex;
	}

	.left-side{height: 100%;
		width: 100%;	
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.left-side,
	.right-side{
		width: 50%;	

		border-top-left-radius: 2rem;		
		border-bottom-left-radius: 2rem;	
	}

	.link-home{
		top: 2rem;
		left: 2rem;
	}

	.login{
		
		display: flex;
		justify-content: center;
		align-content: center;
		padding: 3rem;
	}

	.login img{
		width: 70%;
		pointer-events: none;
		object-fit: contain;
	}

	img.logo{
		transition: all 1s;
	}

	img.logo:hover{
		transform:rotate(5deg);
	}
}