/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 04 2026 | 06:43:58 */
/* ==========================================================================
   OPUS - MEET THE SPECIALISTS, MOBILE
   Scoped to page-id-284 so it can reach no other page.

   The team plugin forces two floated 50 per cent columns on a phone. Each
   card ends up about 120px wide, names break one word per line, and long
   single words such as PHYSIOTHERAPIST overflow their box and run across the
   card next to them. Below 768px the grid becomes a single-column list with
   the portrait beside the text, which also makes twelve people scannable
   instead of an endless scroll of full-width photographs.
   ========================================================================== */

@media (max-width:767px){

  /* the plugin lives in a Divi row capped at 80 per cent; give the list
     more of the screen on this page only */
  body.page-id-284 .team-srot-com .et_pb_row{width:92% !important}
  /* 76.css sets .ex-tplist to direction:rtl below 767px, which flips the
     grid and puts the portrait on the right. Undo it on this page only. */
  body.page-id-284 .ex-tplist{direction:ltr !important}
  /* the Filter by specialism dropdown has a fixed 286px width and was wider
     than a 320 to 360px screen, scrolling the whole page sideways */
  body.page-id-284 select[name="extp_cat"],
  body.page-id-284 .extp-search-group,
  body.page-id-284 .extp-search{max-width:100% !important;width:100% !important}
  body.page-id-284 .ctgrid{margin:0}

  body.page-id-284 .ctgrid .item-grid{
    width:100% !important;
    float:none !important;
    padding:0 !important;
  }

  body.page-id-284 .ctgrid .item-grid .exp-arrow{position:static}

  body.page-id-284 .ctgrid .item-grid figure.tpstyle-10{
    display:grid;
    grid-template-columns:88px minmax(0,1fr);
    column-gap:16px;
    align-items:start;
    margin:0;
    padding:20px 0 !important;
    border-bottom:1px solid #ddd8ce;
    text-align:left;
  }
  body.page-id-284 .ctgrid .item-grid:last-child figure.tpstyle-10{border-bottom:0}

  body.page-id-284 .ctgrid .tpstyle-10-image{width:88px;height:auto;margin:0}
  body.page-id-284 .ctgrid .tpstyle-10-image a{display:block}
  body.page-id-284 .ctgrid .tpstyle-10-image img{
    width:88px !important;
    height:117px !important;
    object-fit:cover;
    object-position:50% 20%;
    display:block;
  }

  body.page-id-284 .ctgrid figure.tpstyle-10 figcaption{
    padding:0 !important;
    height:auto !important;
    text-align:left;
  }

  body.page-id-284 .ctgrid figcaption h3{
    margin:0 0 6px !important;
    padding:0 !important;
    height:auto !important;
    font-size:19px !important;
    line-height:1.2 !important;
    overflow-wrap:normal;
    hyphens:none;
  }
  body.page-id-284 .ctgrid figcaption h3 a{color:#22292b}

  body.page-id-284 .ctgrid figcaption h5{
    margin:0 !important;
    padding:0 !important;
    height:auto !important;
    font-size:13px !important;
    line-height:1.45 !important;
    color:#4a5456 !important;
    overflow-wrap:break-word;
  }
  body.page-id-284 .ctgrid figcaption h5 span{
    display:block;
    margin:7px 0 0 !important;
    height:auto !important;
    font-size:11px !important;
    line-height:1.4 !important;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#966844 !important;
  }

  /* A phone has no hover, so the plugin's hidden View profile link never
     appears. Show it as a plain typographic link instead. */
  body.page-id-284 .ctgrid .extp-readmore{
    position:static !important;
    width:auto !important;
    height:auto !important;
    margin:12px 0 0 !important;
    text-align:left !important;
  }
  body.page-id-284 .ctgrid .extp-readmore a{
    display:inline-block !important;
    padding:0 0 4px !important;
    font-size:11px !important;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#22292b !important;
    background:none !important;
    border:0 !important;
    border-bottom:1px solid #966844 !important;
    border-radius:0 !important;
    text-decoration:none;
  }
}

/* Tablet: two columns is fine, but stop the long role words overflowing. */
@media (min-width:768px) and (max-width:980px){
  body.page-id-284 .ctgrid figcaption{overflow-wrap:break-word}
  body.page-id-284 .ctgrid figcaption h5 span{font-size:12px !important;letter-spacing:.08em}
}

/* Very narrow phones (320px class devices) */
@media (max-width:359px){
  body.page-id-284 .ctgrid .item-grid figure.tpstyle-10{grid-template-columns:72px minmax(0,1fr);column-gap:14px}
  body.page-id-284 .ctgrid .tpstyle-10-image,
  body.page-id-284 .ctgrid .tpstyle-10-image img{width:72px !important}
  body.page-id-284 .ctgrid .tpstyle-10-image img{height:96px !important}
  body.page-id-284 .ctgrid figcaption h3{font-size:17px !important}
}

/* The contact block that follows the list is styled site-wide in the separate
   "Opus contact section" item, since the same block appears on six other
   pages. Nothing for it here. */