.exPatient, .newPatient { text-align: left; background: #f4f4f4 } .drAppoint a, .hospMain { vertical-align: top; display: inline-block } .docMore, .drAppoint { text-transform: uppercase } #Doctors, #Hospital, #Staff, #Team { max-width: 1200px; min-width: 300px; margin: 0 auto; padding: 0; position: relative } #Hospital { min-height: 470px; padding-bottom: 20px } .drPatient { width: 280px } .red { color: red!important } .green { color: green!important } .newPatient { padding: 30px 15px 30px 30px; font: 400 18px/30px Avenir, Helvetica, Arial, sans-serif } .patHead { font: 700 24px/24px Avenir, Helvetica, Arial, sans-serif; padding-bottom: 20px } .patHead span { display: block } .patForms li a { color: #007dc3; padding: 5px; display: block; text-decoration: underline } .patForms li:last-child a::after { position: relative; content: ''; width: 20px; height: 20px; display: inline-block; vertical-align: text-bottom; margin-left: 7px; background: url(/images/pdf-icon.png) center center no-repeat } .hospMain a:hover, .patForms li a:hover, .patResources li a:hover { color: #04833c; text-decoration: none } .drCall a, .hospList li a:hover, .hospMain a, .patResources li a { text-decoration: underline } .exPatient { padding: 35px 20px 35px 30px; margin: 15px 0 0; font: 500 18px/25px Avenir, Helvetica, Arial, sans-serif } .patResources li { background: url(/images/bullet-b.png) 5px 15px no-repeat } #Sidebar, .docMore a, .drAppoint a, .hospList:hover .docImg { background: #00853f } .patResources li a { color: #007dc3; padding: 5px 5px 5px 30px; display: block } .drAppoint { padding: 20px 0 0; font: 900 16px/20px Avenir, Helvetica, Arial, sans-serif; text-align: center } .drAppoint a { color: #fff; padding: 20px 25px; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; transition: .5s } .docImg, .popOnline { -webkit-transition: .3s; -moz-transition: .3s; -ms-transition: .3s; -o-transition: .3s } .drAppoint a:hover { background: #f4f4f4; color: #111 } .drCall { font: 500 18px/30px Avenir, Helvetica, Arial, sans-serif } .drCall a, .hospMain a { color: #007dc3 } .drCall a:hover, .popOnline a, .textMain .getDirections a { text-decoration: none } .hospProfile { text-align: right } .hospMain { text-align: left; width: 47%; font: 400 18px/30px Avenir, Helvetica, Arial, sans-serif; padding: 0 55px 0 0; min-height: 575px } .docImg, .hospImg { overflow: hidden; text-align: center } #Doctors, #Staff, .hospAdd, .hospContact, .hospMain h1, .hospTime { padding-bottom: 20px } .hospSpace { width: 59.5% } .hospMain h1 { font: 500 48px/60px Albra, Helvetica, Arial, sans-serif } .hospImg { position: absolute; width: 575px; left: -150px; top: 0; height: auto; float: left } #Article, .docImg, .docImg img, .hospDiv, .mapImg { position: relative } .hospReview iframe { margin: 0; padding: 0; width: 100%; height: 50px; display: block } #Article { max-width: 1200px; margin: 0 auto; padding: 0 20px 20px; width: 100% } .textMain { padding: 0 } #Sidebar { width: 200px; padding: 40px 20px; position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position: -o-sticky; position: sticky; left: 0; top: 150px; z-index: 10; float: left } .hospHead { color: #fff; font: 900 16px/24px Avenir, Helvetica, Arial, sans-serif; padding-bottom: 16px } .hospList li { color: #fff; font: 400 18px/30px Avenir, Helvetica, Arial, sans-serif } .hospList li a { display: block; padding: 10px 0 } .mapImg { float: right; margin: -50px 0 0 20px; height: 500px; width: 400px; border: 1px solid #eee; padding: 7px;} .mapImg.noDirection { margin: 0 0 0 20px } .mapImg iframe { padding: absolute; z-index: 0; width: 100%; height: 100%; left: 0; top: 0; border: 0 } .getDirections { padding: 10px 0 20px } .mapImg .gm-style-iw-d div>div>p:first-of-type { font-weight: 700 } .mapImg .gm-style-iw-d { overflow: none!important } .mapImg .gm-style .gm-style-iw-c { padding: 30px 35px!important }.hospServices{max-width: 650px;}.hospServices ul {column-count: 2}.hospServices li { /*display: inline-block; width:48%; min-width: 200px;vertical-align:top;*/break-inside: avoid; } #Doctors h2, #Staff h2 { font: 500 42px/50px Albra, Helvetica, Arial, sans-serif; padding: 20px 0 15px 10px } .hospCon { padding: 10px 0 } .hospCon>ul { margin: 0; padding: 0; font-size: 0px } .hospCon .hospList { margin: 0; padding: 150px 0 0; background: 0 0; width: 25%; min-width: 300px; display: inline-block; vertical-align: top } .hospDiv { width: 95%; margin: 0 auto; border: 1px solid #e1e1e1; border-bottom: 10px solid #e1e1e1; padding: 0 0 100px; font: 400 16px/30px Avenir, Helvetica, Arial, sans-serif; min-height: 500px } .docImg { width: 80%; height: 245px; margin: -115px auto 0; transition: .3s; background: #ebeae8; padding-bottom: 10px } .popOnline, .popOnline:hover { background: rgba(0,0,0,.5) } .docImg img { top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%) } .popOnline { color: #ccc; position: absolute; left: 0; top: 100%; text-align: left; z-index: -1; width: 100%; font: 600 16px/30px Avenir, Helvetica, Arial, sans-serif; visibility: hidden; transition: .3s; display: none } .hospList:hover .popOnline { visibility: visible; z-index: 1; top: auto; bottom: 0; -webkit-transition: .3s; -moz-transition: .3s; -ms-transition: .3s; -o-transition: .3s; transition: .3s } .popOnline a { color: #fff; display: block; padding: 5px 6px } .popOnline a:hover { color: #fff } .popOnline::after { color: #fff; content: '\e805'; position: absolute; right: 7px; font-family: fontello; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%) } .docWrap { padding: 20px 30px; position: relative } .hospCon h3 { color: #007dc3; font: 900 20px/24px Avenir, Helvetica, Arial, sans-serif; padding: 0 20px 20px 0; min-height: 80px } .staffpara { min-height:25px } .docPhoneWrap { padding: 10px 10px 10px 20px; font: 600 18px/24px Avenir, Helvetica, Arial, sans-serif; color: #006ec3 } .docMore { position: absolute; z-index: 1; left: 0; bottom: 20px; width: 100%; text-align: center; font: 700 16px/30px Avenir, Helvetica, Arial, sans-serif } .docMore a { display: inline-block; vertical-align: middle; padding: 10px 20px; color: #fff } #Staff .docImg { width: 82%; }#Content-Container {display: flex;align-items: flex-start;}section {width: 100%;} /*@media screen and (max-width:1650px) { #Article { padding: 0 20px 20px 50px } } @media screen and (max-width:1550px) { #Article { padding: 0 20px 20px 100px } } @media screen and (max-width:1450px) { #Article { padding: 0 20px 20px 150px } } @media screen and (max-width:1350px) { #Article { padding: 0 20px 20px 200px } }*/ @media screen and (max-width:1200px) { #Hospital { padding: 0 10px 20px } #Content { padding: 0 10px 50px } #Doctors { padding: 0 10px } .hospMain { width: 45%; padding: 0 20px 0 0 } .hospSpace { width: 59% }} @media screen and (max-width:1170px) {} @media screen and (max-width:1100px) { .hospTable .table-cell { display: block }#Sidebar {margin-right: 50px;}.mapImg {float: none;margin: 20px auto;
} .hospMain { width: 50%; min-height: 550px } .hospImg { width: 50%; left: -50px } .drPatient, .mapImg { width: 100% } .hospSpace .hospImg { left: -110px } .exPatient, .newPatient { padding: 30px } .hospSide { padding: 60px 45px 85px 10px } .hospCon .hospList { width: 33.3% } #Content { padding: 0 10px 40px } .hospSpace { width: 59% } } @media screen and (max-width:1000px) { .hospMain { min-height: 500px } } @media screen and (max-width:900px) { .hospMain { min-height: unset } } @media screen and (max-width:800px) {#Content-Container {display: block;align-items: inherit;} .hospImg, .hospSpace .hospImg { left: -5% } .hospImg { width: 50% } .hospAdd { padding-top: 20px } #Sidebar { display: none } #Article { padding: 20px } } @media screen and (max-width:640px) { .exPatient, .newPatient { padding: 15px } .newPatient { font: 400 18px/20px Avenir, Helvetica, Arial, sans-serif } #Article { padding: 10px } .getDirections { padding: 10px 0 5px } .hospCon .hospList { padding: 130px 0 0; }.hospAdd {padding-top: 15px;}.hospAdd  {padding-bottom: 10px;} } @media screen and (max-width:600px) { .hospCon h3, .hospDiv, .staffpara { min-height: auto } .hospImg, .hospSpace .hospImg { left: auto } #Doctors h2, #Staff h2, .hospMain h1 { font: 500 30px/40px Albra, Helvetica, Arial, sans-serif } .hospDiv { height: auto }  .hospCon>ul { text-align: center } .hospCon li { text-align: left } .hospCon h3 { padding: 0 0 20px } .docWrap { padding: 20px 20px 0 } .docPhoneWrap { padding: 10px } .hospMain { width: 100%; padding: 0; display: block } .hospImg { width: 70%; float: none; position: relative; } } @media screen and (max-width:500px) { .hospImg { width: auto;height:250px; }.hospImg img { width: auto;height:100%;}.hospServices ul {column-count: 1;} }