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

body{
	background: #2f2f2f no-repeat left top;
	background-size: cover;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
	padding:0;
	font-family: 'Open Sans', sans-serif;
}

* {margin: 0; padding:0;}

a {color: inherit; background: inherit; text-decoration: none;}

a:hover {text-decoration: underline;}

p {padding-bottom: 24px; line-height: 36px; }

.container1 { width: 960px; height: 555px; margin: 15px; box-sizing: border-box;  display: flex;  border-radius: 15px;
	justify-content: center; 	align-items: center; -webkit-box-shadow: 0px 0px 18px 0 #2f2f2f; 	box-shadow: 0px 0px 18px 0 #2f2f2f;}

.col-blue { background: #f2f2f2; width: 35%; height: 555px;  left:0; top: 0; border-radius: 15px; border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;	text-align: center;	color: #fff;	padding: 8% 0;	box-sizing: border-box;	}

.col-blue img{ max-width:331px; width: 85%; padding: 50% 15px 0; box-sizing: border-box;}

.col-white {background: #fff;  width: 65%; height: 555px; border-radius: 15px; border-top-left-radius: 0px;	border-bottom-left-radius: 0px; display: flex; 
flex-direction: column;	padding:10% 50px 0 50px;	box-sizing: border-box;	text-align: center;	}

.col-white h2{ font-size: 31px; color: #5c5d65; margin-bottom: 20px; margin-top: 15px;}

.col-white .warning {color:red; padding: 10px 0; margin-bottom: 30px; }

.inputBox { position: relative; margin: 0 0 35px 0; text-align: left; }

.inputBox input {
 	width: 100%;
 	padding: 5px 0;
 	font-size: 18px;
 	border-bottom: 1px solid #c3c3c3; 
 	border-top: 0; 
 	border-left: 0; 
 	border-right: 0; 
 	margin-bottom: 10px;
 	outline: none;
 	resize: none;
 	color: #595959;
 	-webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  appearance: none;
 }

.inputBox .placeholder {	position: absolute;	left: 0;	padding: 5px 0;	font-size: 16px;	color: #c3c3c3;	transition: 0.5s all ease-in-out;
	pointer-events: none;	top:0;}

.inputBox input:valid + .placeholder,
.inputBox input:focus + .placeholder {  top: 10px;  font-size: 14px;  color: #5c5d65;  font-weight: 600;  transform: translateY(-30px);
	-moz-transform: translateY(-30px); }

.col-white .col-check {display: flex; margin-bottom: 30px; color: #898888; }

.col-white .col-check-column-left {width: 50%; text-align: left;}

.col-white .col-check-column-right {width: 50%; text-align: right;}

.col-white .login { 
	background: #5c5d65; 
	width: 55%; 
	margin: 0 auto; 
	padding:10px 50px; 
	color: #fff; 
	font-size: 22px; 
	cursor:pointer; 
	margin-top: 10px; 
	border-radius: 25px; 
	border:1px solid #5c5d65;
	transition: 0.5s all ease-in-out;
	position: relative;
	outline: none;   
	}

.col-white .login:hover { background: #fff; color:#5c5d65;} 

.col-white .login .arrow {position: absolute; right: 25px;}


/*---------media query----------*/

@media (max-width: 768px) {

.container1 {height: 700px; display: flex; flex-direction: column; width:100%; box-sizing:border-box; margin:0;}

.col-blue {width: 100%; height: 200px; padding-top: 15px; border-radius: 15px; border-bottom-right-radius: 0px;	border-bottom-left-radius: 0px; }

    .col-blue img {
        max-width: 331px;
        width: 70%;
        padding: 0 15px 0;
        box-sizing: border-box;
        margin-top: 15%;
    }

.col-white h2 { font-size: 24px; }

.col-white { padding: 20px 16px 0; width: 100%; border-radius: 15px; border-top-left-radius: 0px;
	border-top-right-radius: 0px;}

.col-white .login .arrow { position: absolute; right: 15px; top: 14px; font-size: 18px;}
}