#Banner-Container, #DrContainer, #EducationBg, #EducationBg, #TestimonialContainer, #ResourceBg{ width:100%; margin:0px; padding:0px; position:relative; } #Banner, #ServiceMain, #DrMain, #TestimonialMain, #EducationMain, #SpecialsedMain, #TestimonialMain, #ResourceMain, #ResourceMain, #ResourceMain, #MediaMain, #LocationMain{ max-width:1170px; min-width:300px; margin:0px auto; padding:0px; position:relative; } #Header-Container{ position:fixed !important; z-index:9; } #Banner{ height:997px; } #Banner .rslides .slider{ aspect-ratio:3 / 2; background-size:cover !important; background-position:left bottom; } #Banner .banner1 .theme-L{ background:url(https://assets.yourpractice.online/3365/banner1-l-bg.jpg) no-repeat right bottom; } #Banner .banner1 .theme-R{ background:url(https://assets.yourpractice.online/3365/banner1-r-bg.jpg) no-repeat left bottom; } #Banner .banner2 .theme-L{ background:url(https://assets.yourpractice.online/3365/banner2-l-bg.jpg) no-repeat right bottom; } #Banner .banner2 .theme-R{ background:url(https://assets.yourpractice.online/3365/banner2-r-bg.jpg) no-repeat left bottom; } #Banner .banner3 .theme-L{ background:url(https://assets.yourpractice.online/3365/banner3-l-bg.jpg) no-repeat right bottom; } #Banner .banner3 .theme-R{ background:url(https://assets.yourpractice.online/3365/banner3-r-bg.jpg) no-repeat left bottom; } #Banner .banner4 .theme-L{ background:url(https://assets.yourpractice.online/3365/banner4-l-bg.jpg) no-repeat right bottom; } #Banner .banner4 .theme-R{ background:url(https://assets.yourpractice.online/3365/banner4-r-bg.jpg) no-repeat left bottom; } .bannerDiv{ position:absolute; width:50%; min-width:300px; right:10px; top:37%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); padding:10px; } .banner1 .bannerDiv{ top:31%; width:53%; } .bannerHead{ font:700 49px/54px var(--headingFont); color:var(--fontDark); padding-bottom:15px; } .bannerHead a{ display:block; } .bannerHead a:hover{ color:var(--themeOneBg); } .bannerText p{ font:400 20px/30px var(--siteFont); display:block; color:var(--fontDark); } .banner1 .bannerText p a{ font-weight:600; } .bannerText p a:hover{ color:var(--themeThreeBg); } .bannerMore{ margin-top:40px; } .bannerMore a{ position:relative; display:inline-flex; align-items:center; justify-content:center; min-width:140px; padding:14px 16px; background:var(--themeOneBg); color:var(--fontLight); text-align:center; text-decoration:none; border:2px solid var(--themeOneBg); border-radius:5px; font:400 16px/20px var(--headingFont); transition:all 0.3s ease; } .bannerMore a::before, .bannerMore a::after{ content:""; position:absolute; width:0; height:3px; background:var(--themeTwoBg); transition:width 0.3s ease; } .bannerMore a::before{ top:-2px; left:0; } .bannerMore a::after{ bottom:-2px; right:0; } .bannerMore a:hover{ color:var(--fontDark); background:var(--themeTwoBg); border-color:var(--themeTwoBg); } .bannerMore a:hover::before, .bannerMore a:hover::after{ width:100%; } .bannerDiv{ opacity:0; transform:translateY(35px); transition:opacity 0.8s ease,transform 0.8s ease; } .bannerHead{ opacity:0; transform:translateY(20px); transition:opacity 0.7s ease 0.2s,transform 0.7s ease 0.2s; } .bannerText{ opacity:0; transform:translateY(20px); transition:opacity 0.7s ease 0.35s,transform 0.7s ease 0.35s; } .bannerMore{ opacity:0; transform:translateY(20px); transition:opacity 0.7s ease 0.5s,transform 0.7s ease 0.5s; } .Banner_on .bannerDiv{ opacity:1; transform:translateY(0); } .Banner_on .bannerHead, .Banner_on .bannerText, .Banner_on .bannerMore{ opacity:1; transform:translateY(0); } .bannerTabs{ position:absolute; z-index:8; right:10px; bottom:120px; } .bannerTabs ul{ display:flex; flex-direction:row; flex-wrap:wrap; gap:5px; } .bannerTabs li{ width:15px; height:15px; } .bannerTabs li a{ width:100%; height:100%; display:block; border-radius:100%; border:2px solid var(--themeOneBg); background:var(--fontLight); } .bannerTabs li a:hover, .bannerTabs li.Banner_here a{ background:var(--themeTwoBg); border-color:var(--themeoneBg); } .bannerTabs li span{ display:none; } #ServiceMain{ padding:20px 10px 50px 10px; } .serviceHead{ text-align:center; font:600 45px/50px var(--headingFont); } .serviceHead span{ display:block; text-transform:uppercase; color:var(--themeFourBg); letter-spacing:8px; font:600 17px/20px var(--headingFont); padding-bottom:20px; } .servIntro{ text-align:center; width:80%; margin:0 auto; padding:13px 0 59px 0; font:300 17px/30px var(--siteFont); } .servIntro a{ color:var(--themeOneBg); } .servIntro a:hover{ text-decoration:underline; text-underline-offset:4px; } .serviceWrapper{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(250px,auto)); gap:22px 30px; width:100%; margin:0 auto; } .serviceCard{ position:relative; isolation:isolate; display:flex; flex-direction:column; align-items:flex-start; min-width:0; padding:27px 20px 20px; background-color:var(--themeThreeBg); border:1px solid #ced6dc; border-radius:20px; overflow:hidden; box-sizing:border-box; transition:border-color 0.35s ease,box-shadow 0.35s ease, transform 0.35s ease; } .serviceCard::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background-repeat:no-repeat !important; background-size:cover !important; background-position:center !important; opacity:0; transition:opacity 0.4s ease; pointer-events:none; } .serviceCard:hover{ transform:translateY(-4px); border-color:var(--themeOneBg); box-shadow:0 12px 28px rgba(7,56,84,0.14); background-repeat:no-repeat; background-size:cover; background-position:center; } .serviceCard.hip{ grid-column:1; grid-row:1; } .serviceCard.hip::before{ background:url('https://assets.yourpractice.online/3365/hip-bg.png'); } .serviceCard.general{ grid-column:1; grid-row:2; } .serviceCard.general::before{ background:url('https://assets.yourpractice.online/3365/general-bg.png'); } .serviceCard.knee{ grid-column:2; grid-row:1 / 3; display:flex; flex-direction:column; justify-content:flex-end; padding:27px 22px 20px; background:url('https://assets.yourpractice.online/3365/knee-bg-o.png'); background-repeat:no-repeat; background-size:cover; background-position:center; } .serviceCard.knee::before{ background:url('https://assets.yourpractice.online/3365/knee-bg.png'); opacity:0; } .serviceCard.knee:hover::before{ opacity:1; } .serviceCard.fracture{ grid-column:3; grid-row:1; } .serviceCard.fracture::before{ background:url('https://assets.yourpractice.online/3365/fracture-bg.png'); } .serviceCard.nonsurgical{ grid-column:3; grid-row:2; } .serviceCard.nonsurgical::before{ background:url('https://assets.yourpractice.online/3365/non-surgica-bg.png'); } .serviceCard.hip:hover::before, .serviceCard.general:hover::before, .serviceCard.fracture:hover::before, .serviceCard.nonsurgical:hover::before{ opacity:1; } .servIcon{ display:flex; align-items:center; justify-content:center; flex-shrink:0; width:73px; height:69px; margin-bottom:37px; background-color:var(--themeOneBg); background-repeat:no-repeat !important; background-position:center !important; background-size:contain !important; transition:transform 0.35s ease; } .serviceCard.hip .servIcon{ background:url('https://assets.yourpractice.online/3365/hip-icon.png'); } .serviceCard.general .servIcon{ background:url('https://assets.yourpractice.online/3365/general-icon.png'); } .serviceCard.knee .servIcon{ background:url('https://assets.yourpractice.online/3365/knee-icon.png'); } .serviceCard.fracture .servIcon{ background:url('https://assets.yourpractice.online/3365/fracture-icon.png'); } .serviceCard.nonsurgical .servIcon{ background:url('https://assets.yourpractice.online/3365/non-surgical-icon.png'); } .serviceCard.hip:hover .servIcon{ background:url('https://assets.yourpractice.online/3365/hip-icon-h.png'); } .serviceCard.general:hover .servIcon{ background:url('https://assets.yourpractice.online/3365/general-icon-h.png'); } .serviceCard.knee:hover .servIcon{ background:url('https://assets.yourpractice.online/3365/knee-icon-h.png'); } .serviceCard.fracture:hover .servIcon{ background:url('https://assets.yourpractice.online/3365/fracture-icon-h.png'); } .serviceCard.nonsurgical:hover .servIcon{ background:url('https://assets.yourpractice.online/3365/non-surgical-icon-h.png'); } .serviceCard:hover .servIcon{ transform:translateY(-3px); } .servCaption{ margin-bottom:6px; } .servCaption a{ color:#080808; font:600 24px/1.2 var(--headingFont); text-decoration:none; transition:color 0.3s ease; } .serviceCard ul{ padding:0; margin:0 0 16px; list-style:none; } .serviceCard ul li{ margin-bottom:0px; line-height:25px; } .serviceCard ul li:last-child{ margin-bottom:0; } .serviceCard ul li a, .serviceCard p{ color:#080808; font:400 16px/1.6 var(--siteFont); } .serviceCard ul li a{ text-decoration:none; transition:color 0.3s ease; line-height:24px; } .serviceCard p{ margin:0 0 10px; } .serviceCard p a{ color:inherit; text-decoration:none; } .servMore{ margin-top:auto; } .servMore a{ display:inline-block; color:#080808; font:400 16px/1.4 var(--siteFont); text-decoration:underline; text-decoration-color:#858c8f; text-decoration-thickness:2px; text-underline-offset:4px; transition:0.3s ease; } .servMore a:hover{ color:var(--themeOneBg); letter-spacing:.5px; } .serviceCard:hover .servCaption a, .serviceCard:hover .servMore a, .serviceCard:hover ul li a, .serviceCard:hover p, .serviceCard:hover p a{ color:var(--fontLight); } .serviceCard .servCaption a:hover, .serviceCard .servMore a:hover, .serviceCard:hover ul li a:hover, .serviceCard:hover p a:hover{ text-decoration:underline; } .serviceCard.knee .kneeContent{ display:flex; flex-direction:column; align-items:flex-start; width:100%; } .serviceCard.knee .servIcon{ margin-top:0; margin-bottom:20px; } .serviceCard.knee .servCaption{ margin-bottom:14px; } .serviceCard.knee ul{ margin-bottom:18px; } .serviceCard.knee .servMore{ margin-top:0; padding-top:0; } #DrContainer{ background:url('https://assets.yourpractice.online/3365/dr-bg.jpg') no-repeat scroll top center; } #DrMain{ min-height:746px; display:grid; grid-template-columns:483px minmax(0,1fr); align-items:end; gap:22px; } #DrMain .drImage{ width:100%; height:688px; display:flex; align-items:flex-end; justify-content:center; overflow:hidden; } #DrMain .drImage img{ display:block; width:100%; height:100%; object-fit:contain; object-position:center bottom; } #DrMain .drContent{ min-width:0; align-self:center; padding:30px 0 35px; color:var(--fontLight); } #DrMain .meet{ display:block; text-transform:uppercase; color:var(--fontLight); letter-spacing:6px; font:300 17px/20px var(--siteFont); padding-bottom:20px; } #DrMain h1{ margin:0 0 8px; color:var(--fontLight); font:700 62px/68px var(--headingFont); } #DrMain .board{ display:flex; flex-direction:column; gap:3px; margin-bottom:36px; color:var(--fontLight); font:600 20px/25px var(--siteFont); text-transform:uppercase; letter-spacing:.2px; } #DrMain .board span{ font:400 22px/27px var(--siteFont); text-transform:none; letter-spacing:0; padding-top:4px; } #DrMain .drDetails{ max-width:100%; margin:0 0 45px; color:var(--fontLight); font:300 17px/30px var(--siteFont); } #DrMain .drTabs{ display:grid; grid-template-columns:220px minmax(0,1fr); align-items:center; gap:15px; margin:0; } #DrMain .experience{ display:flex; align-items:center; border-radius:4px; transition:transform 0.3s ease,box-shadow 0.3s ease; } #DrMain .experience img{ display:block; width:100%; max-width:220px; height:auto; } #DrMain .experience:hover{ transform:translateY(-5px); } #DrMain .drBtns{ display:flex; flex-direction:column; gap:12px; margin:0; padding:0; list-style:none; } #DrMain .drBtns li{ margin:0; padding:0; font:400 16px/24px var(--siteFont); align-self:flex-start; } #DrMain .drBtns a{ display:inline-flex; align-items:center; justify-content:center; width:auto; padding:13px 26px; border-radius:6px; background:var(--themeThreeBg); color:var(--fontDark); text-align:center; text-decoration:none; transition:background 0.25s ease,color 0.25s ease, transform 0.25s ease,box-shadow 0.25s ease; } #DrMain .drBtns .drAppoint a{ background:var(--themeOneBg); color:var(--fontLight); padding:13px 21px; } #DrMain .drBtns a:hover{ background:var(--themeTwoBg); color:var(--fontDark); box-shadow:0 5px 14px rgba(0,0,0,0.15); transform:translateY(-4px); } #EducationBg{ background:var(--themeOneBg); } #EducationMain{ padding:62px 10px 67px 10px; display:flex; align-items:center; } #EducationMain .educationTabs{ width:100%; display:grid; grid-template-columns:1.15fr 1.2fr 1.2fr 0.85fr 1.4fr; align-items:center; margin:0; padding:0; list-style:none; } #EducationMain .educationTabs li{ min-width:0; min-height:43px; display:flex; flex-direction:column; justify-content:center; gap:10px; padding:0 30px; border-right:1px solid rgba(255,255,255,0.19); transition:transform 0.3s ease; } #EducationMain .educationTabs li:first-child{ padding-left:0; } #EducationMain .educationTabs li:last-child{ padding-right:0; border-right:0; } #EducationMain .educationTabs li:hover{ transform:translateY(-5px); } #EducationMain .educationTabs img{ max-width:100%; height:auto; transition:opacity 0.3s ease; } #EducationMain .educationTabs li:hover img{ opacity:0.85; } #EducationMain .eduCaption{ font:600 15px/24px var(--siteFont); color:var(--fontLight); text-transform:uppercase; white-space:nowrap; padding-bottom:6px; letter-spacing:3px; } #SpecialsedMain{ width:100%; padding:119px 10px 100px; } #SpecialsedMain .specialisedHead{ text-align:center; font:600 45px/50px var(--headingFont); color:var(--fontDark); padding-bottom:25px; } #SpecialsedMain .specialisedHead span{ display:block; text-transform:uppercase; color:var(--themeFourBg); letter-spacing:6px; font:600 17px/20px var(--headingFont); padding-bottom:21px; } #SpecialsedMain .mobilityWrap{ margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) 560px; align-items:center; gap:60px; } #SpecialsedMain .mobilityL{ grid-column:1; grid-row:1; min-width:0; padding-top:86px; } #SpecialsedMain .mibilityHead{ font:600 40px/45px var(--headingFont); color:var(--fontDark); padding-bottom:33px; } #SpecialsedMain .mibilityHead span{ display:block; text-transform:uppercase; color:var(--themeFourBg); letter-spacing:6px; font:600 17px/20px var(--siteFont); padding-bottom:33px; } #SpecialsedMain .mobilityL p{ margin:0 0 32px; font:300 17px/30px var(--siteFont); } #SpecialsedMain .mobilityL p a{ color:var(--themeOneBg); } #SpecialsedMain .mobilityL p a:hover{ color:var(--themeOneBg); text-decoration:underline; text-underline-offset:4px; } #SpecialsedMain .mobilityTabs ul{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin:0; padding:0; list-style:none; } #SpecialsedMain .mobilityTabs li{ margin:0; padding:0; } #SpecialsedMain .mobilityTabs a{ min-width:350px; min-height:27px; display:inline-flex; align-items:center; padding:15px 20px; border:1px solid var(--themeOneBg); border-radius:5px; background:var(--themeOneBg); color:var(--fontLight); font:400 16px/20px var(--siteFont); transition:background 0.25s ease,color 0.25s ease, border-color 0.25s ease,transform 0.25s ease; } #SpecialsedMain .mobilityTabs a:hover{ background:var(--themeTwoBg); color:var(--fontDark); border-color:var(--themeTwoBg); transform:translateX(4px); } #SpecialsedMain .mobilityImageR, #SpecialsedMain .mobilityImageR img{ transition:transform 0.3s ease; } #SpecialsedMain .mobilityImageR:hover{ transform:translateY(-2px); } #SpecialsedMain .mobilityImageR:hover img{ transform:scale(1.03); } #TestimonialContainer{ background:url('https://assets.yourpractice.online/3365/review-bg-org.jpg') repeat scroll 0 0; } #TestimonialMain{ padding:80px 10px 92px 10px; max-height:660px; } #TestimonialMain .testimonialIntra{ display:grid; grid-template-columns:335px minmax(0,1fr); align-items:center; gap:15px; } #TestimonialMain .reviewL{ min-width:0; } #TestimonialMain .reviewL .rating{ margin-bottom:15px; } #TestimonialMain .reviewHead{ display:flex; flex-direction:column; margin-bottom:13px; color:var(--fontLight); font:600 45px/50px var(--headingFont); padding-bottom:13px; } #TestimonialMain .reviewHead span{ display:block; text-transform:uppercase; color:var(--fontLight); letter-spacing:6px; font:600 17px/20px var(--siteFont); padding-bottom:10px; } #TestimonialMain .reviewTabs{ display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none; } #TestimonialMain .reviewTabs a{ display:inline-flex; align-items:center; justify-content:center; padding:16px 15px; border-radius:5px; background:#006b9f; color:var(--fontLight); font:400 17px/20px var(--siteFont); text-decoration:none; transition:background 0.25s ease,color 0.25s ease, transform 0.25s ease,box-shadow 0.25s ease; } #TestimonialMain .reviewTabs li:last-child a{ background:var(--themeThreeBg); color:var(--fontDark); } #TestimonialMain .reviewTabs a:hover, #TestimonialMain .reviewTabs li:last-child a:hover{ background:var(--themeTwoBg); color:var(--fontDark); transform:translateY(-3px); box-shadow:0 4px 10px rgba(0,0,0,0.12); } #TestimonialMain .reviewR{ min-width:0; position:relative; } #TestimonialMain .reviewWrap{ width:100%; } #TestimonialMain .reviewWrap ul{ display:flex; margin:0; list-style:none; padding:30px 0px; } #TestimonialMain .reviewWrap li .reviewBox{ min-width:0; min-height:250px; padding:36px 24px 19px; border-radius:20px; background:var(--fontLight); color:var(--fontDark); text-align:center; transition:transform 0.3s ease,box-shadow 0.3s ease; margin:0 3px; } #TestimonialMain .reviewWrap li .reviewBox:hover{ transform:translateY(-4px); box-shadow:0 8px 20px rgba(0,0,0,0.08); } #TestimonialMain .reviewWrap li .reviewBox::before, #TestimonialMain .reviewWrap li .reviewBox::after{ position:absolute; content:''; width:50px; height:41px; transition:transform 0.3s ease,opacity 0.3s ease; } #TestimonialMain .reviewWrap li .reviewBox::before{ background:url('https://assets.yourpractice.online/3365/start-quote.png') repeat scroll 0 0; top:-20px; left:18px; } #TestimonialMain .reviewWrap li .reviewBox::after{ background:url('https://assets.yourpractice.online/3365/end-quote.png') repeat scroll 0 0; right:18px; bottom:-23px; } #TestimonialMain .reviewWrap li .reviewBox:hover::before{ transform:translateY(-3px) scale(1.05); } #TestimonialMain .reviewWrap li .reviewBox:hover::after{ transform:translateY(3px) scale(1.05); } #TestimonialMain .reviewWrap .comments{ margin:0 0 10px; font:300 18px/30px var(--siteFont); font-style:italic; color:var(--fontDark); } #TestimonialMain .reviewWrap .comments a{ color:var(--themeTwoBg); display:inline-block; } #TestimonialMain .reviewWrap .patientName{ font:300 18px/30px var(--siteFont); color:var(--fontDark); } .reviewR .nbs-flexisel-nav-left::before, .reviewR .nbs-flexisel-nav-right::before{ color:var(--themeThreeBg); } #TestimonialMain .reviewLogos{ margin-top:72px; } #TestimonialMain .reviewLogos ul{ display:grid; grid-template-columns:1fr 1fr 1fr; margin:0; padding:0; list-style:none; } #TestimonialMain .reviewLogos li{ min-width:0; display:flex; align-items:center; justify-content:center; padding:0 14px; border-right:1px solid #577589; transition:transform 0.25s ease,opacity 0.25s ease; } #TestimonialMain .reviewLogos li img{ transition:transform 0.25s ease; } #TestimonialMain .reviewLogos li:hover img{ transform:translateY(-5px); } #TestimonialMain .reviewLogos li:first-child{ padding-left:0; } #TestimonialMain .reviewLogos li:last-child{ padding-right:0; border-right:0; } #TestimonialMain .reviewLogos a{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; color:var(--fontLight); text-decoration:none; transition:opacity 0.25s ease; } #TestimonialMain .reviewLogos span{ color:var(--fontLight); font:300 18px/30px var(--siteFont); } #ResourceBg::before{ content:''; width:100%; height:335px; bottom:0; left:0; right:0; background:var(--themeFourBg); position:absolute; } #ResourceMain{ padding:109px 10px 90px 10px; } #ResourceMain .resourceHead,#LocationMain .locationHead{ text-align:center; font:600 45px/50px var(--headingFont); color:var(--fontDark); padding-bottom:16px; } #ResourceMain .resourceHead span{ display:block; text-transform:uppercase; color:var(--themeFourBg); letter-spacing:7px; font:600 17px/20px var(--headingFont); padding-bottom:27px; } #ResourceMain .eduWraper{ background:var(--fontLight); border-radius:24px; box-sizing:border-box; padding:15px; } .edubluebg{ display:grid; grid-template-columns:minmax(0,770px) minmax(0,1fr); gap:19px; width:min(1170px,100%); margin:38px auto 0; padding:0; border-radius:24px; box-sizing:border-box; background:var(--themeOneBg); } #ResourceMain .eduIntraL{ position:relative; min-width:0; min-height:490px; overflow:hidden; border-radius:10px; } #ResourceMain .eduImage, #ResourceMain .eduImage a{ display:block; width:100%; height:100%; } #ResourceMain .eduImage img{ display:block; width:100%; height:100%; min-height:258px; object-fit:cover; object-position:center; transition:transform 0.5s ease,filter 0.5s ease; } #ResourceMain .eduImage:hover img{ transform:scale(1.03); filter:brightness(0.92); } #ResourceMain .eduImage a{ display:block; } #ResourceMain .eduMore{ position:absolute; right:18px; bottom:16px; z-index:1; } #ResourceMain .eduMore a{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:5px 28px; box-sizing:border-box; border-radius:10px; background:var(--themeOneBg); color:var(--fontLight); font:500 18px/22px var(--siteFont); text-align:center; text-decoration:none; transition:background .3s ease,transform .3s ease,box-shadow .3s ease; } #ResourceMain .eduMore a:hover{ background:var(--themeTwoBg); color:var(--fontDark); transform:translateY(-3px); box-shadow:0 5px 12px rgba(10,53,81,.2); } #ResourceMain .resourceR{ display:flex; align-items:center; justify-content:center; min-width:0; padding:10px 26px 10px 10px; } #ResourceMain .resourceR ul{ display:grid; gap:15px; width:100%; margin:0; padding:24px 12px; list-style:none; border-radius:19px; background:var(--fontLight); } #ResourceMain .resourceR li{ min-width:0; border-radius:7px; background:#d9ebf5; transition:background .25s ease,transform .25s ease; } #ResourceMain .resourceR li:hover{ background:var(--themeTwoBg); transform:translateX(3px); } #ResourceMain .resourceR li a{ display:flex; align-items:center; gap:11px; min-height:50px; padding:17px 18px; color:var(--fontDark); font:500 18px/22px var(--siteFont); text-decoration:none; } #ResourceMain .resourceR li a span{ display:block; flex:0 0 55px; width:55px; height:51px; background-position:center !important; background-repeat:no-repeat !important; background-size:contain !important; } #ResourceMain .resourceR li:hover span{ filter:brightness(0); } #ResourceMain .resourceR .res1 span{ background:url(https://assets.yourpractice.online/3365/res1-icon.png); } #ResourceMain .resourceR .res2 span{ background:url(https://assets.yourpractice.online/3365/res2-icon.png); } #ResourceMain .resourceR .res3 span{ background:url(https://assets.yourpractice.online/3365/res3-icon.png); } #ResourceMain .resourceR .res4 span{ background:url(https://assets.yourpractice.online/3365/res4-icon.png); } #MediaMain{ padding:100px 10px 70px; } #MediaMain .mediaWrapper{ display:grid; grid-template-columns:328px minmax(0,1fr); gap:18px; align-items:start; width:min(1200px,100%); margin:0 auto; } #MediaMain .mediaL{ min-width:0; padding:33px 10px 10px 35px; } #MediaMain .mediaHead{ font:600 45px/50px var(--headingFont); color:var(--fontDark); padding-bottom:10px; } #MediaMain .mediaHead span{ display:block; text-transform:uppercase; color:var(--themeFourBg); letter-spacing:6px; font:600 17px/22px var(--headingFont); padding-bottom:12px; } #MediaMain .mediaMore{ margin-top:10px; } #MediaMain .mediaMore a{ display:inline-flex; align-items:center; justify-content:center; min-height:49px; padding:6px 26px; border-radius:6px; background:#006b98; color:var(--fontLight); font:400 16px/18px var(--siteFont); text-decoration:none; transition:background .25s ease,transform .25s ease; } #MediaMain .mediaMore a:hover{ background:#0a3551; transform:translateY(-2px); } #MediaMain .mediaR{ min-width:0; } .mediaR ul{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:25px; margin:0; padding:0; list-style:none; } .mediaR li{ min-width:0; } .mediaR .mediaVideo{ position:relative; display:block; overflow:hidden; border-radius:12px; background:#0a3551; aspect-ratio:16 / 9; cursor:pointer; } .mediaR .mediaVideo img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .45s ease,opacity .35s ease; } .mediaR .mediaVideo:hover img{ transform:scale(1.06); opacity:.78; } .mediaR .playIcon{ position:absolute; top:50%; left:50%; display:flex; align-items:center; justify-content:center; width:66px; height:48px; border-radius:12px; background:#e62117; transform:translate(-50%,-50%); transition:background .3s ease,transform .3s ease; } .mediaR .playIcon::before{ content:""; width:0; height:0; margin-left:4px; border-top:9px solid transparent; border-bottom:9px solid transparent; border-left:14px solid #fff; } .mediaR .mediaVideo:hover .playIcon{ background:var(--themeTwoBg); transform:translate(-50%,-50%) scale(1.1); } .mediaR .mediaCaption{ padding:14px 2px 0; color:var(--fontDark); font:400 16px/25px var(--siteFont); text-align:center; } .videoPopup{ position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; padding:25px; background:rgba(5,15,25,.88); backdrop-filter:blur(7px); opacity:0; visibility:hidden; transition:opacity .3s ease,visibility .3s ease; } .videoPopup.active{ opacity:1; visibility:visible; } .videoPopupBox{ position:relative; width:min(100%,1000px); overflow:visible; border-radius:14px; background:#000; box-shadow:0 25px 80px rgba(0,0,0,.45); transform:translateY(20px) scale(.97); transition:transform .3s ease; } .videoPopup.active .videoPopupBox{ transform:translateY(0) scale(1); } .videoPopup .videoFrame{ overflow:hidden; width:100%; aspect-ratio:16 / 9; border-radius:14px; background:#000; } .videoPopup .videoFrame iframe{ display:block; width:100%; height:100%; border:0; } .videoPopup .videoClose{ position:absolute; top:-48px; right:0; display:flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; border:1px solid rgba(255,255,255,.45); border-radius:50%; background:rgba(255,255,255,.12); color:#fff; font:32px/1 Arial,sans-serif; cursor:pointer; transition:background .25s ease,transform .25s ease; } .videoPopup .videoClose:hover{ background:#e62117; transform:rotate(90deg); } .videoPopup .videoClose:focus-visible{ outline:3px solid #fff; outline-offset:3px; } .videoPopup .videoPrev{ left:20px; } .videoPopup .videoNext{ right:20px; } .videoPopup .videoNav{ position:absolute; top:50%; z-index:5; display:flex; align-items:center; justify-content:center; width:30px; height:30px; padding:0; border:1px solid rgba(255,255,255,.4); border-radius:50%; background:var(--themeThreeBg); color:#000; font-size:16px; cursor:pointer; transform:translateY(-50%); transition:background .25s ease,transform .25s ease; } .videoPopup .videoPrev:hover{ background:var(--themeTwoBg); transform:translateY(-50%) scale(1.1); } .videoPopup .videoNext:hover{ background:var(--themeTwoBg); transform:translateY(-50%) scale(1.1); } .videoPopup .videoNav:disabled{ opacity:.4; cursor:not-allowed; } .videoPopup .videoNav:focus-visible{ outline:3px solid #fff; outline-offset:3px; } .mediaR .mediaVideo:focus-visible{ outline:3px solid #0a3551; outline-offset:4px; } #LocationMain{ padding:45px 20px 55px; background:var(--fontLight); } #LocationMain .locationHead{ margin-bottom:85px; } #LocationMain .locationHead span{ display:block; text-transform:uppercase; color:var(--themeFourBg); letter-spacing:7px; font:600 17px/20px var(--headingFont); padding-bottom:15px; } #LocationMain .mapWrapper{ display:grid; grid-template-columns:minmax(0,1fr) 444px; gap:30px; align-items:stretch; width:min(1200px,100%); margin:0 auto; } #LocationMain .locationInfo{ display:flex; flex-direction:column; justify-content:space-between; min-width:0; } #LocationMain .locationList{ display:grid; gap:16px; margin:0; padding:0; list-style:none; } #LocationMain .locationList > li{ display:grid; grid-template-columns:minmax(326px,.95fr) minmax(0,1fr); gap:25px; align-items:center; min-width:0; } #LocationMain .mapImage{ width:326px; min-width:0; overflow:hidden; aspect-ratio:1.85 / 1; border-radius:15px; background:#e8edf0; } #LocationMain .mapImage img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .35s ease; } #LocationMain .locationList > li:hover .mapImage img, #LocationMain .locationList > li.Map_here .mapImage img{ transform:scale(1.04); } #LocationMain .locationList > li .locationDetails{ min-width:0; padding:2px 0 12px 50px; border-bottom:1px solid #ddd; } #LocationMain .locationList > li:last-child .locationDetails{ border-bottom:none; } #LocationMain .mapCaption{ margin:0 0 5px; font:700 16px/20px var(--siteFont); text-transform:uppercase; color:var(--fontDark); } #LocationMain .mapCaption a{ color:var(--fontDark); text-decoration:none; } #LocationMain .mapCaption a:hover{ color:var(--themeFourBg); } #LocationMain .mapAdd, #LocationMain .hours{ margin:0; color:var(--fontDark); font:400 16px/23px var(--siteFont); position:relative; } #LocationMain .mapAdd::before, #LocationMain .hours::before{ position:absolute; left:-49px; top:5px; width:32px; height:32px; content:''; } #LocationMain .mapAdd::before{ background:url(https://assets.yourpractice.online/3365/location-icon.png) no-repeat 0 0; } #LocationMain .hours::before{ background:url(https://assets.yourpractice.online/3365/location-hour-icon.png) no-repeat 0 0; } #LocationMain .mapAdd::after, #LocationMain .hours::after{ position:absolute; left:-10px; top:5px; width:1px; height:36px; content:''; background:#ccc; } #LocationMain .mapDir{ margin-top:4px; } #LocationMain .mapDir a{ color:#0466c8; font:400 16px/20px var(--siteFont); text-decoration:underline; text-underline-offset:2px; } #LocationMain .mapDir a:hover{ letter-spacing:1px; } #LocationMain .mapHours{ margin-top:8px; } #LocationMain .hourCaption{ margin-bottom:3px; color:var(--fontDark); font:500 16px/20px var(--siteFont); } #LocationMain .mapContacts ul{ display:grid; grid-template-columns:325px auto; gap:38px; align-items:center; margin:20px 0 0; padding:0; list-style:none; } #LocationMain .mapappoint a{ display:flex; align-items:center; justify-content:center; min-height:52px; padding:7px 12px; border-radius:8px; background:#0a3551; color:var(--fontLight); font:600 17px/20px var(--siteFont); text-align:center; text-decoration:none; text-transform:uppercase; transition:background .25s ease; } #LocationMain .mapappoint a::before{ content:""; display:inline-block; width:24px; height:25px; transition:transform 0.3s ease,filter 0.3s ease; vertical-align:middle; margin-right:8px; background:url(https://assets.yourpractice.online/3365/appoint-icon.png) no-repeat 0 0; } #LocationMain .mapappoint a:hover{ background:#006b98; } #LocationMain .mapCall{ white-space:nowrap; color:var(--fontDark); font:400 26px/30px var(--siteFont); } #LocationMain .mapCall a{ color:inherit; text-decoration:none; } #LocationMain .mapCall a:hover{ color:var(--themeFourBg); } #LocationMain .mapCall::before{ content:""; display:inline-block; background:url(https://assets.yourpractice.online/3365/location-cal.png) scroll no-repeat; height:22px; width:22px; transition:transform 0.3s ease,filter 0.3s ease; vertical-align:middle; margin-right:8px; } #LocationMain .mapVisual{ position:relative; width:444px; min-width:0; height:493px; } #LocationMain #Slider2, #LocationMain #Slider2 > li{ width:100%; height:100%; margin:0; padding:0; list-style:none; } #LocationMain .map1{ background:url(https://assets.yourpractice.online/3365/map1-m.png) no-repeat right top; } #LocationMain .map1 .theme-R{ background:url(https://assets.yourpractice.online/3365/map1-r.jpg) no-repeat left top; } #LocationMain .map2{ background:url(https://assets.yourpractice.online/3365/map2-m.png) no-repeat right top; } #LocationMain .map2 .theme-R{ background:url(https://assets.yourpractice.online/3365/map2-r.jpg) no-repeat left top; } @media (max-width:1106px){ .bannerDiv{ width:60%; right:15px; } .banner1 .bannerDiv{ width:51%; } .bannerHead{ font-size:34px; line-height:38px; } .bannerText p{ font-size:18px; line-height:1.6; } .bannerTabs{ bottom:40px; } #DrMain{ grid-template-columns:minmax(0,40%) minmax(0,1fr); gap:25px; } #DrMain .drImage{ height:auto; min-height:550px; } #DrMain h1{ font-size:45px; line-height:1.15; } #DrMain .drTabs{ grid-template-columns:minmax(150px,200px) minmax(0,1fr); gap:12px; } #EducationMain .educationTabs li{ padding:0 15px; } #EducationMain .eduCaption{ font-size:13px; letter-spacing:2px; white-space:normal; } #SpecialsedMain .mobilityWrap{ grid-template-columns:minmax(0,1fr) minmax(0,45%); gap:35px; } #SpecialsedMain .mibilityHead{ font-size:34px; line-height:1.2; } #SpecialsedMain .mobilityTabs a{ min-width:0; box-sizing:border-box; } #TestimonialMain .testimonialIntra{ grid-template-columns:minmax(260px,32%) minmax(0,1fr); gap:20px; } #TestimonialMain .reviewHead{ font-size:36px; line-height:1.2; } #TestimonialMain .reviewTabs a{ padding:13px 12px; font-size:15px; } #TestimonialMain .reviewLogos{ margin-top:70px; } #DrMain{ min-height:657px; } #DrMain .drDetails{ margin:0 0 22px; font:300 17px/28px var(--siteFont); } .edubluebg{ grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); } #MediaMain .mediaWrapper{ grid-template-columns:280px minmax(0,1fr); } #MediaMain .mediaL{ padding-left:15px; } #LocationMain .mapWrapper{ grid-template-columns:minmax(0,1fr) 38%; gap:20px; } #LocationMain .mapVisual{ width:100%; height:auto; min-height:420px; } #LocationMain .locationList > li{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; } #LocationMain .mapImage{ width:100%; } #LocationMain .locationList > li .locationDetails{ padding-left:40px; } #LocationMain .mapAdd::before, #LocationMain .hours::before{ left:-39px; } #LocationMain .mapContacts ul{ grid-template-columns:minmax(0,1fr) auto; gap:20px; } #LocationMain .mapCall{ font-size:22px; } } @media (max-width:900px){ .bannerDiv{ width:100%; right:0; text-align:center; background:rgba(255,255,255,.6); padding:10px 10px 17px 10px; } .bannerHead{ padding-bottom:11px; } .serviceWrapper{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto; gap:22px; } .serviceCard.hip, .serviceCard.general, .serviceCard.fracture, .serviceCard.nonsurgical{ grid-column:auto; grid-row:auto; min-height:313px; } .serviceCard.knee{ grid-column:1 / -1; grid-row:auto; min-height:480px; background-position:center 35%; } .serviceCard.knee .kneeContent{ margin-top:auto; } .banner1 .bannerDiv{ width:80%; top:50%; } .bannerText p{ font-size:16px; line-height:25px; } .servIntro{ width:100%; } .serviceHead{ font:600 35px/43px var(--headingFont); } #DrContainer{ background-position:center top; background-size:cover; } #DrMain{ display:flex; flex-direction:column; align-items:stretch; gap:0; padding:0 15px; } #DrMain .drImage{ width:100%; height:auto; max-height:480px; justify-content:center; border-bottom:5px solid #3d3d3d; box-shadow:0 8px 12px -6px rgba(0,0,0,0.35); } #DrMain .drImage img{ width:100%; height:auto; max-height:480px; object-fit:contain; object-position:center bottom; } #DrMain .drContent{ width:100%; box-sizing:border-box; padding:35px 0; text-align:center; } #DrMain .meet{ font-size:14px; line-height:1.5; letter-spacing:3px; } #DrMain h1{ font-size:36px; line-height:1.2; } #DrMain .board{ font-size:16px; line-height:1.5; } #DrMain .board span{ font-size:17px; line-height:1.5; } #DrMain .drDetails{ font-size:16px; line-height:1.8; margin-bottom:25px; } #DrMain .drTabs{ justify-items:center; } #DrMain .experience{ width:100%; max-width:220px; justify-content:center; } #DrMain .drBtns{ justify-content:center; gap:10px; } #DrMain .drBtns li{ align-self:auto; } #DrMain .drTabs{ grid-template-columns:1fr; } #EducationMain{ padding:45px 15px; } #EducationMain .educationTabs{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:25px 0; } #EducationMain .educationTabs li{ padding:0 18px; } #EducationMain .educationTabs li:nth-child(3){ border-right:0; } #EducationMain .educationTabs li:nth-child(4){ padding-left:0; } #SpecialsedMain{ padding:75px 15px; } #SpecialsedMain .mobilityWrap{ grid-template-columns:minmax(0,1fr) minmax(0,42%); gap:25px; } #SpecialsedMain .mobilityL{ padding-top:0; } #SpecialsedMain .mibilityHead{ font-size:30px; line-height:1.3; } #SpecialsedMain .mobilityL p{ margin-bottom:25px; line-height:1.7; } #SpecialsedMain .mobilityTabs a{ width:100%; padding:12px 15px; } #TestimonialMain{ padding:65px 15px; max-height:none; } #TestimonialMain .testimonialIntra{ grid-template-columns:minmax(0,1fr); gap:30px; } #TestimonialMain .reviewL{ text-align:center; } #TestimonialMain .reviewHead{ align-items:center; font-size:36px; line-height:1.2; padding-bottom:15px; } #TestimonialMain .reviewTabs{ justify-content:center; } #TestimonialMain .reviewLogos{ margin-top:55px; } #TestimonialMain .reviewWrap li .reviewBox{ min-height:220px; } .reviewR .nbs-flexisel-nav-left{ left:-12px; } .reviewR .nbs-flexisel-nav-right{ right:-12px; } #ResourceMain{ padding:75px 15px; } #ResourceMain .resourceHead, #LocationMain .locationHead, #MediaMain .mediaHead{ font-size:38px; line-height:44px; } #ResourceMain .eduWraper{ padding:12px; } .edubluebg{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:12px; margin-top:25px; } #ResourceMain .eduIntraL{ min-height:400px; } #ResourceMain .resourceR{ padding:10px; } #ResourceMain .resourceR ul{ gap:10px; padding:15px 10px; } #ResourceMain .resourceR li a{ gap:8px; padding:12px 8px; font-size:16px; line-height:21px; } #ResourceMain .resourceR li a span{ flex-basis:42px; width:42px; height:42px; } #MediaMain{ padding:65px 15px; } #MediaMain .mediaWrapper{ grid-template-columns:230px minmax(0,1fr); gap:20px; } #MediaMain .mediaL{ padding:15px 0; } .mediaR ul{ gap:18px; } #LocationMain{ padding:35px 15px 45px; } #LocationMain .locationHead{ margin-bottom:35px; } #LocationMain .mapWrapper{ grid-template-columns:minmax(0,1fr); gap:30px; } #LocationMain .mapVisual{ width:100%; min-height:0; height:450px; } #LocationMain .locationList > li{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } #LocationMain .mapContacts ul{ max-width:600px; } #LocationMain .mapVisual, #LocationMain .mapAdd::after, #LocationMain .hours::after{ display:none; } #LocationMain .locationList > li .locationDetails{ padding-left:52px; } #LocationMain .mapAdd::before, #LocationMain .hours::before{ left:-47px; } #MediaMain .mediaHead span{ letter-spacing:1px; font:600 17px/25px var(--headingFont); } } @media (max-width:767px){ #EducationMain{ padding:35px 15px; } #EducationMain .educationTabs{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:25px 0; } #EducationMain .educationTabs li{ min-height:0; padding:0 15px; gap:8px; } #EducationMain .educationTabs li:first-child, #EducationMain .educationTabs li:nth-child(odd){ padding-left:0; } #EducationMain .educationTabs li:nth-child(even){ padding-right:0; border-right:0; } #EducationMain .educationTabs img{ max-height:55px; width:auto; object-fit:contain; object-position:left center; } #EducationMain .eduCaption{ font-size:12px; line-height:1.6; letter-spacing:1.5px; } #SpecialsedMain{ padding:55px 15px; } #SpecialsedMain .specialisedHead{ font-size:34px; line-height:1.2; padding-bottom:25px; } #SpecialsedMain .specialisedHead span, #SpecialsedMain .mibilityHead span{ font-size:14px; line-height:1.5; letter-spacing:3px; padding-bottom:10px; } #SpecialsedMain .mobilityWrap{ grid-template-columns:minmax(0,1fr); gap:30px; } #SpecialsedMain .mobilityL{ grid-column:auto; grid-row:auto; padding-top:0; } #SpecialsedMain .mibilityHead{ font-size:28px; line-height:1.3; padding-bottom:18px; } #SpecialsedMain .mobilityL p{ font-size:16px; line-height:1.8; margin-bottom:22px; } #SpecialsedMain .mobilityTabs ul{ align-items:stretch; gap:10px; } #SpecialsedMain .mobilityTabs li{ width:100%; } #SpecialsedMain .mobilityTabs a{ display:flex; width:100%; min-width:0; min-height:0; box-sizing:border-box; padding:13px 15px; font-size:15px; line-height:1.5; } #SpecialsedMain .mobilityImageR{ width:100%; } #SpecialsedMain .mobilityImageR img{ display:block; width:100%; height:auto; } #TestimonialMain{ padding:50px 15px; } #TestimonialMain .testimonialIntra{ gap:25px; } #TestimonialMain .reviewHead{ font-size:32px; line-height:1.25; } #TestimonialMain .reviewHead span{ font-size:14px; line-height:1.5; letter-spacing:3px; } #TestimonialMain .reviewTabs{ gap:8px; } #TestimonialMain .reviewTabs a{ padding:12px 14px; font-size:15px; } #TestimonialMain .reviewWrap ul{ padding:25px 0; } #TestimonialMain .reviewWrap li .reviewBox{ min-height:0; padding:24px 20px; border-radius:15px; } #TestimonialMain .reviewWrap .comments{ font-size:16px; line-height:1.7; } #TestimonialMain .reviewWrap .patientName{ font-size:16px; line-height:1.6; } #TestimonialMain .reviewLogos{ margin-top:35px; } #TestimonialMain .reviewLogos ul{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px 0; } #TestimonialMain .reviewLogos li{ padding:0 10px; } #TestimonialMain .reviewLogos span{ font-size:14px; line-height:1.6; } #ResourceMain{ padding:55px 15px; } #ResourceMain .resourceHead, #LocationMain .locationHead, #MediaMain .mediaHead{ font-size:32px; line-height:38px; } #ResourceMain .resourceHead span, #LocationMain .locationHead span, #MediaMain .mediaHead span{ font-size:14px; line-height:20px; letter-spacing:4px; padding-bottom:10px; } #ResourceMain .eduWraper{ padding:10px; border-radius:16px; } .edubluebg{ grid-template-columns:minmax(0,1fr); gap:12px; margin-top:20px; border-radius:16px; } #ResourceMain .eduIntraL{ min-height:0; height:330px; } #ResourceMain .eduImage img{ min-height:0; } #ResourceMain .eduMore{ right:12px; bottom:12px; } #ResourceMain .eduMore a{ min-height:42px; padding:8px 20px; font-size:16px; } #ResourceMain .resourceR{ padding:10px; } #ResourceMain .resourceR ul{ gap:10px; padding:12px; border-radius:12px; } #ResourceMain .resourceR li a{ min-height:48px; padding:10px; font-size:16px; line-height:21px; } #MediaMain{ padding:50px 15px; } #MediaMain .mediaWrapper{ grid-template-columns:minmax(0,1fr); gap:25px; } #MediaMain .mediaL{ padding:0; text-align:center; } #MediaMain .mediaMore{ margin-top:12px; } .mediaR ul{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; } .mediaR .playIcon{ width:52px; height:38px; border-radius:9px; } .mediaR .playIcon::before{ border-top-width:7px; border-bottom-width:7px; border-left-width:11px; } .mediaR .mediaCaption{ padding-top:10px; font-size:15px; line-height:22px; } #LocationMain{ padding:30px 15px 40px; } #LocationMain .locationHead{ margin-bottom:25px; } #LocationMain .locationList{ gap:20px; } #LocationMain .locationList > li{ grid-template-columns:minmax(0,1fr); gap:12px; } #LocationMain .mapImage{ width:100%; aspect-ratio:16 / 9; } #LocationMain .locationList > li .locationDetails{ padding:5px 0 15px 42px; } #LocationMain .mapAdd::before, #LocationMain .hours::before{ left:-40px; } #LocationMain .mapAdd::after, #LocationMain .hours::after{ left:-12px; } #LocationMain .mapVisual{ height:380px; } .videoPopup{ padding:15px; } .videoPopup .videoClose{ top:-45px; width:36px; height:36px; font-size:28px; } .videoPopup .videoPrev{ left:8px; } .videoPopup .videoNext{ right:8px; } #EducationMain .educationTabs li,#EducationMain .educationTabs li:nth-child(3){ border-right:none; } } @media screen and (max-width:640px){ #Banner-Container{ padding-top:0px; } #Banner{ height:437px; } .bannerHead{ font-size:26px; line-height:33px; } .bannerMore{ margin-top:3px; } .bannerMore a{ min-width:132px; padding:10px 13px; } .banner1 .bannerText p{ display:none; } .serviceWrapper{ grid-template-columns:1fr; grid-template-rows:auto; gap:18px; } .serviceCard.hip, .serviceCard.general, .serviceCard.fracture, .serviceCard.nonsurgical, .serviceCard.knee{ grid-column:1; grid-row:auto; min-height:0; padding:22px 20px; } .serviceCard.knee{ min-height:440px; background-position:center; } .serviceCard.knee .kneeContent{ margin-top:auto; } .serviceCard .servIcon{ margin-bottom:25px; } .serviceCard.knee .servIcon{ margin-bottom:24px; } .servCaption a{ font-size:22px; } .serviceCard:hover{ transform:translateY(-2px); } #Banner .rslides .slider{ background-position:left -53px !important; } } @media screen and (max-width:480px){ .bannerHead{ font-size:21px; line-height:29px; padding-bottom:6px; } .banner1 .bannerDiv{ width:100%; } #DrMain h1{ font-size:30px; line-height:1.25; } #DrMain .drBtns{ flex-direction:column; align-items:center; } #DrMain .drBtns li{ width:100%; } #DrMain .drBtns a{ max-width:100%; box-sizing:border-box; } #EducationMain .educationTabs{ grid-template-columns:minmax(0,1fr); gap:22px; text-align:center; } #EducationMain .educationTabs li, #EducationMain .educationTabs li:first-child, #EducationMain .educationTabs li:nth-child(odd), #EducationMain .educationTabs li:nth-child(even), #EducationMain .educationTabs li:last-child{ padding:0; border-right:0; } #EducationMain .educationTabs img{ max-height:50px; object-position:center center; } #EducationMain .eduCaption{ font-size:12px; letter-spacing:2px; } #SpecialsedMain .specialisedHead{ font-size:29px; } #SpecialsedMain .mibilityHead{ font-size:25px; } #TestimonialMain .reviewHead{ font-size:28px; } #TestimonialMain .reviewTabs a{ padding:11px 12px; font-size:14px; } #TestimonialMain .reviewLogos ul{ grid-template-columns:minmax(0,1fr); gap:20px; } #TestimonialMain .reviewLogos li, #TestimonialMain .reviewLogos li:first-child, #TestimonialMain .reviewLogos li:last-child{ justify-content:center; padding:0; border-right:0; } #TestimonialMain .reviewLogos a{ align-items:center; text-align:center; } #ResourceMain{ padding:40px 12px; } #ResourceMain .resourceHead, #LocationMain .locationHead, #MediaMain .mediaHead{ font-size:27px; line-height:33px; } #ResourceMain .resourceHead span, #LocationMain .locationHead span, #MediaMain .mediaHead span{ font-size:14px; line-height:18px; letter-spacing:3px; } #ResourceMain .eduIntraL{ height:250px; } #ResourceMain .resourceR{ padding:5px; } #ResourceMain .resourceR ul{ padding:10px; } #ResourceMain .resourceR li a{ gap:10px; padding:10px 6px; font-size:15px; line-height:20px; } #ResourceMain .resourceR li a span{ flex-basis:38px; width:38px; height:38px; } #MediaMain{ padding:40px 12px 20px 12px; } .mediaR ul{ grid-template-columns:minmax(0,1fr); gap:22px; } .mediaR .mediaCaption{ font-size:16px; line-height:22px; } #LocationMain{ padding:25px 12px 0px; } #LocationMain .mapVisual{ height:300px; } #LocationMain .mapCall{ font-size:19px; line-height:25px; } #LocationMain .mapappoint a{ font-size:16px; } .videoPopup{ padding:12px; } .videoPopup .videoNav{ width:28px; height:28px; } #LocationMain .mapContacts ul{ text-align:center; grid-template-columns:1fr; } #EducationMain .educationTabs img{ object-position:center; } }:root[data-theme='light'], html[data-theme='light']{ --primarybgColor:#ffffff; --secondarybgColor:#cccccc; --textColor:#000000; --linkColor:#0000ee; --borderColor:#000000; } :root[data-theme='dark'], html[data-theme='dark']{ --primarybgColor:#000000; --secondarybgColor:#333333; --textColor:#ffffff; --linkColor:#ffcc00; --borderColor:#ffffff; } :root[data-theme='grey'], html[data-theme='grey']{ --primarybgColor:#cccccc; --secondarybgColor:#eeeeee; --textColor:#333333; --linkColor:#000000; --borderColor:#999999; } html[data-theme='grey'] .accessible_on #Container{ -webkit-filter:grayscale(100%); filter:grayscale(100%); } .dfwOff, .dfwOn{ display:none; } .adaActive.dfwOff, .adaActive.dfwOn{ display:block; } .dfwOff{ position:fixed; z-index:99999; left:10px; bottom:10px; width:60px; height:60px; } .dfwOff ul{ width:100%; height:100%; } .adaOn{ position:relative; z-index:1; width:100%; height:100%; display:block; } .adaOn a{ width:100%; height:100%; display:block; border-radius:100%; background:var(--themeOneBg); color:var(--fontLight); } .adaOn span{ width:100%; height:100%; display:block; font-family:'fontello'; font-size:36px; } .adaOn span::before{ content:'\f29a'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } .dfwOff li.adaClose{ position:absolute; } .dfwOff.adaHide{ left:-50px; } .adaClose{ font: bold 11px/24px Verdana, Arial, Helvetica, sans-serif; color:var(--fontLight); left:50%; top:50%; transform:translate(-50%,-50%); } .adaClose a{ border-radius:5px; display:block; padding:0px 10px; background:var(--themeOneBg); } .dfwOff:hover .adaClose, .dfwOff:focus .adaClose{ left:85%; transform:translate(0,-50%); } .dfwOff:focus-within .adaClose{ left:85%; transform:translate(0,-50%); } .dfwClose{ position:absolute; font: bold 11px/24px Verdana, Arial, Helvetica, sans-serif; left:50%; top:0px; z-index:-1; } .dfwClose a{ border-radius:0px 5px 5px 0px; display:block; padding:0px 10px; background:var(--primarybgColor); border:1px solid var(--borderColor); color:var(--textColor); } .dfwOn.adaActive.dfwHide .dfwClose{ visibility:visible; left:70%; } .dfwOn.adaActive.dfwHide .dfwClose a{ padding:0px 30px 0px 8px; } .dfwOn.adaActive.dfwHide .dfwClose a::before{ position:absolute; z-index:1; content:'\f29a'; left:calc(100% - 24px); top:50%; transform:translate(0,-50%); font:400 20px/24px 'fontello'; } .dfwOn:hover .dfwClose, .dfwOn:focus .dfwClose, .dfwOn.adaActive.dfwHide:hover .dfwClose, .dfwOn.adaActive.dfwHide:focus .dfwClose{ left:100%; } .dfwOn:focus-within .dfwClose, .dfwOn.adaActive.dfwHide:focus-within .dfwClose{ left:100%; } .dfwOn{ position:fixed; left:0px; top:50%; transform:translate(0,-50%); font:normal 12px/20px var(--siteFont); z-index:9999; width:200px; background:var(--primarybgColor); border:1px solid var(--borderColor); color:var(--textColor); } html[data-theme='grey'] .dfwOn{ background:var(--fontLight); } .dfwOn.adaActive li.dfwActive a{ background:var(--primarybgColor); color:var(--linkColor); } .dfwOn.dfwHide{ left:-200px; } .dfwOn li:not(:last-child){ border-bottom:1px dotted var(--borderColor); } .dfwOn li a{ padding:10px 15px; display:block; } .dfwOn li a::before{ margin-right:10px; } .dfwOff, .dfwOff.adaHide, .adaClose, .dfwOff:hover .adaClose, .dfwOff:focus .adaClose, .dfwClose, .dfwOn:hover .dfwClose, .dfwOn:focus .dfwClose, .dfwOn.adaActive.dfwHide:hover .dfwClose, .dfwOn.adaActive.dfwHide:focus .dfwClose, .dfwOn, .dfwOn.dfwHide{ -webkit-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out; } .dfwOff:focus-within .adaClose, .dfwOn:focus-within .dfwClose, .dfwOn.adaActive.dfwHide:focus-within .dfwClose{ -webkit-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out; } .dfwHead{ font:bold 14px/20px var(--siteFont); padding:15px; position:relative; z-index:1; background:var(--primarybgColor); } html[data-theme='grey'] .dfwHead{ background:var(--fontLight); } .dfwHide .dfwHide a{ padding-left:20px; } .dfwHide.dfwOn:hover .dfwHide, .dfwHide.dfwOn:focus .dfwHide{ right:-65px; } .dfwHide.dfwOn:focus-within .dfwHide{ right:-65px; } .dfwHide.dfwOn:hover .dfwHide a, .dfwHide.dfwOn:focus .dfwHide a{ padding-left:50px; } .dfwHide.dfwOn:focus-within .dfwHide a{ padding-left:50px; } .dfw-skip{ overflow:hidden; vertical-align:top; right:5px; top:0px; position:absolute; font:normal 12px/20px var(--siteFont); display:none; z-index:99; padding:2px; } .dfw-skip a{ display:block; padding:0px 5px; } .accessible_on a:focus{ outline:1px solid red; box-shadow:0px 0px 5px 2px rgba(255,0,0,0.2); outline-offset:1px; } .accessible_on a:focus-within{ outline:1px solid red; box-shadow:0px 0px 5px 2px rgba(255,0,0,0.2); outline-offset:1px; } html[data-theme='dark'] .accessible_on #Container.slideRight.slideContainer, html[data-theme='dark'] .accessible_on #Container.slideLeft.slideContainer{ background:rgba(255,255,255,0.4); } html[data-theme='light'] .accessible_on #Container.slideRight.slideContainer, html[data-theme='light'] .accessible_on #Container.slideLeft.slideContainer{ background:rgba(0,0,0,0.4); } html[data-theme='grey'] .accessible_on #Container.slideRight.slideContainer, html[data-theme='grey'] .accessible_on #Container.slideLeft.slideContainer{ background:rgba(204,204,204,0.4); } .accessible_on, .accessible_on #Accessibility, .accessible_on .dfw-skip, .accessible_on #gdpCookie, html[data-theme='grey'] .accessible_on #dfw-GreyMode.dfwActive a{ background:var(--primarybgColor); } .accessible_on #Container, .accessible_on #Container:not(a) *, .accessible_on #Container *:not(a), .accessible_on #gdpCookie, .accessible_on #gdpCookie *{ border-color:var(--borderColor) !important; color:var(--textColor); } .accessible_on #Container a, .accessible_on #Container a:hover, .accessible_on #Container a *, .accessible_on #Container a:hover *, .accessible_on #Container * a, .accessible_on #Container * a:hover, .accessible_on #Container * a *, .accessible_on #Container * a:hover *, .accessible_on #dfw-WhiteMode.dfwActive a, .accessible_on #gdpCookie a, .accessible_on #gdpCookie * a{ color:var(--linkColor) !important; transition:none !important; } .accessible_on #Container * u{ text-decoration:none !important; } .accessible_on .menu ul, .accessible_on .Wrapper{ background:var(--secondarybgColor); } .accessible_on .menu, .accessible_on .menu li.menu-home, .accessible_on .socLogo, .accessible_on .socLogo li{ width:auto; } .accessible_on .socLogo li, .accessible_on .menu li{ height:auto; } .accessible_on .socLogo li a{ border-radius:0px; padding:5px 10px; } .accessible_on .hr{ background:url(https://assets.yourpractice.online/3365/hr-b.gif) repeat-x left center; } html[data-theme='dark'] .accessible_on .hr{ background:url(https://assets.yourpractice.online/3365/hr-w.gif) repeat-x left center; } .accessible_on .textMain ul li{ background:url(https://assets.yourpractice.online/3365/bullet-b.gif) no-repeat 5px 15px; } html[data-theme='dark'] .accessible_on .textMain ul li{ background:url(https://assets.yourpractice.online/3365/bullet-w.gif) no-repeat 5px 15px; } .accessible_on [class*='logo'], .accessible_on #Container *::selection{ isolation:isolate; mix-blend-mode:difference; } .accessible_on #Container *:not(.menu *,.dfw-skip a,.textMain a){ color:inherit; } .accessible_on .theme-L, .accessible_on .theme-R, .accessible_on #Container *::after, .accessible_on #Container *:not(.font-icon,.notImg,.thankImg,[class$='icon'])::before, .accessible_on #Container [class$='Appoint'] span, .accessible_on #Container [class$='More'] span, .accessible_on #Container .menu-home a::before, .accessible_on .socLogo li a::before{ display:none; } .accessible_on .menu li.menu-home span, .accessible_on .socLogo li span, .accessible_on .dfw-skip{ display:block; } .accessible_on #Container *:not(.dfw-skip,.menu ul,.ypoLogo *,.logo *,.pdf-icon,.hr,.textMain li,.thankImg), .accessible_on .textMain *:not(.accessKeys) ul li, .accessible_on #gdpCookie *, .accessible_on .blogMain li[class^='blog-post'], .accessible_on .blogMain li[class^='pagelet-post']{ background:none !important; } .accessible_on [id$='Container']{ padding:0px !important; } .accessible_on [class$='More'] a, .accessible_on [class$='Appoint'] a, .accessible_on [class$='Tabs'] li a{ padding:10px 20px !important; } .accessible_on [class$='Appoint'] li, .accessible_on [class$='Tabs'] li, .accessible_on [class$='List'] li a{ padding:5px; } .accessible_on [class$='Head']{ padding-bottom:20px; } .accessible_on [class$='Sub']{ padding-bottom:10px; } .accessible_on .dfw-skip, .accessible_on #Sidebar, .accessible_on #gdpCookie, .accessible_on .socLogo li, .accessible_on [class$='More'] a, .accessible_on [class$='Appoint'] a, .accessible_on [class$='List']:not(.keysList) li a{ border:1px solid var(--borderColor); } .accessible_on header, .accessible_on nav, .accessible_on section, .accessible_on #Container > [id], .accessible_on #Container section > [id]{ border-bottom:1px solid var(--borderColor); } .accessible_on [class$='Tabs'] li a, .accessible_on [class$='Border'], .accessible_on #gdpCookie .cookie-main .cookie-button .accept{ border:2px solid var(--borderColor); } .accessible_on #Container > [id], .accessible_on #Container section > [id]{ padding:40px 20px; min-height:unset; height:auto; } .accessible_on [class$='Main']:not(.conMain){ min-height:unset; height:auto; width:auto; max-width:unset; display:block; margin:0px; border:0px; padding:0px; } html[data-theme='grey'] .accessible_on{ background:var(--fontLight); } @media screen and (max-width:640px){ .dfwOn li.table-cell{ text-align:center; padding:5px 0px; } .accessible_on .dfw-skip{ display:none; } }