* {
  box-sizing: border-box;
}

body
{
	/* Background pattern from subtlepatterns.com */
	/* background-image: url("img/hexellence.png"); */
	background-color: #474e5d;
	font-size: 20px;
	margin: 0 !important;
}



#container
{
	background-color: white;
	width: 400px;
	padding: 50px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 100px;
	/* -webkit-box-shadow: 3px 3px 10px 5px rgba(204,204,204,0.9); */
	/* -moz-box-shadow: 3px 3px 10px 5px rgba(204,204,204,0.9); */
	/* box-shadow: 3px 3px 10px 5px rgba(204,204,204,0.9); */
	border-radius: 5px;
}

input[type=text],
input[type=password]
{
	width: 300px;
	background-color: #efefef;
	color: #666;
	border: 2px solid #ddd;
	border-radius: 5px;
	font-size: 20px;
	padding: 10px;
	box-sizing: border-box;
	outline: none;
	margin-top: 10px;
}

input[type=text]:focus,
input[type=password]:focus
{
	-webkit-box-shadow: 0px 0px 10px 2px rgba(204,204,204,0.9);
	-moz-box-shadow: 0px 0px 10px 2px rgba(204,204,204,0.9);
	box-shadow: 0px 0px 10px 2px rgba(204,204,204,0.9);
	border: 2px solid #a5cda5;
	background-color: #e9f3e9;
	color: #428c42;
}

input[type=submit]
{
	width: 300px;
	background-color: #36b03c;
	font-size:20px;
	color: white;
	padding: 15px 10px;
	margin-top: 20px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	letter-spacing: 2px;
	outline: none;
}

input[type=submit]:focus
{
	-webkit-box-shadow: 0px 0px 15px 5px rgba(204,204,204,0.9);
	-moz-box-shadow: 0px 0px 15px 5px rgba(204,204,204,0.9);
	box-shadow: 0px 0px 15px 5px rgba(204,204,204,0.9);
}

input[type=submit]:hover
{
	background-color: #37b93d;
}

input::-webkit-input-placeholder
{
    color: #999;
}
input:focus::-webkit-input-placeholder
{
    color: #428C42;
}
/* Firefox < 19 */
input:-moz-placeholder
{
    color: #999;
}
input:focus:-moz-placeholder
{
    color: #428C42;
}
/* Firefox > 19 */
input::-moz-placeholder
{
    color: #999;
}
input:focus::-moz-placeholder
{
    color: #428C42;
}
/* Internet Explorer 10 */
input:-ms-input-placeholder
{
    color: #999;
}
input:focus:-ms-input-placeholder
{
    color: #428C42;
}



@media screen and (max-width: 650px) {
  #container
{
	height: 280px;
	/* background-color: white; */
	width: 300px;
	padding: 10px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 100px;
	
	/* border-radius: 5px; */
	padding-top: 30px;
}

input[type=text],
input[type=password]
{
	width: 280px;
	/* background-color: #efefef; */
	/* color: #666; */
	/* border: 2px solid #ddd; */
	/* border-radius: 5px; */
	font-size: 20px;
	padding: 10px;
	/* box-sizing: border-box; */
	/* outline: none; */
	margin-top: 10px;
}

input[type=submit]
{
	width: 280px;
	/* background-color: #36b03c; */
	/* font-size:20px; */
	/* color: white; */
	padding: 15px 10px;
	margin-top: 20px;
	/* border: none; */
	/* border-radius: 5px; */
	/* cursor: pointer; */
	/* letter-spacing: 2px; */
	/* outline: none; */
}

}