@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; 
		}*/

		body {
			margin: 0;
			padding: 0;
		}
		.container{
			position: relative;
			z-index: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			background-image: url("../img/background.png");
			/* background-image: url("background.png"); */
			background-repeat: no-repeat, repeat;
			background-size: cover;
			padding: 0;
			margin: 0;
			height:100vh;
			
		}
		.container::before{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		  	background-color: rgba(27, 86, 126,0.7); /* Black w/ opacity */
			/* background-image: url("background.png");
			background-repeat: no-repeat, repeat;	
			background-size: cover; */
			z-index: -1;
			/* opacity:0.7; */
		}

		/* The Modal (background) */
		.modal {
		  display: none; /* Hidden by default */
		  position: fixed; /* Stay in place */
		  align-content: center;
		  justify-items: center;
		  z-index: 1; /* Sit on top */
		  left: 0;
		  top: 0;
		  width: 100%; /* Full width */
		  height: 100%; /* Full height */
		  background-color: rgb(0,0,0); /* Fallback color */
		  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
		  overflow: auto;
		}
		
		/* Modal Content/Box */
		.modal-content {
		  position: relative;
		  background-color: #fefefe;
		  padding: 20px;
		  border: 1px solid #888;
		  width: 80%; /* Could be more or less, depending on screen size */
		  max-width: 500px;
		  min-height: 500px;
		  border-radius: 5px;
		  justify-items: center;
		}
		
		/* The Close Button */
		.close {
		  color: #aaa;
		  float: right;
		  font-size: 28px;
		  font-weight: bold;
		}
		
		.close:hover,
		.close:focus {
		  color: black;
		  text-decoration: none;
		  cursor: pointer;
		}

		.printBtn {
			position: absolute;
			border-radius: 5px;
			width: 100px;
			height: 40px;
			top: 90%;
			right: 5%;
		}

		/*.left-panel{ 
			background-image: url("login-bg4.jpg");
			background-repeat: no-repeat, repeat;
			background-size: cover;
		}*/
		
		.login-cont{
			background-color:#fff;
			box-shadow: 0px 0px 15px 10px rgb(0, 0, 0, 0.6);
			width: 650px;
			border-radius: 10px;
			/* background-color:#f5eee9;    */
			/* background-color:#f5ceb0;  */
		}
		
		.logo, .login-form, .social-container{
			 display: flex;
			 flex-direction: column;
			 align-items: center;
			 padding: 10px;
		}
		.logo{
			padding-top: 6%;
		}
		.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-height: 800px){

		/* The Modal (background) */
		.modal {
		  display: none; /* Hidden by default */
		  position: fixed; /* Stay in place */
		  align-content: center;
		  justify-items: center;
		  z-index: 1; /* Sit on top */
		  left: 0;
		  top: 0;
		  width: 100%; /* Full width */
		  height: 100%; /* Full height */
		  background-color: rgb(0,0,0); /* Fallback color */
		  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
		}
		
		/* Modal Content/Box */
		.modal-content {
		  position: relative;
		  background-color: #fefefe;
		  padding: 20px;
		  border: 1px solid #888;
		  width: 80%; /* Could be more or less, depending on screen size */
		  max-width: 500px;
		  min-height: 500px;
		  border-radius: 5px;
		  justify-items: center;
		}
		
		/* The Close Button */
		.close {
		  color: #aaa;
		  float: right;
		  font-size: 28px;
		  font-weight: bold;
		}
		
		.close:hover,
		.close:focus {
		  color: black;
		  text-decoration: none;
		  cursor: pointer;
		}

		.printBtn {
			position: absolute;
			border-radius: 5px;
			width: 100px;
			height: 40px;
			top: 90%;
			right: 5%;
		}

		.logo, .login-form, .social-container{
			 display: flex;
			 flex-direction: column;
			 align-items: center;
			 padding: 5px;
		}
		.logo h2{
			font-size: 32px;
			color:rgb(58, 57, 57);
			margin-bottom: 5%;
		}
		.logo p{
			font-size: 15px;
			color:rgb(116, 112, 112);
		}
		.logo img{
			margin-bottom: 3%;
		}
		.logo .span{
			background-color:rgb(34, 34, 34);
			border-radius: 8px;
			padding: 10px;
			color: #fff;
		}
		.input, 
		.login-btn{
			display: block;
			padding: 10px;
			margin: 3% 0;
			width: 310px;
			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: 17px;
			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 ;
		}

		.copyright{
			/* color: #000; */
			border: 1px dashed #bf5d24;
			border-radius:5px;
			padding: 5px 60px;
			background-color:#f2f2f2;
			text-align: center;
			line-height: 15px !important;
		}

		.copyright span {
			font-size: 12px;
		}

		.links {
			font-size: 12px;
		}

		/* 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: 100vh;
		}

		/* The Modal (background) */
		.modal {
		  display: none; /* Hidden by default */
		  position: fixed; /* Stay in place */
		  z-index: 1; /* Sit on top */
		  left: 0;
		  top: 0;
		  width: 100%; /* Full width */
		  height: 100%; /* Full height */
		  overflow: auto; /* Enable scroll if needed */
		  background-color: rgb(0,0,0); /* Fallback color */
		  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
		}
		
		/* Modal Content/Box */
		.modal-content {
		  position: relative;
		  background-color: #fefefe;
		  margin: 15% auto; /* 15% from the top and centered */
		  padding: 20px;
		  border: 1px solid #888;
		  width: 80%; /* Could be more or less, depending on screen size */
		  max-width: 500px;
		  min-height: 500px;
		  border-radius: 5px;
		  justify-items: center;
		}
		
		/* The Close Button */
		.close {
		  color: #aaa;
		  float: right;
		  font-size: 28px;
		  font-weight: bold;
		}
		
		.close:hover,
		.close:focus {
		  color: black;
		  text-decoration: none;
		  cursor: pointer;
		}

		.printBtn {
			position: absolute;
			border-radius: 5px;
			width: 100px;
			height: 40px;
			top: 90%;
			right: 5%;
		}

		.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 */