* {
  box-sizing: border-box;
}
html{ background-color: #FFF}
body {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Verdana, sans-serif; 
	font-weight: 400;
	font-size: 12px; 
	color: #858585; 
	background-color: #FFF
	text-align: center;
	margin: 4px;
}
h1 { font-size: 16px; font-weight: 700; margin: 2.5rem 0; text-align: center} 
h2 { font-size: 14px; font-weight: 700; margin: 2rem 0; text-align: center} 
h3 { font-size: 12px; font-weight: 700; } 
h4 { font-size: 10px; font-weight: 700; }
h5 { font-size: 8px; }
h6 { font-size: 6px; } 
.toplinks {text-align: right; font-size: smaller; margin-bottom: 0}
.toplinks a {text-decoration: none;	padding: 0.5rem 0.5rem}
.logo {text-align: center; background-color: #FFF; margin: 0 auto; max-width: 500px;}
.main_nav ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	grid-gap: 0;
	border-top: 1px solid #858585;
	position: sticky;
	top: 0;
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 10px;
}
.main_nav a {
	display: block;
	text-align: center;
	text-decoration: none;
	background: #FFF;
	padding: 2px;				
}
.main {text-align: center}
main button {
	border: none;
	padding: 0;
	border-radius: 0px;
    margin: 0.5rem;
}
.main_block {text-align: justify; padding: 0}
.first_button {
    display: block;
    font-size: 12px;
    background: #A43439; 
	border-radius: 0px;
    color: #FFF;
    padding: 6px 6px;
    margin: 6px 10%;
    width: 80%;
}
.second_button {
    display: block;
    font-size: 12px; 
    background: #E8E8E8; 
	border-radius: 0px;
    color: #858585;
    padding: 0.75rem 1rem;
}
.close_button {
    display: block;
    font-size: 12px;
    background: #A43439; 
	border-radius: 0px;
    color: #FFF;
    padding: 6px 6px;
    margin: 6px 10%;
    width: 80%;
}
.response {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
	grid-gap: 1rem;
}
footer {background-color: #CCC;	font-size: 10px}
.footer_main {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	grid-gap: 1rem;
	background-color: #E5E5E5;
	color: #858585;
	text-align: left;
	padding: 4px;
}
.footer_info {
	text-align: center;
	font-size: 8px;
	background-color: #ccc;
	color: #858585;
	padding: 2rem 1rem 1rem 4rem:
	vertical-align: center;
	height: 4rem;
}
.footer_main ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.footer_main a {text-decoration: none}

a:link {color:#858585; text-decoration:none}
a:visited {color:#858585; text-decoration:none}
a:hover {color:#A43439; text-decoration:none}

.input-normal {
  width: 100%;
  font-size: 14px;
  border: 1px solid #858585;
  border-radius: 0px;
  resize: vertical;
  padding: 8px 4px;
  margin: 6px 0;
}

.input-small {
  width: 100%;
  font-size: 14px;
  border: 1px solid #858585;
  border-radius: 0px;
  resize: vertical;
  padding: 8px 4px;
  margin: 6px 0;
}

.input-width {
  width: 100%;
  font-size: 14px;
  border: 1px solid #858585;
  border-radius: 0px;
  resize: vertical;
  padding: 8px 4px;
  margin: 6px 0;
}

.input-date {
  width: 100%;
  font-size: 14px;
  border: 1px solid #858585;
  border-radius: 0px;
  resize: vertical;
  padding: 8px 4px;
  margin: 6px 0;
}

.input-checkbox {
  width: 20px;
  height: 20px;
  border: 1px solid #858585;
  border-radius: 0px;
  resize: vertical;
  margin: 0px 12px 0px 0px;
}

.label-normal {
  padding: 6px 0;
  display: inline-block;
}

.label-checkbox {
  display: inline-block;
  padding: 0;
}

.container {
  border-radius: 0px;
  background-color: #f2f2f2;
  padding: 4px;
  text-align: center;
  margin-bottom: 1rem;
}

.col-25 {
  float: left;
  width: 100%;
  margin-top: 0;
  text-align: left;
}

.col-75 {
  float: left;
  width: 100%;
  margin-top: 0;
  text-align: left;
}
.col-40 {
  float: left;
  width: 100%;
  margin-top: 0;
  text-align: left;
}

.col-20 {
  float: left;
  width: 100%;
  margin-top: 0px;
  text-align: left;
}
.row {
	vertical-align: center;
}

/* Clear floats after the columns */
.row::after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (min-width: 490px) and (max-width: 699px) {
	.col-25 {
	  float: left;
	  width: 25%;
	  margin-top: 0;
	  text-align: left;
	}
	
	.col-75 {
	  float: left;
	  width: 75%;
	  margin-top: 0;
	  text-align: left;
	}
	.col-40 {
	  float: left;
	  width: 40%;
	  margin-top: 0;
	  text-align: left;
	}
	
	.col-20 {
	  float: left;
	  width: 20%;
	  margin-top: 0px;
	  text-align: left;
	}
	.input-normal {
	  width: 100%;
	  font-size: 14px;
	  border: 1px solid #858585;
	  border-radius: 0px;
	  resize: vertical;
	  padding: 8px 4px;
	  margin: 6px 0;
	}
	.input-small {
	  width: 195px;
	  font-size: 14px;
	  border: 1px solid #858585;
	  border-radius: 0px;
	  resize: vertical;
	  margin: 6px 0;
	}
	
	.input-width {
	  width: 100%;
	  font-size: 14px;
	  border: 1px solid #858585;
	  border-radius: 0px;
	  resize: vertical;
	  margin: 6px 0;
	}
	
	.input-date {
	  width: 195px;
	  font-size: 14px;
	  border: 1px solid #858585;
	  border-radius: 0px;
	  resize: vertical;
	  margin: 6px 0;
	}
	.response {
		max-width: 50%;
		margin-left: 25%;
	}
}
@media screen and (min-width: 700px) {
	h1 { font-size: 20px; font-weight: 700; margin: 2.5rem 0; text-align: center} 
	h2 { font-size: 18px; font-weight: 700; margin: 2rem 0; text-align: center} 
	h3 { font-size: 14px; font-weight: 700; } 
	h4 { font-size: 12px; font-weight: 700; }
	h5 { font-size: 10px; }
	h6 { font-size: 8px; } 
	
	.col-25 {
	  float: left;
	  width: 160px;
	  margin-top: 0;
	  text-align: left;
	}
	
	.col-75 {
	  float: left;
	  width: 520px;
	  margin-top: 0;
	  text-align: left;
	}
	.col-40 {
	  float: left;
	  width: 280px;
	  margin-top: 0;
	  text-align: left;
	}
	
	.col-20 {
	  float: left;
	  width: 20%;
	  margin-top: 0px;
	  text-align: left;
	}
	.input-normal {
	  width: 100%;
	  font-size: 14px;
	  border: 1px solid #858585;
	  border-radius: 0px;
	  resize: vertical;
	  padding: 8px 4px;
	  margin: 6px 0;
	}
	.input-small {
	  width: 195px;
	  font-size: 14px;
	  border: 1px solid #858585;
	  border-radius: 0px;
	  resize: vertical;
	  margin: 6px 0;
	}
	
	.input-width {
	  width: 100%;
	  font-size: 14px;
	  border: 1px solid #858585;
	  border-radius: 0px;
	  resize: vertical;
	  margin: 6px 0;
	}
	
	.input-date {
	  width: 195px;
	  font-size: 14px;
	  border: 1px solid #858585;
	  border-radius: 0px;
	  resize: vertical;
	  margin: 6px 0;
	}
	.response {
		max-width: 350px;
		margin-left: 173px;
	}
}