/* Large desktop */
@media (min-width: 1200px) { }
 
@media (max-width: 1200px)  {

  /* Navigation */
  #navigation {
    font-size: 10px;
  }

  /* Sidebar */
  #side-bar-inner h2 {
    width: 210px;
  } 

}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {

  /* Navigation */
  #navigation {
    font-size: 10px;
  }
  #navigation ul li.nav-link a {
    padding: 22px 2.5%;
  }

  /* Sidebar */
  #side-bar-inner h2 {
    width: 157px;
  } 

  /* Search */
  #edit-search-block-form-1 {
    width: 170px;
  }

  #footer .apply a {
    padding-right: 20px;
    font-size: 14px;
  }

}
 

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {

  /* Header Wrapper Background */
  #header {
    background-color: #105A96; 
  } 

  #header-logo img {
     max-width: 150px;
  }

  #navigation-toggle {
    width: 32px;
    float: right;
    margin-top: 25px;
  }

  #quick-buttons {
    display: none;
    margin-top: 30px;
  }
  #quick-buttons .nav-pills {
    float: none;
  }
  #quick-buttons .nav-pills:after {
    clear: none;
  }
  #quick-buttons input {
    padding: 20px 15px;
    width: 100%;
  }
  #quick-buttons #delagate-button {
    width: 100%;
  }
  #quick-buttons #locations-button {
    width: 50%;
  }
  #quick-buttons #qlinks-button {
    width: 50%
  }
  #quick-buttons li#delagate-button > a,
  #quick-buttons li#locations-button > a,
  #quick-buttons li#qlinks-button > a {
    padding: 15px;
  }
 
  /* Shrink rotating banner */
  #myCarousel .item { 
    height: 250px;
  }
  #myCarousel .carousel-caption { 
    padding: 5px;
    text-align: center;
  }
  #myCarousel .carousel-caption .caption-title { 
    font-size: 14px; 
  }
  
  /* Remove Margins */
  .container {
    padding: 0;
    margin: 0;
  }
  body {
    padding: 0px !important;
  }

  /* Center Header */
  #header-buttons, 
  #search-block-form {
    display: table;
    margin: 0 auto;
    margin-top: 20px;
    width: 99% !important;
  }

  /* Navigation */
  #navigation {
    background-color: #105A96;
    display: none;
    display: table;
    width: 100%;
    padding: 0;
    font-size: 16px;
  }
  #navigation #mobile-options ul li.active.delagate-button {
    width: 100%;
  }
  #navigation #mobile-options ul li {
    display: block;
    clear: none;
    margin: 0;
    width: 50%;
  }
  #navigation #mobile-options ul {
    margin-bottom: 20px;
  }
  #navigation ul {
    margin-left: 0px;
  }
  #navigation ul li {
    display: table;
    clear: both;
    margin: 20px;
  }
  #navigation .mega {
    position: relative;
    font-size: 13px;
    clear: both;
    height: auto;
    margin: 10px 0px !important;
    padding: 0 !important;
    text-align: right !important;
    border-top: solid 1px #FFF;
    border-bottom: solid 1px #FFF;
  }
  #navigation ul li.nav-link {
    display: none;
  }
  #navigation ul li.nav-link a {
    padding: 0;
  }
  .nav-responsive a {
    color: #FFF;
    margin: 10px;
  }


  /* Pad Main */
  #main {
    padding: 20px;
  }

  /* Side Bar */
  #side-bar {
    box-shadow: none;
    background: #FFF;
    position: absolute;
    left: -120%;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
  }

  /* Footer */
  #footer p {
    width: 200px;
    text-align: center !important;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  #footer .apply h4 {
    display: block;
    padding: 0;
  }
  #footer .apply a {
    line-height: 35px;
    padding: 0;
  }
  #footer .sub a {
    width: 200px !important;
    margin: 0;
  }
  #footer ul {
    margin: 0;
  }
  #footer ul li {
    display: list-item;
    list-style: none;
  }
  #footer ul,
  #footer img,
  #footer .findyourself,
  #footer .social {
    float: none !important;
    text-align: center;
  }
  #footer .findyourself {
    max-width: 300px;
    text-align: center;
    margin: auto;
    margin-top: 20px;
  }


}
 

/* Landscape phones and down */
@media (max-width: 480px) {

  #myCarousel .carousel-caption {
    position: absolute;
    bottom: 0;
    margin: 0;
    width: 95%;
    padding: 10px;
  }
  #myCarousel .carousel-control {
    margin-bottom: -100px;
  }


  /* Sidebar */
  #side-bar-inner h2 {
    width: 103%;
    overflow: hidden;
  } 
}