/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1401px) and (max-width: 1600px){
	.projectlist li a{
	margin: 0px 13px 32px;
	}
}
@media (min-width: 1200px) and (max-width: 1400px){
.projectlist li a img{
	width: 150px;
}
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199px){ 

}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991px){
.projectlist li a img{
	width: 150px;
}
}

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767px){ 
	.header{
		margin-bottom: 40px;
		flex-direction: column;
	}
	.header img{
		width: 280px;
		margin-bottom: 10px;
	}
	.header h1{
		font-size: 28px;
	}
	.login-outer{
		flex-direction: column;
	}
	.login-outer img {
    width: 280px;
}
}
/*Extra small devices (portrait phones, less than 576px)*/
/*No media query since this is the default in Bootstrap*/
@media (min-width: 0px) and (max-width: 575px){

	.header{
		margin-bottom: 40px;
		flex-direction: column;
	}
	.header img{
		width: 280px;
		margin-bottom: 10px;
	}
	.header h1{
		font-size: 28px;
	}
		.login-outer{
		flex-direction: column;
	}
	.login-outer img {
	    width: 280px;
	}
	.projectlist{
		max-height: 500px;
		margin-bottom: 50%;
	}
}