@media only screen and (min-width: 601px){
		@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');

		*{
			padding: 0px;
			margin: 0px;
			font-family: 'Montserrat', sans-serif;
		}
		
		.container{
			display: grid;
			grid-template-columns: 1fr 1fr;
			padding: 0px;
			margin: 0px;
			height:100vh; 
		}
		.left-panel{ 
			background-image: url("../img/login-bg4.jpg");
			background-repeat: no-repeat, repeat;
			background-size: cover;
		}
		
		.login-cont{
			background-color:#fff;   
			//background-color:#f5eee9;   
			//background-color:#f5ceb0; 
		}
		.logo, .login-form, .social-container{
			 display: flex;
			 flex-direction: column;
			 align-items: center;
			 padding: 10px;
		}
		.logo{
			padding-top: 40px;
		}
		.logo h2{
			font-size: 32px;
			color:rgb(58, 57, 57);
			margin-bottom: 5%;
		}
		.logo p{
			font-size: 22px;
			color:rgb(116, 112, 112);
		}
		
		.input, 
		.login-btn{
			display: block;
			padding: 15px;
			margin: 3% 0;
			width: 450px;
			border: 1px solid #4c9bd3;
		}
		.input{
			border-radius: 2px;
			border-top: 0px; 
			border-left: 0px;  
			border-right: 0px;
			border-bottom: 3px solid #4c9bd3;
			background-color:rgb(243, 243, 243);
		}
		.login-btn{
			width: 480px;
			background-color: #4c9bd3;
			color:#fff;
			font-size: 20px;
			font-weight: bold;
			cursor:pointer;
		}
		
		.login-btn:active{
			background-color: #4c9bd3;
			box-shadow: 0 0 0 2px #ddd;
		}
		.social-container{
			border: 1px solid #4c9bd3;
		} 
		.login-form .social-icons{
			width:100%;
			text-align:center;
		}

		.social-icons i{
			margin:5% 2%;
			padding: 5px;
			/* border: 1px solid #4c9bd3; */
		}
		.input:focus{
			outline: none;
		}
		.fa-facebook{
			color:#4267B2;
		}
		.fa-twitter{
			color:#1DA1F2;
		}
		.fa-linkedin{
			color:#0072b1 ;
		}
		.fa-globe{
			color:#dd8c12 ;
		}
		.logo img{
			margin-bottom: 8%;
		}
		.logo .span{
			background-color:rgb(34, 34, 34);
			border-radius: 8px;
			padding: 10px;
			color: #fff;
		}
		/* Login status  */
		.login-success{
			color: rgb(56, 199, 75);
		}
		.login-failed{
			color: rgb(233, 81, 81);
		}

	
	}
	
	@media only screen and (max-width: 600px){
		@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');

		*{
			padding: 0px;
			margin: 0px;
			font-family: 'Montserrat', sans-serif;
		}
		.container{
			display: grid;
			grid-template-rows:  1fr 3fr 0fr;
			width: 100vw;
			height: 90vh;
		}
		.logo, .login-form, .social-container{
			 display: flex;
			 flex-direction: column;
			 align-items: center;
			 padding: 10px;
		}
		.logo{
			padding-top: 60px;
		}
		.logo h2{
			font-size: 32px;
			color:rgb(58, 57, 57);
			margin-bottom: 5%;
		}
		.logo p{
			font-size: 22px;
			color:rgb(116, 112, 112);
		}
		.input, 
		.login-btn{
			display: block;
			padding: 15px;
			margin: 3% 0;
			width: 300px;
			border: 1px solid #4c9bd3;
		}
		.input{
			border-radius: 2px;
			border-top: 0px; 
			border-left: 0px;  
			border-right: 0px;
			border-bottom: 3px solid #4c9bd3;
			background-color:rgb(243, 243, 243);
		}
		.login-btn{
			width: 330px;
			background-color: #4c9bd3;
			color:#fff;
			font-size: 20px;
			font-weight: bold;
			cursor:pointer;
		}
		.login-btn:active{
			background-color: #4c9bd3;
			box-shadow: 0 0 0 2px #ddd;
		}
		.social-container{
			border: 1px solid #4c9bd3;
		} 
		.login-form .social-icons{
			width:100%;
			text-align:center;
		}

		.social-icons i{
			margin:5% 2%;
			padding: 10px;
			
			/* border: 1px solid #4c9bd3; */
			
		}
		.input:focus{
			outline: none;
		}
		.fa-facebook{
			color:#4267B2;
		}
		.fa-twitter{
			color:#1DA1F2;
		}
		.fa-linkedin{
			color:#0072b1 ;
		}
		.fa-globe{
			color:#dd8c12 ;
		}
		.logo img{
			margin-bottom: 8%;
		}
		.logo .span{
			background-color:rgb(34, 34, 34);
			border-radius: 8px;
			padding: 10px;
			color: #fff;
		}
		/* Login status  */
		.login-success{
			color: rgb(56, 199, 75);
		}
		.login-failed{
			color: rgb(233, 81, 81);
		}

		
		/* .b{
			border: 1px solid #4c9bd3;
		} */
	} /* Media Query Curly Brace */