Sorry

This feed does not validate.

In addition, interoperability with the widest range of feed readers could be improved by implementing the following recommendations.

Source: http://hss.edu

  1. 
  2.  
  3.  
  4.  
  5. <?xml version="1.0" encoding="UTF-8"?>
  6. <!DOCTYPE html>
  7. <!-- Page ID: 158 -->
  8. <!-- Published: 10/11/2024 12:13 PM -->
  9.  
  10.  
  11. <html xmlns=http://www.w3.org/1999/xhtml lang="en">
  12. <head>
  13. <meta name="google-site-verification" content="ieD8bBx3qCY9W_pMZw9PCXBu-ZemrA22MExGbSAHYaE" />
  14. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE11">
  15. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  16. <meta http-equiv="charset" content="utf-8">
  17.  
  18. <title>HSS | Hospital for Special Surgery: U.S. #1 for Orthopedics</title>
  19. <meta name="description" content="HSS is the #1 ranked hospital in the U.S. for orthopedics, #2 for rheumatology, and top-ranked for pediatric orthopedics. Locations in NY, NJ, CT, and FL.">
  20. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  21. <!--<meta name="viewport" content="initial-scale=1.0, user-scalable=0">-->
  22.  
  23.  
  24. <meta name="HandheldFriendly" content="True">
  25. <!-- meta for FaceBook -->
  26. <meta property="og:title" content="HSS | Hospital for Special Surgery: U.S. #1 for Orthopedics">
  27. <meta property="og:type" content="article">
  28. <meta property="og:url" content="https://www.hss.edu/index.htm">
  29. <meta property="og:image" content="https://www.hss.edu/images/socialmedia/hss-homepage-man-woman-walking_1600x630.jpg">
  30. <meta property="og:site_name" content="Hospital for Special Surgery">
  31. <meta property="og:description" content="HSS is the #1 ranked hospital in the U.S. for orthopedics, #2 for rheumatology, and top-ranked for pediatric orthopedics. Locations in NY, NJ, CT, and FL.">
  32. <!-- end meta for FaceBook -->
  33. <!-- meta for Twitter -->
  34. <meta name="twitter:card" value="summary">
  35. <meta name="twitter:site" content="@hspecialsurgery">
  36. <meta name="twitter:title" content="HSS | Hospital for Special Surgery: U.S. #1 for Orthopedics">
  37. <meta name="twitter:description" content="HSS is the #1 ranked hospital in the U.S. for orthopedics, #2 for rheumatology, and top-ranked for pediatric orthopedics. Locations in NY, NJ, CT, and FL.">
  38. <meta name="twitter:image:src" content="https://www.hss.edu/images/socialmedia/hss-homepage-man-woman-walking_1600x630.jpg">
  39. <meta name="twitter:creator" content="@hspecialsurgery">
  40. <!-- end meta for Twitter -->
  41. <!-- meta for Google+ -->
  42. <meta itemprop="name" content="HSS | Hospital for Special Surgery: U.S. #1 for Orthopedics">
  43. <meta itemprop="description" content="HSS is the #1 ranked hospital in the U.S. for orthopedics, #2 for rheumatology, and top-ranked for pediatric orthopedics. Locations in NY, NJ, CT, and FL.">
  44. <meta itemprop="image" content="https://www.hss.edu/images/socialmedia/hss-homepage-man-woman-walking_1600x630.jpg">
  45. <!-- end meta for Google+ -->
  46. <!-- Meta For Robots crawler for index/no-index -->
  47.  
  48. <!-- End Meta for Robots crawler -->
  49. <!--<meta name="HandheldFriendly" content="True">-->
  50.  
  51.  
  52. <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
  53. <link rel="icon" href="/favicon.ico" type="image/x-icon">
  54. <link rel="apple-touch-icon" href="/ios-icon.png">
  55. <link rel="canonical" href="https://www.hss.edu">
  56. <script  type="text/javascript" src="/scripts/jquery.js"></script><script defer type="text/javascript" src="/scripts/bootstrap-plugins-optimized.js"></script><script  type="text/javascript" src="/scripts/jquery-migrate-v1.js"></script><script defer type="text/javascript" src="/scripts/jquery-inpage-home.js"></script><script defer type="text/javascript" src="/scripts/jquery-lozad.js"></script>
  57.  
  58. <link rel="stylesheet" href="/styles/bootstrap-styles.css" media="all"/><link rel="stylesheet" href="/styles/styles.css" media="all"/>
  59.  
  60.  
  61.  
  62.  
  63.  
  64.  
  65.  
  66.  
  67.  
  68. <link href="/styles/benton-sans-styles.css" rel="stylesheet">
  69. <link rel="preload" href="/images/font/7223e0fb-75ed-4c34-aef3-a11d3c4f7c78-3.woff" as="font" type="font/woff" crossorigin>
  70. <link rel="preload" href="/images/font/e355689d-fa58-4f4c-968c-6ad46837e7cb-3.woff" as="font" type="font/woff" crossorigin>
  71. <link rel="preload" href="/images/font/8facf01c-6be3-42e1-ad76-238ce10dc7f3-3.woff" as="font" type="font/woff" crossorigin>
  72. <link rel="preload" href="/images/font/fdef8a02-dac8-4d65-a032-ffa4d868b396-3.woff" as="font" type="font/woff" crossorigin>
  73.  
  74.  
  75. </head>
  76. <!--<body class="homepage" onload="loadcode()">-->
  77.  
  78. <body>
  79. <script  type="text/javascript" src="/scripts/jquery-auto-complete.js"></script>
  80. <link rel="stylesheet" type="text/css" href="/styles/autocomplete-style.css" media="all"/>
  81.  
  82.  
  83.  
  84. <style>
  85.  
  86. @media (max-width: 479px){
  87. #header.full-header .container, .container, .container-fullwidth {
  88.    width: auto !important;
  89. }
  90. }
  91.  
  92.  
  93. .main-big-widget-responsive-bg-height {
  94.    height: 100%;
  95. }
  96.  
  97. .button-resize {
  98.    font-size: 1.0em;
  99.    font-weight: bold;
  100.    width:230px;
  101.  
  102. }
  103.  
  104. .home-background-overlay {
  105. background: url(https://www.hss.edu/images/banners/abby-arches-home-lg.jpg) no-repeat bottem center fixed;
  106. -webkit-background-size: 100%;
  107.    -webkit-background-size: cover;
  108.    -moz-background-size: cover;
  109.    -o-background-size: cover;
  110.    background-size: cover;
  111.  background-attachment: scroll;
  112.  height: 80vh;
  113.  position:relative;
  114. }
  115.  
  116.  
  117. @media screen and (max-width: 980px){
  118.  
  119. .button-resize {
  120.    font-size: 1.0em;
  121.    font-weight: bold;
  122.    width:90%;
  123.  
  124. }
  125. .home-background-overlay {
  126.  background: url(https://www.hss.edu/images/banners/abby-arches-home.jpg) no-repeat bottem center fixed;
  127. -webkit-background-size: 100%;
  128.    -webkit-background-size: cover;
  129.    -moz-background-size: cover;
  130.    -o-background-size: cover;
  131.    background-size: cover;
  132.  background-attachment: scroll;
  133.  height: 60vh;
  134.  position:relative;
  135. }
  136. }
  137.  
  138. @media screen and (max-width: 778px){
  139.  
  140. .home-background-overlay {
  141. background: url(https://www.hss.edu/images/banners/abby-arches-home.jpg) no-repeat bottom center fixed;
  142. -webkit-background-size: 100%;
  143.    -webkit-background-size: cover;
  144.    -moz-background-size: cover;
  145.    -o-background-size: cover;
  146.    background-size: cover;
  147.  background-attachment: scroll;
  148.  height: 60vh;
  149.  position:relative;
  150.  background-position: left;
  151. }
  152. }
  153.  
  154.  
  155. .more-btn-mobile {
  156. display:none;
  157. }
  158.  
  159.  
  160. @media screen and (max-width: 767px){
  161.  
  162. .home-background-overlay {
  163. background-position: -150px 0;
  164. }
  165.  
  166. .more-btn-mobile {
  167. display:block;
  168. }
  169.  
  170. .more-btn-desktop {
  171. display:none;
  172. }
  173. }
  174.  
  175.  
  176. .home-background-overlay-contents {
  177.  position: absolute;
  178.  width:35%;
  179.  top: 50%;
  180.  transform: translateY(-50%);
  181.  color: #fff;
  182.  padding: 2.0em;;
  183.    background: rgb(23,36,46);
  184.    background: transparent\9;
  185.    background: rgba(23,36,46,0.7);
  186.    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
  187.    zoom: 1;
  188. }
  189.  
  190. @media screen and (max-width: 1200px){
  191. .home-background-overlay-contents {
  192.   width:40%;
  193. }
  194.  
  195. .section-offers {
  196. margin-top:20px;
  197. }
  198. }
  199.  
  200. @media screen and (max-width: 775px){
  201. .home-background-overlay-contents {
  202.  top: 60%;
  203.  transform: translateY(-60%);
  204.  width:70%;
  205. }
  206. }
  207.  
  208.  
  209. @media screen and (max-width: 767px){
  210. .home-background-overlay-contents {
  211.  top: 80%;
  212.  transform: translateY(-80%);
  213.  width:100%;
  214. }
  215.  
  216. .section-offers {
  217. margin-top:40px;
  218. }
  219. }
  220.  
  221.  
  222. @media screen and (max-width: 480px){
  223. .home-background-overlay-contents {
  224.  top: 90%;
  225.  transform: translateY(-90%);
  226.  width:100%;
  227. }
  228. }
  229.  
  230.  
  231. .p-resize {
  232. font-size:1.15em;
  233. }
  234. .p-resize-hero{
  235. font-size:1.3em;
  236. line-height:1.6;
  237. margin-bottom:1.5em;
  238. }
  239.  
  240. /* MAIN BANNER */
  241.  
  242. .home-A {
  243.    color: #0074bc;
  244.    font-size:3.6em;
  245.    font-weight:700;
  246.    line-height:1.5em;
  247.    margin: 15px 0 0;
  248. }
  249. .home-B {
  250.    font-size: 2em;
  251.    color: #30333F;
  252.    line-height: 1.25em;
  253.    font-weight: 800;
  254. }
  255. .home-C {
  256.    font-size: 2em;
  257.    color: #0074BC;
  258.    line-height: 1.25em;
  259.    font-weight: 500;
  260.    display: inline-block;
  261.    vertical-align: top;
  262.    margin-bottom:1em;
  263. }
  264. .badge {
  265.    vertical-align:  top;
  266. }
  267. .badge img {
  268.    height: 100px;
  269.    margin-top: -30px;
  270. }
  271. .new-home-h2 {
  272.    font-size: 1.7em;
  273.    color: #fff;
  274.    font-weight: 700;
  275.    line-height: 1.5em;
  276. }
  277.  
  278. .new-home-h3 {
  279.    font-size: 1.7em;
  280.    font-weight: 700;
  281.    line-height: 1.5em;
  282. }
  283.  
  284. .new-home-highlight {
  285.    font-size: 1.3em;
  286.    color: #0074bc;
  287. }
  288.  
  289. .row-custom-margin-left {
  290.    margin:0 0 40px -35px
  291. }
  292.  
  293.  
  294. .home-blue {
  295.    color: #0074bc;
  296.    font-size:1.25em;
  297.    font-weight:700;
  298.    line-height:1.3em;
  299. text-align:left;
  300. text-transform:uppercase;
  301. }
  302. .home-navy{
  303.    color: #264583;
  304.    font-size:1.25em;
  305.    font-weight:700;
  306.    line-height:1.3em;
  307. text-align:left;
  308. text-transform:uppercase;
  309. }
  310. .home-world{
  311. color: #264583;
  312.    font-size:2.8em;
  313.    font-weight:800;
  314.    line-height:1.3em;
  315. text-align:center
  316. text-transform:uppercase;
  317. }
  318.  
  319. .home-world-blk{
  320. color: #272725;
  321.    font-size:2.8em;
  322.    font-weight:800;
  323.    line-height:1.3em;
  324. text-align:center
  325. text-transform:uppercase;
  326. }
  327.  
  328.  
  329. /* small pc, ipad */
  330. @media screen and (max-width: 1200px){
  331. .home-A {
  332.    font-size:3em;
  333. }
  334. .home-B {
  335.    font-size: 1.5em;
  336.    line-height: 1.25em;
  337. }
  338. .home-C {
  339.    font-size: 1.5em;
  340.    line-height: 1.25em;
  341. }
  342. .home-world, home-world-blk {
  343.    font-size:3em;
  344. }
  345. .home-navy {
  346.    font-size: 1.5em;
  347.    line-height: 1.25em;
  348. }
  349. .home-blue {
  350.    font-size: 1.5em;
  351.    line-height: 1.25em;
  352. }
  353. .badge img {
  354.    height: 80px;
  355. }
  356. .new-home-h2, .new-home-h3 {
  357.    font-size: 1.6em;
  358.    line-height: 1.4em;
  359. }
  360. }
  361.  
  362. /*small tablet and mobile */
  363. @media screen and (max-width: 767px){
  364. .home-A{
  365.    font-size:2em;
  366.    line-height: 1.25em;
  367.    margin: 15px 0;
  368. }
  369. .home-B {
  370.    font-size: 1em;
  371.    line-height: 1.5em;
  372. }
  373. .home-C {
  374.    font-size: 1em;
  375.    line-height: 1.5em;
  376.    display: block;
  377.    margin-left: 0;
  378.    margin-bottom: 1em;
  379. }
  380. .badge {
  381.    margin: 10px 0 0;
  382.    display: block;
  383. }
  384. .badge img {
  385.    height: 80px;
  386.    margin-top: 0;
  387. }
  388. .new-home-h2, .new-home-h3 {
  389.    font-size: 1.3em;
  390.    line-height: 1.3em;
  391. }
  392. .new-home-highlight {
  393. font-size: 1.0em;
  394. color: #0074bc;
  395. }
  396.  
  397. .p-resize {
  398. font-size:1.0em;
  399. }
  400. .p-resize-hero {
  401. font-size:1.1em;
  402. }
  403.  
  404. .row-custom-margin-left {
  405. margin:0 0 40px 0
  406. }
  407.  
  408. .more-btn-float-right {
  409.    float: none !important;
  410.    right: 0;
  411.    margin-top: -10px !important;
  412.    margin-bottom: -20px;
  413. }
  414.  
  415. .container-mobile-margin {
  416. margin-left:-25px !important;
  417. }
  418.  
  419. .badge-info {font-size:.65em !important;}
  420. .home-world{
  421.    font-size:2em;
  422.    line-height: 1.25em;
  423.    margin: 15px 0;
  424. }
  425. .home-blue {
  426.    font-size: 1em;
  427.    line-height: 1.5em;
  428. }
  429. .home-navy {
  430.    font-size: 1em;
  431.    line-height: 1.5em;
  432.    display: block;
  433.    margin-left: 0;
  434.    margin-bottom: 1em;
  435. }
  436.  
  437. }
  438.  
  439. @media (min-width: 320px) {
  440. .col-sm-4-custom {
  441. -ms-flex: 0 0 33.333333%;
  442. flex: 0 0 33.333333%;
  443. max-width: 33.333333%;
  444. }
  445. }
  446.  
  447. a[href^=tel] {
  448.   text-decoration:inherit;
  449.   color: inherit;
  450. }
  451.  
  452. .badge-img {display:inline-block;}
  453. .badge-img img {max-height:140px;width: auto;}
  454. .badge-info {font-size:0.95em; line-height:1.5em;}
  455.  
  456. @media (max-width: 575px) {
  457.    .badge-img img {max-height:110px;}
  458. }
  459.  
  460.  
  461. #reliability_banner.banner {
  462.  background: url(https://www.hss.edu/images/banners/abby-arches-home-lg.jpg) center no-repeat;
  463.  background-size: cover;
  464.  background-position: center center;
  465.  height: 100vh;
  466.  max-height: 540px;
  467. }
  468. #reliability_banner .container {
  469.  height: 100vh;
  470.  max-height: 540px;
  471. }
  472. #reliability_banner .row {
  473.  align-items: center;
  474.  height: 100vh;
  475.  max-height: 540px;
  476.  overflow:hidden;
  477. }
  478. #reliability_banner p {
  479.  margin: 1em 0;
  480.  line-height: 1.5em;
  481. }
  482.  
  483. @media screen and (max-width: 767px) {
  484. #reliability_banner.banner {
  485.    background: url(https://www.hss.edu/images/banners/Abby_Arches_homepage-mobile.jpg) center no-repeat;
  486.  }
  487. #reliability_banner .row {
  488.  height: 100vh;
  489.  max-height: 540px;
  490.  overflow:hidden;
  491.  }
  492. }
  493.  
  494.  
  495. @media (max-width: 479px) {
  496. #home-badges p {
  497.   font-size: .7em;
  498. line-height: 1.8em;
  499. margin-bottom: 2em !important;
  500. }
  501. }
  502.  
  503. .easy-autocomplete input {
  504. box-shadow: none !important;
  505. color: inherit !important;
  506. padding: 1rem 0.75rem;
  507. height: calc(3.5rem + 2px);
  508. line-height: 1.25;
  509. border-radius: 8px;
  510. }
  511. .easy-autocomplete input:-webkit-input-placeholder { /* Chrome/Opera/Safari */
  512.  color: #000;
  513. }
  514. .easy-autocomplete input::-moz-placeholder { /* Firefox 19+ */
  515.  color: #000;
  516. }
  517. .easy-autocomplete input:-ms-input-placeholder { /* IE 10+ */
  518.  color: #000;
  519. }
  520. .easy-autocomplete input:-moz-placeholder { /* Firefox 18- */
  521.  color: #000;
  522. }
  523.  
  524. .easy-autocomplete input::placeholder {
  525.  color: #000;
  526. }
  527.  
  528. .easy-autocomplete-container ul li, .easy-autocomplete-container ul .eac-category {
  529.    background: inherit;
  530.    border-color: none !important;
  531.    border-image: none !important;
  532.    border-style: none !important;
  533.    border-width: 0 !important;
  534. }
  535.  
  536. .easy-autocomplete-container ul {
  537.    border-style: solid !important;
  538.    border-width: 1px 1px 1px 1px !important;
  539.    border-color: #0074bc !important;
  540.    border-radius: 0 0 8px 8px !important;
  541.    overflow: auto;
  542.    max-height: 323px;
  543. }
  544.  
  545. .easy-autocomplete-container ul li:last-child {
  546.    border-radius: inherit !important;
  547.    border-width: 0 !important;
  548. }
  549.  
  550. </style><script>
  551. $(document).ready(function() { if($(window).width() > 991) { $('#search').addClass('show'); } });
  552. </script>
  553. <style>
  554. @media only screen and (min-width:992px) {
  555. .searchbtn {
  556. display: none;
  557. }
  558. }
  559. </style>
  560.    <script type='application/ld+json'>
  561. {
  562. "@context": "http://www.schema.org",
  563. "@type": "Hospital",
  564. "name": "Hospital for Special Surgery (HSS)",
  565. "url": "https://www.hss.edu/",
  566. "logo": "https://www.hss.edu/images/nav/hss-logo-flat.gif",
  567. "image": "https://www.hss.edu/images/banners/HSS-building-exterior_HSS-Logo.jpg",
  568. "hasMap": "https://goo.gl/maps/8f38dTVrfzy",
  569. "description": "Hospital for Special Surgery (HSS) is nationally ranked No. 1 in orthopedics (for the 11th consecutive year) and No. 4 in rheumatology by U.S. News & World Report (2020-2021).",
  570. "medicalSpecialty": "Musculoskeletal",
  571. "isAcceptingNewPatients": "Yes",
  572. "priceRange": "$$",
  573. "address": {
  574. "@type": "PostalAddress",
  575. "streetAddress": "535 70th Street",
  576. "addressLocality": "New York",
  577. "addressRegion": "NY",
  578. "postalCode": "10021",
  579. "addressCountry": "USA"
  580. },
  581. "parentOrganization": "Hospital for Special Surgery",
  582. "telephone": "+1 212-606-1000"
  583. }
  584. </script>
  585.  
  586.  <script type="application/ld+json">
  587.  {
  588.    "@context" : "http://schema.org",
  589.    "@type" : "WebSite",
  590.    "url" : "https://www.hss.edu"
  591.  }
  592.  </script>
  593. <div class="offscreen" tabindex="1" data-swiftype-index="false"><a href="#pagecontent_full_width" tabindex="1">> Skip repeated content</a></div>
  594. <!--<div id="wrapper" style="animation-duration: 1.5s; opacity: 1;">-->
  595. <div id="wrapper" class="hidefootertopbanner">
  596.  
  597.  
  598.  
  599.  
  600.  
  601.  
  602. <script type="text/javascript">
  603. $(function() {
  604.      $('#menubox').load('/header-ssi.html?v=3');
  605. });
  606. </script>
  607. <div id="menubox"></div>
  608. <!-- end menu box -->
  609.  
  610.  
  611. <!-- search -->
  612. <section id="bodysearch" aria-labelledby="search-name-93337">
  613.    
  614.                    <div style="margin:0px 0 0px 0;">
  615.                    <form>
  616.                    <input type="text" class="st-default-search-input"  placeholder="How can we help you?" >
  617.                    <input type="image" src="/images/nav/icon.magglass.black.gif" name="Search" value="Search" class="searchbutton body-search-submit-btn" alt="Start search" title="Start search">
  618.                    </form>
  619.                    </div>
  620.                    <div id="search-name-93337" class="banner-offscreen">Body Search Search</div>
  621.                </section>
  622. <!-- search end -->
  624.  
  625.                
  626.                
  627.  
  628.  
  629.  
  630.  
  631.  
  632.  
  633.  
  634.  
  635.  
  636.  
  637.  
  638.  
  639.  
  640.  
  641. <!---->
  642. <!--
  643.  
  644. <div id="pagebanner" class="patient flex-container" style="background-image: none;">
  645.  
  646.        
  647.        
  648.        
  649.        <div class="clear"></div>
  650.        
  651.  
  652.  
  654.  
  655.        
  656. </div>
  657. -->
  658. <div id="tinynavcontainer" class="tinynavcontainer_inside_layered_banner"></div>
  660.                <div id="pagecontent_full_width">      
  661.        
  662.        
  663.  
  664. <div id="navcolumn" class="full-width-sub-nav">
  665.  
  666.  
  667. </div>
  668. <rde-dm:query searchable="true" >
  669.  
  670. <div id="sts-main" class="">
  671.  
  672. <!---->
  673. <!---->
  674. <!---->
  675. <!---->
  676. <!---->
  677.  
  678.  
  679.  
  680. <div>
  681.    
  682.    
  683.  
  684.        
  685.  
  686.  
  687. <div class="emergency-message">
  688. <div class="container">HSS is among the many hospitals nationwide adapting to disruption in the supply of intravenous fluids caused by Hurricane Helene. Our ability to provide safe patient care is not impacted. Our Clinical and Supply Chain teams are working diligently to ensure a seamless patient experience and procure alternative supply. We will report any material change to this situation immediately and extend our deepest sympathies to all who are impacted by the storm in any way.</div>
  689. </div>
  691. <section class="page-section nopadding" style="margin-top:0px; margin-bottom:0px;" aria-labelledby="115441-full-width-content">
  692. <div class="full_width_banner_wrapper_bg" style=" background-color:#ecf1f4; padding:10px 0 1px 0;">
  694.  
  695. <div class="container clearfix">  
  697.  
  698. <!-- smart edit mode start -->
  699.  
  701.  
  702. <!-- smart edit mode end-->
  703.  
  704.  
  705. <div style="padding:">
  706. <div class="accordion">
  707.  <div class="accordion-item">
  708.        <a class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-115440" aria-expanded="false" style="margin-bottom:0 !important; line-height: 1.3 !important;">
  709. Notice of Change Healthcare Security Incident
  710. </a>
  714. </div>
  715.    <div id="accordion-115440" class="accordion-collapse collapse" style="margin:0px 30px 30px 50px;">
  716.        <p style="font-size:0.95em">Our vendor, Change Healthcare, experienced a security incident that impacted its customer data. <a href="https://www.changehealthcare.com/hipaa-substitute-notice" target="_blank">Change Healthcare's HIPAA Substitute Notice</a> provides information that they have at this time about the incident and offers a dedicated call center, free credit monitoring, and identity protection services.</p>
  718.    </div>
  719.  </div>
  720.  
  721. </div>
  722.  
  723.  
  724. <style>
  725.  
  726. .accordion-button::before{flex-shrink:0;width:1.25rem;height:1.25rem;margin-left:auto;content:"";background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230074bc'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");background-repeat:no-repeat;background-size:1.25rem;transition:transform .2s ease-in-out}@media (prefers-reduced-motion:reduce){.accordion-button::after{transition:none}}
  727.  
  728. .accordion-button:not(.collapsed):before {
  729.    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230074bc'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e);
  730.    transform: rotate(-180deg);
  731. }
  732.  
  733. .accordion-button:after, .accordion-button:not(.collapsed):after {
  734.    background-image: none;
  735. }    
  736.  
  737.  
  738. .accordion-button:before {
  739.    margin-right: 10px;
  740.    color: #0074bc;
  741. }
  742.  
  743.  
  744. .accordion-button:focus {
  745.    border-color: transparent;
  746.    box-shadow: none;
  747. }
  748. .accordion-button:not(.collapsed) {
  749.    color: #0074bc;
  750.    background-color: transparent;
  751.    box-shadow: none;
  752. }
  753.  
  754.    .accordion-button {
  755.    width: fit-content;
  756.    font-size: revert;
  757.    color: #0074bc!important;
  758. }
  759.  
  760. .accordion-item {
  761.    border: 0!important;
  762. }
  763.    
  764.        #centercolumn h2.showhide:hover, #centercolumn h3.showhide:hover, #centercolumn h4.showhide:hover {
  765.    color: #0074bc;
  766. }
  767.  
  768.    #centercolumn h2.showhide:active, #centercolumn h3.showhide:active, #centercolumn h4.showhide:active {
  769.    color: #0074bc;
  770. }
  771.  
  772. </style>
  773. </div>
  774.  
  775. </div>
  776. <div aria-hidden="true" id="115441-full-width-content" class="banner-offscreen">Change Healthcare</div>
  777. </section>
  778.  
  780. <section class="page-section nopadding" style="margin-top:0px; margin-bottom:0px;" aria-labelledby="114705-full-width-content">
  781. <div class="full_width_banner_wrapper_bg" style=" background-color:#ecf1f4; padding:0px 0 50px 0;">
  783.  
  784. <div class="container clearfix">  
  786.  
  787. <div class="mb-3 row">
  788. <div class="center col-lg-8 col-md-8 col-sm-12 offset-lg-2 offset-md-2">
  789. <div class="center" style="min-height:50px; padding:20px; position:relative; width:100%">
  790. <h1 class="new-home-highlight"><strong>HSS</strong> | Hospital for Special Surgery</h1>
  791. </div>
  792.  
  793. <div class="home-world-blk" style="color:#0074bc; text-transform:UPPERCASE">World's #1 in Orthopedics</div>
  794.  
  795. <p class="center h2" style="color:#0074bc; padding-top:10px; text-transform:UPPERCASE">Choose better. Move better.</p>
  796. </div>
  797. </div>
  798.  
  799. </div>
  800.  
  801. </div>
  802. <div aria-hidden="true" id="114705-full-width-content" class="banner-offscreen">Introduction 2024</div>
  803. </section>
  804.  
  805. <rde-dm:query searchable="false">
  806.  
  807. <div class="container pb-3" style="margin-top:-40px;">
  808.  
  809.  
  810. <form name="frmFindPhysician" method="post" action="/physicians.asp?search=yes&docmatch=&#filter=" id="frmFindPhysician">
  811.  
  812.  
  813. <div class="center" id="TableData">
  814.  
  815. <div class="container py-5 search-box-shadow" style="background-color:#264583;">
  816.  <div class="row">
  817.    <div class="col-sm-12">
  818.      <div class="h3 center text-white">Find a Doctor and Book Online</div>
  819.    </div>
  820.  </div>
  821.  
  822.    <div class="row justify-content-center gy-2 gx-3 align-items-center my-2">
  823.      <div class="col-12 col-lg-5">
  824.  
  825.        <input style="height: calc(3.5rem + 2px);" placeholder="Condition, procedure, or doctor's name" title="Last name" name="lastname" value="" type="text" maxlength="100" id="lastname" class="form-control" setfocus="true"/>
  826.  
  827.        <input type="hidden" id="lastnamehidden" value="">
  828.  
  829.      </div>
  830.      <div class="col-12 col-lg-4">
  831.        <div class="form-floating">
  832.        <select id="Insurance" class="form-select p-0 px-2" name="insurance-group" title="Insurance (Optional)" aria-label="Insurance">
  833.              <option value="" disabled selected>Show all</option>
  834.        </select>    
  835.          </div>
  836.      </div>
  837.      <div class="col-12 col-lg-2 mt-3 mt-md-2">
  838.        <span id="tooltip-wrapper" class="d-inline-block w-100 tooltip-disabled position-relative" tabindex="0" data-tooltip="Please enter a condition, procedure, or doctor's name.">
  839.          <button id="btnSearch" class="btn btn-secondary w-100 p-3" type="submit" disabled>Find a Doctor</button>
  840.        </span>
  841.  
  842.  
  843.      </div>
  844.    </div>
  845. </div>
  846.  
  847. </div>
  848. </form>
  849. </div>
  850. <script>
  851.  
  852.  
  853. //set insname into local storage
  854.  
  855.  $('select[name="insurance-group"]').change(function(){
  856.  var thisElem6  = this.options[this.selectedIndex].getAttribute('insname');
  857.  var thisElemInsuranceLabel  = this.options[this.selectedIndex].text;
  858.  //localStorage:
  859.  localStorage.setItem("insname", thisElem6);
  860.  localStorage.setItem("insnamelabel", thisElemInsuranceLabel);
  861.  //Cookies:
  862.  //document.cookie="option="+value;
  863.  });
  864.  
  865.  
  866. //localStorage:
  867. var itemValue6 = localStorage.getItem("insname");
  868. if (itemValue6 !== null) {
  869.    $('option[insname=' + itemValue6 + ']').attr('selected',true);
  870. }
  871.  
  872. // expire localstorage in 24 hour
  873. var hours = 24; // to clear the localStorage after 1 hour
  874. var now = new Date().getTime();
  875. var setupTime = localStorage.getItem('setupTime');
  876. if (setupTime == null) {
  877.  localStorage.setItem('setupTime', now)
  878. } else {
  879.  if(now-setupTime > hours*60*60*1000) {
  880.      localStorage.clear()
  881.      localStorage.setItem('setupTime', now);
  882.  }
  883. }
  884. // expire localstorage in 24 hour end
  885.  
  886. //clear vc state
  887. localStorage.setItem('vcstate', '');
  888.  
  889. </script>
  890.              
  891. <style>
  892.  
  893. .form-control:focus{
  894.    outline: none !important;
  895. }
  896.  
  897. input[type=text]:focus {
  898.  outline: none !important;
  899. }
  900.  
  901. .search-box-shadow {
  902. -webkit-box-shadow: 10px 10px 14px -6px rgba(191,185,191,1);
  903. -moz-box-shadow: 10px 10px 14px -6px rgba(191,185,191,1);
  904. box-shadow: 10px 10px 14px -6px rgba(191,185,191,1);
  905. }    
  906.  
  907. input::placeholder {
  908.  color: #000;
  909. }
  910.  
  911. .bg-lightgray {
  912.  background-color:#f5f5f3;
  913. }
  914.  
  915.  
  916. select, option {
  917. -webkit-appearance: none;
  918. -moz-appearance: none;
  919. appearance: none;
  920. }
  921.  
  922. .btn-primary {
  923.  background-color: #0074bc !important;
  924. }
  925.  
  926. .tooltip-disabled:after {
  927.  content: attr(data-tooltip);
  928.  display: block;
  929.  position: absolute;
  930.  width: 100%;
  931.  color: #fff;
  932.  background: #333;
  933.  padding: 0.75em;
  934.  border-radius: 4px;
  935.  bottom: -74%;
  936.  text-align: center;
  937.  display: none;
  938.  font-size: 0.75em;
  939.  font-weight: bold;
  940. line-height: 1.5em;
  941. }
  942.  
  943. .tooltip-disabled:before {
  944.  content: "";
  945.  background: #333;
  946.  transform: rotate(45deg);
  947.  width: 10px;
  948.  height: 10px;
  949.  top: 60px;
  950.  position: absolute;
  951.  left: 50%;
  952.  margin-left: -5px;
  953.  display: none;
  954.  z-index: 2;
  955.  border-right: 1px solid #333;
  956.  border-bottom: 1px solid #333;
  957. }
  958.  
  959. .tooltip-disabled:hover:after,
  960. .tooltip-disabled:hover:before {
  961.  display: block;
  962. }
  963.  
  964. @media (min-width: 992px) {
  965. .tooltip-disabled:after {
  966.  bottom: 110%;
  967. }
  968. .tooltip-disabled:before {
  969.  top: -12px;
  970. }
  971. }
  972.  
  973. .select-hidden {
  974.  display: none;
  975.  visibility: hidden;
  976. }
  977.  
  978. .select {
  979.  /*display: inline-block;*/
  980.  position: relative;
  981.  font-size: 1em;
  982.  color: #272725;
  983.  border-radius: 8px;
  984.  width: 100%;
  985.  height: calc(3.5rem + 2px);
  986.  line-height: 1.25;
  987. }
  988.  
  989. .select-styled {
  990.  position: absolute;
  991.  top: 0;
  992.  right: 0;
  993.  bottom: 0;
  994.  left: 0;
  995.  background-color: #fff;
  996.  border: 1px solid #ccc;
  997.  border-radius: 8px;
  998.  padding: .375rem 2.25rem .375rem .75rem;
  999.  cursor: pointer;
  1000. }
  1001. .select-styled:after {
  1002.  content: "";
  1003.  width: 8px;
  1004.  height: 8px;
  1005.  border-right: 2px solid #0074bc;
  1006.  border-bottom: 2px solid #0074bc;
  1007.  margin-left: auto;
  1008.  transform: rotate(45deg);
  1009.  position: relative;
  1010.  position: absolute;
  1011.  top: 20px;
  1012.  right: 20px;
  1013. }
  1014.  
  1015.  
  1016. .select-styled .floating-label {
  1017.  position: absolute;  
  1018.  left: 12px;
  1019.  top: 50%;
  1020.  transform: translate(0, -50%);
  1021.  transform-origin: 0 0;
  1022. }
  1023.  
  1024. .select-styled.has-selected-option .floating-label {
  1025.  position: absolute;  
  1026.  transform: scale(.85) translateY(-1.25rem) translateX(0rem);
  1027.  /*font-size: 12px;*/
  1028.  opacity: 0.65;
  1029. }
  1030. .select-styled.has-selected-option .selected-option {
  1031.  position: absolute;  
  1032.  top: 70%;
  1033.  left: 12px;
  1034.  transform: translate(0, -60%);
  1035. }
  1036.  
  1037. .select-styled:hover {
  1038.  
  1039. }
  1040. .select-styled:active, .select-styled.active {
  1041.  background-color: #fff;
  1042.  border: 1px solid #0074bc;
  1043.  border-radius: 8px 8px 0 0;
  1044. }
  1045.  
  1046. .easy-select-styled.active {
  1047.  background-color: #fff;
  1048.  border: 1px solid #0074bc;
  1049.  border-radius: 8px 8px 0 0;
  1050. }
  1051.  
  1052.  
  1053. .select-styled:active:after, .select-styled.active:after {
  1054.  transform: rotate(-135deg);
  1055.  top: 25px;
  1056. }
  1057.  
  1058. .select-options {
  1059.  display: none;
  1060.  position: absolute;
  1061.  top: 100%;
  1062.  right: 0;
  1063.  left: 0;
  1064.  z-index: 999;
  1065.  margin: 0;
  1066.  padding: .375rem;
  1067.  text-indent: 10px;
  1068.  list-style: none;
  1069.  background-color: #fff;
  1070.  border-style: solid;
  1071.  border-width: 0 1px 1px 1px;
  1072.  border-color: #0074bc;
  1073.  border-radius: 0 0 8px 8px;
  1074.  overflow: hidden;
  1075.   max-height: 324px;
  1076.   overflow-y: scroll
  1077. }
  1078.  
  1079. .select-options::-webkit-scrollbar {
  1080.   width: 7px;
  1081. }
  1082. .select-options::-webkit-scrollbar-track {
  1083.   background: #eee;
  1084.   border-radius: 8px
  1085. }
  1086. .select-options::-webkit-scrollbar-thumb {
  1087.   background: #ccc;
  1088.   border-radius: 8px;
  1089.  
  1090. }
  1091. .select-options::-webkit-scrollbar-thumb:hover {
  1092.   background: #A5A9AD;
  1093. }
  1094.  
  1095. .select-options li {
  1096.    margin: 0;
  1097.    padding: 0.5rem 0;
  1098.    text-indent: 0px;
  1099.    -moz-transition: all 0.15s ease-in;
  1100.    -o-transition: all 0.15s ease-in;
  1101.    -webkit-transition: all 0.15s ease-in;
  1102.    transition: all 0.15s ease-in;
  1103.    text-align: left;
  1104.    line-height: 1.7em;
  1105.    font-size: 14px;
  1106. }
  1107.  
  1108. .select-options li:hover,
  1109. .select-options li.is-selected {
  1110.  background: #eee;
  1111. }
  1112. .select-options li.is-selected .checkmark {
  1113. display: inline-block;
  1114. background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%230074BC' class='bi bi-check2' viewBox='0 0 16 16'%3E%3Cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0'/%3E%3C/svg%3E");
  1115.  width: 16px;
  1116.  height: 16px;
  1117.  vertical-align: middle;
  1118.  margin-left: 0.25em;
  1119. }
  1120.  
  1121. }
  1122. .select-options li[rel="hide"] {
  1123.  display: none;
  1124. }
  1125.  
  1126. .optgroup {
  1127.  border-top: 1px solid #ccc;
  1128.  color: rgba(39, 39, 37, 0.65) !important;
  1129.  pointer-events: none;
  1130.  cursor: auto !important;
  1131. }
  1132.  
  1133. .select-options li:not(.optgroup) {
  1134. cursor: pointer;
  1135. }
  1136.  
  1137. .select-options li:nth-last-child(2) {
  1138.   border-top: 1px solid #ccc;
  1139. }
  1140.  
  1141. </style>
  1142.  
  1143. <script>
  1144.  
  1145. $(function () {
  1146.  
  1147.  var options = {
  1148.    url: "//www.hss.edu/physicianjson.json",
  1149.  
  1150.    categories: [
  1151.        {   //condition
  1152.            listLocation: "condition",
  1153.            header: "-- Conditions --",
  1154.            maxNumberOfElements: 30
  1155.        },        
  1156.        {   //physician
  1157.            listLocation: "physician",
  1158.            header: "-- Physicians --",
  1159.            maxNumberOfElements: 12
  1160.        }
  1161.    ],
  1162.    
  1163.    list: {
  1164.    maxNumberOfElements: 100,
  1165.    match: {
  1166.      enabled: true
  1167.    },
  1168.    onChooseEvent: function() {
  1169.      var searchvalue = $('#eac-container-lastname').find('li.selected .eac-item').text();
  1170.  
  1171.      $("#lastnamehidden").val(searchvalue).trigger('change');
  1172.  
  1173.  if($('#lastname').val().length === 0) {
  1174.    $('#btnSearch').attr('disabled', 'disabled');
  1175.    $('#tooltip-wrapper').addClass('tooltip-disabled');
  1176.    $('#btnSearch').addClass('btn-secondary');
  1177.      $('#btnSearch').removeClass('btn-primary');
  1178.  }
  1179.  else {
  1180.    if (!searchvalue == '') {
  1181.      $('#btnSearch').removeAttr('disabled');
  1182.      $('#btnSearch').removeClass('btn-secondary');
  1183.      $('#btnSearch').addClass('btn-primary');
  1184.      $('#tooltip-wrapper').removeClass('tooltip-disabled');
  1185.    } else {
  1186.      $('#btnSearch').attr('disabled','disabled');
  1187.      $('#btnSearch').addClass('btn-secondary');
  1188.      $('#btnSearch').removeClass('btn-primary');
  1189.      $('#tooltip-wrapper').addClass('tooltip-disabled');
  1190.    }
  1191.  }
  1192.    },
  1193.     onShowListEvent: function() {
  1194.            //$('.easy-autocomplete-container').addClass('open-list');
  1195.            //$('#lastname').addClass('open-list-input');
  1196.            $('.form-control').addClass('easy-select-styled')
  1197.            $('.form-control').addClass('active')
  1198.            //$(".form-control").css("border-radius", "8px 8px 0 0 !important")
  1199.     },
  1200.  
  1201.     onHideListEvent: function() {
  1202.      $('.form-control').removeClass('easy-select-styled')
  1203.      $('.form-control').removeClass('active')
  1204.  
  1205.      var searchvalue = $('#eac-container-lastname').find('li.selected .eac-item').text();
  1206.      $("#lastnamehidden").val(searchvalue).trigger('change');
  1207.  
  1208.  if($('#lastname').val().length === 0) {
  1209.    $('#btnSearch').attr('disabled', 'disabled');
  1210.    $('#tooltip-wrapper').addClass('tooltip-disabled');
  1211.    $('#btnSearch').addClass('btn-secondary');
  1212.      $('#btnSearch').removeClass('btn-primary');
  1213.  } else {
  1214.    $('#btnSearch').removeAttr('disabled');
  1215.      $('#btnSearch').removeClass('btn-secondary');
  1216.      $('#btnSearch').addClass('btn-primary');
  1217.      $('#tooltip-wrapper').removeClass('tooltip-disabled');
  1218.    }
  1219.    },
  1220.  }
  1221.  
  1222. };
  1223.  
  1224. $("#lastname").easyAutocomplete(options);
  1225. $('.easy-autocomplete').addClass('form-floating');
  1226. $("<label style='color: #212529;font-size: 1rem;' for='lastname'>Condition, procedure, or doctor's name</label>").insertAfter("#lastname");
  1227. $("#lastname").on('keyup', function (e) {
  1228.    var searchvalue = $('#eac-container-lastname').find('li:first .eac-item').text();
  1229.    if (e.key === 'Enter' || e.keyCode === 13) {
  1230.        $("#lastnamehidden").val(searchvalue).trigger('change');
  1231.    }
  1232.  });
  1233.  
  1234.  $('#lastnamehidden').on('change', function() {
  1235.  
  1236.  if(this.value != '') {
  1237.    $('#btnSearch').removeAttr('disabled');
  1238.    $('#btnSearch').removeClass('btn-secondary');
  1239.    $('#btnSearch').addClass('btn-primary');
  1240.    $('#tooltip-wrapper').removeClass('tooltip-disabled');
  1241.  } else {
  1242.    $('#btnSearch').attr('disabled','disabled');
  1243.    $('#btnSearch').addClass('btn-secondary');
  1244.    $('#btnSearch').removeClass('btn-primary');
  1245.    $('#tooltip-wrapper').addClass('tooltip-disabled');
  1246.  }
  1247. });
  1248.  
  1249. });
  1250.  
  1251. </script>
  1252.  
  1253. <script>
  1254. $(function() {
  1255.  
  1256. //fetch insurance json
  1257. fetch("https://www.hss.edu/insurance-list-json.json")
  1258. .then(response => response.json())
  1259. .then(data => {
  1260. console.log(data);
  1261.  
  1262. //create main insurance select
  1263. let ins = document.getElementById('Insurance');
  1264. for (let i = 0; i < data.insurance.length; i++) {
  1265. // if (data.insurance[i]['pt'] === 'yes') {
  1266. if (data.insurance[i]['md'] === 'yes') {
  1267. // POPULATE SELECT ELEMENT FOR INS.
  1268. ins.innerHTML = ins.innerHTML +
  1269. '<option insname="' + data.insurance[i]['insname'] + '" payor="' + data.insurance[i]['payor'] + '">' + data.insurance[i]['insname-toshow'] + '</option>';
  1270. }
  1271. }
  1272.  
  1273. //switch to custom dropbox
  1274.  
  1275.    $('select').each(function() {
  1276.        var $this = $(this);
  1277.        var selectType, initialText;
  1278.  
  1279.        if ($this.attr('id') === 'Insurance') {
  1280.            selectType = 'Insurance';
  1281.            initialText = 'Insurance';
  1282.        } else if ($this.attr('id') === 'Language2') {
  1283.            selectType = 'Language';
  1284.            initialText = 'Language';
  1285.        } else {
  1286.            selectType = $this.attr('id') === 'Specialty2' ? 'Specialty' : 'Location'; // Determine if it's a Specialty or Location select
  1287.            initialText = $this.attr('id') === 'Specialty2' ? 'Specialty' : 'Location (NY, NJ, CT, FL)'; // Determine initial text based on select type
  1288.        }
  1289.  
  1290.        $this.addClass('select-hidden');
  1291.        $this.wrap('<div class="select"></div>');
  1292.        $this.after('<div class="select-styled"><div class="floating-label">' + (selectType === 'Insurance' ? 'Insurance <span class="location-label">(Optional)</span>' : initialText) + '</div><span class="selected-option"></span></div>'); // Set initial text based on select type
  1293.  
  1294.        var $styledSelect = $this.next('div.select-styled');
  1295.        var $floatingLabel = $styledSelect.find('.floating-label');
  1296.        var $selectedOption = $styledSelect.find('.selected-option');
  1297.        var $locationLabel = $styledSelect.find('.location-label');
  1298.  
  1299.        var $list = $('<ul />', {
  1300.            'class': 'select-options'
  1301.        }).insertAfter($styledSelect);
  1302.      
  1303.  
  1304.        if ($this.attr('id') === 'Insurance') {
  1305.            $this.children('option').each(function() {
  1306.                var optionText = $(this).text();
  1307.                var optionValue = $(this).val();
  1308.                var $option = $('<li rel="' + optionValue + '">' + optionText + '<span class="checkmark"></span></li>');
  1309.                $list.append($option);
  1310.                if ($(this).is(':selected')) {
  1311.                    $option.addClass('is-selected');
  1312.                    if ($(this).val() !== '') { // Check if it's not 'Show all'
  1313.                        $selectedOption.text(''); // Set the selected option text initially empty
  1314.                        $selectedOption.show(); // Show the selected option text
  1315.                        if (selectType === 'Location') {
  1316.                            $locationLabel.hide(); // Hide the location label when an option is selected
  1317.                        }
  1318.                insuranceValues    }
  1319.                }
  1320.            });
  1321.        }
  1322.  
  1323.        var $listItems = $list.children('li').not('.optgroup');
  1324.  
  1325.        $styledSelect.click(function(e) {
  1326.            e.stopPropagation();
  1327.            var isActive = $(this).hasClass('active'); // Check if it's already active
  1328.            $('.select-styled.active').removeClass('active').next('ul.select-options').hide(); // Remove active class from other select-styled divs
  1329.            if (!isActive) {
  1330.                $(this).addClass('active').next('ul.select-options').show(); // Toggle active class and show options
  1331.            }
  1332.        });
  1333.  
  1334.       $listItems.click(function(e) {
  1335.    e.stopPropagation();
  1336.    var selectedValue = $(this).attr('rel');
  1337.    var selectedText = $(this).text();
  1338.    $selectedOption.text(selectedText); // Set the selected option text
  1339.    $selectedOption.show(); // Show the selected option text
  1340.    $floatingLabel.show(); // Show the floating label when an option is selected
  1341.    $this.val(selectedValue);
  1342.    $list.find('li.is-selected').removeClass('is-selected');
  1343.    $(this).addClass('is-selected');
  1344.    $list.hide();
  1345.    $styledSelect.removeClass('active'); // Remove active class from the select-styled div
  1346.  
  1347.    // Check if there is text inside .selected-option
  1348.    if ($selectedOption.text().trim() !== '') {
  1349.        $styledSelect.addClass('has-selected-option');
  1350.    } else {
  1351.        $styledSelect.removeClass('has-selected-option');
  1352.    }
  1353.  
  1354.    // Hide location label when an option is selected for Location select
  1355.    if (selectType === 'Location') {
  1356.        $locationLabel.hide();
  1357.    }
  1358.  
  1359.    // Trigger change event for the original select element
  1360.    $this.trigger('change');
  1361. });
  1362.  
  1363.        // Update text when 'Show all' is selected
  1364.        $listItems.filter('[rel=""]').click(function() {
  1365.            $selectedOption.text('Showing all');
  1366.            $selectedOption.show(); // Show the selected option text
  1367.            $floatingLabel.show(); // Show the floating label when 'Show all' is selected
  1368.            $styledSelect.removeClass('active'); // Remove active class from the select-styled div
  1369.  
  1370.            // Check if there is text inside .selected-option
  1371.            if ($selectedOption.text().trim() !== '') {
  1372.                $styledSelect.addClass('has-selected-option');
  1373.            } else {
  1374.                $styledSelect.removeClass('has-selected-option');
  1375.            }
  1376.  
  1377.        });
  1378.  
  1379.        var selectedOption = $this.find('option:selected');
  1380.        if (selectedOption.attr('insname')) {
  1381.            var selectedText = selectedOption.attr('insname-toshow') || selectedOption.text();
  1382.            $styledSelect.find('.selected-option').text(selectedText);
  1383.            $styledSelect.addClass('has-selected-option');
  1384.        }
  1385.  
  1386.  
  1387.    });
  1388.  
  1389.    $(document).click(function(event) {
  1390.        // Check if the clicked element is not part of the select-styled div or its options
  1391.        if (!$(event.target).closest('.select-styled').length && !$(event.target).closest('.select-options').length) {
  1392.            $('.select-styled.active').removeClass('active').next('ul.select-options').hide();
  1393.        }
  1394.    });
  1395.  
  1396.    //$(".select-options li:nth-last-child(2)").append("</hr>");
  1397.  
  1398. })
  1399. .catch(error => {
  1400. console.log('error', error);
  1401. });
  1402.  
  1403. });
  1404.  
  1405.  
  1406.  
  1407. </script>
  1409. <section class="page-section nopadding" style="margin-top:0px; margin-bottom:0px;" aria-labelledby="114707-full-width-content">
  1410. <div class="full_width_banner_wrapper_bg" style=" background-color:#fff; padding:0px 0 20px 0;">
  1412.  
  1413. <div class="container clearfix">  
  1415. <h3 class="new-home-h3" style="color:#fff;">Book your appointment today.</h3>
  1416.  
  1417. <div class="row">
  1418.  
  1419. <div class="col-md-3 left">
  1420. <div class="h3"><strong>Explore additional<br>HSS services</strong></div>
  1421. </div>
  1422.  
  1423. <div class="col-md-4 left offset-md-1">
  1424. <p class="m-0">Schedule an in-person appointment with a physicial therapist</p>
  1425. <a role="button" class="button-line button-resize mt-3 center" href="/find-a-physical-therapist.asp">Physical Therapy</a>
  1426. </div>
  1427.  
  1428. <div class="col-md-4 left">
  1429. <p class="m-0">We offer convenient same-day options for orthopedic care</p>
  1430. <a role="button" class="button-line button-resize mt-3 center" href="/hss-orthopedics-now.asp">Get Immediate Care</a>
  1431. </div>
  1432.  
  1433. </div>
  1434.  
  1436. </div>
  1437.  
  1438. </div>
  1439. <div aria-hidden="true" id="114707-full-width-content" class="banner-offscreen">Copy of Appointments</div>
  1440. </section>
  1441.  
  1443. <section class="page-section nopadding" style="margin-top:0px; margin-bottom:0px;" aria-labelledby="114709-full-width-content">
  1444. <div class="full_width_banner_wrapper_bg" style=" background-color:#fff; padding:50px 0 50px 0;">
  1446.  
  1447. <div class="container clearfix">  
  1449.  
  1450. <div class="container py-5" id="home-badges" style="background-color:#ecf1f4">
  1451. <div class="align-items-center h-100 justify-content-center mx-0 px-0 row">
  1452. <div class="col-12 col-md-8">
  1453. <div class="mx-0 px-0 row">
  1454. <div class="center col-4"><a class="badge-img" href="https://health.usnews.com/best-hospitals/area/ny/hospital-for-special-surgery-6212900/orthopedics" target="_blank"><img alt="U.S. News Best Hospitals Orthopedics badge" height="140" src="/images/corporate/Badge-Hospitals-Specialty_Orthopedics-year-2024-25.png" width="143" /></a>
  1455. <p class="mb-0">#1 in Orthopedics<br />
  1456. 15 Years in a Row</p>
  1457. </div>
  1458.  
  1459. <div class="center col-4"><a class="badge-img" href="https://health.usnews.com/best-hospitals/area/ny/hospital-for-special-surgery-6212900" target="_blank"><img alt="U.S. News Best Hospitals Rheumatology badge" height="140" src="/images/corporate/Badge-Hospitals-Specialty_Rheumatology-year-2024-25.png" width="143" /></a>
  1460.  
  1461. <p class="mb-0">A National Leader<br />
  1462. in Rheumatology</p>
  1463. </div>
  1464.  
  1465. <div class="center col-4"><a class="badge-img" href="https://health.usnews.com/best-hospitals/area/ny/hospital-for-special-surgery-new-york-PA6212900" target="_blank"><img alt="Best Children's Hospital for Orthopedics" height="140" src="/images/corporate/Badge-Childrens-Orthopedics-2024-25.png" width="143" /></a>
  1466.  
  1467. <p class="mb-0">Best Children's Hospital for<br />
  1468. Orthopedics in NY - NJ - CT</p>
  1469. </div>
  1470. </div>
  1471. </div>
  1472.  
  1473. <div class="col-12 col-md-4">
  1474. <div class="h4"><strong>Awards and Recognition</strong></div>
  1475.  
  1476. <p>We're proud to share the remarkable accomplishments that have contributed to our hospital's reputation for excellence.</p>
  1477. <a class="arrow-icon-forward si-text-color" href="https://www.hss.edu/ratings-rankings-recognition.asp">See all our rankings</a></div>
  1478. </div>
  1479. </div>
  1480.  
  1481. </div>
  1482.  
  1483. </div>
  1484. <div aria-hidden="true" id="114709-full-width-content" class="banner-offscreen">Badges 2024</div>
  1485. </section>
  1486.  
  1487. <script src="https://player.vimeo.com/api/player.js"></script>
  1488.  
  1489. <style>
  1490. .video-play-button {
  1491.    position: relative;
  1492.    z-index: 1;
  1493.    /*top: 100%;
  1494.    left: 61%;
  1495.    transform: translateX(-50%) translateY(-50%);
  1496.    box-sizing: content-box;*/
  1497.    display: block;
  1498.    width: 15px;
  1499.    height: 12px;
  1500.    background: #0074bc;
  1501.    border-radius: 50%;
  1502.    padding: 9px 24px 18px 28px;
  1503.    margin: 30px auto;
  1504. }
  1505. .video-play-button:before {
  1506.    content: "";
  1507.    position: absolute;
  1508.    z-index: 0;
  1509.    left: 50%;
  1510.    top: 50%;
  1511.    transform: translateX(-50%) translateY(-50%);
  1512.    display: block;
  1513.    width: 75px;
  1514.    height: 75px;
  1515.    background: #0074bc;
  1516.    border-radius: 50%;
  1517.    animation: pulse-border 1500ms ease-out infinite;
  1518. }
  1519.  
  1520. .video-play-button:after {
  1521.    content: "";
  1522.    position: absolute;
  1523.    z-index: 1;
  1524.    left: 50%;
  1525.    top: 50%;
  1526.    transform: translateX(-50%) translateY(-50%);
  1527.    display: block;
  1528.    width: 70px;
  1529.    height: 70px;
  1530.    background: #0074bc;
  1531.    border-radius: 50%;
  1532.    transition: all 200ms;
  1533.    border: solid 4px #fff;
  1534. }
  1535.  
  1536.  
  1537. .video-play-button span {
  1538.    display: block;
  1539.    position: relative;
  1540.    z-index: 3;
  1541.    width: 0;
  1542.    height: 0;
  1543.    border-left: 18px solid #fff;
  1544.    border-top: 10px solid transparent;
  1545.    border-bottom: 12px solid transparent;
  1546.    margin: -5px 0 0 -7px;
  1547.    cursor: pointer;
  1548. }
  1549.  
  1550. @keyframes pulse-border {
  1551.  0% {
  1552.    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
  1553.    opacity: 1;
  1554.  }
  1555.  100% {
  1556.    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
  1557.    opacity: 0;
  1558.  }
  1559. }
  1560. /*
  1561. *
  1562. * ==========================================
  1563. * FOR DEMO PURPOSE
  1564. * ==========================================
  1565. *
  1566. */
  1567. .play-button-size-color {
  1568.   color: #000;
  1569.   position: absolute;
  1570.   z-index: 222;
  1571.   color: #fff;
  1572. }
  1573.  
  1574. .modal-dialog {
  1575.      max-width: 800px;
  1576.      margin: 30px auto;
  1577.  }
  1578.  
  1579. .modal-body {
  1580.  position:relative;
  1581.  padding:0px;
  1582. }
  1583. .btn-close {
  1584.  position:absolute;
  1585.  right:-30px;
  1586.  top:0;
  1587.  background-color:#fff;
  1588.  opacity: 1;
  1589. }
  1590.  
  1591. </style>
  1592.  
  1593.  
  1594. <div class="bg-image" style="
  1595.    background: url('/images/banners/caitlin-running-banner.jpg')  no-repeat;
  1596.    -webkit-background-size: cover;
  1597. -moz-background-size: cover;
  1598. -o-background-size: cover;
  1599. background-size: cover;
  1600.    /*background-color:#FFFFFF;*/
  1601.    height: 500px;
  1602.  ">
  1603. <!--<img class="bannerimg" alt="" src="/images/banners/caitlin-running-banner.jpg" />-->
  1604.  
  1605. <div class="h-100 d-flex align-items-center justify-content-center px-4">
  1606.  
  1607. <div class="row">
  1608.  
  1609. <div class="col-12 col-lg-5">
  1610.    <div class="center"><span style="font-weight:700;font-size:2em; text-shadow: 3px 3px 8px #333333; color:#fff; padding-right: 6px; line-height:1.2em;">After going elsewhere for surgery, Caitlin came to HSS to get her life back</span>
  1611.  
  1612. <style>
  1613. @media (max-width: 575.98px) {
  1614.    .bg-image {
  1615.        background-position: top center !important;
  1616.    }
  1617. }
  1618. </style></div>
  1619. </div>
  1620.  
  1621. <div class="col-12 col-lg-7">
  1622. <!-- <a class="video-play-button" href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-play play-button-size-color" viewBox="0 0 14 16">
  1623.  <path d="M10.804 8 5 4.633v6.734L10.804 8zm.792-.696a.802.802 0 0 1 0 1.392l-6.363 3.692C4.713 12.69 4 12.345 4 11.692V4.308c0-.653.713-.998 1.233-.696l6.363 3.692z"/>
  1624. </svg></a>-->
  1625.  
  1626.  
  1627. <a id="play-video" class="video-play-button btn-primary video-btn" data-bs-toggle="modal" data-src="https://player.vimeo.com/video/869714148?badge=0&amp;amp;autopause=0&amp;amp;player_id=0&amp;amp;app_id=58479&amp;autoplay=1" data-bs-target="#myModal"> <span></span></a>
  1628.  
  1629.  
  1630. </div>
  1631. </div>
  1632.  
  1633. </div>
  1634. </div>
  1635.  
  1636. <!-- Modal -->
  1637. <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  1638.  <div class="modal-dialog" role="document">
  1639.    <div class="modal-content">
  1640.  
  1641.      
  1642.      <div class="modal-body">
  1643.       <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></span>
  1644.        </button>        
  1645.        <!-- 16:9 aspect ratio -->
  1646. <div class="ratio ratio-16x9">
  1647.  <iframe class="embed-responsive-item" src="" id="video"  allowscriptaccess="always" allow="autoplay"></iframe>
  1648. </div>
  1649.        
  1650.        
  1651.      </div>
  1652.  
  1653.    </div>
  1654.  </div>
  1655. </div>
  1656. <!-- Modal end-->
  1657.  
  1658. <script>
  1659. $(document).ready(function() {
  1660.  
  1661. // Gets the video src from the data-src on each button
  1662.  
  1663. var $videoSrc;  
  1664. $('.video-btn').click(function() {
  1665.    $videoSrc = $(this).data( "src" );
  1666. });
  1667. console.log($videoSrc);
  1668.  
  1669. // when the modal is opened autoplay youtube  
  1670. //$('#myModal').on('shown.bs.modal', function (e) {
  1671.    
  1672. // set the video src to autoplay
  1673. //$("#video").attr('src',$videoSrc + "?autoplay=1&amp;modestbranding=1&amp;showinfo=0" );
  1674.  
  1675. //})
  1676.  
  1677. // stop playing the youtube video when close the modal
  1678. //$('#myModal').on('hide.bs.modal', function (e) {
  1679.    // stop video
  1680.    //$("#video").attr('src',$videoSrc);
  1681. //})
  1682.  
  1683. //auto vimeo player
  1684. $('#myModal').on('shown.bs.modal', function () {
  1685.    $("#video").attr('src',$videoSrc + "?autoplay=1&amp;modestbranding=1&amp;showinfo=0" );
  1686.    var vimeoiframe = document.getElementById("video");
  1687.    var vimeoplayer = new Vimeo.Player(vimeoiframe);
  1688. vimeoplayer.play();
  1689. })
  1690.  
  1691. $('#myModal').on('hidden.bs.modal', function () {
  1692. //$("#video").attr('src',$videoSrc);
  1693. //var iframe = document.querySelector('iframe');
  1694.    //var player = new Vimeo.Player(iframe);
  1695. var vimeoiframe = document.getElementById("video");
  1696.    var vimeoplayer = new Vimeo.Player(vimeoiframe);
  1697. vimeoplayer.pause();
  1698. })
  1699.  
  1700.    
  1701. // document ready  
  1702. });
  1703.  
  1704. </script>    
  1705. <div class="clear"></div>
  1707. <section class="section-offers" class="page-section nopadding" aria-label="Back in the Game Patient Stories">
  1708. <div style="background-color:#f9f9f9; max-height: 400px;height: auto;">
  1710.  
  1711. <div style="z-index:33; position:relative; width:100%;  padding:40px 0 40px 0;">
  1712. <script>
  1713.    $(document).ready(function () {
  1714.        var HSS_BITG_WIDGET_DEBUG = true; var SERVER = ""; //Serve widgets from the same server hosting this html file //~ var SERVER="https://backinthegame.hss.edu"; //~ var SERVER="https://backinthegame.hss.edu";
  1715.    });
  1716. </script>
  1717. <!--
  1718. <div class="utilitymodule"> <div class="utilitymodule-body"> <div class="bitg-widget-allstories"></div>
  1719. -->
  1720.  
  1721. <div class="container" style="margin:0 auto;">
  1722.    <div class="row">
  1723.  
  1724.        <div class="col-md-6">
  1725.            <div class="bitg-widget-allstories"></div>
  1726.        </div>
  1727.  
  1728.        <div class="col-md-6">
  1729.            <div class="row">
  1730.                <div class="col-md-11 offset-md-1 pt-md-5">
  1731.                    <h3 class="new-home-h3">Our patients say it best.</h3>
  1732.                    <p class="p-resize">We receive consistently high ratings from our patients for the quality
  1733.                        of our doctors and our hospital. More than 3,000 have shared their experience in their
  1734.                        own words. Search stories by condition, doctor, hometown, or even favorite activity.</p>
  1735.  
  1736.                    <a class="p-resize" href="https://backinthegame.hss.edu/" aria-label="Read more patient stories"
  1737.                        onclick="ga('send', 'event', 'Home2020v1', 'Click', 'Read-Stories');"><strong>Read their
  1738.                            stories</strong></a>
  1739.                </div>
  1740.            </div>
  1741.        </div>
  1742.    </div>
  1743. </div>
  1744.  
  1745.  
  1746. <script>
  1747.    $(document).ready(function () {
  1748.        $('<script/>').attr('src', "https://backinthegame.hss.edu/api/widget.php?format=jsonp-fancy&n=6&all=1&sel=.bitg-widget-allstories").appendTo($('body'));
  1749.    });
  1750. </script>
  1751.  
  1752. </div>
  1753. </div>
  1754.  
  1755.  
  1756. <style>
  1757.    .bitg-widget {
  1758.        /* max-width: 200px; */
  1759.        margin: 0 auto;
  1760.    }
  1761.  
  1762.    .bitg-widget-grid {
  1763.        /* text-align: center; */
  1764.        line-height: 0;
  1765.        */
  1766.    }
  1767.  
  1768.    .bitg-widget-link {
  1769.        display: inline-block;
  1770.        /* width: 30%; */
  1771.        /* margin: 2px 1.5%; */
  1772.        /* Center small images */
  1773.        vertical-align: middle;
  1774.        width: auto;
  1775.    }
  1776.  
  1777.    .bitg-widget-link img {
  1778.        border: 0 none;
  1779.        width: 100%;
  1780.        /* max-width: 62px; max-height: 75px; */
  1781.    }
  1782.  
  1783.    .bitg-widget-allstories {
  1784.        /* font-size: 12px; */
  1785.    }
  1786.  
  1787.    .bitg-widget-allstories .bitg-widget-grid,
  1788.    .bitg-widget-allstories .bitg-widget-cta {
  1789.        max-width: 480px;
  1790.        width: auto;
  1791.        /*height: 320px;*/
  1792.        display: block;
  1793.        float: left;
  1794.        /* margin-right: 100px; */
  1795.    }
  1796.  
  1797.    .bitg-widget-allstories .bitg-widget-cta {
  1798.        padding-top: 70px;
  1799.        margin-left: 100px;
  1800.    }
  1801.  
  1802.    .bitg-widget-allstories .bitg-widget-cta * {
  1803.        color: #000;
  1804.        text-align: center;
  1805.    }
  1806.  
  1807.    .bitg-widget-allstories .bitg-widget-cta-inner {
  1808.        vertical-align: middle;
  1809.        display: none;
  1810.    }
  1811.  
  1812.    .bitg-widget-allstories a {
  1813.        text-decoration: none;
  1814.    }
  1815.  
  1816.    .bitg-widget-allstories .bitg-widget-link-fancy,
  1817.    .bitg-widget-allstories .bitg-widget-link-fancy:visited {
  1818.        margin: 0;
  1819.        padding: 0;
  1820.        width: 160px;
  1821.        height: 160px;
  1822.        display: inline-block;
  1823.        /* display: block; float: left; */
  1824.        background-size: 160px auto;
  1825.        background-position: top;
  1826.        background-repeat: no-repeat;
  1827.    }
  1828.  
  1829.    .bitg-widget-allstories .bitg-widget-sub-heading {
  1830.        font-family: "Benton Sans Light", arial, sans-serif;
  1831.        font-size: 1.25rem;
  1832.        font-weight: light;
  1833.        line-height: 2.2em;
  1834.    }
  1835.  
  1836.    .bitg-widget-allstories .bitg-widget-heading {
  1837.        font-family: "Benton Sans", arial, sans-serif;
  1838.        font-size: 2.5rem;
  1839.        font-weight: bold;
  1840.        line-height: 1.2em;
  1841.    }
  1842.  
  1843.    .bitg-widget-allstories .bitg-widget-number {
  1844.        font-family: "Benton Sans", arial, sans-serif;
  1845.        font-size: 3.5rem;
  1846.        font-weight: bold;
  1847.    }
  1848.  
  1849.    .bitg-widget-allstories .bitg-widget-button {
  1850.        font-family: "Benton Sans", arial, sans-serif;
  1851.        font-size: 1.25rem;
  1852.        font-weight: normal;
  1853.        margin-top: 1em;
  1854.    }
  1855.  
  1856.    .bitg-widget-allstories .bitg-widget-button a {
  1857.        color: #0074BC;
  1858.    }
  1859.  
  1860.    .bitg-widget-allstories .bitg-widget-link-fancy {
  1861.        position: relative;
  1862.    }
  1863.  
  1864.    .bitg-widget-allstories .bitg-widget-link-fancy .bitg-widget-overlay {
  1865.        width: 100%;
  1866.        height: 100%;
  1867.        position: absolute;
  1868.        top: 0;
  1869.        left: 0;
  1870.        /* transition: all 0.4s ease-in; */
  1871.        transition: all 0.2s ease-in;
  1872.        opacity: 0;
  1873.        color: #ffffff;
  1874.        text-align: center;
  1875.        font-family: "Benton Sans", arial, sans-serif;
  1876.        font-size: 1rem;
  1877.        font-weight: normal;
  1878.        line-height: normal;
  1879.    }
  1880.  
  1881.    .bitg-widget-allstories .bitg-widget-link-fancy:hover .bitg-widget-overlay {
  1882.        background-color: rgba(0, 0, 0, 0.7);
  1883.        opacity: 1;
  1884.    }
  1885.  
  1886.    .bitg-widget-allstories .bitg-widget-link-fancy .bitg-widget-overlay div {
  1887.        margin: 1em;
  1888.    }
  1889.  
  1890.    .bitg-widget-allstories .bitg-widget-link-fancy .bitg-widget-overlay img {
  1891.        width: 20px;
  1892.        margin-right: 0.5em;
  1893.    }
  1894.  
  1895.    .utilitymodule {
  1896.        border-bottom: 0px solid #DFE1DF !important;
  1897.        padding: .5em .25em .25em .25em;
  1898.        margin-bottom: 1.4em;
  1899.        color: #666666;
  1900.        line-height: 1.4em;
  1901.    }
  1902.  
  1903.    .bitg-content-padding {
  1904.        padding: 6% 0 6% 0;
  1905.    }
  1906.  
  1907.    @media screen and (max-width: 1200px) {
  1908.        .bitg-widget-allstories .bitg-widget-cta {
  1909.            margin-left: 25px;
  1910.            padding-top: 30px;
  1911.        }
  1912.  
  1913.        .bitg-widget-allstories .bitg-widget-link-fancy,
  1914.        .bitg-widget-allstories .bitg-widget-link-fancy:visited {
  1915.            width: 140px;
  1916.            height: 140px;
  1917.            background-size: 140px auto;
  1918.        }
  1919.    }
  1920.  
  1921.  
  1922.    @media screen and (max-width: 998px) {
  1923.  
  1924.        .bitg-widget-allstories .bitg-widget-link-fancy,
  1925.        .bitg-widget-allstories .bitg-widget-link-fancy:visited {
  1926.            width: 100px;
  1927.            height: 100px;
  1928.            background-size: 100px auto;
  1929.        }
  1930.  
  1931.        .bitg-content-padding {
  1932.            padding: 0;
  1933.        }
  1934.    }
  1935.  
  1936.    @media screen and (max-width: 767px) {
  1937.        .bitg-content-padding {
  1938.            padding: 0;
  1939.        }
  1940.  
  1941.        .bitg-widget-allstories {
  1942.            display: none;
  1943.        }
  1944.    }
  1945.  
  1946.    @media screen and (max-width: 480px) {
  1947.  
  1948.        .bitg-widget-allstories .bitg-widget-link-fancy,
  1949.        .bitg-widget-allstories .bitg-widget-link-fancy:visited {
  1950.            width: 160px;
  1951.            height: 160px;
  1952.            background-size: 160px auto;
  1953.        }
  1954.    }
  1955.  
  1956.  
  1957.    .bitg-widget-allstories .hvr-icon-forward:before {
  1958.        display: none;
  1959.    }
  1960.  
  1961.    @media screen and (max-width: 1200px) {
  1962.        .section {
  1963.            margin: 40px 0;
  1964.        }
  1965.    }
  1966.  
  1967.    a.bitg-widget-link-fancy {
  1968.        /*border: 2px dotted black;*/
  1969.        border:0px;
  1970.    }
  1971. </style>
  1972. </div>
  1973.  
  1974. </div>
  1975. <div aria-hidden="true" id="section-name-97448" class="banner-offscreen">BITG widget 2020 section</div>
  1976. </section>
  1977.  
  1979. <div class="clear"></div>
  1980.  
  1981. <div id="reliability_banner" class="banner">
  1982.  <div class="container">
  1983.    <div class="row g-0">
  1984.      <div class="col-12 col-md-6 text-white bg-dark bg-opacity-75 p-4 p-lg-5 mb-3 mb-md-0">
  1985.        <h2 class="new-home-h2">Expertise you can trust.</h2>
  1986.        <p>From diagnosis to surgery, our top ranked orthopedic and rheumatology specialists can explain your treatment options and provide the care you need.</p>
  1987.        <p>
  1988.          <a aria-label="Learn why choose HSS" style="text-decoration:underline !important;" class="white p-resize" href="https://www.hss.edu/reasons-to-choose-hss.asp" onclick="ga('send', 'event', 'Home2020v2', 'Click', 'Why Choose');"><strong>Learn why you should choose HSS</strong></a><br>
  1989.          <a aria-label="Top rankings" style="text-decoration:underline !important;" class="white p-resize" href="https://www.hss.edu/ratings-rankings-recognition.asp" onclick="ga('send', 'event', 'Home2020v2', 'Click', 'rankings');"><strong>See our top rankings</strong><br>
  1990.            <a aria-label="Hospital reliability" style="text-decoration:underline !important;" class="white p-resize" href="https://www.hss.edu/reliability-compare-hospitals.htm" onclick="ga('send', 'event', 'Home2020v2', 'Click', 'reliability');"><strong>Compare hospital reliability</strong></a></p>
  1991.      </div>
  1992.    </div>
  1993.  </div>
  1994. </div>
  1995.  
  1996.  
  1997. <section aria-labelledby="section-name-82719">
  1999. <div class="content-wrap" style="padding: 0 !important; margin-top:40px; margin-bottom:40px;">
  2000. <div class="container clearfix">    
  2002. <div class="pagetitle-home"><h3 class="new-home-h3" id="82719" style="margin-bottom:20px;">Highlights</h2></div>
  2003.            
  2004.            <div class="more-btn more-btn-float-right more-btn-desktop">
  2005.                <a href="https://news.hss.edu" class="si-text-color arrow-icon-forward" aria-label="View More Newsroom - Desktop"
  2006. onclick="ga('send', 'event', 'Home2020v1', 'Click', 'More-Newsroom');"><strong>View more in our newsroom</strong></a>
  2007.            </div>
  2008. <!-- News Items ============================================= -->
  2009. <div id="posts" class="post-grid main-highlight NewsContent">
  2011. <div class="col_one_third">
  2012.   <div class="mainNews-item clearfix">
  2013.    
  2014.     <a href="https://news.hss.edu/hospital-for-special-surgery-named-official-hospital-and-partner-of--st-johns-university-athletics/" >
  2017. <div class="newslabel">News</div>
  2019. <div class="mainNews-image">
  2020. <img class="lozad" data-src="/images/banners/HSS-x-St_rdax_80s.jpg"  alt="" data-index="1">
  2021. <noscript><img src="/images/banners/HSS-x-St_rdax_80s.jpg"  alt="" data-index="1" /></noscript>
  2022. <div class="mainNews-overlay">
  2023. <div class="news-inside-center divcenter">
  2024. <div style="text-align:left; color:#fff; font-size:.95em; padding:20px 10px 0 15px;">
  2025.    <p>HSS will provide world-class medical services to St. John’s University athletes, including on-site medical coverage for the men’s and women’s basketball and soccer programs, as well as men’s lacrosse. HSS physiatrist James F. Wyss, MD, PT, and sports medicine physician Osric S. King, MD, will serve as co-head team physicians.</p>
  2026. </div>
  2027. <span class="text rounded thin_bold button-primary pure-button">Learn more<img src="/images/icons/banner-arrow2.gif" alt="Graphic: learn more" style="width:12px; height:auto; display:inline-block; margin-left:2px;"></span>
  2028. </div>
  2029. </div>
  2030. </div>
  2031. <div class="mainNews-desc mainNews-desc-bg">
  2033.                        <div class="news-title"><p class="p-resize">HSS named official hospital and partner of St. John’s University Athletics</p>
  2035. </div>
  2036. </div>
  2037. </a>
  2040.   </div>
  2041. </div>
  2043. <div class="col_one_third">
  2044.   <div class="mainNews-item clearfix">
  2045.    
  2046.     <a href="https://news.hss.edu/hss-orthopedics-with-stamford-health--opens-westport-ct-outpatient-center/" >
  2049. <div class="newslabel">News</div>
  2051. <div class="mainNews-image">
  2052. <img class="lozad" data-src="/images/banners/240930-236_rdax_80s.JPG"  alt="" data-index="1">
  2053. <noscript><img src="/images/banners/240930-236_rdax_80s.JPG"  alt="" data-index="1" /></noscript>
  2054. <div class="mainNews-overlay">
  2055. <div class="news-inside-center divcenter">
  2056. <div style="text-align:left; color:#fff; font-size:.95em; padding:20px 10px 0 15px;">
  2057.    <p>The nearly 10,000-square-foot facility expands the footprint of the HSS and Stamford Health Collaboration, offering orthopedic care in hand and upper extremities, joint replacement, physiatry, spine, and sports medicine (both surgical and non-surgical). Foot and ankle services will be available later this fall.</p>
  2058. </div>
  2059. <span class="text rounded thin_bold button-primary pure-button">Learn more<img src="/images/icons/banner-arrow2.gif" alt="Graphic: learn more" style="width:12px; height:auto; display:inline-block; margin-left:2px;"></span>
  2060. </div>
  2061. </div>
  2062. </div>
  2063. <div class="mainNews-desc mainNews-desc-bg">
  2065.                        <div class="news-title"><p class="p-resize">HSS Orthopedics with Stamford Health opens Westport CT Outpatient Center</p>
  2067. </div>
  2068. </div>
  2069. </a>
  2072.   </div>
  2073. </div>
  2075. <div class="col_one_third">
  2076.   <div class="mainNews-item clearfix">
  2077.    
  2078.     <a href="https://news.hss.edu/the-united-federation-of-teachers-welfare-fund-partners-with-hospital-for-special-surgery-to-offer-hss-perform-guided-access-to-musculoskeletal-care/" >
  2081. <div class="newslabel">News</div>
  2083. <div class="mainNews-image">
  2084. <img class="lozad" data-src="/images/banners/Female-in-gym-on-bosu-ball-with-trainer_rdax_80s.jpg"  alt="" data-index="1">
  2085. <noscript><img src="/images/banners/Female-in-gym-on-bosu-ball-with-trainer_rdax_80s.jpg"  alt="" data-index="1" /></noscript>
  2086. <div class="mainNews-overlay">
  2087. <div class="news-inside-center divcenter">
  2088. <div style="text-align:left; color:#fff; font-size:.95em; padding:20px 10px 0 15px;">
  2089.    <p>HSS Perform, a program for employers and unions will provide UFT Welfare Fund members and their families guided access to specialists in orthopedics and rheumatology. HSS Perform includes HSS Care Concierge, a dedicated team to connect members with world-class specialists across all HSS locations.</p>
  2090. </div>
  2091. <span class="text rounded thin_bold button-primary pure-button">Learn more<img src="/images/icons/banner-arrow2.gif" alt="Graphic: learn more" style="width:12px; height:auto; display:inline-block; margin-left:2px;"></span>
  2092. </div>
  2093. </div>
  2094. </div>
  2095. <div class="mainNews-desc mainNews-desc-bg">
  2097.                        <div class="news-title"><p class="p-resize">HSS partners with The United Federation of Teachers (UFT) Welfare Fund to offer HSS Perform</p>
  2099. </div>
  2100. </div>
  2101. </a>
  2104.   </div>
  2105. </div>
  2107. </div>
  2108. <div class="more-btn more-btn-mobile">
  2109.                <a href="https://news.hss.edu" class="si-text-color arrow-icon-forward p-resize" onclick="ga('send', 'event', 'Home2020v1', 'Click', 'More-Newsroom');"><strong>View more in our newsroom</strong></a>
  2110.                        </div>
  2111. </div>
  2112.            </div>
  2113.        <div aria-hidden="true" id="section-name-82719" class="banner-offscreen">Highlights section</div>    
  2114. </section><!-- #content end -->
  2115.  
  2116. <div class="clear"></div>
  2117. <style>
  2118.  
  2119. .NewsContent {
  2120.    margin-top:40px;
  2121. }
  2122.  
  2123. .newslabel {
  2124.    background-color: #324153;
  2125.    padding: 0 3px 0 3px;
  2126.    position: absolute;
  2127.    z-index: 33;
  2128.    margin: 10px 0 0 -10px;
  2129.    color:#fff;
  2130.    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.19);
  2131. }
  2132.  
  2133. .eventlabel {
  2134.    background-color: #025888;
  2135.    padding: 0 3px 0 3px;
  2136.    position: absolute;
  2137.    z-index: 33;
  2138.    margin: 10px 0 0 -10px;
  2139.    color:#fff;
  2140.    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.19);
  2141. }
  2142.  
  2143.  
  2144. .NewsContent .col_one_third:last-of-type, .NewsContent .col_one_fourth:last-of-type, .NewsContent .col_one_fifth:last-of-type  {
  2145.   margin-right: 0 !important;    
  2146. }
  2148. .news-inside-center {
  2149.    position: absolute; top: 50%; transform: translate(0, -50%);
  2150. }
  2151.  
  2152. .mainNews-desc p {
  2153.    min-height: 0;
  2154.    height: auto;
  2155. }
  2156.  
  2157. .mainNews-desc {
  2158.    text-align: left;
  2159. }
  2160.  
  2161. .post-grid {
  2162.    margin-right: 0;
  2163. }
  2164.  
  2165. .post-grid .entry {
  2166.    float: left;
  2167.    /* width: 277px; */
  2168.    width: 570px;
  2169.    margin-right: 10px;
  2170.    margin-bottom: 10px;
  2171. }
  2172.  
  2173. @media screen and (max-width: 1200px) {
  2174. .post-grid .entry {
  2175.    width: 380px;
  2176. }
  2177. }
  2178.  
  2179. @media screen and (max-width: 1023px) {
  2180. .post-grid .entry {
  2181.    width: 570px;
  2182. }
  2183. }
  2184.  
  2185. @media screen and (max-width: 780px) {
  2186. .post-grid .entry {
  2187.    margin-bottom: 0;
  2188. }
  2189. }
  2190.  
  2191.  
  2192. .col_half {
  2193.    width: 48% !important;
  2194.    margin-right: 0 !important;
  2195.    margin-bottom: 0 !important;
  2196. }
  2197.  
  2198. .team-title {
  2199.    position: relative;
  2200.    /* padding-top: 20px; */
  2201.    max-height: 264px !important;
  2202.    background-color:#fff !important;
  2203. }
  2204.  
  2205. .mainNews-desc.mainNews-desc-bg {
  2206.    background: none !important;
  2207.    padding: 10px 0px 0px 0;
  2208. }
  2209.  
  2210. @media screen and (max-width: 480px) {
  2211. .mainNews-desc.mainNews-desc-bg {
  2212.    margin-left: -14px;
  2213.    margin-bottom: 30px !important;
  2214. }
  2215. }
  2216.  
  2217.  
  2218.  
  2219. .page_link {
  2220. display:none !important;  
  2221. }
  2222.  
  2223. .pagination > li:first-child > a, .pagination > li:first-child > span {
  2224.    margin-left: 0;
  2225.    border-bottom-left-radius: 0px;
  2226.    border-top-left-radius: 0px;
  2227. }
  2228.  
  2229. .pagination > li:last-child > a, .pagination > li:last-child > span {
  2230.    border-bottom-right-radius: 0px;
  2231.    border-top-right-radius: 0px;
  2232. }
  2233.  
  2234.  
  2235. .btn-link, .pagination > li > a, .pagination > li > span, .pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus {
  2236.    color: #164469;
  2237. }
  2238.    
  2239. .pagination > li > a, .pagination > li > span {
  2240.    position: relative;
  2241.    float: left;
  2242.    padding: 6px 12px;
  2243.    line-height: 1.42857143;
  2244.    text-decoration: none;
  2245.    color: #337ab7;
  2246.    background-color: #ffffff;
  2247.    border: 0px solid #dddddd;
  2248.    margin-left: -1px;
  2249. }
  2250.  
  2251. .btn-link, .pagination > li > a, .pagination > li > span, .pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus {
  2252.    color: #164469;
  2253.    background-color: #ffffff !important;
  2254. }
  2255.  
  2256. .no_more img {
  2257. opacity: 0.1;
  2258. }
  2259.  
  2260. @media only screen and (max-width: 480px){
  2261. #pagetitle-home h1, .pagetitle-home h1 {
  2262.    padding: 1.4em 0 .3em 0;
  2263. }
  2264. }
  2265.  
  2266. @media only screen and (max-width: 480px){
  2267. .mainNews-desc p:last-child {
  2268.    margin-bottom: 0;
  2269. }
  2270. }
  2271.  
  2272. .more-btn-float-right {
  2273.     float: right;
  2274.    right: 0;
  2275.    margin-top: -45px;  
  2276.    margin-right:5px;
  2277. }
  2278.  
  2279. @media (max-width: 479px) {
  2280. .more-btn-float-right {
  2281.    float: right;
  2282.    right: 0;
  2283.    margin-top: -38px;
  2284. }
  2285. }
  2286.  
  2287.  
  2288. @media only screen and (max-width: 768px){
  2289. .mainNews-desc.mainNews-desc-bg {
  2290.    margin: -10px 0 30px 0;
  2291. }
  2292. }
  2293.  
  2294. </style>
  2296.  
  2297.  
  2298. <section aria-labelledby="section-name-9166">
  2300. <div class="content-wrap" style="padding: 40px 0 !important; margin-top:0px; margin-bottom:0;background-color: #ecf1f4;">
  2301. <div class="container clearfix">    
  2303.            
  2304.            <div class="pagetitle-home" style="margin-bottom:20px;">
  2305.                <h3 class="mbfb-h3" id="9166" style="display:inline;">Move Better Feel Better</h3>
  2306.                <div class="mbfb-tagline">Advice to improve your movement, fitness, and overall health</div>
  2307.            </div>
  2308.  
  2309.            
  2310.            <div class="more-btn more-btn-float-right more-btn-desktop">
  2311.                <a href="https://www.hss.edu/movebetter.htm" class="si-text-color arrow-icon-forward" aria-label="View More Move Better Feel Better - Desktop"
  2312. onclick="ga('send', 'event', 'Home2020v1', 'Click', 'More-Move-Better-Feel-Better');"><strong>View more</strong></a>
  2313.            </div>
  2314. <!-- News Items ============================================= -->
  2315. <div id="posts" class="post-grid main-highlight NewsContent">
  2317. <div class="col_one_third">
  2318.   <div class="mainNews-item clearfix">
  2319.    
  2320.     <a href="/article_women-and-arthritis.asp" >
  2323. <div class="mainNews-image">
  2324. <img class="lozad" data-src="/images/banners/women-oa-345x345_rdax_80s.jpg"  alt="" data-index="1">
  2325. <noscript><img src="/images/banners/women-oa-345x345_rdax_80s.jpg"  alt="" data-index="1" /></noscript>
  2326. <div class="mainNews-overlay">
  2327. <div class="news-inside-center divcenter">
  2328. <div style="text-align:left; color:#fff; font-size:.95em; padding:20px 10px 0 15px;">
  2329.    <p>Women may be more likely to develop the disease for reasons they can control, and some they can’t.</p>
  2330. </div>
  2331. <span class="text rounded thin_bold button-primary pure-button">Read More<img src="/images/icons/banner-arrow2.gif" alt="Graphic: learn more" style="width:12px; height:auto; display:inline-block; margin-left:2px;"></span>
  2332. </div>
  2333. </div>
  2334. </div>
  2335. <div class="mainNews-desc mainNews-desc-bg">
  2337.                        <div class="news-title"><p class="p-resize">Why Women Are at Higher Risk for Getting Arthritis</p>
  2339. </div>
  2340. </div>
  2341. </a>
  2344.   </div>
  2345. </div>
  2347. <div class="col_one_third">
  2348.   <div class="mainNews-item clearfix">
  2349.    
  2350.     <a href="/article_guide-to-leg-muscles.asp" >
  2353. <div class="mainNews-image">
  2354. <img class="lozad" data-src="/images/banners/leg-muscle-345x345_rdax_80s.jpg"  alt="" data-index="1">
  2355. <noscript><img src="/images/banners/leg-muscle-345x345_rdax_80s.jpg"  alt="" data-index="1" /></noscript>
  2356. <div class="mainNews-overlay">
  2357. <div class="news-inside-center divcenter">
  2358. <div style="text-align:left; color:#fff; font-size:.95em; padding:20px 10px 0 15px;">
  2359.    <p>Learn how to strengthen leg muscles, increase their flexibility and when to seek treatment for leg muscle issues.</p>
  2360. </div>
  2361. <span class="text rounded thin_bold button-primary pure-button">Read More<img src="/images/icons/banner-arrow2.gif" alt="Graphic: learn more" style="width:12px; height:auto; display:inline-block; margin-left:2px;"></span>
  2362. </div>
  2363. </div>
  2364. </div>
  2365. <div class="mainNews-desc mainNews-desc-bg">
  2367.                        <div class="news-title"><p class="p-resize">A Guide to Your Leg Muscles, from the Ground Up</p>
  2369. </div>
  2370. </div>
  2371. </a>
  2374.   </div>
  2375. </div>
  2377. <div class="col_one_third">
  2378.   <div class="mainNews-item clearfix">
  2379.    
  2380.     <a href="/article_joint-pain-types-causes-treatments.asp" >
  2383. <div class="mainNews-image">
  2384. <img class="lozad" data-src="/images/banners/knee-pain-man-345x345_rdax_80s.jpg"  alt="" data-index="1">
  2385. <noscript><img src="/images/banners/knee-pain-man-345x345_rdax_80s.jpg"  alt="" data-index="1" /></noscript>
  2386. <div class="mainNews-overlay">
  2387. <div class="news-inside-center divcenter">
  2388. <div style="text-align:left; color:#fff; font-size:.95em; padding:20px 10px 0 15px;">
  2389.    <p>Many factors affect joint pain, including which part of the joint is affected, what’s causing the pain and your overall health.</p>
  2390. </div>
  2391. <span class="text rounded thin_bold button-primary pure-button">Read More<img src="/images/icons/banner-arrow2.gif" alt="Graphic: learn more" style="width:12px; height:auto; display:inline-block; margin-left:2px;"></span>
  2392. </div>
  2393. </div>
  2394. </div>
  2395. <div class="mainNews-desc mainNews-desc-bg">
  2397.                        <div class="news-title"><p class="p-resize">What to Know About Joint Pain: Types, Causes and Treatments</p>
  2399. </div>
  2400. </div>
  2401. </a>
  2404.   </div>
  2405. </div>
  2407. </div>
  2408. <div class="more-btn more-btn-mobile">
  2409.                <a href="https://www.hss.edu/movebetter.htm" class="si-text-color arrow-icon-forward p-resize" onclick="ga('send', 'event', 'Home2020v1', 'Click', 'More-Move-Better-Feel-Better');"><strong>View more in Move Better Feel Better</strong></a>
  2410.                        </div>
  2411. </div>
  2412.            </div>
  2413.        <div aria-hidden="true" id="section-name-9166" class="banner-offscreen">Move Better Feel Better section</div>    
  2414. </section><!-- #content end -->
  2415.  
  2416. <div class="clear"></div>
  2417. <style>
  2418.  
  2419. .mbfb-h3 {
  2420.    font-weight: 700;
  2421.    font-size: 1.7em;
  2422.    line-height: 1.5em;
  2423. }
  2424.  
  2425. .mbfb-h3 span {
  2426.    font-weight: bold;
  2427. }
  2428.  
  2429. .mbfb-tagline {
  2430.    font-size: 1.2em;
  2431. }
  2432.  
  2433.  
  2434. .NewsContent {
  2435.    margin-top:0px;
  2436. }
  2437.  
  2438. .articleTag {
  2439.    background-color: #0074bc;
  2440.    padding: 0 3px 0 3px;
  2441.    position: absolute;
  2442.    z-index: 33;
  2443.    margin: 10px 0 0 -10px;
  2444.    color:#fff;
  2445.    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.19);
  2446. }
  2447.  
  2448. .eventlabel {
  2449.    background-color: #025888;
  2450.    padding: 0 3px 0 3px;
  2451.    position: absolute;
  2452.    z-index: 33;
  2453.    margin: 10px 0 0 -10px;
  2454.    color:#fff;
  2455.    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.19);
  2456. }
  2457.  
  2458.  
  2459. .NewsContent .col_one_third:last-of-type, .NewsContent .col_one_fourth:last-of-type, .NewsContent .col_one_fifth:last-of-type  {
  2460.   margin-right: 0 !important;    
  2461. }
  2463. .news-inside-center {
  2464.    position: absolute; top: 50%; transform: translate(0, -50%);
  2465. }
  2466.  
  2467. .mainNews-desc p {
  2468.    min-height: 0;
  2469.    height: auto;
  2470. }
  2471.  
  2472. .mainNews-desc {
  2473.    text-align: left;
  2474. }
  2475.  
  2476. .post-grid {
  2477.    margin-right: 0;
  2478. }
  2479.  
  2480. .post-grid .entry {
  2481.    float: left;
  2482.    /* width: 277px; */
  2483.    width: 570px;
  2484.    margin-right: 10px;
  2485.    margin-bottom: 10px;
  2486. }
  2487.  
  2488. @media screen and (max-width: 1200px) {
  2489. .post-grid .entry {
  2490.    width: 380px;
  2491. }
  2492. }
  2493.  
  2494. @media screen and (max-width: 1023px) {
  2495. .post-grid .entry {
  2496.    width: 570px;
  2497. }
  2498. .mbfb-tagline {
  2499.    display: block;
  2500. }
  2501. }
  2502.  
  2503. @media screen and (max-width: 780px) {
  2504. .post-grid .entry {
  2505.    margin-bottom: 0;
  2506. }
  2507.  
  2508. }
  2509.  
  2510.  
  2511. .col_half {
  2512.    width: 48% !important;
  2513.    margin-right: 0 !important;
  2514.    margin-bottom: 0 !important;
  2515. }
  2516.  
  2517. .team-title {
  2518.    position: relative;
  2519.    /* padding-top: 20px; */
  2520.    max-height: 264px !important;
  2521.    background-color:#fff !important;
  2522. }
  2523.  
  2524. .mainNews-desc.mainNews-desc-bg {
  2525.    background: none !important;
  2526.    padding: 10px 0px 0px 0;
  2527. }
  2528.  
  2529. @media screen and (max-width: 480px) {
  2530. .mainNews-desc.mainNews-desc-bg {
  2531.    margin-left: -14px;
  2532.    margin-bottom: 30px !important;
  2533. }
  2534. }
  2535.  
  2536.  
  2537.  
  2538. .page_link {
  2539. display:none !important;  
  2540. }
  2541.  
  2542. .pagination > li:first-child > a, .pagination > li:first-child > span {
  2543.    margin-left: 0;
  2544.    border-bottom-left-radius: 0px;
  2545.    border-top-left-radius: 0px;
  2546. }
  2547.  
  2548. .pagination > li:last-child > a, .pagination > li:last-child > span {
  2549.    border-bottom-right-radius: 0px;
  2550.    border-top-right-radius: 0px;
  2551. }
  2552.  
  2553.  
  2554. .btn-link, .pagination > li > a, .pagination > li > span, .pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus {
  2555.    color: #164469;
  2556. }
  2557.    
  2558. .pagination > li > a, .pagination > li > span {
  2559.    position: relative;
  2560.    float: left;
  2561.    padding: 6px 12px;
  2562.    line-height: 1.42857143;
  2563.    text-decoration: none;
  2564.    color: #337ab7;
  2565.    background-color: #ffffff;
  2566.    border: 0px solid #dddddd;
  2567.    margin-left: -1px;
  2568. }
  2569.  
  2570. .btn-link, .pagination > li > a, .pagination > li > span, .pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus {
  2571.    color: #164469;
  2572.    background-color: #ffffff !important;
  2573. }
  2574.  
  2575. .no_more img {
  2576. opacity: 0.1;
  2577. }
  2578.  
  2579. @media only screen and (max-width: 480px){
  2580. #pagetitle-home h1, .pagetitle-home h1 {
  2581.    padding: 1.4em 0 .3em 0;
  2582. }
  2583.  
  2584. }
  2585.  
  2586. @media only screen and (max-width: 480px){
  2587. .mainNews-desc p:last-child {
  2588.    margin-bottom: 0;
  2589. }
  2590. }
  2591.  
  2592. .more-btn-float-right {
  2593.     float: right;
  2594.    right: 0;
  2595.    margin-top: -45px;  
  2596.    margin-right:5px;
  2597. }
  2598.  
  2599. @media (max-width: 479px) {
  2600. .more-btn-float-right {
  2601.    float: right;
  2602.    right: 0;
  2603.    margin-top: -38px;
  2604. }
  2605. }
  2606.  
  2607.  
  2608. @media only screen and (max-width: 768px){
  2609. .mainNews-desc.mainNews-desc-bg {
  2610.    margin: -10px 0 30px 0;
  2611. }
  2612.  
  2613. .mbfb-h3 {
  2614.    font-size: 1.3em;
  2615. }
  2616.  
  2617. .mbfb-tagline {
  2618.    font-size: 1.3em;
  2619. }
  2620.  
  2621. }
  2622.  
  2623. </style>
  2625. <section class="page-section nopadding" style="margin-top:0px; margin-bottom:0px;" aria-labelledby="25568-full-width-content">
  2626. <div class="full_width_banner_wrapper_bg" style=" background-color:#264583; padding:20px 0 20px 0;">
  2628.  
  2629. <div class="container clearfix">  
  2631.  
  2632. <div class="row"><!--MyHSS app-->
  2633. <div class="col-lg-4 col-md-4 col-sm-4 mt-3 mt-lg-5 mt-md-3 mt-sm-5" style="text-align:center"><img alt="MyHSS app" class="center-block" height="200" src="/images/banners/myhss-app.png" width="104" /></div>
  2634.  
  2635. <div class="col-lg-8 col-md-8 col-sm-8 ml-0 mt-3 mt-lg-5 mt-md-3 mt-sm-5">
  2636. <h3 class="new-home-h3" style="color:#ffffff">MyHSS App</h3>
  2637.  
  2638. <p class="p-resize" style="color:#ffffff">Access your patient account through the MyHSS app.</p>
  2639. &nbsp;<a class="button-blue button-resize center" href="/myhss-info.asp" onclick="ga('send', 'event', 'Home2020v2', 'Click', 'MyHSS App');" style="max-width:220px">Learn more</a></div>
  2640. <!--CHNA --><!--
  2641. <div class="col-lg-2 col-md-4 col-sm-4 mt-5 mt-lg-5 mt-md-5 mt-sm-5 pl-lg-3 pl-md-5 pr-0 pr-lg-3 pr-md-5" style="text-align:center"><img alt="hands holding a tablet" class="center-block" height="225" src="/images/corporate/CHNA_tablet.jpg" width="225" /></div>
  2642.  
  2643. <div class="col-lg-4 col-md-8 col-sm-8 ml-0 mt-3 mt-lg-5 mt-md-5 mt-sm-5">
  2644. <h3 class="new-home-h3" style="color:#ffffff">Your opinion makes an impact.</h3>
  2645.  
  2646. <p class="p-resize" style="color:#ffffff">Help us make our communities more healthy, active and well by completing our anonymous Community Health Needs Assessment.</p>
  2647. &nbsp;<a class="button-blue button-resize center" href="https://survey.alchemer.com/s3/6634031/574c6b391236" onclick="ga('send', 'event', 'Home2020v2', 'Click', 'CHNA survey');" style="max-width:220px" target="_blank">Take the survey</a></div>--></div>
  2648. <!--end row-->
  2649.  
  2650. </div>
  2651.  
  2652. </div>
  2653. <div aria-hidden="true" id="25568-full-width-content" class="banner-offscreen">myHSS App</div>
  2654. </section>
  2655.  
  2656. <style>
  2657. .nav-search-btn {
  2658. visibility: hidden;
  2659. }
  2660.  
  2661. <style>
  2662. #video-section-2 {
  2663. display: none;
  2664. }
  2665.  
  2666. .view-more-btn {
  2667. border: 1px solid #025888;
  2668. background-color: #ffffff;
  2669. padding: 4px;
  2670. margin:20px auto 0 auto;
  2671. text-align:center;
  2672. max-width:210px;
  2673. cursor:pointer;
  2674. }
  2675.  
  2676. .hss-mobile-menu {
  2677. display:none !important;
  2678. }
  2679.  
  2680. @media (max-width: 1180px) {
  2681. .hss-mobile-menu {
  2682. display:block !important;
  2683. }
  2684. }
  2685.  
  2686. .postcontent, .sidebar, .col_full, .col_half, .col_one_third, .col_two_third, .col_three_fourth, .col_one_fourth, .col_one_fifth, .col_two_fifth, .col_three_fifth, .col_four_fifth, .col_one_sixth, .col_five_sixth {
  2687. display: block;
  2688. position: relative;
  2689. margin-right: 3%;
  2690. margin-bottom: 0;
  2691. float: left;
  2692. }
  2693.  
  2694. #video-section-1 .col_half, #video-section-2 .col_half {
  2695.    margin-right: 3% !important;
  2696.    width: 47% !important;
  2697. }
  2698.  
  2699. #video-section-1 .col_one_fourth, #video-section-2 .col_one_fourth {
  2700. margin-bottom: 2%;
  2701. }
  2702.  
  2703. @media (max-width: 767px) {
  2704. #video-section-1 .col_half, #video-section-2 .col_half {
  2705.    width: 55% !important;
  2706. }
  2707. }
  2708.  
  2709. @media (max-width: 480px) {
  2710. #video-section-1 .col_half, #video-section-2 .col_half {
  2711.    width: 83% !important;
  2712. }
  2713. }
  2714.  
  2715. .youtube_text_bg3 {
  2716. position: relative;
  2717. z-index: 33;
  2718. margin: 14px 0 0 0;
  2719. padding: 1px 0 10px 0;
  2720. width: 100%;
  2721. height: 50px;
  2722. }
  2723.  
  2724. .play_btn {
  2725. position: relative;
  2726. z-index: 33;
  2727. text-align: center;
  2728. /* margin: -140px 0 0 90px; */
  2729. margin: -51px 0 0 10px;
  2730. background: url(https://www.hss.edu/images/icons/play_btn.png) no-repeat;
  2731. height: 28px;
  2732. }
  2733.  
  2734. .youtube_text {
  2735.    width: 100%;
  2736. }
  2737.  
  2738. .youtube_btn:hover .youtube_text {
  2739. color:#164469;
  2740. }
  2741.  
  2742. </style>
  2743. </style>
  2744. <!--
  2745. <script>
  2746. $(document).ready(function() {
  2747. //scripts for main page only. move to inpoage-index later
  2748. $(document).scroll(function() {
  2749.  var y = $(this).scrollTop();
  2750.  if (y > 200) {
  2751.       $('#bodysearch').css({'display' : 'none'});
  2752.       $('.nav-search-btn').css({'visibility' : 'visible'});
  2753.  } else {
  2754.    $('#bodysearch').css({'display' : 'block'});
  2755.    $('.nav-search-btn').css({'visibility' : 'hidden'});
  2756.    $('#headersearch').css({'display' : 'none'});
  2757.  }
  2758. });
  2759. });
  2760. </script>
  2761. -->
  2762.  
  2763. <script>
  2764. $(window).on('load', function(){
  2765. var array = [1,2,3,4,5]; var allDiv = document.querySelectorAll('.ls-bottom-slidebuttons a'); allDiv.forEach(function(item, i){ item.setAttribute("onclick", "ga('send', 'event', 'HomeSlides', 'Click', 'slide"+array[i]+"');"); });
  2766. })
  2767. </script>
  2768. </div>
  2769. <!--
  2770. <div id="toTop">^ Back to Top</div>
  2771. -->
  2772. <div id="toTop2"><div class="toTop-icon">&nbsp</div></div>
  2773. <!--end centercolumn -->
  2774.  
  2775. <div id="modulecolumn">          
  2776.        
  2777.        
  2778.        
  2779.        
  2780.        
  2781.        
  2782.  
  2783.  
  2784. <style>
  2785.    
  2786.    .imagine-parent {
  2787.    perspective: none;
  2788.    -moz-perspective: none;
  2789.    -webkit-perspective: none;
  2790.    perspective-origin: 1% 1%;
  2791.    -moz-perspective-origin: 1% 1%;
  2792.    -webkit-perspective-origin: 1% 1%;
  2793.    backface-visibility: hidden;
  2794.    -moz-backface-visibility: hidden;
  2795.    -webkit-backface-visibility: hidden;
  2796. }
  2797.    
  2798. </style>
  2799.  
  2800. </div>
  2801.        
  2802. </rde-dm:query>
  2803.  
  2804. <div class="clear"></div>
  2805.  
  2806.  
  2807.  
  2808.  
  2809. <!-- end pagecontent -->
  2810.  
  2811.  
  2812.  
  2813. <script type="text/javascript">
  2814. $(function() {
  2815.      $('#footerbox').load('/footer-ssi.html');
  2816. });
  2817. </script>
  2818. <div id="footerbox"></div>
  2819. <!-- end menu box - test -->
  2821. <!-- end footer -->
  2822.  
  2823.  
  2824. <!-- for test only. please apply this on real CSS when it's live -->
  2825. <style>
  2826.  
  2827. @media screen and (max-width: 999px) {
  2828. #tinynavcontainer {
  2829.    display: none;
  2830.    background-color: #ecf2f6;
  2831.    padding: 0;
  2832.    margin-top: -1px;
  2833. }
  2834. }
  2835.  
  2836. @media (max-width: 991px) {
  2837. #bodysearch {display:none !important;}
  2838. }
  2839.  
  2840.  
  2841. </style>
  2842.  
  2843. <!--[if lte IE 9]>
  2844.  
  2845.    <style>
  2846. #ie9-browser {
  2847. display:block;
  2848. height:auto;
  2849. bottom:0;
  2850. }
  2851.  
  2852. #ie9-browser .img_bg{
  2853.  position: absolute;
  2854.  top: 0;
  2855.  left: 0;
  2856.  right: 0;
  2857.  bottom: 0;
  2858.  margin: auto;
  2859.  min-width: 50%;
  2860.  min-height: 50%;
  2861. }
  2862.  
  2863. .ie9content{
  2864.  
  2865. }
  2866.  
  2867. .ie9content p{
  2868. font-size:1.2em;
  2869. line-hegiht:20px;
  2870. color:#fff;
  2871. }
  2872.  
  2873. .ie9content a{
  2874. color:#fff !important;
  2875. }
  2876.  
  2877. .sports_btn_ie9 {
  2878. display:table-cell;
  2879. vertical-align:middle;
  2880. margin-left: -50%;
  2881. margin-right:50%;
  2882. }
  2883.  
  2884. .sports-contents-btn {
  2885. display:none;
  2886. }
  2887.  
  2888. #ac-wrapper {
  2889.    position: fixed;
  2890.    bottom: 0 !important;
  2891.    left: 0;
  2892.    width: 100%;
  2893.    height: 100%;
  2894.    z-index: 1001;
  2895. }
  2896.  
  2897. #popup {
  2898.    background:#0080C7;
  2899.    margin: 0 auto;
  2900.    position:fixed;
  2901.    width:100%;
  2902. height:180px;
  2903. padding:20px;
  2904. color:#fff;
  2905. bottom:0;
  2906. }
  2907.    </style>
  2908.  
  2909.    <![endif]-->  
  2910.  
  2911.  
  2912.  
  2913. <!--[if lte IE 9]>
  2914.  
  2915. <script type="text/javascript">
  2916. //<![CDATA[
  2917. function zeit()
  2918. {
  2919.    if(document.cookie)
  2920.    {
  2921.        a = document.cookie;
  2922.        cookiewert = "";
  2923.        while(a.length > 0)
  2924.        {
  2925.            cookiename = a.substring(0,a.indexOf('='));
  2926.            if(cookiename == "zeitstempel")
  2927.            {
  2928.                cookiewert = a.substring(a.indexOf('=')+1,a.indexOf(';'));
  2929.                break;
  2930.            }
  2931.            a = a.substring(a.indexOf(cookiewert)+cookiewert.length+1,a.length);
  2932.        }
  2933.        if(cookiewert.length > 0)
  2934.        {
  2935.            alter = new Date().getTime() - cookiewert;
  2936.  
  2937.            if(alter > 3600)
  2938.            {  
  2939.                document.cookie = "zeitstempel=" + new Date().getTime() + ";";
  2940.                location.reload(true);
  2941.            }
  2942.            else
  2943.            {
  2944.                return;
  2945.            }
  2946.        }
  2947.        else
  2948.        {
  2949.            document.cookie = "zeitstempel=" + new Date().getTime() + ";";
  2950.            location.reload(true);
  2951.        }
  2952.    }
  2953.    else
  2954.    {
  2955.        document.cookie = "zeitstempel=" + new Date().getTime() + ";";
  2956.        location.reload(true);
  2957.    }
  2958. }
  2959. zeit();
  2960. //]]>
  2961. </script>
  2962. <![endif]-->
  2963.  
  2964.  
  2965. <noscript id="deferred-styles">
  2966. <!--<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">-->
  2967.  
  2968. </noscript>
  2969.  
  2970.    <script>
  2971.      var loadDeferredStyles = function() {
  2972.        var addStylesNode = document.getElementById("deferred-styles");
  2973.        var replacement = document.createElement("div");
  2974.        replacement.innerHTML = addStylesNode.textContent;
  2975.        document.body.appendChild(replacement)
  2976.        addStylesNode.parentElement.removeChild(addStylesNode);
  2977.      };
  2978.      var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
  2979.          window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  2980.      if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
  2981.      else window.addEventListener('load', loadDeferredStyles);
  2982.    </script>  
  2983.  
  2984. <script>
  2985. window.addEventListener('load', function() {
  2986.  var observer = lozad()
  2987.  observer.observe()
  2988. })
  2989. </script>
  2990. </div><!--end wrapper?-->
  2991. <script type="text/javascript" src="/_Incapsula_Resource?SWJIYLWA=719d34d31c8e3a6e6fffd425f7e032f3&ns=1&cb=1456703401" async></script></body>
  2992. </html>
  2993.  
  2994.  

Home · About · News · Docs · Terms

 
Copyright © 2002-9 Sam Ruby, Mark Pilgrim, Joseph Walton, and Phil Ringnalda