/* Responsive - Mobile & Below
========================================================================== */
@media (max-width : 480px) {

  /* Resets
  ------------------------------------------ */
  #container,
  #header,
  #footer,
  #footer p,
  #content,
  #welcome,
  #phone,
  #contactDetails,
  #homeSlideshow,
  #slideshow,
  #loading,
  ul#buttons,
  #gallery,
  #information,
  #picture,
  #form,
  #contact,
  #map,
  #navigation,
  #productMenu,
  #productMenu li,
  #productMenu a,
  #productMenu a.top,
  table,
  form,
  #form label,
  #savings,
  #logo a {
    width: 100%;
    float: none;
  }

  img {
    max-width: 100%;
  }

  table {
    width: 100% !important;
  }

  .mobile-only {
    display: block;
  }

  /* Change Box Sizing
  ------------------------------------------ */
  #content,
  #footer,
  #slideshow,
  #productMenu,
  #productMenu a.sub,
  #productMenu a.topActive,
  #productMenu a.top,
  #savings,
  #welcome {
    box-sizing: border-box;
  }

  /* Margin + Padding Resets
  ------------------------------------------ */
  #information,
  #phone,
  #contactDetails,
  #productMenu,
  #productMenu > *,
  #productMenu a.topActive,
  #productMenu a.top,
  h1.enquiry-form,
  #contact,
  #form label,
  #form input.submit,
  #map,
  #savings,
  #footer p {
    margin: 0;
    padding: 0;
  }

  /* Hide
  ------------------------------------------ */
  #find-us,
  #news-ticker {
    display: none;
  }

  /* Slideshow
  ------------------------------------------ */
  #homeSlideshow {
    height: 200px;
    margin-bottom: 10px;
  }

  #homeSlideshow img {
    height: 100%;
    width: 100%;
  }

  #slideshow {
    margin: 0;
    padding: 0;
    height: 200px;
  }

  #slideshow img {
    text-align: center;
    height: 200px;
    margin-top: 0;
    width: 100%;
  }

  #loading {
    height: 200px;
  }

  #loading img.loading {
    height: auto;
    margin: 90px 0 0 0;
    width: auto;
  }

  /* Navigation
  ------------------------------------------ */
  #productMenu,
  #navigation {
    height: auto;
  }

  #navigation {
    background: white;
    display: none;
  }

  #productMenu {
    background: black;
    padding: 0;
  }

  #productMenu a.top,
  #productMenu a.topActive {
    padding: 0 20px;
  }

  #productMenu a.top,
  #productMenu a.topActive {
    height: auto;
    line-height: 30px;
  }

  #productMenu a.top {
    color: #bfbfbf;
  }

  #productMenu a.topActive {
    background: #d00922;
    color: white;
    position: relative;
    z-index: 100;
  }

  #productMenu a.top:hover,
  #productMenu a.topActive:hover {
    background: #d00922;
    color: white;
  }

  #productMenu ul {
    position: relative;
    top: 0;
    width: 100%;
  }

  #productMenu a.sub {
    background: none;
    color: #BFBFBF;
    float: none;
    margin: 0;
    padding: 0 0 0 30px;
    width: 100%;
  }

  #productMenu a.sub:hover {
    background: none;
    border: 0;
    color: white;
  }

  #productMenu a.subActive {
    float: none;
  }

  #productMenu a.subActive {
    border: 0;
    background: 0;
    padding: 0 0 0 18px;
  }

  #open-nav {
    background: url(../images/design/open-nav.png) no-repeat;
    display: block;
    width: 25px;
    height: 25px;
    margin-top: -12.5px;
    position: absolute;
    right: 20px;
    top: 50%;
    text-indent: -9999px;
    z-index: 100;
  }

  /* Structural
  ------------------------------------------ */
  #header {
    background: white;
    height: 110px;
    position: relative;
  }

  #header-info {
    display: none;
  }

  #logo-mobile {
    background: url(../images/design/header-mobile.png) no-repeat;
    display: block;
    height: 50px;
    left: 20px;
    position: absolute;
    top: 50%;
    margin-top: -31px;
    width: 258px;
  }

  #content {
    padding: 0 20px;
  }

  #content ul {
    margin-left: 17px;
  }

  #phone {
    display: block;
    margin-bottom: 10px;
  }

  ul#buttons {
    overflow: hidden;
    margin: 0;
    padding: 0;
  }

  ul#buttons li {
    float: none;
    margin: 0 0 5px 0;
  }

  ul#buttons li a {
    margin: 0 auto;
  }

  #content #welcome h2 {
    margin-bottom: 10px;
  }

  #footer {
    height: auto;
    padding: 20px;
    text-align: center;
  }

  #logo a {
    float: none;
    margin: 10px auto 10px auto;
    width: 110px;
  }

  #information {
    padding: 10px 0;
  }

  #savings {
    padding: 20px;
  }

  #welcome {
    padding: 20px;
  }

  #savings {
    height: auto;
  }

  /* Typography
  ------------------------------------------ */
  h2 {
    margin-bottom: 15px;
  }

  /* Contact
  ------------------------------------------ */
  form {
    border: 0;
  }

  #form label {
    text-align: left;
  }

  #form input.submit {
    float: none;
  }

  #form img {
    margin: 0 20px 0 0;
  }

  #map {
    padding-bottom: 20px;
  }

  #map iframe {
    width: 100%;
  }
}