.banner, .sliderDiv { padding: 0; height: 100%; position: relative } .banList li, .banner, .sliderDiv { position: relative } #Avoid, .banList { text-align: center } #Choose, #Choose .theme-L, #Choose .theme-R { background: #f6f7f9 } .avoidMore, .betterHead span, .betterMore, .hurtsMore li, .newsMore, .postDate, .postMore { text-transform: uppercase } .hurtsPara a, .locList p a, .locPara a, .postMore a { text-decoration: underline } #Avoid, #Better, #Choose, #Hurts, #Imaging, #Locations, #News, #Support { max-width: 1200px; min-width: 300px; margin: 0 auto; padding: 0; position: relative } #Banner { height: 700px } .banner { width: 100%; margin: 0; background-size: cover !important } .banList, .sliderDiv { width: 100%; min-width: 300px; margin: 0 auto } .sliderDiv { max-width: 1200px } .banContent { position: absolute; max-width: 590px; min-width: 300px; left: 10px; top: 42%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); padding: 10px; color: #fff; z-index: 10 } .avoidMain::after, .banList { left: 50%; position: absolute; transform: translateX(-50%) } .banHead { font: 400 64px/70px Albra, Helvetica, Arial, sans-serif } .banHead span { font: 400 44px/50px Albra, Helvetica, Arial, sans-serif; display: block } .banList li, .hurtsMain { display: inline-block; vertical-align: top } .banList { z-index: 9; bottom: 50px; max-width: 1200px; padding: 0 } .banList ul, .chooseDiv ul, .chooseMain, .hurtsMore ul, .supportList ul { font-size: 0px } .banList li { width: 33%; font: 500 24px/56px Albra, Helvetica, Arial, sans-serif } .banList li a { background: rgba(255, 255, 255, .8); display: block; border: 2px solid #fff; width: 95%; -webkit-transition: .3s; -moz-transition: .3s; -ms-transition: .3s; -o-transition: .3s; transition: .3s } .banList li a:hover { color: #fff; background: rgba(4, 131, 60, .8); border: 2px solid #04833c; -webkit-transition: .3s; -moz-transition: .3s; -ms-transition: .3s; -o-transition: .3s; transition: .3s } .banList li.orthoAppoint, .locSelect label { display: none } #Hurts { min-height: 800px; padding: 135px 0 50px } .hurtsMain { width: 40%; padding: 10px 0 30px } .hurtsHead { font: 400 64px/62px Albra, Helvetica, Arial, sans-serif; padding-bottom: 41px } .avoidHead span, .chooseSub span, .hurtsHead span, .imgHead span, .locHead span, .supportList li a { display: block } .avoidMore li, .betterMain, .betterMore li, .hurtsMore li { display: inline-block; vertical-align: top } .avoidPara, .betterPara, .hurtsPara, .imgPara { font: 400 19px/30px Avenir, Helvetica, Arial, sans-serif } .hurtsPara a, .locPara a { color: #007dc3 } .hurtsPara a:hover { color: #00853e; text-decoration: none } .hurtsPara p, .postDiv p { padding: 10px 0 20px } .hurtsMore { padding-top: 22px } .hurtsMore li { font: 700 16px/30px Avenir, Helvetica, Arial, sans-serif; margin: 3px } .hurtsMore li a { display: block; padding: 12.5px 20px; border: 1px solid #fff; -webkit-transition: .4s; -moz-transition: .4s; -ms-transition: .4s; -o-transition: .4s; transition: .4s } .hurtsMore li:nth-child(odd) a { border: 1px solid #d7d7d7; background: #00853f; color: #fff } .hurtsMore li:nth-child(2n) a { border: 1px solid #d7d7d7 } .hurtsMore li a:hover { background: #e7e9eb; color: #00853f; -webkit-transition: .4s; -moz-transition: .4s; -ms-transition: .4s; -o-transition: .4s; transition: .4s } .chooseDiv li:hover, .imgDiv, .imgDiv:hover { -webkit-transition: .3s; -moz-transition: .3s; -ms-transition: .3s; -o-transition: .3s } #Avoid { min-height: 560px; padding: 79px 0 40px } .avoidMain { border: 1px solid #a0a0a0; padding: 91px 11% 31px } .avoidMain::after { content: ''; top: 0; z-index: 1; width: 110px; height: 150px; background: url(/images/map-marker-lg.svg) center center no-repeat #fff } .betterImg::after, .betterMain::before { position: absolute; z-index: -1; content: '' } .avoidHead { font: 400 52px/50px Albra, Helvetica, Arial, sans-serif; padding-bottom: 27px } .avoidHead sup { font: 400 20px/30px Albra, Helvetica, Arial, sans-serif } .avoidMore { padding: 13px 0 0 } .avoidMore li, .betterMore li { font: 700 16px/30px Avenir, Helvetica, Arial, sans-serif } .avoidMore li a { display: block; padding: 10px 20px; color: #007dc3 } .avoidMore li a::after, .avoidMore li a::before, .betterMore li a::after, .betterMore li a::before { background: #00853e } .avoidMore li a:hover, .betterMore li a:hover { color: #00853e } .avoidMore li span, .betterMore li span { padding-left: 10px } #Better { min-height: 475px; text-align: right } .betterMain { text-align: left; width: 45%; padding: 20px } .betterMain::before { height: 100%; width: 275px; background: #f6f7f8; left: -45px; top: 0 } .betterImg { position: absolute; z-index: 1; left: 0; top: 50.4%; max-width: 535px; transform: translateY(-50%) } .betterImg::after { background: url(/images/health-dots-bg.png) no-repeat; width: 120px; height: 120px; right: -35px; bottom: -35px } .betterHead { font: 400 41px/50px Albra, Helvetica, Arial, sans-serif; padding-bottom: 32px } .betterHead span { display: block; font: 900 18px/30px Avenir, Helvetica, Arial, sans-serif; color: #00853e; padding-bottom: 11px } .locList .accordTitle:hover, .postMore a { color: #007dc3 } .betterMore { padding: 29px 0 20px } .betterMore li a { display: block; padding: 10px 10px 10px 0; color: #007dc3 } #Imaging { min-height: 820px; padding: 50px 0 } .imgMain ul { column-count: 2 } .imgMain li.imgList { vertical-align: top; padding: 7px } .imgDiv { padding: 39px 45px 20px; transition: .3s } .chooseDiv li:hover, .imgDiv:hover { transition: .3s } .chooseDiv li, .newsMain h2.resp-accordion a { -webkit-transition: .3s; -moz-transition: .3s; -ms-transition: .3s; -o-transition: .3s } .imgHead { font: 400 46px/50px Albra, Helvetica, Arial, sans-serif; padding-bottom: 19px } .imgMore, .newsCon ul { font-size: 0px } .imgAbout .imgDiv { background: #00853f; color: #fff; padding: 84px 50px 50px; min-height: 671px } .imgAbout .imgDiv:hover { background: rgba(0, 133, 63, .8) } .imgAbout .imgHead { padding-bottom: 47px } .imgMain li.imgList.imgRehab { padding-top: 20px } .imgService .imgDiv { background: #f6f7f8; min-height: 319px } .imgService .imgDiv:hover { background: #efefef } .imgRehab .imgDiv { background: #9fcbed; color: #fff; min-height: 322px } .imgRehab .imgDiv:hover { background: rgba(159, 203, 237, .8) } .imgList { position: relative } .imgMore { position: absolute; background: url(/images/touch-white.svg) center center no-repeat; opacity: .7; width: 34px; height: 34px; right: 20px; bottom: 20px; filter: invert(100%); -webkit-filter: invert(100%) } .choosePara, .chooseSub, .locSelect, .newsMore, .newsMore a, .sliderFlex { position: relative } .imgMore.reMore { opacity: .8; filter: none; -webkit-filter: none } .imgMore a { display: block; height: 100% } .chooseDiv li, .newsCon li, .postMain, .postMore { display: inline-block } #Choose { min-height: 650px; padding: 100px 0 50px } .chooseDiv, .chooseHead { display: inline-block; vertical-align: top } .chooseHead { width: 300px; font: 400 64px/66px Albra, Helvetica, Arial, sans-serif } .chooseDiv { width: calc(100% - 300px); text-align: right; padding-top: 4px } .chooseDiv li { vertical-align: top; width: 45%; padding: 10px 10px 40px; min-width: 280px; text-align: left; transition: .3s } #News, .newsCon ul { text-align: center } .chooseSub { font: 500 36px/37px Albra, Helvetica, Arial, sans-serif; padding: 0 0 0 20px } .chooseSub::before { content: ''; width: 5px; height: 100%; position: absolute; z-index: 1; background: #00853e; left: 0 } .choosePara { font: 400 19px/30px Avenir, Helvetica, Arial, sans-serif; padding: 20px } .chooseDiv li .choosePara::after { content: ''; position: absolute; z-index: 0; left: 0; top: 0; width: 5px; height: 0; background: #00853e; -webkit-transition: .2s; -moz-transition: .2s; -ms-transition: .2s; -o-transition: .2s; transition: .2s } #News { padding: 50px 0 20px } .newHead { font: 400 48px/50px Albra, Helvetica, Arial, sans-serif; padding-bottom: 37px } .newsMain .resp-tabs-list li { font: 600 18px/29px Avenir, Helvetica, Arial, sans-serif } .newsMain .resp-tabs-list li a { border-top: 6px solid transparent; border-bottom: 6px solid transparent; padding: 8px 28px } .newsMain h2.resp-accordion { font: 700 18px/30px Avenir, Helvetica, Arial, sans-serif; text-align: left; margin: 0; border-bottom: 1px dashed #00853f } .newsMain h2.resp-accordion a { background: #04833c; padding: 12px 30px; color: #fff; transition: .3s } .newsMain .resp-tabs-list li.resp-tab-active a, .newsMain .resp-tabs-list li:hover a { border-top: 6px solid #008540; border-bottom: 6px solid #008540 } .newsMain .resp-tabs-container h2.resp-tab-active a { background: #007dc3; -webkit-transition: .3s; -moz-transition: .3s; -ms-transition: .3s; -o-transition: .3s; transition: .3s } .newsMain .resp-tabs-list li:hover::before { content: ''; position: absolute; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%) } .newsMain .resp-tabs-list li.resp-tab-active::before, .newsMain .resp-tabs-list li:hover::before { border-top: 10px solid #008540; border-left: 10px solid transparent; border-right: 10px solid transparent; bottom: -5px } .resp-tabs-container.newsTab { padding: 10px } .newsCon li { vertical-align: top; width: 33.3%; min-width: 360px } .postMain { vertical-align: top; max-width: 350px; text-align: left; border: 1px solid #f2f2f2; border-top: 10px solid #00853f; min-height: 510px } .postImg { overflow: hidden } .postImg img { height: auto; width: 100% } .postDiv { padding: 40px 40px 10px; font: 400 18px/30px Avenir, Helvetica, Arial, sans-serif } .postDate { font: 400 16px/20px Avenir, Helvetica, Arial, sans-serif; color: #666; padding-bottom: 18px } .postHead, .postSub { font: 900 26px/28px Avenir, Helvetica, Arial, sans-serif; color: #0e0e0e } .postHead { min-height: 100px } .postSub { padding-bottom: 20px } .postMore { font: 900 16px/30px Avenir, Helvetica, Arial, sans-serif } .postMore a { display: block; padding: 5px 10px 5px 0 } .postMore a:hover { color: #008540 } .newsMore { font: 700 16px/30px Avenir, Helvetica, Arial, sans-serif; width: 300px; margin: 32px auto 20px } .newsMore::after, .newsMore::before { position: absolute; content: ''; top: 17px; width: 88px; height: 13px; z-index: 1 } .newsMore::after { right: -30px; background: url(/images/arrow-r.png) no-repeat } .newsMore::before { left: -30px; background: url(/images/arrow-l.png) no-repeat } .newsMore span { display: inline-block; vertical-align: top; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; transition: .5s } .newsMore:hover span { -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; transition: .5s } .newsMore a { display: block; padding: 12px 40px; background: #008540; color: #fff } .newsMore a:hover { background: 0 0; color: #008540 } .newsMore a::after, .newsMore a::before, .newsMore span::after, .newsMore span::before { background: #008540 } #Support { min-height: 330px; padding-top: 6px } .supportMain { text-align: center } .supportHead { font: 400 46px/50px Albra, Helvetica, Arial, sans-serif; padding-bottom: 60px } .supportList li { display: inline-block; vertical-align: middle } .supportList .nbs-flexisel-nav-left::before, .supportList .nbs-flexisel-nav-right::before { content: ''; position: absolute; width: 17px; height: 26px } #Locations { min-height: 780px; padding-top: 15px } .locTable { display: table; table-layout: fixed; width: 100% } .locCell { display: table-cell; vertical-align: top } .day, .hours_list, .inline, .time, .time-lists { display: inline-block } .locMain { width: 335px } .locHead { font: 400 48px/50px Albra, Helvetica, Arial, sans-serif; padding-bottom: 30px } .locPara { font: 400 19px/30px Avenir, Helvetica, Arial, sans-serif; padding-bottom: 23px } .locList, .locSelect select { font: 400 16px/30px Avenir, Helvetica, Arial, sans-serif } .locSelect { padding-bottom: 40px } .locSelect select { width: 100%; padding: 10px; margin: 0; border: 1px solid #e2e2e2; background: 0 0; -webkit-appearance: none } .locSelect::after { font-family: fontello; content: '\f107'; position: absolute; z-index: 1; right: 10px; top: 20% } .locList { overflow-y: scroll; height: 415px; scrollbar-width: thin; scrollbar-color: #000000 #aaaaaa; border: 1px solid #e3e3e3 } .locList li a { padding: 12px 40px 12px 10px; display: block; border-bottom: 1px solid #e3e3e3 } .locList .accordTitle { color: #111; padding: 0; letter-spacing: 0; font: 700 19px/26px Avenir, Helvetica, Arial, sans-serif } .locList .accordTitle.showAccord, .locList .textMainBold { font-weight: 600 } .locList .accordContent { padding: 10px 20px; font: 400 16px/20px Avenir, Helvetica, Arial, sans-serif } .locList .accordTitle::after { content: '\f107' } .locList .accordTitle.showAccord::after { content: '\f105' } .locList p { padding: 10px 0 0; font: 400 17px/26px Avenir, Helvetica, Arial, sans-serif } .locList p a { display: inline; color: #006ec3; padding: 0 } .locMap { text-align: right; padding: 10px 10px 10px 175px } @-webkit-keyframes scroll { 0% { transform: translateX(0) } 100% { transform: translateX(calc(-250px * 10)) } } @keyframes scroll { 0% { transform: translateX(0) } 100% { transform: translateX(calc(-250px * 10)) } } .sliderFlex { height: 200px; margin: auto; overflow: hidden; width: 100% } .sliderFlex::after, .sliderFlex::before { background: linear-gradient(to right, #fff 0, rgba(255, 255, 255, 0) 100%); content: ""; height: 100%; position: absolute; width: 50px; z-index: 2 } .sliderFlex::after { right: 0; top: 0; transform: rotateZ(180deg) } .sliderFlex::before { left: 0; top: 0 } .sliderFlex .slide-track { -webkit-animation: 40s linear infinite scroll; animation: 40s linear infinite scroll; display: flex; width: calc(250px * 50) } .sliderFlex .slide { height: 100px; width: auto; text-align: center; padding: 10px 20px } .hours_list { padding: 8px 0; width: 100% } .hours_list ul li.yellow { background: #fefdcc; padding: 10px 0 !important; font-weight: 700 } .closed_txt { font-weight: 700; font-size: 15px; color: red; margin-left: 82px } .open_txt { font-weight: 700; font-size: 15px; color: #398c45; margin-left: 77px } .day { vertical-align: top; width: 32% } .red { color: red !important } .green { color: green !important } .time { vertical-align: top; font-size: 17px } .space { margin-left: 89px } .small-txt { font-size: 13px } .time-lists { width: 68% } .date_differ { color: #a87249; font-weight: 700 } .no_margin { margin: 0 } .no_pad { padding: 0 } .open_status { cursor: pointer } .dropdown-content ul li { border-bottom: 1px solid #e3e3e3; padding: 10px 0 } .dropdown-content ul li:last-child { border-bottom: none } @media screen and (max-width:1200px) { .locMap { padding: 10px 10px 10px 150px } } @media screen and (max-width:1100px) { .banContent { max-width: 550px } .banHead, .hurtsHead { font: 400 60px/70px Albra, Helvetica, Arial, sans-serif } .hurtsHead span { display: inline } .hurtsMore li { display: block } .betterImg { width: 50%; max-width: inherit } .locMain { padding-left: 10px } .locMap { padding: 10px 10px 10px 60px } .postDate { padding-bottom: 15px } .postHead { font: 900 20px/28px Avenir, Helvetica, Arial, sans-serif } #Hurts { min-height: 840px } #Avoid { min-height: 560px } #Imaging { min-height: 800px } #News { padding: 50px 0 20px } #Support { min-height: 300px } #Locations { min-height: 790px } #Footer { padding: 50px 0 40px } #Choose { padding: 100px 10px 50px } } @media screen and (max-width:1000px) { .betterMain, .hurtsHead, .hurtsMore { text-align: center } .betterImg, .hurtsMore li { display: inline-block } .banContent { max-width: 500px } .avoidHead, .banHead, .chooseHead, .hurtsHead { font: 400 50px/60px Albra, Helvetica, Arial, sans-serif } .betterHead, .imgHead { font: 400 40px/50px Albra, Helvetica, Arial, sans-serif } .banList li { font: 500 20px/30px Albra, Helvetica, Arial, sans-serif } #Better, #Choose, #Hurts, #Imaging, #Locations, #News, #Support { padding: 50px 10px } .hurtsHead { padding-bottom: 20px } .hurtsPara { padding-top: 10px } #Avoid { min-height: auto; padding: 80px 10px 50px } .avoidMain { padding: 90px 20px 20px } .betterMain { width: 100%; padding: 0 } .betterMain::before { display: none } .betterImg { position: relative; left: auto; top: auto; transform: none; width: auto } .betterHead { padding: 70px 0 20px } .betterMore, .betterPara { padding: 10px 0 } #Imaging, #News { min-height: inherit } .imgAbout .imgDiv { padding: 40px } .locMap { padding: 10px 10px 10px 80px } } @media screen and (max-width:900px) { .chooseHead, .imgAbout .imgHead { padding-bottom: 20px } .avoidHead, .banHead, .chooseHead, .hurtsHead { font: 400 40px/50px Albra, Helvetica, Arial, sans-serif } .betterHead, .imgHead { font: 400 36px/40px Albra, Helvetica, Arial, sans-serif } .chooseSub { font: 500 30px/40px Albra, Helvetica, Arial, sans-serif } .chooseHead { display: block; width: auto } .chooseDiv { width: auto; text-align: left; padding: 0 } .chooseDiv li { width: 50% } .locMap { padding: 10px 10px 10px 50px } #Banner { height: 600px } } @media screen and (max-width:800px) { .banList li span, .locCell { display: block } #Better, #Choose, #Hurts, #Imaging, #Locations, #News, #Support { padding: 40px 10px } .avoidHead, .banHead, .chooseHead, .hurtsHead { font: 400 36px/40px Albra, Helvetica, Arial, sans-serif } .betterHead, .imgHead { font: 400 30px/40px Albra, Helvetica, Arial, sans-serif; padding-top: 40px } .chooseSub { font: 500 26px/30px Albra, Helvetica, Arial, sans-serif } #Banner { height: 500px } .banList { bottom: 10px } #Imaging, .resp-tabs-container.newsTab { padding: 0 } .imgMain ul { column-count: 1 } .imgHead span { display: inline } .imgAbout .imgDiv, .imgRehab .imgDiv, .imgService .imgDiv { padding: 40px; min-height: inherit } .imgMain li.imgList.imgRehab { padding-top: 5px } .imgMain li.imgList { padding: 5px } .locCell { width: auto } .locMap { padding: 10px 0 } } @media screen and (max-width:700px) { .avoidHead, .banHead, .chooseHead, .hurtsHead { font: 400 30px/40px Albra, Helvetica, Arial, sans-serif } .betterHead, .imgHead { font: 400 26px/30px Albra, Helvetica, Arial, sans-serif } .banContent { max-width: 380px } .chooseSub { font: 500 24px/30px Albra, Helvetica, Arial, sans-serif } } @media screen and (max-width:640px) { #Better, #Choose, #Hurts, #Imaging, #Locations, #News, #Support { padding: 30px 10px } #Banner { height: auto } #Banner .banner { height: 300px } #Banner .sliderDiv { background: rgba(0, 0, 0, .4) } .banContent { width: 100%; max-width: inherit; left: 0; margin: auto; top: 0; transform: none; height: 100% } .banHead { width: 90%; position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); text-align: left; font: 400 30px/40px Albra, Helvetica, Arial, sans-serif } .hurtsMore { padding: 0; text-align: center } #Avoid { padding: 50px 10px 10px } .avoidMain { padding: 35px 10px 10px; position: relative } .avoidMain::after { width: 50px; background-size: 100%; height: 75px; top: -40px } .avoidMore li, .betterMore li { font: 600 14px/30px Avenir, Helvetica, Arial, sans-serif } .avoidMore li a { padding: 10px 0 } .chooseDiv li { width: 100%; padding: 10px } .chooseSub span { display: inline } .choosePara { padding: 10px 20px } .locHead, .newHead, .supportHead { padding-bottom: 20px } .chooseMain { padding: 0 } .hurtsMore li a { padding: 10px } .postHead, .postMain { min-height: auto } .chooseDiv { padding: 20px 0 0 } .chooseHead { padding: 8px 0 20px 5px; font: 400 36px/36px Albra, Helvetica, Arial, sans-serif } .newHead { font: 400 40px/40px Albra, Helvetica, Arial, sans-serif } #Locations, #News { padding-bottom: 30px } .newsMore { margin: 50px auto 20px } .locList li a { padding: 10px; text-align: left } #Locations { padding-top: 0 } .betterPara { padding: 11px 0 0 } .locMap { text-align: center; padding: 10px 0 } .resp-arrow, .textMain .resp-arrow { left: calc(100% - 45px) } .betterImg::after { display: none } } @media screen and (max-width:540px) { .imgMore, .nbs-flexisel-nav-right { right: 10px } #Better, #Choose, #Hurts, #Imaging, #Locations, #News, #Support { padding: 20px 10px } .avoidHead, .banHead, .chooseHead, .hurtsHead { font: 400 26px/30px Albra, Helvetica, Arial, sans-serif } .locHead, .newHead, .supportHead { font: 400 36px/40px Albra, Helvetica, Arial, sans-serif } .banList { position: relative; bottom: 0; left: 0; transform: none } .banList li { width: 100%; border-bottom: 5px solid #f4f2f2 } .banList li a { background: #fff; border: 0; width: 100%; padding: 10px 0 } .banList li a:hover { border: 0 } .avoidHead span, .banList li span, .chooseSub span { display: inline } .banList li.orthoAppoint, .hurtsMore li, .newHead span, .supportHead span { display: block } .banList li.orthoAppoint a { color: #a73617; background: #efefef } .hurtsHead { padding: 20px 0 0 } .hurtsPara { padding-top: 20px } .imgAbout .imgDiv, .imgRehab .imgDiv, .imgService .imgDiv { padding: 20px } .chooseDiv li { width: 100%; padding: 10px 10px 15px } #News { padding: 30px 0 10px } .supportHead { padding-bottom: 15px } #Support { min-height: auto; padding-bottom: 40px } .locHead { text-align: center } .locPara { text-align: left } #Choose { padding: 30px 15px 10px 10px; min-height: auto } .imgMore { bottom: 10px } .nbs-flexisel-nav-left { left: 10px } .locSelect { padding-bottom: 30px } #map { height: 350px !important } } @media screen and (max-width:376px) { .avoidMore li { width: 80%; font: 600 14px/20px Avenir, Helvetica, Arial, sans-serif } }