@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

html, body, form {
	margin: 0;
	font-family: 'Montserrat', sans-serif;
	height: 100%;
}

.container {
	width: 100%;
	height: 100%;
	display: flex;
	flex-wrap: nowrap;
}

@keyframes anim1 {
  0% {opacity: 0%}
  100% {opacity: 100%}
}

.login-form {
	position: static;
	animation-name: anim1;
  animation-duration: 1s;
	animation-timing-function: ease;
	padding-top: 40px;
	background-color: white;
	height: calc(100% - 40px);
	width:35%;
	min-width: 450px;
	box-shadow: 5px 5px 32px 9px rgba(0,0,0,0.13);
	z-index: 2;
	
}

.row {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.login-form img.logo {
	width: 35%;
}

.login-form div.title {
	font-size: 30px;
	font-weight: bold;
	margin-top: 20px;
	color: #353535;
	margin-bottom: 10px;
}

.login-form div.login-box {
	width: 70%;
	margin: 0px;
}

.login-form div.login-box .input-title {
	font-size: 14px;
	margin-top: 17px;
}


.login-form div.login-box .input-input input  {
	width: calc(100% - 40px);
	height: 27px;
	border-radius: 5px;
	border: 0.5px solid #DEDEDE;
	margin-top: 10px;
	padding: 5px 20px;
	font-size: 14px;
	color: #878787;
}

.login-form div.login-box .input-input button {
	width: 100%;
	height: 45px;
	padding: 5px 20px;
	background-color: black;
	border-radius: 5px;
	border: 0;
	color: white;
	margin-top: 35px;
	font-size: 14px;
	text-transform: uppercase;
	font-weight: bold;
	transition: 0.5s;
	cursor: pointer;
}

.login-form div.login-box .input-input button:hover {
	background-color: red;
	color: black;
	
}


.content {
	background: url('https://picsum.photos/1080/1920');
	width: 70%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	
}

@media only screen and (max-width: 600px) {
	.container {
		flex-wrap: wrap;
	}
	
	.login-form {
		width: 100%;
		box-shadow: none;
	}
	
	.content {
		display: none;
	}
}