#image
{
    width: 100%;
    height: auto;
    padding-left: 0px;
     margin: 0;
    padding: 0;
}

#header {
margin-top: 40px;
clear: right;
}

.nav {
	padding: 0px  0px 0 112px;
	text-align: right;
	margin-top: 250px;
	float: right;
}

.nav ul {

	list-style-type: none;
	line-height: 30px;
}

.nav ul li {
	display:inline;
}

.nav ul li a:link {

	color: #6b6662;
	font: 16px verdana;
	letter-spacing: normal;
	text-align: right;
	text-decoration: none;

}

.nav ul li a:visited {
	color: #6b6662;
}

.nav ul li a:hover {
	color: #aa9376;
}

.nav ul li a.select {
	color: #67c064;
}

.container {
width: auto;
margin-top: 10px;
  display: flex;
  text-align: center;
}

.container > div {
  flex: 1; /*grow*/
}



.hvr-grow img {

  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

/**
 * Demo Styles
 */

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.demo {
  margin: 0 auto;
  padding-top: 64px;
  max-width: 640px;
  width: 94%;
}

.demo h1 {
  margin-top: 0;
}

/**
 * Footer Styles
 */

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  text-align: center;
  background-color: #6f7d8a;
  height: 40px

}


@media screen and (max-width: 480px){ /* width 480px */
     body{ background: #80D0FF }
}
@media screen and (max-width: 320px){ /* width 320px */
    body{ background: #FFDBF3 }
}