@media (max-width: 992px) { /* smartphones + tablets, portrait & landscape */
  .rights {
    border-left: 0;
    border-right: 0;}
  .tap {
    display: inline-block !important; /* !important, to override bootstrap CSS */}
  .click {
    display: none !important; /* !important, to override bootstrap CSS */}
  .contact-img {
    height: auto;
    margin: 0;
    overflow-y: auto;
    position: relative;
    right: 0;
    top: 0;
    width: 100%;    
    z-index: 1;}
  .contact-info-container {
    z-index: 2;}
  .company-info-container {
    text-align: center;}
  .header-logo, .company-logo-text {
    float: none;}
  .header-logo {
    margin-top: 10px;}
  .company-logo-text {
    margin-top: 0;
    max-width: 370px;
    width: 100%;}
  .sy-slide, .sy-slide > a {
    height: 100%;}
  .sy-slide > a > img {
    height: 100%;
    width: auto !important /* override sliprry */}		
	#content-wrapper {
	  min-height: 600px;
	  top: -50px /* -50 instead of the desktop version of -40, to accomodate the mobile navbar height */}
  footer {
    top: -53px /* -53 instead of the desktop version of -44, to accomodate the mobile navbar height */;}

  header {
    height: auto;}
	nav {
	  height: auto;}
	.nav-list > li {
	  margin-bottom: 20px;}
	.list-inline > li {
		display: block;}
	.nav-mobile-menu {
	  color: white;
	  display: block !important;
	  font-size: 1.6em;
    line-height: 50px;  /* the parent height is 60, but the glyph needs to be pushed up a little */
    padding-right: 40px;
    text-align: right;}
	.nav-list {
	  background: rgba(0, 0, 0, 0.4);
	  display: none;
	  font-size: 1.6em;	  
	  font-variant: small-caps;
	  left: 0px;
	  margin: 0px;
	  padding-bottom: 20px;
	  position: absolute;
	  width: 100%;}  
  #content > .content-gallery {
    margin-left: 0  /* no 1 col down middle, unlike the desktop version */}	  
  .package-row > .package-pic, .package-row > .package-text {
    display: block /* remove table-cell from desktop mode, so that content stacks vertically instead of horizontally */}
  .package-pic {
    height: 300px;}
  .package-text {
    padding-bottom: 40px;}

  .package-row > div {
    width: 100%;}
  .alt-package-pic-mobile {
    display: block !important; /* !important, to override twitter bootstrap */}
  .alt-package-pic-desktop {
    display: none !important; /* !important, to override twitter bootstrap */}
  .property {
    margin: 40px 0 0 0;
    width: 100%;}  
}
@media (orientation: portrait) and (max-width: 480px), (orientation: landscape) and (max-height: 480px) {		/* mobile (proper detection of mobiles in portrait mode) */
  body {
    font-size: 16px;
  }
  .header-logo {
    height: 96px;	/* fix for David's request to make logo bits 20% smaller */
  }
  .company-logo-text {
    width: 80%;		/* fix for David's request to make logo bits 20% smaller */
  }  
}