/* ==========================================================================
   RESPONSIVE STYLES
   ========================================================================== */

/* screen sizes to watch for: */
/* 1920×1080 */
/* 1440×900 */
/* 1366×768 */
/* 1024×768 */
/* 768×1024 */
/* 667×375 */
/* 640×360 */
/* 480×320 */
/* 375×667 */
/* 360×640 */
/* 320×480 */

@media only screen
and (max-width: 1640px) {


}

@media only screen
and (max-width: 1440px) {

  /* adjust the margins to be 100px + the 25px green border on the left edge */
  body { padding-left: 125px; }

  /* adjust the margins to be 75px on the right edge */
  #ferry-menu, #social-header-links { right: 75px; }
  .story-wrap { padding-right: 75px; }
  #ferry-notice { padding-right: 555px; margin-left: -125px; }

  /* narrower sidebar (410px) */
  #main-cols-wrap { padding-right: 485px; }
  #sidebar { width: 410px; margin-right: -410px; }
  .ferry-page--main { padding-right: 75px; }

  #landing-lists { padding-right: 525px; }
  .ll-col.omega { width: 450px; }

  /* tighter footer columns (50px gaps) */
  .footer-inner { padding-left: 650px; padding-right: 50px; }
  .footer-col.alpha { width: 360px; }
  .footer-col.images { left: 380px; }
  .footer-col.omega { padding-left: 50px; }

}

/* ========================================================================== */

@media only screen
and (max-width: 1366px) {

  /* narrower sidebar (360px) */
  #main-cols-wrap { padding-right: 435px; }
  #sidebar { width: 360px; margin-right: -360px; }
  #landing-lists { padding-right: 475px; }
  .ll-col.omega { width: 400px; }

    /* 2023 updates */
  .info-cards.card-count-4 .info-card {
    width: calc(50% - 20px);
  }
  

}

/* ========================================================================== */

@media only screen
and (max-width: 1260px) {

  /* body { background-color: blue; } */

  /* adjust the margins to be 60px + the 25px green border on the left edge */
  body { padding-left: 85px; }

  /* adjust the margins to be 60px on the right edge */
  #ferry-menu, #social-header-links { right: 60px; }
  .story-wrap { padding-right: 60px; }
  #main-cols-wrap { padding-right: 420px; }
  #ferry-notice { padding-right: 540px; margin-left: -85px; }
  .ferry-page--main { padding-right: 60px; }


  /* restack the footer */
  .footer-inner { min-height: auto; padding-left: 20px; padding-right: 75px; }
  .footer-col.alpha { position: static; }
  .footer-col.images { position: static; padding-top: 5px; }
  .footer-col.omega { padding: 0 0 20px 0; float: none; }

  /* restyle the cash-only ribbon to a list item */
  .ff-cash-only-notice { position: static; width: auto; padding: 10px; margin-bottom: 10px;}
  .ff-cash-only-notice::after { display: none; }

  /* smaller news listing photo */
  .list-item-wrap                 { padding-left: 250px; }
  .list-photo                     { margin-left: -250px; }
  .list-photo, .list-photo span   { height: 220px; width: 220px; }

}

/* ========================================================================== */

@media only screen
and (max-width: 1165px) {

  /* body { background-color: blue; } */

  /* adjust the margins to be 30px on the right edge */
  #ferry-menu, #social-header-links { right: 30px; }
  #main-cols-wrap { padding-right: 390px; }
  #ferry-notice { padding-right: 510px; }
  .ferry-page--main { padding-right: 30px; }


  #main-text, #sidebar { margin-top: 30px; }
  #main-text { padding-right: 30px; }
  .story-wrap { padding-right: 30px; padding-left: 30px;}
  .story-col.alpha { padding-right: 20px; }
  .story-col.omega { padding-left: 20px; }
  .slide-nav.alpha { padding-right: 20px; }
  .slide-nav.omega { padding-left: 20px; }

  /* re-stack the hompeage News & Upcoming Events feeds */
  #landing-lists { padding-right: 60px; margin-left: 0; }
  .ll-col.alpha .ll-pad, .ll-col.beta .ll-pad { padding-bottom: 20px; }
  .ll-col.alpha { padding-left: 0; }
  .ll-col.beta { background-image: none; padding-right: 0; }
  .ll-col.omega { clear: both; width: auto; float: none; padding-top: 0; margin-right: 0; padding-left: 0; background: #fff; position: relative; }
  .ll-col.omega::before { content: ''; background-image: radial-gradient(circle, #41ad49, #41ad49 1px, transparent 1px, transparent); background-size: 6px 6px; background-repeat: repeat-x; background-position: left center; height: 6px; display: block; margin-bottom: 37px; }

  /* change the lead photo from fixed height to 6:4 ratio */
  #lead-photo { height: auto;	padding-bottom: 66.67%; width: 100%; }

  /* smaller news listing photo */
  .list-item-wrap                 { padding-left: 200px; }
  .list-photo                     { margin-left: -200px; }
  .list-photo, .list-photo span   { height: 170px; width: 170px; }

}

/* ========================================================================== */

@media only screen
and (max-width: 1024px) {

  /* smaller font sizes by about 10% */
  body, .text-std { font-size: 17px; }
  .text-l         { font-size: 29px; }
  .text-xm        { font-size: 25px; }
  .text-m         { font-size: 22px; }
  .text-s         { font-size: 20px; }
  .text-xs        { font-size: 13px; }

  /* smaller header text */
  .parent_li > a, .child_ul a { font-size: 18px; letter-spacing: 0.25px; }
  .parent_li > a::after { width: 20px; }

  /* main single column, 60px side padding */
  #main-cols-wrap { padding-right: 60px; }
  #main-text      { float: none; padding-right: 0; margin-top: 50px; }
  #sidebar        { width: auto; float: none; margin-top: 50px; margin-right: 0; margin-bottom: 40px; }
  #landing-lists  { margin-top: 45px; }
  .footer-inner   { padding-right: 60px; }
  #ferry-notice { padding-right: 370px; padding-left: 55px; }
  #ferry-notice::before { font-size: 20px; padding-top: 10px; width: 40px; }
  .ferry-page--main { padding-right: 60px; }

  /* single column traditional stories */
  .story-wrap { padding-right: 60px; padding-left: 20px;}
  .story-col { width: auto; float: none; }
  .story-col.alpha { padding-right: 0; }
  .story-col.omega { padding-left: 0; }
  .slide-nav.alpha { padding-right: 0; text-align: left;}
  .slide-nav.omega { padding-left: 0; text-align: right; }

  .post-page #main-text, .jobs-page #main-text { margin-top: 0; }

  /* narrower header ferry schedule */
  #ferry-menu             { width: 300px; }

}

/* ========================================================================== */

@media only screen
and (max-width: 880px) {


  /* body { background-color: green; } */

  #main-text, #sidebar { margin-top: 40px; }

  #rotated { font-size: 24px; left: -266px; }

  /* smaller logo, rearranged social buttons */
  #logo { width: 284px; height: 96px; margin: 29px 0 29px -43px; }
  #social-header-links { top: 62px; right: auto; left: 260px; font-size: 30px; }
  #social-header-links li { float: none; position: absolute; margin: 0; }
  #social-header-links .twitter { margin: 0; top: 34px; }
  #social-header-links .facebook { margin: 0; }
  #ferry-notice { margin-bottom: 0; }

  /* smaller header text */
  .parent_li > a, .child_ul a { font-size: 16px; font-family: 'lato400', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; letter-spacing: 0; }
  .parent_li > a::after { width: 15px; line-height: 16px; opacity: 0.5; }

  /* smaller font sizes by about 10% */
  .text-l             { font-size: 26px; }
  .text-xm,.ql-title  { font-size: 23px; }
  .text-m             { font-size: 21px; }
  .text-s             { font-size: 18px; }

}

/* ========================================================================== */

@media only screen
and (max-width: 800px) {

  .footer-col.alpha { width: auto; float: none; }
  .footer-col.images { position: absolute; left: 20px; bottom: 68px; }
  .footer-fineprint { margin-top: 138px; }
  .rtb-form { max-width: 450px; }


}

/* ========================================================================== */

@media only screen
and (max-width: 768px) {

  /* body { background-color: green; } */


  /* smaller size for the left-hand page title strip */
  body          { padding-left: 60px; }
  body::before  { width: 15px; }
  #rotated      { left: -277px; }

  #ferry-menu { right: 15px; }
  #ferry-notice { margin-left: -60px; padding-right: 350px; }

  /* match the 45px left side padding */
  #main-cols-wrap, .footer-inner, #landing-lists   { padding-right: 45px; }
  .ferry-page--main { padding-right: 45px; }


  /* smaller font sizes by about 10% */
  body, .text-std     { font-size: 16px; }
  .text-l             { font-size: 23px; }
  .text-xm, .ql-title { font-size: 20px; }
  .text-m             { font-size: 18px; }
  .text-s             { font-size: 16px; }

  #logo { margin: 26px 0 26px -43px; }
  #social-header-links { top: 59px; }

/* 2023 updates */
.faqs--expanded-li { width: calc(100% - 40px); }
.sched-detail--col	{ width: calc(100% - 20px); }



}

/* ========================================================================== */

@media only screen
and (max-width: 700px) {

  /* switch to mobile nav */
  #nav-wrap 												      { background: #fff; padding: 0; clear: both; float: none; display: block; }
  #nav-wrap #nav                          { width: auto; margin: 0 45px 5px 0; position: relative; z-index: 99; }
  #tabs                                   { border: 2px solid #41ad49; -webkit-border-radius: 0 5px 5px 5px; -moz-border-radius: 0 5px 5px 5px; border-radius: 0 5px 5px 5px; }
  #tabs::before                           { content: ''; top: -10px; width: 30px; background: #41ad49; height: 9px; position: absolute; left: -2px; }
  .parent_li												      {	float: none; width: 100% !important; }
  .parent_li > a, .child_ul a	  		      { text-align: left; border: 0; border-bottom: 1px solid #e7e8e8; padding: 10px; margin: 0; }
  .parent_li.omega > a                    { border: 0; }
  .child_ul .alpha a, .child_ul .omega a  { padding: 10px; }
  .parent_li > a::after                   { display: none; }

  .child_ul 												      { display: block; position: relative; margin: 0; padding: 0; }
  .child_ul::after                        { display: none; }
  .parent_li > a:hover, .child_ul a:hover, .parent_li.omega > a:hover { color: #636466 !important; }
  .child_ul a::before								      { content: '\f105'; padding: 0 5px 0 2px; color: #41ad49; font-family: FontAwesome; }
  #ferry-notice { padding-right: 335px; }


  /* put the social buttons in the nav strip */
  #social-header-links { top: 156px; right: 45px; left: auto; font-size: 34px;}
  #social-header-links li { float: left; position: static; margin: 0; }
  #social-header-links .twitter { margin: 0; top: 34px; }
  #social-header-links .facebook { margin: 0 5px 0 0; }

  /* put the ferry nav on the right edge */
  #ferry-menu { right: 0; }

}

/* ========================================================================== */

@media only screen
and (max-width: 640px) {

  /* have a consistent 45px padding around content */
  body                            { padding-left: 0; }
  #main-cols-wrap, #landing-lists { padding-left: 45px; }
  .footer-inner                   { padding-left: 45px; padding-right: 45px; }
  .footer-col.images              { left: 45px; }
  .nav-toggle, #nav-wrap #nav      { margin-left: 45px; }
  .ferry-page--main { padding-left: 45px; }

  /* put the ferry menu above the logo */
  #ferry-menu { position: relative; margin: 0 auto; width: auto; max-width: 360px; }
  #ferry-notice { padding: 10px; margin: 0; border-top: 5px solid #BDAC17; text-align: center; }
  #ferry-notice::before { display: none; }


  /* place the vertical text below the main page image */
  body::before  { display: none; }
  #rotated      { margin: 45px 45px -10px 45px; width: auto; padding: 0; font-size: 24px; position: static; -moz-transform: none; -o-transform: none; -webkit-transform: none; transform: none; }

  /* center the logo  */
  #logo { margin: 25px auto; }
  #social-header-links { top: 154px; }

  /* stack the homepage news & events feed */
  .ll-col { float: none; width: auto; background: transparent; }
  .ll-col.alpha { padding-right: 0; }
  .ll-col.beta { padding-left: 0; }
  .ll-col.beta::before { content: ''; background-image: radial-gradient(circle, #41ad49, #41ad49 1px, transparent 1px, transparent); background-size: 6px 6px; background-repeat: repeat-x; background-position: left center; height: 6px; display: block; margin-bottom: 37px; }

  .post-page #rotated { display: none; }

  .jobs-page #rotated { margin: 45px 0 30px 0; }
  #post-image { margin-left: -45px; margin-right: -45px; }

  #stories { margin-left: 45px;}
  .story-wrap { padding-right: 45px; padding-left: 45px;}

  /* 2023 updates */
  .info-cards.card-count-4 .info-card {
    width: calc(100% - 20px);
  }
  #ferry-notice.ferry-page { margin-top: 40px; }

}

/* ========================================================================== */

@media only screen
and (max-width: 480px) {

  #social-header-links { right: 15px; }
  .nav-toggle, #nav-wrap #nav { margin-left: 15px; }
  #nav-wrap #nav { margin-right: 15px; }
  .footer-col.images { left: 15px; bottom: 90px; }
  #main-cols-wrap, .footer-inner, #landing-lists { padding-left: 15px; padding-right: 15px; }
  #rotated { margin-left: 15px; margin-right: 15px; }
  .rtb { display: block; }
  .ferry-page--main { padding-right: 15px; padding-left: 15px; }


  .ff-row { padding-left: 180px; }
  .ff-cell.alpha { width: 180px; margin-left: -180px; }

  /* smaller news listing photo */
  .list-item-wrap                 { padding-left: 90px; }
  .list-photo                     { margin-left: -90px; }
  .list-photo, .list-photo span   { height: 70px; width: 70px; }

  .list-calendar { width: 70px; margin-left: -80px; }
  .events .list-item-wrap { padding: 20px 15px 0 90px; }
  .cal-month { font-size: 9px; text-transform: capitalize; }
  .cal-day { font-size: 10px; }
  .cal-date { font-size: 48px; }

  #stories { margin-left: 15px;}
  .story-wrap { padding-right: 15px; padding-left: 15px;}
  #post-image { margin-left: -15px; margin-right: -15px; }

  .job-posting { padding: 25px 15px 0 15px; }


}




/* for responsive nav – should be min-width of previous rules +1 pixel */
@media screen and (min-width: 701px) { .js .nav-collapse { position: relative; } .js .nav-collapse.closed { max-height: none; } .nav-toggle { display: none; } }