/* Bootstrap Mobile Navigation is as of Vertical iPad, <= 767px */
#head-wrapper-mobile-top {
  display: none;
}

/*
 * This is needed because on phones the globe background will take over.
 */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
  #mobile-site-push-right > div {
    background: #fff;
  }
}


#mobile-site-push-right #head-wrapper-mobile-top {
  background-color: transparent;
}
@media (max-width:767px) {


  body #head-wrapper {
    position: fixed;
    width: 260px;
    left:-260px;
    top:0;
    height: 100%;
    background-color: #589abc;
    background-image: none;
    z-index: 1;
    overflow: auto;
  }
  body #head-wrapper .navbar-wrap {
/*    padding-top:45px; */
    padding-bottom: 20px;
  }
  body #head-wrapper.open {
/* this is done with jquery animation */
/*      left:0;  */
  }
  #head-wrapper-mobile-top {
    display: block;
	position: sticky;
    position: -webkit-sticky;
	z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
  }
  body.noscroll  #head-wrapper-mobile-top {
    min-width: 400px;
  }

  body #head-wrapper .navbar-collapse {
    max-height: inherit;
  }
  body #head-wrapper .zone-separator {
    display: none;
  }
  body.noscroll {
	overflow: hidden !important;
  }
  body {
    background: url(../images/header-bg.png) no-repeat fixed center top #589abc;
  }

  /*
   * This prevents the pages in the mobile app from displaying the globe background image.
   */
  body.page-app {
    background-image: none;
    background-color: #FFFFFF;
  }

  body .navbar-wrap {
    /* background-color: transparent;
    background-image: none; */
    background: url(../images/header-bg.png) no-repeat scroll center top #589abc;
  }
  body .navbar-collapse {
    height: auto;
    display: block;
  }
  .noscroll #mobile-site-push-right {
/* this is done with jquery animation */
/*      left:260px;  */
    -moz-box-shadow: 10px 10px 10px #000;
    -webkit-box-shadow: 10px 10px 10px 10px;
    box-shadow: 10px 10px 10px 10px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#000000')";
    z-index: 4;
    position: fixed;
  }
  #mobile-site-push-right {
    z-index: 3;
    position:relative;
  }

  #mobile-site-push-right #give-container {
    position: sticky;
    position: -webkit-sticky;
    top: 48px;
    left: 0;
    z-index: 1000;
  }


  body a.mobile-logo-text {
    margin-left: 0;
  }

  body.page-node-20307 {
    background-image: none;
    background-color: #fff;
  }

  body.page-node-20307 aside.sidebar_first, body.page-node-20307 img[typeof="foaf:Image"] {
    display: none;
  }
}