/* Mobile Layout:480px and below. */
/* ------------------------------------------------------------------------------------------------ */
/* GRID */
body { padding: 0 20px; width: auto; }

#wrapper { margin-top: 20px; }

.grid { margin-left: auto; margin-right: auto; }

.fluid-left { border: 0px solid rgba(255, 255, 255, 0); left: 50%; }

.fluid-right .section { margin-left: 0; text-align: left; }

/* HEADER */
#header { height: auto; }
#header #logo { float: none; }
#header #logo a img { max-height: 130px; }
#header #nav { background-color: rgba(0, 0, 0, 0.66); float: none; font-size: 22px; text-align: center; }
#header #nav .nav-item { font-size: 18px; float: left; margin: 0; width: auto; }
#header #nav .nav-item a { display: inline-block; margin: 0; padding: 5px 10px 2px; }
#header #nav .nav-item.social { float: right; text-align: right; width: auto; }
#header #nav .nav-item.social a { float: right; font-size: 14px; text-align: center; margin: 0; padding: 5px 10px 2px; }

/* RESERVATIONS */
.reservations { text-align: center; }
.reservations .heading a { font-size: 32px; }

/* MAP */
.fluid-right { -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; }
.fluid-right .section.map { padding: 20px; }
.fluid-right .section.map img { width: 100%; }

/* CONTACT */
#contact #main-image { max-height: none; }

input[type="text"], textarea { font-size: 16px; line-height: 24px; padding: 5px 10px; width: 94%; }

input[type="submit"] { padding: 10px 20px; line-height: 24px; background-color: #222; width: 100%; }

input[type="date"] { width: 100%; }

textarea { height: 120px; }

label { font-size: 14px; }

.field { margin-bottom: 10px; text-align: center; }

.inline-field { text-align: center; margin-bottom: 10px; display: block; }

#reservation-details .inline-field:nth-of-type(1) { margin-right: 0; display: block; width: 100%; }

#reservation-details .inline-field:nth-of-type(2) { margin-right: 15px; display: inline-block; }

#reservation-details .inline-field:nth-of-type(3) { margin-right: 0; display: inline-block; }

/* FOOTER */
#footer { text-align: center; }
#footer .section { /* TWITTER */ }
#footer #address { font-size: 16px; }

/* IFRAMES */
#main #main-image { min-height: 300px; }
#main #main-image.beer { height: 280px; overflow: hidden; }
#main #main-image.beer iframe { height: 280px; max-height: 280px; overflow: hidden; width: 100%; }

body#menu #main #main-image { height: auto; max-height: none; overflow: visible; }
body#menu #main #main-image .menu { height: auto; opacity: 1; overflow-y: visible; width: auto; }
body#menu .fluid-right .section { display: none; }

/* SUCCESS */
#success { bottom: 25%; height: auto; left: 30px; margin: 0; padding: 30px 30px; position: absolute; right: 30px; top: 30px; width: auto; }

#gallery-bg { background-color: rgba(0, 0, 0, 0.8); bottom: 0; display: block; left: 0; opacity: 0; position: fixed; right: 0; top: 0; z-index: -2; }

.fullscreen { -webkit-transition-property: background-color, border-color, border-width, color, height, left, opacity, top, width; -moz-transition-property: background-color, border-color, border-width, color, height, left, opacity, top, width; -o-transition-property: background-color, border-color, border-width, color, height, left, opacity, top, width; transition-property: background-color, border-color, border-width, color, height, left, opacity, top, width; -webkit-transition-duration: 2s, 2.5s, 1s, 0.1s, 0.1s, 1.5s, 1s, 1s, 0.1s; -moz-transition-duration: 2s, 2.5s, 1s, 0.1s, 0.1s, 1.5s, 1s, 1s, 0.1s; -o-transition-duration: 2s, 2.5s, 1s, 0.1s, 0.1s, 1.5s, 1s, 1s, 0.1s; transition-duration: 2s, 2.5s, 1s, 0.1s, 0.1s, 1.5s, 1s, 1s, 0.1s; -webkit-transition-timing-function: ease-in-out, ease-in-out, ease, ease, ease, ease, ease-in-out, ease, ease; -moz-transition-timing-function: ease-in-out, ease-in-out, ease, ease, ease, ease, ease-in-out, ease, ease; -o-transition-timing-function: ease-in-out, ease-in-out, ease, ease, ease, ease, ease-in-out, ease, ease; transition-timing-function: ease-in-out, ease-in-out, ease, ease, ease, ease, ease-in-out, ease, ease; -webkit-transition-delay: 0, 0, 0, 0, 0, 0, 0, 0, 0; -moz-transition-delay: 0, 0, 0, 0, 0, 0, 0, 0, 0; -o-transition-delay: 0, 0, 0, 0, 0, 0, 0, 0, 0; transition-delay: 0, 0, 0, 0, 0, 0, 0, 0, 0; }
.fullscreen#gallery-bg { display: block; opacity: 1; z-index: 1; }
.fullscreen.fluid-left { border: 20px solid rgba(255, 255, 255, 0.33); left: 50%; margin-left: -340px; max-width: 90%; position: absolute; width: 640px; z-index: 2; }
.fullscreen.fluid-right { margin-left: 60%; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; }
.fullscreen.link { position: relative; z-index: 3; }

@media only screen and (min-width: 481px) { body { text-align: center; padding: 0 20px; }
  /* GRID */
  .grid { width: 100%; }
  .fluid-left { margin-bottom: 20px; }
  .fluid-right .section { margin: 20px 0 0 0; }
  .fluid-right .section#mini-slideshow { margin: 0; padding: 20px 0; text-align: center; width: auto; }
  .fluid-right .section#mini-slideshow img { width: 100%; height: auto; }
  /* HEADER */
  #header { height: auto; }
  #header #logo { float: none; }
  #header #logo a { display: block; }
  #header #logo a img { width: auto; max-height: 130px; }
  #header #nav { overflow-x: hidden; position: static; text-align: center; }
  #header #nav .nav-item { font-size: 20px; float: none; margin: 0; width: 20%; }
  #header #nav .nav-item a { display: block; margin: 0; padding: 5px 20px 2px; }
  #header #nav .nav-item.social { display: block; float: right; position: absolute; right: 20px; text-align: right; top: 85px; width: auto; }
  #header #nav .nav-item.social a { float: right; font-size: 14px; text-align: center; padding: 5px 18px 2px; }
  /* SECONDARY */
  .secondary { float: right; width: 48%; }
  .secondary .reservations { margin-top: 0; }
  /* RESERVATIONS */
  .reservations { margin: 20px 0 0 20px; font-size: 14px; text-align: center; }
  .reservations .heading a { font-size: 26px; }
  /* SOCIAL */
  .fluid-right .section.social { padding: 10px 5px; }
  .fluid-right .section.map { display: block; padding: 15px; }
  /* CONTACT */
  .field { text-align: left; }
  .inline-field { text-align: left; }
  #reservation-details .inline-field { display: inline-block; margin-right: 15px; }
  #reservation-details .inline-field:nth-of-type(1) { display: inline-block; margin-right: 15px; width: auto; }
  #reservation-details .inline-field:nth-of-type(3) { margin-right: 0; }
  /* FOOTER */
  #footer .section { /* TWITTER */ }
  #footer .section#gang-twitter { /*font-size: 15px; width: 100%; padding: 15px 0; display: block; text-align: left;  .title { padding-left: 20px; }*/ }
  #footer #address { font-size: 22px; padding: 15px 0; text-align: center; }
  /* IFRAMES */
  #main #main-image { height: auto; }
  #main #main-image.beer { height: 280px; }
  #main #main-image.beer iframe { width: 100%; height: 280px; max-height: 280px; overflow: scroll; }
  /* SUCCESS */
  #success { position: absolute; top: 170px; right: 30px; bottom: 50%; left: 30px; height: auto; width: auto; margin: 0; } }
@media only screen and (min-width: 769px) { /* GRID */
  .fluid-left { width: 60%; float: left; }
  .fluid-right { display: inline-block; float: left; width: 40%; }
  .fluid-right .section { border-left: 1px solid transparent; display: block; opacity: 0.8; margin: 0 0 20px 20px; padding: 20px 20px 20px 19px; -webkit-transition: border-left-color 0.5s ease-in-out, 1s; -webkit-transition-delay: 0, 0s; -moz-transition: border-left-color 0.5s ease-in-out 0, 1s; -o-transition: border-left-color 0.5s ease-in-out 0, 1s; transition: border-left-color 0.5s ease-in-out 0, 1s; -webkit-transition: opacity 0.3s ease-in-out, 1s; -webkit-transition-delay: 0, 0s; -moz-transition: opacity 0.3s ease-in-out 0, 1s; -o-transition: opacity 0.3s ease-in-out 0, 1s; transition: opacity 0.3s ease-in-out 0, 1s; }
  .fluid-right .section h2 { float: left; font-size: 20px; font-weight: 300; letter-spacing: normal; line-height: 42px; white-space: nowrap; width: 50%; }
  .fluid-right .section p { border-left: 1px solid rgba(255, 255, 255, 0.33); float: right; font-size: 16px; font-weight: 300; line-height: 22px; padding-left: 10px; text-transform: uppercase; width: 45%; }
  .fluid-right .section:hover { background-color: rgba(0, 0, 0, 0.66); border-left: 1px solid #ff1d2c; color: #ccc; opacity: 1; }
  .fluid-right .section.current { background-color: rgba(0, 0, 0, 0.66); border-left: 1px solid transparent; opacity: 1; }
  .fluid-right .section.current h2 span { color: #ff1d2c; }
  .fluid-right .section.hours p, .fluid-right .section.call p { line-height: 42px; }
  .fluid-right .section#mini-slideshow { min-height: 232px; margin: 0 0 20px 20px; padding: 0; text-align: center; width: auto; }
  .fluid-right .section#mini-slideshow img { height: auto; max-height: 232px; width: 100%; }
  body#home .fluid-right .section h2 { width: 40%; }
  body#home .fluid-right .section p { width: 55%; }
  body#home .fluid-right .section.hours p { line-height: 22px; }
  body#home .fluid-right .section.hours p span { display: block; }
  body#home .fluid-right .section.hours p span.separator { display: none; }
  body#home .fluid-right .section.hours p { line-height: 22px; }
  body#home .fluid-right .section.call p { line-height: 42px; }
  /* HEADER */
  #header { height: auto; }
  #header #logo { float: left; width: 29%; }
  #header #logo a { display: block; }
  #header #logo a img { width: auto; max-height: 140px; }
  #header #nav { margin: 50px 0; }
  #header #nav .nav-item { font-size: 24px; float: left; margin: 0; padding: 0; width: 23%; }
  #header #nav .nav-item a { display: block; margin: 0; padding: 5px 20px 2px; }
  #header #nav .nav-item.social { float: right; position: static; }
  #header #nav .nav-item.social a { float: right; font-size: 14px; text-align: center; }
  /* RESERVATIONS */
  .reservations { margin: 20px 0 0 20px; font-size: 16px; }
  .reservations .heading a { font-size: 32px; color: #fff; }
  /* CONTACT */
  input[type="text"], textarea { font-size: 16px; line-height: 24px; padding: 5px 10px; width: 94%; }
  input[type="submit"] { padding: 10px 20px; line-height: 24px; background-color: #222; }
  label { font-size: 14px; }
  .field { margin-bottom: 10px; }
  .inline-field { display: block; margin-right: 15px; width: 100%; }
  .inline-field:nth-of-type(3) { margin-right: 0; }
  #reservation-details .inline-field:nth-of-type(1) { display: inline-block; margin-right: 15px; width: auto; }
  #reservation-details .inline-field:nth-of-type(2) { display: inline-block; margin-right: 15px; width: auto; }
  #reservation-details .inline-field:nth-of-type(3) { display: inline-block; margin-right: 15px; width: auto; }
  /* IFRAMES */
  #main #main-image.beer { height: 400px; }
  #main #main-image.beer iframe { height: 100%; max-height: 100%; width: 100%; }
  body#menu #main #main-image { height: 455px; max-height: none; overflow: hidden; }
  body#menu #main #main-image .menu { opacity: 0; overflow-y: scroll; width: auto; }
  body#menu #main #main-image .menu.hideme { display: none; }
  body#menu #main #main-image .menu.current { display: block; opacity: 1; }
  body#menu .fluid-right .section { display: block; } }
@media only screen and (min-width: 991px) { /* GRID */
  .fluid-left { width: 60%; float: left; }
  .fluid-right { display: inline-block; float: left; width: 40%; }
  .fluid-right .section { margin: 0 0 20px 20px; }
  .fluid-right .section h2 { line-height: 42px; width: 36%; }
  .fluid-right .section p { width: 60%; }
  body#home .fluid-right .section h2 { width: 35%; }
  body#home .fluid-right .section p { width: 60%; }
  body#home .fluid-right .section.hours p { line-height: 42px; }
  body#home .fluid-right .section.hours p span { display: inline-block; }
  body#home .fluid-right .section.hours p span.separator { display: inline-block; padding: 0 5px; }
  body#home .fluid-right .section.hours:hover p span.separator { color: #ff1d2c; }
  body#home .fluid-right .section.call p { line-height: 42px; }
  /* HEADER */
  #header #nav { font-size: 24px; }
  #main #main-image { width: auto; }
  /* TWITTER */
  /* RESERVATIONS */
  .reservations { margin: 20px 0 0 20px; font-size: 16px; }
  .reservations .heading { font-size: 33px; color: #fff; }
  /* CONTACT */
  input[type="text"], textarea { font-size: 16px; line-height: 24px; padding: 5px 10px; width: 96%; }
  input[type="submit"] { padding: 10px 20px; line-height: 24px; background-color: #222; }
  label { font-size: 14px; }
  .field { margin-bottom: 10px; }
  .inline-field { display: inline-block; margin-right: 15px; }
  .inline-field:nth-of-type(3) { margin-right: 0; }
  /* IFRAMES */
  #main #main-image.beer { height: 450px; }
  #main #main-image.beer iframe { height: 100%; width: 100%; }
  #success { position: absolute; top: 152px; left: 50%; margin-left: -245px; width: 490px; height: 140px; padding: 60px 30px; opacity: .9; background-color: #fff; color: #000; border-radius: 10px; z-index: 1000000; font-size: 24px; } }