<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>

<head>


body {
    font-family: Arial;
    width: 100%;
}

.form-container {
	
	text-align:left;
	width: 70%;
    background: #f1ecdf;
    border: #e2ddd2 1px solid;
    padding: 20px;
    border-radius: 2px;
	margin-bottom:30px;
	
}



.input-row {
    margin-bottom: 20px;
}

.input-row label {
    color: #75726c;
}

.input-field {
    width: 100%;
    border-radius: 2px;
    padding: 5px;
    border: #e0dfdf 1px solid;
    box-sizing: border-box;
    margin-top: 2px;
}

.span-field {
    font: Arial;
    font-size: small;
    text-decoration: none;
}

.btn-submit {
    padding: 10px 60px;
    background: #9e9a91;
    border: #8c8880 1px solid;
    color: #ffffff;
    font-size: 0.9em;
    border-radius: 2px;
    cursor: pointer;
}

.errorMessage {
    background-color: #e66262;
    border: #AA4502 1px solid;
    padding: 5px 10px;
    color: #FFFFFF;
    border-radius: 3px;
}

.successMessage {
    background-color: #9fd2a1;
    border: #91bf93 1px solid;
    padding: 5px 10px;
    color: #3d503d;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.9em;
}

.info {
    font-size: .8em;
    color: #e66262;
    letter-spacing: 2px;
    padding-left: 5px;
}

@media screen and (max-width: 800px) {
.form-container {
	
	text-align:left;
	width: 100%;
    background: #f1ecdf;
    border: #e2ddd2 1px solid;
    padding: 10px;
    border-radius: 2px;
	margin-bottom:30px;
	margin-left:-12px;
}	
}

</head>
</style>
