@import url('https://fonts.googleapis.com/css?family=Play');
@import url('https://fonts.googleapis.com/css?family=Shrikhand');
body{font-family: 'Play', sans-serif; letter-spacing:1px; font-size:18px; color:#000; background:#f8f8f8;   -webkit-background-size: cover;  -moz-background-size: cover;  -o-background-size: cover;  background-size: cover;}
.container { display: flex; justify-content: center; align-items: center; position: absolute; bottom: 0; top: 0; left: 0; right: 0;}
.loginbox{ width:90%; height:450px; background: rgba(255,255,255,0.51); display: flex;    justify-content: center; align-items: center;   box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); }
.loginbox .left{ width:65%; float:left; background-color: #fff; position:relative;  height:100%; display: flex;    justify-content: center; align-items: center;}
.loginbox .left img{ width:100%; text-align:center; height:auto; }
.loginbox .right{ width:35%; float:left; padding:0px 2%; background:#fff; height:100%;}
.loginbox .right h1 {font-family: 'Shrikhand', cursive; margin:20px 0;  color: #2183fd;  }
input[type=text], input[type=password] {    width: 100%;  outline:none;   padding: 7px 10px;    margin: 10px 0;  border-radius:50px; text-align:center;    display: inline-block;    border: 0px solid #ccc;    box-sizing: border-box; -moz-box-shadow: 0 0 6px rgba(204,204,204,0.5); -webkit-box-shadow: 0 0 rgba(204,204,204,0.5); box-shadow: 0 0 6px rgba(204,204,204,0.5); }
button {    background-color: #00783c; border-radius:50px;   color: white;    padding: 10px 10px;    margin: 20px 0;    border: none;    cursor: pointer;    width: 100%; text-transform:uppercase; font-size:20px;}
button:hover {    opacity: 0.8;}
.logodiv{ margin:50px 0 40px}
.login-img{ position:absolute;  top:-70px; width:95%; right:0}
@media screen and (max-width: 1200px) {
	.logodiv img{ width:100%;}
	.login-img {  top: -30px;}
	}
@media screen and (max-width: 900px) {
	.loginbox{ height:auto;}
	.container{width:100%; display:block;}
	.loginbox{ width:400px; display: table; height:auto; margin:50px auto; }
	.loginbox .left img { margin:0px 0px}
	.loginbox .left, .loginbox .right{ width:100%; display:block; } 
	.loginbox .right form{ padding:20px;}
	.loginbox .right h1 { padding:0 20px;   }
	.login-img{ display:none;}
	.logodiv img {    width: auto;}
	.logodiv{ text-align:center; margin:30px 0 0}
	}	
@media screen and (max-width: 480px) {
	.loginbox{ width:100%;}
	}