*{

	padding: 0;

	margin: 0;

	box-sizing: border-box;

}



.wave{

	position: fixed;

	bottom: 0;

	left: 0;

	height: 100%;

	z-index: -1;

}



.container{

    width: 100vw;

    height: 100vh;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    grid-gap :7rem;

    padding: 0 2rem;

}



.img{

	display: flex;

	justify-content: flex-end;

	align-items: center;

}



.login-content{

	display: flex;

	justify-content: flex-start;

	align-items: center;

	text-align: center;

}



.img img{

	width: 500px;

}



form{

	width: 360px;

}



.login-content img{

    height: 100px;

}



.login-content h2{

	margin: 15px 0;

	color: #333;

	text-transform: uppercase;

	font-size: 2.9rem;

}



.login-content .input-div{

	position: relative;

    display: grid;

    grid-template-columns: 7% 93%;

    margin: 25px 0;

    padding: 5px 0;

    border-bottom: 2px solid #d9d9d9;

}



.login-content .input-div.one{

	margin-top: 0;

}



.i{

	color: #d9d9d9;

	display: flex;

	justify-content: center;

	align-items: center;

}



.i i{

	transition: .3s;

}



@media screen and (max-width: 1050px){

	.container{

		grid-gap: 5rem;

	}

}



@media screen and (max-width: 1000px){

	form{

		width: 290px;

	}



	.login-content h2{

        font-size: 2.4rem;

        margin: 8px 0;

	}



	.img img{

		width: 400px;

	}

}



@media screen and (max-width: 900px){

	.container{

		grid-template-columns: 1fr;

	}



	.img{

		display: none;

	}



	.wave{

		display: none;

	}



	.login-content{

		justify-content: center;

	}

}