.error-message {
text-align: left;
font-family:Arial, Helvetica, sans-serif;
color: red;
font-size: 12px;
display: none;
}

.input-error {
border: 1px solid red;
}

input, textarea {
font-family:Arial, Helvetica, sans-serif;
}

input[type=text], input[type=email],input[type=tel], textarea {
font-size: 16px;
width: 100%;
padding: 12px;
border: 1px solid #CCCCCC;
border-radius: 6px;
resize: vertical;}

input[type=submit], input[type=reset] {
font-size: 16px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: normal Arial;
color: #000000;
padding: 5px 10px;
border: solid 1px #7099FF;
background: #B5DEFF;
background: -webkit-gradient(linear, left top, left bottom, from(#E8ECFF), to(#9ECAFF));
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
width: 30%;
margin:20px;}

input[type=submit]:hover, input[type=reset]:hover {
background: #B5DEFF;
background: -webkit-gradient(linear, left top, left bottom, from(#9ECAFF), to(#E8ECFF));}

input[type=submit]:active, input[type=reset]:active {
position: relative;
top: 1px;}

.container {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
border-radius: 5px;
width: 80%;
max-width:100%;
padding: 20px;
margin-left: auto; 
margin-right: auto;}

.col-left{
text-align: left;
padding: 12px;
float: left;
width: 30%;}

.col-right{
text-align: left;
float: left;
width: 70%;
margin-bottom: 12px;}

.row {text-align: center;
overflow: hidden;}

@media screen and (max-width: 620px) {
.container, .col-left, .col-right {padding: 5px;
width: 100%;}
.col-left p {margin: 5px 5px;}
input[type=submit], input[type=reset]{
width: 50%;
margin:10px;}
}