.card{
  transition: 0.3s;
}
@media(min-width: 50px) and (max-width: 320px)  {
    .loginPage{
		width:95%;
	}
}   

@media (min-width: 320px) and (max-width: 380px){
	 .loginPage{
		width:95%;
	}
}
@media (min-width: 381px) and (max-width: 480px){
    .loginPage{
		width:95%;
	}
}
@media (min-width: 481px) and (max-width: 500px) {
.home-page{
	height:auto;
	padding:0px 0px 20px 0px;
}
.card{
  width:90%;
}
.w-25{
	width:100% !important;
}
}
@media (min-width: 501px) and (max-width: 767px) {
   .home-page{
	height:auto;
	padding:0px 0px 20px 0px;
}
.card{
  width:90%;
}
}

@media (min-width: 768px) and (max-width:979px) {
   .home-page{
	height:auto;
	padding:0px 0px 20px 0px;
}
.card{
  width:100%;
}
}
@media (min-width: 979px) and (max-width: 1024px) {
.loginPage{
		width:40%;
	}
}
@media (min-width: 1024px) and (max-width: 1280px) {
.loginPage{
		width:40%;
	}
}

@media (min-width: 1280px) and (max-width: 1360px) {
	.loginPage{
		width:40%;
	}
}

@media (min-width: 1360px) and (max-width: 1400px) {
.loginPage{
		width:40%;
	}
}
@media (min-width: 1400px) and (max-width: 1600px) {
.loginPage{
		width:40%;
	}
}
@media (min-width: 1600px) and (max-width: 1920px) {
.loginPage{
		width:40%;
	}
}
@media (min-width: 1920px) and (max-width:2400px) {
.loginPage{
		width:40%;
	}
}
@media only screen and (orientation: landscape) {
.loginPage{
		width:40%;
	}
}
@media (max-width: 767px) {
 .loginPage{
		width:40%;
	}
}
@media only screen and (max-width: 800px) {
 .loginPage{
		width:40%;
	}
}
 @media screen and (min-width:800px) {
 .loginPage{
		width:40%;
	}
}
 @media only screen and (min-width: 210px) and (max-width: 1186px) {
 .loginPage{
		width:40%;
	}
}