body, html{
	background: #fff;
	margin: 0;
	padding: 0;
	font-family: Verdana, Arial, sans-serif;
	color: #f15e22;
}
div#wrapper{
	margin: 0 auto;
}

a:link{color: #f15e22; text-decoration: underline;}
a:hover{color: #a0a0a0; text-decoration: underline;}
a:visited{color: #666; text-decoration: underline;}

h1{padding-top: 0; margin-top: 0;}
h3{margin:0; padding: 0; color: #f15e22;}
h4{margin:0; padding: 0;}

#header{
	margin: 0 auto 30px;
	padding-bottom: 20px;
	border-bottom: 3px solid #f15e22;
}
	#headerContent{
		width: 1024px;
		display: grid;
		grid-template-columns: 400px 1fr;
		grid-template-rows: 245px 1fr;
		grid-template-areas:
		"logo pics"
		"menu menu";
		grid-gap:10px;
		margin: 0 auto;
	}
	#logo{
		padding: 25px 0 0 20px;
		color: #333;
		font-size: 130%;
		grid-area: logo;
	}
	#logo a{
		display: block;
	}
	#logo a:link, #logo a:visited{color: #333; text-decoration: none;}
	#logo a:hover{color: #a0a0a0; text-decoration: underline;}

	#logo img{
		padding-bottom: 20px;
		width: 292px;
	}
	.menu ul{
		margin: 0;
		padding: 0 0 0 20px;
	}
	.menu li{
		list-style: none;
		display: inline;
		padding: 0 5px;
		text-align: center;
	}
	#frames{
		padding:25px 20px 0 0;
		grid-area: pics;
		justify-self: right;
	}

	.menu {
		grid-area: menu;
	}

	.menu a:link, .menu a:visited{color: #333; text-decoration: none;}
	.menu a:hover{color: #a0a0a0; text-decoration: underline;}


#menuContent {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap:10px;
	width: 1024px;
	margin: 0 auto;
}

	#menuContent img {
		width: 100%;
	}

.contentContact {
	display: grid;
	grid-template-columns: 1fr 500px;
	grid-template-areas:
	"contentContact map";
	grid-gap:10px;
	width: 1024px;
	margin: 0 auto;
	color: #333;
	font-size: 80%;
	padding: 0;
}

	.contactText {
		grid-area: contentContact;
	}

	#map_canvas {
		grid-area: map;
		width: 500px;
		height: 400px;
	}

div#content{
	display: grid;
	grid-template-columns: 300px 1fr;
	grid-template-areas:
	"img content";
	grid-gap:10px;
	width: 1024px;
	margin: 0 auto;
	color: #333;
	font-size: 80%;
	padding: 0;
}
	div#content img{padding:0 10px 10px 10px;}

	div#content .price{
		text-align: right;
		border-bottom: #333 1px solid;
		font-weight: bold;
	}
	div#content table{
		width:300px;
	}
	div#content ul{
		width:350px;
	}
	div#content li{
		list-style: none;
		margin-bottom:10px;
	}
	div#content ul li ul{
		width: 250px;
	}

div#slider,
.aboutPic{
	width: 290px;
	grid-area: img;
}
	div#slider img{
		position:absolute;
		top:0px;
		left:0px;
		display:none;
	}

.mainContent,
.aboutContent {
	grid-area: content;
}

#footer{
	clear: both;
	margin: 30px auto 0;
	background: #f15e22;
	padding-bottom: 20px;
	font-size: 80%;
	color: #fff;
}
	#footer a:link, #footer a:visited{color: #ffeab8; text-decoration: none;}
	#footer a:hover{color: #666; text-decoration: underline;}

	div#footContent{
		width:1024px;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-areas: "footer";
		grid-gap:10px;
		text-align: center;
		margin: 0 auto;
		padding-top: 15px;
	}



@media (max-width: 1030px) {
	#headerContent,
	#menuContent,
	.contentContact,
	div#content,
	div#footContent,
	.contactText {
		width: 100%;
	}

	#headerContent {
		grid-template-columns: 2fr 1fr;
		grid-template-rows: 245px 1fr;
	}
	#logo img {
		max-width: 292px;
		width: auto;
	}

	.contentContact {
		width: 100%;
	}

	.mainContent {
		padding-right: 20px;
	}
	.contentContact {
		width: 96%;
	}
}


@media (max-width: 830px) {
	#headerContent{
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		grid-template-areas:
		"logo"
		"menu";
	}
	div#content {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		grid-template-areas: "content";
	}
	.mainContent,
	.aboutContent {
		padding: 10px;
	}
	#logo {
		justify-self: center;
		padding: 20px 0 0;
	}
	.menu {
		justify-self:center;
	}
	.menu ul {
		display: inline-block;
	}
	#frames,
	div#slider {display: none;}

	.aboutPic {
		display: none;
	}

	.contentContact {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		grid-template-areas:
		"contentContact"
		"map";
	}
	.contactText {
		text-align: center;
	}
	#map_canvas {
		margin: 0 auto;
	}
}

@media (max-width: 505px) {
	#map_canvas {
		display: none;
	}
}