body {
  width: 100%;
  zoom: 1; }
  body:before, body:after {
    content: "";
    display: table; }
  body:after {
    clear: both; }

/* grid */
/* breakpoints */
/* other stuff */
/* ---variables--- */
/* grey */
/* orange */
/* dark orange */
/* cream */
/* wider grid */
.grid {
  max-width: 1024px; }

div.line {
  height: 1px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 60%;
  background-color: #AD4513;
  margin-bottom: 0.6em; }

/* ---background colors/styles--- */
body, #navbar, #scroll, div.lbox {
  background: #F5EFDA url("/images/bg_texture.png") top center repeat; }

@media screen and (min-width: 668px) {
  #scroll {
    background: none;
    background-image: url("/images/map_bg.png");
    background-size: 100% auto;
    background-repeat: no-repeat; } }
body.index #footer, #footer {
  background: none; }

/* ---typography--- */
body, #scroll, p {
  font-family: "adriane", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5em;
  color: #333333; }

h1, h2, h3 {
  font-family: "adriane", serif;
  font-size: 1.25em;
  line-height: 1.4em;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: #333333;
  text-align: left;
  padding: 0;
  margin-top: 0;
  margin-bottom: 1em; }

h3 {
  font-size: 17px;
  font-style: italic;
  text-transform: capitalize;
  color: #c56233;
  margin-bottom: 0.15em; }

h4 {
  font-family: "adriane", serif;
  font-size: 1.25em;
  line-height: 1.4em;
  font-weight: 400;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  color: #333333;
  text-align: left;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0; }

h5 {
  font-family: "adriane", serif;
  font-size: 1.1em;
  line-height: 1.4em;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: #333333;
  text-align: left;
  padding: 0;
  margin-top: 0;
  margin-bottom: 1em; }

/* tablet sizes */
@media screen and (max-width: 800px) {
  h1 {
    font-size: 19px;
    margin-bottom: 0.75em; }

  h4 {
    font-size: 19px;
    font-style: italic;
    margin-bottom: 0em; }

  h5 {
    margin-bottom: 0.75em; }

  body, #scroll, p {
    font-size: 15px; }

  #navbar .nav ul li {
    padding: 0 0.35em; }
    #navbar .nav ul li a {
      font-size: 18px; } }
/* mobile sizes */
@media screen and (max-width: 667px) {
  h1 {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 1em; }

  h4 {
    font-size: 19px;
    font-style: italic;
    margin-bottom: 0em; }

  h5 {
    margin-bottom: 0.75em; }

  body, #scroll, p, body.index #about h1 {
    font-size: 15px;
    font-weight: 400; } }
/* smaller text in sidebar */
.sidebar p, .sidebar table.hours {
  font-size: 0.85em; }

.employee {
  margin-bottom: 1em; }

.employee .title, .dresscode-title {
  font-family: "adriane", serif;
  font-size: 17px;
  font-weight: 400;
  font-style: italic;
  text-transform: capitalize;
  letter-spacing: 0;
  color: #c56233;
  padding: 0;
  margin-bottom: 0.15em;
  margin-top: 1em; }

a, a:visited {
  color: #333333;
  border-bottom: 1px dotted #333333; }

a:hover, a:focus {
  color: #c56233;
  border-bottom: 1px dotted #c56233; }

/* ---navigation - desktop--- */
/* type styles */
#navbar .nav ul li a, #navbar .nav ul li a:hover, #navbar .nav ul li a:focus {
  font-family: "adriane", serif;
  font-size: 1.25em;
  font-weight: 400;
  font-style: italic;
  text-transform: capitalize;
  letter-spacing: 0;
  color: #c56233; }
#navbar .nav ul li a.selected {
  color: #c56233;
  border-bottom: 1px dotted #c56233; }
#navbar .nav ul li a:hover, #navbar .nav ul li a:focus {
  color: #AD4513; }

/*styling to navigation */
#navbar .nav {
  border-top: none;
  border-bottom: solid 2px #c56233; }

/* logo size/position */
@media screen and (min-width: 668px) {
  #logo {
    display: inline;
    float: left;
    width: 46.2264150943%;
    margin: 0 1.8867924528%;
    margin-left: 26.8867924528%;
    height: 200px;
    margin-top: 25px;
    margin-bottom: 10px; }
    #logo img {
      max-height: 200px;
      max-width: 100%; } }
/* size breaks at tablet */
@media screen and (min-width: 668px) and (max-width: 750px) {
  #logo {
    height: 170px; } }
@media screen and (min-width: 668px) and (max-width: 670px) {
  #logo {
    height: 150px; } }
/* mobile logo - swap in new img */
@media screen and (max-width: 667px) {
  #logo img {
    display: none; }
  #logo a {
    display: block;
    background-image: url("/images/ehg-logo-mobile.png");
    background-repeat: no-repeat;
    background-position: center;
    height: 65px;
    background-size: 75%; } }
/* ---buttons--- */
/* typography for buttons (a.button and li containing nav a) */
a.button, a.button:hover, a.button:focus, ul.buttons li,
form input.button[type="submit"], form input.button[type="submit"]:hover,
form input.button[type="submit"]:focus,
button, button:hover, button:focus {
  font-family: "freight-sans-pro", sans-serif;
  font-size: 0.85em;
  line-height: 1.8em;
  font-weight: 700;
  background: none;
  border-radius: 0;
  border: 2px solid #c56233; }

/* space after buttons in a list */
ul.buttons li {
  margin-bottom: 0.5em; }

/* shift padding to the right side of buttons so left align works */
ul.menus li {
  padding-left: 0;
  padding-right: 0; }

a.button {
  margin-right: 0.25em; }

/* more bottom margin on desktop for when buttons stack */
@media screen and (min-width: 668px) {
  a.button {
    margin-bottom: 1em; } }
/* set color and padding for buttons */
a.button, ul.buttons li a, form input.button[type="submit"], button {
  color: #c56233;
  padding: 0.6em 1.6em; }

/*hover state */
a.button:hover, a.button:focus,
ul.buttons li a:hover, ul.buttons li a:focus,
form input.button[type="submit"]:hover, form input.button[type="submit"]:focus,
button:hover, button:focus {
  color: #F5EFDA;
  background: #c56233; }

@media screen and (max-width: 667px) {
  /* larger buttons on mobile */
  a.button, a.button:hover, a.button:focus, ul.buttons li {
    font-size: 0.9em; }

  a.button, ul.buttons li a {
    padding: 0.8em 1.6em; }

  /* remove top border for separate buttons */
  ul.buttons {
    border-top: none; }

  /* priority nav button */
  #priority-nav {
    font-family: "adriane", serif;
    font-size: 1.6em;
    font-weight: 400;
    font-style: italic;
    text-transform: capitalize;
    letter-spacing: 0;
    color: #F5EFDA;
    background: #c56233;
    border: none;
    padding: 0.35em 0; }

  #priority-nav:hover, #priority-nav:focus {
    color: #F5EFDA;
    background: #AD4513; } }
/* ---site wide adjustments--- */
/* footer */
#footer p {
  font-size: 12px; }

@media screen and (max-width: 667px) {
  #scroll, body.index #scroll {
    padding-bottom: 160px; } }
/* remove top border from footer */
body.index #footer .grid, #footer .grid {
  border-top: none; }

/*custom back arrow */
@media screen and (max-width: 667px) {
  #back img {
    display: none; }

  #back {
    background-image: url("/images/back_orange.png"); } }
/* mainbar and sidebar size */
@media screen and (min-width: 668px) {
  .mainbar {
    display: inline;
    float: left;
    width: 62.893081761%;
    margin: 0 1.8867924528%;
    padding-right: 1em;
    padding-left: 0; }

  .sidebar {
    display: inline;
    float: left;
    width: 29.5597484277%;
    margin: 0 1.8867924528%;
    border-left: none;
    padding-right: 0;
    padding-left: 0; }

  .sidebar > * {
    padding-left: 0;
    border-left: 0; } }
@media screen and (max-width: 667px) {
  .mainbar {
    padding-top: 1em; }

  .sidebar {
    margin-top: 3em; } }
div.hours {
  margin-top: 0; }

/*remove section divider from sidebar */
.section + .section {
  margin-top: 0;
  border-top: none;
  padding-top: 0; }

table.hours {
  margin-top: 0;
  margin-bottom: 0.5em; }

.button-list {
  padding-top: 1em;
  padding-bottom: 2em; }

/* ---page specific changes--- */
/* index page */
#chicken {
  border-bottom: none; }
  #chicken img {
    width: 300px;
    max-width: 80%;
    margin-bottom: 2em;
    margin-top: 2em; }

.intro-text {
  text-transform: uppercase;
  color: #c56233;
  letter-spacing: 0.1em;
  margin-right: 0.25em;
  font-weight: 700; }

/* gallery page */
.gallery img {
  border: solid 2px #c56233; }
.gallery a:hover img, .gallery a:focus img {
  border: solid 2px #AD4513; }

/* contact page */
#map {
  width: 75%;
  margin-bottom: 2em; }

@media screen and (max-width: 740px) {
  #map {
    width: 90%; } }
/* social */
.instagram a {
  background-image: url("/images/instagram-icon.png"); }

.yelp a {
  background-image: url("/images/yelp-icon.png"); }

.facebook a {
  background-image: url("/images/facebook-icon.png"); }

.tripadvisor a {
  background-image: url("/images/tripadvisor-icon.png"); }

ul.social li a:hover {
  opacity: 0.9; }

ul.social {
  margin-top: 1.5em; }