/* Phones: the wedding site as one easy column.
   Galleries become a scroll of full-width photos; menus and text are bigger. */
@media (max-width: 767px) {
  html, body { -webkit-text-size-adjust: 100%; }
  #shareButtons, #subNavInd { display: none !important; }
  /* (the home page's hidden description sits 2000px down, which left a long blank page on phones) */
  #homeDescription { display: none !important; }
  footer { padding: 14px 10px 24px !important; text-align: center !important; }
  #logo { padding-top: 18px !important; margin-bottom: 8px !important; }
  #logo img { width: 210px !important; }
  #menu, #topnav { text-align: center !important; }
  #topnav { padding: 0 10px !important; line-height: 1.4 !important; }
  #topnav a.toplink { display: inline-block !important; font-size: 17px !important; padding: 7px 8px !important; margin: 0 !important; float: none !important; }
  #subNavs { text-align: center !important; padding: 0 10px 6px !important; margin-top: 0 !important; }
  #subNavs .subnav { margin-top: 0 !important; padding-top: 0 !important; }
  #subNavs .subnav a.sublink { display: inline-block !important; font-size: 15px !important; padding: 7px 9px !important; float: none !important; }
  #topnav a.selected, #subNavs a.selected { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

  /* every page grows with its content instead of a fixed height */
  #container { width: 100% !important; margin-top: 0 !important; }
  #mainContainer, #main { width: 100% !important; height: auto !important; min-height: 0 !important; overflow: visible !important; float: none !important; }
  #main { padding: 0 !important; }

  /* readable text on the regular pages (bio, reviews, contact, video) */
  #main p, #main li, #main td, #main label { font-size: 17px !important; line-height: 1.6 !important; }
  #main h1, #main h2 { font-size: 24px !important; line-height: 1.3 !important; }
  #main img:not(#m-feed img), #main iframe, #main video { max-width: 100% !important; }
  #main iframe:not([style*="position:absolute"]):not([style*="position: absolute"]) { width: 100% !important; aspect-ratio: 16 / 9; height: auto !important; }
  footer, footer * { font-size: 13px !important; }

  /* galleries: the slideshow and the thumbnail strip are replaced by the photo scroll */
  html.m-gallery #mainGalleryHolder,
  html.m-gallery #galleryRightCol,
  html.m-gallery #galleryNav,
  html.m-gallery #loadingIcon,
  html.m-gallery footer .slideshow,
  html.m-gallery #slideshowButton,
  html.m-gallery #slideshowControl { display: none !important; }
  #m-feed { display: block; width: 100vw; margin: 6px 0 0 calc(50% - 50vw); }
  #m-feed img { display: block; width: 100%; height: auto; margin: 0 0 6px; background: #f2eee6; min-height: 60vw; }
  #m-feed img.loaded { min-height: 0; background: none; }
  #m-feed .m-count { text-align: center; font: 13px/1.4 'FuturaPTW01-Light', sans-serif; letter-spacing: .12em; color: #8c8378; padding: 6px 0 18px; text-transform: uppercase; }

  /* text pages (rates, info, tips...): fit the screen, no side-scrolling, no fake scrollbar */
  .pageText, .pageText .antiscroll-inner, .pageTextInner { width: 100% !important; max-width: 100% !important; height: auto !important; overflow: visible !important; box-sizing: border-box; }
  .pageTextInner { padding: 0 14px !important; }
  .antiscroll-scrollbar { display: none !important; }
  #columns { display: block !important; width: 100% !important; }
  #columns .column { display: block !important; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; margin: 0 0 24px !important; }
  #columns .column img { width: 100% !important; height: auto !important; }
  #main iframe[height="415"] { width: 76% !important; aspect-ratio: 300 / 415 !important; }
  /* the invisible "don't click the video" covers had fixed pixel sizes */
  #main a[onclick="return false;"] { width: 100% !important; height: 100% !important; }
  #main img[align], #main img[ALIGN] { float: none !important; width: 100% !important; height: auto !important; padding: 0 0 12px !important; }
  #main .content4[style*="float"] { float: none !important; }
  .video-vimeo, .video-box, .video-edits, .video-reel { box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
}