:root {
  --mobile-width: 350px;
  --mobile-height: 497px;
}
.ohnohoney{
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	height: 0;
    width: 0;
    z-index: -1;
    }
body {
	width: var(--mobile-width);
    margin: auto;
    background-color: white;
	}
#header {
	display:block;
	width: 100%;
	border: 0px;
	margin-top: 0px;
}
.subtitle {
    text-align:center;
    font-size: 25px;   
	color:#666;
}
.form-control {
	width: var(--mobile-width);
	height: 150px;
	padding: 12px 20px;
	box-sizing: border-box;
	border: 2px solid #ccc;
	border-radius: 4px;
	background-color: #f8f8f8;
	font-size: 16px;
	resize: none;
}
.submit_button {
	float:none; 
	height:50px; 
	margin-top: 5px;
	text-align:center;
}
#menu {
	width: var(--mobile-width);
}
#menu ul {
	margin: auto;
  list-style-type: none;
  margin: auto;
  padding: 20px;
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}
#image_header {
	width: var(--mobile-width);
	height: var(--mobile-height);
	background-image: url("../images/header.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size:inherit;
}
#menu li {
	display: block;
	width: 100%;
	 padding: 10px;
	font-size: 32px;
	height: 40px;
}

#menu li a {
display: block;
  color: #666;
  text-align: center;
  border-bottom: 1px solid #a0a0a4;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
#menu li a:hover {
  background-color: #dddddd;
}
#footer {
	padding: 20px;
	color: black;
	font-family: Roboto;
	font-size: 20px;
	text-align:center;
}
#contact_menu {
	color: black;
	font-family: Roboto;
	text-align:center;
}
#contact_menu input {
	width:350px;
	height:30px;
	font-size: 25px;
}
#contact_menu textarea {
	padding:10px;
	width:350px;
	height:300px;
}
#contact_menu select {
	padding:10px;
	width:200px;
	height:52px;
	font-size: 23px;
}

@media only screen and (min-width: 600px) {
		body, #header, #menu {
		width: 600px;
	}
	#image_header {
	width: 600px;
	height: 429px;
	background-image: url("../images/header600X429.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size:inherit;
}
	.submit_button 
	{
		display: inline-block;
		width:18%;
		height: 50px;
		margin-right:1%;
		margin-left:1%;
		margin-top : 20px;
		float: right; 
		padding: 12px 20px;
		box-sizing: border-box;
		border: 2px solid #ccc;
		border-radius: 4px;
		background-color: #f8f8f8;
		font-size: 16px;
		resize: none;
	}
	.form-control {
	display: inline-block;
	width: 80%;
	height: 150px;
	padding: 12px 20px;
	box-sizing: border-box;
	border: 2px solid #ccc;
	border-radius: 4px;
	background-color: #f8f8f8;
	font-size: 16px;
}
}

@media screen and (min-width: 768px) {
	body, #header, #menu {
		width: 1200px;
	}
	#menu li {
display: inline;
}
#menu li a {
	display: inline;
  color: #666;
  text-align: center;
  border-bottom: none;
  border-right: 1px solid #a0a0a4;
  padding: 14px 16px;
  text-decoration: none;
}
#image_header {
	width: 1200px;
	height: 857px;
	background-image: url('../images/header1200X857.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size:inherit;
}
	.submit_button 
	{
		display: inline-block;
		width:8%;
		height: 50px;
		margin-right:1%;
		margin-left:1%;
		margin-top : 20px;
		float: right; 
		padding: 12px 20px;
		box-sizing: border-box;
		border: 2px solid #ccc;
		border-radius: 4px;
		background-color: #f8f8f8;
		font-size: 16px;
		resize: none;
	}
	.form-control {
	display: inline-block;
	width: 90%;
	height: 150px;
	padding: 12px 20px;
	box-sizing: border-box;
	border: 2px solid #ccc;
	border-radius: 4px;
	background-color: #f8f8f8;
	font-size: 16px;
}
}